pixelagent 0.1.16 → 0.1.17

package/dist/pixelagent.js

@@ -1,5 +1,5 @@
 import { jsxs as d, Fragment as K, jsx as n } from "react/jsx-runtime";
-import { useState as S, useEffect as H, useRef as Y, useMemo as xe, useLayoutEffect as Kt, useCallback as E, useId as jt } from "react";
+import { useState as S, useEffect as _, useRef as Y, useMemo as xe, useLayoutEffect as Kt, useCallback as $, useId as jt } from "react";
 import { getElementDisplayLabel as Xe, captureTextSnapshot as tt, captureInlineStyles as nt, restoreInlineStyles as we, restoreTextSnapshot as ke, getPreviewTargets as $e, clearTailwindStatePreview as Ce, applyTailwindStatePreview as ze, setEditableTextPreview as rt, getRelevantComputedStyles as Me, getEditableTextInfo as fe, readReactSource as Ge, detectStylingSystem as kt, countElementInstances as Ct, getScopeSelector as Mt, getCssSelector as At, copyToClipboard as St, getWindowSelectionText as Lt, getNearestReactComponentName as qt, getDomPath as Jt, resolveElementFromEntry as Et, getAnnotationSessionDisplay as Zt, loadAnnotationSession as Qt, saveAnnotationSession as en, DEFAULT_PIXEL_AGENT_UI_SETTINGS as tn, readHostThemeFromDocument as it, resolvePixelAgentChrome as nn, applyHostThemeToDocument as rn, pixelAgentRootAttributes as an, getElementsInArea as on, formatAllAnnotations as sn, formatAnnotation as ln } from "@pixelagent/shared";
 export * from "@pixelagent/shared";
 import { createPortal as Ke } from "react-dom";
