feat: Enhance component extraction logic and update tPOS UI kit with new badge and button designs for improved reusability and consistency.

pencil-design/scripts/build.py

@@ -314,24 +314,35 @@ class PencilBuilder:
                 gathered.append(child)
                 continue
                 
-            # 2. Check if it's a structural wrapper (Showcase, Section)
+            # 2. Check if it's a structural wrapper (Showcase, Section, Examples, Row)
             name = child.get('name', '')
             is_frame = child.get('type') == 'frame'
-            is_structural = 'showcase' in name.lower() or 'section' in name.lower()
+            is_structural = any(kw in name.lower() for kw in ['showcase', 'section', 'examples', 'row', 'header', 'container'])
             
             if is_frame and is_structural:
-                # Unwrap and recurse
+                # Unwrap structural frames and recurse to find reusable components inside
                 self._extract_components_recursive(child.get('children', []), gathered)
             elif is_frame:
-                # 3. Valid Candidate (Frame that isn't structural/showcase)
-                # It might be a group of buttons (e.g. "buttonExamples") or an actual component candidate
-                # For now, we keep it as a potential component
-                gathered.append(child)
-            else:
-                # 4. Primitives (Text, Rect, etc.) at this level
-                # If they are loose in a Showcase, we probably ignore them (decorations like Titles)
-                # If they are inside a Kept Frame, they were preserved in step 3.
-                pass
+                # Non-structural frame without reusable flag
+                # Check if it has nested reusable components inside
+                nested_reusables = []
+                self._find_nested_reusables(child.get('children', []), nested_reusables)
+                
+                if nested_reusables:
+                    # Has nested reusables, extract them instead of the wrapper
+                    gathered.extend(nested_reusables)
+                else:
+                    # No nested reusables, keep this frame as potential component
+                    gathered.append(child)
+            # Primitives are ignored at extraction level
+    
+    def _find_nested_reusables(self, children: List[Dict], found: List[Dict]) -> None:
+        """Find all nested reusable components"""
+        for child in children:
+            if child.get('reusable'):
+                found.append(child)
+            elif child.get('type') == 'frame':
+                self._find_nested_reusables(child.get('children', []), found)
 
     def build_library(self, output_path: str = None) -> None:
         """Build merged component library from Atomic Design files"""
@@ -368,6 +379,12 @@ class PencilBuilder:
                 with open(pen_file, 'r') as f:
                     data = json.load(f)
                 
+                # Merge variables from source file (won't override existing tokens)
+                file_vars = data.get('variables', {})
+                for key, val in file_vars.items():
+                    if key not in variables:
+                        variables[key] = val
+                
                 # Use recursive extraction
                 file_components = []
                 self._extract_components_recursive(data.get('children', []), file_components)