@bravostudioai/react 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bravostudioai/react",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/src/index.d.ts",
@@ -54,7 +54,7 @@
     "vite": "^7.2.4"
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   }
 }

package/src/cli/commands/generate.ts

@@ -341,7 +341,7 @@ Arguments:
   outputPath Path where the generated TSX file(s) should be saved
 
 Environment variables:
-  APPS_SERVICE_URL  Base URL for the apps service (default: http://localhost:3000)
+  APPS_SERVICE_URL  Base URL for the apps service
 
 Example:
   generate-wrapper.ts 01KA964B1T6KCKSKCNMYSTKRKZ 01KA964B2F42MN4WGCYDTG1Y70 ./src/components/MyEncoreApp.tsx

package/src/components/EncoreApp.tsx

@@ -99,6 +99,9 @@ const EncoreApp = ({
   console.log("Render: EncoreApp");
   console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥");
   console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨");
+  console.log(
+    `[AG_DEBUG] [EncoreApp] Render Start. appId: ${appId}, pageId: ${pageId}`
+  );
 
   // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches
   // This must happen synchronously, not in useEffect, because useSWR will fetch immediately
@@ -198,6 +201,22 @@ const EncoreApp = ({
     type AppDataWithFonts = { app?: { fonts?: EncoreFont[] } };
     const fonts: EncoreFont[] =
       (app?.data as AppDataWithFonts | undefined)?.app?.fonts ?? [];
+
+    console.log(
+      `[AG_DEBUG] [EncoreApp] 🔎 Font check initiated. Found ${
+        fonts?.length || 0
+      } fonts in app definition.`
+    );
+    if (fonts && fonts.length > 0) {
+      console.log(
+        "[AG_DEBUG] [EncoreApp] Font list:",
+        fonts.map(
+          (f) =>
+            `${f.fontName?.family} (${f.fontName?.postScriptName}) - Broken: ${f.broken} - URL: ${f.url}`
+        )
+      );
+    }
+
     if (!fonts || fonts.length === 0) return;
     if (typeof window === "undefined" || !("FontFace" in window)) return;
     fonts.forEach((f) => {
@@ -215,44 +234,30 @@ const EncoreApp = ({
           );
         }
 
-        // Infer font weight from postScriptName if available
-        // This ensures the browser uses the correct font-face variant
-        let weight: string | number | undefined = undefined;
-        if (postScriptName) {
-          const weightMatch = postScriptName.match(
-            /(?:^|-)(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)(?:-|$)/i
-          );
-          if (weightMatch) {
-            const weightName = weightMatch[1].toLowerCase();
-            const weightMap: Record<string, number> = {
-              thin: 100,
-              extralight: 200,
-              light: 300,
-              regular: 400,
-              medium: 500,
-              semibold: 600,
-              bold: 700,
-              extrabold: 800,
-              black: 900,
-            };
-            weight = weightMap[weightName] || 400;
-          }
-        }
-
-        // Create FontFace with weight descriptor if we inferred it
-        const fontFace =
-          weight !== undefined
-            ? new FontFace(family, `url(${url})`, { weight: weight.toString() })
-            : new FontFace(family, `url(${url})`);
+        const familyName = postScriptName || family;
+        const fontFace = new FontFace(familyName, `url(${url})`, {
+          weight: "100 900",
+          style: "normal",
+        });
 
         fontFace
           .load()
           .then((ff) => {
             document.fonts.add(ff);
+            console.log(
+              `[AG_DEBUG] [EncoreApp] ✅ Font loaded successfully: "${familyName}" - Source: ${url}`
+            );
+            // Check if it's usable - check for any weight since we registered 100-900
+            const isCheckPassed = document.fonts.check(
+              `400 12px "${familyName}"`
+            );
+            console.log(
+              `[AG_DEBUG] [EncoreApp] 🧪 document.fonts.check result for "${familyName}": ${isCheckPassed}`
+            );
           })
           .catch((err) => {
             console.warn(
-              `[EncoreApp] Failed to load font "${
+              `[AG_DEBUG] [EncoreApp] ❌ Failed to load font "${
                 postScriptName || family
               }" from ${url}`,
               err
@@ -301,9 +306,23 @@ const EncoreApp = ({
       `/devices/apps/${appId}/node/${pageId}${
         useLocalFlag ? "?useLocal=1" : ""
       }`;
+
+  console.log(`[AG_DEBUG] [EncoreApp] pageUrl: ${pageUrl}`);
+
   const pageSWR = useSWR(pageUrl, fetcher, { suspense: !!pageUrl });
   const pageData = pageDefinition ? { data: pageDefinition } : pageSWR;
 
+  console.log(
+    `[AG_DEBUG] [EncoreApp] pageData.data type: ${typeof pageData?.data}, hasData: ${!!pageData?.data}`
+  );
+  if (pageData?.data) {
+    console.log(
+      `[AG_DEBUG] [EncoreApp] pageData.data JSON: ${JSON.stringify(
+        pageData.data
+      ).substring(0, 1000)}`
+    );
+  }
+
   // Debug logging commented out to prevent console flooding
   /*
   useEffect(() => {
@@ -467,12 +486,25 @@ const EncoreApp = ({
   // Only recreate when the actual data changes, not on every render
   const context = useMemo(() => {
     let clientData = pageData.data?.clientData;
+    console.log(
+      `[AG_DEBUG] [EncoreApp] useMemo: clientData present? ${!!clientData}, Keys: ${Object.keys(
+        clientData || {}
+      )}`
+    );
 
     // --- GENERIC DATA PATCHING START ---
     // Recursively patch the data to fix layout and slider issues based on heuristics
     const patchPageData = (node: any) => {
       if (!node || typeof node !== "object") return;
 
+      // Log font usage
+      if (node.componentId || node.type === "component:text") {
+        console.log(
+          `[AG_DEBUG] [EncoreApp] 📦 Node ${node.id} (${node.type}) Style:`,
+          JSON.stringify(node.style)
+        );
+      }
+
       // 1. Layout Heuristic: If children widths sum to ~100% or ~375px, force HORIZONTAL layout
       // RELAXED: No longer requires layoutSizingHorizontal: "FIXED" - width data alone is sufficient
       if (

package/src/components.tsx

@@ -455,7 +455,15 @@ const useEncoreStyle = (
   if (style.opacity) result.opacity = style.opacity * 0.01;
   if (style.fontId) {
     const fontFamily = fontIdToFamily[style.fontId] || "sans-serif";
-    result.fontFamily = fontFamily;
+    // Ensure font family name is quoted for names with spaces/special characters
+    result.fontFamily = `"${fontFamily}"`;
+
+    console.log(`[AG_DEBUG] [useEncoreStyle] Font Resolution:`, {
+      fontId: style.fontId,
+      resolvedFamily: fontFamily,
+      fontWeight: style.fontWeight,
+      finalStyle: result.fontFamily,
+    });
   }
   if (style.borderRadius) {
     result.borderRadius = percentOfParentWidthToPx(style.borderRadius);

package/src/stores/useEncoreState.ts

@@ -68,7 +68,10 @@ const useEncoreState = create<EncoreState>((set) => ({
         app.app?.fonts?.reduce?.(
           (acc: Record<string, string>, font: any) => ({
             ...acc,
-            [font.id]: font.fontName?.family || "sans-serif",
+            [font.id]:
+              font.fontName?.postScriptName ||
+              font.fontName?.family ||
+              "sans-serif",
           }),
           {}
         ) ?? {},