@bravostudioai/react 0.1.0

package/src/contexts/EncoreActionContext.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export type EncoreActionPayload = {
+  bravo: {
+    cancel: () => void;
+    action: any;
+  };
+};
+
+type EncoreActionContextType = {
+  onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
+};
+
+const EncoreActionContext = React.createContext<EncoreActionContextType>({});
+
+export default EncoreActionContext;
+
+

package/src/contexts/EncoreAppContext.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+type EncoreAppContext = {
+  app: any;
+  baseURL: string;
+};
+
+const EncoreAppContext = React.createContext<EncoreAppContext>({
+  app: null,
+  baseURL: "",
+});
+
+export default EncoreAppContext;

package/src/contexts/EncoreBindingContext.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+type EncoreBindingContext = {};
+const EncoreBindingContext = React.createContext({});
+
+export default EncoreBindingContext;

package/src/contexts/EncoreComponentIdContext.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+type EncoreComponentIdContext = {
+  componentId?: string;
+  statefulSetId?: string; // ID of the parent StatefulSetComponent
+};
+
+const EncoreComponentIdContext = React.createContext<EncoreComponentIdContext>(
+  {}
+);
+
+export default EncoreComponentIdContext;

package/src/contexts/EncoreRepeatingContainerContext.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+export type RepeatingContainerControl = {
+  currentIndex?: number;
+  onIndexChange?: (index: number, containerId: string) => void;
+  goToIndex: (index: number) => void;
+  getCurrentIndex: () => number;
+};
+
+type ControlProps = {
+  currentIndex?: number;
+  onIndexChange?: (index: number) => void;
+};
+
+type EncoreRepeatingContainerContextValue = {
+  registerContainer: (id: string, control: RepeatingContainerControl) => void;
+  unregisterContainer: (id: string) => void;
+  getControl: (id: string) => RepeatingContainerControl | undefined;
+  setControlProps: (
+    id: string,
+    props: ControlProps | ((prev: ControlProps) => ControlProps)
+  ) => void;
+  getControlProps: (id: string) => ControlProps | undefined;
+};
+
+const EncoreRepeatingContainerContext =
+  React.createContext<EncoreRepeatingContainerContextValue | null>(null);
+
+export default EncoreRepeatingContainerContext;
+

package/src/hooks/useAuthRedirect.ts

