@abbox/inspector 0.0.0-stage → 0.2.1

package/dist/next/preview-env.d.ts

@@ -0,0 +1,8 @@
+/**
+ * When true, Inspector instrumentation, CSP frame-ancestors, and client bootstrap are allowed.
+ * Production Vercel deploys (VERCEL_ENV=production) stay off unless ABBBOX_INSPECTOR=1 is set explicitly.
+ */
+export declare function isAbboxInspectorBuildEnabled(): boolean;
+/** Client-side: Inspector may connect to the Viewer iframe host. */
+export declare function isAbboxInspectorRuntimeEnabled(): boolean;
+//# sourceMappingURL=preview-env.d.ts.map

package/dist/next/preview-env.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-env.d.ts","sourceRoot":"","sources":["../../src/next/preview-env.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,OAAO,CAItD;AAED,oEAAoE;AACpE,wBAAgB,8BAA8B,IAAI,OAAO,CAOxD"}

package/dist/next/preview-env.js

@@ -0,0 +1,22 @@
+/**
+ * When true, Inspector instrumentation, CSP frame-ancestors, and client bootstrap are allowed.
+ * Production Vercel deploys (VERCEL_ENV=production) stay off unless ABBBOX_INSPECTOR=1 is set explicitly.
+ */
+export function isAbboxInspectorBuildEnabled() {
+    if (process.env.ABBBOX_INSPECTOR === "1")
+        return true;
+    if (process.env.VERCEL_ENV === "preview")
+        return true;
+    return false;
+}
+/** Client-side: Inspector may connect to the Viewer iframe host. */
+export function isAbboxInspectorRuntimeEnabled() {
+    if (process.env.NEXT_PUBLIC_ABBOX_INSPECTOR === "1")
+        return true;
+    if (process.env.VERCEL_ENV === "preview")
+        return true;
+    if (typeof process.env.NEXT_PUBLIC_VERCEL_ENV === "string") {
+        return process.env.NEXT_PUBLIC_VERCEL_ENV === "preview";
+    }
+    return false;
+}

package/dist/next/webpack-instrumentation.cjs

@@ -0,0 +1,82 @@
+/**
+ * Apply Abbox JSX instrumentation via webpack + babel-loader on selected app sources.
+ * Does not use babel.config.js, so Next.js keeps SWC (and next/font) for excluded files
+ * such as app/layout.tsx.
+ */
+const fs = require("node:fs");
+const path = require("node:path");
+const { createRequire } = require("node:module");
+
+const LAYOUT_BASENAMES = new Set(["layout.tsx", "layout.jsx"]);
+
+function resolveInspectorBabelPlugin(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  try {
+    return req.resolve("@abbox/inspector/babel");
+  } catch {
+    return req.resolve("abbox-inspector/babel");
+  }
+}
+
+function resolveBabelLoader(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  return req.resolve("babel-loader");
+}
+
+function resolveNextBabelPreset(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  return req.resolve("next/babel");
+}
+
+function collectIncludeDirs(rootDir) {
+  return ["app", "components", "src", "pages"]
+    .map((segment) => path.join(rootDir, segment))
+    .filter((dir) => fs.existsSync(dir));
+}
+
+function isRootLayoutResource(resourcePath) {
+  const base = path.basename(resourcePath);
+  if (!LAYOUT_BASENAMES.has(base)) return false;
+  const parent = path.basename(path.dirname(resourcePath));
+  return parent === "app" || parent === "src/app";
+}
+
+/**
+ * @param {import('webpack').Configuration} webpackConfig
+ * @param {{ dir: string }} options
+ */
+function applyAbboxWebpackInstrumentation(webpackConfig, options) {
+  const rootDir = options.dir ?? process.cwd();
+  const pluginPath = resolveInspectorBabelPlugin(rootDir);
+  const babelLoader = resolveBabelLoader(rootDir);
+  const nextBabel = resolveNextBabelPreset(rootDir);
+  const includeDirs = collectIncludeDirs(rootDir);
+
+  if (includeDirs.length === 0) {
+    return webpackConfig;
+  }
+
+  const rule = {
+    test: /\.(tsx|jsx)$/,
+    include: (resourcePath) =>
+      includeDirs.some((dir) => resourcePath.startsWith(dir)) &&
+      !isRootLayoutResource(resourcePath),
+    exclude: [/node_modules/],
+    use: {
+      loader: babelLoader,
+      options: {
+        babelrc: false,
+        configFile: false,
+        presets: [nextBabel],
+        plugins: [[pluginPath, { rootDir }]],
+      },
+    },
+  };
+
+  webpackConfig.module = webpackConfig.module ?? { rules: [] };
+  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
+  webpackConfig.module.rules.unshift(rule);
+  return webpackConfig;
+}
+
+module.exports = { applyAbboxWebpackInstrumentation, isRootLayoutResource };

