pixelagent 0.1.20 → 0.1.22

package/dist/pixelagent.js

@@ -1,54 +1,54 @@
-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";
+import { jsxs as c, Fragment as q, jsx as n } from "react/jsx-runtime";
+import { useState as A, useEffect as _, useRef as j, useMemo as Me, useLayoutEffect as Kt, useCallback as L, useId as qt } from "react";
+import { getElementDisplayLabel as je, captureTextSnapshot as tt, captureInlineStyles as nt, restoreInlineStyles as Ne, restoreTextSnapshot as Ae, getPreviewTargets as $e, clearTailwindStatePreview as ze, applyTailwindStatePreview as Be, setEditableTextPreview as at, getRelevantComputedStyles as Ce, getEditableTextInfo as xe, readStateRuleDeclarations as Jt, readReactSource as Xe, detectStylingSystem as Ct, countElementInstances as Mt, getScopeSelector as At, getCssSelector as zt, copyToClipboard as St, getWindowSelectionText as Lt, getNearestReactComponentName as Zt, getDomPath as Qt, resolveElementFromEntry as Et, getAnnotationSessionDisplay as en, loadAnnotationSession as tn, saveAnnotationSession as nn, DEFAULT_PIXEL_AGENT_UI_SETTINGS as an, readHostThemeFromDocument as rt, resolvePixelAgentChrome as rn, applyHostThemeToDocument as on, pixelAgentRootAttributes as sn, getElementsInArea as ln, formatAllAnnotations as pn, formatAnnotation as cn } from "@pixelagent/shared";
 export * from "@pixelagent/shared";
