@browserbridge/bbx 1.0.0 → 1.0.1

package/skills/browser-bridge/references/tailwind.md

@@ -6,11 +6,11 @@
 
 Tailwind arbitrary-value classes use `[]` which are invalid in CSS selectors:
 
-| Class in HTML | ❌ Raw selector | ✅ Escaped selector |
-|---|---|---|
-| `top-[30px]` | `.top-[30px]` | `.top-\[30px\]` |
-| `bg-[#f00]` | `.bg-[#f00]` | `.bg-\[\#f00\]` |
-| `w-[calc(100%-2rem)]` | crashes | `.w-\[calc\(100\%-2rem\)\]` |
+| Class in HTML         | ❌ Raw selector | ✅ Escaped selector         |
+| --------------------- | --------------- | --------------------------- |
+| `top-[30px]`          | `.top-[30px]`   | `.top-\[30px\]`             |
+| `bg-[#f00]`           | `.bg-[#f00]`    | `.bg-\[\#f00\]`             |
+| `w-[calc(100%-2rem)]` | crashes         | `.w-\[calc\(100\%-2rem\)\]` |
 
 **Bridge auto-escapes** Tailwind brackets in `dom.query` selectors. But for `page.evaluate` or `dom.wait_for`, escape manually or avoid class-based selectors entirely.
 
@@ -37,6 +37,7 @@ bbx styles el_abc 'display,align-items,gap,padding,background-color,border-radiu
 ```
 
 Key patterns:
+
 - **Layout**: `styles.get_computed` with `display, flex-direction, gap, grid-template-columns`
 - **Spacing**: `layout.get_box_model` - gives padding/margin/border as numbers
 - **Colors**: `styles.get_computed` with `background-color, color, border-color`
@@ -75,9 +76,9 @@ Default Tailwind breakpoints: `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280p
 
 ## Common Tailwind Anti-Patterns
 
-| Anti-pattern | Cost | Fix |
-|---|---|---|
-| Selecting by Tailwind class `.flex.items-center` | Fragile, breaks on refactor | `dom.find_by_role` or `dom.find_by_text` |
-| Parsing class string to infer styles | ~500 tok wasted | `styles.get_computed` with property list |
-| Patching by adding Tailwind classes | Won't work (classes need build) | `patch.apply_styles` with CSS properties |
-| Using `!important` in patches | Unnecessary | Inline styles already beat utilities |
+| Anti-pattern                                     | Cost                            | Fix                                      |
+| ------------------------------------------------ | ------------------------------- | ---------------------------------------- |
+| Selecting by Tailwind class `.flex.items-center` | Fragile, breaks on refactor     | `dom.find_by_role` or `dom.find_by_text` |
+| Parsing class string to infer styles             | ~500 tok wasted                 | `styles.get_computed` with property list |
+| Patching by adding Tailwind classes              | Won't work (classes need build) | `patch.apply_styles` with CSS properties |
+| Using `!important` in patches                    | Unnecessary                     | Inline styles already beat utilities     |

package/skills/browser-bridge/references/token-efficiency.md

@@ -2,11 +2,11 @@
 
 ## Budget Presets
 
-| Preset | maxNodes | maxDepth | textBudget | Use When |
-|--------|----------|----------|------------|----------|
-| quick | 5 | 2 | 300 | Checking one element or confirming state |
-| normal | 25 | 4 | 600 | General inspection (default) |
-| deep | 100 | 8 | 2000 | Complex nested components |
+| Preset | maxNodes | maxDepth | textBudget | Use When                                 |
+| ------ | -------- | -------- | ---------- | ---------------------------------------- |
+| quick  | 5        | 2        | 300        | Checking one element or confirming state |
+| normal | 25       | 4        | 600        | General inspection (default)             |
+| deep   | 100      | 8        | 2000       | Complex nested components                |
 
 Always start at **quick** or **normal**; widen only if the result indicates truncation.
 
@@ -51,23 +51,23 @@ Omitting allowlists or leaving the text budget wide open often returns 3–5× t
 
 ## Anti-Patterns (Token Waste)
 
