pixelagent 0.1.4 → 0.1.6

package/dist/pixelagent.js

@@ -1,46 +1,46 @@
-import { jsxs as c, Fragment as Y, jsx as n } from "react/jsx-runtime";
-import { useState as A, useEffect as z, useRef as V, useMemo as ue, useLayoutEffect as $t, useCallback as E, useId as Pt } from "react";
-import { getElementDisplayLabel as Pe, captureTextSnapshot as Ye, captureInlineStyles as Xe, restoreInlineStyles as pe, restoreTextSnapshot as he, getPreviewTargets as we, clearTailwindStatePreview as me, applyTailwindStatePreview as Ee, setEditableTextPreview as Ge, getRelevantComputedStyles as fe, getEditableTextInfo as se, readReactSource as Oe, detectStylingSystem as dt, countElementInstances as ut, getScopeSelector as pt, getCssSelector as ht, getWindowSelectionText as mt, getNearestReactComponentName as Ot, getDomPath as Ft, resolveElementFromEntry as ft, getAnnotationSessionDisplay as Bt, loadAnnotationSession as zt, saveAnnotationSession as Ht, DEFAULT_PIXEL_AGENT_UI_SETTINGS as _t, readHostThemeFromDocument as Ke, resolvePixelAgentChrome as Vt, applyHostThemeToDocument as Ut, pixelAgentRootAttributes as Wt, copyToClipboard as Yt, getElementsInArea as Xt, formatAllAnnotations as Gt, formatAnnotation as Kt } from "@pixelagent/shared";
+import { jsxs as d, Fragment as Y, jsx as n } from "react/jsx-runtime";
+import { useState as A, useEffect as B, useRef as V, useMemo as ue, useLayoutEffect as Ht, useCallback as I, useId as _t } from "react";
+import { getElementDisplayLabel as $e, captureTextSnapshot as Ke, captureInlineStyles as je, restoreInlineStyles as he, restoreTextSnapshot as me, getPreviewTargets as xe, clearTailwindStatePreview as fe, applyTailwindStatePreview as Ie, setEditableTextPreview as qe, getRelevantComputedStyles as ge, getEditableTextInfo as oe, readReactSource as Fe, detectStylingSystem as mt, countElementInstances as ft, getScopeSelector as gt, getCssSelector as vt, copyToClipboard as bt, getWindowSelectionText as yt, getNearestReactComponentName as Vt, getDomPath as Ut, resolveElementFromEntry as wt, getAnnotationSessionDisplay as Wt, loadAnnotationSession as Yt, saveAnnotationSession as Xt, DEFAULT_PIXEL_AGENT_UI_SETTINGS as Gt, readHostThemeFromDocument as Je, resolvePixelAgentChrome as Kt, applyHostThemeToDocument as jt, pixelAgentRootAttributes as qt, getElementsInArea as Jt, formatAllAnnotations as Zt, formatAnnotation as Qt } from "@pixelagent/shared";
 export * from "@pixelagent/shared";
