@treelocator/runtime 0.5.2 → 0.6.0

package/dist/components/Runtime.js

@@ -1,85 +1,35 @@
 import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed pointer-events-auto"title="TreeLocatorJS - Component Ancestry Tracker"data-treelocator-api=window.__treelocator__ data-treelocator-help=window.__treelocator__.help() style=z-index:2147483646><style>\n          @keyframes treelocator-rec-pulse \{\n            0%, 100% \{ opacity: 1; }\n            50% \{ opacity: 0.3; }\n          }\n        </style><div style=align-items:stretch;border-radius:27px><div aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"role=button style="align-items:center;justify-content:center;border-right:1px solid rgba(0, 0, 0, 0.1)"><img alt=TreeLocatorJS width=44 height=44></div><div role=button style=align-items:center;justify-content:center></div></div><div role=note aria-label="TreeLocatorJS Developer Tool API — Run: window.__treelocator__.help() for full usage instructions. Quick start: window.__treelocator__.getPath('button.submit') returns component ancestry. window.__treelocator__.replayWithRecord('.my-element') replays recorded interactions while tracking visual changes."style=white-space:nowrap>TreeLocatorJS: Run window.__treelocator__.help() for API docs`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div style="z-index:2147483645;border-radius:50%;pointer-events:none;box-shadow:0 0 12px rgba(59, 130, 246, 0.5)">`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div style=border-radius:3px>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div style=border-radius:50%>`);
-import { createEffect, createSignal, onCleanup } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<div style="z-index:2147483645;border-radius:50%;pointer-events:none;box-shadow:0 0 12px rgba(59, 130, 246, 0.5)">`);
+import { createEffect, createSignal } from "solid-js";
 import { render } from "solid-js/web";
 import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
 import { MaybeOutline } from "./MaybeOutline";
 import { isLocatorsOwnElement } from "../functions/isLocatorsOwnElement";
 import { Toast } from "./Toast";
-import { collectAncestry, formatAncestryChain, truncateAtFirstFile } from "../functions/formatAncestryChain";
+import { collectAncestry, formatAncestryChain, truncateAtFirstFile, getElementLabel } from "../functions/formatAncestryChain";
 import { enrichAncestryWithSourceMaps } from "../functions/enrichAncestrySourceMaps";
+import { extractComputedStyles } from "../functions/extractComputedStyles";
 import { createTreeNode } from "../adapters/createTreeNode";
-import treeIconUrl from "../_generated_tree_icon";
-import { createDejitterRecorder } from "../dejitter/recorder";
 import { RecordingOutline } from "./RecordingOutline";
 import { RecordingResults } from "./RecordingResults";
