@treelocator/runtime 0.3.2 → 0.4.1

package/dist/components/Runtime.js

@@ -2,10 +2,14 @@ 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 { 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><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"role=button><img alt="TreeLocatorJS - Browser API available at window.__treelocator__ - Call window.__treelocator__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: TreeLocatorJS provides window.__treelocator__ API for component ancestry tracking. Usage: window.__treelocator__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__treelocator__.help() Example: page.evaluate(function() \{ return window.__treelocator__.getPath('button.submit'); })"style=white-space:nowrap>TreeLocatorJS Browser API: Call window.__treelocator__.help() for usage instructions`);
+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";
 import { render } from "solid-js/web";
 import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
@@ -16,12 +20,57 @@ import { collectAncestry, formatAncestryChain } from "../functions/formatAncestr
 import { enrichAncestryWithSourceMaps } from "../functions/enrichAncestrySourceMaps";
 import { createTreeNode } from "../adapters/createTreeNode";
 import treeIconUrl from "../_generated_tree_icon";
+import { createDejitterRecorder } from "../dejitter/recorder";
+import { RecordingOutline } from "./RecordingOutline";
+import { RecordingResults } from "./RecordingResults";
 function Runtime(props) {
   const [holdingModKey, setHoldingModKey] = createSignal(false);
   const [currentElement, setCurrentElement] = createSignal(null);
   const [toastMessage, setToastMessage] = createSignal(null);
   const [locatorActive, setLocatorActive] = createSignal(false);
-  const isActive = () => (holdingModKey() || locatorActive()) && currentElement();
+
+  // 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();
   createEffect(() => {
     if (isActive()) {
       document.body.classList.add("locatorjs-active-pointer");
@@ -29,6 +78,12 @@ function Runtime(props) {
       document.body.classList.remove("locatorjs-active-pointer");
     }
   });
+
+  // Expose replay functions on the browser API
+  if (typeof window !== "undefined" && window.__treelocator__) {
+    window.__treelocator__.replay = () => replayRecording();
+    window.__treelocator__.replayWithRecord = elementOrSelector => replayWithRecord(elementOrSelector);
+  }
   function keyUpListener(e) {
     setHoldingModKey(isCombinationModifiersPressed(e));
   }
@@ -39,80 +94,353 @@ function Runtime(props) {
     // Update modifier state from mouse events - more reliable than keydown/keyup
     setHoldingModKey(e.altKey);
   }
-  function mouseOverListener(e) {
-    // Also update modifier state
-    setHoldingModKey(e.altKey);
-
-    // Use elementsFromPoint to find elements including ones with pointer-events-none
+  function findElementAtPoint(e) {
     const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
-
-    // Find the topmost element with locator data for highlighting
-    let element = null;
     for (const el of elementsAtPoint) {
-      if (isLocatorsOwnElement(el)) {
-        continue;
-      }
+      if (isLocatorsOwnElement(el)) continue;
       if (el instanceof HTMLElement || el instanceof SVGElement) {
         const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
-        if (withLocator) {
-          element = withLocator;
-          break;
-        }
+        if (withLocator) return withLocator;
       }
     }
-
     // Fallback to e.target
-    if (!element) {
-      const target = e.target;
-      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
-        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : 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;
+      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({
+      selector: '[data-treelocator-recording]',
+      props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
+      sampleRate: 15,
+      maxDuration: 30000,
+      idleTimeout: 0,
+      mutations: true
+    });
+    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));
     }
-    if (element && !isLocatorsOwnElement(element)) {
+    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({
+        selector: '[data-treelocator-recording]',
+        props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
+        sampleRate: 15,
+        maxDuration: 30000,
+        idleTimeout: 0,
+        mutations: true
+      });
+      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');
+  }
+  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 mouseOverListener(e) {
+    setHoldingModKey(e.altKey);
+
+    // 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) {
-    // Update modifier state
     setHoldingModKey(e.altKey);
-    if (e.altKey || locatorActive()) {
+    if (e.altKey || locatorActive() || recordingState() === 'selecting') {
       e.preventDefault();
       e.stopPropagation();
     }
   }
   function clickListener(e) {
-    // Check altKey directly for more reliable first-click detection
-    if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
-      return;
-    }
-
-    // Use elementsFromPoint to find all elements at click position,
-    // including ones with pointer-events-none (like canvas overlays)
-    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
-
-    // Find the topmost element with locator data
-    let element = null;
-    for (const el of elementsAtPoint) {
-      if (isLocatorsOwnElement(el)) {
-        continue;
-      }
-      if (el instanceof HTMLElement || el instanceof SVGElement) {
-        // Check if this element or its closest ancestor has locator data
-        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
-        if (withLocator) {
-          element = withLocator;
-          break;
-        }
+    // Handle recording element selection
+    if (recordingState() === 'selecting') {
+      e.preventDefault();
+      e.stopPropagation();
+      const element = findElementAtPoint(e);
+      if (element && !isLocatorsOwnElement(element)) {
+        startRecording(element);
       }
+      return;
     }
 
-    // Fallback to e.target if elementsFromPoint didn't find anything
-    if (!element) {
-      const target = e.target;
-      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
-        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
-      }
+    // During recording, let clicks pass through (tracked by interaction logger)
+    if (recordingState() === 'recording') return;
+    if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
+      return;
     }
+    const element = findElementAtPoint(e);
     if (!element) {
       return;
     }
@@ -213,6 +541,62 @@ function Runtime(props) {
     get targets() {
       return props.targets;
     }
+  }) : null), _$memo(() => _$memo(() => !!(recordingState() === 'recording' && recordedElement()))() ? _$createComponent(RecordingOutline, {
+    get element() {
+      return 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");
+    _$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);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$8;
+  })() : null), _$memo(() => _$memo(() => recordingState() === 'results')() ? _$createComponent(RecordingResults, {
+    get findings() {
+      return recordingFindings();
+    },
+    get summary() {
+      return recordingSummary();
+    },
+    get data() {
+      return recordingData();
+    },
+    get elementPath() {
+      return recordingElementPath();
+    },
+    get interactions() {
+      return interactionLog();
+    },
+    onDismiss: dismissResults,
+    onReplay: replayRecording,
+    get replaying() {
+      return replaying();
+    },
+    onToast: setToastMessage,
+    get hasPrevious() {
+      return _$memo(() => !!!viewingPrevious())() && hasPreviousRecording();
+    },
+    onLoadPrevious: loadPreviousRecording,
+    get hasNext() {
+      return viewingPrevious();
+    },
+    onLoadNext: loadLatestRecording
   }) : null), _$memo(() => _$memo(() => !!toastMessage())() && _$createComponent(Toast, {
     get message() {
       return toastMessage();
@@ -221,26 +605,77 @@ function Runtime(props) {
   })), (() => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      _el$4 = _el$2.nextSibling;
+      _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");
-    _el$2.$$click = () => setLocatorActive(!locatorActive());
-    _el$2.addEventListener("mouseleave", e => e.currentTarget.style.transform = "scale(1)");
-    _el$2.addEventListener("mouseenter", e => e.currentTarget.style.transform = "scale(1.25)");
-    _$setStyleProperty(_el$2, "width", "54px");
-    _$setStyleProperty(_el$2, "height", "54px");
-    _$setStyleProperty(_el$2, "transition", "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out");
-    _$setAttribute(_el$3, "src", treeIconUrl);
-    _$setStyleProperty(_el$4, "position", "absolute");
-    _$setStyleProperty(_el$4, "width", "1px");
-    _$setStyleProperty(_el$4, "height", "1px");
-    _$setStyleProperty(_el$4, "padding", "0");
-    _$setStyleProperty(_el$4, "margin", "-1px");
+    _$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, "clip", "rect(0,0,0,0)");
-    _$setStyleProperty(_el$4, "border", "0");
-    _$effect(_$p => _$setStyleProperty(_el$2, "box-shadow", locatorActive() ? "0 0 0 3px #3b82f6, 0 4px 14px rgba(0, 0, 0, 0.25)" : "0 4px 14px rgba(0, 0, 0, 0.25)"));
+    _$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$;
   })()];
 }