pixelagent 0.1.18 → 0.1.20

package/dist/pixelagent.js

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