@@ -0,0 +1,63 @@
+import EncoreAppContext from "../contexts/EncoreAppContext";
+import useEncoreState from "../stores/useEncoreState";
+import { useSearchParams, useNavigate, useLocation } from "react-router-dom";
+import { useContext, useEffect, useMemo } from "react";
+
+const useAuthRedirect = () => {
+    const [searchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const appId =
+        searchParams.get("appId") ||
+        location.pathname.split("/apps/")[1]?.split("/")[0];
+    const pageId =
+        searchParams.get("pageId") ||
+        location.pathname.split("/pages/")[1]?.split("/")[0];
+    const noRedirect = searchParams.get("noRedirect");
+
+    const { app } = useContext(EncoreAppContext);
+    const accessToken = useEncoreState((state) => state.accessToken);
+
+    const navMap = app.data?.app?.navigationMap;
+    const loginPageId = app.data?.app?.loginPageId;
+    const isAuthenticated = accessToken && accessToken?.expireAt > Date.now();
+
+    // Some apps have multiple pages in the signin flow.
+    // Existing apps don't have a "page requires auth" declaration (or the inverse) so we must infer it.
+    // We infer it using pages linked from the tagged login page
+    const loginPages = useMemo(() => {
+        if (!navMap) return [];
+
+        const findConnectedPages = (
+            pageMap: Record<string, { linksTo: string[] }>,
+            currentPage: string,
+            visited = new Set(),
+        ): string[] => {
+            if (visited.has(currentPage)) return [];
+            visited.add(currentPage);
+
+            const directLinks = pageMap[currentPage]?.linksTo || [];
+            const indirectLinks = directLinks.flatMap((link) =>
+                findConnectedPages(pageMap, link, visited),
+            );
+
+            return [...directLinks, ...indirectLinks];
+        };
+
+        const result = new Set(findConnectedPages(navMap.pages, loginPageId));
+        result.add(loginPageId);
+
+        return Array.from(result);
+    }, [navMap]);
+
+    useEffect(() => {
+        if (noRedirect) return;
+        if (isAuthenticated) return;
+        if (!loginPageId || loginPages.includes(pageId as string)) return;
+
+        navigate(`/apps/${appId}/pages/${loginPageId}`);
+    }, [loginPageId, pageId, isAuthenticated, noRedirect]);
+};
+
+export default useAuthRedirect;

package/src/hooks/usePusherUpdates.ts

@@ -0,0 +1,156 @@
+import { useEffect, useRef } from "react";
+import Pusher from "pusher-js";
+import { mutate } from "swr";
+import { clearModuleCache } from "../lib/moduleRegistry";
+
+type PusherConfig = {
+  key?: string;
+  cluster?: string;
+  encrypted?: boolean;
+};
+
+type UsePusherUpdatesOptions = {
+  appId: string;
+  pageId?: string;
+  enabled?: boolean;
+  onUpdate?: () => void;
+};
+
+// Get Pusher config from environment variables
+const getPusherConfig = (): PusherConfig => {
+  return {
+    key: "7b0611d0051677eed996",
+    cluster: "us2",
+    encrypted: true,
+  };
+};
+
+/**
+ * Hook to listen for EncoreApp component updates via Pusher
+ * Channel name format: `${appId}-${pageId}`
+ * When an update event is received, it invalidates SWR cache and triggers a reload
+ */
+export function usePusherUpdates({
+  appId,
+  pageId,
+  enabled = true,
+  onUpdate,
+}: UsePusherUpdatesOptions) {
+  const pusherRef = useRef<Pusher | null>(null);
+  const channelRef = useRef<ReturnType<Pusher["subscribe"]> | null>(null);
+
+  useEffect(() => {
+    // Only connect if enabled and we have both appId and pageId
+    if (!enabled || !appId || !pageId) {
+      return;
+    }
+
+    const config = getPusherConfig();
+
+    // Skip if Pusher key is not configured
+    if (!config.key) {
+      console.warn("[Pusher] not configured. Pusher updates disabled.");
+      return;
+    }
+
+    // Initialize Pusher
+    const pusher = new Pusher(config.key, {
+      cluster: config.cluster || "us2",
+      forceTLS: config.encrypted,
+    });
+
+    pusherRef.current = pusher;
+
+    // Channel name format: appId-pageId (e.g., "01KA23JMNBQ2V9NR7K0VXKT5TF-01KA23JMPBZSG2YRJ6M5X87SKJ")
+    const channelName = `${appId}`;
+    console.log(`[Pusher] Subscribing to channel: ${channelName}`);
+
+    // Subscribe to the channel
+    const channel = pusher.subscribe(channelName);
+    channelRef.current = channel;
+
+    // Handle subscription success
+    channel.bind("pusher:subscription_succeeded", () => {
+      console.log(
+        `[Pusher] Successfully subscribed to channel: ${channelName}`
+      );
+    });
+
+    // Handle subscription error
+    channel.bind("pusher:subscription_error", (status: number) => {
+      console.error(
+        `[Pusher] Subscription error for channel ${channelName}:`,
+        status
+      );
+    });
+
+    // Listen for update events
+    // You can customize the event name based on your backend's Pusher event names
+    // Common event names: 'update', 'component-updated', 'app-updated', etc.
+    const handleUpdate = (data: unknown) => {
+      console.log(`[Pusher] Update received for ${channelName}:`, data);
+
+      // Clear the module cache for the component to force reload
+      const componentName = `${appId}/draft/components/${pageId}`;
+      clearModuleCache(componentName);
+
+      // Invalidate SWR cache for both app and page data
+      const appUrl = `/devices/apps/${appId}`;
+      const pageUrl = `/devices/apps/${appId}/node/${pageId}`;
+
+      // Mutate both URLs to trigger refetch
+      mutate(appUrl).catch((err) => {
+        console.error("[Pusher] Error invalidating app cache:", err);
+      });
+      mutate(pageUrl).catch((err) => {
+        console.error("[Pusher] Error invalidating page cache:", err);
+      });
+
+      // Also invalidate URLs with useLocal query param if they exist
+      mutate(`${appUrl}?useLocal=1`).catch(() => {
+        // Ignore errors for optional URLs
+      });
+      mutate(`${pageUrl}?useLocal=1`).catch(() => {
+        // Ignore errors for optional URLs
+      });
+
+      // Call the onUpdate callback if provided
+      onUpdate?.();
+    };
+
+    // Bind to update events
+    // Adjust the event name(s) based on what your backend sends
+    channel.bind("update", handleUpdate);
+    channel.bind("component-updated", handleUpdate);
+    channel.bind("app-updated", handleUpdate);
+
+    // Cleanup function
+    return () => {
+      console.log(`[Pusher] Unsubscribing from channel: ${channelName}`);
+
+      // Unbind all event handlers
+      if (channelRef.current) {
+        channelRef.current.unbind_all();
+      }
+
+      // Unsubscribe from channel
+      if (channelRef.current && pusherRef.current) {
+        pusherRef.current.unsubscribe(channelName);
+      }
+
+      // Disconnect Pusher if no other channels are subscribed
+      if (pusherRef.current) {
+        pusherRef.current.disconnect();
+        pusherRef.current = null;
+      }
+
+      channelRef.current = null;
+    };
+  }, [appId, pageId, enabled, onUpdate]);
+
+  // Return channel ref for advanced usage
+  return {
+    channel: channelRef.current,
+    pusher: pusherRef.current,
+  };
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+console.log('Encore Lib Loaded');
+import EncoreApp from "./components/EncoreApp";
+import EncoreErrorBoundary from "./components/EncoreErrorBoundary";
+import EncoreLoadingFallback from "./components/EncoreLoadingFallback";
+import EncoreAppContext from "./contexts/EncoreAppContext";
+import EncoreBindingContext from "./contexts/EncoreBindingContext";
+import useEncoreState from "./stores/useEncoreState";
+
+export {
+  EncoreApp,
+  EncoreErrorBoundary,
+  EncoreLoadingFallback,
+  EncoreAppContext,
+  EncoreBindingContext,
+  useEncoreState,
+};

package/src/lib/dynamicModules.ts

@@ -0,0 +1,193 @@
+import packages from "./packages";
+import { isLocalMode } from "./localMode";
+import { CONST_COMPONENTS_CDN_URL } from "../../constants";
+import { registerModule, getModuleExports, haveModule } from "./moduleRegistry";
+
+// Initialize registry with default packages
+Object.keys(packages).forEach((p) => {
+  registerModule(p, packages[p]);
+});
+
+export function loadAMDModule(name: string, code: string) {
+  return new Promise<any>((resolve, reject) => {
+    const define = (deps: string[], factory: (...va: unknown[]) => unknown) => {
+      if (typeof deps === "function") {
+        factory = deps;
+        deps = [];
+      }
+
+      Promise.all(
+        deps.map(async (dep) => {
+          if (dep === "require") {
+            // Return a mock require function for AMD modules
+            return ((id: string) => {
+              if (!haveModule(id)) {
+                throw new Error(`Module ${id} not found`);
+              }
+              return getModuleExports(id);
+            }) as typeof require;
+          }
+          if (dep === "exports") return {};
+          if (!haveModule(dep)) await fetchAndRegister(dep);
+          return getModuleExports(dep);
+        })
+      )
+        .then((resolvedDeps: unknown[]) => {
+          const exports = {};
+          const module = factory.apply(null, resolvedDeps);
+          const result = module || exports;
+          resolve({ default: result });
+        })
+        .catch(reject);
+    };
+
+    define.amd = true;
+
+    try {
+      // Patch code to replace hardcoded "undefined" component references
+      // This fixes remote component files that were generated before certain components existed
+      let patchedCode = code;
+
+      // Replace t.createElement("undefined", props) for container:slider with e.SliderComponent
+      // Note: Components are passed as the second parameter 'e' in AMD modules: define(["react","@/bravo/components"],(function(t,e){...}))
+      patchedCode = patchedCode.replace(
+        /t\.createElement\("undefined",(\{[^}]*nodeData:\{[^}]*type:"container:slider"[^}]*\}[^}]*\})/g,
+        (_match, propsStr) => {
+          return `t.createElement(e.SliderComponent,${propsStr}`;
+        }
+      );
+
+      // Fallback for any other undefined components - use the type-based lookup
+      patchedCode = patchedCode.replace(
+        /t\.createElement\("undefined",(\{[^}]*nodeData:\{([^}]*type:"([^"]+)")?[^}]*\}[^}]*\})/g,
+        (_match, propsStr, _typeStr, _type) => {
+          const typeMatch = propsStr.match(/type:"([^"]+)"/);
+          const componentType = typeMatch ? typeMatch[1] : null;
+          const componentLookup = componentType
+            ? `(e["${componentType}"] || e.DefaultLayerComponent)`
+            : "e.DefaultLayerComponent";
+          return `t.createElement(${componentLookup},${propsStr}`;
+        }
+      );
+
+      // Final fallback for any remaining "undefined"
+      patchedCode = patchedCode.replace(
+        /t\.createElement\("undefined"/g,
+        "t.createElement(e.DefaultLayerComponent"
+      );
+
+      // Wrap with error boundary
+      // Note: Components are already passed as the second parameter 'e' via AMD dependencies,
+      // so we don't need to inject them separately
+      const wrapper = Function(
+        "define",
+        `
+        try {
+          ${patchedCode}\n//# sourceURL=dynamic-module://${name}.js
+        } catch (error) {
+          console.error('[Module Evaluation Error]', {
+            moduleName: '${name}',
+            error: error.message,
+            stack: error.stack,
+            lineNumber: error.lineNumber,
+            columnNumber: error.columnNumber
+          });
+          throw error;
+        }
+      `
+      );
+
+      console.debug(`[Module Loading] Attempting to load module: ${name}`);
+      wrapper(define);
+      console.debug(`[Module Loading] Successfully loaded module: ${name}`);
+    } catch (e: any) {
+      // Enhanced error logging
+      console.error("[Module Loading Failed]", {
+        moduleName: name,
+        error: e,
+        errorType: e.constructor.name,
+        message: e.message,
+        stack: e.stack,
+        code: code.slice(0, 500) + (code.length > 500 ? "..." : ""), // Show first 500 chars of code
+      });
+      reject(e);
+    }
+  });
+}
+
+export async function fetchDep(name: string) {
+  // Local mode: map Encore component name to local JSX/JS under /flex-layout
+  console.log(`🔍 fetchDep called for ${name}. isLocalMode: ${isLocalMode()}`);
+  if (isLocalMode()) {
+    // Expecting `${appId}/draft/components/${pageId}`
+    const m = name.match(/^([^/]+)\/draft\/components\/([^/]+)$/);
+    if (m) {
+      const appId = m[1];
+      const pageId = m[2];
+      // Load from public as AMD (do not import() public files; Vite forbids importing from /public)
+      const absBase = (import.meta as any)?.env?.VITE_FLEX_LAYOUT_ABS || null;
+      const candidates = [
+        `/flex-layout/${appId}/${pageId}.js`,
+        absBase ? `/@fs/${absBase}/${appId}/${pageId}.js` : null,
+      ].filter(Boolean) as string[];
+
+      // Fetch as text and evaluate via AMD define shim
+      const errors: string[] = [];
+      for (const url of candidates) {
+        try {
+          const response = await fetch(url);
+          if (!response.ok) {
+            errors.push(`${url}: ${response.status} ${response.statusText}`);
+            continue;
+          }
+          const code = await response.text();
+          const amd = await loadAMDModule(
+            `${appId}/draft/components/${pageId}`,
+            code
+          );
+          return amd;
+        } catch (e: any) {
+          errors.push(`${url}: ${e.message || String(e)}`);
+        }
+      }
+      throw new Error(
+        `Local component not found for ${name}. Tried: ${candidates.join(
+          ", "
+        )}. Errors: ${errors.join("; ")}`
+      );
+    }
+  }
+  // Remote mode: use AMD loader
+  const cacheBuster = Math.round(Date.now() / 1000);
+  const url = `${CONST_COMPONENTS_CDN_URL}/${name}.js?cacheBuster=${cacheBuster}`;
+  console.log(`[Module Loading] Fetching remote component from: ${url}`);
+  const text = await fetch(url).then(async (a) => {
+    if (!a.ok) {
+      if (a.status === 403) {
+        throw new Error(
+          `Error: Could not fetch component '${name}'. Try regenerating components.`
+        );
+      } else {
+        throw new Error(`Network error (${a.status}): ${await a.text()}`);
+      }
+    }
+    return a.text();
+  });
+
+  return await loadAMDModule(name, text);
+  // } catch (error) {
+  //   return {
+  //     default() {
+  //       console.log(error);
+  //       throw new Error("Failed to render");
+  //     },
+  //   };
+  // }
+}
+
+async function fetchAndRegister(dep: string) {
+  const result = await fetchDep(dep);
+  registerModule(dep, () => ({ exports: result.default }));
+}
+
+export { clearModuleCache } from "./moduleRegistry";

