@bravostudioai/react 0.1.17 → 0.1.22

package/src/components/EncoreApp.tsx

@@ -1,3 +1,4 @@
+"use client";
 import useSWR from "swr";
 import fetcher from "../lib/fetcher";
 import useEncoreState from "../stores/useEncoreState";
@@ -230,8 +231,9 @@ const EncoreApp = ({
           console.warn(
             `[EncoreApp] Font "${
               postScriptName || family
-            }" is marked as broken in the database. URL: ${url}`
+            }" is marked as broken in the database. URL: ${url} - SKIPPING DOWNLOAD`
           );
+          return;
         }
 
         const familyName = postScriptName || family;

package/src/components/EncoreErrorBoundary.tsx

@@ -1,49 +1,50 @@
+"use client";
 import React from "react";
 
 type Props = {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
 };
 
 type State = {
-    hasError: boolean;
-    error: unknown;
+  hasError: boolean;
+  error: unknown;
 };
 
 export default class EncoreErrorBoundary extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
 
-    static getDerivedStateFromError(error: unknown): State {
-        return { hasError: true, error };
-    }
+  static getDerivedStateFromError(error: unknown): State {
+    return { hasError: true, error };
+  }
 
-    componentDidCatch(error: unknown) {
-        // eslint-disable-next-line no-console
-        console.error("EncoreErrorBoundary caught:", error);
-    }
+  componentDidCatch(error: unknown) {
+    // eslint-disable-next-line no-console
+    console.error("EncoreErrorBoundary caught:", error);
+  }
 
-    render() {
-        if (this.state.hasError) {
-            return (
-                this.props.fallback || (
-                    <div
-                        style={{
-                            padding: 16,
-                            color: "#b91c1c",
-                            background: "#fef2f2",
-                            border: "1px solid #fecaca",
-                            borderRadius: 8,
-                            fontFamily: "ui-sans-serif, system-ui, sans-serif",
-                        }}
-                    >
-                        Failed to render. Check console for details.
-                    </div>
-                )
-            );
-        }
-        return this.props.children;
+  render() {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback || (
+          <div
+            style={{
+              padding: 16,
+              color: "#b91c1c",
+              background: "#fef2f2",
+              border: "1px solid #fecaca",
+              borderRadius: 8,
+              fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            }}
+          >
+            Failed to render. Check console for details.
+          </div>
+        )
+      );
     }
+    return this.props.children;
+  }
 }

package/src/components/EncoreLoadingFallback.tsx

@@ -1,25 +1,26 @@
+"use client";
 import React from "react";
 
 const EncoreLoadingFallback: React.FC = () => {
-    return (
-        <div className="flex flex-col items-center justify-center h-full w-full bg-white">
-            <div className="mb-8">
-                <div
-                    style={{
-                        fontSize: "48px",
-                        fontWeight: "bold",
-                        color: "#6366f1",
-                        fontFamily: "ui-sans-serif, system-ui, sans-serif",
-                    }}
-                >
-                    Encore
-                </div>
-            </div>
-            <div className="text-gray-700 text-lg font-medium">
-                <span className="inline-block animate-pulse">loading...</span>
-            </div>
+  return (
+    <div className="flex flex-col items-center justify-center h-full w-full bg-white">
+      <div className="mb-8">
+        <div
+          style={{
+            fontSize: "48px",
+            fontWeight: "bold",
+            color: "#6366f1",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+          }}
+        >
+          Encore
         </div>
-    );
+      </div>
+      <div className="text-gray-700 text-lg font-medium">
+        <span className="inline-block animate-pulse">loading...</span>
+      </div>
+    </div>
+  );
 };
 
 export default EncoreLoadingFallback;

package/src/components.tsx

@@ -198,35 +198,6 @@ const useEncoreStyle = (
       shouldCenterHorizontally = true;
     }
 
-    // If element has explicit width that's nearly full-width (>= 95% of container) and left position
-    // is in the range 15-35% (which suggests the element should be centered but is
-    // currently positioned from its left edge), center it using transform
-    if (
-      !shouldCenterHorizontally &&
-      hasExplicitDimensions &&
-      style.layout?.layoutSizingHorizontal === "FIXED" &&
-      style.layout?.size?.x
-    ) {
-      const elementWidthPx = style.layout.size.x;
-      const scale = pageContext.scaleFactor ?? 1;
-      const scaledElementWidth = elementWidthPx * scale;
-      const containerWidth = containerContext?.dimensions?.width;
-
-      // Check if element width is >= 95% of container width
-      if (
-        containerWidth &&
-        typeof containerWidth === "number" &&
-        containerWidth > 0
-      ) {
-        const widthRatio = scaledElementWidth / containerWidth;
-        // Element is nearly full width (>= 95%) and left position suggests it should be centered
-        // The left position range 15-35% is typical for a nearly-full-width element that's meant to be centered
-        if (widthRatio >= 0.95 && left >= 15 && left <= 35) {
-          shouldCenterHorizontally = true;
-        }
-      }
-    }
-
     result.top = `${top}%`;
 
     // Check if inset exists in original style - if so, we'll need to modify it for centering
