pixelagent 0.1.17 → 0.1.18

package/dist/pixelagent.js

@@ -1,6 +1,6 @@
 import { jsxs as d, Fragment as K, jsx as n } from "react/jsx-runtime";
-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";
+import { useState as A, useEffect as H, useRef as X, useMemo as ke, useLayoutEffect as Kt, useCallback as E, useId as jt } from "react";
+import { getElementDisplayLabel as Xe, captureTextSnapshot as tt, captureInlineStyles as nt, restoreInlineStyles as Ne, restoreTextSnapshot as Me, getPreviewTargets as Te, clearTailwindStatePreview as Ae, applyTailwindStatePreview as ze, setEditableTextPreview as rt, getRelevantComputedStyles as Se, 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";
 function $t({
@@ -9,8 +9,8 @@ function $t({
   multiSelected: i = [],
   primarySelected: r = null
 }) {
-  const [a, s] = S([]), o = r ?? t;
-  if (_(() => {
+  const [a, s] = A([]), o = r ?? t;
+  if (H(() => {
     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)
@@ -80,24 +80,24 @@ function dn(e, t, i, r = It) {
   const u = c.getContext("2d");
   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 E = new Float32Array(s * o * 2);
-  let N = 0;
-  for (let k = 0; k < o; k++)
-    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 y = 0;
+  const S = new Float32Array(s * o * 2);
   let w = 0;
-  for (let k = 0; k < f.length; k += 4) {
-    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;
+  for (let N = 0; N < o; N++)
+    for (let $ = 0; $ < s; $++) {
+      const _ = $ / s - 0.5, R = N / o - 0.5, x = un(_, R, v, m, g), I = at(0.8, 0, x - 0.15), L = at(0, 1, I), h = (_ * L + 0.5) * s - $, F = (R * L + 0.5) * o - N;
+      Math.abs(h) > y && (y = Math.abs(h)), Math.abs(F) > y && (y = Math.abs(F)), S[w++] = h, S[w++] = F;
+    }
+  if (y === 0) return null;
+  y *= 0.4 * r;
+  let k = 0;
+  for (let N = 0; N < f.length; N += 4) {
+    const $ = S[k++] / y + 0.5, _ = S[k++] / y + 0.5;
+    f[N] = $ * 255, f[N + 1] = _ * 255, f[N + 2] = 0, f[N + 3] = 255;
   }
   return u.putImageData(l, 0, 0), {
     href: c.toDataURL("image/png"),
-    scale: b / a,
+    scale: y / a,
     width: s,
     height: o
   };
@@ -137,23 +137,23 @@ function Tt({
   style: s,
   children: o
 }) {
-  const c = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? cn : It, l = Y(null), f = xe(() => `pa-lg-${++fn}`, []), [p, v] = S(null);
+  const c = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? cn : It, l = X(null), f = ke(() => `pa-lg-${++fn}`, []), [p, v] = A(null);
   Kt(() => {
     const g = l.current;
     if (!g) return;
-    let b = 0;
-    const E = () => {
-      cancelAnimationFrame(b), b = requestAnimationFrame(() => {
-        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);
+    let y = 0;
+    const S = () => {
+      cancelAnimationFrame(y), y = requestAnimationFrame(() => {
+        const k = g.getBoundingClientRect(), N = Math.round(k.width), $ = Math.round(k.height);
+        if (N < 8 || $ < 8) return;
+        const _ = e === "capsule" ? $ / 2 : Math.min(c, N / 2, $ / 2), R = dn(N, $, _, u);
         R && v(R);
       });
     };
-    E();
-    const N = new ResizeObserver(E);
-    return N.observe(g), () => {
-      cancelAnimationFrame(b), N.disconnect();
+    S();
+    const w = new ResizeObserver(S);
+    return w.observe(g), () => {
+      cancelAnimationFrame(y), w.disconnect();
     };
   }, [e, c, u]);
   const m = p && Ue() && typeof document < "u" ? Ke(
@@ -235,7 +235,7 @@ function Tt({
     )
   ] });
 }
-function H({
+function V({
   variant: e = "regular",
   className: t = "",
   children: i,
@@ -251,7 +251,7 @@ function H({
     }
   );
 }
-function Te({
+function Pe({
   variant: e = "sheet",
   side: t = "left",
   className: 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 = $(() => {
+  const [i, r] = A(e), [a, s] = A(!1), o = X(null), c = X(null), u = E(() => {
     if (i !== null) return;
     const m = c.current;
     if (!m) return;
@@ -285,45 +285,45 @@ function Rt({
       }
     );
   }, [i, t]);
-  _(() => {
+  H(() => {
     u();
-  }, [u]), _(() => {
+  }, [u]), H(() => {
     const m = () => {
       r((g) => {
         if (!g || !c.current) return g;
-        const b = c.current.getBoundingClientRect();
+        const y = c.current.getBoundingClientRect();
         return {
-          x: Math.min(g.x, window.innerWidth - b.width),
-          y: Math.min(g.y, window.innerHeight - b.height)
+          x: Math.min(g.x, window.innerWidth - y.width),
+          y: Math.min(g.y, window.innerHeight - y.height)
         };
       });
     };
     return window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
   }, []);
-  const l = $(
+  const l = E(
     (m) => {
       if (m.button !== 0) return;
       const g = c.current;
       if (!g) return;
-      let b = i;
-      if (!b) {
-        const E = g.getBoundingClientRect();
-        b = { x: E.left, y: E.top }, r(b);
+      let y = i;
+      if (!y) {
+        const S = g.getBoundingClientRect();
+        y = { x: S.left, y: S.top }, r(y);
       }
       o.current = {
         pointerId: m.pointerId,
         startX: m.clientX,
         startY: m.clientY,
-        originX: b.x,
-        originY: b.y
+        originX: y.x,
+        originY: y.y
       }, s(!0), m.currentTarget.setPointerCapture(m.pointerId), m.preventDefault();
     },
     [i]
-  ), f = $((m) => {
+  ), f = E((m) => {
     if (!o.current || o.current.pointerId !== m.pointerId) return;
-    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) => {
+    const g = c.current, y = (g == null ? void 0 : g.offsetWidth) ?? 320, S = (g == null ? void 0 : g.offsetHeight) ?? 48, w = m.clientX - o.current.startX, k = m.clientY - o.current.startY, N = Math.max(8, Math.min(window.innerWidth - y - 8, o.current.originX + w)), $ = Math.max(8, Math.min(window.innerHeight - S - 8, o.current.originY + k));
+    r({ x: N, y: $ });
+  }, []), p = E((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), E = e.toLowerCase().includes("color") ? e : `${e} color`;
-  _(() => {
+  const [r, a] = A(!1), [s, o] = A(() => ot(t)), c = X(null), u = X(null), l = X(null), f = jt(), [p, v] = A({ top: 0, left: 0, width: 260 }), m = Ot(s), g = bn(Pt(m)), y = je(t) ? t : vn(m), S = e.toLowerCase().includes("color") ? e : `${e} color`;
+  H(() => {
     o(ot(t));
   }, [t]);
-  const N = $(
+  const w = E(
     (x) => {
       o(x), i(wn(x));
     },
     [i]
-  ), w = $(
+  ), k = E(
     (x) => {
-      N(Dt(x));
+      w(Dt(x));
     },
-    [N]
-  ), k = $(() => {
+    [w]
+  ), N = E(() => {
     const x = c.current;
     if (!x) return;
-    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 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 });
+    const I = x.getBoundingClientRect(), L = 260;
+    let h = I.left;
+    h + L > window.innerWidth - 12 && (h = window.innerWidth - L - 12), h = Math.max(12, h);
+    let F = I.bottom + 8;
+    const U = 320;
+    F + U > window.innerHeight - 12 && (F = Math.max(12, I.top - U - 8)), v({ top: F, left: h, width: L });
   }, []);
-  _(() => {
+  H(() => {
     if (!r) return;
-    k();
-    const x = (C) => {
-      var F, W;
-      const h = C.target;
-      (F = c.current) != null && F.contains(h) || (W = u.current) != null && W.contains(h) || a(!1);
-    }, T = (C) => {
-      C.key === "Escape" && a(!1);
+    N();
+    const x = (L) => {
+      var F, U;
+      const h = L.target;
+      (F = c.current) != null && F.contains(h) || (U = u.current) != null && U.contains(h) || a(!1);
+    }, I = (L) => {
+      L.key === "Escape" && a(!1);
     };
-    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);
+    return window.addEventListener("mousedown", x, !0), window.addEventListener("keydown", I), window.addEventListener("resize", N), window.addEventListener("scroll", N, !0), () => {
+      window.removeEventListener("mousedown", x, !0), window.removeEventListener("keydown", I), window.removeEventListener("resize", N), window.removeEventListener("scroll", N, !0);
     };
-  }, [r, k]);
-  const I = (x, T) => {
-    var W;
-    const C = (W = l.current) == null ? void 0 : W.getBoundingClientRect();
-    if (!C) return;
-    const { x: h, y: F } = xn(x, T, C);
-    N({ ...s, s: h, v: 100 - F });
-  }, P = (x) => {
-    x.preventDefault(), I(x.clientX, x.clientY);
-    const T = (h) => I(h.clientX, h.clientY), C = () => {
-      window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", C);
+  }, [r, N]);
+  const $ = (x, I) => {
+    var U;
+    const L = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
+    if (!L) return;
+    const { x: h, y: F } = xn(x, I, L);
+    w({ ...s, s: h, v: 100 - F });
+  }, _ = (x) => {
+    x.preventDefault(), $(x.clientX, x.clientY);
+    const I = (h) => $(h.clientX, h.clientY), L = () => {
+      window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", L);
     };
-    window.addEventListener("mousemove", T), window.addEventListener("mouseup", C);
+    window.addEventListener("mousemove", I), window.addEventListener("mouseup", L);
   }, 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": E,
+            "aria-label": S,
             className: "pa-color-picker",
             style: { top: p.top, left: p.left, width: p.width },
             children: [
@@ -554,11 +554,11 @@ function _e({ label: e, value: t, onChange: i }) {
                   "span",
                   {
                     className: "pa-color-picker-preview",
-                    style: { backgroundColor: b },
+                    style: { backgroundColor: y },
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: E })
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: S })
               ] }),
               /* @__PURE__ */ n(
                 "div",
@@ -566,7 +566,7 @@ function _e({ label: e, value: t, onChange: i }) {
                   ref: l,
                   className: "pa-color-picker-sb",
                   style: { "--pa-picker-h": String(Math.round(s.h)) },
-                  onMouseDown: P,
+                  onMouseDown: _,
                   children: /* @__PURE__ */ n(
                     "span",
                     {
@@ -587,7 +587,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     max: 360,
                     value: Math.round(s.h),
                     "aria-label": "Hue",
-                    onChange: (x) => N({ ...s, h: parseFloat(x.target.value) })
+                    onChange: (x) => w({ ...s, h: parseFloat(x.target.value) })
                   }
                 ),
                 /* @__PURE__ */ n(
@@ -608,7 +608,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     type: "text",
                     value: g,
                     spellCheck: !1,
-                    onChange: (x) => w(yn(x.target.value, m))
+                    onChange: (x) => k(yn(x.target.value, m))
                   }
                 )
               ] }),
@@ -622,9 +622,9 @@ function _e({ label: e, value: t, onChange: i }) {
                     min: 0,
                     max: 255,
                     value: m[x],
-                    onChange: (T) => {
-                      const C = kn(parseInt(T.target.value, 10));
-                      w({ ...m, [x]: C });
+                    onChange: (I) => {
+                      const L = kn(parseInt(I.target.value, 10));
+                      k({ ...m, [x]: L });
                     }
                   }
                 )
@@ -648,10 +648,10 @@ function _e({ label: e, value: t, onChange: i }) {
         "aria-haspopup": "dialog",
         "aria-controls": r ? f : void 0,
         onClick: () => {
-          r || k(), a((x) => !x);
+          r || N(), a((x) => !x);
         },
         children: [
-          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: b }, "aria-hidden": "true" }),
+          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: y }, "aria-hidden": "true" }),
           /* @__PURE__ */ n(
             "input",
             {
@@ -673,7 +673,7 @@ function kn(e) {
   return Number.isFinite(e) ? Math.min(255, Math.max(0, e)) : 0;
 }
 function ue({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
-  const [a, s] = S(i);
+  const [a, s] = A(i);
   return /* @__PURE__ */ d("section", { className: `pa-edit-section ${a ? "pa-edit-section--open" : ""}`, children: [
     /* @__PURE__ */ d(
       "button",
@@ -705,8 +705,8 @@ const pe = [
   { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
   { value: '"JetBrains Mono", ui-monospace, monospace', label: "JetBrains Mono" },
   { value: "ui-monospace, monospace", label: "Monospace" }
-], Ie = "";
-function Ae(e) {
+], Re = "";
+function Le(e) {
   var i;
   return (((i = e.split(",")[0]) == null ? void 0 : i.trim()) ?? "").replace(/^["']|["']$/g, "");
 }
@@ -714,28 +714,28 @@ function Cn(e) {
   const t = e.trim();
   if (!t)
     return {
-      selectValue: Ie,
+      selectValue: Re,
       options: pe
     };
-  const i = Ae(t).toLowerCase(), r = pe.find(
-    (s) => s.value === t || Ae(s.value).toLowerCase() === i
+  const i = Le(t).toLowerCase(), r = pe.find(
+    (s) => s.value === t || Le(s.value).toLowerCase() === i
   );
   if (r)
     return { selectValue: r.value, options: pe };
   const a = pe.find((s) => {
-    const o = Ae(s.value).toLowerCase();
+    const o = Le(s.value).toLowerCase();
     return t.toLowerCase().includes(o) || o.includes(i);
   });
   return a ? { selectValue: a.value, options: pe } : {
     selectValue: t,
     options: [
       ...pe,
-      { value: t, label: Ae(t) || "Custom" }
+      { value: t, label: Le(t) || "Custom" }
     ]
   };
 }
 function Mn({ value: e, onChange: t }) {
-  const { selectValue: i, options: r } = xe(
+  const { selectValue: i, options: r } = ke(
     () => Cn(e),
     [e]
   );
@@ -745,13 +745,13 @@ function Mn({ value: e, onChange: t }) {
       "select",
       {
         className: "pa-select pa-font-family-select",
-        value: i || Ie,
+        value: i || Re,
         onChange: (a) => {
           const s = a.target.value;
-          s && s !== Ie && t(s);
+          s && s !== Re && t(s);
         },
         children: [
-          /* @__PURE__ */ n("option", { value: Ie, disabled: !0, children: "Select font style" }),
+          /* @__PURE__ */ n("option", { value: Re, disabled: !0, children: "Select font style" }),
           r.map((a) => /* @__PURE__ */ n("option", { value: a.value, children: a.label }, a.value))
         ]
       }
@@ -928,7 +928,7 @@ function Pn() {
     /* @__PURE__ */ n("line", { x1: "1.5", y1: "10.5", x2: "10.5", y2: "10.5", stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function Se({ side: e }) {
+function Ee({ side: e }) {
   const t = {
     top: { x1: 1.5, y1: 1.5, x2: 10.5, y2: 1.5 },
     right: { x1: 10.5, y1: 1.5, x2: 10.5, y2: 10.5 },
@@ -949,8 +949,8 @@ function Dn() {
   ] });
 }
 function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
-  const [s, o] = S(t);
-  return _(() => {
+  const [s, o] = A(t);
+  return H(() => {
     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 }),
@@ -972,7 +972,7 @@ function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
   ] });
 }
 function ut({ label: e, value: t, onChange: i }) {
-  const r = In(t), [a, s] = S(!1), o = (l) => {
+  const r = In(t), [a, s] = A(!1), o = (l) => {
     i(Tn({ ...r, ...l }));
   }, c = r.left !== r.right, u = r.top !== r.bottom;
   return /* @__PURE__ */ d("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
@@ -990,7 +990,7 @@ function ut({ label: e, value: t, onChange: i }) {
               /* @__PURE__ */ n(
                 he,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "left" }),
+                  icon: /* @__PURE__ */ n(Ee, { side: "left" }),
                   display: le(r.left),
                   ariaLabel: `${e} left`,
                   onCommit: (l) => o({ left: ce(l) })
@@ -999,7 +999,7 @@ function ut({ label: e, value: t, onChange: i }) {
               /* @__PURE__ */ n(
                 he,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "top" }),
+                  icon: /* @__PURE__ */ n(Ee, { side: "top" }),
                   display: le(r.top),
                   ariaLabel: `${e} top`,
                   onCommit: (l) => o({ top: ce(l) })
@@ -1008,7 +1008,7 @@ function ut({ label: e, value: t, onChange: i }) {
               /* @__PURE__ */ n(
                 he,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "right" }),
+                  icon: /* @__PURE__ */ n(Ee, { side: "right" }),
                   display: le(r.right),
                   ariaLabel: `${e} right`,
                   onCommit: (l) => o({ right: ce(l) })
@@ -1017,7 +1017,7 @@ function ut({ label: e, value: t, onChange: i }) {
               /* @__PURE__ */ n(
                 he,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "bottom" }),
+                  icon: /* @__PURE__ */ n(Ee, { side: "bottom" }),
                   display: le(r.bottom),
                   ariaLabel: `${e} bottom`,
                   onCommit: (l) => o({ bottom: ce(l) })
@@ -1208,10 +1208,10 @@ function Gn({
   scopeHint: f,
   stateHint: p
 }) {
-  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];
+  var I, L;
+  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", y = Yn(e["text-align"] ?? "left"), S = ((I = e.display) == null ? void 0 : I.trim()) ?? "", w = !!S, k = Xn.has(S), N = [...mt];
+  S && !mt.includes(S) && N.push(S);
+  const $ = ((L = e.gap) == null ? void 0 : L.trim()) ?? "", _ = $ === "normal" || $ === "" ? "0px" : $, 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: [
@@ -1327,7 +1327,7 @@ function Gn({
           On,
           {
             ariaLabel: "Text align",
-            value: b,
+            value: y,
             onChange: (h) => t("text-align", h),
             options: [
               {
@@ -1426,25 +1426,25 @@ function Gn({
           onChange: (h) => t("margin", h)
         }
       ),
-      N && /* @__PURE__ */ d("label", { className: "pa-prop-row pa-prop-row--compact", children: [
+      w && /* @__PURE__ */ d("label", { className: "pa-prop-row pa-prop-row--compact", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Display" }),
         /* @__PURE__ */ n(
           "select",
           {
             className: "pa-select",
-            value: E,
+            value: S,
             onChange: (h) => t("display", h.target.value),
-            children: k.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
+            children: N.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
           }
         )
       ] }),
-      w && /* @__PURE__ */ n(
+      k && /* @__PURE__ */ n(
         ie,
         {
           compact: !0,
           property: "gap",
           label: "Gap",
-          value: P,
+          value: _,
           onChange: (h) => t("gap", h)
         }
       )
@@ -1536,139 +1536,145 @@ const Kn = 50, gt = [
   "opacity"
 ];
 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(""), [E, N] = S(""), [w, k] = S(() => /* @__PURE__ */ new Map()), [I, P] = S(!1), R = $(() => {
-    const M = Array.from(a.current);
+  var oe;
+  const r = X([]), a = X(/* @__PURE__ */ new Set()), s = X([]), o = X(null), c = X([]), u = X(
+    null
+  ), [l, f] = A({}), [p, v] = A({}), [m, g] = A("none"), [y, S] = A(""), [w, k] = A(""), [N, $] = A(() => /* @__PURE__ */ new Map()), [_, R] = A(!1), x = E(() => {
+    const C = Array.from(a.current);
     return {
-      inline: nt(M, [...gt]),
-      text: e && v !== "none" ? tt(e, v) : null
+      inline: nt(C, [...gt]),
+      text: e && m !== "none" ? tt(e, m) : null
     };
-  }, [e, v]), x = $(() => {
-    c.current.push(R()), c.current.length > Kn && c.current.shift(), P(c.current.length > 0);
-  }, [R]), T = $(
-    (M) => {
-      var L;
+  }, [e, m]), I = E(() => {
+    c.current.push(x()), c.current.length > Kn && c.current.shift(), R(c.current.length > 0);
+  }, [x]), L = E(
+    (C) => {
+      var Y;
       if (!e) return;
-      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(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, z.property, z.newValue);
+      const P = Array.from(a.current);
+      Ne(s.current.filter((T) => P.includes(T.element))), o.current && Me(o.current);
+      const O = Te(e, t);
+      r.current = O, a.current = new Set(O), Ae(P), ze(O, i);
+      const D = e ? ((Y = N.get(e)) == null ? void 0 : Y.get(i)) ?? [] : [];
+      if (C && D.length > 0)
+        for (const T of D)
+          if (T.property === "textContent" || T.property === "value")
+            for (const z of O)
+              rt(z, T.property, T.newValue);
           else
-            for (const X of D)
-              X.style.setProperty(z.property, z.newValue);
+            for (const z of O)
+              z.style.setProperty(T.property, T.newValue);
     },
-    [e, t, i, w]
+    [e, t, i, N]
   );
-  _(() => {
+  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);
+      r.current = [], a.current = /* @__PURE__ */ new Set(), s.current = [], o.current = null, c.current = [], f({}), v({}), g("none"), S(""), k(""), $(/* @__PURE__ */ new Map()), R(!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 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]), _(() => {
-    e && T(!0);
-  }, [t]), _(() => {
-    var U;
+    const C = Te(e, t);
+    r.current = C, a.current = new Set(C), s.current = nt(C, [...gt]), c.current = [], R(!1);
+    const P = Se(e);
+    f(P), v(P);
+    const O = fe(e);
+    return g(O.kind), S(O.value), k(O.value), o.current = O.kind !== "none" ? tt(e, O.kind) : null, ze(C, i), () => Ae(C);
+  }, [e]), H(() => {
+    e && L(!0);
+  }, [t]), H(() => {
+    var Y;
     if (!e) return;
-    const M = $e(e, t);
-    r.current = M, we(
-      s.current.filter((L) => M.includes(L.element))
+    const C = Te(e, t);
+    r.current = C, Ne(
+      s.current.filter((T) => C.includes(T.element))
     );
-    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);
+    const P = ((Y = N.get(e)) == null ? void 0 : Y.get(i)) ?? [];
+    for (const T of P)
+      if (!(T.property === "textContent" || T.property === "value"))
+        for (const z of C)
+          z.style.setProperty(T.property, T.newValue);
+    const O = u.current;
+    if (O !== null && O.element === e && O.state !== i) {
+      const T = { ...p };
+      for (const z of P)
+        z.property === "textContent" || z.property === "value" || (T[z.property] = z.newValue);
+      f(T);
+    }
+    u.current = { element: e, state: i }, Ae(Array.from(a.current)), ze(C, i), a.current = new Set(C);
   }, [i, 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;
+  const h = E(
+    (C, P, O) => {
+      e && $((D) => {
+        const Y = new Map(D), T = new Map(Y.get(e) ?? /* @__PURE__ */ new Map()), ve = (T.get(i) ?? []).filter((be) => be.property !== C);
+        return O === P ? ve.length === 0 ? T.delete(i) : T.set(i, ve) : T.set(i, [...ve, { property: C, oldValue: P, newValue: O }]), T.size === 0 ? Y.delete(e) : Y.set(e, T), Y;
       });
     },
     [e, i]
-  ), h = $(
-    (M, O) => {
+  ), F = E(
+    (C, P) => {
       if (!e) return;
-      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(U, L), a.current.add(X);
-        C(U, z, L);
+      const O = { [C]: P };
+      C === "border-width" && (l["border-style"] ?? "none") === "none" && Sn(P) && (O["border-style"] = "solid"), I(), f((D) => ({ ...D, ...O }));
+      for (const [D, Y] of Object.entries(O)) {
+        const T = p[D] ?? "";
+        for (const z of r.current)
+          z.style.setProperty(D, Y), a.current.add(z);
+        h(D, T, Y);
       }
     },
-    [e, f, u, x, C]
-  ), F = $(
-    (M) => {
-      if (!(!e || v === "none")) {
-        x(), b(M);
-        for (const O of r.current)
-          rt(O, v, M), a.current.add(O);
-        C(v, E, M);
+    [e, p, l, I, h]
+  ), U = E(
+    (C) => {
+      if (!(!e || m === "none")) {
+        I(), S(C);
+        for (const P of r.current)
+          rt(P, m, C), a.current.add(P);
+        h(m, w, C);
       }
     },
-    [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 O = fe(e);
-      O.kind !== "none" && b(O.value);
+    [e, m, w, I, h]
+  ), ge = E(() => {
+    const C = c.current.pop();
+    if (C && (Ne(C.inline), C.text && Me(C.text), R(c.current.length > 0), e)) {
+      f(Se(e));
+      const P = fe(e);
+      P.kind !== "none" && S(P.value);
     }
-  }, [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]), Z = E(() => {
+    if (Ne(s.current), o.current && Me(o.current), c.current = [], R(!1), $(/* @__PURE__ */ new Map()), e) {
+      f(Se(e));
+      const C = fe(e);
+      S(C.value);
     }
-  }, [e]), j = $(() => {
-    we(s.current), o.current && ke(o.current);
-  }, []), 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);
+  }, [e]), te = E(() => {
+    Ne(s.current), o.current && Me(o.current);
+  }, []), re = E(() => {
+    if (te(), Ae(Array.from(a.current)), c.current = [], R(!1), $(/* @__PURE__ */ new Map()), e) {
+      f(Se(e));
+      const C = fe(e);
+      C.kind !== "none" && S(C.value);
     }
-  }, [j, e]), re = e ? ((ee = w.get(e)) == null ? void 0 : ee.get(i)) ?? [] : [];
-  let V = 0;
-  for (const M of w.values())
-    for (const O of M.values()) V += O.length;
-  const G = $(() => {
-    k(/* @__PURE__ */ new Map());
+  }, [te, e]), W = e ? ((oe = N.get(e)) == null ? void 0 : oe.get(i)) ?? [] : [];
+  let G = 0;
+  for (const C of N.values())
+    for (const P of C.values()) G += P.length;
+  const ne = E(() => {
+    $(/* @__PURE__ */ new Map());
   }, []);
   return {
-    values: u,
-    textKind: v,
-    textValue: g,
-    pendingChanges: re,
-    pendingByElement: w,
-    totalPendingCount: V,
-    clearAllPending: G,
-    canUndo: I,
-    updateProperty: h,
-    updateText: F,
-    undo: W,
-    reset: ge,
-    clearPreviews: oe,
-    revertPreviews: j
+    values: l,
+    textKind: m,
+    textValue: y,
+    pendingChanges: W,
+    pendingByElement: N,
+    totalPendingCount: G,
+    clearAllPending: ne,
+    canUndo: _,
+    updateProperty: F,
+    updateText: U,
+    undo: ge,
+    reset: Z,
+    clearPreviews: re,
+    revertPreviews: te
   };
 }
 function qn({
@@ -1689,63 +1695,63 @@ function qn({
     values: v,
     textKind: m,
     textValue: g,
-    pendingChanges: b,
-    pendingByElement: E,
-    totalPendingCount: N,
-    clearAllPending: w,
-    canUndo: k,
-    updateProperty: I,
-    updateText: P,
+    pendingChanges: y,
+    pendingByElement: S,
+    totalPendingCount: w,
+    clearAllPending: k,
+    canUndo: N,
+    updateProperty: $,
+    updateText: _,
     undo: R,
     reset: x,
-    clearPreviews: T,
-    revertPreviews: C
-  } = jn(e, a, o), { elementRef: h, isDragging: F, style: W, dragHandleProps: ge } = Rt({
-    computeDefaultPosition: (L) => ({
-      x: window.innerWidth - L.width - 16,
+    clearPreviews: I,
+    revertPreviews: L
+  } = jn(e, a, o), { elementRef: h, isDragging: F, style: U, dragHandleProps: ge } = Rt({
+    computeDefaultPosition: (D) => ({
+      x: window.innerWidth - D.width - 16,
       y: 16
     })
   });
-  _(() => (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(
+  H(() => (p == null || p({ clearPreviews: I, revertPreviews: L }), () => p == null ? void 0 : p(null)), [p, I, L]);
+  const Z = E(
+    (D) => {
+      if (f(D.target)) return;
+      const T = document.elementsFromPoint(D.clientX, D.clientY).find(
+        (z) => z instanceof Element && !z.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      r(X ?? null);
+      r(T ?? null);
     },
     [f, r]
-  ), 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(
+  ), te = E(
+    (D) => {
+      if (f(D.target)) return;
+      D.preventDefault(), D.stopPropagation();
+      const T = document.elementsFromPoint(D.clientX, D.clientY).find(
+        (z) => z instanceof Element && !z.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      i(X ?? null);
+      i(T ?? null);
     },
     [f, i]
   );
-  _(() => (document.addEventListener("mousemove", j, !0), document.addEventListener("click", oe, !0), () => {
-    document.removeEventListener("mousemove", j, !0), document.removeEventListener("click", oe, !0);
-  }), [j, oe]);
+  H(() => (document.addEventListener("mousemove", Z, !0), document.addEventListener("click", te, !0), () => {
+    document.removeEventListener("mousemove", Z, !0), document.removeEventListener("click", te, !0);
+  }), [Z, te]);
   const re = async () => {
-    if (N === 0) return;
-    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]);
+    if (w === 0) return;
+    const D = await u(S);
+    D.applied && (k(), D.skipRevert || L());
+  }, W = e ? Ge(e) : null, G = e ? kt(e) : null, ne = e ? Ct(e) : 0, oe = e ? Mt(e, "all-instances") : "", C = 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, P = ne > 1 ? a === "all-instances" ? `Preview & Apply on ${ne} elements (${oe}).` : `This instance only — ${ne - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, O = ke(() => !e || a !== "all-instances" ? [] : Te(e, "all-instances"), [e, a]);
   return /* @__PURE__ */ d(K, { children: [
     /* @__PURE__ */ n(
       $t,
       {
         element: a === "all-instances" ? null : t,
         selected: e,
-        multiSelected: U,
+        multiSelected: O,
         primarySelected: e
       }
     ),
@@ -1754,8 +1760,8 @@ function qn({
       {
         ref: h,
         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: [
+        style: U,
+        children: /* @__PURE__ */ n(Pe, { 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(
               "button",
@@ -1784,16 +1790,16 @@ function qn({
                 {
                   className: "pa-edit-meta-label",
                   title: `This instance: ${At(e)}
-All instances: ${M}`,
+All instances: ${oe}`,
                   children: Xe(e)
                 }
               ),
-              ((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 ? 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 && V.sourceFile && G ? " · " : "",
+                W != null && W.sourceFile && G ? " · " : "",
                 G ?? ""
               ] })
             ] }),
@@ -1801,31 +1807,31 @@ All instances: ${M}`,
               Gn,
               {
                 values: v,
-                onPropertyChange: I,
+                onPropertyChange: $,
                 textKind: m,
                 textValue: g,
-                onTextChange: P,
+                onTextChange: _,
                 targetScope: a,
                 onTargetScopeChange: s,
                 elementState: o,
                 onElementStateChange: c,
-                instanceCount: ee,
-                scopeHint: D,
-                stateHint: O
+                instanceCount: ne,
+                scopeHint: P,
+                stateHint: C
               }
             ) }),
             /* @__PURE__ */ d("div", { className: "pa-edit-panel-sticky", children: [
               /* @__PURE__ */ d("div", { className: "pa-edit-actions", children: [
-                /* @__PURE__ */ n(H, { variant: "regular", onClick: R, disabled: !k, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                /* @__PURE__ */ n(V, { variant: "regular", onClick: R, disabled: !N, 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(
-                  H,
+                  V,
                   {
                     variant: "regular",
                     onClick: x,
-                    disabled: b.length === 0,
+                    disabled: y.length === 0,
                     children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
                       /* @__PURE__ */ n(gn, { className: "pa-glass-btn-icon" }),
                       /* @__PURE__ */ n("span", { children: "Reset" })
@@ -1838,16 +1844,16 @@ All instances: ${M}`,
                   "span",
                   {
                     className: l ? /fail/i.test(l) ? "pa-change-count pa-change-count--error" : "pa-change-count pa-change-count--success" : "pa-change-count",
-                    children: l ?? `${N} pending change${N !== 1 ? "s" : ""}`
+                    children: l ?? `${w} pending change${w !== 1 ? "s" : ""}`
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
                     onClick: re,
-                    disabled: N === 0,
-                    title: V != null && V.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    disabled: w === 0,
+                    title: W != null && W.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1882,8 +1888,8 @@ async function Jn(e, t = {}) {
   return await St(JSON.stringify(e, null, 2)), { mode: "clipboard" };
 }
 function Zn(e) {
-  const [t, i] = S(null);
-  return _(() => {
+  const [t, i] = A(null);
+  return H(() => {
     if (!e) {
       i(null);
       return;
@@ -1896,7 +1902,7 @@ function Zn(e) {
     };
   }, [e]), t;
 }
-const ae = 8, Q = 8, Qn = 12, er = 300, tr = 280;
+const ae = 8, J = 8, Qn = 12, er = 300, tr = 280;
 function He(e, t, i, r) {
   return {
     top: e,
@@ -1933,7 +1939,7 @@ function Ve(e, t) {
     window.innerWidth - t - ae
   );
 }
-function Le(e, t) {
+function $e(e, t) {
   return Math.min(
     Math.max(ae, e),
     window.innerHeight - t - ae
@@ -1947,19 +1953,19 @@ function ar(e, t) {
 }
 function or(e, t = er, i = tr) {
   const r = rr(), s = e.top > window.innerHeight * 0.45 ? [
-    { placement: "above", top: e.top - i - Q, left: e.left },
-    { placement: "below", top: e.bottom + Q, left: e.left },
-    { placement: "right", top: e.top, left: e.right + Q },
-    { placement: "left", top: e.top, left: e.left - t - Q }
+    { placement: "above", top: e.top - i - J, left: e.left },
+    { placement: "below", top: e.bottom + J, left: e.left },
+    { placement: "right", top: e.top, left: e.right + J },
+    { placement: "left", top: e.top, left: e.left - t - J }
   ] : [
-    { placement: "below", top: e.bottom + Q, left: e.left },
-    { placement: "above", top: e.top - i - Q, left: e.left },
-    { placement: "right", top: e.top, left: e.right + Q },
-    { placement: "left", top: e.top, left: e.left - t - Q }
+    { placement: "below", top: e.bottom + J, left: e.left },
+    { placement: "above", top: e.top - i - J, left: e.left },
+    { placement: "right", top: e.top, left: e.right + J },
+    { placement: "left", top: e.top, left: e.left - t - J }
   ];
   for (const { top: u, left: l } of s) {
     const f = He(
-      Le(u, i),
+      $e(u, i),
       Ve(l, t),
       t,
       i
@@ -1967,11 +1973,11 @@ function or(e, t = er, i = tr) {
     if (ar(f, r))
       return { top: f.top, left: f.left };
   }
-  let o = Le(e.top - i - Q, i), c = Ve(e.left, t);
+  let o = $e(e.top - i - J, i), c = Ve(e.left, t);
   if (r) {
     let u = He(o, c, t, i);
-    Ye(u, r) && (o = Le(r.top - i - Q, i), u = He(o, c, t, i)), Ye(u, r) && (o = Le(e.bottom + Q, i), c = Ve(
-      Math.min(e.left, r.left - t - Q),
+    Ye(u, r) && (o = $e(r.top - i - J, i), u = He(o, c, t, i)), Ye(u, r) && (o = $e(e.bottom + J, i), c = Ve(
+      Math.min(e.left, r.left - t - J),
       t
     ));
   }
@@ -1983,24 +1989,24 @@ function sr({
   onSubmit: i,
   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 (_(() => {
-    var w;
-    (w = o.current) == null || w.focus();
-  }, [e]), _(() => {
-    const w = (k) => {
-      k.key === "Escape" && r();
+  const [a, s] = A(""), o = X(null), c = X(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(() => {
+    var k;
+    (k = o.current) == null || k.focus();
+  }, [e]), H(() => {
+    const k = (N) => {
+      N.key === "Escape" && r();
     };
-    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [r]), !p) return null;
-  const b = or(p), E = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", N = (w) => {
-    a.trim() && i(a, w);
+  const y = or(p), S = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", w = (k) => {
+    a.trim() && i(a, k);
   };
   return /* @__PURE__ */ n(
-    Te,
+    Pe,
     {
       variant: "popover",
-      style: { top: b.top, left: b.left },
+      style: { top: y.top, left: y.left },
       children: /* @__PURE__ */ d(
         "div",
         {
@@ -2010,7 +2016,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: E }) }),
+            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: S }) }),
             (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" }),
@@ -2029,32 +2035,32 @@ function sr({
                   ref: o,
                   className: "pa-textarea",
                   value: a,
-                  onChange: (w) => s(w.target.value),
+                  onChange: (k) => s(k.target.value),
                   placeholder: "Describe the change...",
                   rows: 3,
-                  onKeyDown: (w) => {
-                    w.key === "Enter" && (w.metaKey || w.ctrlKey) && (w.preventDefault(), N(w.shiftKey)), w.key === "Escape" && r();
+                  onKeyDown: (k) => {
+                    k.key === "Enter" && (k.metaKey || k.ctrlKey) && (k.preventDefault(), w(k.shiftKey)), k.key === "Escape" && r();
                   }
                 }
               )
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
             /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, children: "Cancel" }),
+              /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, children: "Cancel" }),
               /* @__PURE__ */ n(
-                H,
+                V,
                 {
                   variant: "ghost",
-                  onClick: () => N(!0),
+                  onClick: () => w(!0),
                   disabled: !a.trim(),
                   children: "Add & next"
                 }
               ),
               /* @__PURE__ */ n(
-                H,
+                V,
                 {
                   variant: "glass-primary",
-                  onClick: () => N(!1),
+                  onClick: () => w(!1),
                   disabled: !a.trim(),
                   children: "Add"
                 }
@@ -2145,8 +2151,8 @@ function ur(e) {
 }
 const pr = 20;
 function hr({ annotations: e }) {
-  const [t, i] = S([]);
-  return _(() => {
+  const [t, i] = A([]);
+  return H(() => {
     if (e.length === 0) {
       i([]);
       return;
@@ -2191,7 +2197,7 @@ function hr({ annotations: e }) {
   )) });
 }
 const Ze = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
-function Ee(e) {
+function Ie(e) {
   return e instanceof Element ? !!e.closest(Ze) : !1;
 }
 function vt(e, t) {
@@ -2230,20 +2236,20 @@ function fr({
   copiedEntryId: l,
   copyAllFrom: f
 }) {
-  const [p, v] = S(null), [m, g] = S("");
-  _(() => {
-    const N = (w) => {
-      w.key === "Escape" && (t ? r() : i());
+  const [p, v] = A(null), [m, g] = A("");
+  H(() => {
+    const w = (k) => {
+      k.key === "Escape" && (t ? r() : i());
     };
-    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
   }, [t, r, i]);
-  const b = (N) => {
-    v(N.id), g(N.note);
-  }, E = (N) => {
-    m.trim() && (c(N, { note: m.trim() }), v(null));
+  const y = (w) => {
+    v(w.id), g(w.note);
+  }, S = (w) => {
+    m.trim() && (c(w, { note: m.trim() }), v(null));
   };
   return /* @__PURE__ */ d(
-    Te,
+    Pe,
     {
       variant: "sheet",
       side: "right",
@@ -2252,7 +2258,7 @@ function fr({
         /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
           /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
@@ -2276,7 +2282,7 @@ function fr({
                 feedback: f === "session" ? u : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2287,14 +2293,14 @@ function fr({
                 )
               }
             ),
-            /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
+            /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
           ] })
         ] }),
         !t && /* @__PURE__ */ d("ul", { className: "pa-session-list", children: [
           e.length === 0 && /* @__PURE__ */ n("li", { className: "pa-session-empty", children: "No annotations yet. Click an element, drag an area, or Shift+click for multi-select." }),
-          e.map((N) => {
-            const w = Zt(N);
-            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: p === N.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
+          e.map((w) => {
+            const k = Zt(w);
+            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: p === w.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
               /* @__PURE__ */ d("label", { className: "pa-label", children: [
                 "Note",
                 /* @__PURE__ */ n(
@@ -2302,18 +2308,18 @@ function fr({
                   {
                     className: "pa-textarea",
                     value: m,
-                    onChange: (k) => g(k.target.value),
+                    onChange: (N) => g(N.target.value),
                     rows: 3
                   }
                 )
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(H, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
+                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: () => E(N.id),
+                    onClick: () => S(w.id),
                     disabled: !m.trim(),
                     children: "Save"
                   }
@@ -2321,12 +2327,12 @@ function fr({
               ] })
             ] }) : /* @__PURE__ */ d(K, { children: [
               /* @__PURE__ */ d("div", { className: "pa-session-content", children: [
-                /* @__PURE__ */ n("span", { className: "pa-session-target", children: w.target }),
-                /* @__PURE__ */ n("p", { className: "pa-session-note", children: w.note }),
-                w.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: w.meta })
+                /* @__PURE__ */ n("span", { className: "pa-session-target", children: k.target }),
+                /* @__PURE__ */ n("p", { className: "pa-session-note", children: k.note }),
+                k.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: k.meta })
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                u === "Copied!" && l === N.id ? /* @__PURE__ */ n(
+                u === "Copied!" && l === w.id ? /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-status pa-copy-feedback-slot pa-copy-feedback-slot--item",
@@ -2335,37 +2341,37 @@ function fr({
                     children: "Copied!"
                   }
                 ) : /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
-                    onClick: () => s(N.id),
+                    onClick: () => s(w.id),
                     "aria-label": "Copy annotation",
                     children: "Copy"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => b(N),
+                    onClick: () => y(w),
                     "aria-label": "Edit annotation note",
                     children: "✎"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => o(N.id),
+                    onClick: () => o(w.id),
                     "aria-label": "Remove annotation",
                     children: "✕"
                   }
                 )
               ] })
-            ] }) }, N.id);
+            ] }) }, w.id);
           })
         ] })
       ]
@@ -2425,8 +2431,8 @@ function br({
   chrome: r,
   onToggleHostTheme: a
 }) {
-  const s = Y(null);
-  return _(() => {
+  const s = X(null);
+  return H(() => {
     if (!e) return;
     const o = (u) => {
       u.key === "Escape" && t();
@@ -2438,7 +2444,7 @@ function br({
     return window.addEventListener("keydown", o), window.addEventListener("mousedown", c), () => {
       window.removeEventListener("keydown", o), window.removeEventListener("mousedown", c);
     };
-  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Te, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ d("div", { className: "pa-settings-menu-inner", children: [
+  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Pe, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ d("div", { className: "pa-settings-menu-inner", children: [
     /* @__PURE__ */ d("header", { className: "pa-settings-menu-header", children: [
       /* @__PURE__ */ n("h4", { className: "pa-settings-menu-title", children: "Settings" }),
       /* @__PURE__ */ n("p", { className: "pa-settings-menu-subtitle", children: "Appearance and chrome" })
@@ -2448,7 +2454,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(
-          H,
+          V,
           {
             variant: "icon",
             onClick: a,
@@ -2529,17 +2535,17 @@ function Cr({
   copyStatus: v,
   copyAllFrom: m,
   onActivateAnnotate: g,
-  onActivateEdit: b,
-  onDeactivate: E,
-  onCopyAll: N,
-  onCaptureModeChange: w,
-  onConfirmMultiSelect: k
+  onActivateEdit: y,
+  onDeactivate: S,
+  onCopyAll: w,
+  onCaptureModeChange: k,
+  onConfirmMultiSelect: N
 }) {
-  const { elementRef: I, isDragging: P, style: R, dragHandleProps: x } = Rt(), T = /* @__PURE__ */ d(
+  const { elementRef: $, isDragging: _, style: R, dragHandleProps: x } = Rt(), I = /* @__PURE__ */ d(
     "div",
     {
-      ref: I,
-      className: `pa-toolbar-float ${P ? "pa-toolbar-float--dragging" : ""}`,
+      ref: $,
+      className: `pa-toolbar-float ${_ ? "pa-toolbar-float--dragging" : ""}`,
       style: R,
       role: "toolbar",
       "aria-label": "PixelAgent",
@@ -2576,16 +2582,16 @@ function Cr({
                   {
                     className: "pa-select pa-toolbar-capture-select",
                     value: l,
-                    onChange: (C) => w(C.target.value),
+                    onChange: (L) => k(L.target.value),
                     "aria-label": "Capture mode",
-                    children: Nr.map((C) => /* @__PURE__ */ n("option", { value: C, children: kr[C] }, C))
+                    children: Nr.map((L) => /* @__PURE__ */ n("option", { value: L, children: kr[L] }, L))
                   }
                 ),
                 p > 0 && /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: k,
+                    onClick: N,
                     "aria-label": "Annotate selected elements",
                     children: p
                   }
@@ -2596,10 +2602,10 @@ function Cr({
                     feedback: m === "toolbar" ? v : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
-                      H,
+                      V,
                       {
                         variant: "glass-primary",
-                        onClick: N,
+                        onClick: w,
                         disabled: f === 0,
                         "aria-label": f > 0 ? `Copy all annotations (${f})` : "Copy all annotations",
                         children: f > 0 ? `Copy (${f})` : "Copy"
@@ -2610,11 +2616,11 @@ function Cr({
               ] })
             ] }),
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
-                onClick: E,
+                onClick: S,
                 "aria-label": "Close",
                 children: /* @__PURE__ */ n(
                   "svg",
@@ -2638,13 +2644,13 @@ function Cr({
               }
             )
           ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(H, { onClick: g, children: "Annotate" }),
-            /* @__PURE__ */ n(H, { onClick: b, children: "Edit" })
+            /* @__PURE__ */ n(V, { onClick: g, children: "Annotate" }),
+            /* @__PURE__ */ n(V, { onClick: y, children: "Edit" })
           ] }),
           !c && /* @__PURE__ */ d(K, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-settings",
@@ -2662,34 +2668,34 @@ function Cr({
       ]
     }
   );
-  return typeof document > "u" ? T : Ke(
+  return typeof document > "u" ? I : Ke(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal",
         "data-pixelagent-toolbar-portal": !0,
         ...e,
-        children: T
+        children: I
       }
     ),
     document.body
   );
 }
 function Mr() {
-  const e = Y(Qt()), [t, i] = S(
+  const e = X(Qt()), [t, i] = A(
     () => {
       var s;
       return ((s = e.current) == null ? void 0 : s.annotations) ?? [];
     }
   );
-  _(() => {
+  H(() => {
     en({ annotations: t });
   }, [t]);
-  const r = $((s, o) => {
+  const r = E((s, o) => {
     i(
       (c) => c.map((u) => u.id === s ? { ...u, ...o } : u)
     );
-  }, []), a = $((s) => {
+  }, []), a = E((s) => {
     i((o) => o.filter((c) => c.id !== s));
   }, []);
   return {
@@ -2704,17 +2710,17 @@ function Ar({
   hostTheme: t,
   onHostThemeChange: i
 }) {
-  const r = xe(
+  const r = ke(
     () => ({ ...tn, ...e }),
     [e]
-  ), [a, s] = S(
+  ), [a, s] = A(
     () => t ?? it(r) ?? "dark"
-  ), [o, c] = S(!1), u = t ?? a;
-  _(() => {
+  ), [o, c] = A(!1), u = t ?? a;
+  H(() => {
     if (t !== void 0) return;
     const v = () => {
-      const b = it(r);
-      b && s(b);
+      const y = it(r);
+      y && s(y);
     };
     v();
     const m = r.hostThemeAttribute, g = new MutationObserver(v);
@@ -2723,17 +2729,17 @@ function Ar({
       attributeFilter: [m]
     }), () => g.disconnect();
   }, [t, r]);
-  const l = xe(
+  const l = ke(
     () => nn(r, u),
     [r, u]
-  ), f = $(() => {
+  ), f = E(() => {
     const v = u === "dark" ? "light" : "dark";
     if (i) {
       i(v);
       return;
     }
     s(v), rn(v, r);
-  }, [u, i, r]), p = $(() => {
+  }, [u, i, r]), p = E(() => {
     c((v) => !v);
   }, []);
   return {
@@ -2803,174 +2809,174 @@ function $r({
   onApply: a,
   runtimeStateStyles: s
 } = {}) {
-  const o = Ar({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = S(null);
-  _(() => {
+  const o = Ar({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = A(null);
+  H(() => {
     if (r || a) return;
-    let y = !1;
-    return fetch(yt, { method: "GET" }).then((A) => {
-      !y && A.status === 405 && u(yt);
+    let b = !1;
+    return fetch(yt, { method: "GET" }).then((M) => {
+      !b && M.status === 405 && u(yt);
     }).catch(() => {
     }), () => {
-      y = !0;
+      b = !0;
     };
   }, [r, a]);
-  const [l, f] = S(!1), [p, v] = S("idle"), [m, g] = S("element"), {
-    annotations: b,
-    setAnnotations: E,
-    updateAnnotation: N,
-    removeAnnotation: w
-  } = 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), 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);
+  const [l, f] = A(!1), [p, v] = A("idle"), [m, g] = A("element"), {
+    annotations: y,
+    setAnnotations: S,
+    updateAnnotation: w,
+    removeAnnotation: k
+  } = Mr(), [N, $] = A(null), [_, R] = A(null), [x, I] = A([]), [L, h] = A(null), [F, U] = A(null), [ge, Z] = A(!1), [te, re] = A(!1), W = l && p === "annotate" && y.length > 0 && !ge, [G, ne] = A("this-instance"), [oe, C] = A("normal"), [P, O] = A(null), [D, Y] = A(null), [T, z] = A(null), ve = X(null), be = X(null), de = E(
+    (b, M) => {
+      be.current && clearTimeout(be.current), O(b), Y((M == null ? void 0 : M.entryId) ?? null), z((M == null ? void 0 : M.copyAllFrom) ?? null), be.current = setTimeout(() => {
+        O(null), Y(null), z(null);
       }, 2500);
     },
     []
-  ), Ne = $(
-    async (y, A, J) => {
-      if (y)
+  ), Ce = E(
+    async (b, M, j) => {
+      if (b)
         try {
-          await St(y), de(A, J);
+          await St(b), de(M, j);
         } catch {
-          de("Copy failed — check clipboard permissions", J);
+          de("Copy failed — check clipboard permissions", j);
         }
     },
     [de]
-  ), ve = $(
-    (y, A) => {
-      y.length === 0 && !A || (h({ elements: y, areaBbox: A }), R(y[0] ?? null));
+  ), ye = E(
+    (b, M) => {
+      b.length === 0 && !M || (h({ elements: b, areaBbox: M }), R(b[0] ?? null));
     },
     []
-  ), De = $(
-    (y) => {
-      if (!(!l || p !== "annotate" || Ee(y.target))) {
+  ), De = E(
+    (b) => {
+      if (!(!l || p !== "annotate" || Ie(b.target))) {
         if (F) {
-          W(
-            (A) => A && { ...A, currentX: y.clientX, currentY: y.clientY }
+          U(
+            (M) => M && { ...M, currentX: b.clientX, currentY: b.clientY }
           );
           return;
         }
-        m !== "area" && I(vt(y.clientX, y.clientY));
+        m !== "area" && $(vt(b.clientX, b.clientY));
       }
     },
     [l, p, F, m]
-  ), Oe = $(
-    (y) => {
-      !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,
-        currentY: y.clientY
+  ), Oe = E(
+    (b) => {
+      !l || p !== "annotate" || Ie(b.target) || m !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), U({
+        startX: b.clientX,
+        startY: b.clientY,
+        currentX: b.clientX,
+        currentY: b.clientY
       }), h(null));
     },
     [l, p, m]
-  ), Fe = $(() => {
+  ), Fe = E(() => {
     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);
-  }, [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") {
-        T((te) => te.includes(A) ? te.filter((B) => B !== A) : [...te, A]), R(A);
+    const b = Nt(F);
+    if (U(null), b.width < 8 || b.height < 8) return;
+    const M = on(b, Ze);
+    ye(M, b);
+  }, [F, ye]), Be = E(
+    (b) => {
+      if (!l || p !== "annotate" || Ie(b.target) || m === "area") return;
+      b.preventDefault(), b.stopPropagation();
+      const M = vt(b.clientX, b.clientY);
+      if (!M) return;
+      if (b.shiftKey || m === "multi") {
+        I((Q) => Q.includes(M) ? Q.filter((B) => B !== M) : [...Q, M]), R(M);
         return;
       }
-      const J = x.length > 0 ? x : [A];
-      ve(J.includes(A) ? J : [A]);
+      const j = x.length > 0 ? x : [M];
+      ye(j.includes(M) ? j : [M]);
     },
-    [l, p, m, x, ve]
+    [l, p, m, x, ye]
   );
-  _(() => {
-    !P || G !== "all-instances" || Ct(P) <= 1 && ee("this-instance");
-  }, [P, G]), _(() => {
+  H(() => {
+    !_ || G !== "all-instances" || Ct(_) <= 1 && ne("this-instance");
+  }, [_, G]), H(() => {
     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 = $(
-    (y, A) => {
-      if (!C || !y.trim()) return;
-      const { elements: J, areaBbox: te } = C;
-      if (J.length === 0 && !te) return;
-      const be = cr({
-        elements: J,
-        note: y,
-        areaBbox: te
+  const Vt = E(
+    (b, M) => {
+      if (!L || !b.trim()) return;
+      const { elements: j, areaBbox: Q } = L;
+      if (j.length === 0 && !Q) return;
+      const we = cr({
+        elements: j,
+        note: b,
+        areaBbox: Q
       });
-      E((B) => [...B, be]), j(!1), re(!1), A ? (h(null), R(null)) : (h(null), R(null), T([]));
+      S((B) => [...B, we]), Z(!1), re(!1), M ? (h(null), R(null)) : (h(null), R(null), I([]));
     },
-    [C, E]
-  ), Wt = $(() => {
+    [L, S]
+  ), Wt = E(() => {
     h(null), R(null);
-  }, []), Qe = $(
-    async (y) => {
-      const A = sn(b);
-      await Ne(A, "Copied all!", { copyAllFrom: y });
+  }, []), Qe = E(
+    async (b) => {
+      const M = sn(y);
+      await Ce(M, "Copied all!", { copyAllFrom: b });
     },
-    [b, Ne]
-  ), Ut = $(
-    async (y) => {
-      const A = b.find((J) => J.id === y);
-      A && await Ne(ln(A), "Copied!", { entryId: y });
+    [y, Ce]
+  ), Ut = E(
+    async (b) => {
+      const M = y.find((j) => j.id === b);
+      M && await Ce(ln(M), "Copied!", { entryId: b });
     },
-    [b, Ne]
-  ), Yt = $(
-    async (y) => {
-      const A = [];
-      for (const [B, Z] of y)
-        for (const [se, ne] of Z)
-          ne.length > 0 && A.push([B, se, ne]);
-      if (A.length === 0) return { applied: !1 };
+    [y, Ce]
+  ), Yt = E(
+    async (b) => {
+      const M = [];
+      for (const [B, q] of b)
+        for (const [se, ee] of q)
+          ee.length > 0 && M.push([B, se, ee]);
+      if (M.length === 0) return { applied: !1 };
       if (s) {
-        for (const [B, Z, se] of A) {
-          if (Z === "normal") continue;
-          const ne = Sr(B);
-          for (const ye of se)
-            B.style.removeProperty(ye.property), Er(ne, Z, ye.property, ye.newValue);
+        for (const [B, q, se] of M) {
+          if (q === "normal") continue;
+          const ee = Sr(B);
+          for (const xe of se)
+            B.style.removeProperty(xe.property), Er(ee, q, xe.property, xe.newValue);
         }
-        for (const [B, Z, se] of A)
-          if (Z === "normal")
-            for (const ne of se)
-              B.style.setProperty(ne.property, ne.newValue);
+        for (const [B, q, se] of M)
+          if (q === "normal")
+            for (const ee of se)
+              B.style.setProperty(ee.property, ee.newValue);
         return de("Change applied"), { applied: !0, skipRevert: !0 };
       }
-      const J = r ?? c ?? void 0, te = [];
-      for (const [B, Z, se] of A) {
-        const ne = Ge(B), ye = {
+      const j = r ?? c ?? void 0, Q = [];
+      for (const [B, q, se] of M) {
+        const ee = Ge(B), xe = {
           schemaVersion: 1,
           elementSelector: Mt(B, G),
-          sourceFile: ne.sourceFile,
-          lineNumber: ne.lineNumber,
+          sourceFile: ee.sourceFile,
+          lineNumber: ee.lineNumber,
           targetScope: G,
-          state: Z,
+          state: q,
           stylingSystem: kt(B),
           changes: se
         };
-        te.push(await Jn(ye, { applyEndpoint: J, onApply: a }));
+        Q.push(await Jn(xe, { applyEndpoint: j, onApply: a }));
       }
-      const be = te.every(
+      const we = Q.every(
         (B) => B.mode === "mcp" && B.result.success && B.result.linesChanged.length > 0
       );
-      return de(be ? "Change applied" : "Apply failed"), te.forEach((B, Z) => {
-        B.mode === "error" ? console.error(`[pixelagent] Apply #${Z} failed:`, B.message) : B.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${Z} fell back to clipboard`) : B.mode === "mcp" && !B.result.success && console.warn(`[pixelagent] Apply #${Z} reported no changes:`, B.result);
-      }), { applied: be };
+      return de(we ? "Change applied" : "Apply failed"), Q.forEach((B, q) => {
+        B.mode === "error" ? console.error(`[pixelagent] Apply #${q} failed:`, B.message) : B.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${q} fell back to clipboard`) : B.mode === "mcp" && !B.result.success && console.warn(`[pixelagent] Apply #${q} reported no changes:`, B.result);
+      }), { applied: we };
     },
     [G, r, c, a, s, de]
-  ), et = (y) => {
-    o.setSettingsOpen(!1), f(!0), v(y), R(null), I(null), h(null), T([]), W(null), y === "annotate" && j(!1);
+  ), et = (b) => {
+    o.setSettingsOpen(!1), f(!0), v(b), R(null), $(null), h(null), I([]), U(null), b === "annotate" && Z(!1);
   }, Xt = () => {
-    f(!1), v("idle"), R(null), I(null), h(null), T([]), W(null), j(!1), re(!1);
+    f(!1), v("idle"), R(null), $(null), h(null), I([]), U(null), Z(!1), re(!1);
   }, Gt = F ? Nt(F) : null;
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: Re,
+      ref: ve,
       className: "pa-root",
       "data-pixelagent-root": !0,
       ...o.rootAttributes,
@@ -2988,17 +2994,17 @@ function $r({
             active: l,
             mode: p,
             captureMode: m,
-            annotationCount: b.length,
+            annotationCount: y.length,
             multiSelectCount: x.length,
-            copyStatus: D,
-            copyAllFrom: X,
+            copyStatus: P,
+            copyAllFrom: T,
             onActivateAnnotate: () => et("annotate"),
             onActivateEdit: () => et("edit"),
             onDeactivate: Xt,
             onCopyAll: () => Qe("toolbar"),
             onCaptureModeChange: g,
             onConfirmMultiSelect: () => {
-              x.length > 0 && ve(x);
+              x.length > 0 && ye(x);
             }
           }
         ),
@@ -3006,19 +3012,19 @@ function $r({
           /* @__PURE__ */ n(
             $t,
             {
-              element: k,
-              selected: P,
+              element: N,
+              selected: _,
               multiSelected: x
             }
           ),
-          /* @__PURE__ */ n(hr, { annotations: b }),
+          /* @__PURE__ */ n(hr, { annotations: y }),
           /* @__PURE__ */ n(lr, { area: Gt, isDragging: !!F })
         ] }),
-        l && p === "annotate" && C && /* @__PURE__ */ n(
+        l && p === "annotate" && L && /* @__PURE__ */ n(
           sr,
           {
-            elements: C.elements,
-            areaBbox: C.areaBbox,
+            elements: L.elements,
+            areaBbox: L.areaBbox,
             onSubmit: Vt,
             onCancel: Wt
           }
@@ -3026,35 +3032,35 @@ function $r({
         l && p === "edit" && /* @__PURE__ */ n(
           qn,
           {
-            selectedElement: P,
-            hoveredElement: k,
+            selectedElement: _,
+            hoveredElement: N,
             onSelectElement: R,
-            onHoverElement: I,
+            onHoverElement: $,
             targetScope: G,
-            onTargetScopeChange: ee,
-            elementState: M,
-            onElementStateChange: O,
+            onTargetScopeChange: ne,
+            elementState: oe,
+            onElementStateChange: C,
             onApply: Yt,
-            applyStatus: p === "edit" ? D : null,
-            isToolbarTarget: Ee
+            applyStatus: p === "edit" ? P : null,
+            isToolbarTarget: Ie
           }
         ),
-        V && /* @__PURE__ */ n(
+        W && /* @__PURE__ */ n(
           fr,
           {
-            annotations: b,
-            collapsed: oe,
-            onToggleCollapsed: () => re((y) => !y),
+            annotations: y,
+            collapsed: te,
+            onToggleCollapsed: () => re((b) => !b),
             onClose: () => {
-              j(!0), re(!1);
+              Z(!0), re(!1);
             },
             onCopyAll: () => Qe("session"),
             onCopyOne: Ut,
-            onRemove: w,
-            onUpdate: N,
-            copyStatus: D,
-            copiedEntryId: L,
-            copyAllFrom: X
+            onRemove: k,
+            onUpdate: w,
+            copyStatus: P,
+            copiedEntryId: D,
+            copyAllFrom: T
           }
         )
       ]