fixed configs

frontend/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

frontend/src/pages/constructor.tsx

@@ -33,7 +33,7 @@ import { resolveAssetPlaybackUrl } from '../lib/assetUrl';
 import { parseJsonObject } from '../lib/parseJson';
 import { waitForPageImages } from '../lib/imagePreDecode';
 import { buildElementStyle } from '../lib/elementStyles';
-import type { PreloadPageLink } from '../types/preload';
+import type { PreloadPageLink, PreloadElement } from '../types/preload';
 import type {
   CanvasElementType,
   CanvasElement,
@@ -518,6 +518,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
 
   const [pages, setPages] = useState<TourPage[]>([]);
   const [pageLinks, setPageLinks] = useState<PreloadPageLink[]>([]);
+  const [allPagesPreloadElements, setAllPagesPreloadElements] = useState<
+    PreloadElement[]
+  >([]);
   const [assets, setAssets] = useState<ProjectAsset[]>([]);
   const [uiElementDefaultsByType, setUiElementDefaultsByType] = useState<
     Partial<Record<CanvasElementType, Partial<CanvasElement>>>
@@ -589,48 +592,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
 
   // Preload orchestrator for better DX when previewing pages
   // Preloads neighbor page assets and transition videos
-  // Build preload elements using config-driven field extraction
+  // Uses allPagesPreloadElements (extracted in loadData) for proper neighbor preloading
-  const preloadElements = useMemo(() => {
-    const { all: allFields, nested: nestedFields, nestedUrlFields } =
-      PRELOAD_CONFIG.assetFields;
-
-    return elements.map((e) => {
-      // Extract all URL fields from element using config
-      const contentObj: Record<string, unknown> = {};
-      allFields.forEach((field) => {
-        const value = e[field as keyof CanvasElement];
-        if (value !== undefined && value !== '') {
-          contentObj[field] = value;
-        }
-      });
-
-      // Extract nested arrays (galleryCards, carouselSlides) with their URL fields
-      nestedFields.forEach((nestedField) => {
-        const items = e[nestedField as keyof CanvasElement];
-        if (Array.isArray(items) && items.length > 0) {
-          // Cast to array of unknown objects for field extraction
-          const itemsArray = items as unknown as Record<string, unknown>[];
-          contentObj[nestedField] = itemsArray.map((item) => {
-            const extracted: Record<string, unknown> = {};
-            nestedUrlFields.forEach((urlField) => {
-              if (item[urlField] !== undefined && item[urlField] !== '') {
-                extracted[urlField] = item[urlField];
-              }
-            });
-            return extracted;
-          });
-        }
-      });
-
-      return {
-        id: e.id,
-        pageId: activePageId,
-        element_type: e.type,
-        content_json: JSON.stringify(contentObj),
-      };
-    });
-  }, [elements, activePageId]);
-
   const preloadOrchestrator = usePreloadOrchestrator({
     pages: pages.map((p) => ({
       id: p.id,
@@ -638,7 +600,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       background_video_url: p.background_video_url,
     })),
     pageLinks,
-    elements: preloadElements,
+    elements: allPagesPreloadElements, // Use elements from ALL pages for proper neighbor preloading
     currentPageId: activePageId,
     enabled: !isLoading && !!activePageId,
     maxNeighborDepth: 1, // Reduced depth for constructor to minimize network load
@@ -1079,8 +1041,51 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         setProjectName(projectResponse?.data?.name || '');
         setPages(pageRows);
 
-        // Build synthetic page_links from navigation elements in all pages' ui_schema_json
+        // Build synthetic page_links and preload elements from all pages' ui_schema_json
         const syntheticPageLinks: typeof pageLinkRows = [];
+        const allPreloadElements: PreloadElement[] = [];
+
+        // Helper to extract asset URL fields from elements using PRELOAD_CONFIG
+        const extractAssetFields = (
+          element: Record<string, unknown>,
+        ): Record<string, unknown> => {
+          const {
+            all: allFields,
+            nested: nestedFields,
+            nestedUrlFields,
+          } = PRELOAD_CONFIG.assetFields;
+          const contentObj: Record<string, unknown> = {};
+
+          allFields.forEach((field) => {
+            const value = element[field];
+            if (value !== undefined && value !== '') {
+              contentObj[field] = value;
+            }
+          });
+
+          nestedFields.forEach((nestedField) => {
+            const items = element[nestedField];
+            if (Array.isArray(items) && items.length > 0) {
+              contentObj[nestedField] = items.map(
+                (item: Record<string, unknown>) => {
+                  const extracted: Record<string, unknown> = {};
+                  nestedUrlFields.forEach((urlField) => {
+                    if (
+                      item[urlField] !== undefined &&
+                      item[urlField] !== ''
+                    ) {
+                      extracted[urlField] = item[urlField];
+                    }
+                  });
+                  return extracted;
+                },
+              );
+            }
+          });
+
+          return contentObj;
+        };
+
         pageRows.forEach((page) => {
           try {
             const uiSchema =
@@ -1091,6 +1096,20 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
               ? uiSchema.elements
               : [];
             pageElements.forEach((el: any) => {
+              // Build preload element with correct pageId for preloading
+              const contentObj = extractAssetFields(el);
+              if (Object.keys(contentObj).length > 0) {
+                allPreloadElements.push({
+                  id:
+                    el.id ||
+                    `element-${page.id}-${Math.random().toString(36).slice(2)}`,
+                  pageId: page.id, // Use page's ID, not activePageId
+                  element_type: el.type,
+                  content_json: JSON.stringify(contentObj),
+                });
+              }
+
+              // Build synthetic page link for navigation elements
               if (el.targetPageId && typeof el.targetPageId === 'string') {
                 syntheticPageLinks.push({
                   id: `synthetic-${page.id}-${el.id}`,
@@ -1113,6 +1132,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
 
         // Combine API page_links with synthetic ones from navigation elements
         setPageLinks([...pageLinkRows, ...syntheticPageLinks]);
+        setAllPagesPreloadElements(allPreloadElements);
         setAssets(assetRows);
 
         const uiElementRows: UiElementDefault[] = Array.isArray(