-| Pattern | Cost | Fix |
-|---------|------|-----|
-| `dom.query` on `body` with no budget | ~2000 tok | Use specific selector + quick budget |
-| Screenshot before structured read | ~1500 tok wasted | Always `dom.query` or `styles.get_computed` first |
-| Re-querying DOM for same element | ~500 tok/call | Reuse `elementRef` from prior result |
-| Full-page screenshot | ~3000 tok | Use `screenshot.capture_element`, or `screenshot.capture_region` with a tight rect |
-| Requesting all computed styles | ~800 tok | Set `properties` list (usually 3–8 props) |
-| Multiple CLI calls for independent reads | overhead/call | Use `batch` command |
-| Guessing selectors for known labels | ~300 tok wasted/try | Use `dom.find_by_text` or `dom.find_by_role` |
-| Polling page state with repeated queries | ~500 tok/poll | Use `dom.wait_for` (single call, waits async) |
-| Inspecting DOM to read app state | ~800 tok | Use `page.evaluate` to read JS directly |
-| Re-querying after HMR without waiting | ~500 tok stale | `dom.wait_for` first, then query |
-| Separate call to verify a patch | ~500 tok wasted | Set `verify: true` on `patch.apply_styles` / `patch.apply_dom` to get computed result inline |
-| `dom.query` on body for page text | ~2000 tok | Use `page.get_text` (extracts innerText directly) |
-| Guessing interactive elements from DOM | ~600 tok/try | Use `dom.get_accessibility_tree` for semantic roles |
-| Fetching network via evaluate hacks | ~400 tok | Use `page.get_network` (auto-interceptor) |
-| Full a11y tree with no limits | ~3000 tok | Set `maxNodes` ≤ 50, `maxDepth` ≤ 4 |
+| Pattern                                  | Cost                | Fix                                                                                          |
+| ---------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------- |
+| `dom.query` on `body` with no budget     | ~2000 tok           | Use specific selector + quick budget                                                         |
+| Screenshot before structured read        | ~1500 tok wasted    | Always `dom.query` or `styles.get_computed` first                                            |
+| Re-querying DOM for same element         | ~500 tok/call       | Reuse `elementRef` from prior result                                                         |
+| Full-page screenshot                     | ~3000 tok           | Use `screenshot.capture_element`, or `screenshot.capture_region` with a tight rect           |
+| Requesting all computed styles           | ~800 tok            | Set `properties` list (usually 3–8 props)                                                    |
+| Multiple CLI calls for independent reads | overhead/call       | Use `batch` command                                                                          |
+| Guessing selectors for known labels      | ~300 tok wasted/try | Use `dom.find_by_text` or `dom.find_by_role`                                                 |
+| Polling page state with repeated queries | ~500 tok/poll       | Use `dom.wait_for` (single call, waits async)                                                |
+| Inspecting DOM to read app state         | ~800 tok            | Use `page.evaluate` to read JS directly                                                      |
+| Re-querying after HMR without waiting    | ~500 tok stale      | `dom.wait_for` first, then query                                                             |
+| Separate call to verify a patch          | ~500 tok wasted     | Set `verify: true` on `patch.apply_styles` / `patch.apply_dom` to get computed result inline |
+| `dom.query` on body for page text        | ~2000 tok           | Use `page.get_text` (extracts innerText directly)                                            |
+| Guessing interactive elements from DOM   | ~600 tok/try        | Use `dom.get_accessibility_tree` for semantic roles                                          |
+| Fetching network via evaluate hacks      | ~400 tok            | Use `page.get_network` (auto-interceptor)                                                    |
+| Full a11y tree with no limits            | ~3000 tok           | Set `maxNodes` ≤ 50, `maxDepth` ≤ 4                                                          |
 
 ## Efficient Loop
 
@@ -162,6 +162,7 @@ bbx eval 'module.hot?.status?.()'            # check HMR status (webpack)
 ## Parent-Agent Response Policy
 
 The subagent should return:
+
 - What was inspected (selector or elementRef)
 - What changed (if patching)
 - Whether it answers the question

package/skills/browser-bridge/references/ui-workflows.md

@@ -14,6 +14,7 @@ Use when a dev server is already running and you want to prove a fix rendered.
 8. `patch.rollback`
 
 Acceptance:
+
 - target element renders with expected layout or styles
 - no new console errors after HMR
 - temporary patch is rolled back
