pixelagent 0.1.12 → 0.1.14

package/dist/pixelagent.js

@@ -1,16 +1,16 @@
-import { jsxs as d, Fragment as X, jsx as n } from "react/jsx-runtime";
-import { useState as M, useEffect as z, useRef as U, useMemo as ve, useLayoutEffect as Ut, useCallback as L, useId as Wt } from "react";
-import { getElementDisplayLabel as _e, captureTextSnapshot as Je, captureInlineStyles as Ze, restoreInlineStyles as ye, restoreTextSnapshot as we, getPreviewTargets as Se, clearTailwindStatePreview as xe, applyTailwindStatePreview as De, setEditableTextPreview as Qe, getRelevantComputedStyles as Ne, getEditableTextInfo as de, readReactSource as Ve, detectStylingSystem as vt, countElementInstances as bt, getScopeSelector as yt, getCssSelector as wt, copyToClipboard as xt, getWindowSelectionText as Nt, getNearestReactComponentName as Yt, getDomPath as Xt, resolveElementFromEntry as kt, getAnnotationSessionDisplay as Gt, loadAnnotationSession as Kt, saveAnnotationSession as jt, DEFAULT_PIXEL_AGENT_UI_SETTINGS as qt, readHostThemeFromDocument as et, resolvePixelAgentChrome as Jt, applyHostThemeToDocument as Zt, pixelAgentRootAttributes as Qt, getElementsInArea as en, formatAllAnnotations as tn, formatAnnotation as nn } from "@pixelagent/shared";
+import { jsxs as d, Fragment as G, jsx as n } from "react/jsx-runtime";
+import { useState as A, useEffect as H, useRef as W, useMemo as we, useLayoutEffect as Wt, useCallback as L, useId as Yt } from "react";
+import { getElementDisplayLabel as Ue, captureTextSnapshot as Ze, captureInlineStyles as Qe, restoreInlineStyles as ye, restoreTextSnapshot as Ne, getPreviewTargets as Ee, clearTailwindStatePreview as ke, applyTailwindStatePreview as Fe, setEditableTextPreview as et, getRelevantComputedStyles as Ce, getEditableTextInfo as ue, readReactSource as We, detectStylingSystem as bt, countElementInstances as yt, getScopeSelector as wt, getCssSelector as xt, copyToClipboard as Nt, getWindowSelectionText as kt, getNearestReactComponentName as Xt, getDomPath as Gt, resolveElementFromEntry as Ct, getAnnotationSessionDisplay as Kt, loadAnnotationSession as jt, saveAnnotationSession as qt, DEFAULT_PIXEL_AGENT_UI_SETTINGS as Jt, readHostThemeFromDocument as tt, resolvePixelAgentChrome as Zt, applyHostThemeToDocument as Qt, pixelAgentRootAttributes as en, getElementsInArea as tn, formatAllAnnotations as nn, formatAnnotation as rn } from "@pixelagent/shared";
 export * from "@pixelagent/shared";