package/src/lib/fetcher.ts

@@ -0,0 +1,108 @@
+import axios from "axios";
+import { isLocalMode } from "./localMode";
+import useEncoreState from "../stores/useEncoreState";
+
+// Get baseURL from store at runtime instead of build time
+const getAppsServiceUrl = () => {
+    return useEncoreState.getState().baseURL;
+};
+
+const bundledResponses: Record<string, string> = {};
+
+const fetcher = (url: string) => {
+    // Local mode: map Encore service URLs to files in /flex-layout
+    const forceLocal = /\buseLocal=1\b/.test(url);
+    if (forceLocal || isLocalMode()) {
+        const pathOnly = url.split("?")[0];
+        const absBase = null;
+        // /devices/apps/:appId
+        const appMatch = pathOnly.match(/^\/devices\/apps\/([^/]+)$/);
+        if (appMatch) {
+            const appId = appMatch[1];
+            const tryUrls = [
+                `/flex-layout/${appId}/${appId}.json`,
+                absBase
+                    ? `/@fs/${absBase}/${appId}/${appId}.json`
+                    : undefined,
+            ].filter(Boolean) as string[];
+            return (async () => {
+                for (const u of tryUrls) {
+                    try {
+                        const r = await fetch(u);
+                        if (r.ok) return r.json();
+                    } catch {
+                        // try next
+                    }
+                }
+                throw new Error(
+                    `Local app.json not found for ${appId} (tried ${tryUrls.join(
+                        ", ",
+                    )})`,
+                );
+            })();
+        }
+        // /devices/apps/:appId/node/:pageId
+        const pageMatch = pathOnly.match(
+            /^\/devices\/apps\/([^/]+)\/node\/([^/?#]+)$/,
+        );
+        if (pageMatch) {
+            const appId = pageMatch[1];
+            const pageId = pageMatch[2];
+            // Try a dedicated page JSON first (if present)
+            const tryUrls = [
+                `/flex-layout/${appId}/${pageId}.json`,
+                absBase
+                    ? `/@fs/${absBase}/${appId}/${pageId}.json`
+                    : undefined,
+            ].filter(Boolean) as string[];
+            return fetch(tryUrls[0])
+                .then(async (r) => {
+                    if (r.ok) return r.json();
+                    // try secondary url if defined
+                    if (tryUrls[1]) {
+                        const r2 = await fetch(tryUrls[1]).catch(() => null);
+                        if (r2 && r2.ok) return r2.json();
+                    }
+                    // Fallback: derive minimal shape from app.json
+                    const appJson =
+                        (await fetch(`/flex-layout/${appId}/${appId}.json`)
+                            .then((a) => (a.ok ? a.json() : null))
+                            .catch(() => null)) ||
+                        (absBase
+                            ? await fetch(
+                                  `/@fs/${absBase}/${appId}/${appId}.json`,
+                              )
+                                  .then((a) => (a.ok ? a.json() : null))
+                                  .catch(() => null)
+                            : null);
+                    // Keep shape compatible with current consumers
+                    const pages =
+                        appJson?.app?.data?.pages ||
+                        appJson?.data?.pages ||
+                        [];
+                    const page = pages.find((p: any) => p?.id === pageId) || {};
+                    return { clientData: page };
+                })
+                .catch(async () => {
+                    // Final fallback: minimal object
+                    return { clientData: null };
+                });
+        }
+    }
+
+    if (bundledResponses?.[url]) {
+        return JSON.parse(bundledResponses?.[url]);
+    }
+
+    // Get baseURL at runtime from store
+    const appsServiceUrl = getAppsServiceUrl();
+
+    return axios({
+        baseURL: appsServiceUrl,
+        url,
+        headers: { "x-app-clientrendered": "true" },
+    }).then((res) => res.data);
+};
+
+export default fetcher;
+export { getAppsServiceUrl as appsServiceUrl };

package/src/lib/localMode.ts

@@ -0,0 +1,30 @@
+// Centralized toggle for Local Flex-Layout mode
+let overrideMode: "local" | "remote" | null = null;
+
+export function setLocalModeOverride(
+    value: "local" | "remote" | null,
+): void {
+    overrideMode = value;
+}
+
+export function isLocalMode(): boolean {
+    try {
+        // Explicit override (per-App instance)
+        if (overrideMode === "local") return true;
+        if (overrideMode === "remote") return false;
+        // Env toggle
+        // if (import.meta?.env?.VITE_BRAVO_LOCAL === "1") return true;
+        // if (import.meta?.env?.VITE_BRAVO_LOCAL === "true") return true;
+        // Query-string toggle
+        if (typeof window !== "undefined") {
+            const params = new URLSearchParams(window.location.search);
+            const v = params.get("useLocal");
+            if (v === "1" || v === "true") return true;
+        }
+    } catch {
+        // ignore
+    }
+    return false;
+}
+
+

package/src/lib/moduleRegistry.ts

@@ -0,0 +1,24 @@
+const registry: Record<string, any> = {};
+
+export function registerModule(name: string, module: any) {
+  registry[name] = module;
+}
+
+export function getModuleExports(name: string) {
+  return registry[name]().exports;
+}
+
+export function haveModule(name: string): boolean {
+  return name in registry;
+}
+
+/**
+ * Clear a module from the cache to force reload on next fetch
+ * @param name Module name (e.g., `${appId}/draft/components/${pageId}`)
+ */
+export function clearModuleCache(name: string): void {
+  if (name in registry) {
+    delete registry[name];
+    console.log(`[Module Cache] Cleared module: ${name}`);
+  }
+}