pixelagent 0.1.15 → 0.1.17

package/dist/pixelagent.js

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