package/dist/next/with-abbox-inspector.d.ts

@@ -0,0 +1,26 @@
+export type NextConfigLike = {
+    env?: Record<string, string | undefined>;
+    headers?: unknown;
+    webpack?: (config: Record<string, unknown>, options: Record<string, unknown>) => Record<string, unknown> | void;
+    transpilePackages?: unknown;
+    [key: string]: unknown;
+};
+export type WithAbboxInspectorOptions = {
+    /** When false, returns config unchanged (default: ABBBOX_INSPECTOR=1). */
+    enabled?: boolean;
+    /**
+     * Origins allowed to embed this app in an iframe (Abbox Viewer).
+     * Defaults to common local Viewer ports.
+     */
+    frameAncestors?: string[];
+};
+export declare const DEFAULT_VIEWER_FRAME_ANCESTORS: string[];
+/**
+ * Merge Next.js config for local Abbox Live Preview: iframe embedding headers
+ * and public env flag for client bootstrap.
+ *
+ * JSX instrumentation uses a webpack babel-loader rule (no root babel.config.js),
+ * so `next/font` in app/layout.tsx can keep using SWC.
+ */
+export declare function withAbboxInspector<T>(config: T, options?: WithAbboxInspectorOptions): T;
+//# sourceMappingURL=with-abbox-inspector.d.ts.map

package/dist/next/with-abbox-inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-abbox-inspector.d.ts","sourceRoot":"","sources":["../../src/next/with-abbox-inspector.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,8BAA8B,UAM1C,CAAC;AAOF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,MAAM,EAAE,CAAC,EACT,OAAO,GAAE,yBAA8B,GACtC,CAAC,CA0EH"}

package/dist/next/with-abbox-inspector.js

@@ -0,0 +1,80 @@
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+const require = createRequire(fileURLToPath(import.meta.url));
+import { isAbboxInspectorBuildEnabled } from "./preview-env.js";
+export const DEFAULT_VIEWER_FRAME_ANCESTORS = [
+    "https://viewer.abbox.com",
+    "http://localhost:5173",
+    "http://127.0.0.1:5173",
+    "http://localhost:4173",
+    "http://127.0.0.1:4173",
+];
+function inspectorEnabled(explicit) {
+    if (explicit !== undefined)
+        return explicit;
+    return isAbboxInspectorBuildEnabled();
+}
+/**
+ * Merge Next.js config for local Abbox Live Preview: iframe embedding headers
+ * and public env flag for client bootstrap.
+ *
+ * JSX instrumentation uses a webpack babel-loader rule (no root babel.config.js),
+ * so `next/font` in app/layout.tsx can keep using SWC.
+ */
+export function withAbboxInspector(config, options = {}) {
+    if (!inspectorEnabled(options.enabled)) {
+        return config;
+    }
+    const base = config;
+    const { applyAbboxWebpackInstrumentation } = require("./webpack-instrumentation.cjs");
+    const ancestors = options.frameAncestors ?? DEFAULT_VIEWER_FRAME_ANCESTORS;
+    const csp = `frame-ancestors 'self' ${ancestors.join(" ")}`;
+    const headers = async () => {
+        const existing = typeof base.headers === "function"
+            ? await base.headers()
+            : (base.headers ?? []);
+        return [
+            ...existing,
+            {
+                source: "/:path*",
+                headers: [
+                    {
+                        key: "Content-Security-Policy",
+                        value: csp,
+                    },
+                ],
+            },
+        ];
+    };
+    const transpile = new Set([
+        ...(Array.isArray(base.transpilePackages)
+            ? base.transpilePackages
+            : []),
+        "@abbox/inspector",
+        "abbox-inspector",
+    ]);
+    const userWebpack = base.webpack;
+    const webpack = (webpackConfig, webpackOptions) => {
+        let cfg = webpackConfig;
+        if (typeof userWebpack === "function") {
+            const nextCfg = userWebpack(cfg, webpackOptions);
+            if (nextCfg)
+                cfg = nextCfg;
+        }
+        const dir = typeof webpackOptions.dir === "string"
+            ? webpackOptions.dir
+            : process.cwd();
+        return applyAbboxWebpackInstrumentation(cfg, { dir });
+    };
+    return {
+        ...base,
+        transpilePackages: [...transpile],
+        env: {
+            ...(base.env ?? {}),
+            NEXT_PUBLIC_ABBOX_INSPECTOR: "1",
+            NEXT_PUBLIC_VERCEL_ENV: process.env.VERCEL_ENV ?? "",
+        },
+        headers,
+        webpack,
+    };
+}

