pixelagent 0.1.17 → 0.1.19

package/dist/pixelagent.js

@@ -1,15 +1,15 @@
-import { jsxs as d, Fragment as K, jsx as n } from "react/jsx-runtime";
-import { useState as S, useEffect as _, useRef as Y, useMemo as xe, useLayoutEffect as Kt, useCallback as $, useId as jt } from "react";
-import { getElementDisplayLabel as Xe, captureTextSnapshot as tt, captureInlineStyles as nt, restoreInlineStyles as we, restoreTextSnapshot as ke, getPreviewTargets as $e, clearTailwindStatePreview as Ce, applyTailwindStatePreview as ze, setEditableTextPreview as rt, getRelevantComputedStyles as Me, getEditableTextInfo as fe, readReactSource as Ge, detectStylingSystem as kt, countElementInstances as Ct, getScopeSelector as Mt, getCssSelector as At, copyToClipboard as St, getWindowSelectionText as Lt, getNearestReactComponentName as qt, getDomPath as Jt, resolveElementFromEntry as Et, getAnnotationSessionDisplay as Zt, loadAnnotationSession as Qt, saveAnnotationSession as en, DEFAULT_PIXEL_AGENT_UI_SETTINGS as tn, readHostThemeFromDocument as it, resolvePixelAgentChrome as nn, applyHostThemeToDocument as rn, pixelAgentRootAttributes as an, getElementsInArea as on, formatAllAnnotations as sn, formatAnnotation as ln } from "@pixelagent/shared";
+import { jsxs as d, Fragment as q, jsx as n } from "react/jsx-runtime";
+import { useState as A, useEffect as _, useRef as X, useMemo as Me, useLayoutEffect as Kt, useCallback as $, useId as jt } from "react";
+import { getElementDisplayLabel as Xe, captureTextSnapshot as tt, captureInlineStyles as nt, restoreInlineStyles as ke, restoreTextSnapshot as Ae, getPreviewTargets as Re, clearTailwindStatePreview as Se, applyTailwindStatePreview as ze, setEditableTextPreview as rt, getRelevantComputedStyles as Ce, getEditableTextInfo as ve, readStateRuleDeclarations as qt, readReactSource as Ge, detectStylingSystem as kt, countElementInstances as Ct, getScopeSelector as Mt, getCssSelector as At, copyToClipboard as St, getWindowSelectionText as Lt, getNearestReactComponentName as Jt, getDomPath as Zt, resolveElementFromEntry as $t, getAnnotationSessionDisplay as Qt, loadAnnotationSession as en, saveAnnotationSession as tn, DEFAULT_PIXEL_AGENT_UI_SETTINGS as nn, readHostThemeFromDocument as it, resolvePixelAgentChrome as rn, applyHostThemeToDocument as on, pixelAgentRootAttributes as an, getElementsInArea as sn, formatAllAnnotations as ln, formatAnnotation as cn } from "@pixelagent/shared";
 export * from "@pixelagent/shared";
 import { createPortal as Ke } from "react-dom";
