@bravostudioai/react 0.1.0

package/src/cli/commands/generate.ts

@@ -0,0 +1,3045 @@
+
+
+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}
+      })),`);
+    }
+
+    // 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"));
+    }
+  });
+
+  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} }),`
+    );
+  });
+
+  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}
+`;
+}
+
+function generateNames(
+  appName: string,
+  pageName: string
+): { directoryPath: string; componentName: string } {
+  const appCamel = sanitizePropName(appName);
+  const pageCamel = sanitizePropName(pageName);
+  // Capitalize first letter for PascalCase
+  const appPascal = appCamel.charAt(0).toUpperCase() + appCamel.slice(1);
+  const pagePascal = pageCamel.charAt(0).toUpperCase() + pageCamel.slice(1);
+  return {
+    directoryPath: join(appPascal, pagePascal),
+    componentName: pagePascal,
+  };
+}
+
+async function getAppPages(
+  appId: string
+): Promise<{ pages: any[]; appData: any }> {
+  const url = `${APPS_SERVICE_URL}/devices/apps/${appId}`;
+  console.log(`Fetching app data from ${url}...`);
+  try {
+    const content = await downloadFile(url);
+    const appData = JSON.parse(content);
+    const pages = appData?.app?.data?.pages || [];
+    return { pages, appData };
+  } catch (error) {
+    console.error("Failed to fetch app data:", error);
+    throw error;
+  }
+}
+
+async function generateWrapper({
+  appId,
+  pageId,
+  outputPath,
+  cachedAppData,
+  isProduction,
+}: {
+  appId: string;
+  pageId: string;
+  outputPath: string;
+  cachedAppData?: any;
+  isProduction?: boolean;
+}) {
+  console.log(`Generating wrapper for app: ${appId}, page: ${pageId}`);
+
+  // Determine final output path - we'll update it after we get app/page names
+  let finalOutputPath = outputPath;
+  let needsFilenameGeneration = false;
+  const pathExt = outputPath.split(".").pop()?.toLowerCase();
+  if (
+    pathExt !== "tsx" &&
+    pathExt !== "ts" &&
+    pathExt !== "jsx" &&
+    pathExt !== "js"
+  ) {
+    // Path doesn't have a file extension, treat as directory
+    const { stat } = await import("fs/promises");
+    try {
+      const pathStats = await stat(outputPath);
+      if (pathStats.isDirectory()) {
+        needsFilenameGeneration = true;
+      }
+    } catch {
+      // Path doesn't exist, check if it looks like a directory (no extension)
+      if (!pathExt || outputPath.endsWith("/")) {
+        needsFilenameGeneration = true;
+      }
+    }
+  }
+
+  if (needsFilenameGeneration) {
+    console.log(
+      `Output path is a directory, will generate filename from app/page names`
+    );
+  }
+
+  console.log(`Output path: ${outputPath}`);
+
+  // Create temp directory for downloaded files
+  const tempDir = join(process.cwd(), ".temp-bravo", appId, pageId);
+  if (!existsSync(tempDir)) {
+    await mkdir(tempDir, { recursive: true });
+  }
+
+  // Download files (skip app.json if we have cached data)
+  const files: Array<{
+    url: string;
+    filename: string;
+    headers?: Record<string, string>;
+    skipIfCached?: boolean;
+  }> = [
+    {
+      url: `${APPS_SERVICE_URL}/devices/apps/${appId}`,
+      filename: "app.json",
+      skipIfCached: true,
+    },
+    {
+      url: `${APPS_SERVICE_URL}/devices/apps/${appId}/node/${pageId}`,
+      filename: "page.json",
+    },
+    {
+      url: `${COMPONENTS_CDN_URL}/${appId}/draft/components/${pageId}.js`,
+      filename: "component.js",
+    },
+  ];
+
+  for (const file of files) {
+    // Skip app.json if we have cached data
+    if (file.skipIfCached && cachedAppData) {
+      console.log(`Using cached ${file.filename} (skipping download)`);
+      const filePath = join(tempDir, file.filename);
+      await writeFile(
+        filePath,
+        JSON.stringify(cachedAppData, null, 2),
+        "utf-8"
+      );
+      console.log(`✓ Saved ${file.filename} from cache`);
+      continue;
+    }
+
+    try {
+      console.log(`Downloading ${file.filename} from ${file.url}...`);
+      const content = await downloadFile(file.url, file.headers);
+      const filePath = join(tempDir, file.filename);
+      await writeFile(filePath, content, "utf-8");
+      console.log(`✓ Saved ${file.filename}`);
+    } catch (error) {
+      console.error(`✗ Failed to download ${file.filename}:`, error);
+      throw error;
+    }
+  }
+
+  // Read and parse page.json
+  const pageJsonPath = join(tempDir, "page.json");
+  const pageJsonContent = await readFile(pageJsonPath, "utf-8");
+  const pageResponse = JSON.parse(pageJsonContent);
+
+  // 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...");
+    try {
+      let appData = cachedAppData;
+
+      // If we don't have cached data, download it
+      if (!appData) {
+        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
+  const sliders = findSlidersAndDataBindings(pageData);
+
+  // Find standalone components with bravo:data tags
+  const standaloneComponents = findStandaloneComponents(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) {
+      const appJsonPath = join(tempDir, "app.json");
+      if (existsSync(appJsonPath)) {
+        const appJsonContent = await readFile(appJsonPath, "utf-8");
+        appDataForName = JSON.parse(appJsonContent);
+      }
+    }
+    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
+  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,
+    pageId,
+    componentName,
+    sliders,
+    standaloneComponents,
+    inputGroups,
+    forms,
+    selectInputs,
+    actionButtons,
+    !!isProduction
+  );
+  const readmeContent = generateReadme(
+    appId,
+    pageId,
+    appName,
+    pageName,
+    componentName,
+    sliders,
+    standaloneComponents,
+    inputGroups,
+    forms,
+    selectInputs,
+    actionButtons
+  );
+
+  // Ensure output directory exists
+  if (!existsSync(finalOutputPath)) {
+    await mkdir(finalOutputPath, { recursive: true });
+  }
+
+  // Write files
+  if (isProduction) {
+    const componentJsPath = join(tempDir, "component.js");
+    let componentCodeContent = "";
+    try {
+      componentCodeContent = await readFile(componentJsPath, "utf-8");
+    } catch (e) {
+      console.warn("Could not read component.js for production build", 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);
+        }
+    }
+
+    const productionData = {
+      app: appDataForProd,
+      page: pageData,
+      componentCode: componentCodeContent
+    };
+    await writeFile(join(finalOutputPath, "data.json"), JSON.stringify(productionData, null, 2), "utf-8");
+    console.log(`✓ Generated data.json for production mode`);
+  }
+  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}`);
+}
+
+function printUsage() {
+  console.log(`
+Usage: generate-wrapper.ts <appId> [pageId] <outputPath>
+
+Arguments:
+  appId      The Encore app ID
+  pageId     The Encore page ID (optional - if omitted, generates wrappers for ALL pages)
+  outputPath Path where the generated TSX file(s) should be saved
+
+Environment variables:
+  APPS_SERVICE_URL  Base URL for the apps service (default: http://localhost:3000)
+
+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")) {
+    printUsage();
+    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
+        });
+        } catch (error) {
+          console.warn(`Error with page:`, error instanceof Error ? error.message : error);
+        }
+      }
+    } catch (error) {
+      console.error("\nError:", error instanceof Error ? error.message : error);
+      process.exit(1);
+    }
+    return;
+  }
+
+  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) {
+    console.error("\nError:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+