@akinon/pz-theme 2.0.41-beta.0 → 2.0.41

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.41-beta.0
+## 2.0.41
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.41-beta.0
-  - @akinon/theme-contract@2.0.41-beta.0
+- 02840711: ZERO-4725: Make every account subpage individually takeover-able — new account-dashboard-body and account-contact-body slugs, a ChromeSlot per account subpage plus header and footer slots in the reference app (route groups keep order cancellation out of the detail takeover), an account-menu slot with the project menu as fallback, a PREVIEW_AUTH_STATE report so the editor page picker can offer account pages once the preview signs in, embed-aware SameSite on auth and commerce session cookies, and an editor bridge that can no longer be poisoned into posting at the preview's own origin
+  - @akinon/next@2.0.41
+  - @akinon/theme-contract@2.0.41
 
 ## 2.0.40
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.41-beta.0",
+  "version": "2.0.41",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.41-beta.0",
+    "@akinon/next": "2.0.41",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.41-beta.0",
+    "@akinon/theme-contract": "2.0.41",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.41-beta.0",
+    "@akinon/next": "2.0.41",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/account-slot-coverage.test.ts

@@ -0,0 +1,86 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { PLACEHOLDER_SLUGS } from '../chrome/placeholder-slugs';
+import { isPageMountedSlug } from '../chrome/route-slug';
+
+/**
+ * PAGE_MOUNTED_SLUGS is a promise: "a page or layout mounts this slug's slot
+ * itself, so a route-aware catch-all must skip it". For a while the account
+ * half of that promise was false — most account slugs were declared
+ * page-mounted while nothing mounted them, so the editor offered pages the
+ * storefront never read. This suite pins each slug to the exact layout that
+ * mounts it in the reference app (a token anywhere in the tree would also
+ * match comments or a mount under the wrong route).
+ */
+
+const ACCOUNT_APP_DIR = path.resolve(
+  __dirname,
+  '../../../..',
+  'apps/projectzeronext/src/app/[pz]/account'
+);
+
+/** Placeholder key -> the file (relative to the account dir) mounting it. */
+const EXPECTED_MOUNTS: Record<string, string> = {
+  accountShell: 'layout.tsx',
+  accountMenu: 'layout.tsx',
+  accountDashboard: '(dashboard)/layout.tsx',
+  accountOrders: 'orders/(list)/layout.tsx',
+  accountOrderDetail: 'orders/[id]/(detail)/layout.tsx',
+  accountAddresses: 'address/layout.tsx',
+  accountProfile: 'profile/layout.tsx',
+  accountChangePassword: 'change-password/layout.tsx',
+  accountChangeEmail: 'change-email/layout.tsx',
+  accountCoupons: 'coupons/layout.tsx',
+  accountFavourites: 'favourite-products/layout.tsx',
+  accountFaq: 'faq/layout.tsx',
+  accountContact: 'contact/layout.tsx'
+};
+
+// No scaffold page exists for these routes yet, so there is nothing to
+// mount. The dir assertion below fails the moment someone adds the route —
+// that is the cue to mount the slot and shrink this list.
+const UNMOUNTED_ACCOUNT_KEYS: Record<string, string> = {
+  accountNotifications: 'notification-settings',
+  accountStockAlerts: 'stock-waiting-products'
+};
+
+const getMountableAccountKeys = () =>
+  Object.keys(PLACEHOLDER_SLUGS).filter(
+    (key) =>
+      key.startsWith('account') &&
+      isPageMountedSlug(
+        PLACEHOLDER_SLUGS[key as keyof typeof PLACEHOLDER_SLUGS]
+      )
+  );
+
+const maybeDescribe = fs.existsSync(ACCOUNT_APP_DIR)
+  ? describe
+  : describe.skip;
+
+maybeDescribe('account slot coverage in the reference app', () => {
+  it('mounts every page-mounted account slug in its own layout', () => {
+    Object.entries(EXPECTED_MOUNTS).forEach(([key, relativePath]) => {
+      const file = path.join(ACCOUNT_APP_DIR, relativePath);
+      expect(fs.existsSync(file)).toBe(true);
+      expect(fs.readFileSync(file, 'utf8')).toMatch(
+        new RegExp(`PLACEHOLDER_SLUGS\\.${key}\\b`)
+      );
+    });
+  });
+
+  it('accounts for every mountable account key exactly once', () => {
+    const covered = [
+      ...Object.keys(EXPECTED_MOUNTS),
+      ...Object.keys(UNMOUNTED_ACCOUNT_KEYS)
+    ].sort();
+
+    expect(covered).toEqual(getMountableAccountKeys().sort());
+  });
+
+  it('keeps the unmounted list honest: those routes have no scaffold page', () => {
+    Object.values(UNMOUNTED_ACCOUNT_KEYS).forEach((dirName) => {
+      expect(fs.existsSync(path.join(ACCOUNT_APP_DIR, dirName))).toBe(false);
+    });
+  });
+});

