@bravostudioai/react 0.1.0 → 0.1.2

package/src/codegen/parser.ts

@@ -0,0 +1,1614 @@
+import {
+  ComponentInfo,
+  SliderInfo,
+  InputGroupInfo,
+  FormInfo,
+  SelectInputInfo,
+  ActionButtonInfo,
+} from "./types";
+
+export 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
+}
+
+export 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.
+ */
+export 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
+ */
+export function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  return a.every((val, idx) => val === b[idx]);
+}
+
+export 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";
+}
+
+export function getComponentPropName(componentType: string): string {
+  if (componentType === "component:image") {
+    return "imageUrl";
+  }
+  if (componentType === "component:text") {
+    return "text";
+  }
+  return "value";
+}
+
+export 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;
+
+      const 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[] = [];
+
+        const 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.body && Array.isArray(comp.body)) {
+            comp.body.forEach((child: any) =>
+              findDataComponents(child, currentParentPath)
+            );
+          }
+          if (comp.containers && Array.isArray(comp.containers)) {
+            comp.containers.forEach((child: any) =>
+              findDataComponents(child, currentParentPath)
+            );
+          }
+          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;
+}
+
+export 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;
+}
+
+export 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());
+}
+
+export 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
+      const 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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;
+      });
+    });
+  });
+}