@treelocator/runtime 0.1.0

package/dist/components/ComponentOutline.d.ts

@@ -0,0 +1,7 @@
+import { LabelData } from "../types/LabelData";
+import { SimpleDOMRect } from "../types/types";
+export declare function ComponentOutline(props: {
+    bbox: SimpleDOMRect;
+    labels: LabelData[];
+    element: HTMLElement;
+}): import("solid-js").JSX.Element;

package/dist/components/ComponentOutline.js

@@ -0,0 +1,93 @@
+import { template as _$template } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class="border border-purple-500"style=z-index:1><div id=locatorjs-labels-section style=justify-content:center;pointer-events:auto><div id=locatorjs-labels-wrapper>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class="bg-purple-500 block text-white text-xs font-bold text-center px-1 py-0.5 rounded whitespace-nowrap pointer-events-auto">`);
+import { For } from "solid-js";
+import { PADDING } from "../consts";
+export function ComponentOutline(props) {
+  const isInside = () => props.bbox.height >= window.innerHeight - 40;
+  const isBelow = () => props.bbox.y < 30 && !isInside();
+  const left = () => Math.max(props.bbox.x - PADDING, 0);
+  const top = () => Math.max(props.bbox.y - PADDING, 0);
+  const cutFromTop = () => props.bbox.y < 0 ? -(props.bbox.y - PADDING) : 0;
+  const cutFromLeft = () => props.bbox.x < 0 ? -(props.bbox.x - PADDING) : 0;
+  const width = () => Math.min(props.bbox.width - cutFromLeft() + PADDING * 2, window.innerWidth);
+  const height = () => Math.min(props.bbox.height - cutFromTop() + PADDING * 2, window.innerHeight);
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    _$setStyleProperty(_el$, "position", "fixed");
+    _$insert(_el$3, _$createComponent(For, {
+      get each() {
+        return props.labels;
+      },
+      children: label => {
+        const labelClass = "bg-purple-500 block text-white text-xs font-bold text-center px-1 py-0.5 rounded whitespace-nowrap pointer-events-auto";
+        const labelStyles = {
+          "line-height": "18px"
+        };
+        return (() => {
+          var _el$4 = _tmpl$2();
+          _$style(_el$4, labelStyles);
+          _$insert(_el$4, () => label.label);
+          return _el$4;
+        })();
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$ = left() + "px",
+        _v$2 = top() + "px",
+        _v$3 = width() + "px",
+        _v$4 = height() + "px",
+        _v$5 = left() === 0 || top() === 0 ? "0" : "8px",
+        _v$6 = left() + width() === window.innerWidth || top() === 0 ? "0" : "8px",
+        _v$7 = left() === 0 || top() + height() === window.innerHeight ? "0" : "8px",
+        _v$8 = left() + width() === window.innerWidth || top() + height() === window.innerHeight ? "0" : "8px",
+        _v$9 = {
+          position: "absolute",
+          display: "flex",
+          bottom: isBelow() ? isInside() ? "2px" : "-28px" : undefined,
+          top: isBelow() ? undefined : isInside() ? "2px" : "-28px",
+          left: "0px",
+          width: "100%",
+          cursor: "pointer",
+          ...(isBelow() ? {
+            "border-bottom-left-radius": "100%",
+            "border-bottom-right-radius": "100%"
+          } : {
+            "border-top-left-radius": "100%",
+            "border-top-right-radius": "100%"
+          })
+        },
+        _v$0 = isBelow() ? "10px 10px 2px 10px" : "2px 10px 10px 10px";
+      _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);
+      _v$5 !== _p$.i && _$setStyleProperty(_el$, "border-top-left-radius", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setStyleProperty(_el$, "border-top-right-radius", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$, "border-bottom-left-radius", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setStyleProperty(_el$, "border-bottom-right-radius", _p$.h = _v$8);
+      _p$.r = _$style(_el$2, _v$9, _p$.r);
+      _v$0 !== _p$.d && _$setStyleProperty(_el$3, "padding", _p$.d = _v$0);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined
+    });
+    return _el$;
+  })();
+}

package/dist/components/MaybeOutline.d.ts

@@ -0,0 +1,7 @@
+import { Targets } from "@locator/shared";
+import { AdapterId } from "../consts";
+export declare function MaybeOutline(props: {
+    currentElement: HTMLElement;
+    adapterId?: AdapterId;
+    targets: Targets;
+}): import("solid-js").JSX.Element;

package/dist/components/MaybeOutline.js

@@ -0,0 +1,43 @@
+import { template as _$template } from "solid-js/web";
+import { effect as _$effect } 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 top-0 left-0 w-screen h-screen flex items-center justify-center"><div class="flex items-center justify-center"style="background-color:rgba(222, 0, 0, 0.3);border-radius:2px;font-size:12px;font-weight:bold;text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;text-overflow:ellipsis">No source found`);
+import { createMemo } from "solid-js";
+import { getElementInfo } from "../adapters/getElementInfo";
+import { Outline } from "./Outline";
+export function MaybeOutline(props) {
+  const elInfo = createMemo(() => getElementInfo(props.currentElement, props.adapterId));
+  const box = () => props.currentElement.getBoundingClientRect();
+  return _$memo(() => _$memo(() => !!elInfo())() ? _$createComponent(Outline, {
+    get element() {
+      return elInfo();
+    },
+    get targets() {
+      return props.targets;
+    }
+  }) : (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _$setStyleProperty(_el$2, "position", "absolute");
+    _$setStyleProperty(_el$2, "border", "1px solid rgba(222, 0, 0, 0.5)");
+    _$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$2, "left", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })());
+}

