@bravostudioai/react 0.1.16 → 0.1.18

package/package.json

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

package/src/cli/commands/generate.ts

@@ -85,12 +85,14 @@ async function generateWrapper({
   outputPath,
   cachedAppData,
   isProduction,
+  usedNames,
 }: {
   appId: string;
   pageId: string;
   outputPath: string;
   cachedAppData?: any;
   isProduction?: boolean;
+  usedNames?: Set<string>;
 }) {
   console.log(`Generating wrapper for app: ${appId}, page: ${pageId}`);
 
@@ -249,7 +251,27 @@ async function generateWrapper({
   pageName = pageData.name || pageData.id || pageName;
 
   // Generate component name and directory name
-  const { directoryPath, componentName } = generateNames(appName, pageName);
+  let { directoryPath, componentName } = generateNames(appName, pageName);
+
+  // Ensure unique component name
+  if (usedNames) {
+    let uniqueName = componentName;
+    let counter = 2;
+    while (usedNames.has(uniqueName)) {
+      uniqueName = `${componentName}${counter}`;
+      counter++;
+    }
+    if (uniqueName !== componentName) {
+      componentName = uniqueName;
+      // Reconstitute directory path with new component name
+      // generateNames uses: join(appPascal, pagePascal) where pagePascal is componentName
+      const appCamel = sanitizePropName(appName);
+      const appPascal = appCamel.charAt(0).toUpperCase() + appCamel.slice(1);
+      directoryPath = join(appPascal, componentName);
+    }
+    usedNames.add(componentName);
+  }
+
   const directoryName = directoryPath;
 
   // Update output path
@@ -381,6 +403,7 @@ export async function runGenerate(args: string[]) {
         return;
       }
 
+      const usedNames = new Set<string>();
       for (const page of pages) {
         if (!page.id) continue;
         try {
@@ -390,6 +413,7 @@ export async function runGenerate(args: string[]) {
             outputPath,
             cachedAppData: appData,
             isProduction,
+            usedNames,
           });
         } catch (error) {
           console.warn(
@@ -408,7 +432,7 @@ export async function runGenerate(args: string[]) {
   const [appId, pageId, outputPath] = cleanArgs;
 
   try {
-    await generateWrapper({ appId, pageId, outputPath, isProduction });
+    await generateWrapper({ appId, pageId, outputPath, isProduction }); // Single page generation, no collision context needed unless we wanted global uniqueness but usually used for one-off
   } catch (error) {
     console.error("\nError:", error instanceof Error ? error.message : error);
     process.exit(1);

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

package/src/lib/fetcher.ts

@@ -4,104 +4,102 @@ import useEncoreState from "../stores/useEncoreState";
 
 // Get baseURL from store at runtime instead of build time
 const getAppsServiceUrl = () => {
-    return useEncoreState.getState().baseURL;
+  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(
-                        ", ",
-                    )})`,
-                );
-            })();
+  // 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
+          }
         }
-        // /devices/apps/:appId/node/:pageId
-        const pageMatch = pathOnly.match(
-            /^\/devices\/apps\/([^/]+)\/node\/([^/?#]+)$/,
+        throw new Error(
+          `Local app.json not found for ${appId} (tried ${tryUrls.join(", ")})`
         );
-        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]);
+    // /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();
 
-    // Get baseURL at runtime from store
-    const appsServiceUrl = getAppsServiceUrl();
+  console.log(
+    "[Fetcher] Requesting:",
+    url,
+    "BaseURL:",
+    appsServiceUrl,
+    "Headers:",
+    { "x-app-clientrendered": "disabled" }
+  );
 
-    return axios({
-        baseURL: appsServiceUrl,
-        url,
-        headers: { "x-app-clientrendered": "true" },
-    }).then((res) => res.data);
+  return axios({
+    baseURL: appsServiceUrl,
+    url,
+    // headers: { "x-app-clientrendered": "true" },
+  }).then((res) => res.data);
 };
 
 export default fetcher;