@treelocator/runtime 0.3.2 → 0.4.1

package/dist/browserApi.d.ts

@@ -1,5 +1,7 @@
 import { AdapterId } from "./consts";
 import { AncestryItem } from "./functions/formatAncestryChain";
+import type { DejitterFinding, DejitterSummary } from "./dejitter/recorder";
+import type { InteractionEvent } from "./components/RecordingResults";
 export interface LocatorJSAPI {
     /**
      * Get formatted ancestry path for an element.
@@ -98,6 +100,49 @@ export interface LocatorJSAPI {
      * console.log(help);
      */
     help(): string;
+    /**
+     * Replay the last recorded interaction sequence.
+     * Dispatches the recorded clicks at the original positions and timing.
+     * Must have a completed recording with interactions to replay.
+     *
+     * @example
+     * // In browser console
+     * window.__treelocator__.replay();
+     *
+     * @example
+     * // In Playwright
+     * await page.evaluate(() => window.__treelocator__.replay());
+     */
+    replay(): void;
+    /**
+     * Replay the last recorded interaction sequence while recording an element's property changes.
+     * Combines replay and dejitter recording: plays back stored clicks at original timing while
+     * tracking visual changes (opacity, transform, position, size) on the target element.
+     * Returns the dejitter analysis results when replay completes.
+     *
+     * @param elementOrSelector - HTMLElement or CSS selector for the element to record during replay
+     * @returns Promise resolving to recording results with findings, summary, and interaction log
+     *
+     * @example
+     * // Record the sliding panel while replaying user clicks
+     * const results = await window.__treelocator__.replayWithRecord('[data-locatorjs-id="SlidingPanel"]');
+     * console.log(results.findings); // anomaly analysis
+     * console.log(results.path);     // component ancestry
+     *
+     * @example
+     * // In Playwright - automated regression test
+     * const results = await page.evaluate(async () => {
+     *   return await window.__treelocator__.replayWithRecord('.my-panel');
+     * });
+     * expect(results.findings.filter(f => f.severity === 'high')).toHaveLength(0);
+     */
+    replayWithRecord(elementOrSelector: HTMLElement | string): Promise<{
+        path: string;
+        findings: DejitterFinding[];
+        summary: DejitterSummary | null;
+        data: any;
+        interactions: InteractionEvent[];
+    } | null>;
 }
 export declare function createBrowserAPI(adapterIdParam?: AdapterId): LocatorJSAPI;
 export declare function installBrowserAPI(adapterIdParam?: AdapterId): void;

package/dist/browserApi.js

@@ -63,7 +63,22 @@ METHODS:
      console.log(data.path)      // formatted string
      console.log(data.ancestry)  // structured array
 
-4. help()
+4. replay()
+   Replays the last recorded interaction sequence as a macro.
+
+   Usage:
+     window.__treelocator__.replay()
+
+5. replayWithRecord(elementOrSelector)
+   Replays stored interactions while recording element changes.
+   Returns dejitter analysis when replay completes.
+
+   Usage:
+     const results = await window.__treelocator__.replayWithRecord('[data-locatorjs-id="SlidingPanel"]')
+     console.log(results.findings)  // anomaly analysis
+     console.log(results.path)      // component ancestry
+
+6. help()
    Displays this help message.
 
 PLAYWRIGHT EXAMPLES:
@@ -148,6 +163,13 @@ export function createBrowserAPI(adapterIdParam) {
     },
     help() {
       return HELP_TEXT;
+    },
+    replay() {
+      // Replaced by Runtime component once mounted
+    },
+    replayWithRecord() {
+      // Replaced by Runtime component once mounted
+      return Promise.resolve(null);
     }
   };
 }

package/dist/components/RecordingOutline.d.ts

