@bravostudioai/react 0.1.14 → 0.1.16

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,0DACsB,CAAC;AAE1D,eAAO,MAAM,wBAAwB,oDACc,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,0DACsB,CAAC;AAG1D,eAAO,MAAM,wBAAwB,oDACc,CAAC"}

package/dist/packages/encore-lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../constants.ts"],"sourcesContent":["export const CONST_APPS_SERVICE_URL =\n  \"https://apps-service-585087176299.us-central1.run.app\";\n\nexport const CONST_COMPONENTS_CDN_URL =\n  \"https://bsai-public.sfo3.digitaloceanspaces.com\";\n"],"names":["CONST_APPS_SERVICE_URL","CONST_COMPONENTS_CDN_URL"],"mappings":"AAAO,MAAMA,IACX,yDAEWC,IACX;"}
+{"version":3,"file":"constants.js","sources":["../../../constants.ts"],"sourcesContent":["export const CONST_APPS_SERVICE_URL =\n  \"https://apps-service-585087176299.us-central1.run.app\";\n// export const CONST_APPS_SERVICE_URL = \"http://localhost:3001\";\n\nexport const CONST_COMPONENTS_CDN_URL =\n  \"https://bsai-public.sfo3.digitaloceanspaces.com\";\n"],"names":["CONST_APPS_SERVICE_URL","CONST_COMPONENTS_CDN_URL"],"mappings":"AAAO,MAAMA,IACX,yDAGWC,IACX;"}