package/dist/components/Outline.d.ts

@@ -0,0 +1,25 @@
+import type { Targets } from "@locator/shared";
+import type { FullElementInfo } from "../adapters/adapterApi";
+type Box = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    label: string;
+};
+type IndividualBoxes = {
+    top: Box;
+    left: Box;
+    right: Box;
+    bottom: Box;
+};
+export type AllBoxes = {
+    margin: IndividualBoxes;
+    padding: IndividualBoxes;
+    innerBox: Box;
+};
+export declare function Outline(props: {
+    element: FullElementInfo;
+    targets: Targets;
+}): import("solid-js").JSX.Element;
+export {};

package/dist/components/Outline.js

@@ -0,0 +1,135 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed flex text-xs font-bold items-center justify-center text-sky-500 rounded border border-solid border-sky-500"style="z-index:2;text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;text-overflow:ellipsis">`);
+import { RenderBoxes } from "./RenderBoxes";
+export function Outline(props) {
+  const box = () => props.element.thisElement.box;
+  const domElementInfo = () => {
+    const htmlElement = props.element.htmlElement;
+    const box = props.element.thisElement.box;
+    if (htmlElement && box) {
+      const style = window.getComputedStyle(htmlElement);
+      const margin = {
+        top: parseFloat(style.marginTop),
+        left: parseFloat(style.marginLeft),
+        right: parseFloat(style.marginRight),
+        bottom: parseFloat(style.marginBottom)
+      };
+      const padding = {
+        top: parseFloat(style.paddingTop),
+        left: parseFloat(style.paddingLeft),
+        right: parseFloat(style.paddingRight),
+        bottom: parseFloat(style.paddingBottom)
+      };
+      const individualMarginBoxes = {
+        top: {
+          top: box.y - margin.top,
+          left: box.x,
+          width: box.width,
+          height: margin.top,
+          label: label(margin.top)
+        },
+        left: {
+          top: box.y - margin.top,
+          left: box.x - margin.left,
+          width: margin.left,
+          height: box.height + margin.top + margin.bottom,
+          label: label(margin.left)
+        },
+        right: {
+          top: box.y - margin.top,
+          left: box.x + box.width,
+          width: margin.right,
+          height: box.height + margin.top + margin.bottom,
+          label: label(margin.right)
+        },
+        bottom: {
+          top: box.y + box.height,
+          left: box.x,
+          width: box.width,
+          height: margin.bottom,
+          label: label(margin.bottom)
+        }
+      };
+      const individualPaddingBoxes = {
+        top: {
+          top: box.y,
+          left: box.x,
+          width: box.width,
+          height: padding.top,
+          label: label(padding.top)
+        },
+        left: {
+          top: box.y + padding.top,
+          left: box.x,
+          width: padding.left,
+          height: box.height - padding.top - padding.bottom,
+          label: label(padding.left)
+        },
+        right: {
+          top: box.y + padding.top,
+          left: box.x + box.width - padding.right,
+          width: padding.right,
+          height: box.height - padding.top - padding.bottom,
+          label: label(padding.right)
+        },
+        bottom: {
+          top: box.y + box.height - padding.bottom,
+          left: box.x,
+          width: box.width,
+          height: padding.bottom,
+          label: label(padding.bottom)
+        }
+      };
+      return {
+        margin: individualMarginBoxes,
+        padding: individualPaddingBoxes,
+        innerBox: {
+          top: box.y + padding.top,
+          left: box.x + padding.left,
+          width: box.width - padding.left - padding.right,
+          height: box.height - padding.top - padding.bottom,
+          label: ""
+        }
+      };
+    }
+    return null;
+  };
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _$insert(_el$, (() => {
+      var _c$ = _$memo(() => !!domElementInfo());
+      return () => _c$() && _$createComponent(RenderBoxes, {
+        get allBoxes() {
+          return domElementInfo();
+        }
+      });
+    })(), _el$2);
+    _$insert(_el$2, () => props.element.thisElement.label);
+    _$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$2, "left", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}
+function label(value) {
+  return value ? `${value}px` : "";
+}

