cursorflow 2.3.2__tar.gz → 2.3.3__tar.gz

{cursorflow-2.3.2 → cursorflow-2.3.3}/MANIFEST.in

@@ -19,6 +19,8 @@ include examples/enhanced_screenshot_example.py
 include examples/responsive_testing_example.py
 include examples/hot_reload_css_iteration.py
 include examples/v2_comprehensive_demo.py
+include examples/element_inspection_example.py
+include examples/element_measurement_example.py
 
 # INCLUDE: Customer-facing documentation
 include docs/user/USAGE_GUIDE.md

{cursorflow-2.3.2 → cursorflow-2.3.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: cursorflow
-Version: 2.3.2
+Version: 2.3.3
 Summary: 🔥 Complete page intelligence for AI-driven development with Hot Reload Intelligence - captures DOM, network, console, performance, HMR events, and comprehensive page analysis
 Author-email: GeekWarrior Development <rbush@cooltheory.com>
 License-Expression: MIT

{cursorflow-2.3.2 → cursorflow-2.3.3}/cursorflow.egg-info/SOURCES.txt

@@ -37,6 +37,8 @@ cursorflow/rules/cursorflow-installation.mdc
 cursorflow/rules/cursorflow-usage.mdc
 docs/user/USAGE_GUIDE.md
 examples/comprehensive_screenshot_example.py
+examples/element_inspection_example.py
+examples/element_measurement_example.py
 examples/enhanced_screenshot_example.py
 examples/hot_reload_css_iteration.py
 examples/mockup_comparison_example.py

cursorflow-2.3.3/examples/element_inspection_example.py

@@ -0,0 +1,183 @@
+"""
+Element Inspection Example
+
+This example shows how to use the inspect command for comprehensive CSS debugging
+and element analysis. Perfect for understanding layout issues and computed styles.
+"""
+
+import asyncio
+import json
+from cursorflow import CursorFlow
+
+async def inspect_element_comprehensive():
+    """Example: Comprehensive element inspection with full CSS analysis"""
+    
+    print("🔍 Comprehensive Element Inspection Example\n")
+    
+    # Initialize CursorFlow
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    # Execute inspection with screenshot
+    print("📸 Inspecting #messages-panel with comprehensive data capture...")
+    results = await flow.execute_and_collect([
+        {"navigate": "/console"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "inspection"}
+    ])
+    
+    # Extract element data from comprehensive analysis
+    comprehensive_data = results.get('comprehensive_data', {})
+    dom_analysis = comprehensive_data.get('dom_analysis', {})
+    elements = dom_analysis.get('elements', [])
+    
+    # Find the target element
+    target_selector = "#messages-panel"
+    matching_elements = [
+        el for el in elements 
+        if el.get('id') == 'messages-panel'
+    ]
+    
+    if not matching_elements:
+        print(f"⚠️  Element {target_selector} not found")
+        return
+    
+    element = matching_elements[0]
+    
+    # Display comprehensive element information
+    print(f"\n═══ Element: {target_selector} ═══\n")
+    
+    # Basic info
+    print(f"Tag:       {element.get('tagName', 'unknown')}")
+    print(f"ID:        #{element.get('id', 'N/A')}")
+    print(f"Classes:   .{element.get('className', 'N/A')}")
+    
+    # Dimensions
+    visual_context = element.get('visual_context', {})
+    bbox = visual_context.get('bounding_box', {})
+    if bbox:
+        print(f"\n📐 Dimensions:")
+        print(f"   Position:  x={bbox.get('x', 0):.0f}, y={bbox.get('y', 0):.0f}")
+        print(f"   Size:      {bbox.get('width', 0):.0f}w × {bbox.get('height', 0):.0f}h")
+    
+    # Computed styles
+    computed = element.get('computedStyles', {})
+    if computed:
+        print(f"\n🎨 Key CSS Properties:")
+        print(f"   display:   {computed.get('display', 'N/A')}")
+        print(f"   position:  {computed.get('position', 'N/A')}")
+        print(f"   flex:      {computed.get('flex', 'N/A')}")
+        print(f"   width:     {computed.get('width', 'N/A')}")
+        print(f"   height:    {computed.get('height', 'N/A')}")
+    
+    # Accessibility
+    accessibility = element.get('accessibility', {})
+    if accessibility:
+        print(f"\n♿ Accessibility:")
+        print(f"   Role:         {accessibility.get('role', 'N/A')}")
+        print(f"   Interactive:  {'✅' if accessibility.get('isInteractive') else '❌'}")
+    
+    # Visual context
+    visibility = visual_context.get('visibility', {})
+    if visibility:
+        print(f"\n👁️  Visual Context:")
+        print(f"   Visible:  {'✅' if visibility.get('is_visible') else '❌'}")
+        print(f"   In viewport: {'✅' if visibility.get('is_in_viewport') else '❌'}")
+    
+    # Screenshot location
+    screenshots = results.get('artifacts', {}).get('screenshots', [])
+    if screenshots:
+        print(f"\n📸 Screenshot saved: {screenshots[0]}")
+    
+    print("\n✅ Inspection complete!")
+
+async def inspect_multiple_elements():
+    """Example: Inspect multiple elements for comparison"""
+    
+    print("\n🔍 Multiple Element Inspection Example\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    # Execute inspection
+    results = await flow.execute_and_collect([
+        {"navigate": "/dashboard"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "dashboard"}
+    ])
+    
+    # Extract element data
+    comprehensive_data = results.get('comprehensive_data', {})
+    elements = comprehensive_data.get('dom_analysis', {}).get('elements', [])
+    
+    # Compare multiple panels
+    selectors = [".sidebar", ".main-content", ".right-panel"]
+    
+    print("📊 Comparing panel widths:\n")
+    for selector in selectors:
+        matching = [
+            el for el in elements
+            if selector[1:] in el.get('className', '').split()
+        ]
+        
+        if matching:
+            element = matching[0]
+            bbox = element.get('visual_context', {}).get('bounding_box', {})
+            computed = element.get('computedStyles', {})
+            
+            print(f"{selector}:")
+            print(f"  Rendered: {bbox.get('width', 0):.0f}px")
+            print(f"  CSS:      {computed.get('width', 'N/A')}")
+            print(f"  Flex:     {computed.get('flex', 'N/A')}\n")
+
+async def inspect_with_verbose_css():
+    """Example: Get ALL computed CSS properties for deep debugging"""
+    
+    print("\n🔍 Verbose CSS Inspection Example\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    results = await flow.execute_and_collect([
+        {"navigate": "/component"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "component"}
+    ])
+    
+    # Extract element
+    elements = results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    
+    if elements:
+        element = elements[0]  # First element
+        computed = element.get('computedStyles', {})
+        
+        print(f"🎨 All {len(computed)} Computed CSS Properties:\n")
+        
+        for prop, value in sorted(computed.items())[:20]:  # Show first 20
+            print(f"   {prop}: {value}")
+        
+        print(f"\n   ... and {len(computed) - 20} more properties")
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("CursorFlow Element Inspection Examples")
+    print("=" * 60)
+    
+    # Run examples
+    asyncio.run(inspect_element_comprehensive())
+    asyncio.run(inspect_multiple_elements())
+    asyncio.run(inspect_with_verbose_css())
+    
+    print("\n" + "=" * 60)
+    print("✅ All examples completed!")
+    print("=" * 60)
+

cursorflow-2.3.3/examples/element_measurement_example.py

@@ -0,0 +1,243 @@
+"""
+Element Measurement Example
+
+This example shows how to use the measure command for surgical dimension checking
+and quick CSS verification. Perfect for validating layout changes.
+"""
+
+import asyncio
+import json
+from cursorflow import CursorFlow
+
+async def measure_single_element():
+    """Example: Quick dimension check for a single element"""
+    
+    print("📏 Single Element Measurement Example\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    # Execute measurement
+    print("📐 Measuring #main-panel dimensions...")
+    results = await flow.execute_and_collect([
+        {"navigate": "/dashboard"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "measurement"}
+    ])
+    
+    # Extract element data
+    elements = results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    
+    # Find target element
+    matching = [el for el in elements if el.get('id') == 'main-panel']
+    
+    if not matching:
+        print("⚠️  Element #main-panel not found")
+        return
+    
+    element = matching[0]
+    bbox = element.get('visual_context', {}).get('bounding_box', {})
+    computed = element.get('computedStyles', {})
+    
+    # Display measurements (surgical precision)
+    print(f"\n#main-panel")
+    print(f"  📐 Rendered:  {bbox.get('width', 0):.0f}w × {bbox.get('height', 0):.0f}h")
+    print(f"  📍 Position:  x={bbox.get('x', 0):.0f}, y={bbox.get('y', 0):.0f}")
+    print(f"  🎨 Display:   {computed.get('display', 'N/A')}")
+    print(f"  📦 CSS Width: {computed.get('width', 'N/A')}")
+    
+    if computed.get('flex'):
+        print(f"  🔧 Flex:      {computed.get('flex')}")
+    
+    print("\n✅ Measurement complete!")
+
+async def measure_multiple_elements():
+    """Example: Measure multiple elements at once"""
+    
+    print("\n📏 Multiple Element Measurement Example\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    results = await flow.execute_and_collect([
+        {"navigate": "/layout"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "layout"}
+    ])
+    
+    # Extract elements
+    elements = results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    
+    # Measure multiple panels
+    selectors = ["#panel1", "#panel2", "#panel3"]
+    
+    print("📊 Measuring layout panels:\n")
+    
+    for selector in selectors:
+        matching = [el for el in elements if el.get('id') == selector[1:]]
+        
+        if matching:
+            element = matching[0]
+            bbox = element.get('visual_context', {}).get('bounding_box', {})
+            computed = element.get('computedStyles', {})
+            
+            print(f"{selector}")
+            print(f"  📐 Rendered:  {bbox.get('width', 0):.0f}w × {bbox.get('height', 0):.0f}h")
+            print(f"  📦 CSS Width: {computed.get('width', 'N/A')}")
+            
+            if computed.get('flex'):
+                print(f"  🔧 Flex:      {computed.get('flex')}")
+            if computed.get('flexBasis') != 'auto':
+                print(f"  📏 Flex Base: {computed.get('flexBasis')}")
+            
+            print()
+
+async def measure_before_and_after():
+    """Example: Measure before CSS changes, apply changes, measure after"""
+    
+    print("\n📏 Before/After Measurement Example\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    # BEFORE measurement
+    print("📐 BEFORE CSS changes:")
+    before_results = await flow.execute_and_collect([
+        {"navigate": "/component"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "before"}
+    ])
+    
+    before_elements = before_results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    before_element = [el for el in before_elements if el.get('id') == 'container'][0]
+    before_bbox = before_element.get('visual_context', {}).get('bounding_box', {})
+    
+    print(f"  Container: {before_bbox.get('width', 0):.0f}w × {before_bbox.get('height', 0):.0f}h")
+    
+    # --- User would make CSS changes here in actual workflow ---
+    print("\n🔧 (Apply CSS changes: .container { padding: 2rem; gap: 1.5rem; })")
+    print("   (In real workflow, you'd modify CSS files here)")
+    
+    # AFTER measurement (simulated with new test)
+    print("\n📐 AFTER CSS changes:")
+    after_results = await flow.execute_and_collect([
+        {"navigate": "/component"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "after"}
+    ])
+    
+    after_elements = after_results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    after_element = [el for el in after_elements if el.get('id') == 'container'][0]
+    after_bbox = after_element.get('visual_context', {}).get('bounding_box', {})
+    
+    print(f"  Container: {after_bbox.get('width', 0):.0f}w × {after_bbox.get('height', 0):.0f}h")
+    
+    # Compare
+    width_diff = after_bbox.get('width', 0) - before_bbox.get('width', 0)
+    height_diff = after_bbox.get('height', 0) - before_bbox.get('height', 0)
+    
+    print(f"\n📊 Changes:")
+    print(f"  Width:  {'+' if width_diff > 0 else ''}{width_diff:.0f}px")
+    print(f"  Height: {'+' if height_diff > 0 else ''}{height_diff:.0f}px")
+    print("\n✅ CSS changes verified!")
+
+async def measure_responsive_breakpoints():
+    """Example: Measure element dimensions across responsive breakpoints"""
+    
+    print("\n📏 Responsive Breakpoint Measurement Example\n")
+    
+    viewports = [
+        {"width": 375, "height": 667, "name": "mobile"},
+        {"width": 768, "height": 1024, "name": "tablet"},
+        {"width": 1440, "height": 900, "name": "desktop"}
+    ]
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    print("📱 Measuring across breakpoints:\n")
+    
+    for viewport in viewports:
+        # Set viewport size
+        flow.browser_config['viewport'] = {"width": viewport['width'], "height": viewport['height']}
+        
+        results = await flow.execute_and_collect([
+            {"navigate": "/responsive"},
+            {"wait_for_selector": "body"},
+            {"screenshot": f"responsive-{viewport['name']}"}
+        ])
+        
+        elements = results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+        matching = [el for el in elements if el.get('id') == 'main-content']
+        
+        if matching:
+            element = matching[0]
+            bbox = element.get('visual_context', {}).get('bounding_box', {})
+            computed = element.get('computedStyles', {})
+            
+            print(f"{viewport['name'].upper()} ({viewport['width']}x{viewport['height']}):")
+            print(f"  #main-content: {bbox.get('width', 0):.0f}w × {bbox.get('height', 0):.0f}h")
+            print(f"  Display: {computed.get('display', 'N/A')}")
+            print()
+
+async def measure_with_verbose_css():
+    """Example: Get all computed CSS for detailed analysis"""
+    
+    print("\n📏 Verbose Measurement (All CSS Properties)\n")
+    
+    flow = CursorFlow(
+        base_url="http://localhost:3000",
+        log_config={'source': 'local', 'paths': []},
+        browser_config={'headless': True}
+    )
+    
+    results = await flow.execute_and_collect([
+        {"navigate": "/element"},
+        {"wait_for_selector": "body"},
+        {"screenshot": "element"}
+    ])
+    
+    elements = results.get('comprehensive_data', {}).get('dom_analysis', {}).get('elements', [])
+    
+    if elements:
+        element = elements[0]
+        bbox = element.get('visual_context', {}).get('bounding_box', {})
+        computed = element.get('computedStyles', {})
+        
+        print(f"Element: {element.get('tagName', 'unknown')}")
+        print(f"  📐 Rendered:  {bbox.get('width', 0):.0f}w × {bbox.get('height', 0):.0f}h\n")
+        print(f"  🎨 All {len(computed)} Computed CSS Properties:")
+        
+        for prop, value in sorted(computed.items())[:15]:
+            print(f"     {prop}: {value}")
+        
+        print(f"\n     💡 {len(computed) - 15} more properties available")
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("CursorFlow Element Measurement Examples")
+    print("=" * 60)
+    
+    # Run examples
+    asyncio.run(measure_single_element())
+    asyncio.run(measure_multiple_elements())
+    asyncio.run(measure_before_and_after())
+    asyncio.run(measure_responsive_breakpoints())
+    asyncio.run(measure_with_verbose_css())
+    
+    print("\n" + "=" * 60)
+    print("✅ All examples completed!")
+    print("=" * 60)
+

{cursorflow-2.3.2 → cursorflow-2.3.3}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "cursorflow"
-version = "2.3.2"
+version = "2.3.3"
 description = "🔥 Complete page intelligence for AI-driven development with Hot Reload Intelligence - captures DOM, network, console, performance, HMR events, and comprehensive page analysis"
 authors = [
     {name = "GeekWarrior Development", email = "rbush@cooltheory.com"}
@@ -72,6 +72,6 @@ line-length = 88
 target-version = ['py38']
 
 [tool.mypy]
-python_version = "2.3.2"
+python_version = "2.3.3"
 warn_return_any = true
 warn_unused_configs = true