@bravostudioai/react 0.1.34 → 0.1.36

package/dist/components/EncoreApp.js.map

@@ -1 +1 @@
-{"version":3,"file":"EncoreApp.js","sources":["../../src/components/EncoreApp.tsx"],"sourcesContent":["\"use client\";\nimport useSWR from \"swr\";\nimport fetcher from \"../lib/fetcher\";\nimport useEncoreState from \"../stores/useEncoreState\";\nimport React, {\n  Suspense,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { isLocalMode, setLocalModeOverride } from \"../lib/localMode\";\nimport type { EncoreActionPayload } from \"../contexts/EncoreActionContext\";\nimport DynamicComponent from \"./DynamicComponent\";\nimport { useEncoreRouter } from \"../contexts/EncoreRouterContext\";\nimport { usePusherUpdates } from \"../hooks/usePusherUpdates\";\nimport { useFontLoader } from \"../hooks/useFontLoader\";\nimport { useRepeatingContainers } from \"../hooks/useRepeatingContainers\";\nimport { EncoreContextProviders } from \"./EncoreContextProviders\";\nimport { patchPageData } from \"../lib/dataPatching\";\nimport logger from \"../lib/logger\";\n\n// Simple internal Link component that uses our router context\nconst Link = ({ to, children, style, ...props }: any) => {\n  const { navigate } = useEncoreRouter();\n  return (\n    <a\n      href={to}\n      onClick={(e) => {\n        e.preventDefault();\n        navigate(to);\n      }}\n      style={{ cursor: \"pointer\", ...style }}\n      {...props}\n    >\n      {children}\n    </a>\n  );\n};\n\n/**\n * Props for the EncoreApp component\n */\nexport type EncoreAppProps = {\n  /** Unique identifier for the Encore app */\n  appId: string;\n  /** Unique identifier for the page to render. If not provided, shows page selector UI */\n  pageId?: string;\n  /** Optional component identifier for context tracking */\n  componentId?: string;\n  /** Fallback UI to show during component loading */\n  fallback?: React.ReactNode;\n  /** Callback fired when the container size changes */\n  onSizeChange?: (size: { width: number; height: number }) => void;\n  /** Callback fired when the content size changes (including overflow) */\n  onContentSizeChange?: (size: { width: number; height: number }) => void;\n  /** Callback fired when user interactions trigger actions (button clicks, form submissions, etc.) */\n  onAction?: (payload: EncoreActionPayload) => void | Promise<void>;\n  /** Data bindings for components with encore:data tags. Maps component IDs to display values */\n  data?: Record<string, string | number | any[]>;\n  /** Force component loading from \"remote\" CDN or \"local\" filesystem */\n  source?: \"remote\" | \"local\";\n  /** Control repeating containers (sliders, lists) programmatically by container ID */\n  repeatingContainerControls?: Record<\n    string,\n    { currentIndex?: number; onIndexChange?: (index: number) => void }\n  >;\n  /** Control input groups (radio button-like behavior). Maps group name to active element */\n  inputGroups?: Record<string, string>;\n  /** Base URL for the Encore service API */\n  baseURL?: string;\n  /** Provide app definition directly instead of fetching (for offline/bundled deployments) */\n  appDefinition?: any;\n  /** Provide page definition directly instead of fetching (for offline/bundled deployments) */\n  pageDefinition?: any;\n  /** Provide component code directly instead of fetching (for offline/bundled deployments) */\n  componentCode?: string;\n  /** Deployment mode: dynamic (default), optimistic, or production */\n  mode?: \"dynamic\" | \"optimistic\" | \"production\";\n};\n\ntype Props = EncoreAppProps;\n\ntype EncoreAssetsById = Record<string, { url?: string }>;\ntype EncoreState = {\n  setApp: (app: unknown) => void;\n  setAppId: (id: string) => void;\n  setPageId: (id: string) => void;\n  assetsById: EncoreAssetsById;\n};\n\nconst setAppSelector = (state: EncoreState) => state.setApp;\nconst setAppIdSelector = (state: EncoreState) => state.setAppId;\nconst setPageIdSelector = (state: EncoreState) => state.setPageId;\nconst assetsByIdSelector = (state: EncoreState) => state.assetsById;\n\n/**\n * Main Encore runtime component\n *\n * Loads and renders Encore Studio apps dynamically from the Encore service.\n * Handles data fetching, font loading, real-time updates, and component rendering.\n *\n * @example\n * // Basic usage\n * <EncoreApp appId=\"01ABC123\" pageId=\"01DEF456\" />\n *\n * @example\n * // With data binding\n * <EncoreApp\n *   appId=\"01ABC123\"\n *   pageId=\"01DEF456\"\n *   data={{\n *     \"title-component\": { text: \"Hello World\" }\n *   }}\n * />\n *\n * @example\n * // Controlling a slider\n * const [slideIndex, setSlideIndex] = useState(0);\n * <EncoreApp\n *   appId=\"01ABC123\"\n *   pageId=\"01DEF456\"\n *   repeatingContainerControls={{\n *     \"slider-123\": {\n *       currentIndex: slideIndex,\n *       onIndexChange: setSlideIndex\n *     }\n *   }}\n * />\n */\nconst EncoreApp = ({\n  appId,\n  pageId,\n  componentId,\n  fallback,\n  onSizeChange,\n  onContentSizeChange,\n  onAction,\n  data,\n  source,\n  repeatingContainerControls,\n  inputGroups,\n  baseURL,\n  appDefinition,\n  pageDefinition,\n  componentCode,\n  mode,\n}: Props) => {\n  logger.debug(\"EncoreApp render\", { appId, pageId, mode });\n\n  // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches\n  // This must happen synchronously, not in useEffect, because useSWR will fetch immediately\n  if (baseURL) {\n    const currentBaseURL = useEncoreState.getState().baseURL;\n    if (currentBaseURL !== baseURL) {\n      useEncoreState.getState().setBaseURL(baseURL);\n    }\n  }\n\n  // Apply source override immediately so hooks below observe correct mode\n  if (source) {\n    setLocalModeOverride(source === \"local\" ? \"local\" : \"remote\");\n  }\n\n  const noRedirect = false;\n\n  const setApp = useEncoreState(setAppSelector);\n  const setAppId = useEncoreState(setAppIdSelector);\n  const setPageId = useEncoreState(setPageIdSelector);\n  const assetsById = useEncoreState(assetsByIdSelector);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const contentWrapperRef = useRef<HTMLDivElement | null>(null);\n\n  // Monitor content size changes\n  useEffect(() => {\n    if (!onContentSizeChange) return;\n    const element = contentWrapperRef.current;\n    if (!element) return;\n\n    const notify = () => {\n      // Use scroll dimensions to get full size including overflow\n      onContentSizeChange({\n        width: element.scrollWidth,\n        height: element.scrollHeight,\n      });\n    };\n\n    const observer = new ResizeObserver(() => {\n      notify();\n    });\n\n    // Emit initial size\n    notify();\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [onContentSizeChange]);\n\n  // State to force DynamicComponent reload when updates are received\n  const [reloadKey, setReloadKey] = useState<string | number>(0);\n  // Set up Pusher to listen for component updates\n  const handleUpdate = useCallback(() => {\n    // Increment reloadKey to force DynamicComponent to reload\n    setReloadKey((prev) => (typeof prev === \"number\" ? prev + 1 : Date.now()));\n  }, []);\n\n  // Only enable Pusher in remote mode - it doesn't make sense in local mode\n  usePusherUpdates({\n    appId,\n    pageId: pageId || undefined,\n    enabled: !isLocalMode() && !appDefinition,\n    onUpdate: handleUpdate,\n  });\n\n  const useLocalFlag = source === \"local\" || isLocalMode();\n\n  // Determine if we should fetch app definition\n  // Production: Do NOT fetch (use appDefinition)\n  // Dynamic: Fetch always (ignore appDefinition unless valid) - wait, dynamic assumes no bundled data usually, or if provided, use it? Current logic uses simple check.\n  // Optimistic: Fetch always, but use appDefinition as fallback/initial data\n\n  // Logic:\n  // If we have appDefinition:\n  // - Production: Use it, no fetch.\n  // - Optimistic: Use it as fallbackData (SWR), and fetch.\n  // - Dynamic (Edge Case): User provided data but wants dynamic? Treat same as Optimistic roughly, or just ignore data.\n  //   But usually Dynamic won't have appDefinition passed unless manually done.\n\n  // Refined Logic based on `mode`:\n  const isProductionMode = mode === \"production\";\n  const isOptimisticMode = mode === \"optimistic\";\n  // Default to dynamic if not specified\n  const isDynamicMode = !isProductionMode && !isOptimisticMode;\n\n  const shouldFetchApp = !isProductionMode && appId;\n  const appUrl = shouldFetchApp\n    ? `/devices/apps/${appId}${useLocalFlag ? \"?useLocal=1\" : \"\"}`\n    : null;\n\n  const appSWR = useSWR(appUrl, fetcher, {\n    suspense: isDynamicMode && !!appUrl, // Suspense only for Dynamic mode\n    fallbackData: isOptimisticMode && appDefinition ? appDefinition : undefined,\n    revalidateOnMount: true, // Ensure we fetch fresh data in optimistic mode\n  });\n\n  const app =\n    isProductionMode && appDefinition ? { data: appDefinition } : appSWR;\n\n  useEffect(() => {\n    setApp(app.data);\n  }, [app.data, setApp]);\n\n  // Load fonts declared in app.json\n  useFontLoader(app?.data);\n\n  useEffect(() => {\n    setAppId(appId);\n  }, [appId, setAppId]);\n\n  useEffect(() => {\n    if (!pageId) return;\n    setPageId(pageId);\n  }, [pageId, setPageId]);\n\n  // FIXME: Asset data should be embedded into & preloaded by component, not looked up like this\n  useEffect(() => {\n    if (Object.keys(assetsById).length === 0) return;\n    (async () => {\n      // Preload images in the browser\n      await Promise.allSettled(\n        Object.keys(assetsById).map((id) => {\n          if (assetsById[id].url) {\n            return new Promise((resolve) => {\n              const img = new Image();\n              img.onload = resolve;\n              img.onerror = resolve; // tolerate failures to avoid unhandled rejections\n              img.src = assetsById[id].url!;\n            });\n          }\n          return Promise.resolve();\n        })\n      );\n    })();\n  }, [assetsById]);\n\n  const shouldFetchPage = !isProductionMode && appId && pageId;\n  const pageUrl = shouldFetchPage\n    ? `/devices/apps/${appId}/node/${pageId}${\n        useLocalFlag ? \"?useLocal=1\" : \"\"\n      }`\n    : null;\n\n  logger.debug(\"Page data fetch\", { pageUrl, mode });\n\n  const pageSWR = useSWR(pageUrl, fetcher, {\n    suspense: isDynamicMode && !!pageUrl,\n    fallbackData:\n      isOptimisticMode && pageDefinition ? pageDefinition : undefined,\n    revalidateOnMount: true,\n  });\n\n  const pageData =\n    isProductionMode && pageDefinition ? { data: pageDefinition } : pageSWR;\n\n  // Specific logic for Component Code fetching in Optimistic Mode\n  // If optimistic, we have componentCode passed in (bundled). We use that initially.\n  // BUT we also want to fetch the latest component code in background.\n  // DynamicComponent uses 'componentCode' prop if present.\n  // We need to fetch the code separately and override the prop passed to DynamicComponent.\n\n  // We need to fetch the latest component JS in optimistic mode\n  // The DynamicComponent currently logic: if (componentCode) loadAMDModule(code) else fetchDep(name).\n  // We want: render with initial componentCode, BUT ALSO fetch new code, and when valid, switch to it.\n\n  const [optimisticCode, setOptimisticCode] = useState<string | undefined>(\n    componentCode\n  );\n\n  useEffect(() => {\n    // If in optimistic mode, we want to fetch the latest code\n    if (isOptimisticMode && appId && pageId && !isLocalMode()) {\n      // We can reuse the logic from DynamicComponent/dynamicModules roughly, or just fetch text.\n      // The URL logic is in dynamicModules.\n      // Let's just rely on DynamicComponent to do the fetching if we pass undefined?\n      // No, if we pass undefined it will suspend/show fallback. We want to show OLD code.\n\n      // So we renders with `optimisticCode` (initially bundled).\n      // We fire a background fetch. on success, updated `optimisticCode`.\n\n      const fetchLatestCode = async () => {\n        try {\n          // Replicating URL logic from dynamicModules for remote mode\n          const { CONST_COMPONENTS_CDN_URL } = await import(\"../../constants\");\n          const cacheBuster = Math.round(Date.now() / 1000);\n          const name = `${appId}/draft/components/${pageId}`;\n          const url = `${CONST_COMPONENTS_CDN_URL}/${name}.js?cacheBuster=${cacheBuster}`;\n\n          const resp = await fetch(url);\n          if (resp.ok) {\n            const text = await resp.text();\n            // Only update if different?\n            // Comparing huge strings might be expensive, but React state update checks equality anyway (ref).\n            // Let's just set it.\n            setOptimisticCode(text);\n            logger.debug(\"Refreshed optimistic component code\");\n          }\n        } catch (e) {\n          logger.warn(\"Failed to background refresh optimistic component\", e);\n        }\n      };\n\n      fetchLatestCode();\n    } else {\n      // If prop changes (e.g. from HMR or parent), sync it\n      setOptimisticCode(componentCode);\n    }\n  }, [componentCode, isOptimisticMode, appId, pageId]);\n\n  // Use the calculated optimistic code or the passed prop depending on mode\n  const effectiveComponentCode = isOptimisticMode\n    ? optimisticCode\n    : componentCode;\n\n  logger.debug(\"Page data loaded\", {\n    hasData: !!pageData?.data,\n    dataType: typeof pageData?.data,\n  });\n\n  // Memoize the context object to prevent infinite re-renders\n  // Only recreate when the actual data changes, not on every render\n  const context = useMemo(() => {\n    let clientData = pageData.data?.clientData;\n    logger.debug(\"Building context\", {\n      hasClientData: !!clientData,\n      clientDataKeys: Object.keys(clientData || {}).length,\n    });\n\n    // Apply layout heuristics to fix common issues\n    if (clientData) {\n      patchPageData(clientData);\n    }\n\n    return {\n      nodeData: undefined,\n      // Allow overriding specific values by element id.\n      // For now, this is used to override TextComponent content when the node has the PROP:TEXT_VAR tag.\n      textOverridesById: data,\n      // Support for encore:data:array tags - provide array data by component ID\n      arrayDataById: data,\n      // Support for standalone component data binding (encore:data tags at root level)\n      rootData: data,\n    };\n  }, [pageData.data?.clientData, data]);\n\n  // Manage repeating container controls (sliders, lists)\n  const repeatingContainerContextValue = useRepeatingContainers(\n    repeatingContainerControls\n  );\n\n  // Sync input groups from props to store\n  useEffect(() => {\n    if (inputGroups) {\n      const setInputGroupValue = useEncoreState.getState().setInputGroupValue;\n      Object.entries(inputGroups).forEach(([groupName, elementName]) => {\n        setInputGroupValue(groupName, elementName);\n      });\n    }\n  }, [inputGroups]);\n\n  // Observe size changes of the dynamic content container and notify consumer\n  useEffect(() => {\n    if (!onSizeChange) return;\n    const element = containerRef.current;\n    if (!element) return;\n    const notify = (entry: ResizeObserverEntry) => {\n      const cr = entry.contentRect;\n      onSizeChange({ width: cr.width, height: cr.height });\n    };\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        notify(entry);\n      }\n    });\n    // Emit initial size as soon as possible\n    const rect = element.getBoundingClientRect();\n    onSizeChange({ width: rect.width, height: rect.height });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [onSizeChange]);\n\n  // Per-instance source override\n  useEffect(() => {\n    if (!source) return;\n    setLocalModeOverride(source === \"local\" ? \"local\" : \"remote\");\n    return () => {\n      // Clear override when this instance unmounts\n      setLocalModeOverride(null);\n    };\n  }, [source]);\n\n  if (!pageId) {\n    return (\n      <div style={{ padding: \"30px\" }}>\n        <div style={{ overflowY: \"auto\" }}>\n          {(isLocalMode()\n            ? // Local mode: app.json provides pages under app.data.pages\n              ((app?.data as any)?.app?.data?.pages || []).map(\n                (pg: any) => pg?.id\n              )\n            : app?.data?.app.pageIds || []\n          ).map((p: string) => (\n            <Link\n              key={p}\n              to={`/apps/${appId}/pages/${p}?noRedirect=${noRedirect}`}\n              style={{\n                fontSize: 20,\n                display: \"block\",\n                marginBottom: \"10px\",\n              }}\n            >\n              {p}\n            </Link>\n          ))}\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        ref={contentWrapperRef}\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n        }}\n      >\n        <Suspense fallback={fallback || <div />}>\n          <EncoreContextProviders\n            componentId={componentId}\n            onAction={onAction}\n            repeatingContainerContextValue={repeatingContainerContextValue}\n            bindingContextValue={context}\n          >\n            <DynamicComponent\n              name={`${appId}/draft/components/${pageId}`}\n              fallback={fallback}\n              reloadKey={reloadKey}\n              componentCode={effectiveComponentCode}\n            />\n          </EncoreContextProviders>\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n\nexport default EncoreApp;\n"],"names":["Link","to","children","style","props","navigate","useEncoreRouter","jsx","e","setAppSelector","state","setAppIdSelector","setPageIdSelector","assetsByIdSelector","EncoreApp","appId","pageId","componentId","fallback","onSizeChange","onContentSizeChange","onAction","data","source","repeatingContainerControls","inputGroups","baseURL","appDefinition","pageDefinition","componentCode","mode","logger","useEncoreState","setLocalModeOverride","noRedirect","setApp","setAppId","setPageId","assetsById","containerRef","useRef","contentWrapperRef","useEffect","element","notify","observer","reloadKey","setReloadKey","useState","handleUpdate","useCallback","prev","usePusherUpdates","isLocalMode","useLocalFlag","isProductionMode","isOptimisticMode","isDynamicMode","appUrl","appSWR","useSWR","fetcher","app","useFontLoader","id","resolve","img","pageUrl","pageSWR","pageData","optimisticCode","setOptimisticCode","CONST_COMPONENTS_CDN_URL","cacheBuster","name","url","resp","text","effectiveComponentCode","context","useMemo","clientData","patchPageData","repeatingContainerContextValue","useRepeatingContainers","setInputGroupValue","groupName","elementName","entry","cr","entries","rect","Suspense","EncoreContextProviders","DynamicComponent","pg","p"],"mappings":"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"}
+{"version":3,"file":"EncoreApp.js","sources":["../../src/components/EncoreApp.tsx"],"sourcesContent":["\"use client\";\nimport useSWR from \"swr\";\nimport fetcher from \"../lib/fetcher\";\nimport useEncoreState from \"../stores/useEncoreState\";\nimport React, {\n  Suspense,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { isLocalMode, setLocalModeOverride } from \"../lib/localMode\";\nimport type { EncoreActionPayload } from \"../contexts/EncoreActionContext\";\nimport DynamicComponent from \"./DynamicComponent\";\nimport { useEncoreRouter } from \"../contexts/EncoreRouterContext\";\nimport { usePusherUpdates } from \"../hooks/usePusherUpdates\";\nimport { useFontLoader } from \"../hooks/useFontLoader\";\nimport { useRepeatingContainers } from \"../hooks/useRepeatingContainers\";\nimport { EncoreContextProviders } from \"./EncoreContextProviders\";\nimport { patchPageData } from \"../lib/dataPatching\";\nimport logger from \"../lib/logger\";\n\n// Simple internal Link component that uses our router context\nconst Link = ({ to, children, style, ...props }: any) => {\n  const { navigate } = useEncoreRouter();\n  return (\n    <a\n      href={to}\n      onClick={(e) => {\n        e.preventDefault();\n        navigate(to);\n      }}\n      style={{ cursor: \"pointer\", ...style }}\n      {...props}\n    >\n      {children}\n    </a>\n  );\n};\n\n/**\n * Props for the EncoreApp component\n */\nexport type EncoreAppProps = {\n  /** Unique identifier for the Encore app */\n  appId: string;\n  /** Unique identifier for the page to render. If not provided, shows page selector UI */\n  pageId?: string;\n  /** Optional component identifier for context tracking */\n  componentId?: string;\n  /** Fallback UI to show during component loading */\n  fallback?: React.ReactNode;\n  /** Callback fired when the container size changes */\n  onSizeChange?: (size: { width: number; height: number }) => void;\n  /** Callback fired when the content size changes (including overflow) */\n  onContentSizeChange?: (size: { width: number; height: number }) => void;\n  /** Callback fired when user interactions trigger actions (button clicks, form submissions, etc.) */\n  onAction?: (payload: EncoreActionPayload) => void | Promise<void>;\n  /** Data bindings for components with encore:data tags. Maps component IDs to display values */\n  data?: Record<string, string | number | any[]>;\n  /** Force component loading from \"remote\" CDN or \"local\" filesystem */\n  source?: \"remote\" | \"local\";\n  /** Control repeating containers (sliders, lists) programmatically by container ID */\n  repeatingContainerControls?: Record<\n    string,\n    { currentIndex?: number; onIndexChange?: (index: number) => void }\n  >;\n  /** Control input groups (radio button-like behavior). Maps group name to active element */\n  inputGroups?: Record<string, string>;\n  /** Base URL for the Encore service API */\n  baseURL?: string;\n  /** Provide app definition directly instead of fetching (for offline/bundled deployments) */\n  appDefinition?: any;\n  /** Provide page definition directly instead of fetching (for offline/bundled deployments) */\n  pageDefinition?: any;\n  /** Provide component code directly instead of fetching (for offline/bundled deployments) */\n  componentCode?: string;\n  /** Deployment mode: dynamic (default), optimistic, or production */\n  mode?: \"dynamic\" | \"optimistic\" | \"production\";\n  /** Map of embedded components by ID */\n  embeds?: Record<string, React.ReactNode>;\n};\n\ntype Props = EncoreAppProps;\n\ntype EncoreAssetsById = Record<string, { url?: string }>;\ntype EncoreState = {\n  setApp: (app: unknown) => void;\n  setAppId: (id: string) => void;\n  setPageId: (id: string) => void;\n  assetsById: EncoreAssetsById;\n};\n\nconst setAppSelector = (state: EncoreState) => state.setApp;\nconst setAppIdSelector = (state: EncoreState) => state.setAppId;\nconst setPageIdSelector = (state: EncoreState) => state.setPageId;\nconst assetsByIdSelector = (state: EncoreState) => state.assetsById;\n\n/**\n * Main Encore runtime component\n *\n * Loads and renders Encore Studio apps dynamically from the Encore service.\n * Handles data fetching, font loading, real-time updates, and component rendering.\n *\n * @example\n * // Basic usage\n * <EncoreApp appId=\"01ABC123\" pageId=\"01DEF456\" />\n *\n * @example\n * // With data binding\n * <EncoreApp\n *   appId=\"01ABC123\"\n *   pageId=\"01DEF456\"\n *   data={{\n *     \"title-component\": { text: \"Hello World\" }\n *   }}\n * />\n *\n * @example\n * // Controlling a slider\n * const [slideIndex, setSlideIndex] = useState(0);\n * <EncoreApp\n *   appId=\"01ABC123\"\n *   pageId=\"01DEF456\"\n *   repeatingContainerControls={{\n *     \"slider-123\": {\n *       currentIndex: slideIndex,\n *       onIndexChange: setSlideIndex\n *     }\n *   }}\n * />\n */\nconst EncoreApp = ({\n  appId,\n  pageId,\n  componentId,\n  fallback,\n  onSizeChange,\n  onContentSizeChange,\n  onAction,\n  data,\n  source,\n  repeatingContainerControls,\n  inputGroups,\n  baseURL,\n  appDefinition,\n  pageDefinition,\n  componentCode,\n  mode,\n  embeds,\n}: Props) => {\n  logger.debug(\"EncoreApp render\", { appId, pageId, mode });\n\n  // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches\n  // This must happen synchronously, not in useEffect, because useSWR will fetch immediately\n  if (baseURL) {\n    const currentBaseURL = useEncoreState.getState().baseURL;\n    if (currentBaseURL !== baseURL) {\n      useEncoreState.getState().setBaseURL(baseURL);\n    }\n  }\n\n  // Apply source override immediately so hooks below observe correct mode\n  if (source) {\n    setLocalModeOverride(source === \"local\" ? \"local\" : \"remote\");\n  }\n\n  const noRedirect = false;\n\n  const setApp = useEncoreState(setAppSelector);\n  const setAppId = useEncoreState(setAppIdSelector);\n  const setPageId = useEncoreState(setPageIdSelector);\n  const assetsById = useEncoreState(assetsByIdSelector);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const contentWrapperRef = useRef<HTMLDivElement | null>(null);\n\n  // Monitor content size changes\n  useEffect(() => {\n    if (!onContentSizeChange) return;\n    const element = contentWrapperRef.current;\n    if (!element) return;\n\n    const notify = () => {\n      // Use scroll dimensions to get full size including overflow\n      onContentSizeChange({\n        width: element.scrollWidth,\n        height: element.scrollHeight,\n      });\n    };\n\n    const observer = new ResizeObserver(() => {\n      notify();\n    });\n\n    // Emit initial size\n    notify();\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [onContentSizeChange]);\n\n  // State to force DynamicComponent reload when updates are received\n  const [reloadKey, setReloadKey] = useState<string | number>(0);\n  // Set up Pusher to listen for component updates\n  const handleUpdate = useCallback(() => {\n    // Increment reloadKey to force DynamicComponent to reload\n    setReloadKey((prev) => (typeof prev === \"number\" ? prev + 1 : Date.now()));\n  }, []);\n\n  // Only enable Pusher in remote mode - it doesn't make sense in local mode\n  usePusherUpdates({\n    appId,\n    pageId: pageId || undefined,\n    enabled: !isLocalMode() && !appDefinition,\n    onUpdate: handleUpdate,\n  });\n\n  const useLocalFlag = source === \"local\" || isLocalMode();\n\n  // Determine if we should fetch app definition\n  // Production: Do NOT fetch (use appDefinition)\n  // Dynamic: Fetch always (ignore appDefinition unless valid) - wait, dynamic assumes no bundled data usually, or if provided, use it? Current logic uses simple check.\n  // Optimistic: Fetch always, but use appDefinition as fallback/initial data\n\n  // Logic:\n  // If we have appDefinition:\n  // - Production: Use it, no fetch.\n  // - Optimistic: Use it as fallbackData (SWR), and fetch.\n  // - Dynamic (Edge Case): User provided data but wants dynamic? Treat same as Optimistic roughly, or just ignore data.\n  //   But usually Dynamic won't have appDefinition passed unless manually done.\n\n  // Refined Logic based on `mode`:\n  const isProductionMode = mode === \"production\";\n  const isOptimisticMode = mode === \"optimistic\";\n  // Default to dynamic if not specified\n  const isDynamicMode = !isProductionMode && !isOptimisticMode;\n\n  const shouldFetchApp = !isProductionMode && appId;\n  const appUrl = shouldFetchApp\n    ? `/devices/apps/${appId}${useLocalFlag ? \"?useLocal=1\" : \"\"}`\n    : null;\n\n  const appSWR = useSWR(appUrl, fetcher, {\n    suspense: isDynamicMode && !!appUrl, // Suspense only for Dynamic mode\n    fallbackData: isOptimisticMode && appDefinition ? appDefinition : undefined,\n    revalidateOnMount: true, // Ensure we fetch fresh data in optimistic mode\n  });\n\n  const app =\n    isProductionMode && appDefinition ? { data: appDefinition } : appSWR;\n\n  useEffect(() => {\n    setApp(app.data);\n  }, [app.data, setApp]);\n\n  // Load fonts declared in app.json\n  useFontLoader(app?.data);\n\n  useEffect(() => {\n    setAppId(appId);\n  }, [appId, setAppId]);\n\n  useEffect(() => {\n    if (!pageId) return;\n    setPageId(pageId);\n  }, [pageId, setPageId]);\n\n  // FIXME: Asset data should be embedded into & preloaded by component, not looked up like this\n  useEffect(() => {\n    if (Object.keys(assetsById).length === 0) return;\n    (async () => {\n      // Preload images in the browser\n      await Promise.allSettled(\n        Object.keys(assetsById).map((id) => {\n          if (assetsById[id].url) {\n            return new Promise((resolve) => {\n              const img = new Image();\n              img.onload = resolve;\n              img.onerror = resolve; // tolerate failures to avoid unhandled rejections\n              img.src = assetsById[id].url!;\n            });\n          }\n          return Promise.resolve();\n        })\n      );\n    })();\n  }, [assetsById]);\n\n  const shouldFetchPage = !isProductionMode && appId && pageId;\n  const pageUrl = shouldFetchPage\n    ? `/devices/apps/${appId}/node/${pageId}${\n        useLocalFlag ? \"?useLocal=1\" : \"\"\n      }`\n    : null;\n\n  logger.debug(\"Page data fetch\", { pageUrl, mode });\n\n  const pageSWR = useSWR(pageUrl, fetcher, {\n    suspense: isDynamicMode && !!pageUrl,\n    fallbackData:\n      isOptimisticMode && pageDefinition ? pageDefinition : undefined,\n    revalidateOnMount: true,\n  });\n\n  const pageData =\n    isProductionMode && pageDefinition ? { data: pageDefinition } : pageSWR;\n\n  // Specific logic for Component Code fetching in Optimistic Mode\n  // If optimistic, we have componentCode passed in (bundled). We use that initially.\n  // BUT we also want to fetch the latest component code in background.\n  // DynamicComponent uses 'componentCode' prop if present.\n  // We need to fetch the code separately and override the prop passed to DynamicComponent.\n\n  // We need to fetch the latest component JS in optimistic mode\n  // The DynamicComponent currently logic: if (componentCode) loadAMDModule(code) else fetchDep(name).\n  // We want: render with initial componentCode, BUT ALSO fetch new code, and when valid, switch to it.\n\n  const [optimisticCode, setOptimisticCode] = useState<string | undefined>(\n    componentCode\n  );\n\n  useEffect(() => {\n    // If in optimistic mode, we want to fetch the latest code\n    if (isOptimisticMode && appId && pageId && !isLocalMode()) {\n      // We can reuse the logic from DynamicComponent/dynamicModules roughly, or just fetch text.\n      // The URL logic is in dynamicModules.\n      // Let's just rely on DynamicComponent to do the fetching if we pass undefined?\n      // No, if we pass undefined it will suspend/show fallback. We want to show OLD code.\n\n      // So we renders with `optimisticCode` (initially bundled).\n      // We fire a background fetch. on success, updated `optimisticCode`.\n\n      const fetchLatestCode = async () => {\n        try {\n          // Replicating URL logic from dynamicModules for remote mode\n          const { CONST_COMPONENTS_CDN_URL } = await import(\"../../constants\");\n          const cacheBuster = Math.round(Date.now() / 1000);\n          const name = `${appId}/draft/components/${pageId}`;\n          const url = `${CONST_COMPONENTS_CDN_URL}/${name}.js?cacheBuster=${cacheBuster}`;\n\n          const resp = await fetch(url);\n          if (resp.ok) {\n            const text = await resp.text();\n            // Only update if different?\n            // Comparing huge strings might be expensive, but React state update checks equality anyway (ref).\n            // Let's just set it.\n            setOptimisticCode(text);\n            logger.debug(\"Refreshed optimistic component code\");\n          }\n        } catch (e) {\n          logger.warn(\"Failed to background refresh optimistic component\", e);\n        }\n      };\n\n      fetchLatestCode();\n    } else {\n      // If prop changes (e.g. from HMR or parent), sync it\n      setOptimisticCode(componentCode);\n    }\n  }, [componentCode, isOptimisticMode, appId, pageId]);\n\n  // Use the calculated optimistic code or the passed prop depending on mode\n  const effectiveComponentCode = isOptimisticMode\n    ? optimisticCode\n    : componentCode;\n\n  logger.debug(\"Page data loaded\", {\n    hasData: !!pageData?.data,\n    dataType: typeof pageData?.data,\n  });\n\n  // Memoize the context object to prevent infinite re-renders\n  // Only recreate when the actual data changes, not on every render\n  const context = useMemo(() => {\n    let clientData = pageData.data?.clientData;\n    logger.debug(\"Building context\", {\n      hasClientData: !!clientData,\n      clientDataKeys: Object.keys(clientData || {}).length,\n    });\n\n    // Apply layout heuristics to fix common issues\n    if (clientData) {\n      patchPageData(clientData);\n    }\n\n    return {\n      nodeData: undefined,\n      // Allow overriding specific values by element id.\n      // For now, this is used to override TextComponent content when the node has the PROP:TEXT_VAR tag.\n      textOverridesById: data,\n      // Support for encore:data:array tags - provide array data by component ID\n      arrayDataById: data,\n      // Support for standalone component data binding (encore:data tags at root level)\n      rootData: data,\n      // Support for embedded components\n      embedsById: embeds,\n    };\n  }, [pageData.data?.clientData, data, embeds]);\n\n  // Manage repeating container controls (sliders, lists)\n  const repeatingContainerContextValue = useRepeatingContainers(\n    repeatingContainerControls\n  );\n\n  // Sync input groups from props to store\n  useEffect(() => {\n    if (inputGroups) {\n      const setInputGroupValue = useEncoreState.getState().setInputGroupValue;\n      Object.entries(inputGroups).forEach(([groupName, elementName]) => {\n        setInputGroupValue(groupName, elementName);\n      });\n    }\n  }, [inputGroups]);\n\n  // Observe size changes of the dynamic content container and notify consumer\n  useEffect(() => {\n    if (!onSizeChange) return;\n    const element = containerRef.current;\n    if (!element) return;\n    const notify = (entry: ResizeObserverEntry) => {\n      const cr = entry.contentRect;\n      onSizeChange({ width: cr.width, height: cr.height });\n    };\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        notify(entry);\n      }\n    });\n    // Emit initial size as soon as possible\n    const rect = element.getBoundingClientRect();\n    onSizeChange({ width: rect.width, height: rect.height });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [onSizeChange]);\n\n  // Per-instance source override\n  useEffect(() => {\n    if (!source) return;\n    setLocalModeOverride(source === \"local\" ? \"local\" : \"remote\");\n    return () => {\n      // Clear override when this instance unmounts\n      setLocalModeOverride(null);\n    };\n  }, [source]);\n\n  if (!pageId) {\n    return (\n      <div style={{ padding: \"30px\" }}>\n        <div style={{ overflowY: \"auto\" }}>\n          {(isLocalMode()\n            ? // Local mode: app.json provides pages under app.data.pages\n              ((app?.data as any)?.app?.data?.pages || []).map(\n                (pg: any) => pg?.id\n              )\n            : app?.data?.app.pageIds || []\n          ).map((p: string) => (\n            <Link\n              key={p}\n              to={`/apps/${appId}/pages/${p}?noRedirect=${noRedirect}`}\n              style={{\n                fontSize: 20,\n                display: \"block\",\n                marginBottom: \"10px\",\n              }}\n            >\n              {p}\n            </Link>\n          ))}\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        ref={contentWrapperRef}\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n        }}\n      >\n        <Suspense fallback={fallback || <div />}>\n          <EncoreContextProviders\n            componentId={componentId}\n            onAction={onAction}\n            repeatingContainerContextValue={repeatingContainerContextValue}\n            bindingContextValue={context}\n          >\n            <DynamicComponent\n              name={`${appId}/draft/components/${pageId}`}\n              fallback={fallback}\n              reloadKey={reloadKey}\n              componentCode={effectiveComponentCode}\n            />\n          </EncoreContextProviders>\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n\nexport default EncoreApp;\n"],"names":["Link","to","children","style","props","navigate","useEncoreRouter","jsx","e","setAppSelector","state","setAppIdSelector","setPageIdSelector","assetsByIdSelector","EncoreApp","appId","pageId","componentId","fallback","onSizeChange","onContentSizeChange","onAction","data","source","repeatingContainerControls","inputGroups","baseURL","appDefinition","pageDefinition","componentCode","mode","embeds","logger","useEncoreState","setLocalModeOverride","noRedirect","setApp","setAppId","setPageId","assetsById","containerRef","useRef","contentWrapperRef","useEffect","element","notify","observer","reloadKey","setReloadKey","useState","handleUpdate","useCallback","prev","usePusherUpdates","isLocalMode","useLocalFlag","isProductionMode","isOptimisticMode","isDynamicMode","appUrl","appSWR","useSWR","fetcher","app","useFontLoader","id","resolve","img","pageUrl","pageSWR","pageData","optimisticCode","setOptimisticCode","CONST_COMPONENTS_CDN_URL","cacheBuster","name","url","resp","text","effectiveComponentCode","context","useMemo","clientData","patchPageData","repeatingContainerContextValue","useRepeatingContainers","setInputGroupValue","groupName","elementName","entry","cr","entries","rect","Suspense","EncoreContextProviders","DynamicComponent","pg","p"],"mappings":"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"}