-function $t({
+function Et({
   element: e,
   selected: t,
   multiSelected: i = [],
   primarySelected: r = null
 }) {
-  const [a, s] = S([]), o = r ?? t;
+  const [o, s] = A([]), a = r ?? t;
   if (_(() => {
     const l = /* @__PURE__ */ new Map(), f = i.length > 0;
     e && !t && !f && l.set(e, !1), t && l.set(t, !0);
@@ -25,7 +25,7 @@ function $t({
           rect: m.getBoundingClientRect(),
           label: Xe(m),
           isSelected: g,
-          isPrimary: o !== null && m === o
+          isPrimary: a !== null && m === a
         }))
       );
     };
@@ -38,10 +38,10 @@ function $t({
       for (const m of v) m.disconnect();
       window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p);
     };
-  }, [e, t, i, o]), a.length === 0) return null;
-  const c = a.find((l) => l.isPrimary) ?? a.find((l) => l.isSelected) ?? a[0], u = a.filter((l) => l.isSelected).length;
-  return /* @__PURE__ */ d(K, { children: [
-    a.map((l, f) => /* @__PURE__ */ n(
+  }, [e, t, i, a]), o.length === 0) return null;
+  const c = o.find((l) => l.isPrimary) ?? o.find((l) => l.isSelected) ?? o[0], u = o.filter((l) => l.isSelected).length;
+  return /* @__PURE__ */ d(q, { children: [
+    o.map((l, f) => /* @__PURE__ */ n(
       "div",
       {
         className: [
@@ -72,41 +72,41 @@ function $t({
     )
   ] });
 }
-const It = 0.35, cn = 0.48;
-function dn(e, t, i, r = It) {
+const It = 0.35, dn = 0.48;
+function un(e, t, i, r = It) {
   if (e < 8 || t < 8) return null;
-  const a = 1, s = Math.max(1, Math.round(e * a)), o = Math.max(1, Math.round(t * a)), c = document.createElement("canvas");
-  c.width = s, c.height = o;
+  const o = 1, s = Math.max(1, Math.round(e * o)), a = Math.max(1, Math.round(t * o)), c = document.createElement("canvas");
+  c.width = s, c.height = a;
   const u = c.getContext("2d");
   if (!u) return null;
-  const l = u.createImageData(s, o), f = l.data, p = Math.min(0.5, i / Math.min(e, t)), v = 0.3, m = 0.2, g = Math.max(0.4, p + 0.1);
-  let b = 0;
-  const E = new Float32Array(s * o * 2);
-  let N = 0;
-  for (let k = 0; k < o; k++)
-    for (let I = 0; I < s; I++) {
-      const P = I / s - 0.5, R = k / o - 0.5, x = un(P, R, v, m, g), T = at(0.8, 0, x - 0.15), C = at(0, 1, T), h = (P * C + 0.5) * s - I, F = (R * C + 0.5) * o - k;
-      Math.abs(h) > b && (b = Math.abs(h)), Math.abs(F) > b && (b = Math.abs(F)), E[N++] = h, E[N++] = F;
-    }
-  if (b === 0) return null;
-  b *= 0.4 * r;
+  const l = u.createImageData(s, a), f = l.data, p = Math.min(0.5, i / Math.min(e, t)), v = 0.3, m = 0.2, g = Math.max(0.4, p + 0.1);
+  let y = 0;
+  const S = new Float32Array(s * a * 2);
   let w = 0;
-  for (let k = 0; k < f.length; k += 4) {
-    const I = E[w++] / b + 0.5, P = E[w++] / b + 0.5;
-    f[k] = I * 255, f[k + 1] = P * 255, f[k + 2] = 0, f[k + 3] = 255;
+  for (let N = 0; N < a; N++)
+    for (let E = 0; E < s; E++) {
+      const z = E / s - 0.5, R = N / a - 0.5, x = pn(z, R, v, m, g), I = ot(0.8, 0, x - 0.15), L = ot(0, 1, I), h = (z * L + 0.5) * s - E, F = (R * L + 0.5) * a - N;
+      Math.abs(h) > y && (y = Math.abs(h)), Math.abs(F) > y && (y = Math.abs(F)), S[w++] = h, S[w++] = F;
+    }
+  if (y === 0) return null;
+  y *= 0.4 * r;
+  let k = 0;
+  for (let N = 0; N < f.length; N += 4) {
+    const E = S[k++] / y + 0.5, z = S[k++] / y + 0.5;
+    f[N] = E * 255, f[N + 1] = z * 255, f[N + 2] = 0, f[N + 3] = 255;
   }
   return u.putImageData(l, 0, 0), {
     href: c.toDataURL("image/png"),
-    scale: b / a,
+    scale: y / o,
     width: s,
-    height: o
+    height: a
   };
 }
-function un(e, t, i, r, a) {
-  const s = Math.abs(e) - i + a, o = Math.abs(t) - r + a;
-  return Math.min(Math.max(s, o), 0) + Math.hypot(Math.max(s, 0), Math.max(o, 0)) - a;
+function pn(e, t, i, r, o) {
+  const s = Math.abs(e) - i + o, a = Math.abs(t) - r + o;
+  return Math.min(Math.max(s, a), 0) + Math.hypot(Math.max(s, 0), Math.max(a, 0)) - o;
 }
-function at(e, t, i) {
+function ot(e, t, i) {
   const r = Math.max(0, Math.min(1, (i - e) / (t - e)));
   return r * r * (3 - 2 * r);
 }
@@ -115,45 +115,45 @@ function Ue() {
   const e = navigator.userAgent;
   return !(/AppleWebKit/i.test(e) && !/Chrome|Chromium|Edg|OPR|CriOS|FxiOS/i.test(e) || /Firefox/i.test(e));
 }
-const pn = {
+const hn = {
   default: "blur(4px) saturate(130%)",
   /** Toolbar — slightly stronger frost + refraction chain. */
   enhanced: "blur(6px) saturate(138%)"
 };
-function hn(e, t = "default") {
-  const i = pn[t], a = e !== null && Ue() ? `${i} url(#${e})` : i;
+function fn(e, t = "default") {
+  const i = hn[t], o = e !== null && Ue() ? `${i} url(#${e})` : i;
   return {
-    backdropFilter: a,
-    WebkitBackdropFilter: a
+    backdropFilter: o,
+    WebkitBackdropFilter: o
   };
 }
-let fn = 0;
-function Tt({
+let mn = 0;
+function Rt({
   shape: e = "rect",
   cornerRadius: t,
   tint: i = "neutral",
   intensity: r = "default",
-  className: a = "",
+  className: o = "",
   style: s,
-  children: o
+  children: a
 }) {
-  const c = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? cn : It, l = Y(null), f = xe(() => `pa-lg-${++fn}`, []), [p, v] = S(null);
+  const c = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? dn : It, l = X(null), f = Me(() => `pa-lg-${++mn}`, []), [p, v] = A(null);
   Kt(() => {
     const g = l.current;
     if (!g) return;
-    let b = 0;
-    const E = () => {
-      cancelAnimationFrame(b), b = requestAnimationFrame(() => {
-        const w = g.getBoundingClientRect(), k = Math.round(w.width), I = Math.round(w.height);
-        if (k < 8 || I < 8) return;
-        const P = e === "capsule" ? I / 2 : Math.min(c, k / 2, I / 2), R = dn(k, I, P, u);
+    let y = 0;
+    const S = () => {
+      cancelAnimationFrame(y), y = requestAnimationFrame(() => {
+        const k = g.getBoundingClientRect(), N = Math.round(k.width), E = Math.round(k.height);
+        if (N < 8 || E < 8) return;
+        const z = e === "capsule" ? E / 2 : Math.min(c, N / 2, E / 2), R = un(N, E, z, u);
         R && v(R);
       });
     };
-    E();
-    const N = new ResizeObserver(E);
-    return N.observe(g), () => {
-      cancelAnimationFrame(b), N.disconnect();
+    S();
+    const w = new ResizeObserver(S);
+    return w.observe(g), () => {
+      cancelAnimationFrame(y), w.disconnect();
     };
   }, [e, c, u]);
   const m = p && Ue() && typeof document < "u" ? Ke(
@@ -211,16 +211,16 @@ function Tt({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ d(K, { children: [
+  return /* @__PURE__ */ d(q, { children: [
     m,
     /* @__PURE__ */ d(
       "div",
       {
         ref: l,
-        className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${i} ${a}`.trim(),
+        className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${i} ${o}`.trim(),
         style: {
           borderRadius: e === "capsule" ? "999px" : `${c}px`,
-          ...hn(
+          ...fn(
             p && Ue() ? f : null,
             r
           ),
@@ -229,13 +229,13 @@ function Tt({
         children: [
           /* @__PURE__ */ n("div", { className: "pa-glass-surface-bg", "aria-hidden": "true" }),
           /* @__PURE__ */ n("div", { className: "pa-glass-surface-shine", "aria-hidden": "true" }),
-          /* @__PURE__ */ n("div", { className: "pa-glass-surface-content", children: o })
+          /* @__PURE__ */ n("div", { className: "pa-glass-surface-content", children: a })
         ]
       }
     )
   ] });
 }
-function H({
+function V({
   variant: e = "regular",
   className: t = "",
   children: i,
@@ -251,29 +251,29 @@ function H({
     }
   );
 }
-function Te({
+function Pe({
   variant: e = "sheet",
   side: t = "left",
   className: i = "",
   style: r,
-  children: a
+  children: o
 }) {
   return /* @__PURE__ */ n(
-    Tt,
+    Rt,
     {
       shape: "rect",
       cornerRadius: e === "popover" ? 16 : 20,
       className: `pa-glass-panel pa-glass-panel--${e} pa-glass-panel--${t} ${i}`.trim(),
       style: r,
-      children: a
+      children: o
     }
   );
 }
-function Rt({
+function Tt({
   defaultPosition: e = null,
   computeDefaultPosition: t
 } = {}) {
-  const [i, r] = S(e), [a, s] = S(!1), o = Y(null), c = Y(null), u = $(() => {
+  const [i, r] = A(e), [o, s] = A(!1), a = X(null), c = X(null), u = $(() => {
     if (i !== null) return;
     const m = c.current;
     if (!m) return;
@@ -291,10 +291,10 @@ function Rt({
     const m = () => {
       r((g) => {
         if (!g || !c.current) return g;
-        const b = c.current.getBoundingClientRect();
+        const y = c.current.getBoundingClientRect();
         return {
-          x: Math.min(g.x, window.innerWidth - b.width),
-          y: Math.min(g.y, window.innerHeight - b.height)
+          x: Math.min(g.x, window.innerWidth - y.width),
+          y: Math.min(g.y, window.innerHeight - y.height)
         };
       });
     };
@@ -305,27 +305,27 @@ function Rt({
       if (m.button !== 0) return;
       const g = c.current;
       if (!g) return;
-      let b = i;
-      if (!b) {
-        const E = g.getBoundingClientRect();
-        b = { x: E.left, y: E.top }, r(b);
+      let y = i;
+      if (!y) {
+        const S = g.getBoundingClientRect();
+        y = { x: S.left, y: S.top }, r(y);
       }
-      o.current = {
+      a.current = {
         pointerId: m.pointerId,
         startX: m.clientX,
         startY: m.clientY,
-        originX: b.x,
-        originY: b.y
+        originX: y.x,
+        originY: y.y
       }, s(!0), m.currentTarget.setPointerCapture(m.pointerId), m.preventDefault();
     },
     [i]
   ), f = $((m) => {
-    if (!o.current || o.current.pointerId !== m.pointerId) return;
-    const g = c.current, b = (g == null ? void 0 : g.offsetWidth) ?? 320, E = (g == null ? void 0 : g.offsetHeight) ?? 48, N = m.clientX - o.current.startX, w = m.clientY - o.current.startY, k = Math.max(8, Math.min(window.innerWidth - b - 8, o.current.originX + N)), I = Math.max(8, Math.min(window.innerHeight - E - 8, o.current.originY + w));
-    r({ x: k, y: I });
+    if (!a.current || a.current.pointerId !== m.pointerId) return;
+    const g = c.current, y = (g == null ? void 0 : g.offsetWidth) ?? 320, S = (g == null ? void 0 : g.offsetHeight) ?? 48, w = m.clientX - a.current.startX, k = m.clientY - a.current.startY, N = Math.max(8, Math.min(window.innerWidth - y - 8, a.current.originX + w)), E = Math.max(8, Math.min(window.innerHeight - S - 8, a.current.originY + k));
+    r({ x: N, y: E });
   }, []), p = $((m) => {
-    if (!(!o.current || o.current.pointerId !== m.pointerId)) {
-      o.current = null, s(!1);
+    if (!(!a.current || a.current.pointerId !== m.pointerId)) {
+      a.current = null, s(!1);
       try {
         m.currentTarget.releasePointerCapture(m.pointerId);
       } catch {
@@ -342,7 +342,7 @@ function Rt({
   return {
     elementRef: c,
     position: i,
-    isDragging: a,
+    isDragging: o,
     style: v,
     dragHandleProps: {
       onPointerDown: l,
@@ -352,7 +352,7 @@ function Rt({
     }
   };
 }
-function mn({ className: e }) {
+function gn({ 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 mn({ className: e }) {
     )
   ] });
 }
-function gn({ className: e }) {
+function vn({ 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,7 +404,7 @@ function gn({ className: e }) {
     )
   ] });
 }
-const me = (e, t, i) => Math.min(i, Math.max(t, e));
+const be = (e, t, i) => Math.min(i, Math.max(t, e));
 function je(e) {
   const t = e.trim();
   if (!t) return null;
@@ -417,135 +417,135 @@ function je(e) {
     };
   const r = t.match(/^#([0-9a-f]{3})$/i);
   if (r) {
-    const [s, o, c] = r[1].split("");
+    const [s, a, c] = r[1].split("");
     return {
       r: parseInt(s + s, 16),
-      g: parseInt(o + o, 16),
+      g: parseInt(a + a, 16),
       b: parseInt(c + c, 16)
     };
   }
-  const a = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
-  return a ? {
-    r: me(parseInt(a[1], 10), 0, 255),
-    g: me(parseInt(a[2], 10), 0, 255),
-    b: me(parseInt(a[3], 10), 0, 255)
+  const o = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  return o ? {
+    r: be(parseInt(o[1], 10), 0, 255),
+    g: be(parseInt(o[2], 10), 0, 255),
+    b: be(parseInt(o[3], 10), 0, 255)
   } : null;
 }
 function Pt(e) {
-  const t = (i) => me(Math.round(i), 0, 255).toString(16).padStart(2, "0");
+  const t = (i) => be(Math.round(i), 0, 255).toString(16).padStart(2, "0");
   return `#${t(e.r)}${t(e.g)}${t(e.b)}`;
 }
-function vn(e) {
+function bn(e) {
   return `rgb(${e.r}, ${e.g}, ${e.b})`;
 }
 function Dt({ r: e, g: t, b: i }) {
-  const r = e / 255, a = t / 255, s = i / 255, o = Math.max(r, a, s), c = Math.min(r, a, s), u = o - c;
+  const r = e / 255, o = t / 255, s = i / 255, a = Math.max(r, o, s), c = Math.min(r, o, s), u = a - c;
   let l = 0;
-  u !== 0 && (o === r ? l = (a - s) / u % 6 : o === a ? l = (s - r) / u + 2 : l = (r - a) / u + 4, l *= 60, l < 0 && (l += 360));
-  const f = o === 0 ? 0 : u / o * 100, p = o * 100;
+  u !== 0 && (a === r ? l = (o - s) / u % 6 : a === o ? l = (s - r) / u + 2 : l = (r - o) / u + 4, l *= 60, l < 0 && (l += 360));
+  const f = a === 0 ? 0 : u / a * 100, p = a * 100;
   return { h: l, s: f, v: p };
 }
 function Ot({ h: e, s: t, v: i }) {
-  const r = me(t, 0, 100) / 100, a = me(i, 0, 100) / 100, s = a * r, o = s * (1 - Math.abs(e / 60 % 2 - 1)), c = a - s;
+  const r = be(t, 0, 100) / 100, o = be(i, 0, 100) / 100, s = o * r, a = s * (1 - Math.abs(e / 60 % 2 - 1)), c = o - s;
   let u = 0, l = 0, f = 0;
   const p = (e % 360 + 360) % 360;
-  return p < 60 ? (u = s, l = o) : p < 120 ? (u = o, l = s) : p < 180 ? (l = s, f = o) : p < 240 ? (l = o, f = s) : p < 300 ? (u = o, f = s) : (u = s, f = o), {
+  return p < 60 ? (u = s, l = a) : p < 120 ? (u = a, l = s) : p < 180 ? (l = s, f = a) : p < 240 ? (l = a, f = s) : p < 300 ? (u = a, f = s) : (u = s, f = a), {
     r: Math.round((u + c) * 255),
     g: Math.round((l + c) * 255),
     b: Math.round((f + c) * 255)
   };
 }
-function ot(e) {
+function at(e) {
   const t = je(e);
   return t ? Dt(t) : { h: 0, s: 0, v: 45 };
 }
-function bn(e) {
+function yn(e) {
   return e.replace(/^#/, "").toUpperCase().slice(0, 6);
 }
-function yn(e, t) {
+function wn(e, t) {
   const i = e.replace(/[^0-9a-f]/gi, "").slice(0, 6);
   return i.length < 6 ? t : je(`#${i}`) ?? t;
 }
-function wn(e) {
+function xn(e) {
   return Pt(Ot(e));
 }
-function xn(e, t, i) {
-  const r = st((e - i.left) / i.width), a = st((t - i.top) / i.height);
-  return { x: r * 100, y: a * 100 };
+function Nn(e, t, i) {
+  const r = st((e - i.left) / i.width), o = st((t - i.top) / i.height);
+  return { x: r * 100, y: o * 100 };
 }
 function st(e) {
   return Math.min(1, Math.max(0, e));
 }
-function Nn() {
+function kn() {
   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 _e({ label: e, value: t, onChange: i }) {
-  const [r, a] = S(!1), [s, o] = S(() => ot(t)), c = Y(null), u = Y(null), l = Y(null), f = jt(), [p, v] = S({ top: 0, left: 0, width: 260 }), m = Ot(s), g = bn(Pt(m)), b = je(t) ? t : vn(m), E = e.toLowerCase().includes("color") ? e : `${e} color`;
+  const [r, o] = A(!1), [s, a] = A(() => at(t)), c = X(null), u = X(null), l = X(null), f = jt(), [p, v] = A({ top: 0, left: 0, width: 260 }), m = Ot(s), g = yn(Pt(m)), y = je(t) ? t : bn(m), S = e.toLowerCase().includes("color") ? e : `${e} color`;
   _(() => {
-    o(ot(t));
+    a(at(t));
   }, [t]);
-  const N = $(
+  const w = $(
     (x) => {
-      o(x), i(wn(x));
+      a(x), i(xn(x));
     },
     [i]
-  ), w = $(
+  ), k = $(
     (x) => {
-      N(Dt(x));
+      w(Dt(x));
     },
-    [N]
-  ), k = $(() => {
+    [w]
+  ), N = $(() => {
     const x = c.current;
     if (!x) return;
-    const T = x.getBoundingClientRect(), C = 260;
-    let h = T.left;
-    h + C > window.innerWidth - 12 && (h = window.innerWidth - C - 12), h = Math.max(12, h);
-    let F = T.bottom + 8;
-    const W = 320;
-    F + W > window.innerHeight - 12 && (F = Math.max(12, T.top - W - 8)), v({ top: F, left: h, width: C });
+    const I = x.getBoundingClientRect(), L = 260;
+    let h = I.left;
+    h + L > window.innerWidth - 12 && (h = window.innerWidth - L - 12), h = Math.max(12, h);
+    let F = I.bottom + 8;
+    const U = 320;
+    F + U > window.innerHeight - 12 && (F = Math.max(12, I.top - U - 8)), v({ top: F, left: h, width: L });
   }, []);
   _(() => {
     if (!r) return;
-    k();
-    const x = (C) => {
-      var F, W;
-      const h = C.target;
-      (F = c.current) != null && F.contains(h) || (W = u.current) != null && W.contains(h) || a(!1);
-    }, T = (C) => {
-      C.key === "Escape" && a(!1);
+    N();
+    const x = (L) => {
+      var F, U;
+      const h = L.target;
+      (F = c.current) != null && F.contains(h) || (U = u.current) != null && U.contains(h) || o(!1);
+    }, I = (L) => {
+      L.key === "Escape" && o(!1);
     };
-    return window.addEventListener("mousedown", x, !0), window.addEventListener("keydown", T), window.addEventListener("resize", k), window.addEventListener("scroll", k, !0), () => {
-      window.removeEventListener("mousedown", x, !0), window.removeEventListener("keydown", T), window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
+    return window.addEventListener("mousedown", x, !0), window.addEventListener("keydown", I), window.addEventListener("resize", N), window.addEventListener("scroll", N, !0), () => {
+      window.removeEventListener("mousedown", x, !0), window.removeEventListener("keydown", I), window.removeEventListener("resize", N), window.removeEventListener("scroll", N, !0);
     };
-  }, [r, k]);
-  const I = (x, T) => {
-    var W;
-    const C = (W = l.current) == null ? void 0 : W.getBoundingClientRect();
-    if (!C) return;
-    const { x: h, y: F } = xn(x, T, C);
-    N({ ...s, s: h, v: 100 - F });
-  }, P = (x) => {
-    x.preventDefault(), I(x.clientX, x.clientY);
-    const T = (h) => I(h.clientX, h.clientY), C = () => {
-      window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", C);
+  }, [r, N]);
+  const E = (x, I) => {
+    var U;
+    const L = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
+    if (!L) return;
+    const { x: h, y: F } = Nn(x, I, L);
+    w({ ...s, s: h, v: 100 - F });
+  }, z = (x) => {
+    x.preventDefault(), E(x.clientX, x.clientY);
+    const I = (h) => E(h.clientX, h.clientY), L = () => {
+      window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", L);
     };
-    window.addEventListener("mousemove", T), window.addEventListener("mouseup", C);
+    window.addEventListener("mousemove", I), window.addEventListener("mouseup", L);
   }, R = r ? Ke(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal pa-color-picker-portal",
         "data-pixelagent-picker-portal": !0,
-        ...Nn(),
+        ...kn(),
         children: /* @__PURE__ */ d(
           "div",
           {
             ref: u,
             id: f,
             role: "dialog",
-            "aria-label": E,
+            "aria-label": S,
             className: "pa-color-picker",
             style: { top: p.top, left: p.left, width: p.width },
             children: [
@@ -554,11 +554,11 @@ function _e({ label: e, value: t, onChange: i }) {
                   "span",
                   {
                     className: "pa-color-picker-preview",
-                    style: { backgroundColor: b },
+                    style: { backgroundColor: y },
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: E })
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: S })
               ] }),
               /* @__PURE__ */ n(
                 "div",
@@ -566,7 +566,7 @@ function _e({ label: e, value: t, onChange: i }) {
                   ref: l,
                   className: "pa-color-picker-sb",
                   style: { "--pa-picker-h": String(Math.round(s.h)) },
-                  onMouseDown: P,
+                  onMouseDown: z,
                   children: /* @__PURE__ */ n(
                     "span",
                     {
@@ -587,7 +587,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     max: 360,
                     value: Math.round(s.h),
                     "aria-label": "Hue",
-                    onChange: (x) => N({ ...s, h: parseFloat(x.target.value) })
+                    onChange: (x) => w({ ...s, h: parseFloat(x.target.value) })
                   }
                 ),
                 /* @__PURE__ */ n(
@@ -608,7 +608,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     type: "text",
                     value: g,
                     spellCheck: !1,
-                    onChange: (x) => w(yn(x.target.value, m))
+                    onChange: (x) => k(wn(x.target.value, m))
                   }
                 )
               ] }),
@@ -622,9 +622,9 @@ function _e({ label: e, value: t, onChange: i }) {
                     min: 0,
                     max: 255,
                     value: m[x],
-                    onChange: (T) => {
-                      const C = kn(parseInt(T.target.value, 10));
-                      w({ ...m, [x]: C });
+                    onChange: (I) => {
+                      const L = Cn(parseInt(I.target.value, 10));
+                      k({ ...m, [x]: L });
                     }
                   }
                 )
@@ -648,10 +648,10 @@ function _e({ label: e, value: t, onChange: i }) {
         "aria-haspopup": "dialog",
         "aria-controls": r ? f : void 0,
         onClick: () => {
-          r || k(), a((x) => !x);
+          r || N(), o((x) => !x);
         },
         children: [
-          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: b }, "aria-hidden": "true" }),
+          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: y }, "aria-hidden": "true" }),
           /* @__PURE__ */ n(
             "input",
             {
@@ -669,19 +669,19 @@ function _e({ label: e, value: t, onChange: i }) {
     R
   ] });
 }
-function kn(e) {
+function Cn(e) {
   return Number.isFinite(e) ? Math.min(255, Math.max(0, e)) : 0;
 }
-function ue({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
-  const [a, s] = S(i);
-  return /* @__PURE__ */ d("section", { className: `pa-edit-section ${a ? "pa-edit-section--open" : ""}`, children: [
+function fe({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
+  const [o, s] = A(i);
+  return /* @__PURE__ */ d("section", { className: `pa-edit-section ${o ? "pa-edit-section--open" : ""}`, children: [
     /* @__PURE__ */ d(
       "button",
       {
         type: "button",
         className: "pa-edit-section-header",
-        "aria-expanded": a,
-        onClick: () => s((o) => !o),
+        "aria-expanded": o,
+        onClick: () => s((a) => !a),
         children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-section-title", children: e }),
           r ? /* @__PURE__ */ n("span", { className: "pa-edit-section-badge", children: r }) : null,
@@ -689,10 +689,10 @@ function ue({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
         ]
       }
     ),
-    a ? /* @__PURE__ */ n("div", { className: "pa-edit-section-body", children: t }) : null
+    o ? /* @__PURE__ */ n("div", { className: "pa-edit-section-body", children: t }) : null
   ] });
 }
-const pe = [
+const me = [
   { value: "Inter, system-ui, sans-serif", label: "Inter" },
   { value: "system-ui, sans-serif", label: "System UI" },
   {
@@ -705,38 +705,38 @@ const pe = [
   { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
   { value: '"JetBrains Mono", ui-monospace, monospace', label: "JetBrains Mono" },
   { value: "ui-monospace, monospace", label: "Monospace" }
-], Ie = "";
-function Ae(e) {
+], Te = "";
+function Le(e) {
   var i;
   return (((i = e.split(",")[0]) == null ? void 0 : i.trim()) ?? "").replace(/^["']|["']$/g, "");
 }
-function Cn(e) {
+function Mn(e) {
   const t = e.trim();
   if (!t)
     return {
-      selectValue: Ie,
-      options: pe
+      selectValue: Te,
+      options: me
     };
-  const i = Ae(t).toLowerCase(), r = pe.find(
-    (s) => s.value === t || Ae(s.value).toLowerCase() === i
+  const i = Le(t).toLowerCase(), r = me.find(
+    (s) => s.value === t || Le(s.value).toLowerCase() === i
   );
   if (r)
-    return { selectValue: r.value, options: pe };
-  const a = pe.find((s) => {
-    const o = Ae(s.value).toLowerCase();
-    return t.toLowerCase().includes(o) || o.includes(i);
+    return { selectValue: r.value, options: me };
+  const o = me.find((s) => {
+    const a = Le(s.value).toLowerCase();
+    return t.toLowerCase().includes(a) || a.includes(i);
   });
-  return a ? { selectValue: a.value, options: pe } : {
+  return o ? { selectValue: o.value, options: me } : {
     selectValue: t,
     options: [
-      ...pe,
-      { value: t, label: Ae(t) || "Custom" }
+      ...me,
+      { value: t, label: Le(t) || "Custom" }
     ]
   };
 }
-function Mn({ value: e, onChange: t }) {
-  const { selectValue: i, options: r } = xe(
-    () => Cn(e),
+function An({ value: e, onChange: t }) {
+  const { selectValue: i, options: r } = Me(
+    () => Mn(e),
     [e]
   );
   return /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
@@ -745,14 +745,14 @@ function Mn({ value: e, onChange: t }) {
       "select",
       {
         className: "pa-select pa-font-family-select",
-        value: i || Ie,
-        onChange: (a) => {
-          const s = a.target.value;
-          s && s !== Ie && t(s);
+        value: i || Te,
+        onChange: (o) => {
+          const s = o.target.value;
+          s && s !== Te && t(s);
         },
         children: [
-          /* @__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))
+          /* @__PURE__ */ n("option", { value: Te, disabled: !0, children: "Select font style" }),
+          r.map((o) => /* @__PURE__ */ n("option", { value: o.value, children: o.label }, o.value))
         ]
       }
     )
@@ -762,7 +762,7 @@ function qe(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? parseFloat(t[1]) : null;
 }
-function An(e) {
+function Sn(e) {
   const t = e.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
@@ -772,7 +772,7 @@ function An(e) {
   const i = parseFloat(t);
   return Number.isFinite(i) && i >= 0 && i <= 1 ? i : null;
 }
-function Sn(e) {
+function Ln(e) {
   const t = Ft(e);
   if (t !== null) return t > 0;
   const i = qe(e);
@@ -781,12 +781,12 @@ function Sn(e) {
 function Ft(e) {
   const t = e.trim().split(/\s+/).filter(Boolean);
   if (t.length === 0) return null;
-  const i = t.map((a) => qe(a));
-  if (i.some((a) => a === null)) return null;
+  const i = t.map((o) => qe(o));
+  if (i.some((o) => o === null)) return null;
   const r = i[0];
-  return i.every((a) => a === r) ? r : null;
+  return i.every((o) => o === r) ? r : null;
 }
-const Ln = {
+const $n = {
   padding: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   margin: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   width: { kind: "text" },
@@ -803,7 +803,7 @@ const Ln = {
 function En(e, t, i) {
   switch (i.kind) {
     case "opacity":
-      return An(t);
+      return Sn(t);
     case "px":
       return qe(t);
     case "uniform-px":
@@ -812,7 +812,7 @@ function En(e, t, i) {
       return null;
   }
 }
-function $n(e, t, i) {
+function In(e, t, i) {
   switch (i.kind) {
     case "opacity":
       return String(Math.round(t * 100) / 100);
@@ -823,14 +823,14 @@ function $n(e, t, i) {
       return String(t);
   }
 }
-function ie({
+function se({
   property: e,
   label: t,
   value: i,
   onChange: r,
-  compact: a = !1
+  compact: o = !1
 }) {
-  const s = Ln[e] ?? { kind: "text" }, o = En(e, i, s), c = s.kind !== "text" && o !== null, u = a ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = a ? "pa-edit-field-label" : "pa-prop-label";
+  const s = $n[e] ?? { kind: "text" }, a = En(e, i, s), c = s.kind !== "text" && a !== null, u = o ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = o ? "pa-edit-field-label" : "pa-prop-label";
   if (!c)
     return /* @__PURE__ */ d("label", { className: u, children: [
       /* @__PURE__ */ n("span", { className: l, children: t }),
@@ -845,7 +845,7 @@ function ie({
       )
     ] });
   const f = s.min ?? 0, p = s.max ?? 100, v = s.step ?? 1, m = (g) => {
-    r($n(e, g, s));
+    r(In(e, g, s));
   };
   return /* @__PURE__ */ d("label", { className: `${u} pa-prop-row--slider`, children: [
     /* @__PURE__ */ n("span", { className: l, children: t }),
@@ -858,7 +858,7 @@ function ie({
           min: f,
           max: p,
           step: v,
-          value: o,
+          value: a,
           "aria-valuetext": i,
           onChange: (g) => m(parseFloat(g.target.value))
         }
@@ -876,36 +876,36 @@ function ie({
     ] })
   ] });
 }
-function In(e) {
+function Rn(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];
   if (t.length === 2) return { top: i, right: r, bottom: i, left: r };
-  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] };
+  const o = t[2];
+  return t.length === 3 ? { top: i, right: r, bottom: o, left: r } : { top: i, right: r, bottom: o, left: t[3] };
 }
 function Tn({ 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 le(e) {
+function ue(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? t[1] : e;
 }
-function ce(e) {
+function pe(e) {
   const t = e.trim();
   return t === "" ? "0px" : /^-?\d+(?:\.\d+)?$/.test(t) ? `${t}px` : t;
 }
 function lt(e, t) {
-  return e === t ? le(e) : `${le(e)}, ${le(t)}`;
+  return e === t ? ue(e) : `${ue(e)}, ${ue(t)}`;
 }
 function ct(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 = ce(i[0]);
+    const r = pe(i[0]);
     return [r, r];
   }
-  return [ce(i[0]), ce(i[1])];
+  return [pe(i[0]), pe(i[1])];
 }
 const dt = 12, Je = {
   width: dt,
@@ -914,21 +914,21 @@ const dt = 12, Je = {
   fill: "none",
   "aria-hidden": !0
 };
-function Rn() {
+function Pn() {
   return /* @__PURE__ */ d("svg", { ...Je, 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 Pn() {
+function Dn() {
   return /* @__PURE__ */ d("svg", { ...Je, 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 Se({ side: e }) {
+function $e({ 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 },
@@ -940,7 +940,7 @@ function Se({ side: e }) {
     /* @__PURE__ */ n("line", { ...t, stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function Dn() {
+function On() {
   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,10 +948,10 @@ function Dn() {
     /* @__PURE__ */ n("rect", { x: "8", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
-function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
-  const [s, o] = S(t);
+function ge({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: o }) {
+  const [s, a] = A(t);
   return _(() => {
-    o(t);
+    a(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 }),
     /* @__PURE__ */ n(
@@ -960,10 +960,10 @@ function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
         className: "pa-input pa-spacing-cell-input",
         type: "text",
         value: s,
-        onChange: (c) => o(c.target.value),
-        onBlur: () => a(s),
+        onChange: (c) => a(c.target.value),
+        onBlur: () => o(s),
         onKeyDown: (c) => {
-          c.key === "Enter" && c.target.blur(), c.key === "Escape" && (o(t), c.target.blur());
+          c.key === "Enter" && c.target.blur(), c.key === "Escape" && (a(t), c.target.blur());
         },
         "aria-label": i,
         spellCheck: !1
@@ -972,7 +972,7 @@ function he({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
   ] });
 }
 function ut({ label: e, value: t, onChange: i }) {
-  const r = In(t), [a, s] = S(!1), o = (l) => {
+  const r = Rn(t), [o, s] = A(!1), a = (l) => {
     i(Tn({ ...r, ...l }));
   }, c = r.left !== r.right, u = r.top !== r.bottom;
   return /* @__PURE__ */ d("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
@@ -980,74 +980,74 @@ function ut({ label: e, value: t, onChange: i }) {
     /* @__PURE__ */ d(
       "div",
       {
-        className: `pa-spacing-control ${a ? "pa-spacing-control--split" : "pa-spacing-control--pair"}`,
+        className: `pa-spacing-control ${o ? "pa-spacing-control--split" : "pa-spacing-control--pair"}`,
         children: [
-          a ? (
+          o ? (
             // Grid mirrors pair-view columns:
             //   Col 1 (horizontal pair) → L on top, R on bottom
             //   Col 2 (vertical pair)   → T on top, B on bottom
             /* @__PURE__ */ d("div", { className: "pa-spacing-grid", children: [
               /* @__PURE__ */ n(
-                he,
+                ge,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "left" }),
-                  display: le(r.left),
+                  icon: /* @__PURE__ */ n($e, { side: "left" }),
+                  display: ue(r.left),
                   ariaLabel: `${e} left`,
-                  onCommit: (l) => o({ left: ce(l) })
+                  onCommit: (l) => a({ left: pe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                he,
+                ge,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "top" }),
-                  display: le(r.top),
+                  icon: /* @__PURE__ */ n($e, { side: "top" }),
+                  display: ue(r.top),
                   ariaLabel: `${e} top`,
-                  onCommit: (l) => o({ top: ce(l) })
+                  onCommit: (l) => a({ top: pe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                he,
+                ge,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "right" }),
-                  display: le(r.right),
+                  icon: /* @__PURE__ */ n($e, { side: "right" }),
+                  display: ue(r.right),
                   ariaLabel: `${e} right`,
-                  onCommit: (l) => o({ right: ce(l) })
+                  onCommit: (l) => a({ right: pe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                he,
+                ge,
                 {
-                  icon: /* @__PURE__ */ n(Se, { side: "bottom" }),
-                  display: le(r.bottom),
+                  icon: /* @__PURE__ */ n($e, { side: "bottom" }),
+                  display: ue(r.bottom),
                   ariaLabel: `${e} bottom`,
-                  onCommit: (l) => o({ bottom: ce(l) })
+                  onCommit: (l) => a({ bottom: pe(l) })
                 }
               )
             ] })
           ) : /* @__PURE__ */ d("div", { className: "pa-spacing-pair", children: [
             /* @__PURE__ */ n(
-              he,
+              ge,
               {
-                icon: /* @__PURE__ */ n(Rn, {}),
+                icon: /* @__PURE__ */ n(Pn, {}),
                 display: lt(r.left, r.right),
                 mixed: c,
                 ariaLabel: `${e} horizontal`,
                 onCommit: (l) => {
                   const [f, p] = ct(l, r.left);
-                  o({ left: f, right: p });
+                  a({ left: f, right: p });
                 }
               }
             ),
             /* @__PURE__ */ n(
-              he,
+              ge,
               {
-                icon: /* @__PURE__ */ n(Pn, {}),
+                icon: /* @__PURE__ */ n(Dn, {}),
                 display: lt(r.top, r.bottom),
                 mixed: u,
                 ariaLabel: `${e} vertical`,
                 onCommit: (l) => {
                   const [f, p] = ct(l, r.top);
-                  o({ top: f, bottom: p });
+                  a({ top: f, bottom: p });
                 }
               }
             )
@@ -1056,12 +1056,12 @@ function ut({ label: e, value: t, onChange: i }) {
             "button",
             {
               type: "button",
-              className: `pa-spacing-toggle ${a ? "pa-spacing-toggle--on" : ""}`,
+              className: `pa-spacing-toggle ${o ? "pa-spacing-toggle--on" : ""}`,
               onClick: () => s((l) => !l),
-              "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(Dn, {})
+              "aria-pressed": o,
+              "aria-label": o ? "Collapse to pair view" : "Expand to per-side view",
+              title: o ? "Collapse to pair view" : "Expand to per-side view",
+              children: /* @__PURE__ */ n(On, {})
             }
           )
         ]
@@ -1069,27 +1069,27 @@ function ut({ label: e, value: t, onChange: i }) {
     )
   ] });
 }
-function On({
+function Fn({
   options: e,
   value: t,
   ariaLabel: i,
   onChange: r
 }) {
-  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": i, children: e.map((a) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": i, children: e.map((o) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: `pa-segmented-btn ${t === a.value ? "pa-segmented-btn--on" : ""}`,
-      title: a.title,
-      "aria-pressed": t === a.value,
-      "aria-label": a.title,
-      onClick: () => r == null ? void 0 : r(a.value),
-      children: a.content
+      className: `pa-segmented-btn ${t === o.value ? "pa-segmented-btn--on" : ""}`,
+      title: o.title,
+      "aria-pressed": t === o.value,
+      "aria-label": o.title,
+      onClick: () => r == null ? void 0 : r(o.value),
+      children: o.content
     },
-    a.value
+    o.value
   )) });
 }
-function Fn({
+function Bn({
   options: e,
   ariaLabel: t,
   onToggle: i
@@ -1108,7 +1108,7 @@ function Fn({
     r.id
   )) });
 }
-function Bn({ className: e }) {
+function zn({ 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 Bn({ className: e }) {
     }
   ) });
 }
-function zn({ 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",
     {
@@ -1126,7 +1126,7 @@ function zn({ className: e }) {
     }
   ) });
 }
-function _n({ className: e }) {
+function Hn({ 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 _n({ className: e }) {
     }
   ) });
 }
-function Hn({ className: e }) {
+function Vn({ 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 Vn({ className: e }) {
+function Wn({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1151,13 +1151,13 @@ function Bt(e) {
   const t = parseInt(e.trim(), 10);
   return Number.isFinite(t) ? t >= 600 : e.trim() === "bold" || e.trim() === "bolder";
 }
-function Wn(e) {
+function Un(e) {
   return Bt(e) ? "400" : "700";
 }
 function zt(e) {
   return e.trim() === "italic" || e.trim() === "oblique";
 }
-function Un(e) {
+function Yn(e) {
   return zt(e) ? "normal" : "italic";
 }
 function pt(e, t) {
@@ -1169,7 +1169,7 @@ function ht(e, t) {
   );
   return i.has(t) ? i.delete(t) : i.add(t), i.size === 0 ? "none" : Array.from(i).join(" ");
 }
-function Yn(e) {
+function Xn(e) {
   const t = e.trim();
   return t === "center" || t === "right" || t === "justify" ? t : "left";
 }
@@ -1193,27 +1193,27 @@ const ft = [
   "inline-grid",
   "none",
   "contents"
-], Xn = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
-function Gn({
+], Gn = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
+function Kn({
   values: e,
   onPropertyChange: t,
   textKind: i,
   textValue: r,
-  onTextChange: a,
+  onTextChange: o,
   targetScope: s,
-  onTargetScopeChange: o,
+  onTargetScopeChange: a,
   elementState: c,
   onElementStateChange: u,
   instanceCount: l,
   scopeHint: f,
   stateHint: p
 }) {
-  var T, C;
-  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", b = Yn(e["text-align"] ?? "left"), E = ((T = e.display) == null ? void 0 : T.trim()) ?? "", N = !!E, w = Xn.has(E), k = [...mt];
-  E && !mt.includes(E) && k.push(E);
-  const I = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = I === "normal" || I === "" ? "0px" : I, R = e["border-style"] ?? "none", x = [...ft];
+  var I, L;
+  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", y = Xn(e["text-align"] ?? "left"), S = ((I = e.display) == null ? void 0 : I.trim()) ?? "", w = !!S, k = Gn.has(S), N = [...mt];
+  S && !mt.includes(S) && N.push(S);
+  const E = ((L = e.gap) == null ? void 0 : L.trim()) ?? "", z = E === "normal" || E === "" ? "0px" : E, R = e["border-style"] ?? "none", x = [...ft];
   return R && !ft.includes(R) && x.push(R), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
-    /* @__PURE__ */ d(ue, { title: "Targeting", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(fe, { 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" }),
@@ -1222,7 +1222,7 @@ function Gn({
             {
               className: "pa-select",
               value: s,
-              onChange: (h) => o(h.target.value),
+              onChange: (h) => a(h.target.value),
               children: [
                 /* @__PURE__ */ n("option", { value: "this-instance", children: "This instance" }),
                 /* @__PURE__ */ d("option", { value: "all-instances", disabled: l <= 1, children: [
@@ -1256,22 +1256,22 @@ function Gn({
       f ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: f }) : null,
       p ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: p }) : null
     ] }),
-    i !== "none" && /* @__PURE__ */ n(ue, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
+    i !== "none" && /* @__PURE__ */ n(fe, { 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",
         {
           className: "pa-textarea pa-edit-text-input",
           value: r,
-          onChange: (h) => a(h.target.value),
+          onChange: (h) => o(h.target.value),
           rows: i === "value" ? 2 : 3,
           placeholder: "Edit visible text…"
         }
       )
     ] }) }),
-    /* @__PURE__ */ d(ue, { title: "Typography", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(fe, { title: "Typography", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        Mn,
+        An,
         {
           value: e["font-family"] ?? "",
           onChange: (h) => t("font-family", h)
@@ -1280,7 +1280,7 @@ function Gn({
       /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
-          Fn,
+          Bn,
           {
             ariaLabel: "Text style",
             options: [
@@ -1306,11 +1306,11 @@ function Gn({
                 id: "strikethrough",
                 title: "Strikethrough",
                 pressed: pt(g, "line-through"),
-                content: /* @__PURE__ */ n(Vn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Wn, { className: "pa-segmented-icon" })
               }
             ],
             onToggle: (h) => {
-              h === "bold" ? t("font-weight", Wn(v)) : h === "italic" ? t("font-style", Un(m)) : h === "underline" ? t(
+              h === "bold" ? t("font-weight", Un(v)) : h === "italic" ? t("font-style", Yn(m)) : h === "underline" ? t(
                 "text-decoration",
                 ht(g, "underline")
               ) : h === "strikethrough" && t(
@@ -1324,31 +1324,31 @@ function Gn({
       /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Align" }),
         /* @__PURE__ */ n(
-          On,
+          Fn,
           {
             ariaLabel: "Text align",
-            value: b,
+            value: y,
             onChange: (h) => t("text-align", h),
             options: [
               {
                 value: "left",
                 title: "Align left",
-                content: /* @__PURE__ */ n(Bn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(zn, { className: "pa-segmented-icon" })
               },
               {
                 value: "center",
                 title: "Align center",
-                content: /* @__PURE__ */ n(zn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(_n, { className: "pa-segmented-icon" })
               },
               {
                 value: "right",
                 title: "Align right",
-                content: /* @__PURE__ */ n(_n, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Hn, { className: "pa-segmented-icon" })
               },
               {
                 value: "justify",
                 title: "Justify",
-                content: /* @__PURE__ */ n(Hn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Vn, { className: "pa-segmented-icon" })
               }
             ]
           }
@@ -1356,7 +1356,7 @@ function Gn({
       ] }),
       /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
         /* @__PURE__ */ n(
-          ie,
+          se,
           {
             compact: !0,
             property: "font-size",
@@ -1366,7 +1366,7 @@ function Gn({
           }
         ),
         /* @__PURE__ */ n(
-          ie,
+          se,
           {
             compact: !0,
             property: "line-height",
@@ -1385,10 +1385,10 @@ function Gn({
         }
       )
     ] }),
-    /* @__PURE__ */ d(ue, { title: "Layout", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(fe, { title: "Layout", defaultOpen: !0, children: [
       /* @__PURE__ */ d("div", { className: "pa-edit-split-fields", children: [
         /* @__PURE__ */ n(
-          ie,
+          se,
           {
             compact: !0,
             property: "width",
@@ -1398,7 +1398,7 @@ function Gn({
           }
         ),
         /* @__PURE__ */ n(
-          ie,
+          se,
           {
             compact: !0,
             property: "height",
@@ -1426,30 +1426,30 @@ function Gn({
           onChange: (h) => t("margin", h)
         }
       ),
-      N && /* @__PURE__ */ d("label", { className: "pa-prop-row pa-prop-row--compact", children: [
+      w && /* @__PURE__ */ d("label", { className: "pa-prop-row pa-prop-row--compact", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Display" }),
         /* @__PURE__ */ n(
           "select",
           {
             className: "pa-select",
-            value: E,
+            value: S,
             onChange: (h) => t("display", h.target.value),
-            children: k.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
+            children: N.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
           }
         )
       ] }),
-      w && /* @__PURE__ */ n(
-        ie,
+      k && /* @__PURE__ */ n(
+        se,
         {
           compact: !0,
           property: "gap",
           label: "Gap",
-          value: P,
+          value: z,
           onChange: (h) => t("gap", h)
         }
       )
     ] }),
-    /* @__PURE__ */ d(ue, { title: "Fill", children: [
+    /* @__PURE__ */ d(fe, { title: "Fill", children: [
       /* @__PURE__ */ n(
         _e,
         {
@@ -1459,7 +1459,7 @@ function Gn({
         }
       ),
       /* @__PURE__ */ n(
-        ie,
+        se,
         {
           compact: !0,
           property: "opacity",
@@ -1469,7 +1469,7 @@ function Gn({
         }
       )
     ] }),
-    /* @__PURE__ */ d(ue, { title: "Border", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(fe, { title: "Border", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
         _e,
         {
@@ -1491,7 +1491,7 @@ function Gn({
         )
       ] }),
       /* @__PURE__ */ n(
-        ie,
+        se,
         {
           compact: !0,
           property: "border-width",
@@ -1501,7 +1501,7 @@ function Gn({
         }
       ),
       /* @__PURE__ */ n(
-        ie,
+        se,
         {
           compact: !0,
           property: "border-radius",
@@ -1513,7 +1513,7 @@ function Gn({
     ] })
   ] });
 }
-const Kn = 50, gt = [
+const jn = 50, gt = [
   "font-family",
   "font-size",
   "font-weight",
@@ -1535,150 +1535,159 @@ const Kn = 50, gt = [
   "border-radius",
   "opacity"
 ];
-function jn(e, t, i) {
-  var ee;
-  const r = Y([]), a = Y(/* @__PURE__ */ new Set()), s = Y([]), o = Y(null), c = Y([]), [u, l] = S({}), [f, p] = S({}), [v, m] = S("none"), [g, b] = S(""), [E, N] = S(""), [w, k] = S(() => /* @__PURE__ */ new Map()), [I, P] = S(!1), R = $(() => {
-    const M = Array.from(a.current);
+function qn(e, t, i) {
+  var ce;
+  const r = X([]), o = X(/* @__PURE__ */ new Set()), s = X([]), a = X(null), c = X([]), u = X(
+    null
+  ), [l, f] = A({}), [p, v] = A({}), [m, g] = A("none"), [y, S] = A(""), [w, k] = A(""), [N, E] = A(() => /* @__PURE__ */ new Map()), [z, R] = A(!1), x = $(() => {
+    const C = Array.from(o.current);
     return {
-      inline: nt(M, [...gt]),
-      text: e && v !== "none" ? tt(e, v) : null
+      inline: nt(C, [...gt]),
+      text: e && m !== "none" ? tt(e, m) : null
     };
-  }, [e, v]), x = $(() => {
-    c.current.push(R()), c.current.length > Kn && c.current.shift(), P(c.current.length > 0);
-  }, [R]), T = $(
-    (M) => {
-      var L;
+  }, [e, m]), I = $(() => {
+    c.current.push(x()), c.current.length > jn && c.current.shift(), R(c.current.length > 0);
+  }, [x]), L = $(
+    (C) => {
+      var H;
       if (!e) return;
-      const O = Array.from(a.current);
-      we(s.current.filter((z) => O.includes(z.element))), o.current && ke(o.current);
-      const D = $e(e, t);
-      r.current = D, a.current = new Set(D), Ce(O), ze(D, i);
-      const U = e ? ((L = w.get(e)) == null ? void 0 : L.get(i)) ?? [] : [];
-      if (M && U.length > 0)
-        for (const z of U)
-          if (z.property === "textContent" || z.property === "value")
-            for (const X of D)
-              rt(X, z.property, z.newValue);
+      const P = Array.from(o.current);
+      ke(s.current.filter((O) => P.includes(O.element))), a.current && Ae(a.current);
+      const D = Re(e, t);
+      r.current = D, o.current = new Set(D), Se(P), ze(D, i);
+      const T = e ? ((H = N.get(e)) == null ? void 0 : H.get(i)) ?? [] : [];
+      if (C && T.length > 0)
+        for (const O of T)
+          if (O.property === "textContent" || O.property === "value")
+            for (const Y of D)
+              rt(Y, O.property, O.newValue);
           else
-            for (const X of D)
-              X.style.setProperty(z.property, z.newValue);
+            for (const Y of D)
+              Y.style.setProperty(O.property, O.newValue);
     },
-    [e, t, i, w]
+    [e, t, i, N]
   );
   _(() => {
     if (!e) {
-      r.current = [], a.current = /* @__PURE__ */ new Set(), s.current = [], o.current = null, c.current = [], l({}), p({}), m("none"), b(""), N(""), k(/* @__PURE__ */ new Map()), P(!1);
+      r.current = [], o.current = /* @__PURE__ */ new Set(), s.current = [], a.current = null, c.current = [], f({}), v({}), g("none"), S(""), k(""), E(/* @__PURE__ */ new Map()), R(!1);
       return;
     }
-    const M = $e(e, t);
-    r.current = M, a.current = new Set(M), s.current = nt(M, [...gt]), c.current = [], P(!1);
-    const O = Me(e);
-    l(O), p(O);
-    const D = fe(e);
-    return m(D.kind), b(D.value), N(D.value), o.current = D.kind !== "none" ? tt(e, D.kind) : null, ze(M, i), () => Ce(M);
+    const C = Re(e, t);
+    r.current = C, o.current = new Set(C), s.current = nt(C, [...gt]), c.current = [], R(!1);
+    const P = Ce(e);
+    f(P), v(P);
+    const D = ve(e);
+    return g(D.kind), S(D.value), k(D.value), a.current = D.kind !== "none" ? tt(e, D.kind) : null, ze(C, i), () => Se(C);
   }, [e]), _(() => {
-    e && T(!0);
+    e && L(!0);
   }, [t]), _(() => {
-    var U;
+    var ae;
     if (!e) return;
-    const M = $e(e, t);
-    r.current = M, we(
-      s.current.filter((L) => M.includes(L.element))
+    const C = Re(e, t);
+    r.current = C, ke(
+      s.current.filter((G) => C.includes(G.element))
     );
-    const O = ((U = w.get(e)) == null ? void 0 : U.get(i)) ?? [];
-    for (const L of O)
-      if (!(L.property === "textContent" || L.property === "value"))
-        for (const z of M)
-          z.style.setProperty(L.property, L.newValue);
-    const D = { ...f };
-    for (const L of O)
-      L.property === "textContent" || L.property === "value" || (D[L.property] = L.newValue);
-    l(D), Ce(Array.from(a.current)), ze(M, i), a.current = new Set(M);
+    const P = Ce(e), D = i === "normal" ? {} : qt(e, i);
+    for (const [G, K] of Object.entries(D))
+      for (const he of C) he.style.setProperty(G, K);
+    const T = ((ae = N.get(e)) == null ? void 0 : ae.get(i)) ?? [];
+    for (const G of T)
+      if (!(G.property === "textContent" || G.property === "value"))
+        for (const K of C)
+          K.style.setProperty(G.property, G.newValue);
+    const H = u.current, O = H !== null && H.element === e && H.state !== i, Y = H !== null && H.element !== e && i !== "normal";
+    if (O || Y) {
+      const G = { ...P, ...D };
+      for (const K of T)
+        K.property === "textContent" || K.property === "value" || (G[K.property] = K.newValue);
+      f(G);
+    }
+    u.current = { element: e, state: i }, Se(Array.from(o.current)), ze(C, i), o.current = new Set(C);
   }, [i, e, t]);
-  const C = $(
-    (M, O, D) => {
-      e && k((U) => {
-        const L = new Map(U), z = new Map(L.get(e) ?? /* @__PURE__ */ new Map()), q = (z.get(i) ?? []).filter((Re) => Re.property !== M);
-        return D === O ? q.length === 0 ? z.delete(i) : z.set(i, q) : z.set(i, [...q, { property: M, oldValue: O, newValue: D }]), z.size === 0 ? L.delete(e) : L.set(e, z), L;
+  const h = $(
+    (C, P, D) => {
+      e && E((T) => {
+        const H = new Map(T), O = new Map(H.get(e) ?? /* @__PURE__ */ new Map()), ae = (O.get(i) ?? []).filter((G) => G.property !== C);
+        return D === P ? ae.length === 0 ? O.delete(i) : O.set(i, ae) : O.set(i, [...ae, { property: C, oldValue: P, newValue: D }]), O.size === 0 ? H.delete(e) : H.set(e, O), H;
       });
     },
     [e, i]
-  ), h = $(
-    (M, O) => {
+  ), F = $(
+    (C, P) => {
       if (!e) return;
-      const D = { [M]: O };
-      M === "border-width" && (u["border-style"] ?? "none") === "none" && Sn(O) && (D["border-style"] = "solid"), x(), l((U) => ({ ...U, ...D }));
-      for (const [U, L] of Object.entries(D)) {
-        const z = f[U] ?? "";
-        for (const X of r.current)
-          X.style.setProperty(U, L), a.current.add(X);
-        C(U, z, L);
+      const D = { [C]: P };
+      C === "border-width" && (l["border-style"] ?? "none") === "none" && Ln(P) && (D["border-style"] = "solid"), I(), f((T) => ({ ...T, ...D }));
+      for (const [T, H] of Object.entries(D)) {
+        const O = p[T] ?? "";
+        for (const Y of r.current)
+          Y.style.setProperty(T, H), o.current.add(Y);
+        h(T, O, H);
       }
     },
-    [e, f, u, x, C]
-  ), F = $(
-    (M) => {
-      if (!(!e || v === "none")) {
-        x(), b(M);
-        for (const O of r.current)
-          rt(O, v, M), a.current.add(O);
-        C(v, E, M);
+    [e, p, l, I, h]
+  ), U = $(
+    (C) => {
+      if (!(!e || m === "none")) {
+        I(), S(C);
+        for (const P of r.current)
+          rt(P, m, C), o.current.add(P);
+        h(m, w, C);
       }
     },
-    [e, v, E, x, C]
-  ), W = $(() => {
-    const M = c.current.pop();
-    if (M && (we(M.inline), M.text && ke(M.text), P(c.current.length > 0), e)) {
-      l(Me(e));
-      const O = fe(e);
-      O.kind !== "none" && b(O.value);
+    [e, m, w, I, h]
+  ), ye = $(() => {
+    const C = c.current.pop();
+    if (C && (ke(C.inline), C.text && Ae(C.text), R(c.current.length > 0), e)) {
+      f(Ce(e));
+      const P = ve(e);
+      P.kind !== "none" && S(P.value);
     }
-  }, [e]), ge = $(() => {
-    if (we(s.current), o.current && ke(o.current), c.current = [], P(!1), k(/* @__PURE__ */ new Map()), e) {
-      l(Me(e));
-      const M = fe(e);
-      b(M.value);
+  }, [e]), ee = $(() => {
+    if (ke(s.current), a.current && Ae(a.current), c.current = [], R(!1), E(/* @__PURE__ */ new Map()), e) {
+      f(Ce(e));
+      const C = ve(e);
+      S(C.value);
     }
-  }, [e]), j = $(() => {
-    we(s.current), o.current && ke(o.current);
+  }, [e]), re = $(() => {
+    ke(s.current), a.current && Ae(a.current);
   }, []), oe = $(() => {
-    if (j(), Ce(Array.from(a.current)), c.current = [], P(!1), k(/* @__PURE__ */ new Map()), e) {
-      l(Me(e));
-      const M = fe(e);
-      M.kind !== "none" && b(M.value);
+    if (re(), Se(Array.from(o.current)), c.current = [], R(!1), E(/* @__PURE__ */ new Map()), e) {
+      f(Ce(e));
+      const C = ve(e);
+      C.kind !== "none" && S(C.value);
     }
-  }, [j, e]), re = e ? ((ee = w.get(e)) == null ? void 0 : ee.get(i)) ?? [] : [];
-  let V = 0;
-  for (const M of w.values())
-    for (const O of M.values()) V += O.length;
-  const G = $(() => {
-    k(/* @__PURE__ */ new Map());
+  }, [re, e]), W = e ? ((ce = N.get(e)) == null ? void 0 : ce.get(i)) ?? [] : [];
+  let j = 0;
+  for (const C of N.values())
+    for (const P of C.values()) j += P.length;
+  const ie = $(() => {
+    E(/* @__PURE__ */ new Map());
   }, []);
   return {
-    values: u,
-    textKind: v,
-    textValue: g,
-    pendingChanges: re,
-    pendingByElement: w,
-    totalPendingCount: V,
-    clearAllPending: G,
-    canUndo: I,
-    updateProperty: h,
-    updateText: F,
-    undo: W,
-    reset: ge,
+    values: l,
+    textKind: m,
+    textValue: y,
+    pendingChanges: W,
+    pendingByElement: N,
+    totalPendingCount: j,
+    clearAllPending: ie,
+    canUndo: z,
+    updateProperty: F,
+    updateText: U,
+    undo: ye,
+    reset: ee,
     clearPreviews: oe,
-    revertPreviews: j
+    revertPreviews: re
   };
 }
-function qn({
+function Jn({
   selectedElement: e,
   hoveredElement: t,
   onSelectElement: i,
   onHoverElement: r,
-  targetScope: a,
+  targetScope: o,
   onTargetScopeChange: s,
-  elementState: o,
+  elementState: a,
   onElementStateChange: c,
   onApply: u,
   applyStatus: l,
@@ -1689,63 +1698,63 @@ function qn({
     values: v,
     textKind: m,
     textValue: g,
-    pendingChanges: b,
-    pendingByElement: E,
-    totalPendingCount: N,
-    clearAllPending: w,
-    canUndo: k,
-    updateProperty: I,
-    updateText: P,
+    pendingChanges: y,
+    pendingByElement: S,
+    totalPendingCount: w,
+    clearAllPending: k,
+    canUndo: N,
+    updateProperty: E,
+    updateText: z,
     undo: R,
     reset: x,
-    clearPreviews: T,
-    revertPreviews: C
-  } = jn(e, a, o), { elementRef: h, isDragging: F, style: W, dragHandleProps: ge } = Rt({
-    computeDefaultPosition: (L) => ({
-      x: window.innerWidth - L.width - 16,
+    clearPreviews: I,
+    revertPreviews: L
+  } = qn(e, o, a), { elementRef: h, isDragging: F, style: U, dragHandleProps: ye } = Tt({
+    computeDefaultPosition: (T) => ({
+      x: window.innerWidth - T.width - 16,
       y: 16
     })
   });
-  _(() => (p == null || p({ clearPreviews: T, revertPreviews: C }), () => p == null ? void 0 : p(null)), [p, T, C]);
-  const j = $(
-    (L) => {
-      if (f(L.target)) return;
-      const X = document.elementsFromPoint(L.clientX, L.clientY).find(
-        (q) => q instanceof Element && !q.closest(
+  _(() => (p == null || p({ clearPreviews: I, revertPreviews: L }), () => p == null ? void 0 : p(null)), [p, I, L]);
+  const ee = $(
+    (T) => {
+      if (f(T.target)) return;
+      const O = document.elementsFromPoint(T.clientX, T.clientY).find(
+        (Y) => Y instanceof Element && !Y.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      r(X ?? null);
+      r(O ?? null);
     },
     [f, r]
-  ), oe = $(
-    (L) => {
-      if (f(L.target)) return;
-      L.preventDefault(), L.stopPropagation();
-      const X = document.elementsFromPoint(L.clientX, L.clientY).find(
-        (q) => q instanceof Element && !q.closest(
+  ), re = $(
+    (T) => {
+      if (f(T.target)) return;
+      T.preventDefault(), T.stopPropagation();
+      const O = document.elementsFromPoint(T.clientX, T.clientY).find(
+        (Y) => Y instanceof Element && !Y.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      i(X ?? null);
+      i(O ?? null);
     },
     [f, i]
   );
-  _(() => (document.addEventListener("mousemove", j, !0), document.addEventListener("click", oe, !0), () => {
-    document.removeEventListener("mousemove", j, !0), document.removeEventListener("click", oe, !0);
-  }), [j, oe]);
-  const re = async () => {
-    if (N === 0) return;
-    const L = await u(E);
-    L.applied && (w(), L.skipRevert || C());
-  }, V = e ? Ge(e) : null, G = e ? kt(e) : null, ee = e ? Ct(e) : 0, M = e ? Mt(e, "all-instances") : "", O = o !== "normal" && G === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : o !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, D = ee > 1 ? a === "all-instances" ? `Preview & Apply on ${ee} elements (${M}).` : `This instance only — ${ee - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, U = xe(() => !e || a !== "all-instances" ? [] : $e(e, "all-instances"), [e, a]);
-  return /* @__PURE__ */ d(K, { children: [
+  _(() => (document.addEventListener("mousemove", ee, !0), document.addEventListener("click", re, !0), () => {
+    document.removeEventListener("mousemove", ee, !0), document.removeEventListener("click", re, !0);
+  }), [ee, re]);
+  const oe = async () => {
+    if (w === 0) return;
+    const T = await u(S);
+    T.applied && (k(), T.skipRevert || L());
+  }, W = e ? Ge(e) : null, j = e ? kt(e) : null, ie = e ? Ct(e) : 0, ce = e ? Mt(e, "all-instances") : "", C = a !== "normal" && j === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : a !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, P = ie > 1 ? o === "all-instances" ? `Preview & Apply on ${ie} elements (${ce}).` : `This instance only — ${ie - 1} other on page.` : o === "all-instances" ? "Only one match — scope has no effect." : null, D = Me(() => !e || o !== "all-instances" ? [] : Re(e, "all-instances"), [e, o]);
+  return /* @__PURE__ */ d(q, { children: [
     /* @__PURE__ */ n(
-      $t,
+      Et,
       {
-        element: a === "all-instances" ? null : t,
+        element: o === "all-instances" ? null : t,
         selected: e,
-        multiSelected: U,
+        multiSelected: D,
         primarySelected: e
       }
     ),
@@ -1754,8 +1763,8 @@ function qn({
       {
         ref: h,
         className: `pa-edit-panel-float ${F ? "pa-edit-panel-float--dragging" : ""}`,
-        style: W,
-        children: /* @__PURE__ */ n(Te, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ d("div", { className: "pa-edit-panel-inner", children: [
+        style: U,
+        children: /* @__PURE__ */ n(Pe, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ d("div", { className: "pa-edit-panel-inner", children: [
           /* @__PURE__ */ d("div", { className: "pa-edit-panel-header", children: [
             /* @__PURE__ */ n(
               "button",
@@ -1764,7 +1773,7 @@ function qn({
                 className: "pa-edit-panel-drag",
                 "aria-label": "Drag edit panel",
                 title: "Drag to move",
-                ...ge,
+                ...ye,
                 children: /* @__PURE__ */ d("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
@@ -1777,57 +1786,57 @@ function qn({
             ),
             /* @__PURE__ */ n("h3", { className: "pa-edit-title", children: "Edit" })
           ] }),
-          e ? /* @__PURE__ */ d(K, { children: [
+          e ? /* @__PURE__ */ d(q, { children: [
             /* @__PURE__ */ d("div", { className: "pa-edit-meta", children: [
               /* @__PURE__ */ n(
                 "code",
                 {
                   className: "pa-edit-meta-label",
                   title: `This instance: ${At(e)}
-All instances: ${M}`,
+All instances: ${ce}`,
                   children: Xe(e)
                 }
               ),
-              ((V == null ? void 0 : V.sourceFile) || G) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
-                (V == null ? void 0 : V.sourceFile) && /* @__PURE__ */ d(K, { children: [
-                  V.sourceFile,
-                  V.lineNumber ? `:${V.lineNumber}` : ""
+              ((W == null ? void 0 : W.sourceFile) || j) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
+                (W == null ? void 0 : W.sourceFile) && /* @__PURE__ */ d(q, { children: [
+                  W.sourceFile,
+                  W.lineNumber ? `:${W.lineNumber}` : ""
                 ] }),
-                V != null && V.sourceFile && G ? " · " : "",
-                G ?? ""
+                W != null && W.sourceFile && j ? " · " : "",
+                j ?? ""
               ] })
             ] }),
             /* @__PURE__ */ n("div", { className: "pa-edit-panel-scroll", children: /* @__PURE__ */ n(
-              Gn,
+              Kn,
               {
                 values: v,
-                onPropertyChange: I,
+                onPropertyChange: E,
                 textKind: m,
                 textValue: g,
-                onTextChange: P,
-                targetScope: a,
+                onTextChange: z,
+                targetScope: o,
                 onTargetScopeChange: s,
-                elementState: o,
+                elementState: a,
                 onElementStateChange: c,
-                instanceCount: ee,
-                scopeHint: D,
-                stateHint: O
+                instanceCount: ie,
+                scopeHint: P,
+                stateHint: C
               }
             ) }),
             /* @__PURE__ */ d("div", { className: "pa-edit-panel-sticky", children: [
               /* @__PURE__ */ d("div", { className: "pa-edit-actions", children: [
-                /* @__PURE__ */ n(H, { variant: "regular", onClick: R, disabled: !k, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
-                  /* @__PURE__ */ n(mn, { className: "pa-glass-btn-icon" }),
+                /* @__PURE__ */ n(V, { variant: "regular", onClick: R, disabled: !N, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                  /* @__PURE__ */ n(gn, { className: "pa-glass-btn-icon" }),
                   /* @__PURE__ */ n("span", { children: "Undo" })
                 ] }) }),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "regular",
                     onClick: x,
-                    disabled: b.length === 0,
+                    disabled: y.length === 0,
                     children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
-                      /* @__PURE__ */ n(gn, { className: "pa-glass-btn-icon" }),
+                      /* @__PURE__ */ n(vn, { className: "pa-glass-btn-icon" }),
                       /* @__PURE__ */ n("span", { children: "Reset" })
                     ] })
                   }
@@ -1838,16 +1847,16 @@ All instances: ${M}`,
                   "span",
                   {
                     className: l ? /fail/i.test(l) ? "pa-change-count pa-change-count--error" : "pa-change-count pa-change-count--success" : "pa-change-count",
-                    children: l ?? `${N} pending change${N !== 1 ? "s" : ""}`
+                    children: l ?? `${w} pending change${w !== 1 ? "s" : ""}`
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: re,
-                    disabled: N === 0,
-                    title: V != null && V.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    onClick: oe,
+                    disabled: w === 0,
+                    title: W != null && W.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1859,7 +1868,7 @@ All instances: ${M}`,
     )
   ] });
 }
-async function Jn(e, t = {}) {
+async function Zn(e, t = {}) {
   if (t.onApply)
     try {
       const r = await t.onApply(e);
@@ -1874,15 +1883,15 @@ async function Jn(e, t = {}) {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ payload: e })
-      }), a = await r.json();
-      return r.ok ? { mode: "mcp", result: a } : { mode: "error", message: a.error ?? r.statusText };
+      }), o = await r.json();
+      return r.ok ? { mode: "mcp", result: o } : { mode: "error", message: o.error ?? r.statusText };
     } catch (r) {
       return { mode: "error", message: r instanceof Error ? r.message : String(r) };
     }
   return await St(JSON.stringify(e, null, 2)), { mode: "clipboard" };
 }
-function Zn(e) {
-  const [t, i] = S(null);
+function Qn(e) {
+  const [t, i] = A(null);
   return _(() => {
     if (!e) {
       i(null);
@@ -1890,13 +1899,13 @@ function Zn(e) {
     }
     const r = () => i(e.getBoundingClientRect());
     r();
-    const a = new ResizeObserver(r);
-    return a.observe(e), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
-      a.disconnect(), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
+    const o = new ResizeObserver(r);
+    return o.observe(e), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
+      o.disconnect(), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
     };
   }, [e]), t;
 }
-const ae = 8, Q = 8, Qn = 12, er = 300, tr = 280;
+const le = 8, Q = 8, er = 12, tr = 300, nr = 280;
 function He(e, t, i, r) {
   return {
     top: e,
@@ -1910,7 +1919,7 @@ function He(e, t, i, r) {
 function Ye(e, t) {
   return e.left < t.right && e.right > t.left && e.top < t.bottom && e.bottom > t.top;
 }
-function nr(e, t) {
+function rr(e, t) {
   return {
     top: e.top - t,
     left: e.left - t,
@@ -1920,33 +1929,33 @@ function nr(e, t) {
     height: e.height + t * 2
   };
 }
-function rr() {
+function ir() {
   if (typeof document > "u") return null;
   const e = document.querySelector(
     "[data-pixelagent-toolbar-portal] .pa-toolbar-float"
   );
-  return e ? nr(e.getBoundingClientRect(), Qn) : null;
+  return e ? rr(e.getBoundingClientRect(), er) : null;
 }
 function Ve(e, t) {
   return Math.min(
-    Math.max(ae, e),
-    window.innerWidth - t - ae
+    Math.max(le, e),
+    window.innerWidth - t - le
   );
 }
-function Le(e, t) {
+function Ee(e, t) {
   return Math.min(
-    Math.max(ae, e),
-    window.innerHeight - t - ae
+    Math.max(le, e),
+    window.innerHeight - t - le
   );
 }
-function ir(e) {
-  return e.top >= ae && e.left >= ae && e.right <= window.innerWidth - ae && e.bottom <= window.innerHeight - ae;
+function or(e) {
+  return e.top >= le && e.left >= le && e.right <= window.innerWidth - le && e.bottom <= window.innerHeight - le;
 }
 function ar(e, t) {
-  return t && Ye(e, t) ? !1 : ir(e);
+  return t && Ye(e, t) ? !1 : or(e);
 }
-function or(e, t = er, i = tr) {
-  const r = rr(), s = e.top > window.innerHeight * 0.45 ? [
+function sr(e, t = tr, i = nr) {
+  const r = ir(), s = e.top > window.innerHeight * 0.45 ? [
     { placement: "above", top: e.top - i - Q, left: e.left },
     { placement: "below", top: e.bottom + Q, left: e.left },
     { placement: "right", top: e.top, left: e.right + Q },
@@ -1959,7 +1968,7 @@ function or(e, t = er, i = tr) {
   ];
   for (const { top: u, left: l } of s) {
     const f = He(
-      Le(u, i),
+      Ee(u, i),
       Ve(l, t),
       t,
       i
@@ -1967,40 +1976,40 @@ function or(e, t = er, i = tr) {
     if (ar(f, r))
       return { top: f.top, left: f.left };
   }
-  let o = Le(e.top - i - Q, i), c = Ve(e.left, t);
+  let a = Ee(e.top - i - Q, i), c = Ve(e.left, t);
   if (r) {
-    let u = He(o, c, t, i);
-    Ye(u, r) && (o = Le(r.top - i - Q, i), u = He(o, c, t, i)), Ye(u, r) && (o = Le(e.bottom + Q, i), c = Ve(
+    let u = He(a, c, t, i);
+    Ye(u, r) && (a = Ee(r.top - i - Q, i), u = He(a, c, t, i)), Ye(u, r) && (a = Ee(e.bottom + Q, i), c = Ve(
       Math.min(e.left, r.left - t - Q),
       t
     ));
   }
-  return { top: o, left: c };
+  return { top: a, left: c };
 }
-function sr({
+function lr({
   elements: e,
   areaBbox: t,
   onSubmit: i,
   onCancel: r
 }) {
-  const [a, s] = S(""), o = Y(null), c = Y(null), u = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, f = Zn(u), p = l ?? f, v = Lt(), m = u ? fe(u) : { kind: "none", value: "" }, g = m.kind !== "none" ? m.value : void 0;
+  const [o, s] = A(""), a = X(null), c = X(null), u = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, f = Qn(u), p = l ?? f, v = Lt(), m = u ? ve(u) : { kind: "none", value: "" }, g = m.kind !== "none" ? m.value : void 0;
   if (_(() => {
-    var w;
-    (w = o.current) == null || w.focus();
+    var k;
+    (k = a.current) == null || k.focus();
   }, [e]), _(() => {
-    const w = (k) => {
-      k.key === "Escape" && r();
+    const k = (N) => {
+      N.key === "Escape" && r();
     };
-    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [r]), !p) return null;
-  const b = or(p), E = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", N = (w) => {
-    a.trim() && i(a, w);
+  const y = sr(p), S = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", w = (k) => {
+    o.trim() && i(o, k);
   };
   return /* @__PURE__ */ n(
-    Te,
+    Pe,
     {
       variant: "popover",
-      style: { top: b.top, left: b.left },
+      style: { top: y.top, left: y.left },
       children: /* @__PURE__ */ d(
         "div",
         {
@@ -2010,7 +2019,7 @@ function sr({
           "aria-label": "Add annotation",
           className: "pa-popover-body",
           children: [
-            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: E }) }),
+            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: S }) }),
             (v || g) && /* @__PURE__ */ d("div", { className: "pa-popover-context", children: [
               v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Selected" }),
@@ -2026,36 +2035,36 @@ function sr({
               /* @__PURE__ */ n(
                 "textarea",
                 {
-                  ref: o,
+                  ref: a,
                   className: "pa-textarea",
-                  value: a,
-                  onChange: (w) => s(w.target.value),
+                  value: o,
+                  onChange: (k) => s(k.target.value),
                   placeholder: "Describe the change...",
                   rows: 3,
-                  onKeyDown: (w) => {
-                    w.key === "Enter" && (w.metaKey || w.ctrlKey) && (w.preventDefault(), N(w.shiftKey)), w.key === "Escape" && r();
+                  onKeyDown: (k) => {
+                    k.key === "Enter" && (k.metaKey || k.ctrlKey) && (k.preventDefault(), w(k.shiftKey)), k.key === "Escape" && r();
                   }
                 }
               )
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
             /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, children: "Cancel" }),
+              /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, children: "Cancel" }),
               /* @__PURE__ */ n(
-                H,
+                V,
                 {
                   variant: "ghost",
-                  onClick: () => N(!0),
-                  disabled: !a.trim(),
+                  onClick: () => w(!0),
+                  disabled: !o.trim(),
                   children: "Add & next"
                 }
               ),
               /* @__PURE__ */ n(
-                H,
+                V,
                 {
                   variant: "glass-primary",
-                  onClick: () => N(!1),
-                  disabled: !a.trim(),
+                  onClick: () => w(!1),
+                  disabled: !o.trim(),
                   children: "Add"
                 }
               )
@@ -2066,7 +2075,7 @@ function sr({
     }
   );
 }
-function lr({ area: e, isDragging: t }) {
+function cr({ area: e, isDragging: t }) {
   return !e || e.width < 2 || e.height < 2 ? null : /* @__PURE__ */ n(
     "div",
     {
@@ -2081,9 +2090,9 @@ function lr({ area: e, isDragging: t }) {
     }
   );
 }
-function cr(e) {
-  const { elements: t, note: i, areaBbox: r } = e, a = t[0];
-  if (!a && r)
+function dr(e) {
+  const { elements: t, note: i, areaBbox: r } = e, o = t[0];
+  if (!o && r)
     return {
       id: crypto.randomUUID(),
       selector: "area-selection",
@@ -2098,9 +2107,9 @@ function cr(e) {
       },
       createdAt: Date.now()
     };
-  if (!a)
+  if (!o)
     throw new Error("buildAnnotationEntry requires at least one element or areaBbox");
-  const s = a.getBoundingClientRect(), o = Ge(a), c = Lt(), u = fe(a), l = u.kind !== "none" ? u.value : void 0, f = t.map((p) => At(p));
+  const s = o.getBoundingClientRect(), a = Ge(o), c = Lt(), u = ve(o), l = u.kind !== "none" ? u.value : void 0, f = t.map((p) => At(p));
   return {
     id: crypto.randomUUID(),
     selector: f[0],
@@ -2114,25 +2123,25 @@ function cr(e) {
       height: Math.round(s.height)
     },
     areaBbox: r,
-    domPath: Jt(a),
+    domPath: Zt(o),
     selectedText: c,
     elementText: l,
-    sourceFile: o.sourceFile,
-    lineNumber: o.lineNumber,
-    componentName: qt(a) ?? o.componentName,
+    sourceFile: a.sourceFile,
+    lineNumber: a.lineNumber,
+    componentName: Jt(o) ?? a.componentName,
     createdAt: Date.now()
   };
 }
-function dr(e) {
-  const t = Et(e);
+function ur(e) {
+  const t = $t(e);
   if (t) return t.getBoundingClientRect();
   if (e.bbox) {
-    const { x: i, y: r, width: a, height: s } = e.bbox;
-    return new DOMRect(i, r, a, s);
+    const { x: i, y: r, width: o, height: s } = e.bbox;
+    return new DOMRect(i, r, o, s);
   }
   if (e.areaBbox) {
-    const { x: i, y: r, width: a, height: s } = e.areaBbox;
-    return new DOMRect(i, r, a, s);
+    const { x: i, y: r, width: o, height: s } = e.areaBbox;
+    return new DOMRect(i, r, o, s);
   }
   if (e.position) {
     const { x: i, y: r } = e.position;
@@ -2140,46 +2149,46 @@ function dr(e) {
   }
   return null;
 }
-function ur(e) {
+function pr(e) {
   return `${Math.round(e.top)}:${Math.round(e.left)}:${Math.round(e.width)}:${Math.round(e.height)}`;
 }
-const pr = 20;
-function hr({ annotations: e }) {
-  const [t, i] = S([]);
+const hr = 20;
+function fr({ annotations: e }) {
+  const [t, i] = A([]);
   return _(() => {
     if (e.length === 0) {
       i([]);
       return;
     }
-    const r = /* @__PURE__ */ new Map(), a = () => {
+    const r = /* @__PURE__ */ new Map(), o = () => {
       const c = [];
       e.forEach((u, l) => {
-        const f = dr(u);
+        const f = ur(u);
         if (!f) return;
-        const p = ur(f), v = r.get(p) ?? 0;
+        const p = pr(f), v = r.get(p) ?? 0;
         r.set(p, v + 1), c.push({
           id: u.id,
           index: l + 1,
-          top: f.top - 6 - v * pr,
+          top: f.top - 6 - v * hr,
           left: f.right - 6
         });
       }), i(c);
     };
-    a();
+    o();
     const s = /* @__PURE__ */ new Set();
     for (const c of e) {
-      const u = Et(c);
+      const u = $t(c);
       u && s.add(u);
     }
-    const o = Array.from(s).map((c) => {
-      const u = new ResizeObserver(a);
+    const a = Array.from(s).map((c) => {
+      const u = new ResizeObserver(o);
       return u.observe(c), u;
     });
-    return window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
-      for (const c of o) c.disconnect();
-      window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
+    return window.addEventListener("scroll", o, !0), window.addEventListener("resize", o), () => {
+      for (const c of a) c.disconnect();
+      window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", o);
     };
-  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(K, { children: t.map((r) => /* @__PURE__ */ n(
+  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(q, { children: t.map((r) => /* @__PURE__ */ n(
     "span",
     {
       className: "pa-annotation-badge",
@@ -2191,7 +2200,7 @@ function hr({ annotations: e }) {
   )) });
 }
 const Ze = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
-function Ee(e) {
+function Ie(e) {
   return e instanceof Element ? !!e.closest(Ze) : !1;
 }
 function vt(e, t) {
@@ -2215,35 +2224,35 @@ function Ht({
       "aria-live": "polite",
       children: e
     }
-  ) : /* @__PURE__ */ n(K, { children: i });
+  ) : /* @__PURE__ */ n(q, { children: i });
 }
-function fr({
+function mr({
   annotations: e,
   collapsed: t,
   onToggleCollapsed: i,
   onClose: r,
-  onCopyAll: a,
+  onCopyAll: o,
   onCopyOne: s,
-  onRemove: o,
+  onRemove: a,
   onUpdate: c,
   copyStatus: u,
   copiedEntryId: l,
   copyAllFrom: f
 }) {
-  const [p, v] = S(null), [m, g] = S("");
+  const [p, v] = A(null), [m, g] = A("");
   _(() => {
-    const N = (w) => {
-      w.key === "Escape" && (t ? r() : i());
+    const w = (k) => {
+      k.key === "Escape" && (t ? r() : i());
     };
-    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
   }, [t, r, i]);
-  const b = (N) => {
-    v(N.id), g(N.note);
-  }, E = (N) => {
-    m.trim() && (c(N, { note: m.trim() }), v(null));
+  const y = (w) => {
+    v(w.id), g(w.note);
+  }, S = (w) => {
+    m.trim() && (c(w, { note: m.trim() }), v(null));
   };
   return /* @__PURE__ */ d(
-    Te,
+    Pe,
     {
       variant: "sheet",
       side: "right",
@@ -2252,7 +2261,7 @@ function fr({
         /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
           /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
@@ -2276,25 +2285,25 @@ function fr({
                 feedback: f === "session" ? u : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
-                    onClick: a,
+                    onClick: o,
                     disabled: e.length === 0,
                     children: "Copy all"
                   }
                 )
               }
             ),
-            /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
+            /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
           ] })
         ] }),
         !t && /* @__PURE__ */ d("ul", { className: "pa-session-list", children: [
           e.length === 0 && /* @__PURE__ */ n("li", { className: "pa-session-empty", children: "No annotations yet. Click an element, drag an area, or Shift+click for multi-select." }),
-          e.map((N) => {
-            const w = Zt(N);
-            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: p === N.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
+          e.map((w) => {
+            const k = Qt(w);
+            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: p === w.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
               /* @__PURE__ */ d("label", { className: "pa-label", children: [
                 "Note",
                 /* @__PURE__ */ n(
@@ -2302,31 +2311,31 @@ function fr({
                   {
                     className: "pa-textarea",
                     value: m,
-                    onChange: (k) => g(k.target.value),
+                    onChange: (N) => g(N.target.value),
                     rows: 3
                   }
                 )
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(H, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
+                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: () => E(N.id),
+                    onClick: () => S(w.id),
                     disabled: !m.trim(),
                     children: "Save"
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ d(K, { children: [
+            ] }) : /* @__PURE__ */ d(q, { children: [
               /* @__PURE__ */ d("div", { className: "pa-session-content", children: [
-                /* @__PURE__ */ n("span", { className: "pa-session-target", children: w.target }),
-                /* @__PURE__ */ n("p", { className: "pa-session-note", children: w.note }),
-                w.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: w.meta })
+                /* @__PURE__ */ n("span", { className: "pa-session-target", children: k.target }),
+                /* @__PURE__ */ n("p", { className: "pa-session-note", children: k.note }),
+                k.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: k.meta })
               ] }),
               /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                u === "Copied!" && l === N.id ? /* @__PURE__ */ n(
+                u === "Copied!" && l === w.id ? /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-status pa-copy-feedback-slot pa-copy-feedback-slot--item",
@@ -2335,44 +2344,44 @@ function fr({
                     children: "Copied!"
                   }
                 ) : /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
-                    onClick: () => s(N.id),
+                    onClick: () => s(w.id),
                     "aria-label": "Copy annotation",
                     children: "Copy"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => b(N),
+                    onClick: () => y(w),
                     "aria-label": "Edit annotation note",
                     children: "✎"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => o(N.id),
+                    onClick: () => a(w.id),
                     "aria-label": "Remove annotation",
                     children: "✕"
                   }
                 )
               ] })
-            ] }) }, N.id);
+            ] }) }, w.id);
           })
         ] })
       ]
     }
   );
 }
-function mr() {
+function gr() {
   return /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
@@ -2393,7 +2402,7 @@ function mr() {
     )
   ] });
 }
-function gr() {
+function vr() {
   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(
@@ -2407,7 +2416,7 @@ function gr() {
     )
   ] });
 }
-function vr() {
+function br() {
   return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -2418,27 +2427,27 @@ function vr() {
     }
   ) });
 }
-function br({
+function yr({
   open: e,
   onClose: t,
   hostTheme: i,
   chrome: r,
-  onToggleHostTheme: a
+  onToggleHostTheme: o
 }) {
-  const s = Y(null);
+  const s = X(null);
   return _(() => {
     if (!e) return;
-    const o = (u) => {
+    const a = (u) => {
       u.key === "Escape" && t();
     }, c = (u) => {
       var f, p;
       const l = u.target;
       (f = s.current) != null && f.contains(l) || (p = l.closest) != null && p.call(l, "[data-pa-settings-trigger]") || t();
     };
-    return window.addEventListener("keydown", o), window.addEventListener("mousedown", c), () => {
-      window.removeEventListener("keydown", o), window.removeEventListener("mousedown", c);
+    return window.addEventListener("keydown", a), window.addEventListener("mousedown", c), () => {
+      window.removeEventListener("keydown", a), window.removeEventListener("mousedown", c);
     };
-  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Te, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ d("div", { className: "pa-settings-menu-inner", children: [
+  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Pe, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ d("div", { className: "pa-settings-menu-inner", children: [
     /* @__PURE__ */ d("header", { className: "pa-settings-menu-header", children: [
       /* @__PURE__ */ n("h4", { className: "pa-settings-menu-title", children: "Settings" }),
       /* @__PURE__ */ n("p", { className: "pa-settings-menu-subtitle", children: "Appearance and chrome" })
@@ -2448,13 +2457,13 @@ function br({
       /* @__PURE__ */ d("div", { className: "pa-settings-row", children: [
         /* @__PURE__ */ n("span", { className: "pa-settings-row-value", children: i === "dark" ? "Dark canvas" : "Light canvas" }),
         /* @__PURE__ */ n(
-          H,
+          V,
           {
             variant: "icon",
-            onClick: a,
+            onClick: o,
             "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(gr, {}) : /* @__PURE__ */ n(vr, {})
+            children: i === "dark" ? /* @__PURE__ */ n(vr, {}) : /* @__PURE__ */ n(br, {})
           }
         )
       ] })
@@ -2470,14 +2479,14 @@ function br({
   ] }) }) }) : null;
 }
 const bt = "0 0 24 24";
-function yr() {
-  return /* @__PURE__ */ d(K, { children: [
+function wr() {
+  return /* @__PURE__ */ d(q, { children: [
     /* @__PURE__ */ n("rect", { x: "3", y: "14", width: "4", height: "4", fill: "currentColor" }),
     /* @__PURE__ */ n("path", { fill: "currentColor", d: "M7 5h12v12L7 5z" })
   ] });
 }
-const wr = "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 xr({ size: e = 22, variant: t = "cursor" }) {
+const xr = "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 Nr({ size: e = 22, variant: t = "cursor" }) {
   return t === "pointer" ? /* @__PURE__ */ n(
     "svg",
     {
@@ -2491,7 +2500,7 @@ function xr({ size: e = 22, variant: t = "cursor" }) {
         "path",
         {
           fill: "currentColor",
-          d: wr
+          d: xr
         }
       )
     }
@@ -2504,23 +2513,23 @@ function xr({ size: e = 22, variant: t = "cursor" }) {
       viewBox: bt,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ n(yr, {})
+      children: /* @__PURE__ */ n(wr, {})
     }
   );
 }
-const Nr = ["element", "area", "multi"], kr = {
+const kr = ["element", "area", "multi"], Cr = {
   element: "Click",
   area: "Area",
   multi: "Multi"
 };
-function Cr({
+function Mr({
   rootAttributes: e,
   hostTheme: t,
   chrome: i,
   settingsOpen: r,
-  onToggleSettings: a,
+  onToggleSettings: o,
   onCloseSettings: s,
-  onToggleHostTheme: o,
+  onToggleHostTheme: a,
   active: c,
   mode: u,
   captureMode: l,
@@ -2529,32 +2538,32 @@ function Cr({
   copyStatus: v,
   copyAllFrom: m,
   onActivateAnnotate: g,
-  onActivateEdit: b,
-  onDeactivate: E,
-  onCopyAll: N,
-  onCaptureModeChange: w,
-  onConfirmMultiSelect: k
+  onActivateEdit: y,
+  onDeactivate: S,
+  onCopyAll: w,
+  onCaptureModeChange: k,
+  onConfirmMultiSelect: N
 }) {
-  const { elementRef: I, isDragging: P, style: R, dragHandleProps: x } = Rt(), T = /* @__PURE__ */ d(
+  const { elementRef: E, isDragging: z, style: R, dragHandleProps: x } = Tt(), I = /* @__PURE__ */ d(
     "div",
     {
-      ref: I,
-      className: `pa-toolbar-float ${P ? "pa-toolbar-float--dragging" : ""}`,
+      ref: E,
+      className: `pa-toolbar-float ${z ? "pa-toolbar-float--dragging" : ""}`,
       style: R,
       role: "toolbar",
       "aria-label": "PixelAgent",
       children: [
         !c && /* @__PURE__ */ n(
-          br,
+          yr,
           {
             open: r,
             onClose: s,
             hostTheme: t,
             chrome: i,
-            onToggleHostTheme: o
+            onToggleHostTheme: a
           }
         ),
-        /* @__PURE__ */ n(Tt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
+        /* @__PURE__ */ n(Rt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
           /* @__PURE__ */ n(
             "button",
             {
@@ -2563,29 +2572,29 @@ function Cr({
               "aria-label": "Drag PixelAgent toolbar",
               title: "Drag to move",
               ...x,
-              children: /* @__PURE__ */ n(xr, { size: 22 })
+              children: /* @__PURE__ */ n(Nr, { size: 22 })
             }
           ),
           /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
-          c ? /* @__PURE__ */ d(K, { children: [
+          c ? /* @__PURE__ */ d(q, { children: [
             /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
               /* @__PURE__ */ n("span", { className: "pa-mode-badge", children: u }),
-              u === "annotate" && /* @__PURE__ */ d(K, { children: [
+              u === "annotate" && /* @__PURE__ */ d(q, { children: [
                 /* @__PURE__ */ n(
                   "select",
                   {
                     className: "pa-select pa-toolbar-capture-select",
                     value: l,
-                    onChange: (C) => w(C.target.value),
+                    onChange: (L) => k(L.target.value),
                     "aria-label": "Capture mode",
-                    children: Nr.map((C) => /* @__PURE__ */ n("option", { value: C, children: kr[C] }, C))
+                    children: kr.map((L) => /* @__PURE__ */ n("option", { value: L, children: Cr[L] }, L))
                   }
                 ),
                 p > 0 && /* @__PURE__ */ n(
-                  H,
+                  V,
                   {
                     variant: "glass-primary",
-                    onClick: k,
+                    onClick: N,
                     "aria-label": "Annotate selected elements",
                     children: p
                   }
@@ -2596,10 +2605,10 @@ function Cr({
                     feedback: m === "toolbar" ? v : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
-                      H,
+                      V,
                       {
                         variant: "glass-primary",
-                        onClick: N,
+                        onClick: w,
                         disabled: f === 0,
                         "aria-label": f > 0 ? `Copy all annotations (${f})` : "Copy all annotations",
                         children: f > 0 ? `Copy (${f})` : "Copy"
@@ -2610,11 +2619,11 @@ function Cr({
               ] })
             ] }),
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
-                onClick: E,
+                onClick: S,
                 "aria-label": "Close",
                 children: /* @__PURE__ */ n(
                   "svg",
@@ -2638,22 +2647,22 @@ function Cr({
               }
             )
           ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(H, { onClick: g, children: "Annotate" }),
-            /* @__PURE__ */ n(H, { onClick: b, children: "Edit" })
+            /* @__PURE__ */ n(V, { onClick: g, children: "Annotate" }),
+            /* @__PURE__ */ n(V, { onClick: y, children: "Edit" })
           ] }),
-          !c && /* @__PURE__ */ d(K, { children: [
+          !c && /* @__PURE__ */ d(q, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
-              H,
+              V,
               {
                 variant: "icon",
                 className: "pa-toolbar-settings",
                 "data-pa-settings-trigger": !0,
-                onClick: a,
+                onClick: o,
                 "aria-label": "PixelAgent settings",
                 "aria-expanded": r,
                 title: "Settings",
-                children: /* @__PURE__ */ n(mr, {})
+                children: /* @__PURE__ */ n(gr, {})
               }
             )
           ] }),
@@ -2662,59 +2671,59 @@ function Cr({
       ]
     }
   );
-  return typeof document > "u" ? T : Ke(
+  return typeof document > "u" ? I : Ke(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal",
         "data-pixelagent-toolbar-portal": !0,
         ...e,
-        children: T
+        children: I
       }
     ),
     document.body
   );
 }
-function Mr() {
-  const e = Y(Qt()), [t, i] = S(
+function Ar() {
+  const e = X(en()), [t, i] = A(
     () => {
       var s;
       return ((s = e.current) == null ? void 0 : s.annotations) ?? [];
     }
   );
   _(() => {
-    en({ annotations: t });
+    tn({ annotations: t });
   }, [t]);
-  const r = $((s, o) => {
+  const r = $((s, a) => {
     i(
-      (c) => c.map((u) => u.id === s ? { ...u, ...o } : u)
+      (c) => c.map((u) => u.id === s ? { ...u, ...a } : u)
     );
-  }, []), a = $((s) => {
-    i((o) => o.filter((c) => c.id !== s));
+  }, []), o = $((s) => {
+    i((a) => a.filter((c) => c.id !== s));
   }, []);
   return {
     annotations: t,
     setAnnotations: i,
     updateAnnotation: r,
-    removeAnnotation: a
+    removeAnnotation: o
   };
 }
-function Ar({
+function Sr({
   ui: e,
   hostTheme: t,
   onHostThemeChange: i
 }) {
-  const r = xe(
-    () => ({ ...tn, ...e }),
+  const r = Me(
+    () => ({ ...nn, ...e }),
     [e]
-  ), [a, s] = S(
+  ), [o, s] = A(
     () => t ?? it(r) ?? "dark"
-  ), [o, c] = S(!1), u = t ?? a;
+  ), [a, c] = A(!1), u = t ?? o;
   _(() => {
     if (t !== void 0) return;
     const v = () => {
-      const b = it(r);
-      b && s(b);
+      const y = it(r);
+      y && s(y);
     };
     v();
     const m = r.hostThemeAttribute, g = new MutationObserver(v);
@@ -2723,8 +2732,8 @@ function Ar({
       attributeFilter: [m]
     }), () => g.disconnect();
   }, [t, r]);
-  const l = xe(
-    () => nn(r, u),
+  const l = Me(
+    () => rn(r, u),
     [r, u]
   ), f = $(() => {
     const v = u === "dark" ? "light" : "dark";
@@ -2732,7 +2741,7 @@ function Ar({
       i(v);
       return;
     }
-    s(v), rn(v, r);
+    s(v), on(v, r);
   }, [u, i, r]), p = $(() => {
     c((v) => !v);
   }, []);
@@ -2741,7 +2750,7 @@ function Ar({
     rootAttributes: an(l),
     hostTheme: u,
     toggleHostTheme: f,
-    settingsOpen: o,
+    settingsOpen: a,
     setSettingsOpen: c,
     toggleSettings: p,
     uiSettings: r
@@ -2750,7 +2759,7 @@ function Ar({
 const yt = "/__pixelagent/apply", wt = "pixelagent-runtime-styles";
 let xt = 0;
 const We = /* @__PURE__ */ new WeakMap();
-function Sr(e) {
+function Lr(e) {
   let t = We.get(e);
   if (t) return t;
   for (const i of Array.from(e.classList))
@@ -2758,17 +2767,17 @@ function Sr(e) {
       return We.set(e, i), i;
   return xt += 1, t = `pa-runtime-${xt}`, We.set(e, t), e.classList.add(t), t;
 }
-function Lr() {
+function $r() {
   let e = document.getElementById(wt);
   return e || (e = document.createElement("style"), e.id = wt, document.head.appendChild(e)), e;
 }
 function Er(e, t, i, r) {
-  const a = Lr(), s = e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(
+  const o = $r(), s = e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), a = new RegExp(
     `(\\.${s}:${t}\\s*\\{)([\\s\\S]*?)(\\})`,
     "m"
   ), c = `${i}: ${r} !important`;
-  let u = a.textContent ?? "";
-  const l = u.match(o);
+  let u = o.textContent ?? "";
+  const l = u.match(a);
   if (l) {
     const f = l[2], p = new RegExp(`(\\s*${i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*:\\s*)[^;]+;?`);
     let v;
@@ -2780,7 +2789,7 @@ function Er(e, t, i, r) {
   ${c};
 `;
     }
-    u = u.replace(o, `$1${v}$3`);
+    u = u.replace(a, `$1${v}$3`);
   } else
     u && !u.endsWith(`
 `) && (u += `
@@ -2789,287 +2798,287 @@ function Er(e, t, i, r) {
   ${c};
 }
 `;
-  a.textContent = u;
+  o.textContent = u;
 }
 function Nt(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 };
+  const t = Math.min(e.startX, e.currentX), i = Math.min(e.startY, e.currentY), r = Math.abs(e.currentX - e.startX), o = Math.abs(e.currentY - e.startY);
+  return { x: t, y: i, width: r, height: o };
 }
-function $r({
+function Ir({
   ui: e,
   hostTheme: t,
   onHostThemeChange: i,
   applyEndpoint: r,
-  onApply: a,
+  onApply: o,
   runtimeStateStyles: s
 } = {}) {
-  const o = Ar({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = S(null);
+  const a = Sr({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = A(null);
   _(() => {
-    if (r || a) return;
-    let y = !1;
-    return fetch(yt, { method: "GET" }).then((A) => {
-      !y && A.status === 405 && u(yt);
+    if (r || o) return;
+    let b = !1;
+    return fetch(yt, { method: "GET" }).then((M) => {
+      !b && M.status === 405 && u(yt);
     }).catch(() => {
     }), () => {
-      y = !0;
+      b = !0;
     };
-  }, [r, a]);
-  const [l, f] = S(!1), [p, v] = S("idle"), [m, g] = S("element"), {
-    annotations: b,
-    setAnnotations: E,
-    updateAnnotation: N,
-    removeAnnotation: w
-  } = Mr(), [k, I] = S(null), [P, R] = S(null), [x, T] = S([]), [C, h] = S(null), [F, W] = S(null), [ge, j] = S(!1), [oe, re] = S(!1), V = l && p === "annotate" && b.length > 0 && !ge, [G, ee] = S("this-instance"), [M, O] = S("normal"), [D, U] = S(null), [L, z] = S(null), [X, q] = S(null), Re = Y(null), Pe = Y(null), de = $(
-    (y, A) => {
-      Pe.current && clearTimeout(Pe.current), U(y), z((A == null ? void 0 : A.entryId) ?? null), q((A == null ? void 0 : A.copyAllFrom) ?? null), Pe.current = setTimeout(() => {
-        U(null), z(null), q(null);
+  }, [r, o]);
+  const [l, f] = A(!1), [p, v] = A("idle"), [m, g] = A("element"), {
+    annotations: y,
+    setAnnotations: S,
+    updateAnnotation: w,
+    removeAnnotation: k
+  } = Ar(), [N, E] = A(null), [z, R] = A(null), [x, I] = A([]), [L, h] = A(null), [F, U] = A(null), [ye, ee] = A(!1), [re, oe] = A(!1), W = l && p === "annotate" && y.length > 0 && !ye, [j, ie] = A("this-instance"), [ce, C] = A("normal"), [P, D] = A(null), [T, H] = A(null), [O, Y] = A(null), ae = X(null), G = X(null), K = $(
+    (b, M) => {
+      G.current && clearTimeout(G.current), D(b), H((M == null ? void 0 : M.entryId) ?? null), Y((M == null ? void 0 : M.copyAllFrom) ?? null), G.current = setTimeout(() => {
+        D(null), H(null), Y(null);
       }, 2500);
     },
     []
-  ), Ne = $(
-    async (y, A, J) => {
-      if (y)
+  ), he = $(
+    async (b, M, J) => {
+      if (b)
         try {
-          await St(y), de(A, J);
+          await St(b), K(M, J);
         } catch {
-          de("Copy failed — check clipboard permissions", J);
+          K("Copy failed — check clipboard permissions", J);
         }
     },
-    [de]
-  ), ve = $(
-    (y, A) => {
-      y.length === 0 && !A || (h({ elements: y, areaBbox: A }), R(y[0] ?? null));
+    [K]
+  ), we = $(
+    (b, M) => {
+      b.length === 0 && !M || (h({ elements: b, areaBbox: M }), R(b[0] ?? null));
     },
     []
   ), De = $(
-    (y) => {
-      if (!(!l || p !== "annotate" || Ee(y.target))) {
+    (b) => {
+      if (!(!l || p !== "annotate" || Ie(b.target))) {
         if (F) {
-          W(
-            (A) => A && { ...A, currentX: y.clientX, currentY: y.clientY }
+          U(
+            (M) => M && { ...M, currentX: b.clientX, currentY: b.clientY }
           );
           return;
         }
-        m !== "area" && I(vt(y.clientX, y.clientY));
+        m !== "area" && E(vt(b.clientX, b.clientY));
       }
     },
     [l, p, F, m]
   ), Oe = $(
-    (y) => {
-      !l || p !== "annotate" || Ee(y.target) || m !== "area" || y.button !== 0 || (y.preventDefault(), y.stopPropagation(), W({
-        startX: y.clientX,
-        startY: y.clientY,
-        currentX: y.clientX,
-        currentY: y.clientY
+    (b) => {
+      !l || p !== "annotate" || Ie(b.target) || m !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), U({
+        startX: b.clientX,
+        startY: b.clientY,
+        currentX: b.clientX,
+        currentY: b.clientY
       }), h(null));
     },
     [l, p, m]
   ), Fe = $(() => {
     if (!F) return;
-    const y = Nt(F);
-    if (W(null), y.width < 8 || y.height < 8) return;
-    const A = on(y, Ze);
-    ve(A, y);
-  }, [F, ve]), Be = $(
-    (y) => {
-      if (!l || p !== "annotate" || Ee(y.target) || m === "area") return;
-      y.preventDefault(), y.stopPropagation();
-      const A = vt(y.clientX, y.clientY);
-      if (!A) return;
-      if (y.shiftKey || m === "multi") {
-        T((te) => te.includes(A) ? te.filter((B) => B !== A) : [...te, A]), R(A);
+    const b = Nt(F);
+    if (U(null), b.width < 8 || b.height < 8) return;
+    const M = sn(b, Ze);
+    we(M, b);
+  }, [F, we]), Be = $(
+    (b) => {
+      if (!l || p !== "annotate" || Ie(b.target) || m === "area") return;
+      b.preventDefault(), b.stopPropagation();
+      const M = vt(b.clientX, b.clientY);
+      if (!M) return;
+      if (b.shiftKey || m === "multi") {
+        I((te) => te.includes(M) ? te.filter((B) => B !== M) : [...te, M]), R(M);
         return;
       }
-      const J = x.length > 0 ? x : [A];
-      ve(J.includes(A) ? J : [A]);
+      const J = x.length > 0 ? x : [M];
+      we(J.includes(M) ? J : [M]);
     },
-    [l, p, m, x, ve]
+    [l, p, m, x, we]
   );
   _(() => {
-    !P || G !== "all-instances" || Ct(P) <= 1 && ee("this-instance");
-  }, [P, G]), _(() => {
+    !z || j !== "all-instances" || Ct(z) <= 1 && ie("this-instance");
+  }, [z, j]), _(() => {
     if (l)
       return document.addEventListener("mousemove", De, !0), document.addEventListener("mousedown", Oe, !0), document.addEventListener("mouseup", Fe, !0), document.addEventListener("click", Be, !0), () => {
         document.removeEventListener("mousemove", De, !0), document.removeEventListener("mousedown", Oe, !0), document.removeEventListener("mouseup", Fe, !0), document.removeEventListener("click", Be, !0);
       };
   }, [l, De, Oe, Fe, Be]);
   const Vt = $(
-    (y, A) => {
-      if (!C || !y.trim()) return;
-      const { elements: J, areaBbox: te } = C;
+    (b, M) => {
+      if (!L || !b.trim()) return;
+      const { elements: J, areaBbox: te } = L;
       if (J.length === 0 && !te) return;
-      const be = cr({
+      const xe = dr({
         elements: J,
-        note: y,
+        note: b,
         areaBbox: te
       });
-      E((B) => [...B, be]), j(!1), re(!1), A ? (h(null), R(null)) : (h(null), R(null), T([]));
+      S((B) => [...B, xe]), ee(!1), oe(!1), M ? (h(null), R(null)) : (h(null), R(null), I([]));
     },
-    [C, E]
+    [L, S]
   ), Wt = $(() => {
     h(null), R(null);
   }, []), Qe = $(
-    async (y) => {
-      const A = sn(b);
-      await Ne(A, "Copied all!", { copyAllFrom: y });
+    async (b) => {
+      const M = ln(y);
+      await he(M, "Copied all!", { copyAllFrom: b });
     },
-    [b, Ne]
+    [y, he]
   ), Ut = $(
-    async (y) => {
-      const A = b.find((J) => J.id === y);
-      A && await Ne(ln(A), "Copied!", { entryId: y });
+    async (b) => {
+      const M = y.find((J) => J.id === b);
+      M && await he(cn(M), "Copied!", { entryId: b });
     },
-    [b, Ne]
+    [y, he]
   ), Yt = $(
-    async (y) => {
-      const A = [];
-      for (const [B, Z] of y)
-        for (const [se, ne] of Z)
-          ne.length > 0 && A.push([B, se, ne]);
-      if (A.length === 0) return { applied: !1 };
+    async (b) => {
+      const M = [];
+      for (const [B, Z] of b)
+        for (const [de, ne] of Z)
+          ne.length > 0 && M.push([B, de, ne]);
+      if (M.length === 0) return { applied: !1 };
       if (s) {
-        for (const [B, Z, se] of A) {
+        for (const [B, Z, de] of M) {
           if (Z === "normal") continue;
-          const ne = Sr(B);
-          for (const ye of se)
-            B.style.removeProperty(ye.property), Er(ne, Z, ye.property, ye.newValue);
+          const ne = Lr(B);
+          for (const Ne of de)
+            B.style.removeProperty(Ne.property), Er(ne, Z, Ne.property, Ne.newValue);
         }
-        for (const [B, Z, se] of A)
+        for (const [B, Z, de] of M)
           if (Z === "normal")
-            for (const ne of se)
+            for (const ne of de)
               B.style.setProperty(ne.property, ne.newValue);
-        return de("Change applied"), { applied: !0, skipRevert: !0 };
+        return K("Change applied"), { applied: !0, skipRevert: !0 };
       }
       const J = r ?? c ?? void 0, te = [];
-      for (const [B, Z, se] of A) {
-        const ne = Ge(B), ye = {
+      for (const [B, Z, de] of M) {
+        const ne = Ge(B), Ne = {
           schemaVersion: 1,
-          elementSelector: Mt(B, G),
+          elementSelector: Mt(B, j),
           sourceFile: ne.sourceFile,
           lineNumber: ne.lineNumber,
-          targetScope: G,
+          targetScope: j,
           state: Z,
           stylingSystem: kt(B),
-          changes: se
+          changes: de
         };
-        te.push(await Jn(ye, { applyEndpoint: J, onApply: a }));
+        te.push(await Zn(Ne, { applyEndpoint: J, onApply: o }));
       }
-      const be = te.every(
+      const xe = te.every(
         (B) => B.mode === "mcp" && B.result.success && B.result.linesChanged.length > 0
       );
-      return de(be ? "Change applied" : "Apply failed"), te.forEach((B, Z) => {
+      return K(xe ? "Change applied" : "Apply failed"), te.forEach((B, Z) => {
         B.mode === "error" ? console.error(`[pixelagent] Apply #${Z} failed:`, B.message) : B.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${Z} fell back to clipboard`) : B.mode === "mcp" && !B.result.success && console.warn(`[pixelagent] Apply #${Z} reported no changes:`, B.result);
-      }), { applied: be };
+      }), { applied: xe };
     },
-    [G, r, c, a, s, de]
-  ), et = (y) => {
-    o.setSettingsOpen(!1), f(!0), v(y), R(null), I(null), h(null), T([]), W(null), y === "annotate" && j(!1);
+    [j, r, c, o, s, K]
+  ), et = (b) => {
+    a.setSettingsOpen(!1), f(!0), v(b), R(null), E(null), h(null), I([]), U(null), b === "annotate" && ee(!1);
   }, Xt = () => {
-    f(!1), v("idle"), R(null), I(null), h(null), T([]), W(null), j(!1), re(!1);
+    f(!1), v("idle"), R(null), E(null), h(null), I([]), U(null), ee(!1), oe(!1);
   }, Gt = F ? Nt(F) : null;
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: Re,
+      ref: ae,
       className: "pa-root",
       "data-pixelagent-root": !0,
-      ...o.rootAttributes,
+      ...a.rootAttributes,
       children: [
         /* @__PURE__ */ n(
-          Cr,
+          Mr,
           {
-            rootAttributes: o.rootAttributes,
-            hostTheme: o.hostTheme,
-            chrome: o.chrome,
-            settingsOpen: o.settingsOpen,
-            onToggleSettings: o.toggleSettings,
-            onCloseSettings: () => o.setSettingsOpen(!1),
-            onToggleHostTheme: o.toggleHostTheme,
+            rootAttributes: a.rootAttributes,
+            hostTheme: a.hostTheme,
+            chrome: a.chrome,
+            settingsOpen: a.settingsOpen,
+            onToggleSettings: a.toggleSettings,
+            onCloseSettings: () => a.setSettingsOpen(!1),
+            onToggleHostTheme: a.toggleHostTheme,
             active: l,
             mode: p,
             captureMode: m,
-            annotationCount: b.length,
+            annotationCount: y.length,
             multiSelectCount: x.length,
-            copyStatus: D,
-            copyAllFrom: X,
+            copyStatus: P,
+            copyAllFrom: O,
             onActivateAnnotate: () => et("annotate"),
             onActivateEdit: () => et("edit"),
             onDeactivate: Xt,
             onCopyAll: () => Qe("toolbar"),
             onCaptureModeChange: g,
             onConfirmMultiSelect: () => {
-              x.length > 0 && ve(x);
+              x.length > 0 && we(x);
             }
           }
         ),
-        l && p === "annotate" && /* @__PURE__ */ d(K, { children: [
+        l && p === "annotate" && /* @__PURE__ */ d(q, { children: [
           /* @__PURE__ */ n(
-            $t,
+            Et,
             {
-              element: k,
-              selected: P,
+              element: N,
+              selected: z,
               multiSelected: x
             }
           ),
-          /* @__PURE__ */ n(hr, { annotations: b }),
-          /* @__PURE__ */ n(lr, { area: Gt, isDragging: !!F })
+          /* @__PURE__ */ n(fr, { annotations: y }),
+          /* @__PURE__ */ n(cr, { area: Gt, isDragging: !!F })
         ] }),
-        l && p === "annotate" && C && /* @__PURE__ */ n(
-          sr,
+        l && p === "annotate" && L && /* @__PURE__ */ n(
+          lr,
           {
-            elements: C.elements,
-            areaBbox: C.areaBbox,
+            elements: L.elements,
+            areaBbox: L.areaBbox,
             onSubmit: Vt,
             onCancel: Wt
           }
         ),
         l && p === "edit" && /* @__PURE__ */ n(
-          qn,
+          Jn,
           {
-            selectedElement: P,
-            hoveredElement: k,
+            selectedElement: z,
+            hoveredElement: N,
             onSelectElement: R,
-            onHoverElement: I,
-            targetScope: G,
-            onTargetScopeChange: ee,
-            elementState: M,
-            onElementStateChange: O,
+            onHoverElement: E,
+            targetScope: j,
+            onTargetScopeChange: ie,
+            elementState: ce,
+            onElementStateChange: C,
             onApply: Yt,
-            applyStatus: p === "edit" ? D : null,
-            isToolbarTarget: Ee
+            applyStatus: p === "edit" ? P : null,
+            isToolbarTarget: Ie
           }
         ),
-        V && /* @__PURE__ */ n(
-          fr,
+        W && /* @__PURE__ */ n(
+          mr,
           {
-            annotations: b,
-            collapsed: oe,
-            onToggleCollapsed: () => re((y) => !y),
+            annotations: y,
+            collapsed: re,
+            onToggleCollapsed: () => oe((b) => !b),
             onClose: () => {
-              j(!0), re(!1);
+              ee(!0), oe(!1);
             },
             onCopyAll: () => Qe("session"),
             onCopyOne: Ut,
-            onRemove: w,
-            onUpdate: N,
-            copyStatus: D,
-            copiedEntryId: L,
-            copyAllFrom: X
+            onRemove: k,
+            onUpdate: w,
+            copyStatus: P,
+            copiedEntryId: T,
+            copyAllFrom: O
           }
         )
       ]
     }
   );
 }
-function Ir() {
+function Rr() {
   return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function Or() {
-  return Ir() ? /* @__PURE__ */ n($r, {}) : null;
+function Fr() {
+  return Rr() ? /* @__PURE__ */ n(Ir, {}) : null;
 }
 export {
-  $r as PixelAgent,
-  Or as PixelAgentDev,
-  Ir as isDevEnvironment
+  Ir as PixelAgent,
+  Fr as PixelAgentDev,
+  Rr as isDevEnvironment
 };
 //# sourceMappingURL=pixelagent.js.map