-import { createPortal as Ke } from "react-dom";
-function Et({
+import { createPortal as Ge } from "react-dom";
+function It({
   element: e,
   selected: t,
-  multiSelected: i = [],
-  primarySelected: r = null
+  multiSelected: r = [],
+  primarySelected: a = null
 }) {
-  const [o, s] = A([]), a = r ?? t;
+  const [o, s] = A([]), i = a ?? t;
   if (_(() => {
-    const l = /* @__PURE__ */ new Map(), f = i.length > 0;
-    e && !t && !f && l.set(e, !1), t && l.set(t, !0);
-    for (const m of i)
-      l.set(m, !0);
+    const l = /* @__PURE__ */ new Map(), g = r.length > 0;
+    e && !t && !g && l.set(e, !1), t && l.set(t, !0);
+    for (const h of r)
+      l.set(h, !0);
     if (l.size === 0) {
       s([]);
       return;
     }
-    const p = () => {
+    const f = () => {
       s(
-        Array.from(l.entries()).map(([m, g]) => ({
-          rect: m.getBoundingClientRect(),
-          label: Xe(m),
-          isSelected: g,
-          isPrimary: a !== null && m === a
+        Array.from(l.entries()).map(([h, m]) => ({
+          rect: h.getBoundingClientRect(),
+          label: je(h),
+          isSelected: m,
+          isPrimary: i !== null && h === i
         }))
       );
     };
-    p();
-    const v = Array.from(l.keys()).map((m) => {
-      const g = new ResizeObserver(p);
-      return g.observe(m), g;
+    f();
+    const x = Array.from(l.keys()).map((h) => {
+      const m = new ResizeObserver(f);
+      return m.observe(h), m;
     });
-    return window.addEventListener("scroll", p, !0), window.addEventListener("resize", p), () => {
-      for (const m of v) m.disconnect();
-      window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p);
+    return window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
+      for (const h of x) h.disconnect();
+      window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
     };
-  }, [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(
+  }, [e, t, r, i]), o.length === 0) return null;
+  const p = o.find((l) => l.isPrimary) ?? o.find((l) => l.isSelected) ?? o[0], d = o.filter((l) => l.isSelected).length;
+  return /* @__PURE__ */ c(q, { children: [
+    o.map((l, g) => /* @__PURE__ */ n(
       "div",
       {
         className: [
           "pa-highlight",
           l.isSelected ? "pa-highlight-selected" : "",
           l.isPrimary ? "pa-highlight-primary" : "",
-          l.isSelected && !l.isPrimary && u > 1 ? "pa-highlight-scope" : ""
+          l.isSelected && !l.isPrimary && d > 1 ? "pa-highlight-scope" : ""
         ].filter(Boolean).join(" "),
         style: {
           top: l.rect.top,
@@ -57,106 +57,106 @@ function Et({
           height: l.rect.height
         }
       },
-      `${l.label}-${f}`
+      `${l.label}-${g}`
     )),
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-tooltip",
         style: {
-          top: Math.max(0, c.rect.top - 28),
-          left: c.rect.left
+          top: Math.max(0, p.rect.top - 28),
+          left: p.rect.left
         },
-        children: u > 1 ? `${u} instances · ${c.label}` : c.label
+        children: d > 1 ? `${d} instances · ${p.label}` : p.label
       }
     )
   ] });
 }
-const It = 0.35, dn = 0.48;
-function un(e, t, i, r = It) {
+const $t = 0.35, dn = 0.48;
+function fn(e, t, r, a = $t) {
   if (e < 8 || t < 8) return null;
-  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, a), f = l.data, p = Math.min(0.5, i / Math.min(e, t)), v = 0.3, m = 0.2, g = Math.max(0.4, p + 0.1);
-  let y = 0;
-  const S = new Float32Array(s * a * 2);
+  const o = 1, s = Math.max(1, Math.round(e * o)), i = Math.max(1, Math.round(t * o)), p = document.createElement("canvas");
+  p.width = s, p.height = i;
+  const d = p.getContext("2d");
+  if (!d) return null;
+  const l = d.createImageData(s, i), g = l.data, f = Math.min(0.5, r / Math.min(e, t)), x = 0.3, h = 0.2, m = Math.max(0.4, f + 0.1);
+  let v = 0;
+  const z = new Float32Array(s * i * 2);
   let w = 0;
-  for (let N = 0; N < a; N++)
+  for (let k = 0; k < i; k++)
     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;
+      const B = E / s - 0.5, $ = k / i - 0.5, y = un(B, $, x, h, m), I = ot(0.8, 0, y - 0.15), S = ot(0, 1, I), u = (B * S + 0.5) * s - E, O = ($ * S + 0.5) * i - k;
+      Math.abs(u) > v && (v = Math.abs(u)), Math.abs(O) > v && (v = Math.abs(O)), z[w++] = u, z[w++] = O;
     }
-  if (y === 0) return null;
-  y *= 0.4 * r;
-  let k = 0;
-  for (let N = 0; N < f.length; N += 4) {
-    const E = S[k++] / y + 0.5, z = S[k++] / y + 0.5;
-    f[N] = E * 255, f[N + 1] = z * 255, f[N + 2] = 0, f[N + 3] = 255;
+  if (v === 0) return null;
+  v *= 0.4 * a;
+  let N = 0;
+  for (let k = 0; k < g.length; k += 4) {
+    const E = z[N++] / v + 0.5, B = z[N++] / v + 0.5;
+    g[k] = E * 255, g[k + 1] = B * 255, g[k + 2] = 0, g[k + 3] = 255;
   }
-  return u.putImageData(l, 0, 0), {
-    href: c.toDataURL("image/png"),
-    scale: y / o,
+  return d.putImageData(l, 0, 0), {
+    href: p.toDataURL("image/png"),
+    scale: v / o,
     width: s,
-    height: a
+    height: i
   };
 }
-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 un(e, t, r, a, o) {
+  const s = Math.abs(e) - r + o, i = Math.abs(t) - a + o;
+  return Math.min(Math.max(s, i), 0) + Math.hypot(Math.max(s, 0), Math.max(i, 0)) - o;
 }
-function ot(e, t, i) {
-  const r = Math.max(0, Math.min(1, (i - e) / (t - e)));
-  return r * r * (3 - 2 * r);
+function ot(e, t, r) {
+  const a = Math.max(0, Math.min(1, (r - e) / (t - e)));
+  return a * a * (3 - 2 * a);
 }
-function Ue() {
+function We() {
   if (typeof navigator > "u") return !1;
   const e = navigator.userAgent;
   return !(/AppleWebKit/i.test(e) && !/Chrome|Chromium|Edg|OPR|CriOS|FxiOS/i.test(e) || /Firefox/i.test(e));
 }
-const hn = {
+const gn = {
   default: "blur(4px) saturate(130%)",
   /** Toolbar — slightly stronger frost + refraction chain. */
   enhanced: "blur(6px) saturate(138%)"
 };
-function fn(e, t = "default") {
-  const i = hn[t], o = e !== null && Ue() ? `${i} url(#${e})` : i;
+function hn(e, t = "default") {
+  const r = gn[t], o = e !== null && We() ? `${r} url(#${e})` : r;
   return {
     backdropFilter: o,
     WebkitBackdropFilter: o
   };
 }
 let mn = 0;
-function Rt({
+function Tt({
   shape: e = "rect",
   cornerRadius: t,
-  tint: i = "neutral",
-  intensity: r = "default",
+  tint: r = "neutral",
+  intensity: a = "default",
   className: o = "",
   style: s,
-  children: a
+  children: i
 }) {
-  const c = t ?? (e === "capsule" ? 9999 : 20), u = r === "enhanced" ? dn : It, l = X(null), f = Me(() => `pa-lg-${++mn}`, []), [p, v] = A(null);
+  const p = t ?? (e === "capsule" ? 9999 : 20), d = a === "enhanced" ? dn : $t, l = j(null), g = Me(() => `pa-lg-${++mn}`, []), [f, x] = 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), 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);
+    const m = l.current;
+    if (!m) return;
+    let v = 0;
+    const z = () => {
+      cancelAnimationFrame(v), v = requestAnimationFrame(() => {
+        const N = m.getBoundingClientRect(), k = Math.round(N.width), E = Math.round(N.height);
+        if (k < 8 || E < 8) return;
+        const B = e === "capsule" ? E / 2 : Math.min(p, k / 2, E / 2), $ = fn(k, E, B, d);
+        $ && x($);
       });
     };
-    S();
-    const w = new ResizeObserver(S);
-    return w.observe(g), () => {
-      cancelAnimationFrame(y), w.disconnect();
+    z();
+    const w = new ResizeObserver(z);
+    return w.observe(m), () => {
+      cancelAnimationFrame(v), w.disconnect();
     };
-  }, [e, c, u]);
-  const m = p && Ue() && typeof document < "u" ? Ke(
+  }, [e, p, d]);
+  const h = f && We() && typeof document < "u" ? Ge(
     /* @__PURE__ */ n(
       "svg",
       {
@@ -172,24 +172,24 @@ function Rt({
           overflow: "hidden",
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ d(
+        children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ c(
           "filter",
           {
-            id: f,
+            id: g,
             filterUnits: "userSpaceOnUse",
             colorInterpolationFilters: "sRGB",
             x: "0",
             y: "0",
-            width: p.width,
-            height: p.height,
+            width: f.width,
+            height: f.height,
             children: [
               /* @__PURE__ */ n(
                 "feImage",
                 {
-                  href: p.href,
-                  xlinkHref: p.href,
-                  width: p.width,
-                  height: p.height,
+                  href: f.href,
+                  xlinkHref: f.href,
+                  width: f.width,
+                  height: f.height,
                   preserveAspectRatio: "none",
                   result: "map"
                 }
@@ -199,7 +199,7 @@ function Rt({
                 {
                   in: "SourceGraphic",
                   in2: "map",
-                  scale: p.scale,
+                  scale: f.scale,
                   xChannelSelector: "R",
                   yChannelSelector: "G"
                 }
@@ -211,25 +211,25 @@ function Rt({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ d(q, { children: [
-    m,
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(q, { children: [
+    h,
+    /* @__PURE__ */ c(
       "div",
       {
         ref: l,
-        className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${i} ${o}`.trim(),
+        className: `pa-glass-surface pa-glass-surface--${e} pa-glass-surface--${r} ${o}`.trim(),
         style: {
-          borderRadius: e === "capsule" ? "999px" : `${c}px`,
-          ...fn(
-            p && Ue() ? f : null,
-            r
+          borderRadius: e === "capsule" ? "999px" : `${p}px`,
+          ...hn(
+            f && We() ? g : null,
+            a
           ),
           ...s
         },
         children: [
           /* @__PURE__ */ n("div", { className: "pa-glass-surface-bg", "aria-hidden": "true" }),
           /* @__PURE__ */ n("div", { className: "pa-glass-surface-shine", "aria-hidden": "true" }),
-          /* @__PURE__ */ n("div", { className: "pa-glass-surface-content", children: a })
+          /* @__PURE__ */ n("div", { className: "pa-glass-surface-content", children: i })
         ]
       }
     )
@@ -238,122 +238,122 @@ function Rt({
 function V({
   variant: e = "regular",
   className: t = "",
-  children: i,
-  ...r
+  children: r,
+  ...a
 }) {
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       className: `pa-glass-btn pa-glass-btn--${e} ${t}`.trim(),
-      ...r,
-      children: i
+      ...a,
+      children: r
     }
   );
 }
-function Pe({
+function Re({
   variant: e = "sheet",
   side: t = "left",
-  className: i = "",
-  style: r,
+  className: r = "",
+  style: a,
   children: o
 }) {
   return /* @__PURE__ */ n(
-    Rt,
+    Tt,
     {
       shape: "rect",
       cornerRadius: e === "popover" ? 16 : 20,
-      className: `pa-glass-panel pa-glass-panel--${e} pa-glass-panel--${t} ${i}`.trim(),
-      style: r,
+      className: `pa-glass-panel pa-glass-panel--${e} pa-glass-panel--${t} ${r}`.trim(),
+      style: a,
       children: o
     }
   );
 }
-function Tt({
+function Rt({
   defaultPosition: e = null,
   computeDefaultPosition: t
 } = {}) {
-  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;
-    const g = m.getBoundingClientRect();
-    r(
-      t ? t(g) : {
-        x: (window.innerWidth - g.width) / 2,
-        y: window.innerHeight - g.height - 24
+  const [r, a] = A(e), [o, s] = A(!1), i = j(null), p = j(null), d = L(() => {
+    if (r !== null) return;
+    const h = p.current;
+    if (!h) return;
+    const m = h.getBoundingClientRect();
+    a(
+      t ? t(m) : {
+        x: (window.innerWidth - m.width) / 2,
+        y: window.innerHeight - m.height - 24
       }
     );
-  }, [i, t]);
+  }, [r, t]);
   _(() => {
-    u();
-  }, [u]), _(() => {
-    const m = () => {
-      r((g) => {
-        if (!g || !c.current) return g;
-        const y = c.current.getBoundingClientRect();
+    d();
+  }, [d]), _(() => {
+    const h = () => {
+      a((m) => {
+        if (!m || !p.current) return m;
+        const v = p.current.getBoundingClientRect();
         return {
-          x: Math.min(g.x, window.innerWidth - y.width),
-          y: Math.min(g.y, window.innerHeight - y.height)
+          x: Math.min(m.x, window.innerWidth - v.width),
+          y: Math.min(m.y, window.innerHeight - v.height)
         };
       });
     };
-    return window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
+    return window.addEventListener("resize", h), () => window.removeEventListener("resize", h);
   }, []);
-  const l = $(
-    (m) => {
-      if (m.button !== 0) return;
-      const g = c.current;
-      if (!g) return;
-      let y = i;
-      if (!y) {
-        const S = g.getBoundingClientRect();
-        y = { x: S.left, y: S.top }, r(y);
+  const l = L(
+    (h) => {
+      if (h.button !== 0) return;
+      const m = p.current;
+      if (!m) return;
+      let v = r;
+      if (!v) {
+        const z = m.getBoundingClientRect();
+        v = { x: z.left, y: z.top }, a(v);
       }
-      a.current = {
-        pointerId: m.pointerId,
-        startX: m.clientX,
-        startY: m.clientY,
-        originX: y.x,
-        originY: y.y
-      }, s(!0), m.currentTarget.setPointerCapture(m.pointerId), m.preventDefault();
+      i.current = {
+        pointerId: h.pointerId,
+        startX: h.clientX,
+        startY: h.clientY,
+        originX: v.x,
+        originY: v.y
+      }, s(!0), h.currentTarget.setPointerCapture(h.pointerId), h.preventDefault();
     },
-    [i]
-  ), 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);
+    [r]
+  ), g = L((h) => {
+    if (!i.current || i.current.pointerId !== h.pointerId) return;
+    const m = p.current, v = (m == null ? void 0 : m.offsetWidth) ?? 320, z = (m == null ? void 0 : m.offsetHeight) ?? 48, w = h.clientX - i.current.startX, N = h.clientY - i.current.startY, k = Math.max(8, Math.min(window.innerWidth - v - 8, i.current.originX + w)), E = Math.max(8, Math.min(window.innerHeight - z - 8, i.current.originY + N));
+    a({ x: k, y: E });
+  }, []), f = L((h) => {
+    if (!(!i.current || i.current.pointerId !== h.pointerId)) {
+      i.current = null, s(!1);
       try {
-        m.currentTarget.releasePointerCapture(m.pointerId);
+        h.currentTarget.releasePointerCapture(h.pointerId);
       } catch {
       }
     }
-  }, []), v = i !== null ? {
+  }, []), x = r !== null ? {
     position: "fixed",
-    left: i.x,
-    top: i.y,
+    left: r.x,
+    top: r.y,
     transform: "none",
     marginLeft: 0,
     bottom: "auto"
   } : void 0;
   return {
-    elementRef: c,
-    position: i,
+    elementRef: p,
+    position: r,
     isDragging: o,
-    style: v,
+    style: x,
     dragHandleProps: {
       onPointerDown: l,
-      onPointerMove: f,
-      onPointerUp: p,
-      onPointerCancel: p
+      onPointerMove: g,
+      onPointerUp: f,
+      onPointerCancel: f
     }
   };
 }
-function gn({ className: e }) {
-  return /* @__PURE__ */ d("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+function xn({ className: e }) {
+  return /* @__PURE__ */ c("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
       {
@@ -378,8 +378,8 @@ 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: [
+function bn({ className: e }) {
+  return /* @__PURE__ */ c("svg", { className: e, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
     /* @__PURE__ */ n(
       "path",
       {
@@ -404,24 +404,24 @@ function vn({ className: e }) {
     )
   ] });
 }
-const be = (e, t, i) => Math.min(i, Math.max(t, e));
-function je(e) {
+const be = (e, t, r) => Math.min(r, Math.max(t, e));
+function Ke(e) {
   const t = e.trim();
   if (!t) return null;
-  const i = t.match(/^#([0-9a-f]{6})$/i);
-  if (i)
+  const r = t.match(/^#([0-9a-f]{6})$/i);
+  if (r)
     return {
-      r: parseInt(i[1].slice(0, 2), 16),
-      g: parseInt(i[1].slice(2, 4), 16),
-      b: parseInt(i[1].slice(4, 6), 16)
+      r: parseInt(r[1].slice(0, 2), 16),
+      g: parseInt(r[1].slice(2, 4), 16),
+      b: parseInt(r[1].slice(4, 6), 16)
     };
-  const r = t.match(/^#([0-9a-f]{3})$/i);
-  if (r) {
-    const [s, a, c] = r[1].split("");
+  const a = t.match(/^#([0-9a-f]{3})$/i);
+  if (a) {
+    const [s, i, p] = a[1].split("");
     return {
       r: parseInt(s + s, 16),
-      g: parseInt(a + a, 16),
-      b: parseInt(c + c, 16)
+      g: parseInt(i + i, 16),
+      b: parseInt(p + p, 16)
     };
   }
   const o = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
@@ -432,133 +432,133 @@ function je(e) {
   } : null;
 }
 function Pt(e) {
-  const t = (i) => be(Math.round(i), 0, 255).toString(16).padStart(2, "0");
+  const t = (r) => be(Math.round(r), 0, 255).toString(16).padStart(2, "0");
   return `#${t(e.r)}${t(e.g)}${t(e.b)}`;
 }
-function bn(e) {
+function vn(e) {
   return `rgb(${e.r}, ${e.g}, ${e.b})`;
 }
-function Dt({ r: e, g: t, b: i }) {
-  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;
+function Dt({ r: e, g: t, b: r }) {
+  const a = e / 255, o = t / 255, s = r / 255, i = Math.max(a, o, s), p = Math.min(a, o, s), d = i - p;
   let l = 0;
-  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 = 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 = 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)
+  d !== 0 && (i === a ? l = (o - s) / d % 6 : i === o ? l = (s - a) / d + 2 : l = (a - o) / d + 4, l *= 60, l < 0 && (l += 360));
+  const g = i === 0 ? 0 : d / i * 100, f = i * 100;
+  return { h: l, s: g, v: f };
+}
+function Ot({ h: e, s: t, v: r }) {
+  const a = be(t, 0, 100) / 100, o = be(r, 0, 100) / 100, s = o * a, i = s * (1 - Math.abs(e / 60 % 2 - 1)), p = o - s;
+  let d = 0, l = 0, g = 0;
+  const f = (e % 360 + 360) % 360;
+  return f < 60 ? (d = s, l = i) : f < 120 ? (d = i, l = s) : f < 180 ? (l = s, g = i) : f < 240 ? (l = i, g = s) : f < 300 ? (d = i, g = s) : (d = s, g = i), {
+    r: Math.round((d + p) * 255),
+    g: Math.round((l + p) * 255),
+    b: Math.round((g + p) * 255)
   };
 }
-function at(e) {
-  const t = je(e);
+function it(e) {
+  const t = Ke(e);
   return t ? Dt(t) : { h: 0, s: 0, v: 45 };
 }
-function yn(e) {
+function wn(e) {
   return e.replace(/^#/, "").toUpperCase().slice(0, 6);
 }
-function wn(e, t) {
-  const i = e.replace(/[^0-9a-f]/gi, "").slice(0, 6);
-  return i.length < 6 ? t : je(`#${i}`) ?? t;
+function yn(e, t) {
+  const r = e.replace(/[^0-9a-f]/gi, "").slice(0, 6);
+  return r.length < 6 ? t : Ke(`#${r}`) ?? t;
 }
-function xn(e) {
+function kn(e) {
   return Pt(Ot(e));
 }
-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 Nn(e, t, r) {
+  const a = st((e - r.left) / r.width), o = st((t - r.top) / r.height);
+  return { x: a * 100, y: o * 100 };
 }
 function st(e) {
   return Math.min(1, Math.max(0, e));
 }
-function kn() {
+function Cn() {
   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, 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`;
+function _e({ label: e, value: t, onChange: r }) {
+  const [a, o] = A(!1), [s, i] = A(() => it(t)), p = j(null), d = j(null), l = j(null), g = qt(), [f, x] = A({ top: 0, left: 0, width: 260 }), h = Ot(s), m = wn(Pt(h)), v = Ke(t) ? t : vn(h), z = e.toLowerCase().includes("color") ? e : `${e} color`;
   _(() => {
-    a(at(t));
+    i(it(t));
   }, [t]);
-  const w = $(
-    (x) => {
-      a(x), i(xn(x));
+  const w = L(
+    (y) => {
+      i(y), r(kn(y));
     },
-    [i]
-  ), k = $(
-    (x) => {
-      w(Dt(x));
+    [r]
+  ), N = L(
+    (y) => {
+      w(Dt(y));
     },
     [w]
-  ), N = $(() => {
-    const x = c.current;
-    if (!x) return;
-    const I = x.getBoundingClientRect(), L = 260;
-    let h = I.left;
-    h + L > window.innerWidth - 12 && (h = window.innerWidth - L - 12), h = Math.max(12, h);
-    let F = I.bottom + 8;
-    const U = 320;
-    F + U > window.innerHeight - 12 && (F = Math.max(12, I.top - U - 8)), v({ top: F, left: h, width: L });
+  ), k = L(() => {
+    const y = p.current;
+    if (!y) return;
+    const I = y.getBoundingClientRect(), S = 260;
+    let u = I.left;
+    u + S > window.innerWidth - 12 && (u = window.innerWidth - S - 12), u = Math.max(12, u);
+    let O = I.bottom + 8;
+    const W = 320;
+    O + W > window.innerHeight - 12 && (O = Math.max(12, I.top - W - 8)), x({ top: O, left: u, width: S });
   }, []);
   _(() => {
-    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) || o(!1);
-    }, I = (L) => {
-      L.key === "Escape" && o(!1);
+    if (!a) return;
+    k();
+    const y = (S) => {
+      var O, W;
+      const u = S.target;
+      (O = p.current) != null && O.contains(u) || (W = d.current) != null && W.contains(u) || o(!1);
+    }, I = (S) => {
+      S.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);
+    return window.addEventListener("mousedown", y, !0), window.addEventListener("keydown", I), window.addEventListener("resize", k), window.addEventListener("scroll", k, !0), () => {
+      window.removeEventListener("mousedown", y, !0), window.removeEventListener("keydown", I), window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
     };
-  }, [r, N]);
-  const E = (x, I) => {
-    var U;
-    const L = (U = l.current) == null ? void 0 : U.getBoundingClientRect();
-    if (!L) return;
-    const { x: h, y: F } = Nn(x, I, L);
-    w({ ...s, s: h, v: 100 - F });
-  }, z = (x) => {
-    x.preventDefault(), E(x.clientX, x.clientY);
-    const I = (h) => E(h.clientX, h.clientY), L = () => {
-      window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", L);
+  }, [a, k]);
+  const E = (y, I) => {
+    var W;
+    const S = (W = l.current) == null ? void 0 : W.getBoundingClientRect();
+    if (!S) return;
+    const { x: u, y: O } = Nn(y, I, S);
+    w({ ...s, s: u, v: 100 - O });
+  }, B = (y) => {
+    y.preventDefault(), E(y.clientX, y.clientY);
+    const I = (u) => E(u.clientX, u.clientY), S = () => {
+      window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", S);
     };
-    window.addEventListener("mousemove", I), window.addEventListener("mouseup", L);
-  }, R = r ? Ke(
+    window.addEventListener("mousemove", I), window.addEventListener("mouseup", S);
+  }, $ = a ? Ge(
     /* @__PURE__ */ n(
       "div",
       {
         className: "pa-root pa-root--toolbar-portal pa-color-picker-portal",
         "data-pixelagent-picker-portal": !0,
-        ...kn(),
-        children: /* @__PURE__ */ d(
+        ...Cn(),
+        children: /* @__PURE__ */ c(
           "div",
           {
-            ref: u,
-            id: f,
+            ref: d,
+            id: g,
             role: "dialog",
-            "aria-label": S,
+            "aria-label": z,
             className: "pa-color-picker",
-            style: { top: p.top, left: p.left, width: p.width },
+            style: { top: f.top, left: f.left, width: f.width },
             children: [
-              /* @__PURE__ */ d("header", { className: "pa-color-picker-header", children: [
+              /* @__PURE__ */ c("header", { className: "pa-color-picker-header", children: [
                 /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-color-picker-preview",
-                    style: { backgroundColor: y },
+                    style: { backgroundColor: v },
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: S })
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-header-label", children: z })
               ] }),
               /* @__PURE__ */ n(
                 "div",
@@ -566,7 +566,7 @@ function _e({ label: e, value: t, onChange: i }) {
                   ref: l,
                   className: "pa-color-picker-sb",
                   style: { "--pa-picker-h": String(Math.round(s.h)) },
-                  onMouseDown: z,
+                  onMouseDown: B,
                   children: /* @__PURE__ */ n(
                     "span",
                     {
@@ -577,7 +577,7 @@ function _e({ label: e, value: t, onChange: i }) {
                   )
                 }
               ),
-              /* @__PURE__ */ d("div", { className: "pa-color-picker-hue", children: [
+              /* @__PURE__ */ c("div", { className: "pa-color-picker-hue", children: [
                 /* @__PURE__ */ n(
                   "input",
                   {
@@ -587,7 +587,7 @@ function _e({ label: e, value: t, onChange: i }) {
                     max: 360,
                     value: Math.round(s.h),
                     "aria-label": "Hue",
-                    onChange: (x) => w({ ...s, h: parseFloat(x.target.value) })
+                    onChange: (y) => w({ ...s, h: parseFloat(y.target.value) })
                   }
                 ),
                 /* @__PURE__ */ n(
@@ -599,21 +599,21 @@ function _e({ label: e, value: t, onChange: i }) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ d("label", { className: "pa-color-picker-field", children: [
+              /* @__PURE__ */ c("label", { className: "pa-color-picker-field", children: [
                 /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: "Hex" }),
                 /* @__PURE__ */ n(
                   "input",
                   {
                     className: "pa-input pa-color-picker-input",
                     type: "text",
-                    value: g,
+                    value: m,
                     spellCheck: !1,
-                    onChange: (x) => k(wn(x.target.value, m))
+                    onChange: (y) => N(yn(y.target.value, h))
                   }
                 )
               ] }),
-              /* @__PURE__ */ n("div", { className: "pa-color-picker-rgb", children: ["r", "g", "b"].map((x) => /* @__PURE__ */ d("label", { className: "pa-color-picker-field pa-color-picker-field--rgb", children: [
-                /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: x.toUpperCase() }),
+              /* @__PURE__ */ n("div", { className: "pa-color-picker-rgb", children: ["r", "g", "b"].map((y) => /* @__PURE__ */ c("label", { className: "pa-color-picker-field pa-color-picker-field--rgb", children: [
+                /* @__PURE__ */ n("span", { className: "pa-color-picker-field-label", children: y.toUpperCase() }),
                 /* @__PURE__ */ n(
                   "input",
                   {
@@ -621,14 +621,14 @@ function _e({ label: e, value: t, onChange: i }) {
                     type: "number",
                     min: 0,
                     max: 255,
-                    value: m[x],
+                    value: h[y],
                     onChange: (I) => {
-                      const L = Cn(parseInt(I.target.value, 10));
-                      k({ ...m, [x]: L });
+                      const S = Mn(parseInt(I.target.value, 10));
+                      N({ ...h, [y]: S });
                     }
                   }
                 )
-              ] }, x)) })
+              ] }, y)) })
             ]
           }
         )
@@ -636,22 +636,22 @@ function _e({ label: e, value: t, onChange: i }) {
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ d("div", { className: "pa-color-field", children: [
+  return /* @__PURE__ */ c("div", { className: "pa-color-field", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: e }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "button",
       {
-        ref: c,
+        ref: p,
         type: "button",
         className: "pa-color-field-trigger",
-        "aria-expanded": r,
+        "aria-expanded": a,
         "aria-haspopup": "dialog",
-        "aria-controls": r ? f : void 0,
+        "aria-controls": a ? g : void 0,
         onClick: () => {
-          r || N(), o((x) => !x);
+          a || k(), o((y) => !y);
         },
         children: [
-          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: y }, "aria-hidden": "true" }),
+          /* @__PURE__ */ n("span", { className: "pa-color-field-swatch", style: { backgroundColor: v }, "aria-hidden": "true" }),
           /* @__PURE__ */ n(
             "input",
             {
@@ -666,25 +666,25 @@ function _e({ label: e, value: t, onChange: i }) {
         ]
       }
     ),
-    R
+    $
   ] });
 }
-function Cn(e) {
+function Mn(e) {
   return Number.isFinite(e) ? Math.min(255, Math.max(0, e)) : 0;
 }
-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(
+function ge({ title: e, children: t, defaultOpen: r = !0, badge: a }) {
+  const [o, s] = A(r);
+  return /* @__PURE__ */ c("section", { className: `pa-edit-section ${o ? "pa-edit-section--open" : ""}`, children: [
+    /* @__PURE__ */ c(
       "button",
       {
         type: "button",
         className: "pa-edit-section-header",
         "aria-expanded": o,
-        onClick: () => s((a) => !a),
+        onClick: () => s((i) => !i),
         children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-section-title", children: e }),
-          r ? /* @__PURE__ */ n("span", { className: "pa-edit-section-badge", children: r }) : null,
+          a ? /* @__PURE__ */ n("span", { className: "pa-edit-section-badge", children: a }) : null,
           /* @__PURE__ */ n("span", { className: "pa-edit-section-chevron", "aria-hidden": "true" })
         ]
       }
@@ -692,7 +692,7 @@ function fe({ title: e, children: t, defaultOpen: i = !0, badge: r }) {
     o ? /* @__PURE__ */ n("div", { className: "pa-edit-section-body", children: t }) : null
   ] });
 }
-const me = [
+const he = [
   { value: "Inter, system-ui, sans-serif", label: "Inter" },
   { value: "system-ui, sans-serif", label: "System UI" },
   {
@@ -706,53 +706,53 @@ const me = [
   { value: '"JetBrains Mono", ui-monospace, monospace', label: "JetBrains Mono" },
   { value: "ui-monospace, monospace", label: "Monospace" }
 ], Te = "";
-function Le(e) {
-  var i;
-  return (((i = e.split(",")[0]) == null ? void 0 : i.trim()) ?? "").replace(/^["']|["']$/g, "");
+function Se(e) {
+  var r;
+  return (((r = e.split(",")[0]) == null ? void 0 : r.trim()) ?? "").replace(/^["']|["']$/g, "");
 }
-function Mn(e) {
+function An(e) {
   const t = e.trim();
   if (!t)
     return {
       selectValue: Te,
-      options: me
+      options: he
     };
-  const i = Le(t).toLowerCase(), r = me.find(
-    (s) => s.value === t || Le(s.value).toLowerCase() === i
+  const r = Se(t).toLowerCase(), a = he.find(
+    (s) => s.value === t || Se(s.value).toLowerCase() === r
   );
-  if (r)
-    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);
+  if (a)
+    return { selectValue: a.value, options: he };
+  const o = he.find((s) => {
+    const i = Se(s.value).toLowerCase();
+    return t.toLowerCase().includes(i) || i.includes(r);
   });
-  return o ? { selectValue: o.value, options: me } : {
+  return o ? { selectValue: o.value, options: he } : {
     selectValue: t,
     options: [
-      ...me,
-      { value: t, label: Le(t) || "Custom" }
+      ...he,
+      { value: t, label: Se(t) || "Custom" }
     ]
   };
 }
-function An({ value: e, onChange: t }) {
-  const { selectValue: i, options: r } = Me(
-    () => Mn(e),
+function zn({ value: e, onChange: t }) {
+  const { selectValue: r, options: a } = Me(
+    () => An(e),
     [e]
   );
-  return /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
+  return /* @__PURE__ */ c("label", { className: "pa-edit-stack-field", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Font family" }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "select",
       {
         className: "pa-select pa-font-family-select",
-        value: i || Te,
+        value: r || Te,
         onChange: (o) => {
           const s = o.target.value;
           s && s !== Te && t(s);
         },
         children: [
           /* @__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))
+          a.map((o) => /* @__PURE__ */ n("option", { value: o.value, children: o.label }, o.value))
         ]
       }
     )
@@ -766,27 +766,27 @@ function Sn(e) {
   const t = e.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
-    const r = parseFloat(t);
-    return Number.isFinite(r) ? r / 100 : null;
+    const a = parseFloat(t);
+    return Number.isFinite(a) ? a / 100 : null;
   }
-  const i = parseFloat(t);
-  return Number.isFinite(i) && i >= 0 && i <= 1 ? i : null;
+  const r = parseFloat(t);
+  return Number.isFinite(r) && r >= 0 && r <= 1 ? r : null;
 }
 function Ln(e) {
   const t = Ft(e);
   if (t !== null) return t > 0;
-  const i = qe(e);
-  return i !== null && i > 0;
+  const r = qe(e);
+  return r !== null && r > 0;
 }
 function Ft(e) {
   const t = e.trim().split(/\s+/).filter(Boolean);
   if (t.length === 0) return null;
-  const i = t.map((o) => qe(o));
-  if (i.some((o) => o === null)) return null;
-  const r = i[0];
-  return i.every((o) => o === r) ? r : null;
+  const r = t.map((o) => qe(o));
+  if (r.some((o) => o === null)) return null;
+  const a = r[0];
+  return r.every((o) => o === a) ? a : null;
 }
-const $n = {
+const En = {
   padding: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   margin: { kind: "uniform-px", min: 0, max: 80, step: 1 },
   width: { kind: "text" },
@@ -800,8 +800,8 @@ const $n = {
   "border-radius": { kind: "px", min: 0, max: 48, step: 1 },
   opacity: { kind: "opacity", min: 0, max: 1, step: 0.01 }
 };
-function En(e, t, i) {
-  switch (i.kind) {
+function In(e, t, r) {
+  switch (r.kind) {
     case "opacity":
       return Sn(t);
     case "px":
@@ -812,8 +812,8 @@ function En(e, t, i) {
       return null;
   }
 }
-function In(e, t, i) {
-  switch (i.kind) {
+function $n(e, t, r) {
+  switch (r.kind) {
     case "opacity":
       return String(Math.round(t * 100) / 100);
     case "px":
@@ -826,41 +826,41 @@ function In(e, t, i) {
 function se({
   property: e,
   label: t,
-  value: i,
-  onChange: r,
+  value: r,
+  onChange: a,
   compact: o = !1
 }) {
-  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: [
+  const s = En[e] ?? { kind: "text" }, i = In(e, r, s), p = s.kind !== "text" && i !== null, d = o ? "pa-prop-row pa-prop-row--compact" : "pa-prop-row", l = o ? "pa-edit-field-label" : "pa-prop-label";
+  if (!p)
+    return /* @__PURE__ */ c("label", { className: d, children: [
       /* @__PURE__ */ n("span", { className: l, children: t }),
       /* @__PURE__ */ n(
         "input",
         {
           className: "pa-input",
           type: "text",
-          value: i,
-          onChange: (g) => r(g.target.value)
+          value: r,
+          onChange: (m) => a(m.target.value)
         }
       )
     ] });
-  const f = s.min ?? 0, p = s.max ?? 100, v = s.step ?? 1, m = (g) => {
-    r(In(e, g, s));
+  const g = s.min ?? 0, f = s.max ?? 100, x = s.step ?? 1, h = (m) => {
+    a($n(e, m, s));
   };
-  return /* @__PURE__ */ d("label", { className: `${u} pa-prop-row--slider`, children: [
+  return /* @__PURE__ */ c("label", { className: `${d} pa-prop-row--slider`, children: [
     /* @__PURE__ */ n("span", { className: l, children: t }),
-    /* @__PURE__ */ d("div", { className: "pa-prop-slider-wrap", children: [
+    /* @__PURE__ */ c("div", { className: "pa-prop-slider-wrap", children: [
       /* @__PURE__ */ n(
         "input",
         {
           type: "range",
           className: "pa-slider",
-          min: f,
-          max: p,
-          step: v,
-          value: a,
-          "aria-valuetext": i,
-          onChange: (g) => m(parseFloat(g.target.value))
+          min: g,
+          max: f,
+          step: x,
+          value: i,
+          "aria-valuetext": r,
+          onChange: (m) => h(parseFloat(m.target.value))
         }
       ),
       /* @__PURE__ */ n(
@@ -868,91 +868,91 @@ function se({
         {
           className: "pa-input pa-prop-slider-value",
           type: "text",
-          value: i,
-          onChange: (g) => r(g.target.value),
+          value: r,
+          onChange: (m) => a(m.target.value),
           "aria-label": `${t} value`
         }
       )
     ] })
   ] });
 }
-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 };
+function Tn(e) {
+  const t = e.trim().split(/\s+/).filter(Boolean), r = t[0] ?? "0px";
+  if (t.length <= 1) return { top: r, right: r, bottom: r, left: r };
+  const a = t[1];
+  if (t.length === 2) return { top: r, right: a, bottom: r, left: a };
   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] };
+  return t.length === 3 ? { top: r, right: a, bottom: o, left: a } : { top: r, right: a, 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 Rn({ top: e, right: t, bottom: r, left: a }) {
+  return e === t && t === r && r === a ? e : e === r && t === a ? `${e} ${t}` : t === a ? `${e} ${t} ${r}` : `${e} ${t} ${r} ${a}`;
 }
-function ue(e) {
+function de(e) {
   const t = e.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
   return t ? t[1] : e;
 }
-function pe(e) {
+function fe(e) {
   const t = e.trim();
   return t === "" ? "0px" : /^-?\d+(?:\.\d+)?$/.test(t) ? `${t}px` : t;
 }
 function lt(e, 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 = pe(i[0]);
-    return [r, r];
+  return e === t ? de(e) : `${de(e)}, ${de(t)}`;
+}
+function pt(e, t) {
+  const r = e.split(",").map((a) => a.trim()).filter(Boolean);
+  if (r.length === 0) return [t, t];
+  if (r.length === 1) {
+    const a = fe(r[0]);
+    return [a, a];
   }
-  return [pe(i[0]), pe(i[1])];
+  return [fe(r[0]), fe(r[1])];
 }
-const dt = 12, Je = {
-  width: dt,
-  height: dt,
+const ct = 12, Je = {
+  width: ct,
+  height: ct,
   viewBox: "0 0 12 12",
   fill: "none",
   "aria-hidden": !0
 };
 function Pn() {
-  return /* @__PURE__ */ d("svg", { ...Je, children: [
+  return /* @__PURE__ */ c("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 Dn() {
-  return /* @__PURE__ */ d("svg", { ...Je, children: [
+  return /* @__PURE__ */ c("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 $e({ side: e }) {
+function Le({ side: e }) {
   const t = {
     top: { x1: 1.5, y1: 1.5, x2: 10.5, y2: 1.5 },
     right: { x1: 10.5, y1: 1.5, x2: 10.5, y2: 10.5 },
     bottom: { x1: 1.5, y1: 10.5, x2: 10.5, y2: 10.5 },
     left: { x1: 1.5, y1: 1.5, x2: 1.5, y2: 10.5 }
   }[e];
-  return /* @__PURE__ */ d("svg", { ...Je, children: [
+  return /* @__PURE__ */ c("svg", { ...Je, children: [
     /* @__PURE__ */ n("rect", { x: "1.5", y: "1.5", width: "9", height: "9", stroke: "currentColor", strokeOpacity: "0.35" }),
     /* @__PURE__ */ n("line", { ...t, stroke: "currentColor", strokeWidth: "1.5" })
   ] });
 }
 function On() {
-  return /* @__PURE__ */ d("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n("rect", { x: "2", y: "2", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
     /* @__PURE__ */ n("rect", { x: "8", y: "2", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
     /* @__PURE__ */ n("rect", { x: "2", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" }),
     /* @__PURE__ */ n("rect", { x: "8", y: "8", width: "4", height: "4", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
-function ge({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: o }) {
-  const [s, a] = A(t);
+function me({ icon: e, display: t, ariaLabel: r, mixed: a, onCommit: o }) {
+  const [s, i] = A(t);
   return _(() => {
-    a(t);
-  }, [t]), /* @__PURE__ */ d("label", { className: `pa-spacing-cell ${r ? "pa-spacing-cell--mixed" : ""}`, children: [
+    i(t);
+  }, [t]), /* @__PURE__ */ c("label", { className: `pa-spacing-cell ${a ? "pa-spacing-cell--mixed" : ""}`, children: [
     /* @__PURE__ */ n("span", { className: "pa-spacing-cell-icon", children: e }),
     /* @__PURE__ */ n(
       "input",
@@ -960,24 +960,24 @@ function ge({ icon: e, display: t, ariaLabel: i, mixed: r, onCommit: o }) {
         className: "pa-input pa-spacing-cell-input",
         type: "text",
         value: s,
-        onChange: (c) => a(c.target.value),
+        onChange: (p) => i(p.target.value),
         onBlur: () => o(s),
-        onKeyDown: (c) => {
-          c.key === "Enter" && c.target.blur(), c.key === "Escape" && (a(t), c.target.blur());
+        onKeyDown: (p) => {
+          p.key === "Enter" && p.target.blur(), p.key === "Escape" && (i(t), p.target.blur());
         },
-        "aria-label": i,
+        "aria-label": r,
         spellCheck: !1
       }
     )
   ] });
 }
-function ut({ label: e, value: t, onChange: i }) {
-  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: [
+function dt({ label: e, value: t, onChange: r }) {
+  const a = Tn(t), [o, s] = A(!1), i = (l) => {
+    r(Rn({ ...a, ...l }));
+  }, p = a.left !== a.right, d = a.top !== a.bottom;
+  return /* @__PURE__ */ c("div", { className: "pa-prop-row pa-prop-row--compact pa-spacing-row", children: [
     /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: e }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         className: `pa-spacing-control ${o ? "pa-spacing-control--split" : "pa-spacing-control--pair"}`,
@@ -986,68 +986,68 @@ function ut({ label: e, value: t, onChange: i }) {
             // Grid mirrors pair-view columns:
             //   Col 1 (horizontal pair) → L on top, R on bottom
             //   Col 2 (vertical pair)   → T on top, B on bottom
-            /* @__PURE__ */ d("div", { className: "pa-spacing-grid", children: [
+            /* @__PURE__ */ c("div", { className: "pa-spacing-grid", children: [
               /* @__PURE__ */ n(
-                ge,
+                me,
                 {
-                  icon: /* @__PURE__ */ n($e, { side: "left" }),
-                  display: ue(r.left),
+                  icon: /* @__PURE__ */ n(Le, { side: "left" }),
+                  display: de(a.left),
                   ariaLabel: `${e} left`,
-                  onCommit: (l) => a({ left: pe(l) })
+                  onCommit: (l) => i({ left: fe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ge,
+                me,
                 {
-                  icon: /* @__PURE__ */ n($e, { side: "top" }),
-                  display: ue(r.top),
+                  icon: /* @__PURE__ */ n(Le, { side: "top" }),
+                  display: de(a.top),
                   ariaLabel: `${e} top`,
-                  onCommit: (l) => a({ top: pe(l) })
+                  onCommit: (l) => i({ top: fe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ge,
+                me,
                 {
-                  icon: /* @__PURE__ */ n($e, { side: "right" }),
-                  display: ue(r.right),
+                  icon: /* @__PURE__ */ n(Le, { side: "right" }),
+                  display: de(a.right),
                   ariaLabel: `${e} right`,
-                  onCommit: (l) => a({ right: pe(l) })
+                  onCommit: (l) => i({ right: fe(l) })
                 }
               ),
               /* @__PURE__ */ n(
-                ge,
+                me,
                 {
-                  icon: /* @__PURE__ */ n($e, { side: "bottom" }),
-                  display: ue(r.bottom),
+                  icon: /* @__PURE__ */ n(Le, { side: "bottom" }),
+                  display: de(a.bottom),
                   ariaLabel: `${e} bottom`,
-                  onCommit: (l) => a({ bottom: pe(l) })
+                  onCommit: (l) => i({ bottom: fe(l) })
                 }
               )
             ] })
-          ) : /* @__PURE__ */ d("div", { className: "pa-spacing-pair", children: [
+          ) : /* @__PURE__ */ c("div", { className: "pa-spacing-pair", children: [
             /* @__PURE__ */ n(
-              ge,
+              me,
               {
                 icon: /* @__PURE__ */ n(Pn, {}),
-                display: lt(r.left, r.right),
-                mixed: c,
+                display: lt(a.left, a.right),
+                mixed: p,
                 ariaLabel: `${e} horizontal`,
                 onCommit: (l) => {
-                  const [f, p] = ct(l, r.left);
-                  a({ left: f, right: p });
+                  const [g, f] = pt(l, a.left);
+                  i({ left: g, right: f });
                 }
               }
             ),
             /* @__PURE__ */ n(
-              ge,
+              me,
               {
                 icon: /* @__PURE__ */ n(Dn, {}),
-                display: lt(r.top, r.bottom),
-                mixed: u,
+                display: lt(a.top, a.bottom),
+                mixed: d,
                 ariaLabel: `${e} vertical`,
                 onCommit: (l) => {
-                  const [f, p] = ct(l, r.top);
-                  a({ top: f, bottom: p });
+                  const [g, f] = pt(l, a.top);
+                  i({ top: g, bottom: f });
                 }
               }
             )
@@ -1072,10 +1072,10 @@ function ut({ label: e, value: t, onChange: i }) {
 function Fn({
   options: e,
   value: t,
-  ariaLabel: i,
-  onChange: r
+  ariaLabel: r,
+  onChange: a
 }) {
-  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": i, children: e.map((o) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": r, children: e.map((o) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
@@ -1083,7 +1083,7 @@ function Fn({
       title: o.title,
       "aria-pressed": t === o.value,
       "aria-label": o.title,
-      onClick: () => r == null ? void 0 : r(o.value),
+      onClick: () => a == null ? void 0 : a(o.value),
       children: o.content
     },
     o.value
@@ -1092,23 +1092,23 @@ function Fn({
 function Bn({
   options: e,
   ariaLabel: t,
-  onToggle: i
+  onToggle: r
 }) {
-  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": t, children: e.map((r) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ n("div", { className: "pa-segmented", role: "group", "aria-label": t, children: e.map((a) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: `pa-segmented-btn ${r.pressed ? "pa-segmented-btn--on" : ""}`,
-      title: r.title,
-      "aria-pressed": r.pressed,
-      "aria-label": r.title,
-      onClick: () => i(r.id),
-      children: r.content
+      className: `pa-segmented-btn ${a.pressed ? "pa-segmented-btn--on" : ""}`,
+      title: a.title,
+      "aria-pressed": a.pressed,
+      "aria-label": a.title,
+      onClick: () => r(a.id),
+      children: a.content
     },
-    r.id
+    a.id
   )) });
 }
-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",
     {
@@ -1117,7 +1117,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",
     {
@@ -1126,7 +1126,7 @@ 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",
     {
@@ -1135,7 +1135,7 @@ function Hn({ className: e }) {
     }
   ) });
 }
-function Vn({ className: e }) {
+function Un({ 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 Wn({ className: e }) {
@@ -1151,29 +1151,29 @@ function Bt(e) {
   const t = parseInt(e.trim(), 10);
   return Number.isFinite(t) ? t >= 600 : e.trim() === "bold" || e.trim() === "bolder";
 }
-function Un(e) {
+function Yn(e) {
   return Bt(e) ? "400" : "700";
 }
-function zt(e) {
+function _t(e) {
   return e.trim() === "italic" || e.trim() === "oblique";
 }
-function Yn(e) {
-  return zt(e) ? "normal" : "italic";
+function jn(e) {
+  return _t(e) ? "normal" : "italic";
 }
-function pt(e, t) {
+function ft(e, t) {
   return e.split(/\s+/).includes(t);
 }
-function ht(e, t) {
-  const i = new Set(
-    e.trim().split(/\s+/).filter((r) => r && r !== "none")
+function ut(e, t) {
+  const r = new Set(
+    e.trim().split(/\s+/).filter((a) => a && a !== "none")
   );
-  return i.has(t) ? i.delete(t) : i.add(t), i.size === 0 ? "none" : Array.from(i).join(" ");
+  return r.has(t) ? r.delete(t) : r.add(t), r.size === 0 ? "none" : Array.from(r).join(" ");
 }
 function Xn(e) {
   const t = e.trim();
   return t === "center" || t === "right" || t === "justify" ? t : "left";
 }
-const ft = [
+const gt = [
   "none",
   "solid",
   "dashed",
@@ -1183,7 +1183,7 @@ const ft = [
   "ridge",
   "inset",
   "outset"
-], mt = [
+], ht = [
   "block",
   "inline",
   "inline-block",
@@ -1197,35 +1197,35 @@ const ft = [
 function Kn({
   values: e,
   onPropertyChange: t,
-  textKind: i,
-  textValue: r,
+  textKind: r,
+  textValue: a,
   onTextChange: o,
   targetScope: s,
-  onTargetScopeChange: a,
-  elementState: c,
-  onElementStateChange: u,
+  onTargetScopeChange: i,
+  elementState: p,
+  onElementStateChange: d,
   instanceCount: l,
-  scopeHint: f,
-  stateHint: p
+  scopeHint: g,
+  stateHint: f
 }) {
-  var I, L;
-  const v = e["font-weight"] ?? "", m = e["font-style"] ?? "normal", g = e["text-decoration"] ?? "none", y = Xn(e["text-align"] ?? "left"), S = ((I = e.display) == null ? void 0 : I.trim()) ?? "", w = !!S, k = Gn.has(S), N = [...mt];
-  S && !mt.includes(S) && N.push(S);
-  const E = ((L = e.gap) == null ? void 0 : L.trim()) ?? "", z = E === "normal" || E === "" ? "0px" : E, R = e["border-style"] ?? "none", x = [...ft];
-  return R && !ft.includes(R) && x.push(R), /* @__PURE__ */ d("div", { className: "pa-edit-sections", children: [
-    /* @__PURE__ */ d(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: [
+  var I, S;
+  const x = e["font-weight"] ?? "", h = e["font-style"] ?? "normal", m = e["text-decoration"] ?? "none", v = Xn(e["text-align"] ?? "left"), z = ((I = e.display) == null ? void 0 : I.trim()) ?? "", w = !!z, N = Gn.has(z), k = [...ht];
+  z && !ht.includes(z) && k.push(z);
+  const E = ((S = e.gap) == null ? void 0 : S.trim()) ?? "", B = E === "normal" || E === "" ? "0px" : E, $ = e["border-style"] ?? "none", y = [...gt];
+  return $ && !gt.includes($) && y.push($), /* @__PURE__ */ c("div", { className: "pa-edit-sections", children: [
+    /* @__PURE__ */ c(ge, { title: "Targeting", defaultOpen: !0, children: [
+      /* @__PURE__ */ c("div", { className: "pa-edit-field-grid pa-edit-field-grid--2", children: [
+        /* @__PURE__ */ c("label", { className: "pa-edit-mini-field", children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Scope" }),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "select",
             {
               className: "pa-select",
               value: s,
-              onChange: (h) => a(h.target.value),
+              onChange: (u) => i(u.target.value),
               children: [
                 /* @__PURE__ */ n("option", { value: "this-instance", children: "This instance" }),
-                /* @__PURE__ */ d("option", { value: "all-instances", disabled: l <= 1, children: [
+                /* @__PURE__ */ c("option", { value: "all-instances", disabled: l <= 1, children: [
                   "All (",
                   l,
                   ")"
@@ -1234,14 +1234,14 @@ function Kn({
             }
           )
         ] }),
-        /* @__PURE__ */ d("label", { className: "pa-edit-mini-field", children: [
+        /* @__PURE__ */ c("label", { className: "pa-edit-mini-field", children: [
           /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "State" }),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "select",
             {
               className: "pa-select",
-              value: c,
-              onChange: (h) => u(h.target.value),
+              value: p,
+              onChange: (u) => d(u.target.value),
               children: [
                 /* @__PURE__ */ n("option", { value: "normal", children: "Normal" }),
                 /* @__PURE__ */ n("option", { value: "hover", children: "Hover" }),
@@ -1253,31 +1253,31 @@ function Kn({
           )
         ] })
       ] }),
-      f ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: f }) : null,
-      p ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: p }) : null
+      g ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: g }) : null,
+      f ? /* @__PURE__ */ n("p", { className: "pa-edit-inline-hint", children: f }) : null
     ] }),
-    i !== "none" && /* @__PURE__ */ n(fe, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
+    r !== "none" && /* @__PURE__ */ n(ge, { title: "Content", defaultOpen: !0, children: /* @__PURE__ */ c("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) => o(h.target.value),
-          rows: i === "value" ? 2 : 3,
+          value: a,
+          onChange: (u) => o(u.target.value),
+          rows: r === "value" ? 2 : 3,
           placeholder: "Edit visible text…"
         }
       )
     ] }) }),
-    /* @__PURE__ */ d(fe, { title: "Typography", defaultOpen: !0, children: [
+    /* @__PURE__ */ c(ge, { title: "Typography", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
-        An,
+        zn,
         {
           value: e["font-family"] ?? "",
-          onChange: (h) => t("font-family", h)
+          onChange: (u) => t("font-family", u)
         }
       ),
-      /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
+      /* @__PURE__ */ c("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
           Bn,
@@ -1287,74 +1287,74 @@ function Kn({
               {
                 id: "bold",
                 title: "Bold",
-                pressed: Bt(v),
+                pressed: Bt(x),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--bold", children: "B" })
               },
               {
                 id: "italic",
                 title: "Italic",
-                pressed: zt(m),
+                pressed: _t(h),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--italic", children: "I" })
               },
               {
                 id: "underline",
                 title: "Underline",
-                pressed: pt(g, "underline"),
+                pressed: ft(m, "underline"),
                 content: /* @__PURE__ */ n("span", { className: "pa-segmented-type pa-segmented-type--underline", children: "U" })
               },
               {
                 id: "strikethrough",
                 title: "Strikethrough",
-                pressed: pt(g, "line-through"),
+                pressed: ft(m, "line-through"),
                 content: /* @__PURE__ */ n(Wn, { className: "pa-segmented-icon" })
               }
             ],
-            onToggle: (h) => {
-              h === "bold" ? t("font-weight", Un(v)) : h === "italic" ? t("font-style", Yn(m)) : h === "underline" ? t(
+            onToggle: (u) => {
+              u === "bold" ? t("font-weight", Yn(x)) : u === "italic" ? t("font-style", jn(h)) : u === "underline" ? t(
                 "text-decoration",
-                ht(g, "underline")
-              ) : h === "strikethrough" && t(
+                ut(m, "underline")
+              ) : u === "strikethrough" && t(
                 "text-decoration",
-                ht(g, "line-through")
+                ut(m, "line-through")
               );
             }
           }
         )
       ] }),
-      /* @__PURE__ */ d("div", { className: "pa-edit-field-block", children: [
+      /* @__PURE__ */ c("div", { className: "pa-edit-field-block", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Align" }),
         /* @__PURE__ */ n(
           Fn,
           {
             ariaLabel: "Text align",
-            value: y,
-            onChange: (h) => t("text-align", h),
+            value: v,
+            onChange: (u) => t("text-align", u),
             options: [
               {
                 value: "left",
                 title: "Align left",
-                content: /* @__PURE__ */ n(zn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(_n, { className: "pa-segmented-icon" })
               },
               {
                 value: "center",
                 title: "Align center",
-                content: /* @__PURE__ */ n(_n, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Hn, { className: "pa-segmented-icon" })
               },
               {
                 value: "right",
                 title: "Align right",
-                content: /* @__PURE__ */ n(Hn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Vn, { className: "pa-segmented-icon" })
               },
               {
                 value: "justify",
                 title: "Justify",
-                content: /* @__PURE__ */ n(Vn, { className: "pa-segmented-icon" })
+                content: /* @__PURE__ */ n(Un, { className: "pa-segmented-icon" })
               }
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ d("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
+      /* @__PURE__ */ c("div", { className: "pa-edit-field-grid pa-edit-field-grid--2 pa-edit-size-row", children: [
         /* @__PURE__ */ n(
           se,
           {
@@ -1362,7 +1362,7 @@ function Kn({
             property: "font-size",
             label: "Font size (px)",
             value: e["font-size"] ?? "",
-            onChange: (h) => t("font-size", h)
+            onChange: (u) => t("font-size", u)
           }
         ),
         /* @__PURE__ */ n(
@@ -1372,7 +1372,7 @@ function Kn({
             property: "line-height",
             label: "Line height (px)",
             value: e["line-height"] ?? "",
-            onChange: (h) => t("line-height", h)
+            onChange: (u) => t("line-height", u)
           }
         )
       ] }),
@@ -1381,12 +1381,12 @@ function Kn({
         {
           label: "Color",
           value: e.color ?? "",
-          onChange: (h) => t("color", h)
+          onChange: (u) => t("color", u)
         }
       )
     ] }),
-    /* @__PURE__ */ d(fe, { title: "Layout", defaultOpen: !0, children: [
-      /* @__PURE__ */ d("div", { className: "pa-edit-split-fields", children: [
+    /* @__PURE__ */ c(ge, { title: "Layout", defaultOpen: !0, children: [
+      /* @__PURE__ */ c("div", { className: "pa-edit-split-fields", children: [
         /* @__PURE__ */ n(
           se,
           {
@@ -1394,7 +1394,7 @@ function Kn({
             property: "width",
             label: "Width",
             value: e.width ?? "",
-            onChange: (h) => t("width", h)
+            onChange: (u) => t("width", u)
           }
         ),
         /* @__PURE__ */ n(
@@ -1404,58 +1404,58 @@ function Kn({
             property: "height",
             label: "Height",
             value: e.height ?? "",
-            onChange: (h) => t("height", h)
+            onChange: (u) => t("height", u)
           }
         )
       ] }),
       /* @__PURE__ */ n(
-        ut,
+        dt,
         {
           property: "padding",
           label: "Padding",
           value: e.padding ?? "",
-          onChange: (h) => t("padding", h)
+          onChange: (u) => t("padding", u)
         }
       ),
       /* @__PURE__ */ n(
-        ut,
+        dt,
         {
           property: "margin",
           label: "Margin",
           value: e.margin ?? "",
-          onChange: (h) => t("margin", h)
+          onChange: (u) => t("margin", u)
         }
       ),
-      w && /* @__PURE__ */ d("label", { className: "pa-prop-row pa-prop-row--compact", children: [
+      w && /* @__PURE__ */ c("label", { className: "pa-prop-row pa-prop-row--compact", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Display" }),
         /* @__PURE__ */ n(
           "select",
           {
             className: "pa-select",
-            value: S,
-            onChange: (h) => t("display", h.target.value),
-            children: N.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
+            value: z,
+            onChange: (u) => t("display", u.target.value),
+            children: k.map((u) => /* @__PURE__ */ n("option", { value: u, children: u }, u))
           }
         )
       ] }),
-      k && /* @__PURE__ */ n(
+      N && /* @__PURE__ */ n(
         se,
         {
           compact: !0,
           property: "gap",
           label: "Gap",
-          value: z,
-          onChange: (h) => t("gap", h)
+          value: B,
+          onChange: (u) => t("gap", u)
         }
       )
     ] }),
-    /* @__PURE__ */ d(fe, { title: "Fill", children: [
+    /* @__PURE__ */ c(ge, { title: "Fill", children: [
       /* @__PURE__ */ n(
         _e,
         {
           label: "Background",
           value: e["background-color"] ?? "",
-          onChange: (h) => t("background-color", h)
+          onChange: (u) => t("background-color", u)
         }
       ),
       /* @__PURE__ */ n(
@@ -1465,28 +1465,28 @@ function Kn({
           property: "opacity",
           label: "Opacity",
           value: e.opacity ?? "",
-          onChange: (h) => t("opacity", h)
+          onChange: (u) => t("opacity", u)
         }
       )
     ] }),
-    /* @__PURE__ */ d(fe, { title: "Border", defaultOpen: !0, children: [
+    /* @__PURE__ */ c(ge, { title: "Border", defaultOpen: !0, children: [
       /* @__PURE__ */ n(
         _e,
         {
           label: "Border color",
           value: e["border-color"] ?? "",
-          onChange: (h) => t("border-color", h)
+          onChange: (u) => t("border-color", u)
         }
       ),
-      /* @__PURE__ */ d("label", { className: "pa-edit-stack-field", children: [
+      /* @__PURE__ */ c("label", { className: "pa-edit-stack-field", children: [
         /* @__PURE__ */ n("span", { className: "pa-edit-field-label", children: "Style" }),
         /* @__PURE__ */ n(
           "select",
           {
             className: "pa-select",
-            value: R,
-            onChange: (h) => t("border-style", h.target.value),
-            children: x.map((h) => /* @__PURE__ */ n("option", { value: h, children: h }, h))
+            value: $,
+            onChange: (u) => t("border-style", u.target.value),
+            children: y.map((u) => /* @__PURE__ */ n("option", { value: u, children: u }, u))
           }
         )
       ] }),
@@ -1497,7 +1497,7 @@ function Kn({
           property: "border-width",
           label: "Stroke width (px)",
           value: e["border-width"] ?? "",
-          onChange: (h) => t("border-width", h)
+          onChange: (u) => t("border-width", u)
         }
       ),
       /* @__PURE__ */ n(
@@ -1507,13 +1507,13 @@ function Kn({
           property: "border-radius",
           label: "Radius (px)",
           value: e["border-radius"] ?? "",
-          onChange: (h) => t("border-radius", h)
+          onChange: (u) => t("border-radius", u)
         }
       )
     ] })
   ] });
 }
-const jn = 50, gt = [
+const qn = 50, mt = [
   "font-family",
   "font-size",
   "font-weight",
@@ -1535,237 +1535,237 @@ const jn = 50, gt = [
   "border-radius",
   "opacity"
 ];
-function qn(e, t, i) {
-  var ce;
-  const r = X([]), o = X(/* @__PURE__ */ new Set()), s = X([]), a = X(null), c = X([]), u = X(
+function Jn(e, t, r) {
+  var pe;
+  const a = j([]), o = j(/* @__PURE__ */ new Set()), s = j([]), i = j(null), p = j([]), d = j(
     null
-  ), [l, f] = A({}), [p, v] = A({}), [m, g] = A("none"), [y, S] = A(""), [w, k] = A(""), [N, E] = A(() => /* @__PURE__ */ new Map()), [z, R] = A(!1), x = $(() => {
+  ), [l, g] = A({}), [f, x] = A({}), [h, m] = A("none"), [v, z] = A(""), [w, N] = A(""), [k, E] = A(() => /* @__PURE__ */ new Map()), [B, $] = A(!1), y = L(() => {
     const C = Array.from(o.current);
     return {
-      inline: nt(C, [...gt]),
-      text: e && m !== "none" ? tt(e, m) : null
+      inline: nt(C, [...mt]),
+      text: e && h !== "none" ? tt(e, h) : null
     };
-  }, [e, m]), I = $(() => {
-    c.current.push(x()), c.current.length > jn && c.current.shift(), R(c.current.length > 0);
-  }, [x]), L = $(
+  }, [e, h]), I = L(() => {
+    p.current.push(y()), p.current.length > qn && p.current.shift(), $(p.current.length > 0);
+  }, [y]), S = L(
     (C) => {
       var H;
       if (!e) return;
-      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)) ?? [] : [];
+      const R = Array.from(o.current);
+      Ne(s.current.filter((D) => R.includes(D.element))), i.current && Ae(i.current);
+      const P = $e(e, t);
+      a.current = P, o.current = new Set(P), ze(R), Be(P, r);
+      const T = e ? ((H = k.get(e)) == null ? void 0 : H.get(r)) ?? [] : [];
       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);
+        for (const D of T)
+          if (D.property === "textContent" || D.property === "value")
+            for (const Y of P)
+              at(Y, D.property, D.newValue);
           else
-            for (const Y of D)
-              Y.style.setProperty(O.property, O.newValue);
+            for (const Y of P)
+              Y.style.setProperty(D.property, D.newValue);
     },
-    [e, t, i, N]
+    [e, t, r, k]
   );
   _(() => {
     if (!e) {
-      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);
+      a.current = [], o.current = /* @__PURE__ */ new Set(), s.current = [], i.current = null, p.current = [], g({}), x({}), m("none"), z(""), N(""), E(/* @__PURE__ */ new Map()), $(!1);
       return;
     }
-    const C = Re(e, t);
-    r.current = C, o.current = new Set(C), s.current = nt(C, [...gt]), c.current = [], R(!1);
-    const P = Ce(e);
-    f(P), v(P);
-    const D = ve(e);
-    return g(D.kind), S(D.value), k(D.value), a.current = D.kind !== "none" ? tt(e, D.kind) : null, ze(C, i), () => Se(C);
+    const C = $e(e, t);
+    a.current = C, o.current = new Set(C), s.current = nt(C, [...mt]), p.current = [], $(!1);
+    const R = Ce(e);
+    g(R), x(R);
+    const P = xe(e);
+    return m(P.kind), z(P.value), N(P.value), i.current = P.kind !== "none" ? tt(e, P.kind) : null, Be(C, r), () => ze(C);
   }, [e]), _(() => {
-    e && L(!0);
+    e && S(!0);
   }, [t]), _(() => {
-    var ae;
+    var ie;
     if (!e) return;
-    const C = Re(e, t);
-    r.current = C, ke(
-      s.current.filter((G) => C.includes(G.element))
+    const C = $e(e, t);
+    a.current = C, Ne(
+      s.current.filter((X) => C.includes(X.element))
     );
-    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);
+    const R = Ce(e), P = r === "normal" ? {} : Jt(e, r);
+    for (const [X, G] of Object.entries(P))
+      for (const ue of C) ue.style.setProperty(X, G);
+    const T = ((ie = k.get(e)) == null ? void 0 : ie.get(r)) ?? [];
+    for (const X of T)
+      if (!(X.property === "textContent" || X.property === "value"))
+        for (const G of C)
+          G.style.setProperty(X.property, X.newValue);
+    const H = d.current, D = H !== null && H.element === e && H.state !== r, Y = H !== null && H.element !== e && r !== "normal";
+    if (D || Y) {
+      const X = { ...R, ...P };
+      for (const G of T)
+        G.property === "textContent" || G.property === "value" || (X[G.property] = G.newValue);
+      g(X);
     }
-    u.current = { element: e, state: i }, Se(Array.from(o.current)), ze(C, i), o.current = new Set(C);
-  }, [i, e, t]);
-  const h = $(
-    (C, P, D) => {
+    d.current = { element: e, state: r }, ze(Array.from(o.current)), Be(C, r), o.current = new Set(C);
+  }, [r, e, t]);
+  const u = L(
+    (C, R, P) => {
       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;
+        const H = new Map(T), D = new Map(H.get(e) ?? /* @__PURE__ */ new Map()), ie = (D.get(r) ?? []).filter((X) => X.property !== C);
+        return P === R ? ie.length === 0 ? D.delete(r) : D.set(r, ie) : D.set(r, [...ie, { property: C, oldValue: R, newValue: P }]), D.size === 0 ? H.delete(e) : H.set(e, D), H;
       });
     },
-    [e, i]
-  ), F = $(
-    (C, P) => {
+    [e, r]
+  ), O = L(
+    (C, R) => {
       if (!e) return;
-      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)
+      const P = { [C]: R };
+      C === "border-width" && (l["border-style"] ?? "none") === "none" && Ln(R) && (P["border-style"] = "solid"), I(), g((T) => ({ ...T, ...P }));
+      for (const [T, H] of Object.entries(P)) {
+        const D = f[T] ?? "";
+        for (const Y of a.current)
           Y.style.setProperty(T, H), o.current.add(Y);
-        h(T, O, H);
+        u(T, D, H);
       }
     },
-    [e, p, l, I, h]
-  ), U = $(
+    [e, f, l, I, u]
+  ), W = L(
     (C) => {
-      if (!(!e || m === "none")) {
-        I(), S(C);
-        for (const P of r.current)
-          rt(P, m, C), o.current.add(P);
-        h(m, w, C);
+      if (!(!e || h === "none")) {
+        I(), z(C);
+        for (const R of a.current)
+          at(R, h, C), o.current.add(R);
+        u(h, w, C);
       }
     },
-    [e, m, w, I, h]
-  ), ye = $(() => {
-    const C = c.current.pop();
-    if (C && (ke(C.inline), C.text && Ae(C.text), R(c.current.length > 0), e)) {
-      f(Ce(e));
-      const P = ve(e);
-      P.kind !== "none" && S(P.value);
+    [e, h, w, I, u]
+  ), ve = L(() => {
+    const C = p.current.pop();
+    if (C && (Ne(C.inline), C.text && Ae(C.text), $(p.current.length > 0), e)) {
+      g(Ce(e));
+      const R = xe(e);
+      R.kind !== "none" && z(R.value);
     }
-  }, [e]), ee = $(() => {
-    if (ke(s.current), a.current && Ae(a.current), c.current = [], R(!1), E(/* @__PURE__ */ new Map()), e) {
-      f(Ce(e));
-      const C = ve(e);
-      S(C.value);
+  }, [e]), ee = L(() => {
+    if (Ne(s.current), i.current && Ae(i.current), p.current = [], $(!1), E(/* @__PURE__ */ new Map()), e) {
+      g(Ce(e));
+      const C = xe(e);
+      z(C.value);
     }
-  }, [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);
+  }, [e]), ae = L(() => {
+    Ne(s.current), i.current && Ae(i.current);
+  }, []), oe = L(() => {
+    if (ae(), ze(Array.from(o.current)), p.current = [], $(!1), E(/* @__PURE__ */ new Map()), e) {
+      g(Ce(e));
+      const C = xe(e);
+      C.kind !== "none" && z(C.value);
     }
-  }, [re, e]), W = e ? ((ce = N.get(e)) == null ? void 0 : ce.get(i)) ?? [] : [];
-  let j = 0;
-  for (const C of N.values())
-    for (const P of C.values()) j += P.length;
-  const ie = $(() => {
+  }, [ae, e]), U = e ? ((pe = k.get(e)) == null ? void 0 : pe.get(r)) ?? [] : [];
+  let K = 0;
+  for (const C of k.values())
+    for (const R of C.values()) K += R.length;
+  const re = L(() => {
     E(/* @__PURE__ */ new Map());
   }, []);
   return {
     values: l,
-    textKind: m,
-    textValue: y,
-    pendingChanges: W,
-    pendingByElement: N,
-    totalPendingCount: j,
-    clearAllPending: ie,
-    canUndo: z,
-    updateProperty: F,
-    updateText: U,
-    undo: ye,
+    textKind: h,
+    textValue: v,
+    pendingChanges: U,
+    pendingByElement: k,
+    totalPendingCount: K,
+    clearAllPending: re,
+    canUndo: B,
+    updateProperty: O,
+    updateText: W,
+    undo: ve,
     reset: ee,
     clearPreviews: oe,
-    revertPreviews: re
+    revertPreviews: ae
   };
 }
-function Jn({
+function Zn({
   selectedElement: e,
   hoveredElement: t,
-  onSelectElement: i,
-  onHoverElement: r,
+  onSelectElement: r,
+  onHoverElement: a,
   targetScope: o,
   onTargetScopeChange: s,
-  elementState: a,
-  onElementStateChange: c,
-  onApply: u,
+  elementState: i,
+  onElementStateChange: p,
+  onApply: d,
   applyStatus: l,
-  isToolbarTarget: f,
-  onPreviewApi: p
+  isToolbarTarget: g,
+  onPreviewApi: f
 }) {
   const {
-    values: v,
-    textKind: m,
-    textValue: g,
-    pendingChanges: y,
-    pendingByElement: S,
+    values: x,
+    textKind: h,
+    textValue: m,
+    pendingChanges: v,
+    pendingByElement: z,
     totalPendingCount: w,
-    clearAllPending: k,
-    canUndo: N,
+    clearAllPending: N,
+    canUndo: k,
     updateProperty: E,
-    updateText: z,
-    undo: R,
-    reset: x,
+    updateText: B,
+    undo: $,
+    reset: y,
     clearPreviews: I,
-    revertPreviews: L
-  } = qn(e, o, a), { elementRef: h, isDragging: F, style: U, dragHandleProps: ye } = Tt({
+    revertPreviews: S
+  } = Jn(e, o, i), { elementRef: u, isDragging: O, style: W, dragHandleProps: ve } = Rt({
     computeDefaultPosition: (T) => ({
       x: window.innerWidth - T.width - 16,
       y: 16
     })
   });
-  _(() => (p == null || p({ clearPreviews: I, revertPreviews: L }), () => p == null ? void 0 : p(null)), [p, I, L]);
-  const ee = $(
+  _(() => (f == null || f({ clearPreviews: I, revertPreviews: S }), () => f == null ? void 0 : f(null)), [f, I, S]);
+  const ee = L(
     (T) => {
-      if (f(T.target)) return;
-      const O = document.elementsFromPoint(T.clientX, T.clientY).find(
+      if (g(T.target)) return;
+      const D = 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(O ?? null);
+      a(D ?? null);
     },
-    [f, r]
-  ), re = $(
+    [g, a]
+  ), ae = L(
     (T) => {
-      if (f(T.target)) return;
+      if (g(T.target)) return;
       T.preventDefault(), T.stopPropagation();
-      const O = document.elementsFromPoint(T.clientX, T.clientY).find(
+      const D = 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(O ?? null);
+      r(D ?? null);
     },
-    [f, i]
+    [g, r]
   );
-  _(() => (document.addEventListener("mousemove", ee, !0), document.addEventListener("click", re, !0), () => {
-    document.removeEventListener("mousemove", ee, !0), document.removeEventListener("click", re, !0);
-  }), [ee, re]);
+  _(() => (document.addEventListener("mousemove", ee, !0), document.addEventListener("click", ae, !0), () => {
+    document.removeEventListener("mousemove", ee, !0), document.removeEventListener("click", ae, !0);
+  }), [ee, ae]);
   const oe = async () => {
     if (w === 0) return;
-    const T = await u(S);
-    T.applied && (k(), T.skipRevert || L());
-  }, W = e ? Ge(e) : null, j = e ? kt(e) : null, ie = e ? Ct(e) : 0, ce = e ? Mt(e, "all-instances") : "", C = a !== "normal" && j === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : a !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, P = ie > 1 ? o === "all-instances" ? `Preview & Apply on ${ie} elements (${ce}).` : `This instance only — ${ie - 1} other on page.` : o === "all-instances" ? "Only one match — scope has no effect." : null, D = Me(() => !e || o !== "all-instances" ? [] : Re(e, "all-instances"), [e, o]);
-  return /* @__PURE__ */ d(q, { children: [
+    const T = await d(z);
+    T.applied && (N(), T.skipRevert || S());
+  }, U = e ? Xe(e) : null, K = e ? Ct(e) : null, re = e ? Mt(e) : 0, pe = e ? At(e, "all-instances") : "", C = i !== "normal" && K === "tailwind" ? "Tailwind variant preview: matching hover:/focus:/… classes are applied without the prefix." : i !== "normal" ? "State preview uses focus/disabled simulation where possible." : null, R = re > 1 ? o === "all-instances" ? `Preview & Apply on ${re} elements (${pe}).` : `This instance only — ${re - 1} other on page.` : o === "all-instances" ? "Only one match — scope has no effect." : null, P = Me(() => !e || o !== "all-instances" ? [] : $e(e, "all-instances"), [e, o]);
+  return /* @__PURE__ */ c(q, { children: [
     /* @__PURE__ */ n(
-      Et,
+      It,
       {
         element: o === "all-instances" ? null : t,
         selected: e,
-        multiSelected: D,
+        multiSelected: P,
         primarySelected: e
       }
     ),
     /* @__PURE__ */ n(
       "div",
       {
-        ref: h,
-        className: `pa-edit-panel-float ${F ? "pa-edit-panel-float--dragging" : ""}`,
-        style: U,
-        children: /* @__PURE__ */ n(Pe, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ d("div", { className: "pa-edit-panel-inner", children: [
-          /* @__PURE__ */ d("div", { className: "pa-edit-panel-header", children: [
+        ref: u,
+        className: `pa-edit-panel-float ${O ? "pa-edit-panel-float--dragging" : ""}`,
+        style: W,
+        children: /* @__PURE__ */ n(Re, { variant: "sheet", side: "right", className: "pa-edit-panel-glass", children: /* @__PURE__ */ c("div", { className: "pa-edit-panel-inner", children: [
+          /* @__PURE__ */ c("div", { className: "pa-edit-panel-header", children: [
             /* @__PURE__ */ n(
               "button",
               {
@@ -1773,8 +1773,8 @@ function Jn({
                 className: "pa-edit-panel-drag",
                 "aria-label": "Drag edit panel",
                 title: "Drag to move",
-                ...ye,
-                children: /* @__PURE__ */ d("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
+                ...ve,
+                children: /* @__PURE__ */ c("span", { className: "pa-edit-panel-grip", "aria-hidden": "true", children: [
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
                   /* @__PURE__ */ n("span", {}),
@@ -1786,63 +1786,63 @@ function Jn({
             ),
             /* @__PURE__ */ n("h3", { className: "pa-edit-title", children: "Edit" })
           ] }),
-          e ? /* @__PURE__ */ d(q, { children: [
-            /* @__PURE__ */ d("div", { className: "pa-edit-meta", children: [
+          e ? /* @__PURE__ */ c(q, { children: [
+            /* @__PURE__ */ c("div", { className: "pa-edit-meta", children: [
               /* @__PURE__ */ n(
                 "code",
                 {
                   className: "pa-edit-meta-label",
-                  title: `This instance: ${At(e)}
-All instances: ${ce}`,
-                  children: Xe(e)
+                  title: `This instance: ${zt(e)}
+All instances: ${pe}`,
+                  children: je(e)
                 }
               ),
-              ((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}` : ""
+              ((U == null ? void 0 : U.sourceFile) || K) && /* @__PURE__ */ c("span", { className: "pa-edit-source", children: [
+                (U == null ? void 0 : U.sourceFile) && /* @__PURE__ */ c(q, { children: [
+                  U.sourceFile,
+                  U.lineNumber ? `:${U.lineNumber}` : ""
                 ] }),
-                W != null && W.sourceFile && j ? " · " : "",
-                j ?? ""
+                U != null && U.sourceFile && K ? " · " : "",
+                K ?? ""
               ] })
             ] }),
             /* @__PURE__ */ n("div", { className: "pa-edit-panel-scroll", children: /* @__PURE__ */ n(
               Kn,
               {
-                values: v,
+                values: x,
                 onPropertyChange: E,
-                textKind: m,
-                textValue: g,
-                onTextChange: z,
+                textKind: h,
+                textValue: m,
+                onTextChange: B,
                 targetScope: o,
                 onTargetScopeChange: s,
-                elementState: a,
-                onElementStateChange: c,
-                instanceCount: ie,
-                scopeHint: P,
+                elementState: i,
+                onElementStateChange: p,
+                instanceCount: re,
+                scopeHint: R,
                 stateHint: C
               }
             ) }),
-            /* @__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(gn, { className: "pa-glass-btn-icon" }),
+            /* @__PURE__ */ c("div", { className: "pa-edit-panel-sticky", children: [
+              /* @__PURE__ */ c("div", { className: "pa-edit-actions", children: [
+                /* @__PURE__ */ n(V, { variant: "regular", onClick: $, disabled: !k, children: /* @__PURE__ */ c("span", { className: "pa-glass-btn-inner", children: [
+                  /* @__PURE__ */ n(xn, { className: "pa-glass-btn-icon" }),
                   /* @__PURE__ */ n("span", { children: "Undo" })
                 ] }) }),
                 /* @__PURE__ */ n(
                   V,
                   {
                     variant: "regular",
-                    onClick: x,
-                    disabled: y.length === 0,
-                    children: /* @__PURE__ */ d("span", { className: "pa-glass-btn-inner", children: [
-                      /* @__PURE__ */ n(vn, { className: "pa-glass-btn-icon" }),
+                    onClick: y,
+                    disabled: v.length === 0,
+                    children: /* @__PURE__ */ c("span", { className: "pa-glass-btn-inner", children: [
+                      /* @__PURE__ */ n(bn, { className: "pa-glass-btn-icon" }),
                       /* @__PURE__ */ n("span", { children: "Reset" })
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ d("div", { className: "pa-edit-footer", children: [
+              /* @__PURE__ */ c("div", { className: "pa-edit-footer", children: [
                 /* @__PURE__ */ n(
                   "span",
                   {
@@ -1856,7 +1856,7 @@ All instances: ${ce}`,
                     variant: "glass-primary",
                     onClick: oe,
                     disabled: w === 0,
-                    title: W != null && W.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
+                    title: U != null && U.sourceFile ? void 0 : "No source file — Apply copies selector + changes to clipboard",
                     children: "Apply"
                   }
                 )
@@ -1868,58 +1868,58 @@ All instances: ${ce}`,
     )
   ] });
 }
-async function Zn(e, t = {}) {
+async function Qn(e, t = {}) {
   if (t.onApply)
     try {
-      const r = await t.onApply(e);
-      if (r) return { mode: "mcp", result: r };
-    } catch (r) {
-      return { mode: "error", message: r instanceof Error ? r.message : String(r) };
+      const a = await t.onApply(e);
+      if (a) return { mode: "mcp", result: a };
+    } catch (a) {
+      return { mode: "error", message: a instanceof Error ? a.message : String(a) };
     }
-  const i = t.applyEndpoint;
-  if (i)
+  const r = t.applyEndpoint;
+  if (r)
     try {
-      const r = await fetch(i, {
+      const a = await fetch(r, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ payload: e })
-      }), 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) };
+      }), o = await a.json();
+      return a.ok ? { mode: "mcp", result: o } : { mode: "error", message: o.error ?? a.statusText };
+    } catch (a) {
+      return { mode: "error", message: a instanceof Error ? a.message : String(a) };
     }
   return await St(JSON.stringify(e, null, 2)), { mode: "clipboard" };
 }
-function Qn(e) {
-  const [t, i] = A(null);
+function ea(e) {
+  const [t, r] = A(null);
   return _(() => {
     if (!e) {
-      i(null);
+      r(null);
       return;
     }
-    const r = () => i(e.getBoundingClientRect());
-    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);
+    const a = () => r(e.getBoundingClientRect());
+    a();
+    const o = new ResizeObserver(a);
+    return o.observe(e), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
+      o.disconnect(), window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
     };
   }, [e]), t;
 }
-const le = 8, Q = 8, er = 12, tr = 300, nr = 280;
-function He(e, t, i, r) {
+const le = 8, Q = 8, ta = 12, na = 300, aa = 280;
+function He(e, t, r, a) {
   return {
     top: e,
     left: t,
-    right: t + i,
-    bottom: e + r,
-    width: i,
-    height: r
+    right: t + r,
+    bottom: e + a,
+    width: r,
+    height: a
   };
 }
 function Ye(e, t) {
   return e.left < t.right && e.right > t.left && e.top < t.bottom && e.bottom > t.top;
 }
-function rr(e, t) {
+function ra(e, t) {
   return {
     top: e.top - t,
     left: e.left - t,
@@ -1929,12 +1929,12 @@ function rr(e, t) {
     height: e.height + t * 2
   };
 }
-function ir() {
+function oa() {
   if (typeof document > "u") return null;
   const e = document.querySelector(
     "[data-pixelagent-toolbar-portal] .pa-toolbar-float"
   );
-  return e ? rr(e.getBoundingClientRect(), er) : null;
+  return e ? ra(e.getBoundingClientRect(), ta) : null;
 }
 function Ve(e, t) {
   return Math.min(
@@ -1948,108 +1948,108 @@ function Ee(e, t) {
     window.innerHeight - t - le
   );
 }
-function or(e) {
+function ia(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 : or(e);
+function sa(e, t) {
+  return t && Ye(e, t) ? !1 : ia(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 },
+function la(e, t = na, r = aa) {
+  const a = oa(), s = e.top > window.innerHeight * 0.45 ? [
+    { placement: "above", top: e.top - r - 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 + Q, left: e.left },
-    { placement: "above", top: e.top - i - Q, left: e.left },
+    { placement: "above", top: e.top - r - 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(
-      Ee(u, i),
+  for (const { top: d, left: l } of s) {
+    const g = He(
+      Ee(d, r),
       Ve(l, t),
       t,
-      i
+      r
     );
-    if (ar(f, r))
-      return { top: f.top, left: f.left };
+    if (sa(g, a))
+      return { top: g.top, left: g.left };
   }
-  let a = Ee(e.top - i - Q, i), c = Ve(e.left, t);
-  if (r) {
-    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),
+  let i = Ee(e.top - r - Q, r), p = Ve(e.left, t);
+  if (a) {
+    let d = He(i, p, t, r);
+    Ye(d, a) && (i = Ee(a.top - r - Q, r), d = He(i, p, t, r)), Ye(d, a) && (i = Ee(e.bottom + Q, r), p = Ve(
+      Math.min(e.left, a.left - t - Q),
       t
     ));
   }
-  return { top: a, left: c };
+  return { top: i, left: p };
 }
-function lr({
+function pa({
   elements: e,
   areaBbox: t,
-  onSubmit: i,
-  onCancel: r
+  onSubmit: r,
+  onCancel: a
 }) {
-  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;
+  const [o, s] = A(""), i = j(null), p = j(null), d = e[0] ?? null, l = t ? new DOMRect(t.x, t.y, t.width, t.height) : null, g = ea(d), f = l ?? g, x = Lt(), h = d ? xe(d) : { kind: "none", value: "" }, m = h.kind !== "none" ? h.value : void 0;
   if (_(() => {
-    var k;
-    (k = a.current) == null || k.focus();
+    var N;
+    (N = i.current) == null || N.focus();
   }, [e]), _(() => {
-    const k = (N) => {
-      N.key === "Escape" && r();
+    const N = (k) => {
+      k.key === "Escape" && a();
     };
-    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [r]), !p) return null;
-  const y = sr(p), S = e.length > 1 ? `${e.length} selected` : u ? Xe(u) : "Area selection", w = (k) => {
-    o.trim() && i(o, k);
+    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+  }, [a]), !f) return null;
+  const v = la(f), z = e.length > 1 ? `${e.length} selected` : d ? je(d) : "Area selection", w = (N) => {
+    o.trim() && r(o, N);
   };
   return /* @__PURE__ */ n(
-    Pe,
+    Re,
     {
       variant: "popover",
-      style: { top: y.top, left: y.left },
-      children: /* @__PURE__ */ d(
+      style: { top: v.top, left: v.left },
+      children: /* @__PURE__ */ c(
         "div",
         {
-          ref: c,
+          ref: p,
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Add annotation",
           className: "pa-popover-body",
           children: [
-            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: S }) }),
-            (v || g) && /* @__PURE__ */ d("div", { className: "pa-popover-context", children: [
-              v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
+            /* @__PURE__ */ n("div", { className: "pa-popover-header", children: /* @__PURE__ */ n("span", { className: "pa-popover-selector", children: z }) }),
+            (x || m) && /* @__PURE__ */ c("div", { className: "pa-popover-context", children: [
+              x && /* @__PURE__ */ c("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Selected" }),
-                v
+                x
               ] }),
-              g && g !== v && /* @__PURE__ */ d("p", { className: "pa-popover-context-line", children: [
+              m && m !== x && /* @__PURE__ */ c("p", { className: "pa-popover-context-line", children: [
                 /* @__PURE__ */ n("span", { className: "pa-popover-context-label", children: "Element" }),
-                g
+                m
               ] })
             ] }),
-            /* @__PURE__ */ d("label", { className: "pa-label", children: [
+            /* @__PURE__ */ c("label", { className: "pa-label", children: [
               "Note",
               /* @__PURE__ */ n(
                 "textarea",
                 {
-                  ref: a,
+                  ref: i,
                   className: "pa-textarea",
                   value: o,
-                  onChange: (k) => s(k.target.value),
+                  onChange: (N) => s(N.target.value),
                   placeholder: "Describe the change...",
                   rows: 3,
-                  onKeyDown: (k) => {
-                    k.key === "Enter" && (k.metaKey || k.ctrlKey) && (k.preventDefault(), w(k.shiftKey)), k.key === "Escape" && r();
+                  onKeyDown: (N) => {
+                    N.key === "Enter" && (N.metaKey || N.ctrlKey) && (N.preventDefault(), w(N.shiftKey)), N.key === "Escape" && a();
                   }
                 }
               )
             ] }),
             /* @__PURE__ */ n("p", { className: "pa-popover-hint", children: "⌘↵ Add · ⇧⌘↵ Add & next · Esc Cancel" }),
-            /* @__PURE__ */ d("div", { className: "pa-popover-actions", children: [
-              /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, children: "Cancel" }),
+            /* @__PURE__ */ c("div", { className: "pa-popover-actions", children: [
+              /* @__PURE__ */ n(V, { variant: "ghost", onClick: a, children: "Cancel" }),
               /* @__PURE__ */ n(
                 V,
                 {
@@ -2075,7 +2075,7 @@ function lr({
     }
   );
 }
-function cr({ area: e, isDragging: t }) {
+function ca({ area: e, isDragging: t }) {
   return !e || e.width < 2 || e.height < 2 ? null : /* @__PURE__ */ n(
     "div",
     {
@@ -2090,31 +2090,31 @@ function cr({ area: e, isDragging: t }) {
     }
   );
 }
-function dr(e) {
-  const { elements: t, note: i, areaBbox: r } = e, o = t[0];
-  if (!o && r)
+function da(e) {
+  const { elements: t, note: r, areaBbox: a } = e, o = t[0];
+  if (!o && a)
     return {
       id: crypto.randomUUID(),
       selector: "area-selection",
-      note: i.trim(),
-      areaBbox: r,
-      position: { x: Math.round(r.x), y: Math.round(r.y) },
+      note: r.trim(),
+      areaBbox: a,
+      position: { x: Math.round(a.x), y: Math.round(a.y) },
       bbox: {
-        x: Math.round(r.x),
-        y: Math.round(r.y),
-        width: Math.round(r.width),
-        height: Math.round(r.height)
+        x: Math.round(a.x),
+        y: Math.round(a.y),
+        width: Math.round(a.width),
+        height: Math.round(a.height)
       },
       createdAt: Date.now()
     };
   if (!o)
     throw new Error("buildAnnotationEntry requires at least one element or areaBbox");
-  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));
+  const s = o.getBoundingClientRect(), i = Xe(o), p = Lt(), d = xe(o), l = d.kind !== "none" ? d.value : void 0, g = t.map((f) => zt(f));
   return {
     id: crypto.randomUUID(),
-    selector: f[0],
-    selectors: f.length > 1 ? f : void 0,
-    note: i.trim(),
+    selector: g[0],
+    selectors: g.length > 1 ? g : void 0,
+    note: r.trim(),
     position: { x: Math.round(s.x), y: Math.round(s.y) },
     bbox: {
       x: Math.round(s.x),
@@ -2122,101 +2122,101 @@ function dr(e) {
       width: Math.round(s.width),
       height: Math.round(s.height)
     },
-    areaBbox: r,
-    domPath: Zt(o),
-    selectedText: c,
+    areaBbox: a,
+    domPath: Qt(o),
+    selectedText: p,
     elementText: l,
-    sourceFile: a.sourceFile,
-    lineNumber: a.lineNumber,
-    componentName: Jt(o) ?? a.componentName,
+    sourceFile: i.sourceFile,
+    lineNumber: i.lineNumber,
+    componentName: Zt(o) ?? i.componentName,
     createdAt: Date.now()
   };
 }
-function ur(e) {
-  const t = $t(e);
+function fa(e) {
+  const t = Et(e);
   if (t) return t.getBoundingClientRect();
   if (e.bbox) {
-    const { x: i, y: r, width: o, height: s } = e.bbox;
-    return new DOMRect(i, r, o, s);
+    const { x: r, y: a, width: o, height: s } = e.bbox;
+    return new DOMRect(r, a, o, s);
   }
   if (e.areaBbox) {
-    const { x: i, y: r, width: o, height: s } = e.areaBbox;
-    return new DOMRect(i, r, o, s);
+    const { x: r, y: a, width: o, height: s } = e.areaBbox;
+    return new DOMRect(r, a, o, s);
   }
   if (e.position) {
-    const { x: i, y: r } = e.position;
-    return new DOMRect(i, r, 1, 1);
+    const { x: r, y: a } = e.position;
+    return new DOMRect(r, a, 1, 1);
   }
   return null;
 }
-function pr(e) {
+function ua(e) {
   return `${Math.round(e.top)}:${Math.round(e.left)}:${Math.round(e.width)}:${Math.round(e.height)}`;
 }
-const hr = 20;
-function fr({ annotations: e }) {
-  const [t, i] = A([]);
+const ga = 20;
+function ha({ annotations: e }) {
+  const [t, r] = A([]);
   return _(() => {
     if (e.length === 0) {
-      i([]);
+      r([]);
       return;
     }
-    const r = /* @__PURE__ */ new Map(), o = () => {
-      const c = [];
-      e.forEach((u, l) => {
-        const f = ur(u);
-        if (!f) return;
-        const p = pr(f), v = r.get(p) ?? 0;
-        r.set(p, v + 1), c.push({
-          id: u.id,
+    const a = /* @__PURE__ */ new Map(), o = () => {
+      const p = [];
+      e.forEach((d, l) => {
+        const g = fa(d);
+        if (!g) return;
+        const f = ua(g), x = a.get(f) ?? 0;
+        a.set(f, x + 1), p.push({
+          id: d.id,
           index: l + 1,
-          top: f.top - 6 - v * hr,
-          left: f.right - 6
+          top: g.top - 6 - x * ga,
+          left: g.right - 6
         });
-      }), i(c);
+      }), r(p);
     };
     o();
     const s = /* @__PURE__ */ new Set();
-    for (const c of e) {
-      const u = $t(c);
-      u && s.add(u);
+    for (const p of e) {
+      const d = Et(p);
+      d && s.add(d);
     }
-    const a = Array.from(s).map((c) => {
-      const u = new ResizeObserver(o);
-      return u.observe(c), u;
+    const i = Array.from(s).map((p) => {
+      const d = new ResizeObserver(o);
+      return d.observe(p), d;
     });
     return window.addEventListener("scroll", o, !0), window.addEventListener("resize", o), () => {
-      for (const c of a) c.disconnect();
+      for (const p of i) p.disconnect();
       window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", o);
     };
-  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(q, { children: t.map((r) => /* @__PURE__ */ n(
+  }, [e]), t.length === 0 ? null : /* @__PURE__ */ n(q, { children: t.map((a) => /* @__PURE__ */ n(
     "span",
     {
       className: "pa-annotation-badge",
-      style: { top: r.top, left: r.left },
+      style: { top: a.top, left: a.left },
       "aria-hidden": "true",
-      children: r.index
+      children: a.index
     },
-    r.id
+    a.id
   )) });
 }
 const Ze = "[data-pixelagent-root],[data-pixelagent-toolbar-portal],[data-pixelagent-picker-portal]";
 function Ie(e) {
   return e instanceof Element ? !!e.closest(Ze) : !1;
 }
-function vt(e, t) {
+function xt(e, t) {
   return document.elementsFromPoint(e, t).find(
-    (r) => r instanceof Element && !r.closest(Ze)
+    (a) => a instanceof Element && !a.closest(Ze)
   ) ?? null;
 }
-function _t(e) {
+function Ht(e) {
   return e ? e === "Copied all!" || e.startsWith("Copy failed") : !1;
 }
-function Ht({
+function Vt({
   feedback: e,
   slotClassName: t,
-  children: i
+  children: r
 }) {
-  return e && _t(e) ? /* @__PURE__ */ n(
+  return e && Ht(e) ? /* @__PURE__ */ n(
     "span",
     {
       className: `pa-status pa-copy-feedback-slot ${t}`,
@@ -2224,65 +2224,65 @@ function Ht({
       "aria-live": "polite",
       children: e
     }
-  ) : /* @__PURE__ */ n(q, { children: i });
+  ) : /* @__PURE__ */ n(q, { children: r });
 }
-function mr({
+function ma({
   annotations: e,
   collapsed: t,
-  onToggleCollapsed: i,
-  onClose: r,
+  onToggleCollapsed: r,
+  onClose: a,
   onCopyAll: o,
   onCopyOne: s,
-  onRemove: a,
-  onUpdate: c,
-  copyStatus: u,
+  onRemove: i,
+  onUpdate: p,
+  copyStatus: d,
   copiedEntryId: l,
-  copyAllFrom: f
+  copyAllFrom: g
 }) {
-  const [p, v] = A(null), [m, g] = A("");
+  const [f, x] = A(null), [h, m] = A("");
   _(() => {
-    const w = (k) => {
-      k.key === "Escape" && (t ? r() : i());
+    const w = (N) => {
+      N.key === "Escape" && (t ? a() : r());
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [t, r, i]);
-  const y = (w) => {
-    v(w.id), g(w.note);
-  }, S = (w) => {
-    m.trim() && (c(w, { note: m.trim() }), v(null));
+  }, [t, a, r]);
+  const v = (w) => {
+    x(w.id), m(w.note);
+  }, z = (w) => {
+    h.trim() && (p(w, { note: h.trim() }), x(null));
   };
-  return /* @__PURE__ */ d(
-    Pe,
+  return /* @__PURE__ */ c(
+    Re,
     {
       variant: "sheet",
       side: "right",
       className: t ? "pa-session-panel--collapsed" : void 0,
       children: [
-        /* @__PURE__ */ d("div", { className: "pa-session-header", children: [
-          /* @__PURE__ */ d("div", { className: "pa-session-header-main", children: [
+        /* @__PURE__ */ c("div", { className: "pa-session-header", children: [
+          /* @__PURE__ */ c("div", { className: "pa-session-header-main", children: [
             /* @__PURE__ */ n(
               V,
               {
                 variant: "ghost",
                 className: "pa-glass-btn--sm pa-session-collapse-btn",
-                onClick: i,
+                onClick: r,
                 "aria-expanded": !t,
                 "aria-label": t ? "Expand session panel" : "Collapse session panel",
                 children: /* @__PURE__ */ n("span", { className: "pa-session-chevron", "aria-hidden": "true", children: t ? "▶" : "▼" })
               }
             ),
-            /* @__PURE__ */ d("h3", { className: "pa-session-title", children: [
+            /* @__PURE__ */ c("h3", { className: "pa-session-title", children: [
               "Session (",
               e.length,
               ")"
             ] })
           ] }),
           !t && /* @__PURE__ */ n("p", { className: "pa-session-subtitle", children: "Persists until tab close" }),
-          /* @__PURE__ */ d("div", { className: "pa-session-actions", children: [
+          /* @__PURE__ */ c("div", { className: "pa-session-actions", children: [
             /* @__PURE__ */ n(
-              Ht,
+              Vt,
               {
-                feedback: f === "session" ? u : null,
+                feedback: g === "session" ? d : null,
                 slotClassName: "pa-copy-feedback-slot--session",
                 children: /* @__PURE__ */ n(
                   V,
@@ -2296,46 +2296,46 @@ function mr({
                 )
               }
             ),
-            /* @__PURE__ */ n(V, { variant: "ghost", onClick: r, "aria-label": "Close session panel", children: "✕" })
+            /* @__PURE__ */ n(V, { variant: "ghost", onClick: a, "aria-label": "Close session panel", children: "✕" })
           ] })
         ] }),
-        !t && /* @__PURE__ */ d("ul", { className: "pa-session-list", children: [
+        !t && /* @__PURE__ */ c("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 = 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: [
+            const N = en(w);
+            return /* @__PURE__ */ n("li", { className: "pa-session-item", children: f === w.id ? /* @__PURE__ */ c("div", { className: "pa-session-edit", children: [
+              /* @__PURE__ */ c("label", { className: "pa-label", children: [
                 "Note",
                 /* @__PURE__ */ n(
                   "textarea",
                   {
                     className: "pa-textarea",
-                    value: m,
-                    onChange: (N) => g(N.target.value),
+                    value: h,
+                    onChange: (k) => m(k.target.value),
                     rows: 3
                   }
                 )
               ] }),
-              /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => v(null), children: "Cancel" }),
+              /* @__PURE__ */ c("div", { className: "pa-session-item-actions", children: [
+                /* @__PURE__ */ n(V, { variant: "ghost", onClick: () => x(null), children: "Cancel" }),
                 /* @__PURE__ */ n(
                   V,
                   {
                     variant: "glass-primary",
-                    onClick: () => S(w.id),
-                    disabled: !m.trim(),
+                    onClick: () => z(w.id),
+                    disabled: !h.trim(),
                     children: "Save"
                   }
                 )
               ] })
-            ] }) : /* @__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 }),
-                k.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: k.meta })
+            ] }) : /* @__PURE__ */ c(q, { children: [
+              /* @__PURE__ */ c("div", { className: "pa-session-content", children: [
+                /* @__PURE__ */ n("span", { className: "pa-session-target", children: N.target }),
+                /* @__PURE__ */ n("p", { className: "pa-session-note", children: N.note }),
+                N.meta && /* @__PURE__ */ n("p", { className: "pa-session-meta-line", children: N.meta })
               ] }),
-              /* @__PURE__ */ d("div", { className: "pa-session-item-actions", children: [
-                u === "Copied!" && l === w.id ? /* @__PURE__ */ n(
+              /* @__PURE__ */ c("div", { className: "pa-session-item-actions", children: [
+                d === "Copied!" && l === w.id ? /* @__PURE__ */ n(
                   "span",
                   {
                     className: "pa-status pa-copy-feedback-slot pa-copy-feedback-slot--item",
@@ -2358,7 +2358,7 @@ function mr({
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => y(w),
+                    onClick: () => v(w),
                     "aria-label": "Edit annotation note",
                     children: "✎"
                   }
@@ -2368,7 +2368,7 @@ function mr({
                   {
                     variant: "ghost",
                     className: "pa-glass-btn--sm",
-                    onClick: () => a(w.id),
+                    onClick: () => i(w.id),
                     "aria-label": "Remove annotation",
                     children: "✕"
                   }
@@ -2381,29 +2381,24 @@ 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",
-      {
-        d: "M8 10.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z",
-        stroke: "currentColor",
-        strokeWidth: "1.25"
-      }
-    ),
-    /* @__PURE__ */ n(
-      "path",
-      {
-        d: "M12.1 9.2c.08-.42.08-.86 0-1.28l1.12-.87a.75.75 0 0 0 .18-.97l-1.06-1.84a.75.75 0 0 0-.92-.34l-1.32.53a5.2 5.2 0 0 0-1.1-.64l-.2-1.4A.75.75 0 0 0 8.9 2h-2.1a.75.75 0 0 0-.74.63l-.2 1.4c-.39.16-.76.37-1.1.64l-1.32-.53a.75.75 0 0 0-.92.34L1.56 6.08a.75.75 0 0 0 .18.97l1.12.87c-.08.42-.08.86 0 1.28l-1.12.87a.75.75 0 0 0-.18.97l1.06 1.84c.2.35.6.5.97.34l1.32-.53c.34.27.71.48 1.1.64l.2 1.4c.08.37.4.63.74.63h2.1c.37 0 .68-.28.74-.63l.2-1.4c.39-.16.76-.37 1.1-.64l1.32.53c.37.15.77 0 .97-.34l1.06-1.84a.75.75 0 0 0-.18-.97l-1.12-.87Z",
-        stroke: "currentColor",
-        strokeWidth: "1.1",
-        strokeLinejoin: "round"
-      }
-    )
-  ] });
+function xa() {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 512.054 511.942",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ n("path", { d: "M223.49 1.3c-8.4 2.1-14.7 5.7-21 12.1-9.2 9.1-12 16.3-15.6 40-.6 4.4-1.7 8.5-2.3 9.1s-4.8 2.6-9.2 4.4l-8.2 3.3-10.8-7.9c-17.3-12.4-23.4-14.8-37.3-14.6-7 .1-13.7 2-20.9 6-2.8 1.5-12.8 10.6-24.3 22.1-16.5 16.5-20.1 20.6-22.8 26.2-4.3 8.9-5.8 17.7-4.4 26.7 1.3 8.7 5 15.9 14.8 29.7l7.7 10.6-3.3 8.2c-1.7 4.5-3.7 8.7-4.3 9.3-.6.7-6.9 2.2-14 3.3-7.1 1.2-15.3 3-18.2 4-14.1 5-25.1 17.8-28.3 32.9-1.5 7-1.5 53.4 0 60.4 3.2 15 14.3 27.9 28.2 32.8 2.9 1 10.6 2.8 17.2 3.9 6.6 1.2 13 2.4 14.1 2.6 1.6.4 3.1 2.7 5.8 8.9 2 4.7 3.6 8.8 3.6 9.1 0 .4-3.6 5.8-8 12-11.1 15.7-13.3 20.7-13.8 32.1-.5 10.2 1 16.8 5.5 25 3.8 7 39.1 42.1 46.5 46.3 7.2 4 18.4 6.5 26 5.7 9.5-.9 16.2-4 30-13.7l13-9.2 8.4 3.4c6.1 2.4 8.6 4 8.9 5.4.3 1.1 1.4 7.5 2.5 14.3 2.5 14.8 4.9 21.6 10 28.1 7.3 9.2 14.7 14.1 25.2 16.6 7.8 1.8 53.8 2.1 62 .4 15.4-3.3 28.6-14.9 33.2-29.4.9-2.8 2.7-11 4-18.3s2.5-13.4 2.7-13.6c.2-.1 4.3-1.9 9-3.9l8.7-3.5 9.5 6.8c13.6 9.8 16.8 11.7 23.6 14 11.7 3.9 26.6 1.9 37.6-5.1 6.1-3.8 35-32.1 41-40.2 10.2-13.4 12.3-31.5 5.4-46.2-1.2-2.4-5.8-9.7-10.4-16.1l-8.3-11.6 3.8-9.2 3.8-9.1 13.3-2.2c7.4-1.2 15.7-3 18.4-3.8 14.5-4.7 26.1-17.9 29.4-33.3 1.8-8.5 1.5-55.4-.4-62.7-2.2-8.4-6-14.7-12.5-20.9-8.9-8.5-13.4-10.3-35-14l-12.5-2.1-2.7-5.5c-1.4-3-3.2-7.1-3.9-9.2-1.2-3.7-1.1-3.9 3.7-10.8 11.6-16.5 13.6-19.8 15.4-25.8 3.8-12.2 2-26.7-4.4-37.2-4.5-7.1-40.2-42.3-46.1-45.2-14.3-7.3-29.2-7.6-42-1-2.2 1.1-9.1 5.6-15.3 10l-11.3 8-8.2-3.5c-4.5-1.9-8.9-3.8-9.7-4.2-1-.5-2.2-5.1-3.7-14-3.5-20.9-6.5-27.6-16.6-36.7-11.3-10.1-17.1-11.4-51.2-11.3-17.3 0-27.7.5-31 1.3m59 30.5c6.1 2.7 8 7.4 11.5 28.6 2 12 3.6 18.8 4.9 20.5 2.5 3.5 7.4 6.6 13.4 8.5 2.9 1 10.7 4.1 17.3 7.1 6.7 3 13.6 5.4 15.3 5.4 4.9 0 8.7-2 22.6-12 7.1-5.1 14.2-10.1 15.9-11.1 3.7-2.3 9.7-2.5 13.4-.5 3.2 1.7 35.5 34.2 37.1 37.3s1.4 8.9-.5 12.6c-1 1.8-5.9 9.1-11 16.3-9.7 13.6-12.4 18.5-12.4 22.9 0 1.4 2.2 7.4 4.8 13.3 2.7 5.9 6.1 14.1 7.6 18.3 3.1 8.7 7 13.4 12.5 14.9 2 .5 10.6 2.1 19.1 3.5 17.6 2.9 22.2 4.5 25.3 8.9 2.1 3 2.2 4.3 2.5 27.5.5 36.3 1.1 35.4-28.6 40.6-10.3 1.8-20.2 4-21.9 4.9-4.1 2.1-5.7 4.4-8.9 13.1-1.5 3.8-4.9 12.1-7.7 18.4-6.3 14.3-6.2 17.1.9 27.2 17.6 25.1 19.4 28 19.4 31.4 0 1.8-.5 4.6-1.1 6.2-1.4 3.8-33.6 36.2-37.6 37.9-1.8.8-4.8 1.4-6.7 1.4-3.6 0-4-.2-30-18.4-11.8-8.2-13.9-8.3-28.7-1.8-6.3 2.7-14.1 5.9-17.3 7.1-13.9 5.1-14.6 6.3-19 31-5.3 29.8-4.4 29.1-38.9 29.1-34-.1-33.7.2-38.7-30.3-3.9-24.1-4.2-24.5-20.7-30.6-4.3-1.6-11.4-4.6-15.8-6.6-8.5-3.9-15.2-4.8-19.4-2.6-1.2.7-8.5 5.8-16.4 11.3-7.8 5.6-16 10.8-18.2 11.6-7.6 2.6-9.5 1.5-26.9-15.6-19.8-19.6-21.6-22-21.6-28.3 0-5.2.8-6.5 15.8-27.3 7.5-10.2 9.7-15.6 8.6-20.3-.4-1.5-2.5-6.6-4.7-11.3-2.1-4.7-5.4-12.5-7.2-17.3-3.6-9.4-5.3-12-9.7-14.3-1.6-.8-11.3-3-21.8-4.8-29.6-5.3-29-4.5-29-38.6 0-34.2-.6-33.3 29.2-38.5 13.2-2.3 19.9-4 21.7-5.3 3.6-2.7 6.7-7.4 8.7-13.5.9-2.9 3.8-10.2 6.5-16.3 3.7-8.4 4.9-12.4 4.9-16.1 0-5.4.1-5.3-13.7-24.5-10.1-14.1-11.7-17.6-10.7-23.2.6-3.6 2.6-6.1 17.8-21.4 9.4-9.6 18.3-18 19.8-18.8 3.8-2 10.7-1.7 14.4.5 1.7 1 8.9 6 16 11.2 18.9 13.6 20.1 13.8 35.4 6.7 4.7-2.2 12.2-5.3 16.7-7 9.3-3.4 12.6-5.6 15-10.1.8-1.7 3-11.6 4.8-22 2.6-14.4 3.9-19.6 5.7-22.3 4-5.8 6.5-6.3 32.8-6.3 20.7-.1 24 .2 27.5 1.8" }),
+        /* @__PURE__ */ n("path", { d: "M245.99 157c-23.1 2.3-46.5 13.9-62.5 31a99.5 99.5 0 0 0 0 135.8c39 41.7 106 41.7 145 0a99.5 99.5 0 0 0 0-135.8c-15.4-16.4-39.2-28.6-59.7-30.6-12.8-1.2-14.5-1.2-22.8-.4m27.2 31.8c30.9 7.9 51.8 35 51.8 67.1 0 38.8-30.2 69-69 69s-69-30.2-69-69c0-31.9 20.8-59 51.4-67 9.8-2.6 24.9-2.6 34.8-.1" })
+      ]
+    }
+  );
 }
-function vr() {
-  return /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+function ba() {
+  return /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "2.75", stroke: "currentColor", strokeWidth: "1.25" }),
     /* @__PURE__ */ n(
       "path",
@@ -2416,7 +2411,7 @@ function vr() {
     )
   ] });
 }
-function br() {
+function va() {
   return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
     {
@@ -2427,51 +2422,51 @@ function br() {
     }
   ) });
 }
-function yr({
+function wa({
   open: e,
   onClose: t,
-  hostTheme: i,
-  chrome: r,
+  hostTheme: r,
+  chrome: a,
   onToggleHostTheme: o
 }) {
-  const s = X(null);
+  const s = j(null);
   return _(() => {
     if (!e) return;
-    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();
+    const i = (d) => {
+      d.key === "Escape" && t();
+    }, p = (d) => {
+      var g, f;
+      const l = d.target;
+      (g = s.current) != null && g.contains(l) || (f = l.closest) != null && f.call(l, "[data-pa-settings-trigger]") || t();
     };
-    return window.addEventListener("keydown", a), window.addEventListener("mousedown", c), () => {
-      window.removeEventListener("keydown", a), window.removeEventListener("mousedown", c);
+    return window.addEventListener("keydown", i), window.addEventListener("mousedown", p), () => {
+      window.removeEventListener("keydown", i), window.removeEventListener("mousedown", p);
     };
-  }, [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: [
+  }, [e, t]), e ? /* @__PURE__ */ n("div", { ref: s, className: "pa-settings-menu", role: "dialog", "aria-label": "PixelAgent settings", children: /* @__PURE__ */ n(Re, { variant: "popover", className: "pa-settings-menu-panel", children: /* @__PURE__ */ c("div", { className: "pa-settings-menu-inner", children: [
+    /* @__PURE__ */ c("header", { className: "pa-settings-menu-header", children: [
       /* @__PURE__ */ n("h4", { className: "pa-settings-menu-title", children: "Settings" }),
       /* @__PURE__ */ n("p", { className: "pa-settings-menu-subtitle", children: "Appearance and chrome" })
     ] }),
-    /* @__PURE__ */ d("section", { className: "pa-settings-section", children: [
+    /* @__PURE__ */ c("section", { className: "pa-settings-section", children: [
       /* @__PURE__ */ n("span", { className: "pa-settings-section-label", children: "Host theme" }),
-      /* @__PURE__ */ d("div", { className: "pa-settings-row", children: [
-        /* @__PURE__ */ n("span", { className: "pa-settings-row-value", children: i === "dark" ? "Dark canvas" : "Light canvas" }),
+      /* @__PURE__ */ c("div", { className: "pa-settings-row", children: [
+        /* @__PURE__ */ n("span", { className: "pa-settings-row-value", children: r === "dark" ? "Dark canvas" : "Light canvas" }),
         /* @__PURE__ */ n(
           V,
           {
             variant: "icon",
             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(vr, {}) : /* @__PURE__ */ n(br, {})
+            "aria-label": r === "dark" ? "Switch host to light theme" : "Switch host to dark theme",
+            title: r === "dark" ? "Light theme" : "Dark theme",
+            children: r === "dark" ? /* @__PURE__ */ n(ba, {}) : /* @__PURE__ */ n(va, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ d("section", { className: "pa-settings-section", children: [
+    /* @__PURE__ */ c("section", { className: "pa-settings-section", children: [
       /* @__PURE__ */ n("span", { className: "pa-settings-section-label", children: "Glass chrome" }),
-      /* @__PURE__ */ d("p", { className: "pa-settings-hint", children: [
-        r === "dim" ? "Dim gray glass for readability on bright pages." : "Frosted glass for dark pages.",
+      /* @__PURE__ */ c("p", { className: "pa-settings-hint", children: [
+        a === "dim" ? "Dim gray glass for readability on bright pages." : "Frosted glass for dark pages.",
         " ",
         "(auto)"
       ] })
@@ -2479,14 +2474,14 @@ function yr({
   ] }) }) }) : null;
 }
 const bt = "0 0 24 24";
-function wr() {
-  return /* @__PURE__ */ d(q, { children: [
+function ya() {
+  return /* @__PURE__ */ c(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 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" }) {
+const ka = "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 Na({ size: e = 22, variant: t = "cursor" }) {
   return t === "pointer" ? /* @__PURE__ */ n(
     "svg",
     {
@@ -2500,7 +2495,7 @@ function Nr({ size: e = 22, variant: t = "cursor" }) {
         "path",
         {
           fill: "currentColor",
-          d: xr
+          d: ka
         }
       )
     }
@@ -2513,57 +2508,57 @@ function Nr({ size: e = 22, variant: t = "cursor" }) {
       viewBox: bt,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ n(wr, {})
+      children: /* @__PURE__ */ n(ya, {})
     }
   );
 }
-const kr = ["element", "area", "multi"], Cr = {
+const Ca = ["element", "area", "multi"], Ma = {
   element: "Click",
   area: "Area",
   multi: "Multi"
 };
-function Mr({
+function Aa({
   rootAttributes: e,
   hostTheme: t,
-  chrome: i,
-  settingsOpen: r,
+  chrome: r,
+  settingsOpen: a,
   onToggleSettings: o,
   onCloseSettings: s,
-  onToggleHostTheme: a,
-  active: c,
-  mode: u,
+  onToggleHostTheme: i,
+  active: p,
+  mode: d,
   captureMode: l,
-  annotationCount: f,
-  multiSelectCount: p,
-  copyStatus: v,
-  copyAllFrom: m,
-  onActivateAnnotate: g,
-  onActivateEdit: y,
-  onDeactivate: S,
+  annotationCount: g,
+  multiSelectCount: f,
+  copyStatus: x,
+  copyAllFrom: h,
+  onActivateAnnotate: m,
+  onActivateEdit: v,
+  onDeactivate: z,
   onCopyAll: w,
-  onCaptureModeChange: k,
-  onConfirmMultiSelect: N
+  onCaptureModeChange: N,
+  onConfirmMultiSelect: k
 }) {
-  const { elementRef: E, isDragging: z, style: R, dragHandleProps: x } = Tt(), I = /* @__PURE__ */ d(
+  const { elementRef: E, isDragging: B, style: $, dragHandleProps: y } = Rt(), I = /* @__PURE__ */ c(
     "div",
     {
       ref: E,
-      className: `pa-toolbar-float ${z ? "pa-toolbar-float--dragging" : ""}`,
-      style: R,
+      className: `pa-toolbar-float ${B ? "pa-toolbar-float--dragging" : ""}`,
+      style: $,
       role: "toolbar",
       "aria-label": "PixelAgent",
       children: [
-        !c && /* @__PURE__ */ n(
-          yr,
+        !p && /* @__PURE__ */ n(
+          wa,
           {
-            open: r,
+            open: a,
             onClose: s,
             hostTheme: t,
-            chrome: i,
-            onToggleHostTheme: a
+            chrome: r,
+            onToggleHostTheme: i
           }
         ),
-        /* @__PURE__ */ n(Rt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ d("div", { className: "pa-toolbar-inner", children: [
+        /* @__PURE__ */ n(Tt, { shape: "capsule", className: "pa-toolbar-glass", intensity: "enhanced", children: /* @__PURE__ */ c("div", { className: "pa-toolbar-inner", children: [
           /* @__PURE__ */ n(
             "button",
             {
@@ -2571,47 +2566,47 @@ function Mr({
               className: "pa-toolbar-drag",
               "aria-label": "Drag PixelAgent toolbar",
               title: "Drag to move",
-              ...x,
-              children: /* @__PURE__ */ n(Nr, { size: 22 })
+              ...y,
+              children: /* @__PURE__ */ n(Na, { size: 22 })
             }
           ),
           /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
-          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(q, { children: [
+          p ? /* @__PURE__ */ c(q, { children: [
+            /* @__PURE__ */ c("div", { className: "pa-toolbar-segment", children: [
+              /* @__PURE__ */ n("span", { className: "pa-mode-badge", children: d }),
+              d === "annotate" && /* @__PURE__ */ c(q, { children: [
                 /* @__PURE__ */ n(
                   "select",
                   {
                     className: "pa-select pa-toolbar-capture-select",
                     value: l,
-                    onChange: (L) => k(L.target.value),
+                    onChange: (S) => N(S.target.value),
                     "aria-label": "Capture mode",
-                    children: kr.map((L) => /* @__PURE__ */ n("option", { value: L, children: Cr[L] }, L))
+                    children: Ca.map((S) => /* @__PURE__ */ n("option", { value: S, children: Ma[S] }, S))
                   }
                 ),
-                p > 0 && /* @__PURE__ */ n(
+                f > 0 && /* @__PURE__ */ n(
                   V,
                   {
                     variant: "glass-primary",
-                    onClick: N,
+                    onClick: k,
                     "aria-label": "Annotate selected elements",
-                    children: p
+                    children: f
                   }
                 ),
                 /* @__PURE__ */ n(
-                  Ht,
+                  Vt,
                   {
-                    feedback: m === "toolbar" ? v : null,
+                    feedback: h === "toolbar" ? x : null,
                     slotClassName: "pa-copy-feedback-slot--toolbar",
                     children: /* @__PURE__ */ n(
                       V,
                       {
                         variant: "glass-primary",
                         onClick: w,
-                        disabled: f === 0,
-                        "aria-label": f > 0 ? `Copy all annotations (${f})` : "Copy all annotations",
-                        children: f > 0 ? `Copy (${f})` : "Copy"
+                        disabled: g === 0,
+                        "aria-label": g > 0 ? `Copy all annotations (${g})` : "Copy all annotations",
+                        children: g > 0 ? `Copy (${g})` : "Copy"
                       }
                     )
                   }
@@ -2623,7 +2618,7 @@ function Mr({
               {
                 variant: "icon",
                 className: "pa-toolbar-close",
-                onClick: S,
+                onClick: z,
                 "aria-label": "Close",
                 children: /* @__PURE__ */ n(
                   "svg",
@@ -2646,11 +2641,11 @@ function Mr({
                 )
               }
             )
-          ] }) : /* @__PURE__ */ d("div", { className: "pa-toolbar-segment", children: [
-            /* @__PURE__ */ n(V, { onClick: g, children: "Annotate" }),
-            /* @__PURE__ */ n(V, { onClick: y, children: "Edit" })
+          ] }) : /* @__PURE__ */ c("div", { className: "pa-toolbar-segment", children: [
+            /* @__PURE__ */ n(V, { onClick: m, children: "Annotate" }),
+            /* @__PURE__ */ n(V, { onClick: v, children: "Edit" })
           ] }),
-          !c && /* @__PURE__ */ d(q, { children: [
+          !p && /* @__PURE__ */ c(q, { children: [
             /* @__PURE__ */ n("span", { className: "pa-toolbar-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ n(
               V,
@@ -2660,18 +2655,18 @@ function Mr({
                 "data-pa-settings-trigger": !0,
                 onClick: o,
                 "aria-label": "PixelAgent settings",
-                "aria-expanded": r,
+                "aria-expanded": a,
                 title: "Settings",
-                children: /* @__PURE__ */ n(gr, {})
+                children: /* @__PURE__ */ n(xa, {})
               }
             )
           ] }),
-          v && !_t(v) && v !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: v })
+          x && !Ht(x) && x !== "Copied!" && /* @__PURE__ */ n("span", { className: "pa-status pa-toolbar-status", role: "status", children: x })
         ] }) })
       ]
     }
   );
-  return typeof document > "u" ? I : Ke(
+  return typeof document > "u" ? I : Ge(
     /* @__PURE__ */ n(
       "div",
       {
@@ -2684,401 +2679,408 @@ function Mr({
     document.body
   );
 }
-function Ar() {
-  const e = X(en()), [t, i] = A(
+function za() {
+  const e = j(tn()), [t, r] = A(
     () => {
       var s;
       return ((s = e.current) == null ? void 0 : s.annotations) ?? [];
     }
   );
   _(() => {
-    tn({ annotations: t });
+    nn({ annotations: t });
   }, [t]);
-  const r = $((s, a) => {
-    i(
-      (c) => c.map((u) => u.id === s ? { ...u, ...a } : u)
+  const a = L((s, i) => {
+    r(
+      (p) => p.map((d) => d.id === s ? { ...d, ...i } : d)
     );
-  }, []), o = $((s) => {
-    i((a) => a.filter((c) => c.id !== s));
+  }, []), o = L((s) => {
+    r((i) => i.filter((p) => p.id !== s));
   }, []);
   return {
     annotations: t,
-    setAnnotations: i,
-    updateAnnotation: r,
+    setAnnotations: r,
+    updateAnnotation: a,
     removeAnnotation: o
   };
 }
-function Sr({
+function Sa({
   ui: e,
   hostTheme: t,
-  onHostThemeChange: i
+  onHostThemeChange: r
 }) {
-  const r = Me(
-    () => ({ ...nn, ...e }),
+  const a = Me(
+    () => ({ ...an, ...e }),
     [e]
   ), [o, s] = A(
-    () => t ?? it(r) ?? "dark"
-  ), [a, c] = A(!1), u = t ?? o;
+    () => t ?? rt(a) ?? "dark"
+  ), [i, p] = A(!1), d = t ?? o;
   _(() => {
     if (t !== void 0) return;
-    const v = () => {
-      const y = it(r);
-      y && s(y);
+    const x = () => {
+      const v = rt(a);
+      v && s(v);
     };
-    v();
-    const m = r.hostThemeAttribute, g = new MutationObserver(v);
-    return g.observe(document.documentElement, {
+    x();
+    const h = a.hostThemeAttribute, m = new MutationObserver(x);
+    return m.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [m]
-    }), () => g.disconnect();
-  }, [t, r]);
+      attributeFilter: [h]
+    }), () => m.disconnect();
+  }, [t, a]);
   const l = Me(
-    () => rn(r, u),
-    [r, u]
-  ), f = $(() => {
-    const v = u === "dark" ? "light" : "dark";
-    if (i) {
-      i(v);
+    () => rn(a, d),
+    [a, d]
+  ), g = L(() => {
+    const x = d === "dark" ? "light" : "dark";
+    if (r) {
+      r(x);
       return;
     }
-    s(v), on(v, r);
-  }, [u, i, r]), p = $(() => {
-    c((v) => !v);
+    s(x), on(x, a);
+  }, [d, r, a]), f = L(() => {
+    p((x) => !x);
   }, []);
   return {
     chrome: l,
-    rootAttributes: an(l),
-    hostTheme: u,
-    toggleHostTheme: f,
-    settingsOpen: a,
-    setSettingsOpen: c,
-    toggleSettings: p,
-    uiSettings: r
+    rootAttributes: sn(l),
+    hostTheme: d,
+    toggleHostTheme: g,
+    settingsOpen: i,
+    setSettingsOpen: p,
+    toggleSettings: f,
+    uiSettings: a
   };
 }
-const yt = "/__pixelagent/apply", wt = "pixelagent-runtime-styles";
-let xt = 0;
-const We = /* @__PURE__ */ new WeakMap();
-function Lr(e) {
-  let t = We.get(e);
+const La = `.pa-root{--pa-glass-blur: 4px;--pa-glass-saturate: 130%;--pa-glass-opacity: .78;--pa-glass-tint: rgba(255, 255, 255, .08);--pa-glass-tint-accent: rgba(99, 102, 241, .32);--pa-glass-border: rgba(255, 255, 255, .28);--pa-glass-rim: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 1px 0 0 rgba(255, 255, 255, .18), inset -1px 0 0 rgba(255, 255, 255, .18), inset 0 -1px 1px rgba(0, 0, 0, .18);--pa-glass-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .14), 0 12px 40px rgba(0, 0, 0, .32);--pa-glass-specular: radial-gradient( ellipse 65% 45% at 22% 14%, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .08) 38%, transparent 72% );--pa-glass-underglow: radial-gradient( ellipse 95% 38% at 50% 100%, rgba(129, 140, 248, .18) 0%, transparent 60% );--pa-glass-radius-bar: 999px;--pa-glass-radius-panel: 20px;--pa-glass-radius-popover: 16px;--pa-glass-radius-control: 10px;--pa-glass-group-gap: 10px;--pa-glass-morph-duration: .32s;--pa-glass-morph-easing: cubic-bezier(.4, 0, .2, 1);--pa-glass-fallback-bg: rgba(28, 28, 30, .94);--pa-glass-fallback-border: rgba(255, 255, 255, .12);--pa-glass-surface-fill: rgba(255, 255, 255, .06);--pa-glass-control-hover: rgba(255, 255, 255, .12);--pa-glass-control-active: rgba(255, 255, 255, .18);--pa-divider: rgba(255, 255, 255, .08);--pa-tooltip-bg: rgba(20, 20, 24, .82);--pa-tooltip-border: rgba(255, 255, 255, .14);--pa-toolbar-segment-bg: rgba(0, 0, 0, .28);--pa-toolbar-segment-border: rgba(255, 255, 255, .06);--pa-toolbar-divider-color: rgba(255, 255, 255, .12);--pa-text: rgba(255, 255, 255, .92);--pa-text-secondary: rgba(255, 255, 255, .62);--pa-accent: #818cf8;--pa-accent-bright: #a5b4fc;--pa-success: #6ee7b7;--pa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--pa-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;--pa-z: 2147483640;--pa-field-bg: rgba(255, 255, 255, .04);--pa-field-bg-hover: rgba(255, 255, 255, .06);--pa-field-border: rgba(255, 255, 255, .12);--pa-field-border-hover: rgba(255, 255, 255, .2);--pa-field-border-focus: rgba(255, 255, 255, .32);--pa-field-radius: 8px}@media(prefers-reduced-transparency:reduce){.pa-root{--pa-glass-blur: 0px;--pa-glass-saturate: 100%;--pa-glass-opacity: 1;--pa-glass-tint: var(--pa-glass-fallback-bg);--pa-glass-tint-accent: rgba(99, 102, 241, .85);--pa-glass-border: var(--pa-glass-fallback-border);--pa-glass-rim: none;--pa-glass-specular: none;--pa-glass-underglow: none}}@media(prefers-reduced-motion:reduce){.pa-root{--pa-glass-morph-duration: 0ms}}.pa-root[data-pa-chrome=dim],.pa-root--toolbar-portal[data-pa-chrome=dim]{--pa-glass-blur: 16px;--pa-glass-saturate: 125%;--pa-glass-opacity: .88;--pa-glass-tint: rgba(92, 92, 96, .68);--pa-glass-tint-accent: rgba(100, 100, 104, .74);--pa-glass-surface-fill: rgba(96, 96, 100, .64);--pa-glass-border: rgba(255, 255, 255, .2);--pa-glass-rim: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(255, 255, 255, .08), inset 0 -1px 1px rgba(0, 0, 0, .22);--pa-glass-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 32px rgba(0, 0, 0, .14), 0 24px 48px rgba(0, 0, 0, .1);--pa-glass-specular: radial-gradient( ellipse 68% 48% at 22% 10%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .1) 40%, transparent 72% );--pa-glass-underglow: none;--pa-glass-fallback-bg: rgba(82, 82, 86, .96);--pa-glass-fallback-border: rgba(255, 255, 255, .12);--pa-glass-control-hover: rgba(255, 255, 255, .1);--pa-glass-control-active: rgba(255, 255, 255, .16);--pa-divider: rgba(255, 255, 255, .1);--pa-tooltip-bg: rgba(82, 82, 86, .96);--pa-tooltip-border: rgba(255, 255, 255, .18);--pa-toolbar-segment-bg: rgba(0, 0, 0, .18);--pa-toolbar-segment-border: rgba(255, 255, 255, .08);--pa-toolbar-divider-color: rgba(255, 255, 255, .14);--pa-text: rgba(255, 255, 255, .94);--pa-text-secondary: rgba(255, 255, 255, .58);--pa-accent: #a5b4fc;--pa-accent-bright: #c7d2fe;--pa-success: #6ee7b7;--pa-field-bg: rgba(255, 255, 255, .06);--pa-field-bg-hover: rgba(255, 255, 255, .09);--pa-field-border: rgba(255, 255, 255, .14);--pa-field-border-hover: rgba(255, 255, 255, .22);--pa-field-border-focus: rgba(255, 255, 255, .32)}.pa-glass-surface{position:relative;overflow:hidden;background:var(--pa-glass-surface-fill);border:1px solid var(--pa-glass-border);box-shadow:var(--pa-glass-shadow),var(--pa-glass-rim);border-radius:inherit;backdrop-filter:blur(4px) saturate(130%);-webkit-backdrop-filter:blur(4px) saturate(130%);will-change:backdrop-filter}.pa-glass-surface.pa-toolbar-glass{backdrop-filter:blur(6px) saturate(138%);-webkit-backdrop-filter:blur(6px) saturate(138%)}.pa-glass-surface-blur{display:none}.pa-glass-surface-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;background:linear-gradient(180deg,#ffffff1a,#fff0 28%),linear-gradient(0deg,#ffffff08,#fff0 22%);pointer-events:none}@media(prefers-reduced-transparency:reduce){.pa-glass-surface{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--pa-glass-fallback-bg);border-color:var(--pa-glass-fallback-border);box-shadow:none}.pa-glass-surface-bg{filter:none;background:transparent}}.pa-glass-surface--accent{background:var(--pa-glass-tint-accent)}.pa-glass-surface-shine{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:inherit;pointer-events:none;background:var(--pa-glass-specular);mix-blend-mode:screen}.pa-glass-surface:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:inherit;pointer-events:none;background:var(--pa-glass-underglow);mix-blend-mode:screen}@media(prefers-reduced-transparency:reduce){.pa-glass-surface-shine,.pa-glass-surface:after{display:none}}.pa-glass-surface-content{position:relative;z-index:3}.pa-glass-container{display:flex;align-items:center;gap:var(--pa-glass-group-gap);font-family:var(--pa-font)}.pa-toolbar-float{position:fixed;bottom:24px;left:50%;margin-left:-150px;z-index:var(--pa-z);touch-action:none}.pa-toolbar-float--dragging{-webkit-user-select:none;user-select:none}.pa-toolbar-inner{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px}.pa-toolbar-drag{all:unset;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--pa-text);cursor:grab;touch-action:none;flex-shrink:0;transition:background .15s ease}.pa-toolbar-drag:hover{background:var(--pa-glass-control-hover)}.pa-brand-cursor{display:block;flex-shrink:0;pointer-events:none}.pa-brand-cursor--pointer{margin-top:-2px;margin-left:-1px}.pa-brand-cursor--minimal{display:block}.pa-toolbar-float--dragging .pa-toolbar-drag{cursor:grabbing;background:#ffffff24}.pa-toolbar-divider{width:1px;height:24px;background:var(--pa-toolbar-divider-color);flex-shrink:0}.pa-toolbar-segment{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:999px;background:var(--pa-toolbar-segment-bg);border:1px solid var(--pa-toolbar-segment-border)}.pa-toolbar-capture-select{width:auto;min-width:76px;padding:6px 28px 6px 10px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;border-radius:999px;cursor:pointer}.pa-toolbar-close{margin-left:2px;flex-shrink:0}.pa-toolbar-status{font-size:11px;padding:0 8px;white-space:nowrap}.pa-settings-menu{position:absolute;right:8px;bottom:calc(100% + 12px);z-index:2;width:min(280px,calc(100vw - 32px));pointer-events:auto}.pa-settings-menu-panel{width:100%}.pa-settings-menu-inner{padding:14px 16px 16px}.pa-settings-menu-header{margin-bottom:14px}.pa-settings-menu-title{margin:0;font-size:14px;font-weight:600;color:var(--pa-text)}.pa-settings-menu-subtitle{margin:4px 0 0;font-size:11px;color:var(--pa-text-secondary)}.pa-settings-section{padding:12px 0;border-top:1px solid var(--pa-divider)}.pa-settings-section:first-of-type{border-top:none;padding-top:0}.pa-settings-section-label{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pa-text-secondary);margin-bottom:8px}.pa-settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.pa-settings-row-value{font-size:12px;color:var(--pa-text)}.pa-settings-hint{margin:0;font-size:11px;line-height:1.45;color:var(--pa-text-secondary)}.pa-glass-group{flex-shrink:0}.pa-glass-group-inner{display:flex;align-items:center;gap:2px;padding:4px 6px}.pa-glass-group--brand .pa-glass-group-inner{padding:6px 14px}.pa-glass-btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--pa-font);font-size:12px;font-weight:500;color:var(--pa-text);padding:6px 12px;border-radius:var(--pa-glass-radius-control);white-space:nowrap;transition:background var(--pa-glass-morph-duration) var(--pa-glass-morph-easing),transform .12s ease,color var(--pa-glass-morph-duration) ease}.pa-glass-btn:hover:not(:disabled){background:var(--pa-glass-control-hover)}.pa-glass-btn:active:not(:disabled){transform:scale(.97);background:var(--pa-glass-control-active)}.pa-glass-btn:disabled{opacity:.38;cursor:not-allowed}.pa-glass-btn--glass-primary,.pa-glass-btn--prominent{position:relative;color:#fff;font-weight:600;padding:8px 16px;background:#ffffff1a;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px #fff6,0 4px 16px #00000026}.pa-glass-btn--glass-primary:before,.pa-glass-btn--prominent:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,transparent 45%,transparent 100%);pointer-events:none}.pa-glass-btn--glass-primary:hover:not(:disabled),.pa-glass-btn--prominent:hover:not(:disabled){background:#ffffff29;border-color:#ffffff61;box-shadow:inset 0 1px #ffffff73,0 6px 20px #0003}@media(prefers-reduced-transparency:reduce){.pa-glass-btn--glass-primary,.pa-glass-btn--prominent{backdrop-filter:none;-webkit-backdrop-filter:none;background:#3c3c46e6}}.pa-glass-btn--icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;color:#ffffffbf;background:#ffffff0f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px #ffffff1f}.pa-glass-btn--icon:hover:not(:disabled){color:#fff;background:#ffffff1f;border-color:#ffffff38}.pa-glass-btn--ghost{color:var(--pa-text-secondary);padding:6px 10px}.pa-glass-btn--ghost:hover:not(:disabled){color:var(--pa-text);background:#ffffff14}.pa-glass-btn--active{background:#6366f173;color:#fff}.pa-glass-btn--sm{padding:2px 8px;font-size:11px}.pa-glass-panel{font-family:var(--pa-font);color:var(--pa-text)}.pa-glass-panel--sheet.pa-glass-panel--left{position:fixed;top:16px;left:16px;z-index:var(--pa-z);width:288px;max-height:calc(100vh - 100px)}.pa-glass-panel--sheet.pa-glass-panel--right{position:fixed;top:16px;right:16px;z-index:var(--pa-z);width:360px;max-height:60vh}.pa-glass-panel--popover{position:fixed;z-index:calc(var(--pa-z) + 2);width:300px}.pa-glass-panel .pa-glass-surface-content{padding:14px;display:flex;flex-direction:column;gap:10px}.pa-glass-panel--sheet .pa-glass-surface-content{padding:14px;overflow-y:auto;max-height:inherit}.pa-glass-panel--sheet.pa-glass-panel--right:not(.pa-edit-panel-glass) .pa-glass-surface-content{padding:0;gap:0}.pa-toolbar-brand{font-weight:600;font-size:12px;color:var(--pa-accent-bright);letter-spacing:-.01em}.pa-mode-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--pa-text-secondary);padding:4px 10px}.pa-status{font-size:11px;font-weight:500;color:var(--pa-success);padding:4px 10px;animation:pa-status-in .28s var(--pa-glass-morph-easing)}.pa-copy-feedback-slot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:12px;font-weight:600;white-space:nowrap;border-radius:999px;flex-shrink:0;animation:pa-status-in .28s var(--pa-glass-morph-easing)}.pa-copy-feedback-slot--toolbar{padding:8px 16px;min-height:34px}.pa-copy-feedback-slot--session{padding:8px 14px;min-height:34px}.pa-copy-feedback-slot--item{padding:6px 10px;min-width:44px;min-height:28px;font-size:11px}@keyframes pa-status-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.pa-status{animation:none}}.pa-glass-divider{width:1px;height:16px;background:#ffffff26;margin:0 2px;flex-shrink:0}.pa-root{all:initial;font-family:var(--pa-font);font-size:13px;line-height:1.4;color:var(--pa-text)}.pa-root--toolbar-portal{all:unset;position:static;font-family:var(--pa-font);font-size:13px;line-height:1.4;color:var(--pa-text);pointer-events:none}.pa-root--toolbar-portal .pa-toolbar-float{pointer-events:auto}.pa-root *,.pa-root *:before,.pa-root *:after{box-sizing:border-box}.pa-highlight{position:fixed;pointer-events:none;z-index:calc(var(--pa-z) - 2);border:2px solid var(--pa-accent);background:#6366f11f;border-radius:4px;box-shadow:0 0 0 1px #6366f140;transition:top .05s,left .05s,width .05s,height .05s,background var(--pa-glass-morph-duration) ease}.pa-highlight-selected{background:#6366f138;border-color:var(--pa-accent-bright);box-shadow:0 0 0 2px #6366f159,0 0 20px #6366f126}.pa-highlight-scope{background:#6366f129;border-style:dashed}.pa-highlight-primary{border-width:2px;background:#6366f147;box-shadow:0 0 0 3px #6366f173,0 0 24px #6366f133}.pa-annotation-badge{position:fixed;pointer-events:none;z-index:calc(var(--pa-z) - 1);min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--pa-font);font-size:12px;font-weight:700;line-height:1;color:#fff;background:#6669f8;border:none;border-radius:999px;box-shadow:0 2px 10px #37348c52;transform:translate(-50%,-50%);transition:top .05s,left .05s}.pa-tooltip{position:fixed;pointer-events:none;z-index:calc(var(--pa-z) - 1);font-family:var(--pa-font);font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--pa-text);padding:4px 8px;border-radius:6px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--pa-tooltip-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--pa-tooltip-border)}@media(prefers-reduced-transparency:reduce){.pa-tooltip{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pa-glass-fallback-bg);border-color:var(--pa-glass-fallback-border)}}.pa-label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--pa-text-secondary);font-family:var(--pa-font)}.pa-select,.pa-input,.pa-textarea{font-family:var(--pa-font);font-size:12px;font-weight:400;line-height:1.4;color:var(--pa-text);background-color:var(--pa-field-bg);border:1px solid var(--pa-field-border);border-radius:var(--pa-field-radius);padding:8px 10px;outline:none;width:100%;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.pa-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.45)' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.pa-select:hover:not(:focus),.pa-input:hover:not(:focus),.pa-textarea:hover:not(:focus){background-color:var(--pa-field-bg-hover);border-color:var(--pa-field-border-hover)}.pa-select:focus,.pa-input:focus,.pa-textarea:focus{background-color:#ffffff0d;border-color:var(--pa-field-border-focus);box-shadow:inset 0 1px #ffffff0f}.pa-textarea{resize:vertical;min-height:64px;line-height:1.5}@media(prefers-reduced-transparency:reduce){.pa-select,.pa-input,.pa-textarea{background-color:var(--pa-glass-fallback-bg);border-color:var(--pa-glass-fallback-border)}.pa-select:focus,.pa-input:focus,.pa-textarea:focus{border-color:var(--pa-accent)}}.pa-popover-header{display:flex;flex-direction:column;gap:3px}.pa-popover-selector{font-size:11px;font-weight:500;color:var(--pa-accent-bright);word-break:break-all}.pa-popover-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}.pa-edit-panel-float{position:fixed;right:16px;top:16px;z-index:calc(var(--pa-z) + 4);width:312px;max-height:calc(100vh - 32px)}.pa-edit-panel-float--dragging{-webkit-user-select:none;user-select:none}.pa-edit-panel-float .pa-glass-panel--sheet{position:relative;top:auto;left:auto;right:auto;width:100%;max-height:calc(100vh - 32px)}.pa-edit-panel-glass .pa-glass-surface-content{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 32px);padding:14px 14px 12px}.pa-edit-panel-inner{display:flex;flex-direction:column;min-height:0;flex:1;gap:10px}.pa-edit-panel-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.pa-edit-panel-sticky{flex-shrink:0;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}.pa-edit-panel-header{display:flex;align-items:center;gap:8px}.pa-edit-panel-drag{all:unset;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;cursor:grab;touch-action:none;flex-shrink:0;color:#ffffff73;transition:background .15s ease,color .15s ease}.pa-edit-panel-drag:hover{background:#ffffff1a;color:#ffffffd9}.pa-edit-panel-float--dragging .pa-edit-panel-drag{cursor:grabbing}.pa-edit-panel-grip{display:grid;grid-template-columns:repeat(2,4px);gap:3px}.pa-edit-panel-grip span{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}.pa-edit-title{all:unset;display:block;font-size:14px;font-weight:600;letter-spacing:-.02em;flex:1}.pa-edit-hint{font-size:12px;color:var(--pa-text-secondary);margin:0;line-height:1.5}.pa-edit-state-hint{font-size:11px;color:var(--pa-text-secondary);margin:0 0 8px;line-height:1.45}.pa-edit-actions{display:flex;gap:8px;margin-top:8px}.pa-edit-actions .pa-glass-btn{display:inline-flex;align-items:center;justify-content:center}.pa-glass-btn-inner{display:inline-flex;align-items:center;gap:6px}.pa-glass-btn-icon{width:14px;height:14px;flex-shrink:0;opacity:.92}.pa-preview-disabled{opacity:.55;pointer-events:none}.pa-edit-meta{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}.pa-edit-meta code,.pa-edit-meta-label{font-size:12px;font-weight:500;color:var(--pa-accent-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pa-edit-source{font-size:10px;color:var(--pa-text-secondary)}.pa-edit-source--warn{color:var(--pa-warning, #e8a838);line-height:1.4}.pa-edit-text-input{min-height:72px;font-size:13px;line-height:1.55}.pa-edit-sections{display:flex;flex-direction:column}.pa-edit-section{border-bottom:1px solid rgba(255,255,255,.06)}.pa-edit-section:last-child{border-bottom:none}.pa-edit-section-header{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:10px 2px 8px;cursor:pointer;color:#ffffffb8}.pa-edit-section-header:hover{color:#ffffffeb}.pa-edit-section-title{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;flex:1;text-align:left}.pa-edit-section-badge{font-size:10px;color:var(--pa-text-secondary)}.pa-edit-section-chevron{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s ease;opacity:.55}.pa-edit-section:not(.pa-edit-section--open) .pa-edit-section-chevron{transform:rotate(-45deg)}.pa-edit-section-body{display:flex;flex-direction:column;gap:10px;padding:0 2px 12px}.pa-edit-field-label{display:block;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--pa-text-secondary);margin-bottom:5px}.pa-edit-stack-field{display:flex;flex-direction:column}.pa-edit-field-block{display:flex;flex-direction:column;gap:6px}.pa-edit-field-grid{display:grid;gap:10px}.pa-edit-field-grid--2{grid-template-columns:1fr 1fr}.pa-edit-mini-field{display:flex;flex-direction:column;min-width:0}.pa-edit-mini-field .pa-select{font-size:12px;padding:7px 8px}.pa-edit-inline-hint{font-size:10px;line-height:1.45;color:var(--pa-text-secondary);margin:0}.pa-edit-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}.pa-edit-split-fields .pa-prop-row{grid-template-columns:1fr;gap:4px}.pa-segmented{display:flex;width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#00000047;overflow:hidden}.pa-segmented-btn{all:unset;box-sizing:border-box;flex:1;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:34px;color:#ffffff80;border-right:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .12s ease,color .12s ease}.pa-segmented-btn:last-child{border-right:none}.pa-segmented-btn:hover{background:#ffffff0f;color:#ffffffd1}.pa-segmented-btn--on{background:#ffffff24;color:#fffffff2}.pa-segmented-icon{display:block;width:16px;height:16px;flex-shrink:0}.pa-segmented-type{font-size:13px;font-weight:600;line-height:1;font-family:var(--pa-font, system-ui, sans-serif)}.pa-segmented-type--bold{font-weight:700}.pa-segmented-type--italic{font-style:italic;font-weight:600}.pa-segmented-type--underline{text-decoration:underline;text-underline-offset:2px}.pa-font-family-select{width:100%;font-size:13px;padding:9px 32px 9px 10px;color:#ffffffe0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff99' d='M3 4.5 6 8l3-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.pa-font-family-select:invalid,.pa-font-family-select option[value=""]{color:#ffffff73}.pa-edit-size-row .pa-prop-row{grid-template-columns:1fr;gap:4px}.pa-edit-size-row .pa-prop-row--slider .pa-prop-slider-wrap{flex-direction:column;align-items:stretch;gap:6px}.pa-edit-size-row .pa-prop-slider-value{width:100%;text-align:left}.pa-color-field{display:flex;flex-direction:column;gap:6px}.pa-color-field-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#00000038;cursor:pointer;transition:border-color .14s ease,background .14s ease}.pa-color-field-trigger:hover{border-color:#ffffff38;background:#ffffff0f}.pa-color-field-trigger[aria-expanded=true]{border-color:#818cf873;background:#6366f11f}.pa-color-field-swatch{width:28px;height:28px;flex-shrink:0;border-radius:8px;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px #00000026}.pa-color-field-hex{flex:1;min-width:0;pointer-events:none;font-family:var(--pa-font-mono);font-size:12px}.pa-color-picker-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--pa-z) + 50);pointer-events:none}.pa-color-picker-portal .pa-color-picker{pointer-events:auto}.pa-color-picker{position:fixed;z-index:calc(var(--pa-z) + 50);box-sizing:border-box;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#121214f0;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 4px 6px #0000001f,0 16px 40px #00000073,inset 0 1px #ffffff14;display:flex;flex-direction:column;gap:12px}.pa-color-picker-header{display:flex;align-items:center;gap:10px}.pa-color-picker-preview{width:22px;height:22px;flex-shrink:0;border-radius:6px;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px #0000001f}.pa-color-picker-header-label{font-size:13px;font-weight:500;color:#ffffff8c;letter-spacing:-.01em}.pa-color-picker-sb{position:relative;width:100%;height:148px;border-radius:10px;border:1px solid rgba(255,255,255,.1);overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,hsl(var(--pa-picker-h, 0) 100% 50%))}.pa-color-picker-sb-thumb{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000059,0 2px 6px #00000059;pointer-events:none}.pa-color-picker-hue{position:relative;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pa-color-picker-hue-input{position:absolute;top:-4px;right:0;bottom:-4px;left:0;width:100%;height:calc(100% + 8px);margin:0;opacity:0;cursor:pointer}.pa-color-picker-hue-thumb{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0000004d,0 1px 4px #00000059;pointer-events:none}.pa-color-picker-field{display:flex;flex-direction:column;gap:6px}.pa-color-picker-field--rgb{flex:1;min-width:0}.pa-color-picker-field-label{font-size:11px;font-weight:500;color:#ffffff73;letter-spacing:.02em}.pa-color-picker-input{width:100%;font-family:var(--pa-font-mono);font-size:12px;padding:8px 10px!important;border-radius:8px;border:1px solid rgba(255,255,255,.12)!important;background:#00000059!important;color:#ffffffe6!important;transition:border-color .14s ease,box-shadow .14s ease}.pa-color-picker-input:hover{border-color:#fff3!important}.pa-color-picker-input:focus{outline:none;border-color:#818cf88c!important;box-shadow:0 0 0 2px #6366f140}.pa-color-picker-rgb{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pa-color-picker-field--rgb .pa-color-picker-input{text-align:center;padding-left:6px!important;padding-right:6px!important}.pa-color-picker-input[type=number]::-webkit-inner-spin-button,.pa-color-picker-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pa-prop-row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:10px;padding:2px 0}.pa-prop-row--compact{grid-template-columns:72px minmax(0,1fr)}.pa-prop-label{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--pa-text-secondary)}.pa-prop-row--slider{align-items:center}.pa-prop-slider-wrap{display:flex;align-items:center;gap:8px;min-width:0}.pa-slider{flex:1;min-width:0;height:4px;margin:0;cursor:pointer;accent-color:rgba(255,255,255,.82);background:transparent}.pa-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#ffffff1f}.pa-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#ffffffeb;border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 4px #00000059}.pa-slider::-moz-range-track{height:4px;border-radius:999px;background:#ffffff1f}.pa-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#ffffffeb;border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 4px #00000059}.pa-prop-slider-value{width:56px;flex-shrink:0;padding:5px 6px!important;text-align:right}.pa-spacing-control{display:flex;align-items:stretch;gap:6px;min-width:0}.pa-spacing-pair,.pa-spacing-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;min-width:0}.pa-spacing-grid{grid-template-rows:1fr 1fr}.pa-spacing-cell{position:relative;display:flex;align-items:center;min-width:0}.pa-spacing-cell-icon{position:absolute;left:7px;top:50%;transform:translateY(-50%);display:inline-flex;color:#ffffff8c;pointer-events:none}.pa-spacing-cell-input{width:100%;padding:6px 6px 6px 24px!important;text-align:left;font-family:var(--pa-font-mono);font-size:11px}.pa-spacing-cell--mixed .pa-spacing-cell-input{color:#ffffffb3}.pa-spacing-cell--mixed .pa-spacing-cell-icon{color:#fff6}.pa-spacing-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:26px;min-height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.08);color:#ffffff8c;cursor:pointer;flex-shrink:0;transition:background .12s ease,color .12s ease,border-color .12s ease}.pa-spacing-toggle:hover:not(:disabled){background:#ffffff0f;color:#ffffffe6}.pa-spacing-toggle--on{background:#ffffff1f;color:#fffffff2;border-color:#ffffff2e}.pa-spacing-toggle:disabled{opacity:.4;cursor:not-allowed}.pa-edit-panel-glass .pa-prop-row .pa-input{font-family:var(--pa-font-mono);font-size:11px;padding:6px 8px;border-radius:6px;color:#ffffffe0}.pa-edit-panel-glass .pa-select,.pa-edit-panel-glass .pa-textarea{border-radius:var(--pa-field-radius)}.pa-edit-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:10px}.pa-change-count{font-size:11px;color:var(--pa-text-secondary)}.pa-change-count--success{color:var(--pa-success)}.pa-change-count--error{color:#fca5a5}.pa-popover-body{display:flex;flex-direction:column;gap:10px}.pa-popover-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pa-popover-context{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:var(--pa-field-radius);background:#0003;border:1px solid rgba(255,255,255,.08)}.pa-popover-context-line{margin:0;font-size:11px;line-height:1.45;color:var(--pa-text)}.pa-popover-context-label{display:inline-block;min-width:52px;margin-right:6px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pa-text-secondary)}.pa-popover-hint{margin:0;font-size:10px;color:var(--pa-text-secondary)}.pa-area-select{position:fixed;pointer-events:none;z-index:calc(var(--pa-z) - 3);border:2px dashed var(--pa-accent-bright);background:#6366f114;border-radius:4px}.pa-area-select--dragging{background:#6366f124}.pa-session-panel--collapsed .pa-session-header{border-bottom:none}.pa-session-header{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 8px;align-items:center;padding:14px;border-bottom:1px solid rgba(255,255,255,.1)}.pa-session-header-main{display:flex;align-items:center;gap:4px;grid-column:1;min-width:0}.pa-session-collapse-btn{flex-shrink:0;padding:4px 6px!important}.pa-session-chevron{display:inline-block;font-size:10px;line-height:1;opacity:.85}.pa-session-title{all:unset;font-size:14px;font-weight:600;letter-spacing:-.02em}.pa-session-subtitle{grid-column:1;margin:0;font-size:10px;color:var(--pa-text-secondary)}.pa-session-actions{grid-column:2;grid-row:1 / span 2}.pa-session-status{margin:0;padding:8px 14px 0;font-size:11px;color:var(--pa-accent-bright)}.pa-session-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.pa-session-target{font-size:11px;font-weight:600;font-family:var(--pa-font-mono, ui-monospace, monospace);color:var(--pa-accent-bright);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pa-session-note{margin:0;font-size:13px;font-weight:500;line-height:1.4;color:var(--pa-text);word-break:break-word}.pa-session-meta-line{margin:0;font-size:10px;line-height:1.35;color:var(--pa-text-secondary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.pa-session-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.pa-session-badge{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;color:var(--pa-text-secondary);background:#ffffff14}.pa-session-edit{flex:1;display:flex;flex-direction:column;gap:8px}.pa-session-item-actions{display:flex;flex-shrink:0;flex-direction:row;align-items:center;gap:2px}.pa-session-list{list-style:none;margin:0;padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:calc(60vh - 60px)}.pa-session-item{display:flex;align-items:flex-start;gap:8px;padding:10px;background:#0000002e;border:1px solid rgba(255,255,255,.08);border-radius:var(--pa-glass-radius-control)}.pa-session-empty{font-size:12px;color:var(--pa-text-secondary);padding:16px;text-align:center;line-height:1.5}`, vt = "pixelagent-base-styles";
+function Ea() {
+  if (typeof document > "u" || document.getElementById(vt)) return;
+  const e = document.createElement("style");
+  e.id = vt, e.textContent = La, document.head.appendChild(e);
+}
+Ea();
+const wt = "/__pixelagent/apply", yt = "pixelagent-runtime-styles";
+let kt = 0;
+const Ue = /* @__PURE__ */ new WeakMap();
+function Ia(e) {
+  let t = Ue.get(e);
   if (t) return t;
-  for (const i of Array.from(e.classList))
-    if (i.startsWith("pa-runtime-"))
-      return We.set(e, i), i;
-  return xt += 1, t = `pa-runtime-${xt}`, We.set(e, t), e.classList.add(t), t;
+  for (const r of Array.from(e.classList))
+    if (r.startsWith("pa-runtime-"))
+      return Ue.set(e, r), r;
+  return kt += 1, t = `pa-runtime-${kt}`, Ue.set(e, t), e.classList.add(t), t;
 }
-function $r() {
-  let e = document.getElementById(wt);
-  return e || (e = document.createElement("style"), e.id = wt, document.head.appendChild(e)), e;
+function $a() {
+  let e = document.getElementById(yt);
+  return e || (e = document.createElement("style"), e.id = yt, document.head.appendChild(e)), e;
 }
-function Er(e, t, i, r) {
-  const o = $r(), s = e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), a = new RegExp(
+function Ta(e, t, r, a) {
+  const o = $a(), s = e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = new RegExp(
     `(\\.${s}:${t}\\s*\\{)([\\s\\S]*?)(\\})`,
     "m"
-  ), c = `${i}: ${r} !important`;
-  let u = o.textContent ?? "";
-  const l = u.match(a);
+  ), p = `${r}: ${a} !important`;
+  let d = o.textContent ?? "";
+  const l = d.match(i);
   if (l) {
-    const f = l[2], p = new RegExp(`(\\s*${i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*:\\s*)[^;]+;?`);
-    let v;
-    if (p.test(f))
-      v = f.replace(p, `$1${r} !important;`);
+    const g = l[2], f = new RegExp(`(\\s*${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*:\\s*)[^;]+;?`);
+    let x;
+    if (f.test(g))
+      x = g.replace(f, `$1${a} !important;`);
     else {
-      const m = f.replace(/\s+$/, ""), g = m.endsWith(";") || m === "" ? "" : ";";
-      v = `${m}${g}
-  ${c};
+      const h = g.replace(/\s+$/, ""), m = h.endsWith(";") || h === "" ? "" : ";";
+      x = `${h}${m}
+  ${p};
 `;
     }
-    u = u.replace(a, `$1${v}$3`);
+    d = d.replace(i, `$1${x}$3`);
   } else
-    u && !u.endsWith(`
-`) && (u += `
-`), u += `
+    d && !d.endsWith(`
+`) && (d += `
+`), d += `
 .${e}:${t} {
-  ${c};
+  ${p};
 }
 `;
-  o.textContent = u;
+  o.textContent = d;
 }
 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), o = Math.abs(e.currentY - e.startY);
-  return { x: t, y: i, width: r, height: o };
+  const t = Math.min(e.startX, e.currentX), r = Math.min(e.startY, e.currentY), a = Math.abs(e.currentX - e.startX), o = Math.abs(e.currentY - e.startY);
+  return { x: t, y: r, width: a, height: o };
 }
-function Ir({
+function Ra({
   ui: e,
   hostTheme: t,
-  onHostThemeChange: i,
-  applyEndpoint: r,
+  onHostThemeChange: r,
+  applyEndpoint: a,
   onApply: o,
   runtimeStateStyles: s
 } = {}) {
-  const a = Sr({ ui: e, hostTheme: t, onHostThemeChange: i }), [c, u] = A(null);
+  const i = Sa({ ui: e, hostTheme: t, onHostThemeChange: r }), [p, d] = A(null);
   _(() => {
-    if (r || o) return;
+    if (a || o) return;
     let b = !1;
-    return fetch(yt, { method: "GET" }).then((M) => {
-      !b && M.status === 405 && u(yt);
+    return fetch(wt, { method: "GET" }).then((M) => {
+      !b && M.status === 405 && d(wt);
     }).catch(() => {
     }), () => {
       b = !0;
     };
-  }, [r, o]);
-  const [l, f] = A(!1), [p, v] = A("idle"), [m, g] = A("element"), {
-    annotations: y,
-    setAnnotations: S,
+  }, [a, o]);
+  const [l, g] = A(!1), [f, x] = A("idle"), [h, m] = A("element"), {
+    annotations: v,
+    setAnnotations: z,
     updateAnnotation: w,
-    removeAnnotation: k
-  } = Ar(), [N, E] = A(null), [z, R] = A(null), [x, I] = A([]), [L, h] = A(null), [F, U] = A(null), [ye, ee] = A(!1), [re, oe] = A(!1), W = l && p === "annotate" && y.length > 0 && !ye, [j, ie] = A("this-instance"), [ce, C] = A("normal"), [P, D] = A(null), [T, H] = A(null), [O, Y] = A(null), ae = X(null), G = X(null), K = $(
+    removeAnnotation: N
+  } = za(), [k, E] = A(null), [B, $] = A(null), [y, I] = A([]), [S, u] = A(null), [O, W] = A(null), [ve, ee] = A(!1), [ae, oe] = A(!1), U = l && f === "annotate" && v.length > 0 && !ve, [K, re] = A("this-instance"), [pe, C] = A("normal"), [R, P] = A(null), [T, H] = A(null), [D, Y] = A(null), ie = j(null), X = j(null), G = L(
     (b, M) => {
-      G.current && clearTimeout(G.current), D(b), H((M == null ? void 0 : M.entryId) ?? null), Y((M == null ? void 0 : M.copyAllFrom) ?? null), G.current = setTimeout(() => {
-        D(null), H(null), Y(null);
+      X.current && clearTimeout(X.current), P(b), H((M == null ? void 0 : M.entryId) ?? null), Y((M == null ? void 0 : M.copyAllFrom) ?? null), X.current = setTimeout(() => {
+        P(null), H(null), Y(null);
       }, 2500);
     },
     []
-  ), he = $(
+  ), ue = L(
     async (b, M, J) => {
       if (b)
         try {
-          await St(b), K(M, J);
+          await St(b), G(M, J);
         } catch {
-          K("Copy failed — check clipboard permissions", J);
+          G("Copy failed — check clipboard permissions", J);
         }
     },
-    [K]
-  ), we = $(
+    [G]
+  ), we = L(
     (b, M) => {
-      b.length === 0 && !M || (h({ elements: b, areaBbox: M }), R(b[0] ?? null));
+      b.length === 0 && !M || (u({ elements: b, areaBbox: M }), $(b[0] ?? null));
     },
     []
-  ), De = $(
+  ), Pe = L(
     (b) => {
-      if (!(!l || p !== "annotate" || Ie(b.target))) {
-        if (F) {
-          U(
+      if (!(!l || f !== "annotate" || Ie(b.target))) {
+        if (O) {
+          W(
             (M) => M && { ...M, currentX: b.clientX, currentY: b.clientY }
           );
           return;
         }
-        m !== "area" && E(vt(b.clientX, b.clientY));
+        h !== "area" && E(xt(b.clientX, b.clientY));
       }
     },
-    [l, p, F, m]
-  ), Oe = $(
+    [l, f, O, h]
+  ), De = L(
     (b) => {
-      !l || p !== "annotate" || Ie(b.target) || m !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), U({
+      !l || f !== "annotate" || Ie(b.target) || h !== "area" || b.button !== 0 || (b.preventDefault(), b.stopPropagation(), W({
         startX: b.clientX,
         startY: b.clientY,
         currentX: b.clientX,
         currentY: b.clientY
-      }), h(null));
+      }), u(null));
     },
-    [l, p, m]
-  ), Fe = $(() => {
-    if (!F) return;
-    const b = Nt(F);
-    if (U(null), b.width < 8 || b.height < 8) return;
-    const M = sn(b, Ze);
+    [l, f, h]
+  ), Oe = L(() => {
+    if (!O) return;
+    const b = Nt(O);
+    if (W(null), b.width < 8 || b.height < 8) return;
+    const M = ln(b, Ze);
     we(M, b);
-  }, [F, we]), Be = $(
+  }, [O, we]), Fe = L(
     (b) => {
-      if (!l || p !== "annotate" || Ie(b.target) || m === "area") return;
+      if (!l || f !== "annotate" || Ie(b.target) || h === "area") return;
       b.preventDefault(), b.stopPropagation();
-      const M = vt(b.clientX, b.clientY);
+      const M = xt(b.clientX, b.clientY);
       if (!M) return;
-      if (b.shiftKey || m === "multi") {
-        I((te) => te.includes(M) ? te.filter((B) => B !== M) : [...te, M]), R(M);
+      if (b.shiftKey || h === "multi") {
+        I((te) => te.includes(M) ? te.filter((F) => F !== M) : [...te, M]), $(M);
         return;
       }
-      const J = x.length > 0 ? x : [M];
+      const J = y.length > 0 ? y : [M];
       we(J.includes(M) ? J : [M]);
     },
-    [l, p, m, x, we]
+    [l, f, h, y, we]
   );
   _(() => {
-    !z || j !== "all-instances" || Ct(z) <= 1 && ie("this-instance");
-  }, [z, j]), _(() => {
+    !B || K !== "all-instances" || Mt(B) <= 1 && re("this-instance");
+  }, [B, K]), _(() => {
     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);
+      return document.addEventListener("mousemove", Pe, !0), document.addEventListener("mousedown", De, !0), document.addEventListener("mouseup", Oe, !0), document.addEventListener("click", Fe, !0), () => {
+        document.removeEventListener("mousemove", Pe, !0), document.removeEventListener("mousedown", De, !0), document.removeEventListener("mouseup", Oe, !0), document.removeEventListener("click", Fe, !0);
       };
-  }, [l, De, Oe, Fe, Be]);
-  const Vt = $(
+  }, [l, Pe, De, Oe, Fe]);
+  const Ut = L(
     (b, M) => {
-      if (!L || !b.trim()) return;
-      const { elements: J, areaBbox: te } = L;
+      if (!S || !b.trim()) return;
+      const { elements: J, areaBbox: te } = S;
       if (J.length === 0 && !te) return;
-      const xe = dr({
+      const ye = da({
         elements: J,
         note: b,
         areaBbox: te
       });
-      S((B) => [...B, xe]), ee(!1), oe(!1), M ? (h(null), R(null)) : (h(null), R(null), I([]));
+      z((F) => [...F, ye]), ee(!1), oe(!1), M ? (u(null), $(null)) : (u(null), $(null), I([]));
     },
-    [L, S]
-  ), Wt = $(() => {
-    h(null), R(null);
-  }, []), Qe = $(
+    [S, z]
+  ), Wt = L(() => {
+    u(null), $(null);
+  }, []), Qe = L(
     async (b) => {
-      const M = ln(y);
-      await he(M, "Copied all!", { copyAllFrom: b });
+      const M = pn(v);
+      await ue(M, "Copied all!", { copyAllFrom: b });
     },
-    [y, he]
-  ), Ut = $(
+    [v, ue]
+  ), Yt = L(
     async (b) => {
-      const M = y.find((J) => J.id === b);
-      M && await he(cn(M), "Copied!", { entryId: b });
+      const M = v.find((J) => J.id === b);
+      M && await ue(cn(M), "Copied!", { entryId: b });
     },
-    [y, he]
-  ), Yt = $(
+    [v, ue]
+  ), jt = L(
     async (b) => {
       const M = [];
-      for (const [B, Z] of b)
-        for (const [de, ne] of Z)
-          ne.length > 0 && M.push([B, de, ne]);
+      for (const [F, Z] of b)
+        for (const [ce, ne] of Z)
+          ne.length > 0 && M.push([F, ce, ne]);
       if (M.length === 0) return { applied: !1 };
       if (s) {
-        for (const [B, Z, de] of M) {
+        for (const [F, Z, ce] 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);
+          const ne = Ia(F);
+          for (const ke of ce)
+            F.style.removeProperty(ke.property), Ta(ne, Z, ke.property, ke.newValue);
         }
-        for (const [B, Z, de] of M)
+        for (const [F, Z, ce] 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 };
+            for (const ne of ce)
+              F.style.setProperty(ne.property, ne.newValue);
+        return G("Change applied"), { applied: !0, skipRevert: !0 };
       }
-      const J = r ?? c ?? void 0, te = [];
-      for (const [B, Z, de] of M) {
-        const ne = Ge(B), Ne = {
+      const J = a ?? p ?? void 0, te = [];
+      for (const [F, Z, ce] of M) {
+        const ne = Xe(F), ke = {
           schemaVersion: 1,
-          elementSelector: Mt(B, j),
+          elementSelector: At(F, K),
           sourceFile: ne.sourceFile,
           lineNumber: ne.lineNumber,
-          targetScope: j,
+          targetScope: K,
           state: Z,
-          stylingSystem: kt(B),
-          changes: de
+          stylingSystem: Ct(F),
+          changes: ce
         };
-        te.push(await Zn(Ne, { applyEndpoint: J, onApply: o }));
+        te.push(await Qn(ke, { applyEndpoint: J, onApply: o }));
       }
-      const xe = te.every(
-        (B) => B.mode === "mcp" && B.result.success && B.result.linesChanged.length > 0
+      const ye = te.every(
+        (F) => F.mode === "mcp" && F.result.success && F.result.linesChanged.length > 0
       );
-      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 };
+      return G(ye ? "Change applied" : "Apply failed"), te.forEach((F, Z) => {
+        F.mode === "error" ? console.error(`[pixelagent] Apply #${Z} failed:`, F.message) : F.mode === "clipboard" ? console.warn(`[pixelagent] Apply #${Z} fell back to clipboard`) : F.mode === "mcp" && !F.result.success && console.warn(`[pixelagent] Apply #${Z} reported no changes:`, F.result);
+      }), { applied: ye };
     },
-    [j, r, c, o, s, K]
+    [K, a, p, o, s, G]
   ), et = (b) => {
-    a.setSettingsOpen(!1), f(!0), v(b), R(null), E(null), h(null), I([]), U(null), b === "annotate" && ee(!1);
+    i.setSettingsOpen(!1), g(!0), x(b), $(null), E(null), u(null), I([]), W(null), b === "annotate" && ee(!1);
   }, Xt = () => {
-    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(
+    g(!1), x("idle"), $(null), E(null), u(null), I([]), W(null), ee(!1), oe(!1);
+  }, Gt = O ? Nt(O) : null;
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: ae,
+      ref: ie,
       className: "pa-root",
       "data-pixelagent-root": !0,
-      ...a.rootAttributes,
+      ...i.rootAttributes,
       children: [
         /* @__PURE__ */ n(
-          Mr,
+          Aa,
           {
-            rootAttributes: a.rootAttributes,
-            hostTheme: a.hostTheme,
-            chrome: a.chrome,
-            settingsOpen: a.settingsOpen,
-            onToggleSettings: a.toggleSettings,
-            onCloseSettings: () => a.setSettingsOpen(!1),
-            onToggleHostTheme: a.toggleHostTheme,
+            rootAttributes: i.rootAttributes,
+            hostTheme: i.hostTheme,
+            chrome: i.chrome,
+            settingsOpen: i.settingsOpen,
+            onToggleSettings: i.toggleSettings,
+            onCloseSettings: () => i.setSettingsOpen(!1),
+            onToggleHostTheme: i.toggleHostTheme,
             active: l,
-            mode: p,
-            captureMode: m,
-            annotationCount: y.length,
-            multiSelectCount: x.length,
-            copyStatus: P,
-            copyAllFrom: O,
+            mode: f,
+            captureMode: h,
+            annotationCount: v.length,
+            multiSelectCount: y.length,
+            copyStatus: R,
+            copyAllFrom: D,
             onActivateAnnotate: () => et("annotate"),
             onActivateEdit: () => et("edit"),
             onDeactivate: Xt,
             onCopyAll: () => Qe("toolbar"),
-            onCaptureModeChange: g,
+            onCaptureModeChange: m,
             onConfirmMultiSelect: () => {
-              x.length > 0 && we(x);
+              y.length > 0 && we(y);
             }
           }
         ),
-        l && p === "annotate" && /* @__PURE__ */ d(q, { children: [
+        l && f === "annotate" && /* @__PURE__ */ c(q, { children: [
           /* @__PURE__ */ n(
-            Et,
+            It,
             {
-              element: N,
-              selected: z,
-              multiSelected: x
+              element: k,
+              selected: B,
+              multiSelected: y
             }
           ),
-          /* @__PURE__ */ n(fr, { annotations: y }),
-          /* @__PURE__ */ n(cr, { area: Gt, isDragging: !!F })
+          /* @__PURE__ */ n(ha, { annotations: v }),
+          /* @__PURE__ */ n(ca, { area: Gt, isDragging: !!O })
         ] }),
-        l && p === "annotate" && L && /* @__PURE__ */ n(
-          lr,
+        l && f === "annotate" && S && /* @__PURE__ */ n(
+          pa,
           {
-            elements: L.elements,
-            areaBbox: L.areaBbox,
-            onSubmit: Vt,
+            elements: S.elements,
+            areaBbox: S.areaBbox,
+            onSubmit: Ut,
             onCancel: Wt
           }
         ),
-        l && p === "edit" && /* @__PURE__ */ n(
-          Jn,
+        l && f === "edit" && /* @__PURE__ */ n(
+          Zn,
           {
-            selectedElement: z,
-            hoveredElement: N,
-            onSelectElement: R,
+            selectedElement: B,
+            hoveredElement: k,
+            onSelectElement: $,
             onHoverElement: E,
-            targetScope: j,
-            onTargetScopeChange: ie,
-            elementState: ce,
+            targetScope: K,
+            onTargetScopeChange: re,
+            elementState: pe,
             onElementStateChange: C,
-            onApply: Yt,
-            applyStatus: p === "edit" ? P : null,
+            onApply: jt,
+            applyStatus: f === "edit" ? R : null,
             isToolbarTarget: Ie
           }
         ),
-        W && /* @__PURE__ */ n(
-          mr,
+        U && /* @__PURE__ */ n(
+          ma,
           {
-            annotations: y,
-            collapsed: re,
+            annotations: v,
+            collapsed: ae,
             onToggleCollapsed: () => oe((b) => !b),
             onClose: () => {
               ee(!0), oe(!1);
             },
             onCopyAll: () => Qe("session"),
-            onCopyOne: Ut,
-            onRemove: k,
+            onCopyOne: Yt,
+            onRemove: N,
             onUpdate: w,
-            copyStatus: P,
+            copyStatus: R,
             copiedEntryId: T,
-            copyAllFrom: O
+            copyAllFrom: D
           }
         )
       ]
     }
   );
 }
-function Rr() {
+function Pa() {
   return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function Fr() {
-  return Rr() ? /* @__PURE__ */ n(Ir, {}) : null;
+function _a() {
+  return Pa() ? /* @__PURE__ */ n(Ra, {}) : null;
 }
 export {
-  Ir as PixelAgent,
-  Fr as PixelAgentDev,
-  Rr as isDevEnvironment
+  Ra as PixelAgent,
+  _a as PixelAgentDev,
+  Pa as isDevEnvironment
 };
 //# sourceMappingURL=pixelagent.js.map