From 7646cb301c6b2c29308b72d7c498de1b331c1a72 Mon Sep 17 00:00:00 2001
From: Nicolas Dorseuil <nicolas@gitbook.io>
Date: Tue, 23 Jun 2026 20:44:16 +0200
Subject: [PATCH] Add GITBOOK_APP_URL prop to StructurePreview component and
 update Page to pass it

---
 .../[siteData]/~gitbook/structure/demo/page.tsx  |  8 +++++++-
 .../StructurePreview/StructurePreview.tsx        | 16 +++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/structure/demo/page.tsx b/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/structure/demo/page.tsx
index 7c5ccb372..2655a892e 100644
--- a/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/structure/demo/page.tsx
+++ b/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/structure/demo/page.tsx
@@ -1,5 +1,6 @@
 import { type RouteLayoutParams, getDynamicSiteContext } from '@/app/utils';
 import { StructurePreview } from '@/components/StructurePreview';
+import { GITBOOK_APP_URL } from '@/lib/env';
 import { getStructurePreviewSnapshot } from '../snapshot';
 
 type PageProps = {
@@ -8,5 +9,10 @@ type PageProps = {
 
 export default async function Page(props: PageProps) {
     const { context } = await getDynamicSiteContext(await props.params);
-    return <StructurePreview initialSnapshot={getStructurePreviewSnapshot(context)} />;
+    return (
+        <StructurePreview
+            initialSnapshot={getStructurePreviewSnapshot(context)}
+            GITBOOK_APP_URL={GITBOOK_APP_URL}
+        />
+    );
 }
diff --git a/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx b/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
index e63a75127..203b08f9f 100644
--- a/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
+++ b/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
@@ -68,20 +68,26 @@ import type {
     StructurePreviewNavigationMessage,
     StructurePreviewSnapshot,
 } from './types';
-import { GITBOOK_APP_URL } from '@/lib/env/globals';
 
 const PREVIEW_CONTENT_REF = {
     kind: 'url',
     url: '#',
 } as ContentRef;
 
-export function StructurePreview(props: { initialSnapshot: StructurePreviewSnapshot }) {
-    const { initialSnapshot } = props;
+export function StructurePreview(props: {
+    initialSnapshot: StructurePreviewSnapshot;
+    GITBOOK_APP_URL: string;
+}) {
+    const { initialSnapshot, GITBOOK_APP_URL } = props;
     const [snapshot, setSnapshot] = React.useState(initialSnapshot);
 
     React.useEffect(() => {
         const handleMessage = (event: MessageEvent<unknown>) => {
-            if (event.source !== window.parent || event.origin !== GITBOOK_APP_URL || !isStructurePreviewMessage(event.data)) {
+            if (
+                event.source !== window.parent ||
+                event.origin !== GITBOOK_APP_URL ||
+                !isStructurePreviewMessage(event.data)
+            ) {
                 return;
             }
 
@@ -346,7 +352,7 @@ function StructurePreviewVariantSelector(props: { snapshot: StructurePreviewSnap
                 ) : null}
                 <div className="ml-5 flex flex-col gap-6">
                     {Array.from({ length: 4 }).map((_, group) => (
-                        <div className="flex flex-col gap-2">
+                        <div className="flex flex-col gap-2" key={group}>
                             {Array.from({ length: [3, 5, 4, 3][group] ?? 0 }).map((_, index) => (
                                 <SkeletonParagraph
                                     key={index}