@abbox/inspector 0.4.9 → 0.4.11

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":"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,CA2FjB"}

package/dist/host/client-bridge.js

@@ -9,8 +9,26 @@ export function createInspectorClient(options) {
     const send = (message) => {
         if (!win.parent || win.parent === win)
             return;
+        let sent = false;
+        // Try each allowed origin
         for (const targetOrigin of allowedOrigins) {
-            win.parent.postMessage(message, targetOrigin);
+            try {
+                win.parent.postMessage(message, targetOrigin);
+                sent = true;
+                break;
+            }
+            catch (err) {
+                // Try next origin
+            }
+        }
+        // If all allowed origins failed, try wildcard
+        if (!sent) {
+            try {
+                win.parent.postMessage(message, "*");
+            }
+            catch (err) {
+                // Give up silently
+            }
         }
     };
     const base = () => ({

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,CA6BN"}

package/dist/host/validate.js

@@ -9,5 +9,32 @@ export function validateIncomingMessage(data, origin, options) {
     return data;
 }
 export function postToTarget(target, message, targetOrigin) {
-    target.postMessage(message, targetOrigin);
+    // Try primary origin first
+    try {
+        target.postMessage(message, targetOrigin);
+        return;
+    }
+    catch {
+        // Silently fail and try fallback
+    }
+    // Try localhost/127.0.0.1 variant
+    const variant = targetOrigin
+        .replace("://localhost", "://127.0.0.1")
+        .replace("://127.0.0.1", "://localhost");
+    if (variant !== targetOrigin) {
+        try {
+            target.postMessage(message, variant);
+            return;
+        }
+        catch {
+            // Silently fail and try wildcard
+        }
+    }
+    // Last resort: wildcard (bypasses origin check)
+    try {
+        target.postMessage(message, "*");
+    }
+    catch {
+        // Give up silently
+    }
 }

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,15 @@
 import type { ChangeMarker, ElementRect } from "../protocol.js";
 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;AAMhE,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,26 @@
 const HIGHLIGHT_Z = 2147483646;
+const SELECTED_HIGHLIGHT_Z = 2147483643;
 const MARKER_Z = 2147483645;
 export function createOverlay(root) {
+    console.log("[inspector] creating overlay");
+    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 +35,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 +56,22 @@ export function positionHighlight(highlight, rect) {
         height: `${rect.height}px`,
     });
 }
+export function positionSelectedHighlight(selectedHighlight, rect) {
+    console.log("[inspector] positioning selected highlight at", rect);
+    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.9",
+  "version": "0.4.11",
   "publishConfig": {
     "access": "public"
   },