@@ -10,7 +10,7 @@ function $t({
   primarySelected: r = null
 }) {
   const [a, s] = S([]), o = r ?? t;
-  if (H(() => {
+  if (_(() => {
     const l = /* @__PURE__ */ new Map(), f = i.length > 0;
     e && !t && !f && l.set(e, !1), t && l.set(t, !0);
     for (const m of i)
@@ -81,19 +81,19 @@ function dn(e, t, i, r = It) {
   if (!u) return null;
   const l = u.createImageData(s, o), f = l.data, p = Math.min(0.5, i / Math.min(e, t)), v = 0.3, m = 0.2, g = Math.max(0.4, p + 0.1);
   let b = 0;
-  const L = new Float32Array(s * o * 2);
+  const E = new Float32Array(s * o * 2);
   let N = 0;
   for (let k = 0; k < o; k++)
-    for (let $ = 0; $ < s; $++) {
-      const P = $ / s - 0.5, R = k / o - 0.5, x = un(P, R, v, m, g), I = at(0.8, 0, x - 0.15), C = at(0, 1, I), h = (P * C + 0.5) * s - $, O = (R * C + 0.5) * o - k;
-      Math.abs(h) > b && (b = Math.abs(h)), Math.abs(O) > b && (b = Math.abs(O)), L[N++] = h, L[N++] = O;
+    for (let I = 0; I < s; I++) {
+      const P = I / s - 0.5, R = k / o - 0.5, x = un(P, R, v, m, g), T = at(0.8, 0, x - 0.15), C = at(0, 1, T), h = (P * C + 0.5) * s - I, F = (R * C + 0.5) * o - k;
+      Math.abs(h) > b && (b = Math.abs(h)), Math.abs(F) > b && (b = Math.abs(F)), E[N++] = h, E[N++] = F;
     }
   if (b === 0) return null;
   b *= 0.4 * r;
   let w = 0;
   for (let k = 0; k < f.length; k += 4) {
-    const $ = L[w++] / b + 0.5, P = L[w++] / b + 0.5;
-    f[k] = $ * 255, f[k + 1] = P * 255, f[k + 2] = 0, f[k + 3] = 255;
+    const I = E[w++] / b + 0.5, P = E[w++] / b + 0.5;
+    f[k] = I * 255, f[k + 1] = P * 255, f[k + 2] = 0, f[k + 3] = 255;
   }
   return u.putImageData(l, 0, 0), {
     href: c.toDataURL("image/png"),
@@ -142,16 +142,16 @@ function Tt({
     const g = l.current;
     if (!g) return;
     let b = 0;
-    const L = () => {
+    const E = () => {
       cancelAnimationFrame(b), b = requestAnimationFrame(() => {
-        const w = g.getBoundingClientRect(), k = Math.round(w.width), $ = Math.round(w.height);
-        if (k < 8 || $ < 8) return;
-        const P = e === "capsule" ? $ / 2 : Math.min(c, k / 2, $ / 2), R = dn(k, $, P, u);
+        const w = g.getBoundingClientRect(), k = Math.round(w.width), I = Math.round(w.height);
+        if (k < 8 || I < 8) return;
+        const P = e === "capsule" ? I / 2 : Math.min(c, k / 2, I / 2), R = dn(k, I, P, u);
         R && v(R);
       });
     };
-    L();
-    const N = new ResizeObserver(L);
+    E();
+    const N = new ResizeObserver(E);
     return N.observe(g), () => {
       cancelAnimationFrame(b), N.disconnect();
     };
@@ -235,7 +235,7 @@ function Tt({
     )
   ] });
 }
-function V({
+function H({
   variant: e = "regular",
   className: t = "",
   children: i,
@@ -273,7 +273,7 @@ function Rt({
   defaultPosition: e = null,
   computeDefaultPosition: t
 } = {}) {
-  const [i, r] = S(e), [a, s] = S(!1), o = Y(null), c = Y(null), u = E(() => {
+  const [i, r] = S(e), [a, s] = S(!1), o = Y(null), c = Y(null), u = $(() => {
     if (i !== null) return;
     const m = c.current;
     if (!m) return;
@@ -285,9 +285,9 @@ function Rt({
       }
     );
   }, [i, t]);
-  H(() => {
+  _(() => {
     u();
-  }, [u]), H(() => {
+  }, [u]), _(() => {
     const m = () => {
       r((g) => {
         if (!g || !c.current) return g;
@@ -300,15 +300,15 @@ function Rt({
     };
     return window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
   }, []);
-  const l = E(
+  const l = $(
     (m) => {
       if (m.button !== 0) return;
       const g = c.current;
       if (!g) return;
       let b = i;
       if (!b) {
-        const L = g.getBoundingClientRect();
-        b = { x: L.left, y: L.top }, r(b);
+        const E = g.getBoundingClientRect();
+        b = { x: E.left, y: E.top }, r(b);
       }
       o.current = {
         pointerId: m.pointerId,
@@ -319,11 +319,11 @@ function Rt({
       }, s(!0), m.currentTarget.setPointerCapture(m.pointerId), m.preventDefault();
     },
     [i]
-  ), f = E((m) => {
+  ), f = $((m) => {
     if (!o.current || o.current.pointerId !== m.pointerId) return;
-    const g = c.current, b = (g == null ? void 0 : g.offsetWidth) ?? 320, L = (g == null ? void 0 : g.offsetHeight) ?? 48, N = m.clientX - o.current.startX, w = m.clientY - o.current.startY, k = Math.max(8, Math.min(window.innerWidth - b - 8, o.current.originX + N)), $ = Math.max(8, Math.min(window.innerHeight - L - 8, o.current.originY + w));
-    r({ x: k, y: $ });
-  }, []), p = E((m) => {
+    const g = c.current, b = (g == null ? void 0 : g.offsetWidth) ?? 320, E = (g == null ? void 0 : g.offsetHeight) ?? 48, N = m.clientX - o.current.startX, w = m.clientY - o.current.startY, k = Math.max(8, Math.min(window.innerWidth - b - 8, o.current.originX + N)), I = Math.max(8, Math.min(window.innerHeight - E - 8, o.current.originY + w));
+    r({ x: k, y: I });
+  }, []), p = $((m) => {
     if (!(!o.current || o.current.pointerId !== m.pointerId)) {
       o.current = null, s(!1);
       try {
@@ -482,56 +482,56 @@ function Nn() {
   return t ? { "data-pa-chrome": t } : {};
 }
 function _e({ label: e, value: t, onChange: i }) {
-  const [r, a] = S(!1), [s, o] = S(() => ot(t)), c = Y(null), u = Y(null), l = Y(null), f = jt(), [p, v] = S({ top: 0, left: 0, width: 260 }), m = Ot(s), g = bn(Pt(m)), b = je(t) ? t : vn(m), L = e.toLowerCase().includes("color") ? e : `${e} color`;
-  H(() => {
+  const [r, a] = S(!1), [s, o] = S(() => ot(t)), c = Y(null), u = Y(null), l = Y(null), f = jt(), [p, v] = S({ top: 0, left: 0, width: 260 }), m = Ot(s), g = bn(Pt(m)), b = je(t) ? t : vn(m), E = e.toLowerCase().includes("color") ? e : `${e} color`;
+  _(() => {
     o(ot(t));
   }, [t]);
-  const N = E(
+  const N = $(
     (x) => {
       o(x), i(wn(x));
     },
     [i]
-  ), w = E(
+  ), w = $(
     (x) => {
       N(Dt(x));
     },
     [N]
-  ), k = E(() => {
+  ), k = $(() => {
     const x = c.current;
     if (!x) return;
-    const I = x.getBoundingClientRect(), C = 260;
-    let h = I.left;
+    const T = x.getBoundingClientRect(), C = 260;
+    let h = T.left;
     h + C > window.innerWidth - 12 && (h = window.innerWidth - C - 12), h = Math.max(12, h);
-    let O = I.bottom + 8;
-    const U = 320;
-    O + U > window.innerHeight - 12 && (O = Math.max(12, I.top - U - 8)), v({ top: O, left: h, width: C });
+    let F = T.bottom + 8;
+    const W = 320;
+    F + W > window.innerHeight - 12 && (F = Math.max(12, T.top - W - 8)), v({ top: F, left: h, width: C });
   }, []);
-  H(() => {
+  _(() => {
     if (!r) return;
     k();
     const x = (C) => {
-      var O, U;
+      var F, W;
       const h = C.target;
-      (O = c.current) != null && O.contains(h) || (U = u.current) != null && U.contains(h) || a(!1);
-    }, I = (C) => {
+      (F = c.current) != null && F.contains(h) || (W = u.current) != null && W.contains(h) || a(!1);
+    }, T = (C) => {
       C.key === "Escape" && a(!1);
     };
-    return window.addEventListener("mousedown", x, !0), window.addEventListener("keydown", I), window.addEventListener("resize", k), window.addEventListener("scroll", k, !0), () => {
-      window.removeEventListener("mousedown", x, !0), window.removeEventListener("keydown", I), window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
+    return window.addEventListener("mousedown", x, !0), window.addEventListener("keydown", T), window.addEventListener("resize", k), window.addEventListener("scroll", k, !0), () => {
+      window.removeEventListener("mousedown", x, !0), window.removeEventListener("keydown", T), window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
     };
   }, [r, k]);
-  const $ = (x, I) => {
-    var U;
-    const C = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
+  const I = (x, T) => {
+    var W;
+    const C = (W = l.current) == null ? void 0 : W.getBoundingClientRect();
     if (!C) return;
-    const { x: h, y: O } = xn(x, I, C);
-    N({ ...s, s: h, v: 100 - O });
+    const { x: h, y: F } = xn(x, T, C);
+    N({ ...s, s: h, v: 100 - F });
   }, P = (x) => {
-    x.preventDefault(), $(x.clientX, x.clientY);
-    const I = (h) => $(h.clientX, h.clientY), C = () => {
-      window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", C);
+    x.preventDefault(), I(x.clientX, x.clientY);
+    const T = (h) => I(h.clientX, h.clientY), C = () => {
+      window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", C);
     };
-    window.addEventListener("mousemove", I), window.addEventListener("mouseup", C);
+    window.addEventListener("mousemove", T), window.addEventListener("mouseup", C);
   }, R = r ? Ke(
     /* @__PURE__ */ n(
       "div",
@@ -545,7 +545,7 @@ function _e({ label: e, value: t, onChange: i }) {
             ref: u,
             id: f,
             role: "dialog",
-            "aria-label": L,
+            "aria-label": E,
             className: "pa-color-picker",
             style: { top: p.top, left: p.left, width: p.width },
             children: [
@@ -558,7 +558,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: L })
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: E })
               ] }),
               /* @__PURE__ */ n(
                 "div",
@@ -622,8 +622,8 @@ function _e({ label: e, value: t, onChange: i }) {
                     min: 0,
                     max: 255,
                     value: m[x],
-                    onChange: (I) => {
-                      const C = kn(parseInt(I.target.value, 10));
+                    onChange: (T) => {
+                      const C = kn(parseInt(T.target.value, 10));
                       w({ ...m, [x]: C });
                     }
                   }
@@ -950,7 +950,7 @@ function Dn() {
 }
 function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
   const [s, o] = S(t);
-  return H(() => {
+  return _(() => {
     o(t);
   }, [t]), /* @__PURE__ */ d("label", { className: `pa-spacing-cell ${r ? "pa-spacing-cell--mixed" : ""}`, children: [
     /* @__PURE__ */ n("span", { className: "pa-spacing-cell-icon", children: e }),
@@ -1208,10 +1208,10 @@ function Gn({
   scopeHint: f,
   stateHint: p
 }) {
-  var I, C;
-  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", b = Yn(e["text-align"] ?? "left"), L = ((I = e.display) == null ? void 0 : I.trim()) ?? "", N = !!L, w = Xn.has(L), k = [...mt];
-  L && !mt.includes(L) && k.push(L);
-  const $ = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = $ === "normal" || $ === "" ? "0px" : $, R = e["border-style"] ?? "none", x = [...ft];
+  var T, C;
+  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", b = Yn(e["text-align"] ?? "left"), E = ((T = e.display) == null ? void 0 : T.trim()) ?? "", N = !!E, w = Xn.has(E), k = [...mt];
+  E && !mt.includes(E) && k.push(E);
+  const I = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = I === "normal" || I === "" ? "0px" : I, R = e["border-style"] ?? "none", x = [...ft];
   return R && !ft.includes(R) && x.push(R), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
     /* @__PURE__ */ d(ue, { title: "Targeting", defaultOpen: !0, children: [
       /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2", children: [
@@ -1432,7 +1432,7 @@ function Gn({
           "select",
           {
             className: "pa-select",
-            value: L,
+            value: E,
             onChange: (h) => t("display", h.target.value),
             children: k.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
           }
@@ -1537,118 +1537,121 @@ const Kn = 50, gt = [
 ];
 function jn(e, t, i) {
   var ee;
-  const r = Y([]), a = Y(/* @__PURE__ */ new Set()), s = Y([]), o = Y(null), c = Y([]), [u, l] = S({}), [f, p] = S({}), [v, m] = S("none"), [g, b] = S(""), [L, N] = S(""), [w, k] = S(() => /* @__PURE__ */ new Map()), [$, P] = S(!1), R = E(() => {
+  const r = Y([]), a = Y(/* @__PURE__ */ new Set()), s = Y([]), o = Y(null), c = Y([]), [u, l] = S({}), [f, p] = S({}), [v, m] = S("none"), [g, b] = S(""), [E, N] = S(""), [w, k] = S(() => /* @__PURE__ */ new Map()), [I, P] = S(!1), R = $(() => {
     const M = Array.from(a.current);
     return {
       inline: nt(M, [...gt]),
       text: e && v !== "none" ? tt(e, v) : null
     };
-  }, [e, v]), x = E(() => {
+  }, [e, v]), x = $(() => {
     c.current.push(R()), c.current.length > Kn && c.current.shift(), P(c.current.length > 0);
-  }, [R]), I = E(
+  }, [R]), T = $(
     (M) => {
-      var T;
+      var L;
       if (!e) return;
-      const F = Array.from(a.current);
-      we(s.current.filter((_) => F.includes(_.element))), o.current && ke(o.current);
+      const O = Array.from(a.current);
+      we(s.current.filter((z) => O.includes(z.element))), o.current && ke(o.current);
       const D = $e(e, t);
-      r.current = D, a.current = new Set(D), Ce(F), ze(D, i);
-      const z = e ? ((T = w.get(e)) == null ? void 0 : T.get(i)) ?? [] : [];
-      if (M && z.length > 0)
-        for (const _ of z)
-          if (_.property === "textContent" || _.property === "value")
+      r.current = D, a.current = new Set(D), Ce(O), ze(D, i);
+      const U = e ? ((L = w.get(e)) == null ? void 0 : L.get(i)) ?? [] : [];
+      if (M && U.length > 0)
+        for (const z of U)
+          if (z.property === "textContent" || z.property === "value")
             for (const X of D)
-              rt(X, _.property, _.newValue);
+              rt(X, z.property, z.newValue);
           else
             for (const X of D)
-              X.style.setProperty(_.property, _.newValue);
+              X.style.setProperty(z.property, z.newValue);
     },
     [e, t, i, w]
   );
-  H(() => {
+  _(() => {
     if (!e) {
       r.current = [], a.current = /* @__PURE__ */ new Set(), s.current = [], o.current = null, c.current = [], l({}), p({}), m("none"), b(""), N(""), k(/* @__PURE__ */ new Map()), P(!1);
       return;
     }
     const M = $e(e, t);
     r.current = M, a.current = new Set(M), s.current = nt(M, [...gt]), c.current = [], P(!1);
-    const F = Me(e);
-    l(F), p(F);
+    const O = Me(e);
+    l(O), p(O);
     const D = fe(e);
     return m(D.kind), b(D.value), N(D.value), o.current = D.kind !== "none" ? tt(e, D.kind) : null, ze(M, i), () => Ce(M);
-  }, [e]), H(() => {
-    e && I(!0);
-  }, [t]), H(() => {
-    var D;
+  }, [e]), _(() => {
+    e && T(!0);
+  }, [t]), _(() => {
+    var U;
     if (!e) return;
     const M = $e(e, t);
     r.current = M, we(
-      s.current.filter((z) => M.includes(z.element))
+      s.current.filter((L) => M.includes(L.element))
     );
-    const F = ((D = w.get(e)) == null ? void 0 : D.get(i)) ?? [];
-    for (const z of F)
-      if (!(z.property === "textContent" || z.property === "value"))
-        for (const T of M)
-          T.style.setProperty(z.property, z.newValue);
-    Ce(Array.from(a.current)), ze(M, i), a.current = new Set(M);
+    const O = ((U = w.get(e)) == null ? void 0 : U.get(i)) ?? [];
+    for (const L of O)
+      if (!(L.property === "textContent" || L.property === "value"))
+        for (const z of M)
+          z.style.setProperty(L.property, L.newValue);
+    const D = { ...f };
+    for (const L of O)
+      L.property === "textContent" || L.property === "value" || (D[L.property] = L.newValue);
+    l(D), Ce(Array.from(a.current)), ze(M, i), a.current = new Set(M);
   }, [i, e, t]);
-  const C = E(
-    (M, F, D) => {
-      e && k((z) => {
-        const T = new Map(z), _ = new Map(T.get(e) ?? /* @__PURE__ */ new Map()), q = (_.get(i) ?? []).filter((Re) => Re.property !== M);
-        return D === F ? q.length === 0 ? _.delete(i) : _.set(i, q) : _.set(i, [...q, { property: M, oldValue: F, newValue: D }]), _.size === 0 ? T.delete(e) : T.set(e, _), T;
+  const C = $(
+    (M, O, D) => {
+      e && k((U) => {
+        const L = new Map(U), z = new Map(L.get(e) ?? /* @__PURE__ */ new Map()), q = (z.get(i) ?? []).filter((Re) => Re.property !== M);
+        return D === O ? q.length === 0 ? z.delete(i) : z.set(i, q) : z.set(i, [...q, { property: M, oldValue: O, newValue: D }]), z.size === 0 ? L.delete(e) : L.set(e, z), L;
       });
     },
     [e, i]
-  ), h = E(
-    (M, F) => {
+  ), h = $(
+    (M, O) => {
       if (!e) return;
-      const D = { [M]: F };
-      M === "border-width" && (u["border-style"] ?? "none") === "none" && Sn(F) && (D["border-style"] = "solid"), x(), l((z) => ({ ...z, ...D }));
-      for (const [z, T] of Object.entries(D)) {
-        const _ = f[z] ?? "";
+      const D = { [M]: O };
+      M === "border-width" && (u["border-style"] ?? "none") === "none" && Sn(O) && (D["border-style"] = "solid"), x(), l((U) => ({ ...U, ...D }));
+      for (const [U, L] of Object.entries(D)) {
+        const z = f[U] ?? "";
         for (const X of r.current)
-          X.style.setProperty(z, T), a.current.add(X);
-        C(z, _, T);
+          X.style.setProperty(U, L), a.current.add(X);
+        C(U, z, L);
       }
     },
     [e, f, u, x, C]
-  ), O = E(
+  ), F = $(
     (M) => {
       if (!(!e || v === "none")) {
         x(), b(M);
-        for (const F of r.current)
-          rt(F, v, M), a.current.add(F);
-        C(v, L, M);
+        for (const O of r.current)
+          rt(O, v, M), a.current.add(O);
+        C(v, E, M);
       }
     },
-    [e, v, L, x, C]
-  ), U = E(() => {
+    [e, v, E, x, C]
+  ), W = $(() => {
     const M = c.current.pop();
     if (M && (we(M.inline), M.text && ke(M.text), P(c.current.length > 0), e)) {
       l(Me(e));
-      const F = fe(e);
-      F.kind !== "none" && b(F.value);
+      const O = fe(e);
+      O.kind !== "none" && b(O.value);
     }
-  }, [e]), ge = E(() => {
+  }, [e]), ge = $(() => {
     if (we(s.current), o.current && ke(o.current), c.current = [], P(!1), k(/* @__PURE__ */ new Map()), e) {
       l(Me(e));
       const M = fe(e);
       b(M.value);
     }
-  }, [e]), j = E(() => {
+  }, [e]), j = $(() => {
     we(s.current), o.current && ke(o.current);
-  }, []), oe = E(() => {
+  }, []), oe = $(() => {
     if (j(), Ce(Array.from(a.current)), c.current = [], P(!1), k(/* @__PURE__ */ new Map()), e) {
       l(Me(e));
       const M = fe(e);
       M.kind !== "none" && b(M.value);
     }
   }, [j, e]), re = e ? ((ee = w.get(e)) == null ? void 0 : ee.get(i)) ?? [] : [];
-  let W = 0;
+  let V = 0;
   for (const M of w.values())
-    for (const F of M.values()) W += F.length;
-  const G = E(() => {
+    for (const O of M.values()) V += O.length;
+  const G = $(() => {
     k(/* @__PURE__ */ new Map());
   }, []);
   return {
@@ -1657,12 +1660,12 @@ function jn(e, t, i) {
     textValue: g,
     pendingChanges: re,
     pendingByElement: w,
-    totalPendingCount: W,
+    totalPendingCount: V,
     clearAllPending: G,
-    canUndo: $,
+    canUndo: I,
     updateProperty: h,
-    updateText: O,
-    undo: U,
+    updateText: F,
+    undo: W,
     reset: ge,
     clearPreviews: oe,
     revertPreviews: j
@@ -1687,27 +1690,27 @@ function qn({
     textKind: m,
     textValue: g,
     pendingChanges: b,
-    pendingByElement: L,
+    pendingByElement: E,
     totalPendingCount: N,
     clearAllPending: w,
     canUndo: k,
-    updateProperty: $,
+    updateProperty: I,
     updateText: P,
     undo: R,
     reset: x,
-    clearPreviews: I,
+    clearPreviews: T,
     revertPreviews: C
-  } = jn(e, a, o), { elementRef: h, isDragging: O, style: U, dragHandleProps: ge } = Rt({
-    computeDefaultPosition: (T) => ({
-      x: window.innerWidth - T.width - 16,
+  } = jn(e, a, o), { elementRef: h, isDragging: F, style: W, dragHandleProps: ge } = Rt({
+    computeDefaultPosition: (L) => ({
+      x: window.innerWidth - L.width - 16,
       y: 16
     })
   });
-  H(() => (p == null || p({ clearPreviews: I, revertPreviews: C }), () => p == null ? void 0 : p(null)), [p, I, C]);
-  const j = E(
-    (T) => {
-      if (f(T.target)) return;
-      const X = document.elementsFromPoint(T.clientX, T.clientY).find(
+  _(() => (p == null || p({ clearPreviews: T, revertPreviews: C }), () => p == null ? void 0 : p(null)), [p, T, C]);
+  const j = $(
+    (L) => {
+      if (f(L.target)) return;
+      const X = document.elementsFromPoint(L.clientX, L.clientY).find(
         (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
@@ -1715,11 +1718,11 @@ function qn({
       r(X ?? null);
     },
     [f, r]
-  ), oe = E(
-    (T) => {
-      if (f(T.target)) return;
-      T.preventDefault(), T.stopPropagation();
-      const X = document.elementsFromPoint(T.clientX, T.clientY).find(
+  ), oe = $(
+    (L) => {
+      if (f(L.target)) return;
+      L.preventDefault(), L.stopPropagation();
+      const X = document.elementsFromPoint(L.clientX, L.clientY).find(
         (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
@@ -1728,21 +1731,21 @@ function qn({
     },
     [f, i]
   );
-  H(() => (document.addEventListener("mousemove", j, !0), document.addEventListener("click", oe, !0), () => {
+  _(() => (document.addEventListener("mousemove", j, !0), document.addEventListener("click", oe, !0), () => {
     document.removeEventListener("mousemove", j, !0), document.removeEventListener("click", oe, !0);
   }), [j, oe]);
   const re = async () => {
     if (N === 0) return;
-    const T = await u(L);
-    T.applied && (w(), T.skipRevert || C());
-  }, W = e ? Ge(e) : null, G = e ? kt(e) : null, ee = e ? Ct(e) : 0, M = e ? Mt(e, "all-instances") : "", F = o !== "normal" && G === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : o !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, D = ee > 1 ? a === "all-instances" ? `Preview & Apply on ${ee} elements (${M}).` : `This instance only — ${ee - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, z = xe(() => !e || a !== "all-instances" ? [] : $e(e, "all-instances"), [e, a]);
+    const L = await u(E);
+    L.applied && (w(), L.skipRevert || C());
+  }, V = e ? Ge(e) : null, G = e ? kt(e) : null, ee = e ? Ct(e) : 0, M = e ? Mt(e, "all-instances") : "", O = o !== "normal" && G === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : o !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, D = ee > 1 ? a === "all-instances" ? `Preview & Apply on ${ee} elements (${M}).` : `This instance only — ${ee - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, U = xe(() => !e || a !== "all-instances" ? [] : $e(e, "all-instances"), [e, a]);
   return /* @__PURE__ */ d(K, { children: [
     /* @__PURE__ */ n(
       $t,
       {
         element: a === "all-instances" ? null : t,
         selected: e,
-        multiSelected: z,
+        multiSelected: U,
         primarySelected: e
       }
     ),
@@ -1750,8 +1753,8 @@ function qn({
       "div",
       {
         ref: h,
-        className: `pa-edit-panel-float ${O ? "pa-edit-panel-float--dragging" : ""}`,
-        style: U,
+        className: `pa-edit-panel-float ${F ? "pa-edit-panel-float--dragging" : ""}`,
+        style: W,
         children: /* @__PURE__ */ n(Te, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ d("div", { className: "pa-edit-panel-inner", children: [
           /* @__PURE__ */ d("div", { className: "pa-edit-panel-header", children: [
             /* @__PURE__ */ n(
@@ -1785,12 +1788,12 @@ All instances: ${M}`,
                   children: Xe(e)
                 }
               ),
-              ((W == null ? void 0 : W.sourceFile) || G) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
-                (W == null ? void 0 : W.sourceFile) && /* @__PURE__ */ d(K, { children: [
-                  W.sourceFile,
-                  W.lineNumber ? `:${W.lineNumber}` : ""
+              ((V == null ? void 0 : V.sourceFile) || G) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
+                (V == null ? void 0 : V.sourceFile) && /* @__PURE__ */ d(K, { children: [
+                  V.sourceFile,
+                  V.lineNumber ? `:${V.lineNumber}` : ""
                 ] }),
-                W != null && W.sourceFile && G ? " · " : "",
+                V != null && V.sourceFile && G ? " · " : "",
                 G ?? ""
               ] })
             ] }),
@@ -1798,7 +1801,7 @@ All instances: ${M}`,
               Gn,
               {
                 values: v,
-                onPropertyChange: $,
+                onPropertyChange: I,
                 textKind: m,
                 textValue: g,
                 onTextChange: P,
@@ -1808,17 +1811,17 @@ All instances: ${M}`,
                 onElementStateChange: c,
                 instanceCount: ee,
                 scopeHint: D,
-                stateHint: F
+                stateHint: O
               }
             ) }),
             /* @__PURE__ */ d("div", { className: "pa-edit-panel-sticky", children: [
               /* @__PURE__ */ d("div", { className: "pa-edit-actions", children: [
-                /* @__PURE__ */ n(V, { variant: "regular", onClick: R, disabled: !k, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                /* @__PURE__ */ n(H, { variant: "regular", onClick: R, disabled: !k, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
                   /* @__PURE__ */ n(mn, { className: "pa-glass-btn-icon" }),
                   /* @__PURE__ */ n("span", { children: "Undo" })
                 ] }) }),
                 /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "regular",
                     onClick: x,
@@ -1839,12 +1842,12 @@ All instances: ${M}`,
                   }
                 ),
                 /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "glass-primary",
                     onClick: re,
                     disabled: N === 0,
-                    title: W != null && W.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    title: V != null && V.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1880,7 +1883,7 @@ async function Jn(e, t = {}) {
 }
 function Zn(e) {
   const [t, i] = S(null);
-  return H(() => {
+  return _(() => {
     if (!e) {
       i(null);
       return;
@@ -1981,16 +1984,16 @@ function sr({
   onCancel: r
 }) {
   const [a, s] = S(""), o = Y(null), c = Y(null), u = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, f = Zn(u), p = l ?? f, v = Lt(), m = u ? fe(u) : { kind: "none", value: "" }, g = m.kind !== "none" ? m.value : void 0;
-  if (H(() => {
+  if (_(() => {
     var w;
     (w = o.current) == null || w.focus();
-  }, [e]), H(() => {
+  }, [e]), _(() => {
     const w = (k) => {
       k.key === "Escape" && r();
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
   }, [r]), !p) return null;
-  const b = or(p), L = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", N = (w) => {
+  const b = or(p), E = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", N = (w) => {
     a.trim() && i(a, w);
   };
   return /* @__PURE__ */ n(
@@ -2007,7 +2010,7 @@ function sr({
           "aria-label": "Add annotation",
           className: "pa-popover-body",
           children: [
-            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: L }) }),
+            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: E }) }),
             (v || g) && /* @__PURE__ */ d("div", { className: "pa-popover-context", children: [
               v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Selected" }),
@@ -2037,9 +2040,9 @@ function sr({
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
             /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, children: "Cancel" }),
+              /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, children: "Cancel" }),
               /* @__PURE__ */ n(
-                V,
+                H,
                 {
                   variant: "ghost",
                   onClick: () => N(!0),
@@ -2048,7 +2051,7 @@ function sr({
                 }
               ),
               /* @__PURE__ */ n(
-                V,
+                H,
                 {
                   variant: "glass-primary",
                   onClick: () => N(!1),
@@ -2143,7 +2146,7 @@ function ur(e) {
 const pr = 20;
 function hr({ annotations: e }) {
   const [t, i] = S([]);
-  return H(() => {
+  return _(() => {
     if (e.length === 0) {
       i([]);
       return;
@@ -2228,7 +2231,7 @@ function fr({
   copyAllFrom: f
 }) {
   const [p, v] = S(null), [m, g] = S("");
-  H(() => {
+  _(() => {
     const N = (w) => {
       w.key === "Escape" && (t ? r() : i());
     };
@@ -2236,7 +2239,7 @@ function fr({
   }, [t, r, i]);
   const b = (N) => {
     v(N.id), g(N.note);
-  }, L = (N) => {
+  }, E = (N) => {
     m.trim() && (c(N, { note: m.trim() }), v(null));
   };
   return /* @__PURE__ */ d(
@@ -2249,7 +2252,7 @@ function fr({
         /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
           /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
-              V,
+              H,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
@@ -2273,7 +2276,7 @@ function fr({
                 feedback: f === "session" ? u : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2284,7 +2287,7 @@ function fr({
                 )
               }
             ),
-            /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
+            /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
           ] })
         ] }),
         !t && /* @__PURE__ */ d("ul", { className: "pa-session-list", children: [
@@ -2305,12 +2308,12 @@ function fr({
                 )
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
+                /* @__PURE__ */ n(H, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "glass-primary",
-                    onClick: () => L(N.id),
+                    onClick: () => E(N.id),
                     disabled: !m.trim(),
                     children: "Save"
                   }
@@ -2332,7 +2335,7 @@ function fr({
                     children: "Copied!"
                   }
                 ) : /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2342,7 +2345,7 @@ function fr({
                   }
                 ),
                 /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
@@ -2352,7 +2355,7 @@ function fr({
                   }
                 ),
                 /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
@@ -2423,7 +2426,7 @@ function br({
   onToggleHostTheme: a
 }) {
   const s = Y(null);
-  return H(() => {
+  return _(() => {
     if (!e) return;
     const o = (u) => {
       u.key === "Escape" && t();
@@ -2445,7 +2448,7 @@ function br({
       /* @__PURE__ */ d("div", { className: "pa-settings-row", children: [
         /* @__PURE__ */ n("span", { className: "pa-settings-row-value", children: i === "dark" ? "Dark canvas" : "Light canvas" }),
         /* @__PURE__ */ n(
-          V,
+          H,
           {
             variant: "icon",
             onClick: a,
@@ -2527,15 +2530,15 @@ function Cr({
   copyAllFrom: m,
   onActivateAnnotate: g,
   onActivateEdit: b,
-  onDeactivate: L,
+  onDeactivate: E,
   onCopyAll: N,
   onCaptureModeChange: w,
   onConfirmMultiSelect: k
 }) {
-  const { elementRef: $, isDragging: P, style: R, dragHandleProps: x } = Rt(), I = /* @__PURE__ */ d(
+  const { elementRef: I, isDragging: P, style: R, dragHandleProps: x } = Rt(), T = /* @__PURE__ */ d(
     "div",
     {
-      ref: $,
+      ref: I,
       className: `pa-toolbar-float ${P ? "pa-toolbar-float--dragging" : ""}`,
       style: R,
       role: "toolbar",
@@ -2579,7 +2582,7 @@ function Cr({
                   }
                 ),
                 p > 0 && /* @__PURE__ */ n(
-                  V,
+                  H,
                   {
                     variant: "glass-primary",
                     onClick: k,
@@ -2593,7 +2596,7 @@ function Cr({
                     feedback: m === "toolbar" ? v : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
-                      V,
+                      H,
                       {
                         variant: "glass-primary",
                         onClick: N,
@@ -2607,11 +2610,11 @@ function Cr({
               ] })
             ] }),
             /* @__PURE__ */ n(
-              V,
+              H,
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
-                onClick: L,
+                onClick: E,
                 "aria-label": "Close",
                 children: /* @__PURE__ */ n(
                   "svg",
@@ -2635,13 +2638,13 @@ function Cr({
               }
             )
           ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(V, { onClick: g, children: "Annotate" }),
-            /* @__PURE__ */ n(V, { onClick: b, children: "Edit" })
+            /* @__PURE__ */ n(H, { onClick: g, children: "Annotate" }),
+            /* @__PURE__ */ n(H, { onClick: b, children: "Edit" })
           ] }),
           !c && /* @__PURE__ */ d(K, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
-              V,
+              H,
               {
                 variant: "icon",
                 className: "pa-toolbar-settings",
@@ -2659,14 +2662,14 @@ function Cr({
       ]
     }
   );
-  return typeof document > "u" ? I : Ke(
+  return typeof document > "u" ? T : Ke(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal",
         "data-pixelagent-toolbar-portal": !0,
         ...e,
-        children: I
+        children: T
       }
     ),
     document.body
@@ -2679,14 +2682,14 @@ function Mr() {
       return ((s = e.current) == null ? void 0 : s.annotations) ?? [];
     }
   );
-  H(() => {
+  _(() => {
     en({ annotations: t });
   }, [t]);
-  const r = E((s, o) => {
+  const r = $((s, o) => {
     i(
       (c) => c.map((u) => u.id === s ? { ...u, ...o } : u)
     );
-  }, []), a = E((s) => {
+  }, []), a = $((s) => {
     i((o) => o.filter((c) => c.id !== s));
   }, []);
   return {
@@ -2707,7 +2710,7 @@ function Ar({
   ), [a, s] = S(
     () => t ?? it(r) ?? "dark"
   ), [o, c] = S(!1), u = t ?? a;
-  H(() => {
+  _(() => {
     if (t !== void 0) return;
     const v = () => {
       const b = it(r);
@@ -2723,14 +2726,14 @@ function Ar({
   const l = xe(
     () => nn(r, u),
     [r, u]
-  ), f = E(() => {
+  ), f = $(() => {
     const v = u === "dark" ? "light" : "dark";
     if (i) {
       i(v);
       return;
     }
     s(v), rn(v, r);
-  }, [u, i, r]), p = E(() => {
+  }, [u, i, r]), p = $(() => {
     c((v) => !v);
   }, []);
   return {
@@ -2801,7 +2804,7 @@ function $r({
   runtimeStateStyles: s
 } = {}) {
   const o = Ar({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = S(null);
-  H(() => {
+  _(() => {
     if (r || a) return;
     let y = !1;
     return fetch(yt, { method: "GET" }).then((A) => {
@@ -2813,17 +2816,17 @@ function $r({
   }, [r, a]);
   const [l, f] = S(!1), [p, v] = S("idle"), [m, g] = S("element"), {
     annotations: b,
-    setAnnotations: L,
+    setAnnotations: E,
     updateAnnotation: N,
     removeAnnotation: w
-  } = Mr(), [k, $] = S(null), [P, R] = S(null), [x, I] = S([]), [C, h] = S(null), [O, U] = S(null), [ge, j] = S(!1), [oe, re] = S(!1), W = l && p === "annotate" && b.length > 0 && !ge, [G, ee] = S("this-instance"), [M, F] = S("normal"), [D, z] = S(null), [T, _] = S(null), [X, q] = S(null), Re = Y(null), Pe = Y(null), de = E(
+  } = Mr(), [k, I] = S(null), [P, R] = S(null), [x, T] = S([]), [C, h] = S(null), [F, W] = S(null), [ge, j] = S(!1), [oe, re] = S(!1), V = l && p === "annotate" && b.length > 0 && !ge, [G, ee] = S("this-instance"), [M, O] = S("normal"), [D, U] = S(null), [L, z] = S(null), [X, q] = S(null), Re = Y(null), Pe = Y(null), de = $(
     (y, A) => {
-      Pe.current && clearTimeout(Pe.current), z(y), _((A == null ? void 0 : A.entryId) ?? null), q((A == null ? void 0 : A.copyAllFrom) ?? null), Pe.current = setTimeout(() => {
-        z(null), _(null), q(null);
+      Pe.current && clearTimeout(Pe.current), U(y), z((A == null ? void 0 : A.entryId) ?? null), q((A == null ? void 0 : A.copyAllFrom) ?? null), Pe.current = setTimeout(() => {
+        U(null), z(null), q(null);
       }, 2500);
     },
     []
-  ), Ne = E(
+  ), Ne = $(
     async (y, A, J) => {
       if (y)
         try {
@@ -2833,27 +2836,27 @@ function $r({
         }
     },
     [de]
-  ), ve = E(
+  ), ve = $(
     (y, A) => {
       y.length === 0 && !A || (h({ elements: y, areaBbox: A }), R(y[0] ?? null));
     },
     []
-  ), De = E(
+  ), De = $(
     (y) => {
       if (!(!l || p !== "annotate" || Ee(y.target))) {
-        if (O) {
-          U(
+        if (F) {
+          W(
             (A) => A && { ...A, currentX: y.clientX, currentY: y.clientY }
           );
           return;
         }
-        m !== "area" && $(vt(y.clientX, y.clientY));
+        m !== "area" && I(vt(y.clientX, y.clientY));
       }
     },
-    [l, p, O, m]
-  ), Oe = E(
+    [l, p, F, m]
+  ), Oe = $(
     (y) => {
-      !l || p !== "annotate" || Ee(y.target) || m !== "area" || y.button !== 0 || (y.preventDefault(), y.stopPropagation(), U({
+      !l || p !== "annotate" || Ee(y.target) || m !== "area" || y.button !== 0 || (y.preventDefault(), y.stopPropagation(), W({
         startX: y.clientX,
         startY: y.clientY,
         currentX: y.clientX,
@@ -2861,20 +2864,20 @@ function $r({
       }), h(null));
     },
     [l, p, m]
-  ), Fe = E(() => {
-    if (!O) return;
-    const y = Nt(O);
-    if (U(null), y.width < 8 || y.height < 8) return;
+  ), Fe = $(() => {
+    if (!F) return;
+    const y = Nt(F);
+    if (W(null), y.width < 8 || y.height < 8) return;
     const A = on(y, Ze);
     ve(A, y);
-  }, [O, ve]), Be = E(
+  }, [F, ve]), Be = $(
     (y) => {
       if (!l || p !== "annotate" || Ee(y.target) || m === "area") return;
       y.preventDefault(), y.stopPropagation();
       const A = vt(y.clientX, y.clientY);
       if (!A) return;
       if (y.shiftKey || m === "multi") {
-        I((te) => te.includes(A) ? te.filter((B) => B !== A) : [...te, A]), R(A);
+        T((te) => te.includes(A) ? te.filter((B) => B !== A) : [...te, A]), R(A);
         return;
       }
       const J = x.length > 0 ? x : [A];
@@ -2882,15 +2885,15 @@ function $r({
     },
     [l, p, m, x, ve]
   );
-  H(() => {
+  _(() => {
     !P || G !== "all-instances" || Ct(P) <= 1 && ee("this-instance");
-  }, [P, G]), H(() => {
+  }, [P, G]), _(() => {
     if (l)
       return document.addEventListener("mousemove", De, !0), document.addEventListener("mousedown", Oe, !0), document.addEventListener("mouseup", Fe, !0), document.addEventListener("click", Be, !0), () => {
         document.removeEventListener("mousemove", De, !0), document.removeEventListener("mousedown", Oe, !0), document.removeEventListener("mouseup", Fe, !0), document.removeEventListener("click", Be, !0);
       };
   }, [l, De, Oe, Fe, Be]);
-  const Vt = E(
+  const Vt = $(
     (y, A) => {
       if (!C || !y.trim()) return;
       const { elements: J, areaBbox: te } = C;
@@ -2900,24 +2903,24 @@ function $r({
         note: y,
         areaBbox: te
       });
-      L((B) => [...B, be]), j(!1), re(!1), A ? (h(null), R(null)) : (h(null), R(null), I([]));
+      E((B) => [...B, be]), j(!1), re(!1), A ? (h(null), R(null)) : (h(null), R(null), T([]));
     },
-    [C, L]
-  ), Wt = E(() => {
+    [C, E]
+  ), Wt = $(() => {
     h(null), R(null);
-  }, []), Qe = E(
+  }, []), Qe = $(
     async (y) => {
       const A = sn(b);
       await Ne(A, "Copied all!", { copyAllFrom: y });
     },
     [b, Ne]
-  ), Ut = E(
+  ), Ut = $(
     async (y) => {
       const A = b.find((J) => J.id === y);
       A && await Ne(ln(A), "Copied!", { entryId: y });
     },
     [b, Ne]
-  ), Yt = E(
+  ), Yt = $(
     async (y) => {
       const A = [];
       for (const [B, Z] of y)
@@ -2960,10 +2963,10 @@ function $r({
     },
     [G, r, c, a, s, de]
   ), et = (y) => {
-    o.setSettingsOpen(!1), f(!0), v(y), R(null), $(null), h(null), I([]), U(null), y === "annotate" && j(!1);
+    o.setSettingsOpen(!1), f(!0), v(y), R(null), I(null), h(null), T([]), W(null), y === "annotate" && j(!1);
   }, Xt = () => {
-    f(!1), v("idle"), R(null), $(null), h(null), I([]), U(null), j(!1), re(!1);
-  }, Gt = O ? Nt(O) : null;
+    f(!1), v("idle"), R(null), I(null), h(null), T([]), W(null), j(!1), re(!1);
+  }, Gt = F ? Nt(F) : null;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -3009,7 +3012,7 @@ function $r({
             }
           ),
           /* @__PURE__ */ n(hr, { annotations: b }),
-          /* @__PURE__ */ n(lr, { area: Gt, isDragging: !!O })
+          /* @__PURE__ */ n(lr, { area: Gt, isDragging: !!F })
         ] }),
         l && p === "annotate" && C && /* @__PURE__ */ n(
           sr,
@@ -3026,17 +3029,17 @@ function $r({
             selectedElement: P,
             hoveredElement: k,
             onSelectElement: R,
-            onHoverElement: $,
+            onHoverElement: I,
             targetScope: G,
             onTargetScopeChange: ee,
             elementState: M,
-            onElementStateChange: F,
+            onElementStateChange: O,
             onApply: Yt,
             applyStatus: p === "edit" ? D : null,
             isToolbarTarget: Ee
           }
         ),
-        W && /* @__PURE__ */ n(
+        V && /* @__PURE__ */ n(
           fr,
           {
             annotations: b,
@@ -3050,7 +3053,7 @@ function $r({
             onRemove: w,
             onUpdate: N,
             copyStatus: D,
-            copiedEntryId: T,
+            copiedEntryId: L,
             copyAllFrom: X
           }
         )