Update npm packages

Add --dump-dimensions option to rsx:debug for layout debugging
Mark framework publish

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

bin/route-debug.js

@@ -55,6 +55,7 @@ function parse_args() {
         console.log('  --console-debug-filter=<ch> Filter console_debug to specific channel');
         console.log('  --console-debug-benchmark   Include benchmark timing in console_debug');
         console.log('  --console-debug-all         Show all console_debug channels');
+        console.log('  --dump-dimensions=<sel>    Add layout dimensions to matching elements');
         console.log('  --help             Show this help message');
         process.exit(0);
     }
@@ -95,7 +96,8 @@ function parse_args() {
         console_debug_all: false,
         console_debug_disable: false,
         screenshot_width: null,
-        screenshot_path: null
+        screenshot_path: null,
+        dump_dimensions: null
     };
     
     for (const arg of args) {
@@ -168,6 +170,8 @@ function parse_args() {
             }
         } else if (arg.startsWith('--screenshot-path=')) {
             options.screenshot_path = arg.substring(18);
+        } else if (arg.startsWith('--dump-dimensions=')) {
+            options.dump_dimensions = arg.substring(18);
         } else if (!arg.startsWith('--')) {
             options.route = arg;
         }
@@ -566,7 +570,73 @@ function parse_args() {
             console.log(`Warning: Element '${options.dump_element}' not found for dumping`);
         }
     }
-    
+
+    // Add dimensions to elements matching selector if --dump-dimensions is passed
+    // This injects data-dimensions attributes with layout info (x, y, width, height, margin, padding)
+    // Useful for AI agents diagnosing layout issues without visual inspection
+    if (options.dump_dimensions) {
+        const dimensionsResult = await page.evaluate((selector) => {
+            const elements = document.querySelectorAll(selector);
+            if (elements.length === 0) {
+                return { count: 0, error: 'No elements found' };
+            }
+
+            let count = 0;
+            elements.forEach((elem) => {
+                const rect = elem.getBoundingClientRect();
+                const style = window.getComputedStyle(elem);
+
+                // Parse margin values and round to nearest pixel
+                const marginTop = Math.round(parseFloat(style.marginTop) || 0);
+                const marginRight = Math.round(parseFloat(style.marginRight) || 0);
+                const marginBottom = Math.round(parseFloat(style.marginBottom) || 0);
+                const marginLeft = Math.round(parseFloat(style.marginLeft) || 0);
+
+                // Parse padding values and round to nearest pixel
+                const paddingTop = Math.round(parseFloat(style.paddingTop) || 0);
+                const paddingRight = Math.round(parseFloat(style.paddingRight) || 0);
+                const paddingBottom = Math.round(parseFloat(style.paddingBottom) || 0);
+                const paddingLeft = Math.round(parseFloat(style.paddingLeft) || 0);
+
+                // Format margin - use shorthand if all same, otherwise 4 values
+                let margin;
+                if (marginTop === marginRight && marginRight === marginBottom && marginBottom === marginLeft) {
+                    margin = marginTop;
+                } else {
+                    margin = `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`;
+                }
+
+                // Format padding - use shorthand if all same, otherwise 4 values
+                let padding;
+                if (paddingTop === paddingRight && paddingRight === paddingBottom && paddingBottom === paddingLeft) {
+                    padding = paddingTop;
+                } else {
+                    padding = `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`;
+                }
+
+                const dimensions = {
+                    x: Math.round(rect.x),
+                    y: Math.round(rect.y),
+                    w: Math.round(rect.width),
+                    h: Math.round(rect.height),
+                    margin: margin,
+                    padding: padding
+                };
+
+                elem.setAttribute('data-dimensions', JSON.stringify(dimensions));
+                count++;
+            });
+
+            return { count: count };
+        }, options.dump_dimensions);
+
+        if (dimensionsResult.error) {
+            console.log(`\nWarning: ${dimensionsResult.error} for selector '${options.dump_dimensions}'`);
+        } else {
+            console.log(`\nDimensions: Added data-dimensions to ${dimensionsResult.count} element(s) matching '${options.dump_dimensions}'`);
+        }
+    }
+
     // Execute eval code if --eval option is passed
     if (options.eval_code) {
         try {