package/src/__tests__/chrome-takeover-gate.test.tsx

@@ -249,4 +249,50 @@ describe('ChromeFallback takeover gate', () => {
     pushTheme([]);
     expect(screen.getByTestId('project-header')).toBeInTheDocument();
   });
+
+  it('starts hidden when the server rendered a composition and returns on removal', () => {
+    // The composed ChromeSlot branch ships the fallback too, hidden. Without
+    // it, deleting a menu or header composition blanked the area until a
+    // full reload — there was nothing left in the tree to come back.
+    render(
+      <ChromeFallback slug="header" initiallyOverridden>
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    expect(screen.queryByTestId('project-header')).not.toBeInTheDocument();
+
+    pushTheme([]);
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+  });
+});
+
+describe('ChromeFallback on the live site', () => {
+  beforeAll(() => {
+    // Not framed: the live site is its own top window.
+    Object.defineProperty(window, 'top', {
+      configurable: true,
+      value: window
+    });
+  });
+
+  it('never renders the fallback under a server-rendered composition', () => {
+    const { container } = render(
+      <ChromeFallback slug="header" initiallyOverridden>
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders the brand markup when there is no composition', () => {
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="live-header">project header</div>
+      </ChromeFallback>
+    );
+
+    expect(screen.getByTestId('live-header')).toBeInTheDocument();
+  });
 });

package/src/__tests__/editor-bridge-target.test.ts

@@ -0,0 +1,104 @@
+/**
+ * Where an outbound message goes when the editor has not spoken yet.
+ *
+ * The bridge falls back to `document.referrer` to find the embedding editor
+ * — but after an in-iframe navigation (a login redirect, a link click) the
+ * referrer is the PREVIOUS STOREFRONT PAGE. Targeting it posts the message
+ * at the iframe's own origin, the parent's origin check drops it silently,
+ * and one-shot messages such as PREVIEW_AUTH_STATE never arrive: the editor
+ * keeps hiding the account pages from a signed-in preview.
+ */
+
+const EDITOR_A = 'http://editor-a.example';
+const EDITOR_B = 'http://editor-b.example';
+
+type Bridge = typeof import('../editor-bridge');
+
+const loadBridge = (): Bridge => {
+  let bridge: Bridge;
+  jest.isolateModules(() => {
+    bridge = require('../editor-bridge');
+  });
+  return bridge!;
+};
+
+const setReferrer = (value: string) => {
+  Object.defineProperty(document, 'referrer', {
+    configurable: true,
+    value
+  });
+};
+
+describe('postToEditor target resolution', () => {
+  const postMessage = jest.fn();
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'top', {
+      configurable: true,
+      value: { name: 'designer' }
+    });
+    Object.defineProperty(window, 'parent', {
+      configurable: true,
+      value: { postMessage }
+    });
+  });
+
+  beforeEach(() => {
+    postMessage.mockClear();
+    process.env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS = `${EDITOR_A},${EDITOR_B}`;
+  });
+
+  afterEach(() => {
+    delete process.env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS;
+  });
+
+  it('uses the referrer when it is a trusted embedder', () => {
+    setReferrer(`${EDITOR_B}/builder`);
+
+    loadBridge().postToEditor({
+      type: 'PREVIEW_AUTH_STATE',
+      data: { isAuthenticated: true }
+    });
+
+    expect(postMessage).toHaveBeenCalledTimes(1);
+    expect(postMessage.mock.calls[0][1]).toBe(EDITOR_B);
+  });
+
+  it('does not let same-window traffic poison the editor origin', () => {
+    setReferrer('');
+    const bridge = loadBridge();
+
+    // Next's dev overlay and react-refresh post to their own window; the
+    // event carries this window's origin, which local-dev trust would accept.
+    const selfEvent = {
+      origin: window.location.origin,
+      source: window,
+      data: { type: 'UPDATE_THEME' }
+    } as unknown as MessageEvent;
+    expect(bridge.isTrustedEditorEvent(selfEvent)).toBe(false);
+
+    bridge.postToEditor({
+      type: 'PREVIEW_AUTH_STATE',
+      data: { isAuthenticated: true }
+    });
+
+    const targets = postMessage.mock.calls.map((call) => call[1]);
+    expect(targets).not.toContain(window.location.origin);
+    expect(targets.sort()).toEqual([EDITOR_A, EDITOR_B].sort());
+  });
+
+  it('never targets the window own origin after an in-iframe navigation', () => {
+    // Post-login referrer: the storefront itself.
+    setReferrer(`${window.location.origin}/users/auth`);
+
+    loadBridge().postToEditor({
+      type: 'PREVIEW_AUTH_STATE',
+      data: { isAuthenticated: true }
+    });
+
+    const targets = postMessage.mock.calls.map((call) => call[1]);
+    expect(targets).not.toContain(window.location.origin);
+    // Falls through to the allowlist instead of dropping the message.
+    expect(targets.sort()).toEqual([EDITOR_A, EDITOR_B].sort());
+  });
+});