package/dist/protocol.d.ts

@@ -0,0 +1,92 @@
+/** Wire protocol between Abbox Viewer (host) and instrumented preview (client). */
+export declare const PROTOCOL_VERSION: 1;
+export declare const ABBBOX_INSPECTOR_CHANNEL: "abbox-inspector";
+export type InspectorMessageBase = {
+    channel: typeof ABBBOX_INSPECTOR_CHANNEL;
+    version: typeof PROTOCOL_VERSION;
+    sessionId: string;
+};
+export type InspectorReadyMessage = InspectorMessageBase & {
+    type: "INSPECTOR_READY";
+    previewUrl: string;
+};
+export type InspectorEnableMessage = InspectorMessageBase & {
+    type: "INSPECTOR_ENABLE";
+};
+export type InspectorDisableMessage = InspectorMessageBase & {
+    type: "INSPECTOR_DISABLE";
+};
+/** Host asks the preview client to resend INSPECTOR_READY (e.g. after iframe load). */
+export type InspectorHostHelloMessage = InspectorMessageBase & {
+    type: "INSPECTOR_HOST_HELLO";
+};
+export type ElementRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type SourceLocation = {
+    /** Project-relative path (no absolute filesystem paths). */
+    file: string;
+    line: number;
+    column: number;
+    /** Raw attribute value when present on DOM. */
+    raw?: string;
+};
+export type SourceMappingStatus = "resolved" | "unresolved" | "partial";
+export type ElementMetadata = {
+    tagName: string;
+    id: string | null;
+    classList: string[];
+    role: string | null;
+    ariaLabel: string | null;
+    textPreview: string | null;
+    attributes: Record<string, string>;
+};
+export type RuntimeElementRef = {
+    /** Stable within a preview session for a given DOM node identity. */
+    id: string;
+    sourceKey: string | null;
+};
+export type ElementHoverPayload = {
+    elementRef: RuntimeElementRef;
+    rect: ElementRect;
+    metadata: ElementMetadata;
+    source: SourceLocation | null;
+    mappingStatus: SourceMappingStatus;
+};
+export type ElementSelectedPayload = ElementHoverPayload;
+export type ElementHoveredMessage = InspectorMessageBase & {
+    type: "ELEMENT_HOVERED";
+    payload: ElementHoverPayload;
+};
+export type ElementSelectedMessage = InspectorMessageBase & {
+    type: "ELEMENT_SELECTED";
+    payload: ElementSelectedPayload;
+};
+export type ElementClearedMessage = InspectorMessageBase & {
+    type: "ELEMENT_CLEARED";
+};
+export type InspectorErrorMessage = InspectorMessageBase & {
+    type: "INSPECTOR_ERROR";
+    code: string;
+    message: string;
+};
+export type ChangeMarkerKind = "mock" | "pr-preview";
+/** Optional overlay markers supplied by the host (diff engine lives outside inspector). */
+export type ChangeMarker = {
+    elementRefId: string;
+    label: string;
+    kind: ChangeMarkerKind;
+    pulse?: boolean;
+};
+export type ApplyChangeMarkersMessage = InspectorMessageBase & {
+    type: "APPLY_CHANGE_MARKERS";
+    markers: ChangeMarker[];
+};
+export type HostToClientMessage = InspectorEnableMessage | InspectorDisableMessage | InspectorHostHelloMessage | ApplyChangeMarkersMessage;
+export type ClientToHostMessage = InspectorReadyMessage | ElementHoveredMessage | ElementSelectedMessage | ElementClearedMessage | InspectorErrorMessage;
+export type InspectorMessage = HostToClientMessage | ClientToHostMessage;
+export declare function isInspectorMessage(value: unknown): value is InspectorMessage;
+//# sourceMappingURL=protocol.d.ts.map

