@abbox/inspector 0.4.8 → 0.4.10

package/dist/host/client-bridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-bridge.d.ts","sourceRoot":"","sources":["../../src/host/client-bridge.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,sBAAsB,GAC9B,eAAe,CAyEjB"}
+{"version":3,"file":"client-bridge.d.ts","sourceRoot":"","sources":["../../src/host/client-bridge.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,sBAAsB,GAC9B,eAAe,CAqHjB"}

package/dist/host/client-bridge.js

@@ -2,15 +2,51 @@ import { ABBBOX_INSPECTOR_CHANNEL, PROTOCOL_VERSION, } from "../protocol.js";
 import { createInspectorRuntime } from "../runtime/inspector.js";
 import { withLocalhostAliases } from "./origin-aliases.js";
 import { validateIncomingMessage } from "./validate.js";
+// Only available in browser context
+let addDebugLog = () => { };
+if (typeof window !== "undefined") {
+    import("../runtime/overlay.js").then((m) => {
+        addDebugLog = m.addDebugLog;
+    });
+}
 export function createInspectorClient(options) {
     const win = options.window ?? globalThis.window;
     const doc = options.document ?? win.document;
     const allowedOrigins = withLocalhostAliases(options.allowedHostOrigins);
+    addDebugLog(`Client init: sessionId=${options.sessionId}`);
+    addDebugLog(`Allowed origins: ${allowedOrigins.join(", ")}`);
+    addDebugLog(`Window href: ${win.location.href}`);
+    addDebugLog(`Parent href: ${win.parent?.location?.href ?? "N/A"}`);
     const send = (message) => {
-        if (!win.parent || win.parent === win)
+        if (!win.parent || win.parent === win) {
+            addDebugLog(`send() skipped: parent=${!!win.parent}`);
             return;
+        }
+        let sent = false;
+        // Try each allowed origin
         for (const targetOrigin of allowedOrigins) {
-            win.parent.postMessage(message, targetOrigin);
+            try {
+                addDebugLog(`→ ${message.type} on ${targetOrigin}`);
+                win.parent.postMessage(message, targetOrigin);
+                sent = true;
+                addDebugLog(`✓ ${message.type} sent`);
+                break;
+            }
+            catch (err) {
+                addDebugLog(`✗ ${targetOrigin}: ${String(err).slice(0, 40)}`);
+            }
+        }
+        // If all allowed origins failed, try wildcard
+        if (!sent) {
+            try {
+                addDebugLog(`→ ${message.type} on wildcard`);
+                win.parent.postMessage(message, "*");
+                sent = true;
+                addDebugLog(`✓ ${message.type} sent via *`);
+            }
+            catch (err) {
+                addDebugLog(`✗ Wildcard: ${String(err).slice(0, 40)}`);
+            }
         }
     };
     const base = () => ({
@@ -47,15 +83,25 @@ export function createInspectorClient(options) {
             sessionId: options.sessionId,
             allowedOrigins,
         });
-        if (!msg)
+        if (!msg) {
+            addDebugLog(`Message rejected from ${event.origin}`);
             return;
-        if (msg.type === "INSPECTOR_HOST_HELLO")
+        }
+        addDebugLog(`← Received: ${msg.type}`);
+        if (msg.type === "INSPECTOR_HOST_HELLO") {
+            addDebugLog(`  Sending INSPECTOR_READY`);
             sendReady();
-        if (msg.type === "INSPECTOR_ENABLE")
+        }
+        if (msg.type === "INSPECTOR_ENABLE") {
+            addDebugLog(`  Enabling inspector runtime`);
             runtime.enable();
-        if (msg.type === "INSPECTOR_DISABLE")
+        }
+        if (msg.type === "INSPECTOR_DISABLE") {
+            addDebugLog(`  Disabling inspector runtime`);
             runtime.disable();
+        }
         if (msg.type === "APPLY_CHANGE_MARKERS") {
+            addDebugLog(`  Applying ${msg.markers.length} change markers`);
             runtime.setChangeMarkers(msg.markers);
         }
     };

package/dist/host/validate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../src/host/validate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAsB,MAAM,gBAAgB,CAAC;AAE3E,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,eAAe,GACvB,gBAAgB,GAAG,IAAI,CAKzB;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,gBAAgB,EACzB,YAAY,EAAE,MAAM,GACnB,IAAI,CAEN"}
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../src/host/validate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAsB,MAAM,gBAAgB,CAAC;AAE3E,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,eAAe,GACvB,gBAAgB,GAAG,IAAI,CAKzB;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,gBAAgB,EACzB,YAAY,EAAE,MAAM,GACnB,IAAI,CAoBN"}

package/dist/host/validate.js

@@ -9,5 +9,25 @@ export function validateIncomingMessage(data, origin, options) {
     return data;
 }
 export function postToTarget(target, message, targetOrigin) {
-    target.postMessage(message, targetOrigin);
+    try {
+        target.postMessage(message, targetOrigin);
+    }
+    catch (err) {
+        // If postMessage fails (e.g., origin mismatch with localhost vs 127.0.0.1),
+        // try common alternative origins
+        const fallbackOrigins = [
+            targetOrigin.replace("://localhost", "://127.0.0.1"),
+            targetOrigin.replace("://127.0.0.1", "://localhost"),
+            "*",
+        ];
+        for (const origin of fallbackOrigins) {
+            try {
+                target.postMessage(message, origin);
+                return;
+            }
+            catch {
+                // Continue to next fallback
+            }
+        }
+    }
 }

package/dist/react/AbboxInspectorBoot.d.ts

@@ -1,3 +1,12 @@
-/** Mount once in the root layout so the Viewer iframe can connect via `abboxSession`. */
-export declare function AbboxInspectorBoot(): null;
+export type AbboxInspectorBootProps = {
+    /** Search params from Next.js useSearchParams (for RSC environments).
+     * Required in Next.js 13+ RSC where window.location.search may be empty.
+     * Pass Object.fromEntries(useSearchParams()) from your layout.
+     */
+    searchParams?: Record<string, string | string[]>;
+};
+/** Mount once in the root layout so the Viewer iframe can connect via `abboxSession`.
+ * In Next.js 13+ RSC, pass searchParams prop from useSearchParams() in your layout.
+ */
+export declare function AbboxInspectorBoot(props?: AbboxInspectorBootProps): null;
 //# sourceMappingURL=AbboxInspectorBoot.d.ts.map

package/dist/react/AbboxInspectorBoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbboxInspectorBoot.d.ts","sourceRoot":"","sources":["../../src/react/AbboxInspectorBoot.tsx"],"names":[],"mappings":"AAKA,yFAAyF;AACzF,wBAAgB,kBAAkB,SAKjC"}
+{"version":3,"file":"AbboxInspectorBoot.d.ts","sourceRoot":"","sources":["../../src/react/AbboxInspectorBoot.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;CAClD,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,uBAAuB,QAiBjE"}

package/dist/react/AbboxInspectorBoot.js

@@ -1,10 +1,20 @@
 "use client";
 import { useEffect } from "react";
 import { bootstrapInspectorPreview } from "../runtime/bootstrap.js";
-/** Mount once in the root layout so the Viewer iframe can connect via `abboxSession`. */
-export function AbboxInspectorBoot() {
+/** Mount once in the root layout so the Viewer iframe can connect via `abboxSession`.
+ * In Next.js 13+ RSC, pass searchParams prop from useSearchParams() in your layout.
+ */
+export function AbboxInspectorBoot(props) {
     useEffect(() => {
-        bootstrapInspectorPreview();
-    }, []);
+        // Convert searchParams to URLSearchParams if provided
+        let searchParams;
+        if (props?.searchParams) {
+            searchParams = new URLSearchParams(Object.entries(props.searchParams).map(([k, v]) => [
+                k,
+                Array.isArray(v) ? v[0] : v,
+            ]));
+        }
+        bootstrapInspectorPreview({ searchParams });
+    }, [props?.searchParams]);
     return null;
 }

package/dist/runtime/bootstrap.d.ts

@@ -1,6 +1,7 @@
 export type BootstrapOptions = {
     sessionId?: string;
     allowedHostOrigins?: string[];
+    searchParams?: URLSearchParams | Record<string, string>;
 };
 /**
  * Entry for instrumented apps. Activates when the build baked an authorized

package/dist/runtime/bootstrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap.ts"],"names":[],"mappings":"AAuCA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B,CAAC;AA8CF;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gBAAqB,GAC7B,IAAI,CAyCN;AAED,4CAA4C;AAC5C,wBAAgB,+BAA+B,IAAI,IAAI,CAMtD"}
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap.ts"],"names":[],"mappings":"AAuCA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzD,CAAC;AA8CF;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gBAAqB,GAC7B,IAAI,CAiDN;AAED,4CAA4C;AAC5C,wBAAgB,+BAA+B,IAAI,IAAI,CAMtD"}

package/dist/runtime/bootstrap.js

@@ -72,7 +72,16 @@ export function bootstrapInspectorPreview(options = {}) {
     if (!isAbboxInspectorRuntimeEnabled())
         return;
     const win = window;
-    const params = new URLSearchParams(win.location.search);
+    // In Next.js 13+ RSC, window.location.search may be empty. Fallback to passed searchParams.
+    let params;
+    if (options.searchParams) {
+        params = options.searchParams instanceof URLSearchParams
+            ? options.searchParams
+            : new URLSearchParams(options.searchParams);
+    }
+    else {
+        params = new URLSearchParams(win.location.search);
+    }
     const sessionFromUrl = params.get("abboxSession");
     const hostParam = params.get("abboxHostOrigin");
     if (!sessionFromUrl) {

package/dist/runtime/inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAgBxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CA8NlB"}
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAkBxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CA0OlB"}

package/dist/runtime/inspector.js

@@ -1,11 +1,12 @@
 import { runtimeElementRefFor } from "./element-ref.js";
 import { extractMetadata, findSourceLocation, sourceKeyFor, sourceMappingStatus, } from "./metadata.js";
-import { createOverlay, hideHighlight, positionHighlight, rectForElement, renderChangeMarkers, } from "./overlay.js";
+import { createOverlay, hideHighlight, hideSelectedHighlight, positionHighlight, positionSelectedHighlight, rectForElement, renderChangeMarkers, } from "./overlay.js";
 export function createInspectorRuntime(options) {
     const { document: doc, window: win } = options;
     const overlay = createOverlay(doc);
     let enabled = false;
     let hovered = null;
+    let selected = null;
     const refIdToElement = new Map();
     let markers = [];
     let focusedMarkerId = null;
@@ -49,8 +50,12 @@ export function createInspectorRuntime(options) {
         select(target);
     };
     const onScrollOrResize = () => {
-        if (hovered)
+        if (selected) {
+            positionSelectedHighlight(overlay.selectedHighlight, rectForElement(selected));
+        }
+        if (hovered) {
             positionHighlight(overlay.highlight, rectForElement(hovered));
+        }
         if (markers.length) {
             renderChangeMarkers(overlay.markerLayer, markers, (id) => refIdToElement.get(id) ?? null, options.onChangeMarkerSelected);
         }
@@ -76,7 +81,10 @@ export function createInspectorRuntime(options) {
         options.onHover?.(payloadFor(el));
     }
     function select(el) {
+        console.log("[inspector] element selected", el.tagName);
+        selected = el;
         hovered = el;
+        positionSelectedHighlight(overlay.selectedHighlight, rectForElement(el));
         positionHighlight(overlay.highlight, rectForElement(el));
         options.onSelect?.(payloadFor(el));
     }
@@ -125,7 +133,9 @@ export function createInspectorRuntime(options) {
     }
     function clearSelection() {
         hovered = null;
+        selected = null;
         hideHighlight(overlay.highlight);
+        hideSelectedHighlight(overlay.selectedHighlight);
         options.onClear?.();
     }
     win.addEventListener("scroll", onScrollOrResize, true);
@@ -145,6 +155,7 @@ export function createInspectorRuntime(options) {
             teardownListeners();
             hovered = null;
             hideHighlight(overlay.highlight);
+            hideSelectedHighlight(overlay.selectedHighlight);
             clearSelection();
         },
         isEnabled: () => enabled,

package/dist/runtime/overlay.d.ts

@@ -1,12 +1,16 @@
 import type { ChangeMarker, ElementRect } from "../protocol.js";
+export declare function addDebugLog(message: string): void;
 export type OverlayHandles = {
     highlight: HTMLDivElement;
+    selectedHighlight: HTMLDivElement;
     markerLayer: HTMLDivElement;
     destroy: () => void;
 };
 export declare function createOverlay(root: Document): OverlayHandles;
 export declare function positionHighlight(highlight: HTMLDivElement, rect: ElementRect): void;
+export declare function positionSelectedHighlight(selectedHighlight: HTMLDivElement, rect: ElementRect): void;
 export declare function hideHighlight(highlight: HTMLDivElement): void;
+export declare function hideSelectedHighlight(selectedHighlight: HTMLDivElement): void;
 export declare function rectForElement(el: Element): ElementRect;
 export declare function renderChangeMarkers(layer: HTMLDivElement, markers: ChangeMarker[], resolveElement: (refId: string) => Element | null, onSelect?: (changeId: string) => void): void;
 //# sourceMappingURL=overlay.d.ts.map

package/dist/runtime/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAiC5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CA+DN"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUhE,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAM1C;AAiCD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAiD5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,cAAc,EACjC,IAAI,EAAE,WAAW,GAChB,IAAI,CASN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,qBAAqB,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI,CAE7E;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CA+DN"}

package/dist/runtime/overlay.js

@@ -1,12 +1,68 @@
 const HIGHLIGHT_Z = 2147483646;
+const SELECTED_HIGHLIGHT_Z = 2147483643;
 const MARKER_Z = 2147483645;
+// Debug panel for on-screen logging
+let debugPanel = null;
+let debugLogs = [];
+export function addDebugLog(message) {
+    const timestamp = new Date().toLocaleTimeString();
+    const log = `[${timestamp}] ${message}`;
+    debugLogs.push(log);
+    if (debugLogs.length > 20)
+        debugLogs.shift(); // Keep last 20 logs
+    updateDebugPanel();
+}
+function updateDebugPanel() {
+    if (!debugPanel)
+        createDebugPanel();
+    if (debugPanel) {
+        debugPanel.textContent = debugLogs.join("\n");
+    }
+}
+function createDebugPanel() {
+    if (debugPanel)
+        return;
+    debugPanel = document.createElement("div");
+    debugPanel.setAttribute("data-abbox-debug-panel", "true");
+    Object.assign(debugPanel.style, {
+        position: "fixed",
+        bottom: "10px",
+        right: "10px",
+        background: "rgba(0, 0, 0, 0.9)",
+        color: "#0f0",
+        padding: "10px",
+        borderRadius: "4px",
+        fontFamily: "monospace",
+        fontSize: "11px",
+        maxWidth: "400px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        zIndex: "2147483647",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+    });
+    document.body.appendChild(debugPanel);
+}
 export function createOverlay(root) {
+    addDebugLog("Creating overlay elements");
+    const selectedHighlight = root.createElement("div");
+    selectedHighlight.setAttribute("data-abbox-inspector", "selected-highlight");
+    Object.assign(selectedHighlight.style, {
+        position: "fixed",
+        pointerEvents: "none",
+        border: "40px dashed #2563eb",
+        background: "rgba(37, 99, 235, 0.06)",
+        borderRadius: "2px",
+        zIndex: String(SELECTED_HIGHLIGHT_Z),
+        display: "none",
+        boxSizing: "border-box",
+    });
     const highlight = root.createElement("div");
     highlight.setAttribute("data-abbox-inspector", "highlight");
     Object.assign(highlight.style, {
         position: "fixed",
         pointerEvents: "none",
-        border: "2px solid #2563eb",
+        border: "20px solid #2563eb",
         background: "rgba(37, 99, 235, 0.12)",
         borderRadius: "2px",
         zIndex: String(HIGHLIGHT_Z),
@@ -21,11 +77,13 @@ export function createOverlay(root) {
         pointerEvents: "none",
         zIndex: String(MARKER_Z),
     });
-    root.body.append(highlight, markerLayer);
+    root.body.append(selectedHighlight, highlight, markerLayer);
     return {
         highlight,
+        selectedHighlight,
         markerLayer,
         destroy: () => {
+            selectedHighlight.remove();
             highlight.remove();
             markerLayer.remove();
         },
@@ -40,9 +98,22 @@ export function positionHighlight(highlight, rect) {
         height: `${rect.height}px`,
     });
 }
+export function positionSelectedHighlight(selectedHighlight, rect) {
+    addDebugLog(`Selected: ${rect.width}×${rect.height} at ${Math.round(rect.x)},${Math.round(rect.y)}`);
+    Object.assign(selectedHighlight.style, {
+        display: "block",
+        left: `${rect.x}px`,
+        top: `${rect.y}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+    });
+}
 export function hideHighlight(highlight) {
     highlight.style.display = "none";
 }
+export function hideSelectedHighlight(selectedHighlight) {
+    selectedHighlight.style.display = "none";
+}
 export function rectForElement(el) {
     const r = el.getBoundingClientRect();
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "publishConfig": {
     "access": "public"
   },
@@ -82,12 +82,13 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^19.3.0",
-    "react": "^19.3.0",
     "@biomejs/biome": "2.5.15",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.20.5",
+    "@types/react": "^19.3.0",
     "happy-dom": "^20.0.10",
+    "next": "^16.4.3",
+    "react": "^19.3.0",
     "typescript": "^5.7.3",
     "vitest": "^5.0.4"
   }