-import { createPortal as Ue } from "react-dom";
-function Ct({
+import { createPortal as Ye } from "react-dom";
+function Mt({
   element: e,
   selected: t,
   multiSelected: i = [],
   primarySelected: r = null
 }) {
-  const [a, o] = M([]), s = r ?? t;
-  if (z(() => {
+  const [a, o] = A([]), s = r ?? t;
+  if (H(() => {
     const l = /* @__PURE__ */ new Map(), p = i.length > 0;
     e && !t && !p && l.set(e, !1), t && l.set(t, !0);
     for (const g of i)
@@ -19,28 +19,28 @@ function Ct({
       o([]);
       return;
     }
-    const m = () => {
+    const f = () => {
       o(
-        Array.from(l.entries()).map(([g, f]) => ({
+        Array.from(l.entries()).map(([g, m]) => ({
           rect: g.getBoundingClientRect(),
-          label: _e(g),
-          isSelected: f,
+          label: Ue(g),
+          isSelected: m,
           isPrimary: s !== null && g === s
         }))
       );
     };
-    m();
+    f();
     const v = Array.from(l.keys()).map((g) => {
-      const f = new ResizeObserver(m);
-      return f.observe(g), f;
+      const m = new ResizeObserver(f);
+      return m.observe(g), m;
     });
-    return window.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
+    return window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
       for (const g of v) g.disconnect();
-      window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
+      window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
     };
   }, [e, t, i, s]), a.length === 0) return null;
   const u = a.find((l) => l.isPrimary) ?? a.find((l) => l.isSelected) ?? a[0], c = a.filter((l) => l.isSelected).length;
-  return /* @__PURE__ */ d(X, { children: [
+  return /* @__PURE__ */ d(G, { children: [
     a.map((l, p) => /* @__PURE__ */ n(
       "div",
       {
@@ -72,21 +72,21 @@ function Ct({
     )
   ] });
 }
-const At = 0.35, rn = 0.48;
-function an(e, t, i, r = At) {
+const At = 0.35, an = 0.48;
+function on(e, t, i, r = At) {
   if (e < 8 || t < 8) return null;
   const a = 1, o = Math.max(1, Math.round(e * a)), s = Math.max(1, Math.round(t * a)), u = document.createElement("canvas");
   u.width = o, u.height = s;
   const c = u.getContext("2d");
   if (!c) return null;
-  const l = c.createImageData(o, s), p = l.data, m = Math.min(0.5, i / Math.min(e, t)), v = 0.3, g = 0.2, f = Math.max(0.4, m + 0.1);
+  const l = c.createImageData(o, s), p = l.data, f = Math.min(0.5, i / Math.min(e, t)), v = 0.3, g = 0.2, m = Math.max(0.4, f + 0.1);
   let y = 0;
   const E = new Float32Array(o * s * 2);
   let x = 0;
   for (let N = 0; N < s; N++)
     for (let T = 0; T < o; T++) {
-      const P = T / o - 0.5, R = N / s - 0.5, k = on(P, R, v, g, f), I = tt(0.8, 0, k - 0.15), C = tt(0, 1, I), h = (P * C + 0.5) * o - T, O = (R * C + 0.5) * s - N;
-      Math.abs(h) > y && (y = Math.abs(h)), Math.abs(O) > y && (y = Math.abs(O)), E[x++] = h, E[x++] = O;
+      const P = T / o - 0.5, $ = N / s - 0.5, k = sn(P, $, v, g, m), I = nt(0.8, 0, k - 0.15), C = nt(0, 1, I), h = (P * C + 0.5) * o - T, B = ($ * C + 0.5) * s - N;
+      Math.abs(h) > y && (y = Math.abs(h)), Math.abs(B) > y && (y = Math.abs(B)), E[x++] = h, E[x++] = B;
     }
   if (y === 0) return null;
   y *= 0.4 * r;
@@ -102,33 +102,33 @@ function an(e, t, i, r = At) {
     height: s
   };
 }
-function on(e, t, i, r, a) {
+function sn(e, t, i, r, a) {
   const o = Math.abs(e) - i + a, s = Math.abs(t) - r + a;
   return Math.min(Math.max(o, s), 0) + Math.hypot(Math.max(o, 0), Math.max(s, 0)) - a;
 }
-function tt(e, t, i) {
+function nt(e, t, i) {
   const r = Math.max(0, Math.min(1, (i - e) / (t - e)));
   return r * r * (3 - 2 * r);
 }
-function ze() {
+function _e() {
   if (typeof navigator > "u") return !1;
   const e = navigator.userAgent;
   return !(/AppleWebKit/i.test(e) && !/Chrome|Chromium|Edg|OPR|CriOS|FxiOS/i.test(e) || /Firefox/i.test(e));
 }
-const sn = {
+const ln = {
   default: "blur(4px) saturate(130%)",
   /** Toolbar — slightly stronger frost + refraction chain. */
   enhanced: "blur(6px) saturate(138%)"
 };
-function ln(e, t = "default") {
-  const i = sn[t], a = e !== null && ze() ? `${i} url(#${e})` : i;
+function cn(e, t = "default") {
+  const i = ln[t], a = e !== null && _e() ? `${i} url(#${e})` : i;
   return {
     backdropFilter: a,
     WebkitBackdropFilter: a
   };
 }
-let cn = 0;
-function Mt({
+let dn = 0;
+function St({
   shape: e = "rect",
   cornerRadius: t,
   tint: i = "neutral",
@@ -137,26 +137,26 @@ function Mt({
   style: o,
   children: s
 }) {
-  const u = t ?? (e === "capsule" ? 9999 : 20), c = r === "enhanced" ? rn : At, l = U(null), p = ve(() => `pa-lg-${++cn}`, []), [m, v] = M(null);
-  Ut(() => {
-    const f = l.current;
-    if (!f) return;
+  const u = t ?? (e === "capsule" ? 9999 : 20), c = r === "enhanced" ? an : At, l = W(null), p = we(() => `pa-lg-${++dn}`, []), [f, v] = A(null);
+  Wt(() => {
+    const m = l.current;
+    if (!m) return;
     let y = 0;
     const E = () => {
       cancelAnimationFrame(y), y = requestAnimationFrame(() => {
-        const w = f.getBoundingClientRect(), N = Math.round(w.width), T = Math.round(w.height);
+        const w = m.getBoundingClientRect(), N = Math.round(w.width), T = Math.round(w.height);
         if (N < 8 || T < 8) return;
-        const P = e === "capsule" ? T / 2 : Math.min(u, N / 2, T / 2), R = an(N, T, P, c);
-        R && v(R);
+        const P = e === "capsule" ? T / 2 : Math.min(u, N / 2, T / 2), $ = on(N, T, P, c);
+        $ && v($);
       });
     };
     E();
     const x = new ResizeObserver(E);
-    return x.observe(f), () => {
+    return x.observe(m), () => {
       cancelAnimationFrame(y), x.disconnect();
     };
   }, [e, u, c]);
-  const g = m && ze() && typeof document < "u" ? Ue(
+  const g = f && _e() && typeof document < "u" ? Ye(
     /* @__PURE__ */ n(
       "svg",
       {
@@ -180,16 +180,16 @@ function Mt({
             colorInterpolationFilters: "sRGB",
             x: "0",
             y: "0",
-            width: m.width,
-            height: m.height,
+            width: f.width,
+            height: f.height,
             children: [
               /* @__PURE__ */ n(
                 "feImage",
                 {
-                  href: m.href,
-                  xlinkHref: m.href,
-                  width: m.width,
-                  height: m.height,
+                  href: f.href,
+                  xlinkHref: f.href,
+                  width: f.width,
+                  height: f.height,
                   preserveAspectRatio: "none",
                   result: "map"
                 }
@@ -199,7 +199,7 @@ function Mt({
                 {
                   in: "SourceGraphic",
                   in2: "map",
-                  scale: m.scale,
+                  scale: f.scale,
                   xChannelSelector: "R",
                   yChannelSelector: "G"
                 }
@@ -211,7 +211,7 @@ function Mt({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ d(X, { children: [
+  return /* @__PURE__ */ d(G, { children: [
     g,
     /* @__PURE__ */ d(
       "div",
@@ -220,8 +220,8 @@ function Mt({
         className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${i} ${a}`.trim(),
         style: {
           borderRadius: e === "capsule" ? "999px" : `${u}px`,
-          ...ln(
-            m && ze() ? p : null,
+          ...cn(
+            f && _e() ? p : null,
             r
           ),
           ...o
@@ -235,7 +235,7 @@ function Mt({
     )
   ] });
 }
-function _({
+function V({
   variant: e = "regular",
   className: t = "",
   children: i,
@@ -251,7 +251,7 @@ function _({
     }
   );
 }
-function Ee({
+function Te({
   variant: e = "sheet",
   side: t = "left",
   className: i = "",
@@ -259,7 +259,7 @@ function Ee({
   children: a
 }) {
   return /* @__PURE__ */ n(
-    Mt,
+    St,
     {
       shape: "rect",
       cornerRadius: e === "popover" ? 16 : 20,
@@ -269,32 +269,32 @@ function Ee({
     }
   );
 }
-function St({
+function Lt({
   defaultPosition: e = null,
   computeDefaultPosition: t
 } = {}) {
-  const [i, r] = M(e), [a, o] = M(!1), s = U(null), u = U(null), c = L(() => {
+  const [i, r] = A(e), [a, o] = A(!1), s = W(null), u = W(null), c = L(() => {
     if (i !== null) return;
     const g = u.current;
     if (!g) return;
-    const f = g.getBoundingClientRect();
+    const m = g.getBoundingClientRect();
     r(
-      t ? t(f) : {
-        x: (window.innerWidth - f.width) / 2,
-        y: window.innerHeight - f.height - 24
+      t ? t(m) : {
+        x: (window.innerWidth - m.width) / 2,
+        y: window.innerHeight - m.height - 24
       }
     );
   }, [i, t]);
-  z(() => {
+  H(() => {
     c();
-  }, [c]), z(() => {
+  }, [c]), H(() => {
     const g = () => {
-      r((f) => {
-        if (!f || !u.current) return f;
+      r((m) => {
+        if (!m || !u.current) return m;
         const y = u.current.getBoundingClientRect();
         return {
-          x: Math.min(f.x, window.innerWidth - y.width),
-          y: Math.min(f.y, window.innerHeight - y.height)
+          x: Math.min(m.x, window.innerWidth - y.width),
+          y: Math.min(m.y, window.innerHeight - y.height)
         };
       });
     };
@@ -303,11 +303,11 @@ function St({
   const l = L(
     (g) => {
       if (g.button !== 0) return;
-      const f = u.current;
-      if (!f) return;
+      const m = u.current;
+      if (!m) return;
       let y = i;
       if (!y) {
-        const E = f.getBoundingClientRect();
+        const E = m.getBoundingClientRect();
         y = { x: E.left, y: E.top }, r(y);
       }
       s.current = {
@@ -321,9 +321,9 @@ function St({
     [i]
   ), p = L((g) => {
     if (!s.current || s.current.pointerId !== g.pointerId) return;
-    const f = u.current, y = (f == null ? void 0 : f.offsetWidth) ?? 320, E = (f == null ? void 0 : f.offsetHeight) ?? 48, x = g.clientX - s.current.startX, w = g.clientY - s.current.startY, N = Math.max(8, Math.min(window.innerWidth - y - 8, s.current.originX + x)), T = Math.max(8, Math.min(window.innerHeight - E - 8, s.current.originY + w));
+    const m = u.current, y = (m == null ? void 0 : m.offsetWidth) ?? 320, E = (m == null ? void 0 : m.offsetHeight) ?? 48, x = g.clientX - s.current.startX, w = g.clientY - s.current.startY, N = Math.max(8, Math.min(window.innerWidth - y - 8, s.current.originX + x)), T = Math.max(8, Math.min(window.innerHeight - E - 8, s.current.originY + w));
     r({ x: N, y: T });
-  }, []), m = L((g) => {
+  }, []), f = L((g) => {
     if (!(!s.current || s.current.pointerId !== g.pointerId)) {
       s.current = null, o(!1);
       try {
@@ -347,12 +347,12 @@ function St({
     dragHandleProps: {
       onPointerDown: l,
       onPointerMove: p,
-      onPointerUp: m,
-      onPointerCancel: m
+      onPointerUp: f,
+      onPointerCancel: f
     }
   };
 }
-function dn({ className: e }) {
+function un({ className: e }) {
   return /* @__PURE__ */ d("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
@@ -378,7 +378,7 @@ function dn({ className: e }) {
     )
   ] });
 }
-function un({ className: e }) {
+function pn({ className: e }) {
   return /* @__PURE__ */ d("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
@@ -404,8 +404,8 @@ function un({ className: e }) {
     )
   ] });
 }
-const ue = (e, t, i) => Math.min(i, Math.max(t, e));
-function We(e) {
+const pe = (e, t, i) => Math.min(i, Math.max(t, e));
+function Xe(e) {
   const t = e.trim();
   if (!t) return null;
   const i = t.match(/^#([0-9a-f]{6})$/i);
@@ -426,74 +426,74 @@ function We(e) {
   }
   const a = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
   return a ? {
-    r: ue(parseInt(a[1], 10), 0, 255),
-    g: ue(parseInt(a[2], 10), 0, 255),
-    b: ue(parseInt(a[3], 10), 0, 255)
+    r: pe(parseInt(a[1], 10), 0, 255),
+    g: pe(parseInt(a[2], 10), 0, 255),
+    b: pe(parseInt(a[3], 10), 0, 255)
   } : null;
 }
-function Lt(e) {
-  const t = (i) => ue(Math.round(i), 0, 255).toString(16).padStart(2, "0");
+function Et(e) {
+  const t = (i) => pe(Math.round(i), 0, 255).toString(16).padStart(2, "0");
   return `#${t(e.r)}${t(e.g)}${t(e.b)}`;
 }
-function pn(e) {
+function hn(e) {
   return `rgb(${e.r}, ${e.g}, ${e.b})`;
 }
-function Et({ r: e, g: t, b: i }) {
+function It({ r: e, g: t, b: i }) {
   const r = e / 255, a = t / 255, o = i / 255, s = Math.max(r, a, o), u = Math.min(r, a, o), c = s - u;
   let l = 0;
   c !== 0 && (s === r ? l = (a - o) / c % 6 : s === a ? l = (o - r) / c + 2 : l = (r - a) / c + 4, l *= 60, l < 0 && (l += 360));
-  const p = s === 0 ? 0 : c / s * 100, m = s * 100;
-  return { h: l, s: p, v: m };
+  const p = s === 0 ? 0 : c / s * 100, f = s * 100;
+  return { h: l, s: p, v: f };
 }
-function It({ h: e, s: t, v: i }) {
-  const r = ue(t, 0, 100) / 100, a = ue(i, 0, 100) / 100, o = a * r, s = o * (1 - Math.abs(e / 60 % 2 - 1)), u = a - o;
+function Tt({ h: e, s: t, v: i }) {
+  const r = pe(t, 0, 100) / 100, a = pe(i, 0, 100) / 100, o = a * r, s = o * (1 - Math.abs(e / 60 % 2 - 1)), u = a - o;
   let c = 0, l = 0, p = 0;
-  const m = (e % 360 + 360) % 360;
-  return m < 60 ? (c = o, l = s) : m < 120 ? (c = s, l = o) : m < 180 ? (l = o, p = s) : m < 240 ? (l = s, p = o) : m < 300 ? (c = s, p = o) : (c = o, p = s), {
+  const f = (e % 360 + 360) % 360;
+  return f < 60 ? (c = o, l = s) : f < 120 ? (c = s, l = o) : f < 180 ? (l = o, p = s) : f < 240 ? (l = s, p = o) : f < 300 ? (c = s, p = o) : (c = o, p = s), {
     r: Math.round((c + u) * 255),
     g: Math.round((l + u) * 255),
     b: Math.round((p + u) * 255)
   };
 }
-function nt(e) {
-  const t = We(e);
-  return t ? Et(t) : { h: 0, s: 0, v: 45 };
+function rt(e) {
+  const t = Xe(e);
+  return t ? It(t) : { h: 0, s: 0, v: 45 };
 }
-function hn(e) {
+function fn(e) {
   return e.replace(/^#/, "").toUpperCase().slice(0, 6);
 }
 function mn(e, t) {
   const i = e.replace(/[^0-9a-f]/gi, "").slice(0, 6);
-  return i.length < 6 ? t : We(`#${i}`) ?? t;
+  return i.length < 6 ? t : Xe(`#${i}`) ?? t;
 }
-function fn(e) {
-  return Lt(It(e));
+function gn(e) {
+  return Et(Tt(e));
 }
-function gn(e, t, i) {
-  const r = rt((e - i.left) / i.width), a = rt((t - i.top) / i.height);
+function vn(e, t, i) {
+  const r = it((e - i.left) / i.width), a = it((t - i.top) / i.height);
   return { x: r * 100, y: a * 100 };
 }
-function rt(e) {
+function it(e) {
   return Math.min(1, Math.max(0, e));
 }
-function vn() {
+function bn() {
   if (typeof document > "u") return {};
   const e = document.querySelector("[data-pixelagent-root]") ?? document.querySelector("[data-pixelagent-toolbar-portal]"), t = e == null ? void 0 : e.getAttribute("data-pa-chrome");
   return t ? { "data-pa-chrome": t } : {};
 }
-function Oe({ label: e, value: t, onChange: i }) {
-  const [r, a] = M(!1), [o, s] = M(() => nt(t)), u = U(null), c = U(null), l = U(null), p = Wt(), [m, v] = M({ top: 0, left: 0, width: 260 }), g = It(o), f = hn(Lt(g)), y = We(t) ? t : pn(g), E = e.toLowerCase().includes("color") ? e : `${e} color`;
-  z(() => {
-    s(nt(t));
+function Be({ label: e, value: t, onChange: i }) {
+  const [r, a] = A(!1), [o, s] = A(() => rt(t)), u = W(null), c = W(null), l = W(null), p = Yt(), [f, v] = A({ top: 0, left: 0, width: 260 }), g = Tt(o), m = fn(Et(g)), y = Xe(t) ? t : hn(g), E = e.toLowerCase().includes("color") ? e : `${e} color`;
+  H(() => {
+    s(rt(t));
   }, [t]);
   const x = L(
     (k) => {
-      s(k), i(fn(k));
+      s(k), i(gn(k));
     },
     [i]
   ), w = L(
     (k) => {
-      x(Et(k));
+      x(It(k));
     },
     [x]
   ), N = L(() => {
@@ -502,17 +502,17 @@ function Oe({ label: e, value: t, onChange: i }) {
     const I = k.getBoundingClientRect(), C = 260;
     let h = I.left;
     h + C > window.innerWidth - 12 && (h = window.innerWidth - C - 12), h = Math.max(12, h);
-    let O = I.bottom + 8;
+    let B = I.bottom + 8;
     const Y = 320;
-    O + Y > window.innerHeight - 12 && (O = Math.max(12, I.top - Y - 8)), v({ top: O, left: h, width: C });
+    B + Y > window.innerHeight - 12 && (B = Math.max(12, I.top - Y - 8)), v({ top: B, left: h, width: C });
   }, []);
-  z(() => {
+  H(() => {
     if (!r) return;
     N();
     const k = (C) => {
-      var O, Y;
+      var B, Y;
       const h = C.target;
-      (O = u.current) != null && O.contains(h) || (Y = c.current) != null && Y.contains(h) || a(!1);
+      (B = u.current) != null && B.contains(h) || (Y = c.current) != null && Y.contains(h) || a(!1);
     }, I = (C) => {
       C.key === "Escape" && a(!1);
     };
@@ -524,21 +524,21 @@ function Oe({ label: e, value: t, onChange: i }) {
     var Y;
     const C = (Y = l.current) == null ? void 0 : Y.getBoundingClientRect();
     if (!C) return;
-    const { x: h, y: O } = gn(k, I, C);
-    x({ ...o, s: h, v: 100 - O });
+    const { x: h, y: B } = vn(k, I, C);
+    x({ ...o, s: h, v: 100 - B });
   }, P = (k) => {
     k.preventDefault(), T(k.clientX, k.clientY);
     const I = (h) => T(h.clientX, h.clientY), C = () => {
       window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", C);
     };
     window.addEventListener("mousemove", I), window.addEventListener("mouseup", C);
-  }, R = r ? Ue(
+  }, $ = r ? Ye(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal pa-color-picker-portal",
         "data-pixelagent-picker-portal": !0,
-        ...vn(),
+        ...bn(),
         children: /* @__PURE__ */ d(
           "div",
           {
@@ -547,7 +547,7 @@ function Oe({ label: e, value: t, onChange: i }) {
             role: "dialog",
             "aria-label": E,
             className: "pa-color-picker",
-            style: { top: m.top, left: m.left, width: m.width },
+            style: { top: f.top, left: f.left, width: f.width },
             children: [
               /* @__PURE__ */ d("header", { className: "pa-color-picker-header", children: [
                 /* @__PURE__ */ n(
@@ -606,7 +606,7 @@ function Oe({ label: e, value: t, onChange: i }) {
                   {
                     className: "pa-input pa-color-picker-input",
                     type: "text",
-                    value: f,
+                    value: m,
                     spellCheck: !1,
                     onChange: (k) => w(mn(k.target.value, g))
                   }
@@ -623,7 +623,7 @@ function Oe({ label: e, value: t, onChange: i }) {
                     max: 255,
                     value: g[k],
                     onChange: (I) => {
-                      const C = bn(parseInt(I.target.value, 10));
+                      const C = yn(parseInt(I.target.value, 10));
                       w({ ...g, [k]: C });
                     }
                   }
@@ -666,14 +666,14 @@ function Oe({ label: e, value: t, onChange: i }) {
         ]
       }
     ),
-    R
+    $
   ] });
 }
-function bn(e) {
+function yn(e) {
   return Number.isFinite(e) ? Math.min(255, Math.max(0, e)) : 0;
 }
-function se({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
-  const [a, o] = M(i);
+function le({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
+  const [a, o] = A(i);
   return /* @__PURE__ */ d("section", { className: `pa-edit-section ${a ? "pa-edit-section--open" : ""}`, children: [
     /* @__PURE__ */ d(
       "button",
@@ -692,7 +692,7 @@ function se({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
     a ? /* @__PURE__ */ n("div", { className: "pa-edit-section-body", children: t }) : null
   ] });
 }
-const le = [
+const ce = [
   { value: "Inter, system-ui, sans-serif", label: "Inter" },
   { value: "system-ui, sans-serif", label: "System UI" },
   {
@@ -705,38 +705,38 @@ const le = [
   { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
   { value: '"JetBrains Mono", ui-monospace, monospace', label: "JetBrains Mono" },
   { value: "ui-monospace, monospace", label: "Monospace" }
-], Le = "";
-function ke(e) {
+], Ie = "";
+function Me(e) {
   var i;
   return (((i = e.split(",")[0]) == null ? void 0 : i.trim()) ?? "").replace(/^["']|["']$/g, "");
 }
-function yn(e) {
+function wn(e) {
   const t = e.trim();
   if (!t)
     return {
-      selectValue: Le,
-      options: le
+      selectValue: Ie,
+      options: ce
     };
-  const i = ke(t).toLowerCase(), r = le.find(
-    (o) => o.value === t || ke(o.value).toLowerCase() === i
+  const i = Me(t).toLowerCase(), r = ce.find(
+    (o) => o.value === t || Me(o.value).toLowerCase() === i
   );
   if (r)
-    return { selectValue: r.value, options: le };
-  const a = le.find((o) => {
-    const s = ke(o.value).toLowerCase();
+    return { selectValue: r.value, options: ce };
+  const a = ce.find((o) => {
+    const s = Me(o.value).toLowerCase();
     return t.toLowerCase().includes(s) || s.includes(i);
   });
-  return a ? { selectValue: a.value, options: le } : {
+  return a ? { selectValue: a.value, options: ce } : {
     selectValue: t,
     options: [
-      ...le,
-      { value: t, label: ke(t) || "Custom" }
+      ...ce,
+      { value: t, label: Me(t) || "Custom" }
     ]
   };
 }
-function wn({ value: e, onChange: t }) {
-  const { selectValue: i, options: r } = ve(
-    () => yn(e),
+function xn({ value: e, onChange: t }) {
+  const { selectValue: i, options: r } = we(
+    () => wn(e),
     [e]
   );
   return /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
@@ -745,24 +745,24 @@ function wn({ value: e, onChange: t }) {
       "select",
       {
         className: "pa-select pa-font-family-select",
-        value: i || Le,
+        value: i || Ie,
         onChange: (a) => {
           const o = a.target.value;
-          o && o !== Le && t(o);
+          o && o !== Ie && t(o);
         },
         children: [
-          /* @__PURE__ */ n("option", { value: Le, disabled: !0, children: "Select font style" }),
+          /* @__PURE__ */ n("option", { value: Ie, disabled: !0, children: "Select font style" }),
           r.map((a) => /* @__PURE__ */ n("option", { value: a.value, children: a.label }, a.value))
         ]
       }
     )
   ] });
 }
-function Ye(e) {
+function Ge(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? parseFloat(t[1]) : null;
 }
-function xn(e) {
+function Nn(e) {
   const t = e.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
@@ -772,21 +772,21 @@ function xn(e) {
   const i = parseFloat(t);
   return Number.isFinite(i) && i >= 0 && i <= 1 ? i : null;
 }
-function Nn(e) {
-  const t = Tt(e);
+function kn(e) {
+  const t = Pt(e);
   if (t !== null) return t > 0;
-  const i = Ye(e);
+  const i = Ge(e);
   return i !== null && i > 0;
 }
-function Tt(e) {
+function Pt(e) {
   const t = e.trim().split(/\s+/).filter(Boolean);
   if (t.length === 0) return null;
-  const i = t.map((a) => Ye(a));
+  const i = t.map((a) => Ge(a));
   if (i.some((a) => a === null)) return null;
   const r = i[0];
   return i.every((a) => a === r) ? r : null;
 }
-const kn = {
+const Cn = {
   padding: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   margin: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   width: { kind: "text" },
@@ -800,14 +800,14 @@ const kn = {
   "border-radius": { kind: "px", min: 0, max: 48, step: 1 },
   opacity: { kind: "opacity", min: 0, max: 1, step: 0.01 }
 };
-function Cn(e, t, i) {
+function Mn(e, t, i) {
   switch (i.kind) {
     case "opacity":
-      return xn(t);
+      return Nn(t);
     case "px":
-      return Ye(t);
+      return Ge(t);
     case "uniform-px":
-      return Tt(t);
+      return Pt(t);
     default:
       return null;
   }
@@ -823,14 +823,14 @@ function An(e, t, i) {
       return String(t);
   }
 }
-function ne({
+function re({
   property: e,
   label: t,
   value: i,
   onChange: r,
   compact: a = !1
 }) {
-  const o = kn[e] ?? { kind: "text" }, s = Cn(e, i, o), u = o.kind !== "text" && s !== null, c = a ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = a ? "pa-edit-field-label" : "pa-prop-label";
+  const o = Cn[e] ?? { kind: "text" }, s = Mn(e, i, o), u = o.kind !== "text" && s !== null, c = a ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = a ? "pa-edit-field-label" : "pa-prop-label";
   if (!u)
     return /* @__PURE__ */ d("label", { className: c, children: [
       /* @__PURE__ */ n("span", { className: l, children: t }),
@@ -840,12 +840,12 @@ function ne({
           className: "pa-input",
           type: "text",
           value: i,
-          onChange: (f) => r(f.target.value)
+          onChange: (m) => r(m.target.value)
         }
       )
     ] });
-  const p = o.min ?? 0, m = o.max ?? 100, v = o.step ?? 1, g = (f) => {
-    r(An(e, f, o));
+  const p = o.min ?? 0, f = o.max ?? 100, v = o.step ?? 1, g = (m) => {
+    r(An(e, m, o));
   };
   return /* @__PURE__ */ d("label", { className: `${c} pa-prop-row--slider`, children: [
     /* @__PURE__ */ n("span", { className: l, children: t }),
@@ -856,11 +856,11 @@ function ne({
           type: "range",
           className: "pa-slider",
           min: p,
-          max: m,
+          max: f,
           step: v,
           value: s,
           "aria-valuetext": i,
-          onChange: (f) => g(parseFloat(f.target.value))
+          onChange: (m) => g(parseFloat(m.target.value))
         }
       ),
       /* @__PURE__ */ n(
@@ -869,14 +869,14 @@ function ne({
           className: "pa-input pa-prop-slider-value",
           type: "text",
           value: i,
-          onChange: (f) => r(f.target.value),
+          onChange: (m) => r(m.target.value),
           "aria-label": `${t} value`
         }
       )
     ] })
   ] });
 }
-function Mn(e) {
+function Sn(e) {
   const t = e.trim().split(/\s+/).filter(Boolean), i = t[0] ?? "0px";
   if (t.length <= 1) return { top: i, right: i, bottom: i, left: i };
   const r = t[1];
@@ -884,63 +884,63 @@ function Mn(e) {
   const a = t[2];
   return t.length === 3 ? { top: i, right: r, bottom: a, left: r } : { top: i, right: r, bottom: a, left: t[3] };
 }
-function Sn({ top: e, right: t, bottom: i, left: r }) {
+function Ln({ top: e, right: t, bottom: i, left: r }) {
   return e === t && t === i && i === r ? e : e === i && t === r ? `${e} ${t}` : t === r ? `${e} ${t} ${i}` : `${e} ${t} ${i} ${r}`;
 }
-function ae(e) {
+function oe(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? t[1] : e;
 }
-function oe(e) {
+function se(e) {
   const t = e.trim();
   return t === "" ? "0px" : /^-?\d+(?:\.\d+)?$/.test(t) ? `${t}px` : t;
 }
-function it(e, t) {
-  return e === t ? ae(e) : `${ae(e)}, ${ae(t)}`;
-}
 function at(e, t) {
+  return e === t ? oe(e) : `${oe(e)}, ${oe(t)}`;
+}
+function ot(e, t) {
   const i = e.split(",").map((r) => r.trim()).filter(Boolean);
   if (i.length === 0) return [t, t];
   if (i.length === 1) {
-    const r = oe(i[0]);
+    const r = se(i[0]);
     return [r, r];
   }
-  return [oe(i[0]), oe(i[1])];
+  return [se(i[0]), se(i[1])];
 }
-const ot = 12, Xe = {
-  width: ot,
-  height: ot,
+const st = 12, Ke = {
+  width: st,
+  height: st,
   viewBox: "0 0 12 12",
   fill: "none",
   "aria-hidden": !0
 };
-function Ln() {
-  return /* @__PURE__ */ d("svg", { ...Xe, children: [
+function En() {
+  return /* @__PURE__ */ d("svg", { ...Ke, children: [
     /* @__PURE__ */ n("rect", { x: "1.5", y: "1.5", width: "9", height: "9", stroke: "currentColor", strokeOpacity: "0.35" }),
     /* @__PURE__ */ n("line", { x1: "1.5", y1: "1.5", x2: "1.5", y2: "10.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ n("line", { x1: "10.5", y1: "1.5", x2: "10.5", y2: "10.5", stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function En() {
-  return /* @__PURE__ */ d("svg", { ...Xe, children: [
+function In() {
+  return /* @__PURE__ */ d("svg", { ...Ke, children: [
     /* @__PURE__ */ n("rect", { x: "1.5", y: "1.5", width: "9", height: "9", stroke: "currentColor", strokeOpacity: "0.35" }),
     /* @__PURE__ */ n("line", { x1: "1.5", y1: "1.5", x2: "10.5", y2: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ n("line", { x1: "1.5", y1: "10.5", x2: "10.5", y2: "10.5", stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function Ce({ side: e }) {
+function Ae({ 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 },
     bottom: { x1: 1.5, y1: 10.5, x2: 10.5, y2: 10.5 },
     left: { x1: 1.5, y1: 1.5, x2: 1.5, y2: 10.5 }
   }[e];
-  return /* @__PURE__ */ d("svg", { ...Xe, children: [
+  return /* @__PURE__ */ d("svg", { ...Ke, children: [
     /* @__PURE__ */ n("rect", { x: "1.5", y: "1.5", width: "9", height: "9", stroke: "currentColor", strokeOpacity: "0.35" }),
     /* @__PURE__ */ n("line", { ...t, stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function In() {
+function Tn() {
   return /* @__PURE__ */ d("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n("rect", { x: "2", y: "2", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
     /* @__PURE__ */ n("rect", { x: "8", y: "2", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
@@ -948,9 +948,9 @@ function In() {
     /* @__PURE__ */ n("rect", { x: "8", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
-function ce({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
-  const [o, s] = M(t);
-  return z(() => {
+function de({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
+  const [o, s] = A(t);
+  return H(() => {
     s(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 }),
@@ -971,9 +971,9 @@ function ce({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
     )
   ] });
 }
-function st({ label: e, value: t, onChange: i }) {
-  const r = Mn(t), [a, o] = M(!1), s = (l) => {
-    i(Sn({ ...r, ...l }));
+function lt({ label: e, value: t, onChange: i }) {
+  const r = Sn(t), [a, o] = A(!1), s = (l) => {
+    i(Ln({ ...r, ...l }));
   }, u = r.left !== r.right, c = r.top !== r.bottom;
   return /* @__PURE__ */ d("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: e }),
@@ -988,66 +988,66 @@ function st({ label: e, value: t, onChange: i }) {
             //   Col 2 (vertical pair)   → T on top, B on bottom
             /* @__PURE__ */ d("div", { className: "pa-spacing-grid", children: [
               /* @__PURE__ */ n(
-                ce,
+                de,
                 {
-                  icon: /* @__PURE__ */ n(Ce, { side: "left" }),
-                  display: ae(r.left),
+                  icon: /* @__PURE__ */ n(Ae, { side: "left" }),
+                  display: oe(r.left),
                   ariaLabel: `${e} left`,
-                  onCommit: (l) => s({ left: oe(l) })
+                  onCommit: (l) => s({ left: se(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ce,
+                de,
                 {
-                  icon: /* @__PURE__ */ n(Ce, { side: "top" }),
-                  display: ae(r.top),
+                  icon: /* @__PURE__ */ n(Ae, { side: "top" }),
+                  display: oe(r.top),
                   ariaLabel: `${e} top`,
-                  onCommit: (l) => s({ top: oe(l) })
+                  onCommit: (l) => s({ top: se(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ce,
+                de,
                 {
-                  icon: /* @__PURE__ */ n(Ce, { side: "right" }),
-                  display: ae(r.right),
+                  icon: /* @__PURE__ */ n(Ae, { side: "right" }),
+                  display: oe(r.right),
                   ariaLabel: `${e} right`,
-                  onCommit: (l) => s({ right: oe(l) })
+                  onCommit: (l) => s({ right: se(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ce,
+                de,
                 {
-                  icon: /* @__PURE__ */ n(Ce, { side: "bottom" }),
-                  display: ae(r.bottom),
+                  icon: /* @__PURE__ */ n(Ae, { side: "bottom" }),
+                  display: oe(r.bottom),
                   ariaLabel: `${e} bottom`,
-                  onCommit: (l) => s({ bottom: oe(l) })
+                  onCommit: (l) => s({ bottom: se(l) })
                 }
               )
             ] })
           ) : /* @__PURE__ */ d("div", { className: "pa-spacing-pair", children: [
             /* @__PURE__ */ n(
-              ce,
+              de,
               {
-                icon: /* @__PURE__ */ n(Ln, {}),
-                display: it(r.left, r.right),
+                icon: /* @__PURE__ */ n(En, {}),
+                display: at(r.left, r.right),
                 mixed: u,
                 ariaLabel: `${e} horizontal`,
                 onCommit: (l) => {
-                  const [p, m] = at(l, r.left);
-                  s({ left: p, right: m });
+                  const [p, f] = ot(l, r.left);
+                  s({ left: p, right: f });
                 }
               }
             ),
             /* @__PURE__ */ n(
-              ce,
+              de,
               {
-                icon: /* @__PURE__ */ n(En, {}),
-                display: it(r.top, r.bottom),
+                icon: /* @__PURE__ */ n(In, {}),
+                display: at(r.top, r.bottom),
                 mixed: c,
                 ariaLabel: `${e} vertical`,
                 onCommit: (l) => {
-                  const [p, m] = at(l, r.top);
-                  s({ top: p, bottom: m });
+                  const [p, f] = ot(l, r.top);
+                  s({ top: p, bottom: f });
                 }
               }
             )
@@ -1061,7 +1061,7 @@ function st({ label: e, value: t, onChange: i }) {
               "aria-pressed": a,
               "aria-label": a ? "Collapse to pair view" : "Expand to per-side view",
               title: a ? "Collapse to pair view" : "Expand to per-side view",
-              children: /* @__PURE__ */ n(In, {})
+              children: /* @__PURE__ */ n(Tn, {})
             }
           )
         ]
@@ -1069,7 +1069,7 @@ function st({ label: e, value: t, onChange: i }) {
     )
   ] });
 }
-function Tn({
+function Pn({
   options: e,
   value: t,
   ariaLabel: i,
@@ -1089,7 +1089,7 @@ function Tn({
     a.value
   )) });
 }
-function Pn({
+function Rn({
   options: e,
   ariaLabel: t,
   onToggle: i
@@ -1108,7 +1108,7 @@ function Pn({
     r.id
   )) });
 }
-function Rn({ className: e }) {
+function $n({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1117,7 +1117,7 @@ function Rn({ className: e }) {
     }
   ) });
 }
-function $n({ className: e }) {
+function Dn({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1126,7 +1126,7 @@ function $n({ className: e }) {
     }
   ) });
 }
-function Dn({ className: e }) {
+function On({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1135,10 +1135,10 @@ function Dn({ className: e }) {
     }
   ) });
 }
-function On({ className: e }) {
+function Fn({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { fill: "currentColor", d: "M2 3h12v1.5H2V3zm0 3.5h12v1.5H2V6.5zm0 3.5h12v1.5H2V10zm0 3.5h12v1.5H2V13.5z" }) });
 }
-function Fn({ className: e }) {
+function Bn({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1147,33 +1147,33 @@ function Fn({ className: e }) {
     }
   ) });
 }
-function Pt(e) {
+function Rt(e) {
   const t = parseInt(e.trim(), 10);
   return Number.isFinite(t) ? t >= 600 : e.trim() === "bold" || e.trim() === "bolder";
 }
-function Bn(e) {
-  return Pt(e) ? "400" : "700";
+function zn(e) {
+  return Rt(e) ? "400" : "700";
 }
-function Rt(e) {
+function $t(e) {
   return e.trim() === "italic" || e.trim() === "oblique";
 }
-function zn(e) {
-  return Rt(e) ? "normal" : "italic";
+function Hn(e) {
+  return $t(e) ? "normal" : "italic";
 }
-function lt(e, t) {
+function ct(e, t) {
   return e.split(/\s+/).includes(t);
 }
-function ct(e, t) {
+function dt(e, t) {
   const i = new Set(
     e.trim().split(/\s+/).filter((r) => r && r !== "none")
   );
   return i.has(t) ? i.delete(t) : i.add(t), i.size === 0 ? "none" : Array.from(i).join(" ");
 }
-function Hn(e) {
+function _n(e) {
   const t = e.trim();
   return t === "center" || t === "right" || t === "justify" ? t : "left";
 }
-const dt = [
+const ut = [
   "none",
   "solid",
   "dashed",
@@ -1183,7 +1183,7 @@ const dt = [
   "ridge",
   "inset",
   "outset"
-], ut = [
+], pt = [
   "block",
   "inline",
   "inline-block",
@@ -1193,8 +1193,8 @@ const dt = [
   "inline-grid",
   "none",
   "contents"
-], _n = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
-function Vn({
+], Vn = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
+function Un({
   values: e,
   onPropertyChange: t,
   textKind: i,
@@ -1206,14 +1206,14 @@ function Vn({
   onElementStateChange: c,
   instanceCount: l,
   scopeHint: p,
-  stateHint: m
+  stateHint: f
 }) {
   var I, C;
-  const v = e["font-weight"] ?? "", g = e["font-style"] ?? "normal", f = e["text-decoration"] ?? "none", y = Hn(e["text-align"] ?? "left"), E = ((I = e.display) == null ? void 0 : I.trim()) ?? "", x = !!E, w = _n.has(E), N = [...ut];
-  E && !ut.includes(E) && N.push(E);
-  const T = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = T === "normal" || T === "" ? "0px" : T, R = e["border-style"] ?? "none", k = [...dt];
-  return R && !dt.includes(R) && k.push(R), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
-    /* @__PURE__ */ d(se, { title: "Targeting", defaultOpen: !0, children: [
+  const v = e["font-weight"] ?? "", g = e["font-style"] ?? "normal", m = e["text-decoration"] ?? "none", y = _n(e["text-align"] ?? "left"), E = ((I = e.display) == null ? void 0 : I.trim()) ?? "", x = !!E, w = Vn.has(E), N = [...pt];
+  E && !pt.includes(E) && N.push(E);
+  const T = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = T === "normal" || T === "" ? "0px" : T, $ = e["border-style"] ?? "none", k = [...ut];
+  return $ && !ut.includes($) && k.push($), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
+    /* @__PURE__ */ d(le, { title: "Targeting", defaultOpen: !0, children: [
       /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2", children: [
         /* @__PURE__ */ d("label", { className: "pa-edit-mini-field", children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Scope" }),
@@ -1254,9 +1254,9 @@ function Vn({
         ] })
       ] }),
       p ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: p }) : null,
-      m ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: m }) : null
+      f ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: f }) : null
     ] }),
-    i !== "none" && /* @__PURE__ */ n(se, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
+    i !== "none" && /* @__PURE__ */ n(le, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
       /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Text" }),
       /* @__PURE__ */ n(
         "textarea",
@@ -1269,9 +1269,9 @@ function Vn({
         }
       )
     ] }) }),
-    /* @__PURE__ */ d(se, { title: "Typography", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(le, { title: "Typography", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        wn,
+        xn,
         {
           value: e["font-family"] ?? "",
           onChange: (h) => t("font-family", h)
@@ -1280,42 +1280,42 @@ function Vn({
       /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
-          Pn,
+          Rn,
           {
             ariaLabel: "Text style",
             options: [
               {
                 id: "bold",
                 title: "Bold",
-                pressed: Pt(v),
+                pressed: Rt(v),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--bold", children: "B" })
               },
               {
                 id: "italic",
                 title: "Italic",
-                pressed: Rt(g),
+                pressed: $t(g),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--italic", children: "I" })
               },
               {
                 id: "underline",
                 title: "Underline",
-                pressed: lt(f, "underline"),
+                pressed: ct(m, "underline"),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--underline", children: "U" })
               },
               {
                 id: "strikethrough",
                 title: "Strikethrough",
-                pressed: lt(f, "line-through"),
-                content: /* @__PURE__ */ n(Fn, { className: "pa-segmented-icon" })
+                pressed: ct(m, "line-through"),
+                content: /* @__PURE__ */ n(Bn, { className: "pa-segmented-icon" })
               }
             ],
             onToggle: (h) => {
-              h === "bold" ? t("font-weight", Bn(v)) : h === "italic" ? t("font-style", zn(g)) : h === "underline" ? t(
+              h === "bold" ? t("font-weight", zn(v)) : h === "italic" ? t("font-style", Hn(g)) : h === "underline" ? t(
                 "text-decoration",
-                ct(f, "underline")
+                dt(m, "underline")
               ) : h === "strikethrough" && t(
                 "text-decoration",
-                ct(f, "line-through")
+                dt(m, "line-through")
               );
             }
           }
@@ -1324,7 +1324,7 @@ function Vn({
       /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Align" }),
         /* @__PURE__ */ n(
-          Tn,
+          Pn,
           {
             ariaLabel: "Text align",
             value: y,
@@ -1333,22 +1333,22 @@ function Vn({
               {
                 value: "left",
                 title: "Align left",
-                content: /* @__PURE__ */ n(Rn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n($n, { className: "pa-segmented-icon" })
               },
               {
                 value: "center",
                 title: "Align center",
-                content: /* @__PURE__ */ n($n, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Dn, { className: "pa-segmented-icon" })
               },
               {
                 value: "right",
                 title: "Align right",
-                content: /* @__PURE__ */ n(Dn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(On, { className: "pa-segmented-icon" })
               },
               {
                 value: "justify",
                 title: "Justify",
-                content: /* @__PURE__ */ n(On, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Fn, { className: "pa-segmented-icon" })
               }
             ]
           }
@@ -1356,7 +1356,7 @@ function Vn({
       ] }),
       /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
         /* @__PURE__ */ n(
-          ne,
+          re,
           {
             compact: !0,
             property: "font-size",
@@ -1366,7 +1366,7 @@ function Vn({
           }
         ),
         /* @__PURE__ */ n(
-          ne,
+          re,
           {
             compact: !0,
             property: "line-height",
@@ -1377,7 +1377,7 @@ function Vn({
         )
       ] }),
       /* @__PURE__ */ n(
-        Oe,
+        Be,
         {
           label: "Color",
           value: e.color ?? "",
@@ -1385,10 +1385,10 @@ function Vn({
         }
       )
     ] }),
-    /* @__PURE__ */ d(se, { title: "Layout", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(le, { title: "Layout", defaultOpen: !0, children: [
       /* @__PURE__ */ d("div", { className: "pa-edit-split-fields", children: [
         /* @__PURE__ */ n(
-          ne,
+          re,
           {
             compact: !0,
             property: "width",
@@ -1398,7 +1398,7 @@ function Vn({
           }
         ),
         /* @__PURE__ */ n(
-          ne,
+          re,
           {
             compact: !0,
             property: "height",
@@ -1409,7 +1409,7 @@ function Vn({
         )
       ] }),
       /* @__PURE__ */ n(
-        st,
+        lt,
         {
           property: "padding",
           label: "Padding",
@@ -1418,7 +1418,7 @@ function Vn({
         }
       ),
       /* @__PURE__ */ n(
-        st,
+        lt,
         {
           property: "margin",
           label: "Margin",
@@ -1439,7 +1439,7 @@ function Vn({
         )
       ] }),
       w && /* @__PURE__ */ n(
-        ne,
+        re,
         {
           compact: !0,
           property: "gap",
@@ -1449,9 +1449,9 @@ function Vn({
         }
       )
     ] }),
-    /* @__PURE__ */ d(se, { title: "Fill", children: [
+    /* @__PURE__ */ d(le, { title: "Fill", children: [
       /* @__PURE__ */ n(
-        Oe,
+        Be,
         {
           label: "Background",
           value: e["background-color"] ?? "",
@@ -1459,7 +1459,7 @@ function Vn({
         }
       ),
       /* @__PURE__ */ n(
-        ne,
+        re,
         {
           compact: !0,
           property: "opacity",
@@ -1469,9 +1469,9 @@ function Vn({
         }
       )
     ] }),
-    /* @__PURE__ */ d(se, { title: "Border", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(le, { title: "Border", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        Oe,
+        Be,
         {
           label: "Border color",
           value: e["border-color"] ?? "",
@@ -1484,14 +1484,14 @@ function Vn({
           "select",
           {
             className: "pa-select",
-            value: R,
+            value: $,
             onChange: (h) => t("border-style", h.target.value),
             children: k.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
           }
         )
       ] }),
       /* @__PURE__ */ n(
-        ne,
+        re,
         {
           compact: !0,
           property: "border-width",
@@ -1501,7 +1501,7 @@ function Vn({
         }
       ),
       /* @__PURE__ */ n(
-        ne,
+        re,
         {
           compact: !0,
           property: "border-radius",
@@ -1513,7 +1513,7 @@ function Vn({
     ] })
   ] });
 }
-const Un = 50, pt = [
+const Wn = 50, ht = [
   "font-family",
   "font-size",
   "font-weight",
@@ -1535,130 +1535,140 @@ const Un = 50, pt = [
   "border-radius",
   "opacity"
 ];
-function Wn(e, t, i) {
-  const r = U([]), a = U(/* @__PURE__ */ new Set()), o = U([]), s = U(null), u = U([]), [c, l] = M({}), [p, m] = M({}), [v, g] = M("none"), [f, y] = M(""), [E, x] = M(""), [w, N] = M(
-    () => /* @__PURE__ */ new Map()
-  ), [T, P] = M(!1), R = L(() => {
-    const A = Array.from(a.current);
+function Yn(e, t, i) {
+  var te;
+  const r = W([]), a = W(/* @__PURE__ */ new Set()), o = W([]), s = W(null), u = W([]), [c, l] = A({}), [p, f] = A({}), [v, g] = A("none"), [m, y] = A(""), [E, x] = A(""), [w, N] = A(() => /* @__PURE__ */ new Map()), [T, P] = A(!1), $ = L(() => {
+    const M = Array.from(a.current);
     return {
-      inline: Ze(A, [...pt]),
-      text: e && v !== "none" ? Je(e, v) : null
+      inline: Qe(M, [...ht]),
+      text: e && v !== "none" ? Ze(e, v) : null
     };
   }, [e, v]), k = L(() => {
-    u.current.push(R()), u.current.length > Un && u.current.shift(), P(u.current.length > 0);
-  }, [R]), I = L(
-    (A) => {
+    u.current.push($()), u.current.length > Wn && u.current.shift(), P(u.current.length > 0);
+  }, [$]), I = L(
+    (M) => {
+      var R;
       if (!e) return;
-      const F = Array.from(a.current);
-      ye(o.current.filter((H) => F.includes(H.element))), s.current && we(s.current);
-      const D = Se(e, t);
-      r.current = D, a.current = new Set(D), xe(F), De(D, i);
-      const W = e ? w.get(e) ?? [] : [];
-      if (A && W.length > 0)
-        for (const H of W)
-          if (H.property === "textContent" || H.property === "value")
-            for (const B of D)
-              Qe(B, H.property, H.newValue);
+      const D = Array.from(a.current);
+      ye(o.current.filter((z) => D.includes(z.element))), s.current && Ne(s.current);
+      const O = Ee(e, t);
+      r.current = O, a.current = new Set(O), ke(D), Fe(O, i);
+      const _ = e ? ((R = w.get(e)) == null ? void 0 : R.get(i)) ?? [] : [];
+      if (M && _.length > 0)
+        for (const z of _)
+          if (z.property === "textContent" || z.property === "value")
+            for (const X of O)
+              et(X, z.property, z.newValue);
           else
-            for (const B of D)
-              B.style.setProperty(H.property, H.newValue);
+            for (const X of O)
+              X.style.setProperty(z.property, z.newValue);
     },
     [e, t, i, w]
   );
-  z(() => {
+  H(() => {
     if (!e) {
-      r.current = [], a.current = /* @__PURE__ */ new Set(), o.current = [], s.current = null, u.current = [], l({}), m({}), g("none"), y(""), x(""), N(/* @__PURE__ */ new Map()), P(!1);
+      r.current = [], a.current = /* @__PURE__ */ new Set(), o.current = [], s.current = null, u.current = [], l({}), f({}), g("none"), y(""), x(""), N(/* @__PURE__ */ new Map()), P(!1);
       return;
     }
-    const A = Se(e, t);
-    r.current = A, a.current = new Set(A), o.current = Ze(A, [...pt]), u.current = [], P(!1);
-    const F = Ne(e);
-    l(F), m(F);
-    const D = de(e);
-    return g(D.kind), y(D.value), x(D.value), s.current = D.kind !== "none" ? Je(e, D.kind) : null, De(A, i), () => xe(A);
-  }, [e]), z(() => {
+    const M = Ee(e, t);
+    r.current = M, a.current = new Set(M), o.current = Qe(M, [...ht]), u.current = [], P(!1);
+    const D = Ce(e);
+    l(D), f(D);
+    const O = ue(e);
+    return g(O.kind), y(O.value), x(O.value), s.current = O.kind !== "none" ? Ze(e, O.kind) : null, Fe(M, i), () => ke(M);
+  }, [e]), H(() => {
     e && I(!0);
-  }, [t]), z(() => {
+  }, [t]), H(() => {
+    var O;
     if (!e) return;
-    const A = Se(e, t);
-    r.current = A, xe(Array.from(a.current)), De(A, i), a.current = new Set(A);
+    const M = Ee(e, t);
+    r.current = M, ye(
+      o.current.filter((_) => M.includes(_.element))
+    );
+    const D = ((O = w.get(e)) == null ? void 0 : O.get(i)) ?? [];
+    for (const _ of D)
+      if (!(_.property === "textContent" || _.property === "value"))
+        for (const R of M)
+          R.style.setProperty(_.property, _.newValue);
+    ke(Array.from(a.current)), Fe(M, i), a.current = new Set(M);
   }, [i, e, t]);
   const C = L(
-    (A, F, D) => {
-      e && N((W) => {
-        const H = new Map(W), j = (H.get(e) ?? []).filter((te) => te.property !== A);
-        return D === F ? j.length === 0 ? H.delete(e) : H.set(e, j) : H.set(e, [...j, { property: A, oldValue: F, newValue: D }]), H;
+    (M, D, O) => {
+      e && N((_) => {
+        const R = new Map(_), z = new Map(R.get(e) ?? /* @__PURE__ */ new Map()), q = (z.get(i) ?? []).filter((fe) => fe.property !== M);
+        return O === D ? q.length === 0 ? z.delete(i) : z.set(i, q) : z.set(i, [...q, { property: M, oldValue: D, newValue: O }]), z.size === 0 ? R.delete(e) : R.set(e, z), R;
       });
     },
-    [e]
+    [e, i]
   ), h = L(
-    (A, F) => {
+    (M, D) => {
       if (!e) return;
-      const D = { [A]: F };
-      A === "border-width" && (c["border-style"] ?? "none") === "none" && Nn(F) && (D["border-style"] = "solid"), k(), l((W) => ({ ...W, ...D }));
-      for (const [W, H] of Object.entries(D)) {
-        const B = p[W] ?? "";
-        for (const j of r.current)
-          j.style.setProperty(W, H), a.current.add(j);
-        C(W, B, H);
+      const O = { [M]: D };
+      M === "border-width" && (c["border-style"] ?? "none") === "none" && kn(D) && (O["border-style"] = "solid"), k(), l((_) => ({ ..._, ...O }));
+      for (const [_, R] of Object.entries(O)) {
+        const z = p[_] ?? "";
+        for (const X of r.current)
+          X.style.setProperty(_, R), a.current.add(X);
+        C(_, z, R);
       }
     },
     [e, p, c, k, C]
-  ), O = L(
-    (A) => {
+  ), B = L(
+    (M) => {
       if (!(!e || v === "none")) {
-        k(), y(A);
-        for (const F of r.current)
-          Qe(F, v, A), a.current.add(F);
-        C(v, E, A);
+        k(), y(M);
+        for (const D of r.current)
+          et(D, v, M), a.current.add(D);
+        C(v, E, M);
       }
     },
     [e, v, E, k, C]
   ), Y = L(() => {
-    const A = u.current.pop();
-    if (A && (ye(A.inline), A.text && we(A.text), P(u.current.length > 0), e)) {
-      l(Ne(e));
-      const F = de(e);
-      F.kind !== "none" && y(F.value);
+    const M = u.current.pop();
+    if (M && (ye(M.inline), M.text && Ne(M.text), P(u.current.length > 0), e)) {
+      l(Ce(e));
+      const D = ue(e);
+      D.kind !== "none" && y(D.value);
     }
-  }, [e]), ee = L(() => {
-    if (ye(o.current), s.current && we(s.current), u.current = [], P(!1), N(/* @__PURE__ */ new Map()), e) {
-      l(Ne(e));
-      const A = de(e);
-      y(A.value);
+  }, [e]), ne = L(() => {
+    if (ye(o.current), s.current && Ne(s.current), u.current = [], P(!1), N(/* @__PURE__ */ new Map()), e) {
+      l(Ce(e));
+      const M = ue(e);
+      y(M.value);
     }
-  }, [e]), Z = L(() => {
-    ye(o.current), s.current && we(s.current);
-  }, []), q = L(() => {
-    if (Z(), xe(Array.from(a.current)), u.current = [], P(!1), N(/* @__PURE__ */ new Map()), e) {
-      l(Ne(e));
-      const A = de(e);
-      A.kind !== "none" && y(A.value);
+  }, [e]), Q = L(() => {
+    ye(o.current), s.current && Ne(s.current);
+  }, []), J = L(() => {
+    if (Q(), ke(Array.from(a.current)), u.current = [], P(!1), N(/* @__PURE__ */ new Map()), e) {
+      l(Ce(e));
+      const M = ue(e);
+      M.kind !== "none" && y(M.value);
     }
-  }, [Z, e]), pe = e ? w.get(e) ?? [] : [];
-  let $ = 0;
-  for (const A of w.values()) $ += A.length;
-  const Q = L(() => {
+  }, [Q, e]), he = e ? ((te = w.get(e)) == null ? void 0 : te.get(i)) ?? [] : [];
+  let F = 0;
+  for (const M of w.values())
+    for (const D of M.values()) F += D.length;
+  const ee = L(() => {
     N(/* @__PURE__ */ new Map());
   }, []);
   return {
     values: c,
     textKind: v,
-    textValue: f,
-    pendingChanges: pe,
+    textValue: m,
+    pendingChanges: he,
     pendingByElement: w,
-    totalPendingCount: $,
-    clearAllPending: Q,
+    totalPendingCount: F,
+    clearAllPending: ee,
     canUndo: T,
     updateProperty: h,
-    updateText: O,
+    updateText: B,
     undo: Y,
-    reset: ee,
-    clearPreviews: q,
-    revertPreviews: Z
+    reset: ne,
+    clearPreviews: J,
+    revertPreviews: Q
   };
 }
-function Yn({
+function Xn({
   selectedElement: e,
   hoveredElement: t,
   onSelectElement: i,
@@ -1670,12 +1680,12 @@ function Yn({
   onApply: c,
   applyStatus: l,
   isToolbarTarget: p,
-  onPreviewApi: m
+  onPreviewApi: f
 }) {
   const {
     values: v,
     textKind: g,
-    textValue: f,
+    textValue: m,
     pendingChanges: y,
     pendingByElement: E,
     totalPendingCount: x,
@@ -1683,54 +1693,54 @@ function Yn({
     canUndo: N,
     updateProperty: T,
     updateText: P,
-    undo: R,
+    undo: $,
     reset: k,
     clearPreviews: I,
     revertPreviews: C
-  } = Wn(e, a, s), { elementRef: h, isDragging: O, style: Y, dragHandleProps: ee } = St({
-    computeDefaultPosition: (B) => ({
-      x: window.innerWidth - B.width - 16,
+  } = Yn(e, a, s), { elementRef: h, isDragging: B, style: Y, dragHandleProps: ne } = Lt({
+    computeDefaultPosition: (R) => ({
+      x: window.innerWidth - R.width - 16,
       y: 16
     })
   });
-  z(() => (m == null || m({ clearPreviews: I, revertPreviews: C }), () => m == null ? void 0 : m(null)), [m, I, C]);
-  const Z = L(
-    (B) => {
-      if (p(B.target)) return;
-      const te = document.elementsFromPoint(B.clientX, B.clientY).find(
-        (ie) => ie instanceof Element && !ie.closest(
+  H(() => (f == null || f({ clearPreviews: I, revertPreviews: C }), () => f == null ? void 0 : f(null)), [f, I, C]);
+  const Q = L(
+    (R) => {
+      if (p(R.target)) return;
+      const X = document.elementsFromPoint(R.clientX, R.clientY).find(
+        (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      r(te ?? null);
+      r(X ?? null);
     },
     [p, r]
-  ), q = L(
-    (B) => {
-      if (p(B.target)) return;
-      B.preventDefault(), B.stopPropagation();
-      const te = document.elementsFromPoint(B.clientX, B.clientY).find(
-        (ie) => ie instanceof Element && !ie.closest(
+  ), J = L(
+    (R) => {
+      if (p(R.target)) return;
+      R.preventDefault(), R.stopPropagation();
+      const X = document.elementsFromPoint(R.clientX, R.clientY).find(
+        (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      i(te ?? null);
+      i(X ?? null);
     },
     [p, i]
   );
-  z(() => (document.addEventListener("mousemove", Z, !0), document.addEventListener("click", q, !0), () => {
-    document.removeEventListener("mousemove", Z, !0), document.removeEventListener("click", q, !0);
-  }), [Z, q]);
-  const pe = async () => {
+  H(() => (document.addEventListener("mousemove", Q, !0), document.addEventListener("click", J, !0), () => {
+    document.removeEventListener("mousemove", Q, !0), document.removeEventListener("click", J, !0);
+  }), [Q, J]);
+  const he = async () => {
     x === 0 || !await c(E) || (w(), C());
-  }, $ = e ? Ve(e) : null, Q = e ? vt(e) : null, A = e ? bt(e) : 0, F = e ? yt(e, "all-instances") : "", D = s !== "normal" && Q === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : s !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, W = A > 1 ? a === "all-instances" ? `Preview & Apply on ${A} elements (${F}).` : `This instance only — ${A - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, H = ve(() => !e || a !== "all-instances" ? [] : Se(e, "all-instances"), [e, a]);
-  return /* @__PURE__ */ d(X, { children: [
+  }, F = e ? We(e) : null, ee = e ? bt(e) : null, te = e ? yt(e) : 0, M = e ? wt(e, "all-instances") : "", D = s !== "normal" && ee === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : s !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, O = te > 1 ? a === "all-instances" ? `Preview & Apply on ${te} elements (${M}).` : `This instance only — ${te - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, _ = we(() => !e || a !== "all-instances" ? [] : Ee(e, "all-instances"), [e, a]);
+  return /* @__PURE__ */ d(G, { children: [
     /* @__PURE__ */ n(
-      Ct,
+      Mt,
       {
         element: a === "all-instances" ? null : t,
         selected: e,
-        multiSelected: H,
+        multiSelected: _,
         primarySelected: e
       }
     ),
@@ -1738,9 +1748,9 @@ function Yn({
       "div",
       {
         ref: h,
-        className: `pa-edit-panel-float ${O ? "pa-edit-panel-float--dragging" : ""}`,
+        className: `pa-edit-panel-float ${B ? "pa-edit-panel-float--dragging" : ""}`,
         style: Y,
-        children: /* @__PURE__ */ n(Ee, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ d("div", { className: "pa-edit-panel-inner", children: [
+        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(
               "button",
@@ -1749,7 +1759,7 @@ function Yn({
                 className: "pa-edit-panel-drag",
                 "aria-label": "Drag edit panel",
                 title: "Drag to move",
-                ...ee,
+                ...ne,
                 children: /* @__PURE__ */ d("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
@@ -1762,57 +1772,57 @@ function Yn({
             ),
             /* @__PURE__ */ n("h3", { className: "pa-edit-title", children: "Edit" })
           ] }),
-          e ? /* @__PURE__ */ d(X, { children: [
+          e ? /* @__PURE__ */ d(G, { children: [
             /* @__PURE__ */ d("div", { className: "pa-edit-meta", children: [
               /* @__PURE__ */ n(
                 "code",
                 {
                   className: "pa-edit-meta-label",
-                  title: `This instance: ${wt(e)}
-All instances: ${F}`,
-                  children: _e(e)
+                  title: `This instance: ${xt(e)}
+All instances: ${M}`,
+                  children: Ue(e)
                 }
               ),
-              (($ == null ? void 0 : $.sourceFile) || Q) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
-                ($ == null ? void 0 : $.sourceFile) && /* @__PURE__ */ d(X, { children: [
-                  $.sourceFile,
-                  $.lineNumber ? `:${$.lineNumber}` : ""
+              ((F == null ? void 0 : F.sourceFile) || ee) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
+                (F == null ? void 0 : F.sourceFile) && /* @__PURE__ */ d(G, { children: [
+                  F.sourceFile,
+                  F.lineNumber ? `:${F.lineNumber}` : ""
                 ] }),
-                $ != null && $.sourceFile && Q ? " · " : "",
-                Q ?? ""
+                F != null && F.sourceFile && ee ? " · " : "",
+                ee ?? ""
               ] })
             ] }),
             /* @__PURE__ */ n("div", { className: "pa-edit-panel-scroll", children: /* @__PURE__ */ n(
-              Vn,
+              Un,
               {
                 values: v,
                 onPropertyChange: T,
                 textKind: g,
-                textValue: f,
+                textValue: m,
                 onTextChange: P,
                 targetScope: a,
                 onTargetScopeChange: o,
                 elementState: s,
                 onElementStateChange: u,
-                instanceCount: A,
-                scopeHint: W,
+                instanceCount: te,
+                scopeHint: O,
                 stateHint: D
               }
             ) }),
             /* @__PURE__ */ d("div", { className: "pa-edit-panel-sticky", children: [
               /* @__PURE__ */ d("div", { className: "pa-edit-actions", children: [
-                /* @__PURE__ */ n(_, { variant: "regular", onClick: R, disabled: !N, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
-                  /* @__PURE__ */ n(dn, { className: "pa-glass-btn-icon" }),
+                /* @__PURE__ */ n(V, { variant: "regular", onClick: $, disabled: !N, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                  /* @__PURE__ */ n(un, { className: "pa-glass-btn-icon" }),
                   /* @__PURE__ */ n("span", { children: "Undo" })
                 ] }) }),
                 /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "regular",
                     onClick: k,
                     disabled: y.length === 0,
                     children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
-                      /* @__PURE__ */ n(un, { className: "pa-glass-btn-icon" }),
+                      /* @__PURE__ */ n(pn, { className: "pa-glass-btn-icon" }),
                       /* @__PURE__ */ n("span", { children: "Reset" })
                     ] })
                   }
@@ -1827,12 +1837,12 @@ All instances: ${F}`,
                   }
                 ),
                 /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: pe,
+                    onClick: he,
                     disabled: x === 0,
-                    title: $ != null && $.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    title: F != null && F.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1844,7 +1854,7 @@ All instances: ${F}`,
     )
   ] });
 }
-async function Xn(e, t = {}) {
+async function Gn(e, t = {}) {
   if (t.onApply)
     try {
       const r = await t.onApply(e);
@@ -1864,11 +1874,11 @@ async function Xn(e, t = {}) {
     } catch (r) {
       return { mode: "error", message: r instanceof Error ? r.message : String(r) };
     }
-  return await xt(JSON.stringify(e, null, 2)), { mode: "clipboard" };
+  return await Nt(JSON.stringify(e, null, 2)), { mode: "clipboard" };
 }
-function Gn(e) {
-  const [t, i] = M(null);
-  return z(() => {
+function Kn(e) {
+  const [t, i] = A(null);
+  return H(() => {
     if (!e) {
       i(null);
       return;
@@ -1881,8 +1891,8 @@ function Gn(e) {
     };
   }, [e]), t;
 }
-const re = 8, K = 8, Kn = 12, jn = 300, qn = 280;
-function Fe(e, t, i, r) {
+const ie = 8, j = 8, jn = 12, qn = 300, Jn = 280;
+function ze(e, t, i, r) {
   return {
     top: e,
     left: t,
@@ -1892,10 +1902,10 @@ function Fe(e, t, i, r) {
     height: r
   };
 }
-function He(e, t) {
+function Ve(e, t) {
   return e.left < t.right && e.right > t.left && e.top < t.bottom && e.bottom > t.top;
 }
-function Jn(e, t) {
+function Zn(e, t) {
   return {
     top: e.top - t,
     left: e.left - t,
@@ -1905,84 +1915,84 @@ function Jn(e, t) {
     height: e.height + t * 2
   };
 }
-function Zn() {
+function Qn() {
   if (typeof document > "u") return null;
   const e = document.querySelector(
     "[data-pixelagent-toolbar-portal] .pa-toolbar-float"
   );
-  return e ? Jn(e.getBoundingClientRect(), Kn) : null;
+  return e ? Zn(e.getBoundingClientRect(), jn) : null;
 }
-function Be(e, t) {
+function He(e, t) {
   return Math.min(
-    Math.max(re, e),
-    window.innerWidth - t - re
+    Math.max(ie, e),
+    window.innerWidth - t - ie
   );
 }
-function Ae(e, t) {
+function Se(e, t) {
   return Math.min(
-    Math.max(re, e),
-    window.innerHeight - t - re
+    Math.max(ie, e),
+    window.innerHeight - t - ie
   );
 }
-function Qn(e) {
-  return e.top >= re && e.left >= re && e.right <= window.innerWidth - re && e.bottom <= window.innerHeight - re;
+function er(e) {
+  return e.top >= ie && e.left >= ie && e.right <= window.innerWidth - ie && e.bottom <= window.innerHeight - ie;
 }
-function er(e, t) {
-  return t && He(e, t) ? !1 : Qn(e);
+function tr(e, t) {
+  return t && Ve(e, t) ? !1 : er(e);
 }
-function tr(e, t = jn, i = qn) {
-  const r = Zn(), o = e.top > window.innerHeight * 0.45 ? [
-    { placement: "above", top: e.top - i - K, left: e.left },
-    { placement: "below", top: e.bottom + K, left: e.left },
-    { placement: "right", top: e.top, left: e.right + K },
-    { placement: "left", top: e.top, left: e.left - t - K }
+function nr(e, t = qn, i = Jn) {
+  const r = Qn(), o = e.top > window.innerHeight * 0.45 ? [
+    { 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 + K, left: e.left },
-    { placement: "above", top: e.top - i - K, left: e.left },
-    { placement: "right", top: e.top, left: e.right + K },
-    { placement: "left", top: e.top, left: e.left - t - K }
+    { 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: c, left: l } of o) {
-    const p = Fe(
-      Ae(c, i),
-      Be(l, t),
+    const p = ze(
+      Se(c, i),
+      He(l, t),
       t,
       i
     );
-    if (er(p, r))
+    if (tr(p, r))
       return { top: p.top, left: p.left };
   }
-  let s = Ae(e.top - i - K, i), u = Be(e.left, t);
+  let s = Se(e.top - i - j, i), u = He(e.left, t);
   if (r) {
-    let c = Fe(s, u, t, i);
-    He(c, r) && (s = Ae(r.top - i - K, i), c = Fe(s, u, t, i)), He(c, r) && (s = Ae(e.bottom + K, i), u = Be(
-      Math.min(e.left, r.left - t - K),
+    let c = ze(s, u, t, i);
+    Ve(c, r) && (s = Se(r.top - i - j, i), c = ze(s, u, t, i)), Ve(c, r) && (s = Se(e.bottom + j, i), u = He(
+      Math.min(e.left, r.left - t - j),
       t
     ));
   }
   return { top: s, left: u };
 }
-function nr({
+function rr({
   elements: e,
   areaBbox: t,
   onSubmit: i,
   onCancel: r
 }) {
-  const [a, o] = M(""), s = U(null), u = U(null), c = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, p = Gn(c), m = l ?? p, v = Nt(), g = c ? de(c) : { kind: "none", value: "" }, f = g.kind !== "none" ? g.value : void 0;
-  if (z(() => {
+  const [a, o] = A(""), s = W(null), u = W(null), c = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, p = Kn(c), f = l ?? p, v = kt(), g = c ? ue(c) : { kind: "none", value: "" }, m = g.kind !== "none" ? g.value : void 0;
+  if (H(() => {
     var w;
     (w = s.current) == null || w.focus();
-  }, [e]), z(() => {
+  }, [e]), H(() => {
     const w = (N) => {
       N.key === "Escape" && r();
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [r]), !m) return null;
-  const y = tr(m), E = e.length > 1 ? `${e.length} selected` : c ? _e(c) : "Area selection", x = (w) => {
+  }, [r]), !f) return null;
+  const y = nr(f), E = e.length > 1 ? `${e.length} selected` : c ? Ue(c) : "Area selection", x = (w) => {
     a.trim() && i(a, w);
   };
   return /* @__PURE__ */ n(
-    Ee,
+    Te,
     {
       variant: "popover",
       style: { top: y.top, left: y.left },
@@ -1996,14 +2006,14 @@ function nr({
           className: "pa-popover-body",
           children: [
             /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: E }) }),
-            (v || f) && /* @__PURE__ */ d("div", { className: "pa-popover-context", children: [
+            (v || m) && /* @__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" }),
                 v
               ] }),
-              f && f !== v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
+              m && m !== v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Element" }),
-                f
+                m
               ] })
             ] }),
             /* @__PURE__ */ d("label", { className: "pa-label", children: [
@@ -2025,9 +2035,9 @@ function nr({
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
             /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(_, { variant: "ghost", onClick: r, children: "Cancel" }),
+              /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, children: "Cancel" }),
               /* @__PURE__ */ n(
-                _,
+                V,
                 {
                   variant: "ghost",
                   onClick: () => x(!0),
@@ -2036,7 +2046,7 @@ function nr({
                 }
               ),
               /* @__PURE__ */ n(
-                _,
+                V,
                 {
                   variant: "glass-primary",
                   onClick: () => x(!1),
@@ -2051,7 +2061,7 @@ function nr({
     }
   );
 }
-function rr({ area: e, isDragging: t }) {
+function ir({ area: e, isDragging: t }) {
   return !e || e.width < 2 || e.height < 2 ? null : /* @__PURE__ */ n(
     "div",
     {
@@ -2066,7 +2076,7 @@ function rr({ area: e, isDragging: t }) {
     }
   );
 }
-function ir(e) {
+function ar(e) {
   const { elements: t, note: i, areaBbox: r } = e, a = t[0];
   if (!a && r)
     return {
@@ -2085,7 +2095,7 @@ function ir(e) {
     };
   if (!a)
     throw new Error("buildAnnotationEntry requires at least one element or areaBbox");
-  const o = a.getBoundingClientRect(), s = Ve(a), u = Nt(), c = de(a), l = c.kind !== "none" ? c.value : void 0, p = t.map((m) => wt(m));
+  const o = a.getBoundingClientRect(), s = We(a), u = kt(), c = ue(a), l = c.kind !== "none" ? c.value : void 0, p = t.map((f) => xt(f));
   return {
     id: crypto.randomUUID(),
     selector: p[0],
@@ -2099,17 +2109,17 @@ function ir(e) {
       height: Math.round(o.height)
     },
     areaBbox: r,
-    domPath: Xt(a),
+    domPath: Gt(a),
     selectedText: u,
     elementText: l,
     sourceFile: s.sourceFile,
     lineNumber: s.lineNumber,
-    componentName: Yt(a) ?? s.componentName,
+    componentName: Xt(a) ?? s.componentName,
     createdAt: Date.now()
   };
 }
-function ar(e) {
-  const t = kt(e);
+function or(e) {
+  const t = Ct(e);
   if (t) return t.getBoundingClientRect();
   if (e.bbox) {
     const { x: i, y: r, width: a, height: o } = e.bbox;
@@ -2125,13 +2135,13 @@ function ar(e) {
   }
   return null;
 }
-function or(e) {
+function sr(e) {
   return `${Math.round(e.top)}:${Math.round(e.left)}:${Math.round(e.width)}:${Math.round(e.height)}`;
 }
-const sr = 20;
-function lr({ annotations: e }) {
-  const [t, i] = M([]);
-  return z(() => {
+const lr = 20;
+function cr({ annotations: e }) {
+  const [t, i] = A([]);
+  return H(() => {
     if (e.length === 0) {
       i([]);
       return;
@@ -2139,13 +2149,13 @@ function lr({ annotations: e }) {
     const r = /* @__PURE__ */ new Map(), a = () => {
       const u = [];
       e.forEach((c, l) => {
-        const p = ar(c);
+        const p = or(c);
         if (!p) return;
-        const m = or(p), v = r.get(m) ?? 0;
-        r.set(m, v + 1), u.push({
+        const f = sr(p), v = r.get(f) ?? 0;
+        r.set(f, v + 1), u.push({
           id: c.id,
           index: l + 1,
-          top: p.top - 6 - v * sr,
+          top: p.top - 6 - v * lr,
           left: p.right - 6
         });
       }), i(u);
@@ -2153,7 +2163,7 @@ function lr({ annotations: e }) {
     a();
     const o = /* @__PURE__ */ new Set();
     for (const u of e) {
-      const c = kt(u);
+      const c = Ct(u);
       c && o.add(c);
     }
     const s = Array.from(o).map((u) => {
@@ -2164,7 +2174,7 @@ function lr({ annotations: e }) {
       for (const u of s) u.disconnect();
       window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
     };
-  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(X, { children: t.map((r) => /* @__PURE__ */ n(
+  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(G, { children: t.map((r) => /* @__PURE__ */ n(
     "span",
     {
       className: "pa-annotation-badge",
@@ -2175,24 +2185,24 @@ function lr({ annotations: e }) {
     r.id
   )) });
 }
-const Ge = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
-function Me(e) {
-  return e instanceof Element ? !!e.closest(Ge) : !1;
+const je = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
+function Le(e) {
+  return e instanceof Element ? !!e.closest(je) : !1;
 }
-function ht(e, t) {
+function ft(e, t) {
   return document.elementsFromPoint(e, t).find(
-    (r) => r instanceof Element && !r.closest(Ge)
+    (r) => r instanceof Element && !r.closest(je)
   ) ?? null;
 }
-function $t(e) {
+function Dt(e) {
   return e ? e === "Copied all!" || e.startsWith("Copy failed") : !1;
 }
-function Dt({
+function Ot({
   feedback: e,
   slotClassName: t,
   children: i
 }) {
-  return e && $t(e) ? /* @__PURE__ */ n(
+  return e && Dt(e) ? /* @__PURE__ */ n(
     "span",
     {
       className: `pa-status pa-copy-feedback-slot ${t}`,
@@ -2200,9 +2210,9 @@ function Dt({
       "aria-live": "polite",
       children: e
     }
-  ) : /* @__PURE__ */ n(X, { children: i });
+  ) : /* @__PURE__ */ n(G, { children: i });
 }
-function cr({
+function dr({
   annotations: e,
   collapsed: t,
   onToggleCollapsed: i,
@@ -2215,20 +2225,20 @@ function cr({
   copiedEntryId: l,
   copyAllFrom: p
 }) {
-  const [m, v] = M(null), [g, f] = M("");
-  z(() => {
+  const [f, v] = A(null), [g, m] = A("");
+  H(() => {
     const x = (w) => {
       w.key === "Escape" && (t ? r() : i());
     };
     return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
   }, [t, r, i]);
   const y = (x) => {
-    v(x.id), f(x.note);
+    v(x.id), m(x.note);
   }, E = (x) => {
     g.trim() && (u(x, { note: g.trim() }), v(null));
   };
   return /* @__PURE__ */ d(
-    Ee,
+    Te,
     {
       variant: "sheet",
       side: "right",
@@ -2237,7 +2247,7 @@ function cr({
         /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
           /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
-              _,
+              V,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
@@ -2256,12 +2266,12 @@ function cr({
           !t && /* @__PURE__ */ n("p", { className: "pa-session-subtitle", children: "Persists until tab close" }),
           /* @__PURE__ */ d("div", { className: "pa-session-actions", children: [
             /* @__PURE__ */ n(
-              Dt,
+              Ot,
               {
                 feedback: p === "session" ? c : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2272,14 +2282,14 @@ function cr({
                 )
               }
             ),
-            /* @__PURE__ */ n(_, { 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((x) => {
-            const w = Gt(x);
-            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: m === x.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
+            const w = Kt(x);
+            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: f === x.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
               /* @__PURE__ */ d("label", { className: "pa-label", children: [
                 "Note",
                 /* @__PURE__ */ n(
@@ -2287,15 +2297,15 @@ function cr({
                   {
                     className: "pa-textarea",
                     value: g,
-                    onChange: (N) => f(N.target.value),
+                    onChange: (N) => m(N.target.value),
                     rows: 3
                   }
                 )
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(_, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
+                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "glass-primary",
                     onClick: () => E(x.id),
@@ -2304,7 +2314,7 @@ function cr({
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ d(X, { children: [
+            ] }) : /* @__PURE__ */ d(G, { 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 }),
@@ -2320,7 +2330,7 @@ function cr({
                     children: "Copied!"
                   }
                 ) : /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2330,7 +2340,7 @@ function cr({
                   }
                 ),
                 /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
@@ -2340,7 +2350,7 @@ function cr({
                   }
                 ),
                 /* @__PURE__ */ n(
-                  _,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
@@ -2357,7 +2367,7 @@ function cr({
     }
   );
 }
-function dr() {
+function ur() {
   return /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
@@ -2378,7 +2388,7 @@ function dr() {
     )
   ] });
 }
-function ur() {
+function pr() {
   return /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "2.75", stroke: "currentColor", strokeWidth: "1.25" }),
     /* @__PURE__ */ n(
@@ -2392,7 +2402,7 @@ function ur() {
     )
   ] });
 }
-function pr() {
+function hr() {
   return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -2403,27 +2413,27 @@ function pr() {
     }
   ) });
 }
-function hr({
+function fr({
   open: e,
   onClose: t,
   hostTheme: i,
   chrome: r,
   onToggleHostTheme: a
 }) {
-  const o = U(null);
-  return z(() => {
+  const o = W(null);
+  return H(() => {
     if (!e) return;
     const s = (c) => {
       c.key === "Escape" && t();
     }, u = (c) => {
-      var p, m;
+      var p, f;
       const l = c.target;
-      (p = o.current) != null && p.contains(l) || (m = l.closest) != null && m.call(l, "[data-pa-settings-trigger]") || t();
+      (p = o.current) != null && p.contains(l) || (f = l.closest) != null && f.call(l, "[data-pa-settings-trigger]") || t();
     };
     return window.addEventListener("keydown", s), window.addEventListener("mousedown", u), () => {
       window.removeEventListener("keydown", s), window.removeEventListener("mousedown", u);
     };
-  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: o, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Ee, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ d("div", { className: "pa-settings-menu-inner", children: [
+  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: o, 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: [
     /* @__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" })
@@ -2433,13 +2443,13 @@ function hr({
       /* @__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,
           {
             variant: "icon",
             onClick: a,
             "aria-label": i === "dark" ? "Switch host to light theme" : "Switch host to dark theme",
             title: i === "dark" ? "Light theme" : "Dark theme",
-            children: i === "dark" ? /* @__PURE__ */ n(ur, {}) : /* @__PURE__ */ n(pr, {})
+            children: i === "dark" ? /* @__PURE__ */ n(pr, {}) : /* @__PURE__ */ n(hr, {})
           }
         )
       ] })
@@ -2456,13 +2466,13 @@ function hr({
 }
 const mt = "0 0 24 24";
 function mr() {
-  return /* @__PURE__ */ d(X, { children: [
+  return /* @__PURE__ */ d(G, { children: [
     /* @__PURE__ */ n("rect", { x: "3", y: "14", width: "4", height: "4", fill: "currentColor" }),
     /* @__PURE__ */ n("path", { fill: "currentColor", d: "M7 5h12v12L7 5z" })
   ] });
 }
-const fr = "M4.5 2.5L4.5 17.25L9.1 12.9L11.35 19.15L13.55 17.95L11.05 11.85L16.85 11.85L4.5 2.5Z";
-function gr({ size: e = 22, variant: t = "cursor" }) {
+const gr = "M4.5 2.5L4.5 17.25L9.1 12.9L11.35 19.15L13.55 17.95L11.05 11.85L16.85 11.85L4.5 2.5Z";
+function vr({ size: e = 22, variant: t = "cursor" }) {
   return t === "pointer" ? /* @__PURE__ */ n(
     "svg",
     {
@@ -2476,7 +2486,7 @@ function gr({ size: e = 22, variant: t = "cursor" }) {
         "path",
         {
           fill: "currentColor",
-          d: fr
+          d: gr
         }
       )
     }
@@ -2493,12 +2503,12 @@ function gr({ size: e = 22, variant: t = "cursor" }) {
     }
   );
 }
-const vr = ["element", "area", "multi"], br = {
+const br = ["element", "area", "multi"], yr = {
   element: "Click",
   area: "Area",
   multi: "Multi"
 };
-function yr({
+function wr({
   rootAttributes: e,
   hostTheme: t,
   chrome: i,
@@ -2510,27 +2520,27 @@ function yr({
   mode: c,
   captureMode: l,
   annotationCount: p,
-  multiSelectCount: m,
+  multiSelectCount: f,
   copyStatus: v,
   copyAllFrom: g,
-  onActivateAnnotate: f,
+  onActivateAnnotate: m,
   onActivateEdit: y,
   onDeactivate: E,
   onCopyAll: x,
   onCaptureModeChange: w,
   onConfirmMultiSelect: N
 }) {
-  const { elementRef: T, isDragging: P, style: R, dragHandleProps: k } = St(), I = /* @__PURE__ */ d(
+  const { elementRef: T, isDragging: P, style: $, dragHandleProps: k } = Lt(), I = /* @__PURE__ */ d(
     "div",
     {
       ref: T,
       className: `pa-toolbar-float ${P ? "pa-toolbar-float--dragging" : ""}`,
-      style: R,
+      style: $,
       role: "toolbar",
       "aria-label": "PixelAgent",
       children: [
         !u && /* @__PURE__ */ n(
-          hr,
+          fr,
           {
             open: r,
             onClose: o,
@@ -2539,7 +2549,7 @@ function yr({
             onToggleHostTheme: s
           }
         ),
-        /* @__PURE__ */ n(Mt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
+        /* @__PURE__ */ n(St, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
           /* @__PURE__ */ n(
             "button",
             {
@@ -2548,14 +2558,14 @@ function yr({
               "aria-label": "Drag PixelAgent toolbar",
               title: "Drag to move",
               ...k,
-              children: /* @__PURE__ */ n(gr, { size: 22 })
+              children: /* @__PURE__ */ n(vr, { size: 22 })
             }
           ),
           /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
-          u ? /* @__PURE__ */ d(X, { children: [
+          u ? /* @__PURE__ */ d(G, { children: [
             /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
               /* @__PURE__ */ n("span", { className: "pa-mode-badge", children: c }),
-              c === "annotate" && /* @__PURE__ */ d(X, { children: [
+              c === "annotate" && /* @__PURE__ */ d(G, { children: [
                 /* @__PURE__ */ n(
                   "select",
                   {
@@ -2563,25 +2573,25 @@ function yr({
                     value: l,
                     onChange: (C) => w(C.target.value),
                     "aria-label": "Capture mode",
-                    children: vr.map((C) => /* @__PURE__ */ n("option", { value: C, children: br[C] }, C))
+                    children: br.map((C) => /* @__PURE__ */ n("option", { value: C, children: yr[C] }, C))
                   }
                 ),
-                m > 0 && /* @__PURE__ */ n(
-                  _,
+                f > 0 && /* @__PURE__ */ n(
+                  V,
                   {
                     variant: "glass-primary",
                     onClick: N,
                     "aria-label": "Annotate selected elements",
-                    children: m
+                    children: f
                   }
                 ),
                 /* @__PURE__ */ n(
-                  Dt,
+                  Ot,
                   {
                     feedback: g === "toolbar" ? v : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
-                      _,
+                      V,
                       {
                         variant: "glass-primary",
                         onClick: x,
@@ -2595,7 +2605,7 @@ function yr({
               ] })
             ] }),
             /* @__PURE__ */ n(
-              _,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
@@ -2623,13 +2633,13 @@ function yr({
               }
             )
           ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(_, { onClick: f, children: "Annotate" }),
-            /* @__PURE__ */ n(_, { onClick: y, children: "Edit" })
+            /* @__PURE__ */ n(V, { onClick: m, children: "Annotate" }),
+            /* @__PURE__ */ n(V, { onClick: y, children: "Edit" })
           ] }),
-          !u && /* @__PURE__ */ d(X, { children: [
+          !u && /* @__PURE__ */ d(G, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
-              _,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-settings",
@@ -2638,16 +2648,16 @@ function yr({
                 "aria-label": "PixelAgent settings",
                 "aria-expanded": r,
                 title: "Settings",
-                children: /* @__PURE__ */ n(dr, {})
+                children: /* @__PURE__ */ n(ur, {})
               }
             )
           ] }),
-          v && !$t(v) && v !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: v })
+          v && !Dt(v) && v !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: v })
         ] }) })
       ]
     }
   );
-  return typeof document > "u" ? I : Ue(
+  return typeof document > "u" ? I : Ye(
     /* @__PURE__ */ n(
       "div",
       {
@@ -2660,15 +2670,15 @@ function yr({
     document.body
   );
 }
-function wr() {
-  const e = U(Kt()), [t, i] = M(
+function xr() {
+  const e = W(jt()), [t, i] = A(
     () => {
       var o;
       return ((o = e.current) == null ? void 0 : o.annotations) ?? [];
     }
   );
-  z(() => {
-    jt({ annotations: t });
+  H(() => {
+    qt({ annotations: t });
   }, [t]);
   const r = L((o, s) => {
     i(
@@ -2684,32 +2694,32 @@ function wr() {
     removeAnnotation: a
   };
 }
-function xr({
+function Nr({
   ui: e,
   hostTheme: t,
   onHostThemeChange: i
 }) {
-  const r = ve(
-    () => ({ ...qt, ...e }),
+  const r = we(
+    () => ({ ...Jt, ...e }),
     [e]
-  ), [a, o] = M(
-    () => t ?? et(r) ?? "dark"
-  ), [s, u] = M(!1), c = t ?? a;
-  z(() => {
+  ), [a, o] = A(
+    () => t ?? tt(r) ?? "dark"
+  ), [s, u] = A(!1), c = t ?? a;
+  H(() => {
     if (t !== void 0) return;
     const v = () => {
-      const y = et(r);
+      const y = tt(r);
       y && o(y);
     };
     v();
-    const g = r.hostThemeAttribute, f = new MutationObserver(v);
-    return f.observe(document.documentElement, {
+    const g = r.hostThemeAttribute, m = new MutationObserver(v);
+    return m.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: [g]
-    }), () => f.disconnect();
+    }), () => m.disconnect();
   }, [t, r]);
-  const l = ve(
-    () => Jt(r, c),
+  const l = we(
+    () => Zt(r, c),
     [r, c]
   ), p = L(() => {
     const v = c === "dark" ? "light" : "dark";
@@ -2717,87 +2727,87 @@ function xr({
       i(v);
       return;
     }
-    o(v), Zt(v, r);
-  }, [c, i, r]), m = L(() => {
+    o(v), Qt(v, r);
+  }, [c, i, r]), f = L(() => {
     u((v) => !v);
   }, []);
   return {
     chrome: l,
-    rootAttributes: Qt(l),
+    rootAttributes: en(l),
     hostTheme: c,
     toggleHostTheme: p,
     settingsOpen: s,
     setSettingsOpen: u,
-    toggleSettings: m,
+    toggleSettings: f,
     uiSettings: r
   };
 }
-const ft = "/__pixelagent/apply";
-function gt(e) {
+const gt = "/__pixelagent/apply";
+function vt(e) {
   const t = Math.min(e.startX, e.currentX), i = Math.min(e.startY, e.currentY), r = Math.abs(e.currentX - e.startX), a = Math.abs(e.currentY - e.startY);
   return { x: t, y: i, width: r, height: a };
 }
-function Nr({
+function kr({
   ui: e,
   hostTheme: t,
   onHostThemeChange: i,
   applyEndpoint: r,
   onApply: a
 } = {}) {
-  const o = xr({ ui: e, hostTheme: t, onHostThemeChange: i }), [s, u] = M(null);
-  z(() => {
+  const o = Nr({ ui: e, hostTheme: t, onHostThemeChange: i }), [s, u] = A(null);
+  H(() => {
     if (r || a) return;
     let b = !1;
-    return fetch(ft, { method: "GET" }).then((S) => {
-      !b && S.status === 405 && u(ft);
+    return fetch(gt, { method: "GET" }).then((S) => {
+      !b && S.status === 405 && u(gt);
     }).catch(() => {
     }), () => {
       b = !0;
     };
   }, [r, a]);
-  const [c, l] = M(!1), [p, m] = M("idle"), [v, g] = M("element"), {
-    annotations: f,
+  const [c, l] = A(!1), [p, f] = A("idle"), [v, g] = A("element"), {
+    annotations: m,
     setAnnotations: y,
     updateAnnotation: E,
     removeAnnotation: x
-  } = wr(), [w, N] = M(null), [T, P] = M(null), [R, k] = M([]), [I, C] = M(null), [h, O] = M(null), [Y, ee] = M(!1), [Z, q] = M(!1), pe = c && p === "annotate" && f.length > 0 && !Y, [$, Q] = M("this-instance"), [A, F] = M("normal"), [D, W] = M(null), [H, B] = M(null), [j, te] = M(null), ie = U(null), Ie = U(null), he = L(
+  } = xr(), [w, N] = A(null), [T, P] = A(null), [$, k] = A([]), [I, C] = A(null), [h, B] = A(null), [Y, ne] = A(!1), [Q, J] = A(!1), he = c && p === "annotate" && m.length > 0 && !Y, [F, ee] = A("this-instance"), [te, M] = A("normal"), [D, O] = A(null), [_, R] = A(null), [z, X] = A(null), q = W(null), fe = W(null), me = L(
     (b, S) => {
-      Ie.current && clearTimeout(Ie.current), W(b), B((S == null ? void 0 : S.entryId) ?? null), te((S == null ? void 0 : S.copyAllFrom) ?? null), Ie.current = setTimeout(() => {
-        W(null), B(null), te(null);
+      fe.current && clearTimeout(fe.current), O(b), R((S == null ? void 0 : S.entryId) ?? null), X((S == null ? void 0 : S.copyAllFrom) ?? null), fe.current = setTimeout(() => {
+        O(null), R(null), X(null);
       }, 2500);
     },
     []
-  ), be = L(
-    async (b, S, G) => {
+  ), xe = L(
+    async (b, S, K) => {
       if (b)
         try {
-          await xt(b), he(S, G);
+          await Nt(b), me(S, K);
         } catch {
-          he("Copy failed — check clipboard permissions", G);
+          me("Copy failed — check clipboard permissions", K);
         }
     },
-    [he]
-  ), me = L(
+    [me]
+  ), ge = L(
     (b, S) => {
       b.length === 0 && !S || (C({ elements: b, areaBbox: S }), P(b[0] ?? null));
     },
     []
-  ), Te = L(
+  ), Pe = L(
     (b) => {
-      if (!(!c || p !== "annotate" || Me(b.target))) {
+      if (!(!c || p !== "annotate" || Le(b.target))) {
         if (h) {
-          O(
+          B(
             (S) => S && { ...S, currentX: b.clientX, currentY: b.clientY }
           );
           return;
         }
-        v !== "area" && N(ht(b.clientX, b.clientY));
+        v !== "area" && N(ft(b.clientX, b.clientY));
       }
     },
     [c, p, h, v]
-  ), Pe = L(
+  ), Re = L(
     (b) => {
-      !c || p !== "annotate" || Me(b.target) || v !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), O({
+      !c || p !== "annotate" || Le(b.target) || v !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), B({
         startX: b.clientX,
         startY: b.clientY,
         currentX: b.clientX,
@@ -2805,105 +2815,106 @@ function Nr({
       }), C(null));
     },
     [c, p, v]
-  ), Re = L(() => {
+  ), $e = L(() => {
     if (!h) return;
-    const b = gt(h);
-    if (O(null), b.width < 8 || b.height < 8) return;
-    const S = en(b, Ge);
-    me(S, b);
-  }, [h, me]), $e = L(
+    const b = vt(h);
+    if (B(null), b.width < 8 || b.height < 8) return;
+    const S = tn(b, je);
+    ge(S, b);
+  }, [h, ge]), De = L(
     (b) => {
-      if (!c || p !== "annotate" || Me(b.target) || v === "area") return;
+      if (!c || p !== "annotate" || Le(b.target) || v === "area") return;
       b.preventDefault(), b.stopPropagation();
-      const S = ht(b.clientX, b.clientY);
+      const S = ft(b.clientX, b.clientY);
       if (!S) return;
       if (b.shiftKey || v === "multi") {
-        k((J) => J.includes(S) ? J.filter((V) => V !== S) : [...J, S]), P(S);
+        k((Z) => Z.includes(S) ? Z.filter((U) => U !== S) : [...Z, S]), P(S);
         return;
       }
-      const G = R.length > 0 ? R : [S];
-      me(G.includes(S) ? G : [S]);
+      const K = $.length > 0 ? $ : [S];
+      ge(K.includes(S) ? K : [S]);
     },
-    [c, p, v, R, me]
+    [c, p, v, $, ge]
   );
-  z(() => {
-    !T || $ !== "all-instances" || bt(T) <= 1 && Q("this-instance");
-  }, [T, $]), z(() => {
+  H(() => {
+    !T || F !== "all-instances" || yt(T) <= 1 && ee("this-instance");
+  }, [T, F]), H(() => {
     if (c)
-      return document.addEventListener("mousemove", Te, !0), document.addEventListener("mousedown", Pe, !0), document.addEventListener("mouseup", Re, !0), document.addEventListener("click", $e, !0), () => {
-        document.removeEventListener("mousemove", Te, !0), document.removeEventListener("mousedown", Pe, !0), document.removeEventListener("mouseup", Re, !0), document.removeEventListener("click", $e, !0);
+      return document.addEventListener("mousemove", Pe, !0), document.addEventListener("mousedown", Re, !0), document.addEventListener("mouseup", $e, !0), document.addEventListener("click", De, !0), () => {
+        document.removeEventListener("mousemove", Pe, !0), document.removeEventListener("mousedown", Re, !0), document.removeEventListener("mouseup", $e, !0), document.removeEventListener("click", De, !0);
       };
-  }, [c, Te, Pe, Re, $e]);
-  const Ot = L(
+  }, [c, Pe, Re, $e, De]);
+  const Ft = L(
     (b, S) => {
       if (!I || !b.trim()) return;
-      const { elements: G, areaBbox: J } = I;
-      if (G.length === 0 && !J) return;
-      const fe = ir({
-        elements: G,
+      const { elements: K, areaBbox: Z } = I;
+      if (K.length === 0 && !Z) return;
+      const ve = ar({
+        elements: K,
         note: b,
-        areaBbox: J
+        areaBbox: Z
       });
-      y((V) => [...V, fe]), ee(!1), q(!1), S ? (C(null), P(null)) : (C(null), P(null), k([]));
+      y((U) => [...U, ve]), ne(!1), J(!1), S ? (C(null), P(null)) : (C(null), P(null), k([]));
     },
     [I, y]
-  ), Ft = L(() => {
+  ), Bt = L(() => {
     C(null), P(null);
-  }, []), Ke = L(
+  }, []), qe = L(
     async (b) => {
-      const S = tn(f);
-      await be(S, "Copied all!", { copyAllFrom: b });
+      const S = nn(m);
+      await xe(S, "Copied all!", { copyAllFrom: b });
     },
-    [f, be]
-  ), Bt = L(
+    [m, xe]
+  ), zt = L(
     async (b) => {
-      const S = f.find((G) => G.id === b);
-      S && await be(nn(S), "Copied!", { entryId: b });
+      const S = m.find((K) => K.id === b);
+      S && await xe(rn(S), "Copied!", { entryId: b });
     },
-    [f, be]
-  ), zt = L(
+    [m, xe]
+  ), Ht = L(
     async (b) => {
-      const S = Array.from(b.entries()).filter(
-        ([, V]) => V.length > 0
-      );
+      const S = [];
+      for (const [U, ae] of b)
+        for (const [Oe, be] of ae)
+          be.length > 0 && S.push([U, Oe, be]);
       if (S.length === 0) return !1;
-      const G = r ?? s ?? void 0, J = [];
-      for (const [V, ge] of S) {
-        const qe = Ve(V), Vt = {
+      const K = r ?? s ?? void 0, Z = [];
+      for (const [U, ae, Oe] of S) {
+        const be = We(U), Ut = {
           schemaVersion: 1,
-          elementSelector: yt(V, $),
-          sourceFile: qe.sourceFile,
-          lineNumber: qe.lineNumber,
-          targetScope: $,
-          state: A,
-          stylingSystem: vt(V),
-          changes: ge
+          elementSelector: wt(U, F),
+          sourceFile: be.sourceFile,
+          lineNumber: be.lineNumber,
+          targetScope: F,
+          state: ae,
+          stylingSystem: bt(U),
+          changes: Oe
         };
-        J.push(await Xn(Vt, { applyEndpoint: G, onApply: a }));
+        Z.push(await Gn(Ut, { applyEndpoint: K, onApply: a }));
       }
-      const fe = J.every(
-        (V) => V.mode === "mcp" && V.result.success && V.result.linesChanged.length > 0
+      const ve = Z.every(
+        (U) => U.mode === "mcp" && U.result.success && U.result.linesChanged.length > 0
       );
-      return he(fe ? "Change applied" : "Apply failed"), J.forEach((V, ge) => {
-        V.mode === "error" ? console.error(`[pixelagent] Apply #${ge} failed:`, V.message) : V.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${ge} fell back to clipboard`) : V.mode === "mcp" && !V.result.success && console.warn(`[pixelagent] Apply #${ge} reported no changes:`, V.result);
-      }), fe;
+      return me(ve ? "Change applied" : "Apply failed"), Z.forEach((U, ae) => {
+        U.mode === "error" ? console.error(`[pixelagent] Apply #${ae} failed:`, U.message) : U.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${ae} fell back to clipboard`) : U.mode === "mcp" && !U.result.success && console.warn(`[pixelagent] Apply #${ae} reported no changes:`, U.result);
+      }), ve;
     },
-    [$, A, r, s, a, he]
-  ), je = (b) => {
-    o.setSettingsOpen(!1), l(!0), m(b), P(null), N(null), C(null), k([]), O(null), b === "annotate" && ee(!1);
-  }, Ht = () => {
-    l(!1), m("idle"), P(null), N(null), C(null), k([]), O(null), ee(!1), q(!1);
-  }, _t = h ? gt(h) : null;
+    [F, r, s, a, me]
+  ), Je = (b) => {
+    o.setSettingsOpen(!1), l(!0), f(b), P(null), N(null), C(null), k([]), B(null), b === "annotate" && ne(!1);
+  }, _t = () => {
+    l(!1), f("idle"), P(null), N(null), C(null), k([]), B(null), ne(!1), J(!1);
+  }, Vt = h ? vt(h) : null;
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: ie,
+      ref: q,
       className: "pa-root",
       "data-pixelagent-root": !0,
       ...o.rootAttributes,
       children: [
         /* @__PURE__ */ n(
-          yr,
+          wr,
           {
             rootAttributes: o.rootAttributes,
             hostTheme: o.hostTheme,
@@ -2915,88 +2926,88 @@ function Nr({
             active: c,
             mode: p,
             captureMode: v,
-            annotationCount: f.length,
-            multiSelectCount: R.length,
+            annotationCount: m.length,
+            multiSelectCount: $.length,
             copyStatus: D,
-            copyAllFrom: j,
-            onActivateAnnotate: () => je("annotate"),
-            onActivateEdit: () => je("edit"),
-            onDeactivate: Ht,
-            onCopyAll: () => Ke("toolbar"),
+            copyAllFrom: z,
+            onActivateAnnotate: () => Je("annotate"),
+            onActivateEdit: () => Je("edit"),
+            onDeactivate: _t,
+            onCopyAll: () => qe("toolbar"),
             onCaptureModeChange: g,
             onConfirmMultiSelect: () => {
-              R.length > 0 && me(R);
+              $.length > 0 && ge($);
             }
           }
         ),
-        c && p === "annotate" && /* @__PURE__ */ d(X, { children: [
+        c && p === "annotate" && /* @__PURE__ */ d(G, { children: [
           /* @__PURE__ */ n(
-            Ct,
+            Mt,
             {
               element: w,
               selected: T,
-              multiSelected: R
+              multiSelected: $
             }
           ),
-          /* @__PURE__ */ n(lr, { annotations: f }),
-          /* @__PURE__ */ n(rr, { area: _t, isDragging: !!h })
+          /* @__PURE__ */ n(cr, { annotations: m }),
+          /* @__PURE__ */ n(ir, { area: Vt, isDragging: !!h })
         ] }),
         c && p === "annotate" && I && /* @__PURE__ */ n(
-          nr,
+          rr,
           {
             elements: I.elements,
             areaBbox: I.areaBbox,
-            onSubmit: Ot,
-            onCancel: Ft
+            onSubmit: Ft,
+            onCancel: Bt
           }
         ),
         c && p === "edit" && /* @__PURE__ */ n(
-          Yn,
+          Xn,
           {
             selectedElement: T,
             hoveredElement: w,
             onSelectElement: P,
             onHoverElement: N,
-            targetScope: $,
-            onTargetScopeChange: Q,
-            elementState: A,
-            onElementStateChange: F,
-            onApply: zt,
+            targetScope: F,
+            onTargetScopeChange: ee,
+            elementState: te,
+            onElementStateChange: M,
+            onApply: Ht,
             applyStatus: p === "edit" ? D : null,
-            isToolbarTarget: Me
+            isToolbarTarget: Le
           }
         ),
-        pe && /* @__PURE__ */ n(
-          cr,
+        he && /* @__PURE__ */ n(
+          dr,
           {
-            annotations: f,
-            collapsed: Z,
-            onToggleCollapsed: () => q((b) => !b),
+            annotations: m,
+            collapsed: Q,
+            onToggleCollapsed: () => J((b) => !b),
             onClose: () => {
-              ee(!0), q(!1);
+              ne(!0), J(!1);
             },
-            onCopyAll: () => Ke("session"),
-            onCopyOne: Bt,
+            onCopyAll: () => qe("session"),
+            onCopyOne: zt,
             onRemove: x,
             onUpdate: E,
             copyStatus: D,
-            copiedEntryId: H,
-            copyAllFrom: j
+            copiedEntryId: _,
+            copyAllFrom: z
           }
         )
       ]
     }
   );
 }
-function kr() {
+function Cr() {
   return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function Lr() {
-  return kr() ? /* @__PURE__ */ n(Nr, {}) : null;
+function Er() {
+  return Cr() ? /* @__PURE__ */ n(kr, {}) : null;
 }
 export {
-  Nr as PixelAgent,
-  Lr as PixelAgentDev,
-  kr as isDevEnvironment
+  kr as PixelAgent,
+  Er as PixelAgentDev,
+  Cr as isDevEnvironment
 };
 //# sourceMappingURL=pixelagent.js.map