package/dist/components/RenderBoxes.d.ts

@@ -0,0 +1,4 @@
+import { AllBoxes } from "./Outline";
+export declare function RenderBoxes(props: {
+    allBoxes: AllBoxes;
+}): import("solid-js").JSX.Element;

package/dist/components/RenderBoxes.js

@@ -0,0 +1,73 @@
+import { template as _$template } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed flex text-xs font-bold items-center justify-center text-blue-500 bg-blue-500/30"style="text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff">`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class="fixed flex text-xs font-bold items-center justify-center text-orange-500 bg-orange-500/30"style="text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff">`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class="fixed flex text-xs font-bold items-center justify-center text-green-500 bg-green-500/30"style="text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff">`);
+export function RenderBoxes(props) {
+  return [_$memo(() => Object.entries(props.allBoxes.margin).map(([, box]) => {
+    return (() => {
+      var _el$2 = _tmpl$2();
+      _$effect(_p$ => {
+        var _v$5 = box.left + "px",
+          _v$6 = box.top + "px",
+          _v$7 = box.width + "px",
+          _v$8 = box.height + "px";
+        _v$5 !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$5);
+        _v$6 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$6);
+        _v$7 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$7);
+        _v$8 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$8);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$2;
+    })();
+  })), _$memo(() => Object.entries(props.allBoxes.padding).map(([, box]) => {
+    return (() => {
+      var _el$3 = _tmpl$3();
+      _$effect(_p$ => {
+        var _v$9 = box.left + "px",
+          _v$0 = box.top + "px",
+          _v$1 = box.width + "px",
+          _v$10 = box.height + "px";
+        _v$9 !== _p$.e && _$setStyleProperty(_el$3, "left", _p$.e = _v$9);
+        _v$0 !== _p$.t && _$setStyleProperty(_el$3, "top", _p$.t = _v$0);
+        _v$1 !== _p$.a && _$setStyleProperty(_el$3, "width", _p$.a = _v$1);
+        _v$10 !== _p$.o && _$setStyleProperty(_el$3, "height", _p$.o = _v$10);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$3;
+    })();
+  })), (() => {
+    var _el$ = _tmpl$();
+    _$insert(_el$, () => props.allBoxes.innerBox.label);
+    _$effect(_p$ => {
+      var _v$ = props.allBoxes.innerBox.left + "px",
+        _v$2 = props.allBoxes.innerBox.top + "px",
+        _v$3 = props.allBoxes.innerBox.width + "px",
+        _v$4 = props.allBoxes.innerBox.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/Runtime.d.ts

@@ -0,0 +1,3 @@
+import { AdapterId } from "../consts";
+import { Targets as SetupTargets } from "../types/types";
+export declare function initRender(solidLayer: HTMLDivElement, adapter: AdapterId | undefined, targets: SetupTargets): void;

package/dist/components/Runtime.js

@@ -0,0 +1,188 @@
+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 { 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="LocatorJS - Component Ancestry Tracker"data-locatorjs-api=window.__locatorjs__ data-locatorjs-help=window.__locatorjs__.help() style=z-index:2147483646><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="LocatorJS: Get component paths using window.__locatorjs__.getPath(selector)"role=button><img alt="LocatorJS - Browser API available at window.__locatorjs__ - Call window.__locatorjs__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: LocatorJS provides window.__locatorjs__ API for component ancestry tracking. Usage: window.__locatorjs__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__locatorjs__.help() Example: page.evaluate(function() \{ return window.__locatorjs__.getPath('button.submit'); })"style=white-space:nowrap>LocatorJS Browser API: Call window.__locatorjs__.help() for usage instructions`);
+import { batch, createEffect, createSignal, onCleanup } 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 } from "../functions/formatAncestryChain";
+import { createTreeNode } from "../adapters/createTreeNode";
+import treeIconUrl from "../_generated_tree_icon";
+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();
+  createEffect(() => {
+    if (isActive()) {
+      document.body.classList.add("locatorjs-active-pointer");
+    } else {
+      document.body.classList.remove("locatorjs-active-pointer");
+    }
+  });
+  function keyUpListener(e) {
+    setHoldingModKey(isCombinationModifiersPressed(e));
+  }
+  function keyDownListener(e) {
+    setHoldingModKey(isCombinationModifiersPressed(e, true));
+  }
+  function mouseOverListener(e) {
+    const target = e.target;
+    if (target && target instanceof HTMLElement) {
+      if (isLocatorsOwnElement(target)) {
+        return;
+      }
+      setHoldingModKey(isCombinationModifiersPressed(e, true));
+      batch(() => {
+        setCurrentElement(target);
+      });
+    }
+  }
+  function mouseDownUpListener(e) {
+    if (isCombinationModifiersPressed(e) || locatorActive()) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  function clickListener(e) {
+    if (!isCombinationModifiersPressed(e) && !locatorActive()) {
+      return;
+    }
+    const target = e.target;
+    if (target && target instanceof HTMLElement) {
+      if (target.shadowRoot) {
+        return;
+      }
+      if (isLocatorsOwnElement(target)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Copy ancestry to clipboard on alt+click
+      const treeNode = createTreeNode(target, props.adapterId);
+      if (treeNode) {
+        const ancestry = collectAncestry(treeNode);
+        const formatted = formatAncestryChain(ancestry);
+        navigator.clipboard.writeText(formatted).then(() => {
+          setToastMessage("Copied to clipboard");
+        });
+      }
+
+      // Deactivate toggle after click
+      if (locatorActive()) {
+        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);
+    }
+  });
+  for (const root of roots) {
+    root.addEventListener("mouseover", mouseOverListener, {
+      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(() => {
+    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);
+    }
+  });
+  return [_$memo(() => _$memo(() => !!isActive())() ? _$createComponent(MaybeOutline, {
+    get currentElement() {
+      return currentElement();
+    },
+    get adapterId() {
+      return props.adapterId;
+    },
+    get targets() {
+      return props.targets;
+    }
+  }) : null), _$memo(() => _$memo(() => !!toastMessage())() && _$createComponent(Toast, {
+    get message() {
+      return toastMessage();
+    },
+    onClose: () => setToastMessage(null)
+  })), (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$2.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$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)"));
+    return _el$;
+  })()];
+}
+export function initRender(solidLayer, adapter, targets) {
+  render(() => _$createComponent(Runtime, {
+    get targets() {
+      return Object.fromEntries(Object.entries(targets).map(([key, t]) => {
+        return [key, typeof t == "string" ? {
+          url: t,
+          label: key
+        } : t];
+      }));
+    },
+    adapterId: adapter
+  }), solidLayer);
+}
+_$delegateEvents(["click"]);

package/dist/components/SimpleNodeOutline.d.ts

@@ -0,0 +1,4 @@
+import { TreeNode } from "../types/TreeNode";
+export declare function SimpleNodeOutline(props: {
+    node: TreeNode;
+}): import("solid-js").JSX.Element;

package/dist/components/SimpleNodeOutline.js

@@ -0,0 +1,47 @@
+import { template as _$template } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div>`);
+export function SimpleNodeOutline(props) {
+  const offset = () => props.node.type === "component" ? 2 : 0;
+  const box = () => props.node.getBox();
+  return (() => {
+    var _el$ = _tmpl$();
+    _$insert(_el$, (() => {
+      var _c$ = _$memo(() => !!box());
+      return () => _c$() ? (() => {
+        var _el$2 = _tmpl$();
+        _$setStyleProperty(_el$2, "position", "fixed");
+        _$effect(_p$ => {
+          var _v$ = box().x - offset() + "px",
+            _v$2 = box().y - offset() + "px",
+            _v$3 = box().width + offset() * 2 + "px",
+            _v$4 = box().height + offset() * 2 + "px",
+            _v$5 = props.node.type === "component" ? "2px solid rgba(200,0,0,1)" : "1px solid rgba(200,0,0,1)",
+            _v$6 = props.node.type === "component" ? "5px" : "3px",
+            _v$7 = props.node.type === "component" ? 1000 : 10;
+          _v$ !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
+          _v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
+          _v$5 !== _p$.i && _$setStyleProperty(_el$2, "border", _p$.i = _v$5);
+          _v$6 !== _p$.n && _$setStyleProperty(_el$2, "border-radius", _p$.n = _v$6);
+          _v$7 !== _p$.s && _$setStyleProperty(_el$2, "z-index", _p$.s = _v$7);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined
+        });
+        return _el$2;
+      })() : null;
+    })());
+    return _el$;
+  })();
+}

package/dist/components/Toast.d.ts

@@ -0,0 +1,4 @@
+export declare function Toast(props: {
+    message: string;
+    onClose: () => void;
+}): import("solid-js").JSX.Element;