package/dist/protocol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"protocol.d.ts","sourceRoot":"","sources":["../src/protocol.ts"],"names":[],"mappings":"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"}

package/dist/protocol.js

@@ -0,0 +1,12 @@
+/** Wire protocol between Abbox Viewer (host) and instrumented preview (client). */
+export const PROTOCOL_VERSION = 1;
+export const ABBBOX_INSPECTOR_CHANNEL = "abbox-inspector";
+export function isInspectorMessage(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const o = value;
+    return (o.channel === ABBBOX_INSPECTOR_CHANNEL &&
+        o.version === PROTOCOL_VERSION &&
+        typeof o.sessionId === "string" &&
+        typeof o.type === "string");
+}

package/dist/react/AbboxInspectorBoot.d.ts

@@ -0,0 +1,3 @@
+/** Mount once in the root layout so the Viewer iframe can connect via `abboxSession`. */
+export declare function AbboxInspectorBoot(): null;
+//# sourceMappingURL=AbboxInspectorBoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AbboxInspectorBoot.d.ts","sourceRoot":"","sources":["../../src/react/AbboxInspectorBoot.tsx"],"names":[],"mappings":"AAKA,yFAAyF;AACzF,wBAAgB,kBAAkB,SAKjC"}

package/dist/react/AbboxInspectorBoot.js

@@ -0,0 +1,10 @@
+"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() {
+    useEffect(() => {
+        bootstrapInspectorPreview();
+    }, []);
+    return null;
+}

package/dist/runtime/bootstrap.d.ts

@@ -0,0 +1,10 @@
+export type BootstrapOptions = {
+    sessionId?: string;
+    allowedHostOrigins?: string[];
+};
+/**
+ * Entry for instrumented preview apps. Activates when `abboxSession` is in the
+ * URL on authorized preview deployments (Vercel preview or local `dev:abbox`).
+ */
+export declare function bootstrapInspectorPreview(options?: BootstrapOptions): void;
+//# sourceMappingURL=bootstrap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap.ts"],"names":[],"mappings":"AAsBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gBAAqB,GAC7B,IAAI,CAyBN"}

package/dist/runtime/bootstrap.js

