@bravostudioai/react 0.1.42 → 0.1.46

package/dist/src/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AA8sGf,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAwDxD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AA4uGf,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAwDxD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const PACKAGE_VERSION = "0.1.42";
+export declare const PACKAGE_VERSION = "0.1.46";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.1.42";
+const o = "0.1.46";
 export {
   o as PACKAGE_VERSION
 };

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["export const PACKAGE_VERSION = \"0.1.42\";\n"],"names":["PACKAGE_VERSION"],"mappings":"AAAO,MAAMA,IAAkB;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["export const PACKAGE_VERSION = \"0.1.46\";\n"],"names":["PACKAGE_VERSION"],"mappings":"AAAO,MAAMA,IAAkB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bravostudioai/react",
-  "version": "0.1.42",
+  "version": "0.1.46",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/src/index.d.ts",

package/src/components.tsx

@@ -40,7 +40,7 @@ interface ComponentProps {
 
 const EncorePageContext = React.createContext<EncorePageContextType>({});
 const EncoreContainerContext = React.createContext<EncoreContainerContextType>(
-  {}
+  {},
 );
 
 const argbAlphaToOpacity = (color: string): number => {
@@ -58,7 +58,7 @@ const argbIsFullyTransparent = (color: string): boolean => {
 
 // Parse input-group tag: "input-group:single:product_purpose" -> { type: "single", groupName: "product_purpose" }
 const parseInputGroupTag = (
-  tags: string[] | undefined
+  tags: string[] | undefined,
 ): { type: string; groupName: string } | null => {
   if (!Array.isArray(tags)) return null;
   const inputGroupTag = tags.find((tag) => tag.startsWith("input-group:"));
@@ -111,7 +111,7 @@ const useContainerDimensions = (): {
 
 const useEncoreStyle = (
   style: any,
-  opts: { debug?: boolean } = {}
+  opts: { debug?: boolean } = {},
 ): React.CSSProperties | undefined => {
   let shouldCenterHorizontally = false; // Track if element should be centered
   const pageContext = useContext(EncorePageContext);
@@ -125,7 +125,7 @@ const useEncoreStyle = (
     (v: number) => {
       return (containerContext.dimensions?.width ?? 0) * 0.01 * v;
     },
-    [containerContext.dimensions?.width]
+    [containerContext.dimensions?.width],
   );
 
   const result: React.CSSProperties = {};
@@ -145,6 +145,14 @@ const useEncoreStyle = (
   const containerHeight =
     containerContext.dimensions?.height ?? viewport.height;
 
+  // DEBUG: Trace GRID mode
+  if (style.layout?.mode === "GRID") {
+    console.log("[DEBUG] GRID MODE DETECTED", {
+      id: "unknown", // style object doesn't have ID context here easily without prop drill
+      layout: style.layout,
+    });
+  }
+
   // Check if this node has layout sizing directives (even if mode is null)
   const hasLayoutSizing =
     style.layout?.layoutSizingHorizontal || style.layout?.layoutSizingVertical;
@@ -271,7 +279,7 @@ const useEncoreStyle = (
 
     // Map Figma primaryAxisAlignItems values to CSS justify-content values
     const mapJustifyContent = (
-      figmaValue: string | undefined
+      figmaValue: string | undefined,
     ): string | undefined => {
       if (!figmaValue) return undefined;
       const mapping: Record<string, string> = {
@@ -285,19 +293,20 @@ const useEncoreStyle = (
       return mapping[figmaValue] || figmaValue.toLowerCase().replace(/_/g, "-");
     };
 
-    if (style.layout.mode == "HORIZONTAL") {
+    if (style.layout.mode == "HORIZONTAL" || style.layout.mode == "GRID") {
       result.flexDirection = "row";
+
       if (style.layout.flexWrap) {
         result.flexWrap = style.layout.flexWrap;
       }
       result.justifyContent = mapJustifyContent(
-        style.layout.primaryAxisAlignItems
+        style.layout.primaryAxisAlignItems,
       );
       result.alignItems = style.layout.counterAxisAlignItems;
     } else {
       result.flexDirection = "column";
       result.justifyContent = mapJustifyContent(
-        style.layout.primaryAxisAlignItems
+        style.layout.primaryAxisAlignItems,
       );
       result.alignItems = style.layout.counterAxisAlignItems;
     }
@@ -306,7 +315,12 @@ const useEncoreStyle = (
     // Set flexWrap: if wrap is explicitly "NO_WRAP", use "nowrap", otherwise default to "wrap" for layouts that need it
     // 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") {
+    // Only wrap if explicitly requested or if mode is GRID
+    if (
+      style.layout.wrap === "WRAP" ||
+      style.layout.flexWrap === "wrap" ||
+      style.layout.mode === "GRID"
+    ) {
       result.flexWrap = "wrap";
     } else if (style.layout.flexWrap) {
       result.flexWrap = style.layout.flexWrap;
@@ -358,7 +372,7 @@ const useEncoreStyle = (
         "[useEncoreStyle] No gap properties set",
         opts.debug,
         style.layout?.mode,
-        itemSpacing
+        itemSpacing,
       );
     }
 
@@ -368,7 +382,12 @@ const useEncoreStyle = (
   }
 
   if (style.layout?.layoutSizingHorizontal === "FILL") {
-    result.width = "100%";
+    // Only set width 100% if NOT in a flex container.
+    // In a flex container, 'FILL' should be handled by flex-grow (Row) or align-self (Col).
+    // Setting width 100% explicitly forces it to take full width which breaks horizontal layouts.
+    if (!parentIsFlex) {
+      result.width = "100%";
+    }
   }
 
   if (style.layout?.layoutSizingHorizontal === "FIXED") {
@@ -757,7 +776,7 @@ const EncoreLinkActionWrapper: React.FC<{
   const pageId = useEncoreState((state) => state.pageId);
   const { onAction } = React.useContext(EncoreActionContext);
   const { statefulSetId: parentStatefulSetIdFromContext } = React.useContext(
-    EncoreComponentIdContext
+    EncoreComponentIdContext,
   );
   // Prefer prop over context (more reliable)
   const parentStatefulSetId =
@@ -766,10 +785,10 @@ const EncoreLinkActionWrapper: React.FC<{
   // const [searchParams] = useSearchParams();
   const { patchedNodeData } = useEncoreBinding({ id, nodeData });
   const setStatefulSetVariant = useEncoreState(
-    (state) => state.setStatefulSetVariant
+    (state) => state.setStatefulSetVariant,
   );
   const setInputGroupValue = useEncoreState(
-    (state) => state.setInputGroupValue
+    (state) => state.setInputGroupValue,
   );
   const setAccessToken = useEncoreState((state) => state.setAccessToken);
   const { app } = useEncoreState((state) => state.app);
@@ -777,30 +796,6 @@ const EncoreLinkActionWrapper: React.FC<{
   const startPageId = app.data?.app?.startPageId;
   const loginPageId = app.data?.app?.PageId;
 
-  const style = useEncoreStyle(
-    {
-      positioning: nodeData.style?.positioning,
-    },
-    { debug: false }
-  );
-
-  // Make the wrapper div cover the entire button area
-  // Use a very high z-index to ensure it's above all children
-  // IMPORTANT: The overlay should be scoped to the immediate parent (the button),
-  // not the entire StatefulSetComponent, to avoid overlapping with other buttons
-  style.zIndex = 99999;
-  style.backgroundColor = "transparent";
-  style.position = "absolute";
-  style.top = "0";
-  style.left = "0";
-  style.right = "0";
-  style.bottom = "0";
-  style.width = "100%";
-  style.height = "100%";
-  style.pointerEvents = "auto";
-  // Ensure the overlay is contained within its parent button element
-  style.isolation = "isolate";
-
   const handleAction = async (action: any) => {
     let proceed = false;
     const cancel = () => {
@@ -949,27 +944,23 @@ const EncoreLinkActionWrapper: React.FC<{
 
   if (nodeData.href) {
     return (
-      <>
-        <button
-          type="button"
-          onClick={() =>
-            handleAction({
-              action: "goto",
-              params: { href: nodeData.href },
-              event: "tap",
-            })
-          }
-          style={{
-            ...style,
-            cursor: "pointer",
-            background: "transparent",
-            border: "none",
-            padding: 0,
-          }}
-          aria-label={`Go to ${nodeData.href}`}
-        ></button>
+      <div
+        onClick={() =>
+          handleAction({
+            action: "goto",
+            params: { href: nodeData.href },
+            event: "tap",
+          })
+        }
+        style={{
+          display: "contents",
+          cursor: "pointer",
+        }}
+        role="button"
+        aria-label={`Go to ${nodeData.href}`}
+      >
         {children}
-      </>
+      </div>
     );
   }
 
@@ -1030,7 +1021,7 @@ const EncoreLinkActionWrapper: React.FC<{
       if (!targetStateSetId) {
         console.warn(
           "⚠️ No stateSetId available for stateful compound component",
-          { id, name: nodeData.name }
+          { id, name: nodeData.name },
         );
       } else {
         const currentVariant =
@@ -1055,24 +1046,45 @@ const EncoreLinkActionWrapper: React.FC<{
 
   if (actions && actions.length > 0) {
     const action = actions[0];
-    if (action.event !== "tap") {
-      return children;
-    }
+    if (action.event === "tap") {
+      const clickHandler = (e: React.MouseEvent) => {
+        // e.stopPropagation(); // Allow bubbling if needed, but usually we want to stop here to prevent parent actions?
+        // Actually, for a button, we usually stop propagation.
+        e.stopPropagation();
+        handleAction(action);
+      };
 
-    return (
-      <>
-        {children}
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            handleAction(action);
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          onMouseUp={(e) => e.stopPropagation()}
-          style={{ ...style, cursor: "pointer", pointerEvents: "auto" }}
-        ></div>
-      </>
-    );
+      const wrapperStyle: React.CSSProperties = {
+        display: "contents",
+        cursor: "pointer",
+        // Ensure the wrapper doesn't block pointer events, but its children should capture them.
+        // pointerEvents: 'auto' is default.
+      };
+
+      if (action.action === "openurl" && action.params?.url) {
+        return (
+          <a
+            href={action.params.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => {
+              e.stopPropagation();
+              // handleAction(action); // Optional side effect
+            }}
+            style={wrapperStyle}
+            aria-label={nodeData.name || "Open Link"}
+          >
+            {children}
+          </a>
+        );
+      }
+
+      return (
+        <div onClick={clickHandler} style={wrapperStyle}>
+          {children}
+        </div>
+      );
+    }
   }
 
   return children;
@@ -1703,11 +1715,11 @@ const TextComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
     textContent && (textContent.includes("\n") || textContent.includes("\r"));
   let renderedContent;
   if (hasLineBreaks && style.flexDirection === "column") {
-    // Split by newlines and carriage returns, filter out empty strings from \r\n combinations
-    const lines = textContent.split(/\r?\n/).filter((line) => line.length > 0);
+    // Split by newlines and carriage returns, preserve empty lines for "double spacing"
+    const lines = textContent.split(/\r?\n/);
     renderedContent = lines.map((line, index) => (
       <div key={index} style={{ lineHeight: "inherit" }}>
-        {line}
+        {line || "\u00A0"}
       </div>
     ));
   } else {
@@ -1915,7 +1927,7 @@ const ContainerComponent = ({
   if (id === "01KB929X1KK5TX0K8VBNP6ZDPG") {
     console.log(
       `[DEBUG] ContainerComponent ${id} (Hero) FULL nodeData:`,
-      JSON.stringify(nodeData, null, 2)
+      JSON.stringify(nodeData, null, 2),
     );
   }
   const bindingContext = useContext(EncoreBindingContext);
@@ -1932,10 +1944,26 @@ const ContainerComponent = ({
     debug: false,
   });
 
+  if (id === "01KF5PAFET1VY5E81B68GQ9BFQ") {
+    console.log("[DEBUG] Embed Container Render", {
+      id,
+      style,
+      computedStyle: style,
+      layout: nodeData.style.layout,
+      hasPositioning: !!nodeData.style.positioning,
+    });
+    // Force a simpler layout for debugging
+    // style.position = 'relative';
+    // style.zIndex = 1;
+  }
+
   const isFlex = !!nodeData.style.layout?.mode;
   // Determine flex direction for passing to children via context
   const flexDirection =
-    nodeData.style.layout?.mode === "HORIZONTAL" ? "row" : "column";
+    nodeData.style.layout?.mode === "HORIZONTAL" ||
+    nodeData.style.layout?.mode === "GRID"
+      ? "row"
+      : "column";
   // Only set default 100% if we don't have explicit dimensions from layout.size
   // Explicit dimensions are set by useEncoreStyle when layoutSizing is FIXED
   const hasExplicitWidth = style.width !== undefined;
@@ -2016,8 +2044,8 @@ const ContainerComponent = ({
   const finalStyle = shouldBeAbsolute
     ? { ...style, position: "absolute" }
     : style.position === "absolute"
-    ? style
-    : { ...style, position: style.position || "relative" };
+      ? style
+      : { ...style, position: style.position || "relative" };
 
   // For containers with explicit dimensions from layout.size, use the scaled dimensions
   // from style (which are calculated from layout.size * scaleFactor) for child context.
@@ -2152,7 +2180,7 @@ const ContainerComponent = ({
         ...(typeof actionData === "object" && actionData !== null
           ? actionData
           : {}),
-      })
+      }),
     );
   }
   const hasActions = Array.isArray(actions) && actions.length > 0;
@@ -2262,7 +2290,7 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
   if (id === "01KB929X1DQJN954WNGF5AH38B") {
     console.log(
       `[DEBUG] SliderComponent ${id} FULL nodeData:`,
-      JSON.stringify(nodeData, null, 2)
+      JSON.stringify(nodeData, null, 2),
     );
   }
   // Log slider component data for inspection
@@ -2334,8 +2362,8 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
   const animation = shouldBeVertical
     ? "vertical"
     : params.animation === "default"
-    ? "horizontal"
-    : params.animation || "horizontal";
+      ? "horizontal"
+      : params.animation || "horizontal";
 
   const style = useEncoreStyle(nodeData.style, {
     debug: false,
@@ -2391,7 +2419,7 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
                 // ContainerComponent will use this to know which item to render
                 _arrayItemIndex: i,
                 _arrayItemData: item,
-              })
+              }),
             );
           });
         } else {
@@ -2545,7 +2573,7 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
         });
       }
     },
-    [slideWidth, slideHeight, infinite, childList.length, isVertical]
+    [slideWidth, slideHeight, infinite, childList.length, isVertical],
   );
 
   // Handle infinite scroll position adjustment
@@ -2741,7 +2769,7 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
         }
       }
     },
-    [onAction, id] // Depend on onAction to ensure we call the latest version
+    [onAction, id], // Depend on onAction to ensure we call the latest version
   );
 
   // Set up scroll event listeners
@@ -2825,7 +2853,7 @@ const SliderComponent = ({ id, name, nodeData, children }) => {
     ) {
       const targetIndex = Math.max(
         0,
-        Math.min(controlProps.currentIndex, childList.length - 1)
+        Math.min(controlProps.currentIndex, childList.length - 1),
       );
       const currentIndex = calculateCurrentIndex();
       if (targetIndex !== currentIndex) {
@@ -3084,7 +3112,7 @@ const PageComponent = ({ id, name, nodeData, children }) => {
     {
       scrollableChildren: [],
       nonScrollableChildren: [],
-    }
+    },
   );
 
   // Determine the layout direction from nodeData
@@ -3125,7 +3153,7 @@ const PageComponent = ({ id, name, nodeData, children }) => {
 
     if (shouldPatch) {
       console.log(
-        `[PATCH] Detected HORIZONTAL WRAP layout for page ${id} (Partial width children: ${partialWidthChildren}, Total width: ${totalWidth})`
+        `[PATCH] Detected HORIZONTAL WRAP layout for page ${id} (Partial width children: ${partialWidthChildren}, Total width: ${totalWidth})`,
       );
       pageLayoutMode = "HORIZONTAL";
 
@@ -3145,7 +3173,7 @@ const PageComponent = ({ id, name, nodeData, children }) => {
   // Check if we have nonScrollableChildren that actually need flex positioning
   // BackgroundContainerComponent is absolutely positioned, so it doesn't need flex
   const needsFlexContainer = nonScrollableChildren.some(
-    (child) => child?.props?.nodeData?.type !== "container:background"
+    (child) => child?.props?.nodeData?.type !== "container:background",
   );
 
   return (
@@ -3177,7 +3205,7 @@ const PageComponent = ({ id, name, nodeData, children }) => {
         {/* Render backgrounds directly - they're absolutely positioned */}
         {nonScrollableChildren
           .filter(
-            (child) => child?.props?.nodeData?.type === "container:background"
+            (child) => child?.props?.nodeData?.type === "container:background",
           )
           .map((child, index) => (
             <EncoreContainerContext.Provider
@@ -3197,7 +3225,8 @@ const PageComponent = ({ id, name, nodeData, children }) => {
         {needsFlexContainer &&
           nonScrollableChildren
             .filter(
-              (child) => child?.props?.nodeData?.type !== "container:background"
+              (child) =>
+                child?.props?.nodeData?.type !== "container:background",
             )
             .map((child, index) => (
               <EncoreContainerContext.Provider
@@ -3266,6 +3295,7 @@ const EmbedComponent: React.FC<ComponentProps> = ({
           flexDirection: "column",
           // Reset positioning if provided by wrapper
           position: "absolute",
+          zIndex: 10,
         }}
         data-type="EmbedComponent"
         data-id={id}

package/src/version.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = "0.1.42";
+export const PACKAGE_VERSION = "0.1.46";