@bravostudioai/react 0.1.42 → 0.1.45

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;AAkvGf,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.45";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.1.42";
+const o = "0.1.45";
 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.45\";\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.45",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/src/index.d.ts",

package/src/components.tsx

@@ -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;
@@ -285,8 +293,9 @@ 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;
       }
@@ -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;
@@ -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") {
@@ -1932,10 +1951,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;
@@ -3266,6 +3301,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.45";