@@ -0,0 +1,49 @@
+import { withLocalhostAliases } from "../host/origin-aliases.js";
+import { createInspectorClient } from "../host/client-bridge.js";
+import { isAbboxInspectorRuntimeEnabled } from "../next/preview-env.js";
+/** Viewer origins used when `abboxHostOrigin` is missing from the iframe URL. */
+const DEFAULT_VIEWER_ORIGINS = [
+    "https://viewer.abbox.com",
+    "http://localhost:5173",
+    "http://127.0.0.1:5173",
+    "http://localhost:4173",
+    "http://127.0.0.1:4173",
+];
+function viewerOriginsFromReferrer() {
+    if (typeof document === "undefined" || !document.referrer)
+        return [];
+    try {
+        return [new URL(document.referrer).origin];
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Entry for instrumented preview apps. Activates when `abboxSession` is in the
+ * URL on authorized preview deployments (Vercel preview or local `dev:abbox`).
+ */
+export function bootstrapInspectorPreview(options = {}) {
+    if (typeof window === "undefined")
+        return;
+    if (!isAbboxInspectorRuntimeEnabled())
+        return;
+    const params = new URLSearchParams(window.location.search);
+    const sessionFromUrl = params.get("abboxSession");
+    if (!sessionFromUrl)
+        return;
+    const sessionId = options.sessionId ?? sessionFromUrl ?? "local-dev";
+    const hostParam = params.get("abboxHostOrigin");
+    const allowedHostOrigins = withLocalhostAliases(options.allowedHostOrigins ??
+        (hostParam
+            ? [hostParam]
+            : [
+                ...viewerOriginsFromReferrer(),
+                ...DEFAULT_VIEWER_ORIGINS,
+            ]));
+    const client = createInspectorClient({
+        sessionId,
+        allowedHostOrigins,
+    });
+    client.start();
+}

package/dist/runtime/element-ref.d.ts

@@ -0,0 +1,4 @@
+import type { RuntimeElementRef } from "../protocol.js";
+export declare function runtimeElementRefFor(el: Element, sourceKey: string | null): RuntimeElementRef;
+export declare function resetElementRefCounter(): void;
+//# sourceMappingURL=element-ref.d.ts.map

package/dist/runtime/element-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-ref.d.ts","sourceRoot":"","sources":["../../src/runtime/element-ref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAKxD,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,iBAAiB,CAQnB;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C"}

package/dist/runtime/element-ref.js

@@ -0,0 +1,14 @@
+let counter = 0;
+const weakToId = new WeakMap();
+export function runtimeElementRefFor(el, sourceKey) {
+    let id = weakToId.get(el);
+    if (!id) {
+        counter += 1;
+        id = `el_${counter}`;
+        weakToId.set(el, id);
+    }
+    return { id, sourceKey };
+}
+export function resetElementRefCounter() {
+    counter = 0;
+}

package/dist/runtime/inspector.d.ts

@@ -0,0 +1,18 @@
+import type { ChangeMarker, ElementHoverPayload } from "../protocol.js";
+export type InspectorRuntimeOptions = {
+    document: Document;
+    window: Window;
+    onHover?: (payload: ElementHoverPayload) => void;
+    onSelect?: (payload: ElementHoverPayload) => void;
+    onClear?: () => void;
+};
+export type InspectorRuntime = {
+    enable: () => void;
+    disable: () => void;
+    isEnabled: () => boolean;
+    setChangeMarkers: (markers: ChangeMarker[]) => void;
+    getElementByRefId: (refId: string) => Element | null;
+    destroy: () => void;
+};
+export declare function createInspectorRuntime(options: InspectorRuntimeOptions): InspectorRuntime;
+//# sourceMappingURL=inspector.d.ts.map

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

@@ -0,0 +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;CACtB,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,CAoIlB"}

package/dist/runtime/inspector.js

@@ -0,0 +1,137 @@
+import { runtimeElementRefFor } from "./element-ref.js";
+import { extractMetadata, findSourceLocation, sourceKeyFor, sourceMappingStatus, } from "./metadata.js";
+import { createOverlay, hideHighlight, positionHighlight, 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;
+    const refIdToElement = new Map();
+    let markers = [];
+    let raf = 0;
+    let pendingTarget = null;
+    const teardownListeners = () => {
+        win.removeEventListener("mousemove", onMove, true);
+        win.removeEventListener("click", onClickCapture, true);
+        win.removeEventListener("scroll", onScrollOrResize, true);
+        win.removeEventListener("resize", onScrollOrResize);
+    };
+    const onMove = (event) => {
+        if (!enabled)
+            return;
+        const target = deepestElementAt(doc, event.clientX, event.clientY, event.target);
+        if (!target || !doc.body.contains(target))
+            return;
+        pendingTarget = target;
+        if (raf)
+            return;
+        raf = win.requestAnimationFrame(() => {
+            raf = 0;
+            if (!enabled || !pendingTarget)
+                return;
+            setHover(pendingTarget);
+            pendingTarget = null;
+        });
+    };
+    const onClickCapture = (event) => {
+        if (!enabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const target = deepestElementAt(doc, event.clientX, event.clientY, event.target);
+        if (!target || !doc.body.contains(target))
+            return;
+        select(target);
+    };
+    const onScrollOrResize = () => {
+        if (hovered)
+            positionHighlight(overlay.highlight, rectForElement(hovered));
+        if (markers.length) {
+            renderChangeMarkers(overlay.markerLayer, markers, (id) => refIdToElement.get(id) ?? null);
+        }
+    };
+    function payloadFor(el) {
+        const source = findSourceLocation(el);
+        const sourceKey = sourceKeyFor(source);
+        const elementRef = runtimeElementRefFor(el, sourceKey);
+        refIdToElement.set(elementRef.id, el);
+        return {
+            elementRef,
+            rect: rectForElement(el),
+            metadata: extractMetadata(el),
+            source,
+            mappingStatus: sourceMappingStatus(source),
+        };
+    }
+    function setHover(el) {
+        if (hovered === el)
+            return;
+        hovered = el;
+        positionHighlight(overlay.highlight, rectForElement(el));
+        options.onHover?.(payloadFor(el));
+    }
+    function select(el) {
+        hovered = el;
+        positionHighlight(overlay.highlight, rectForElement(el));
+        options.onSelect?.(payloadFor(el));
+    }
+    function clearSelection() {
+        hovered = null;
+        hideHighlight(overlay.highlight);
+        options.onClear?.();
+    }
+    return {
+        enable: () => {
+            if (enabled)
+                return;
+            enabled = true;
+            win.addEventListener("mousemove", onMove, true);
+            win.addEventListener("click", onClickCapture, true);
+            win.addEventListener("scroll", onScrollOrResize, true);
+            win.addEventListener("resize", onScrollOrResize);
+        },
+        disable: () => {
+            if (!enabled)
+                return;
+            enabled = false;
+            teardownListeners();
+            hovered = null;
+            hideHighlight(overlay.highlight);
+            clearSelection();
+        },
+        isEnabled: () => enabled,
+        setChangeMarkers: (next) => {
+            markers = next;
+            renderChangeMarkers(overlay.markerLayer, markers, (id) => refIdToElement.get(id) ?? null);
+        },
+        getElementByRefId: (id) => refIdToElement.get(id) ?? null,
+        destroy: () => {
+            if (enabled) {
+                enabled = false;
+                teardownListeners();
+            }
+            hovered = null;
+            hideHighlight(overlay.highlight);
+            overlay.destroy();
+            refIdToElement.clear();
+        },
+    };
+}
+function deepestElementAt(doc, x, y, fallbackTarget) {
+    if (typeof doc.elementsFromPoint === "function") {
+        const stack = doc.elementsFromPoint(x, y);
+        for (const node of stack) {
+            if (node instanceof Element) {
+                if (node.closest("[data-abbox-inspector]"))
+                    continue;
+                return node;
+            }
+        }
+    }
+    if (fallbackTarget instanceof Element) {
+        if (fallbackTarget.closest("[data-abbox-inspector]"))
+            return null;
+        return fallbackTarget;
+    }
+    return null;
+}

package/dist/runtime/metadata.d.ts

@@ -0,0 +1,6 @@
+import type { ElementMetadata, SourceLocation, SourceMappingStatus } from "../protocol.js";
+export declare function findSourceLocation(el: Element): SourceLocation | null;
+export declare function sourceMappingStatus(source: SourceLocation | null): SourceMappingStatus;
+export declare function extractMetadata(el: Element): ElementMetadata;
+export declare function sourceKeyFor(source: SourceLocation | null): string | null;
+//# sourceMappingURL=metadata.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../src/runtime/metadata.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAYxB,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAarE;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,GAAG,IAAI,GAC5B,mBAAmB,CAGrB;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,OAAO,GAAG,eAAe,CAgC5D;AAcD,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGzE"}