@abbox/inspector 0.4.16 → 0.4.19

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,CA4EjB"}
+{"version":3,"file":"client-bridge.d.ts","sourceRoot":"","sources":["../../src/host/client-bridge.ts"],"names":[],"mappings":"AAYA,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,CAuFjB"}

package/dist/host/client-bridge.js

@@ -1,5 +1,6 @@
 import { ABBBOX_INSPECTOR_CHANNEL, PROTOCOL_VERSION, } from "../protocol.js";
 import { createInspectorRuntime } from "../runtime/inspector.js";
+import { createRecorder } from "../runtime/recorder.js";
 import { withLocalhostAliases } from "./origin-aliases.js";
 import { validateIncomingMessage } from "./validate.js";
 export function createInspectorClient(options) {
@@ -41,10 +42,12 @@ export function createInspectorClient(options) {
         onChangeMarkerSelected: (changeId) => {
             send({ ...base(), type: "CHANGE_MARKER_SELECTED", changeId });
         },
-        onRouteChange: (path) => {
-            send({ ...base(), type: "ROUTE_CHANGED", path });
+        onRouteChange: (path, href) => {
+            send({ ...base(), type: "ROUTE_CHANGED", path, href });
         },
     });
+    // The last minute of activity, for bug reports from the Viewer.
+    const recorder = createRecorder(win, doc);
     const onMessage = (event) => {
         const msg = validateIncomingMessage(event.data, event.origin, {
             sessionId: options.sessionId,
@@ -61,6 +64,14 @@ export function createInspectorClient(options) {
         if (msg.type === "APPLY_CHANGE_MARKERS") {
             runtime.setChangeMarkers(msg.markers);
         }
+        if (msg.type === "APPLY_STYLE_OVERRIDES") {
+            runtime.applyStyleOverrides(msg.elementRefId, msg.styles);
+        }
+        if (msg.type === "CLEAR_STYLE_OVERRIDES")
+            runtime.clearStyleOverrides();
+        if (msg.type === "REQUEST_RECORDING") {
+            send({ ...base(), type: "RECORDING", steps: recorder.snapshot() });
+        }
     };
     return {
         start: () => {
@@ -75,6 +86,7 @@ export function createInspectorClient(options) {
         },
         stop: () => {
             win.removeEventListener("message", onMessage);
+            recorder.stop();
             runtime.destroy();
         },
     };

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

@@ -1,4 +1,4 @@
-import { type ChangeMarker, type ClientToHostMessage } from "../protocol.js";
+import { type ChangeMarker, type ClientToHostMessage, type RecordedStep } from "../protocol.js";
 export type InspectorHostOptions = {
     sessionId: string;
     /** Origin of the embedded preview (iframe src origin). */
@@ -19,7 +19,8 @@ export type InspectorHostHandlers = {
     onSelect?: (payload: SelectPayload) => void;
     onCleared?: () => void;
     onChangeMarkerSelected?: (changeId: string) => void;
-    onRouteChange?: (path: string) => void;
+    onRouteChange?: (path: string, href?: string) => void;
+    onRecording?: (steps: RecordedStep[]) => void;
     onError?: (code: string, message: string) => void;
 };
 export type InspectorHost = {
@@ -30,6 +31,11 @@ export type InspectorHost = {
     applyChangeMarkers: (markers: ChangeMarker[]) => void;
     /** Ask the preview to resend INSPECTOR_READY (call after iframe load). */
     pingPreview: () => void;
+    /** Ask the preview for its last minute of activity (answered via onRecording). */
+    requestRecording: () => void;
+    /** Live Design tab edits on one element; an empty object restores it. Needs inspector 0.4.18 in the preview. */
+    applyStyleOverrides: (elementRefId: string, styles: Record<string, string>) => void;
+    clearStyleOverrides: () => void;
 };
 export declare function createInspectorHost(options: InspectorHostOptions, handlers: InspectorHostHandlers): InspectorHost;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"host-bridge.d.ts","sourceRoot":"","sources":["../../src/host/host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,mBAAmB,EAGzB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,CACzB,mBAAmB,EACnB;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC,SAAS,CAAC,CAAC;AACb,KAAK,aAAa,GAAG,OAAO,CAC1B,mBAAmB,EACnB;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,CAC7B,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACtD,0EAA0E;IAC1E,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,qBAAqB,GAC9B,aAAa,CAkEf"}
+{"version":3,"file":"host-bridge.d.ts","sourceRoot":"","sources":["../../src/host/host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,mBAAmB,EAGxB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,CACzB,mBAAmB,EACnB;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC,SAAS,CAAC,CAAC;AACb,KAAK,aAAa,GAAG,OAAO,CAC1B,mBAAmB,EACnB;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,CAC7B,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACtD,0EAA0E;IAC1E,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gHAAgH;IAChH,mBAAmB,EAAE,CACnB,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC3B,IAAI,CAAC;IACV,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,qBAAqB,GAC9B,aAAa,CA8Ef"}

package/dist/host/host-bridge.js

@@ -36,7 +36,10 @@ export function createInspectorHost(options, handlers) {
             handlers.onChangeMarkerSelected?.(msg.changeId);
         }
         if (msg.type === "ROUTE_CHANGED") {
-            handlers.onRouteChange?.(msg.path);
+            handlers.onRouteChange?.(msg.path, msg.href);
+        }
+        if (msg.type === "RECORDING") {
+            handlers.onRecording?.(msg.steps);
         }
         if (msg.type === "INSPECTOR_ERROR") {
             handlers.onError?.(msg.code, msg.message);
@@ -58,6 +61,15 @@ export function createInspectorHost(options, handlers) {
         applyChangeMarkers: (markers) => {
             send({ ...base(), type: "APPLY_CHANGE_MARKERS", markers });
         },
+        requestRecording: () => {
+            send({ ...base(), type: "REQUEST_RECORDING" });
+        },
+        applyStyleOverrides: (elementRefId, styles) => {
+            send({ ...base(), type: "APPLY_STYLE_OVERRIDES", elementRefId, styles });
+        },
+        clearStyleOverrides: () => {
+            send({ ...base(), type: "CLEAR_STYLE_OVERRIDES" });
+        },
         pingPreview: () => {
             send({
                 ...base(),

package/dist/protocol.d.ts

@@ -74,6 +74,11 @@ export type ElementHoverPayload = {
     metadata: ElementMetadata;
     source: SourceLocation | null;
     mappingStatus: SourceMappingStatus;
+    /**
+     * Computed styles of a selected element, for the Design tab (CSS property →
+     * value). Sent with selections only; absent from inspectors before 0.4.18.
+     */
+    styles?: Record<string, string>;
 };
 export type ElementSelectedPayload = ElementHoverPayload;
 export type ElementHoveredMessage = InspectorMessageBase & {
@@ -117,17 +122,57 @@ export type ChangeMarkerSelectedMessage = InspectorMessageBase & {
     type: "CHANGE_MARKER_SELECTED";
     changeId: string;
 };
-/** The preview navigated (client-side or full load) to a new path. */
+/** The preview navigated (client-side or full load) to a new path or query. */
 export type RouteChangedMessage = InspectorMessageBase & {
     type: "ROUTE_CHANGED";
     path: string;
+    /** The full address, query included (0.4.19+), so the Viewer can show and restore it. */
+    href?: string;
 };
 export type ApplyChangeMarkersMessage = InspectorMessageBase & {
     type: "APPLY_CHANGE_MARKERS";
     markers: ChangeMarker[];
 };
-export type HostToClientMessage = InspectorEnableMessage | InspectorDisableMessage | InspectorHostHelloMessage | ApplyChangeMarkersMessage;
-export type ClientToHostMessage = InspectorReadyMessage | ElementHoveredMessage | ElementSelectedMessage | ElementClearedMessage | ChangeMarkerSelectedMessage | RouteChangedMessage | InspectorErrorMessage;
+/** One step from the preview's last minute, for bug reports. Never holds field values. */
+export type RecordedStep = {
+    /** Epoch milliseconds. */
+    t: number;
+    kind: "click" | "submit" | "input" | "route" | "scroll" | "error" | "console-error" | "request";
+    route: string;
+    label?: string;
+    /** `data-abbox-src` of the element, linking the step to code. */
+    source?: string;
+    tag?: string;
+    detail?: string;
+    /** Script location of an error, when the browser reports one. */
+    location?: string;
+    method?: string;
+    url?: string;
+    status?: number;
+    durationMs?: number;
+};
+/**
+ * Live style edits from the Design tab: replaces any earlier overrides on the
+ * element; an empty `styles` restores it. Only design properties are applied.
+ */
+export type ApplyStyleOverridesMessage = InspectorMessageBase & {
+    type: "APPLY_STYLE_OVERRIDES";
+    elementRefId: string;
+    styles: Record<string, string>;
+};
+/** Removes every live style edit, e.g. when the Design tab closes. */
+export type ClearStyleOverridesMessage = InspectorMessageBase & {
+    type: "CLEAR_STYLE_OVERRIDES";
+};
+export type RequestRecordingMessage = InspectorMessageBase & {
+    type: "REQUEST_RECORDING";
+};
+export type RecordingMessage = InspectorMessageBase & {
+    type: "RECORDING";
+    steps: RecordedStep[];
+};
+export type HostToClientMessage = InspectorEnableMessage | InspectorDisableMessage | InspectorHostHelloMessage | ApplyChangeMarkersMessage | ApplyStyleOverridesMessage | ClearStyleOverridesMessage | RequestRecordingMessage;
+export type ClientToHostMessage = InspectorReadyMessage | ElementHoveredMessage | ElementSelectedMessage | ElementClearedMessage | ChangeMarkerSelectedMessage | RouteChangedMessage | RecordingMessage | 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

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

package/dist/runtime/inspector.d.ts

@@ -6,7 +6,7 @@ export type InspectorRuntimeOptions = {
     onSelect?: (payload: ElementHoverPayload) => void;
     onClear?: () => void;
     onChangeMarkerSelected?: (changeId: string) => void;
-    onRouteChange?: (path: string) => void;
+    onRouteChange?: (path: string, href: string) => void;
 };
 export type InspectorRuntime = {
     enable: () => void;
@@ -14,6 +14,9 @@ export type InspectorRuntime = {
     isEnabled: () => boolean;
     setChangeMarkers: (markers: ChangeMarker[]) => void;
     getElementByRefId: (refId: string) => Element | null;
+    /** Live Design tab edits; an empty object restores the element. */
+    applyStyleOverrides: (refId: string, styles: Record<string, string>) => void;
+    clearStyleOverrides: () => void;
     destroy: () => void;
 };
 export declare function createInspectorRuntime(options: InspectorRuntimeOptions): InspectorRuntime;

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;AAyCxE,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;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,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,CAsWlB"}
+{"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;AA0CxE,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;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD,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,mEAAmE;IACnE,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7E,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CA4XlB"}

package/dist/runtime/inspector.js

@@ -1,6 +1,7 @@
 import { runtimeElementRefFor } from "./element-ref.js";
 import { extractMetadata, findSourceLocation, sourceKeyFor, sourceMappingStatus, } from "./metadata.js";
 import { createOverlay, hideHighlight, hideSelectedHighlight, positionHighlight, positionSelectedHighlight, rectForElement, renderChangeMarkers, } from "./overlay.js";
+import { createStyleOverrides, readDesignStyles } from "./styles.js";
 const SOURCE_LINE_TOLERANCE = 2;
 function parseSourceKey(raw) {
     const m = raw ? /^(.*?):(\d+)(?::\d+)?$/.exec(raw) : null;
@@ -105,7 +106,8 @@ export function createInspectorRuntime(options) {
             renderChangeMarkers(overlay.markerLayer, markers, (id) => refIdToElement.get(id) ?? null, options.onChangeMarkerSelected);
         }
     };
-    function payloadFor(el) {
+    const styleOverrides = createStyleOverrides();
+    function payloadFor(el, withStyles = false) {
         const source = findSourceLocation(el);
         const sourceKey = sourceKeyFor(source);
         const elementRef = runtimeElementRefFor(el, sourceKey);
@@ -116,6 +118,7 @@ export function createInspectorRuntime(options) {
             metadata: extractMetadata(el),
             source,
             mappingStatus: sourceMappingStatus(source),
+            ...(withStyles ? { styles: readDesignStyles(el, win) } : {}),
         };
     }
     function setHover(el) {
@@ -138,7 +141,7 @@ export function createInspectorRuntime(options) {
                 return;
             reportedSize = sizeKey(selected);
             positionSelectedHighlight(overlay.selectedHighlight, rectForElement(selected));
-            options.onSelect?.(payloadFor(selected));
+            options.onSelect?.(payloadFor(selected, true));
         });
     function select(el) {
         selected = el;
@@ -148,7 +151,7 @@ export function createInspectorRuntime(options) {
         sizeObserver?.disconnect();
         reportedSize = sizeKey(el);
         sizeObserver?.observe(el);
-        options.onSelect?.(payloadFor(el));
+        options.onSelect?.(payloadFor(el, true));
     }
     const onCurrentRoute = (marker) => !marker.route ||
         win.location.pathname.replace(/\/$/, "") ===
@@ -250,6 +253,7 @@ export function createInspectorRuntime(options) {
         }
     }
     let lastPath = win.location.pathname;
+    let lastSearch = win.location.search;
     let refreshFrame = 0;
     /** SPA navigation and async data swap the DOM after markers arrive. */
     const scheduleRefresh = () => {
@@ -259,10 +263,16 @@ export function createInspectorRuntime(options) {
             refreshFrame = 0;
             if (win.location.pathname !== lastPath) {
                 lastPath = win.location.pathname;
+                lastSearch = win.location.search;
                 // The selection belonged to the previous page.
                 if (selected)
                     clearSelection();
-                options.onRouteChange?.(lastPath);
+                options.onRouteChange?.(lastPath, win.location.href);
+            }
+            else if (win.location.search !== lastSearch) {
+                // Same page, new query (filters, tabs): report it, keep the selection.
+                lastSearch = win.location.search;
+                options.onRouteChange?.(lastPath, win.location.href);
             }
             else if (selected && !selected.isConnected) {
                 // The app re-rendered without the selected element.
@@ -326,7 +336,18 @@ export function createInspectorRuntime(options) {
             refreshMarkers();
         },
         getElementByRefId: (id) => refIdToElement.get(id) ?? null,
+        applyStyleOverrides: (id, styles) => {
+            const el = refIdToElement.get(id);
+            if (!el?.isConnected)
+                return;
+            styleOverrides.apply(el, styles);
+            if (el === selected) {
+                positionSelectedHighlight(overlay.selectedHighlight, rectForElement(el));
+            }
+        },
+        clearStyleOverrides: () => styleOverrides.clearAll(),
         destroy: () => {
+            styleOverrides.clearAll();
             if (enabled) {
                 enabled = false;
                 teardownListeners();

package/dist/runtime/recorder.d.ts

@@ -0,0 +1,15 @@
+import type { RecordedStep } from "../protocol.js";
+/** Like a dashcam: only the last minute is kept. */
+export declare const RECORDING_WINDOW_MS = 60000;
+export type Recorder = {
+    snapshot: () => RecordedStep[];
+    stop: () => void;
+};
+/**
+ * Records the last minute of what happened in the page so a bug report can
+ * show the steps that led to it. Field values, request bodies and query strings
+ * are never stored. Lives only in this tab's sessionStorage, so it survives a
+ * reload and never leaves the page until the Viewer asks for it.
+ */
+export declare function createRecorder(win: Window, doc: Document): Recorder;
+//# sourceMappingURL=recorder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recorder.d.ts","sourceRoot":"","sources":["../../src/runtime/recorder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,oDAAoD;AACpD,eAAO,MAAM,mBAAmB,QAAS,CAAC;AAK1C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,MAAM,YAAY,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AA+EF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,GAAG,QAAQ,CAuLnE"}

package/dist/runtime/recorder.js

@@ -0,0 +1,245 @@
+import { ABBBOX_SOURCE_ATTR } from "../instrument/constants.js";
+/** Like a dashcam: only the last minute is kept. */
+export const RECORDING_WINDOW_MS = 60_000;
+const STORAGE_KEY = "abbox:recording";
+const MAX_STEPS = 400;
+const LABEL_LIMIT = 80;
+function readStored(win) {
+    try {
+        const raw = win.sessionStorage.getItem(STORAGE_KEY);
+        return raw ? JSON.parse(raw) : [];
+    }
+    catch {
+        return [];
+    }
+}
+function labelOf(el) {
+    // Prefer what a person would call the control: its label, then its hint or name.
+    const field = el instanceof HTMLInputElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLSelectElement
+        ? el
+        : null;
+    const fieldHint = field instanceof HTMLSelectElement
+        ? field.name
+        : field
+            ? field.placeholder || field.name
+            : null;
+    const text = el.getAttribute("aria-label") ??
+        field?.labels?.[0]?.textContent ??
+        fieldHint ??
+        el.textContent;
+    const trimmed = text?.replace(/\s+/g, " ").trim();
+    return trimmed ? trimmed.slice(0, LABEL_LIMIT) : undefined;
+}
+/**
+ * What was entered, without the content: enough for a diagnosis to tell a
+ * single word from a phrase, or an empty field from a filled one.
+ */
+function shapeOf(el) {
+    if (el instanceof HTMLSelectElement) {
+        return `selected option ${el.selectedIndex + 1} of ${el.options.length}`;
+    }
+    if (el instanceof HTMLInputElement &&
+        (el.type === "checkbox" || el.type === "radio")) {
+        return el.checked ? "checked" : "unchecked";
+    }
+    const text = el.value.trim();
+    if (text === "")
+        return "cleared";
+    const words = text.split(/\s+/).length;
+    const kind = el instanceof HTMLInputElement && !["text", "search"].includes(el.type)
+        ? `${el.type}, `
+        : "";
+    return `filled: ${kind}${words} word${words === 1 ? "" : "s"}, ${text.length} characters`;
+}
+function sourceOf(el) {
+    return (el.closest(`[${ABBBOX_SOURCE_ATTR}]`)?.getAttribute(ABBBOX_SOURCE_ATTR) ??
+        undefined);
+}
+/** Path only: query strings and fragments can carry tokens or personal data. */
+function pathOf(url, base) {
+    try {
+        const parsed = new URL(url, base);
+        return parsed.origin === new URL(base).origin
+            ? parsed.pathname
+            : `${parsed.origin}${parsed.pathname}`;
+    }
+    catch {
+        return url.split(/[?#]/)[0] ?? url;
+    }
+}
+/**
+ * Records the last minute of what happened in the page so a bug report can
+ * show the steps that led to it. Field values, request bodies and query strings
+ * are never stored. Lives only in this tab's sessionStorage, so it survives a
+ * reload and never leaves the page until the Viewer asks for it.
+ */
+export function createRecorder(win, doc) {
+    let steps = readStored(win);
+    const prune = (now) => {
+        steps = steps
+            .filter((step) => now - step.t <= RECORDING_WINDOW_MS)
+            .slice(-MAX_STEPS);
+    };
+    const push = (step) => {
+        const now = Date.now();
+        steps.push({ t: now, route: win.location.pathname, ...step });
+        prune(now);
+        try {
+            win.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(steps));
+        }
+        catch {
+            // Storage full or blocked: the in-memory copy still works for this page.
+        }
+    };
+    const onClick = (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        const el = target?.closest("button, a, [role=button], input, select, label") ??
+            target;
+        if (!el)
+            return;
+        push({
+            kind: "click",
+            label: labelOf(el),
+            source: sourceOf(el),
+            tag: el.tagName.toLowerCase(),
+        });
+    };
+    const onSubmit = (event) => {
+        const form = event.target instanceof Element ? event.target : null;
+        if (!form)
+            return;
+        const submitter = event.submitter;
+        push({
+            kind: "submit",
+            label: submitter ? labelOf(submitter) : labelOf(form),
+            source: sourceOf(form),
+            tag: "form",
+        });
+    };
+    const onChange = (event) => {
+        const el = event.target;
+        if (!(el instanceof HTMLInputElement ||
+            el instanceof HTMLTextAreaElement ||
+            el instanceof HTMLSelectElement))
+            return;
+        if (el instanceof HTMLInputElement && el.type === "password")
+            return;
+        push({
+            kind: "input",
+            label: labelOf(el) ?? el.name ?? undefined,
+            source: sourceOf(el),
+            tag: el.tagName.toLowerCase(),
+            detail: shapeOf(el),
+        });
+    };
+    let lastScroll = 0;
+    const onScroll = () => {
+        const now = Date.now();
+        if (now - lastScroll < 1000)
+            return;
+        lastScroll = now;
+        const max = doc.documentElement.scrollHeight - win.innerHeight;
+        const pct = max > 0 ? Math.round((win.scrollY / max) * 100) : 0;
+        push({ kind: "scroll", detail: `${pct}% down` });
+    };
+    let lastPath = win.location.pathname;
+    const routeTimer = win.setInterval(() => {
+        if (win.location.pathname === lastPath)
+            return;
+        lastPath = win.location.pathname;
+        push({ kind: "route", detail: lastPath });
+    }, 300);
+    const onError = (event) => {
+        push({
+            kind: "error",
+            detail: String(event.message).slice(0, 300),
+            ...(event.filename
+                ? {
+                    location: `${pathOf(event.filename, win.location.href)}:${event.lineno}`,
+                }
+                : {}),
+        });
+    };
+    const onRejection = (event) => {
+        const reason = event.reason instanceof Error
+            ? event.reason.message
+            : String(event.reason);
+        push({
+            kind: "error",
+            detail: `Unhandled rejection: ${reason}`.slice(0, 300),
+        });
+    };
+    const originalConsoleError = console.error;
+    console.error = (...args) => {
+        push({
+            kind: "console-error",
+            detail: args
+                .map((a) => a instanceof Error ? a.message : typeof a === "string" ? a : "")
+                .join(" ")
+                .trim()
+                .slice(0, 300),
+        });
+        originalConsoleError.apply(console, args);
+    };
+    const originalFetch = win.fetch;
+    win.fetch = async (input, init) => {
+        const started = Date.now();
+        const url = typeof input === "string"
+            ? input
+            : input instanceof URL
+                ? input.href
+                : input.url;
+        // Framework dev tooling (Next.js overlay, HMR) is not the app's activity.
+        if (/\/(__nextjs|_next\/)/.test(url)) {
+            return originalFetch.call(win, input, init);
+        }
+        const method = (init?.method ?? (input instanceof Request ? input.method : "GET")).toUpperCase();
+        try {
+            const response = await originalFetch.call(win, input, init);
+            push({
+                kind: "request",
+                method,
+                url: pathOf(url, win.location.href),
+                status: response.status,
+                durationMs: Date.now() - started,
+            });
+            return response;
+        }
+        catch (error) {
+            push({
+                kind: "request",
+                method,
+                url: pathOf(url, win.location.href),
+                status: 0,
+                detail: error instanceof Error ? error.message : "Network error",
+                durationMs: Date.now() - started,
+            });
+            throw error;
+        }
+    };
+    doc.addEventListener("click", onClick, true);
+    doc.addEventListener("submit", onSubmit, true);
+    doc.addEventListener("change", onChange, true);
+    win.addEventListener("scroll", onScroll, { passive: true });
+    win.addEventListener("error", onError);
+    win.addEventListener("unhandledrejection", onRejection);
+    return {
+        snapshot: () => {
+            prune(Date.now());
+            return [...steps];
+        },
+        stop: () => {
+            doc.removeEventListener("click", onClick, true);
+            doc.removeEventListener("submit", onSubmit, true);
+            doc.removeEventListener("change", onChange, true);
+            win.removeEventListener("scroll", onScroll);
+            win.removeEventListener("error", onError);
+            win.removeEventListener("unhandledrejection", onRejection);
+            win.clearInterval(routeTimer);
+            console.error = originalConsoleError;
+            win.fetch = originalFetch;
+        },
+    };
+}

package/dist/runtime/styles.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Computed styles the Viewer's Design tab shows and edits, and live overrides
+ * of them. Overrides are inline `!important` declarations so they win over
+ * class-based styles; the element's original `style` attribute is restored
+ * when they are cleared.
+ */
+export declare const DESIGN_STYLE_PROPERTIES: readonly ["display", "position", "width", "height", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left", "gap", "flex-direction", "justify-content", "align-items", "background-color", "background-image", "opacity", "border-top-width", "border-top-style", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "box-shadow", "color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing", "text-align", "text-transform", "text-decoration-line"];
+export declare function readDesignStyles(el: Element, win: Window): Record<string, string>;
+export type StyleOverrides = {
+    /** Replaces all overrides on `el`; an empty object restores it. */
+    apply: (el: Element, styles: Record<string, string>) => void;
+    clearAll: () => void;
+};
+export declare function createStyleOverrides(): StyleOverrides;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/runtime/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,0mBAqC1B,CAAC;AAIX,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,MAAM,GACV,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOxB;AAYD,MAAM,MAAM,cAAc,GAAG;IAC3B,mEAAmE;IACnE,KAAK,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,oBAAoB,IAAI,cAAc,CA+BrD"}

package/dist/runtime/styles.js

@@ -0,0 +1,95 @@
+/**
+ * Computed styles the Viewer's Design tab shows and edits, and live overrides
+ * of them. Overrides are inline `!important` declarations so they win over
+ * class-based styles; the element's original `style` attribute is restored
+ * when they are cleared.
+ */
+export const DESIGN_STYLE_PROPERTIES = [
+    "display",
+    "position",
+    "width",
+    "height",
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+    "gap",
+    "flex-direction",
+    "justify-content",
+    "align-items",
+    "background-color",
+    "background-image",
+    "opacity",
+    "border-top-width",
+    "border-top-style",
+    "border-top-color",
+    "border-top-left-radius",
+    "border-top-right-radius",
+    "border-bottom-right-radius",
+    "border-bottom-left-radius",
+    "box-shadow",
+    "color",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "line-height",
+    "letter-spacing",
+    "text-align",
+    "text-transform",
+    "text-decoration-line",
+];
+const ALLOWED = new Set(DESIGN_STYLE_PROPERTIES);
+export function readDesignStyles(el, win) {
+    const computed = win.getComputedStyle(el);
+    const styles = {};
+    for (const property of DESIGN_STYLE_PROPERTIES) {
+        styles[property] = computed.getPropertyValue(property).trim();
+    }
+    return styles;
+}
+/** Shorthands the Design tab may send besides the longhands above. */
+const SHORTHANDS = new Set([
+    "padding",
+    "margin",
+    "border-width",
+    "border-style",
+    "border-color",
+    "border-radius",
+]);
+export function createStyleOverrides() {
+    const originals = new Map();
+    const restore = (el) => {
+        if (!originals.has(el))
+            return;
+        const original = originals.get(el) ?? null;
+        if (original === null)
+            el.removeAttribute("style");
+        else
+            el.setAttribute("style", original);
+        originals.delete(el);
+    };
+    return {
+        apply: (el, styles) => {
+            if (!(el instanceof HTMLElement || el instanceof SVGElement))
+                return;
+            restore(el);
+            const entries = Object.entries(styles).filter(([property, value]) => (ALLOWED.has(property) || SHORTHANDS.has(property)) &&
+                typeof value === "string" &&
+                value.length <= 500);
+            if (entries.length === 0)
+                return;
+            originals.set(el, el.getAttribute("style"));
+            for (const [property, value] of entries) {
+                el.style.setProperty(property, value, "important");
+            }
+        },
+        clearAll: () => {
+            for (const el of [...originals.keys()])
+                restore(el);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.4.16",
+  "version": "0.4.19",
   "publishConfig": {
     "access": "public"
   },

package/dist/runtime/resolve-change-marker.d.ts

@@ -1,12 +0,0 @@
-import type { ChangeMarker } from "../protocol.js";
-export type DomMatchConfidence = "exact" | "probable" | "ambiguous" | "unresolved";
-export type ChangeMarkerResolution = {
-    changeId: string;
-    confidence: DomMatchConfidence;
-    candidateCount: number;
-};
-export declare function resolveChangeMarker(marker: ChangeMarker, doc: Document, pathname: string, refIdToElement: Map<string, Element>): {
-    element: Element | null;
-    resolution: ChangeMarkerResolution;
-};
-//# sourceMappingURL=resolve-change-marker.d.ts.map

package/dist/runtime/resolve-change-marker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolve-change-marker.d.ts","sourceRoot":"","sources":["../../src/runtime/resolve-change-marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;AAEnF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAiCF,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GACnC;IAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAAC,UAAU,EAAE,sBAAsB,CAAA;CAAE,CAqEjE"}

package/dist/runtime/resolve-change-marker.js

@@ -1,93 +0,0 @@
-function routeMatches(markerRoute, pathname) {
-    if (!markerRoute?.trim())
-        return true;
-    const route = markerRoute.trim();
-    if (route === pathname)
-        return true;
-    if (route.endsWith("*") && pathname.startsWith(route.slice(0, -1)))
-        return true;
-    return false;
-}
-function collectSourcePrefixMatches(doc, prefix) {
-    const matches = [];
-    const nodes = doc.querySelectorAll("[data-abbox-src]");
-    for (const node of nodes) {
-        const attr = node.getAttribute("data-abbox-src");
-        if (attr?.startsWith(prefix)) {
-            matches.push(node);
-        }
-    }
-    return matches;
-}
-function collectElementIdMatches(doc, elementId) {
-    const escaped = elementId.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-    const byId = doc.querySelectorAll(`[id="${escaped}"]`);
-    if (byId.length > 0)
-        return [...byId];
-    const byData = doc.querySelectorAll(`[data-abbox-element-id="${escaped}"]`);
-    return [...byData];
-}
-export function resolveChangeMarker(marker, doc, pathname, refIdToElement) {
-    const base = {
-        changeId: marker.elementRefId,
-        confidence: "unresolved",
-        candidateCount: 0,
-    };
-    if (!routeMatches(marker.route, pathname)) {
-        return { element: null, resolution: base };
-    }
-    const byRef = refIdToElement.get(marker.elementRefId);
-    if (byRef) {
-        return {
-            element: byRef,
-            resolution: { ...base, confidence: "exact", candidateCount: 1 },
-        };
-    }
-    let candidates = [];
-    if (marker.compilerElementId?.trim()) {
-        candidates = collectElementIdMatches(doc, marker.compilerElementId.trim());
-        if (candidates.length === 1) {
-            return {
-                element: candidates[0],
-                resolution: { ...base, confidence: "exact", candidateCount: 1 },
-            };
-        }
-        if (candidates.length > 1) {
-            return {
-                element: null,
-                resolution: { ...base, confidence: "ambiguous", candidateCount: candidates.length },
-            };
-        }
-    }
-    const prefix = marker.sourceKeyPrefix?.trim();
-    if (prefix) {
-        candidates = collectSourcePrefixMatches(doc, prefix);
-        if (marker.interactionId) {
-            // Narrow by label hint when multiple nodes share a source line.
-            const label = marker.label.toLowerCase();
-            const narrowed = candidates.filter((el) => {
-                const text = (el.textContent ?? "").toLowerCase();
-                return label.length > 0 && text.includes(label.slice(0, 24));
-            });
-            if (narrowed.length === 1) {
-                return {
-                    element: narrowed[0],
-                    resolution: { ...base, confidence: "probable", candidateCount: 1 },
-                };
-            }
-        }
-        if (candidates.length === 1) {
-            return {
-                element: candidates[0],
-                resolution: { ...base, confidence: "probable", candidateCount: 1 },
-            };
-        }
-        if (candidates.length > 1) {
-            return {
-                element: null,
-                resolution: { ...base, confidence: "ambiguous", candidateCount: candidates.length },
-            };
-        }
-    }
-    return { element: null, resolution: base };
-}