@@ -30,6 +31,7 @@ Use when a submission flow fails silently or the UI state is inconsistent.
 6. `dom.query` on the resulting panel or message
 
 Acceptance:
+
 - request status and failing endpoint are identified
 - visible error or success state matches the network result
 - console exceptions are ruled in or out
@@ -47,6 +49,7 @@ Use when comparing the live UI to an expected layout or visual spec.
 7. `patch.rollback`
 
 Acceptance:
+
 - the live patch proves the intended fix
 - source implementation matches the validated patch
 - no patch is left active
@@ -64,6 +67,7 @@ Use when a component only breaks at a specific breakpoint.
 7. `viewport.resize` with `reset: true`
 
 Acceptance:
+
 - the target breakpoint is reproduced
 - geometry and style regressions are confirmed without a full screenshot
 - viewport override is reset
@@ -73,18 +77,21 @@ Acceptance:
 Use when transient states matter.
 
 Hover:
+
 1. `dom.find_by_text` or `dom.find_by_role`
 2. `input.hover`
 3. `dom.query` for tooltip or menu
 4. `styles.get_computed`
 
 Drag:
+
 1. `dom.query` for source and destination
 2. `input.drag`
 3. `dom.wait_for`
 4. `dom.query` to verify order or placement
 
 Acceptance:
+
 - transient state appears while the interaction is active
 - DOM and layout confirm the intended state change
 
@@ -97,6 +104,7 @@ Use when semantic navigation matters more than CSS selectors.
 3. `dom.get_accessibility_tree` only if role discovery is insufficient
 
 Acceptance:
+
 - expected interactive roles are present
 - accessible names match the UI copy
 - the full accessibility tree is only used when lighter reads fail

package/packages/extension/ui/offscreen.html

@@ -1,6 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <body>
-    <script type="module" src="./offscreen.js"></script>
-  </body>
-</html>

package/packages/extension/ui/offscreen.js

@@ -1,61 +0,0 @@
-// @ts-check
-
-/**
- * @typedef {{
- *   type?: string,
- *   image?: string,
- *   rect?: { x: number, y: number, width: number, height: number }
- * }} CropMessage
- */
-
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-  if (message?.type !== 'bridge.crop-image') {
-    return false;
-  }
-
-  const typedMessage = /** @type {CropMessage} */ (message);
-  crop(typedMessage.image || '', typedMessage.rect || { x: 0, y: 0, width: 1, height: 1 }).then(sendResponse);
-  return true;
-});
-
-/**
- * @param {string} imageUrl
- * @param {{ x: number, y: number, width: number, height: number }} rect
- * @returns {Promise<string>}
- */
-async function crop(imageUrl, rect) {
-  const response = await fetch(imageUrl);
-  const blob = await response.blob();
-  const bitmap = await createImageBitmap(blob);
-
-  // Clamp crop rect to bitmap bounds to prevent out-of-bounds draws
-  const x = Math.max(0, Math.min(rect.x, bitmap.width - 1));
-  const y = Math.max(0, Math.min(rect.y, bitmap.height - 1));
-  const w = Math.max(1, Math.min(rect.width, bitmap.width - x));
-  const h = Math.max(1, Math.min(rect.height, bitmap.height - y));
-
-  const canvas = new OffscreenCanvas(w, h);
-  const context = canvas.getContext('2d');
-  if (!context) {
-    throw new Error('Failed to create 2D offscreen canvas context.');
-  }
-  context.drawImage(bitmap, x, y, w, h, 0, 0, w, h);
-  bitmap.close();
-  const croppedBlob = await canvas.convertToBlob({ type: 'image/png' });
-  return blobToDataUrl(croppedBlob);
-}
-
-/**
- * @param {Blob} blob
- * @returns {Promise<string>}
- */
-async function blobToDataUrl(blob) {
-  const arrayBuffer = await blob.arrayBuffer();
-  const bytes = new Uint8Array(arrayBuffer);
-  const chunks = [];
-  for (let i = 0; i < bytes.length; i += 8192) {
-    chunks.push(String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + 8192))));
-  }
-  const base64 = btoa(chunks.join(''));
-  return `data:${blob.type};base64,${base64}`;
-}