@@ -0,0 +1,5 @@
+type RecordingOutlineProps = {
+    element: HTMLElement;
+};
+export declare function RecordingOutline(props: RecordingOutlineProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/RecordingOutline.js

@@ -0,0 +1,53 @@
+import { template as _$template } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div style=z-index:2;border-radius:2px;pointer-events:none><div style="align-items:center;border-radius:4px;font-size:10px;font-family:system-ui, sans-serif;font-weight:600;letter-spacing:0.5px;white-space:nowrap"><div style=border-radius:50%></div>REC`);
+import { createSignal, onCleanup, onMount } from "solid-js";
+export function RecordingOutline(props) {
+  const [box, setBox] = createSignal(props.element.getBoundingClientRect());
+  let rafId;
+  const updateBox = () => {
+    setBox(props.element.getBoundingClientRect());
+    rafId = requestAnimationFrame(updateBox);
+  };
+  onMount(() => {
+    rafId = requestAnimationFrame(updateBox);
+  });
+  onCleanup(() => cancelAnimationFrame(rafId));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    _$setStyleProperty(_el$, "position", "fixed");
+    _$setStyleProperty(_el$, "border", "2px dashed #ef4444");
+    _$setStyleProperty(_el$2, "position", "absolute");
+    _$setStyleProperty(_el$2, "top", "-22px");
+    _$setStyleProperty(_el$2, "left", "4px");
+    _$setStyleProperty(_el$2, "display", "flex");
+    _$setStyleProperty(_el$2, "gap", "4px");
+    _$setStyleProperty(_el$2, "padding", "2px 8px");
+    _$setStyleProperty(_el$2, "background", "rgba(239, 68, 68, 0.9)");
+    _$setStyleProperty(_el$2, "color", "#fff");
+    _$setStyleProperty(_el$3, "width", "6px");
+    _$setStyleProperty(_el$3, "height", "6px");
+    _$setStyleProperty(_el$3, "background", "#fff");
+    _$setStyleProperty(_el$3, "animation", "treelocator-rec-pulse 1s ease-in-out infinite");
+    _$effect(_p$ => {
+      var _v$ = box().x + "px",
+        _v$2 = box().y + "px",
+        _v$3 = box().width + "px",
+        _v$4 = box().height + "px";
+      _v$ !== _p$.e && _$setStyleProperty(_el$, "left", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$, "top", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$, "width", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$, "height", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}

package/dist/components/RecordingResults.d.ts

@@ -0,0 +1,25 @@
+import type { DejitterFinding, DejitterSummary } from "../dejitter/recorder";
+export type InteractionEvent = {
+    t: number;
+    type: string;
+    target: string;
+    x: number;
+    y: number;
+};
+type RecordingResultsProps = {
+    findings: DejitterFinding[];
+    summary: DejitterSummary | null;
+    data: any;
+    elementPath: string;
+    interactions: InteractionEvent[];
+    onDismiss: () => void;
+    onReplay?: () => void;
+    replaying?: boolean;
+    onToast?: (msg: string) => void;
+    hasPrevious?: boolean;
+    onLoadPrevious?: () => void;
+    hasNext?: boolean;
+    onLoadNext?: () => void;
+};
+export declare function RecordingResults(props: RecordingResultsProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/RecordingResults.js

@@ -0,0 +1,272 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div style=margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px>Findings (<!>)`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div style="border-top:1px solid rgba(255, 255, 255, 0.08)"><div style=margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px>Interactions (<!>)`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div style="z-index:2147483646;max-height:400px;overflow-y:auto;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.4);font-family:system-ui, -apple-system, sans-serif;font-size:12px;pointer-events:auto"><div style="align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255, 255, 255, 0.08)"><div><div style=font-weight:600;font-size:13px>Recording Results</div><div style=margin-top:2px>ms &middot; <!> frames</div></div><div style=align-items:center><div>Copy</div><div style=border-radius:4px;font-size:16px;line-height:1>&times;</div></div></div><div>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div>Prev`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div>Next`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div style=align-items:center><span style=font-size:14px>&#10003;</span>No anomalies detected`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div style="align-items:flex-start;border-bottom:1px solid rgba(255, 255, 255, 0.05)"><div style=border-radius:50%;flex-shrink:0;margin-top:3px></div><div style=min-width:0><div style=align-items:center><span style=font-weight:600></span><span style=font-size:11px></span></div><div style=margin-top:2px;line-height:1.4;word-break:break-word>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div style=font-family:monospace;font-size:11px><span>ms</span> <span></span> <span>`);
+import { For, Show } from "solid-js";
+const SEVERITY_COLORS = {
+  high: "#ef4444",
+  medium: "#f59e0b",
+  low: "#eab308",
+  info: "#9ca3af"
+};
+function formatDataForClipboard(data, elementPath, summary, findings, interactions) {
+  const lines = [];
+
+  // Element ancestry path from treelocator
+  if (elementPath) {
+    lines.push(`Element: ${elementPath}`);
+  }
+
+  // Header
+  lines.push(`Recording: ${Math.round(summary?.duration ?? 0)}ms, ${summary?.rawFrameCount ?? 0} frames`);
+  lines.push('');
+
+  // Property changes
+  if (data?.propStats?.props && data.propStats.props.length > 0) {
+    lines.push('Changed properties:');
+    for (const p of data.propStats.props) {
+      if (p.raw === 0) continue;
+      lines.push(`  ${p.prop}: ${p.raw} changes (${p.mode})`);
+    }
+    lines.push('');
+  }
+
+  // Samples with actual values — replace dejitter element IDs with the ancestry path
+  if (data?.samples && data.samples.length > 0) {
+    lines.push('Timeline:');
+    for (const frame of data.samples) {
+      for (const change of frame.changes) {
+        const {
+          id,
+          ...props
+        } = change;
+        const propEntries = Object.entries(props);
+        if (propEntries.length > 0) {
+          const vals = propEntries.map(([k, v]) => `${k}=${v}`).join(', ');
+          lines.push(`  ${frame.t}ms: ${vals}`);
+        }
+      }
+    }
+    lines.push('');
+  }
+
+  // Findings — replace dejitter element IDs in descriptions
+  if (findings.length > 0) {
+    lines.push('Anomalies:');
+    for (const f of findings) {
+      lines.push(`  [${f.severity}] ${f.type}: ${f.description}`);
+    }
+    lines.push('');
+  }
+
+  // Interactions
+  if (interactions.length > 0) {
+    lines.push('User interactions:');
+    for (const evt of interactions) {
+      lines.push(`  ${evt.t}ms ${evt.type} ${evt.target} (${evt.x},${evt.y})`);
+    }
+  }
+  return lines.join('\n');
+}
+const buttonStyle = active => ({
+  cursor: "pointer",
+  padding: "4px 10px",
+  "border-radius": "4px",
+  background: active ? "rgba(59, 130, 246, 0.2)" : "rgba(255, 255, 255, 0.08)",
+  color: active ? "#60a5fa" : "#9ca3af",
+  "font-size": "11px",
+  "font-weight": "600",
+  "line-height": "1.4",
+  transition: "background 0.15s, color 0.15s"
+});
+export function RecordingResults(props) {
+  const duration = () => props.summary?.duration ?? 0;
+  const frameCount = () => props.summary?.rawFrameCount ?? 0;
+  function handleCopy() {
+    const text = formatDataForClipboard(props.data, props.elementPath, props.summary, props.findings, props.interactions);
+    navigator.clipboard.writeText(text).then(() => {
+      props.onToast?.("Copied to clipboard");
+    });
+  }
+  return (() => {
+    var _el$ = _tmpl$3(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.nextSibling,
+      _el$6 = _el$5.firstChild,
+      _el$8 = _el$6.nextSibling,
+      _el$7 = _el$8.nextSibling,
+      _el$9 = _el$3.nextSibling,
+      _el$0 = _el$9.firstChild,
+      _el$1 = _el$0.nextSibling,
+      _el$10 = _el$2.nextSibling;
+    _$setStyleProperty(_el$, "position", "fixed");
+    _$setStyleProperty(_el$, "bottom", "84px");
+    _$setStyleProperty(_el$, "right", "20px");
+    _$setStyleProperty(_el$, "width", "340px");
+    _$setStyleProperty(_el$, "background", "rgba(15, 15, 15, 0.92)");
+    _$setStyleProperty(_el$, "border", "1px solid rgba(255, 255, 255, 0.1)");
+    _$setStyleProperty(_el$, "color", "#e5e5e5");
+    _$setStyleProperty(_el$2, "display", "flex");
+    _$setStyleProperty(_el$2, "padding", "12px 14px 8px");
+    _$setStyleProperty(_el$4, "color", "#fff");
+    _$setStyleProperty(_el$5, "color", "#9ca3af");
+    _$insert(_el$5, () => Math.round(duration()), _el$6);
+    _$insert(_el$5, frameCount, _el$8);
+    _$setStyleProperty(_el$9, "display", "flex");
+    _$setStyleProperty(_el$9, "gap", "4px");
+    _el$0.$$click = handleCopy;
+    _$insert(_el$9, (() => {
+      var _c$ = _$memo(() => !!props.onReplay);
+      return () => _c$() && (() => {
+        var _el$20 = _tmpl$4();
+        _$addEventListener(_el$20, "click", props.onReplay, true);
+        _$insert(_el$20, () => props.replaying ? "Replaying..." : "Replay");
+        _$effect(_$p => _$style(_el$20, buttonStyle(props.replaying), _$p));
+        return _el$20;
+      })();
+    })(), _el$1);
+    _$insert(_el$9, (() => {
+      var _c$2 = _$memo(() => !!(props.hasPrevious && props.onLoadPrevious));
+      return () => _c$2() && (() => {
+        var _el$21 = _tmpl$5();
+        _$addEventListener(_el$21, "click", props.onLoadPrevious, true);
+        _$effect(_$p => _$style(_el$21, buttonStyle(), _$p));
+        return _el$21;
+      })();
+    })(), _el$1);
+    _$insert(_el$9, (() => {
+      var _c$3 = _$memo(() => !!(props.hasNext && props.onLoadNext));
+      return () => _c$3() && (() => {
+        var _el$22 = _tmpl$6();
+        _$addEventListener(_el$22, "click", props.onLoadNext, true);
+        _$effect(_$p => _$style(_el$22, buttonStyle(), _$p));
+        return _el$22;
+      })();
+    })(), _el$1);
+    _$addEventListener(_el$1, "click", props.onDismiss, true);
+    _$setStyleProperty(_el$1, "cursor", "pointer");
+    _$setStyleProperty(_el$1, "padding", "4px 8px");
+    _$setStyleProperty(_el$1, "color", "#9ca3af");
+    _$setStyleProperty(_el$10, "padding", "8px 14px");
+    _$insert(_el$10, _$createComponent(Show, {
+      get when() {
+        return props.findings.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$23 = _tmpl$7(),
+            _el$24 = _el$23.firstChild;
+          _$setStyleProperty(_el$23, "display", "flex");
+          _$setStyleProperty(_el$23, "gap", "6px");
+          _$setStyleProperty(_el$23, "padding", "8px 0");
+          _$setStyleProperty(_el$23, "color", "#4ade80");
+          return _el$23;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$11 = _tmpl$(),
+            _el$12 = _el$11.firstChild,
+            _el$14 = _el$12.nextSibling,
+            _el$13 = _el$14.nextSibling;
+          _$setStyleProperty(_el$11, "color", "#9ca3af");
+          _$insert(_el$11, () => props.findings.length, _el$14);
+          return _el$11;
+        })(), _$createComponent(For, {
+          get each() {
+            return props.findings;
+          },
+          children: finding => (() => {
+            var _el$25 = _tmpl$8(),
+              _el$26 = _el$25.firstChild,
+              _el$27 = _el$26.nextSibling,
+              _el$28 = _el$27.firstChild,
+              _el$29 = _el$28.firstChild,
+              _el$30 = _el$29.nextSibling,
+              _el$31 = _el$28.nextSibling;
+            _$setStyleProperty(_el$25, "display", "flex");
+            _$setStyleProperty(_el$25, "gap", "8px");
+            _$setStyleProperty(_el$25, "padding", "6px 0");
+            _$setStyleProperty(_el$26, "width", "8px");
+            _$setStyleProperty(_el$26, "height", "8px");
+            _$setStyleProperty(_el$28, "display", "flex");
+            _$setStyleProperty(_el$28, "gap", "6px");
+            _$setStyleProperty(_el$29, "color", "#fff");
+            _$insert(_el$29, () => finding.type);
+            _$insert(_el$30, () => finding.severity);
+            _$setStyleProperty(_el$31, "color", "#a1a1aa");
+            _$insert(_el$31, () => finding.description);
+            _$effect(_p$ => {
+              var _v$ = SEVERITY_COLORS[finding.severity] || "#9ca3af",
+                _v$2 = SEVERITY_COLORS[finding.severity];
+              _v$ !== _p$.e && _$setStyleProperty(_el$26, "background", _p$.e = _v$);
+              _v$2 !== _p$.t && _$setStyleProperty(_el$30, "color", _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$25;
+          })()
+        })];
+      }
+    }));
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.interactions.length > 0;
+      },
+      get children() {
+        var _el$15 = _tmpl$2(),
+          _el$16 = _el$15.firstChild,
+          _el$17 = _el$16.firstChild,
+          _el$19 = _el$17.nextSibling,
+          _el$18 = _el$19.nextSibling;
+        _$setStyleProperty(_el$15, "padding", "8px 14px 12px");
+        _$setStyleProperty(_el$16, "color", "#9ca3af");
+        _$insert(_el$16, () => props.interactions.length, _el$19);
+        _$insert(_el$15, _$createComponent(For, {
+          get each() {
+            return props.interactions;
+          },
+          children: evt => (() => {
+            var _el$32 = _tmpl$9(),
+              _el$33 = _el$32.firstChild,
+              _el$34 = _el$33.firstChild,
+              _el$35 = _el$33.nextSibling,
+              _el$36 = _el$35.nextSibling,
+              _el$37 = _el$36.nextSibling,
+              _el$38 = _el$37.nextSibling;
+            _$setStyleProperty(_el$32, "padding", "3px 0");
+            _$setStyleProperty(_el$32, "color", "#a1a1aa");
+            _$setStyleProperty(_el$33, "color", "#9ca3af");
+            _$insert(_el$33, () => evt.t, _el$34);
+            _$setStyleProperty(_el$36, "color", "#60a5fa");
+            _$insert(_el$36, () => evt.type);
+            _$insert(_el$38, () => evt.target);
+            return _el$32;
+          })()
+        }), null);
+        return _el$15;
+      }
+    }), null);
+    _$effect(_$p => _$style(_el$0, buttonStyle(), _$p));
+    return _el$;
+  })();
+}
+_$delegateEvents(["click"]);