@ulpi/browse 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulpi/browse",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/ulpi-io/browse"

package/skill/SKILL.md

@@ -261,7 +261,8 @@ browse accessibility      Accessibility tree snapshot (ARIA)
 ```
 browse snapshot           Full accessibility tree with @refs
 browse snapshot -i        Interactive elements only — terse flat list (minimal tokens)
-browse snapshot -i -v     Interactive elements — verbose indented tree with props
+browse snapshot -i -f     Interactive elements — full indented tree with props
+browse snapshot -i -V     Interactive elements — viewport only (skip below-fold)
 browse snapshot -c        Compact (no empty structural elements)
 browse snapshot -C        Cursor-interactive (detect divs with cursor:pointer/onclick/tabindex)
 browse snapshot -d <N>    Limit depth to N levels

package/src/cli.ts

@@ -612,7 +612,7 @@ Inspection:     js <expr> | eval <file> | css <sel> <prop> | attrs <sel>
                 cookies | storage [set <k> <v>] | perf
                 value <sel> | count <sel> | clipboard [write <text>]
 Visual:         screenshot [path] | pdf [path] | responsive [prefix]
-Snapshot:       snapshot [-i] [-v] [-c] [-C] [-d N] [-s sel]
+Snapshot:       snapshot [-i] [-f] [-V] [-c] [-C] [-d N] [-s sel]
 Find:           find role|text|label|placeholder|testid <query> [name]
 Compare:        diff <url1> <url2> | screenshot-diff <baseline> [current]
 Multi-step:     chain (reads JSON from stdin)
@@ -639,7 +639,8 @@ Options:
 
 Snapshot flags:
   -i            Interactive elements only (terse flat list by default)
-  -v            Verbose — full indented tree with props (use with -i)
+  -f            Full — indented tree with props and children (use with -i)
+  -V            Viewport — only elements visible in current viewport
   -c            Compact — remove empty structural elements
   -C            Cursor-interactive — detect divs with cursor:pointer,
                 onclick, tabindex, data-action (missed by ARIA tree)

package/src/snapshot.ts

@@ -31,8 +31,9 @@ const INTERACTIVE_ROLES = new Set([
 
 interface SnapshotOptions {
   interactive?: boolean;  // -i: only interactive elements (terse flat list by default)
-  verbose?: boolean;      // -v: full indented ARIA tree with props/children (overrides -i terse default)
+  full?: boolean;         // -f: full indented ARIA tree with props/children (overrides -i terse default)
   compact?: boolean;      // -c: remove empty structural elements
+  viewport?: boolean;     // -V: only elements visible in current viewport
   depth?: number;         // -d N: limit tree depth
   selector?: string;      // -s SEL: scope to CSS selector
   cursor?: boolean;       // -C: detect cursor-interactive elements (divs with cursor:pointer, onclick, tabindex)
@@ -73,9 +74,13 @@ export function parseSnapshotArgs(args: string[]): SnapshotOptions {
       case '--compact':
         opts.compact = true;
         break;
-      case '-v':
-      case '--verbose':
-        opts.verbose = true;
+      case '-f':
+      case '--full':
+        opts.full = true;
+        break;
+      case '-V':
+      case '--viewport':
+        opts.viewport = true;
         break;
       case '-C':
       case '--cursor':
@@ -422,8 +427,8 @@ export async function handleSnapshot(
     refMap.set(ref, locator);
 
     // Format output line
-    // -i without -v: terse flat list (no indent, no props, no children)
-    const terse = opts.interactive && !opts.verbose;
+    // -i without -f: terse flat list (no indent, no props, no children)
+    const terse = opts.interactive && !opts.full;
     let outputLine: string;
     if (terse) {
       outputLine = `@${ref} [${node.role}]`;
@@ -441,6 +446,36 @@ export async function handleSnapshot(
     output.push(outputLine);
   }
 
+  // Viewport filter: remove elements below the visible viewport
+  if (opts.viewport) {
+    const vp = page.viewportSize();
+    if (vp) {
+      const toRemove = new Set<string>();
+      await Promise.all(
+        Array.from(refMap.entries()).map(async ([ref, loc]) => {
+          try {
+            const box = await loc.boundingBox({ timeout: 500 });
+            if (!box || box.y >= vp.height || box.y + box.height <= 0) {
+              toRemove.add(ref);
+            }
+          } catch {
+            toRemove.add(ref);
+          }
+        })
+      );
+      for (const ref of toRemove) {
+        refMap.delete(ref);
+      }
+      // Remove output lines for filtered refs
+      for (let i = output.length - 1; i >= 0; i--) {
+        const match = output[i].match(/@(e\d+)/);
+        if (match && toRemove.has(match[1])) {
+          output.splice(i, 1);
+        }
+      }
+    }
+  }
+
   // Cursor-interactive detection: supplement ARIA tree with DOM-level scan
   if (opts.cursor) {
     const result = await appendCursorElements(evalCtx, locatorRoot, opts, output, refMap, refCounter, bm);