@graphysdk/react-renderer 1.8.1-beta.1786025839240 → 1.8.1-beta.1786352280463

package/dist/editable.mjs

@@ -1,50 +1,50 @@
-import { B as ee, D as re, E as Ut, F as $t, I as xe, M as A, P as Zt, Q as L, S as G, X as jt, b as N, c as Wt, d as _, et as E, f as se, h as Qe, i as Xt, j as si, l as Yt, m as Qt, n as H, o as Je, p as Ce, r as Jt, s as en, t as tn, u as ce, v as nn, x as F, y as me, z as Ie } from "./history-chords-CNYK3SiJ.js";
-import { g as rn } from "./font-values-gPf-gY2d.js";
-import { AddAnnotationCommand as pe, AddHighlightCommand as an, CONSTANT_VARIABLES as on, DIFFERENCE_ARROW_DEFAULTS as ln, RESTING_HOVER_STATE as et, RemoveAnnotationCommand as Pe, RemoveHighlightCommand as sn, SetAppearanceTextScaleCommand as cn, SetAxisPositionCommand as dn, SetAxisTickModeCommand as un, SetAxisVisibilityCommand as hn, SetContentCaptionCommand as mn, SetContentSourceCommand as pn, SetContentSubtitleCommand as vn, SetContentTitleCommand as gn, SetLegendPositionCommand as fn, SetNumberFormatAbbreviationCommand as bn, SetNumberFormatDecimalsCommand as Re, SetScaleDomainCommand as le, SetScaleReverseCommand as Cn, SetScaleTransformCommand as Sn, SetScaleZeroCommand as De, ToggleContentVisibilityCommand as ve, UpdateAnnotationCommand as tt, areAnchorsEqual as nt, areEndpointsComparable as yn, buildEditMenuTriggerRegion as wn, buildObservationAnchor as xn, buildObservationPredicate as In, createObservationAnchorParser as Pn, extractVariableName as An, findHighlightsAtObservation as Nn, findObservationAttachment as Tn, formatDifferenceLabel as On, getColor as Ln, hasMultipleGroups as En, inferDifferenceArrowEndpoints as Mn, isObservationAttachmentKind as kn, isPointWithinEditMenuTrigger as rt, isSafeUrl as _n, projectAnchorToPanel as Rn, resolveObservationPoint as Se, stepDifferenceArrowEndpoint as Dn, toPanelCursor as Ae } from "@graphysdk/viz-engine";
-import { createContext as ae, useCallback as de, useContext as X, useEffect as T, useId as ne, useMemo as P, useRef as ue, useState as D } from "react";
-import { Fragment as V, jsx as t, jsxs as p } from "react/jsx-runtime";
-import { useShallow as Ne } from "zustand/react/shallow";
-import { createPortal as zn } from "react-dom";
-import W from "clsx";
-import { assignInlineVars as at } from "@vanilla-extract/dynamic";
-import { Menu as I } from "@base-ui/react/menu";
-import { Menu as K } from "@base-ui/react";
-import { Accordion as J } from "@base-ui/react/accordion";
-import { NumberField as ze } from "@base-ui/react/number-field";
-import { Radio as ot } from "@base-ui/react/radio";
-import { RadioGroup as it } from "@base-ui/react/radio-group";
-import { Select as k } from "@base-ui/react/select";
-import { Slider as Y } from "@base-ui/react/slider";
-import { Switch as Fe } from "@base-ui/react/switch";
-import { Input as Fn } from "@base-ui/react/input";
-import './editable.css';var Kn = "data-graphy-chart-chrome", Hn = "data-graphy-chart-menu", lt = { [Hn]: "" }, he = (e) => ({ [Kn]: e }), st = (e, n) => e instanceof Element && e.closest(`[data-graphy-chart-chrome="${CSS.escape(n)}"]`) !== null, Bn = (e) => e instanceof Element && e.closest("[data-graphy-chart-menu]") !== null, qn = (e) => e instanceof Element && e.closest("[data-graphy-chart-chrome]") !== null, te = (e, n, r) => e instanceof Node && (n.contains(e) || st(e, r)), Vn = "cml7ha0", ct = ae(null), Gn = ({ children: e }) => {
-  const { chartId: n } = E(), [r] = D(xe), [o, a] = D(null);
-  return r === null ? null : /* @__PURE__ */ p(V, { children: [zn(/* @__PURE__ */ t("div", {
+import { B as _e, D as he, E as Pt, F as It, I as xt, L as ke, M as es, N as T, Q as Tt, S as J, V as se, Z as At, b as M, c as Lt, d as W, et as Nt, f as ge, h as Cn, i as Ot, k as Me, l as Et, m as _t, n as F, o as Sn, p as Ae, r as kt, rt as B, s as Mt, t as Rt, tt as G, u as ve, v as Dt, x as X, y as Se } from "./history-chords-V6t-FaHD.js";
+import { g as zt } from "./font-values-CPxYeqns.js";
+import { AddAnnotationCommand as ye, AddHighlightCommand as Ft, BORDER_RADIUS_TOKENS as We, CONSTANT_VARIABLES as Ht, DEFAULT_BAR_BORDER_RADIUS as Vt, DEFAULT_POINT_SIZE as Kt, DEFAULT_STROKE_WIDTH as Gt, DIFFERENCE_ARROW_DEFAULTS as Bt, MAX_BAR_WIDTH as Ut, MIN_BAR_WIDTH as qt, RESTING_HOVER_STATE as yn, RemoveAnnotationCommand as Re, RemoveHighlightCommand as Wt, SetAppearanceCornerRadiusCommand as $t, SetAppearanceTextScaleCommand as Zt, SetAxisLabelCommand as Xt, SetAxisPositionCommand as jt, SetAxisTickModeCommand as Yt, SetAxisTicksVisibilityCommand as Qt, SetAxisVisibilityCommand as Jt, SetBarBorderRadiusCommand as er, SetBarWidthCommand as nr, SetContentCaptionCommand as tr, SetContentSourceCommand as rr, SetContentSubtitleCommand as ar, SetContentTitleCommand as or, SetDataLabelsFormatCommand as ir, SetGridLineStyleCommand as lr, SetGridLineWidthCommand as sr, SetGridVisibilityCommand as cr, SetHeadlineCompareWithCommand as dr, SetHeadlinePositionCommand as hr, SetHeadlineShowCommand as $e, SetHeadlineSizeCommand as ur, SetHighlightDimStyleCommand as mr, SetLegendAlignCommand as pr, SetLegendDisplayCommand as gr, SetLegendPositionCommand as vr, SetLineInterpolationCommand as fr, SetLineMissingValuesCommand as br, SetLineWidthCommand as Ze, SetNumberFormatAbbreviationCommand as Cr, SetNumberFormatDecimalsCommand as Xe, SetPointSizeCommand as Sr, SetPolarInnerRadiusCommand as yr, SetPolarStartAngleCommand as wr, SetScaleDomainCommand as pe, SetScaleReverseCommand as Pr, SetScaleTransformCommand as Ir, SetScaleZeroCommand as je, ToggleCategoryLabelsCommand as xr, ToggleContentVisibilityCommand as we, ToggleDataLabelsCommand as Tr, ToggleLineFillCommand as Ar, ToggleLinePointsVisibilityCommand as Lr, ToggleStackTotalsCommand as Nr, UpdateAnnotationCommand as wn, areAnchorsEqual as Pn, areEndpointsComparable as Or, buildEditMenuTriggerRegion as Er, buildLayerStyleAddress as _r, buildObservationAnchor as kr, buildObservationPredicate as Mr, canAnchorDirectLabels as Rr, canPlaceDataLabels as Dr, createObservationAnchorParser as zr, createStyleResolver as Fr, extractVariableName as Hr, filterLayersByGeoms as Le, findHighlightsAtObservation as Vr, findLayerByGeom as In, findObservationAttachment as Kr, findStyleRule as Gr, formatDifferenceLabel as Br, getColor as Ur, hasMultipleGroups as qr, inferDifferenceArrowEndpoints as Wr, isCompanionLayer as xn, isObservationAttachmentKind as $r, isPointWithinEditMenuTrigger as Tn, isSafeUrl as Zr, projectAnchorToPanel as Xr, readHighlightDimStyle as jr, resolveComparisonBasis as Yr, resolveObservationPoint as Ne, stepDifferenceArrowEndpoint as Qr, toPanelCursor as De } from "@graphysdk/viz-engine";
+import { createContext as ue, useCallback as fe, useContext as ae, useEffect as z, useId as de, useMemo as O, useRef as be, useState as $ } from "react";
+import { Fragment as q, jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useShallow as ze } from "zustand/react/shallow";
+import { createPortal as Jr } from "react-dom";
+import re from "clsx";
+import { assignInlineVars as An } from "@vanilla-extract/dynamic";
+import { Menu as k } from "@base-ui/react/menu";
+import { Menu as j } from "@base-ui/react";
+import { Accordion as le } from "@base-ui/react/accordion";
+import { NumberField as Ye } from "@base-ui/react/number-field";
+import { Radio as Ln } from "@base-ui/react/radio";
+import { RadioGroup as Nn } from "@base-ui/react/radio-group";
+import { Select as U } from "@base-ui/react/select";
+import { Slider as oe } from "@base-ui/react/slider";
+import { Switch as Qe } from "@base-ui/react/switch";
+import { Input as ea } from "@base-ui/react/input";
+import './editable.css';var na = "data-graphy-chart-chrome", ta = "data-graphy-chart-menu", On = { [ta]: "" }, Ce = (e) => ({ [na]: e }), En = (e, t) => e instanceof Element && e.closest(`[data-graphy-chart-chrome="${CSS.escape(t)}"]`) !== null, ra = (e) => e instanceof Element && e.closest("[data-graphy-chart-menu]") !== null, aa = (e) => e instanceof Element && e.closest("[data-graphy-chart-chrome]") !== null, ce = (e, t, i) => e instanceof Node && (t.contains(e) || En(e, i)), oa = "cml7ha0", _n = ue(null), ia = ({ children: e }) => {
+  const { chartId: t } = B(), [i] = $(ke), [r, a] = $(null);
+  return i === null ? null : /* @__PURE__ */ p(q, { children: [Jr(/* @__PURE__ */ n("div", {
     ref: a,
-    className: Vn,
-    ...he(n)
-  }), r), /* @__PURE__ */ t(ct.Provider, {
-    value: o,
+    className: oa,
+    ...Ce(t)
+  }), i), /* @__PURE__ */ n(_n.Provider, {
+    value: r,
     children: e
   })] });
-}, Te = () => X(ct), dt = (e) => /* @__PURE__ */ p(N, {
+}, Fe = () => ae(_n), kn = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: ".8",
       d: "M2.333 3h11.334v8.667c-2 0-4 .333-5.667 2.333-2-2-3.667-2.333-5.667-2.333z",
       opacity: ".12"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: ".8",
       fillRule: "evenodd",
       d: "M3.325 3.156a.836.836 0 0 0-.836.836v6.832c0 .462.375.836.836.836h2.131a.5.5 0 0 1 .352.145L8 13.975l2.193-2.17a.5.5 0 0 1 .352-.145h2.13a.84.84 0 0 0 .836-.836V3.992a.84.84 0 0 0-.836-.836zm-1.836.836c0-1.014.822-1.836 1.836-1.836h9.35c1.015 0 1.836.825 1.836 1.836v6.832a1.84 1.84 0 0 1-1.836 1.836H10.75l-2.398 2.374a.5.5 0 0 1-.704 0L5.25 12.66H3.325a1.836 1.836 0 0 1-1.836-1.836z",
       clipRule: "evenodd"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: ".8",
       fillRule: "evenodd",
@@ -53,91 +53,91 @@ import './editable.css';var Kn = "data-graphy-chart-chrome", Hn = "data-graphy-c
     })
   ]
 });
-var ut = "efjmb40", ht = "efjmb41", U = "efjmb42", $ = "efjmb43", Un = "efjmb44", $n = "efjmb45", Zn = /* @__PURE__ */ new Set([
+var Mn = "efjmb40", Rn = "efjmb41", ee = "efjmb42", ne = "efjmb43", la = "efjmb44", sa = "efjmb45", ca = /* @__PURE__ */ new Set([
   "item-press",
   "escape-key",
   "outside-press",
   "close-press",
   "sibling-open",
   "trigger-press"
-]), Oe = ({ label: e, icon: n, onOpened: r, children: o }) => {
-  const a = Te(), [i, l] = D(!1), c = (s, d) => {
-    s ? (l(!0), r?.()) : Zn.has(d.reason) && l(!1);
+]), He = ({ label: e, icon: t, onOpened: i, children: r }) => {
+  const a = Fe(), [o, l] = $(!1), c = (s, u) => {
+    s ? (l(!0), i?.()) : ca.has(u.reason) && l(!1);
   };
-  return /* @__PURE__ */ p(K.SubmenuRoot, {
-    open: i,
+  return /* @__PURE__ */ p(j.SubmenuRoot, {
+    open: o,
     onOpenChange: c,
-    children: [/* @__PURE__ */ t(jn, {
+    children: [/* @__PURE__ */ n(da, {
       label: e,
-      icon: n
-    }), /* @__PURE__ */ t(K.Portal, {
+      icon: t
+    }), /* @__PURE__ */ n(j.Portal, {
       container: a,
-      children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(K.Positioner, {
+      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(j.Positioner, {
         side: "right",
         align: "start",
         sideOffset: 4,
-        className: ut,
-        ...lt,
-        children: /* @__PURE__ */ t(K.Popup, {
-          className: ht,
-          children: o
+        className: Mn,
+        ...On,
+        children: /* @__PURE__ */ n(j.Popup, {
+          className: Rn,
+          children: r
         })
       }) })
     })]
   });
-}, jn = ({ label: e, icon: n }) => /* @__PURE__ */ p(K.SubmenuTrigger, {
-  className: U,
+}, da = ({ label: e, icon: t }) => /* @__PURE__ */ p(j.SubmenuTrigger, {
+  className: ee,
   openOnHover: !1,
   children: [
-    n,
-    /* @__PURE__ */ t("span", {
-      className: $,
+    t,
+    /* @__PURE__ */ n("span", {
+      className: ne,
       children: e
     }),
-    /* @__PURE__ */ t("span", {
-      className: $n,
-      children: /* @__PURE__ */ t(me, { size: "sm" })
+    /* @__PURE__ */ n("span", {
+      className: sa,
+      children: /* @__PURE__ */ n(Se, { size: "sm" })
     })
   ]
-}), Wn = "_1qe7q450", Xn = "_1qe7q451", Yn = "_1qe7q452", Qn = ({ label: e, placeholder: n, addLabel: r, at: o, onRequestClose: a }) => {
-  const i = ue(null), [l, c] = D(""), { dispatch: s } = G(), d = l.trim(), u = () => {
-    d.length !== 0 && (s(new pe({
+}), ha = "_1qe7q450", ua = "_1qe7q451", ma = "_1qe7q452", pa = ({ label: e, placeholder: t, addLabel: i, at: r, onRequestClose: a }) => {
+  const o = be(null), [l, c] = $(""), { dispatch: s } = J(), u = l.trim(), d = () => {
+    u.length !== 0 && (s(new ye({
       kind: "comment",
       annotation: {
-        at: o,
-        content: Jn(d)
+        at: r,
+        content: ga(u)
       }
     })), a());
   };
-  return /* @__PURE__ */ t(Oe, {
+  return /* @__PURE__ */ n(He, {
     label: e,
-    icon: /* @__PURE__ */ t(dt, {}),
+    icon: /* @__PURE__ */ n(kn, {}),
     onOpened: () => {
-      requestAnimationFrame(() => i.current?.focus());
+      requestAnimationFrame(() => o.current?.focus());
     },
     children: /* @__PURE__ */ p("div", {
-      className: Wn,
-      children: [/* @__PURE__ */ t("input", {
-        ref: i,
-        className: Xn,
+      className: ha,
+      children: [/* @__PURE__ */ n("input", {
+        ref: o,
+        className: ua,
         value: l,
-        placeholder: n,
+        placeholder: t,
         onChange: (g) => {
           c(g.target.value);
         },
         onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), u()), g.key !== "Escape" && g.stopPropagation();
+          g.key === "Enter" && (g.preventDefault(), d()), g.key !== "Escape" && g.stopPropagation();
         }
-      }), /* @__PURE__ */ t("button", {
+      }), /* @__PURE__ */ n("button", {
         type: "button",
-        className: Yn,
-        disabled: d.length === 0,
-        onClick: u,
-        children: r
+        className: ma,
+        disabled: u.length === 0,
+        onClick: d,
+        children: i
       })]
     })
   });
-}, Jn = (e) => ({
+}, ga = (e) => ({
   type: "doc",
   content: [{
     type: "paragraph",
@@ -146,101 +146,101 @@ var ut = "efjmb40", ht = "efjmb41", U = "efjmb42", $ = "efjmb43", Un = "efjmb44"
       text: e
     }]
   }]
-}), er = (e) => /* @__PURE__ */ t(N, {
+}), va = (e) => /* @__PURE__ */ n(M, {
   viewBox: "0 0 15 14",
   ...e,
-  children: /* @__PURE__ */ t("path", {
+  children: /* @__PURE__ */ n("path", {
     d: "M14.0146 5.20703C14.2118 5.40459 14.2121 5.72447 14.0146 5.92187L12.3291 7.6084C12.2343 7.70313 12.1047 7.75579 11.9707 7.75586C11.8369 7.75573 11.708 7.70291 11.6133 7.6084L9.92773 5.92187C9.73024 5.72438 9.73031 5.40457 9.92773 5.20703C10.1253 5.0095 10.445 5.0095 10.6426 5.20703L11.4658 6.03027L11.4658 1.68652L7.75586 1.68652L7.75586 12.6455C7.75563 12.9246 7.5291 13.1512 7.25 13.1514L2.5293 13.1514C2.2501 13.1514 2.02367 12.9247 2.02344 12.6455L2.02344 5.00781C0.868958 4.77348 0.000106647 3.7528 -1.10559e-07 2.5293C-4.95071e-08 1.13259 1.13261 9.74645e-05 2.5293 -5.23256e-07C3.92588 0.000220668 5.05859 1.13267 5.05859 2.5293C5.05849 3.75251 4.1892 4.77219 3.03516 5.00684L3.03516 12.1396L6.74414 12.1396L6.74414 1.18066C6.74414 0.901394 6.97076 0.674939 7.25 0.674804L11.9707 0.674805C12.2499 0.674939 12.4766 0.901394 12.4766 1.18066L12.4766 6.03027L13.2998 5.20703C13.4973 5.0095 13.8171 5.0095 14.0146 5.20703ZM4.04687 2.5293C4.04687 1.69137 3.36717 1.01194 2.5293 1.01172C1.69132 1.01182 1.01172 1.6913 1.01172 2.5293C1.01184 3.36719 1.6914 4.04678 2.5293 4.04687C3.36709 4.04665 4.04675 3.36712 4.04687 2.5293ZM14.5 11.2969C14.4998 12.6935 13.3673 13.8262 11.9707 13.8262C10.5742 13.826 9.4416 12.6934 9.44141 11.2969C9.44141 9.90018 10.574 8.7677 11.9707 8.76758C13.3675 8.76758 14.5 9.90011 14.5 11.2969ZM13.4883 11.2969C13.4883 10.4588 12.8088 9.7793 11.9707 9.7793C11.1327 9.77942 10.4531 10.4589 10.4531 11.2969C10.4533 12.1347 11.1329 12.8143 11.9707 12.8145C12.8086 12.8145 13.4881 12.1348 13.4883 11.2969Z",
     fill: "currentColor",
     fillOpacity: "0.8"
   })
-}), tr = "relative-difference", nr = ({ label: e, layer: n, at: r, onRequestClose: o }) => {
-  const { dispatch: a } = G(), i = L((s) => s.coordSystem), l = P(() => Mn({
-    layer: n,
-    at: r,
-    coordSystem: i
+}), fa = "relative-difference", ba = ({ label: e, layer: t, at: i, onRequestClose: r }) => {
+  const { dispatch: a } = J(), o = G((s) => s.coordSystem), l = O(() => Wr({
+    layer: t,
+    at: i,
+    coordSystem: o
   }), [
-    n,
-    r,
-    i
+    t,
+    i,
+    o
   ]);
   if (l === null) return null;
   const c = () => {
-    a(new pe({
+    a(new ye({
       kind: "differenceArrow",
       annotation: {
-        ...ln,
+        ...Bt,
         ...l,
-        label: tr
+        label: fa
       }
-    })), o();
+    })), r();
   };
-  return /* @__PURE__ */ p(I.Item, {
-    className: U,
+  return /* @__PURE__ */ p(k.Item, {
+    className: ee,
     onClick: c,
-    children: [/* @__PURE__ */ t(er, {}), /* @__PURE__ */ t("span", {
-      className: $,
+    children: [/* @__PURE__ */ n(va, {}), /* @__PURE__ */ n("span", {
+      className: ne,
       children: e
     })]
   });
 };
-function rr(e, n) {
-  if (e.type === "polar" && !ar(n)) return [{
+function Ca(e, t) {
+  if (e.type === "polar" && !Sa(t)) return [{
     scope: "series",
     labelKey: "pieSlice"
   }];
-  const r = En(n.data, n.mapping);
-  switch (n.geom) {
+  const i = qr(t.data, t.mapping);
+  switch (t.geom) {
     case "bar": {
-      const o = [{
+      const r = [{
         scope: "data-point",
         labelKey: "bar"
       }];
-      if (r) {
-        const a = n.position === "stack" || n.position === "fill";
-        o.push({
+      if (i) {
+        const a = t.position === "stack" || t.position === "fill";
+        r.push({
           scope: "x-value",
           labelKey: a ? "barStack" : "barGroup"
-        }), o.push({
+        }), r.push({
           scope: "series",
           labelKey: "barSeries"
         });
       }
-      return o;
+      return r;
     }
     case "line":
     case "area": {
-      const o = [{
+      const r = [{
         scope: "data-point",
         labelKey: "linePoint"
       }];
-      return r && o.push({
+      return i && r.push({
         scope: "series",
         labelKey: "lineSeries"
-      }), o;
+      }), r;
     }
     case "point": {
-      const o = [{
+      const r = [{
         scope: "data-point",
         labelKey: "scatterPoint"
       }];
-      return r && o.push({
+      return i && r.push({
         scope: "series",
         labelKey: "scatterSeries"
-      }), o;
+      }), r;
     }
     default:
       return [];
   }
 }
-var ar = (e) => {
-  const n = An(e.mapping.x);
-  return n !== null && n !== on.x;
-}, or = (e) => /* @__PURE__ */ p(N, {
+var Sa = (e) => {
+  const t = Hr(e.mapping.x);
+  return t !== null && t !== Ht.x;
+}, ya = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "7.704",
       y: "8.296",
@@ -248,7 +248,7 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "4.741",
       x: "8.533",
@@ -257,7 +257,7 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "11.259",
       x: "4.267",
@@ -266,7 +266,7 @@ var ar = (e) => {
       fillOpacity: "0.8",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "16",
       x: "12.8",
@@ -275,11 +275,11 @@ var ar = (e) => {
       rx: ".533"
     })
   ]
-}), ir = (e) => /* @__PURE__ */ p(N, {
+}), wa = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "7.704",
       y: "8.296",
@@ -287,7 +287,7 @@ var ar = (e) => {
       fillOpacity: "0.8",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "4.741",
       x: "8.533",
@@ -296,7 +296,7 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "11.259",
       x: "4.267",
@@ -305,7 +305,7 @@ var ar = (e) => {
       fillOpacity: "0.8",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "16",
       x: "12.8",
@@ -314,11 +314,11 @@ var ar = (e) => {
       rx: ".533"
     })
   ]
-}), lr = (e) => /* @__PURE__ */ p(N, {
+}), Pa = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "7.704",
       y: "8.296",
@@ -326,7 +326,7 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "4.741",
       x: "8.533",
@@ -335,7 +335,7 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "11.259",
       x: "4.267",
@@ -344,7 +344,7 @@ var ar = (e) => {
       fillOpacity: "0.8",
       rx: ".533"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "3.2",
       height: "16",
       x: "12.8",
@@ -353,31 +353,31 @@ var ar = (e) => {
       rx: ".533"
     })
   ]
-}), sr = (e) => /* @__PURE__ */ p(N, {
+}), Ia = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: "0.3",
       d: "M0 13.037h4.267v2.445a.52.52 0 0 1-.519.518H.518A.52.52 0 0 1 0 15.482zM0 7.037c0-.286.232-.518.519-.518h3.23c.286 0 .518.232.518.518v5.408H0z"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: ".8",
       d: "M5.867 7.704h4.266v7.778a.52.52 0 0 1-.518.518h-3.23a.52.52 0 0 1-.518-.518zM5.867 7.111h4.266V4.074a.52.52 0 0 0-.518-.518h-3.23a.52.52 0 0 0-.518.518z"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: "0.3",
       d: "M11.733 10.074H16v5.408a.52.52 0 0 1-.518.518h-3.23a.52.52 0 0 1-.519-.518zM11.733 9.481H16V.52A.52.52 0 0 0 15.482 0h-3.23a.52.52 0 0 0-.519.519z"
     })
   ]
-}), cr = (e) => /* @__PURE__ */ p(N, {
+}), xa = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -385,14 +385,14 @@ var ar = (e) => {
       strokeWidth: "1.163",
       d: "m-1.618 15.96 9.118-5.3 11 2.34"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: "0.6",
       stroke: "currentColor",
       strokeOpacity: "0.3",
       d: "M8 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "9.795",
       height: "6",
       x: "3",
@@ -401,17 +401,17 @@ var ar = (e) => {
       fillOpacity: "0.3",
       rx: "1.513"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: ".8",
       d: "M5.29 6.62a1.3 1.3 0 0 1-.424-.075 1 1 0 0 1-.373-.244 1.2 1.2 0 0 1-.262-.45 2.1 2.1 0 0 1-.096-.699q0-.389.082-.693.083-.304.238-.514a1.05 1.05 0 0 1 .374-.322q.22-.11.492-.11.285 0 .505.112a.973.973 0 0 1 .526.744h-.54a.5.5 0 0 0-.17-.277.5.5 0 0 0-.321-.105.54.54 0 0 0-.485.273q-.168.273-.17.75h.021a.8.8 0 0 1 .188-.223.92.92 0 0 1 .569-.195.91.91 0 0 1 .813.477q.125.222.123.509 0 .297-.136.536a1 1 0 0 1-.383.372 1.15 1.15 0 0 1-.571.134m-.003-.443a.54.54 0 0 0 .288-.078.57.57 0 0 0 .2-.211.6.6 0 0 0 .073-.299.6.6 0 0 0-.07-.294.54.54 0 0 0-.484-.285.55.55 0 0 0-.403.173.596.596 0 0 0 .108.914.53.53 0 0 0 .288.08M6.88 6.579v-.396l1.05-1.03q.15-.15.25-.27a1 1 0 0 0 .151-.229.6.6 0 0 0 .05-.236.432.432 0 0 0-.244-.405.6.6 0 0 0-.258-.056q-.15 0-.261.062a.43.43 0 0 0-.175.173.56.56 0 0 0-.06.267H6.86q0-.288.132-.5a.9.9 0 0 1 .362-.33q.231-.117.532-.117.303 0 .534.114.23.114.358.312a.8.8 0 0 1 .128.452.9.9 0 0 1-.065.334q-.065.164-.229.363-.162.2-.456.483l-.522.53v.021h1.318v.458zM10.57 6.62a1.3 1.3 0 0 1-.423-.075 1 1 0 0 1-.373-.244 1.2 1.2 0 0 1-.263-.45 2.1 2.1 0 0 1-.096-.699q0-.389.083-.693t.238-.514a1.05 1.05 0 0 1 .374-.322q.219-.11.492-.11.285 0 .505.112a.973.973 0 0 1 .526.744h-.54a.5.5 0 0 0-.17-.277.5.5 0 0 0-.322-.105.54.54 0 0 0-.484.273q-.168.273-.17.75h.02a.8.8 0 0 1 .188-.223.92.92 0 0 1 .569-.195.91.91 0 0 1 .814.477q.125.222.123.509 0 .297-.136.536a1 1 0 0 1-.383.372 1.15 1.15 0 0 1-.572.134m-.002-.443a.54.54 0 0 0 .288-.078.57.57 0 0 0 .2-.211.6.6 0 0 0 .073-.299.6.6 0 0 0-.071-.294.54.54 0 0 0-.483-.285.54.54 0 0 0-.403.173.597.597 0 0 0 .107.914.53.53 0 0 0 .289.08"
     })
   ]
-}), dr = (e) => /* @__PURE__ */ p(N, {
+}), Ta = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       stroke: "currentColor",
       strokeOpacity: "0.8",
       strokeLinecap: "round",
@@ -419,28 +419,28 @@ var ar = (e) => {
       strokeWidth: ".993",
       d: "M1.5 12 6 6.5l4 3.5 4-5.5"
     }),
-    /* @__PURE__ */ t("circle", {
+    /* @__PURE__ */ n("circle", {
       cx: "1.493",
       cy: "11.993",
       r: ".993",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("circle", {
+    /* @__PURE__ */ n("circle", {
       cx: "5.993",
       cy: "6.493",
       r: ".993",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("circle", {
+    /* @__PURE__ */ n("circle", {
       cx: "9.993",
       cy: "9.993",
       r: ".993",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("circle", {
+    /* @__PURE__ */ n("circle", {
       cx: "13.993",
       cy: "4.493",
       r: ".993",
@@ -448,33 +448,33 @@ var ar = (e) => {
       fillOpacity: "0.8"
     })
   ]
-}), ur = (e) => /* @__PURE__ */ p(N, {
+}), Aa = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "16",
       height: "16",
       fill: "currentColor",
       fillOpacity: "0.3",
       rx: "8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: "0.8",
       d: "m7.999 16 .412-.01A8 8 0 0 0 8 0z"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fill: "currentColor",
       fillOpacity: "0.6",
       d: "M15.999 8a8 8 0 0 1-7.588 7.989l-.412.01V8z"
     })
   ]
-}), hr = (e) => /* @__PURE__ */ p(N, {
+}), La = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -482,7 +482,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 3.598 7.215)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -490,7 +490,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 6.681 11.327)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -498,7 +498,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 9.251 7.215)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -506,7 +506,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 10.28 2.59)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -514,7 +514,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 13.877 6.187)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -522,7 +522,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 2.056 12.869)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -531,11 +531,11 @@ var ar = (e) => {
       transform: "matrix(-1 0 0 1 15.933 .533)"
     })
   ]
-}), mr = (e) => /* @__PURE__ */ p(N, {
+}), Na = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -543,7 +543,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 3.598 7.215)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -551,7 +551,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 6.681 11.327)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -559,7 +559,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 9.251 7.215)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -567,7 +567,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 10.28 2.59)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -575,7 +575,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 13.877 6.187)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -583,7 +583,7 @@ var ar = (e) => {
       rx: "1.028",
       transform: "matrix(-1 0 0 1 2.056 12.869)"
     }),
-    /* @__PURE__ */ t("rect", {
+    /* @__PURE__ */ n("rect", {
       width: "2.056",
       height: "2.056",
       fill: "currentColor",
@@ -592,170 +592,170 @@ var ar = (e) => {
       transform: "matrix(-1 0 0 1 15.933 .533)"
     })
   ]
-}), pr = {
-  bar: or,
-  barGroup: ir,
-  barStack: sr,
-  barSeries: lr,
-  linePoint: cr,
-  lineSeries: dr,
-  scatterPoint: hr,
-  scatterSeries: mr,
-  pieSlice: ur
-}, mt = ({ labelKey: e }) => {
-  const n = pr[e];
-  return /* @__PURE__ */ t(n, {});
-}, pt = (e) => /* @__PURE__ */ p(N, {
+}), Oa = {
+  bar: ya,
+  barGroup: wa,
+  barStack: Ia,
+  barSeries: Pa,
+  linePoint: xa,
+  lineSeries: Ta,
+  scatterPoint: La,
+  scatterSeries: Na,
+  pieSlice: Aa
+}, Dn = ({ labelKey: e }) => {
+  const t = Oa[e];
+  return /* @__PURE__ */ n(t, {});
+}, zn = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
-  children: [/* @__PURE__ */ t("path", {
+  children: [/* @__PURE__ */ n("path", {
     opacity: "0.12",
     d: "M15 4.66667L12.3333 2L2.33334 12L5.00001 14.6667L15 4.66667Z",
     fill: "currentColor",
     fillOpacity: "0.8"
-  }), /* @__PURE__ */ t("path", {
+  }), /* @__PURE__ */ n("path", {
     d: "M5.01683 15.3331C4.84407 15.3343 4.67292 15.2997 4.51421 15.2314C4.3555 15.1632 4.21268 15.0627 4.09476 14.9365L3.88656 14.7283L3.62877 14.8968L3.19253 15.3331H0L2.24072 13.0923L2.03251 12.8445C1.89423 12.7191 1.78392 12.566 1.70875 12.3952C1.63359 12.2244 1.59526 12.0396 1.59626 11.853C1.59579 11.6818 1.63078 11.5124 1.69904 11.3554C1.76729 11.1984 1.86733 11.0573 1.99285 10.9409L11.2036 1.73012C11.3215 1.60384 11.4643 1.5034 11.623 1.43514C11.7817 1.36688 11.9529 1.33228 12.1257 1.33353C12.2969 1.33245 12.4665 1.36716 12.6236 1.43546C12.7807 1.50375 12.9218 1.60412 13.0378 1.73012L15.1496 3.92126C15.2748 4.03899 15.3745 4.1811 15.4427 4.33882C15.5108 4.49654 15.546 4.66655 15.546 4.83837C15.546 5.01019 15.5108 5.1802 15.4427 5.33792C15.3745 5.49564 15.2748 5.63774 15.1496 5.75548L5.93889 14.9662C5.81806 15.0866 5.67403 15.1812 5.51552 15.2443C5.35702 15.3074 5.18736 15.3376 5.01683 15.3331ZM2.48858 11.9125L5.01683 14.4407L9.47843 9.97913L6.95019 7.4608L2.48858 11.9125ZM7.68388 6.72712L10.2022 9.24544L14.644 4.80367L12.1257 2.28534L7.68388 6.72712Z",
     fill: "currentColor",
     fillOpacity: "0.8"
   })]
-}), vr = ({ label: e, options: n, onSelect: r }) => {
-  const o = A();
-  return /* @__PURE__ */ t(Oe, {
+}), Ea = ({ label: e, options: t, onSelect: i }) => {
+  const r = T();
+  return /* @__PURE__ */ n(He, {
     label: e,
-    icon: /* @__PURE__ */ t(pt, {}),
-    children: n.map((a) => /* @__PURE__ */ p(K.Item, {
-      className: U,
-      onClick: () => r(a.scope),
-      children: [/* @__PURE__ */ t(mt, { labelKey: a.labelKey }), /* @__PURE__ */ t("span", {
-        className: $,
-        children: o(`graph.annotations.highlights.labels.${a.labelKey}`)
+    icon: /* @__PURE__ */ n(zn, {}),
+    children: t.map((a) => /* @__PURE__ */ p(j.Item, {
+      className: ee,
+      onClick: () => i(a.scope),
+      children: [/* @__PURE__ */ n(Dn, { labelKey: a.labelKey }), /* @__PURE__ */ n("span", {
+        className: ne,
+        children: r(`graph.annotations.highlights.labels.${a.labelKey}`)
       })]
     }, a.scope))
   });
-}, gr = ({ label: e, layer: n, observation: r, highlights: o, onRequestClose: a }) => {
-  const i = A(), { dispatch: l } = G(), c = L((m) => m.coordSystem), s = P(() => In(n, r), [n, r]), d = P(() => rr(c, n), [c, n]), u = P(() => {
-    const m = new Set(o.map((g) => g.scope));
-    return d.filter((g) => !m.has(g.scope));
-  }, [d, o]), [h] = u;
+}, _a = ({ label: e, layer: t, observation: i, highlights: r, onRequestClose: a }) => {
+  const o = T(), { dispatch: l } = J(), c = G((m) => m.coordSystem), s = O(() => Mr(t, i), [t, i]), u = O(() => Ca(c, t), [c, t]), d = O(() => {
+    const m = new Set(r.map((g) => g.scope));
+    return u.filter((g) => !m.has(g.scope));
+  }, [u, r]), [h] = d;
   if (s === null || h === void 0) return null;
   const v = (m) => {
-    l(new an({
+    l(new Ft({
       predicate: s,
       scope: m,
-      layerId: n.id
+      layerId: t.id
     })), a();
   };
-  if (u.length === 1) {
-    const m = d.length === 1 ? e : i("graph.annotations.baseMenu.highlightWithLabel", { label: i(`graph.annotations.highlights.labels.${h.labelKey}`) });
-    return /* @__PURE__ */ p(K.Item, {
-      className: U,
+  if (d.length === 1) {
+    const m = u.length === 1 ? e : o("graph.annotations.baseMenu.highlightWithLabel", { label: o(`graph.annotations.highlights.labels.${h.labelKey}`) });
+    return /* @__PURE__ */ p(j.Item, {
+      className: ee,
       onClick: () => v(h.scope),
-      children: [/* @__PURE__ */ t(mt, { labelKey: h.labelKey }), /* @__PURE__ */ t("span", {
-        className: $,
+      children: [/* @__PURE__ */ n(Dn, { labelKey: h.labelKey }), /* @__PURE__ */ n("span", {
+        className: ne,
         children: m
       })]
     });
   }
-  return /* @__PURE__ */ t(vr, {
+  return /* @__PURE__ */ n(Ea, {
     label: e,
-    options: u,
+    options: d,
     onSelect: v
   });
-}, fr = "_1aafi1g0", br = "_1aafi1g1", vt = ({ children: e }) => /* @__PURE__ */ p("span", {
-  className: fr,
+}, ka = "_1aafi1g0", Ma = "_1aafi1g1", Fn = ({ children: e }) => /* @__PURE__ */ p("span", {
+  className: ka,
   "aria-hidden": "true",
-  children: [e, /* @__PURE__ */ t("span", { className: br })]
-}), Cr = ({ label: e, highlights: n, onRequestClose: r }) => {
-  const { dispatch: o } = G(), a = n.at(-1);
+  children: [e, /* @__PURE__ */ n("span", { className: Ma })]
+}), Ra = ({ label: e, highlights: t, onRequestClose: i }) => {
+  const { dispatch: r } = J(), a = t.at(-1);
   if (a === void 0) return null;
-  const i = () => {
-    o(new sn({ id: a.id })), r();
+  const o = () => {
+    r(new Wt({ id: a.id })), i();
   };
-  return /* @__PURE__ */ p(I.Item, {
-    className: U,
-    onClick: i,
-    children: [/* @__PURE__ */ t(vt, { children: /* @__PURE__ */ t(pt, {}) }), /* @__PURE__ */ t("span", {
-      className: $,
+  return /* @__PURE__ */ p(k.Item, {
+    className: ee,
+    onClick: o,
+    children: [/* @__PURE__ */ n(Fn, { children: /* @__PURE__ */ n(zn, {}) }), /* @__PURE__ */ n("span", {
+      className: ne,
       children: e
     })]
   });
-}, Sr = (e, n) => {
-  const r = L((a) => a.spec.highlights), o = L((a) => a.config.parsingLocale);
-  return P(() => Nn({
+}, Da = (e, t) => {
+  const i = G((a) => a.spec.highlights), r = G((a) => a.config.parsingLocale);
+  return O(() => Vr({
     layer: e,
-    highlights: r,
-    observation: n,
-    parsingLocale: o
+    highlights: i,
+    observation: t,
+    parsingLocale: r
   }), [
     e,
-    r,
-    n,
-    o
+    i,
+    t,
+    r
   ]);
-}, gt = (e) => /* @__PURE__ */ p(N, {
+}, Hn = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       opacity: "0.12",
       d: "M13.5948 4.29016C13.8724 6.22367 12.5301 8.01618 10.5966 8.29384C8.66309 8.57151 6.87058 7.22918 6.59292 5.29567C6.31525 3.36216 7.65758 1.56965 9.59109 1.29198C11.5246 1.01432 13.3171 2.35665 13.5948 4.29016Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M5.71886 3.51052C6.25611 1.3626 8.43287 0.0568985 10.5808 0.594151C12.7287 1.1314 14.0344 3.30817 13.4972 5.45609C13.0316 7.31748 11.3347 8.54637 9.49237 8.49145L7.50898 12.492C7.46485 12.581 7.40179 12.6548 7.32702 12.7108C7.20005 12.8073 7.03703 12.8532 6.87248 12.8303C6.80957 12.822 6.74697 12.8038 6.68687 12.7749C6.39369 12.6342 6.26689 12.2915 6.3923 11.9963L7.63393 7.97371C6.10249 7.10872 5.27136 5.29962 5.71886 3.51052ZM10.2785 1.80253C8.79799 1.4322 7.29756 2.33222 6.92723 3.81277C6.55691 5.29332 7.45692 6.79375 8.93747 7.16408C10.418 7.5344 11.9185 6.63439 12.2888 5.15384C12.6591 3.67329 11.7591 2.17285 10.2785 1.80253Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       d: "M5.42977 11.1572C5.70072 11.104 5.8772 10.8411 5.82393 10.5702C5.77067 10.2992 5.50784 10.1227 5.23688 10.176C4.31848 10.3565 3.57421 10.6423 3.04695 11.0266C2.51409 11.4149 2.16666 11.936 2.16666 12.557C2.16666 13.0322 2.41215 13.4327 2.74425 13.7433C3.07553 14.0531 3.52776 14.3091 4.04484 14.5137C5.08193 14.9239 6.48048 15.1666 7.99999 15.1666C9.5195 15.1666 10.9181 14.9239 11.9551 14.5137C12.4722 14.3091 12.9244 14.0531 13.2557 13.7433C13.5878 13.4327 13.8333 13.0322 13.8333 12.557C13.8333 11.936 13.4859 11.4149 12.953 11.0266C12.4258 10.6423 11.6815 10.3565 10.7631 10.176C10.4921 10.1227 10.2293 10.2992 10.176 10.5702C10.1228 10.8411 10.2993 11.104 10.5702 11.1572C11.4079 11.3219 11.997 11.5672 12.364 11.8347C12.7255 12.0981 12.8333 12.3496 12.8333 12.557C12.8333 12.6643 12.7803 12.8187 12.5727 13.013C12.3642 13.2079 12.0354 13.4065 11.5873 13.5838C10.6941 13.9371 9.426 14.1666 7.99999 14.1666C6.57398 14.1666 5.30586 13.9371 4.41267 13.5838C3.9646 13.4065 3.63578 13.2079 3.4273 13.013C3.21964 12.8187 3.16666 12.6643 3.16666 12.557C3.16666 12.3496 3.2745 12.0981 3.63595 11.8347C4.00299 11.5672 4.59206 11.3219 5.42977 11.1572Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     })
   ]
-}), yr = ({ label: e, at: n, onRequestClose: r }) => {
-  const { dispatch: o } = G(), a = () => {
-    o(new pe({
+}), za = ({ label: e, at: t, onRequestClose: i }) => {
+  const { dispatch: r } = J(), a = () => {
+    r(new ye({
       kind: "pinnedNumber",
-      annotation: { at: n }
-    })), r();
+      annotation: { at: t }
+    })), i();
   };
-  return /* @__PURE__ */ p(I.Item, {
-    className: U,
+  return /* @__PURE__ */ p(k.Item, {
+    className: ee,
     onClick: a,
-    children: [/* @__PURE__ */ t(gt, {}), /* @__PURE__ */ t("span", {
-      className: $,
+    children: [/* @__PURE__ */ n(Hn, {}), /* @__PURE__ */ n("span", {
+      className: ne,
       children: e
     })]
   });
-}, ft = (e) => /* @__PURE__ */ p(N, {
+}, Vn = (e) => /* @__PURE__ */ p(M, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       opacity: "0.12",
       d: "M1.33334 8.00016C1.33334 4.31826 4.31811 1.3335 8.00001 1.3335C11.6819 1.3335 14.6667 4.31826 14.6667 8.00016C14.6667 11.6821 11.6819 14.6668 8.00001 14.6668C4.31811 14.6668 1.33334 11.6821 1.33334 8.00016Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       d: "M5.7328 9.69963C5.56696 9.47884 5.25352 9.43429 5.03273 9.60013C4.81193 9.76598 4.76739 10.0794 4.93323 10.3002C5.63175 11.2302 6.74548 11.8333 7.99993 11.8333C9.25438 11.8333 10.3681 11.2302 11.0666 10.3002C11.2325 10.0794 11.1879 9.76598 10.9671 9.60013C10.7463 9.43429 10.4329 9.47884 10.2671 9.69963C9.74929 10.3889 8.92657 10.8333 7.99993 10.8333C7.07329 10.8333 6.25057 10.3889 5.7328 9.69963Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       d: "M6.66668 6.66658C6.66668 7.03478 6.3682 7.33325 6.00001 7.33325C5.63182 7.33325 5.33334 7.03478 5.33334 6.66658C5.33334 6.29839 5.63182 5.99992 6.00001 5.99992C6.3682 5.99992 6.66668 6.29839 6.66668 6.66658Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       d: "M10 7.33325C10.3682 7.33325 10.6667 7.03478 10.6667 6.66658C10.6667 6.29839 10.3682 5.99992 10 5.99992C9.63182 5.99992 9.33334 6.29839 9.33334 6.66658C9.33334 7.03478 9.63182 7.33325 10 7.33325Z",
       fill: "currentColor",
       fillOpacity: "0.8"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ n("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M8.00001 0.833252C4.04197 0.833252 0.833344 4.04188 0.833344 7.99992C0.833344 11.958 4.04197 15.1666 8.00001 15.1666C11.9581 15.1666 15.1667 11.958 15.1667 7.99992C15.1667 4.04188 11.9581 0.833252 8.00001 0.833252ZM14.1667 7.99992C14.1667 11.4057 11.4058 14.1666 8.00001 14.1666C4.59425 14.1666 1.83334 11.4057 1.83334 7.99992C1.83334 4.59416 4.59425 1.83325 8.00001 1.83325C11.4058 1.83325 14.1667 4.59416 14.1667 7.99992Z",
@@ -763,144 +763,144 @@ var ar = (e) => {
       fillOpacity: "0.8"
     })
   ]
-}), bt = {
+}), Kn = {
   pinnedNumber: {
-    icon: gt,
+    icon: Hn,
     labelKey: "graph.annotations.baseMenu.unpinNumber"
   },
   comment: {
-    icon: dt,
+    icon: kn,
     labelKey: "graph.annotations.baseMenu.removeAnnotation"
   },
   sticker: {
-    icon: ft,
+    icon: Vn,
     labelKey: "graph.annotations.baseMenu.removeSticker"
   },
   image: null
-}, wr = (e) => kn(e.kind) && bt[e.kind] !== null, xr = ({ attachment: e, onRequestClose: n }) => {
-  const r = A(), { dispatch: o } = G(), { icon: a, labelKey: i } = bt[e.kind], l = () => {
-    o(new Pe({ id: e.annotation.id })), n();
+}, Fa = (e) => $r(e.kind) && Kn[e.kind] !== null, Ha = ({ attachment: e, onRequestClose: t }) => {
+  const i = T(), { dispatch: r } = J(), { icon: a, labelKey: o } = Kn[e.kind], l = () => {
+    r(new Re({ id: e.annotation.id })), t();
   };
-  return /* @__PURE__ */ p(I.Item, {
-    className: U,
+  return /* @__PURE__ */ p(k.Item, {
+    className: ee,
     onClick: l,
-    children: [/* @__PURE__ */ t(vt, { children: /* @__PURE__ */ t(a, {}) }), /* @__PURE__ */ t("span", {
-      className: $,
-      children: r(i)
+    children: [/* @__PURE__ */ n(Fn, { children: /* @__PURE__ */ n(a, {}) }), /* @__PURE__ */ n("span", {
+      className: ne,
+      children: i(o)
     })]
   });
-}, Ir = "ceeojg0", Pr = "ceeojg1", Ar = "ceeojg2", Nr = ({ label: e, at: n, onRequestClose: r }) => {
-  const { dispatch: o } = G(), a = (i) => {
-    o(new pe({
+}, Va = "ceeojg0", Ka = "ceeojg1", Ga = "ceeojg2", Ba = ({ label: e, at: t, onRequestClose: i }) => {
+  const { dispatch: r } = J(), a = (o) => {
+    r(new ye({
       kind: "sticker",
       annotation: {
         at: {
           anchorType: "observation",
-          ...n
+          ...t
         },
-        sticker: i
+        sticker: o
       }
-    })), r();
+    })), i();
   };
-  return /* @__PURE__ */ t(Oe, {
+  return /* @__PURE__ */ n(He, {
     label: e,
-    icon: /* @__PURE__ */ t(ft, {}),
-    children: /* @__PURE__ */ t("div", {
-      className: Ir,
-      children: Object.entries(en).map(([i, l]) => /* @__PURE__ */ t(K.Item, {
-        className: Pr,
-        "aria-label": i,
-        onClick: () => a(i),
-        children: /* @__PURE__ */ t("img", {
-          className: Ar,
+    icon: /* @__PURE__ */ n(Vn, {}),
+    children: /* @__PURE__ */ n("div", {
+      className: Va,
+      children: Object.entries(Mt).map(([o, l]) => /* @__PURE__ */ n(j.Item, {
+        className: Ka,
+        "aria-label": o,
+        onClick: () => a(o),
+        children: /* @__PURE__ */ n("img", {
+          className: Ga,
           src: l.src,
-          alt: i
+          alt: o
         })
-      }, i))
+      }, o))
     })
   });
-}, Tr = ({ interaction: e, panelOrigin: n }) => {
-  const r = _(), o = ce((i) => i.menuTrigger);
-  if (e.kind !== "menu" || o === null) return null;
+}, Ua = ({ interaction: e, panelOrigin: t }) => {
+  const i = W(), r = ve((o) => o.menuTrigger);
+  if (e.kind !== "menu" || r === null) return null;
   const a = () => {
-    r.getState().releaseInteraction("menu");
+    i.getState().releaseInteraction("menu");
   };
-  return /* @__PURE__ */ t(Or, {
+  return /* @__PURE__ */ n(qa, {
     trigger: {
-      x: n.x + o.center.x,
-      y: n.y + o.center.y,
-      radius: o.radius
+      x: t.x + r.center.x,
+      y: t.y + r.center.y,
+      radius: r.radius
     },
     layer: e.anchor.layer,
     at: e.anchor.at,
     observation: e.anchor.observation,
     onClose: a
   });
-}, Or = ({ trigger: e, layer: n, at: r, observation: o, onClose: a }) => {
-  const i = A(), l = Te(), c = L((f) => f.spec.annotations), s = L((f) => f.config.parsingLocale), d = Er(), { x: u, y: h, radius: v } = e, m = P(() => Lr(u, h, v), [
-    u,
+}, qa = ({ trigger: e, layer: t, at: i, observation: r, onClose: a }) => {
+  const o = T(), l = Fe(), c = G((f) => f.spec.annotations), s = G((f) => f.config.parsingLocale), u = $a(), { x: d, y: h, radius: v } = e, m = O(() => Wa(d, h, v), [
+    d,
     h,
     v
-  ]), g = Tn(c, r, P(() => Pn(n, s), [n, s])), x = g !== null && wr(g) ? g : null, S = Sr(n, o), b = (f, y) => {
-    !f && Mr(y.reason) && a();
+  ]), g = Kr(c, i, O(() => zr(t, s), [t, s])), y = g !== null && Fa(g) ? g : null, I = Da(t, r), S = (f, P) => {
+    !f && Za(P.reason) && a();
   };
-  return /* @__PURE__ */ t(I.Root, {
-    open: d,
+  return /* @__PURE__ */ n(k.Root, {
+    open: u,
     modal: !1,
-    onOpenChange: b,
-    children: /* @__PURE__ */ t(I.Portal, {
+    onOpenChange: S,
+    children: /* @__PURE__ */ n(k.Portal, {
       container: l,
-      children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(I.Positioner, {
+      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(k.Positioner, {
         anchor: m,
         side: "right",
         align: "start",
         sideOffset: 8,
-        className: ut,
-        ...lt,
-        children: /* @__PURE__ */ p(I.Popup, {
-          className: ht,
+        className: Mn,
+        ...On,
+        children: /* @__PURE__ */ p(k.Popup, {
+          className: Rn,
           "data-testid": "observation-menu",
           children: [
-            x !== null && /* @__PURE__ */ t(xr, {
-              attachment: x,
+            y !== null && /* @__PURE__ */ n(Ha, {
+              attachment: y,
               onRequestClose: a
             }),
-            /* @__PURE__ */ t(Cr, {
-              label: i("graph.annotations.baseMenu.removeHighlight"),
-              highlights: S,
+            /* @__PURE__ */ n(Ra, {
+              label: o("graph.annotations.baseMenu.removeHighlight"),
+              highlights: I,
               onRequestClose: a
             }),
-            /* @__PURE__ */ t(I.Separator, { className: Un }),
-            x === null && /* @__PURE__ */ p(V, { children: [
-              /* @__PURE__ */ t(yr, {
-                label: i("graph.annotations.baseMenu.pinNumber"),
-                at: r,
+            /* @__PURE__ */ n(k.Separator, { className: la }),
+            y === null && /* @__PURE__ */ p(q, { children: [
+              /* @__PURE__ */ n(za, {
+                label: o("graph.annotations.baseMenu.pinNumber"),
+                at: i,
                 onRequestClose: a
               }),
-              /* @__PURE__ */ t(Qn, {
-                label: i("graph.annotations.baseMenu.annotate"),
-                placeholder: i("graph.annotations.textMenu.placeholder"),
-                addLabel: i("graph.annotations.textMenu.addButton"),
-                at: r,
+              /* @__PURE__ */ n(pa, {
+                label: o("graph.annotations.baseMenu.annotate"),
+                placeholder: o("graph.annotations.textMenu.placeholder"),
+                addLabel: o("graph.annotations.textMenu.addButton"),
+                at: i,
                 onRequestClose: a
               }),
-              /* @__PURE__ */ t(Nr, {
-                label: i("graph.annotations.baseMenu.addSticker"),
-                at: r,
+              /* @__PURE__ */ n(Ba, {
+                label: o("graph.annotations.baseMenu.addSticker"),
+                at: i,
                 onRequestClose: a
               })
             ] }),
-            n.highlight !== null && /* @__PURE__ */ t(gr, {
-              label: i("graph.annotations.baseMenu.highlight"),
-              layer: n,
-              observation: o,
-              highlights: S,
+            t.highlight !== null && /* @__PURE__ */ n(_a, {
+              label: o("graph.annotations.baseMenu.highlight"),
+              layer: t,
+              observation: r,
+              highlights: I,
               onRequestClose: a
             }),
-            /* @__PURE__ */ t(nr, {
-              label: i("graph.annotations.baseMenu.differenceArrow"),
-              layer: n,
-              at: r,
+            /* @__PURE__ */ n(ba, {
+              label: o("graph.annotations.baseMenu.differenceArrow"),
+              layer: t,
+              at: i,
               onRequestClose: a
             })
           ]
@@ -908,28 +908,28 @@ var ar = (e) => {
       }) })
     })
   });
-}, Lr = (e, n, r) => ({ getBoundingClientRect: () => new DOMRect(e - r, n - r, r * 2, r * 2) }), Er = () => {
-  const [e, n] = D(!1);
-  return T(() => {
-    n(!0);
+}, Wa = (e, t, i) => ({ getBoundingClientRect: () => new DOMRect(e - i, t - i, i * 2, i * 2) }), $a = () => {
+  const [e, t] = $(!1);
+  return z(() => {
+    t(!0);
   }, []), e;
-}, Mr = (e) => e === "outside-press" || e === "escape-key" || e === "item-press", kr = () => {
-  const e = Je();
-  return Ct(e);
-}, Ct = (e) => {
+}, Za = (e) => e === "outside-press" || e === "escape-key" || e === "item-press", Xa = () => {
+  const e = Sn();
+  return Gn(e);
+}, Gn = (e) => {
   if (e.length !== 1) return null;
-  const [n] = e;
-  return n?.kind === "annotation" ? n.id : null;
-}, _r = (e) => /* @__PURE__ */ t(N, {
+  const [t] = e;
+  return t?.kind === "annotation" ? t.id : null;
+}, ja = (e) => /* @__PURE__ */ n(M, {
   ...e,
   children: /* @__PURE__ */ p("g", {
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: [/* @__PURE__ */ t("path", { d: "M4 9h16m-4-4 4 4" }), /* @__PURE__ */ t("path", { d: "M20 15H4m4 4-4-4" })]
+    children: [/* @__PURE__ */ n("path", { d: "M4 9h16m-4-4 4 4" }), /* @__PURE__ */ n("path", { d: "M20 15H4m4 4-4-4" })]
   })
-}), Rr = (e) => /* @__PURE__ */ t(N, {
+}), Ya = (e) => /* @__PURE__ */ n(M, {
   ...e,
   children: /* @__PURE__ */ p("g", {
     stroke: "currentColor",
@@ -937,49 +937,49 @@ var ar = (e) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ t("path", { d: "M4 7h16" }),
-      /* @__PURE__ */ t("path", { d: "M10 11v6M14 11v6" }),
-      /* @__PURE__ */ t("path", { d: "M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12" }),
-      /* @__PURE__ */ t("path", { d: "M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
+      /* @__PURE__ */ n("path", { d: "M4 7h16" }),
+      /* @__PURE__ */ n("path", { d: "M10 11v6M14 11v6" }),
+      /* @__PURE__ */ n("path", { d: "M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12" }),
+      /* @__PURE__ */ n("path", { d: "M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
     ]
   })
-}), Dr = { kind: "chrome-popup" }, zr = "var(--q7gcrz0)", Fr = "var(--q7gcrz1)", Kr = "q7gcrz2", Hr = "q7gcrz3";
-var Br = "q7gcrz5", qr = "q7gcrz6", Vr = "q7gcrz7", Gr = "q7gcrz8", St = "q7gcrz9", Ur = "q7gcrza";
-var Ke = "q7gcrzd q7gcrzc", yt = "q7gcrze q7gcrzc", $r = [
+}), Qa = { kind: "chrome-popup" }, Ja = "var(--q7gcrz0)", eo = "var(--q7gcrz1)", no = "q7gcrz2", to = "q7gcrz3";
+var ro = "q7gcrz5", ao = "q7gcrz6", oo = "q7gcrz7", io = "q7gcrz8", Bn = "q7gcrz9", lo = "q7gcrza";
+var Je = "q7gcrzd q7gcrzc", Un = "q7gcrze q7gcrzc", so = [
   "absolute-difference",
   "relative-difference",
   "proportion"
-], He = ["absolute-difference", "relative-difference"], Zr = ["relative-difference", "proportion"], jr = {
+], en = ["absolute-difference", "relative-difference"], co = ["relative-difference", "proportion"], ho = {
   "absolute-difference": "graph.annotations.differenceArrowToolbar.labelKind.absoluteDifference",
   "relative-difference": "graph.annotations.differenceArrowToolbar.labelKind.relativeDifference",
   proportion: "graph.annotations.differenceArrowToolbar.labelKind.proportion"
-}, Wr = (e) => {
-  const { formattingLocale: n } = E(), r = L((a) => a.config.parsingLocale), o = n ?? r;
-  return P(() => {
-    const a = yn(e.start, e.end);
-    return $r.filter((i) => a || !He.includes(i) || i === e.label).map((i) => ({
-      kind: i,
-      nameKey: jr[i],
-      preview: On({
-        locale: o,
-        kind: i,
+}, uo = (e) => {
+  const { formattingLocale: t } = B(), i = G((a) => a.config.parsingLocale), r = t ?? i;
+  return O(() => {
+    const a = Or(e.start, e.end);
+    return so.filter((o) => a || !en.includes(o) || o === e.label).map((o) => ({
+      kind: o,
+      nameKey: ho[o],
+      preview: Br({
+        locale: r,
+        kind: o,
         startValue: e.start.measurementValue,
         endValue: e.end.measurementValue,
         valueFormat: e.start.valueFormat
       }),
-      isPickable: a || !He.includes(i),
-      isSuspect: Zr.includes(i) && e.start.measurementValue === 0
+      isPickable: a || !en.includes(o),
+      isSuspect: co.includes(o) && e.start.measurementValue === 0
     }));
-  }, [e, o]);
-}, Q = 8, Xr = ({ labelBox: e, panelRect: n, frameWidth: r, frameHeight: o }) => {
-  const a = n.y + e.y, i = a + e.height, l = a - 8 - 36, c = i + 8, s = Yr(Q, l >= Q ? l : c, o - Q - 36), d = Q;
+  }, [e, r]);
+}, ie = 8, mo = ({ labelBox: e, panelRect: t, frameWidth: i, frameHeight: r }) => {
+  const a = t.y + e.y, o = a + e.height, l = a - 8 - 36, c = o + 8, s = po(ie, l >= ie ? l : c, r - ie - 36), u = ie;
   return {
     top: s,
-    left: d,
-    available: Math.max(0, r - Q * 2),
-    centre: n.x + e.x + e.width / 2 - d
+    left: u,
+    available: Math.max(0, i - ie * 2),
+    centre: t.x + e.x + e.width / 2 - u
   };
-}, Yr = (e, n, r) => Math.max(e, Math.min(n, r)), fe = [
+}, po = (e, t, i) => Math.max(e, Math.min(t, i)), xe = [
   {
     id: "small",
     nameKey: "graph.annotations.differenceArrowToolbar.size.small"
@@ -992,93 +992,93 @@ var Ke = "q7gcrzd q7gcrzc", yt = "q7gcrze q7gcrzc", $r = [
     id: "large",
     nameKey: "graph.annotations.differenceArrowToolbar.size.large"
   }
-], Qr = ({ arrow: e, labelBox: n, panelRect: r, frameWidth: o, frameHeight: a, frameElement: i }) => {
-  const l = A(), { chartId: c, commands: s } = E(), d = _(), [u, h] = D(null), v = Wr(e), m = Xr({
-    labelBox: n,
-    panelRect: r,
-    frameWidth: o,
+], go = ({ arrow: e, labelBox: t, panelRect: i, frameWidth: r, frameHeight: a, frameElement: o }) => {
+  const l = T(), { chartId: c, commands: s } = B(), u = W(), [d, h] = $(null), v = uo(e), m = mo({
+    labelBox: t,
+    panelRect: i,
+    frameWidth: r,
     frameHeight: a
-  }), g = (b, f) => {
-    s.dispatch(new tt({
+  }), g = (S, f) => {
+    s.dispatch(new wn({
       kind: "differenceArrow",
       id: e.id,
-      patch: b
+      patch: S
     }), f);
   };
-  T(() => () => s.seal(), [s]), T(() => {
-    const { claimInteraction: b, releaseInteraction: f } = d.getState();
-    return u === null ? f("chrome-popup") : b(Dr), () => f("chrome-popup");
-  }, [d, u]);
-  const x = (b) => {
-    h(b ? "color" : null), b || s.seal();
-  }, S = () => {
-    s.dispatch(new Pe({ id: e.id })), i.focus({ preventScroll: !0 });
+  z(() => () => s.seal(), [s]), z(() => {
+    const { claimInteraction: S, releaseInteraction: f } = u.getState();
+    return d === null ? f("chrome-popup") : S(Qa), () => f("chrome-popup");
+  }, [u, d]);
+  const y = (S) => {
+    h(S ? "color" : null), S || s.seal();
+  }, I = () => {
+    s.dispatch(new Re({ id: e.id })), o.focus({ preventScroll: !0 });
   };
-  return /* @__PURE__ */ t("div", {
-    className: Kr,
+  return /* @__PURE__ */ n("div", {
+    className: no,
     style: {
       top: m.top,
       left: m.left,
       width: m.available
     },
-    children: /* @__PURE__ */ p(F.Root, {
+    children: /* @__PURE__ */ p(X.Root, {
       "aria-label": l("graph.annotations.differenceArrowToolbar.label"),
-      className: Hr,
+      className: to,
       "data-testid": "difference-arrow-toolbar",
-      ...he(c),
-      style: at({
-        [zr]: `${m.centre}px`,
-        [Fr]: `${m.available}px`
+      ...Ce(c),
+      style: An({
+        [Ja]: `${m.centre}px`,
+        [eo]: `${m.available}px`
       }),
       children: [
-        /* @__PURE__ */ t(Jr, {
+        /* @__PURE__ */ n(vo, {
           options: v,
           current: e.label,
-          isOpen: u === "labelKind",
-          onOpenChange: (b) => h(b ? "labelKind" : null),
-          onPick: (b) => {
-            g({ label: b }), h(null);
+          isOpen: d === "labelKind",
+          onOpenChange: (S) => h(S ? "labelKind" : null),
+          onPick: (S) => {
+            g({ label: S }), h(null);
           }
         }),
-        /* @__PURE__ */ t(F.Separator, {}),
-        /* @__PURE__ */ t(F.ColorPicker, {
+        /* @__PURE__ */ n(X.Separator, {}),
+        /* @__PURE__ */ n(X.ColorPicker, {
           color: e.color,
           label: l("graph.annotations.differenceArrowToolbar.color"),
-          onChange: (b) => g({ color: b }, { transient: !0 }),
-          isOpen: u === "color",
-          onOpenChange: x,
-          popupAttributes: he(c),
-          children: /* @__PURE__ */ t("span", {
-            className: qr,
+          onChange: (S) => g({ color: S }, { transient: !0 }),
+          isOpen: d === "color",
+          onOpenChange: y,
+          popupAttributes: Ce(c),
+          children: /* @__PURE__ */ n("span", {
+            className: ao,
             style: { background: e.color ?? "transparent" }
           })
         }),
-        /* @__PURE__ */ t(ea, {
+        /* @__PURE__ */ n(fo, {
           current: e.size,
-          isOpen: u === "size",
-          onOpenChange: (b) => h(b ? "size" : null),
-          onPick: (b) => {
-            g({ size: b }), h(null);
+          isOpen: d === "size",
+          onOpenChange: (S) => h(S ? "size" : null),
+          onPick: (S) => {
+            g({ size: S }), h(null);
           }
         }),
-        /* @__PURE__ */ t(F.Separator, {}),
-        /* @__PURE__ */ t(F.Button, {
+        /* @__PURE__ */ n(X.Separator, {}),
+        /* @__PURE__ */ n(X.Button, {
           "aria-label": l("graph.annotations.differenceArrowToolbar.swap"),
-          className: Ke,
+          className: Je,
           onClick: () => g({
             start: e.end.anchor,
             end: e.start.anchor
           }),
-          children: /* @__PURE__ */ t(_r, {
+          children: /* @__PURE__ */ n(ja, {
             size: "sm",
             title: ""
           })
         }),
-        /* @__PURE__ */ t(F.Button, {
+        /* @__PURE__ */ n(X.Button, {
           "aria-label": l("graph.annotations.differenceArrowToolbar.remove"),
-          className: Ke,
-          onClick: S,
-          children: /* @__PURE__ */ t(Rr, {
+          className: Je,
+          onClick: I,
+          children: /* @__PURE__ */ n(Ya, {
             size: "sm",
             title: ""
           })
@@ -1086,22 +1086,22 @@ var Ke = "q7gcrzd q7gcrzc", yt = "q7gcrze q7gcrzc", $r = [
       ]
     })
   });
-}, Jr = ({ options: e, current: n, isOpen: r, onOpenChange: o, onPick: a }) => {
-  const i = A(), l = e.find((s) => s.kind === n), c = e.some((s) => s.isPickable && s.kind !== n);
-  return /* @__PURE__ */ p(I.Root, {
-    open: r,
+}, vo = ({ options: e, current: t, isOpen: i, onOpenChange: r, onPick: a }) => {
+  const o = T(), l = e.find((s) => s.kind === t), c = e.some((s) => s.isPickable && s.kind !== t);
+  return /* @__PURE__ */ p(k.Root, {
+    open: i,
     modal: !1,
-    onOpenChange: o,
-    children: [/* @__PURE__ */ p(I.Trigger, {
-      render: /* @__PURE__ */ t(F.Button, {}),
-      "aria-label": i("graph.annotations.differenceArrowToolbar.labelKind.ariaLabel"),
-      className: yt,
+    onOpenChange: r,
+    children: [/* @__PURE__ */ p(k.Trigger, {
+      render: /* @__PURE__ */ n(X.Button, {}),
+      "aria-label": o("graph.annotations.differenceArrowToolbar.labelKind.ariaLabel"),
+      className: Un,
       disabled: !c,
       onMouseDown: (s) => s.preventDefault(),
       children: [
-        /* @__PURE__ */ t("span", {
-          className: Br,
-          children: l === void 0 ? "" : i(l.nameKey)
+        /* @__PURE__ */ n("span", {
+          className: ro,
+          children: l === void 0 ? "" : o(l.nameKey)
         }),
         l !== void 0 && /* @__PURE__ */ p("span", {
           className: "q7gcrz4",
@@ -1111,176 +1111,176 @@ var Ke = "q7gcrzd q7gcrzc", yt = "q7gcrze q7gcrzc", $r = [
             ")"
           ]
         }),
-        /* @__PURE__ */ t(me, { size: "sm" })
+        /* @__PURE__ */ n(Se, { size: "sm" })
       ]
-    }), /* @__PURE__ */ t(wt, { children: e.map((s) => /* @__PURE__ */ p(I.Item, {
-      className: St,
-      "data-selected": s.kind === n,
+    }), /* @__PURE__ */ n(qn, { children: e.map((s) => /* @__PURE__ */ p(k.Item, {
+      className: Bn,
+      "data-selected": s.kind === t,
       disabled: !s.isPickable,
       onClick: () => a(s.kind),
       children: [
-        /* @__PURE__ */ t("span", { children: i(s.nameKey) }),
-        (s.isSuspect || !s.isPickable) && /* @__PURE__ */ t("span", {
-          "aria-label": i(s.isPickable ? "graph.annotations.differenceArrowToolbar.labelKind.suspectValue" : "graph.annotations.differenceArrowToolbar.labelKind.incomparableEnds"),
+        /* @__PURE__ */ n("span", { children: o(s.nameKey) }),
+        (s.isSuspect || !s.isPickable) && /* @__PURE__ */ n("span", {
+          "aria-label": o(s.isPickable ? "graph.annotations.differenceArrowToolbar.labelKind.suspectValue" : "graph.annotations.differenceArrowToolbar.labelKind.incomparableEnds"),
           className: "q7gcrzb",
           role: "img",
           children: "⚠"
         }),
-        /* @__PURE__ */ t("span", {
-          className: Ur,
+        /* @__PURE__ */ n("span", {
+          className: lo,
           children: s.preview
         })
       ]
     }, s.kind)) })]
   });
-}, ea = ({ current: e, isOpen: n, onOpenChange: r, onPick: o }) => {
-  const a = A(), i = fe.find((l) => l.id === e) ?? fe[0];
-  return /* @__PURE__ */ p(I.Root, {
-    open: n,
+}, fo = ({ current: e, isOpen: t, onOpenChange: i, onPick: r }) => {
+  const a = T(), o = xe.find((l) => l.id === e) ?? xe[0];
+  return /* @__PURE__ */ p(k.Root, {
+    open: t,
     modal: !1,
-    onOpenChange: r,
-    children: [/* @__PURE__ */ p(I.Trigger, {
-      render: /* @__PURE__ */ t(F.Button, {}),
+    onOpenChange: i,
+    children: [/* @__PURE__ */ p(k.Trigger, {
+      render: /* @__PURE__ */ n(X.Button, {}),
       "aria-label": a("graph.annotations.differenceArrowToolbar.size.ariaLabel"),
-      className: yt,
+      className: Un,
       onMouseDown: (l) => l.preventDefault(),
-      children: [/* @__PURE__ */ t("span", { children: i === void 0 ? "" : a(i.nameKey) }), /* @__PURE__ */ t(me, { size: "sm" })]
-    }), /* @__PURE__ */ t(wt, { children: fe.map((l) => /* @__PURE__ */ t(I.Item, {
-      className: St,
+      children: [/* @__PURE__ */ n("span", { children: o === void 0 ? "" : a(o.nameKey) }), /* @__PURE__ */ n(Se, { size: "sm" })]
+    }), /* @__PURE__ */ n(qn, { children: xe.map((l) => /* @__PURE__ */ n(k.Item, {
+      className: Bn,
       "data-selected": l.id === e,
-      onClick: () => o(l.id),
+      onClick: () => r(l.id),
       children: a(l.nameKey)
     }, l.id)) })]
   });
-}, wt = ({ children: e }) => {
-  const { chartId: n } = E();
-  return /* @__PURE__ */ t(I.Portal, {
-    container: xe(),
-    children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(I.Positioner, {
+}, qn = ({ children: e }) => {
+  const { chartId: t } = B();
+  return /* @__PURE__ */ n(k.Portal, {
+    container: ke(),
+    children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(k.Positioner, {
       side: "bottom",
       align: "start",
       sideOffset: 6,
-      className: Vr,
-      children: /* @__PURE__ */ t(I.Popup, {
-        className: Gr,
-        onMouseDown: (r) => r.preventDefault(),
-        ...he(n),
+      className: oo,
+      children: /* @__PURE__ */ n(k.Popup, {
+        className: io,
+        onMouseDown: (i) => i.preventDefault(),
+        ...Ce(t),
         children: e
       })
     }) })
   });
 };
-var ta = "ydgo3h0", na = "ydgo3h1", ra = "ydgo3h2", xt = (e) => e === "start" ? "end" : "start", It = ({ dispatch: e, arrow: n, endpoint: r, anchor: o }) => {
-  nt(o, n[r].anchor) || e(new tt({
+var bo = "ydgo3h0", Co = "ydgo3h1", So = "ydgo3h2", Wn = (e) => e === "start" ? "end" : "start", $n = ({ dispatch: e, arrow: t, endpoint: i, anchor: r }) => {
+  Pn(r, t[i].anchor) || e(new wn({
     kind: "differenceArrow",
-    id: n.id,
-    patch: { [r]: o }
+    id: t.id,
+    patch: { [i]: r }
   }));
-}, aa = ({ clientPoint: e, panelOrigin: n, panelRect: r, engine: o, layers: a, coordSystem: i, resolver: l, fixedAnchor: c, align: s }) => {
-  const d = oa({
-    x: e.x - n.x,
-    y: e.y - n.y
-  }, r), { primary: u } = o.query(Ae(d, r));
-  if (u === null) return null;
-  const h = a.find((m) => m.id === u.layerId);
+}, yo = ({ clientPoint: e, panelOrigin: t, panelRect: i, engine: r, layers: a, coordSystem: o, resolver: l, fixedAnchor: c, align: s }) => {
+  const u = wo({
+    x: e.x - t.x,
+    y: e.y - t.y
+  }, i), { primary: d } = r.query(De(u, i));
+  if (d === null) return null;
+  const h = a.find((m) => m.id === d.layerId);
   if (h === void 0) return null;
-  const v = Se({
+  const v = Ne({
     resolver: l,
     layer: h,
-    observation: u.observation,
-    coordSystem: i,
+    observation: d.observation,
+    coordSystem: o,
     align: s
   });
-  return v === null || nt(v.anchor, c) ? null : v;
-}, oa = (e, n) => ({
-  x: Math.max(0, Math.min(e.x, n.width)),
-  y: Math.max(0, Math.min(e.y, n.height))
-}), ia = class {
+  return v === null || Pn(v.anchor, c) ? null : v;
+}, wo = (e, t) => ({
+  x: Math.max(0, Math.min(e.x, t.width)),
+  y: Math.max(0, Math.min(e.y, t.height))
+}), Po = class {
   constructor(e) {
-    this.params = e, this.listeners = new AbortController(), this.pendingEvent = null, this.scheduledFrame = null, this.hasMoved = !1, this.hasPublished = !1, this.handleMove = (n) => {
-      n.pointerId === this.params.pointerId && (this.pendingEvent = n, this.hasMoved = !0, this.scheduledFrame === null && (this.scheduledFrame = requestAnimationFrame(this.runFrame)));
-    }, this.handleUp = (n) => {
-      n.pointerId === this.params.pointerId && (this.pendingEvent = n, this.finish(!0));
-    }, this.handleLost = (n) => {
-      n.pointerId === this.params.pointerId && this.finish(!1);
+    this.params = e, this.listeners = new AbortController(), this.pendingEvent = null, this.scheduledFrame = null, this.hasMoved = !1, this.hasPublished = !1, this.handleMove = (t) => {
+      t.pointerId === this.params.pointerId && (this.pendingEvent = t, this.hasMoved = !0, this.scheduledFrame === null && (this.scheduledFrame = requestAnimationFrame(this.runFrame)));
+    }, this.handleUp = (t) => {
+      t.pointerId === this.params.pointerId && (this.pendingEvent = t, this.finish(!0));
+    }, this.handleLost = (t) => {
+      t.pointerId === this.params.pointerId && this.finish(!1);
     }, this.runFrame = () => {
       this.scheduledFrame = null;
-      const n = this.pendingEvent;
-      if (this.pendingEvent = null, n === null) return;
-      const { editorStore: r, engine: o, anchorResolver: a, endpoint: i, readInputs: l } = this.params, { arrow: c, panelOrigin: s, panelRect: d, layers: u, coordSystem: h } = l(), v = r.getState();
-      if (this.hasPublished && Ce(se(v, "endpoint-drag"), c.id, i) === null) return;
-      const m = aa({
+      const t = this.pendingEvent;
+      if (this.pendingEvent = null, t === null) return;
+      const { editorStore: i, engine: r, anchorResolver: a, endpoint: o, readInputs: l } = this.params, { arrow: c, panelOrigin: s, panelRect: u, layers: d, coordSystem: h } = l(), v = i.getState();
+      if (this.hasPublished && Ae(ge(v, "endpoint-drag"), c.id, o) === null) return;
+      const m = yo({
         clientPoint: {
-          x: n.clientX,
-          y: n.clientY
+          x: t.clientX,
+          y: t.clientY
         },
         panelOrigin: s,
-        panelRect: d,
-        engine: o,
-        layers: u,
+        panelRect: u,
+        engine: r,
+        layers: d,
         coordSystem: h,
         resolver: a,
-        fixedAnchor: c[xt(i)].anchor,
-        align: c[i].anchor.align
+        fixedAnchor: c[Wn(o)].anchor,
+        align: c[o].anchor.align
       });
       m !== null && this.publish(m);
     };
   }
   start() {
-    const { handle: e } = this.params, { signal: n } = this.listeners;
-    e.addEventListener("pointermove", this.handleMove, { signal: n }), e.addEventListener("pointerup", this.handleUp, { signal: n }), e.addEventListener("lostpointercapture", this.handleLost, { signal: n });
+    const { handle: e } = this.params, { signal: t } = this.listeners;
+    e.addEventListener("pointermove", this.handleMove, { signal: t }), e.addEventListener("pointerup", this.handleUp, { signal: t }), e.addEventListener("lostpointercapture", this.handleLost, { signal: t });
   }
   finish(e) {
     this.params.onSettled(), this.listeners.abort(), this.cancelFrame(), e && this.hasMoved && this.runFrame(), this.pendingEvent = null;
-    const { editorStore: n, endpoint: r, readInputs: o, dispatch: a } = this.params, { arrow: i } = o(), l = n.getState(), c = Ce(se(l, "endpoint-drag"), i.id, r);
-    c !== null && (l.releaseInteraction("endpoint-drag"), e && It({
+    const { editorStore: t, endpoint: i, readInputs: r, dispatch: a } = this.params, { arrow: o } = r(), l = t.getState(), c = Ae(ge(l, "endpoint-drag"), o.id, i);
+    c !== null && (l.releaseInteraction("endpoint-drag"), e && $n({
       dispatch: a,
-      arrow: i,
-      endpoint: r,
+      arrow: o,
+      endpoint: i,
       anchor: c.point.anchor
     }));
   }
   publish(e) {
-    const { editorStore: n, readInputs: r, endpoint: o } = this.params;
-    n.getState().claimInteraction({
+    const { editorStore: t, readInputs: i, endpoint: r } = this.params;
+    t.getState().claimInteraction({
       kind: "endpoint-drag",
-      annotationId: r().arrow.id,
-      endpoint: o,
+      annotationId: i().arrow.id,
+      endpoint: r,
       point: e
     }), this.hasPublished = !0;
   }
   cancelFrame() {
     this.scheduledFrame !== null && (cancelAnimationFrame(this.scheduledFrame), this.scheduledFrame = null);
   }
-}, la = ({ arrow: e, panelOrigin: n, panelRect: r }) => {
-  const { commands: o, anchorResolver: a } = E(), { engine: i } = Ie(), l = _(), c = ee({
+}, Io = ({ arrow: e, panelOrigin: t, panelRect: i }) => {
+  const { commands: r, anchorResolver: a } = B(), { engine: o } = _e(), l = W(), c = se({
     arrow: e,
-    panelOrigin: n,
-    panelRect: r,
-    ...L(Ne((d) => ({
-      layers: d.layers,
-      coordSystem: d.coordSystem
+    panelOrigin: t,
+    panelRect: i,
+    ...G(ze((u) => ({
+      layers: u.layers,
+      coordSystem: u.coordSystem
     })))
-  }), s = ue(null);
-  return T(() => () => s.current?.finish(!1), []), de((d) => ({
-    onClick: (u) => u.stopPropagation(),
-    onPointerDown: (u) => {
-      if (u.button !== 0 || s.current !== null) return;
+  }), s = be(null);
+  return z(() => () => s.current?.finish(!1), []), fe((u) => ({
+    onClick: (d) => d.stopPropagation(),
+    onPointerDown: (d) => {
+      if (d.button !== 0 || s.current !== null) return;
       try {
-        u.currentTarget.setPointerCapture(u.pointerId);
+        d.currentTarget.setPointerCapture(d.pointerId);
       } catch {
         return;
       }
-      u.currentTarget.focus({ preventScroll: !0 }), u.preventDefault();
-      const h = new ia({
-        handle: u.currentTarget,
-        pointerId: u.pointerId,
-        endpoint: d,
+      d.currentTarget.focus({ preventScroll: !0 }), d.preventDefault();
+      const h = new Po({
+        handle: d.currentTarget,
+        pointerId: d.pointerId,
+        endpoint: u,
         readInputs: () => c.current,
         editorStore: l,
-        engine: i,
+        engine: o,
         anchorResolver: a,
-        dispatch: o.dispatch,
+        dispatch: r.dispatch,
         onSettled: () => {
           s.current = null;
         }
@@ -1290,32 +1290,32 @@ var ta = "ydgo3h0", na = "ydgo3h1", ra = "ydgo3h2", xt = (e) => e === "start" ?
   }), [
     c,
     l,
-    i,
+    o,
     a,
-    o
+    r
   ]);
-}, sa = [" ", "Enter"], ca = ({ arrow: e }) => {
-  const { commands: n, anchorResolver: r } = E(), o = _(), { layers: a, coordSystem: i, mainAxis: l } = L(Ne((s) => ({
+}, xo = [" ", "Enter"], To = ({ arrow: e }) => {
+  const { commands: t, anchorResolver: i } = B(), r = W(), { layers: a, coordSystem: o, mainAxis: l } = G(ze((s) => ({
     layers: s.layers,
     coordSystem: s.coordSystem,
     mainAxis: s.coordSystem.type === "cartesian" ? s.coordSystem.mainAxis : "x"
   }))), c = e.id;
-  return T(() => () => {
-    const s = o.getState();
-    se(s, "endpoint-drag")?.annotationId === c && s.releaseInteraction("endpoint-drag");
-  }, [o, c]), de((s) => ({ onKeyDown: (d) => {
-    if (d.altKey || d.ctrlKey || d.metaKey || d.shiftKey) return;
-    const u = o.getState(), h = Ce(se(u, "endpoint-drag"), e.id, s);
-    if (sa.includes(d.key)) {
-      if (d.preventDefault(), d.repeat) return;
-      if (h === null) return u.claimInteraction({
+  return z(() => () => {
+    const s = r.getState();
+    ge(s, "endpoint-drag")?.annotationId === c && s.releaseInteraction("endpoint-drag");
+  }, [r, c]), fe((s) => ({ onKeyDown: (u) => {
+    if (u.altKey || u.ctrlKey || u.metaKey || u.shiftKey) return;
+    const d = r.getState(), h = Ae(ge(d, "endpoint-drag"), e.id, s);
+    if (xo.includes(u.key)) {
+      if (u.preventDefault(), u.repeat) return;
+      if (h === null) return d.claimInteraction({
         kind: "endpoint-drag",
         annotationId: e.id,
         endpoint: s,
         point: e[s]
       });
-      u.releaseInteraction("endpoint-drag"), It({
-        dispatch: n.dispatch,
+      d.releaseInteraction("endpoint-drag"), $n({
+        dispatch: t.dispatch,
         arrow: e,
         endpoint: s,
         anchor: h.point.anchor
@@ -1323,19 +1323,19 @@ var ta = "ydgo3h0", na = "ydgo3h1", ra = "ydgo3h2", xt = (e) => e === "start" ?
       return;
     }
     if (h === null) return;
-    const v = da(d.key, l);
+    const v = Ao(u.key, l);
     if (v === null) return;
-    d.preventDefault();
-    const m = ua({
+    u.preventDefault();
+    const m = Lo({
       arrow: e,
       endpoint: s,
       from: h.point.anchor,
       move: v,
       layers: a,
-      coordSystem: i,
-      resolver: r
+      coordSystem: o,
+      resolver: i
     });
-    m !== null && u.claimInteraction({
+    m !== null && d.claimInteraction({
       kind: "endpoint-drag",
       annotationId: e.id,
       endpoint: s,
@@ -1343,226 +1343,226 @@ var ta = "ydgo3h0", na = "ydgo3h1", ra = "ydgo3h2", xt = (e) => e === "start" ?
     });
   } }), [
     e,
-    o,
-    n,
     r,
-    a,
+    t,
     i,
+    a,
+    o,
     l
   ]);
-}, da = (e, n) => {
-  const r = e === "ArrowUp" || e === "ArrowDown";
-  return !r && !(e === "ArrowLeft" || e === "ArrowRight") ? null : {
-    axis: n === "x" === r ? "cross" : "main",
+}, Ao = (e, t) => {
+  const i = e === "ArrowUp" || e === "ArrowDown";
+  return !i && !(e === "ArrowLeft" || e === "ArrowRight") ? null : {
+    axis: t === "x" === i ? "cross" : "main",
     step: e === "ArrowDown" || e === "ArrowRight" ? 1 : -1
   };
-}, ua = ({ arrow: e, endpoint: n, from: r, move: o, layers: a, coordSystem: i, resolver: l }) => {
-  const c = a.find((d) => d.id === r.layerId);
+}, Lo = ({ arrow: e, endpoint: t, from: i, move: r, layers: a, coordSystem: o, resolver: l }) => {
+  const c = a.find((u) => u.id === i.layerId);
   if (c === void 0) return null;
-  const s = Dn({
+  const s = Qr({
     layer: c,
-    from: r,
-    partner: e[xt(n)].anchor,
-    axis: o.axis,
-    step: o.step,
-    canLandOn: (d) => Se({
+    from: i,
+    partner: e[Wn(t)].anchor,
+    axis: r.axis,
+    step: r.step,
+    canLandOn: (u) => Ne({
       resolver: l,
       layer: c,
-      observation: d,
-      coordSystem: i,
-      align: e[n].anchor.align
+      observation: u,
+      coordSystem: o,
+      align: e[t].anchor.align
     }) !== null
   });
-  return s === null ? null : Se({
+  return s === null ? null : Ne({
     resolver: l,
     layer: c,
     observation: s.observation,
-    coordSystem: i,
-    align: e[n].anchor.align
+    coordSystem: o,
+    align: e[t].anchor.align
   });
-}, ha = (e) => {
-  const n = kr();
-  return n === null ? null : /* @__PURE__ */ t(ma, {
-    annotationId: n,
+}, No = (e) => {
+  const t = Xa();
+  return t === null ? null : /* @__PURE__ */ n(Oo, {
+    annotationId: t,
     ...e
   });
-}, ma = ({ annotationId: e, ...n }) => {
-  const r = Wt(), o = P(() => r.find((a) => a.id === e), [r, e]);
-  return o === void 0 ? null : /* @__PURE__ */ t(pa, {
-    committedArrow: o.committedArrow,
-    committedLabelBox: o.committedLabelBox,
-    labelBox: o.labelBox,
-    start: o.start,
-    end: o.end,
-    isDragged: o.isDragged,
-    ...n
+}, Oo = ({ annotationId: e, ...t }) => {
+  const i = Lt(), r = O(() => i.find((a) => a.id === e), [i, e]);
+  return r === void 0 ? null : /* @__PURE__ */ n(Eo, {
+    committedArrow: r.committedArrow,
+    committedLabelBox: r.committedLabelBox,
+    labelBox: r.labelBox,
+    start: r.start,
+    end: r.end,
+    isDragged: r.isDragged,
+    ...t
   });
-}, pa = ({ committedArrow: e, committedLabelBox: n, labelBox: r, start: o, end: a, panelRect: i, panelOrigin: l, frameRect: c, frameElement: s, isDragged: d }) => {
-  const u = la({
+}, Eo = ({ committedArrow: e, committedLabelBox: t, labelBox: i, start: r, end: a, panelRect: o, panelOrigin: l, frameRect: c, frameElement: s, isDragged: u }) => {
+  const d = Io({
     arrow: e,
     panelOrigin: l,
-    panelRect: i
-  }), h = ca({ arrow: e });
+    panelRect: o
+  }), h = To({ arrow: e });
   return /* @__PURE__ */ p("div", {
     "data-testid": "difference-arrow-selection",
     children: [
-      !d && /* @__PURE__ */ t(Qr, {
+      !u && /* @__PURE__ */ n(go, {
         arrow: e,
-        labelBox: n,
-        panelRect: i,
+        labelBox: t,
+        panelRect: o,
         frameWidth: c.width,
         frameHeight: c.height,
         frameElement: s
       }),
-      /* @__PURE__ */ t("div", {
+      /* @__PURE__ */ n("div", {
         "aria-hidden": "true",
-        className: ra,
+        className: So,
         "data-testid": "difference-arrow-selection-label",
         style: {
-          left: i.x + r.x - 2,
-          top: i.y + r.y - 2,
-          width: r.width + 4,
-          height: r.height + 4
+          left: o.x + i.x - 2,
+          top: o.y + i.y - 2,
+          width: i.width + 4,
+          height: i.height + 4
         }
       }),
-      /* @__PURE__ */ t(Be, {
+      /* @__PURE__ */ n(nn, {
         endpoint: "start",
-        point: o,
-        panelRect: i,
-        dragHandlers: u("start"),
+        point: r,
+        panelRect: o,
+        dragHandlers: d("start"),
         keyboardHandlers: h("start")
       }),
-      /* @__PURE__ */ t(Be, {
+      /* @__PURE__ */ n(nn, {
         endpoint: "end",
         point: a,
-        panelRect: i,
-        dragHandlers: u("end"),
+        panelRect: o,
+        dragHandlers: d("end"),
         keyboardHandlers: h("end")
       })
     ]
   });
-}, Be = ({ endpoint: e, point: n, panelRect: r, dragHandlers: o, keyboardHandlers: a }) => /* @__PURE__ */ t("div", {
-  className: ta,
+}, nn = ({ endpoint: e, point: t, panelRect: i, dragHandlers: r, keyboardHandlers: a }) => /* @__PURE__ */ n("div", {
+  className: bo,
   "data-testid": "difference-arrow-selection-handle",
   "data-endpoint": e,
   role: "button",
   style: {
-    left: r.x + n.x,
-    top: r.y + n.y
+    left: i.x + t.x,
+    top: i.y + t.y
   },
   tabIndex: 0,
-  ...o,
+  ...r,
   ...a,
-  children: /* @__PURE__ */ t("span", {
+  children: /* @__PURE__ */ n("span", {
     "aria-hidden": "true",
-    className: na
+    className: Co
   })
-}), va = (e) => /* @__PURE__ */ t(N, {
+}), _o = (e) => /* @__PURE__ */ n(M, {
   ...e,
   children: /* @__PURE__ */ p("g", {
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: [/* @__PURE__ */ t("path", { d: "M12 5v14" }), /* @__PURE__ */ t("path", { d: "M5 12h14" })]
+    children: [/* @__PURE__ */ n("path", { d: "M12 5v14" }), /* @__PURE__ */ n("path", { d: "M5 12h14" })]
   })
-}), ga = "var(--_1tyillx0)", fa = {
+}), ko = "var(--_1tyillx0)", Mo = {
   rest: 0.5,
   hovered: 0.75,
   open: 1
 };
-var ba = "_1tyillx1", Ca = {
+var Ro = "_1tyillx1", Do = {
   rest: "_1tyillx2",
   hovered: "_1tyillx3",
   open: "_1tyillx4"
-}, Sa = "_1tyillx5", ya = {
+}, zo = "_1tyillx5", Fo = {
   closed: "_1tyillx6",
   open: "_1tyillx7"
-}, wa = ({ interaction: e, panelRect: n }) => {
-  const r = _(), o = L((c) => c.coordSystem), a = e.kind === "trigger" || e.kind === "menu" ? e.anchor : null, i = xa(e), l = P(() => {
+}, Ho = ({ interaction: e, panelRect: t }) => {
+  const i = W(), r = G((c) => c.coordSystem), a = e.kind === "trigger" || e.kind === "menu" ? e.anchor : null, o = Vo(e), l = O(() => {
     if (a === null) return null;
-    const c = Rn(a.position, n, o);
+    const c = Xr(a.position, t, r);
     return {
       center: c,
-      radius: 19 * fa[i],
+      radius: 19 * Mo[o],
       target: {
         kind: "observation",
-        cursor: Ae(c, n)
+        cursor: De(c, t)
       }
     };
   }, [
     a,
-    n,
-    o,
-    i
+    t,
+    r,
+    o
   ]);
-  return T(() => {
-    r.getState().setMenuTrigger(l);
-  }, [r, l]), T(() => () => r.getState().setMenuTrigger(null), [r]), a === null || l === null ? null : /* @__PURE__ */ t("div", {
+  return z(() => {
+    i.getState().setMenuTrigger(l);
+  }, [i, l]), z(() => () => i.getState().setMenuTrigger(null), [i]), a === null || l === null ? null : /* @__PURE__ */ n("div", {
     "aria-hidden": "true",
     "data-testid": "observation-menu-trigger",
-    "data-state": i,
-    className: W(ba, Ca[i]),
+    "data-state": o,
+    className: re(Ro, Do[o]),
     style: {
-      left: n.x + l.center.x,
-      top: n.y + l.center.y,
-      ...at({ [ga]: a.color ?? rn.border50 })
+      left: t.x + l.center.x,
+      top: t.y + l.center.y,
+      ...An({ [ko]: a.color ?? zt.border50 })
     },
-    children: /* @__PURE__ */ t("span", {
-      className: W(Sa, ya[i === "open" ? "open" : "closed"]),
-      children: /* @__PURE__ */ t(va, { size: "lg" })
+    children: /* @__PURE__ */ n("span", {
+      className: re(zo, Fo[o === "open" ? "open" : "closed"]),
+      children: /* @__PURE__ */ n(_o, { size: "lg" })
     })
   });
-}, xa = (e) => e.kind === "menu" ? "open" : e.kind === "trigger" && e.isEngaged ? "hovered" : "rest", Ia = 'button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', Pa = (e, n) => {
-  const { chartId: r } = E(), o = _();
-  T(() => {
-    if (n === null) return;
-    const a = (i) => {
-      if (i.key !== "Tab" || i.defaultPrevented || !te(i.target, e, r) || o.getState().standingInteraction?.kind === "chrome-popup") return;
-      const l = [...n.querySelectorAll(Ia)];
+}, Vo = (e) => e.kind === "menu" ? "open" : e.kind === "trigger" && e.isEngaged ? "hovered" : "rest", Ko = 'button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', Go = (e, t) => {
+  const { chartId: i } = B(), r = W();
+  z(() => {
+    if (t === null) return;
+    const a = (o) => {
+      if (o.key !== "Tab" || o.defaultPrevented || !ce(o.target, e, i) || r.getState().standingInteraction?.kind === "chrome-popup") return;
+      const l = [...t.querySelectorAll(Ko)];
       if (l.length === 0) return;
-      i.preventDefault();
+      o.preventDefault();
       const c = l.findIndex((s) => s === document.activeElement);
-      l[c === -1 ? i.shiftKey ? l.length - 1 : 0 : (c + (i.shiftKey ? -1 : 1) + l.length) % l.length]?.focus();
+      l[c === -1 ? o.shiftKey ? l.length - 1 : 0 : (c + (o.shiftKey ? -1 : 1) + l.length) % l.length]?.focus();
     };
     return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
   }, [
     e,
-    n,
-    r,
-    o
+    t,
+    i,
+    r
   ]);
-}, Aa = (e) => {
-  const { selectionStore: n, chartId: r } = E();
-  T(() => {
-    let o = null;
+}, Bo = (e) => {
+  const { selectionStore: t, chartId: i } = B();
+  z(() => {
+    let r = null;
     const a = () => {
       e.focus({ preventScroll: !0 });
-    }, i = (c) => {
-      const { selection: s, clearSelection: d } = n.getState();
-      s.length !== 0 && (te(c.target, e, r) || d());
+    }, o = (c) => {
+      const { selection: s, clearSelection: u } = t.getState();
+      s.length !== 0 && (ce(c.target, e, i) || u());
     }, l = (c) => {
-      n.getState().selection.length !== 0 && te(c.target, e, r) && c.relatedTarget === null && (o !== null && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
-        o = null, document.hasFocus() && (te(document.activeElement, e, r) || n.getState().clearSelection());
+      t.getState().selection.length !== 0 && ce(c.target, e, i) && c.relatedTarget === null && (r !== null && cancelAnimationFrame(r), r = requestAnimationFrame(() => {
+        r = null, document.hasFocus() && (ce(document.activeElement, e, i) || t.getState().clearSelection());
       }));
     };
-    return e.addEventListener("pointerdown", a), document.addEventListener("focusin", i), document.addEventListener("focusout", l), () => {
-      o !== null && cancelAnimationFrame(o), e.removeEventListener("pointerdown", a), document.removeEventListener("focusin", i), document.removeEventListener("focusout", l);
+    return e.addEventListener("pointerdown", a), document.addEventListener("focusin", o), document.addEventListener("focusout", l), () => {
+      r !== null && cancelAnimationFrame(r), e.removeEventListener("pointerdown", a), document.removeEventListener("focusin", o), document.removeEventListener("focusout", l);
     };
   }, [
     e,
-    n,
-    r
+    t,
+    i
   ]);
-}, Na = (e) => {
-  const { selectionStore: n, commands: r, chartId: o } = E(), a = _(), i = de((c) => {
-    const { selection: s } = n.getState(), d = Ct(s);
-    d !== null && (c.preventDefault(), r.dispatch(new Pe({ id: d })), e.focus({ preventScroll: !0 }));
+}, Uo = (e) => {
+  const { selectionStore: t, commands: i, chartId: r } = B(), a = W(), o = fe((c) => {
+    const { selection: s } = t.getState(), u = Gn(s);
+    u !== null && (c.preventDefault(), i.dispatch(new Re({ id: u })), e.focus({ preventScroll: !0 }));
   }, [
     e,
-    r,
-    n
-  ]), l = de((c) => {
+    i,
+    t
+  ]), l = fe((c) => {
     const s = a.getState();
     switch (s.standingInteraction?.kind) {
       case "endpoint-drag":
@@ -1574,28 +1574,28 @@ var ba = "_1tyillx1", Ca = {
         s.releaseInteraction("menu");
         return;
       default:
-        if (st(c.target, o)) {
+        if (En(c.target, r)) {
           e.focus({ preventScroll: !0 });
           return;
         }
-        n.getState().clearSelection();
+        t.getState().clearSelection();
         return;
     }
   }, [
     a,
-    n,
+    t,
     e,
-    o
+    r
   ]);
-  T(() => {
+  z(() => {
     const c = (s) => {
-      if (te(s.target, e, o) && !Ta(s.target) && !Bn(s.target))
+      if (ce(s.target, e, r) && !qo(s.target) && !ra(s.target))
         switch (s.key) {
           case "Escape":
             return l(s);
           case "Delete":
           case "Backspace":
-            return i(s);
+            return o(s);
           default:
             return;
         }
@@ -1603,1023 +1603,1078 @@ var ba = "_1tyillx1", Ca = {
     return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
   }, [
     e,
-    i,
+    o,
     l,
-    o
+    r
   ]);
-}, Ta = (e) => e instanceof HTMLElement && (e.isContentEditable || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement), Oa = `[${Qe}]`, Pt = (e, n, r) => {
+}, qo = (e) => e instanceof HTMLElement && (e.isContentEditable || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement), Wo = `[${Cn}]`, Zn = (e, t, i) => {
   if (typeof document.elementsFromPoint != "function") return null;
-  const o = document.elementsFromPoint(e, n);
-  return La(o, r);
-}, La = (e, n) => {
-  for (const r of e) {
-    const o = r.closest(Oa);
-    if (o === null || !n.contains(o)) continue;
-    const a = Ea(o);
+  const r = document.elementsFromPoint(e, t);
+  return $o(r, i);
+}, $o = (e, t) => {
+  for (const i of e) {
+    const r = i.closest(Wo);
+    if (r === null || !t.contains(r)) continue;
+    const a = Zo(r);
     if (a !== null) return a;
   }
   return null;
-}, Ea = (e) => {
-  const n = e.getAttribute(Qe);
-  if (n !== "annotation") return null;
-  const r = e.getAttribute(Qt);
-  return r === null || r === "" ? null : {
-    kind: n,
-    id: r
+}, Zo = (e) => {
+  const t = e.getAttribute(Cn);
+  if (t !== "annotation") return null;
+  const i = e.getAttribute(_t);
+  return i === null || i === "" ? null : {
+    kind: t,
+    id: i
   };
-}, Ma = () => {
-  const e = Ut((a) => a.hover.primary), { layers: n, coordSystem: r } = L(Ne((a) => ({
+}, Xo = () => {
+  const e = Pt((a) => a.hover.primary), { layers: t, coordSystem: i } = G(ze((a) => ({
     layers: a.layers,
     coordSystem: a.coordSystem
-  }))), { anchorResolver: o } = E();
-  return P(() => {
+  }))), { anchorResolver: r } = B();
+  return O(() => {
     if (e === null) return null;
-    const a = n.find((c) => c.id === e.layerId);
+    const a = t.find((c) => c.id === e.layerId);
     if (a === void 0) return null;
-    const i = o.resolve(a.geom, e.observation, {
-      coordSystem: r,
+    const o = r.resolve(a.geom, e.observation, {
+      coordSystem: i,
       position: a.position,
       purpose: "pin"
     });
-    if (i === null) return null;
-    const l = xn(a, e.observation);
+    if (o === null) return null;
+    const l = kr(a, e.observation);
     return l === null ? null : {
-      position: i,
-      color: Ln(e.observation),
+      position: o,
+      color: Ur(e.observation),
       layer: a,
       at: l,
       observation: e.observation
     };
   }, [
     e,
-    n,
-    r,
-    o
+    t,
+    i,
+    r
   ]);
-}, ka = { kind: "idle" }, At = () => {
-  const e = ce((o) => o.standingInteraction), n = ce((o) => o.chromeUnderPointer), r = Ma();
-  return P(() => e !== null ? e : r === null ? ka : {
+}, jo = { kind: "idle" }, Xn = () => {
+  const e = ve((r) => r.standingInteraction), t = ve((r) => r.chromeUnderPointer), i = Xo();
+  return O(() => e !== null ? e : i === null ? jo : {
     kind: "trigger",
-    anchor: r,
-    isEngaged: n === "menu-trigger"
+    anchor: i,
+    isEngaged: t === "menu-trigger"
   }, [
     e,
-    r,
-    n
+    i,
+    t
   ]);
-}, _a = (e, n) => {
-  const r = _(), o = ee(n);
-  T(() => {
-    let a = null, i = null;
+}, Yo = (e, t) => {
+  const i = W(), r = se(t);
+  z(() => {
+    let a = null, o = null;
     const l = (h) => {
-      const { menuTrigger: v } = r.getState();
-      return v === null ? null : rt(h, v) ? "menu-trigger" : null;
+      const { menuTrigger: v } = i.getState();
+      return v === null ? null : Tn(h, v) ? "menu-trigger" : null;
     }, c = () => {
       a = null;
-      const h = i;
-      if (i = null, h === null) return;
-      const v = o.current, m = r.getState();
+      const h = o;
+      if (o = null, h === null) return;
+      const v = r.current, m = i.getState();
       m.setChromeUnderPointer(l({
         x: h.x - v.x,
         y: h.y - v.y
-      })), m.standingInteraction?.kind !== "menu" && m.setEditTargetUnderPointer(Pt(h.x, h.y, e));
+      })), m.standingInteraction?.kind !== "menu" && m.setEditTargetUnderPointer(Zn(h.x, h.y, e));
     }, s = () => {
-      const h = r.getState();
+      const h = i.getState();
       h.setChromeUnderPointer(null), h.setEditTargetUnderPointer(null);
-    }, d = (h) => {
-      i = {
+    }, u = (h) => {
+      o = {
         x: h.clientX,
         y: h.clientY
       }, a === null && (a = requestAnimationFrame(c));
-    }, u = () => {
-      i = null, a !== null && (cancelAnimationFrame(a), a = null), s();
+    }, d = () => {
+      o = null, a !== null && (cancelAnimationFrame(a), a = null), s();
     };
-    return e.addEventListener("pointermove", d), e.addEventListener("pointerleave", u), () => {
-      a !== null && cancelAnimationFrame(a), e.removeEventListener("pointermove", d), e.removeEventListener("pointerleave", u), s();
+    return e.addEventListener("pointermove", u), e.addEventListener("pointerleave", d), () => {
+      a !== null && cancelAnimationFrame(a), e.removeEventListener("pointermove", u), e.removeEventListener("pointerleave", d), s();
     };
   }, [
     e,
-    r,
-    o
-  ]);
-}, qe = "editor", Ve = [], Ra = (e, n, r, o) => {
-  const a = At(), { store: i } = Ie(), l = Je().length > 0, c = ce((u) => u.menuTrigger), s = a.kind === "menu", d = P(() => c === null ? Ve : [wn(c)], [c]);
-  _a(e, n), Da(a, e, n, r), Aa(e), Na(e), Pa(e, o), T(() => (i.getState().publishPointerRegions(qe, d), () => i.getState().publishPointerRegions(qe, Ve)), [i, d]), T(() => (i.getState().setPointerSuspended(s || l), () => i.getState().setPointerSuspended(!1)), [
     i,
+    r
+  ]);
+}, tn = "editor", rn = [], Qo = (e, t, i, r) => {
+  const a = Xn(), { store: o } = _e(), l = Sn().length > 0, c = ve((d) => d.menuTrigger), s = a.kind === "menu", u = O(() => c === null ? rn : [Er(c)], [c]);
+  Yo(e, t), Jo(a, e, t, i), Bo(e), Uo(e), Go(e, r), z(() => (o.getState().publishPointerRegions(tn, u), () => o.getState().publishPointerRegions(tn, rn)), [o, u]), z(() => (o.getState().setPointerSuspended(s || l), () => o.getState().setPointerSuspended(!1)), [
+    o,
     s,
     l
-  ]), T(() => {
+  ]), z(() => {
     if (!l) return;
-    const u = i.getState();
-    u.setHoverState(et), u.setTooltipAnchor(null);
-  }, [i, l]);
-}, Da = (e, n, r, o) => {
-  const a = _(), { selectionStore: i } = E(), { store: l, engine: c } = Ie(), s = ee(e), d = ee(r), u = ee(o);
-  T(() => {
-    const h = (b) => {
+    const d = o.getState();
+    d.setHoverState(yn), d.setTooltipAnchor(null);
+  }, [o, l]);
+}, Jo = (e, t, i, r) => {
+  const a = W(), { selectionStore: o } = B(), { store: l, engine: c } = _e(), s = se(e), u = se(i), d = se(r);
+  z(() => {
+    const h = (S) => {
       const { menuTrigger: f } = a.getState();
-      return f === null ? !1 : rt(Ge(b, d.current), f);
-    }, v = (b) => {
-      if (h(b) || i.getState().selection.length > 0) return;
-      const f = u.current, y = Ge(b, d.current), O = za(y, f) ? c.query(Ae(y, f)) : et;
-      l.getState().setHoverState(O);
+      return f === null ? !1 : Tn(an(S, u.current), f);
+    }, v = (S) => {
+      if (h(S) || o.getState().selection.length > 0) return;
+      const f = d.current, P = an(S, u.current), x = ei(P, f) ? c.query(De(P, f)) : yn;
+      l.getState().setHoverState(x);
     };
     let m = !1;
     const g = () => {
       m = s.current.kind === "menu";
-    }, x = (b) => {
-      const f = Pt(b.clientX, b.clientY, n), y = i.getState();
+    }, y = (S) => {
+      const f = Zn(S.clientX, S.clientY, t), P = o.getState();
       if (f === null) {
-        y.clearSelection();
+        P.clearSelection();
         return;
       }
-      y.setSelection([f]);
-    }, S = (b) => {
-      if (qn(b.target)) return;
-      const { claimInteraction: f, releaseInteraction: y } = a.getState(), O = h(b);
-      if (!O || m) {
-        y("menu"), O || x(b), m && v(b);
+      P.setSelection([f]);
+    }, I = (S) => {
+      if (aa(S.target)) return;
+      const { claimInteraction: f, releaseInteraction: P } = a.getState(), x = h(S);
+      if (!x || m) {
+        P("menu"), x || y(S), m && v(S);
         return;
       }
-      const oe = s.current;
-      oe.kind === "trigger" && f({
+      const R = s.current;
+      R.kind === "trigger" && f({
         kind: "menu",
-        anchor: oe.anchor
+        anchor: R.anchor
       });
     };
-    return document.addEventListener("pointerdown", g, !0), document.addEventListener("click", S), () => {
-      document.removeEventListener("pointerdown", g, !0), document.removeEventListener("click", S);
+    return document.addEventListener("pointerdown", g, !0), document.addEventListener("click", I), () => {
+      document.removeEventListener("pointerdown", g, !0), document.removeEventListener("click", I);
     };
   }, [
     a,
-    i,
-    n,
+    o,
+    t,
     s,
     l,
     c,
-    d,
-    u
+    u,
+    d
   ]);
-}, Ge = (e, n) => ({
-  x: e.clientX - n.x,
-  y: e.clientY - n.y
-}), za = (e, n) => e.x >= 0 && e.x <= n.width && e.y >= 0 && e.y <= n.height, Fa = ({ frameElement: e, panelRect: n }) => {
-  const { measureRef: r, screenRect: o } = Zt(), a = _();
-  return T(() => (r(e), () => r(null)), [r, e]), T(() => () => a.getState().releaseInteraction("menu"), [a]), o === null ? null : /* @__PURE__ */ t(Gn, { children: /* @__PURE__ */ t(Ka, {
+}, an = (e, t) => ({
+  x: e.clientX - t.x,
+  y: e.clientY - t.y
+}), ei = (e, t) => e.x >= 0 && e.x <= t.width && e.y >= 0 && e.y <= t.height, ni = ({ frameElement: e, panelRect: t }) => {
+  const { measureRef: i, screenRect: r } = It(), a = W();
+  return z(() => (i(e), () => i(null)), [i, e]), z(() => () => a.getState().releaseInteraction("menu"), [a]), r === null ? null : /* @__PURE__ */ n(ia, { children: /* @__PURE__ */ n(ti, {
     frameElement: e,
-    frameRect: o,
-    panelRect: n
+    frameRect: r,
+    panelRect: t
   }) });
-}, Ka = ({ frameElement: e, frameRect: n, panelRect: r }) => {
-  const o = P(() => ({
-    x: n.left + r.x,
-    y: n.top + r.y
+}, ti = ({ frameElement: e, frameRect: t, panelRect: i }) => {
+  const r = O(() => ({
+    x: t.left + i.x,
+    y: t.top + i.y
   }), [
-    n.left,
-    n.top,
-    r.x,
-    r.y
-  ]), [a, i] = D(null);
-  return Ra(e, o, r, a), /* @__PURE__ */ t(Ha, {
+    t.left,
+    t.top,
+    i.x,
+    i.y
+  ]), [a, o] = $(null);
+  return Qo(e, r, i, a), /* @__PURE__ */ n(ri, {
     frameElement: e,
-    frameRect: n,
-    panelOrigin: o,
-    panelRect: r,
-    boxRef: i
+    frameRect: t,
+    panelOrigin: r,
+    panelRect: i,
+    boxRef: o
   });
-}, Ha = ({ frameElement: e, frameRect: n, panelOrigin: r, panelRect: o, boxRef: a }) => {
-  const i = Te(), l = At();
-  return /* @__PURE__ */ t($t, {
-    rect: n,
-    zIndex: jt.editorOverlay,
-    container: i,
+}, ri = ({ frameElement: e, frameRect: t, panelOrigin: i, panelRect: r, boxRef: a }) => {
+  const o = Fe(), l = Xn();
+  return /* @__PURE__ */ n(xt, {
+    rect: t,
+    zIndex: Tt.editorOverlay,
+    container: o,
     "data-testid": "editor-overlay",
     boxRef: a,
-    children: /* @__PURE__ */ p(re, { children: [
-      /* @__PURE__ */ t(ha, {
-        panelRect: o,
-        panelOrigin: r,
-        frameRect: n,
+    children: /* @__PURE__ */ p(he, { children: [
+      /* @__PURE__ */ n(No, {
+        panelRect: r,
+        panelOrigin: i,
+        frameRect: t,
         frameElement: e
       }),
-      /* @__PURE__ */ t(wa, {
+      /* @__PURE__ */ n(Ho, {
         interaction: l,
-        panelRect: o
+        panelRect: r
       }),
-      /* @__PURE__ */ t(Tr, {
+      /* @__PURE__ */ n(Ua, {
         interaction: l,
-        panelOrigin: r
+        panelOrigin: i
       })
     ] })
   });
-}, Ni = ({ slots: e, ...n }) => /* @__PURE__ */ t(Yt, { children: /* @__PURE__ */ t(Xt, {
-  slots: P(() => ({
-    EditorSurface: Fa,
+}, Ss = ({ slots: e, ...t }) => /* @__PURE__ */ n(Et, { children: /* @__PURE__ */ n(Ot, {
+  slots: O(() => ({
+    EditorSurface: ni,
     ...e
   }), [e]),
-  ...n
-}) }), Nt = ae(null), Tt = ({ labelId: e, controlId: n, children: r }) => {
-  const o = P(() => {
+  ...t
+}) }), jn = ue(null), Yn = ({ labelId: e, controlId: t, children: i }) => {
+  const r = O(() => {
     let a = null;
     return {
       labelId: e,
-      controlId: n,
-      claimControlId: (i) => (a ??= i, a === i)
+      controlId: t,
+      claimControlId: (o) => (a ??= o, a === o)
     };
-  }, [e, n]);
-  return /* @__PURE__ */ t(Nt.Provider, {
-    value: o,
-    children: r
+  }, [e, t]);
+  return /* @__PURE__ */ n(jn.Provider, {
+    value: r,
+    children: i
   });
-}, B = ({ id: e, ariaLabel: n, ariaLabelledBy: r }, o = !0) => {
-  const a = X(Nt), i = ne(), [l] = D(() => o ? a?.claimControlId(i) ?? !1 : !1), c = e ?? (l ? a?.controlId : void 0), s = r ?? (n === void 0 ? a?.labelId : void 0);
+}, Y = ({ id: e, ariaLabel: t, ariaLabelledBy: i }, r = !0) => {
+  const a = ae(jn), o = de(), [l] = $(() => r ? a?.claimControlId(o) ?? !1 : !1), c = e ?? (l ? a?.controlId : void 0), s = i ?? (t === void 0 ? a?.labelId : void 0);
   return {
     ...c !== void 0 && { id: c },
-    ...n !== void 0 && { "aria-label": n },
+    ...t !== void 0 && { "aria-label": t },
     ...s !== void 0 && { "aria-labelledby": s }
   };
 };
-var Ba = {
+var ai = {
   default: "woi4bh4 woi4bh3",
   tile: "woi4bh5 woi4bh3"
-}, qa = ({ label: e, icon: n, onClick: r, variant: o = "default", isDisabled: a, ariaLabel: i, ariaLabelledBy: l, id: c }) => {
-  const s = B({
+}, oi = ({ label: e, icon: t, onClick: i, variant: r = "default", isDisabled: a, ariaLabel: o, ariaLabelledBy: l, id: c }) => {
+  const s = Y({
     id: c,
-    ariaLabel: i,
+    ariaLabel: o,
     ariaLabelledBy: l
-  }), d = o === "tile";
+  }), u = r === "tile";
   return /* @__PURE__ */ p("button", {
     type: "button",
-    className: Ba[o],
+    className: ai[r],
     disabled: a,
-    onClick: r,
+    onClick: i,
     ...s,
-    children: [n !== void 0 && /* @__PURE__ */ t("span", {
+    children: [t !== void 0 && /* @__PURE__ */ n("span", {
       className: "woi4bh0",
-      children: n
-    }), e !== void 0 && /* @__PURE__ */ t("span", {
-      className: d ? "woi4bh2" : "woi4bh1",
+      children: t
+    }), e !== void 0 && /* @__PURE__ */ n("span", {
+      className: u ? "woi4bh2" : "woi4bh1",
       children: e
     })]
   });
-}, Le = ae(null), R = () => {
-  const e = X(Le);
+}, Ve = ue(null), E = () => {
+  const e = ae(Ve);
   if (!e) throw new Error("An editing section must sit inside an <EditorPanel.Root> bound to a graph — pass it a `handle`, or render the panel inside a <GraphProvider>.");
   return e;
-}, Ot = ({ children: e, onKeyDown: n, ...r }) => {
-  const o = X(Le);
-  return /* @__PURE__ */ t("div", {
-    onKeyDown: (i) => {
-      if (n?.(i), !o || i.defaultPrevented) return;
-      const l = tn(i.nativeEvent);
-      l && (i.preventDefault(), l === "undo" ? o.undo() : o.redo());
+}, Qn = ({ children: e, onKeyDown: t, ...i }) => {
+  const r = ae(Ve);
+  return /* @__PURE__ */ n("div", {
+    onKeyDown: (o) => {
+      if (t?.(o), !r || o.defaultPrevented) return;
+      const l = Rt(o.nativeEvent);
+      l && (o.preventDefault(), l === "undo" ? r.undo() : r.redo());
     },
-    ...r,
+    ...i,
     children: e
   });
-}, Lt = "keyboard", ge = (e) => {
-  const n = ue(!1), r = ue(!1), o = () => {
-    n.current = !1, r.current && (r.current = !1, e?.());
+}, Jn = "keyboard", Pe = (e) => {
+  const t = be(!1), i = be(!1), r = () => {
+    t.current = !1, i.current && (i.current = !1, e?.());
   };
   return {
     commitAfterChange: () => {
-      if (n.current) {
-        r.current = !0;
+      if (t.current) {
+        i.current = !0;
         return;
       }
       e?.();
     },
     commitUnlessHeldKey: (a) => {
       if (a) {
-        r.current = !0;
+        i.current = !0;
         return;
       }
       e?.();
     },
     gestureHandlers: {
       onKeyDown: () => {
-        n.current = !0;
+        t.current = !0;
       },
-      onKeyUp: o,
+      onKeyUp: r,
       onBlur: (a) => {
-        a.relatedTarget instanceof Node && a.currentTarget.contains(a.relatedTarget) || o();
+        a.relatedTarget instanceof Node && a.currentTarget.contains(a.relatedTarget) || r();
       }
     }
   };
-}, Va = "eh8dvc0", Ga = "eh8dvc1 uz3g760", Ua = "eh8dvc2 uz3g761";
-var $a = ({ value: e, onChange: n, onCommit: r, min: o, max: a, step: i, prefix: l, suffix: c, isDisabled: s, hasError: d, ariaLabel: u, ariaLabelledBy: h, id: v }) => {
-  const m = B({
+}, ii = "eh8dvc0", li = "eh8dvc1 uz3g760", si = "eh8dvc2 uz3g761";
+var ci = ({ value: e, onChange: t, onCommit: i, min: r, max: a, step: o, prefix: l, suffix: c, isDisabled: s, hasError: u, ariaLabel: d, ariaLabelledBy: h, id: v }) => {
+  const m = Y({
     id: v,
-    ariaLabel: u,
+    ariaLabel: d,
     ariaLabelledBy: h
-  }), { commitUnlessHeldKey: g, gestureHandlers: x } = ge(r);
-  return /* @__PURE__ */ t(ze.Root, {
-    className: Va,
+  }), { commitUnlessHeldKey: g, gestureHandlers: y } = Pe(i);
+  return /* @__PURE__ */ n(Ye.Root, {
+    className: ii,
     value: e,
-    onValueChange: (S) => n(S),
-    onValueCommitted: (S, b) => {
-      g(b.reason === Lt);
+    onValueChange: (I) => t(I),
+    onValueCommitted: (I, S) => {
+      g(S.reason === Jn);
     },
-    min: o,
+    min: r,
     max: a,
-    step: i,
+    step: o,
     disabled: s,
-    children: /* @__PURE__ */ p(Ot, {
-      className: Ga,
-      "data-error": d === !0,
+    children: /* @__PURE__ */ p(Qn, {
+      className: li,
+      "data-error": u === !0,
       "data-disabled": s === !0 ? "" : void 0,
       children: [
-        l !== void 0 && /* @__PURE__ */ t("span", {
+        l !== void 0 && /* @__PURE__ */ n("span", {
           className: "eh8dvc3",
           children: l
         }),
-        /* @__PURE__ */ t(ze.Input, {
-          className: Ua,
-          ...x,
-          "aria-invalid": d === !0 ? !0 : void 0,
+        /* @__PURE__ */ n(Ye.Input, {
+          className: si,
+          ...y,
+          "aria-invalid": u === !0 ? !0 : void 0,
           ...m
         }),
-        c !== void 0 && /* @__PURE__ */ t("span", {
+        c !== void 0 && /* @__PURE__ */ n("span", {
           className: "eh8dvc3",
           children: c
         })
       ]
     })
   });
-}, Za = "_1b7s5f0", j = {
+}, di = "_1b7s5f0", te = {
   1: "_1b7s5f1",
   2: "_1b7s5f2",
   3: "_1b7s5f3",
   4: "_1b7s5f4",
   5: "_1b7s5f5",
   6: "_1b7s5f6"
-}, ja = "_1b7s5f7";
-var Wa = 6, Xa = ({ options: e, value: n, onChange: r, onCommit: o, columns: a, itemLayout: i = "tile", isDisabled: l, ariaLabel: c, ariaLabelledBy: s, id: d }) => {
-  const u = B({
-    id: d,
+}, hi = "_1b7s5f7";
+var ui = 6, mi = ({ options: e, value: t, onChange: i, onCommit: r, columns: a, itemLayout: o = "tile", isDisabled: l, ariaLabel: c, ariaLabelledBy: s, id: u }) => {
+  const d = Y({
+    id: u,
     ariaLabel: c,
     ariaLabelledBy: s
-  }), h = i === "swatch", { commitAfterChange: v, gestureHandlers: m } = ge(o);
-  return /* @__PURE__ */ t(it, {
-    className: W(Za, Ya(a ?? e.length)),
-    value: n,
+  }), h = o === "swatch", { commitAfterChange: v, gestureHandlers: m } = Pe(r);
+  return /* @__PURE__ */ n(Nn, {
+    className: re(di, pi(a ?? e.length)),
+    value: t,
     onValueChange: (g) => {
-      r(g), v();
+      i(g), v();
     },
     ...m,
     disabled: l,
-    ...u,
-    children: e.map((g) => /* @__PURE__ */ p(ot.Root, {
+    ...d,
+    children: e.map((g) => /* @__PURE__ */ p(Ln.Root, {
       value: g.value,
       disabled: g.isDisabled,
-      className: W(ja, h && "_1b7s5f8"),
+      className: re(hi, h && "_1b7s5f8"),
       "aria-label": h ? g.label : void 0,
-      children: [g.icon, !h && /* @__PURE__ */ t("span", {
+      children: [g.icon, !h && /* @__PURE__ */ n("span", {
         className: "_1b7s5f9",
         children: g.label
       })]
     }, g.value))
   });
-}, Ya = (e) => {
-  switch (Math.min(Math.max(Math.round(e), 1), Wa)) {
+}, pi = (e) => {
+  switch (Math.min(Math.max(Math.round(e), 1), ui)) {
     case 1:
-      return j[1];
+      return te[1];
     case 2:
-      return j[2];
+      return te[2];
     case 3:
-      return j[3];
+      return te[3];
     case 4:
-      return j[4];
+      return te[4];
     case 5:
-      return j[5];
+      return te[5];
     default:
-      return j[6];
+      return te[6];
   }
-}, Qa = "_1g5x15w0 uz3g760", Ja = "_1g5x15w1", eo = "_1g5x15w2", Ue = "_1g5x15w3", to = "_1g5x15w4", no = "_1g5x15w5", ro = "_1g5x15w6", ao = "_1g5x15w7";
-var oo = ({ options: e, value: n, onChange: r, placeholder: o, isDisabled: a, hasError: i, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const d = B({
+}, gi = "_1g5x15w0 uz3g760", vi = "_1g5x15w1", fi = "_1g5x15w2", on = "_1g5x15w3", bi = "_1g5x15w4", Ci = "_1g5x15w5", Si = "_1g5x15w6", yi = "_1g5x15w7";
+var wi = ({ options: e, value: t, onChange: i, placeholder: r, isDisabled: a, hasError: o, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Y({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
   });
-  return /* @__PURE__ */ p(k.Root, {
-    value: n,
-    onValueChange: (u) => u !== null && r(u),
+  return /* @__PURE__ */ p(U.Root, {
+    value: t,
+    onValueChange: (d) => d !== null && i(d),
     disabled: a,
-    items: e.map((u) => ({
-      value: u.value,
-      label: u.label
+    items: e.map((d) => ({
+      value: d.value,
+      label: d.label
     })),
-    children: [/* @__PURE__ */ p(k.Trigger, {
-      className: Qa,
-      "data-error": i === !0,
-      ...d,
-      children: [/* @__PURE__ */ t(k.Value, {
-        className: Ja,
-        children: (u) => io(e, u, o)
-      }), /* @__PURE__ */ t(k.Icon, {
-        className: Ue,
-        children: /* @__PURE__ */ t(me, { size: "sm" })
+    children: [/* @__PURE__ */ p(U.Trigger, {
+      className: gi,
+      "data-error": o === !0,
+      ...u,
+      children: [/* @__PURE__ */ n(U.Value, {
+        className: vi,
+        children: (d) => Pi(e, d, r)
+      }), /* @__PURE__ */ n(U.Icon, {
+        className: on,
+        children: /* @__PURE__ */ n(Se, { size: "sm" })
       })]
-    }), /* @__PURE__ */ t(k.Portal, {
-      container: xe(),
-      children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(k.Positioner, {
-        className: to,
+    }), /* @__PURE__ */ n(U.Portal, {
+      container: ke(),
+      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(U.Positioner, {
+        className: bi,
         sideOffset: 4,
         alignItemWithTrigger: !1,
-        children: /* @__PURE__ */ t(k.Popup, {
-          className: no,
-          children: e.map((u) => /* @__PURE__ */ p(k.Item, {
-            value: u.value,
-            disabled: u.isDisabled,
-            className: ro,
+        children: /* @__PURE__ */ n(U.Popup, {
+          className: Ci,
+          children: e.map((d) => /* @__PURE__ */ p(U.Item, {
+            value: d.value,
+            disabled: d.isDisabled,
+            className: Si,
             children: [
-              u.icon,
+              d.icon,
               /* @__PURE__ */ p("span", {
-                className: ao,
-                children: [/* @__PURE__ */ t(k.ItemText, { children: u.label }), u.description !== void 0 && /* @__PURE__ */ t("span", {
+                className: yi,
+                children: [/* @__PURE__ */ n(U.ItemText, { children: d.label }), d.description !== void 0 && /* @__PURE__ */ n("span", {
                   className: "_1g5x15w8",
-                  children: u.description
+                  children: d.description
                 })]
               }),
-              /* @__PURE__ */ t(k.ItemIndicator, {
-                className: Ue,
-                children: /* @__PURE__ */ t(nn, { size: "sm" })
+              /* @__PURE__ */ n(U.ItemIndicator, {
+                className: on,
+                children: /* @__PURE__ */ n(Dt, { size: "sm" })
               })
             ]
-          }, u.value))
+          }, d.value))
         })
       }) })
     })]
   });
-}, io = (e, n, r) => n === null ? /* @__PURE__ */ t("span", {
-  className: eo,
-  children: r
-}) : lo(e, n), lo = (e, n) => e.find((r) => r.value === n)?.label ?? n, so = "vod76w0", co = "vod76w1", uo = "vod76w2", ho = "vod76w3", mo = "vod76w4", po = "vod76w5";
-var vo = ({ value: e, onChange: n, onCommit: r, min: o, max: a, step: i, suffix: l, formatValue: c, isDisabled: s, ariaLabel: d, ariaLabelledBy: u }) => {
-  const h = B({
-    ariaLabel: d,
-    ariaLabelledBy: u
-  }, !1), v = go(e, l, c), { commitUnlessHeldKey: m, gestureHandlers: g } = ge(r);
+}, Pi = (e, t, i) => t === null ? /* @__PURE__ */ n("span", {
+  className: fi,
+  children: i
+}) : Ii(e, t), Ii = (e, t) => e.find((i) => i.value === t)?.label ?? t, xi = "vod76w0", Ti = "vod76w1", Ai = "vod76w2", Li = "vod76w3", Ni = "vod76w4", Oi = "vod76w5";
+var Ei = ({ value: e, onChange: t, onCommit: i, min: r, max: a, step: o, suffix: l, formatValue: c, isDisabled: s, ariaLabel: u, ariaLabelledBy: d }) => {
+  const h = Y({
+    ariaLabel: u,
+    ariaLabelledBy: d
+  }, !1), v = _i(e, l, c), { commitUnlessHeldKey: m, gestureHandlers: g } = Pe(i);
   return /* @__PURE__ */ p("div", {
-    className: so,
-    children: [/* @__PURE__ */ t(Y.Root, {
-      className: co,
+    className: xi,
+    children: [/* @__PURE__ */ n(oe.Root, {
+      className: Ti,
       value: e,
-      onValueChange: (x) => n(x),
-      onValueCommitted: (x, S) => {
-        m(S.reason === Lt);
+      onValueChange: (y) => t(y),
+      onValueCommitted: (y, I) => {
+        m(I.reason === Jn);
       },
-      min: o,
+      min: r,
       max: a,
-      step: i,
+      step: o,
       disabled: s,
-      children: /* @__PURE__ */ t(Y.Control, {
-        className: uo,
-        children: /* @__PURE__ */ p(Y.Track, {
-          className: ho,
-          children: [/* @__PURE__ */ t(Y.Indicator, { className: mo }), /* @__PURE__ */ t(Y.Thumb, {
-            className: po,
+      children: /* @__PURE__ */ n(oe.Control, {
+        className: Ai,
+        children: /* @__PURE__ */ p(oe.Track, {
+          className: Li,
+          children: [/* @__PURE__ */ n(oe.Indicator, { className: Ni }), /* @__PURE__ */ n(oe.Thumb, {
+            className: Oi,
             ...g,
             ...h
           })]
         })
       })
-    }), v !== null && /* @__PURE__ */ t("span", {
+    }), v !== null && /* @__PURE__ */ n("span", {
       className: "vod76w6",
       children: v
     })]
   });
-}, go = (e, n, r) => r !== void 0 ? r(e) : n !== void 0 ? `${e}${n}` : null, fo = "_1hyrlw60", bo = "_1hyrlw61", Co = ({ isChecked: e, onChange: n, isDisabled: r, ariaLabel: o, ariaLabelledBy: a, id: i }) => {
-  const l = B({
-    id: i,
-    ariaLabel: o,
+}, _i = (e, t, i) => i !== void 0 ? i(e) : t !== void 0 ? `${e}${t}` : null, ki = "_1hyrlw60", Mi = "_1hyrlw61", Ri = ({ isChecked: e, onChange: t, isDisabled: i, ariaLabel: r, ariaLabelledBy: a, id: o }) => {
+  const l = Y({
+    id: o,
+    ariaLabel: r,
     ariaLabelledBy: a
   });
-  return /* @__PURE__ */ t(Fe.Root, {
+  return /* @__PURE__ */ n(Qe.Root, {
     checked: e,
-    onCheckedChange: (c) => n(c),
-    disabled: r,
-    className: fo,
+    onCheckedChange: (c) => t(c),
+    disabled: i,
+    className: ki,
     ...l,
-    children: /* @__PURE__ */ t(Fe.Thumb, { className: bo })
+    children: /* @__PURE__ */ n(Qe.Thumb, { className: Mi })
   });
-}, So = "uz3g761", yo = "tpcnun0 uz3g760", wo = ({ value: e, onChange: n, onCommit: r, placeholder: o, isDisabled: a, hasError: i, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const d = B({
+}, Di = "uz3g761", zi = "tpcnun0 uz3g760", Fi = ({ value: e, onChange: t, onCommit: i, placeholder: r, isDisabled: a, hasError: o, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Y({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
   });
-  return /* @__PURE__ */ t(Ot, {
-    className: yo,
-    "data-error": i === !0,
-    children: /* @__PURE__ */ t(Fn, {
-      className: So,
+  return /* @__PURE__ */ n(Qn, {
+    className: zi,
+    "data-error": o === !0,
+    children: /* @__PURE__ */ n(ea, {
+      className: Di,
       value: e,
-      onValueChange: (u) => n(u),
-      onBlur: r,
-      placeholder: o,
+      onValueChange: (d) => t(d),
+      onBlur: i,
+      placeholder: r,
       disabled: a,
-      "aria-invalid": i === !0 ? !0 : void 0,
-      ...d
+      "aria-invalid": o === !0 ? !0 : void 0,
+      ...u
     })
   });
-}, xo = "cnu9yl0", Io = "cnu9yl1";
-var Po = ({ options: e, value: n, onChange: r, onCommit: o, itemLayout: a = "inline", isDisabled: i, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const d = B({
+}, Hi = "cnu9yl0", Vi = "cnu9yl1";
+var Ki = ({ options: e, value: t, onChange: i, onCommit: r, itemLayout: a = "inline", isDisabled: o, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Y({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
-  }), u = a === "stacked", { commitAfterChange: h, gestureHandlers: v } = ge(o);
-  return /* @__PURE__ */ t(it, {
-    className: xo,
-    value: n,
+  }), d = a === "stacked", { commitAfterChange: h, gestureHandlers: v } = Pe(r);
+  return /* @__PURE__ */ n(Nn, {
+    className: Hi,
+    value: t,
     onValueChange: (m) => {
-      r(m), h();
+      i(m), h();
     },
     ...v,
-    disabled: i,
-    ...d,
-    children: e.map((m) => /* @__PURE__ */ p(ot.Root, {
+    disabled: o,
+    ...u,
+    children: e.map((m) => /* @__PURE__ */ p(Ln.Root, {
       value: m.value,
       disabled: m.isDisabled,
-      className: W(Io, u && "cnu9yl2"),
-      "aria-label": Ao(m, u),
-      children: [m.icon, Et(m, u) && /* @__PURE__ */ t("span", {
+      className: re(Vi, d && "cnu9yl2"),
+      "aria-label": Gi(m, d),
+      children: [m.icon, et(m, d) && /* @__PURE__ */ n("span", {
         className: "cnu9yl3",
         children: m.label
       })]
     }, m.value))
   });
-}, Et = (e, n) => e.icon === void 0 || n, Ao = (e, n) => {
-  if (!Et(e, n))
+}, et = (e, t) => e.icon === void 0 || t, Gi = (e, t) => {
+  if (!et(e, t))
     return e.label;
-}, Mt = {
-  ToggleGroup: Po,
-  Switch: Co,
-  Slider: vo,
-  RadioGrid: Xa,
-  Button: qa,
-  TextField: wo,
-  NumberField: $a,
-  Select: oo
-}, kt = ae(Mt), No = ({ controls: e, children: n }) => {
-  const r = P(() => ({
-    ...Mt,
+}, nt = {
+  ToggleGroup: Ki,
+  Switch: Ri,
+  Slider: Ei,
+  RadioGrid: mi,
+  Button: oi,
+  TextField: Fi,
+  NumberField: ci,
+  Select: wi
+}, tt = ue(nt), Bi = ({ controls: e, children: t }) => {
+  const i = O(() => ({
+    ...nt,
     ...e
   }), [e]);
-  return /* @__PURE__ */ t(kt.Provider, {
-    value: r,
-    children: n
+  return /* @__PURE__ */ n(tt.Provider, {
+    value: i,
+    children: t
   });
-}, M = () => X(kt), To = "_12lhx9e0", Oo = ({ children: e }) => /* @__PURE__ */ t("div", {
-  className: To,
+}, _ = () => ae(tt), Ui = "_12lhx9e0", qi = ({ children: e }) => /* @__PURE__ */ n("div", {
+  className: Ui,
   children: e
-}), Lo = "_139ohwv0", q = ({ children: e }) => /* @__PURE__ */ t("div", {
-  className: Lo,
+}), Wi = "_139ohwv0", V = ({ children: e }) => /* @__PURE__ */ n("div", {
+  className: Wi,
   children: e
-}), _t = ae(null), Eo = _t.Provider, Mo = () => {
-  const e = X(_t);
+}), rt = ue(null), $i = rt.Provider, Zi = () => {
+  const e = ae(rt);
   if (!e) throw new Error("A section must be rendered inside <EditorPanel.Root>.");
   return e;
-}, ko = "_1jlczkt0", _o = "data-graphy-editor-panel", Ro = {
-  List: q,
-  Grid: Oo
-}, Do = ({ handle: e, children: n, controls: r, defaultExpandedSection: o = void 0, className: a }) => {
-  const i = Jt(e), [l, c] = D(() => o ? [o] : []), s = P(() => ({
-    expandSection: (d) => c([d]),
-    collapseAllSections: () => c([])
+}, Xi = "_1jlczkt0", ji = "data-graphy-editor-panel", Yi = {
+  List: V,
+  Grid: qi
+};
+function Qi(e) {
+  if (e === void 0) return !1;
+  const t = e.split(/\s+/);
+  return t.includes("_1ii3bsb0") || t.includes("_1ii3bsb1");
+}
+var Ji = ({ handle: e, children: t, controls: i, defaultExpandedSection: r = void 0, className: a }) => {
+  const o = kt(e), { themeClass: l, inlineVarsStyle: c } = Me(), [s, u] = $(() => r ? [r] : []), d = O(() => ({
+    expandSection: (h) => u([h]),
+    collapseAllSections: () => u([])
   }), []);
-  return /* @__PURE__ */ t(Le.Provider, {
-    value: i,
-    children: /* @__PURE__ */ t(No, {
-      controls: r,
-      children: /* @__PURE__ */ t(Eo, {
-        value: s,
-        children: /* @__PURE__ */ t(J.Root, {
-          [_o]: "",
-          className: W(ko, a),
-          value: l,
-          onValueChange: (d) => c(d),
-          children: n
+  return /* @__PURE__ */ n(Ve.Provider, {
+    value: o,
+    children: /* @__PURE__ */ n(Bi, {
+      controls: i,
+      children: /* @__PURE__ */ n($i, {
+        value: d,
+        children: /* @__PURE__ */ n(le.Root, {
+          [ji]: "",
+          className: re(Xi, a, { [l]: !Qi(a) }),
+          style: c,
+          value: s,
+          onValueChange: (h) => u(h),
+          children: t
         })
       })
     })
   });
-}, Rt = {
-  Root: Do,
-  Controls: Ro
-}, $e = {
+}, at = {
+  Root: Ji,
+  Controls: Yi
+}, ln = {
   stack: "pr583x0",
   grid: "pr583x1"
-}, Ze = "pr583x2", zo = "pr583x3", w = ({ label: e, layout: n = "grid", children: r }) => {
-  const o = ne(), a = ne();
-  return e === void 0 ? /* @__PURE__ */ t("div", {
-    className: $e[n],
-    children: /* @__PURE__ */ t("div", {
-      className: Ze,
-      children: r
+}, sn = "pr583x2", el = "pr583x3", b = ({ label: e, layout: t = "grid", children: i }) => {
+  const r = de(), a = de();
+  return e === void 0 ? /* @__PURE__ */ n("div", {
+    className: ln[t],
+    children: /* @__PURE__ */ n("div", {
+      className: sn,
+      children: i
     })
   }) : /* @__PURE__ */ p("div", {
-    className: $e[n],
-    children: [/* @__PURE__ */ t("label", {
-      id: o,
+    className: ln[t],
+    children: [/* @__PURE__ */ n("label", {
+      id: r,
       htmlFor: a,
-      className: zo,
+      className: el,
       children: e
-    }), /* @__PURE__ */ t("div", {
-      className: Ze,
-      children: /* @__PURE__ */ t(Tt, {
-        labelId: o,
+    }), /* @__PURE__ */ n("div", {
+      className: sn,
+      children: /* @__PURE__ */ n(Yn, {
+        labelId: r,
         controlId: a,
-        children: r
+        children: i
       })
     })]
   });
-}, Fo = (e) => /* @__PURE__ */ t(N, {
+}, nl = (e) => /* @__PURE__ */ n(M, {
   ...e,
-  children: /* @__PURE__ */ t("g", {
+  children: /* @__PURE__ */ n("g", {
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ t("path", { d: "m9 6 6 6-6 6" })
+    children: /* @__PURE__ */ n("path", { d: "m9 6 6 6-6 6" })
   })
-}), Ee = "_40zvwv0", Me = "_40zvwv1", Ko = "_40zvwv2", Dt = "_40zvwv3", Ho = "_40zvwv4 _40zvwv3";
-var Bo = "_40zvwv6";
-var qo = "_40zvwv8", z = ({ title: e, layout: n = "fixed", preview: r, accessory: o, onOpenChange: a, children: i }) => n === "collapsible" ? /* @__PURE__ */ t(Go, {
+}), Ke = "_40zvwv0", Ge = "_40zvwv1", tl = "_40zvwv2", ot = "_40zvwv3", rl = "_40zvwv4 _40zvwv3";
+var al = "_40zvwv6";
+var ol = "_40zvwv8", H = ({ title: e, layout: t = "fixed", preview: i, accessory: r, onOpenChange: a, children: o }) => t === "collapsible" ? /* @__PURE__ */ n(ll, {
   title: e,
-  preview: r,
-  accessory: o,
+  preview: i,
+  accessory: r,
   onOpenChange: a,
-  children: i
-}) : n === "inline" && r === void 0 ? /* @__PURE__ */ t(Vo, {
+  children: o
+}) : t === "inline" && i === void 0 ? /* @__PURE__ */ n(il, {
   title: e,
-  accessory: o,
-  children: i
+  accessory: r,
+  children: o
 }) : /* @__PURE__ */ p("div", {
-  className: Ee,
+  className: Ke,
   children: [/* @__PURE__ */ p("div", {
-    className: Me,
+    className: Ge,
     children: [
-      /* @__PURE__ */ t("span", {
-        className: Dt,
+      /* @__PURE__ */ n("span", {
+        className: ot,
         children: e
       }),
-      r !== void 0 && /* @__PURE__ */ t("span", {
+      i !== void 0 && /* @__PURE__ */ n("span", {
         className: "_40zvwv5",
-        children: r
+        children: i
       }),
-      o !== void 0 && /* @__PURE__ */ t("span", {
+      r !== void 0 && /* @__PURE__ */ n("span", {
         className: "_40zvwv7",
-        children: o
+        children: r
       })
     ]
-  }), /* @__PURE__ */ t("div", { children: i })]
-}), Vo = ({ title: e, accessory: n, children: r }) => {
-  const o = ne(), a = ne();
-  return /* @__PURE__ */ t("div", {
-    className: Ee,
+  }), /* @__PURE__ */ n("div", { children: o })]
+}), il = ({ title: e, accessory: t, children: i }) => {
+  const r = de(), a = de();
+  return /* @__PURE__ */ n("div", {
+    className: Ke,
     children: /* @__PURE__ */ p("div", {
-      className: Me,
+      className: Ge,
       children: [
-        /* @__PURE__ */ t("label", {
-          id: o,
+        /* @__PURE__ */ n("label", {
+          id: r,
           htmlFor: a,
-          className: Ho,
+          className: rl,
           children: e
         }),
-        /* @__PURE__ */ t("span", {
-          className: Bo,
-          children: /* @__PURE__ */ t(Tt, {
-            labelId: o,
+        /* @__PURE__ */ n("span", {
+          className: al,
+          children: /* @__PURE__ */ n(Yn, {
+            labelId: r,
             controlId: a,
-            children: r
+            children: i
           })
         }),
-        n !== void 0 && /* @__PURE__ */ t("span", {
+        t !== void 0 && /* @__PURE__ */ n("span", {
           className: "_40zvwv7",
-          children: n
+          children: t
         })
       ]
     })
   });
-}, Go = ({ title: e, preview: n, accessory: r, onOpenChange: o, children: a }) => {
-  const i = A();
-  return /* @__PURE__ */ p(J.Item, {
+}, ll = ({ title: e, preview: t, accessory: i, onOpenChange: r, children: a }) => {
+  const o = T();
+  return /* @__PURE__ */ p(le.Item, {
     value: e,
-    className: Ee,
-    onOpenChange: o,
-    children: [/* @__PURE__ */ p(J.Header, {
-      className: Me,
-      render: /* @__PURE__ */ t("div", {}),
+    className: Ke,
+    onOpenChange: r,
+    children: [/* @__PURE__ */ p(le.Header, {
+      className: Ge,
+      render: /* @__PURE__ */ n("div", {}),
       children: [
-        /* @__PURE__ */ t(J.Trigger, {
-          className: Ko,
-          "aria-label": i("editor.accessibility.toggleSection", { title: e })
+        /* @__PURE__ */ n(le.Trigger, {
+          className: tl,
+          "aria-label": o("editor.accessibility.toggleSection", { title: e })
         }),
-        /* @__PURE__ */ t("span", {
-          className: Dt,
+        /* @__PURE__ */ n("span", {
+          className: ot,
           children: e
         }),
-        n !== void 0 && /* @__PURE__ */ t("span", {
+        t !== void 0 && /* @__PURE__ */ n("span", {
           className: "_40zvwv5",
-          children: n
+          children: t
         }),
-        r !== void 0 && /* @__PURE__ */ t("span", {
+        i !== void 0 && /* @__PURE__ */ n("span", {
           className: "_40zvwv7",
-          children: r
+          children: i
         }),
-        /* @__PURE__ */ t("span", {
-          className: qo,
-          children: /* @__PURE__ */ t(Fo, { size: "sm" })
+        /* @__PURE__ */ n("span", {
+          className: ol,
+          children: /* @__PURE__ */ n(nl, { size: "sm" })
         })
       ]
-    }), /* @__PURE__ */ t(J.Panel, { children: /* @__PURE__ */ t("div", { children: a }) })]
+    }), /* @__PURE__ */ n(le.Panel, { children: /* @__PURE__ */ n("div", { children: a }) })]
   });
-}, Ti = ({ title: e, isChecked: n, onToggle: r, isDisabled: o, preview: a, children: i }) => {
-  const { expandSection: l, collapseAllSections: c } = Mo(), { Switch: s } = M();
-  return /* @__PURE__ */ t(z, {
+}, ys = ({ title: e, isChecked: t, onToggle: i, isDisabled: r, preview: a, children: o }) => {
+  const { expandSection: l, collapseAllSections: c } = Zi(), { Switch: s } = _();
+  return /* @__PURE__ */ n(H, {
     title: e,
     layout: "collapsible",
     preview: a,
     onOpenChange: (h) => {
-      h && !n && o !== !0 && r(!0);
+      h && !t && r !== !0 && i(!0);
     },
-    accessory: /* @__PURE__ */ t(s, {
-      isChecked: n,
+    accessory: /* @__PURE__ */ n(s, {
+      isChecked: t,
       onChange: (h) => {
-        r(h), h ? l(e) : c();
+        i(h), h ? l(e) : c();
       },
-      isDisabled: o,
+      isDisabled: r,
       ariaLabel: e
     }),
-    children: i
+    children: o
   });
-}, je = {
-  x: ["bottom", "top"],
-  y: ["left", "right"]
-}, Uo = {
+}, sl = {
+  horizontal: ["bottom", "top"],
+  vertical: ["left", "right"]
+}, cl = {
   left: "editor.axesPanel.position.left",
   right: "editor.axesPanel.position.right",
   top: "editor.axesPanel.position.top",
   bottom: "editor.axesPanel.position.bottom"
-}, $o = {
+}, dl = {
   x: "editor.axesPanel.mainAxisSection.xAxis",
   y: "editor.axesPanel.mainAxisSection.yAxis"
-}, We = ({ axis: e, title: n, layout: r = "collapsible", preview: o }) => {
-  const a = R(), i = H(a), l = A(), { NumberField: c, Switch: s, ToggleGroup: d } = M();
-  if (!i) return null;
-  const u = i.config.axes[e], h = i.scales[e], v = h?.spec, m = v?.scaleType === "continuous" ? v : void 0, g = v !== void 0 && "reverse" in v ? v : void 0, x = v?.scaleType === "continuous" || v?.scaleType === "datetime", S = m !== void 0 && i.layers.some((C) => C.geom === "bar"), b = m?.transform === "log", f = m?.domainMax ?? null, y = Zo(m), O = (C, Z) => C.map((ie) => ({
-    value: ie,
-    label: Z(ie)
-  })), oe = je[e].map((C) => ({
+}, cn = ({ axis: e, title: t, layout: i = "collapsible", preview: r }) => {
+  const a = E(), o = F(a), l = T(), { NumberField: c, Switch: s, TextField: u, ToggleGroup: d } = _();
+  if (!o) return null;
+  const h = o.coordSystem.type === "polar" ? o.coordSystem.axisMapping[e].geometry : "linear", v = o.config.axes[e], m = o.scales[e], g = m?.spec, y = g?.scaleType === "continuous" ? g : void 0;
+  if (h === "circular" || h === "radial" && y === void 0) return null;
+  const I = g !== void 0 && "reverse" in g ? g : void 0, S = g?.scaleType === "continuous" || g?.scaleType === "datetime", f = e === "y" && y !== void 0 && o.layers.some((C) => C.yScaleType === "primary" && C.geom === "bar"), P = y?.transform === "log", x = y?.domainMax ?? null, R = hl(y), K = (C, Z) => C.map((me) => ({
+    value: me,
+    label: Z(me)
+  })), N = o.guides.axes.find((C) => C.scaleAestheticKey === e)?.position, D = sl[N === "bottom" || N === "top" || N === void 0 && e === "x" ? "horizontal" : "vertical"], A = o.guides.legends.drawn.some((C) => D.some((Z) => Z === C.position)), w = D.map((C) => ({
     value: C,
-    label: l(Uo[C])
-  })), zt = O(["auto", "edges"], (C) => l(C === "edges" ? "editor.axesPanel.labelMode.edges" : "editor.axesPanel.labelMode.auto")), Ft = O(["linear", "log"], (C) => l(C === "log" ? "editor.axesPanel.scale.log" : "editor.axesPanel.scale.auto")), Kt = O([
+    label: l(cl[C])
+  })), L = K(["auto", "edges"], (C) => l(C === "edges" ? "editor.axesPanel.labelMode.edges" : "editor.axesPanel.labelMode.auto")), Q = K(["linear", "log"], (C) => l(C === "log" ? "editor.axesPanel.scale.log" : "editor.axesPanel.scale.auto")), ct = K([
     "auto",
     "zero",
     "custom"
-  ], (C) => l(C === "zero" ? "editor.axesPanel.startFrom.zero" : C === "custom" ? "editor.axesPanel.startFrom.custom" : "editor.axesPanel.startFrom.auto")), Ht = O(["auto", "custom"], (C) => l(C === "custom" ? "editor.axesPanel.endAt.custom" : "editor.axesPanel.endAt.auto")), Bt = O(["no", "yes"], (C) => l(C === "yes" ? "editor.axesPanel.yesNo.yes" : "editor.axesPanel.yesNo.no")), _e = (C) => {
-    a.commands.dispatch(new le({
+  ], (C) => l(C === "zero" ? "editor.axesPanel.startFrom.zero" : C === "custom" ? "editor.axesPanel.startFrom.custom" : "editor.axesPanel.startFrom.auto")), dt = K(["auto", "custom"], (C) => l(C === "custom" ? "editor.axesPanel.endAt.custom" : "editor.axesPanel.endAt.auto")), ht = K(["no", "yes"], (C) => l(C === "yes" ? "editor.axesPanel.yesNo.yes" : "editor.axesPanel.yesNo.no")), ut = (C) => {
+    a.commands.dispatch(new Jt({
+      axis: e,
+      isVisible: C
+    }));
+  }, mt = (C) => {
+    a.commands.dispatch(new Xt({
+      axis: e,
+      label: C === "" ? null : C
+    }), { transient: !0 });
+  }, pt = (C) => {
+    a.commands.dispatch(new Qt({
+      axis: e,
+      isVisible: C
+    }));
+  }, gt = (C) => {
+    a.commands.dispatch(new Yt({
+      axis: e,
+      tickMode: C === "edges" ? "edges" : "auto"
+    }));
+  }, vt = (C) => {
+    a.commands.dispatch(new Pr({
+      scaledAesthetic: e,
+      reverse: C === "yes"
+    }));
+  }, ft = (C) => {
+    a.commands.dispatch(new Ir({
+      scaledAesthetic: e,
+      transform: C === "log" ? "log" : "linear"
+    }));
+  }, qe = (C) => {
+    a.commands.dispatch(new pe({
       scaledAesthetic: e,
       ...C
     }), { transient: !0 });
-  }, qt = (C) => {
-    if (m) {
+  }, bt = (C) => {
+    C !== null && qe({ domainMin: C });
+  }, Ct = (C) => {
+    C !== null && qe({ domainMax: C });
+  }, St = (C) => {
+    if (y) {
       if (C === "custom") {
-        m.zero && a.commands.dispatch(new De({
+        y.zero && a.commands.dispatch(new je({
           scaledAesthetic: e,
           zero: !1
-        })), a.commands.dispatch(new le({
+        })), a.commands.dispatch(new pe({
           scaledAesthetic: e,
-          domainMin: Xe(h?.domain, "start")
+          domainMin: dn(m?.domain, "start")
         }));
         return;
       }
-      m.domainMin !== null && a.commands.dispatch(new le({
+      y.domainMin !== null && a.commands.dispatch(new pe({
         scaledAesthetic: e,
         domainMin: null
-      })), a.commands.dispatch(new De({
+      })), a.commands.dispatch(new je({
         scaledAesthetic: e,
         zero: C === "zero"
       }));
     }
-  }, Vt = (C) => {
-    const Z = C === "custom" ? Xe(h?.domain, "end") : null;
-    a.commands.dispatch(new le({
+  }, yt = (C) => {
+    const Z = C === "custom" ? dn(m?.domain, "end") : null;
+    a.commands.dispatch(new pe({
       scaledAesthetic: e,
       domainMax: Z
     }));
-  }, Gt = (C) => {
-    const Z = je[e].find((ie) => ie === C);
-    Z && a.commands.dispatch(new dn({
+  }, wt = (C) => {
+    const Z = D.find((me) => me === C);
+    Z && a.commands.dispatch(new jt({
       axis: e,
       position: Z
     }));
   };
-  return /* @__PURE__ */ t(z, {
-    title: n ?? l($o[e]),
-    layout: r,
-    preview: o,
-    children: /* @__PURE__ */ p(q, { children: [
-      /* @__PURE__ */ t(w, {
+  return /* @__PURE__ */ n(H, {
+    title: t ?? l(dl[e]),
+    layout: i,
+    preview: r,
+    children: /* @__PURE__ */ p(V, { children: [
+      /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.visible"),
-        children: /* @__PURE__ */ t(s, {
-          isChecked: u.isVisible,
-          onChange: (C) => a.commands.dispatch(new hn({
-            axis: e,
-            isVisible: C
-          }))
+        children: /* @__PURE__ */ n(s, {
+          isChecked: v.isVisible,
+          onChange: ut
         })
       }),
-      x && /* @__PURE__ */ t(w, {
+      h === "linear" && /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ n(b, {
+        label: l("editor.axesPanel.controls.title"),
+        children: /* @__PURE__ */ n(u, {
+          value: v.label ?? "",
+          onChange: mt,
+          onCommit: a.commands.seal
+        })
+      }), /* @__PURE__ */ n(b, {
+        label: l("editor.axesPanel.controls.ticks"),
+        children: /* @__PURE__ */ n(s, {
+          isChecked: v.ticks.isVisible,
+          onChange: pt
+        })
+      })] }),
+      S && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.labels"),
-        children: /* @__PURE__ */ t(d, {
-          value: u.ticks.mode,
-          options: zt,
-          onChange: (C) => a.commands.dispatch(new un({
-            axis: e,
-            tickMode: C === "edges" ? "edges" : "auto"
-          }))
+        children: /* @__PURE__ */ n(d, {
+          value: v.ticks.mode,
+          options: L,
+          onChange: gt
         })
       }),
-      m && /* @__PURE__ */ t(w, {
+      y && h === "linear" && !A && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.position"),
-        children: /* @__PURE__ */ t(d, {
-          value: u.position,
-          options: oe,
-          onChange: Gt
+        children: /* @__PURE__ */ n(d, {
+          value: N ?? v.position,
+          options: w,
+          onChange: wt
         })
       }),
-      g !== void 0 && /* @__PURE__ */ t(w, {
+      I !== void 0 && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.reverse"),
-        children: /* @__PURE__ */ t(d, {
-          value: g.reverse === !0 ? "yes" : "no",
-          options: Bt,
-          onChange: (C) => a.commands.dispatch(new Cn({
-            scaledAesthetic: e,
-            reverse: C === "yes"
-          }))
+        children: /* @__PURE__ */ n(d, {
+          value: I.reverse === !0 ? "yes" : "no",
+          options: ht,
+          onChange: vt
         })
       }),
-      m && !S && /* @__PURE__ */ t(w, {
+      y && !f && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.scale"),
-        children: /* @__PURE__ */ t(d, {
-          value: b ? "log" : "linear",
-          options: Ft,
-          onChange: (C) => a.commands.dispatch(new Sn({
-            scaledAesthetic: e,
-            transform: C === "log" ? "log" : "linear"
-          }))
+        children: /* @__PURE__ */ n(d, {
+          value: P ? "log" : "linear",
+          options: Q,
+          onChange: ft
         })
       }),
-      m && !b && /* @__PURE__ */ p(V, { children: [
-        !S && /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ t(w, {
+      y && !P && /* @__PURE__ */ p(q, { children: [
+        !f && /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.startFrom"),
-          children: /* @__PURE__ */ t(d, {
-            value: y,
-            options: Kt,
-            onChange: qt
+          children: /* @__PURE__ */ n(d, {
+            value: R,
+            options: ct,
+            onChange: St
           })
-        }), y === "custom" && /* @__PURE__ */ t(w, {
+        }), R === "custom" && /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.value"),
-          children: /* @__PURE__ */ t(c, {
-            value: m.domainMin ?? null,
-            onChange: (C) => C !== null && _e({ domainMin: C }),
+          children: /* @__PURE__ */ n(c, {
+            value: y.domainMin ?? null,
+            onChange: bt,
             onCommit: a.commands.seal
           })
         })] }),
-        /* @__PURE__ */ t(w, {
+        /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.endAt"),
-          children: /* @__PURE__ */ t(d, {
-            value: f === null ? "auto" : "custom",
-            options: Ht,
-            onChange: Vt
+          children: /* @__PURE__ */ n(d, {
+            value: x === null ? "auto" : "custom",
+            options: dt,
+            onChange: yt
           })
         }),
-        f !== null && /* @__PURE__ */ t(w, {
+        x !== null && /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.value"),
-          children: /* @__PURE__ */ t(c, {
-            value: f,
-            onChange: (C) => C !== null && _e({ domainMax: C }),
+          children: /* @__PURE__ */ n(c, {
+            value: x,
+            onChange: Ct,
             onCommit: a.commands.seal
           })
         })
       ] })
     ] })
   });
-}, Zo = (e) => e === void 0 ? "auto" : e.domainMin !== null && e.domainMin !== void 0 ? "custom" : e.zero === !0 ? "zero" : "auto", Xe = (e, n) => {
-  const r = n === "start" ? e?.[0] : e?.[e.length - 1];
-  return typeof r == "number" ? r : 0;
-}, ke = ({ value: e, onChange: n }) => {
-  const r = R(), o = A(), { TextField: a } = M(), i = e !== null && typeof e != "string", l = (c) => n(c === "" ? null : c);
-  return /* @__PURE__ */ t(w, {
-    label: o("editor.elementsPanel.contentValue"),
-    children: /* @__PURE__ */ t(a, {
+}, hl = (e) => e === void 0 ? "auto" : e.domainMin !== null && e.domainMin !== void 0 ? "custom" : e.zero === !0 ? "zero" : "auto", dn = (e, t) => {
+  const i = t === "start" ? e?.[0] : e?.[e.length - 1];
+  return typeof i == "number" ? i : 0;
+}, Be = ({ value: e, onChange: t }) => {
+  const i = E(), r = T(), { TextField: a } = _(), o = e !== null && typeof e != "string", l = (c) => t(c === "" ? null : c);
+  return /* @__PURE__ */ n(b, {
+    label: r("editor.elementsPanel.contentValue"),
+    children: /* @__PURE__ */ n(a, {
       value: typeof e == "string" ? e : "",
       onChange: l,
-      onCommit: r.commands.seal,
-      isDisabled: i
+      onCommit: i.commands.seal,
+      isDisabled: o
     })
   });
-}, jo = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { Switch: l } = M();
+}, ul = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Switch: l } = _();
   if (!a) return null;
-  const c = a.config.content;
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.elementsPanel.footerSection.caption"),
-    layout: n,
-    preview: r,
-    children: /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ t(w, {
-      label: i("editor.elementsPanel.contentVisible"),
-      children: /* @__PURE__ */ t(l, {
+  const c = a.config.content, s = (d) => {
+    r.commands.dispatch(new we({
+      slot: "caption",
+      isVisible: d
+    }));
+  }, u = (d) => {
+    r.commands.dispatch(new tr({ caption: d }), { transient: !0 });
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.elementsPanel.footerSection.caption"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.elementsPanel.contentVisible"),
+      children: /* @__PURE__ */ n(l, {
         isChecked: c.isCaptionVisible,
-        onChange: (s) => o.commands.dispatch(new ve({
-          slot: "caption",
-          isVisible: s
-        }))
+        onChange: s
       })
-    }), /* @__PURE__ */ t(ke, {
+    }), /* @__PURE__ */ n(Be, {
       value: c.caption,
-      onChange: (s) => o.commands.dispatch(new mn({ caption: s }), { transient: !0 })
+      onChange: u
     })] })
   });
-}, Ye = /^[a-z][a-z\d+.-]*:/i, Wo = {}, Xo = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { Switch: l } = M();
+}, hn = /^[a-z][a-z\d+.-]*:/i, ml = {}, pl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Switch: l } = _();
   if (!a) return null;
-  const c = a.config.content;
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.elementsPanel.sourceSection.title"),
-    layout: n,
-    preview: r,
-    children: /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ t(w, {
-      label: i("editor.elementsPanel.contentVisible"),
-      children: /* @__PURE__ */ t(l, {
+  const c = a.config.content, s = (u) => {
+    r.commands.dispatch(new we({
+      slot: "source",
+      isVisible: u
+    }));
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.elementsPanel.sourceSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.elementsPanel.contentVisible"),
+      children: /* @__PURE__ */ n(l, {
         isChecked: c.isSourceVisible,
-        onChange: (s) => o.commands.dispatch(new ve({
-          slot: "source",
-          isVisible: s
-        }))
+        onChange: s
       })
-    }), /* @__PURE__ */ t(Yo, { source: c.source ?? Wo })] })
+    }), /* @__PURE__ */ n(gl, { source: c.source ?? ml })] })
   });
-}, Yo = ({ source: e }) => {
-  const n = R(), r = A(), { TextField: o } = M(), a = (l) => {
-    const c = (l.label ?? "") !== "" || (l.url ?? "") !== "";
-    n.commands.dispatch(new pn({ source: c ? l : null }), { transient: !0 });
-  }, i = () => {
-    const l = e.url ?? "";
-    l !== "" && !Ye.test(l) && a({
+}, gl = ({ source: e }) => {
+  const t = E(), i = T(), { TextField: r } = _(), a = (s) => {
+    const u = (s.label ?? "") !== "" || (s.url ?? "") !== "";
+    t.commands.dispatch(new rr({ source: u ? s : null }), { transient: !0 });
+  }, o = () => {
+    const s = e.url ?? "";
+    s !== "" && !hn.test(s) && a({
       ...e,
-      url: `https://${l}`
-    }), n.commands.seal();
-  };
-  return /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ t(w, {
-    label: r("editor.elementsPanel.sourceSection.url"),
-    children: /* @__PURE__ */ t(o, {
+      url: `https://${s}`
+    }), t.commands.seal();
+  }, l = (s) => a({
+    ...e,
+    url: s
+  }), c = (s) => a({
+    ...e,
+    label: s
+  });
+  return /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ n(b, {
+    label: i("editor.elementsPanel.sourceSection.url"),
+    children: /* @__PURE__ */ n(r, {
       value: e.url ?? "",
-      onChange: (l) => a({
-        ...e,
-        url: l
-      }),
-      onCommit: i,
-      hasError: Ye.test(e.url ?? "") && !_n(e.url)
+      onChange: l,
+      onCommit: o,
+      hasError: hn.test(e.url ?? "") && !Zr(e.url)
     })
-  }), /* @__PURE__ */ t(w, {
-    label: r("editor.elementsPanel.sourceSection.name"),
-    children: /* @__PURE__ */ t(o, {
+  }), /* @__PURE__ */ n(b, {
+    label: i("editor.elementsPanel.sourceSection.name"),
+    children: /* @__PURE__ */ n(r, {
       value: e.label ?? "",
-      onChange: (l) => a({
-        ...e,
-        label: l
-      }),
-      onCommit: n.commands.seal
+      onChange: c,
+      onCommit: t.commands.seal
     })
   })] });
-}, Qo = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { Switch: l } = M();
+}, vl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Switch: l } = _();
   if (!a) return null;
-  const c = a.config.content;
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.elementsPanel.headerSection.subtitle"),
-    layout: n,
-    preview: r,
-    children: /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ t(w, {
-      label: i("editor.elementsPanel.contentVisible"),
-      children: /* @__PURE__ */ t(l, {
+  const c = a.config.content, s = (d) => {
+    r.commands.dispatch(new we({
+      slot: "subtitle",
+      isVisible: d
+    }));
+  }, u = (d) => {
+    r.commands.dispatch(new ar({ subtitle: d }), { transient: !0 });
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.elementsPanel.headerSection.subtitle"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.elementsPanel.contentVisible"),
+      children: /* @__PURE__ */ n(l, {
         isChecked: c.isSubtitleVisible,
-        onChange: (s) => o.commands.dispatch(new ve({
-          slot: "subtitle",
-          isVisible: s
-        }))
+        onChange: s
       })
-    }), /* @__PURE__ */ t(ke, {
+    }), /* @__PURE__ */ n(Be, {
       value: c.subtitle,
-      onChange: (s) => o.commands.dispatch(new vn({ subtitle: s }), { transient: !0 })
+      onChange: u
     })] })
   });
-}, ye = [
+}, Oe = [
   0.8,
   1,
   1.2,
@@ -2630,93 +2685,589 @@ var qo = "_40zvwv8", z = ({ title: e, layout: n = "fixed", preview: r, accessory
   2.5,
   3,
   4
-], Jo = ye.length / 2, ei = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { RadioGrid: l } = M();
+], fl = Oe.length / 2, bl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { RadioGrid: l } = _();
   if (!a) return null;
-  const { textScale: c } = a.config.appearance, s = (h) => i("editor.elementsPanel.textSizeSection.scaleFormat", { value: `${h}` }), d = ye.map((h) => ({
+  const { textScale: c } = a.config.appearance, s = (h) => o("editor.elementsPanel.textSizeSection.scaleFormat", { value: `${h}` }), u = Oe.map((h) => ({
     value: `${h}`,
     label: s(h)
-  })), u = (h) => {
-    const v = ye.find((m) => `${m}` === h);
-    v !== void 0 && o.commands.dispatch(new cn({ textScale: v }));
+  })), d = (h) => {
+    const v = Oe.find((m) => `${m}` === h);
+    v !== void 0 && r.commands.dispatch(new Zt({ textScale: v }));
   };
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.elementsPanel.textSizeSection.title"),
-    layout: n,
-    preview: r ?? s(c),
-    children: /* @__PURE__ */ t(l, {
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.elementsPanel.textSizeSection.title"),
+    layout: t,
+    preview: i ?? s(c),
+    children: /* @__PURE__ */ n(l, {
       value: `${c}`,
-      options: d,
-      columns: Jo,
-      onChange: u,
-      ariaLabel: i("editor.elementsPanel.textSizeSection.title")
+      options: u,
+      columns: fl,
+      onChange: d,
+      ariaLabel: o("editor.elementsPanel.textSizeSection.title")
     })
   });
-}, ti = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { Switch: l } = M();
+}, Cl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Switch: l } = _();
   if (!a) return null;
-  const c = a.config.content;
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.elementsPanel.headerSection.toggleTitle"),
-    layout: n,
-    preview: r,
-    children: /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ t(w, {
-      label: i("editor.elementsPanel.contentVisible"),
-      children: /* @__PURE__ */ t(l, {
+  const c = a.config.content, s = (d) => {
+    r.commands.dispatch(new we({
+      slot: "title",
+      isVisible: d
+    }));
+  }, u = (d) => {
+    r.commands.dispatch(new or({ title: d }), { transient: !0 });
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.elementsPanel.headerSection.toggleTitle"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.elementsPanel.contentVisible"),
+      children: /* @__PURE__ */ n(l, {
         isChecked: c.isTitleVisible,
-        onChange: (s) => o.commands.dispatch(new ve({
-          slot: "title",
-          isVisible: s
-        }))
+        onChange: s
       })
-    }), /* @__PURE__ */ t(ke, {
+    }), /* @__PURE__ */ n(Be, {
       value: c.title,
-      onChange: (s) => o.commands.dispatch(new gn({ title: s }), { transient: !0 })
+      onChange: u
     })] })
   });
-}, Oi = ({ children: e, ...n }) => /* @__PURE__ */ t(Rt.Root, {
-  ...n,
-  children: e ?? /* @__PURE__ */ p(V, { children: [
-    /* @__PURE__ */ t(ti, {}),
-    /* @__PURE__ */ t(Qo, {}),
-    /* @__PURE__ */ t(jo, {}),
-    /* @__PURE__ */ t(Xo, {}),
-    /* @__PURE__ */ t(ei, {})
+}, ws = ({ children: e, ...t }) => /* @__PURE__ */ n(at.Root, {
+  ...t,
+  children: e ?? /* @__PURE__ */ p(q, { children: [
+    /* @__PURE__ */ n(Cl, {}),
+    /* @__PURE__ */ n(vl, {}),
+    /* @__PURE__ */ n(ul, {}),
+    /* @__PURE__ */ n(pl, {}),
+    /* @__PURE__ */ n(bl, {})
   ] })
-}), Li = ({ children: e, ...n }) => /* @__PURE__ */ t(Rt.Root, {
-  ...n,
-  children: e ?? /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ t(We, { axis: "x" }), /* @__PURE__ */ t(We, { axis: "y" })] })
-}), be = [
+}), Ps = ({ children: e, ...t }) => /* @__PURE__ */ n(at.Root, {
+  ...t,
+  children: e ?? /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ n(cn, { axis: "x" }), /* @__PURE__ */ n(cn, { axis: "y" })] })
+}), Ie = (e) => `${e}px`, it = (e) => `${Math.round(e * 100)}%`, Sl = (e) => `${e}°`, yl = 24, un = ["dim", "desaturate"], Is = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Slider: l, ToggleGroup: c } = _();
+  if (!a) return null;
+  const { cornerRadius: s } = a.config.appearance, u = jr(a.spec), d = un.map((m) => ({
+    value: m,
+    label: o(m === "dim" ? "editor.highlighting.highlightStyle.tint" : "editor.highlighting.highlightStyle.grey")
+  })), h = (m) => {
+    r.commands.dispatch(new $t({ cornerRadius: m }), { transient: !0 });
+  }, v = (m) => {
+    const g = un.find((y) => y === m);
+    g && r.commands.dispatch(new mr({ dimStyle: g }));
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.colorPanel.appearanceSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.colorPanel.borderSection.cornerRadius"),
+      children: /* @__PURE__ */ n(l, {
+        value: s,
+        min: 0,
+        max: yl,
+        step: 1,
+        formatValue: Ie,
+        onChange: h,
+        onCommit: r.commands.seal
+      })
+    }), /* @__PURE__ */ n(b, {
+      label: o("editor.colorPanel.appearanceSection.highlightStyle"),
+      children: /* @__PURE__ */ n(c, {
+        value: u,
+        options: d,
+        onChange: v
+      })
+    })] })
+  });
+}, Ue = (e, t) => {
+  const { colorScheme: i } = Me();
+  return O(() => {
+    const r = e?.layers.find((a) => a.id === t);
+    return r === void 0 ? null : Fr({ colorScheme: i }).geomReaders(r);
+  }, [
+    e,
+    t,
+    i
+  ]);
+}, wl = 0.05, xs = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Slider: l, ToggleGroup: c } = _(), s = a ? In(a.spec.layers, "bar") : void 0, u = Ue(a, s?.id ?? null);
+  if (!a || !s || a.coordSystem.type === "polar" && a.coordSystem.bandAxis === null) return null;
+  const d = (m) => {
+    r.commands.dispatch(new nr({
+      layerId: s.id,
+      width: m
+    }), { transient: !0 });
+  }, h = (m) => {
+    const g = We.find((y) => y === m);
+    g && r.commands.dispatch(new er({
+      layerId: s.id,
+      borderRadius: g
+    }));
+  }, v = We.map((m) => ({
+    value: m,
+    label: o(`editor.graphPanel.barSection.roundingOptions.${m}`)
+  }));
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.graphPanel.barSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.barSection.thickness"),
+      children: /* @__PURE__ */ n(l, {
+        value: s.params.width,
+        min: qt,
+        max: Ut,
+        step: wl,
+        formatValue: it,
+        onChange: d,
+        onCommit: r.commands.seal
+      })
+    }), /* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.barSection.rounding"),
+      layout: "stack",
+      children: /* @__PURE__ */ n(c, {
+        value: u?.get("borderRadius") ?? Vt,
+        options: v,
+        onChange: h
+      })
+    })] })
+  });
+}, Ts = ({ layerId: e, title: t, layout: i = "collapsible", preview: r }) => {
+  const a = E(), o = F(a), l = T(), { Switch: c } = _();
+  if (!o) return null;
+  const s = e === void 0 ? o.spec.layers[0] : o.spec.layers.find((N) => N.id === e);
+  if (!s) return null;
+  const { showDataLabels: u, format: d, showStackTotals: h, showCategoryLabels: v } = s.dataLabels, m = o.coordSystem.type === "polar", g = s.geom === "bar", y = s.position === "stack" || s.position === "fill", I = g && !m && s.position === "stack", S = g && (!m || u), f = g || s.geom === "area" && y;
+  if (!Dr(s.geom, o.coordSystem.type)) return null;
+  const P = (N) => {
+    const D = new Tr({
+      layerId: s.id,
+      showDataLabels: N
+    });
+    a.commands.dispatch(D);
+  }, x = (N) => {
+    const D = new ir({
+      layerId: s.id,
+      format: N ? "percentage" : "absolute"
+    });
+    a.commands.dispatch(D);
+  }, R = (N) => {
+    const D = new Nr({
+      layerId: s.id,
+      showStackTotals: N
+    });
+    a.commands.dispatch(D);
+  }, K = (N) => {
+    const D = new xr({
+      layerId: s.id,
+      showCategoryLabels: N
+    });
+    a.commands.dispatch(D);
+  };
+  return /* @__PURE__ */ n(H, {
+    title: t ?? l("editor.graphPanel.graphOptionsSection.title"),
+    layout: i,
+    preview: r,
+    children: /* @__PURE__ */ p(V, { children: [
+      /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.graphOptions.dataLabels"),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: u,
+          onChange: P
+        })
+      }),
+      u && f && /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.graphOptions.showPercentages"),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: d === "percentage",
+          onChange: x
+        })
+      }),
+      I && /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.graphOptions.stackTotals"),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: h,
+          onChange: R
+        })
+      }),
+      S && /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.graphOptions.categoryLabels"),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: v,
+          onChange: K
+        })
+      })
+    ] })
+  });
+}, mn = [
+  "solid",
+  "dashed",
+  "dotted"
+], Pl = Number.parseFloat(Nt.gridLineWidth), Il = 8, xl = 0, As = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Slider: l, Switch: c, ToggleGroup: s } = _(), { themeValues: u } = Me();
+  if (!a) return null;
+  const d = a.guides.axes.filter(Tl);
+  if (d.length === 0) return null;
+  const h = a.coordSystem.type !== "polar", v = d.some((f) => f.gridVisible), m = a.config.axes.y.grid, g = mn.map((f) => ({
+    value: f,
+    label: o(`editor.graphPanel.gridSection.lineStyles.${f}`)
+  })), y = (f) => (P) => {
+    r.commands.dispatch(new cr({
+      axis: f,
+      isVisible: P
+    }));
+  }, I = (f) => {
+    const P = mn.find((x) => x === f);
+    P && r.commands.dispatch(new lr({
+      axis: "both",
+      lineStyle: P
+    }));
+  }, S = (f) => {
+    r.commands.dispatch(new sr({
+      axis: "both",
+      lineWidth: f
+    }), { transient: !0 });
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.graphPanel.gridSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [d.map((f) => /* @__PURE__ */ n(b, {
+      label: o(Al(f)),
+      children: /* @__PURE__ */ n(c, {
+        isChecked: f.gridVisible,
+        onChange: y(f.scaleAestheticKey)
+      })
+    }, f.scaleAestheticKey)), h && v && /* @__PURE__ */ p(q, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.gridSection.gridStyle"),
+      children: /* @__PURE__ */ n(s, {
+        value: m.lineStyle,
+        options: g,
+        onChange: I
+      })
+    }), /* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.gridSection.gridThickness"),
+      children: /* @__PURE__ */ n(l, {
+        value: m.lineWidth ?? At(u.gridLineWidth, Pl),
+        min: xl,
+        max: Il,
+        step: 0.5,
+        formatValue: Ie,
+        onChange: S,
+        onCommit: r.commands.seal
+      })
+    })] })] })
+  });
+}, Tl = (e) => e.scaleAestheticKey === "x" || e.scaleAestheticKey === "y", Al = (e) => e.geometry === "radial" ? "editor.graphPanel.gridSection.rings" : e.geometry === "circular" ? "editor.graphPanel.gridSection.spokes" : e.scaleAestheticKey === "x" ? "editor.graphPanel.gridSection.verticalGridLines" : "editor.graphPanel.gridSection.horizontalGridLines", Ll = "total", lt = [
+  "total",
+  "average",
+  "current"
+], Nl = ["total"], pn = ["previous", "first"], gn = [
+  "auto",
+  "small",
+  "medium",
+  "large"
+], Ls = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Switch: l, ToggleGroup: c } = _();
+  if (!a) return null;
+  const s = a.config.headline, u = s.show !== "none", d = a.coordSystem, h = d.type === "polar", v = d.type === "polar" && d.innerRadius > 0, m = a.layers.some((w) => w.summary.grandTotal !== void 0);
+  if (h && !m) return null;
+  const g = h ? Nl : lt, y = a.guides.headline, I = y?.kind === "perGroup" && y.items.some((w) => w.comparison !== null), S = g.map((w) => ({
+    value: w,
+    label: o(`editor.graphPanel.headlineNumberSection.metrics.${w}`)
+  })), f = pn.map((w) => ({
+    value: w,
+    label: o(`editor.graphPanel.headlineNumberSection.comparison.${w}`)
+  })), P = gn.map((w) => ({
+    value: w,
+    label: o(w === "auto" ? "editor.graphPanel.numberFormat.options.auto" : `editor.graphPanel.headlineNumberSize.sizes.${w}`)
+  })), x = [{
+    value: "above",
+    label: o("editor.graphPanel.headlineNumberSection.position.above")
+  }, {
+    value: "center",
+    label: o("editor.graphPanel.headlineNumberSection.position.center")
+  }], R = (w) => {
+    r.commands.dispatch(new $e({ show: w ? Ll : "none" }));
+  }, K = (w) => {
+    const L = g.find((Q) => Q === w);
+    L && r.commands.dispatch(new $e({ show: L }));
+  }, N = (w) => {
+    const L = pn.find((Q) => Q === w);
+    L && r.commands.dispatch(new dr({ compareWith: L }));
+  }, D = (w) => {
+    const L = gn.find((Q) => Q === w);
+    L && r.commands.dispatch(new ur({ size: L }));
+  }, A = (w) => {
+    r.commands.dispatch(new hr({ position: w === "center" ? "center" : "above" }));
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.graphPanel.headlineNumberSection.title"),
+    layout: t,
+    preview: i ?? Ol(o, s.show),
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.headlineNumberSection.toggle"),
+      children: /* @__PURE__ */ n(l, {
+        isChecked: u,
+        onChange: R
+      })
+    }), u && /* @__PURE__ */ p(q, { children: [
+      S.length > 1 && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.headlineNumberSection.metricLabel"),
+        layout: "stack",
+        children: /* @__PURE__ */ n(c, {
+          value: s.show,
+          options: S,
+          onChange: K
+        })
+      }),
+      I && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.headlineNumberSection.compareWithLabel"),
+        layout: "stack",
+        children: /* @__PURE__ */ n(c, {
+          value: Yr(s.compareWith),
+          options: f,
+          onChange: N
+        })
+      }),
+      /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.headlineNumberSize.sizeLabel"),
+        children: /* @__PURE__ */ n(c, {
+          value: s.size,
+          options: P,
+          onChange: D
+        })
+      }),
+      v && /* @__PURE__ */ n(b, {
+        label: o("editor.axesPanel.controls.position"),
+        children: /* @__PURE__ */ n(c, {
+          value: s.position,
+          options: x,
+          onChange: A
+        })
+      })
+    ] })] })
+  });
+}, Ol = (e, t) => {
+  const i = lt.find((r) => r === t);
+  return i && e(`editor.graphPanel.headlineNumberSection.metrics.${i}`);
+}, Te = [
   "top",
   "bottom",
   "left",
   "right",
   "none"
-], Ei = ({ positions: e, title: n, layout: r = "collapsible", preview: o }) => {
-  const a = R(), i = H(a), l = A(), { ToggleGroup: c } = M();
+], vn = [
+  "auto",
+  "start",
+  "center",
+  "end"
+], fn = [
+  "auto",
+  "pill",
+  "direct"
+], Ns = ({ positions: e, title: t, layout: i = "collapsible", preview: r }) => {
+  const a = E(), o = F(a), l = T(), { ToggleGroup: c } = _();
+  if (!o) return null;
+  const s = o.config.legend.position, u = e ?? Te, d = o.guides.legends.drawn[0], h = Rr({
+    legendPosition: o.guides.legends.position,
+    coordSystem: o.coordSystem,
+    layers: o.layers
+  }), v = o.guides.headline?.kind === "perGroup", m = o.guides.colorGroups.length > 0;
+  if (s === "auto" && d === void 0 && !h && (v || !m)) return null;
+  const g = d?.position ?? "none", y = s === "auto" ? g : s, I = Te.filter((A) => A === y || u.includes(A)).map((A) => ({
+    value: A,
+    label: l(`editor.graphPanel.legendSection.${A}`)
+  })), S = (A) => {
+    const w = Te.find((L) => L === A);
+    w && a.commands.dispatch(new vr({ position: w }));
+  }, f = (A) => {
+    const w = vn.find((L) => L === A);
+    w && a.commands.dispatch(new pr({ align: w }));
+  }, P = (A) => {
+    const w = fn.find((L) => L === A);
+    w && a.commands.dispatch(new gr({ display: w }));
+  }, x = vn.map((A) => ({
+    value: A,
+    label: l(`editor.graphPanel.legendSection.align.${A}`)
+  })), R = fn.map((A) => ({
+    value: A,
+    label: l(`editor.graphPanel.legendSection.display.${A}`)
+  })), K = t ?? l("editor.graphPanel.legendSection.title"), N = I.find((A) => A.value === y)?.label, D = d !== void 0;
+  return /* @__PURE__ */ n(H, {
+    title: K,
+    layout: i,
+    preview: r ?? N,
+    children: /* @__PURE__ */ p(V, { children: [
+      /* @__PURE__ */ n(b, {
+        label: l("editor.axesPanel.controls.position"),
+        layout: "stack",
+        children: /* @__PURE__ */ n(c, {
+          value: y,
+          options: I,
+          onChange: S
+        })
+      }),
+      D && /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.legendSection.alignLabel"),
+        layout: "stack",
+        children: /* @__PURE__ */ n(c, {
+          value: o.config.legend.align,
+          options: x,
+          onChange: f
+        })
+      }),
+      h && /* @__PURE__ */ n(b, {
+        label: l("editor.graphPanel.legendSection.displayLabel"),
+        layout: "stack",
+        children: /* @__PURE__ */ n(c, {
+          value: o.config.legend.display,
+          options: R,
+          onChange: P
+        })
+      })
+    ] })
+  });
+}, El = 1, _l = 20, kl = 0.5, st = ({ layerId: e }) => {
+  const t = E(), i = F(t), { Slider: r } = _(), a = Ue(i, e);
   if (!i) return null;
-  const s = i.config.legend.position, d = e ?? be, u = i.guides.legends[0]?.position ?? "none", h = s === "auto" ? u : s, v = be.filter((S) => S === h || d.includes(S)).map((S) => ({
-    value: S,
-    label: l(`editor.graphPanel.legendSection.${S}`)
-  })), m = (S) => {
-    const b = be.find((f) => f === S);
-    b && a.commands.dispatch(new fn({ position: b }));
-  }, g = n ?? l("editor.graphPanel.legendSection.title"), x = v.find((S) => S.value === h)?.label;
-  return /* @__PURE__ */ t(z, {
-    title: g,
-    layout: r,
-    preview: o ?? x,
-    children: /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(w, {
-      label: l("editor.axesPanel.controls.position"),
-      layout: "stack",
-      children: /* @__PURE__ */ t(c, {
-        value: h,
-        options: v,
-        onChange: m
+  const o = (l) => {
+    const c = new Sr({
+      layerId: e,
+      size: l
+    });
+    t.commands.dispatch(c, { transient: !0 });
+  };
+  return /* @__PURE__ */ n(r, {
+    value: a?.get("size") ?? Kt,
+    min: El,
+    max: _l,
+    step: kl,
+    formatValue: Ie,
+    onChange: o,
+    onCommit: t.commands.seal
+  });
+}, Ml = 1, Rl = 10, Dl = 0.1, zl = [
+  "gap",
+  "zero",
+  "connect"
+], Os = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Select: l, Slider: c, Switch: s, ToggleGroup: u } = _(), d = a?.spec.layers ?? [], h = In(d, "line", "area"), v = Ue(a, h?.id ?? null);
+  if (!a || !h) return null;
+  const m = a.coordSystem.type === "polar", g = Vl(o, h), y = Hl(h, d), I = bn(a.spec, h.geom, "strokeWidth", h.id), S = typeof I == "number", f = h.geom === "line" ? h : void 0, P = [{
+    value: "auto",
+    label: o("editor.graphPanel.numberFormat.options.auto")
+  }, {
+    value: "custom",
+    label: o("editor.graphPanel.numberFormat.options.custom")
+  }], x = (w) => {
+    r.commands.dispatch(new Lr({
+      layerId: h.id,
+      showPoints: w
+    }));
+  }, R = (w) => {
+    f && r.commands.dispatch(new Ar({
+      layerId: f.id,
+      showFill: w
+    }));
+  }, K = (w) => {
+    r.commands.dispatch(new fr({
+      layerId: h.id,
+      interpolate: w ? "catmull-rom" : "linear"
+    }));
+  }, N = (w) => {
+    const L = v?.get("strokeWidth") ?? Gt;
+    r.commands.dispatch(new Ze({
+      layerId: h.id,
+      lineWidth: w === "custom" ? L : null
+    }));
+  }, D = (w) => {
+    r.commands.dispatch(new Ze({
+      layerId: h.id,
+      lineWidth: w
+    }), { transient: !0 });
+  }, A = (w) => {
+    const L = Fl(w);
+    L && r.commands.dispatch(new br({
+      layerId: h.id,
+      missingValues: L
+    }));
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.fineTunePanel.lineStyleSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [
+      /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.graphOptions.showPoints"),
+        children: /* @__PURE__ */ n(s, {
+          isChecked: y !== void 0,
+          onChange: x
+        })
+      }),
+      y && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.pointSize.label"),
+        children: /* @__PURE__ */ n(st, { layerId: y.id })
+      }),
+      f && !m && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.graphOptions.lineFill"),
+        children: /* @__PURE__ */ n(s, {
+          isChecked: bn(a.spec, "line", "fillAlpha", f.id) !== void 0,
+          onChange: R
+        })
+      }),
+      !m && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.graphOptions.smoothLines"),
+        children: /* @__PURE__ */ n(s, {
+          isChecked: h.params.interpolate === "catmull-rom",
+          onChange: K
+        })
+      }),
+      /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.lineThickness.label"),
+        children: /* @__PURE__ */ n(u, {
+          value: S ? "custom" : "auto",
+          options: P,
+          onChange: N
+        })
+      }),
+      S && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.numberFormat.valueLabel"),
+        children: /* @__PURE__ */ n(c, {
+          value: I,
+          min: Ml,
+          max: Rl,
+          step: Dl,
+          formatValue: Ie,
+          onChange: D,
+          onCommit: r.commands.seal
+        })
+      }),
+      !m && g.length > 1 && /* @__PURE__ */ n(b, {
+        label: o("editor.fineTunePanel.detailSection.missingValues"),
+        children: /* @__PURE__ */ n(l, {
+          value: h.params.missingValues,
+          options: g,
+          onChange: A
+        })
       })
-    }) })
+    ] })
   });
-}, ni = "k", ri = 2, ai = 5, we = [
+}, Fl = (e) => zl.find((t) => t === e), bn = (e, t, i, r) => Gr(e.styles.overrides, _r(t, r))?.declarations?.[i], Hl = (e, t) => Le(t, "point").find((i) => xn(i, [e])), Vl = (e, t) => {
+  const i = [{
+    value: "gap",
+    label: e("editor.graphPanel.treatEmptyValues.leaveGap.label")
+  }, {
+    value: "zero",
+    label: e("editor.graphPanel.treatEmptyValues.fillZero.label")
+  }];
+  return t.position !== "stack" && t.position !== "fill" && i.push({
+    value: "connect",
+    label: e("editor.graphPanel.treatEmptyValues.connectGaps.label")
+  }), t.geom === "area" ? i.filter((r) => r.value !== "gap") : i;
+}, Kl = "k", Gl = 2, Bl = 0, Ul = 5, Ee = [
   {
     value: "k",
     labelKey: "thousands"
@@ -2729,101 +3280,161 @@ var qo = "_40zvwv8", z = ({ title: e, layout: n = "fixed", preview: r, accessory
     value: "b",
     labelKey: "billions"
   }
-], oi = ["auto", "none"], Mi = ({ title: e, layout: n = "collapsible", preview: r }) => {
-  const o = R(), a = H(o), i = A(), { NumberField: l, ToggleGroup: c } = M();
+], ql = ["auto", "none"], Es = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { NumberField: l, ToggleGroup: c } = _();
   if (!a) return null;
-  const { abbreviation: s, decimals: d } = a.config.numberFormat, u = ii(s) !== void 0, h = d !== "auto", v = (f) => f.map((y) => ({
-    value: y,
-    label: i(`editor.graphPanel.numberFormat.options.${y}`)
-  })), m = we.map(({ value: f, labelKey: y }) => ({
-    value: f,
-    label: i(`common.abbreviations.${y}`)
-  })), g = (f) => {
-    o.commands.dispatch(new bn({ abbreviation: f }));
-  }, x = (f) => {
-    const y = oi.find((O) => O === f);
-    g(y ?? ni);
-  }, S = (f) => {
-    const y = we.find((O) => O.value === f);
-    y && g(y.value);
-  }, b = (f) => {
-    o.commands.dispatch(new Re({ decimals: f === "custom" ? ri : "auto" }));
+  const { abbreviation: s, decimals: u } = a.config.numberFormat, d = Wl(s) !== void 0, h = u !== "auto", v = (P) => P.map((x) => ({
+    value: x,
+    label: o(`editor.graphPanel.numberFormat.options.${x}`)
+  })), m = Ee.map(({ value: P, labelKey: x }) => ({
+    value: P,
+    label: o(`common.abbreviations.${x}`)
+  })), g = (P) => {
+    r.commands.dispatch(new Cr({ abbreviation: P }));
+  }, y = (P) => {
+    const x = ql.find((R) => R === P);
+    g(x ?? Kl);
+  }, I = (P) => {
+    const x = Ee.find((R) => R.value === P);
+    x && g(x.value);
+  }, S = (P) => {
+    r.commands.dispatch(new Xe({ decimals: P === "custom" ? Gl : "auto" }));
+  }, f = (P) => {
+    P !== null && r.commands.dispatch(new Xe({ decimals: P }), { transient: !0 });
   };
-  return /* @__PURE__ */ t(z, {
-    title: e ?? i("editor.graphPanel.numberFormatSection.title"),
-    layout: n,
-    preview: r,
-    children: /* @__PURE__ */ p(q, { children: [
-      /* @__PURE__ */ t(w, {
-        label: i("editor.graphPanel.numberFormat.abbreviationLabel"),
-        children: /* @__PURE__ */ t(c, {
-          value: u ? "custom" : s,
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.graphPanel.numberFormatSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [
+      /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.numberFormat.abbreviationLabel"),
+        children: /* @__PURE__ */ n(c, {
+          value: d ? "custom" : s,
           options: v([
             "auto",
             "none",
             "custom"
           ]),
-          onChange: x
+          onChange: y
         })
       }),
-      u && /* @__PURE__ */ t(w, {
-        label: i("editor.graphPanel.numberFormat.valueLabel"),
-        children: /* @__PURE__ */ t(c, {
+      d && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.numberFormat.valueLabel"),
+        children: /* @__PURE__ */ n(c, {
           value: s,
           options: m,
-          onChange: S
+          onChange: I
         })
       }),
-      /* @__PURE__ */ t(w, {
-        label: i("editor.graphPanel.numberFormat.decimalPlacesLabel"),
-        children: /* @__PURE__ */ t(c, {
+      /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.numberFormat.decimalPlacesLabel"),
+        children: /* @__PURE__ */ n(c, {
           value: h ? "custom" : "auto",
           options: v(["auto", "custom"]),
-          onChange: b
+          onChange: S
         })
       }),
-      h && /* @__PURE__ */ t(w, {
-        label: i("editor.graphPanel.numberFormat.valueLabel"),
-        children: /* @__PURE__ */ t(l, {
-          value: d,
-          min: 0,
-          max: ai,
-          onChange: (f) => {
-            f !== null && o.commands.dispatch(new Re({ decimals: f }), { transient: !0 });
-          },
-          onCommit: o.commands.seal
+      h && /* @__PURE__ */ n(b, {
+        label: o("editor.graphPanel.numberFormat.valueLabel"),
+        children: /* @__PURE__ */ n(l, {
+          value: u,
+          min: Bl,
+          max: Ul,
+          onChange: f,
+          onCommit: r.commands.seal
         })
       })
     ] })
   });
-}, ii = (e) => we.find((n) => n.value === e);
+}, Wl = (e) => Ee.find((t) => t.value === e), _s = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = F(E()), a = T();
+  if (!r) return null;
+  const o = $l(r.spec.layers);
+  return o ? /* @__PURE__ */ n(H, {
+    title: e ?? a("editor.graphPanel.pointSize.label"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ n(V, { children: /* @__PURE__ */ n(b, {
+      label: a("editor.graphPanel.numberFormat.valueLabel"),
+      children: /* @__PURE__ */ n(st, { layerId: o.id })
+    }) })
+  }) : null;
+}, $l = (e) => {
+  const t = Le(e, "line", "area");
+  return Le(e, "point").find((i) => !xn(i, t));
+}, Zl = 0.9, Xl = 360, jl = 0.05, Yl = 15, ks = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const r = E(), a = F(r), o = T(), { Slider: l } = _();
+  if (!a || a.spec.coords.coordType !== "polar") return null;
+  const { innerRadius: c, startAngle: s } = a.spec.coords.params, u = (h) => {
+    r.commands.dispatch(new yr({ innerRadius: h }), { transient: !0 });
+  }, d = (h) => {
+    r.commands.dispatch(new wr({ startAngle: h }), { transient: !0 });
+  };
+  return /* @__PURE__ */ n(H, {
+    title: e ?? o("editor.graphPanel.polarSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ p(V, { children: [/* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.polarSection.innerRadius"),
+      children: /* @__PURE__ */ n(l, {
+        value: c,
+        min: 0,
+        max: Zl,
+        step: jl,
+        formatValue: it,
+        onChange: u,
+        onCommit: r.commands.seal
+      })
+    }), /* @__PURE__ */ n(b, {
+      label: o("editor.graphPanel.polarSection.startAngle"),
+      children: /* @__PURE__ */ n(l, {
+        value: s,
+        min: 0,
+        max: Xl - 1,
+        step: Yl,
+        formatValue: Sl,
+        onChange: d,
+        onCommit: r.commands.seal
+      })
+    })] })
+  });
+};
 export {
-  Li as AxesPanel,
-  We as AxisSection,
-  qa as Button,
-  jo as CaptionSection,
-  Ni as EditableGraphRenderer,
-  Rt as EditorPanel,
-  Oi as ElementsPanel,
-  si as IntlProvider,
-  Ei as LegendSection,
-  $a as NumberField,
-  Mi as NumberFormatSection,
-  _o as PANEL_ROOT_ATTRIBUTE,
-  Xa as RadioGrid,
-  w as Row,
-  z as Section,
-  oo as Select,
-  vo as Slider,
-  Xo as SourceSection,
-  Qo as SubtitleSection,
-  Co as Switch,
-  wo as TextField,
-  ei as TextSizeSection,
-  ti as TitleSection,
-  Po as ToggleGroup,
-  Ti as ToggledSection,
-  M as useControls,
-  Mo as usePanelExpansion,
-  R as usePanelGraph
+  Is as AppearanceSection,
+  Ps as AxesPanel,
+  cn as AxisSection,
+  xs as BarSection,
+  oi as Button,
+  ul as CaptionSection,
+  Ss as EditableGraphRenderer,
+  at as EditorPanel,
+  ws as ElementsPanel,
+  Ts as GraphOptionsSection,
+  As as GridSection,
+  Ls as HeadlineSection,
+  es as IntlProvider,
+  Ns as LegendSection,
+  Os as LineSection,
+  ci as NumberField,
+  Es as NumberFormatSection,
+  ji as PANEL_ROOT_ATTRIBUTE,
+  _s as PointSection,
+  ks as PolarSection,
+  mi as RadioGrid,
+  b as Row,
+  H as Section,
+  wi as Select,
+  Ei as Slider,
+  pl as SourceSection,
+  vl as SubtitleSection,
+  Ri as Switch,
+  Fi as TextField,
+  bl as TextSizeSection,
+  Cl as TitleSection,
+  Ki as ToggleGroup,
+  ys as ToggledSection,
+  _ as useControls,
+  Zi as usePanelExpansion,
+  E as usePanelGraph
 };