package/dist/src/cli/commands/generate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../../../../src/cli/commands/generate.ts"],"names":[],"mappings":"AA8VA,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,iBAyD/C"}
+{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../../../../src/cli/commands/generate.ts"],"names":[],"mappings":"AAsWA,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,iBAyD/C"}

package/dist/src/codegen/generator.d.ts

@@ -4,7 +4,11 @@ export interface ComponentMetadata {
     events: string[];
     jsx: string;
 }
-export declare function generateComponentCode(appId: string, pageId: string, componentName: string, sliders: SliderInfo[], standaloneComponents: ComponentInfo[], inputGroups: InputGroupInfo[], forms: FormInfo[], selectInputs: SelectInputInfo[], actionButtons: ActionButtonInfo[], isProduction?: boolean): string;
+export declare function generateComponentCode(appId: string, pageId: string, componentName: string, sliders: SliderInfo[], standaloneComponents: ComponentInfo[], inputGroups: InputGroupInfo[], forms: FormInfo[], selectInputs: SelectInputInfo[], actionButtons: ActionButtonInfo[], isProduction?: boolean, pageMeta?: {
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
+}): string;
 export declare function generateReadme(appId: string, pageId: string, appName: string, pageName: string, componentName: string, sliders: SliderInfo[], standaloneComponents: ComponentInfo[], inputGroups: InputGroupInfo[], forms: FormInfo[], selectInputs: SelectInputInfo[], actionButtons: ActionButtonInfo[]): string;
 export declare function generateComponentMetadata(_appName: string, pageName: string, sliders: SliderInfo[], standaloneComponents: ComponentInfo[], inputGroups: InputGroupInfo[], forms: FormInfo[], selectInputs: SelectInputInfo[], actionButtons: ActionButtonInfo[]): ComponentMetadata;
 //# sourceMappingURL=generator.d.ts.map

package/dist/src/codegen/generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../src/codegen/generator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,QAAQ,EACR,eAAe,EACf,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAOjB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,EACjC,YAAY,GAAE,OAAe,GAC5B,MAAM,CA2ZR;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,GAChC,MAAM,CAwVR;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,GAChC,iBAAiB,CAiEnB"}
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../src/codegen/generator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,QAAQ,EACR,eAAe,EACf,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAOjB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,EACjC,YAAY,GAAE,OAAe,EAC7B,QAAQ,CAAC,EAAE;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GACA,MAAM,CAiaR;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,GAChC,MAAM,CAwVR;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,UAAU,EAAE,EACrB,oBAAoB,EAAE,aAAa,EAAE,EACrC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,YAAY,EAAE,eAAe,EAAE,EAC/B,aAAa,EAAE,gBAAgB,EAAE,GAChC,iBAAiB,CAiEnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"EncoreApp.d.ts","sourceRoot":"","sources":["../../../src/components/EncoreApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAA4B,EAC1B,KAAK,mBAAmB,EACzB,MAAM,iCAAiC,CAAC;AA2BzC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC;IAE/C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B,0BAA0B,CAAC,EAAE,MAAM,CACjC,MAAM,EACN;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CACnE,CAAC;IAEF,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAeF,QAAA,MAAM,SAAS,GAAI,sMAgBhB,KAAK,4CAqvBP,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"EncoreApp.d.ts","sourceRoot":"","sources":["../../../src/components/EncoreApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAA4B,EAC1B,KAAK,mBAAmB,EACzB,MAAM,iCAAiC,CAAC;AA2BzC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC;IAE/C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B,0BAA0B,CAAC,EAAE,MAAM,CACjC,MAAM,EACN;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CACnE,CAAC;IAEF,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAeF,QAAA,MAAM,SAAS,GAAI,sMAgBhB,KAAK,4CA6vBP,CAAC;AAEF,eAAe,SAAS,CAAC"}

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;AAwjGf,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAoDxD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AA6jGf,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAoDxD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

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

package/src/cli/commands/generate.ts

@@ -271,7 +271,15 @@ async function generateWrapper({
     forms,
     selectInputs,
     actionButtons,
-    !!isProduction
+    !!isProduction,
+    {
+      width: pageData.style?.width,
+      height: pageData.style?.height,
+      aspectRatio:
+        pageData.style?.width && pageData.style?.height
+          ? pageData.style.width / pageData.style.height
+          : undefined,
+    }
   );
 
   const readmeContent = generateReadme(

package/src/codegen/generator.ts

@@ -28,7 +28,12 @@ export function generateComponentCode(
   forms: FormInfo[],
   selectInputs: SelectInputInfo[],
   actionButtons: ActionButtonInfo[],
-  isProduction: boolean = false
+  isProduction: boolean = false,
+  pageMeta?: {
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
+  }
 ): string {
   // Generate prop types
   const propTypes: string[] = [];
@@ -439,6 +444,12 @@ ${dataMapping.join("\n")}
 }
 
 export default ${componentName};
+
+export const PageMeta = {
+  width: ${pageMeta?.width ?? "undefined"},
+  height: ${pageMeta?.height ?? "undefined"},
+  aspectRatio: ${pageMeta?.aspectRatio ?? "undefined"},
+};
 `;
 }
 

package/src/components/EncoreApp.tsx

@@ -828,7 +828,15 @@ const EncoreApp = ({
         overflow: "hidden",
       }}
     >
-      <div ref={contentWrapperRef} style={{ width: "100%", minHeight: "100%" }}>
+      <div
+        ref={contentWrapperRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Suspense fallback={fallback || <div />}>
           <EncoreComponentIdContext.Provider value={{ componentId }}>
             <EncoreActionContext.Provider value={{ onAction }}>

package/src/components.tsx

@@ -136,12 +136,7 @@ const useEncoreStyle = (
 
   if (!style) return undefined;
 
-  // DEBUG: Log style for specific components
-  const debugIds = [
-    "01KB929X1DQJN954WNGF5AH38B", // Slider
-    "01KB929X1KK5TX0K8VBNP6ZDPG", // Hero Container
-    "01KB929X17VWVF3A2J2DY0KHC5", // Page
-  ];
+  if (!style) return undefined;
   // We don't have 'id' here directly in useEncoreStyle, but we can try to infer or pass it.
   // Actually, let's just log if we see interesting positioning values or if we can pass ID.
   // Since we can't easily pass ID without changing signature, let's add logging in the components themselves.
@@ -196,10 +191,18 @@ const useEncoreStyle = (
         : style.positioning.left;
 
     // HEURISTIC: Detect if element should be centered horizontally
+    let shouldCenterHorizontally = false;
+
+    // Explicit valid check from StyleDto
+    if (style.horizontalPosition === "center") {
+      shouldCenterHorizontally = true;
+    }
+
     // If element has explicit width that's nearly full-width (>= 95% of container) and left position
     // is in the range 15-35% (which suggests the element should be centered but is
     // currently positioned from its left edge), center it using transform
     if (
+      !shouldCenterHorizontally &&
       hasExplicitDimensions &&
       style.layout?.layoutSizingHorizontal === "FIXED" &&
       style.layout?.size?.x
@@ -250,6 +253,7 @@ const useEncoreStyle = (
         result.left = "50%";
         result.right = "auto";
       }
+      result.transform = "translateX(-50%)";
     } else {
       if (hasInset) {
         // Preserve original inset if not centering
@@ -1584,6 +1588,7 @@ const TextComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
   const styleWithFont = nodeData.fontId
     ? { ...bravoStyle, fontId: nodeData.fontId }
     : bravoStyle;
+
   const style = useEncoreStyle(styleWithFont, {
     debug: false,
   });