@@ -333,14 +304,14 @@ const useEncoreStyle = (
 
     result.flexGrow = style.layout.grow;
     // Set flexWrap: if wrap is explicitly "NO_WRAP", use "nowrap", otherwise default to "wrap" for layouts that need it
-    if (style.layout.wrap === "NO_WRAP") {
-      result.flexWrap = "nowrap";
+    // Set flexWrap: default to "nowrap" to match Figma's default behavior
+    // Only wrap if explicitly requested
+    if (style.layout.wrap === "WRAP" || style.layout.flexWrap === "wrap") {
+      result.flexWrap = "wrap";
     } else if (style.layout.flexWrap) {
-      // If flexWrap is explicitly set, use it
       result.flexWrap = style.layout.flexWrap;
     } else {
-      // Default to wrap for horizontal layouts (allows items to wrap to new rows)
-      result.flexWrap = "wrap";
+      result.flexWrap = "nowrap";
     }
 
     // Always set gap properties for flex containers
@@ -1553,6 +1524,36 @@ const SvgComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
   });
   const assetsById = useEncoreState((state) => state.assetsById);
 
+  // Fix for headless rendering: Explicitly calculate width/height from positioning
+  // img tags with both left+right or top+bottom might not render correctly in all browsers
+  const pos = nodeData.style?.positioning;
+  if (pos) {
+    const hasLR = typeof pos.left === "number" && typeof pos.right === "number";
+    const hasTB = typeof pos.top === "number" && typeof pos.bottom === "number";
+
+    // Explicitly set width if left+right are present
+    if (hasLR) {
+      const widthPct = 100 - pos.left - pos.right;
+      style.width = `${widthPct}%`;
+      // Ensure left/top are set (useEncoreStyle sets them, but we want to be sure)
+      style.left = `${pos.left}%`;
+      delete style.right;
+    }
+
+    // Explicitly set height if top+bottom are present
+    if (hasTB) {
+      const heightPct = 100 - pos.top - pos.bottom;
+      style.height = `${heightPct}%`;
+      style.top = `${pos.top}%`;
+      delete style.bottom;
+    }
+  }
+
+  // Ensure object fills the box
+  if (!style.objectFit) {
+    style.objectFit = "fill"; // Default to fill for SVGs/Groups to match Figma bounds
+  }
+
   return (
     <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
       <img

package/src/contexts/EncoreActionContext.ts

@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import { createContext } from "react";
 
 export type EncoreActionPayload = {
   bravo: {
@@ -12,6 +14,6 @@ type EncoreActionContextType = {
   onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
 };
 
-const EncoreActionContext = React.createContext<EncoreActionContextType>({});
+const EncoreActionContext = createContext<EncoreActionContextType>({});
 
 export default EncoreActionContext;

package/src/contexts/EncoreAppContext.ts

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

package/src/contexts/EncoreBindingContext.ts

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

package/src/contexts/EncoreComponentIdContext.ts

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

package/src/contexts/EncoreRepeatingContainerContext.ts

@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import { createContext } from "react";
 
 export type RepeatingContainerControl = {
   currentIndex?: number;
@@ -24,7 +26,6 @@ type EncoreRepeatingContainerContextValue = {
 };
 
 const EncoreRepeatingContainerContext =
-  React.createContext<EncoreRepeatingContainerContextValue | null>(null);
+  createContext<EncoreRepeatingContainerContextValue | null>(null);
 
 export default EncoreRepeatingContainerContext;
-

package/src/contexts/EncoreRouterContext.ts

@@ -1,4 +1,6 @@
-import React, { useContext } from "react";
+"use client";
+
+import { useContext, createContext } from "react";
 
 export type EncoreRouterContextType = {
   navigate: (path: string) => void;
@@ -21,7 +23,7 @@ const defaultRouter: EncoreRouterContextType = {
 };
 
 const EncoreRouterContext =
-  React.createContext<EncoreRouterContextType>(defaultRouter);
+  createContext<EncoreRouterContextType>(defaultRouter);
 
 export const useEncoreRouter = () => useContext(EncoreRouterContext);
 

package/src/hooks/useAuthRedirect.ts

@@ -1,4 +1,6 @@
+"use client";
 import EncoreAppContext from "../contexts/EncoreAppContext";
+
 import useEncoreState from "../stores/useEncoreState";
 import { useEncoreRouter } from "../contexts/EncoreRouterContext";
 import { useContext, useEffect, useMemo } from "react";

package/src/hooks/usePusherUpdates.ts

@@ -1,4 +1,6 @@
+"use client";
 import { useEffect, useRef } from "react";
+
 import Pusher from "pusher-js";
 import { mutate } from "swr";
 import { clearModuleCache } from "../lib/moduleRegistry";

package/src/index.ts

@@ -15,4 +15,10 @@ export {
   useEncoreState,
 };
 
+import pkg from "../package.json";
+export const PACKAGE_VERSION = pkg.version;
+// For consistency with other exports that might rely on this global in legacy builds:
+// declare const __PACKAGE_VERSION__: string;
+// export const PACKAGE_VERSION = typeof __PACKAGE_VERSION__ !== 'undefined' ? __PACKAGE_VERSION__ : pkg.version;
+
 export * from "./codegen";

package/src/stores/useEncoreState.ts

@@ -1,4 +1,6 @@
+"use client";
 import { create } from "zustand";
+
 import { CONST_APPS_SERVICE_URL } from "../../constants";
 
 type EncoreState = {