-import { createPortal as Fe } from "react-dom";
-function gt({
+import { createPortal as Be } from "react-dom";
+function xt({
   element: e,
   selected: t,
   multiSelected: i = [],
   primarySelected: r = null
 }) {
-  const [a, s] = A([]), o = r ?? t;
-  if (z(() => {
+  const [a, o] = A([]), s = r ?? t;
+  if (B(() => {
     const l = /* @__PURE__ */ new Map(), p = i.length > 0;
     e && !t && !p && l.set(e, !1), t && l.set(t, !0);
-    for (const f of i)
-      l.set(f, !0);
+    for (const g of i)
+      l.set(g, !0);
     if (l.size === 0) {
-      s([]);
+      o([]);
       return;
     }
     const m = () => {
-      s(
-        Array.from(l.entries()).map(([f, g]) => ({
-          rect: f.getBoundingClientRect(),
-          label: Pe(f),
-          isSelected: g,
-          isPrimary: o !== null && f === o
+      o(
+        Array.from(l.entries()).map(([g, f]) => ({
+          rect: g.getBoundingClientRect(),
+          label: $e(g),
+          isSelected: f,
+          isPrimary: s !== null && g === s
         }))
       );
     };
     m();
-    const b = Array.from(l.keys()).map((f) => {
-      const g = new ResizeObserver(m);
-      return g.observe(f), g;
+    const v = Array.from(l.keys()).map((g) => {
+      const f = new ResizeObserver(m);
+      return f.observe(g), f;
     });
     return window.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
-      for (const f of b) f.disconnect();
+      for (const g of v) g.disconnect();
       window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
     };
-  }, [e, t, i, o]), a.length === 0) return null;
-  const d = a.find((l) => l.isPrimary) ?? a.find((l) => l.isSelected) ?? a[0], u = a.filter((l) => l.isSelected).length;
-  return /* @__PURE__ */ c(Y, { children: [
+  }, [e, t, i, s]), a.length === 0) return null;
+  const u = a.find((l) => l.isPrimary) ?? a.find((l) => l.isSelected) ?? a[0], c = a.filter((l) => l.isSelected).length;
+  return /* @__PURE__ */ d(Y, { children: [
     a.map((l, p) => /* @__PURE__ */ n(
       "div",
       {
@@ -48,7 +48,7 @@ function gt({
           "pa-highlight",
           l.isSelected ? "pa-highlight-selected" : "",
           l.isPrimary ? "pa-highlight-primary" : "",
-          l.isSelected && !l.isPrimary && u > 1 ? "pa-highlight-scope" : ""
+          l.isSelected && !l.isPrimary && c > 1 ? "pa-highlight-scope" : ""
         ].filter(Boolean).join(" "),
         style: {
           top: l.rect.top,
@@ -64,49 +64,49 @@ function gt({
       {
         className: "pa-tooltip",
         style: {
-          top: Math.max(0, d.rect.top - 28),
-          left: d.rect.left
+          top: Math.max(0, u.rect.top - 28),
+          left: u.rect.left
         },
-        children: u > 1 ? `${u} instances · ${d.label}` : d.label
+        children: c > 1 ? `${c} instances · ${u.label}` : u.label
       }
     )
   ] });
 }
-const vt = 0.35, jt = 0.48;
-function qt(e, t, i, r = vt) {
+const Nt = 0.35, en = 0.48;
+function tn(e, t, i, r = Nt) {
   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)), d = document.createElement("canvas");
-  d.width = s, d.height = o;
-  const u = d.getContext("2d");
-  if (!u) return null;
-  const l = u.createImageData(s, o), p = l.data, m = Math.min(0.5, i / Math.min(e, t)), b = 0.3, f = 0.2, g = Math.max(0.4, m + 0.1);
-  let v = 0;
-  const C = new Float32Array(s * o * 2);
-  let w = 0;
-  for (let N = 0; N < o; N++)
-    for (let I = 0; I < s; I++) {
-      const T = I / s - 0.5, R = N / o - 0.5, k = Jt(T, R, b, f, g), D = je(0.8, 0, k - 0.15), S = je(0, 1, D), h = (T * S + 0.5) * s - I, P = (R * S + 0.5) * o - N;
-      Math.abs(h) > v && (v = Math.abs(h)), Math.abs(P) > v && (v = Math.abs(P)), C[w++] = h, C[w++] = P;
+  const a = 1, o = Math.max(1, Math.round(e * a)), s = Math.max(1, Math.round(t * a)), u = document.createElement("canvas");
+  u.width = o, u.height = s;
+  const c = u.getContext("2d");
+  if (!c) return null;
+  const l = c.createImageData(o, s), p = l.data, m = Math.min(0.5, i / Math.min(e, t)), v = 0.3, g = 0.2, f = Math.max(0.4, m + 0.1);
+  let b = 0;
+  const E = new Float32Array(o * s * 2);
+  let k = 0;
+  for (let x = 0; x < s; x++)
+    for (let L = 0; L < o; L++) {
+      const P = L / o - 0.5, R = x / s - 0.5, N = nn(P, R, v, g, f), T = Ze(0.8, 0, N - 0.15), C = Ze(0, 1, T), h = (P * C + 0.5) * o - L, O = (R * C + 0.5) * s - x;
+      Math.abs(h) > b && (b = Math.abs(h)), Math.abs(O) > b && (b = Math.abs(O)), E[k++] = h, E[k++] = O;
     }
-  if (v === 0) return null;
-  v *= 0.4 * r;
-  let y = 0;
-  for (let N = 0; N < p.length; N += 4) {
-    const I = C[y++] / v + 0.5, T = C[y++] / v + 0.5;
-    p[N] = I * 255, p[N + 1] = T * 255, p[N + 2] = 0, p[N + 3] = 255;
+  if (b === 0) return null;
+  b *= 0.4 * r;
+  let w = 0;
+  for (let x = 0; x < p.length; x += 4) {
+    const L = E[w++] / b + 0.5, P = E[w++] / b + 0.5;
+    p[x] = L * 255, p[x + 1] = P * 255, p[x + 2] = 0, p[x + 3] = 255;
   }
-  return u.putImageData(l, 0, 0), {
-    href: d.toDataURL("image/png"),
-    scale: v / a,
-    width: s,
-    height: o
+  return c.putImageData(l, 0, 0), {
+    href: u.toDataURL("image/png"),
+    scale: b / a,
+    width: o,
+    height: s
   };
 }
-function Jt(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 nn(e, t, i, r, a) {
+  const o = Math.abs(e) - i + a, s = Math.abs(t) - r + a;
+  return Math.min(Math.max(o, s), 0) + Math.hypot(Math.max(o, 0), Math.max(s, 0)) - a;
 }
-function je(e, t, i) {
+function Ze(e, t, i) {
   const r = Math.max(0, Math.min(1, (i - e) / (t - e)));
   return r * r * (3 - 2 * r);
 }
@@ -115,48 +115,48 @@ function De() {
   const e = navigator.userAgent;
   return !(/AppleWebKit/i.test(e) && !/Chrome|Chromium|Edg|OPR|CriOS|FxiOS/i.test(e) || /Firefox/i.test(e));
 }
-const Zt = {
+const rn = {
   default: "blur(4px) saturate(130%)",
   /** Toolbar — slightly stronger frost + refraction chain. */
   enhanced: "blur(6px) saturate(138%)"
 };
-function Qt(e, t = "default") {
-  const i = Zt[t], a = e !== null && De() ? `${i} url(#${e})` : i;
+function an(e, t = "default") {
+  const i = rn[t], a = e !== null && De() ? `${i} url(#${e})` : i;
   return {
     backdropFilter: a,
     WebkitBackdropFilter: a
   };
 }
-let en = 0;
-function bt({
+let on = 0;
+function kt({
   shape: e = "rect",
   cornerRadius: t,
   tint: i = "neutral",
   intensity: r = "default",
   className: a = "",
-  style: s,
-  children: o
+  style: o,
+  children: s
 }) {
-  const d = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? jt : vt, l = V(null), p = ue(() => `pa-lg-${++en}`, []), [m, b] = A(null);
-  $t(() => {
-    const g = l.current;
-    if (!g) return;
-    let v = 0;
-    const C = () => {
-      cancelAnimationFrame(v), v = requestAnimationFrame(() => {
-        const y = g.getBoundingClientRect(), N = Math.round(y.width), I = Math.round(y.height);
-        if (N < 8 || I < 8) return;
-        const T = e === "capsule" ? I / 2 : Math.min(d, N / 2, I / 2), R = qt(N, I, T, u);
-        R && b(R);
+  const u = t ?? (e === "capsule" ? 9999 : 20), c = r === "enhanced" ? en : Nt, l = V(null), p = ue(() => `pa-lg-${++on}`, []), [m, v] = A(null);
+  Ht(() => {
+    const f = l.current;
+    if (!f) return;
+    let b = 0;
+    const E = () => {
+      cancelAnimationFrame(b), b = requestAnimationFrame(() => {
+        const w = f.getBoundingClientRect(), x = Math.round(w.width), L = Math.round(w.height);
+        if (x < 8 || L < 8) return;
+        const P = e === "capsule" ? L / 2 : Math.min(u, x / 2, L / 2), R = tn(x, L, P, c);
+        R && v(R);
       });
     };
-    C();
-    const w = new ResizeObserver(C);
-    return w.observe(g), () => {
-      cancelAnimationFrame(v), w.disconnect();
+    E();
+    const k = new ResizeObserver(E);
+    return k.observe(f), () => {
+      cancelAnimationFrame(b), k.disconnect();
     };
-  }, [e, d, u]);
-  const f = m && De() && typeof document < "u" ? Fe(
+  }, [e, u, c]);
+  const g = m && De() && typeof document < "u" ? Be(
     /* @__PURE__ */ n(
       "svg",
       {
@@ -172,7 +172,7 @@ function bt({
           overflow: "hidden",
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ c(
+        children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ d(
           "filter",
           {
             id: p,
@@ -211,31 +211,31 @@ function bt({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ c(Y, { children: [
-    f,
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(Y, { children: [
+    g,
+    /* @__PURE__ */ d(
       "div",
       {
         ref: l,
         className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${i} ${a}`.trim(),
         style: {
-          borderRadius: e === "capsule" ? "999px" : `${d}px`,
-          ...Qt(
+          borderRadius: e === "capsule" ? "999px" : `${u}px`,
+          ...an(
             m && De() ? p : null,
             r
           ),
-          ...s
+          ...o
         },
         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: s })
         ]
       }
     )
   ] });
 }
-function B({
+function H({
   variant: e = "regular",
   className: t = "",
   children: i,
@@ -251,7 +251,7 @@ function B({
     }
   );
 }
-function Ne({
+function ke({
   variant: e = "sheet",
   side: t = "left",
   className: i = "",
@@ -259,7 +259,7 @@ function Ne({
   children: a
 }) {
   return /* @__PURE__ */ n(
-    bt,
+    kt,
     {
       shape: "rect",
       cornerRadius: e === "popover" ? 16 : 20,
@@ -269,69 +269,69 @@ function Ne({
     }
   );
 }
-function yt({
+function Ct({
   defaultPosition: e = null,
   computeDefaultPosition: t
 } = {}) {
-  const [i, r] = A(e), [a, s] = A(!1), o = V(null), d = V(null), u = E(() => {
+  const [i, r] = A(e), [a, o] = A(!1), s = V(null), u = V(null), c = I(() => {
     if (i !== null) return;
-    const f = d.current;
-    if (!f) return;
-    const g = f.getBoundingClientRect();
+    const g = u.current;
+    if (!g) return;
+    const f = g.getBoundingClientRect();
     r(
-      t ? t(g) : {
-        x: (window.innerWidth - g.width) / 2,
-        y: window.innerHeight - g.height - 24
+      t ? t(f) : {
+        x: (window.innerWidth - f.width) / 2,
+        y: window.innerHeight - f.height - 24
       }
     );
   }, [i, t]);
-  z(() => {
-    u();
-  }, [u]), z(() => {
-    const f = () => {
-      r((g) => {
-        if (!g || !d.current) return g;
-        const v = d.current.getBoundingClientRect();
+  B(() => {
+    c();
+  }, [c]), B(() => {
+    const g = () => {
+      r((f) => {
+        if (!f || !u.current) return f;
+        const b = u.current.getBoundingClientRect();
         return {
-          x: Math.min(g.x, window.innerWidth - v.width),
-          y: Math.min(g.y, window.innerHeight - v.height)
+          x: Math.min(f.x, window.innerWidth - b.width),
+          y: Math.min(f.y, window.innerHeight - b.height)
         };
       });
     };
-    return window.addEventListener("resize", f), () => window.removeEventListener("resize", f);
+    return window.addEventListener("resize", g), () => window.removeEventListener("resize", g);
   }, []);
-  const l = E(
-    (f) => {
-      if (f.button !== 0) return;
-      const g = d.current;
-      if (!g) return;
-      let v = i;
-      if (!v) {
-        const C = g.getBoundingClientRect();
-        v = { x: C.left, y: C.top }, r(v);
+  const l = I(
+    (g) => {
+      if (g.button !== 0) return;
+      const f = u.current;
+      if (!f) return;
+      let b = i;
+      if (!b) {
+        const E = f.getBoundingClientRect();
+        b = { x: E.left, y: E.top }, r(b);
       }
-      o.current = {
-        pointerId: f.pointerId,
-        startX: f.clientX,
-        startY: f.clientY,
-        originX: v.x,
-        originY: v.y
-      }, s(!0), f.currentTarget.setPointerCapture(f.pointerId), f.preventDefault();
+      s.current = {
+        pointerId: g.pointerId,
+        startX: g.clientX,
+        startY: g.clientY,
+        originX: b.x,
+        originY: b.y
+      }, o(!0), g.currentTarget.setPointerCapture(g.pointerId), g.preventDefault();
     },
     [i]
-  ), p = E((f) => {
-    if (!o.current || o.current.pointerId !== f.pointerId) return;
-    const g = d.current, v = (g == null ? void 0 : g.offsetWidth) ?? 320, C = (g == null ? void 0 : g.offsetHeight) ?? 48, w = f.clientX - o.current.startX, y = f.clientY - o.current.startY, N = Math.max(8, Math.min(window.innerWidth - v - 8, o.current.originX + w)), I = Math.max(8, Math.min(window.innerHeight - C - 8, o.current.originY + y));
-    r({ x: N, y: I });
-  }, []), m = E((f) => {
-    if (!(!o.current || o.current.pointerId !== f.pointerId)) {
-      o.current = null, s(!1);
+  ), p = I((g) => {
+    if (!s.current || s.current.pointerId !== g.pointerId) return;
+    const f = u.current, b = (f == null ? void 0 : f.offsetWidth) ?? 320, E = (f == null ? void 0 : f.offsetHeight) ?? 48, k = g.clientX - s.current.startX, w = g.clientY - s.current.startY, x = Math.max(8, Math.min(window.innerWidth - b - 8, s.current.originX + k)), L = Math.max(8, Math.min(window.innerHeight - E - 8, s.current.originY + w));
+    r({ x, y: L });
+  }, []), m = I((g) => {
+    if (!(!s.current || s.current.pointerId !== g.pointerId)) {
+      s.current = null, o(!1);
       try {
-        f.currentTarget.releasePointerCapture(f.pointerId);
+        g.currentTarget.releasePointerCapture(g.pointerId);
       } catch {
       }
     }
-  }, []), b = i !== null ? {
+  }, []), v = i !== null ? {
     position: "fixed",
     left: i.x,
     top: i.y,
@@ -340,10 +340,10 @@ function yt({
     bottom: "auto"
   } : void 0;
   return {
-    elementRef: d,
+    elementRef: u,
     position: i,
     isDragging: a,
-    style: b,
+    style: v,
     dragHandleProps: {
       onPointerDown: l,
       onPointerMove: p,
@@ -352,8 +352,8 @@ function yt({
     }
   };
 }
-function tn({ className: e }) {
-  return /* @__PURE__ */ c("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+function sn({ 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,8 +378,8 @@ function tn({ className: e }) {
     )
   ] });
 }
-function nn({ className: e }) {
-  return /* @__PURE__ */ c("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+function ln({ className: e }) {
+  return /* @__PURE__ */ d("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
       {
@@ -404,8 +404,8 @@ function nn({ className: e }) {
     )
   ] });
 }
-const le = (e, t, i) => Math.min(i, Math.max(t, e));
-function Be(e) {
+const se = (e, t, i) => Math.min(i, Math.max(t, e));
+function ze(e) {
   const t = e.trim();
   if (!t) return null;
   const i = t.match(/^#([0-9a-f]{6})$/i);
@@ -417,167 +417,167 @@ function Be(e) {
     };
   const r = t.match(/^#([0-9a-f]{3})$/i);
   if (r) {
-    const [s, o, d] = r[1].split("");
+    const [o, s, u] = r[1].split("");
     return {
-      r: parseInt(s + s, 16),
-      g: parseInt(o + o, 16),
-      b: parseInt(d + d, 16)
+      r: parseInt(o + o, 16),
+      g: parseInt(s + s, 16),
+      b: parseInt(u + u, 16)
     };
   }
   const a = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
   return a ? {
-    r: le(parseInt(a[1], 10), 0, 255),
-    g: le(parseInt(a[2], 10), 0, 255),
-    b: le(parseInt(a[3], 10), 0, 255)
+    r: se(parseInt(a[1], 10), 0, 255),
+    g: se(parseInt(a[2], 10), 0, 255),
+    b: se(parseInt(a[3], 10), 0, 255)
   } : null;
 }
-function wt(e) {
-  const t = (i) => le(Math.round(i), 0, 255).toString(16).padStart(2, "0");
+function At(e) {
+  const t = (i) => se(Math.round(i), 0, 255).toString(16).padStart(2, "0");
   return `#${t(e.r)}${t(e.g)}${t(e.b)}`;
 }
-function rn(e) {
+function cn(e) {
   return `rgb(${e.r}, ${e.g}, ${e.b})`;
 }
-function xt({ r: e, g: t, b: i }) {
-  const r = e / 255, a = t / 255, s = i / 255, o = Math.max(r, a, s), d = Math.min(r, a, s), u = o - d;
+function Mt({ r: e, g: t, b: i }) {
+  const r = e / 255, a = t / 255, o = i / 255, s = Math.max(r, a, o), u = Math.min(r, a, o), c = s - u;
   let l = 0;
-  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 p = o === 0 ? 0 : u / o * 100, m = o * 100;
+  c !== 0 && (s === r ? l = (a - o) / c % 6 : s === a ? l = (o - r) / c + 2 : l = (r - a) / c + 4, l *= 60, l < 0 && (l += 360));
+  const p = s === 0 ? 0 : c / s * 100, m = s * 100;
   return { h: l, s: p, v: m };
 }
-function Nt({ h: e, s: t, v: i }) {
-  const r = le(t, 0, 100) / 100, a = le(i, 0, 100) / 100, s = a * r, o = s * (1 - Math.abs(e / 60 % 2 - 1)), d = a - s;
-  let u = 0, l = 0, p = 0;
+function St({ h: e, s: t, v: i }) {
+  const r = se(t, 0, 100) / 100, a = se(i, 0, 100) / 100, o = a * r, s = o * (1 - Math.abs(e / 60 % 2 - 1)), u = a - o;
+  let c = 0, l = 0, p = 0;
   const m = (e % 360 + 360) % 360;
-  return m < 60 ? (u = s, l = o) : m < 120 ? (u = o, l = s) : m < 180 ? (l = s, p = o) : m < 240 ? (l = o, p = s) : m < 300 ? (u = o, p = s) : (u = s, p = o), {
-    r: Math.round((u + d) * 255),
-    g: Math.round((l + d) * 255),
-    b: Math.round((p + d) * 255)
+  return m < 60 ? (c = o, l = s) : m < 120 ? (c = s, l = o) : m < 180 ? (l = o, p = s) : m < 240 ? (l = s, p = o) : m < 300 ? (c = s, p = o) : (c = o, p = s), {
+    r: Math.round((c + u) * 255),
+    g: Math.round((l + u) * 255),
+    b: Math.round((p + u) * 255)
   };
 }
-function qe(e) {
-  const t = Be(e);
-  return t ? xt(t) : { h: 0, s: 0, v: 45 };
+function Qe(e) {
+  const t = ze(e);
+  return t ? Mt(t) : { h: 0, s: 0, v: 45 };
 }
-function an(e) {
+function dn(e) {
   return e.replace(/^#/, "").toUpperCase().slice(0, 6);
 }
-function on(e, t) {
+function un(e, t) {
   const i = e.replace(/[^0-9a-f]/gi, "").slice(0, 6);
-  return i.length < 6 ? t : Be(`#${i}`) ?? t;
+  return i.length < 6 ? t : ze(`#${i}`) ?? t;
 }
-function sn(e) {
-  return wt(Nt(e));
+function pn(e) {
+  return At(St(e));
 }
-function ln(e, t, i) {
-  const r = Je((e - i.left) / i.width), a = Je((t - i.top) / i.height);
+function hn(e, t, i) {
+  const r = et((e - i.left) / i.width), a = et((t - i.top) / i.height);
   return { x: r * 100, y: a * 100 };
 }
-function Je(e) {
+function et(e) {
   return Math.min(1, Math.max(0, e));
 }
-function cn() {
+function mn() {
   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 Ie({ label: e, value: t, onChange: i }) {
-  const [r, a] = A(!1), [s, o] = A(() => qe(t)), d = V(null), u = V(null), l = V(null), p = Pt(), [m, b] = A({ top: 0, left: 0, width: 260 }), f = Nt(s), g = an(wt(f)), v = Be(t) ? t : rn(f), C = e.toLowerCase().includes("color") ? e : `${e} color`;
-  z(() => {
-    o(qe(t));
+function Te({ label: e, value: t, onChange: i }) {
+  const [r, a] = A(!1), [o, s] = A(() => Qe(t)), u = V(null), c = V(null), l = V(null), p = _t(), [m, v] = A({ top: 0, left: 0, width: 260 }), g = St(o), f = dn(At(g)), b = ze(t) ? t : cn(g), E = e.toLowerCase().includes("color") ? e : `${e} color`;
+  B(() => {
+    s(Qe(t));
   }, [t]);
-  const w = E(
-    (k) => {
-      o(k), i(sn(k));
+  const k = I(
+    (N) => {
+      s(N), i(pn(N));
     },
     [i]
-  ), y = E(
-    (k) => {
-      w(xt(k));
+  ), w = I(
+    (N) => {
+      k(Mt(N));
     },
-    [w]
-  ), N = E(() => {
-    const k = d.current;
-    if (!k) return;
-    const D = k.getBoundingClientRect(), S = 260;
-    let h = D.left;
-    h + S > window.innerWidth - 12 && (h = window.innerWidth - S - 12), h = Math.max(12, h);
-    let P = D.bottom + 8;
+    [k]
+  ), x = I(() => {
+    const N = u.current;
+    if (!N) return;
+    const T = N.getBoundingClientRect(), C = 260;
+    let h = T.left;
+    h + C > window.innerWidth - 12 && (h = window.innerWidth - C - 12), h = Math.max(12, h);
+    let O = T.bottom + 8;
     const U = 320;
-    P + U > window.innerHeight - 12 && (P = Math.max(12, D.top - U - 8)), b({ top: P, left: h, width: S });
+    O + U > window.innerHeight - 12 && (O = Math.max(12, T.top - U - 8)), v({ top: O, left: h, width: C });
   }, []);
-  z(() => {
+  B(() => {
     if (!r) return;
-    N();
-    const k = (S) => {
-      var P, U;
-      const h = S.target;
-      (P = d.current) != null && P.contains(h) || (U = u.current) != null && U.contains(h) || a(!1);
-    }, D = (S) => {
-      S.key === "Escape" && a(!1);
+    x();
+    const N = (C) => {
+      var O, U;
+      const h = C.target;
+      (O = u.current) != null && O.contains(h) || (U = c.current) != null && U.contains(h) || a(!1);
+    }, T = (C) => {
+      C.key === "Escape" && a(!1);
     };
-    return window.addEventListener("mousedown", k, !0), window.addEventListener("keydown", D), window.addEventListener("resize", N), window.addEventListener("scroll", N, !0), () => {
-      window.removeEventListener("mousedown", k, !0), window.removeEventListener("keydown", D), window.removeEventListener("resize", N), window.removeEventListener("scroll", N, !0);
+    return window.addEventListener("mousedown", N, !0), window.addEventListener("keydown", T), window.addEventListener("resize", x), window.addEventListener("scroll", x, !0), () => {
+      window.removeEventListener("mousedown", N, !0), window.removeEventListener("keydown", T), window.removeEventListener("resize", x), window.removeEventListener("scroll", x, !0);
     };
-  }, [r, N]);
-  const I = (k, D) => {
+  }, [r, x]);
+  const L = (N, T) => {
     var U;
-    const S = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
-    if (!S) return;
-    const { x: h, y: P } = ln(k, D, S);
-    w({ ...s, s: h, v: 100 - P });
-  }, T = (k) => {
-    k.preventDefault(), I(k.clientX, k.clientY);
-    const D = (h) => I(h.clientX, h.clientY), S = () => {
-      window.removeEventListener("mousemove", D), window.removeEventListener("mouseup", S);
+    const C = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
+    if (!C) return;
+    const { x: h, y: O } = hn(N, T, C);
+    k({ ...o, s: h, v: 100 - O });
+  }, P = (N) => {
+    N.preventDefault(), L(N.clientX, N.clientY);
+    const T = (h) => L(h.clientX, h.clientY), C = () => {
+      window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", C);
     };
-    window.addEventListener("mousemove", D), window.addEventListener("mouseup", S);
-  }, R = r ? Fe(
+    window.addEventListener("mousemove", T), window.addEventListener("mouseup", C);
+  }, R = r ? Be(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal pa-color-picker-portal",
         "data-pixelagent-picker-portal": !0,
-        ...cn(),
-        children: /* @__PURE__ */ c(
+        ...mn(),
+        children: /* @__PURE__ */ d(
           "div",
           {
-            ref: u,
+            ref: c,
             id: p,
             role: "dialog",
-            "aria-label": C,
+            "aria-label": E,
             className: "pa-color-picker",
             style: { top: m.top, left: m.left, width: m.width },
             children: [
-              /* @__PURE__ */ c("header", { className: "pa-color-picker-header", children: [
+              /* @__PURE__ */ d("header", { className: "pa-color-picker-header", children: [
                 /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-color-picker-preview",
-                    style: { backgroundColor: v },
+                    style: { backgroundColor: b },
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: C })
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: E })
               ] }),
               /* @__PURE__ */ n(
                 "div",
                 {
                   ref: l,
                   className: "pa-color-picker-sb",
-                  style: { "--pa-picker-h": String(Math.round(s.h)) },
-                  onMouseDown: T,
+                  style: { "--pa-picker-h": String(Math.round(o.h)) },
+                  onMouseDown: P,
                   children: /* @__PURE__ */ n(
                     "span",
                     {
                       className: "pa-color-picker-sb-thumb",
-                      style: { left: `${s.s}%`, top: `${100 - s.v}%` },
+                      style: { left: `${o.s}%`, top: `${100 - o.v}%` },
                       "aria-hidden": "true"
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ c("div", { className: "pa-color-picker-hue", children: [
+              /* @__PURE__ */ d("div", { className: "pa-color-picker-hue", children: [
                 /* @__PURE__ */ n(
                   "input",
                   {
@@ -585,35 +585,35 @@ function Ie({ label: e, value: t, onChange: i }) {
                     className: "pa-color-picker-hue-input",
                     min: 0,
                     max: 360,
-                    value: Math.round(s.h),
+                    value: Math.round(o.h),
                     "aria-label": "Hue",
-                    onChange: (k) => w({ ...s, h: parseFloat(k.target.value) })
+                    onChange: (N) => k({ ...o, h: parseFloat(N.target.value) })
                   }
                 ),
                 /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-color-picker-hue-thumb",
-                    style: { left: `${s.h / 360 * 100}%` },
+                    style: { left: `${o.h / 360 * 100}%` },
                     "aria-hidden": "true"
                   }
                 )
               ] }),
-              /* @__PURE__ */ c("label", { className: "pa-color-picker-field", children: [
+              /* @__PURE__ */ d("label", { className: "pa-color-picker-field", children: [
                 /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: "Hex" }),
                 /* @__PURE__ */ n(
                   "input",
                   {
                     className: "pa-input pa-color-picker-input",
                     type: "text",
-                    value: g,
+                    value: f,
                     spellCheck: !1,
-                    onChange: (k) => y(on(k.target.value, f))
+                    onChange: (N) => w(un(N.target.value, g))
                   }
                 )
               ] }),
-              /* @__PURE__ */ n("div", { className: "pa-color-picker-rgb", children: ["r", "g", "b"].map((k) => /* @__PURE__ */ c("label", { className: "pa-color-picker-field pa-color-picker-field--rgb", children: [
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: k.toUpperCase() }),
+              /* @__PURE__ */ n("div", { className: "pa-color-picker-rgb", children: ["r", "g", "b"].map((N) => /* @__PURE__ */ d("label", { className: "pa-color-picker-field pa-color-picker-field--rgb", children: [
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: N.toUpperCase() }),
                 /* @__PURE__ */ n(
                   "input",
                   {
@@ -621,14 +621,14 @@ function Ie({ label: e, value: t, onChange: i }) {
                     type: "number",
                     min: 0,
                     max: 255,
-                    value: f[k],
-                    onChange: (D) => {
-                      const S = dn(parseInt(D.target.value, 10));
-                      y({ ...f, [k]: S });
+                    value: g[N],
+                    onChange: (T) => {
+                      const C = fn(parseInt(T.target.value, 10));
+                      w({ ...g, [N]: C });
                     }
                   }
                 )
-              ] }, k)) })
+              ] }, N)) })
             ]
           }
         )
@@ -636,22 +636,22 @@ function Ie({ label: e, value: t, onChange: i }) {
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ c("div", { className: "pa-color-field", children: [
+  return /* @__PURE__ */ d("div", { className: "pa-color-field", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: e }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ d(
       "button",
       {
-        ref: d,
+        ref: u,
         type: "button",
         className: "pa-color-field-trigger",
         "aria-expanded": r,
         "aria-haspopup": "dialog",
         "aria-controls": r ? p : void 0,
         onClick: () => {
-          r || N(), a((k) => !k);
+          r || x(), a((N) => !N);
         },
         children: [
-          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: v }, "aria-hidden": "true" }),
+          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: b }, "aria-hidden": "true" }),
           /* @__PURE__ */ n(
             "input",
             {
@@ -669,19 +669,19 @@ function Ie({ label: e, value: t, onChange: i }) {
     R
   ] });
 }
-function dn(e) {
+function fn(e) {
   return Number.isFinite(e) ? Math.min(255, Math.max(0, e)) : 0;
 }
-function ie({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
-  const [a, s] = A(i);
-  return /* @__PURE__ */ c("section", { className: `pa-edit-section ${a ? "pa-edit-section--open" : ""}`, children: [
-    /* @__PURE__ */ c(
+function re({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
+  const [a, o] = A(i);
+  return /* @__PURE__ */ d("section", { className: `pa-edit-section ${a ? "pa-edit-section--open" : ""}`, children: [
+    /* @__PURE__ */ d(
       "button",
       {
         type: "button",
         className: "pa-edit-section-header",
         "aria-expanded": a,
-        onClick: () => s((o) => !o),
+        onClick: () => o((s) => !s),
         children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-section-title", children: e }),
           r ? /* @__PURE__ */ n("span", { className: "pa-edit-section-badge", children: r }) : null,
@@ -692,7 +692,7 @@ function ie({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
     a ? /* @__PURE__ */ n("div", { className: "pa-edit-section-body", children: t }) : null
   ] });
 }
-const ae = [
+const ie = [
   { value: "Inter, system-ui, sans-serif", label: "Inter" },
   { value: "system-ui, sans-serif", label: "System UI" },
   {
@@ -705,64 +705,64 @@ const ae = [
   { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
   { value: '"JetBrains Mono", ui-monospace, monospace', label: "JetBrains Mono" },
   { value: "ui-monospace, monospace", label: "Monospace" }
-], xe = "";
-function ge(e) {
+], Ne = "";
+function ve(e) {
   var i;
   return (((i = e.split(",")[0]) == null ? void 0 : i.trim()) ?? "").replace(/^["']|["']$/g, "");
 }
-function un(e) {
+function gn(e) {
   const t = e.trim();
   if (!t)
     return {
-      selectValue: xe,
-      options: ae
+      selectValue: Ne,
+      options: ie
     };
-  const i = ge(t).toLowerCase(), r = ae.find(
-    (s) => s.value === t || ge(s.value).toLowerCase() === i
+  const i = ve(t).toLowerCase(), r = ie.find(
+    (o) => o.value === t || ve(o.value).toLowerCase() === i
   );
   if (r)
-    return { selectValue: r.value, options: ae };
-  const a = ae.find((s) => {
-    const o = ge(s.value).toLowerCase();
-    return t.toLowerCase().includes(o) || o.includes(i);
+    return { selectValue: r.value, options: ie };
+  const a = ie.find((o) => {
+    const s = ve(o.value).toLowerCase();
+    return t.toLowerCase().includes(s) || s.includes(i);
   });
-  return a ? { selectValue: a.value, options: ae } : {
+  return a ? { selectValue: a.value, options: ie } : {
     selectValue: t,
     options: [
-      ...ae,
-      { value: t, label: ge(t) || "Custom" }
+      ...ie,
+      { value: t, label: ve(t) || "Custom" }
     ]
   };
 }
-function pn({ value: e, onChange: t }) {
+function vn({ value: e, onChange: t }) {
   const { selectValue: i, options: r } = ue(
-    () => un(e),
+    () => gn(e),
     [e]
   );
-  return /* @__PURE__ */ c("label", { className: "pa-edit-stack-field", children: [
+  return /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Font family" }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ d(
       "select",
       {
         className: "pa-select pa-font-family-select",
-        value: i || xe,
+        value: i || Ne,
         onChange: (a) => {
-          const s = a.target.value;
-          s && s !== xe && t(s);
+          const o = a.target.value;
+          o && o !== Ne && t(o);
         },
         children: [
-          /* @__PURE__ */ n("option", { value: xe, disabled: !0, children: "Select font style" }),
+          /* @__PURE__ */ n("option", { value: Ne, disabled: !0, children: "Select font style" }),
           r.map((a) => /* @__PURE__ */ n("option", { value: a.value, children: a.label }, a.value))
         ]
       }
     )
   ] });
 }
-function ze(e) {
+function He(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? parseFloat(t[1]) : null;
 }
-function hn(e) {
+function bn(e) {
   const t = e.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
@@ -772,21 +772,21 @@ function hn(e) {
   const i = parseFloat(t);
   return Number.isFinite(i) && i >= 0 && i <= 1 ? i : null;
 }
-function mn(e) {
-  const t = kt(e);
+function yn(e) {
+  const t = Lt(e);
   if (t !== null) return t > 0;
-  const i = ze(e);
+  const i = He(e);
   return i !== null && i > 0;
 }
-function kt(e) {
+function Lt(e) {
   const t = e.trim().split(/\s+/).filter(Boolean);
   if (t.length === 0) return null;
-  const i = t.map((a) => ze(a));
+  const i = t.map((a) => He(a));
   if (i.some((a) => a === null)) return null;
   const r = i[0];
   return i.every((a) => a === r) ? r : null;
 }
-const fn = {
+const wn = {
   padding: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   margin: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   width: { kind: "text" },
@@ -800,19 +800,19 @@ const fn = {
   "border-radius": { kind: "px", min: 0, max: 48, step: 1 },
   opacity: { kind: "opacity", min: 0, max: 1, step: 0.01 }
 };
-function gn(e, t, i) {
+function xn(e, t, i) {
   switch (i.kind) {
     case "opacity":
-      return hn(t);
+      return bn(t);
     case "px":
-      return ze(t);
+      return He(t);
     case "uniform-px":
-      return kt(t);
+      return Lt(t);
     default:
       return null;
   }
 }
-function vn(e, t, i) {
+function Nn(e, t, i) {
   switch (i.kind) {
     case "opacity":
       return String(Math.round(t * 100) / 100);
@@ -823,16 +823,16 @@ function vn(e, t, i) {
       return String(t);
   }
 }
-function J({
+function Z({
   property: e,
   label: t,
   value: i,
   onChange: r,
   compact: a = !1
 }) {
-  const s = fn[e] ?? { kind: "text" }, o = gn(e, i, s), d = 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";
-  if (!d)
-    return /* @__PURE__ */ c("label", { className: u, children: [
+  const o = wn[e] ?? { kind: "text" }, s = xn(e, i, o), u = o.kind !== "text" && s !== null, c = a ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = a ? "pa-edit-field-label" : "pa-prop-label";
+  if (!u)
+    return /* @__PURE__ */ d("label", { className: c, children: [
       /* @__PURE__ */ n("span", { className: l, children: t }),
       /* @__PURE__ */ n(
         "input",
@@ -840,16 +840,16 @@ function J({
           className: "pa-input",
           type: "text",
           value: i,
-          onChange: (g) => r(g.target.value)
+          onChange: (f) => r(f.target.value)
         }
       )
     ] });
-  const p = s.min ?? 0, m = s.max ?? 100, b = s.step ?? 1, f = (g) => {
-    r(vn(e, g, s));
+  const p = o.min ?? 0, m = o.max ?? 100, v = o.step ?? 1, g = (f) => {
+    r(Nn(e, f, o));
   };
-  return /* @__PURE__ */ c("label", { className: `${u} pa-prop-row--slider`, children: [
+  return /* @__PURE__ */ d("label", { className: `${c} pa-prop-row--slider`, children: [
     /* @__PURE__ */ n("span", { className: l, children: t }),
-    /* @__PURE__ */ c("div", { className: "pa-prop-slider-wrap", children: [
+    /* @__PURE__ */ d("div", { className: "pa-prop-slider-wrap", children: [
       /* @__PURE__ */ n(
         "input",
         {
@@ -857,10 +857,10 @@ function J({
           className: "pa-slider",
           min: p,
           max: m,
-          step: b,
-          value: o,
+          step: v,
+          value: s,
           "aria-valuetext": i,
-          onChange: (g) => f(parseFloat(g.target.value))
+          onChange: (f) => g(parseFloat(f.target.value))
         }
       ),
       /* @__PURE__ */ n(
@@ -869,14 +869,14 @@ function J({
           className: "pa-input pa-prop-slider-value",
           type: "text",
           value: i,
-          onChange: (g) => r(g.target.value),
+          onChange: (f) => r(f.target.value),
           "aria-label": `${t} value`
         }
       )
     ] })
   ] });
 }
-function bn(e) {
+function kn(e) {
   const t = e.trim().split(/\s+/).filter(Boolean), i = t[0] ?? "0px";
   if (t.length <= 1) return { top: i, right: i, bottom: i, left: i };
   const r = t[1];
@@ -884,86 +884,86 @@ function bn(e) {
   const a = t[2];
   return t.length === 3 ? { top: i, right: r, bottom: a, left: r } : { top: i, right: r, bottom: a, left: t[3] };
 }
-function yn({ top: e, right: t, bottom: i, left: r }) {
+function Cn({ 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 ee(e) {
+function te(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? t[1] : e;
 }
-function te(e) {
+function ne(e) {
   const t = e.trim();
   return t === "" ? "0px" : /^-?\d+(?:\.\d+)?$/.test(t) ? `${t}px` : t;
 }
-function Ze(e, t) {
-  return e === t ? ee(e) : `${ee(e)}, ${ee(t)}`;
+function tt(e, t) {
+  return e === t ? te(e) : `${te(e)}, ${te(t)}`;
 }
-function Qe(e, t) {
+function nt(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 = te(i[0]);
+    const r = ne(i[0]);
     return [r, r];
   }
-  return [te(i[0]), te(i[1])];
+  return [ne(i[0]), ne(i[1])];
 }
-const et = 12, He = {
-  width: et,
-  height: et,
+const rt = 12, _e = {
+  width: rt,
+  height: rt,
   viewBox: "0 0 12 12",
   fill: "none",
   "aria-hidden": !0
 };
-function wn() {
-  return /* @__PURE__ */ c("svg", { ...He, children: [
+function An() {
+  return /* @__PURE__ */ d("svg", { ..._e, 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 xn() {
-  return /* @__PURE__ */ c("svg", { ...He, children: [
+function Mn() {
+  return /* @__PURE__ */ d("svg", { ..._e, 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 ve({ side: e }) {
+function be({ side: e }) {
   const t = {
     top: { x1: 1.5, y1: 1.5, x2: 10.5, y2: 1.5 },
     right: { x1: 10.5, y1: 1.5, x2: 10.5, y2: 10.5 },
     bottom: { x1: 1.5, y1: 10.5, x2: 10.5, y2: 10.5 },
     left: { x1: 1.5, y1: 1.5, x2: 1.5, y2: 10.5 }
   }[e];
-  return /* @__PURE__ */ c("svg", { ...He, children: [
+  return /* @__PURE__ */ d("svg", { ..._e, children: [
     /* @__PURE__ */ n("rect", { x: "1.5", y: "1.5", width: "9", height: "9", stroke: "currentColor", strokeOpacity: "0.35" }),
     /* @__PURE__ */ n("line", { ...t, stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
-function Nn() {
-  return /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+function Sn() {
+  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" }),
     /* @__PURE__ */ n("rect", { x: "2", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
     /* @__PURE__ */ n("rect", { x: "8", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
-function oe({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
-  const [s, o] = A(t);
-  return z(() => {
-    o(t);
-  }, [t]), /* @__PURE__ */ c("label", { className: `pa-spacing-cell ${r ? "pa-spacing-cell--mixed" : ""}`, children: [
+function ae({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
+  const [o, s] = A(t);
+  return B(() => {
+    s(t);
+  }, [t]), /* @__PURE__ */ d("label", { className: `pa-spacing-cell ${r ? "pa-spacing-cell--mixed" : ""}`, children: [
     /* @__PURE__ */ n("span", { className: "pa-spacing-cell-icon", children: e }),
     /* @__PURE__ */ n(
       "input",
       {
         className: "pa-input pa-spacing-cell-input",
         type: "text",
-        value: s,
-        onChange: (d) => o(d.target.value),
-        onBlur: () => a(s),
-        onKeyDown: (d) => {
-          d.key === "Enter" && d.target.blur(), d.key === "Escape" && (o(t), d.target.blur());
+        value: o,
+        onChange: (u) => s(u.target.value),
+        onBlur: () => a(o),
+        onKeyDown: (u) => {
+          u.key === "Enter" && u.target.blur(), u.key === "Escape" && (s(t), u.target.blur());
         },
         "aria-label": i,
         spellCheck: !1
@@ -971,13 +971,13 @@ function oe({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: a }) {
     )
   ] });
 }
-function tt({ label: e, value: t, onChange: i }) {
-  const r = bn(t), [a, s] = A(!1), o = (l) => {
-    i(yn({ ...r, ...l }));
-  }, d = r.left !== r.right, u = r.top !== r.bottom;
-  return /* @__PURE__ */ c("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
+function it({ label: e, value: t, onChange: i }) {
+  const r = kn(t), [a, o] = A(!1), s = (l) => {
+    i(Cn({ ...r, ...l }));
+  }, u = r.left !== r.right, c = r.top !== r.bottom;
+  return /* @__PURE__ */ d("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: e }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ d(
       "div",
       {
         className: `pa-spacing-control ${a ? "pa-spacing-control--split" : "pa-spacing-control--pair"}`,
@@ -986,68 +986,68 @@ function tt({ label: e, value: t, onChange: i }) {
             // 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__ */ c("div", { className: "pa-spacing-grid", children: [
+            /* @__PURE__ */ d("div", { className: "pa-spacing-grid", children: [
               /* @__PURE__ */ n(
-                oe,
+                ae,
                 {
-                  icon: /* @__PURE__ */ n(ve, { side: "left" }),
-                  display: ee(r.left),
+                  icon: /* @__PURE__ */ n(be, { side: "left" }),
+                  display: te(r.left),
                   ariaLabel: `${e} left`,
-                  onCommit: (l) => o({ left: te(l) })
+                  onCommit: (l) => s({ left: ne(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                oe,
+                ae,
                 {
-                  icon: /* @__PURE__ */ n(ve, { side: "top" }),
-                  display: ee(r.top),
+                  icon: /* @__PURE__ */ n(be, { side: "top" }),
+                  display: te(r.top),
                   ariaLabel: `${e} top`,
-                  onCommit: (l) => o({ top: te(l) })
+                  onCommit: (l) => s({ top: ne(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                oe,
+                ae,
                 {
-                  icon: /* @__PURE__ */ n(ve, { side: "right" }),
-                  display: ee(r.right),
+                  icon: /* @__PURE__ */ n(be, { side: "right" }),
+                  display: te(r.right),
                   ariaLabel: `${e} right`,
-                  onCommit: (l) => o({ right: te(l) })
+                  onCommit: (l) => s({ right: ne(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                oe,
+                ae,
                 {
-                  icon: /* @__PURE__ */ n(ve, { side: "bottom" }),
-                  display: ee(r.bottom),
+                  icon: /* @__PURE__ */ n(be, { side: "bottom" }),
+                  display: te(r.bottom),
                   ariaLabel: `${e} bottom`,
-                  onCommit: (l) => o({ bottom: te(l) })
+                  onCommit: (l) => s({ bottom: ne(l) })
                 }
               )
             ] })
-          ) : /* @__PURE__ */ c("div", { className: "pa-spacing-pair", children: [
+          ) : /* @__PURE__ */ d("div", { className: "pa-spacing-pair", children: [
             /* @__PURE__ */ n(
-              oe,
+              ae,
               {
-                icon: /* @__PURE__ */ n(wn, {}),
-                display: Ze(r.left, r.right),
-                mixed: d,
+                icon: /* @__PURE__ */ n(An, {}),
+                display: tt(r.left, r.right),
+                mixed: u,
                 ariaLabel: `${e} horizontal`,
                 onCommit: (l) => {
-                  const [p, m] = Qe(l, r.left);
-                  o({ left: p, right: m });
+                  const [p, m] = nt(l, r.left);
+                  s({ left: p, right: m });
                 }
               }
             ),
             /* @__PURE__ */ n(
-              oe,
+              ae,
               {
-                icon: /* @__PURE__ */ n(xn, {}),
-                display: Ze(r.top, r.bottom),
-                mixed: u,
+                icon: /* @__PURE__ */ n(Mn, {}),
+                display: tt(r.top, r.bottom),
+                mixed: c,
                 ariaLabel: `${e} vertical`,
                 onCommit: (l) => {
-                  const [p, m] = Qe(l, r.top);
-                  o({ top: p, bottom: m });
+                  const [p, m] = nt(l, r.top);
+                  s({ top: p, bottom: m });
                 }
               }
             )
@@ -1057,11 +1057,11 @@ function tt({ label: e, value: t, onChange: i }) {
             {
               type: "button",
               className: `pa-spacing-toggle ${a ? "pa-spacing-toggle--on" : ""}`,
-              onClick: () => s((l) => !l),
+              onClick: () => o((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(Nn, {})
+              children: /* @__PURE__ */ n(Sn, {})
             }
           )
         ]
@@ -1069,7 +1069,7 @@ function tt({ label: e, value: t, onChange: i }) {
     )
   ] });
 }
-function kn({
+function Ln({
   options: e,
   value: t,
   ariaLabel: i,
@@ -1089,7 +1089,7 @@ function kn({
     a.value
   )) });
 }
-function Cn({
+function En({
   options: e,
   ariaLabel: t,
   onToggle: i
@@ -1108,7 +1108,7 @@ function Cn({
     r.id
   )) });
 }
-function Mn({ className: e }) {
+function In({ 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 Mn({ className: e }) {
     }
   ) });
 }
-function An({ className: e }) {
+function Tn({ 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 An({ className: e }) {
     }
   ) });
 }
-function Sn({ className: e }) {
+function Pn({ 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 Sn({ className: e }) {
     }
   ) });
 }
-function Ln({ className: e }) {
+function Rn({ 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 En({ className: e }) {
+function Dn({ className: e }) {
   return /* @__PURE__ */ n("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -1147,33 +1147,33 @@ function En({ className: e }) {
     }
   ) });
 }
-function Ct(e) {
+function Et(e) {
   const t = parseInt(e.trim(), 10);
   return Number.isFinite(t) ? t >= 600 : e.trim() === "bold" || e.trim() === "bolder";
 }
-function In(e) {
-  return Ct(e) ? "400" : "700";
+function On(e) {
+  return Et(e) ? "400" : "700";
 }
-function Mt(e) {
+function It(e) {
   return e.trim() === "italic" || e.trim() === "oblique";
 }
-function Tn(e) {
-  return Mt(e) ? "normal" : "italic";
+function $n(e) {
+  return It(e) ? "normal" : "italic";
 }
-function nt(e, t) {
+function at(e, t) {
   return e.split(/\s+/).includes(t);
 }
-function rt(e, t) {
+function ot(e, t) {
   const i = new Set(
     e.trim().split(/\s+/).filter((r) => r && r !== "none")
   );
   return i.has(t) ? i.delete(t) : i.add(t), i.size === 0 ? "none" : Array.from(i).join(" ");
 }
-function Rn(e) {
+function Fn(e) {
   const t = e.trim();
   return t === "center" || t === "right" || t === "justify" ? t : "left";
 }
-const it = [
+const st = [
   "none",
   "solid",
   "dashed",
@@ -1183,7 +1183,7 @@ const it = [
   "ridge",
   "inset",
   "outset"
-], at = [
+], lt = [
   "block",
   "inline",
   "inline-block",
@@ -1193,39 +1193,39 @@ const it = [
   "inline-grid",
   "none",
   "contents"
-], Dn = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
-function $n({
+], Bn = /* @__PURE__ */ new Set(["flex", "inline-flex", "grid", "inline-grid"]);
+function zn({
   values: e,
   onPropertyChange: t,
   textKind: i,
   textValue: r,
   onTextChange: a,
-  targetScope: s,
-  onTargetScopeChange: o,
-  elementState: d,
-  onElementStateChange: u,
+  targetScope: o,
+  onTargetScopeChange: s,
+  elementState: u,
+  onElementStateChange: c,
   instanceCount: l,
   scopeHint: p,
   stateHint: m
 }) {
-  var D, S;
-  const b = e["font-weight"] ?? "", f = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", v = Rn(e["text-align"] ?? "left"), C = ((D = e.display) == null ? void 0 : D.trim()) ?? "", w = !!C, y = Dn.has(C), N = [...at];
-  C && !at.includes(C) && N.push(C);
-  const I = ((S = e.gap) == null ? void 0 : S.trim()) ?? "", T = I === "normal" || I === "" ? "0px" : I, R = e["border-style"] ?? "none", k = [...it];
-  return R && !it.includes(R) && k.push(R), /* @__PURE__ */ c("div", { className: "pa-edit-sections", children: [
-    /* @__PURE__ */ c(ie, { title: "Targeting", defaultOpen: !0, children: [
-      /* @__PURE__ */ c("div", { className: "pa-edit-field-grid pa-edit-field-grid--2", children: [
-        /* @__PURE__ */ c("label", { className: "pa-edit-mini-field", children: [
+  var T, C;
+  const v = e["font-weight"] ?? "", g = e["font-style"] ?? "normal", f = e["text-decoration"] ?? "none", b = Fn(e["text-align"] ?? "left"), E = ((T = e.display) == null ? void 0 : T.trim()) ?? "", k = !!E, w = Bn.has(E), x = [...lt];
+  E && !lt.includes(E) && x.push(E);
+  const L = ((C = e.gap) == null ? void 0 : C.trim()) ?? "", P = L === "normal" || L === "" ? "0px" : L, R = e["border-style"] ?? "none", N = [...st];
+  return R && !st.includes(R) && N.push(R), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
+    /* @__PURE__ */ d(re, { 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" }),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ d(
             "select",
             {
               className: "pa-select",
-              value: s,
-              onChange: (h) => o(h.target.value),
+              value: o,
+              onChange: (h) => s(h.target.value),
               children: [
                 /* @__PURE__ */ n("option", { value: "this-instance", children: "This instance" }),
-                /* @__PURE__ */ c("option", { value: "all-instances", disabled: l <= 1, children: [
+                /* @__PURE__ */ d("option", { value: "all-instances", disabled: l <= 1, children: [
                   "All (",
                   l,
                   ")"
@@ -1234,14 +1234,14 @@ function $n({
             }
           )
         ] }),
-        /* @__PURE__ */ c("label", { className: "pa-edit-mini-field", children: [
+        /* @__PURE__ */ d("label", { className: "pa-edit-mini-field", children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "State" }),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ d(
             "select",
             {
               className: "pa-select",
-              value: d,
-              onChange: (h) => u(h.target.value),
+              value: u,
+              onChange: (h) => c(h.target.value),
               children: [
                 /* @__PURE__ */ n("option", { value: "normal", children: "Normal" }),
                 /* @__PURE__ */ n("option", { value: "hover", children: "Hover" }),
@@ -1256,7 +1256,7 @@ function $n({
       p ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: p }) : null,
       m ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: m }) : null
     ] }),
-    i !== "none" && /* @__PURE__ */ n(ie, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ c("label", { className: "pa-edit-stack-field", children: [
+    i !== "none" && /* @__PURE__ */ n(re, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
       /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Text" }),
       /* @__PURE__ */ n(
         "textarea",
@@ -1269,94 +1269,94 @@ function $n({
         }
       )
     ] }) }),
-    /* @__PURE__ */ c(ie, { title: "Typography", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(re, { title: "Typography", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        pn,
+        vn,
         {
           value: e["font-family"] ?? "",
           onChange: (h) => t("font-family", h)
         }
       ),
-      /* @__PURE__ */ c("div", { className: "pa-edit-field-block", children: [
+      /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
-          Cn,
+          En,
           {
             ariaLabel: "Text style",
             options: [
               {
                 id: "bold",
                 title: "Bold",
-                pressed: Ct(b),
+                pressed: Et(v),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--bold", children: "B" })
               },
               {
                 id: "italic",
                 title: "Italic",
-                pressed: Mt(f),
+                pressed: It(g),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--italic", children: "I" })
               },
               {
                 id: "underline",
                 title: "Underline",
-                pressed: nt(g, "underline"),
+                pressed: at(f, "underline"),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--underline", children: "U" })
               },
               {
                 id: "strikethrough",
                 title: "Strikethrough",
-                pressed: nt(g, "line-through"),
-                content: /* @__PURE__ */ n(En, { className: "pa-segmented-icon" })
+                pressed: at(f, "line-through"),
+                content: /* @__PURE__ */ n(Dn, { className: "pa-segmented-icon" })
               }
             ],
             onToggle: (h) => {
-              h === "bold" ? t("font-weight", In(b)) : h === "italic" ? t("font-style", Tn(f)) : h === "underline" ? t(
+              h === "bold" ? t("font-weight", On(v)) : h === "italic" ? t("font-style", $n(g)) : h === "underline" ? t(
                 "text-decoration",
-                rt(g, "underline")
+                ot(f, "underline")
               ) : h === "strikethrough" && t(
                 "text-decoration",
-                rt(g, "line-through")
+                ot(f, "line-through")
               );
             }
           }
         )
       ] }),
-      /* @__PURE__ */ c("div", { className: "pa-edit-field-block", children: [
+      /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Align" }),
         /* @__PURE__ */ n(
-          kn,
+          Ln,
           {
             ariaLabel: "Text align",
-            value: v,
+            value: b,
             onChange: (h) => t("text-align", h),
             options: [
               {
                 value: "left",
                 title: "Align left",
-                content: /* @__PURE__ */ n(Mn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(In, { className: "pa-segmented-icon" })
               },
               {
                 value: "center",
                 title: "Align center",
-                content: /* @__PURE__ */ n(An, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Tn, { className: "pa-segmented-icon" })
               },
               {
                 value: "right",
                 title: "Align right",
-                content: /* @__PURE__ */ n(Sn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Pn, { className: "pa-segmented-icon" })
               },
               {
                 value: "justify",
                 title: "Justify",
-                content: /* @__PURE__ */ n(Ln, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Rn, { className: "pa-segmented-icon" })
               }
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ c("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
+      /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
         /* @__PURE__ */ n(
-          J,
+          Z,
           {
             compact: !0,
             property: "font-size",
@@ -1366,7 +1366,7 @@ function $n({
           }
         ),
         /* @__PURE__ */ n(
-          J,
+          Z,
           {
             compact: !0,
             property: "line-height",
@@ -1377,7 +1377,7 @@ function $n({
         )
       ] }),
       /* @__PURE__ */ n(
-        Ie,
+        Te,
         {
           label: "Color",
           value: e.color ?? "",
@@ -1385,10 +1385,10 @@ function $n({
         }
       )
     ] }),
-    /* @__PURE__ */ c(ie, { title: "Layout", defaultOpen: !0, children: [
-      /* @__PURE__ */ c("div", { className: "pa-edit-split-fields", children: [
+    /* @__PURE__ */ d(re, { title: "Layout", defaultOpen: !0, children: [
+      /* @__PURE__ */ d("div", { className: "pa-edit-split-fields", children: [
         /* @__PURE__ */ n(
-          J,
+          Z,
           {
             compact: !0,
             property: "width",
@@ -1398,7 +1398,7 @@ function $n({
           }
         ),
         /* @__PURE__ */ n(
-          J,
+          Z,
           {
             compact: !0,
             property: "height",
@@ -1409,7 +1409,7 @@ function $n({
         )
       ] }),
       /* @__PURE__ */ n(
-        tt,
+        it,
         {
           property: "padding",
           label: "Padding",
@@ -1418,7 +1418,7 @@ function $n({
         }
       ),
       /* @__PURE__ */ n(
-        tt,
+        it,
         {
           property: "margin",
           label: "Margin",
@@ -1426,32 +1426,32 @@ function $n({
           onChange: (h) => t("margin", h)
         }
       ),
-      w && /* @__PURE__ */ c("label", { className: "pa-prop-row pa-prop-row--compact", children: [
+      k && /* @__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: C,
+            value: E,
             onChange: (h) => t("display", h.target.value),
-            children: N.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
+            children: x.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
           }
         )
       ] }),
-      y && /* @__PURE__ */ n(
-        J,
+      w && /* @__PURE__ */ n(
+        Z,
         {
           compact: !0,
           property: "gap",
           label: "Gap",
-          value: T,
+          value: P,
           onChange: (h) => t("gap", h)
         }
       )
     ] }),
-    /* @__PURE__ */ c(ie, { title: "Fill", children: [
+    /* @__PURE__ */ d(re, { title: "Fill", children: [
       /* @__PURE__ */ n(
-        Ie,
+        Te,
         {
           label: "Background",
           value: e["background-color"] ?? "",
@@ -1459,7 +1459,7 @@ function $n({
         }
       ),
       /* @__PURE__ */ n(
-        J,
+        Z,
         {
           compact: !0,
           property: "opacity",
@@ -1469,16 +1469,16 @@ function $n({
         }
       )
     ] }),
-    /* @__PURE__ */ c(ie, { title: "Border", defaultOpen: !0, children: [
+    /* @__PURE__ */ d(re, { title: "Border", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        Ie,
+        Te,
         {
           label: "Border color",
           value: e["border-color"] ?? "",
           onChange: (h) => t("border-color", h)
         }
       ),
-      /* @__PURE__ */ c("label", { className: "pa-edit-stack-field", children: [
+      /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
           "select",
@@ -1486,12 +1486,12 @@ function $n({
             className: "pa-select",
             value: R,
             onChange: (h) => t("border-style", 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))
           }
         )
       ] }),
       /* @__PURE__ */ n(
-        J,
+        Z,
         {
           compact: !0,
           property: "border-width",
@@ -1501,7 +1501,7 @@ function $n({
         }
       ),
       /* @__PURE__ */ n(
-        J,
+        Z,
         {
           compact: !0,
           property: "border-radius",
@@ -1513,7 +1513,7 @@ function $n({
     ] })
   ] });
 }
-const Pn = 50, ot = [
+const Hn = 50, ct = [
   "font-family",
   "font-size",
   "font-weight",
@@ -1535,180 +1535,180 @@ const Pn = 50, ot = [
   "border-radius",
   "opacity"
 ];
-function On(e, t, i) {
-  const r = V([]), a = V(/* @__PURE__ */ new Set()), s = V([]), o = V(null), d = V([]), [u, l] = A({}), [p, m] = A({}), [b, f] = A("none"), [g, v] = A(""), [C, w] = A(""), [y, N] = A([]), [I, T] = A(!1), R = E(() => {
+function _n(e, t, i) {
+  const r = V([]), a = V(/* @__PURE__ */ new Set()), o = V([]), s = V(null), u = V([]), [c, l] = A({}), [p, m] = A({}), [v, g] = A("none"), [f, b] = A(""), [E, k] = A(""), [w, x] = A([]), [L, P] = A(!1), R = I(() => {
     const M = Array.from(a.current);
     return {
-      inline: Xe(M, [...ot]),
-      text: e && b !== "none" ? Ye(e, b) : null
+      inline: je(M, [...ct]),
+      text: e && v !== "none" ? Ke(e, v) : null
     };
-  }, [e, b]), k = E(() => {
-    d.current.push(R()), d.current.length > Pn && d.current.shift(), T(d.current.length > 0);
-  }, [R]), D = E(
+  }, [e, v]), N = I(() => {
+    u.current.push(R()), u.current.length > Hn && u.current.shift(), P(u.current.length > 0);
+  }, [R]), T = I(
     (M) => {
       if (!e) return;
-      const $ = Array.from(a.current);
-      pe(s.current.filter((H) => $.includes(H.element))), o.current && he(o.current);
-      const O = we(e, t);
-      if (r.current = O, a.current = new Set(O), me($), Ee(O, i), M && y.length > 0)
-        for (const H of y)
-          if (H.property === "textContent" || H.property === "value")
-            for (const W of O)
-              Ge(W, H.property, H.newValue);
+      const D = Array.from(a.current);
+      he(o.current.filter((F) => D.includes(F.element))), s.current && me(s.current);
+      const $ = xe(e, t);
+      if (r.current = $, a.current = new Set($), fe(D), Ie($, i), M && w.length > 0)
+        for (const F of w)
+          if (F.property === "textContent" || F.property === "value")
+            for (const W of $)
+              qe(W, F.property, F.newValue);
           else
-            for (const W of O)
-              W.style.setProperty(H.property, H.newValue);
+            for (const W of $)
+              W.style.setProperty(F.property, F.newValue);
     },
-    [e, t, i, y]
+    [e, t, i, w]
   );
-  z(() => {
+  B(() => {
     if (!e) {
-      r.current = [], a.current = /* @__PURE__ */ new Set(), s.current = [], o.current = null, d.current = [], l({}), m({}), f("none"), v(""), w(""), N([]), T(!1);
+      r.current = [], a.current = /* @__PURE__ */ new Set(), o.current = [], s.current = null, u.current = [], l({}), m({}), g("none"), b(""), k(""), x([]), P(!1);
       return;
     }
-    const M = we(e, t);
-    r.current = M, a.current = new Set(M), s.current = Xe(M, [...ot]), d.current = [], T(!1);
-    const $ = fe(e);
-    l($), m($);
-    const O = se(e);
-    return f(O.kind), v(O.value), w(O.value), o.current = O.kind !== "none" ? Ye(e, O.kind) : null, N([]), Ee(M, i), () => me(M);
-  }, [e]), z(() => {
-    e && D(!0);
-  }, [t]), z(() => {
+    const M = xe(e, t);
+    r.current = M, a.current = new Set(M), o.current = je(M, [...ct]), u.current = [], P(!1);
+    const D = ge(e);
+    l(D), m(D);
+    const $ = oe(e);
+    return g($.kind), b($.value), k($.value), s.current = $.kind !== "none" ? Ke(e, $.kind) : null, x([]), Ie(M, i), () => fe(M);
+  }, [e]), B(() => {
+    e && T(!0);
+  }, [t]), B(() => {
     if (!e) return;
-    const M = we(e, t);
-    r.current = M, me(Array.from(a.current)), Ee(M, i), a.current = new Set(M);
+    const M = xe(e, t);
+    r.current = M, fe(Array.from(a.current)), Ie(M, i), a.current = new Set(M);
   }, [i, e, t]);
-  const S = E((M, $, O) => {
-    N((H) => {
-      const W = H.filter((_) => _.property !== M);
-      return O === $ ? W : [...W, { property: M, oldValue: $, newValue: O }];
+  const C = I((M, D, $) => {
+    x((F) => {
+      const W = F.filter((_) => _.property !== M);
+      return $ === D ? W : [...W, { property: M, oldValue: D, newValue: $ }];
     });
-  }, []), h = E(
-    (M, $) => {
+  }, []), h = I(
+    (M, D) => {
       if (!e) return;
-      const O = { [M]: $ };
-      M === "border-width" && (u["border-style"] ?? "none") === "none" && mn($) && (O["border-style"] = "solid"), k(), l((H) => ({ ...H, ...O }));
-      for (const [H, W] of Object.entries(O)) {
-        const _ = p[H] ?? "";
-        for (const Q of r.current)
-          Q.style.setProperty(H, W), a.current.add(Q);
-        S(H, _, W);
+      const $ = { [M]: D };
+      M === "border-width" && (c["border-style"] ?? "none") === "none" && yn(D) && ($["border-style"] = "solid"), N(), l((F) => ({ ...F, ...$ }));
+      for (const [F, W] of Object.entries($)) {
+        const _ = p[F] ?? "";
+        for (const ee of r.current)
+          ee.style.setProperty(F, W), a.current.add(ee);
+        C(F, _, W);
       }
     },
-    [e, p, u, k, S]
-  ), P = E(
+    [e, p, c, N, C]
+  ), O = I(
     (M) => {
-      if (!(!e || b === "none")) {
-        k(), v(M);
-        for (const $ of r.current)
-          Ge($, b, M), a.current.add($);
-        S(b, C, M);
+      if (!(!e || v === "none")) {
+        N(), b(M);
+        for (const D of r.current)
+          qe(D, v, M), a.current.add(D);
+        C(v, E, M);
       }
     },
-    [e, b, C, k, S]
-  ), U = E(() => {
-    const M = d.current.pop();
-    if (M && (pe(M.inline), M.text && he(M.text), T(d.current.length > 0), e)) {
-      l(fe(e));
-      const $ = se(e);
-      $.kind !== "none" && v($.value);
+    [e, v, E, N, C]
+  ), U = I(() => {
+    const M = u.current.pop();
+    if (M && (he(M.inline), M.text && me(M.text), P(u.current.length > 0), e)) {
+      l(ge(e));
+      const D = oe(e);
+      D.kind !== "none" && b(D.value);
     }
-  }, [e]), K = E(() => {
-    if (pe(s.current), o.current && he(o.current), d.current = [], T(!1), N([]), e) {
-      l(fe(e));
-      const M = se(e);
-      v(M.value);
+  }, [e]), j = I(() => {
+    if (he(o.current), s.current && me(s.current), u.current = [], P(!1), x([]), e) {
+      l(ge(e));
+      const M = oe(e);
+      b(M.value);
     }
-  }, [e]), F = E(() => {
-    pe(s.current), o.current && he(o.current);
-  }, []), j = E(() => {
-    if (F(), me(Array.from(a.current)), d.current = [], T(!1), N([]), e) {
-      l(fe(e));
-      const M = se(e);
-      M.kind !== "none" && v(M.value);
+  }, [e]), z = I(() => {
+    he(o.current), s.current && me(s.current);
+  }, []), K = I(() => {
+    if (z(), fe(Array.from(a.current)), u.current = [], P(!1), x([]), e) {
+      l(ge(e));
+      const M = oe(e);
+      M.kind !== "none" && b(M.value);
     }
-  }, [F, e]);
+  }, [z, e]);
   return {
-    values: u,
-    textKind: b,
-    textValue: g,
-    pendingChanges: y,
-    canUndo: I,
+    values: c,
+    textKind: v,
+    textValue: f,
+    pendingChanges: w,
+    canUndo: L,
     updateProperty: h,
-    updateText: P,
+    updateText: O,
     undo: U,
-    reset: K,
-    clearPreviews: j,
-    revertPreviews: F
+    reset: j,
+    clearPreviews: K,
+    revertPreviews: z
   };
 }
-function Fn({
+function Vn({
   selectedElement: e,
   hoveredElement: t,
   onSelectElement: i,
   onHoverElement: r,
   targetScope: a,
-  onTargetScopeChange: s,
-  elementState: o,
-  onElementStateChange: d,
-  onApply: u,
+  onTargetScopeChange: o,
+  elementState: s,
+  onElementStateChange: u,
+  onApply: c,
   applyStatus: l,
   isToolbarTarget: p,
   onPreviewApi: m
 }) {
   const {
-    values: b,
-    textKind: f,
-    textValue: g,
-    pendingChanges: v,
-    canUndo: C,
-    updateProperty: w,
-    updateText: y,
-    undo: N,
-    reset: I,
-    clearPreviews: T,
+    values: v,
+    textKind: g,
+    textValue: f,
+    pendingChanges: b,
+    canUndo: E,
+    updateProperty: k,
+    updateText: w,
+    undo: x,
+    reset: L,
+    clearPreviews: P,
     revertPreviews: R
-  } = On(e, a, o), { elementRef: k, isDragging: D, style: S, dragHandleProps: h } = yt({
+  } = _n(e, a, s), { elementRef: N, isDragging: T, style: C, dragHandleProps: h } = Ct({
     computeDefaultPosition: (_) => ({
       x: window.innerWidth - _.width - 16,
       y: 16
     })
   });
-  z(() => (m == null || m({ clearPreviews: T, revertPreviews: R }), () => m == null ? void 0 : m(null)), [m, T, R]);
-  const P = E(
+  B(() => (m == null || m({ clearPreviews: P, revertPreviews: R }), () => m == null ? void 0 : m(null)), [m, P, R]);
+  const O = I(
     (_) => {
       if (p(_.target)) return;
-      const ce = document.elementsFromPoint(_.clientX, _.clientY).find(
+      const le = document.elementsFromPoint(_.clientX, _.clientY).find(
         (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      r(ce ?? null);
+      r(le ?? null);
     },
     [p, r]
-  ), U = E(
+  ), U = I(
     (_) => {
       if (p(_.target)) return;
       _.preventDefault(), _.stopPropagation();
-      const ce = document.elementsFromPoint(_.clientX, _.clientY).find(
+      const le = document.elementsFromPoint(_.clientX, _.clientY).find(
         (q) => q instanceof Element && !q.closest(
           "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]"
         )
       );
-      i(ce ?? null);
+      i(le ?? null);
     },
     [p, i]
   );
-  z(() => (document.addEventListener("mousemove", P, !0), document.addEventListener("click", U, !0), () => {
-    document.removeEventListener("mousemove", P, !0), document.removeEventListener("click", U, !0);
-  }), [P, U]);
-  const K = () => {
-    v.length !== 0 && u(v);
-  }, F = e ? Oe(e) : null, j = e ? dt(e) : null, M = e ? ut(e) : 0, $ = e ? pt(e, "all-instances") : "", O = o !== "normal" && j === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : o !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, H = M > 1 ? a === "all-instances" ? `Preview & Apply on ${M} elements (${$}).` : `This instance only — ${M - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, W = ue(() => !e || a !== "all-instances" ? [] : we(e, "all-instances"), [e, a]);
-  return /* @__PURE__ */ c(Y, { children: [
+  B(() => (document.addEventListener("mousemove", O, !0), document.addEventListener("click", U, !0), () => {
+    document.removeEventListener("mousemove", O, !0), document.removeEventListener("click", U, !0);
+  }), [O, U]);
+  const j = () => {
+    b.length !== 0 && c(b);
+  }, z = e ? Fe(e) : null, K = e ? mt(e) : null, M = e ? ft(e) : 0, D = e ? gt(e, "all-instances") : "", $ = s !== "normal" && K === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : s !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, F = M > 1 ? a === "all-instances" ? `Preview & Apply on ${M} elements (${D}).` : `This instance only — ${M - 1} other on page.` : a === "all-instances" ? "Only one match — scope has no effect." : null, W = ue(() => !e || a !== "all-instances" ? [] : xe(e, "all-instances"), [e, a]);
+  return /* @__PURE__ */ d(Y, { children: [
     /* @__PURE__ */ n(
-      gt,
+      xt,
       {
         element: a === "all-instances" ? null : t,
         selected: e,
@@ -1719,11 +1719,11 @@ function Fn({
     /* @__PURE__ */ n(
       "div",
       {
-        ref: k,
-        className: `pa-edit-panel-float ${D ? "pa-edit-panel-float--dragging" : ""}`,
-        style: S,
-        children: /* @__PURE__ */ n(Ne, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ c("div", { className: "pa-edit-panel-inner", children: [
-          /* @__PURE__ */ c("div", { className: "pa-edit-panel-header", children: [
+        ref: N,
+        className: `pa-edit-panel-float ${T ? "pa-edit-panel-float--dragging" : ""}`,
+        style: C,
+        children: /* @__PURE__ */ n(ke, { 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",
               {
@@ -1732,7 +1732,7 @@ function Fn({
                 "aria-label": "Drag edit panel",
                 title: "Drag to move",
                 ...h,
-                children: /* @__PURE__ */ c("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
+                children: /* @__PURE__ */ d("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
@@ -1744,77 +1744,77 @@ function Fn({
             ),
             /* @__PURE__ */ n("h3", { className: "pa-edit-title", children: "Edit" })
           ] }),
-          e ? /* @__PURE__ */ c(Y, { children: [
-            /* @__PURE__ */ c("div", { className: "pa-edit-meta", children: [
+          e ? /* @__PURE__ */ d(Y, { children: [
+            /* @__PURE__ */ d("div", { className: "pa-edit-meta", children: [
               /* @__PURE__ */ n(
                 "code",
                 {
                   className: "pa-edit-meta-label",
-                  title: `This instance: ${ht(e)}
-All instances: ${$}`,
-                  children: Pe(e)
+                  title: `This instance: ${vt(e)}
+All instances: ${D}`,
+                  children: $e(e)
                 }
               ),
-              ((F == null ? void 0 : F.sourceFile) || j) && /* @__PURE__ */ c("span", { className: "pa-edit-source", children: [
-                (F == null ? void 0 : F.sourceFile) && /* @__PURE__ */ c(Y, { children: [
-                  F.sourceFile,
-                  F.lineNumber ? `:${F.lineNumber}` : ""
+              ((z == null ? void 0 : z.sourceFile) || K) && /* @__PURE__ */ d("span", { className: "pa-edit-source", children: [
+                (z == null ? void 0 : z.sourceFile) && /* @__PURE__ */ d(Y, { children: [
+                  z.sourceFile,
+                  z.lineNumber ? `:${z.lineNumber}` : ""
                 ] }),
-                F != null && F.sourceFile && j ? " · " : "",
-                j ?? ""
+                z != null && z.sourceFile && K ? " · " : "",
+                K ?? ""
               ] })
             ] }),
             /* @__PURE__ */ n("div", { className: "pa-edit-panel-scroll", children: /* @__PURE__ */ n(
-              $n,
+              zn,
               {
-                values: b,
-                onPropertyChange: w,
-                textKind: f,
-                textValue: g,
-                onTextChange: y,
+                values: v,
+                onPropertyChange: k,
+                textKind: g,
+                textValue: f,
+                onTextChange: w,
                 targetScope: a,
-                onTargetScopeChange: s,
-                elementState: o,
-                onElementStateChange: d,
+                onTargetScopeChange: o,
+                elementState: s,
+                onElementStateChange: u,
                 instanceCount: M,
-                scopeHint: H,
-                stateHint: O
+                scopeHint: F,
+                stateHint: $
               }
             ) }),
-            /* @__PURE__ */ c("div", { className: "pa-edit-panel-sticky", children: [
-              /* @__PURE__ */ c("div", { className: "pa-edit-actions", children: [
-                /* @__PURE__ */ n(B, { variant: "regular", onClick: N, disabled: !C, children: /* @__PURE__ */ c("span", { className: "pa-glass-btn-inner", children: [
-                  /* @__PURE__ */ n(tn, { className: "pa-glass-btn-icon" }),
+            /* @__PURE__ */ d("div", { className: "pa-edit-panel-sticky", children: [
+              /* @__PURE__ */ d("div", { className: "pa-edit-actions", children: [
+                /* @__PURE__ */ n(H, { variant: "regular", onClick: x, disabled: !E, children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                  /* @__PURE__ */ n(sn, { className: "pa-glass-btn-icon" }),
                   /* @__PURE__ */ n("span", { children: "Undo" })
                 ] }) }),
                 /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "regular",
-                    onClick: I,
-                    disabled: v.length === 0,
-                    children: /* @__PURE__ */ c("span", { className: "pa-glass-btn-inner", children: [
-                      /* @__PURE__ */ n(nn, { className: "pa-glass-btn-icon" }),
+                    onClick: L,
+                    disabled: b.length === 0,
+                    children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
+                      /* @__PURE__ */ n(ln, { className: "pa-glass-btn-icon" }),
                       /* @__PURE__ */ n("span", { children: "Reset" })
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ c("div", { className: "pa-edit-footer", children: [
+              /* @__PURE__ */ d("div", { className: "pa-edit-footer", children: [
                 /* @__PURE__ */ n(
                   "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 ?? `${v.length} pending change${v.length !== 1 ? "s" : ""}`
+                    children: l ?? `${b.length} pending change${b.length !== 1 ? "s" : ""}`
                   }
                 ),
                 /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "glass-primary",
-                    onClick: K,
-                    disabled: v.length === 0,
-                    title: F != null && F.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    onClick: j,
+                    disabled: b.length === 0,
+                    title: z != null && z.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1826,9 +1826,35 @@ All instances: ${$}`,
     )
   ] });
 }
-function Bn(e) {
+async function Un(e, t = {}) {
+  if (t.onApply)
+    try {
+      const r = await t.onApply(e);
+      if (r) return { mode: "mcp", result: r };
+    } catch (r) {
+      return { mode: "error", message: r instanceof Error ? r.message : String(r) };
+    }
+  const i = t.applyEndpoint;
+  if (i)
+    try {
+      const r = await fetch(i, {
+        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 };
+    } catch (r) {
+      return { mode: "error", message: r instanceof Error ? r.message : String(r) };
+    }
+  return await bt(JSON.stringify(e, null, 2)), { mode: "clipboard" };
+}
+function Wn(e) {
+  var t;
+  return e.mode === "mcp" && e.result.success && e.result.linesChanged.length > 0 ? ((t = e.result.warnings) != null && t.length && console.warn("[pixelagent] Apply succeeded with warnings:", e.result.warnings), "Change applied") : (e.mode === "error" ? console.error("[pixelagent] Apply failed:", e.message) : e.mode === "mcp" ? console.warn("[pixelagent] Apply reported no changes:", e.result) : console.warn("[pixelagent] Apply fell back to clipboard — no source patched"), "Apply failed");
+}
+function Yn(e) {
   const [t, i] = A(null);
-  return z(() => {
+  return B(() => {
     if (!e) {
       i(null);
       return;
@@ -1841,8 +1867,8 @@ function Bn(e) {
     };
   }, [e]), t;
 }
-const Z = 8, G = 8, zn = 12, Hn = 300, _n = 280;
-function Te(e, t, i, r) {
+const Q = 8, G = 8, Xn = 12, Gn = 300, Kn = 280;
+function Pe(e, t, i, r) {
   return {
     top: e,
     left: t,
@@ -1852,10 +1878,10 @@ function Te(e, t, i, r) {
     height: r
   };
 }
-function $e(e, t) {
+function Oe(e, t) {
   return e.left < t.right && e.right > t.left && e.top < t.bottom && e.bottom > t.top;
 }
-function Vn(e, t) {
+function jn(e, t) {
   return {
     top: e.top - t,
     left: e.left - t,
@@ -1865,33 +1891,33 @@ function Vn(e, t) {
     height: e.height + t * 2
   };
 }
-function Un() {
+function qn() {
   if (typeof document > "u") return null;
   const e = document.querySelector(
     "[data-pixelagent-toolbar-portal] .pa-toolbar-float"
   );
-  return e ? Vn(e.getBoundingClientRect(), zn) : null;
+  return e ? jn(e.getBoundingClientRect(), Xn) : null;
 }
 function Re(e, t) {
   return Math.min(
-    Math.max(Z, e),
-    window.innerWidth - t - Z
+    Math.max(Q, e),
+    window.innerWidth - t - Q
   );
 }
-function be(e, t) {
+function ye(e, t) {
   return Math.min(
-    Math.max(Z, e),
-    window.innerHeight - t - Z
+    Math.max(Q, e),
+    window.innerHeight - t - Q
   );
 }
-function Wn(e) {
-  return e.top >= Z && e.left >= Z && e.right <= window.innerWidth - Z && e.bottom <= window.innerHeight - Z;
+function Jn(e) {
+  return e.top >= Q && e.left >= Q && e.right <= window.innerWidth - Q && e.bottom <= window.innerHeight - Q;
 }
-function Yn(e, t) {
-  return t && $e(e, t) ? !1 : Wn(e);
+function Zn(e, t) {
+  return t && Oe(e, t) ? !1 : Jn(e);
 }
-function Xn(e, t = Hn, i = _n) {
-  const r = Un(), s = e.top > window.innerHeight * 0.45 ? [
+function Qn(e, t = Gn, i = Kn) {
+  const r = qn(), o = e.top > window.innerHeight * 0.45 ? [
     { placement: "above", top: e.top - i - G, left: e.left },
     { placement: "below", top: e.bottom + G, left: e.left },
     { placement: "right", top: e.top, left: e.right + G },
@@ -1902,104 +1928,104 @@ function Xn(e, t = Hn, i = _n) {
     { placement: "right", top: e.top, left: e.right + G },
     { placement: "left", top: e.top, left: e.left - t - G }
   ];
-  for (const { top: u, left: l } of s) {
-    const p = Te(
-      be(u, i),
+  for (const { top: c, left: l } of o) {
+    const p = Pe(
+      ye(c, i),
       Re(l, t),
       t,
       i
     );
-    if (Yn(p, r))
+    if (Zn(p, r))
       return { top: p.top, left: p.left };
   }
-  let o = be(e.top - i - G, i), d = Re(e.left, t);
+  let s = ye(e.top - i - G, i), u = Re(e.left, t);
   if (r) {
-    let u = Te(o, d, t, i);
-    $e(u, r) && (o = be(r.top - i - G, i), u = Te(o, d, t, i)), $e(u, r) && (o = be(e.bottom + G, i), d = Re(
+    let c = Pe(s, u, t, i);
+    Oe(c, r) && (s = ye(r.top - i - G, i), c = Pe(s, u, t, i)), Oe(c, r) && (s = ye(e.bottom + G, i), u = Re(
       Math.min(e.left, r.left - t - G),
       t
     ));
   }
-  return { top: o, left: d };
+  return { top: s, left: u };
 }
-function Gn({
+function er({
   elements: e,
   areaBbox: t,
   onSubmit: i,
   onCancel: r
 }) {
-  const [a, s] = A(""), o = V(null), d = V(null), u = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, p = Bn(u), m = l ?? p, b = mt(), f = u ? se(u) : { kind: "none", value: "" }, g = f.kind !== "none" ? f.value : void 0;
-  if (z(() => {
-    var y;
-    (y = o.current) == null || y.focus();
-  }, [e]), z(() => {
-    const y = (N) => {
-      N.key === "Escape" && r();
+  const [a, o] = A(""), s = V(null), u = V(null), c = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, p = Yn(c), m = l ?? p, v = yt(), g = c ? oe(c) : { kind: "none", value: "" }, f = g.kind !== "none" ? g.value : void 0;
+  if (B(() => {
+    var w;
+    (w = s.current) == null || w.focus();
+  }, [e]), B(() => {
+    const w = (x) => {
+      x.key === "Escape" && r();
     };
-    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
   }, [r]), !m) return null;
-  const v = Xn(m), C = e.length > 1 ? `${e.length} selected` : u ? Pe(u) : "Area selection", w = (y) => {
-    a.trim() && i(a, y);
+  const b = Qn(m), E = e.length > 1 ? `${e.length} selected` : c ? $e(c) : "Area selection", k = (w) => {
+    a.trim() && i(a, w);
   };
   return /* @__PURE__ */ n(
-    Ne,
+    ke,
     {
       variant: "popover",
-      style: { top: v.top, left: v.left },
-      children: /* @__PURE__ */ c(
+      style: { top: b.top, left: b.left },
+      children: /* @__PURE__ */ d(
         "div",
         {
-          ref: d,
+          ref: u,
           role: "dialog",
           "aria-modal": "true",
           "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: C }) }),
-            (b || g) && /* @__PURE__ */ c("div", { className: "pa-popover-context", children: [
-              b && /* @__PURE__ */ c("p", { className: "pa-popover-context-line", children: [
+            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: E }) }),
+            (v || f) && /* @__PURE__ */ d("div", { className: "pa-popover-context", children: [
+              v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Selected" }),
-                b
+                v
               ] }),
-              g && g !== b && /* @__PURE__ */ c("p", { className: "pa-popover-context-line", children: [
+              f && f !== v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Element" }),
-                g
+                f
               ] })
             ] }),
-            /* @__PURE__ */ c("label", { className: "pa-label", children: [
+            /* @__PURE__ */ d("label", { className: "pa-label", children: [
               "Note",
               /* @__PURE__ */ n(
                 "textarea",
                 {
-                  ref: o,
+                  ref: s,
                   className: "pa-textarea",
                   value: a,
-                  onChange: (y) => s(y.target.value),
+                  onChange: (w) => o(w.target.value),
                   placeholder: "Describe the change...",
                   rows: 3,
-                  onKeyDown: (y) => {
-                    y.key === "Enter" && (y.metaKey || y.ctrlKey) && (y.preventDefault(), w(y.shiftKey)), y.key === "Escape" && r();
+                  onKeyDown: (w) => {
+                    w.key === "Enter" && (w.metaKey || w.ctrlKey) && (w.preventDefault(), k(w.shiftKey)), w.key === "Escape" && r();
                   }
                 }
               )
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
-            /* @__PURE__ */ c("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(B, { variant: "ghost", onClick: r, children: "Cancel" }),
+            /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
+              /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, children: "Cancel" }),
               /* @__PURE__ */ n(
-                B,
+                H,
                 {
                   variant: "ghost",
-                  onClick: () => w(!0),
+                  onClick: () => k(!0),
                   disabled: !a.trim(),
                   children: "Add & next"
                 }
               ),
               /* @__PURE__ */ n(
-                B,
+                H,
                 {
                   variant: "glass-primary",
-                  onClick: () => w(!1),
+                  onClick: () => k(!1),
                   disabled: !a.trim(),
                   children: "Add"
                 }
@@ -2011,7 +2037,7 @@ function Gn({
     }
   );
 }
-function Kn({ area: e, isDragging: t }) {
+function tr({ area: e, isDragging: t }) {
   return !e || e.width < 2 || e.height < 2 ? null : /* @__PURE__ */ n(
     "div",
     {
@@ -2026,7 +2052,7 @@ function Kn({ area: e, isDragging: t }) {
     }
   );
 }
-function jn(e) {
+function nr(e) {
   const { elements: t, note: i, areaBbox: r } = e, a = t[0];
   if (!a && r)
     return {
@@ -2045,39 +2071,39 @@ function jn(e) {
     };
   if (!a)
     throw new Error("buildAnnotationEntry requires at least one element or areaBbox");
-  const s = a.getBoundingClientRect(), o = Oe(a), d = mt(), u = se(a), l = u.kind !== "none" ? u.value : void 0, p = t.map((m) => ht(m));
+  const o = a.getBoundingClientRect(), s = Fe(a), u = yt(), c = oe(a), l = c.kind !== "none" ? c.value : void 0, p = t.map((m) => vt(m));
   return {
     id: crypto.randomUUID(),
     selector: p[0],
     selectors: p.length > 1 ? p : void 0,
     note: i.trim(),
-    position: { x: Math.round(s.x), y: Math.round(s.y) },
+    position: { x: Math.round(o.x), y: Math.round(o.y) },
     bbox: {
-      x: Math.round(s.x),
-      y: Math.round(s.y),
-      width: Math.round(s.width),
-      height: Math.round(s.height)
+      x: Math.round(o.x),
+      y: Math.round(o.y),
+      width: Math.round(o.width),
+      height: Math.round(o.height)
     },
     areaBbox: r,
-    domPath: Ft(a),
-    selectedText: d,
+    domPath: Ut(a),
+    selectedText: u,
     elementText: l,
-    sourceFile: o.sourceFile,
-    lineNumber: o.lineNumber,
-    componentName: Ot(a) ?? o.componentName,
+    sourceFile: s.sourceFile,
+    lineNumber: s.lineNumber,
+    componentName: Vt(a) ?? s.componentName,
     createdAt: Date.now()
   };
 }
-function qn(e) {
-  const t = ft(e);
+function rr(e) {
+  const t = wt(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: a, height: o } = e.bbox;
+    return new DOMRect(i, r, a, o);
   }
   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: a, height: o } = e.areaBbox;
+    return new DOMRect(i, r, a, o);
   }
   if (e.position) {
     const { x: i, y: r } = e.position;
@@ -2085,43 +2111,43 @@ function qn(e) {
   }
   return null;
 }
-function Jn(e) {
+function ir(e) {
   return `${Math.round(e.top)}:${Math.round(e.left)}:${Math.round(e.width)}:${Math.round(e.height)}`;
 }
-const Zn = 20;
-function Qn({ annotations: e }) {
+const ar = 20;
+function or({ annotations: e }) {
   const [t, i] = A([]);
-  return z(() => {
+  return B(() => {
     if (e.length === 0) {
       i([]);
       return;
     }
     const r = /* @__PURE__ */ new Map(), a = () => {
-      const d = [];
-      e.forEach((u, l) => {
-        const p = qn(u);
+      const u = [];
+      e.forEach((c, l) => {
+        const p = rr(c);
         if (!p) return;
-        const m = Jn(p), b = r.get(m) ?? 0;
-        r.set(m, b + 1), d.push({
-          id: u.id,
+        const m = ir(p), v = r.get(m) ?? 0;
+        r.set(m, v + 1), u.push({
+          id: c.id,
           index: l + 1,
-          top: p.top - 6 - b * Zn,
+          top: p.top - 6 - v * ar,
           left: p.right - 6
         });
-      }), i(d);
+      }), i(u);
     };
     a();
-    const s = /* @__PURE__ */ new Set();
-    for (const d of e) {
-      const u = ft(d);
-      u && s.add(u);
+    const o = /* @__PURE__ */ new Set();
+    for (const u of e) {
+      const c = wt(u);
+      c && o.add(c);
     }
-    const o = Array.from(s).map((d) => {
-      const u = new ResizeObserver(a);
-      return u.observe(d), u;
+    const s = Array.from(o).map((u) => {
+      const c = new ResizeObserver(a);
+      return c.observe(u), c;
     });
     return window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
-      for (const d of o) d.disconnect();
+      for (const u of s) u.disconnect();
       window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
     };
   }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(Y, { children: t.map((r) => /* @__PURE__ */ n(
@@ -2135,24 +2161,24 @@ function Qn({ annotations: e }) {
     r.id
   )) });
 }
-const _e = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
-function ye(e) {
-  return e instanceof Element ? !!e.closest(_e) : !1;
+const Ve = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
+function we(e) {
+  return e instanceof Element ? !!e.closest(Ve) : !1;
 }
-function st(e, t) {
+function dt(e, t) {
   return document.elementsFromPoint(e, t).find(
-    (r) => r instanceof Element && !r.closest(_e)
+    (r) => r instanceof Element && !r.closest(Ve)
   ) ?? null;
 }
-function At(e) {
+function Tt(e) {
   return e ? e === "Copied all!" || e.startsWith("Copy failed") : !1;
 }
-function St({
+function Pt({
   feedback: e,
   slotClassName: t,
   children: i
 }) {
-  return e && At(e) ? /* @__PURE__ */ n(
+  return e && Tt(e) ? /* @__PURE__ */ n(
     "span",
     {
       className: `pa-status pa-copy-feedback-slot ${t}`,
@@ -2162,42 +2188,42 @@ function St({
     }
   ) : /* @__PURE__ */ n(Y, { children: i });
 }
-function er({
+function sr({
   annotations: e,
   collapsed: t,
   onToggleCollapsed: i,
   onClose: r,
   onCopyAll: a,
-  onCopyOne: s,
-  onRemove: o,
-  onUpdate: d,
-  copyStatus: u,
+  onCopyOne: o,
+  onRemove: s,
+  onUpdate: u,
+  copyStatus: c,
   copiedEntryId: l,
   copyAllFrom: p
 }) {
-  const [m, b] = A(null), [f, g] = A("");
-  z(() => {
-    const w = (y) => {
-      y.key === "Escape" && (t ? r() : i());
+  const [m, v] = A(null), [g, f] = A("");
+  B(() => {
+    const k = (w) => {
+      w.key === "Escape" && (t ? r() : i());
     };
-    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [t, r, i]);
-  const v = (w) => {
-    b(w.id), g(w.note);
-  }, C = (w) => {
-    f.trim() && (d(w, { note: f.trim() }), b(null));
+  const b = (k) => {
+    v(k.id), f(k.note);
+  }, E = (k) => {
+    g.trim() && (u(k, { note: g.trim() }), v(null));
   };
-  return /* @__PURE__ */ c(
-    Ne,
+  return /* @__PURE__ */ d(
+    ke,
     {
       variant: "sheet",
       side: "right",
       className: t ? "pa-session-panel--collapsed" : void 0,
       children: [
-        /* @__PURE__ */ c("div", { className: "pa-session-header", children: [
-          /* @__PURE__ */ c("div", { className: "pa-session-header-main", children: [
+        /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
+          /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
-              B,
+              H,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
@@ -2207,21 +2233,21 @@ function er({
                 children: /* @__PURE__ */ n("span", { className: "pa-session-chevron", "aria-hidden": "true", children: t ? "▶" : "▼" })
               }
             ),
-            /* @__PURE__ */ c("h3", { className: "pa-session-title", children: [
+            /* @__PURE__ */ d("h3", { className: "pa-session-title", children: [
               "Session (",
               e.length,
               ")"
             ] })
           ] }),
           !t && /* @__PURE__ */ n("p", { className: "pa-session-subtitle", children: "Persists until tab close" }),
-          /* @__PURE__ */ c("div", { className: "pa-session-actions", children: [
+          /* @__PURE__ */ d("div", { className: "pa-session-actions", children: [
             /* @__PURE__ */ n(
-              St,
+              Pt,
               {
-                feedback: p === "session" ? u : null,
+                feedback: p === "session" ? c : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
@@ -2232,46 +2258,46 @@ function er({
                 )
               }
             ),
-            /* @__PURE__ */ n(B, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
+            /* @__PURE__ */ n(H, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
           ] })
         ] }),
-        !t && /* @__PURE__ */ c("ul", { className: "pa-session-list", 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((w) => {
-            const y = Bt(w);
-            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: m === w.id ? /* @__PURE__ */ c("div", { className: "pa-session-edit", children: [
-              /* @__PURE__ */ c("label", { className: "pa-label", children: [
+          e.map((k) => {
+            const w = Wt(k);
+            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: m === k.id ? /* @__PURE__ */ d("div", { className: "pa-session-edit", children: [
+              /* @__PURE__ */ d("label", { className: "pa-label", children: [
                 "Note",
                 /* @__PURE__ */ n(
                   "textarea",
                   {
                     className: "pa-textarea",
-                    value: f,
-                    onChange: (N) => g(N.target.value),
+                    value: g,
+                    onChange: (x) => f(x.target.value),
                     rows: 3
                   }
                 )
               ] }),
-              /* @__PURE__ */ c("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(B, { variant: "ghost", onClick: () => b(null), children: "Cancel" }),
+              /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
+                /* @__PURE__ */ n(H, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "glass-primary",
-                    onClick: () => C(w.id),
-                    disabled: !f.trim(),
+                    onClick: () => E(k.id),
+                    disabled: !g.trim(),
                     children: "Save"
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ c(Y, { children: [
-              /* @__PURE__ */ c("div", { className: "pa-session-content", children: [
-                /* @__PURE__ */ n("span", { className: "pa-session-target", children: y.target }),
-                /* @__PURE__ */ n("p", { className: "pa-session-note", children: y.note }),
-                y.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: y.meta })
+            ] }) : /* @__PURE__ */ d(Y, { 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__ */ c("div", { className: "pa-session-item-actions", children: [
-                u === "Copied!" && l === w.id ? /* @__PURE__ */ n(
+              /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
+                c === "Copied!" && l === k.id ? /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-status pa-copy-feedback-slot pa-copy-feedback-slot--item",
@@ -2280,45 +2306,45 @@ function er({
                     children: "Copied!"
                   }
                 ) : /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "glass-primary",
                     className: "pa-glass-btn--sm",
-                    onClick: () => s(w.id),
+                    onClick: () => o(k.id),
                     "aria-label": "Copy annotation",
                     children: "Copy"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => v(w),
+                    onClick: () => b(k),
                     "aria-label": "Edit annotation note",
                     children: "✎"
                   }
                 ),
                 /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => o(w.id),
+                    onClick: () => s(k.id),
                     "aria-label": "Remove annotation",
                     children: "✕"
                   }
                 )
               ] })
-            ] }) }, w.id);
+            ] }) }, k.id);
           })
         ] })
       ]
     }
   );
 }
-function tr() {
-  return /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+function lr() {
+  return /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
       {
@@ -2338,8 +2364,8 @@ function tr() {
     )
   ] });
 }
-function nr() {
-  return /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+function cr() {
+  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(
       "path",
@@ -2352,7 +2378,7 @@ function nr() {
     )
   ] });
 }
-function rr() {
+function dr() {
   return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -2363,50 +2389,50 @@ function rr() {
     }
   ) });
 }
-function ir({
+function ur({
   open: e,
   onClose: t,
   hostTheme: i,
   chrome: r,
   onToggleHostTheme: a
 }) {
-  const s = V(null);
-  return z(() => {
+  const o = V(null);
+  return B(() => {
     if (!e) return;
-    const o = (u) => {
-      u.key === "Escape" && t();
-    }, d = (u) => {
+    const s = (c) => {
+      c.key === "Escape" && t();
+    }, u = (c) => {
       var p, m;
-      const l = u.target;
-      (p = s.current) != null && p.contains(l) || (m = l.closest) != null && m.call(l, "[data-pa-settings-trigger]") || t();
+      const l = c.target;
+      (p = o.current) != null && p.contains(l) || (m = l.closest) != null && m.call(l, "[data-pa-settings-trigger]") || t();
     };
-    return window.addEventListener("keydown", o), window.addEventListener("mousedown", d), () => {
-      window.removeEventListener("keydown", o), window.removeEventListener("mousedown", d);
+    return window.addEventListener("keydown", s), window.addEventListener("mousedown", u), () => {
+      window.removeEventListener("keydown", s), window.removeEventListener("mousedown", u);
     };
-  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Ne, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ c("div", { className: "pa-settings-menu-inner", children: [
-    /* @__PURE__ */ c("header", { className: "pa-settings-menu-header", children: [
+  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: o, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(ke, { 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" })
     ] }),
-    /* @__PURE__ */ c("section", { className: "pa-settings-section", children: [
+    /* @__PURE__ */ d("section", { className: "pa-settings-section", children: [
       /* @__PURE__ */ n("span", { className: "pa-settings-section-label", children: "Host theme" }),
-      /* @__PURE__ */ c("div", { className: "pa-settings-row", children: [
+      /* @__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(
-          B,
+          H,
           {
             variant: "icon",
             onClick: a,
             "aria-label": i === "dark" ? "Switch host to light theme" : "Switch host to dark theme",
             title: i === "dark" ? "Light theme" : "Dark theme",
-            children: i === "dark" ? /* @__PURE__ */ n(nr, {}) : /* @__PURE__ */ n(rr, {})
+            children: i === "dark" ? /* @__PURE__ */ n(cr, {}) : /* @__PURE__ */ n(dr, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ c("section", { className: "pa-settings-section", children: [
+    /* @__PURE__ */ d("section", { className: "pa-settings-section", children: [
       /* @__PURE__ */ n("span", { className: "pa-settings-section-label", children: "Glass chrome" }),
-      /* @__PURE__ */ c("p", { className: "pa-settings-hint", children: [
+      /* @__PURE__ */ d("p", { className: "pa-settings-hint", children: [
         r === "dim" ? "Dim gray glass for readability on bright pages." : "Frosted glass for dark pages.",
         " ",
         "(auto)"
@@ -2414,29 +2440,29 @@ function ir({
     ] })
   ] }) }) }) : null;
 }
-const lt = "0 0 24 24";
-function ar() {
-  return /* @__PURE__ */ c(Y, { children: [
+const ut = "0 0 24 24";
+function pr() {
+  return /* @__PURE__ */ d(Y, { children: [
     /* @__PURE__ */ n("rect", { x: "3", y: "14", width: "4", height: "4", fill: "currentColor" }),
     /* @__PURE__ */ n("path", { fill: "currentColor", d: "M7 5h12v12L7 5z" })
   ] });
 }
-const or = "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 sr({ size: e = 22, variant: t = "cursor" }) {
+const hr = "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 mr({ size: e = 22, variant: t = "cursor" }) {
   return t === "pointer" ? /* @__PURE__ */ n(
     "svg",
     {
       className: "pa-brand-cursor pa-brand-cursor--pointer",
       width: e,
       height: e,
-      viewBox: lt,
+      viewBox: ut,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: /* @__PURE__ */ n(
         "path",
         {
           fill: "currentColor",
-          d: or
+          d: hr
         }
       )
     }
@@ -2446,60 +2472,60 @@ function sr({ size: e = 22, variant: t = "cursor" }) {
       className: "pa-brand-cursor pa-brand-cursor--minimal",
       width: e,
       height: e,
-      viewBox: lt,
+      viewBox: ut,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ n(ar, {})
+      children: /* @__PURE__ */ n(pr, {})
     }
   );
 }
-const lr = ["element", "area", "multi"], cr = {
+const fr = ["element", "area", "multi"], gr = {
   element: "Click",
   area: "Area",
   multi: "Multi"
 };
-function dr({
+function vr({
   rootAttributes: e,
   hostTheme: t,
   chrome: i,
   settingsOpen: r,
   onToggleSettings: a,
-  onCloseSettings: s,
-  onToggleHostTheme: o,
-  active: d,
-  mode: u,
+  onCloseSettings: o,
+  onToggleHostTheme: s,
+  active: u,
+  mode: c,
   captureMode: l,
   annotationCount: p,
   multiSelectCount: m,
-  copyStatus: b,
-  copyAllFrom: f,
-  onActivateAnnotate: g,
-  onActivateEdit: v,
-  onDeactivate: C,
-  onCopyAll: w,
-  onCaptureModeChange: y,
-  onConfirmMultiSelect: N
+  copyStatus: v,
+  copyAllFrom: g,
+  onActivateAnnotate: f,
+  onActivateEdit: b,
+  onDeactivate: E,
+  onCopyAll: k,
+  onCaptureModeChange: w,
+  onConfirmMultiSelect: x
 }) {
-  const { elementRef: I, isDragging: T, style: R, dragHandleProps: k } = yt(), D = /* @__PURE__ */ c(
+  const { elementRef: L, isDragging: P, style: R, dragHandleProps: N } = Ct(), T = /* @__PURE__ */ d(
     "div",
     {
-      ref: I,
-      className: `pa-toolbar-float ${T ? "pa-toolbar-float--dragging" : ""}`,
+      ref: L,
+      className: `pa-toolbar-float ${P ? "pa-toolbar-float--dragging" : ""}`,
       style: R,
       role: "toolbar",
       "aria-label": "PixelAgent",
       children: [
-        !d && /* @__PURE__ */ n(
-          ir,
+        !u && /* @__PURE__ */ n(
+          ur,
           {
             open: r,
-            onClose: s,
+            onClose: o,
             hostTheme: t,
             chrome: i,
-            onToggleHostTheme: o
+            onToggleHostTheme: s
           }
         ),
-        /* @__PURE__ */ n(bt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ c("div", { className: "pa-toolbar-inner", children: [
+        /* @__PURE__ */ n(kt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
           /* @__PURE__ */ n(
             "button",
             {
@@ -2507,44 +2533,44 @@ function dr({
               className: "pa-toolbar-drag",
               "aria-label": "Drag PixelAgent toolbar",
               title: "Drag to move",
-              ...k,
-              children: /* @__PURE__ */ n(sr, { size: 22 })
+              ...N,
+              children: /* @__PURE__ */ n(mr, { size: 22 })
             }
           ),
           /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
-          d ? /* @__PURE__ */ c(Y, { children: [
-            /* @__PURE__ */ c("div", { className: "pa-toolbar-segment", children: [
-              /* @__PURE__ */ n("span", { className: "pa-mode-badge", children: u }),
-              u === "annotate" && /* @__PURE__ */ c(Y, { children: [
+          u ? /* @__PURE__ */ d(Y, { children: [
+            /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
+              /* @__PURE__ */ n("span", { className: "pa-mode-badge", children: c }),
+              c === "annotate" && /* @__PURE__ */ d(Y, { children: [
                 /* @__PURE__ */ n(
                   "select",
                   {
                     className: "pa-select pa-toolbar-capture-select",
                     value: l,
-                    onChange: (S) => y(S.target.value),
+                    onChange: (C) => w(C.target.value),
                     "aria-label": "Capture mode",
-                    children: lr.map((S) => /* @__PURE__ */ n("option", { value: S, children: cr[S] }, S))
+                    children: fr.map((C) => /* @__PURE__ */ n("option", { value: C, children: gr[C] }, C))
                   }
                 ),
                 m > 0 && /* @__PURE__ */ n(
-                  B,
+                  H,
                   {
                     variant: "glass-primary",
-                    onClick: N,
+                    onClick: x,
                     "aria-label": "Annotate selected elements",
                     children: m
                   }
                 ),
                 /* @__PURE__ */ n(
-                  St,
+                  Pt,
                   {
-                    feedback: f === "toolbar" ? b : null,
+                    feedback: g === "toolbar" ? v : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
-                      B,
+                      H,
                       {
                         variant: "glass-primary",
-                        onClick: w,
+                        onClick: k,
                         disabled: p === 0,
                         "aria-label": p > 0 ? `Copy all annotations (${p})` : "Copy all annotations",
                         children: p > 0 ? `Copy (${p})` : "Copy"
@@ -2555,11 +2581,11 @@ function dr({
               ] })
             ] }),
             /* @__PURE__ */ n(
-              B,
+              H,
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
-                onClick: C,
+                onClick: E,
                 "aria-label": "Close",
                 children: /* @__PURE__ */ n(
                   "svg",
@@ -2582,14 +2608,14 @@ function dr({
                 )
               }
             )
-          ] }) : /* @__PURE__ */ c("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(B, { onClick: g, children: "Annotate" }),
-            /* @__PURE__ */ n(B, { onClick: v, children: "Edit" })
+          ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
+            /* @__PURE__ */ n(H, { onClick: f, children: "Annotate" }),
+            /* @__PURE__ */ n(H, { onClick: b, children: "Edit" })
           ] }),
-          !d && /* @__PURE__ */ c(Y, { children: [
+          !u && /* @__PURE__ */ d(Y, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
-              B,
+              H,
               {
                 variant: "icon",
                 className: "pa-toolbar-settings",
@@ -2598,44 +2624,44 @@ function dr({
                 "aria-label": "PixelAgent settings",
                 "aria-expanded": r,
                 title: "Settings",
-                children: /* @__PURE__ */ n(tr, {})
+                children: /* @__PURE__ */ n(lr, {})
               }
             )
           ] }),
-          b && !At(b) && b !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: b })
+          v && !Tt(v) && v !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: v })
         ] }) })
       ]
     }
   );
-  return typeof document > "u" ? D : Fe(
+  return typeof document > "u" ? T : Be(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal",
         "data-pixelagent-toolbar-portal": !0,
         ...e,
-        children: D
+        children: T
       }
     ),
     document.body
   );
 }
-function ur() {
-  const e = V(zt()), [t, i] = A(
+function br() {
+  const e = V(Yt()), [t, i] = A(
     () => {
-      var s;
-      return ((s = e.current) == null ? void 0 : s.annotations) ?? [];
+      var o;
+      return ((o = e.current) == null ? void 0 : o.annotations) ?? [];
     }
   );
-  z(() => {
-    Ht({ annotations: t });
+  B(() => {
+    Xt({ annotations: t });
   }, [t]);
-  const r = E((s, o) => {
+  const r = I((o, s) => {
     i(
-      (d) => d.map((u) => u.id === s ? { ...u, ...o } : u)
+      (u) => u.map((c) => c.id === o ? { ...c, ...s } : c)
     );
-  }, []), a = E((s) => {
-    i((o) => o.filter((d) => d.id !== s));
+  }, []), a = I((o) => {
+    i((s) => s.filter((u) => u.id !== o));
   }, []);
   return {
     annotations: t,
@@ -2644,289 +2670,318 @@ function ur() {
     removeAnnotation: a
   };
 }
-function pr({
+function yr({
   ui: e,
   hostTheme: t,
   onHostThemeChange: i
 }) {
   const r = ue(
-    () => ({ ..._t, ...e }),
+    () => ({ ...Gt, ...e }),
     [e]
-  ), [a, s] = A(
-    () => t ?? Ke(r) ?? "dark"
-  ), [o, d] = A(!1), u = t ?? a;
-  z(() => {
+  ), [a, o] = A(
+    () => t ?? Je(r) ?? "dark"
+  ), [s, u] = A(!1), c = t ?? a;
+  B(() => {
     if (t !== void 0) return;
-    const b = () => {
-      const v = Ke(r);
-      v && s(v);
+    const v = () => {
+      const b = Je(r);
+      b && o(b);
     };
-    b();
-    const f = r.hostThemeAttribute, g = new MutationObserver(b);
-    return g.observe(document.documentElement, {
+    v();
+    const g = r.hostThemeAttribute, f = new MutationObserver(v);
+    return f.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [f]
-    }), () => g.disconnect();
+      attributeFilter: [g]
+    }), () => f.disconnect();
   }, [t, r]);
   const l = ue(
-    () => Vt(r, u),
-    [r, u]
-  ), p = E(() => {
-    const b = u === "dark" ? "light" : "dark";
+    () => Kt(r, c),
+    [r, c]
+  ), p = I(() => {
+    const v = c === "dark" ? "light" : "dark";
     if (i) {
-      i(b);
+      i(v);
       return;
     }
-    s(b), Ut(b, r);
-  }, [u, i, r]), m = E(() => {
-    d((b) => !b);
+    o(v), jt(v, r);
+  }, [c, i, r]), m = I(() => {
+    u((v) => !v);
   }, []);
   return {
     chrome: l,
-    rootAttributes: Wt(l),
-    hostTheme: u,
+    rootAttributes: qt(l),
+    hostTheme: c,
     toggleHostTheme: p,
-    settingsOpen: o,
-    setSettingsOpen: d,
+    settingsOpen: s,
+    setSettingsOpen: u,
     toggleSettings: m,
     uiSettings: r
   };
 }
-function ct(e) {
+const pt = "/__pixelagent/apply";
+function ht(e) {
   const t = Math.min(e.startX, e.currentX), i = Math.min(e.startY, e.currentY), r = Math.abs(e.currentX - e.startX), a = Math.abs(e.currentY - e.startY);
   return { x: t, y: i, width: r, height: a };
 }
-function hr({ ui: e, hostTheme: t, onHostThemeChange: i } = {}) {
-  const r = pr({ ui: e, hostTheme: t, onHostThemeChange: i }), [a, s] = A(!1), [o, d] = A("idle"), [u, l] = A("element"), {
-    annotations: p,
-    setAnnotations: m,
-    updateAnnotation: b,
-    removeAnnotation: f
-  } = ur(), [g, v] = A(null), [C, w] = A(null), [y, N] = A([]), [I, T] = A(null), [R, k] = A(null), [D, S] = A(!1), [h, P] = A(!1), U = a && o === "annotate" && p.length > 0 && !D, [K, F] = A("this-instance"), [j, M] = A("normal"), [$, O] = A(null), [H, W] = A(null), [_, Q] = A(null), ce = V(null), q = V(null), ke = E(
-    (x, L) => {
-      q.current && clearTimeout(q.current), O(x), W((L == null ? void 0 : L.entryId) ?? null), Q((L == null ? void 0 : L.copyAllFrom) ?? null), q.current = setTimeout(() => {
-        O(null), W(null), Q(null);
+function wr({
+  ui: e,
+  hostTheme: t,
+  onHostThemeChange: i,
+  applyEndpoint: r,
+  onApply: a
+} = {}) {
+  const o = yr({ ui: e, hostTheme: t, onHostThemeChange: i }), [s, u] = A(null);
+  B(() => {
+    if (r || a) return;
+    let y = !1;
+    return fetch(pt, { method: "GET" }).then((S) => {
+      !y && S.status === 405 && u(pt);
+    }).catch(() => {
+    }), () => {
+      y = !0;
+    };
+  }, [r, a]);
+  const [c, l] = A(!1), [p, m] = A("idle"), [v, g] = A("element"), {
+    annotations: f,
+    setAnnotations: b,
+    updateAnnotation: E,
+    removeAnnotation: k
+  } = br(), [w, x] = A(null), [L, P] = A(null), [R, N] = A([]), [T, C] = A(null), [h, O] = A(null), [U, j] = A(!1), [z, K] = A(!1), M = c && p === "annotate" && f.length > 0 && !U, [D, $] = A("this-instance"), [F, W] = A("normal"), [_, ee] = A(null), [le, q] = A(null), [Ue, We] = A(null), Rt = V(null), Ce = V(null), ce = I(
+    (y, S) => {
+      Ce.current && clearTimeout(Ce.current), ee(y), q((S == null ? void 0 : S.entryId) ?? null), We((S == null ? void 0 : S.copyAllFrom) ?? null), Ce.current = setTimeout(() => {
+        ee(null), q(null), We(null);
       }, 2500);
     },
     []
-  ), ne = E(
-    async (x, L, X) => {
-      if (x)
+  ), pe = I(
+    async (y, S, X) => {
+      if (y)
         try {
-          await Yt(x), ke(L, X);
+          await bt(y), ce(S, X);
         } catch {
-          ke("Copy failed — check clipboard permissions", X);
+          ce("Copy failed — check clipboard permissions", X);
         }
     },
-    [ke]
-  ), de = E(
-    (x, L) => {
-      x.length === 0 && !L || (T({ elements: x, areaBbox: L }), w(x[0] ?? null));
+    [ce]
+  ), de = I(
+    (y, S) => {
+      y.length === 0 && !S || (C({ elements: y, areaBbox: S }), P(y[0] ?? null));
     },
     []
-  ), Ce = E(
-    (x) => {
-      if (!(!a || o !== "annotate" || ye(x.target))) {
-        if (R) {
-          k(
-            (L) => L && { ...L, currentX: x.clientX, currentY: x.clientY }
+  ), Ae = I(
+    (y) => {
+      if (!(!c || p !== "annotate" || we(y.target))) {
+        if (h) {
+          O(
+            (S) => S && { ...S, currentX: y.clientX, currentY: y.clientY }
           );
           return;
         }
-        u !== "area" && v(st(x.clientX, x.clientY));
+        v !== "area" && x(dt(y.clientX, y.clientY));
       }
     },
-    [a, o, R, u]
-  ), Me = E(
-    (x) => {
-      !a || o !== "annotate" || ye(x.target) || u !== "area" || x.button !== 0 || (x.preventDefault(), x.stopPropagation(), k({
-        startX: x.clientX,
-        startY: x.clientY,
-        currentX: x.clientX,
-        currentY: x.clientY
-      }), T(null));
+    [c, p, h, v]
+  ), Me = I(
+    (y) => {
+      !c || p !== "annotate" || we(y.target) || v !== "area" || y.button !== 0 || (y.preventDefault(), y.stopPropagation(), O({
+        startX: y.clientX,
+        startY: y.clientY,
+        currentX: y.clientX,
+        currentY: y.clientY
+      }), C(null));
     },
-    [a, o, u]
-  ), Ae = E(() => {
-    if (!R) return;
-    const x = ct(R);
-    if (k(null), x.width < 8 || x.height < 8) return;
-    const L = Xt(x, _e);
-    de(L, x);
-  }, [R, de]), Se = E(
-    (x) => {
-      if (!a || o !== "annotate" || ye(x.target) || u === "area") return;
-      x.preventDefault(), x.stopPropagation();
-      const L = st(x.clientX, x.clientY);
-      if (!L) return;
-      if (x.shiftKey || u === "multi") {
-        N((re) => re.includes(L) ? re.filter((Le) => Le !== L) : [...re, L]), w(L);
+    [c, p, v]
+  ), Se = I(() => {
+    if (!h) return;
+    const y = ht(h);
+    if (O(null), y.width < 8 || y.height < 8) return;
+    const S = Jt(y, Ve);
+    de(S, y);
+  }, [h, de]), Le = I(
+    (y) => {
+      if (!c || p !== "annotate" || we(y.target) || v === "area") return;
+      y.preventDefault(), y.stopPropagation();
+      const S = dt(y.clientX, y.clientY);
+      if (!S) return;
+      if (y.shiftKey || v === "multi") {
+        N((J) => J.includes(S) ? J.filter((Ee) => Ee !== S) : [...J, S]), P(S);
         return;
       }
-      const X = y.length > 0 ? y : [L];
-      de(X.includes(L) ? X : [L]);
+      const X = R.length > 0 ? R : [S];
+      de(X.includes(S) ? X : [S]);
     },
-    [a, o, u, y, de]
+    [c, p, v, R, de]
   );
-  z(() => {
-    !C || K !== "all-instances" || ut(C) <= 1 && F("this-instance");
-  }, [C, K]), z(() => {
-    if (a)
-      return document.addEventListener("mousemove", Ce, !0), document.addEventListener("mousedown", Me, !0), document.addEventListener("mouseup", Ae, !0), document.addEventListener("click", Se, !0), () => {
-        document.removeEventListener("mousemove", Ce, !0), document.removeEventListener("mousedown", Me, !0), document.removeEventListener("mouseup", Ae, !0), document.removeEventListener("click", Se, !0);
+  B(() => {
+    !L || D !== "all-instances" || ft(L) <= 1 && $("this-instance");
+  }, [L, D]), B(() => {
+    if (c)
+      return document.addEventListener("mousemove", Ae, !0), document.addEventListener("mousedown", Me, !0), document.addEventListener("mouseup", Se, !0), document.addEventListener("click", Le, !0), () => {
+        document.removeEventListener("mousemove", Ae, !0), document.removeEventListener("mousedown", Me, !0), document.removeEventListener("mouseup", Se, !0), document.removeEventListener("click", Le, !0);
       };
-  }, [a, Ce, Me, Ae, Se]);
-  const Lt = E(
-    (x, L) => {
-      if (!I || !x.trim()) return;
-      const { elements: X, areaBbox: re } = I;
-      if (X.length === 0 && !re) return;
-      const We = jn({
+  }, [c, Ae, Me, Se, Le]);
+  const Dt = I(
+    (y, S) => {
+      if (!T || !y.trim()) return;
+      const { elements: X, areaBbox: J } = T;
+      if (X.length === 0 && !J) return;
+      const Ge = nr({
         elements: X,
-        note: x,
-        areaBbox: re
+        note: y,
+        areaBbox: J
       });
-      m((Le) => [...Le, We]), S(!1), P(!1), L ? (T(null), w(null)) : (T(null), w(null), N([]));
+      b((Ee) => [...Ee, Ge]), j(!1), K(!1), S ? (C(null), P(null)) : (C(null), P(null), N([]));
     },
-    [I, m]
-  ), Et = E(() => {
-    T(null), w(null);
-  }, []), Ve = E(
-    async (x) => {
-      const L = Gt(p);
-      await ne(L, "Copied all!", { copyAllFrom: x });
+    [T, b]
+  ), Ot = I(() => {
+    C(null), P(null);
+  }, []), Ye = I(
+    async (y) => {
+      const S = Zt(f);
+      await pe(S, "Copied all!", { copyAllFrom: y });
     },
-    [p, ne]
-  ), It = E(
-    async (x) => {
-      const L = p.find((X) => X.id === x);
-      L && await ne(Kt(L), "Copied!", { entryId: x });
+    [f, pe]
+  ), $t = I(
+    async (y) => {
+      const S = f.find((X) => X.id === y);
+      S && await pe(Qt(S), "Copied!", { entryId: y });
     },
-    [p, ne]
-  ), Tt = E(
-    async (x) => {
-      if (!C) return;
-      const L = Oe(C), X = {
+    [f, pe]
+  ), Ft = I(
+    async (y) => {
+      if (!L) return;
+      const S = Fe(L), X = {
         schemaVersion: 1,
-        elementSelector: pt(C, K),
-        sourceFile: L.sourceFile,
-        lineNumber: L.lineNumber,
-        targetScope: K,
-        state: j,
-        stylingSystem: dt(C),
-        changes: x
-      };
-      await ne(JSON.stringify(X, null, 2), "Apply payload copied!");
+        elementSelector: gt(L, D),
+        sourceFile: S.sourceFile,
+        lineNumber: S.lineNumber,
+        targetScope: D,
+        state: F,
+        stylingSystem: mt(L),
+        changes: y
+      }, J = await Un(X, {
+        applyEndpoint: r ?? s ?? void 0,
+        onApply: a
+      });
+      ce(Wn(J));
     },
-    [C, K, j, ne]
-  ), Ue = (x) => {
-    r.setSettingsOpen(!1), s(!0), d(x), w(null), v(null), T(null), N([]), k(null), x === "annotate" && S(!1);
-  }, Rt = () => {
-    s(!1), d("idle"), w(null), v(null), T(null), N([]), k(null), S(!1), P(!1);
-  }, Dt = R ? ct(R) : null;
-  return /* @__PURE__ */ c(
+    [
+      L,
+      D,
+      F,
+      r,
+      s,
+      a,
+      ce
+    ]
+  ), Xe = (y) => {
+    o.setSettingsOpen(!1), l(!0), m(y), P(null), x(null), C(null), N([]), O(null), y === "annotate" && j(!1);
+  }, Bt = () => {
+    l(!1), m("idle"), P(null), x(null), C(null), N([]), O(null), j(!1), K(!1);
+  }, zt = h ? ht(h) : null;
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: ce,
+      ref: Rt,
       className: "pa-root",
       "data-pixelagent-root": !0,
-      ...r.rootAttributes,
+      ...o.rootAttributes,
       children: [
         /* @__PURE__ */ n(
-          dr,
+          vr,
           {
-            rootAttributes: r.rootAttributes,
-            hostTheme: r.hostTheme,
-            chrome: r.chrome,
-            settingsOpen: r.settingsOpen,
-            onToggleSettings: r.toggleSettings,
-            onCloseSettings: () => r.setSettingsOpen(!1),
-            onToggleHostTheme: r.toggleHostTheme,
-            active: a,
-            mode: o,
-            captureMode: u,
-            annotationCount: p.length,
-            multiSelectCount: y.length,
-            copyStatus: $,
-            copyAllFrom: _,
-            onActivateAnnotate: () => Ue("annotate"),
-            onActivateEdit: () => Ue("edit"),
-            onDeactivate: Rt,
-            onCopyAll: () => Ve("toolbar"),
-            onCaptureModeChange: l,
+            rootAttributes: o.rootAttributes,
+            hostTheme: o.hostTheme,
+            chrome: o.chrome,
+            settingsOpen: o.settingsOpen,
+            onToggleSettings: o.toggleSettings,
+            onCloseSettings: () => o.setSettingsOpen(!1),
+            onToggleHostTheme: o.toggleHostTheme,
+            active: c,
+            mode: p,
+            captureMode: v,
+            annotationCount: f.length,
+            multiSelectCount: R.length,
+            copyStatus: _,
+            copyAllFrom: Ue,
+            onActivateAnnotate: () => Xe("annotate"),
+            onActivateEdit: () => Xe("edit"),
+            onDeactivate: Bt,
+            onCopyAll: () => Ye("toolbar"),
+            onCaptureModeChange: g,
             onConfirmMultiSelect: () => {
-              y.length > 0 && de(y);
+              R.length > 0 && de(R);
             }
           }
         ),
-        a && o === "annotate" && /* @__PURE__ */ c(Y, { children: [
+        c && p === "annotate" && /* @__PURE__ */ d(Y, { children: [
           /* @__PURE__ */ n(
-            gt,
+            xt,
             {
-              element: g,
-              selected: C,
-              multiSelected: y
+              element: w,
+              selected: L,
+              multiSelected: R
             }
           ),
-          /* @__PURE__ */ n(Qn, { annotations: p }),
-          /* @__PURE__ */ n(Kn, { area: Dt, isDragging: !!R })
+          /* @__PURE__ */ n(or, { annotations: f }),
+          /* @__PURE__ */ n(tr, { area: zt, isDragging: !!h })
         ] }),
-        a && o === "annotate" && I && /* @__PURE__ */ n(
-          Gn,
+        c && p === "annotate" && T && /* @__PURE__ */ n(
+          er,
           {
-            elements: I.elements,
-            areaBbox: I.areaBbox,
-            onSubmit: Lt,
-            onCancel: Et
+            elements: T.elements,
+            areaBbox: T.areaBbox,
+            onSubmit: Dt,
+            onCancel: Ot
           }
         ),
-        a && o === "edit" && /* @__PURE__ */ n(
-          Fn,
+        c && p === "edit" && /* @__PURE__ */ n(
+          Vn,
           {
-            selectedElement: C,
-            hoveredElement: g,
-            onSelectElement: w,
-            onHoverElement: v,
-            targetScope: K,
-            onTargetScopeChange: F,
-            elementState: j,
-            onElementStateChange: M,
-            onApply: Tt,
-            applyStatus: o === "edit" ? $ : null,
-            isToolbarTarget: ye
+            selectedElement: L,
+            hoveredElement: w,
+            onSelectElement: P,
+            onHoverElement: x,
+            targetScope: D,
+            onTargetScopeChange: $,
+            elementState: F,
+            onElementStateChange: W,
+            onApply: Ft,
+            applyStatus: p === "edit" ? _ : null,
+            isToolbarTarget: we
           }
         ),
-        U && /* @__PURE__ */ n(
-          er,
+        M && /* @__PURE__ */ n(
+          sr,
           {
-            annotations: p,
-            collapsed: h,
-            onToggleCollapsed: () => P((x) => !x),
+            annotations: f,
+            collapsed: z,
+            onToggleCollapsed: () => K((y) => !y),
             onClose: () => {
-              S(!0), P(!1);
+              j(!0), K(!1);
             },
-            onCopyAll: () => Ve("session"),
-            onCopyOne: It,
-            onRemove: f,
-            onUpdate: b,
-            copyStatus: $,
-            copiedEntryId: H,
-            copyAllFrom: _
+            onCopyAll: () => Ye("session"),
+            onCopyOne: $t,
+            onRemove: k,
+            onUpdate: E,
+            copyStatus: _,
+            copiedEntryId: le,
+            copyAllFrom: Ue
           }
         )
       ]
     }
   );
 }
-function mr() {
+function xr() {
   return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function yr() {
-  return mr() ? /* @__PURE__ */ n(hr, {}) : null;
+function Mr() {
+  return xr() ? /* @__PURE__ */ n(wr, {}) : null;
 }
 export {
-  hr as PixelAgent,
-  yr as PixelAgentDev,
-  mr as isDevEnvironment
+  wr as PixelAgent,
+  Mr as PixelAgentDev,
+  xr as isDevEnvironment
 };
 //# sourceMappingURL=pixelagent.js.map