@bravostudioai/react 0.1.0

package/src/components/EncoreApp.tsx

@@ -0,0 +1,759 @@
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
+import useEncoreState from "../stores/useEncoreState";
+import React, {
+  Suspense,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
+import { isLocalMode, setLocalModeOverride } from "../lib/localMode";
+import EncoreBindingContext from "../contexts/EncoreBindingContext";
+import EncoreComponentIdContext from "../contexts/EncoreComponentIdContext";
+import EncoreActionContext, {
+  type EncoreActionPayload,
+} from "../contexts/EncoreActionContext";
+import EncoreRepeatingContainerContext, {
+  type RepeatingContainerControl,
+} from "../contexts/EncoreRepeatingContainerContext";
+import DynamicComponent from "./DynamicComponent";
+import { Link } from "react-router-dom";
+import { usePusherUpdates } from "../hooks/usePusherUpdates";
+
+type Props = {
+  appId: string;
+  pageId?: string;
+  componentId?: string;
+  fallback?: React.ReactNode;
+  onSizeChange?: (size: { width: number; height: number }) => void;
+  onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
+  data?: Record<string, string | number | any[]>;
+  // When provided, force the runtime to load from either remote or local sources
+  source?: "remote" | "local";
+  // Control repeating containers (sliders, lists, etc.) by container ID
+  repeatingContainerControls?: Record<
+    string,
+    { currentIndex?: number; onIndexChange?: (index: number) => void }
+  >;
+  // Control input groups - maps group name to active element name
+  inputGroups?: Record<string, string>;
+  // Base URL for the Encore service API (e.g., "https://api.example.com")
+  // If not provided, defaults to "https://apps-service-dev.bravostudio.app"
+  baseURL?: string;
+  appDefinition?: any;
+  pageDefinition?: any;
+  componentCode?: string;
+};
+
+type EncoreAssetsById = Record<string, { url?: string }>;
+type EncoreState = {
+  setApp: (app: unknown) => void;
+  setAppId: (id: string) => void;
+  setPageId: (id: string) => void;
+  assetsById: EncoreAssetsById;
+};
+
+const setAppSelector = (state: EncoreState) => state.setApp;
+const setAppIdSelector = (state: EncoreState) => state.setAppId;
+const setPageIdSelector = (state: EncoreState) => state.setPageId;
+const assetsByIdSelector = (state: EncoreState) => state.assetsById;
+
+const EncoreApp = ({
+  appId,
+  pageId,
+  componentId,
+  fallback,
+  onSizeChange,
+  onAction,
+  data,
+  source,
+  repeatingContainerControls,
+  inputGroups,
+  baseURL,
+  appDefinition,
+  pageDefinition,
+  componentCode,
+}: Props) => {
+  console.log("Render: EncoreApp");
+  console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥");
+  console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨");
+
+  // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches
+  // This must happen synchronously, not in useEffect, because useSWR will fetch immediately
+  if (baseURL) {
+    const currentBaseURL = useEncoreState.getState().baseURL;
+    if (currentBaseURL !== baseURL) {
+      useEncoreState.getState().setBaseURL(baseURL);
+    }
+  }
+
+  // Apply source override immediately so hooks below observe correct mode
+  if (source) {
+    setLocalModeOverride(source === "local" ? "local" : "remote");
+  }
+  // const [searchParams] = useSearchParams();
+  // const noRedirect = searchParams.get("noRedirect");
+  const noRedirect = false;
+
+  const setApp = useEncoreState(setAppSelector);
+  const setAppId = useEncoreState(setAppIdSelector);
+  const setPageId = useEncoreState(setPageIdSelector);
+  const assetsById = useEncoreState(assetsByIdSelector);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // State to force DynamicComponent reload when updates are received
+  const [reloadKey, setReloadKey] = useState<string | number>(0);
+  // Set up Pusher to listen for component updates
+  const handleUpdate = useCallback(() => {
+    // Increment reloadKey to force DynamicComponent to reload
+    setReloadKey((prev) => (typeof prev === "number" ? prev + 1 : Date.now()));
+  }, []);
+
+  // Only enable Pusher in remote mode - it doesn't make sense in local mode
+  usePusherUpdates({
+    appId,
+    pageId: pageId || undefined,
+    enabled: !isLocalMode() && !appDefinition,
+    onUpdate: handleUpdate,
+  });
+
+  // usePusherUpdates({
+  //   appId,
+  //   pageId: pageId || undefined,
+  //   enabled: false, // DISABLED FOR DEBUGGING
+  //   onUpdate: handleUpdate,
+  // });
+
+  const useLocalFlag = source === "local" || isLocalMode();
+  // If appDefinition is provided, disable SWR fetch by setting url to null
+  const appUrl = appDefinition
+    ? null
+    : appId && `/devices/apps/${appId}${useLocalFlag ? "?useLocal=1" : ""}`;
+
+  const appSWR = useSWR(appUrl, fetcher, {
+    suspense: !!appUrl, // Only use suspense if we are fetching
+  });
+
+  const app = appDefinition ? { data: appDefinition } : appSWR;
+
+  useEffect(() => {
+    setApp(app.data);
+  }, [app.data, setApp]);
+
+  // Load fonts declared in app.json using the FontFace API
+  useEffect(() => {
+    type EncoreFont = {
+      id?: string;
+      url?: string;
+      fontName?: { family?: string; postScriptName?: string };
+    };
+    type AppDataWithFonts = { app?: { fonts?: EncoreFont[] } };
+    const fonts: EncoreFont[] =
+      (app?.data as AppDataWithFonts | undefined)?.app?.fonts ?? [];
+    if (!fonts || fonts.length === 0) return;
+    if (typeof window === "undefined" || !("FontFace" in window)) return;
+    fonts.forEach((f) => {
+      try {
+        const family = f?.fontName?.family;
+        const url = f?.url;
+        const postScriptName = f?.fontName?.postScriptName;
+        if (!family || !url) return;
+
+        // Infer font weight from postScriptName if available
+        // This ensures the browser uses the correct font-face variant
+        let weight: string | number | undefined = undefined;
+        if (postScriptName) {
+          const weightMatch = postScriptName.match(
+            /(?:^|-)(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)(?:-|$)/i
+          );
+          if (weightMatch) {
+            const weightName = weightMatch[1].toLowerCase();
+            const weightMap: Record<string, number> = {
+              thin: 100,
+              extralight: 200,
+              light: 300,
+              regular: 400,
+              medium: 500,
+              semibold: 600,
+              bold: 700,
+              extrabold: 800,
+              black: 900,
+            };
+            weight = weightMap[weightName] || 400;
+          }
+        }
+
+        // Create FontFace with weight descriptor if we inferred it
+        const fontFace =
+          weight !== undefined
+            ? new FontFace(family, `url(${url})`, { weight: weight.toString() })
+            : new FontFace(family, `url(${url})`);
+
+        fontFace
+          .load()
+          .then((ff) => {
+            document.fonts.add(ff);
+          })
+          .catch(() => {
+            // Ignore font load failures to avoid disrupting rendering
+          });
+      } catch {
+        // Best-effort; ignore
+      }
+    });
+  }, [app?.data]);
+
+  useEffect(() => {
+    setAppId(appId);
+  }, [appId, setAppId]);
+
+  useEffect(() => {
+    if (!pageId) return;
+    setPageId(pageId);
+  }, [pageId, setPageId]);
+
+  // FIXME: Asset data should be embedded into & preloaded by component, not looked up like this
+  useEffect(() => {
+    if (Object.keys(assetsById).length === 0) return;
+    (async () => {
+      // Preload images in the browser
+      await Promise.allSettled(
+        Object.keys(assetsById).map((id) => {
+          if (assetsById[id].url) {
+            return new Promise((resolve) => {
+              const img = new Image();
+              img.onload = resolve;
+              img.onerror = resolve; // tolerate failures to avoid unhandled rejections
+              img.src = assetsById[id].url!;
+            });
+          }
+          return Promise.resolve();
+        })
+      );
+    })();
+  }, [assetsById]);
+
+  const pageUrl = pageDefinition
+    ? null
+    : appId &&
+      pageId &&
+      `/devices/apps/${appId}/node/${pageId}${
+        useLocalFlag ? "?useLocal=1" : ""
+      }`;
+  const pageSWR = useSWR(pageUrl, fetcher, { suspense: !!pageUrl });
+  const pageData = pageDefinition ? { data: pageDefinition } : pageSWR;
+
+  // Debug logging commented out to prevent console flooding
+  /*
+  useEffect(() => {
+    if (pageData.data) {
+      console.log("=== PAGE DATA STRUCTURE ===");
+      console.log("Full pageData.data:", pageData.data);
+      console.log("pageData.data keys:", Object.keys(pageData.data));
+      console.log("Client data:", pageData.data.clientData);
+      console.log("Client data type:", typeof pageData.data.clientData);
+      console.log(
+        "Client data keys:",
+        pageData.data.clientData ? Object.keys(pageData.data.clientData) : "N/A"
+      );
+
+      // Try to find the actual node data structure
+      const allKeys = Object.keys(pageData.data);
+      console.log("All top-level keys in pageData.data:", allKeys);
+
+      // Log the full structure more deeply
+      console.log(
+        "Full pageData.data structure:",
+        JSON.stringify(pageData.data, null, 2)
+      );
+
+      const clientData = pageData.data.clientData || pageData.data;
+
+      // Helper to recursively search for sliders in tree structure
+      const findSlidersInTree = (nodeData: any, path = ""): any[] => {
+        const sliders: any[] = [];
+        if (!nodeData || typeof nodeData !== "object") return sliders;
+
+        // Check if this node is a slider
+        const isSlider =
+          nodeData.type === "container:slider" ||
+          nodeData.type === "component:slider" ||
+          nodeData.name?.toLowerCase().includes("slider") ||
+          (Array.isArray(nodeData.tags) &&
+            nodeData.tags.some((tag: string) =>
+              tag.toLowerCase().includes("slider")
+            ));
+
+        if (isSlider) {
+          sliders.push({
+            path,
+            id: nodeData.id,
+            name: nodeData.name,
+            type: nodeData.type,
+            tags: nodeData.tags,
+            data: nodeData.data,
+            style: nodeData.style,
+            fullNodeData: nodeData,
+          });
+        }
+
+        // Recursively search children
+        if (nodeData.children) {
+          const children = Array.isArray(nodeData.children)
+            ? nodeData.children
+            : [nodeData.children];
+          children.forEach((child: any, index: number) => {
+            if (child && typeof child === "object") {
+              sliders.push(...findSlidersInTree(child, `${path}/${index}`));
+            }
+          });
+        }
+
+        return sliders;
+      };
+
+      // Check if clientData is a flat object keyed by ID (most likely)
+      let sliders: any[] = [];
+      if (
+        clientData &&
+        typeof clientData === "object" &&
+        !Array.isArray(clientData)
+      ) {
+        // Check if it's a flat structure (keyed by IDs)
+        const entries = Object.entries(clientData);
+        console.log(`Client data has ${entries.length} entries`);
+
+        // Search all entries for sliders
+        entries.forEach(([key, value]: [string, any]) => {
+          if (value && typeof value === "object") {
+            // Check if this entry itself is a slider
+            const isSlider =
+              value.type === "container:slider" ||
+              value.type === "component:slider" ||
+              value.name?.toLowerCase().includes("slider") ||
+              (Array.isArray(value.tags) &&
+                value.tags.some((tag: string) =>
+                  tag.toLowerCase().includes("slider")
+                ));
+
+            if (isSlider) {
+              sliders.push({
+                id: key,
+                name: value.name,
+                type: value.type,
+                tags: value.tags,
+                data: value.data,
+                style: value.style,
+                fullNodeData: value,
+              });
+            }
+
+            // Also search recursively in case it's nested
+            sliders.push(...findSlidersInTree(value, key));
+          }
+        });
+
+        // If no sliders found in flat structure, try treating it as a tree
+        if (sliders.length === 0) {
+          sliders = findSlidersInTree(clientData, "root");
+        }
+      } else {
+        // Treat as tree structure
+        sliders = findSlidersInTree(clientData, "root");
+      }
+
+      console.log("=== SLIDER COMPONENTS FOUND ===");
+      console.log(`Found ${sliders.length} slider(s):`, sliders);
+
+      sliders.forEach((slider, index) => {
+        console.log(`\n--- Slider ${index + 1} ---`);
+        console.log("ID:", slider.id);
+        console.log("Name:", slider.name);
+        console.log("Type:", slider.type);
+        console.log("Tags:", slider.tags);
+        console.log("Data:", slider.data);
+        console.log("Full node data:", slider.fullNodeData);
+
+        // Look for data binding tags
+        if (Array.isArray(slider.tags)) {
+          const bindingTags = slider.tags.filter(
+            (tag: string) =>
+              tag.includes("PROP:") ||
+              tag.includes("LIST:") ||
+              tag.includes("DATA:")
+          );
+          if (bindingTags.length > 0) {
+            console.log("🔍 Data binding tags found:", bindingTags);
+          }
+        }
+      });
+
+      // Also log all unique tags found across all components for reference
+      const allTags = new Set<string>();
+      const allEntries = Object.entries(clientData);
+      allEntries.forEach(([_, value]: [string, any]) => {
+        if (value?.tags && Array.isArray(value.tags)) {
+          value.tags.forEach((tag: string) => allTags.add(tag));
+        }
+      });
+      console.log("\n=== ALL UNIQUE TAGS IN PAGE ===");
+      console.log(Array.from(allTags).sort());
+    }
+  }, [pageData.data]);
+  */
+
+  // Memoize the context object to prevent infinite re-renders
+  // Only recreate when the actual data changes, not on every render
+  const context = useMemo(() => {
+    let clientData = pageData.data?.clientData;
+
+    // --- GENERIC DATA PATCHING START ---
+    // Recursively patch the data to fix layout and slider issues based on heuristics
+    const patchPageData = (node: any) => {
+      if (!node || typeof node !== "object") return;
+
+      // 1. Layout Heuristic: If children widths sum to ~100% or ~375px, force HORIZONTAL layout
+      // RELAXED: No longer requires layoutSizingHorizontal: "FIXED" - width data alone is sufficient
+      if (
+        node.children &&
+        Array.isArray(node.children) &&
+        node.children.length > 1
+      ) {
+        let totalWidth = 0;
+        let childrenWithWidth = 0;
+
+        node.children.forEach((child: any) => {
+          if (child.style?.width) {
+            // Width might be a percentage or pixel value.
+            // Based on logs, we saw "width: 52" and "width: 48" which sum to 100.
+            // If it's percentage, we check if it sums to 100.
+            // If it's pixels, we check if it sums to ~375.
+            totalWidth += child.style.width;
+            childrenWithWidth++;
+          }
+        });
+
+        // Check for percentage sum ~100 or pixel sum ~375
+        // Only apply if we have at least 2 children with width data
+        const isFullWidthRow =
+          (Math.abs(totalWidth - 100) < 1 || Math.abs(totalWidth - 375) < 5) &&
+          childrenWithWidth >= 2;
+
+        if (isFullWidthRow) {
+          if (!node.style) node.style = {};
+          if (!node.style.layout) node.style.layout = {};
+
+          // Only apply if mode is missing or undefined
+          if (!node.style.layout.mode) {
+            console.log(
+              `[PATCH] Forcing HORIZONTAL layout for node ${node.id} (${childrenWithWidth} children, widths sum: ${totalWidth})`
+            );
+            node.style.layout.mode = "HORIZONTAL";
+            node.style.layout.primaryAxisAlignItems = "flex-start";
+            node.style.layout.counterAxisAlignItems = "flex-start";
+          }
+        }
+      }
+
+      // 2. Slider Heuristic: If slider is taller than wide, force VERTICAL animation
+      // DISABLED: This is too aggressive and breaks horizontal sliders that happen to be tall (e.g. 50% width columns)
+      /*
+      const isSlider =
+        node.type === "container:slider" ||
+        node.type === "component:slider" ||
+        (node.tags &&
+          Array.isArray(node.tags) &&
+          node.tags.some((t: string) => t.toLowerCase().includes("slider")));
+
+      if (isSlider) {
+        const width = node.style?.width || 0;
+        const height = node.style?.height || 0;
+        // Check aspect ratio. If height > width, it's likely vertical.
+        // Note: width/height might be percentages or pixels.
+        // If both are numbers, we can compare.
+        // From logs: width: 52, height: 85.27. This is clearly vertical shape.
+        if (height > width) {
+          if (!node.data) node.data = {};
+          if (!node.data.params) node.data.params = {};
+
+          // Only apply if animation is default or missing
+          if (
+            !node.data.params.animation ||
+            node.data.params.animation === "default" ||
+            node.data.params.animation === "horizontal"
+          ) {
+            console.log(
+              `[PATCH] Forcing VERTICAL animation for slider ${node.id} (W:${width}, H:${height})`
+            );
+            node.data.params.animation = "vertical";
+          }
+        }
+      }
+      */
+
+      // Recurse
+      if (node.children) {
+        if (Array.isArray(node.children)) {
+          node.children.forEach(patchPageData);
+        } else {
+          patchPageData(node.children);
+        }
+      }
+    };
+
+    if (clientData) {
+      // Clone to avoid mutating SWR cache directly if possible, though deep clone might be expensive.
+      // For now, patching in place as it's a fix.
+      patchPageData(clientData);
+    }
+    // --- GENERIC DATA PATCHING END ---
+
+    return {
+      nodeData: undefined,
+      // Allow overriding specific values by element id.
+      // For now, this is used to override TextComponent content when the node has the PROP:TEXT_VAR tag.
+      textOverridesById: data,
+      // Support for encore:data:array tags - provide array data by component ID
+      arrayDataById: data,
+      // Support for standalone component data binding (encore:data tags at root level)
+      rootData: data,
+    };
+  }, [pageData.data?.clientData, data]);
+
+  // Manage repeating container controls
+  const [containerControls, setContainerControls] = useState<
+    Map<string, RepeatingContainerControl>
+  >(new Map());
+  const [controlPropsMap, setControlPropsMap] = useState<
+    Map<
+      string,
+      { currentIndex?: number; onIndexChange?: (index: number) => void }
+    >
+  >(new Map());
+
+  // Update control props from prop
+  useEffect(() => {
+    if (repeatingContainerControls) {
+      setControlPropsMap((prev) => {
+        // Check if content actually changed to avoid unnecessary updates
+        let changed = false;
+        if (prev.size !== Object.keys(repeatingContainerControls).length) {
+          changed = true;
+        } else {
+          for (const [id, props] of Object.entries(
+            repeatingContainerControls
+          )) {
+            const prevProps = prev.get(id);
+            if (!prevProps) {
+              changed = true;
+              break;
+            }
+            if (
+              prevProps.currentIndex !== props.currentIndex ||
+              prevProps.onIndexChange !== props.onIndexChange
+            ) {
+              changed = true;
+              break;
+            }
+          }
+        }
+
+        if (!changed) return prev;
+
+        const newMap = new Map();
+        Object.entries(repeatingContainerControls).forEach(([id, props]) => {
+          newMap.set(id, props);
+        });
+        return newMap;
+      });
+    }
+  }, [repeatingContainerControls]);
+
+  // Sync input groups from props to store
+  useEffect(() => {
+    if (inputGroups) {
+      const setInputGroupValue = useEncoreState.getState().setInputGroupValue;
+      Object.entries(inputGroups).forEach(([groupName, elementName]) => {
+        setInputGroupValue(groupName, elementName);
+      });
+    }
+  }, [inputGroups]);
+
+  const registerContainer = useCallback(
+    (id: string, control: RepeatingContainerControl) => {
+      setContainerControls((prev) => {
+        const next = new Map(prev);
+        next.set(id, control);
+        return next;
+      });
+    },
+    []
+  );
+
+  const unregisterContainer = useCallback((id: string) => {
+    setContainerControls((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+    // Do NOT delete from controlPropsMap here.
+    // controlPropsMap contains props passed from the parent (repeatingContainerControls).
+    // If we delete them, we lose the configuration passed down to us.
+    // The props should persist even if the component temporarily unregisters.
+  }, []);
+
+  const getControl = useCallback(
+    (id: string) => {
+      return containerControls.get(id);
+    },
+    [containerControls]
+  );
+
+  const setControlProps = useCallback(
+    (
+      id: string,
+      props:
+        | { currentIndex?: number; onIndexChange?: (index: number) => void }
+        | ((prev: {
+            currentIndex?: number;
+            onIndexChange?: (index: number) => void;
+          }) => {
+            currentIndex?: number;
+            onIndexChange?: (index: number) => void;
+          })
+    ) => {
+      setControlPropsMap((prev) => {
+        const next = new Map(prev);
+        const current = next.get(id) || {};
+        const newProps = typeof props === "function" ? props(current) : props;
+        next.set(id, newProps);
+        return next;
+      });
+    },
+    []
+  );
+
+  const getControlProps = useCallback(
+    (id: string) => {
+      return controlPropsMap.get(id);
+    },
+    [controlPropsMap]
+  );
+
+  // Control props are automatically passed to registered containers via context
+  // Components read props via getControlProps() and update when props change
+
+  // Create context value - this object changes when controlPropsMap changes,
+  // causing all consumers to re-render and get updated props
+  const repeatingContainerContextValue = React.useMemo(
+    () => ({
+      registerContainer,
+      unregisterContainer,
+      getControl,
+      setControlProps,
+      getControlProps,
+      // Include controlPropsMap size in the value to trigger re-renders when it changes
+      _propsVersion: controlPropsMap.size,
+    }),
+    [
+      registerContainer,
+      unregisterContainer,
+      getControl,
+      setControlProps,
+      getControlProps,
+      controlPropsMap.size,
+    ]
+  );
+
+  // Observe size changes of the dynamic content container and notify consumer
+  useEffect(() => {
+    if (!onSizeChange) return;
+    const element = containerRef.current;
+    if (!element) return;
+    const notify = (entry: ResizeObserverEntry) => {
+      const cr = entry.contentRect;
+      onSizeChange({ width: cr.width, height: cr.height });
+    };
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        notify(entry);
+      }
+    });
+    // Emit initial size as soon as possible
+    const rect = element.getBoundingClientRect();
+    onSizeChange({ width: rect.width, height: rect.height });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [onSizeChange]);
+
+  // Per-instance source override
+  useEffect(() => {
+    if (!source) return;
+    setLocalModeOverride(source === "local" ? "local" : "remote");
+    return () => {
+      // Clear override when this instance unmounts
+      setLocalModeOverride(null);
+    };
+  }, [source]);
+
+  if (!pageId) {
+    return (
+      <div style={{ padding: "30px" }}>
+        <div style={{ overflowY: "auto" }}>
+          {(isLocalMode()
+            ? // Local mode: app.json provides pages under app.data.pages
+              ((app?.data as any)?.app?.data?.pages || []).map(
+                (pg: any) => pg?.id
+              )
+            : app?.data?.app.pageIds || []
+          ).map((p: string) => (
+            <Link
+              key={p}
+              to={`/apps/${appId}/pages/${p}?noRedirect=${noRedirect}`}
+              style={{
+                fontSize: 20,
+                display: "block",
+                marginBottom: "10px",
+              }}
+            >
+              {p}
+            </Link>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div
+      ref={containerRef}
+      style={{ width: "100%", height: "100%", position: "relative" }}
+    >
+      <Suspense fallback={fallback || <div />}>
+        <EncoreComponentIdContext.Provider value={{ componentId }}>
+          <EncoreActionContext.Provider value={{ onAction }}>
+            <EncoreRepeatingContainerContext.Provider
+              value={repeatingContainerContextValue}
+            >
+              <EncoreBindingContext.Provider value={context}>
+                <DynamicComponent
+                  name={`${appId}/draft/components/${pageId}`}
+                  fallback={fallback}
+                  reloadKey={reloadKey}
+                  componentCode={componentCode}
+                >
+                  {" "}
+                </DynamicComponent>
+              </EncoreBindingContext.Provider>
+            </EncoreRepeatingContainerContext.Provider>
+          </EncoreActionContext.Provider>
+        </EncoreComponentIdContext.Provider>
+      </Suspense>
+    </div>
+  );
+};
+
+export default EncoreApp;