@bravostudioai/react 0.1.0 → 0.1.1

package/src/cli/commands/generate.ts

@@ -1,2488 +1,53 @@
+import { promises as fs } from "fs";
+import { join, dirname } from "path";
+import { existsSync } from "fs";
+import * as dotenv from "dotenv";
+import {
+  CONST_APPS_SERVICE_URL,
+  CONST_COMPONENTS_CDN_URL,
+} from "../../../constants";
+import {
+  findSlidersAndDataBindings,
+  findStandaloneComponents,
+  findInputGroups,
+  findForms,
+  findStandaloneSelectInputs,
+  findActionButtons,
+  qualifyFormInputs,
+  generateComponentCode,
+  generateReadme,
+  sanitizePropName,
+} from "../../codegen";
+
+const { writeFile, mkdir, readFile } = fs;
 
+dotenv.config();
 
-import { writeFile, mkdir, readFile } from "fs/promises";
-import { join, dirname } from "path";
-import { existsSync } from "fs";
-import dotenv from "dotenv";
-import {
-  CONST_APPS_SERVICE_URL,
-  CONST_COMPONENTS_CDN_URL,
-} from "../../../constants";
-
-dotenv.config();
-
-// Default apps service URL (can be overridden with APPS_SERVICE_URL env var)
-const APPS_SERVICE_URL =
-  process.env.APPS_SERVICE_URL ||
-  process.env.VITE_APPS_SERVICE_URL ||
-  CONST_APPS_SERVICE_URL ||
-  "https://apps-service-dev.bravostudio.app";
-console.log(`Using APPS_SERVICE_URL: ${APPS_SERVICE_URL}`);
-const COMPONENTS_CDN_URL =
-  CONST_COMPONENTS_CDN_URL || "https://apps-public-dev.bravostudio.app";
-
-interface ComponentInfo {
-  id: string;
-  name: string;
-  type: string;
-  tags: string[];
-  propName: string; // Sanitized name for prop
-  propType: string; // TypeScript type for the prop
-}
-
-interface ArrayContainerInfo {
-  id: string;
-  name: string;
-  propName: string;
-  components: ComponentInfo[];
-}
-
-interface SliderInfo {
-  id: string;
-  name: string;
-  arrayContainer: ArrayContainerInfo | null;
-}
-
-interface InputGroupInfo {
-  groupName: string;
-  groupType: string; // "single" for radio button behavior
-  elements: Array<{
-    id: string;
-    name: string;
-  }>;
-}
-
-interface FormInfo {
-  formId: string;
-  formName: string;
-  submitButtonId?: string;
-  inputs: Array<{
-    id: string;
-    name: string;
-    type: string;
-    propName: string; // Sanitized and qualified prop name
-    _parentPath?: string[]; // Temporary: parent path for qualification
-  }>;
-}
-
-interface SelectInputInfo {
-  id: string;
-  name: string;
-  propName: string; // e.g., "contractType" for value prop, generates onContractTypeChange handler
-  _parentPath?: string[]; // For qualification if duplicates
-}
-
-interface ActionButtonInfo {
-  id: string;
-  name: string;
-  propName: string; // e.g., "bookButton" generates onBookButtonClick handler
-  actionType: string; // "remote", "link", etc.
-  _parentPath?: string[];
-}
-
-async function downloadFile(
-  url: string,
-  headers?: Record<string, string>
-): Promise<string> {
-  const response = await fetch(url, {
-    headers: headers || {},
-  });
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to download ${url}: ${response.status} ${response.statusText}`
-    );
-  }
-
-  return await response.text();
-}
-
-function sanitizePropName(name: string): string {
-  // Convert to camelCase and remove invalid characters
-  const cleaned = name
-    .replace(/[^a-zA-Z0-9\s]/g, "") // Remove special chars
-    .trim();
-
-  if (!cleaned) return "item";
-
-  return cleaned
-    .split(/\s+/)
-    .map((word, index) => {
-      if (!word) return "";
-      // Handle all-uppercase words (like "SHOP", "NOW") by lowercasing them first
-      const normalizedWord =
-        word === word.toUpperCase() && word.length > 1
-          ? word.toLowerCase()
-          : word;
-      const firstChar = normalizedWord.charAt(0);
-      const rest = normalizedWord.slice(1);
-      if (index === 0) {
-        return firstChar.toLowerCase() + rest;
-      }
-      return firstChar.toUpperCase() + rest;
-    })
-    .join("")
-    .replace(/^[0-9]/, "_$&"); // Prefix numbers with underscore
-}
-
-function generateQualifiedPropName(
-  componentName: string,
-  parentPath: string[]
-): string {
-  // Start with the component's own name
-  const baseName = sanitizePropName(componentName);
-
-  // If no parent path, just return the base name
-  if (parentPath.length === 0) {
-    return baseName;
-  }
-
-  // Filter out empty parts and reverse so we build from root to leaf
-  const validParentParts = parentPath
-    .filter((part) => part && part.trim())
-    .reverse();
-
-  if (validParentParts.length === 0) {
-    return baseName;
-  }
-
-  // Build qualified name: parent1Parent2ComponentName
-  // Each parent part is sanitized individually, then combined
-  const sanitizedParentParts = validParentParts.map((part) =>
-    sanitizePropName(part)
-  );
-
-  // Join parent parts (all start uppercase) with base name (starts lowercase)
-  const parentPrefix = sanitizedParentParts
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join("");
-
-  return parentPrefix + baseName;
-}
-
-/**
- * Finds the minimal distinguishing path suffix for a component when compared to others.
- * Returns the shortest suffix (from root side, working towards leaf) that makes this path unique.
- *
- * The algorithm finds where paths first diverge from the root, then takes the minimal
- * distinguishing part from that divergence point towards the leaf.
- *
- * Example:
- * - thisPath: [Frame11, Frame31, Frame18]
- * - otherPaths: [[Frame11, Frame31, Frame28, Frame29, Frame15]]
- * - Common prefix: [Frame11, Frame31]
- * - Divergence at index 2
- * - Returns: [Frame18] (just the immediate distinguishing parent)
- */
-function findMinimalDistinguishingPath(
-  thisPath: string[],
-  otherPaths: string[][]
-): string[] {
-  if (otherPaths.length === 0) {
-    // No other paths to compare, return empty (no qualification needed)
-    return [];
-  }
-
-  // Find the longest common prefix (from root side)
-  let commonPrefixLength = 0;
-  const maxCommonLength = Math.min(
-    thisPath.length,
-    ...otherPaths.map((p) => p.length)
-  );
-
-  for (let i = 0; i < maxCommonLength; i++) {
-    const thisPart = thisPath[i];
-    // Check if all other paths have the same part at this position
-    const allMatch = otherPaths.every((otherPath) => {
-      return otherPath[i] === thisPart;
-    });
-
-    if (allMatch) {
-      commonPrefixLength++;
-    } else {
-      break;
-    }
-  }
-
-  // The distinguishing part starts after the common prefix
-  const distinguishingSuffix = thisPath.slice(commonPrefixLength);
-
-  // Now find the minimal suffix that's unique
-  // Try progressively shorter suffixes (from root side) until we find one that's unique
-  for (
-    let suffixLength = 1;
-    suffixLength <= distinguishingSuffix.length;
-    suffixLength++
-  ) {
-    const thisSuffix = distinguishingSuffix.slice(0, suffixLength);
-
-    // Check if this suffix is unique when combined with the common prefix
-    const isUnique = otherPaths.every((otherPath) => {
-      // If other path is shorter than common prefix + suffix, it can't match
-      if (otherPath.length < commonPrefixLength + suffixLength) {
-        return true; // Different length means unique
-      }
-      // Check if the suffix matches at the divergence point
-      const otherSuffix = otherPath.slice(
-        commonPrefixLength,
-        commonPrefixLength + suffixLength
-      );
-      return !arraysEqual(thisSuffix, otherSuffix);
-    });
-
-    if (isUnique) {
-      // Found minimal distinguishing suffix
-      return thisSuffix;
-    }
-  }
-
-  // If we get here, paths are identical (shouldn't happen, but handle it)
-  return distinguishingSuffix;
-}
-
-/**
- * Helper to compare two arrays for equality
- */
-function arraysEqual(a: string[], b: string[]): boolean {
-  if (a.length !== b.length) return false;
-  return a.every((val, idx) => val === b[idx]);
-}
-
-function getComponentPropType(
-  componentType: string,
-  _componentName: string
-): string {
-  if (componentType === "component:image") {
-    return "string"; // imageUrl
-  }
-  if (componentType === "component:text") {
-    return "string"; // text
-  }
-  if (componentType?.startsWith("component:input-")) {
-    // Input types generally return strings
-    if (componentType === "component:input-image") {
-      return "string"; // image URL
-    }
-    return "string"; // text inputs, email, password, etc.
-  }
-  // Default to any for unknown types
-  return "any";
-}
-
-function getComponentPropName(componentType: string): string {
-  if (componentType === "component:image") {
-    return "imageUrl";
-  }
-  if (componentType === "component:text") {
-    return "text";
-  }
-  return "value";
-}
-
-function findSlidersAndDataBindings(pageData: any): SliderInfo[] {
-  const sliders: SliderInfo[] = [];
-
-  function traverse(node: any, path: string[] = []): void {
-    if (!node || typeof node !== "object") return;
-
-    // Check if this is a slider container
-    if (node.type === "container:slider") {
-      const slider: SliderInfo = {
-        id: node.id,
-        name: node.name || "Slider",
-        arrayContainer: null,
-      };
-
-      // Recursively look for containers with encore:data:array tag inside the slider
-      let arrayContainer: any = null;
-
-      function findArrayContainer(containerNode: any): void {
-        if (arrayContainer) return; // Already found one
-
-        if (!containerNode || typeof containerNode !== "object") return;
-
-        // Check if this node is the array container
-        if (
-          Array.isArray(containerNode.tags) &&
-          (containerNode.tags.includes("encore:data:array") ||
-            containerNode.tags.includes("bravo:data:array"))
-        ) {
-          arrayContainer = containerNode;
-          return;
-        }
-
-        // Recursively search children
-        if (containerNode.body && Array.isArray(containerNode.body)) {
-          containerNode.body.forEach(findArrayContainer);
-        }
-        if (
-          containerNode.containers &&
-          Array.isArray(containerNode.containers)
-        ) {
-          containerNode.containers.forEach(findArrayContainer);
-        }
-        if (
-          containerNode.components &&
-          Array.isArray(containerNode.components)
-        ) {
-          containerNode.components.forEach(findArrayContainer);
-        }
-      }
-
-      // Start search from the slider node itself (checking its children)
-      if (node.containers && Array.isArray(node.containers)) {
-        node.containers.forEach(findArrayContainer);
-      }
-      // Also check components if they exist directly
-      if (
-        !arrayContainer &&
-        node.components &&
-        Array.isArray(node.components)
-      ) {
-        node.components.forEach(findArrayContainer);
-      }
-
-      if (arrayContainer) {
-        const container = arrayContainer;
-        let components: ComponentInfo[] = [];
-
-        // Find all components with encore:data tag, and also image components
-        const imageComponents: any[] = [];
-
-        function findDataComponents(
-          comp: any,
-          parentPath: string[] = []
-        ): void {
-          if (!comp || typeof comp !== "object") return;
-
-          // Track image components separately (they might not have encore:data tag)
-          if (comp.type === "component:image") {
-            imageComponents.push(comp);
-          }
-
-          if (
-            Array.isArray(comp.tags) &&
-            (comp.tags.includes("encore:data") ||
-              comp.tags.includes("bravo:data"))
-          ) {
-            const basePropName = sanitizePropName(comp.name || "item");
-            const propType = getComponentPropType(comp.type, comp.name);
-            // const propKey = getComponentPropName(comp.type);
-
-            components.push({
-              id: comp.id,
-              name: comp.name || "Unnamed",
-              type: comp.type,
-              tags: comp.tags || [],
-              propName: basePropName, // Will be qualified later if needed
-              propType,
-              // Store parent path for later qualification
-              _parentPath: [...parentPath],
-            } as ComponentInfo & { _parentPath: string[] });
-          }
-
-          // Build parent path: include this node's name if it's a container/component with a name
-          // Skip generic "Frame" names - they're usually not meaningful for distinction
-          const currentParentPath = [...parentPath];
-          if (
-            comp.name &&
-            (comp.type?.startsWith("container:") ||
-              comp.type?.startsWith("component:"))
-          ) {
-            const name = comp.name.trim();
-            // Filter out generic "Frame" names (case-insensitive, with or without numbers/spaces)
-            // But keep meaningful names like "TripSlideFrame" that contain other words
-            const isGenericFrame =
-              /^frame\s*\d*$/i.test(name) || name.toUpperCase() === "FRAME";
-            if (name && !isGenericFrame) {
-              currentParentPath.push(comp.name);
-            }
-          }
-
-          // Recursively search children
-          if (comp.components && Array.isArray(comp.components)) {
-            comp.components.forEach((child: any) =>
-              findDataComponents(child, currentParentPath)
-            );
-          }
-        }
-
-        if (container.components && Array.isArray(container.components)) {
-          container.components.forEach((comp: any) =>
-            findDataComponents(comp, [])
-          );
-        }
-
-        // After finding all components, if we have image components but no image with encore:data,
-        // add the first image component
-        const hasImageWithData = components.some(
-          (c) => c.type === "component:image"
-        );
-        if (!hasImageWithData && imageComponents.length > 0) {
-          const imageComp = imageComponents[0];
-          // For image components, use "imageUrl" as the prop name
-          // Clean the name first, then if it contains "image", just use "imageUrl"
-          const rawName = (imageComp.name || "image").toLowerCase();
-          const basePropName = rawName.includes("image")
-            ? "imageUrl"
-            : sanitizePropName(imageComp.name || "image");
-          components.push({
-            id: imageComp.id,
-            name: imageComp.name || "Image",
-            type: imageComp.type,
-            tags: imageComp.tags || [],
-            propName: basePropName, // Will be qualified later if needed
-            propType: "string", // imageUrl is always string
-            _parentPath: [],
-          } as ComponentInfo & { _parentPath: string[] });
-        }
-
-        // Detect duplicates and qualify them with minimal distinguishing paths
-        // First pass: collect all base prop names and group duplicates
-        const propNameGroups = new Map<
-          string,
-          Array<ComponentInfo & { _parentPath: string[] }>
-        >();
-        components.forEach((comp) => {
-          const compWithPath = comp as ComponentInfo & {
-            _parentPath: string[];
-          };
-          const baseName = comp.propName;
-          if (!propNameGroups.has(baseName)) {
-            propNameGroups.set(baseName, []);
-          }
-          propNameGroups.get(baseName)!.push(compWithPath);
-        });
-
-        // Second pass: for each group with duplicates, find minimal distinguishing paths
-        // and ensure all qualified names are unique
-        propNameGroups.forEach((group, _baseName) => {
-          if (group.length === 1) {
-            // No duplicates, keep the simple name
-            return;
-          }
-
-          // First, find minimal distinguishing paths for all components
-          group.forEach((comp) => {
-            const otherPaths = group
-              .filter((c) => c.id !== comp.id)
-              .map((c) => c._parentPath || []);
-
-            const minimalPath = findMinimalDistinguishingPath(
-              comp._parentPath || [],
-              otherPaths
-            );
-
-            // Use the minimal distinguishing path to qualify the name
-            comp.propName = generateQualifiedPropName(
-              comp.name || "item",
-              minimalPath
-            );
-          });
-
-          // Check if qualified names are still duplicates and expand paths if needed
-          let hasDuplicates = true;
-          let iteration = 0;
-          const maxIterations = 10; // Safety limit
-
-          while (hasDuplicates && iteration < maxIterations) {
-            iteration++;
-            const qualifiedNameGroups = new Map<
-              string,
-              Array<ComponentInfo & { _parentPath: string[] }>
-            >();
-            group.forEach((comp) => {
-              if (!qualifiedNameGroups.has(comp.propName)) {
-                qualifiedNameGroups.set(comp.propName, []);
-              }
-              qualifiedNameGroups.get(comp.propName)!.push(comp);
-            });
-
-            hasDuplicates = false;
-            // For each group of still-duplicated qualified names, expand their paths
-            qualifiedNameGroups.forEach((dupGroup, _qualifiedName) => {
-              if (dupGroup.length > 1) {
-                hasDuplicates = true;
-                // Expand the distinguishing path for each duplicate
-                dupGroup.forEach((comp) => {
-                  
-
-                  // Find a longer distinguishing path by comparing with others in the duplicate group
-                  const fullPath = comp._parentPath || [];
-                  const otherFullPaths = dupGroup
-                    .filter((c) => c.id !== comp.id)
-                    .map((c) => c._parentPath || []);
-
-                  // Find where this path diverges from others in the duplicate group
-                  let commonPrefixLength = 0;
-                  const maxCommonLength = Math.min(
-                    fullPath.length,
-                    ...otherFullPaths.map((p) => p.length)
-                  );
-
-                  for (let i = 0; i < maxCommonLength; i++) {
-                    const thisPart = fullPath[i];
-                    const allMatch = otherFullPaths.every((otherPath) => {
-                      return otherPath[i] === thisPart;
-                    });
-                    if (allMatch) {
-                      commonPrefixLength++;
-                    } else {
-                      break;
-                    }
-                  }
-
-                  // Use progressively more of the distinguishing suffix until unique
-                  const distinguishingSuffix =
-                    fullPath.slice(commonPrefixLength);
-
-                  // Try expanding the distinguishing suffix until we find a unique name
-                  let foundUnique = false;
-                  for (
-                    let suffixLength = 1;
-                    suffixLength <= distinguishingSuffix.length;
-                    suffixLength++
-                  ) {
-                    const expandedPath = distinguishingSuffix.slice(
-                      0,
-                      suffixLength
-                    );
-                    const testQualifiedName = generateQualifiedPropName(
-                      comp.name || "item",
-                      expandedPath
-                    );
-
-                    // Check if this qualified name is unique among ALL components (not just duplicates)
-                    const isUnique = components.every((otherComp) => {
-                      if (otherComp.id === comp.id) return true;
-                      // If other component is in the same duplicate group, compare expanded paths
-                      if (dupGroup.some((c) => c.id === otherComp.id)) {
-                        const otherFullPath =
-                          (
-                            otherComp as ComponentInfo & {
-                              _parentPath: string[];
-                            }
-                          )._parentPath || [];
-                        const otherCommonPrefixLength = Math.min(
-                          commonPrefixLength,
-                          otherFullPath.length
-                        );
-                        const otherDistinguishingSuffix = otherFullPath.slice(
-                          otherCommonPrefixLength
-                        );
-                        const otherExpandedPath =
-                          otherDistinguishingSuffix.slice(0, suffixLength);
-                        const otherQualifiedName = generateQualifiedPropName(
-                          otherComp.name || "item",
-                          otherExpandedPath
-                        );
-                        return testQualifiedName !== otherQualifiedName;
-                      }
-                      // For components outside the duplicate group, just check the final prop name
-                      return testQualifiedName !== otherComp.propName;
-                    });
-
-                    if (isUnique) {
-                      comp.propName = testQualifiedName;
-                      foundUnique = true;
-                      break;
-                    }
-                  }
-
-                  // If we couldn't find a unique name with the distinguishing suffix,
-                  // use the distinguishing suffix we found (it's the minimal we can do)
-                  // We'll handle truly identical paths with numeric suffixes in the final pass
-                  if (!foundUnique) {
-                    // Use the distinguishing suffix - it's the minimal distinguishing part
-                    // Even if it's not globally unique yet, it's better than the full path
-                    comp.propName = generateQualifiedPropName(
-                      comp.name || "item",
-                      distinguishingSuffix.length > 0
-                        ? distinguishingSuffix
-                        : []
-                    );
-                  }
-                });
-              }
-            });
-          }
-
-          // Final check: if there are still duplicates after using full paths,
-          // and they have identical paths, use numeric suffixes as last resort
-          const finalQualifiedNameGroups = new Map<
-            string,
-            Array<ComponentInfo & { _parentPath: string[] }>
-          >();
-          group.forEach((comp) => {
-            if (!finalQualifiedNameGroups.has(comp.propName)) {
-              finalQualifiedNameGroups.set(comp.propName, []);
-            }
-            finalQualifiedNameGroups.get(comp.propName)!.push(comp);
-          });
-
-          finalQualifiedNameGroups.forEach(
-            (finalDupGroup, finalQualifiedName) => {
-              if (finalDupGroup.length > 1) {
-                // Check if all duplicates have identical paths
-                const allPathsIdentical = finalDupGroup.every((comp) => {
-                  const thisPath = comp._parentPath || [];
-                  return finalDupGroup.every((otherComp) => {
-                    if (otherComp.id === comp.id) return true;
-                    const otherPath = otherComp._parentPath || [];
-                    return arraysEqual(thisPath, otherPath);
-                  });
-                });
-
-                // Only use numeric suffixes if paths are truly identical
-                if (allPathsIdentical) {
-                  let index = 0;
-                  finalDupGroup.forEach((comp) => {
-                    if (index > 0) {
-                      comp.propName = `${finalQualifiedName}${index + 1}`;
-                    }
-                    index++;
-                  });
-                }
-              }
-            }
-          );
-
-          // Remove the temporary _parentPath property
-          group.forEach((comp) => {
-            delete (comp as any)._parentPath;
-          });
-        });
-
-        // If we have an image component, remove color components with similar names
-        // (they're usually placeholders/backgrounds)
-        if (imageComponents.length > 0) {
-          const imageComp = imageComponents[0];
-          const imageName = (imageComp.name || "").toLowerCase();
-          components = components.filter((comp) => {
-            // Keep image components
-            if (comp.type === "component:image") return true;
-            // Remove color components that seem to be placeholders for images
-            if (comp.type === "component:color") {
-              const compName = (comp.name || "").toLowerCase();
-              // If color component name is similar to image name, it's likely a placeholder
-              if (imageName.includes(compName) || compName.includes("image")) {
-                return false;
-              }
-            }
-            return true;
-          });
-        }
-
-        slider.arrayContainer = {
-          id: container.id,
-          name: container.name || "Item",
-          propName: sanitizePropName(container.name || "items"),
-          components,
-        };
-      }
-
-      sliders.push(slider);
-    }
-
-    // Recursively traverse children
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach((child: any) => traverse(child, [...path, "body"]));
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach((child: any) =>
-        traverse(child, [...path, "containers"])
-      );
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach((child: any) =>
-        traverse(child, [...path, "components"])
-      );
-    }
-  }
-
-  // Start traversal from page data
-  // Try multiple possible locations for the body
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach((node: any) => traverse(node));
-  }
-
-  return sliders;
-}
-
-function findStandaloneComponents(pageData: any): ComponentInfo[] {
-  const components: ComponentInfo[] = [];
-  const sliderIds = new Set<string>();
-
-  // First, collect all slider IDs to exclude their children
-  function collectSliderIds(node: any): void {
-    if (!node || typeof node !== "object") return;
-
-    if (node.type === "container:slider") {
-      sliderIds.add(node.id);
-    }
-
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach(collectSliderIds);
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach(collectSliderIds);
-    }
-  }
-
-  // Traverse to find standalone components with bravo:data tags
-  // Track parent component names for qualification
-  function traverse(
-    node: any,
-    parentId?: string,
-    parentPath: string[] = []
-  ): void {
-    if (!node || typeof node !== "object") return;
-
-    // Skip if we're inside a slider
-    if (parentId && sliderIds.has(parentId)) return;
-
-    // Check if this component has bravo:data tag
-    if (
-      Array.isArray(node.tags) &&
-      (node.tags.includes("encore:data") || node.tags.includes("bravo:data")) &&
-      (node.type === "component:text" || node.type === "component:image")
-    ) {
-      const basePropName = sanitizePropName(node.name || "item");
-      const propType = getComponentPropType(node.type, node.name);
-
-      components.push({
-        id: node.id,
-        name: node.name || "Unnamed",
-        type: node.type,
-        tags: node.tags || [],
-        propName: basePropName, // Will be qualified later if needed
-        propType,
-        // Store parent path for later qualification
-        _parentPath: [...parentPath],
-      } as ComponentInfo & { _parentPath: string[] });
-    }
-
-    // Build parent path: include this node's name if it's a container/component with a name
-    // Skip generic "Frame" names - they're usually not meaningful for distinction
-    const currentParentPath = [...parentPath];
-    if (
-      node.name &&
-      (node.type?.startsWith("container:") ||
-        node.type?.startsWith("component:"))
-    ) {
-      const name = node.name.trim();
-      // Filter out generic "Frame" names (case-insensitive, with or without numbers/spaces)
-      // But keep meaningful names like "TripSlideFrame" that contain other words
-      const isGenericFrame =
-        /^frame\s*\d*$/i.test(name) || name.toUpperCase() === "FRAME";
-      if (name && !isGenericFrame) {
-        currentParentPath.push(node.name);
-      }
-    }
-
-    // Recursively traverse children
-    const currentId = node.id;
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach((child: any) =>
-        traverse(child, currentId, currentParentPath)
-      );
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach((child: any) =>
-        traverse(child, currentId, currentParentPath)
-      );
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach((child: any) =>
-        traverse(child, currentId, currentParentPath)
-      );
-    }
-  }
-
-  // Start traversal from page data
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach(collectSliderIds);
-    body.forEach((node: any) => traverse(node));
-  }
-
-  // Detect duplicates and qualify them with minimal distinguishing paths
-  // First pass: collect all base prop names and group duplicates
-  const propNameGroups = new Map<
-    string,
-    Array<ComponentInfo & { _parentPath: string[] }>
-  >();
-  components.forEach((comp) => {
-    const compWithPath = comp as ComponentInfo & { _parentPath: string[] };
-    const baseName = comp.propName;
-    if (!propNameGroups.has(baseName)) {
-      propNameGroups.set(baseName, []);
-    }
-    propNameGroups.get(baseName)!.push(compWithPath);
-  });
-
-  // Second pass: for each group with duplicates, find minimal distinguishing paths
-  // and ensure all qualified names are unique
-  propNameGroups.forEach((group, _baseName) => {
-    if (group.length === 1) {
-      // No duplicates, keep the simple name
-      return;
-    }
-
-    // First, find minimal distinguishing paths for all components
-    group.forEach((comp) => {
-      const otherPaths = group
-        .filter((c) => c.id !== comp.id)
-        .map((c) => c._parentPath || []);
-
-      const minimalPath = findMinimalDistinguishingPath(
-        comp._parentPath || [],
-        otherPaths
-      );
-
-      // Use the minimal distinguishing path to qualify the name
-      comp.propName = generateQualifiedPropName(
-        comp.name || "item",
-        minimalPath
-      );
-    });
-
-    // Check if qualified names are still duplicates and expand paths if needed
-    let hasDuplicates = true;
-    let iteration = 0;
-    const maxIterations = 10; // Safety limit
-
-    while (hasDuplicates && iteration < maxIterations) {
-      iteration++;
-      const qualifiedNameGroups = new Map<
-        string,
-        Array<ComponentInfo & { _parentPath: string[] }>
-      >();
-      group.forEach((comp) => {
-        if (!qualifiedNameGroups.has(comp.propName)) {
-          qualifiedNameGroups.set(comp.propName, []);
-        }
-        qualifiedNameGroups.get(comp.propName)!.push(comp);
-      });
-
-      hasDuplicates = false;
-      // For each group of still-duplicated qualified names, expand their paths
-      qualifiedNameGroups.forEach((dupGroup, _qualifiedName) => {
-        if (dupGroup.length > 1) {
-          hasDuplicates = true;
-          // Expand the distinguishing path for each duplicate
-          dupGroup.forEach((comp) => {
-            
-
-            // Find a longer distinguishing path by comparing with others in the duplicate group
-            const fullPath = comp._parentPath || [];
-            const otherFullPaths = dupGroup
-              .filter((c) => c.id !== comp.id)
-              .map((c) => c._parentPath || []);
-
-            // Find where this path diverges from others in the duplicate group
-            let commonPrefixLength = 0;
-            const maxCommonLength = Math.min(
-              fullPath.length,
-              ...otherFullPaths.map((p) => p.length)
-            );
-
-            for (let i = 0; i < maxCommonLength; i++) {
-              const thisPart = fullPath[i];
-              const allMatch = otherFullPaths.every((otherPath) => {
-                return otherPath[i] === thisPart;
-              });
-              if (allMatch) {
-                commonPrefixLength++;
-              } else {
-                break;
-              }
-            }
-
-            // Use progressively more of the distinguishing suffix until unique
-            const distinguishingSuffix = fullPath.slice(commonPrefixLength);
-
-            // Try expanding the distinguishing suffix until we find a unique name
-            let foundUnique = false;
-            for (
-              let suffixLength = 1;
-              suffixLength <= distinguishingSuffix.length;
-              suffixLength++
-            ) {
-              const expandedPath = distinguishingSuffix.slice(0, suffixLength);
-              const testQualifiedName = generateQualifiedPropName(
-                comp.name || "item",
-                expandedPath
-              );
-
-              // Check if this qualified name is unique among ALL components (not just duplicates)
-              const isUnique = components.every((otherComp) => {
-                if (otherComp.id === comp.id) return true;
-                // If other component is in the same duplicate group, compare expanded paths
-                if (dupGroup.some((c) => c.id === otherComp.id)) {
-                  const otherFullPath =
-                    (otherComp as ComponentInfo & { _parentPath: string[] })
-                      ._parentPath || [];
-                  const otherCommonPrefixLength = Math.min(
-                    commonPrefixLength,
-                    otherFullPath.length
-                  );
-                  const otherDistinguishingSuffix = otherFullPath.slice(
-                    otherCommonPrefixLength
-                  );
-                  const otherExpandedPath = otherDistinguishingSuffix.slice(
-                    0,
-                    suffixLength
-                  );
-                  const otherQualifiedName = generateQualifiedPropName(
-                    otherComp.name || "item",
-                    otherExpandedPath
-                  );
-                  return testQualifiedName !== otherQualifiedName;
-                }
-                // For components outside the duplicate group, just check the final prop name
-                return testQualifiedName !== otherComp.propName;
-              });
-
-              if (isUnique) {
-                comp.propName = testQualifiedName;
-                foundUnique = true;
-                break;
-              }
-            }
-
-            // If we couldn't find a unique name with the distinguishing suffix,
-            // use the full path to ensure uniqueness (even if it makes names longer)
-            if (!foundUnique) {
-              comp.propName = generateQualifiedPropName(
-                comp.name || "item",
-                fullPath
-              );
-            }
-          });
-        }
-      });
-    }
-
-    // Final check: if there are still duplicates after using full paths,
-    // and they have identical paths, use numeric suffixes as last resort
-    const finalQualifiedNameGroups = new Map<
-      string,
-      Array<ComponentInfo & { _parentPath: string[] }>
-    >();
-    group.forEach((comp) => {
-      if (!finalQualifiedNameGroups.has(comp.propName)) {
-        finalQualifiedNameGroups.set(comp.propName, []);
-      }
-      finalQualifiedNameGroups.get(comp.propName)!.push(comp);
-    });
-
-    finalQualifiedNameGroups.forEach((finalDupGroup, finalQualifiedName) => {
-      if (finalDupGroup.length > 1) {
-        // Check if all duplicates have identical paths
-        const allPathsIdentical = finalDupGroup.every((comp) => {
-          const thisPath = comp._parentPath || [];
-          return finalDupGroup.every((otherComp) => {
-            if (otherComp.id === comp.id) return true;
-            const otherPath = otherComp._parentPath || [];
-            return arraysEqual(thisPath, otherPath);
-          });
-        });
-
-        // Only use numeric suffixes if paths are truly identical
-        if (allPathsIdentical) {
-          let index = 0;
-          finalDupGroup.forEach((comp) => {
-            if (index > 0) {
-              comp.propName = `${finalQualifiedName}${index + 1}`;
-            }
-            index++;
-          });
-        }
-      }
-    });
-
-    // Remove the temporary _parentPath property
-    group.forEach((comp) => {
-      delete (comp as any)._parentPath;
-    });
-  });
-
-  return components;
-}
-
-function findInputGroups(pageData: any): InputGroupInfo[] {
-  const groupsMap = new Map<string, InputGroupInfo>();
-
-  function traverse(node: any): void {
-    if (!node || typeof node !== "object") return;
-
-    // Check if this is an input-stateful-set with input-group tag
-    if (
-      node.type === "component:input-stateful-set" &&
-      Array.isArray(node.tags)
-    ) {
-      const inputGroupTag = node.tags.find((tag: string) =>
-        tag.startsWith("input-group:")
-      );
-      if (inputGroupTag) {
-        const parts = inputGroupTag.split(":");
-        if (parts.length >= 3) {
-          const groupType = parts[1];
-          const groupName = parts[2];
-
-          if (!groupsMap.has(groupName)) {
-            groupsMap.set(groupName, {
-              groupName,
-              groupType,
-              elements: [],
-            });
-          }
-
-          const group = groupsMap.get(groupName)!;
-          group.elements.push({
-            id: node.id,
-            name: node.name || "Unnamed",
-          });
-        }
-      }
-    }
-
-    // Recursively traverse children
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach(traverse);
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach(traverse);
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach(traverse);
-    }
-  }
-
-  // Start traversal from page data
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach((node: any) => traverse(node));
-  }
-
-  return Array.from(groupsMap.values());
-}
-
-function findForms(pageData: any): FormInfo[] {
-  const forms: FormInfo[] = [];
-
-  function traverse(node: any, parentContainer?: any): void {
-    if (!node || typeof node !== "object") return;
-
-    // Check if this is a container that might be a form
-    const isContainer =
-      node.type?.startsWith("container:") || node.type === "container:default";
-    const isNamedForm =
-      node.name?.toLowerCase().includes("form") ||
-      (Array.isArray(node.tags) && node.tags.includes("form"));
-
-    // Check if this container or any child has a submit action
-    let hasSubmitAction = false;
-    let submitButtonId: string | undefined;
-
-    function checkForSubmitAction(n: any): void {
-      if (!n || typeof n !== "object") return;
-
-      // Check if this node has a submit action
-      if (
-        Array.isArray(n.tags) &&
-        (n.tags.includes("action:submit") || n.tags.includes("submit"))
-      ) {
-        hasSubmitAction = true;
-        submitButtonId = n.id;
-        return;
-      }
-
-      // Check actions
-      if (n.actions?.tap?.action === "submit") {
-        hasSubmitAction = true;
-        submitButtonId = n.id;
-        return;
-      }
-
-      // Recursively check children
-      if (n.components && Array.isArray(n.components)) {
-        n.components.forEach(checkForSubmitAction);
-      }
-      if (n.body && Array.isArray(n.body)) {
-        n.body.forEach(checkForSubmitAction);
-      }
-    }
-
-    // If this looks like a form container, check for submit actions
-    if (isContainer && (isNamedForm || parentContainer === undefined)) {
-      checkForSubmitAction(node);
-    }
-
-    // If we found a form container (has submit action or is named "form")
-    if (isContainer && (hasSubmitAction || isNamedForm)) {
-      const inputs: FormInfo["inputs"] = [];
-
-      // Find all input components within this container
-      function findInputs(n: any, parentPath: string[] = []): void {
-        if (!n || typeof n !== "object") return;
-
-        // Check if this is an input component
-        if (
-          n.type?.startsWith("component:input-") ||
-          n.type === "component:input-text" ||
-          n.type === "component:input-image" ||
-          n.type === "component:input-email" ||
-          n.type === "component:input-password" ||
-          n.type === "component:input-select"
-        ) {
-          const basePropName = sanitizePropName(n.name || "Unnamed input");
-          inputs.push({
-            id: n.id,
-            name: n.name || "Unnamed input",
-            type: n.type,
-            propName: basePropName, // Will be qualified later if needed
-            _parentPath: [...parentPath], // Store parent path for qualification
-          });
-        }
-
-        // Build parent path: include this node's name if it's a container/component with a name
-        // Skip generic "Frame" names - they're usually not meaningful for distinction
-        const currentParentPath = [...parentPath];
-        if (
-          n.name &&
-          (n.type?.startsWith("container:") || n.type?.startsWith("component:"))
-        ) {
-          const name = n.name.trim();
-          // Filter out generic "Frame" names (case-insensitive, with or without numbers/spaces)
-          // But keep meaningful names like "TripSlideFrame" that contain other words
-          const isGenericFrame =
-            /^frame\s*\d*$/i.test(name) || name.toUpperCase() === "FRAME";
-          if (name && !isGenericFrame) {
-            currentParentPath.push(n.name);
-          }
-        }
-
-        // Recursively search children
-        if (n.components && Array.isArray(n.components)) {
-          n.components.forEach((child: any) =>
-            findInputs(child, currentParentPath)
-          );
-        }
-        if (n.body && Array.isArray(n.body)) {
-          n.body.forEach((child: any) => findInputs(child, currentParentPath));
-        }
-      }
-
-      findInputs(node, []);
-
-      // Only add form if it has inputs
-      if (inputs.length > 0) {
-        forms.push({
-          formId: node.id,
-          formName: node.name || "Form",
-          submitButtonId,
-          inputs,
-        });
-      }
-    }
-
-    // Recursively traverse children
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach((child: any) =>
-        traverse(child, isContainer ? node : parentContainer)
-      );
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach((child: any) =>
-        traverse(child, isContainer ? node : parentContainer)
-      );
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach((child: any) =>
-        traverse(child, isContainer ? node : parentContainer)
-      );
-    }
-  }
-
-  // Start traversal from page data
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach((node: any) => traverse(node));
-  }
-
-  return forms;
-}
-
-/**
- * Finds standalone select input components (input-select) that are NOT inside forms.
- * These should be exposed as controlled inputs with value and onChange props.
- */
-function findStandaloneSelectInputs(
-  pageData: any,
-  forms: FormInfo[]
-): SelectInputInfo[] {
-  const selectInputs: SelectInputInfo[] = [];
-
-  // Collect all input IDs that are already in forms
-  const formInputIds = new Set<string>();
-  forms.forEach((form) => {
-    form.inputs.forEach((input) => {
-      formInputIds.add(input.id);
-    });
-  });
-
-  // Traverse to find input-select components not in forms
-  function traverse(node: any, parentPath: string[] = []): void {
-    if (!node || typeof node !== "object") return;
-
-    // Check if this is an input-select component
-    if (node.type === "component:input-select" && !formInputIds.has(node.id)) {
-      const basePropName = sanitizePropName(node.name || "selectInput");
-      selectInputs.push({
-        id: node.id,
-        name: node.name || "Select Input",
-        propName: basePropName,
-        _parentPath: [...parentPath],
-      });
-    }
-
-    // Build parent path for qualification
-    const currentParentPath = [...parentPath];
-    if (
-      node.name &&
-      (node.type?.startsWith("container:") ||
-        node.type?.startsWith("component:"))
-    ) {
-      const name = node.name.trim();
-      const isGenericFrame =
-        /^frame\s*\d*$/i.test(name) || name.toUpperCase() === "FRAME";
-      if (name && !isGenericFrame) {
-        currentParentPath.push(node.name);
-      }
-    }
-
-    // Recursively traverse children
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach((child: any) => traverse(child, currentParentPath));
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach((child: any) =>
-        traverse(child, currentParentPath)
-      );
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach((child: any) =>
-        traverse(child, currentParentPath)
-      );
-    }
-  }
-
-  // Start traversal from page data
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach((node: any) => traverse(node));
-  }
-
-  // Qualify duplicate prop names
-  qualifySelectInputs(selectInputs);
-
-  return selectInputs;
-}
-
-/**
- * Qualifies select input prop names to ensure uniqueness.
- */
-function qualifySelectInputs(selectInputs: SelectInputInfo[]): void {
-  const propNameGroups = new Map<
-    string,
-    Array<SelectInputInfo & { _parentPath: string[] }>
-  >();
-
-  selectInputs.forEach((input) => {
-    const inputWithPath = input as SelectInputInfo & { _parentPath: string[] };
-    const baseName = input.propName;
-    if (!propNameGroups.has(baseName)) {
-      propNameGroups.set(baseName, []);
-    }
-    propNameGroups.get(baseName)!.push(inputWithPath);
-  });
-
-  propNameGroups.forEach((group, _baseName) => {
-    if (group.length === 1) {
-      delete (group[0] as any)._parentPath;
-      return;
-    }
-
-    // Find minimal distinguishing paths for duplicates
-    group.forEach((input) => {
-      const otherPaths = group
-        .filter((i) => i.id !== input.id)
-        .map((i) => i._parentPath || []);
-
-      const minimalPath = findMinimalDistinguishingPath(
-        input._parentPath || [],
-        otherPaths
-      );
-
-      input.propName = generateQualifiedPropName(
-        input.name || "input",
-        minimalPath
-      );
-    });
-
-    // Clean up
-    group.forEach((input) => {
-      delete (input as any)._parentPath;
-    });
-  });
-}
-
-/**
- * Finds action buttons - components that have action tags (action:remote, action:link, etc.)
- * or have actions defined. These should be exposed with onClick handlers.
- */
-function findActionButtons(pageData: any): ActionButtonInfo[] {
-  const buttons: ActionButtonInfo[] = [];
-
-  function traverse(node: any, parentPath: string[] = []): void {
-    if (!node || typeof node !== "object") return;
-
-    // Check if this component has an action tag or actions defined
-    const hasActionTag =
-      Array.isArray(node.tags) &&
-      node.tags.some((tag: string) => tag.startsWith("action:"));
-    const hasActions = node.actions && typeof node.actions === "object";
-
-    if (hasActionTag || hasActions) {
-      // Determine the action type
-      let actionType = "tap";
-      if (Array.isArray(node.tags)) {
-        const actionTag = node.tags.find((tag: string) =>
-          tag.startsWith("action:")
-        );
-        if (actionTag) {
-          actionType = actionTag.replace("action:", "");
-        }
-      }
-      if (node.actions?.tap?.action) {
-        actionType = node.actions.tap.action;
-      }
-
-      const basePropName = sanitizePropName(node.name || "button");
-      buttons.push({
-        id: node.id,
-        name: node.name || "Button",
-        propName: basePropName,
-        actionType,
-        _parentPath: [...parentPath],
-      });
-    }
-
-    // Build parent path for qualification
-    const currentParentPath = [...parentPath];
-    if (
-      node.name &&
-      (node.type?.startsWith("container:") ||
-        node.type?.startsWith("component:"))
-    ) {
-      const name = node.name.trim();
-      const isGenericFrame =
-        /^frame\s*\d*$/i.test(name) || name.toUpperCase() === "FRAME";
-      if (name && !isGenericFrame) {
-        currentParentPath.push(node.name);
-      }
-    }
-
-    // Recursively traverse children
-    if (node.body && Array.isArray(node.body)) {
-      node.body.forEach((child: any) => traverse(child, currentParentPath));
-    }
-    if (node.containers && Array.isArray(node.containers)) {
-      node.containers.forEach((child: any) =>
-        traverse(child, currentParentPath)
-      );
-    }
-    if (node.components && Array.isArray(node.components)) {
-      node.components.forEach((child: any) =>
-        traverse(child, currentParentPath)
-      );
-    }
-  }
-
-  // Start traversal from page data
-  const body =
-    pageData.data?.body || pageData.body || (pageData as any).data?.body || [];
-
-  if (Array.isArray(body) && body.length > 0) {
-    body.forEach((node: any) => traverse(node));
-  }
-
-  // Qualify duplicate prop names
-  qualifyActionButtons(buttons);
-
-  return buttons;
-}
-
-/**
- * Qualifies action button prop names to ensure uniqueness.
- */
-function qualifyActionButtons(buttons: ActionButtonInfo[]): void {
-  const propNameGroups = new Map<
-    string,
-    Array<ActionButtonInfo & { _parentPath: string[] }>
-  >();
-
-  buttons.forEach((button) => {
-    const buttonWithPath = button as ActionButtonInfo & {
-      _parentPath: string[];
-    };
-    const baseName = button.propName;
-    if (!propNameGroups.has(baseName)) {
-      propNameGroups.set(baseName, []);
-    }
-    propNameGroups.get(baseName)!.push(buttonWithPath);
-  });
-
-  propNameGroups.forEach((group, _baseName) => {
-    if (group.length === 1) {
-      delete (group[0] as any)._parentPath;
-      return;
-    }
-
-    // Find minimal distinguishing paths for duplicates
-    group.forEach((button) => {
-      const otherPaths = group
-        .filter((b) => b.id !== button.id)
-        .map((b) => b._parentPath || []);
-
-      const minimalPath = findMinimalDistinguishingPath(
-        button._parentPath || [],
-        otherPaths
-      );
-
-      button.propName = generateQualifiedPropName(
-        button.name || "button",
-        minimalPath
-      );
-    });
-
-    // Clean up
-    group.forEach((button) => {
-      delete (button as any)._parentPath;
-    });
-  });
-}
-
-/**
- * Qualifies form input prop names to ensure uniqueness within each form.
- * Only qualifies where necessary, using minimal distinguishing paths.
- */
-function qualifyFormInputs(forms: FormInfo[]): void {
-  forms.forEach((form) => {
-    const inputs = form.inputs;
-
-    // Group inputs by base prop name
-    const propNameGroups = new Map<
-      string,
-      Array<FormInfo["inputs"][0] & { _parentPath: string[] }>
-    >();
-
-    inputs.forEach((input) => {
-      const inputWithPath = input as FormInfo["inputs"][0] & {
-        _parentPath: string[];
-      };
-      const baseName = input.propName;
-      if (!propNameGroups.has(baseName)) {
-        propNameGroups.set(baseName, []);
-      }
-      propNameGroups.get(baseName)!.push(inputWithPath);
-    });
-
-    // For each group with duplicates, find minimal distinguishing paths
-    propNameGroups.forEach((group, _baseName) => {
-      if (group.length === 1) {
-        // No duplicates, keep the simple name
-        // Remove the temporary _parentPath property
-        delete (group[0] as any)._parentPath;
-        return;
-      }
-
-      // Find minimal distinguishing paths for all inputs
-      group.forEach((input) => {
-        const otherPaths = group
-          .filter((i) => i.id !== input.id)
-          .map((i) => i._parentPath || []);
-
-        const minimalPath = findMinimalDistinguishingPath(
-          input._parentPath || [],
-          otherPaths
-        );
-
-        // Use the minimal distinguishing path to qualify the name
-        input.propName = generateQualifiedPropName(
-          input.name || "input",
-          minimalPath
-        );
-      });
-
-      // Check if qualified names are still duplicates and expand paths if needed
-      let hasDuplicates = true;
-      let iteration = 0;
-      const maxIterations = 10; // Safety limit
-
-      while (hasDuplicates && iteration < maxIterations) {
-        iteration++;
-        const qualifiedNameGroups = new Map<
-          string,
-          Array<FormInfo["inputs"][0] & { _parentPath: string[] }>
-        >();
-        group.forEach((input) => {
-          if (!qualifiedNameGroups.has(input.propName)) {
-            qualifiedNameGroups.set(input.propName, []);
-          }
-          qualifiedNameGroups.get(input.propName)!.push(input);
-        });
-
-        hasDuplicates = false;
-        // For each group of still-duplicated qualified names, expand their paths
-        qualifiedNameGroups.forEach((dupGroup, _qualifiedName) => {
-          if (dupGroup.length > 1) {
-            hasDuplicates = true;
-            // Expand the distinguishing path for each duplicate
-            dupGroup.forEach((input) => {
-              const fullPath = input._parentPath || [];
-              const otherFullPaths = dupGroup
-                .filter((i) => i.id !== input.id)
-                .map((i) => i._parentPath || []);
-
-              // Find where this path diverges from others in the duplicate group
-              let commonPrefixLength = 0;
-              const maxCommonLength = Math.min(
-                fullPath.length,
-                ...otherFullPaths.map((p) => p.length)
-              );
-
-              for (let i = 0; i < maxCommonLength; i++) {
-                const thisPart = fullPath[i];
-                const allMatch = otherFullPaths.every((otherPath) => {
-                  return otherPath[i] === thisPart;
-                });
-                if (allMatch) {
-                  commonPrefixLength++;
-                } else {
-                  break;
-                }
-              }
-
-              // Use progressively more of the distinguishing suffix until unique
-              const distinguishingSuffix = fullPath.slice(commonPrefixLength);
-
-              // Try expanding the distinguishing suffix until we find a unique name
-              let foundUnique = false;
-              for (
-                let suffixLength = 1;
-                suffixLength <= distinguishingSuffix.length;
-                suffixLength++
-              ) {
-                const expandedPath = distinguishingSuffix.slice(
-                  0,
-                  suffixLength
-                );
-                const testQualifiedName = generateQualifiedPropName(
-                  input.name || "input",
-                  expandedPath
-                );
-
-                // Check if this qualified name is unique among ALL inputs in this form
-                const isUnique = inputs.every((otherInput) => {
-                  if (otherInput.id === input.id) return true;
-                  // If other input is in the same duplicate group, compare expanded paths
-                  if (dupGroup.some((i) => i.id === otherInput.id)) {
-                    const otherFullPath =
-                      (
-                        otherInput as FormInfo["inputs"][0] & {
-                          _parentPath: string[];
-                        }
-                      )._parentPath || [];
-                    const otherCommonPrefixLength = Math.min(
-                      commonPrefixLength,
-                      otherFullPath.length
-                    );
-                    const otherDistinguishingSuffix = otherFullPath.slice(
-                      otherCommonPrefixLength
-                    );
-                    const otherExpandedPath = otherDistinguishingSuffix.slice(
-                      0,
-                      suffixLength
-                    );
-                    const otherQualifiedName = generateQualifiedPropName(
-                      otherInput.name || "input",
-                      otherExpandedPath
-                    );
-                    return testQualifiedName !== otherQualifiedName;
-                  }
-                  // For inputs outside the duplicate group, just check the final prop name
-                  return testQualifiedName !== otherInput.propName;
-                });
-
-                if (isUnique) {
-                  input.propName = testQualifiedName;
-                  foundUnique = true;
-                  break;
-                }
-              }
-
-              // If we couldn't find a unique name with the distinguishing suffix,
-              // use the distinguishing suffix we found (it's the minimal we can do)
-              if (!foundUnique) {
-                input.propName = generateQualifiedPropName(
-                  input.name || "input",
-                  distinguishingSuffix.length > 0 ? distinguishingSuffix : []
-                );
-              }
-            });
-          }
-        });
-      }
-
-      // Final check: if there are still duplicates after using full paths,
-      // and they have identical paths, use numeric suffixes as last resort
-      const finalQualifiedNameGroups = new Map<
-        string,
-        Array<FormInfo["inputs"][0] & { _parentPath: string[] }>
-      >();
-      group.forEach((input) => {
-        if (!finalQualifiedNameGroups.has(input.propName)) {
-          finalQualifiedNameGroups.set(input.propName, []);
-        }
-        finalQualifiedNameGroups.get(input.propName)!.push(input);
-      });
-
-      finalQualifiedNameGroups.forEach((finalDupGroup, finalQualifiedName) => {
-        if (finalDupGroup.length > 1) {
-          // Check if all duplicates have identical paths
-          const allPathsIdentical = finalDupGroup.every((input) => {
-            const thisPath = input._parentPath || [];
-            return finalDupGroup.every((otherInput) => {
-              if (otherInput.id === input.id) return true;
-              const otherPath = otherInput._parentPath || [];
-              return arraysEqual(thisPath, otherPath);
-            });
-          });
-
-          // Only use numeric suffixes if paths are truly identical
-          if (allPathsIdentical) {
-            let index = 0;
-            finalDupGroup.forEach((input) => {
-              if (index > 0) {
-                input.propName = `${finalQualifiedName}${index + 1}`;
-              }
-              index++;
-            });
-          }
-        }
-      });
-
-      // Remove the temporary _parentPath property
-      group.forEach((input) => {
-        delete (input as any)._parentPath;
-      });
-    });
-  });
-}
-
-function generateComponentCode(
-  appId: string,
-  pageId: string,
-  componentName: string,
-  sliders: SliderInfo[],
-  standaloneComponents: ComponentInfo[],
-  inputGroups: InputGroupInfo[],
-  forms: FormInfo[],
-  selectInputs: SelectInputInfo[],
-  actionButtons: ActionButtonInfo[],
-  isProduction: boolean = false
-): string {
-  // Generate prop types
-  const propTypes: string[] = [];
-  const controlPropTypes: string[] = [];
-  const inputGroupPropTypes: string[] = [];
-  const formPropTypes: string[] = [];
-  const selectInputPropTypes: string[] = [];
-  const actionButtonPropTypes: string[] = [];
-
-  // Add standalone component props
-  standaloneComponents.forEach((comp) => {
-    propTypes.push(`  ${comp.propName}?: ${comp.propType};`);
-  });
-
-  // Add input group props
-  inputGroups.forEach((group) => {
-    const propName = sanitizePropName(group.groupName);
-    inputGroupPropTypes.push(`  ${propName}?: string;`);
-    inputGroupPropTypes.push(
-      `  on${propName[0].toUpperCase()}${propName.slice(
-        1
-      )}Change?: (value: string) => void;`
-    );
-  });
-
-  // Generate form data interfaces and props
-  const formDataInterfaces: string[] = [];
-  forms.forEach((form) => {
-    const formPropName = sanitizePropName(form.formName);
-    const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
-      1
-    )}FormData`;
-
-    // Generate interface for form data with human-readable property names
-    const formDataProps: string[] = [];
-    form.inputs.forEach((input) => {
-      const inputPropName = input.propName; // Use qualified prop name
-      const inputType = getComponentPropType(input.type, input.name);
-      formDataProps.push(`  ${inputPropName}: ${inputType};`);
-    });
-
-    formDataInterfaces.push(`export interface ${formDataTypeName} {
-${formDataProps.join("\n")}
-}`);
-
-    // Add the callback prop with proper typing
-    formPropTypes.push(
-      `  on${formPropName[0].toUpperCase()}${formPropName.slice(
-        1
-      )}Submit?: (formData: ${formDataTypeName}) => void;`
-    );
-  });
-
-  // Add standalone select input props (controlled value + onChange + options)
-  selectInputs.forEach((input) => {
-    const propName = input.propName;
-    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
-    selectInputPropTypes.push(`  ${propName}?: string;`);
-    selectInputPropTypes.push(
-      `  ${propName}Options?: Array<string | { value: string; label: string }>;`
-    );
-    selectInputPropTypes.push(
-      `  on${capitalizedPropName}Change?: (value: string) => void;`
-    );
-  });
-
-  // Add action button props (onClick)
-  actionButtons.forEach((button) => {
-    const propName = button.propName;
-    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
-    actionButtonPropTypes.push(`  on${capitalizedPropName}Click?: () => void;`);
-  });
-
-  sliders.forEach((slider) => {
-    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
-      const container = slider.arrayContainer;
-      const itemTypeName = `${container.propName[0].toUpperCase()}${container.propName.slice(
-        1
-      )}Item`;
-      propTypes.push(`  ${container.propName}: ${itemTypeName}[];`);
-    }
-
-    // Add control props for each slider/repeating container
-    const sliderPropName = sanitizePropName(slider.name || "container");
-    controlPropTypes.push(`  ${sliderPropName}CurrentIndex?: number;`);
-    controlPropTypes.push(
-      `  on${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
-        1
-      )}IndexChange?: (index: number) => void;`
-    );
-  });
-
-  const allPropTypes = [
-    ...propTypes,
-    ...controlPropTypes,
-    ...inputGroupPropTypes,
-    ...formPropTypes,
-    ...selectInputPropTypes,
-    ...actionButtonPropTypes,
-  ];
-  const hasProps = allPropTypes.length > 0;
-  const propsInterface = hasProps
-    ? `export interface ${componentName}Props {
-${allPropTypes.join("\n")}
-}`
-    : "";
-
-  const itemTypes = sliders
-    .filter((s) => s.arrayContainer && s.arrayContainer.components.length > 0)
-    .map((slider) => {
-      const container = slider.arrayContainer!;
-      const itemTypeName = `${container.propName[0].toUpperCase()}${container.propName.slice(
-        1
-      )}Item`;
-      const itemProps = container.components
-        .map((comp) => {
-          return `  ${comp.propName}: ${comp.propType};`;
-        })
-        .join("\n");
-      return `export interface ${itemTypeName} {
-${itemProps}
-}`;
-    })
-    .join("\n\n");
-
-  const formDataTypes = formDataInterfaces.join("\n\n");
-
-  // Generate data mapping
-  const dataMapping: string[] = [];
-  const controlMapping: string[] = [];
-
-  // Add standalone component mappings
-  standaloneComponents.forEach((comp) => {
-    const propKey = getComponentPropName(comp.type);
-    dataMapping.push(`    // ${comp.name}
-    ...(props.${comp.propName} !== undefined && { "${comp.id}": { ${propKey}: props.${comp.propName} } as any }),`);
-  });
-
-  // Add select input mappings (for controlled values and options)
-  selectInputs.forEach((input) => {
-    dataMapping.push(`    // ${input.name}
-    ...((props.${input.propName} !== undefined || props.${input.propName}Options !== undefined) && { 
-      "${input.id}": { 
-        ...(props.${input.propName} !== undefined && { value: props.${input.propName} }),
-        ...(props.${input.propName}Options !== undefined && { options: props.${input.propName}Options }),
-      } as any 
-    }),`);
-  });
-
-  sliders.forEach((slider) => {
-    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
-      const container = slider.arrayContainer;
-      const itemMapping = container.components
-        .map((comp) => {
-          const propKey = getComponentPropName(comp.type);
-          return `        // ${comp.name}
-        "${comp.id}": {
-          ${propKey}: item.${comp.propName},
-        }`;
-        })
-        .join(",\n");
-
-      dataMapping.push(`    // ${container.name}
-    "${container.id}": props.${container.propName}.map((item) => ({
-${itemMapping}
-      })),`);
-    }
+// Default apps service URL (can be overridden with APPS_SERVICE_URL env var)
+const APPS_SERVICE_URL =
+  process.env.APPS_SERVICE_URL ||
+  process.env.VITE_APPS_SERVICE_URL ||
+  CONST_APPS_SERVICE_URL ||
+  "https://apps-service-dev.bravostudio.app";
+console.log(`Using APPS_SERVICE_URL: ${APPS_SERVICE_URL}`);
+const COMPONENTS_CDN_URL =
+  CONST_COMPONENTS_CDN_URL || "https://apps-public-dev.bravostudio.app";
 
-    // Generate control mapping for each slider
-    const sliderPropName = sanitizePropName(slider.name || "container");
-    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
-      1
-    )}IndexChange`;
-    const controlEntry: string[] = [];
-    if (slider.id) {
-      controlEntry.push(`      // ${slider.name}`);
-      controlEntry.push(`      "${slider.id}": {`);
-      controlEntry.push(
-        `        currentIndex: props.${sliderPropName}CurrentIndex,`
-      );
-      controlEntry.push(`        onIndexChange: props.on${controlPropName},`);
-      controlEntry.push(`      }`);
-    }
-    if (controlEntry.length > 0) {
-      controlMapping.push(controlEntry.join("\n"));
-    }
+async function downloadFile(
+  url: string,
+  headers?: Record<string, string>
+): Promise<string> {
+  const response = await fetch(url, {
+    headers: headers || {},
   });
 
-  const repeatingContainerControlsCode =
-    controlMapping.length > 0
-      ? `\n      repeatingContainerControls={{
-${controlMapping.join(",\n")}
-      }}`
-      : "";
-
-  // Generate input group mappings
-  const inputGroupMapping: string[] = [];
-  const inputGroupHandlers: string[] = [];
-
-  // Generate form submission handlers
-  // const formHandlers: string[] = [];
-
-  // Start action handler if we have input groups, forms, select inputs, or action buttons
-  if (
-    inputGroups.length > 0 ||
-    forms.length > 0 ||
-    selectInputs.length > 0 ||
-    actionButtons.length > 0
-  ) {
-    inputGroupHandlers.push(`  const handleAction = (payload: any) => {`);
-    inputGroupHandlers.push(`    const { action } = payload?.bravo || {};`);
-    inputGroupHandlers.push(``);
-
-    // Add select input handling
-    if (selectInputs.length > 0) {
-      inputGroupHandlers.push(`    // Handle select input changes`);
-      inputGroupHandlers.push(
-        `    if (action?.action === "input-change" || action?.action === "select-change") {`
-      );
-      inputGroupHandlers.push(`      const nodeId = action?.nodeId;`);
-      inputGroupHandlers.push(`      const value = action?.params?.value;`);
-      inputGroupHandlers.push(``);
-
-      selectInputs.forEach((input) => {
-        const propName = input.propName;
-        const capitalizedPropName =
-          propName[0].toUpperCase() + propName.slice(1);
-        const handlerPropName = `on${capitalizedPropName}Change`;
-        inputGroupHandlers.push(`      // ${input.name}`);
-        inputGroupHandlers.push(
-          `      if (nodeId === "${input.id}" && props.${handlerPropName}) {`
-        );
-        inputGroupHandlers.push(`        props.${handlerPropName}(value);`);
-        inputGroupHandlers.push(`        return;`);
-        inputGroupHandlers.push(`      }`);
-      });
-
-      inputGroupHandlers.push(`    }`);
-      inputGroupHandlers.push(``);
-    }
-
-    // Add action button handling
-    if (actionButtons.length > 0) {
-      inputGroupHandlers.push(`    // Handle button clicks`);
-      inputGroupHandlers.push(
-        `    if (action?.action === "remote" || action?.action === "tap" || action?.action === "link") {`
-      );
-      inputGroupHandlers.push(`      const nodeId = action?.nodeId;`);
-      inputGroupHandlers.push(``);
-
-      actionButtons.forEach((button) => {
-        const propName = button.propName;
-        const capitalizedPropName =
-          propName[0].toUpperCase() + propName.slice(1);
-        const handlerPropName = `on${capitalizedPropName}Click`;
-        inputGroupHandlers.push(`      // ${button.name}`);
-        inputGroupHandlers.push(
-          `      if (nodeId === "${button.id}" && props.${handlerPropName}) {`
-        );
-        inputGroupHandlers.push(`        props.${handlerPropName}();`);
-        inputGroupHandlers.push(`        return;`);
-        inputGroupHandlers.push(`      }`);
-      });
-
-      inputGroupHandlers.push(`    }`);
-      inputGroupHandlers.push(``);
-    }
-
-    // Add input group handling
-    if (inputGroups.length > 0) {
-      inputGroupHandlers.push(
-        `    if (action?.action === "input-group-change") {`
-      );
-      inputGroupHandlers.push(
-        `      const { groupName, value } = action.params;`
-      );
-
-      inputGroups.forEach((group) => {
-        const propName = sanitizePropName(group.groupName);
-        const handlerPropName = `on${propName[0].toUpperCase()}${propName.slice(
-          1
-        )}Change`;
-        inputGroupHandlers.push(
-          `      if (groupName === "${group.groupName}" && props.${handlerPropName}) {`
-        );
-        inputGroupHandlers.push(`        props.${handlerPropName}(value);`);
-        inputGroupHandlers.push(`        return;`);
-        inputGroupHandlers.push(`      }`);
-      });
-
-      inputGroupHandlers.push(`    }`);
-      inputGroupHandlers.push(``);
-    }
-
-    // Add form submission handling
-    if (forms.length > 0) {
-      inputGroupHandlers.push(`    if (action?.action === "submit") {`);
-      inputGroupHandlers.push(`      // Get form inputs from Encore state`);
-      inputGroupHandlers.push(
-        `      const formInputs = useEncoreState.getState().formInputs["${pageId}"] || {};`
-      );
-      inputGroupHandlers.push(`      const submitNodeId = action?.nodeId;`);
-      inputGroupHandlers.push(``);
-
-      forms.forEach((form, index) => {
-        const formPropName = sanitizePropName(form.formName);
-        const handlerPropName = `on${formPropName[0].toUpperCase()}${formPropName.slice(
-          1
-        )}Submit`;
-
-        if (index > 0) {
-          inputGroupHandlers.push(``);
-        }
-        inputGroupHandlers.push(
-          `      // Form: ${form.formName} (${form.formId})`
-        );
-        // Check if this form's submit button was clicked (if submitButtonId is available)
-        if (form.submitButtonId) {
-          inputGroupHandlers.push(
-            `      if (submitNodeId === "${form.submitButtonId}" && props.${handlerPropName}) {`
-          );
-        } else if (forms.length === 1) {
-          // If only one form, don't check submit button ID
-          inputGroupHandlers.push(`      if (props.${handlerPropName}) {`);
-        } else {
-          // Multiple forms but no submit button ID - check all
-          inputGroupHandlers.push(`      if (props.${handlerPropName}) {`);
-        }
-        inputGroupHandlers.push(`        // Extract form inputs for this form`);
-        const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
-          1
-        )}FormData`;
-        inputGroupHandlers.push(
-          `        const formData: ${formDataTypeName} = {`
-        );
-        const formDataEntries: string[] = [];
-        form.inputs.forEach((input) => {
-          const inputPropName = input.propName; // Use qualified prop name
-          formDataEntries.push(
-            `          ${inputPropName}: formInputs["${input.id}"]`
-          );
-        });
-        inputGroupHandlers.push(formDataEntries.join(",\n"));
-        inputGroupHandlers.push(`        };`);
-        inputGroupHandlers.push(`        props.${handlerPropName}(formData);`);
-        inputGroupHandlers.push(
-          `        // Note: Default form submission will still proceed after callback`
-        );
-        inputGroupHandlers.push(`      }`);
-      });
-
-      inputGroupHandlers.push(`    }`);
-    }
-
-    inputGroupHandlers.push(`  };`);
-  }
-
-  // Generate input groups code
-  inputGroups.forEach((group) => {
-    const propName = sanitizePropName(group.groupName);
-    inputGroupMapping.push(
-      `    ...(props.${propName} !== undefined && { ${propName}: props.${propName} }),`
+  if (!response.ok) {
+    throw new Error(
+      `Failed to download ${url}: ${response.status} ${response.statusText}`
     );
-  });
-
-  const inputGroupsCode =
-    inputGroupMapping.length > 0
-      ? `\n      inputGroups={{
-${inputGroupMapping.join("\n")}
-      }}`
-      : "";
-
-  const onActionCode =
-    inputGroupHandlers.length > 0 ? `\n      onAction={handleAction}` : "";
-
-  const propsParameter = hasProps ? `props: ${componentName}Props` : "";
-  const propsInterfaceSection = propsInterface ? `${propsInterface}\n\n` : "";
-
-  return `/**
- * ${componentName}
- * 
- * Wrapper component for Encore Studio app.
- * See README.md for detailed documentation.
- */
-
-import { EncoreApp${
-    forms.length > 0 ? ", useEncoreState" : ""
-  } } from "@bravostudioai/react";
-${isProduction ? `import productionData from "./data.json";` : ""}
-
-${itemTypes ? `${itemTypes}\n\n` : ""}${
-    formDataTypes ? `${formDataTypes}\n\n` : ""
-  }${propsInterfaceSection}export function ${componentName}(${propsParameter}) {
-${inputGroupHandlers.length > 0 ? inputGroupHandlers.join("\n") : ""}
-  return (
-    <EncoreApp
-      appId="${appId}"
-      pageId="${pageId}"
-      ${isProduction ? `appDefinition={productionData.app}
-      pageDefinition={productionData.page}
-      componentCode={productionData.componentCode}` : ""}
-      data={{
-${dataMapping.join("\n")}
-      }}${repeatingContainerControlsCode}${inputGroupsCode}${onActionCode}
-    />
-  );
-}
-
-export default ${componentName};
-`;
-}
-
-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 {
-  const componentDocs: string[] = [];
-  const controlDocs: string[] = [];
-  const selectInputDocs: string[] = [];
-  const actionButtonDocs: string[] = [];
-
-  // Add standalone component documentation
-  standaloneComponents.forEach((comp) => {
-    componentDocs.push(`### \`${comp.propName}\` (${comp.propType}, optional)
-
-${comp.name} (${comp.type}) - Component ID: ${comp.id}`);
-  });
-
-  sliders.forEach((slider) => {
-    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
-      const container = slider.arrayContainer;
-
-      // Generate component documentation
-      const compDocs = container.components
-        .map((comp) => {
-          return `- \`${comp.propName}\` (${comp.propType}): ${comp.name} (${comp.type}) - Component ID: ${comp.id}`;
-        })
-        .join("\n");
-
-      componentDocs.push(`### \`${
-        container.propName
-      }\` (${container.propName[0].toUpperCase()}${container.propName.slice(
-        1
-      )}Item[])
-
-Array of items for "${container.name}" container (ID: ${container.id})
-
-**Properties:**
-
-${compDocs}`);
-    }
-
-    // Generate control documentation for each slider/repeating container
-    const sliderPropName = sanitizePropName(slider.name || "container");
-    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
-      1
-    )}IndexChange`;
-    controlDocs.push(`### \`${sliderPropName}CurrentIndex\` (number, optional)
-
-Controls the currently visible slide/index for the "${slider.name}" container (ID: ${slider.id}).
-
-When provided, the slider operates in controlled mode - the parent component controls which slide is displayed. When not provided, the slider manages its own state.
-
-### \`on${controlPropName}\` ((index: number) => void, optional)
-
-Callback fired when the user navigates to a different slide. Called with the new slide index (0-based).
-
-This event fires whenever the slide changes, whether by user interaction, automatic advancement, or programmatic control.`);
-  });
-
-  const dataPropsSection =
-    componentDocs.length > 0
-      ? componentDocs.join("\n\n")
-      : "This component currently has no data-bound props.";
-
-  const controlPropsSection =
-    controlDocs.length > 0
-      ? `## Control Props
-
-These props allow you to imperatively control repeating containers (sliders, lists, etc.) and receive notifications when the current index changes.
-
-${controlDocs.join("\n\n")}`
-      : "";
-
-  // Generate input group documentation
-  const inputGroupDocs: string[] = [];
-  inputGroups.forEach((group) => {
-    const propName = sanitizePropName(group.groupName);
-    const handlerPropName = `on${propName[0].toUpperCase()}${propName.slice(
-      1
-    )}Change`;
-    const elementsList = group.elements
-      .map((el) => `- "${el.name}"`)
-      .join("\n");
-
-    inputGroupDocs.push(`### \`${propName}\` (string, optional)
-
-Sets which element is active in the "${group.groupName}" input group (type: ${group.groupType}).
-
-**Available elements:**
-${elementsList}
-
-### \`${handlerPropName}\` ((value: string) => void, optional)
-
-Callback fired when the user selects a different element in the "${group.groupName}" input group. Called with the name of the selected element.`);
-  });
-
-  const inputGroupPropsSection =
-    inputGroupDocs.length > 0
-      ? `## Input Group Props
-
-These props allow you to control input groups (radio button-like behavior) and receive notifications when the selection changes.
-
-${inputGroupDocs.join("\n\n")}`
-      : "";
-
-  // Generate form documentation
-  const formDocs: string[] = [];
-  forms.forEach((form) => {
-    const formPropName = sanitizePropName(form.formName);
-    const handlerPropName = `on${formPropName[0].toUpperCase()}${formPropName.slice(
-      1
-    )}Submit`;
-    const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
-      1
-    )}FormData`;
-    const inputsList = form.inputs
-      .map((input) => {
-        const inputPropName = input.propName; // Use qualified prop name
-        const inputType = getComponentPropType(input.type, input.name);
-        return `- \`${inputPropName}\` (${inputType}) - ${input.name}`;
-      })
-      .join("\n");
-
-    formDocs.push(`### \`${handlerPropName}\` ((formData: ${formDataTypeName}) => void, optional)
-
-Callback fired when the "${
-      form.formName
-    }" form is submitted. Called with a typed object containing all form input values with human-readable property names.
-
-**Form data shape:**
-\`\`\`typescript
-interface ${formDataTypeName} {
-${form.inputs
-  .map((input) => {
-    const inputPropName = input.propName; // Use qualified prop name
-    const inputType = getComponentPropType(input.type, input.name);
-    return `  ${inputPropName}: ${inputType};`;
-  })
-  .join("\n")}
-}
-\`\`\`
-
-**Form inputs:**
-${inputsList}`);
-  });
-
-  const formPropsSection =
-    formDocs.length > 0
-      ? `## Form Submission Props
-
-These props allow you to handle form submissions and access form input values.
-
-${formDocs.join("\n\n")}`
-      : "";
-
-  // Generate select input documentation
-  selectInputs.forEach((input) => {
-    const propName = input.propName;
-    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
-    const handlerPropName = `on${capitalizedPropName}Change`;
-    const optionsPropName = `${propName}Options`;
-
-    selectInputDocs.push(`### \`${propName}\` (string, optional)
-
-Controls the selected value of the "${input.name}" dropdown (Component ID: ${input.id}).
-
-When provided, the select input operates in controlled mode - the parent component controls the current value.
-
-### \`${optionsPropName}\` (Array<string | { value: string; label: string }>, optional)
-
-Sets the available options for the "${input.name}" dropdown. Can be an array of strings (used as both value and label) or an array of objects with \`value\` and \`label\` properties.
-
-**Example:**
-\`\`\`tsx
-// Simple string array
-${optionsPropName}={["Option 1", "Option 2", "Option 3"]}
-
-// Object array with separate values and labels
-${optionsPropName}={[
-  { value: "opt1", label: "Option 1" },
-  { value: "opt2", label: "Option 2" },
-]}
-\`\`\`
-
-### \`${handlerPropName}\` ((value: string) => void, optional)
-
-Callback fired when the user selects a different option in the "${input.name}" dropdown. Called with the selected value.`);
-  });
-
-  const selectInputPropsSection =
-    selectInputDocs.length > 0
-      ? `## Select Input Props
-
-These props allow you to control select/dropdown inputs and respond to value changes.
-
-${selectInputDocs.join("\n\n")}`
-      : "";
-
-  // Generate action button documentation
-  actionButtons.forEach((button) => {
-    const propName = button.propName;
-    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
-    const handlerPropName = `on${capitalizedPropName}Click`;
-
-    actionButtonDocs.push(`### \`${handlerPropName}\` (() => void, optional)
-
-Callback fired when the "${button.name}" button is clicked (Component ID: ${button.id}).
-
-Action type: \`${button.actionType}\``);
-  });
-
-  const actionButtonPropsSection =
-    actionButtonDocs.length > 0
-      ? `## Action Button Props
-
-These props allow you to respond to button clicks and other user interactions.
-
-${actionButtonDocs.join("\n\n")}`
-      : "";
-
-  const propsSection = `## Props
-
-### Data Props
-
-${dataPropsSection}
-
-${controlPropsSection}
-
-${inputGroupPropsSection}
-
-${formPropsSection}
-
-${selectInputPropsSection}
-
-${actionButtonPropsSection}`;
-
-  const usageExample =
-    sliders.length > 0 && sliders[0].arrayContainer
-      ? `<${componentName}
-  ${sliders
-    .map((s) =>
-      s.arrayContainer
-        ? `${s.arrayContainer.propName}={[
-    {
-      ${s.arrayContainer?.components
-        .map(
-          (c) =>
-            `${c.propName}: "${
-              c.type === "component:image"
-                ? "https://example.com/image.jpg"
-                : "Example value"
-            }"`
-        )
-        .join(",\n      ")}
-    }
-  ]}`
-        : ""
-    )
-    .filter(Boolean)
-    .join("\n  ")}
-/>`
-      : `<${componentName} />`;
-
-  // Generate control example
-  let controlExample = "";
-  if (sliders.length > 0 && sliders[0]) {
-    const firstSlider = sliders[0];
-    const sliderPropName = sanitizePropName(firstSlider.name || "container");
-    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
-      1
-    )}IndexChange`;
-
-    controlExample = `## Controlling Slides
-
-You can imperatively control which slide is displayed and listen for slide changes:
-
-\`\`\`tsx
-import { useState } from "react";
-import { ${componentName} } from "./${componentName}";
-
-function MyComponent() {
-  const [currentSlide, setCurrentSlide] = useState(0);
-
-  return (
-    <>
-      <button onClick={() => setCurrentSlide((prev) => Math.max(0, prev - 1))}>
-        Previous
-      </button>
-      <button onClick={() => setCurrentSlide((prev) => prev + 1)}>
-        Next
-      </button>
-      <${componentName}
-        ${sliders
-          .map((s) =>
-            s.arrayContainer
-              ? `${s.arrayContainer.propName}={[/* array of items */]}`
-              : ""
-          )
-          .filter(Boolean)
-          .join("\n        ")}
-        ${sliderPropName}CurrentIndex={currentSlide}
-        on${controlPropName}={(index) => setCurrentSlide(index)}
-      />
-    </>
-  );
-}
-\`\`\``;
   }
 