package/src/__tests__/route-slug.test.ts

@@ -23,6 +23,8 @@ describe('resolveBodySlug', () => {
       '/account/favourite-products/',
       '/account/stock-waiting-products/',
       '/account/notification-settings/',
+      '/account/faq',
+      '/account/contact',
       '/users/orders',
       '/users/orders/12345'
     ];
@@ -36,6 +38,51 @@ describe('resolveBodySlug', () => {
     expect(seen.size).toBe(accountPaths.length);
   });
 
+  it('gives the account root its own body and keeps the shell for the rest', () => {
+    expect(resolveBodySlug('/account')).toBe(
+      PLACEHOLDER_SLUGS.accountDashboard
+    );
+    expect(resolveBodySlug('/account/')).toBe(
+      PLACEHOLDER_SLUGS.accountDashboard
+    );
+    expect(resolveBodySlug('/account/contact')).toBe(
+      PLACEHOLDER_SLUGS.accountContact
+    );
+    // Screens with no dedicated slug compose the layout-level shell band.
+    expect(resolveBodySlug('/account/my-quotations')).toBe(
+      PLACEHOLDER_SLUGS.accountShell
+    );
+    // A continued segment is a different screen — it must not compose its
+    // neighbour's placeholder.
+    expect(resolveBodySlug('/account/contact-us')).toBe(
+      PLACEHOLDER_SLUGS.accountShell
+    );
+    expect(resolveBodySlug('/account/address-book')).toBe(
+      PLACEHOLDER_SLUGS.accountShell
+    );
+  });
+
+  it('accepts the favourites spellings brands actually ship', () => {
+    [
+      '/account/favourite-products',
+      '/account/favorite-products',
+      '/account/favourites',
+      '/account/favorites',
+      '/account/wishlist'
+    ].forEach((path) => {
+      expect(resolveBodySlug(path)).toBe(PLACEHOLDER_SLUGS.accountFavourites);
+    });
+  });
+
+  it('keeps deep account paths on their section slug', () => {
+    expect(resolveBodySlug('/account/address/5')).toBe(
+      PLACEHOLDER_SLUGS.accountAddresses
+    );
+    expect(resolveBodySlug('/users/orders/5/cancellation')).toBe(
+      PLACEHOLDER_SLUGS.accountOrderDetail
+    );
+  });
+
   it('matches the deeper route first', () => {
     expect(resolveBodySlug('/users/orders')).toBe(
       PLACEHOLDER_SLUGS.accountOrders

package/src/chrome/chrome-fallback.tsx

@@ -16,14 +16,28 @@ import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
  */
 export function ChromeFallback({
   slug,
-  children
+  children,
+  wrapperClassName,
+  initiallyOverridden = false
 }: {
   slug: string;
   children: React.ReactNode;
+  /**
+   * Applied to the live-site wrapper only. The designer overlay below needs
+   * a real positioned box for its scrim, so it deliberately ignores this.
+   */
+  wrapperClassName?: string;
+  /**
+   * True when the server rendered a composition for this slug. The brand
+   * markup then stays out of the flow — on the live site permanently, in
+   * the designer until the composition's last section is removed and the
+   * project markup has to come back.
+   */
+  initiallyOverridden?: boolean;
 }) {
   const [inDesigner, setInDesigner] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const [isOverridden, setIsOverridden] = useState(false);
+  const [isOverridden, setIsOverridden] = useState(initiallyOverridden);
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.self !== window.top) {
@@ -76,7 +90,15 @@ export function ChromeFallback({
   }, [slug]);
 
   if (!inDesigner) {
-    return <div data-chrome-fallback={slug}>{children}</div>;
+    // Composed on the live site: the composition owns the area, the brand
+    // markup must never double-render under it.
+    if (initiallyOverridden) return null;
+
+    return (
+      <div data-chrome-fallback={slug} className={wrapperClassName}>
+        {children}
+      </div>
+    );
   }
 
   if (isOverridden) return null;

package/src/chrome/chrome-slot.tsx

@@ -18,6 +18,18 @@ interface ChromeSlotProps {
    * what the blocks expect.
    */
   pageContext?: Record<string, unknown> | null;
+  /**
+   * Class for the slot's wrapper element. Pass `contents` when the slot
+   * replaces a direct flex/grid child, so the wrapper does not become a box
+   * of its own and break the parent layout.
+   */
+  className?: string;
+  /**
+   * Class for the fallback wrapper on the live site. Pair with
+   * `className="contents"` so the brand markup keeps owning its own layout
+   * classes; the designer overlay keeps a real box either way.
+   */
+  fallbackClassName?: string;
 }
 
 /**
@@ -29,7 +41,9 @@ interface ChromeSlotProps {
 export default async function ChromeSlot({
   slug,
   fallback,
-  pageContext = null
+  pageContext = null,
+  className,
+  fallbackClassName
 }: ChromeSlotProps) {
   let hasComposition = false;
 
@@ -50,16 +64,31 @@ export default async function ChromeSlot({
 
   if (hasComposition) {
     return (
-      <div data-chrome-slot={slug}>
+      <div data-chrome-slot={slug} className={className}>
+        {/* The fallback ships hidden: on the live site it never renders, but
+            in the designer it must be able to COME BACK when the last
+            section is removed — without it in the tree, deleting a menu or
+            header composition would blank the area until a full reload. */}
+        {fallback ? (
+          <ChromeFallback
+            slug={slug}
+            wrapperClassName={fallbackClassName}
+            initiallyOverridden
+          >
+            {fallback}
+          </ChromeFallback>
+        ) : null}
         <ThemePlaceholder slug={slug} pageContext={pageContext} />
       </div>
     );
   }
 
   return (
-    <div data-chrome-slot={slug}>
+    <div data-chrome-slot={slug} className={className}>
       {fallback ? (
-        <ChromeFallback slug={slug}>{fallback}</ChromeFallback>
+        <ChromeFallback slug={slug} wrapperClassName={fallbackClassName}>
+          {fallback}
+        </ChromeFallback>
       ) : null}
       {/* Empty until the designer overrides this area from the editor */}
       <ThemePlaceholder slug={slug} pageContext={pageContext} />

package/src/chrome/placeholder-slugs.ts

@@ -26,6 +26,7 @@ export const PLACEHOLDER_SLUGS = {
   // across orders, addresses, profile and the rest.
   accountShell: 'account-page-body',
   accountMenu: 'account-menu',
+  accountDashboard: 'account-dashboard-body',
   accountOrders: 'account-orders-body',
   accountOrderDetail: 'account-order-detail-body',
   accountAddresses: 'account-address-body',
@@ -35,6 +36,7 @@ export const PLACEHOLDER_SLUGS = {
   accountCoupons: 'account-coupons-body',
   accountFavourites: 'account-favourites-body',
   accountFaq: 'account-faq-content',
+  accountContact: 'account-contact-body',
   accountNotifications: 'account-notifications-body',
   accountStockAlerts: 'account-stock-alerts-body',
 

package/src/chrome/preview-auth-state.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useSession } from 'next-auth/react';
+
+import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
+
+/**
+ * Reports the preview session's auth state to the editor, which hides the
+ * account entries of its page picker until the preview signs in. Mount once
+ * from the root layout: `postToEditor` no-ops outside the editor iframe and
+ * only posts to trusted origins, so the reporter is inert on the live site.
+ *
+ * Deliberately client-side. Reading the session on the server would bake
+ * `isAuthenticated: false` into force-static pages, and the editor would
+ * drop its account entries every time a cached page loads in the preview.
+ */
+export function PreviewAuthStateReporter() {
+  const { status } = useSession();
+  const statusRef = useRef(status);
+  statusRef.current = status;
+
+  useEffect(() => {
+    if (status === 'loading') return;
+    postToEditor({
+      type: 'PREVIEW_AUTH_STATE',
+      data: { isAuthenticated: status === 'authenticated' }
+    });
+  }, [status]);
+
+  // The mount-time post can race the origin handshake (before the editor's
+  // first frame the bridge can only guess the target). Re-report once real
+  // editor traffic proves the origin — accepting the event also records it
+  // as the postMessage target, so this send cannot miss.
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
+      if (statusRef.current === 'loading') return;
+      postToEditor({
+        type: 'PREVIEW_AUTH_STATE',
+        data: { isAuthenticated: statusRef.current === 'authenticated' }
+      });
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return null;
+}

package/src/chrome/route-slug.ts

@@ -19,30 +19,39 @@ export type RouteSlugRule = [RegExp, string];
  * resolves to the order detail body and not to the order list.
  */
 const DEFAULT_RULES: RouteSlugRule[] = [
-  // Account — deepest first
+  // Account — deepest first. The detail rule also matches deeper order
+  // screens (e.g. cancellation); the reference app only mounts the slot on
+  // the detail screen itself, so those stay code-owned.
   [
     /^\/(account|users)\/orders\/[^/]+/,
     PLACEHOLDER_SLUGS.accountOrderDetail
   ],
   [/^\/(account|users)\/orders\/?$/, PLACEHOLDER_SLUGS.accountOrders],
-  [/^\/account\/address/, PLACEHOLDER_SLUGS.accountAddresses],
-  [/^\/account\/profile/, PLACEHOLDER_SLUGS.accountProfile],
-  [/^\/account\/change-password/, PLACEHOLDER_SLUGS.accountChangePassword],
-  [/^\/account\/change-email/, PLACEHOLDER_SLUGS.accountChangeEmail],
-  [/^\/account\/coupons/, PLACEHOLDER_SLUGS.accountCoupons],
+  // Every section rule ends at a segment boundary, mirroring the editor's
+  // table: a continued segment (contact-us, address-book) is a DIFFERENT
+  // screen and must fall through to the shell, not compose its neighbour.
+  [/^\/account\/address(es)?(\/|$)/, PLACEHOLDER_SLUGS.accountAddresses],
+  [/^\/account\/profile(\/|$)/, PLACEHOLDER_SLUGS.accountProfile],
+  [/^\/account\/change-password(\/|$)/, PLACEHOLDER_SLUGS.accountChangePassword],
+  [/^\/account\/change-email(\/|$)/, PLACEHOLDER_SLUGS.accountChangeEmail],
+  [/^\/account\/coupons(\/|$)/, PLACEHOLDER_SLUGS.accountCoupons],
   [
-    /^\/account\/(favourite-products|favorites|wishlist)/,
+    /^\/account\/(favourite-products|favorite-products|favourites|favorites|wishlist)(\/|$)/,
     PLACEHOLDER_SLUGS.accountFavourites
   ],
   [
-    /^\/account\/stock-(waiting-products|alerts)/,
+    /^\/account\/stock-(waiting-products|alerts)(\/|$)/,
     PLACEHOLDER_SLUGS.accountStockAlerts
   ],
   [
-    /^\/account\/notification-settings/,
+    /^\/account\/notification-settings(\/|$)/,
     PLACEHOLDER_SLUGS.accountNotifications
   ],
-  [/^\/account\/faq/, PLACEHOLDER_SLUGS.accountFaq],
+  [/^\/account\/contact(\/|$)/, PLACEHOLDER_SLUGS.accountContact],
+  [/^\/account\/faq(\/|$)/, PLACEHOLDER_SLUGS.accountFaq],
+  // The account root screen owns its body; the shell slug below stays the
+  // layout-level band, so a dashboard composition cannot leak onto it.
+  [/^\/account\/?$/, PLACEHOLDER_SLUGS.accountDashboard],
   // Any other account screen composes the shell body, which is what the
   // account layout mounts for it.
   [/^\/account(\/|$)/, PLACEHOLDER_SLUGS.accountShell],
@@ -92,6 +101,7 @@ const PAGE_MOUNTED_SLUGS = new Set<string>([
   PLACEHOLDER_SLUGS.orderSuccess,
   PLACEHOLDER_SLUGS.accountShell,
   PLACEHOLDER_SLUGS.accountMenu,
+  PLACEHOLDER_SLUGS.accountDashboard,
   PLACEHOLDER_SLUGS.accountOrders,
   PLACEHOLDER_SLUGS.accountOrderDetail,
   PLACEHOLDER_SLUGS.accountAddresses,
@@ -103,6 +113,7 @@ const PAGE_MOUNTED_SLUGS = new Set<string>([
   PLACEHOLDER_SLUGS.accountStockAlerts,
   PLACEHOLDER_SLUGS.accountNotifications,
   PLACEHOLDER_SLUGS.accountFaq,
+  PLACEHOLDER_SLUGS.accountContact,
   PLACEHOLDER_SLUGS.flatPage
 ]);
 

package/src/editor-bridge.ts

@@ -47,6 +47,17 @@ const warnOnce = (key: string, message: string) => {
  * its origin as the postMessage target for subsequent `postToEditor` calls.
  */
 export function isTrustedEditorEvent(event: MessageEvent): boolean {
+  // The editor is the embedding page, so its frames arrive from another
+  // window. Same-window postMessage traffic (Next's dev overlay, react
+  // refresh, app code) carries this window's own origin — which the local
+  // dev allowance would happily trust — and accepting it would poison
+  // `activeEditorOrigin` with ourselves: every later message then targets
+  // the preview's own origin and silently misses the real editor.
+  if (typeof window !== 'undefined') {
+    if (event.source === window) return false;
+    if (event.origin === window.location.origin) return false;
+  }
+
   if (guard.isTrusted(event.origin)) {
     activeEditorOrigin = event.origin;
     return true;
@@ -102,9 +113,16 @@ const resolveTargetOrigins = (): string[] => {
 
   // Before the editor's first message (e.g. IFRAME_READY on mount), the
   // embedding page's origin is only known via the referrer — trust it only
-  // if the guard does.
+  // if the guard does. After an in-iframe navigation (login redirect, a
+  // link click) the referrer is the PREVIOUS STOREFRONT PAGE, not the
+  // editor — targeting it would silently drop the message on the parent's
+  // origin check, so the window's own origin never qualifies.
   const referrerOrigin = safeOrigin(document.referrer);
-  if (referrerOrigin && guard.isTrusted(referrerOrigin)) {
+  if (
+    referrerOrigin &&
+    referrerOrigin !== window.location.origin &&
+    guard.isTrusted(referrerOrigin)
+  ) {
     return [referrerOrigin];
   }
 

package/src/index.ts

@@ -22,6 +22,7 @@ export type { Block } from './theme-block';
 
 export { default as ChromeSlot } from './chrome/chrome-slot';
 export { ChromeFallback } from './chrome/chrome-fallback';
+export { PreviewAuthStateReporter } from './chrome/preview-auth-state';
 export { LiveBasketPageContext } from './chrome/live-basket-page-context';
 export {
   LiveOrderSuccessPageContext,