-const DEJITTER_CONFIG = {
-  selector: '[data-treelocator-recording]',
-  props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
-  sampleRate: 15,
-  maxDuration: 30000,
-  idleTimeout: 0,
-  mutations: true
-};
+import { RecordingPillButton } from "./RecordingPillButton";
+import { SettingsPanel } from "./SettingsPanel";
+import { useRecordingState } from "../hooks/useRecordingState";
+import { useEventListeners } from "../hooks/useEventListeners";
+import { settings } from "../hooks/useSettings";
 function Runtime(props) {
   const [holdingModKey, setHoldingModKey] = createSignal(false);
   const [holdingShift, setHoldingShift] = createSignal(false);
   const [currentElement, setCurrentElement] = createSignal(null);
   const [toastMessage, setToastMessage] = createSignal(null);
   const [locatorActive, setLocatorActive] = createSignal(false);
-
-  // Recording state machine: idle -> selecting -> recording -> results -> idle
-
-  // --- localStorage persistence ---
-  const STORAGE_KEY = '__treelocator_recording__';
-  function loadFromStorage() {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) return JSON.parse(raw);
-    } catch {}
-    return {
-      last: null,
-      previous: null
-    };
-  }
-  function saveToStorage(current) {
-    try {
-      const stored = loadFromStorage();
-      localStorage.setItem(STORAGE_KEY, JSON.stringify({
-        last: current,
-        previous: stored.last
-      }));
-    } catch {}
-  }
-
-  // Restore last results on mount
-  const restored = loadFromStorage();
-  const restoredLast = restored.last;
-  const [recordingState, setRecordingState] = createSignal(restoredLast ? 'results' : 'idle');
-  const [recordedElement, setRecordedElement] = createSignal(null);
-  const [recordingFindings, setRecordingFindings] = createSignal(restoredLast?.findings ?? []);
-  const [recordingSummary, setRecordingSummary] = createSignal(restoredLast?.summary ?? null);
-  const [interactionLog, setInteractionLog] = createSignal(restoredLast?.interactions ?? []);
-  const [recordingData, setRecordingData] = createSignal(restoredLast?.data ?? null);
-  const [recordingElementPath, setRecordingElementPath] = createSignal(restoredLast?.elementPath ?? "");
-  const [replayBox, setReplayBox] = createSignal(null);
-  const [replaying, setReplaying] = createSignal(false);
-  const [viewingPrevious, setViewingPrevious] = createSignal(false);
-  let dejitterInstance = null;
-  let interactionClickHandler = null;
-  let recordingStartTime = 0;
-  let replayTimerId = null;
-  const isActive = () => (holdingModKey() || locatorActive() || recordingState() === 'selecting') && currentElement();
+  const [settingsOpen, setSettingsOpen] = createSignal(false);
+  const recording = useRecordingState(props.adapterId);
+  const isActive = () => (holdingModKey() || locatorActive() || recording.recordingState() === "selecting") && currentElement();
   createEffect(() => {
     if (isActive()) {
       document.body.classList.add("locatorjs-active-pointer");
@@ -90,372 +40,61 @@ function Runtime(props) {
 
   // Expose replay functions on the browser API
   if (typeof window !== "undefined" && window.__treelocator__) {
-    window.__treelocator__.replay = () => replayRecording();
-    window.__treelocator__.replayWithRecord = elementOrSelector => replayWithRecord(elementOrSelector);
+    window.__treelocator__.replay = () => recording.replayRecording();
+    window.__treelocator__.replayWithRecord = elementOrSelector => recording.replayWithRecord(elementOrSelector);
   }
-  function keyUpListener(e) {
-    setHoldingModKey(isCombinationModifiersPressed(e));
-    setHoldingShift(e.shiftKey);
-  }
-  function keyDownListener(e) {
-    setHoldingModKey(isCombinationModifiersPressed(e, true));
-    setHoldingShift(e.shiftKey);
-  }
-  function mouseMoveListener(e) {
-    // Update modifier state from mouse events - more reliable than keydown/keyup
-    setHoldingModKey(e.altKey);
-    setHoldingShift(e.shiftKey);
+
+  // --- Event handlers ---
+
+  function eventPathHasAttribute(e, attr) {
+    const path = typeof e.composedPath === "function" ? e.composedPath() : e.target ? [e.target] : [];
+    return path.some(node => node instanceof Element && node.hasAttribute(attr));
   }
   function findElementAtPoint(e) {
     const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
     for (const el of elementsAtPoint) {
       if (isLocatorsOwnElement(el)) continue;
       if (el instanceof HTMLElement || el instanceof SVGElement) {
-        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
+        const withLocator = el.closest("[data-locatorjs-id], [data-locatorjs]");
         if (withLocator) return withLocator;
       }
     }
-    // Fallback to e.target
     const target = e.target;
     if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
-      const el = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
+      const el = target instanceof SVGElement ? target.closest("[data-locatorjs-id], [data-locatorjs]") ?? target.closest("svg") ?? target : target;
       if (el && !isLocatorsOwnElement(el)) return el;
     }
     return null;
   }
-
-  // --- Recording lifecycle ---
-
-  function handleRecordClick() {
-    switch (recordingState()) {
-      case 'idle':
-        setRecordingState('selecting');
-        break;
-      case 'selecting':
-        setRecordingState('idle');
-        break;
-      case 'recording':
-        stopRecording();
-        break;
-      case 'results':
-        dismissResults();
-        break;
-    }
-  }
-  function startRecording(element) {
-    element.setAttribute('data-treelocator-recording', 'true');
-    setRecordedElement(element);
-    dejitterInstance = createDejitterRecorder();
-    dejitterInstance.configure(DEJITTER_CONFIG);
-    dejitterInstance.start();
-    startInteractionTracker();
-    setRecordingState('recording');
-  }
-  function stopRecording() {
-    if (!dejitterInstance) return;
-    dejitterInstance.stop();
-    const findings = dejitterInstance.findings(true);
-    const summary = dejitterInstance.summary(true);
-    const data = dejitterInstance.getData();
-
-    // Collect ancestry path from treelocator before clearing
-    const el = recordedElement();
-    let elementPath = "";
-    if (el) {
-      const treeNode = createTreeNode(el, props.adapterId);
-      if (treeNode) {
-        const ancestry = collectAncestry(treeNode);
-        elementPath = formatAncestryChain(ancestry);
-      }
-    }
-    setRecordingFindings(findings);
-    setRecordingSummary(summary);
-    setRecordingData(data);
-    setRecordingElementPath(elementPath);
-    stopInteractionTracker();
-
-    // Persist to localStorage (moves previous "last" to "previous")
-    saveToStorage({
-      findings,
-      summary,
-      data,
-      elementPath,
-      interactions: interactionLog()
-    });
-    el?.removeAttribute('data-treelocator-recording');
-    setRecordingState('results');
-    dejitterInstance = null;
-  }
-  function replayRecording() {
-    const events = interactionLog();
-    if (events.length === 0) return;
-    stopReplay();
-    setReplaying(true);
-    let eventIdx = 0;
-    function scheduleNext() {
-      if (eventIdx >= events.length) {
-        stopReplay();
-        return;
-      }
-      const evt = events[eventIdx];
-      const delay = eventIdx === 0 ? 100 : evt.t - events[eventIdx - 1].t;
-      replayTimerId = window.setTimeout(() => {
-        // Show click indicator
-        setReplayBox({
-          x: evt.x - 12,
-          y: evt.y - 12,
-          w: 24,
-          h: 24
-        });
-
-        // Dispatch a real click at the recorded position
-        const target = document.elementFromPoint(evt.x, evt.y);
-        if (target) {
-          target.dispatchEvent(new MouseEvent('click', {
-            bubbles: true,
-            cancelable: true,
-            clientX: evt.x,
-            clientY: evt.y,
-            view: window
-          }));
-        }
-
-        // Clear click indicator after a short flash
-        window.setTimeout(() => setReplayBox(null), 200);
-        eventIdx++;
-        scheduleNext();
-      }, Math.max(delay, 50));
-    }
-    scheduleNext();
-  }
-  function stopReplay() {
-    if (replayTimerId) {
-      clearTimeout(replayTimerId);
-      replayTimerId = null;
-    }
-    setReplaying(false);
-    setReplayBox(null);
-  }
-  function replayWithRecord(elementOrSelector) {
-    // Resolve element
-    let element;
-    if (typeof elementOrSelector === 'string') {
-      const found = document.querySelector(elementOrSelector);
-      element = found instanceof HTMLElement ? found : null;
-    } else {
-      element = elementOrSelector;
-    }
-    if (!element) return Promise.resolve(null);
-
-    // Get stored interactions to replay
-    const stored = loadFromStorage();
-    const events = stored.last?.interactions ?? interactionLog();
-    if (events.length === 0) return Promise.resolve(null);
-    return new Promise(resolve => {
-      // Start recording on the element
-      element.setAttribute('data-treelocator-recording', 'true');
-      setRecordedElement(element);
-      dejitterInstance = createDejitterRecorder();
-      dejitterInstance.configure(DEJITTER_CONFIG);
-      dejitterInstance.start();
-      setRecordingState('recording');
-      setReplaying(true);
-      let eventIdx = 0;
-      function finishRecording() {
-        setReplaying(false);
-        setReplayBox(null);
-        if (!dejitterInstance) {
-          resolve(null);
-          return;
-        }
-        dejitterInstance.stop();
-        const findings = dejitterInstance.findings(true);
-        const summary = dejitterInstance.summary(true);
-        const data = dejitterInstance.getData();
-        const el = recordedElement();
-        let elementPath = "";
-        if (el) {
-          const treeNode = createTreeNode(el, props.adapterId);
-          if (treeNode) {
-            const ancestry = collectAncestry(treeNode);
-            elementPath = formatAncestryChain(ancestry);
-          }
-        }
-        setRecordingFindings(findings);
-        setRecordingSummary(summary);
-        setRecordingData(data);
-        setRecordingElementPath(elementPath);
-        setInteractionLog(events);
-        saveToStorage({
-          findings,
-          summary,
-          data,
-          elementPath,
-          interactions: events
-        });
-        el?.removeAttribute('data-treelocator-recording');
-        setRecordingState('results');
-        dejitterInstance = null;
-        resolve({
-          path: elementPath,
-          findings,
-          summary,
-          data,
-          interactions: events
-        });
-      }
-      function scheduleNext() {
-        if (eventIdx >= events.length) {
-          // Wait for CSS transitions to settle before stopping recording
-          replayTimerId = window.setTimeout(finishRecording, 500);
-          return;
-        }
-        const evt = events[eventIdx];
-        const delay = eventIdx === 0 ? 100 : evt.t - events[eventIdx - 1].t;
-        replayTimerId = window.setTimeout(() => {
-          setReplayBox({
-            x: evt.x - 12,
-            y: evt.y - 12,
-            w: 24,
-            h: 24
-          });
-          const target = document.elementFromPoint(evt.x, evt.y);
-          if (target) {
-            target.dispatchEvent(new MouseEvent('click', {
-              bubbles: true,
-              cancelable: true,
-              clientX: evt.x,
-              clientY: evt.y,
-              view: window
-            }));
-          }
-          window.setTimeout(() => setReplayBox(null), 200);
-          eventIdx++;
-          scheduleNext();
-        }, Math.max(delay, 50));
-      }
-      scheduleNext();
-    });
-  }
-  function dismissResults() {
-    stopReplay();
-    setRecordingFindings([]);
-    setRecordingSummary(null);
-    setRecordingData(null);
-    setRecordingElementPath("");
-    setInteractionLog([]);
-    setRecordedElement(null);
-    setViewingPrevious(false);
-    setRecordingState('idle');
-    try {
-      localStorage.removeItem(STORAGE_KEY);
-    } catch {}
-  }
-  function hasPreviousRecording() {
-    return loadFromStorage().previous !== null;
-  }
-  function loadPreviousRecording() {
-    const stored = loadFromStorage();
-    if (!stored.previous) return;
-    const prev = stored.previous;
-    setRecordingFindings(prev.findings);
-    setRecordingSummary(prev.summary);
-    setRecordingData(prev.data);
-    setRecordingElementPath(prev.elementPath);
-    setInteractionLog(prev.interactions);
-    setViewingPrevious(true);
-    setRecordingState('results');
-  }
-  function loadLatestRecording() {
-    const stored = loadFromStorage();
-    if (!stored.last) return;
-    const last = stored.last;
-    setRecordingFindings(last.findings);
-    setRecordingSummary(last.summary);
-    setRecordingData(last.data);
-    setRecordingElementPath(last.elementPath);
-    setInteractionLog(last.interactions);
-    setViewingPrevious(false);
-    setRecordingState('results');
-  }
-  function startInteractionTracker() {
-    recordingStartTime = performance.now();
-    setInteractionLog([]);
-    interactionClickHandler = e => {
-      if (isLocatorsOwnElement(e.target)) return;
-      const el = e.target;
-      const tag = el.tagName?.toLowerCase() || 'unknown';
-      const id = el.id ? '#' + el.id : '';
-      const cls = el.className && typeof el.className === 'string' ? '.' + el.className.split(' ')[0] : '';
-      setInteractionLog(prev => [...prev, {
-        t: Math.round(performance.now() - recordingStartTime),
-        type: 'click',
-        target: `${tag}${id}${cls}`,
-        x: e.clientX,
-        y: e.clientY
-      }]);
-    };
-    document.addEventListener('click', interactionClickHandler, {
-      capture: true
-    });
-  }
-  function stopInteractionTracker() {
-    if (interactionClickHandler) {
-      document.removeEventListener('click', interactionClickHandler, {
-        capture: true
-      });
-      interactionClickHandler = null;
+  function clickListener(e) {
+    if (settingsOpen() && !eventPathHasAttribute(e, "data-treelocator-settings-panel") && !eventPathHasAttribute(e, "data-treelocator-settings-toggle")) {
+      setSettingsOpen(false);
     }
-  }
-  function mouseOverListener(e) {
-    setHoldingModKey(e.altKey);
-    setHoldingShift(e.shiftKey);
 
-    // Don't update hovered element while recording -- highlight is sticky
-    if (recordingState() === 'recording') return;
-    const element = findElementAtPoint(e);
-    if (element) {
-      setCurrentElement(element);
-    }
-  }
-  function mouseDownUpListener(e) {
-    setHoldingModKey(e.altKey);
-    if (e.altKey || locatorActive() || recordingState() === 'selecting') {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  function clickListener(e) {
     // Handle recording element selection
-    if (recordingState() === 'selecting') {
+    if (recording.recordingState() === "selecting") {
       e.preventDefault();
       e.stopPropagation();
       const element = findElementAtPoint(e);
       if (element && !isLocatorsOwnElement(element)) {
-        startRecording(element);
+        recording.startRecording(element);
       }
       return;
     }
 
     // During recording, let clicks pass through (tracked by interaction logger)
-    if (recordingState() === 'recording') return;
+    if (recording.recordingState() === "recording") return;
     if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
       return;
     }
     const element = findElementAtPoint(e);
-    if (!element) {
-      return;
-    }
-    if (element instanceof HTMLElement && element.shadowRoot) {
-      return;
-    }
-    if (isLocatorsOwnElement(element)) {
-      return;
-    }
+    if (!element) return;
+    if (element instanceof HTMLElement && element.shadowRoot) return;
+    if (isLocatorsOwnElement(element)) return;
     e.preventDefault();
     e.stopPropagation();
 
-    // Copy ancestry to clipboard on alt+click
+    // Copy ancestry + computed styles to clipboard on alt+click
     const treeNode = createTreeNode(element, props.adapterId);
     if (treeNode) {
       let ancestry = collectAncestry(treeNode);
@@ -465,17 +104,37 @@ function Runtime(props) {
         ancestry = truncateAtFirstFile(ancestry);
       }
 
+      // Extract computed styles for the clicked element (if enabled)
+      const stylesEnabled = settings().computedStyles;
+      const elementLabel = getElementLabel(ancestry);
+      const stylesResult = stylesEnabled ? extractComputedStyles(element, elementLabel, {
+        includeDefaults: settings().computedStylesIncludeDefaults
+      }) : null;
+
       // Write immediately with component names (preserves user gesture for clipboard API)
       const formatted = formatAncestryChain(ancestry);
-      navigator.clipboard.writeText(formatted).then(() => {
+      const fullOutput = stylesResult ? formatted + "\n\n" + stylesResult.formatted : formatted;
+      navigator.clipboard.writeText(fullOutput).then(() => {
         setToastMessage("Copied to clipboard");
       });
 
-      // For React 19+: try to enrich with source map file paths and re-copy
+      // For React 19+: try to enrich with source map file paths and re-copy.
+      // If the enriched label differs, re-extract with forceFull:true so the
+      // diff-mode fast path doesn't collapse the second extraction (for the
+      // same element within the diff window) into "No changes detected".
       enrichAncestryWithSourceMaps(ancestry, element).then(enriched => {
         const enrichedFormatted = formatAncestryChain(enriched);
         if (enrichedFormatted !== formatted) {
-          navigator.clipboard.writeText(enrichedFormatted).then(() => {
+          let enrichedFull = enrichedFormatted;
+          if (stylesResult) {
+            const enrichedLabel = getElementLabel(enriched);
+            const enrichedStyles = enrichedLabel !== elementLabel ? extractComputedStyles(element, enrichedLabel, {
+              forceFull: true,
+              includeDefaults: settings().computedStylesIncludeDefaults
+            }).formatted : stylesResult.formatted;
+            enrichedFull = enrichedFormatted + "\n\n" + enrichedStyles;
+          }
+          navigator.clipboard.writeText(enrichedFull).then(() => {
             setToastMessage("Copied to clipboard");
           });
         }
@@ -487,58 +146,54 @@ function Runtime(props) {
       setLocatorActive(false);
     }
   }
-  function scrollListener() {
-    setCurrentElement(null);
-  }
-  const roots = [document];
-  document.querySelectorAll("*").forEach(node => {
-    if (node.id === "locatorjs-wrapper") {
-      return;
-    }
-    if (node.shadowRoot) {
-      roots.push(node.shadowRoot);
+  function mouseOverListener(e) {
+    setHoldingModKey(e.altKey);
+    setHoldingShift(e.shiftKey);
+
+    // Don't update hovered element while recording — highlight is sticky
+    if (recording.recordingState() === "recording") return;
+    const element = findElementAtPoint(e);
+    if (element) {
+      setCurrentElement(element);
     }
-  });
-  for (const root of roots) {
-    root.addEventListener("mouseover", mouseOverListener, {
-      capture: true
-    });
-    root.addEventListener("mousemove", mouseMoveListener, {
-      capture: true
-    });
-    root.addEventListener("keydown", keyDownListener);
-    root.addEventListener("keyup", keyUpListener);
-    root.addEventListener("click", clickListener, {
-      capture: true
-    });
-    root.addEventListener("mousedown", mouseDownUpListener, {
-      capture: true
-    });
-    root.addEventListener("mouseup", mouseDownUpListener, {
-      capture: true
-    });
-    root.addEventListener("scroll", scrollListener);
   }
-  onCleanup(() => {
-    stopReplay();
-    stopInteractionTracker();
-    for (const root of roots) {
-      root.removeEventListener("keyup", keyUpListener);
-      root.removeEventListener("keydown", keyDownListener);
-      root.removeEventListener("mouseover", mouseOverListener, {
-        capture: true
-      });
-      root.removeEventListener("click", clickListener, {
-        capture: true
-      });
-      root.removeEventListener("mousedown", mouseDownUpListener, {
-        capture: true
-      });
-      root.removeEventListener("mouseup", mouseDownUpListener, {
-        capture: true
-      });
-      root.removeEventListener("scroll", scrollListener);
-    }
+  useEventListeners({
+    mouseOverListener,
+    mouseMoveListener(e) {
+      setHoldingModKey(e.altKey);
+      setHoldingShift(e.shiftKey);
+    },
+    keyDownListener(e) {
+      setHoldingModKey(isCombinationModifiersPressed(e, true));
+      setHoldingShift(e.shiftKey);
+      if (e.key === "Escape") {
+        const wasSelecting = recording.recordingState() === "selecting";
+        const wasLocatorActive = locatorActive();
+        if (wasSelecting || wasLocatorActive) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (wasLocatorActive) setLocatorActive(false);
+          if (wasSelecting) recording.handleRecordClick();
+          setCurrentElement(null);
+        }
+      }
+    },
+    keyUpListener(e) {
+      setHoldingModKey(isCombinationModifiersPressed(e));
+      setHoldingShift(e.shiftKey);
+    },
+    clickListener,
+    mouseDownUpListener(e) {
+      setHoldingModKey(e.altKey);
+      if (e.altKey || locatorActive() || recording.recordingState() === "selecting") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    scrollListener() {
+      setCurrentElement(null);
+    },
+    onCleanup: recording.cleanup
   });
   return [_$memo(() => _$memo(() => !!isActive())() ? _$createComponent(MaybeOutline, {
     get currentElement() {
@@ -553,24 +208,24 @@ function Runtime(props) {
     get dashed() {
       return holdingShift();
     }
-  }) : null), _$memo(() => _$memo(() => !!(recordingState() === 'recording' && recordedElement()))() ? _$createComponent(RecordingOutline, {
+  }) : null), _$memo(() => _$memo(() => !!(recording.recordingState() === "recording" && recording.recordedElement()))() ? _$createComponent(RecordingOutline, {
     get element() {
-      return recordedElement();
+      return recording.recordedElement();
     }
-  }) : null), _$memo(() => _$memo(() => !!replayBox())() ? (() => {
-    var _el$8 = _tmpl$2();
-    _$setStyleProperty(_el$8, "position", "fixed");
-    _$setStyleProperty(_el$8, "background", "rgba(59, 130, 246, 0.4)");
-    _$setStyleProperty(_el$8, "border", "2px solid #3b82f6");
+  }) : null), _$memo(() => _$memo(() => !!recording.replayBox())() ? (() => {
+    var _el$ = _tmpl$();
+    _$setStyleProperty(_el$, "position", "fixed");
+    _$setStyleProperty(_el$, "background", "rgba(59, 130, 246, 0.4)");
+    _$setStyleProperty(_el$, "border", "2px solid #3b82f6");
     _$effect(_p$ => {
-      var _v$4 = replayBox().x + "px",
-        _v$5 = replayBox().y + "px",
-        _v$6 = replayBox().w + "px",
-        _v$7 = replayBox().h + "px";
-      _v$4 !== _p$.e && _$setStyleProperty(_el$8, "left", _p$.e = _v$4);
-      _v$5 !== _p$.t && _$setStyleProperty(_el$8, "top", _p$.t = _v$5);
-      _v$6 !== _p$.a && _$setStyleProperty(_el$8, "width", _p$.a = _v$6);
-      _v$7 !== _p$.o && _$setStyleProperty(_el$8, "height", _p$.o = _v$7);
+      var _v$ = recording.replayBox().x + "px",
+        _v$2 = recording.replayBox().y + "px",
+        _v$3 = recording.replayBox().w + "px",
+        _v$4 = recording.replayBox().h + "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,
@@ -578,118 +233,71 @@ function Runtime(props) {
       a: undefined,
       o: undefined
     });
-    return _el$8;
-  })() : null), _$memo(() => _$memo(() => recordingState() === 'results')() ? _$createComponent(RecordingResults, {
+    return _el$;
+  })() : null), _$memo(() => _$memo(() => recording.recordingState() === "results")() ? _$createComponent(RecordingResults, {
     get findings() {
-      return recordingFindings();
+      return recording.recordingFindings();
     },
     get summary() {
-      return recordingSummary();
+      return recording.recordingSummary();
     },
     get data() {
-      return recordingData();
+      return recording.recordingData();
     },
     get elementPath() {
-      return recordingElementPath();
+      return recording.recordingElementPath();
     },
     get interactions() {
-      return interactionLog();
+      return recording.interactionLog();
+    },
+    get visualDiff() {
+      return recording.visualDiff();
+    },
+    get onDismiss() {
+      return recording.dismissResults;
+    },
+    get onReplay() {
+      return recording.replayRecording;
     },
-    onDismiss: dismissResults,
-    onReplay: replayRecording,
     get replaying() {
-      return replaying();
+      return recording.replaying();
     },
     onToast: setToastMessage,
     get hasPrevious() {
-      return _$memo(() => !!!viewingPrevious())() && hasPreviousRecording();
+      return _$memo(() => !!!recording.viewingPrevious())() && recording.hasPreviousRecording();
+    },
+    get onLoadPrevious() {
+      return recording.loadPreviousRecording;
     },
-    onLoadPrevious: loadPreviousRecording,
     get hasNext() {
-      return viewingPrevious();
+      return recording.viewingPrevious();
     },
-    onLoadNext: loadLatestRecording
+    get onLoadNext() {
+      return recording.loadLatestRecording;
+    }
+  }) : null), _$memo(() => _$memo(() => !!settingsOpen())() ? _$createComponent(SettingsPanel, {
+    onDismiss: () => setSettingsOpen(false)
   }) : null), _$memo(() => _$memo(() => !!toastMessage())() && _$createComponent(Toast, {
     get message() {
       return toastMessage();
     },
     onClose: () => setToastMessage(null)
-  })), (() => {
-    var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.firstChild,
-      _el$6 = _el$4.nextSibling,
-      _el$7 = _el$3.nextSibling;
-    _$setStyleProperty(_el$, "bottom", "20px");
-    _$setStyleProperty(_el$, "right", "20px");
-    _$setStyleProperty(_el$3, "display", "flex");
-    _$setStyleProperty(_el$3, "overflow", "hidden");
-    _$setStyleProperty(_el$3, "transition", "box-shadow 0.2s ease-in-out");
-    _el$4.$$click = () => setLocatorActive(!locatorActive());
-    _el$4.addEventListener("mouseleave", e => e.currentTarget.style.background = "#ffffff");
-    _el$4.addEventListener("mouseenter", e => e.currentTarget.style.background = "#f0f0f0");
-    _$setStyleProperty(_el$4, "width", "54px");
-    _$setStyleProperty(_el$4, "height", "54px");
-    _$setStyleProperty(_el$4, "background", "#ffffff");
-    _$setStyleProperty(_el$4, "display", "flex");
-    _$setStyleProperty(_el$4, "cursor", "pointer");
-    _$setStyleProperty(_el$4, "overflow", "hidden");
-    _$setStyleProperty(_el$4, "transition", "background 0.15s ease-in-out");
-    _$setAttribute(_el$5, "src", treeIconUrl);
-    _el$6.$$click = handleRecordClick;
-    _el$6.addEventListener("mouseleave", e => {
-      if (recordingState() !== 'recording') e.currentTarget.style.background = "#ffffff";
-    });
-    _el$6.addEventListener("mouseenter", e => {
-      if (recordingState() !== 'recording') e.currentTarget.style.background = "#f0f0f0";
-    });
-    _$setStyleProperty(_el$6, "width", "54px");
-    _$setStyleProperty(_el$6, "height", "54px");
-    _$setStyleProperty(_el$6, "display", "flex");
-    _$setStyleProperty(_el$6, "cursor", "pointer");
-    _$setStyleProperty(_el$6, "transition", "background 0.15s ease-in-out");
-    _$insert(_el$6, (() => {
-      var _c$ = _$memo(() => recordingState() === 'recording');
-      return () => _c$() ? (() => {
-        var _el$9 = _tmpl$3();
-        _$setStyleProperty(_el$9, "width", "18px");
-        _$setStyleProperty(_el$9, "height", "18px");
-        _$setStyleProperty(_el$9, "background", "#fff");
-        return _el$9;
-      })() : (() => {
-        var _el$0 = _tmpl$4();
-        _$setStyleProperty(_el$0, "width", "18px");
-        _$setStyleProperty(_el$0, "height", "18px");
-        _$setStyleProperty(_el$0, "background", "#ef4444");
-        _$effect(_$p => _$setStyleProperty(_el$0, "animation", recordingState() === 'selecting' ? "treelocator-rec-pulse 1s ease-in-out infinite" : "none"));
-        return _el$0;
-      })();
-    })());
-    _$setStyleProperty(_el$7, "position", "absolute");
-    _$setStyleProperty(_el$7, "width", "1px");
-    _$setStyleProperty(_el$7, "height", "1px");
-    _$setStyleProperty(_el$7, "padding", "0");
-    _$setStyleProperty(_el$7, "margin", "-1px");
-    _$setStyleProperty(_el$7, "overflow", "hidden");
-    _$setStyleProperty(_el$7, "clip", "rect(0,0,0,0)");
-    _$setStyleProperty(_el$7, "border", "0");
-    _$effect(_p$ => {
-      var _v$ = locatorActive() ? "0 0 0 3px #3b82f6, 0 4px 14px rgba(0, 0, 0, 0.25)" : recordingState() === 'selecting' ? "0 0 0 3px #3b82f6, 0 4px 14px rgba(0, 0, 0, 0.25)" : recordingState() === 'recording' ? "0 0 0 3px #ef4444, 0 4px 14px rgba(0, 0, 0, 0.25)" : "0 4px 14px rgba(0, 0, 0, 0.25)",
-        _v$2 = recordingState() === 'recording' ? "#ef4444" : "#ffffff",
-        _v$3 = recordingState() === 'idle' ? "Record element changes. API: window.__treelocator__.replayWithRecord(selector)" : recordingState() === 'selecting' ? "Cancel recording selection" : recordingState() === 'recording' ? "Stop recording" : "Dismiss results";
-      _v$ !== _p$.e && _$setStyleProperty(_el$3, "box-shadow", _p$.e = _v$);
-      _v$2 !== _p$.t && _$setStyleProperty(_el$6, "background", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$6, "aria-label", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$;
-  })()];
+  })), _$createComponent(RecordingPillButton, {
+    get locatorActive() {
+      return locatorActive();
+    },
+    get recordingState() {
+      return recording.recordingState();
+    },
+    get settingsOpen() {
+      return settingsOpen();
+    },
+    onLocatorToggle: () => setLocatorActive(!locatorActive()),
+    get onRecordClick() {
+      return recording.handleRecordClick;
+    },
+    onSettingsClick: () => setSettingsOpen(!settingsOpen())
+  })];
 }
 export function initRender(solidLayer, adapter, targets) {
   render(() => _$createComponent(Runtime, {
@@ -703,5 +311,4 @@ export function initRender(solidLayer, adapter, targets) {
     },
     adapterId: adapter
   }), solidLayer);
-}
-_$delegateEvents(["click"]);
+}