-  return `# ${componentName}
-
-Encore App Wrapper Component
-
-This component wraps the Encore Studio app **"${appName}"** (App ID: \`${appId}\`) for the page **"${pageName}"** (Page ID: \`${pageId}\`).
-
-The component automatically maps props to data-bound components within the app. Components marked with \`encore:data\` tags are exposed as props, allowing you to dynamically populate content.
-
-${propsSection}
-
-## Usage
-
-\`\`\`tsx
-import { ${componentName} } from "./${componentName}";
-
-function MyComponent() {
-  return (
-    <${componentName}
-      ${sliders
-        .map((s) =>
-          s.arrayContainer
-            ? `${s.arrayContainer.propName}={[/* array of items */]}`
-            : ""
-        )
-        .filter(Boolean)
-        .join("\n      ")}
-    />
-  );
-}
-\`\`\`
-
-## Example
-
-\`\`\`tsx
-${usageExample}
-\`\`\`
-
-${controlExample}
-`;
+  return await response.text();
 }
 
 function generateNames(
@@ -2626,14 +191,6 @@ async function generateWrapper({
   // Extract page data - API response has it under 'data' field
   let pageData = pageResponse.data || pageResponse;
 
-  // Debug: log structure
-  console.log("Page response keys:", Object.keys(pageResponse));
-  if (pageResponse.data) {
-    console.log("Page data keys:", Object.keys(pageResponse.data));
-  }
-  console.log("Has body?", !!pageData.body);
-  console.log("Has data.body?", !!(pageData as any).data?.body);
-
   // If pageData doesn't have body, try using cached app.json or downloading as fallback
   if (!pageData.body && !(pageData as any).data?.body) {
     console.log("Page data doesn't have body, trying app.json...");
@@ -2645,111 +202,36 @@ async function generateWrapper({
         const appUrl = `${APPS_SERVICE_URL}/devices/apps/${appId}`;
         const appContent = await downloadFile(appUrl);
         appData = JSON.parse(appContent);
-      } else {
-        console.log("Using cached app.json data");
       }
 
-      console.log("App data keys:", Object.keys(appData));
-      console.log(
-        "App.app keys:",
-        appData?.app ? Object.keys(appData.app) : "N/A"
-      );
-      console.log(
-        "App.app.data keys:",
-        appData?.app?.data ? Object.keys(appData.app.data) : "N/A"
-      );
-
       // Find the page in app.data.pages
       const pages = appData?.app?.data?.pages || [];
-      console.log(`Found ${pages.length} pages in app.json`);
-      if (pages.length > 0) {
-        console.log("First page ID:", pages[0]?.id);
-      }
-
       const page = pages.find((p: any) => p.id === pageId);
       if (page) {
         pageData = page;
         console.log("✓ Found page data in app.json");
-        console.log("Page from app.json has body?", !!pageData.body);
-        console.log(
-          "Page body length:",
-          Array.isArray(pageData.body) ? pageData.body.length : "N/A"
-        );
-      } else {
-        console.warn(`Page ${pageId} not found in app.json`);
-        console.warn(
-          "Available page IDs:",
-          pages.map((p: any) => p.id)
-        );
-
-        // Try using saved-apps as fallback
-        const savedPagePath = join(
-          process.cwd(),
-          "saved-apps",
-          appId,
-          `page-${pageId}.json`
-        );
-        if (existsSync(savedPagePath)) {
-          console.log("Trying saved-apps page file...");
-          try {
-            const savedPageContent = await readFile(savedPagePath, "utf-8");
-            const savedPageResponse = JSON.parse(savedPageContent);
-            const savedPageData = savedPageResponse.data || savedPageResponse;
-            if (savedPageData.body) {
-              pageData = savedPageData;
-              console.log("✓ Found page data in saved-apps");
-              console.log(
-                "Page body length:",
-                Array.isArray(pageData.body) ? pageData.body.length : "N/A"
-              );
-            }
-          } catch (error) {
-            console.warn("Could not load saved-apps page:", error);
-          }
-        }
       }
     } catch (error) {
       console.warn("Could not load app.json:", error);
-
-      // Try using saved-apps as fallback
-      const savedPagePath = join(
-        process.cwd(),
-        "saved-apps",
-        appId,
-        `page-${pageId}.json`
-      );
-      if (existsSync(savedPagePath)) {
-        console.log("Trying saved-apps page file...");
-        try {
-          const savedPageContent = await readFile(savedPagePath, "utf-8");
-          const savedPageResponse = JSON.parse(savedPageContent);
-          const savedPageData = savedPageResponse.data || savedPageResponse;
-          if (savedPageData.body) {
-            pageData = savedPageData;
-            console.log("✓ Found page data in saved-apps");
-            console.log(
-              "Page body length:",
-              Array.isArray(pageData.body) ? pageData.body.length : "N/A"
-            );
-          }
-        } catch (error) {
-          console.warn("Could not load saved-apps page:", error);
-        }
-      }
     }
   }
 
-  // Find sliders and data bindings
+  // Find components using extracted logic
   const sliders = findSlidersAndDataBindings(pageData);
-
-  // Find standalone components with bravo:data tags
   const standaloneComponents = findStandaloneComponents(pageData);
+  const inputGroups = findInputGroups(pageData);
+  const forms = findForms(pageData);
+
+  // Qualify form input prop names
+  qualifyFormInputs(forms);
+
+  const selectInputs = findStandaloneSelectInputs(pageData, forms);
+  const actionButtons = findActionButtons(pageData);
 
   // Extract app name and page name
   let appName = "Encore App";
   let pageName = "Page";
 
-  // Try to get app name from app.json (use cached data if available)
   try {
     let appDataForName = cachedAppData;
     if (!appDataForName) {
@@ -2761,132 +243,25 @@ async function generateWrapper({
     }
     if (appDataForName) {
       appName = appDataForName?.app?.store?.name || appName;
-      console.log(`App name: ${appName}`);
     }
   } catch (error) {
     // Ignore errors, use defaults
   }
 
-  // Get page name from page data
   pageName = pageData.name || pageData.id || pageName;
-  console.log(`Page name: ${pageName}`);
-
-  console.log(`\nFound ${sliders.length} slider(s):`);
-  sliders.forEach((slider, index) => {
-    console.log(`\n  Slider ${index + 1}:`);
-    console.log(`    ID: ${slider.id}`);
-    console.log(`    Name: ${slider.name}`);
-    if (slider.arrayContainer) {
-      console.log(
-        `    Array Container: ${slider.arrayContainer.name} (${slider.arrayContainer.id})`
-      );
-      console.log(`    Components:`);
-      slider.arrayContainer.components.forEach((comp) => {
-        console.log(
-          `      - ${comp.name} (${comp.id}): ${comp.type} -> prop: ${comp.propName}: ${comp.propType}`
-        );
-      });
-    } else {
-      console.log(`    No array container found`);
-    }
-  });
-
-  console.log(
-    `\nFound ${standaloneComponents.length} standalone component(s):`
-  );
-  standaloneComponents.forEach((comp) => {
-    console.log(
-      `  - ${comp.name} (${comp.id}): ${comp.type} -> prop: ${comp.propName}: ${comp.propType}`
-    );
-  });
-
-  // Find input groups
-  const inputGroups = findInputGroups(pageData);
-  console.log(`\nFound ${inputGroups.length} input group(s):`);
-  inputGroups.forEach((group, index) => {
-    console.log(`\n  Input Group ${index + 1}:`);
-    console.log(`    Name: ${group.groupName}`);
-    console.log(`    Type: ${group.groupType}`);
-    console.log(`    Elements:`);
-    group.elements.forEach((el) => {
-      console.log(`      - ${el.name} (${el.id})`);
-    });
-  });
-
-  // Find forms
-  const forms = findForms(pageData);
-
-  // Qualify form input prop names to ensure uniqueness
-  qualifyFormInputs(forms);
-
-  console.log(`\nFound ${forms.length} form(s):`);
-  forms.forEach((form, index) => {
-    console.log(`\n  Form ${index + 1}:`);
-    console.log(`    Name: ${form.formName}`);
-    console.log(`    ID: ${form.formId}`);
-    if (form.submitButtonId) {
-      console.log(`    Submit Button ID: ${form.submitButtonId}`);
-    }
-    console.log(`    Inputs:`);
-    form.inputs.forEach((input) => {
-      console.log(`      - ${input.name} (${input.id}): ${input.type}`);
-    });
-  });
-
-  // Find standalone select inputs (not in forms)
-  const selectInputs = findStandaloneSelectInputs(pageData, forms);
-
-  console.log(`\nFound ${selectInputs.length} standalone select input(s):`);
-  selectInputs.forEach((input) => {
-    console.log(
-      `  - ${input.name} (${input.id}) -> prop: ${
-        input.propName
-      }, on${input.propName[0].toUpperCase()}${input.propName.slice(1)}Change`
-    );
-  });
-
-  // Find action buttons
-  const actionButtons = findActionButtons(pageData);
-
-  console.log(`\nFound ${actionButtons.length} action button(s):`);
-  actionButtons.forEach((button) => {
-    console.log(
-      `  - ${button.name} (${
-        button.id
-      }) -> on${button.propName[0].toUpperCase()}${button.propName.slice(
-        1
-      )}Click (action: ${button.actionType})`
-    );
-  });
-
-  if (
-    sliders.length === 0 &&
-    standaloneComponents.length === 0 &&
-    inputGroups.length === 0 &&
-    forms.length === 0 &&
-    selectInputs.length === 0 &&
-    actionButtons.length === 0
-  ) {
-    console.warn(
-      "\n⚠ No sliders, standalone components, input groups, forms, select inputs, or action buttons found. Generating empty wrapper."
-    );
-  }
 
   // Generate component name and directory name
   const { directoryPath, componentName } = generateNames(appName, pageName);
   const directoryName = directoryPath;
 
-  // Update output path - always create a directory structure
+  // Update output path
   if (needsFilenameGeneration) {
     finalOutputPath = join(outputPath, directoryName);
   } else {
-    // If a file path was provided, use its directory and create a subdirectory
     const providedDir = dirname(finalOutputPath);
     finalOutputPath = join(providedDir, directoryName);
   }
 
-  console.log(`Component directory: ${directoryName}`);
-
   // Generate component code and README
   const componentCode = generateComponentCode(
     appId,
@@ -2900,6 +275,7 @@ async function generateWrapper({
     actionButtons,
     !!isProduction
   );
+
   const readmeContent = generateReadme(
     appId,
     pageId,
@@ -2925,37 +301,36 @@ async function generateWrapper({
     let componentCodeContent = "";
     try {
       componentCodeContent = await readFile(componentJsPath, "utf-8");
-    } catch (e) {
-      console.warn("Could not read component.js for production build", e);
-    }
-    
+    } catch (e) {}
+
     let appDataForProd = cachedAppData;
     if (!appDataForProd) {
-        try {
-            const appJsonPath = join(tempDir, "app.json");
-            const appJsonContent = await readFile(appJsonPath, "utf-8");
-            appDataForProd = JSON.parse(appJsonContent);
-        } catch(e) {
-            console.warn("Could not read app.json for production build", e);
-        }
+      try {
+        const appJsonPath = join(tempDir, "app.json");
+        const appJsonContent = await readFile(appJsonPath, "utf-8");
+        appDataForProd = JSON.parse(appJsonContent);
+      } catch (e) {}
     }
 
     const productionData = {
       app: appDataForProd,
       page: pageData,
-      componentCode: componentCodeContent
+      componentCode: componentCodeContent,
     };
-    await writeFile(join(finalOutputPath, "data.json"), JSON.stringify(productionData, null, 2), "utf-8");
-    console.log(`✓ Generated data.json for production mode`);
+    await writeFile(
+      join(finalOutputPath, "data.json"),
+      JSON.stringify(productionData, null, 2),
+      "utf-8"
+    );
   }
+
   const indexPath = join(finalOutputPath, "index.tsx");
   const readmePath = join(finalOutputPath, "README.md");
 
   await writeFile(indexPath, componentCode, "utf-8");
   await writeFile(readmePath, readmeContent, "utf-8");
 
-  console.log(`\n✓ Generated wrapper component at: ${indexPath}`);
-  console.log(`✓ Generated documentation at: ${readmePath}`);
+  console.log(`✓ Generated wrapper component at: ${indexPath}`);
 }
 
 function printUsage() {
@@ -2972,52 +347,49 @@ Environment variables:
 
 Example:
   generate-wrapper.ts 01KA964B1T6KCKSKCNMYSTKRKZ 01KA964B2F42MN4WGCYDTG1Y70 ./src/components/MyEncoreApp.tsx
-  generate-wrapper.ts 01KA964B1T6KCKSKCNMYSTKRKZ ./src/components/  (Generates all pages)
 `);
 }
 
-
 export async function runGenerate(args: string[]) {
   const isProduction = args.includes("--production");
   const cleanArgs = args.filter((arg) => arg !== "--production");
 
-  if (cleanArgs.length < 2 || cleanArgs.includes("--help") || cleanArgs.includes("-h")) {
+  if (
+    cleanArgs.length < 2 ||
+    cleanArgs.includes("--help") ||
+    cleanArgs.includes("-h")
+  ) {
     printUsage();
-    process.exit(cleanArgs.includes("--help") || cleanArgs.includes("-h") ? 0 : 1);
+    process.exit(
+      cleanArgs.includes("--help") || cleanArgs.includes("-h") ? 0 : 1
+    );
   }
 
-  // Handle 2 arguments: appId, outputPath (generate for all pages)
   if (cleanArgs.length === 2) {
     const [appId, outputPath] = cleanArgs;
 
     try {
       const { pages, appData } = await getAppPages(appId);
-      console.log(`Found ${pages.length} pages.`);
-
       if (pages.length === 0) {
         console.warn("No pages found for this app.");
         return;
       }
 
-      // Cache app.json data and reuse it for all pages
-      console.log(
-        `Caching app.json data for reuse across ${pages.length} page(s)...`
-      );
-
       for (const page of pages) {
         if (!page.id) continue;
-        console.log(`\n----------------------------------------`);
-        console.log(`Processing page: ${page.name || "Unnamed"} (${page.id})`);
-        console.log(`----------------------------------------`);
-        try { await generateWrapper({
-          appId,
-          pageId: page.id,
-          outputPath,
-          cachedAppData: appData,
-          isProduction
-        });
+        try {
+          await generateWrapper({
+            appId,
+            pageId: page.id,
+            outputPath,
+            cachedAppData: appData,
+            isProduction,
+          });
         } catch (error) {
-          console.warn(`Error with page:`, error instanceof Error ? error.message : error);
+          console.warn(
+            `Error with page ${page.id}:`,
+            error instanceof Error ? error.message : error
+          );
         }
       }
     } catch (error) {
@@ -3029,12 +401,6 @@ export async function runGenerate(args: string[]) {
 
   const [appId, pageId, outputPath] = cleanArgs;
 
-  if (!appId || !pageId || !outputPath) {
-    console.error("Error: Missing required arguments");
-    printUsage();
-    process.exit(1);
-  }
-
   try {
     await generateWrapper({ appId, pageId, outputPath, isProduction });
   } catch (error) {
@@ -3042,4 +408,3 @@ export async function runGenerate(args: string[]) {
     process.exit(1);
   }
 }
-