@bravostudioai/react 0.1.17 → 0.1.18

package/package.json

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

package/src/components.tsx

@@ -1553,6 +1553,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