@graphysdk/react-renderer 1.8.1-beta.1786366143449 → 1.8.1-beta.1786446230102

package/dist/editable.mjs

@@ -1,33 +1,33 @@
-import { B as _e, D as he, E as It, F as Tt, I as At, L as Re, M as Ss, N as A, Q as Lt, S as J, V as se, Z as Ot, b as I, c as Nt, d as q, et as kt, f as ge, h as Sn, i as Mt, k as De, l as Et, m as _t, n as R, o as wn, p as Le, r as Rt, rt as G, s as Dt, t as zt, tt as K, u as ve, v as Ht, x as j, y as Se } from "./history-chords-C4ubfbkC.js";
-import { g as Vt } from "./font-values-CPxYeqns.js";
-import { AddAnnotationCommand as we, AddHighlightCommand as Ft, BORDER_RADIUS_TOKENS as Ze, CONSTANT_VARIABLES as Bt, DEFAULT_BAR_BORDER_RADIUS as Kt, DEFAULT_POINT_SIZE as Gt, DEFAULT_STROKE_WIDTH as Ut, DIFFERENCE_ARROW_DEFAULTS as Wt, MAX_BAR_WIDTH as qt, MIN_BAR_WIDTH as $t, RESTING_HOVER_STATE as xn, RemoveAnnotationCommand as ze, RemoveHighlightCommand as Zt, SetAppearanceCornerRadiusCommand as jt, SetAppearanceTextScaleCommand as Xt, SetAxisLabelCommand as Yt, SetAxisPositionCommand as Qt, SetAxisTickModeCommand as Jt, SetAxisTicksVisibilityCommand as er, SetAxisVisibilityCommand as nr, SetBarBorderRadiusCommand as tr, SetBarWidthCommand as rr, SetChartTypeCommand as ar, SetContentCaptionCommand as or, SetContentSourceCommand as ir, SetContentSubtitleCommand as lr, SetContentTitleCommand as sr, SetDataLabelsFormatCommand as cr, SetGridLineStyleCommand as dr, SetGridLineWidthCommand as hr, SetGridVisibilityCommand as ur, SetHeadlineCompareWithCommand as mr, SetHeadlinePositionCommand as pr, SetHeadlineShowCommand as je, SetHeadlineSizeCommand as gr, SetHighlightDimStyleCommand as vr, SetLegendAlignCommand as fr, SetLegendDisplayCommand as Cr, SetLegendPositionCommand as br, SetLineInterpolationCommand as yr, SetLineMissingValuesCommand as Sr, SetLineWidthCommand as Xe, SetNumberFormatAbbreviationCommand as wr, SetNumberFormatDecimalsCommand as Ye, SetPointSizeCommand as xr, SetPolarInnerRadiusCommand as Pr, SetPolarStartAngleCommand as Ir, SetScaleDomainCommand as pe, SetScaleReverseCommand as Tr, SetScaleTransformCommand as Ar, SetScaleZeroCommand as Qe, ToggleCategoryLabelsCommand as Lr, ToggleContentVisibilityCommand as xe, ToggleDataLabelsCommand as Or, ToggleLineFillCommand as Nr, ToggleLinePointsVisibilityCommand as kr, ToggleStackTotalsCommand as Mr, UpdateAnnotationCommand as Pn, areAnchorsEqual as In, areEndpointsComparable as Er, buildEditMenuTriggerRegion as _r, buildLayerStyleAddress as Rr, buildObservationAnchor as Dr, buildObservationPredicate as zr, canAnchorDirectLabels as Hr, canPlaceDataLabels as Vr, createObservationAnchorParser as Fr, createStyleResolver as Br, extractVariableName as Kr, filterLayersByGeoms as Oe, findHighlightsAtObservation as Gr, findLayerByGeom as Tn, findObservationAttachment as Ur, findStyleRule as Wr, formatDifferenceLabel as qr, getColor as $r, hasMultipleGroups as Zr, inferDifferenceArrowEndpoints as jr, isCompanionLayer as An, isObservationAttachmentKind as Xr, isPointWithinEditMenuTrigger as Ln, isSafeUrl as Yr, projectAnchorToPanel as Qr, readChartType as Jr, readHighlightDimStyle as ea, resolveComparisonBasis as na, resolveObservationPoint as Ne, stepDifferenceArrowEndpoint as ta, toPanelCursor as He } from "@graphysdk/viz-engine";
-import { createContext as ue, useCallback as fe, useContext as ae, useEffect as V, useId as de, useMemo as k, useRef as Ce, useState as $ } from "react";
-import { Fragment as W, jsx as n, jsxs as m } from "react/jsx-runtime";
-import { useShallow as Ve } from "zustand/react/shallow";
-import { createPortal as ra } from "react-dom";
-import re from "clsx";
-import { assignInlineVars as On } from "@vanilla-extract/dynamic";
-import { Menu as _ } from "@base-ui/react/menu";
-import { Menu as X } from "@base-ui/react";
-import { Accordion as le } from "@base-ui/react/accordion";
-import { NumberField as Je } from "@base-ui/react/number-field";
-import { Radio as Nn } from "@base-ui/react/radio";
-import { RadioGroup as kn } 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 en } from "@base-ui/react/switch";
-import { Input as aa } from "@base-ui/react/input";
-import './editable.css';var oa = "data-graphy-chart-chrome", ia = "data-graphy-chart-menu", Mn = { [ia]: "" }, be = (e) => ({ [oa]: e }), En = (e, t) => e instanceof Element && e.closest(`[data-graphy-chart-chrome="${CSS.escape(t)}"]`) !== null, la = (e) => e instanceof Element && e.closest("[data-graphy-chart-menu]") !== null, sa = (e) => e instanceof Element && e.closest("[data-graphy-chart-chrome]") !== null, ce = (e, t, i) => e instanceof Node && (t.contains(e) || En(e, i)), ca = "cml7ha0", _n = ue(null), da = ({ children: e }) => {
-  const { chartId: t } = G(), [i] = $(Re), [r, o] = $(null);
-  return i === null ? null : /* @__PURE__ */ m(W, { children: [ra(/* @__PURE__ */ n("div", {
-    ref: o,
-    className: ca,
-    ...be(t)
-  }), i), /* @__PURE__ */ n(_n.Provider, {
-    value: r,
+import { B as De, D as ue, E as Nt, F as kt, I as Rt, L as He, M as ac, N as I, Q as Et, S as ee, V as de, Z as _t, b as T, c as Dt, d as Z, et as Ht, f as ve, h as Tn, i as Vt, k as Ve, l as zt, m as Ft, n as _, o as Pn, p as Me, r as Bt, rt as U, s as Gt, t as Kt, tt as K, u as Ce, v as Ut, x as X, y as we } from "./history-chords-ClsfSt3J.js";
+import { g as Wt } from "./font-values-CPxYeqns.js";
+import { ARROW_DEFAULTS as Zt, AddAnnotationCommand as j, AddHighlightCommand as qt, BORDER_RADIUS_TOKENS as je, CONSTANT_VARIABLES as $t, DEFAULT_BAR_BORDER_RADIUS as Xt, DEFAULT_POINT_SIZE as jt, DEFAULT_STROKE_WIDTH as Yt, DIFFERENCE_ARROW_DEFAULTS as In, MAX_BAR_WIDTH as Qt, MIN_BAR_WIDTH as Jt, RESTING_HOVER_STATE as An, RemoveAnnotationCommand as ze, RemoveHighlightCommand as er, SHAPE_DEFAULTS as nr, SetAppearanceCornerRadiusCommand as tr, SetAppearanceTextScaleCommand as rr, SetAxisLabelCommand as ar, SetAxisPositionCommand as or, SetAxisTickModeCommand as ir, SetAxisTicksVisibilityCommand as lr, SetAxisVisibilityCommand as sr, SetBarBorderRadiusCommand as cr, SetBarWidthCommand as dr, SetChartTypeCommand as hr, SetContentCaptionCommand as ur, SetContentSourceCommand as mr, SetContentSubtitleCommand as pr, SetContentTitleCommand as gr, SetDataLabelsFormatCommand as vr, SetGridLineStyleCommand as Cr, SetGridLineWidthCommand as fr, SetGridVisibilityCommand as br, SetHeadlineCompareWithCommand as yr, SetHeadlinePositionCommand as Sr, SetHeadlineShowCommand as Ye, SetHeadlineSizeCommand as wr, SetHighlightDimStyleCommand as xr, SetLegendAlignCommand as Lr, SetLegendDisplayCommand as Tr, SetLegendPositionCommand as Pr, SetLineInterpolationCommand as Ir, SetLineMissingValuesCommand as Ar, SetLineWidthCommand as Qe, SetNumberFormatAbbreviationCommand as Or, SetNumberFormatDecimalsCommand as Je, SetPointSizeCommand as Mr, SetPolarInnerRadiusCommand as Nr, SetPolarStartAngleCommand as kr, SetRuleLabelCommand as Rr, SetRuleValueCommand as Er, SetScaleDomainCommand as ge, SetScaleReverseCommand as _r, SetScaleTransformCommand as Dr, SetScaleZeroCommand as en, SetStatLineCommand as Hr, TEXT_ANNOTATION_DEFAULTS as Vr, ToggleCategoryLabelsCommand as zr, ToggleContentVisibilityCommand as xe, ToggleDataLabelsCommand as Fr, ToggleGoalLineCommand as Br, ToggleLineFillCommand as Gr, ToggleLinePointsVisibilityCommand as Kr, ToggleStackTotalsCommand as Ur, UpdateAnnotationCommand as On, areAnchorsEqual as Mn, areEndpointsComparable as Wr, buildEditMenuTriggerRegion as Zr, buildLayerStyleAddress as qr, buildObservationAnchor as $r, buildObservationPredicate as Xr, canAnchorDirectLabels as jr, canPlaceDataLabels as Yr, createObservationAnchorParser as Qr, createStyleResolver as Jr, createValueFormatter as ea, extractConstantValue as na, extractVariableName as ta, filterLayersByGeoms as Ne, findAverageLineLayer as ra, findGoalLineLayer as aa, findHighlightsAtObservation as oa, findLayerByGeom as Nn, findObservationAttachment as ia, findStyleRule as la, findTrendLineLayer as sa, formatDifferenceLabel as ca, getColor as da, hasMultipleGroups as ha, inferDefaultDifferenceArrowEndpoints as ua, inferDifferenceArrowEndpoints as ma, isCompanionLayer as kn, isObservationAttachmentKind as pa, isPointWithinEditMenuTrigger as Rn, isSafeUrl as ga, projectAnchorToPanel as va, readChartType as Ca, readHighlightDimStyle as fa, resolveComparisonBasis as ba, resolveObservationPoint as ke, stepDifferenceArrowEndpoint as ya, toPanelCursor as Fe } from "@graphysdk/viz-engine";
+import { createContext as me, useCallback as fe, useContext as ie, useEffect as B, useId as ae, useMemo as E, useRef as be, useState as q } from "react";
+import { Fragment as G, jsx as n, jsxs as m } from "react/jsx-runtime";
+import { useShallow as Be } from "zustand/react/shallow";
+import { createPortal as Sa } from "react-dom";
+import oe from "clsx";
+import { assignInlineVars as En } from "@vanilla-extract/dynamic";
+import { Menu as V } from "@base-ui/react/menu";
+import { Menu as Y } from "@base-ui/react";
+import { Accordion as ce } from "@base-ui/react/accordion";
+import { NumberField as nn } from "@base-ui/react/number-field";
+import { Radio as _n } from "@base-ui/react/radio";
+import { RadioGroup as Dn } from "@base-ui/react/radio-group";
+import { Select as W } from "@base-ui/react/select";
+import { Slider as le } from "@base-ui/react/slider";
+import { Switch as tn } from "@base-ui/react/switch";
+import { Input as wa } from "@base-ui/react/input";
+import './editable.css';var xa = "data-graphy-chart-chrome", La = "data-graphy-chart-menu", Hn = { [La]: "" }, ye = (e) => ({ [xa]: e }), Vn = (e, t) => e instanceof Element && e.closest(`[data-graphy-chart-chrome="${CSS.escape(t)}"]`) !== null, Ta = (e) => e instanceof Element && e.closest("[data-graphy-chart-menu]") !== null, Pa = (e) => e instanceof Element && e.closest("[data-graphy-chart-chrome]") !== null, he = (e, t, i) => e instanceof Node && (t.contains(e) || Vn(e, i)), Ia = "cml7ha0", zn = me(null), Aa = ({ children: e }) => {
+  const { chartId: t } = U(), [i] = q(He), [o, r] = q(null);
+  return i === null ? null : /* @__PURE__ */ m(G, { children: [Sa(/* @__PURE__ */ n("div", {
+    ref: r,
+    className: Ia,
+    ...ye(t)
+  }), i), /* @__PURE__ */ n(zn.Provider, {
+    value: o,
     children: e
   })] });
-}, Fe = () => ae(_n), Rn = (e) => /* @__PURE__ */ m(I, {
+}, Ge = () => ie(zn), Fn = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -53,73 +53,73 @@ import './editable.css';var oa = "data-graphy-chart-chrome", ia = "data-graphy-c
     })
   ]
 });
-var Dn = "efjmb40", zn = "efjmb41", ee = "efjmb42", ne = "efjmb43", ha = "efjmb44", ua = "efjmb45", ma = /* @__PURE__ */ new Set([
+var Bn = "efjmb40", Gn = "efjmb41", ne = "efjmb42", te = "efjmb43", Oa = "efjmb44", Ma = "efjmb45", Na = /* @__PURE__ */ new Set([
   "item-press",
   "escape-key",
   "outside-press",
   "close-press",
   "sibling-open",
   "trigger-press"
-]), Be = ({ label: e, icon: t, onOpened: i, children: r }) => {
-  const o = Fe(), [a, l] = $(!1), c = (s, u) => {
-    s ? (l(!0), i?.()) : ma.has(u.reason) && l(!1);
+]), Ke = ({ label: e, icon: t, onOpened: i, children: o }) => {
+  const r = Ge(), [a, l] = q(!1), c = (s, u) => {
+    s ? (l(!0), i?.()) : Na.has(u.reason) && l(!1);
   };
-  return /* @__PURE__ */ m(X.SubmenuRoot, {
+  return /* @__PURE__ */ m(Y.SubmenuRoot, {
     open: a,
     onOpenChange: c,
-    children: [/* @__PURE__ */ n(pa, {
+    children: [/* @__PURE__ */ n(ka, {
       label: e,
       icon: t
-    }), /* @__PURE__ */ n(X.Portal, {
-      container: o,
-      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(X.Positioner, {
+    }), /* @__PURE__ */ n(Y.Portal, {
+      container: r,
+      children: /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(Y.Positioner, {
         side: "right",
         align: "start",
         sideOffset: 4,
-        className: Dn,
-        ...Mn,
-        children: /* @__PURE__ */ n(X.Popup, {
-          className: zn,
-          children: r
+        className: Bn,
+        ...Hn,
+        children: /* @__PURE__ */ n(Y.Popup, {
+          className: Gn,
+          children: o
         })
       }) })
     })]
   });
-}, pa = ({ label: e, icon: t }) => /* @__PURE__ */ m(X.SubmenuTrigger, {
-  className: ee,
+}, ka = ({ label: e, icon: t }) => /* @__PURE__ */ m(Y.SubmenuTrigger, {
+  className: ne,
   openOnHover: !1,
   children: [
     t,
     /* @__PURE__ */ n("span", {
-      className: ne,
+      className: te,
       children: e
     }),
     /* @__PURE__ */ n("span", {
-      className: ua,
-      children: /* @__PURE__ */ n(Se, { size: "sm" })
+      className: Ma,
+      children: /* @__PURE__ */ n(we, { size: "sm" })
     })
   ]
-}), ga = "_1qe7q450", va = "_1qe7q451", fa = "_1qe7q452", Ca = ({ label: e, placeholder: t, addLabel: i, at: r, onRequestClose: o }) => {
-  const a = Ce(null), [l, c] = $(""), { dispatch: s } = J(), u = l.trim(), d = () => {
-    u.length !== 0 && (s(new we({
+}), Ra = "_1qe7q450", Ea = "_1qe7q451", _a = "_1qe7q452", Da = ({ label: e, placeholder: t, addLabel: i, at: o, onRequestClose: r }) => {
+  const a = be(null), [l, c] = q(""), { dispatch: s } = ee(), u = l.trim(), d = () => {
+    u.length !== 0 && (s(new j({
       kind: "comment",
       annotation: {
-        at: r,
-        content: ba(u)
+        at: o,
+        content: Ha(u)
       }
-    })), o());
+    })), r());
   };
-  return /* @__PURE__ */ n(Be, {
+  return /* @__PURE__ */ n(Ke, {
     label: e,
-    icon: /* @__PURE__ */ n(Rn, {}),
+    icon: /* @__PURE__ */ n(Fn, {}),
     onOpened: () => {
       requestAnimationFrame(() => a.current?.focus());
     },
     children: /* @__PURE__ */ m("div", {
-      className: ga,
+      className: Ra,
       children: [/* @__PURE__ */ n("input", {
         ref: a,
-        className: va,
+        className: Ea,
         value: l,
         placeholder: t,
         onChange: (g) => {
@@ -130,14 +130,14 @@ var Dn = "efjmb40", zn = "efjmb41", ee = "efjmb42", ne = "efjmb43", ha = "efjmb4
         }
       }), /* @__PURE__ */ n("button", {
         type: "button",
-        className: fa,
+        className: _a,
         disabled: u.length === 0,
         onClick: d,
         children: i
       })]
     })
   });
-}, ba = (e) => ({
+}, Ha = (e) => ({
   type: "doc",
   content: [{
     type: "paragraph",
@@ -146,7 +146,7 @@ var Dn = "efjmb40", zn = "efjmb41", ee = "efjmb42", ne = "efjmb43", ha = "efjmb4
       text: e
     }]
   }]
-}), ya = (e) => /* @__PURE__ */ n(I, {
+}), Va = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 15 14",
   ...e,
   children: /* @__PURE__ */ n("path", {
@@ -154,8 +154,8 @@ var Dn = "efjmb40", zn = "efjmb41", ee = "efjmb42", ne = "efjmb43", ha = "efjmb4
     fill: "currentColor",
     fillOpacity: "0.8"
   })
-}), Sa = "relative-difference", wa = ({ label: e, layer: t, at: i, onRequestClose: r }) => {
-  const { dispatch: o } = J(), a = K((s) => s.coordSystem), l = k(() => jr({
+}), za = "relative-difference", Fa = ({ label: e, layer: t, at: i, onRequestClose: o }) => {
+  const { dispatch: r } = ee(), a = K((s) => s.coordSystem), l = E(() => ma({
     layer: t,
     at: i,
     coordSystem: a
@@ -166,77 +166,77 @@ var Dn = "efjmb40", zn = "efjmb41", ee = "efjmb42", ne = "efjmb43", ha = "efjmb4
   ]);
   if (l === null) return null;
   const c = () => {
-    o(new we({
+    r(new j({
       kind: "differenceArrow",
       annotation: {
-        ...Wt,
+        ...In,
         ...l,
-        label: Sa
+        label: za
       }
-    })), r();
+    })), o();
   };
-  return /* @__PURE__ */ m(_.Item, {
-    className: ee,
+  return /* @__PURE__ */ m(V.Item, {
+    className: ne,
     onClick: c,
-    children: [/* @__PURE__ */ n(ya, {}), /* @__PURE__ */ n("span", {
-      className: ne,
+    children: [/* @__PURE__ */ n(Va, {}), /* @__PURE__ */ n("span", {
+      className: te,
       children: e
     })]
   });
 };
-function xa(e, t) {
-  if (e.type === "polar" && !Pa(t)) return [{
+function Ba(e, t) {
+  if (e.type === "polar" && !Ga(t)) return [{
     scope: "series",
     labelKey: "pieSlice"
   }];
-  const i = Zr(t.data, t.mapping);
+  const i = ha(t.data, t.mapping);
   switch (t.geom) {
     case "bar": {
-      const r = [{
+      const o = [{
         scope: "data-point",
         labelKey: "bar"
       }];
       if (i) {
-        const o = t.position === "stack" || t.position === "fill";
-        r.push({
+        const r = t.position === "stack" || t.position === "fill";
+        o.push({
           scope: "x-value",
-          labelKey: o ? "barStack" : "barGroup"
-        }), r.push({
+          labelKey: r ? "barStack" : "barGroup"
+        }), o.push({
           scope: "series",
           labelKey: "barSeries"
         });
       }
-      return r;
+      return o;
     }
     case "line":
     case "area": {
-      const r = [{
+      const o = [{
         scope: "data-point",
         labelKey: "linePoint"
       }];
-      return i && r.push({
+      return i && o.push({
         scope: "series",
         labelKey: "lineSeries"
-      }), r;
+      }), o;
     }
     case "point": {
-      const r = [{
+      const o = [{
         scope: "data-point",
         labelKey: "scatterPoint"
       }];
-      return i && r.push({
+      return i && o.push({
         scope: "series",
         labelKey: "scatterSeries"
-      }), r;
+      }), o;
     }
     default:
       return [];
   }
 }
-var Pa = (e) => {
-  const t = Kr(e.mapping.x);
-  return t !== null && t !== Bt.x;
-}, Ia = (e) => /* @__PURE__ */ m(I, {
+var Ga = (e) => {
+  const t = ta(e.mapping.x);
+  return t !== null && t !== $t.x;
+}, Ka = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -275,7 +275,7 @@ var Pa = (e) => {
       rx: ".533"
     })
   ]
-}), Ta = (e) => /* @__PURE__ */ m(I, {
+}), Ua = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -314,7 +314,7 @@ var Pa = (e) => {
       rx: ".533"
     })
   ]
-}), Aa = (e) => /* @__PURE__ */ m(I, {
+}), Wa = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -353,7 +353,7 @@ var Pa = (e) => {
       rx: ".533"
     })
   ]
-}), La = (e) => /* @__PURE__ */ m(I, {
+}), Za = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -373,7 +373,7 @@ var Pa = (e) => {
       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"
     })
   ]
-}), Oa = (e) => /* @__PURE__ */ m(I, {
+}), qa = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -407,7 +407,7 @@ var Pa = (e) => {
       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"
     })
   ]
-}), Na = (e) => /* @__PURE__ */ m(I, {
+}), $a = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -448,7 +448,7 @@ var Pa = (e) => {
       fillOpacity: "0.8"
     })
   ]
-}), ka = (e) => /* @__PURE__ */ m(I, {
+}), Xa = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -470,7 +470,7 @@ var Pa = (e) => {
       d: "M15.999 8a8 8 0 0 1-7.588 7.989l-.412.01V8z"
     })
   ]
-}), Ma = (e) => /* @__PURE__ */ m(I, {
+}), ja = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -531,7 +531,7 @@ var Pa = (e) => {
       transform: "matrix(-1 0 0 1 15.933 .533)"
     })
   ]
-}), Ea = (e) => /* @__PURE__ */ m(I, {
+}), Ya = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -592,20 +592,20 @@ var Pa = (e) => {
       transform: "matrix(-1 0 0 1 15.933 .533)"
     })
   ]
-}), _a = {
-  bar: Ia,
-  barGroup: Ta,
-  barStack: La,
-  barSeries: Aa,
-  linePoint: Oa,
-  lineSeries: Na,
-  scatterPoint: Ma,
-  scatterSeries: Ea,
-  pieSlice: ka
-}, Hn = ({ labelKey: e }) => {
-  const t = _a[e];
+}), Qa = {
+  bar: Ka,
+  barGroup: Ua,
+  barStack: Za,
+  barSeries: Wa,
+  linePoint: qa,
+  lineSeries: $a,
+  scatterPoint: ja,
+  scatterSeries: Ya,
+  pieSlice: Xa
+}, Kn = ({ labelKey: e }) => {
+  const t = Qa[e];
   return /* @__PURE__ */ n(t, {});
-}, Vn = (e) => /* @__PURE__ */ m(I, {
+}, Un = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [/* @__PURE__ */ n("path", {
@@ -618,81 +618,81 @@ var Pa = (e) => {
     fill: "currentColor",
     fillOpacity: "0.8"
   })]
-}), Ra = ({ label: e, options: t, onSelect: i }) => {
-  const r = A();
-  return /* @__PURE__ */ n(Be, {
+}), Ja = ({ label: e, options: t, onSelect: i }) => {
+  const o = I();
+  return /* @__PURE__ */ n(Ke, {
     label: e,
-    icon: /* @__PURE__ */ n(Vn, {}),
-    children: t.map((o) => /* @__PURE__ */ m(X.Item, {
-      className: ee,
-      onClick: () => i(o.scope),
-      children: [/* @__PURE__ */ n(Hn, { labelKey: o.labelKey }), /* @__PURE__ */ n("span", {
-        className: ne,
-        children: r(`graph.annotations.highlights.labels.${o.labelKey}`)
+    icon: /* @__PURE__ */ n(Un, {}),
+    children: t.map((r) => /* @__PURE__ */ m(Y.Item, {
+      className: ne,
+      onClick: () => i(r.scope),
+      children: [/* @__PURE__ */ n(Kn, { labelKey: r.labelKey }), /* @__PURE__ */ n("span", {
+        className: te,
+        children: o(`graph.annotations.highlights.labels.${r.labelKey}`)
       })]
-    }, o.scope))
+    }, r.scope))
   });
-}, Da = ({ label: e, layer: t, observation: i, highlights: r, onRequestClose: o }) => {
-  const a = A(), { dispatch: l } = J(), c = K((p) => p.coordSystem), s = k(() => zr(t, i), [t, i]), u = k(() => xa(c, t), [c, t]), d = k(() => {
-    const p = new Set(r.map((g) => g.scope));
+}, eo = ({ label: e, layer: t, observation: i, highlights: o, onRequestClose: r }) => {
+  const a = I(), { dispatch: l } = ee(), c = K((p) => p.coordSystem), s = E(() => Xr(t, i), [t, i]), u = E(() => Ba(c, t), [c, t]), d = E(() => {
+    const p = new Set(o.map((g) => g.scope));
     return u.filter((g) => !p.has(g.scope));
-  }, [u, r]), [h] = d;
+  }, [u, o]), [h] = d;
   if (s === null || h === void 0) return null;
   const v = (p) => {
-    l(new Ft({
+    l(new qt({
       predicate: s,
       scope: p,
       layerId: t.id
-    })), o();
+    })), r();
   };
   if (d.length === 1) {
     const p = u.length === 1 ? e : a("graph.annotations.baseMenu.highlightWithLabel", { label: a(`graph.annotations.highlights.labels.${h.labelKey}`) });
-    return /* @__PURE__ */ m(X.Item, {
-      className: ee,
+    return /* @__PURE__ */ m(Y.Item, {
+      className: ne,
       onClick: () => v(h.scope),
-      children: [/* @__PURE__ */ n(Hn, { labelKey: h.labelKey }), /* @__PURE__ */ n("span", {
-        className: ne,
+      children: [/* @__PURE__ */ n(Kn, { labelKey: h.labelKey }), /* @__PURE__ */ n("span", {
+        className: te,
         children: p
       })]
     });
   }
-  return /* @__PURE__ */ n(Ra, {
+  return /* @__PURE__ */ n(Ja, {
     label: e,
     options: d,
     onSelect: v
   });
-}, za = "_1aafi1g0", Ha = "_1aafi1g1", Fn = ({ children: e }) => /* @__PURE__ */ m("span", {
-  className: za,
+}, no = "_1aafi1g0", to = "_1aafi1g1", Wn = ({ children: e }) => /* @__PURE__ */ m("span", {
+  className: no,
   "aria-hidden": "true",
-  children: [e, /* @__PURE__ */ n("span", { className: Ha })]
-}), Va = ({ label: e, highlights: t, onRequestClose: i }) => {
-  const { dispatch: r } = J(), o = t.at(-1);
-  if (o === void 0) return null;
+  children: [e, /* @__PURE__ */ n("span", { className: to })]
+}), ro = ({ label: e, highlights: t, onRequestClose: i }) => {
+  const { dispatch: o } = ee(), r = t.at(-1);
+  if (r === void 0) return null;
   const a = () => {
-    r(new Zt({ id: o.id })), i();
+    o(new er({ id: r.id })), i();
   };
-  return /* @__PURE__ */ m(_.Item, {
-    className: ee,
+  return /* @__PURE__ */ m(V.Item, {
+    className: ne,
     onClick: a,
-    children: [/* @__PURE__ */ n(Fn, { children: /* @__PURE__ */ n(Vn, {}) }), /* @__PURE__ */ n("span", {
-      className: ne,
+    children: [/* @__PURE__ */ n(Wn, { children: /* @__PURE__ */ n(Un, {}) }), /* @__PURE__ */ n("span", {
+      className: te,
       children: e
     })]
   });
-}, Fa = (e, t) => {
-  const i = K((o) => o.spec.highlights), r = K((o) => o.config.parsingLocale);
-  return k(() => Gr({
+}, ao = (e, t) => {
+  const i = K((r) => r.spec.highlights), o = K((r) => r.config.parsingLocale);
+  return E(() => oa({
     layer: e,
     highlights: i,
     observation: t,
-    parsingLocale: r
+    parsingLocale: o
   }), [
     e,
     i,
     t,
-    r
+    o
   ]);
-}, Bn = (e) => /* @__PURE__ */ m(I, {
+}, Zn = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -715,22 +715,22 @@ var Pa = (e) => {
       fillOpacity: "0.8"
     })
   ]
-}), Ba = ({ label: e, at: t, onRequestClose: i }) => {
-  const { dispatch: r } = J(), o = () => {
-    r(new we({
+}), oo = ({ label: e, at: t, onRequestClose: i }) => {
+  const { dispatch: o } = ee(), r = () => {
+    o(new j({
       kind: "pinnedNumber",
       annotation: { at: t }
     })), i();
   };
-  return /* @__PURE__ */ m(_.Item, {
-    className: ee,
-    onClick: o,
-    children: [/* @__PURE__ */ n(Bn, {}), /* @__PURE__ */ n("span", {
-      className: ne,
+  return /* @__PURE__ */ m(V.Item, {
+    className: ne,
+    onClick: r,
+    children: [/* @__PURE__ */ n(Zn, {}), /* @__PURE__ */ n("span", {
+      className: te,
       children: e
     })]
   });
-}, Kn = (e) => /* @__PURE__ */ m(I, {
+}, qn = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -763,35 +763,35 @@ var Pa = (e) => {
       fillOpacity: "0.8"
     })
   ]
-}), Gn = {
+}), $n = {
   pinnedNumber: {
-    icon: Bn,
+    icon: Zn,
     labelKey: "graph.annotations.baseMenu.unpinNumber"
   },
   comment: {
-    icon: Rn,
+    icon: Fn,
     labelKey: "graph.annotations.baseMenu.removeAnnotation"
   },
   sticker: {
-    icon: Kn,
+    icon: qn,
     labelKey: "graph.annotations.baseMenu.removeSticker"
   },
   image: null
-}, Ka = (e) => Xr(e.kind) && Gn[e.kind] !== null, Ga = ({ attachment: e, onRequestClose: t }) => {
-  const i = A(), { dispatch: r } = J(), { icon: o, labelKey: a } = Gn[e.kind], l = () => {
-    r(new ze({ id: e.annotation.id })), t();
+}, io = (e) => pa(e.kind) && $n[e.kind] !== null, lo = ({ attachment: e, onRequestClose: t }) => {
+  const i = I(), { dispatch: o } = ee(), { icon: r, labelKey: a } = $n[e.kind], l = () => {
+    o(new ze({ id: e.annotation.id })), t();
   };
-  return /* @__PURE__ */ m(_.Item, {
-    className: ee,
+  return /* @__PURE__ */ m(V.Item, {
+    className: ne,
     onClick: l,
-    children: [/* @__PURE__ */ n(Fn, { children: /* @__PURE__ */ n(o, {}) }), /* @__PURE__ */ n("span", {
-      className: ne,
+    children: [/* @__PURE__ */ n(Wn, { children: /* @__PURE__ */ n(r, {}) }), /* @__PURE__ */ n("span", {
+      className: te,
       children: i(a)
     })]
   });
-}, Ua = "ceeojg0", Wa = "ceeojg1", qa = "ceeojg2", $a = ({ label: e, at: t, onRequestClose: i }) => {
-  const { dispatch: r } = J(), o = (a) => {
-    r(new we({
+}, so = "ceeojg0", co = "ceeojg1", ho = "ceeojg2", uo = ({ label: e, at: t, onRequestClose: i }) => {
+  const { dispatch: o } = ee(), r = (a) => {
+    o(new j({
       kind: "sticker",
       annotation: {
         at: {
@@ -802,125 +802,125 @@ var Pa = (e) => {
       }
     })), i();
   };
-  return /* @__PURE__ */ n(Be, {
+  return /* @__PURE__ */ n(Ke, {
     label: e,
-    icon: /* @__PURE__ */ n(Kn, {}),
+    icon: /* @__PURE__ */ n(qn, {}),
     children: /* @__PURE__ */ n("div", {
-      className: Ua,
-      children: Object.entries(Dt).map(([a, l]) => /* @__PURE__ */ n(X.Item, {
-        className: Wa,
+      className: so,
+      children: Object.entries(Gt).map(([a, l]) => /* @__PURE__ */ n(Y.Item, {
+        className: co,
         "aria-label": a,
-        onClick: () => o(a),
+        onClick: () => r(a),
         children: /* @__PURE__ */ n("img", {
-          className: qa,
+          className: ho,
           src: l.src,
           alt: a
         })
       }, a))
     })
   });
-}, Za = ({ interaction: e, panelOrigin: t }) => {
-  const i = q(), r = ve((a) => a.menuTrigger);
-  if (e.kind !== "menu" || r === null) return null;
-  const o = () => {
+}, mo = ({ interaction: e, panelOrigin: t }) => {
+  const i = Z(), o = Ce((a) => a.menuTrigger);
+  if (e.kind !== "menu" || o === null) return null;
+  const r = () => {
     i.getState().releaseInteraction("menu");
   };
-  return /* @__PURE__ */ n(ja, {
+  return /* @__PURE__ */ n(po, {
     trigger: {
-      x: t.x + r.center.x,
-      y: t.y + r.center.y,
-      radius: r.radius
+      x: t.x + o.center.x,
+      y: t.y + o.center.y,
+      radius: o.radius
     },
     layer: e.anchor.layer,
     at: e.anchor.at,
     observation: e.anchor.observation,
-    onClose: o
+    onClose: r
   });
-}, ja = ({ trigger: e, layer: t, at: i, observation: r, onClose: o }) => {
-  const a = A(), l = Fe(), c = K((f) => f.spec.annotations), s = K((f) => f.config.parsingLocale), u = Ya(), { x: d, y: h, radius: v } = e, p = k(() => Xa(d, h, v), [
+}, po = ({ trigger: e, layer: t, at: i, observation: o, onClose: r }) => {
+  const a = I(), l = Ge(), c = K((f) => f.spec.annotations), s = K((f) => f.config.parsingLocale), u = vo(), { x: d, y: h, radius: v } = e, p = E(() => go(d, h, v), [
     d,
     h,
     v
-  ]), g = Ur(c, i, k(() => Fr(t, s), [t, s])), S = g !== null && Ka(g) ? g : null, P = Fa(t, r), y = (f, x) => {
-    !f && Qa(x.reason) && o();
+  ]), g = ia(c, i, E(() => Qr(t, s), [t, s])), C = g !== null && io(g) ? g : null, P = ao(t, o), y = (f, x) => {
+    !f && Co(x.reason) && r();
   };
-  return /* @__PURE__ */ n(_.Root, {
+  return /* @__PURE__ */ n(V.Root, {
     open: u,
     modal: !1,
     onOpenChange: y,
-    children: /* @__PURE__ */ n(_.Portal, {
+    children: /* @__PURE__ */ n(V.Portal, {
       container: l,
-      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(_.Positioner, {
+      children: /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(V.Positioner, {
         anchor: p,
         side: "right",
         align: "start",
         sideOffset: 8,
-        className: Dn,
-        ...Mn,
-        children: /* @__PURE__ */ m(_.Popup, {
-          className: zn,
+        className: Bn,
+        ...Hn,
+        children: /* @__PURE__ */ m(V.Popup, {
+          className: Gn,
           "data-testid": "observation-menu",
           children: [
-            S !== null && /* @__PURE__ */ n(Ga, {
-              attachment: S,
-              onRequestClose: o
+            C !== null && /* @__PURE__ */ n(lo, {
+              attachment: C,
+              onRequestClose: r
             }),
-            /* @__PURE__ */ n(Va, {
+            /* @__PURE__ */ n(ro, {
               label: a("graph.annotations.baseMenu.removeHighlight"),
               highlights: P,
-              onRequestClose: o
+              onRequestClose: r
             }),
-            /* @__PURE__ */ n(_.Separator, { className: ha }),
-            S === null && /* @__PURE__ */ m(W, { children: [
-              /* @__PURE__ */ n(Ba, {
+            /* @__PURE__ */ n(V.Separator, { className: Oa }),
+            C === null && /* @__PURE__ */ m(G, { children: [
+              /* @__PURE__ */ n(oo, {
                 label: a("graph.annotations.baseMenu.pinNumber"),
                 at: i,
-                onRequestClose: o
+                onRequestClose: r
               }),
-              /* @__PURE__ */ n(Ca, {
+              /* @__PURE__ */ n(Da, {
                 label: a("graph.annotations.baseMenu.annotate"),
                 placeholder: a("graph.annotations.textMenu.placeholder"),
                 addLabel: a("graph.annotations.textMenu.addButton"),
                 at: i,
-                onRequestClose: o
+                onRequestClose: r
               }),
-              /* @__PURE__ */ n($a, {
+              /* @__PURE__ */ n(uo, {
                 label: a("graph.annotations.baseMenu.addSticker"),
                 at: i,
-                onRequestClose: o
+                onRequestClose: r
               })
             ] }),
-            t.highlight !== null && /* @__PURE__ */ n(Da, {
+            t.highlight !== null && /* @__PURE__ */ n(eo, {
               label: a("graph.annotations.baseMenu.highlight"),
               layer: t,
-              observation: r,
+              observation: o,
               highlights: P,
-              onRequestClose: o
+              onRequestClose: r
             }),
-            /* @__PURE__ */ n(wa, {
+            /* @__PURE__ */ n(Fa, {
               label: a("graph.annotations.baseMenu.differenceArrow"),
               layer: t,
               at: i,
-              onRequestClose: o
+              onRequestClose: r
             })
           ]
         })
       }) })
     })
   });
-}, Xa = (e, t, i) => ({ getBoundingClientRect: () => new DOMRect(e - i, t - i, i * 2, i * 2) }), Ya = () => {
-  const [e, t] = $(!1);
-  return V(() => {
+}, go = (e, t, i) => ({ getBoundingClientRect: () => new DOMRect(e - i, t - i, i * 2, i * 2) }), vo = () => {
+  const [e, t] = q(!1);
+  return B(() => {
     t(!0);
   }, []), e;
-}, Qa = (e) => e === "outside-press" || e === "escape-key" || e === "item-press", Ja = () => {
-  const e = wn();
-  return Un(e);
-}, Un = (e) => {
+}, Co = (e) => e === "outside-press" || e === "escape-key" || e === "item-press", fo = () => {
+  const e = Pn();
+  return Xn(e);
+}, Xn = (e) => {
   if (e.length !== 1) return null;
   const [t] = e;
   return t?.kind === "annotation" ? t.id : null;
-}, eo = (e) => /* @__PURE__ */ n(I, {
+}, bo = (e) => /* @__PURE__ */ n(T, {
   ...e,
   children: /* @__PURE__ */ m("g", {
     stroke: "currentColor",
@@ -929,7 +929,7 @@ var Pa = (e) => {
     strokeLinejoin: "round",
     children: [/* @__PURE__ */ n("path", { d: "M4 9h16m-4-4 4 4" }), /* @__PURE__ */ n("path", { d: "M20 15H4m4 4-4-4" })]
   })
-}), no = (e) => /* @__PURE__ */ n(I, {
+}), yo = (e) => /* @__PURE__ */ n(T, {
   ...e,
   children: /* @__PURE__ */ m("g", {
     stroke: "currentColor",
@@ -943,43 +943,43 @@ var Pa = (e) => {
       /* @__PURE__ */ n("path", { d: "M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
     ]
   })
-}), to = { kind: "chrome-popup" }, ro = "var(--q7gcrz0)", ao = "var(--q7gcrz1)", oo = "q7gcrz2", io = "q7gcrz3";
-var lo = "q7gcrz5", so = "q7gcrz6", co = "q7gcrz7", ho = "q7gcrz8", Wn = "q7gcrz9", uo = "q7gcrza";
-var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
+}), So = { kind: "chrome-popup" }, wo = "var(--q7gcrz0)", xo = "var(--q7gcrz1)", Lo = "q7gcrz2", To = "q7gcrz3";
+var Po = "q7gcrz5", Io = "q7gcrz6", Ao = "q7gcrz7", Oo = "q7gcrz8", jn = "q7gcrz9", Mo = "q7gcrza";
+var rn = "q7gcrzd q7gcrzc", Yn = "q7gcrze q7gcrzc", No = [
   "absolute-difference",
   "relative-difference",
   "proportion"
-], tn = ["absolute-difference", "relative-difference"], po = ["relative-difference", "proportion"], go = {
+], an = ["absolute-difference", "relative-difference"], ko = ["relative-difference", "proportion"], Ro = {
   "absolute-difference": "graph.annotations.differenceArrowToolbar.labelKind.absoluteDifference",
   "relative-difference": "graph.annotations.differenceArrowToolbar.labelKind.relativeDifference",
   proportion: "graph.annotations.differenceArrowToolbar.labelKind.proportion"
-}, vo = (e) => {
-  const { formattingLocale: t } = G(), i = K((o) => o.config.parsingLocale), r = t ?? i;
-  return k(() => {
-    const o = Er(e.start, e.end);
-    return mo.filter((a) => o || !tn.includes(a) || a === e.label).map((a) => ({
+}, Eo = (e) => {
+  const { formattingLocale: t } = U(), i = K((r) => r.config.parsingLocale), o = t ?? i;
+  return E(() => {
+    const r = Wr(e.start, e.end);
+    return No.filter((a) => r || !an.includes(a) || a === e.label).map((a) => ({
       kind: a,
-      nameKey: go[a],
-      preview: qr({
-        locale: r,
+      nameKey: Ro[a],
+      preview: ca({
+        locale: o,
         kind: a,
         startValue: e.start.measurementValue,
         endValue: e.end.measurementValue,
         valueFormat: e.start.valueFormat
       }),
-      isPickable: o || !tn.includes(a),
-      isSuspect: po.includes(a) && e.start.measurementValue === 0
+      isPickable: r || !an.includes(a),
+      isSuspect: ko.includes(a) && e.start.measurementValue === 0
     }));
-  }, [e, r]);
-}, ie = 8, fo = ({ labelBox: e, panelRect: t, frameWidth: i, frameHeight: r }) => {
-  const o = t.y + e.y, a = o + e.height, l = o - 8 - 36, c = a + 8, s = Co(ie, l >= ie ? l : c, r - ie - 36), u = ie;
+  }, [e, o]);
+}, se = 8, _o = ({ labelBox: e, panelRect: t, frameWidth: i, frameHeight: o }) => {
+  const r = t.y + e.y, a = r + e.height, l = r - 8 - 36, c = a + 8, s = Do(se, l >= se ? l : c, o - se - 36), u = se;
   return {
     top: s,
     left: u,
-    available: Math.max(0, i - ie * 2),
+    available: Math.max(0, i - se * 2),
     centre: t.x + e.x + e.width / 2 - u
   };
-}, Co = (e, t, i) => Math.max(e, Math.min(t, i)), Te = [
+}, Do = (e, t, i) => Math.max(e, Math.min(t, i)), Ae = [
   {
     id: "small",
     nameKey: "graph.annotations.differenceArrowToolbar.size.small"
@@ -992,46 +992,46 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
     id: "large",
     nameKey: "graph.annotations.differenceArrowToolbar.size.large"
   }
-], bo = ({ arrow: e, labelBox: t, panelRect: i, frameWidth: r, frameHeight: o, frameElement: a }) => {
-  const l = A(), { chartId: c, commands: s } = G(), u = q(), [d, h] = $(null), v = vo(e), p = fo({
+], Ho = ({ arrow: e, labelBox: t, panelRect: i, frameWidth: o, frameHeight: r, frameElement: a }) => {
+  const l = I(), { chartId: c, commands: s } = U(), u = Z(), [d, h] = q(null), v = Eo(e), p = _o({
     labelBox: t,
     panelRect: i,
-    frameWidth: r,
-    frameHeight: o
+    frameWidth: o,
+    frameHeight: r
   }), g = (y, f) => {
-    s.dispatch(new Pn({
+    s.dispatch(new On({
       kind: "differenceArrow",
       id: e.id,
       patch: y
     }), f);
   };
-  V(() => () => s.seal(), [s]), V(() => {
+  B(() => () => s.seal(), [s]), B(() => {
     const { claimInteraction: y, releaseInteraction: f } = u.getState();
-    return d === null ? f("chrome-popup") : y(to), () => f("chrome-popup");
+    return d === null ? f("chrome-popup") : y(So), () => f("chrome-popup");
   }, [u, d]);
-  const S = (y) => {
+  const C = (y) => {
     h(y ? "color" : null), y || s.seal();
   }, P = () => {
     s.dispatch(new ze({ id: e.id })), a.focus({ preventScroll: !0 });
   };
   return /* @__PURE__ */ n("div", {
-    className: oo,
+    className: Lo,
     style: {
       top: p.top,
       left: p.left,
       width: p.available
     },
-    children: /* @__PURE__ */ m(j.Root, {
+    children: /* @__PURE__ */ m(X.Root, {
       "aria-label": l("graph.annotations.differenceArrowToolbar.label"),
-      className: io,
+      className: To,
       "data-testid": "difference-arrow-toolbar",
-      ...be(c),
-      style: On({
-        [ro]: `${p.centre}px`,
-        [ao]: `${p.available}px`
+      ...ye(c),
+      style: En({
+        [wo]: `${p.centre}px`,
+        [xo]: `${p.available}px`
       }),
       children: [
-        /* @__PURE__ */ n(yo, {
+        /* @__PURE__ */ n(Vo, {
           options: v,
           current: e.label,
           isOpen: d === "labelKind",
@@ -1040,20 +1040,20 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
             g({ label: y }), h(null);
           }
         }),
-        /* @__PURE__ */ n(j.Separator, {}),
-        /* @__PURE__ */ n(j.ColorPicker, {
+        /* @__PURE__ */ n(X.Separator, {}),
+        /* @__PURE__ */ n(X.ColorPicker, {
           color: e.color,
           label: l("graph.annotations.differenceArrowToolbar.color"),
           onChange: (y) => g({ color: y }, { transient: !0 }),
           isOpen: d === "color",
-          onOpenChange: S,
-          popupAttributes: be(c),
+          onOpenChange: C,
+          popupAttributes: ye(c),
           children: /* @__PURE__ */ n("span", {
-            className: so,
+            className: Io,
             style: { background: e.color ?? "transparent" }
           })
         }),
-        /* @__PURE__ */ n(So, {
+        /* @__PURE__ */ n(zo, {
           current: e.size,
           isOpen: d === "size",
           onOpenChange: (y) => h(y ? "size" : null),
@@ -1061,24 +1061,24 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
             g({ size: y }), h(null);
           }
         }),
-        /* @__PURE__ */ n(j.Separator, {}),
-        /* @__PURE__ */ n(j.Button, {
+        /* @__PURE__ */ n(X.Separator, {}),
+        /* @__PURE__ */ n(X.Button, {
           "aria-label": l("graph.annotations.differenceArrowToolbar.swap"),
-          className: nn,
+          className: rn,
           onClick: () => g({
             start: e.end.anchor,
             end: e.start.anchor
           }),
-          children: /* @__PURE__ */ n(eo, {
+          children: /* @__PURE__ */ n(bo, {
             size: "sm",
             title: ""
           })
         }),
-        /* @__PURE__ */ n(j.Button, {
+        /* @__PURE__ */ n(X.Button, {
           "aria-label": l("graph.annotations.differenceArrowToolbar.remove"),
-          className: nn,
+          className: rn,
           onClick: P,
-          children: /* @__PURE__ */ n(no, {
+          children: /* @__PURE__ */ n(yo, {
             size: "sm",
             title: ""
           })
@@ -1086,21 +1086,21 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
       ]
     })
   });
-}, yo = ({ options: e, current: t, isOpen: i, onOpenChange: r, onPick: o }) => {
-  const a = A(), l = e.find((s) => s.kind === t), c = e.some((s) => s.isPickable && s.kind !== t);
-  return /* @__PURE__ */ m(_.Root, {
+}, Vo = ({ options: e, current: t, isOpen: i, onOpenChange: o, onPick: r }) => {
+  const a = I(), l = e.find((s) => s.kind === t), c = e.some((s) => s.isPickable && s.kind !== t);
+  return /* @__PURE__ */ m(V.Root, {
     open: i,
     modal: !1,
-    onOpenChange: r,
-    children: [/* @__PURE__ */ m(_.Trigger, {
-      render: /* @__PURE__ */ n(j.Button, {}),
+    onOpenChange: o,
+    children: [/* @__PURE__ */ m(V.Trigger, {
+      render: /* @__PURE__ */ n(X.Button, {}),
       "aria-label": a("graph.annotations.differenceArrowToolbar.labelKind.ariaLabel"),
-      className: qn,
+      className: Yn,
       disabled: !c,
       onMouseDown: (s) => s.preventDefault(),
       children: [
         /* @__PURE__ */ n("span", {
-          className: lo,
+          className: Po,
           children: l === void 0 ? "" : a(l.nameKey)
         }),
         l !== void 0 && /* @__PURE__ */ m("span", {
@@ -1111,13 +1111,13 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
             ")"
           ]
         }),
-        /* @__PURE__ */ n(Se, { size: "sm" })
+        /* @__PURE__ */ n(we, { size: "sm" })
       ]
-    }), /* @__PURE__ */ n($n, { children: e.map((s) => /* @__PURE__ */ m(_.Item, {
-      className: Wn,
+    }), /* @__PURE__ */ n(Qn, { children: e.map((s) => /* @__PURE__ */ m(V.Item, {
+      className: jn,
       "data-selected": s.kind === t,
       disabled: !s.isPickable,
-      onClick: () => o(s.kind),
+      onClick: () => r(s.kind),
       children: [
         /* @__PURE__ */ n("span", { children: a(s.nameKey) }),
         (s.isSuspect || !s.isPickable) && /* @__PURE__ */ n("span", {
@@ -1127,75 +1127,75 @@ var nn = "q7gcrzd q7gcrzc", qn = "q7gcrze q7gcrzc", mo = [
           children: "⚠"
         }),
         /* @__PURE__ */ n("span", {
-          className: uo,
+          className: Mo,
           children: s.preview
         })
       ]
     }, s.kind)) })]
   });
-}, So = ({ current: e, isOpen: t, onOpenChange: i, onPick: r }) => {
-  const o = A(), a = Te.find((l) => l.id === e) ?? Te[0];
-  return /* @__PURE__ */ m(_.Root, {
+}, zo = ({ current: e, isOpen: t, onOpenChange: i, onPick: o }) => {
+  const r = I(), a = Ae.find((l) => l.id === e) ?? Ae[0];
+  return /* @__PURE__ */ m(V.Root, {
     open: t,
     modal: !1,
     onOpenChange: i,
-    children: [/* @__PURE__ */ m(_.Trigger, {
-      render: /* @__PURE__ */ n(j.Button, {}),
-      "aria-label": o("graph.annotations.differenceArrowToolbar.size.ariaLabel"),
-      className: qn,
+    children: [/* @__PURE__ */ m(V.Trigger, {
+      render: /* @__PURE__ */ n(X.Button, {}),
+      "aria-label": r("graph.annotations.differenceArrowToolbar.size.ariaLabel"),
+      className: Yn,
       onMouseDown: (l) => l.preventDefault(),
-      children: [/* @__PURE__ */ n("span", { children: a === void 0 ? "" : o(a.nameKey) }), /* @__PURE__ */ n(Se, { size: "sm" })]
-    }), /* @__PURE__ */ n($n, { children: Te.map((l) => /* @__PURE__ */ n(_.Item, {
-      className: Wn,
+      children: [/* @__PURE__ */ n("span", { children: a === void 0 ? "" : r(a.nameKey) }), /* @__PURE__ */ n(we, { size: "sm" })]
+    }), /* @__PURE__ */ n(Qn, { children: Ae.map((l) => /* @__PURE__ */ n(V.Item, {
+      className: jn,
       "data-selected": l.id === e,
-      onClick: () => r(l.id),
-      children: o(l.nameKey)
+      onClick: () => o(l.id),
+      children: r(l.nameKey)
     }, l.id)) })]
   });
-}, $n = ({ children: e }) => {
-  const { chartId: t } = G();
-  return /* @__PURE__ */ n(_.Portal, {
-    container: Re(),
-    children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(_.Positioner, {
+}, Qn = ({ children: e }) => {
+  const { chartId: t } = U();
+  return /* @__PURE__ */ n(V.Portal, {
+    container: He(),
+    children: /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(V.Positioner, {
       side: "bottom",
       align: "start",
       sideOffset: 6,
-      className: co,
-      children: /* @__PURE__ */ n(_.Popup, {
-        className: ho,
+      className: Ao,
+      children: /* @__PURE__ */ n(V.Popup, {
+        className: Oo,
         onMouseDown: (i) => i.preventDefault(),
-        ...be(t),
+        ...ye(t),
         children: e
       })
     }) })
   });
 };
-var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ? "end" : "start", jn = ({ dispatch: e, arrow: t, endpoint: i, anchor: r }) => {
-  In(r, t[i].anchor) || e(new Pn({
+var Fo = "ydgo3h0", Bo = "ydgo3h1", Go = "ydgo3h2", Jn = (e) => e === "start" ? "end" : "start", et = ({ dispatch: e, arrow: t, endpoint: i, anchor: o }) => {
+  Mn(o, t[i].anchor) || e(new On({
     kind: "differenceArrow",
     id: t.id,
-    patch: { [i]: r }
+    patch: { [i]: o }
   }));
-}, Io = ({ clientPoint: e, panelOrigin: t, panelRect: i, engine: r, layers: o, coordSystem: a, resolver: l, fixedAnchor: c, align: s }) => {
-  const u = To({
+}, Ko = ({ clientPoint: e, panelOrigin: t, panelRect: i, engine: o, layers: r, coordSystem: a, resolver: l, fixedAnchor: c, align: s }) => {
+  const u = Uo({
     x: e.x - t.x,
     y: e.y - t.y
-  }, i), { primary: d } = r.query(He(u, i));
+  }, i), { primary: d } = o.query(Fe(u, i));
   if (d === null) return null;
-  const h = o.find((p) => p.id === d.layerId);
+  const h = r.find((p) => p.id === d.layerId);
   if (h === void 0) return null;
-  const v = Ne({
+  const v = ke({
     resolver: l,
     layer: h,
     observation: d.observation,
     coordSystem: a,
     align: s
   });
-  return v === null || In(v.anchor, c) ? null : v;
-}, To = (e, t) => ({
+  return v === null || Mn(v.anchor, c) ? null : v;
+}, Uo = (e, t) => ({
   x: Math.max(0, Math.min(e.x, t.width)),
   y: Math.max(0, Math.min(e.y, t.height))
-}), Ao = class {
+}), Wo = class {
   constructor(e) {
     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)));
@@ -1207,20 +1207,20 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
       this.scheduledFrame = null;
       const t = this.pendingEvent;
       if (this.pendingEvent = null, t === null) return;
-      const { editorStore: i, engine: r, anchorResolver: o, endpoint: a, readInputs: l } = this.params, { arrow: c, panelOrigin: s, panelRect: u, layers: d, coordSystem: h } = l(), v = i.getState();
-      if (this.hasPublished && Le(ge(v, "endpoint-drag"), c.id, a) === null) return;
-      const p = Io({
+      const { editorStore: i, engine: o, anchorResolver: r, endpoint: a, readInputs: l } = this.params, { arrow: c, panelOrigin: s, panelRect: u, layers: d, coordSystem: h } = l(), v = i.getState();
+      if (this.hasPublished && Me(ve(v, "endpoint-drag"), c.id, a) === null) return;
+      const p = Ko({
         clientPoint: {
           x: t.clientX,
           y: t.clientY
         },
         panelOrigin: s,
         panelRect: u,
-        engine: r,
+        engine: o,
         layers: d,
         coordSystem: h,
-        resolver: o,
-        fixedAnchor: c[Zn(a)].anchor,
+        resolver: r,
+        fixedAnchor: c[Jn(a)].anchor,
         align: c[a].anchor.align
       });
       p !== null && this.publish(p);
@@ -1232,37 +1232,37 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
   }
   finish(e) {
     this.params.onSettled(), this.listeners.abort(), this.cancelFrame(), e && this.hasMoved && this.runFrame(), this.pendingEvent = null;
-    const { editorStore: t, endpoint: i, readInputs: r, dispatch: o } = this.params, { arrow: a } = r(), l = t.getState(), c = Le(ge(l, "endpoint-drag"), a.id, i);
-    c !== null && (l.releaseInteraction("endpoint-drag"), e && jn({
-      dispatch: o,
+    const { editorStore: t, endpoint: i, readInputs: o, dispatch: r } = this.params, { arrow: a } = o(), l = t.getState(), c = Me(ve(l, "endpoint-drag"), a.id, i);
+    c !== null && (l.releaseInteraction("endpoint-drag"), e && et({
+      dispatch: r,
       arrow: a,
       endpoint: i,
       anchor: c.point.anchor
     }));
   }
   publish(e) {
-    const { editorStore: t, readInputs: i, endpoint: r } = this.params;
+    const { editorStore: t, readInputs: i, endpoint: o } = this.params;
     t.getState().claimInteraction({
       kind: "endpoint-drag",
       annotationId: i().arrow.id,
-      endpoint: r,
+      endpoint: o,
       point: e
     }), this.hasPublished = !0;
   }
   cancelFrame() {
     this.scheduledFrame !== null && (cancelAnimationFrame(this.scheduledFrame), this.scheduledFrame = null);
   }
-}, Lo = ({ arrow: e, panelOrigin: t, panelRect: i }) => {
-  const { commands: r, anchorResolver: o } = G(), { engine: a } = _e(), l = q(), c = se({
+}, Zo = ({ arrow: e, panelOrigin: t, panelRect: i }) => {
+  const { commands: o, anchorResolver: r } = U(), { engine: a } = De(), l = Z(), c = de({
     arrow: e,
     panelOrigin: t,
     panelRect: i,
-    ...K(Ve((u) => ({
+    ...K(Be((u) => ({
       layers: u.layers,
       coordSystem: u.coordSystem
     })))
-  }), s = Ce(null);
-  return V(() => () => s.current?.finish(!1), []), fe((u) => ({
+  }), s = be(null);
+  return B(() => () => s.current?.finish(!1), []), fe((u) => ({
     onClick: (d) => d.stopPropagation(),
     onPointerDown: (d) => {
       if (d.button !== 0 || s.current !== null) return;
@@ -1272,15 +1272,15 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
         return;
       }
       d.currentTarget.focus({ preventScroll: !0 }), d.preventDefault();
-      const h = new Ao({
+      const h = new Wo({
         handle: d.currentTarget,
         pointerId: d.pointerId,
         endpoint: u,
         readInputs: () => c.current,
         editorStore: l,
         engine: a,
-        anchorResolver: o,
-        dispatch: r.dispatch,
+        anchorResolver: r,
+        dispatch: o.dispatch,
         onSettled: () => {
           s.current = null;
         }
@@ -1291,22 +1291,22 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
     c,
     l,
     a,
-    o,
-    r
+    r,
+    o
   ]);
-}, Oo = [" ", "Enter"], No = ({ arrow: e }) => {
-  const { commands: t, anchorResolver: i } = G(), r = q(), { layers: o, coordSystem: a, mainAxis: l } = K(Ve((s) => ({
+}, qo = [" ", "Enter"], $o = ({ arrow: e }) => {
+  const { commands: t, anchorResolver: i } = U(), o = Z(), { layers: r, coordSystem: a, mainAxis: l } = K(Be((s) => ({
     layers: s.layers,
     coordSystem: s.coordSystem,
     mainAxis: s.coordSystem.type === "cartesian" ? s.coordSystem.mainAxis : "x"
   }))), c = e.id;
-  return V(() => () => {
-    const s = r.getState();
-    ge(s, "endpoint-drag")?.annotationId === c && s.releaseInteraction("endpoint-drag");
-  }, [r, c]), fe((s) => ({ onKeyDown: (u) => {
+  return B(() => () => {
+    const s = o.getState();
+    ve(s, "endpoint-drag")?.annotationId === c && s.releaseInteraction("endpoint-drag");
+  }, [o, c]), fe((s) => ({ onKeyDown: (u) => {
     if (u.altKey || u.ctrlKey || u.metaKey || u.shiftKey) return;
-    const d = r.getState(), h = Le(ge(d, "endpoint-drag"), e.id, s);
-    if (Oo.includes(u.key)) {
+    const d = o.getState(), h = Me(ve(d, "endpoint-drag"), e.id, s);
+    if (qo.includes(u.key)) {
       if (u.preventDefault(), u.repeat) return;
       if (h === null) return d.claimInteraction({
         kind: "endpoint-drag",
@@ -1314,7 +1314,7 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
         endpoint: s,
         point: e[s]
       });
-      d.releaseInteraction("endpoint-drag"), jn({
+      d.releaseInteraction("endpoint-drag"), et({
         dispatch: t.dispatch,
         arrow: e,
         endpoint: s,
@@ -1323,15 +1323,15 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
       return;
     }
     if (h === null) return;
-    const v = ko(u.key, l);
+    const v = Xo(u.key, l);
     if (v === null) return;
     u.preventDefault();
-    const p = Mo({
+    const p = jo({
       arrow: e,
       endpoint: s,
       from: h.point.anchor,
       move: v,
-      layers: o,
+      layers: r,
       coordSystem: a,
       resolver: i
     });
@@ -1343,29 +1343,29 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
     });
   } }), [
     e,
-    r,
+    o,
     t,
     i,
-    o,
+    r,
     a,
     l
   ]);
-}, ko = (e, t) => {
+}, Xo = (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
   };
-}, Mo = ({ arrow: e, endpoint: t, from: i, move: r, layers: o, coordSystem: a, resolver: l }) => {
-  const c = o.find((u) => u.id === i.layerId);
+}, jo = ({ arrow: e, endpoint: t, from: i, move: o, layers: r, coordSystem: a, resolver: l }) => {
+  const c = r.find((u) => u.id === i.layerId);
   if (c === void 0) return null;
-  const s = ta({
+  const s = ya({
     layer: c,
     from: i,
-    partner: e[Zn(t)].anchor,
-    axis: r.axis,
-    step: r.step,
-    canLandOn: (u) => Ne({
+    partner: e[Jn(t)].anchor,
+    axis: o.axis,
+    step: o.step,
+    canLandOn: (u) => ke({
       resolver: l,
       layer: c,
       observation: u,
@@ -1373,40 +1373,40 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
       align: e[t].anchor.align
     }) !== null
   });
-  return s === null ? null : Ne({
+  return s === null ? null : ke({
     resolver: l,
     layer: c,
     observation: s.observation,
     coordSystem: a,
     align: e[t].anchor.align
   });
-}, Eo = (e) => {
-  const t = Ja();
-  return t === null ? null : /* @__PURE__ */ n(_o, {
+}, Yo = (e) => {
+  const t = fo();
+  return t === null ? null : /* @__PURE__ */ n(Qo, {
     annotationId: t,
     ...e
   });
-}, _o = ({ annotationId: e, ...t }) => {
-  const i = Nt(), r = k(() => i.find((o) => o.id === e), [i, e]);
-  return r === void 0 ? null : /* @__PURE__ */ n(Ro, {
-    committedArrow: r.committedArrow,
-    committedLabelBox: r.committedLabelBox,
-    labelBox: r.labelBox,
-    start: r.start,
-    end: r.end,
-    isDragged: r.isDragged,
+}, Qo = ({ annotationId: e, ...t }) => {
+  const i = Dt(), o = E(() => i.find((r) => r.id === e), [i, e]);
+  return o === void 0 ? null : /* @__PURE__ */ n(Jo, {
+    committedArrow: o.committedArrow,
+    committedLabelBox: o.committedLabelBox,
+    labelBox: o.labelBox,
+    start: o.start,
+    end: o.end,
+    isDragged: o.isDragged,
     ...t
   });
-}, Ro = ({ committedArrow: e, committedLabelBox: t, labelBox: i, start: r, end: o, panelRect: a, panelOrigin: l, frameRect: c, frameElement: s, isDragged: u }) => {
-  const d = Lo({
+}, Jo = ({ committedArrow: e, committedLabelBox: t, labelBox: i, start: o, end: r, panelRect: a, panelOrigin: l, frameRect: c, frameElement: s, isDragged: u }) => {
+  const d = Zo({
     arrow: e,
     panelOrigin: l,
     panelRect: a
-  }), h = No({ arrow: e });
+  }), h = $o({ arrow: e });
   return /* @__PURE__ */ m("div", {
     "data-testid": "difference-arrow-selection",
     children: [
-      !u && /* @__PURE__ */ n(bo, {
+      !u && /* @__PURE__ */ n(Ho, {
         arrow: e,
         labelBox: t,
         panelRect: a,
@@ -1416,7 +1416,7 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
       }),
       /* @__PURE__ */ n("div", {
         "aria-hidden": "true",
-        className: Po,
+        className: Go,
         "data-testid": "difference-arrow-selection-label",
         style: {
           left: a.x + i.x - 2,
@@ -1425,24 +1425,24 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
           height: i.height + 4
         }
       }),
-      /* @__PURE__ */ n(rn, {
+      /* @__PURE__ */ n(on, {
         endpoint: "start",
-        point: r,
+        point: o,
         panelRect: a,
         dragHandlers: d("start"),
         keyboardHandlers: h("start")
       }),
-      /* @__PURE__ */ n(rn, {
+      /* @__PURE__ */ n(on, {
         endpoint: "end",
-        point: o,
+        point: r,
         panelRect: a,
         dragHandlers: d("end"),
         keyboardHandlers: h("end")
       })
     ]
   });
-}, rn = ({ endpoint: e, point: t, panelRect: i, dragHandlers: r, keyboardHandlers: o }) => /* @__PURE__ */ n("div", {
-  className: wo,
+}, on = ({ endpoint: e, point: t, panelRect: i, dragHandlers: o, keyboardHandlers: r }) => /* @__PURE__ */ n("div", {
+  className: Fo,
   "data-testid": "difference-arrow-selection-handle",
   "data-endpoint": e,
   role: "button",
@@ -1451,13 +1451,13 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
     top: i.y + t.y
   },
   tabIndex: 0,
-  ...r,
   ...o,
+  ...r,
   children: /* @__PURE__ */ n("span", {
     "aria-hidden": "true",
-    className: xo
+    className: Bo
   })
-}), Do = (e) => /* @__PURE__ */ n(I, {
+}), ei = (e) => /* @__PURE__ */ n(T, {
   ...e,
   children: /* @__PURE__ */ m("g", {
     stroke: "currentColor",
@@ -1466,104 +1466,104 @@ var wo = "ydgo3h0", xo = "ydgo3h1", Po = "ydgo3h2", Zn = (e) => e === "start" ?
     strokeLinejoin: "round",
     children: [/* @__PURE__ */ n("path", { d: "M12 5v14" }), /* @__PURE__ */ n("path", { d: "M5 12h14" })]
   })
-}), zo = "var(--_1tyillx0)", Ho = {
+}), ni = "var(--_1tyillx0)", ti = {
   rest: 0.5,
   hovered: 0.75,
   open: 1
 };
-var Vo = "_1tyillx1", Fo = {
+var ri = "_1tyillx1", ai = {
   rest: "_1tyillx2",
   hovered: "_1tyillx3",
   open: "_1tyillx4"
-}, Bo = "_1tyillx5", Ko = {
+}, oi = "_1tyillx5", ii = {
   closed: "_1tyillx6",
   open: "_1tyillx7"
-}, Go = ({ interaction: e, panelRect: t }) => {
-  const i = q(), r = K((c) => c.coordSystem), o = e.kind === "trigger" || e.kind === "menu" ? e.anchor : null, a = Uo(e), l = k(() => {
-    if (o === null) return null;
-    const c = Qr(o.position, t, r);
+}, li = ({ interaction: e, panelRect: t }) => {
+  const i = Z(), o = K((c) => c.coordSystem), r = e.kind === "trigger" || e.kind === "menu" ? e.anchor : null, a = si(e), l = E(() => {
+    if (r === null) return null;
+    const c = va(r.position, t, o);
     return {
       center: c,
-      radius: 19 * Ho[a],
+      radius: 19 * ti[a],
       target: {
         kind: "observation",
-        cursor: He(c, t)
+        cursor: Fe(c, t)
       }
     };
   }, [
-    o,
-    t,
     r,
+    t,
+    o,
     a
   ]);
-  return V(() => {
+  return B(() => {
     i.getState().setMenuTrigger(l);
-  }, [i, l]), V(() => () => i.getState().setMenuTrigger(null), [i]), o === null || l === null ? null : /* @__PURE__ */ n("div", {
+  }, [i, l]), B(() => () => i.getState().setMenuTrigger(null), [i]), r === null || l === null ? null : /* @__PURE__ */ n("div", {
     "aria-hidden": "true",
     "data-testid": "observation-menu-trigger",
     "data-state": a,
-    className: re(Vo, Fo[a]),
+    className: oe(ri, ai[a]),
     style: {
       left: t.x + l.center.x,
       top: t.y + l.center.y,
-      ...On({ [zo]: o.color ?? Vt.border50 })
+      ...En({ [ni]: r.color ?? Wt.border50 })
     },
     children: /* @__PURE__ */ n("span", {
-      className: re(Bo, Ko[a === "open" ? "open" : "closed"]),
-      children: /* @__PURE__ */ n(Do, { size: "lg" })
+      className: oe(oi, ii[a === "open" ? "open" : "closed"]),
+      children: /* @__PURE__ */ n(ei, { size: "lg" })
     })
   });
-}, Uo = (e) => e.kind === "menu" ? "open" : e.kind === "trigger" && e.isEngaged ? "hovered" : "rest", Wo = 'button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', qo = (e, t) => {
-  const { chartId: i } = G(), r = q();
-  V(() => {
+}, si = (e) => e.kind === "menu" ? "open" : e.kind === "trigger" && e.isEngaged ? "hovered" : "rest", ci = 'button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', di = (e, t) => {
+  const { chartId: i } = U(), o = Z();
+  B(() => {
     if (t === null) return;
-    const o = (a) => {
-      if (a.key !== "Tab" || a.defaultPrevented || !ce(a.target, e, i) || r.getState().standingInteraction?.kind === "chrome-popup") return;
-      const l = [...t.querySelectorAll(Wo)];
+    const r = (a) => {
+      if (a.key !== "Tab" || a.defaultPrevented || !he(a.target, e, i) || o.getState().standingInteraction?.kind === "chrome-popup") return;
+      const l = [...t.querySelectorAll(ci)];
       if (l.length === 0) return;
       a.preventDefault();
       const c = l.findIndex((s) => s === document.activeElement);
       l[c === -1 ? a.shiftKey ? l.length - 1 : 0 : (c + (a.shiftKey ? -1 : 1) + l.length) % l.length]?.focus();
     };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
   }, [
     e,
     t,
     i,
-    r
+    o
   ]);
-}, $o = (e) => {
-  const { selectionStore: t, chartId: i } = G();
-  V(() => {
-    let r = null;
-    const o = () => {
+}, hi = (e) => {
+  const { selectionStore: t, chartId: i } = U();
+  B(() => {
+    let o = null;
+    const r = () => {
       e.focus({ preventScroll: !0 });
     }, a = (c) => {
       const { selection: s, clearSelection: u } = t.getState();
-      s.length !== 0 && (ce(c.target, e, i) || u());
+      s.length !== 0 && (he(c.target, e, i) || u());
     }, l = (c) => {
-      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());
+      t.getState().selection.length !== 0 && he(c.target, e, i) && c.relatedTarget === null && (o !== null && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+        o = null, document.hasFocus() && (he(document.activeElement, e, i) || t.getState().clearSelection());
       }));
     };
-    return e.addEventListener("pointerdown", o), document.addEventListener("focusin", a), document.addEventListener("focusout", l), () => {
-      r !== null && cancelAnimationFrame(r), e.removeEventListener("pointerdown", o), document.removeEventListener("focusin", a), document.removeEventListener("focusout", l);
+    return e.addEventListener("pointerdown", r), document.addEventListener("focusin", a), document.addEventListener("focusout", l), () => {
+      o !== null && cancelAnimationFrame(o), e.removeEventListener("pointerdown", r), document.removeEventListener("focusin", a), document.removeEventListener("focusout", l);
     };
   }, [
     e,
     t,
     i
   ]);
-}, Zo = (e) => {
-  const { selectionStore: t, commands: i, chartId: r } = G(), o = q(), a = fe((c) => {
-    const { selection: s } = t.getState(), u = Un(s);
+}, ui = (e) => {
+  const { selectionStore: t, commands: i, chartId: o } = U(), r = Z(), a = fe((c) => {
+    const { selection: s } = t.getState(), u = Xn(s);
     u !== null && (c.preventDefault(), i.dispatch(new ze({ id: u })), e.focus({ preventScroll: !0 }));
   }, [
     e,
     i,
     t
   ]), l = fe((c) => {
-    const s = o.getState();
+    const s = r.getState();
     switch (s.standingInteraction?.kind) {
       case "endpoint-drag":
         s.releaseInteraction("endpoint-drag");
@@ -1574,7 +1574,7 @@ var Vo = "_1tyillx1", Fo = {
         s.releaseInteraction("menu");
         return;
       default:
-        if (En(c.target, r)) {
+        if (Vn(c.target, o)) {
           e.focus({ preventScroll: !0 });
           return;
         }
@@ -1582,14 +1582,14 @@ var Vo = "_1tyillx1", Fo = {
         return;
     }
   }, [
-    o,
+    r,
     t,
     e,
-    r
+    o
   ]);
-  V(() => {
+  B(() => {
     const c = (s) => {
-      if (ce(s.target, e, r) && !jo(s.target) && !la(s.target))
+      if (he(s.target, e, o) && !mi(s.target) && !Ta(s.target))
         switch (s.key) {
           case "Escape":
             return l(s);
@@ -1605,48 +1605,48 @@ var Vo = "_1tyillx1", Fo = {
     e,
     a,
     l,
-    r
+    o
   ]);
-}, jo = (e) => e instanceof HTMLElement && (e.isContentEditable || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement), Xo = `[${Sn}]`, Xn = (e, t, i) => {
+}, mi = (e) => e instanceof HTMLElement && (e.isContentEditable || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement), pi = `[${Tn}]`, nt = (e, t, i) => {
   if (typeof document.elementsFromPoint != "function") return null;
-  const r = document.elementsFromPoint(e, t);
-  return Yo(r, i);
-}, Yo = (e, t) => {
+  const o = document.elementsFromPoint(e, t);
+  return gi(o, i);
+}, gi = (e, t) => {
   for (const i of e) {
-    const r = i.closest(Xo);
-    if (r === null || !t.contains(r)) continue;
-    const o = Qo(r);
-    if (o !== null) return o;
+    const o = i.closest(pi);
+    if (o === null || !t.contains(o)) continue;
+    const r = vi(o);
+    if (r !== null) return r;
   }
   return null;
-}, Qo = (e) => {
-  const t = e.getAttribute(Sn);
+}, vi = (e) => {
+  const t = e.getAttribute(Tn);
   if (t !== "annotation") return null;
-  const i = e.getAttribute(_t);
+  const i = e.getAttribute(Ft);
   return i === null || i === "" ? null : {
     kind: t,
     id: i
   };
-}, Jo = () => {
-  const e = It((o) => o.hover.primary), { layers: t, coordSystem: i } = K(Ve((o) => ({
-    layers: o.layers,
-    coordSystem: o.coordSystem
-  }))), { anchorResolver: r } = G();
-  return k(() => {
+}, Ci = () => {
+  const e = Nt((r) => r.hover.primary), { layers: t, coordSystem: i } = K(Be((r) => ({
+    layers: r.layers,
+    coordSystem: r.coordSystem
+  }))), { anchorResolver: o } = U();
+  return E(() => {
     if (e === null) return null;
-    const o = t.find((c) => c.id === e.layerId);
-    if (o === void 0) return null;
-    const a = r.resolve(o.geom, e.observation, {
+    const r = t.find((c) => c.id === e.layerId);
+    if (r === void 0) return null;
+    const a = o.resolve(r.geom, e.observation, {
       coordSystem: i,
-      position: o.position,
+      position: r.position,
       purpose: "pin"
     });
     if (a === null) return null;
-    const l = Dr(o, e.observation);
+    const l = $r(r, e.observation);
     return l === null ? null : {
       position: a,
-      color: $r(e.observation),
-      layer: o,
+      color: da(e.observation),
+      layer: r,
       at: l,
       observation: e.observation
     };
@@ -1654,11 +1654,11 @@ var Vo = "_1tyillx1", Fo = {
     e,
     t,
     i,
-    r
+    o
   ]);
-}, ei = { kind: "idle" }, Yn = () => {
-  const e = ve((r) => r.standingInteraction), t = ve((r) => r.chromeUnderPointer), i = Jo();
-  return k(() => e !== null ? e : i === null ? ei : {
+}, fi = { kind: "idle" }, tt = () => {
+  const e = Ce((o) => o.standingInteraction), t = Ce((o) => o.chromeUnderPointer), i = Ci();
+  return E(() => e !== null ? e : i === null ? fi : {
     kind: "trigger",
     anchor: i,
     isEngaged: t === "menu-trigger"
@@ -1667,22 +1667,22 @@ var Vo = "_1tyillx1", Fo = {
     i,
     t
   ]);
-}, ni = (e, t) => {
-  const i = q(), r = se(t);
-  V(() => {
-    let o = null, a = null;
+}, bi = (e, t) => {
+  const i = Z(), o = de(t);
+  B(() => {
+    let r = null, a = null;
     const l = (h) => {
       const { menuTrigger: v } = i.getState();
-      return v === null ? null : Ln(h, v) ? "menu-trigger" : null;
+      return v === null ? null : Rn(h, v) ? "menu-trigger" : null;
     }, c = () => {
-      o = null;
+      r = null;
       const h = a;
       if (a = null, h === null) return;
-      const v = r.current, p = i.getState();
+      const v = o.current, p = i.getState();
       p.setChromeUnderPointer(l({
         x: h.x - v.x,
         y: h.y - v.y
-      })), p.standingInteraction?.kind !== "menu" && p.setEditTargetUnderPointer(Xn(h.x, h.y, e));
+      })), p.standingInteraction?.kind !== "menu" && p.setEditTargetUnderPointer(nt(h.x, h.y, e));
     }, s = () => {
       const h = i.getState();
       h.setChromeUnderPointer(null), h.setEditTargetUnderPointer(null);
@@ -1690,68 +1690,68 @@ var Vo = "_1tyillx1", Fo = {
       a = {
         x: h.clientX,
         y: h.clientY
-      }, o === null && (o = requestAnimationFrame(c));
+      }, r === null && (r = requestAnimationFrame(c));
     }, d = () => {
-      a = null, o !== null && (cancelAnimationFrame(o), o = null), s();
+      a = null, r !== null && (cancelAnimationFrame(r), r = null), s();
     };
     return e.addEventListener("pointermove", u), e.addEventListener("pointerleave", d), () => {
-      o !== null && cancelAnimationFrame(o), e.removeEventListener("pointermove", u), e.removeEventListener("pointerleave", d), s();
+      r !== null && cancelAnimationFrame(r), e.removeEventListener("pointermove", u), e.removeEventListener("pointerleave", d), s();
     };
   }, [
     e,
     i,
-    r
+    o
   ]);
-}, an = "editor", on = [], ti = (e, t, i, r) => {
-  const o = Yn(), { store: a } = _e(), l = wn().length > 0, c = ve((d) => d.menuTrigger), s = o.kind === "menu", u = k(() => c === null ? on : [_r(c)], [c]);
-  ni(e, t), ri(o, e, t, i), $o(e), Zo(e), qo(e, r), V(() => (a.getState().publishPointerRegions(an, u), () => a.getState().publishPointerRegions(an, on)), [a, u]), V(() => (a.getState().setPointerSuspended(s || l), () => a.getState().setPointerSuspended(!1)), [
+}, ln = "editor", sn = [], yi = (e, t, i, o) => {
+  const r = tt(), { store: a } = De(), l = Pn().length > 0, c = Ce((d) => d.menuTrigger), s = r.kind === "menu", u = E(() => c === null ? sn : [Zr(c)], [c]);
+  bi(e, t), Si(r, e, t, i), hi(e), ui(e), di(e, o), B(() => (a.getState().publishPointerRegions(ln, u), () => a.getState().publishPointerRegions(ln, sn)), [a, u]), B(() => (a.getState().setPointerSuspended(s || l), () => a.getState().setPointerSuspended(!1)), [
     a,
     s,
     l
-  ]), V(() => {
+  ]), B(() => {
     if (!l) return;
     const d = a.getState();
-    d.setHoverState(xn), d.setTooltipAnchor(null);
+    d.setHoverState(An), d.setTooltipAnchor(null);
   }, [a, l]);
-}, ri = (e, t, i, r) => {
-  const o = q(), { selectionStore: a } = G(), { store: l, engine: c } = _e(), s = se(e), u = se(i), d = se(r);
-  V(() => {
+}, Si = (e, t, i, o) => {
+  const r = Z(), { selectionStore: a } = U(), { store: l, engine: c } = De(), s = de(e), u = de(i), d = de(o);
+  B(() => {
     const h = (y) => {
-      const { menuTrigger: f } = o.getState();
-      return f === null ? !1 : Ln(ln(y, u.current), f);
+      const { menuTrigger: f } = r.getState();
+      return f === null ? !1 : Rn(cn(y, u.current), f);
     }, v = (y) => {
       if (h(y) || a.getState().selection.length > 0) return;
-      const f = d.current, x = ln(y, u.current), T = ai(x, f) ? c.query(He(x, f)) : xn;
-      l.getState().setHoverState(T);
+      const f = d.current, x = cn(y, u.current), L = wi(x, f) ? c.query(Fe(x, f)) : An;
+      l.getState().setHoverState(L);
     };
     let p = !1;
     const g = () => {
       p = s.current.kind === "menu";
-    }, S = (y) => {
-      const f = Xn(y.clientX, y.clientY, t), x = a.getState();
+    }, C = (y) => {
+      const f = nt(y.clientX, y.clientY, t), x = a.getState();
       if (f === null) {
         x.clearSelection();
         return;
       }
       x.setSelection([f]);
     }, P = (y) => {
-      if (sa(y.target)) return;
-      const { claimInteraction: f, releaseInteraction: x } = o.getState(), T = h(y);
-      if (!T || p) {
-        x("menu"), T || S(y), p && v(y);
+      if (Pa(y.target)) return;
+      const { claimInteraction: f, releaseInteraction: x } = r.getState(), L = h(y);
+      if (!L || p) {
+        x("menu"), L || C(y), p && v(y);
         return;
       }
-      const z = s.current;
-      z.kind === "trigger" && f({
+      const A = s.current;
+      A.kind === "trigger" && f({
         kind: "menu",
-        anchor: z.anchor
+        anchor: A.anchor
       });
     };
     return document.addEventListener("pointerdown", g, !0), document.addEventListener("click", P), () => {
       document.removeEventListener("pointerdown", g, !0), document.removeEventListener("click", P);
     };
   }, [
-    o,
+    r,
     a,
     t,
     s,
@@ -1760,18 +1760,18 @@ var Vo = "_1tyillx1", Fo = {
     u,
     d
   ]);
-}, ln = (e, t) => ({
+}, cn = (e, t) => ({
   x: e.clientX - t.x,
   y: e.clientY - t.y
-}), ai = (e, t) => e.x >= 0 && e.x <= t.width && e.y >= 0 && e.y <= t.height, oi = ({ frameElement: e, panelRect: t }) => {
-  const { measureRef: i, screenRect: r } = Tt(), o = q();
-  return V(() => (i(e), () => i(null)), [i, e]), V(() => () => o.getState().releaseInteraction("menu"), [o]), r === null ? null : /* @__PURE__ */ n(da, { children: /* @__PURE__ */ n(ii, {
+}), wi = (e, t) => e.x >= 0 && e.x <= t.width && e.y >= 0 && e.y <= t.height, xi = ({ frameElement: e, panelRect: t }) => {
+  const { measureRef: i, screenRect: o } = kt(), r = Z();
+  return B(() => (i(e), () => i(null)), [i, e]), B(() => () => r.getState().releaseInteraction("menu"), [r]), o === null ? null : /* @__PURE__ */ n(Aa, { children: /* @__PURE__ */ n(Li, {
     frameElement: e,
-    frameRect: r,
+    frameRect: o,
     panelRect: t
   }) });
-}, ii = ({ frameElement: e, frameRect: t, panelRect: i }) => {
-  const r = k(() => ({
+}, Li = ({ frameElement: e, frameRect: t, panelRect: i }) => {
+  const o = E(() => ({
     x: t.left + i.x,
     y: t.top + i.y
   }), [
@@ -1779,79 +1779,79 @@ var Vo = "_1tyillx1", Fo = {
     t.top,
     i.x,
     i.y
-  ]), [o, a] = $(null);
-  return ti(e, r, i, o), /* @__PURE__ */ n(li, {
+  ]), [r, a] = q(null);
+  return yi(e, o, i, r), /* @__PURE__ */ n(Ti, {
     frameElement: e,
     frameRect: t,
-    panelOrigin: r,
+    panelOrigin: o,
     panelRect: i,
     boxRef: a
   });
-}, li = ({ frameElement: e, frameRect: t, panelOrigin: i, panelRect: r, boxRef: o }) => {
-  const a = Fe(), l = Yn();
-  return /* @__PURE__ */ n(At, {
+}, Ti = ({ frameElement: e, frameRect: t, panelOrigin: i, panelRect: o, boxRef: r }) => {
+  const a = Ge(), l = tt();
+  return /* @__PURE__ */ n(Rt, {
     rect: t,
-    zIndex: Lt.editorOverlay,
+    zIndex: Et.editorOverlay,
     container: a,
     "data-testid": "editor-overlay",
-    boxRef: o,
-    children: /* @__PURE__ */ m(he, { children: [
-      /* @__PURE__ */ n(Eo, {
-        panelRect: r,
+    boxRef: r,
+    children: /* @__PURE__ */ m(ue, { children: [
+      /* @__PURE__ */ n(Yo, {
+        panelRect: o,
         panelOrigin: i,
         frameRect: t,
         frameElement: e
       }),
-      /* @__PURE__ */ n(Go, {
+      /* @__PURE__ */ n(li, {
         interaction: l,
-        panelRect: r
+        panelRect: o
       }),
-      /* @__PURE__ */ n(Za, {
+      /* @__PURE__ */ n(mo, {
         interaction: l,
         panelOrigin: i
       })
     ] })
   });
-}, Bs = ({ slots: e, ...t }) => /* @__PURE__ */ n(Et, { children: /* @__PURE__ */ n(Mt, {
-  slots: k(() => ({
-    EditorSurface: oi,
+}, Lc = ({ slots: e, ...t }) => /* @__PURE__ */ n(zt, { children: /* @__PURE__ */ n(Vt, {
+  slots: E(() => ({
+    EditorSurface: xi,
     ...e
   }), [e]),
   ...t
-}) }), Qn = ue(null), Jn = ({ labelId: e, controlId: t, children: i }) => {
-  const r = k(() => {
-    let o = null;
+}) }), rt = me(null), at = ({ labelId: e, controlId: t, children: i }) => {
+  const o = E(() => {
+    let r = null;
     return {
       labelId: e,
       controlId: t,
-      claimControlId: (a) => (o ??= a, o === a)
+      claimControlId: (a) => (r ??= a, r === a)
     };
   }, [e, t]);
-  return /* @__PURE__ */ n(Qn.Provider, {
-    value: r,
+  return /* @__PURE__ */ n(rt.Provider, {
+    value: o,
     children: i
   });
-}, Y = ({ id: e, ariaLabel: t, ariaLabelledBy: i }, r = !0) => {
-  const o = ae(Qn), a = de(), [l] = $(() => r ? o?.claimControlId(a) ?? !1 : !1), c = e ?? (l ? o?.controlId : void 0), s = i ?? (t === void 0 ? o?.labelId : void 0);
+}, Q = ({ id: e, ariaLabel: t, ariaLabelledBy: i }, o = !0) => {
+  const r = ie(rt), a = ae(), [l] = q(() => o ? r?.claimControlId(a) ?? !1 : !1), c = e ?? (l ? r?.controlId : void 0), s = i ?? (t === void 0 ? r?.labelId : void 0);
   return {
     ...c !== void 0 && { id: c },
     ...t !== void 0 && { "aria-label": t },
     ...s !== void 0 && { "aria-labelledby": s }
   };
 };
-var si = {
+var Pi = {
   default: "woi4bh4 woi4bh3",
   tile: "woi4bh5 woi4bh3"
-}, ci = ({ label: e, icon: t, onClick: i, variant: r = "default", isDisabled: o, ariaLabel: a, ariaLabelledBy: l, id: c }) => {
-  const s = Y({
+}, Ii = ({ label: e, icon: t, onClick: i, variant: o = "default", isDisabled: r, ariaLabel: a, ariaLabelledBy: l, id: c }) => {
+  const s = Q({
     id: c,
     ariaLabel: a,
     ariaLabelledBy: l
-  }), u = r === "tile";
+  }), u = o === "tile";
   return /* @__PURE__ */ m("button", {
     type: "button",
-    className: si[r],
-    disabled: o,
+    className: Pi[o],
+    disabled: r,
     onClick: i,
     ...s,
     children: [t !== void 0 && /* @__PURE__ */ n("span", {
@@ -1862,23 +1862,23 @@ var si = {
       children: e
     })]
   });
-}, Ke = ue(null), M = () => {
-  const e = ae(Ke);
+}, Ue = me(null), M = () => {
+  const e = ie(Ue);
   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;
-}, et = ({ children: e, onKeyDown: t, ...i }) => {
-  const r = ae(Ke);
+}, ot = ({ children: e, onKeyDown: t, ...i }) => {
+  const o = ie(Ue);
   return /* @__PURE__ */ n("div", {
     onKeyDown: (a) => {
-      if (t?.(a), !r || a.defaultPrevented) return;
-      const l = zt(a.nativeEvent);
-      l && (a.preventDefault(), l === "undo" ? r.undo() : r.redo());
+      if (t?.(a), !o || a.defaultPrevented) return;
+      const l = Kt(a.nativeEvent);
+      l && (a.preventDefault(), l === "undo" ? o.undo() : o.redo());
     },
     ...i,
     children: e
   });
-}, nt = "keyboard", Pe = (e) => {
-  const t = Ce(!1), i = Ce(!1), r = () => {
+}, it = "keyboard", Le = (e) => {
+  const t = be(!1), i = be(!1), o = () => {
     t.current = !1, i.current && (i.current = !1, e?.());
   };
   return {
@@ -1889,8 +1889,8 @@ var si = {
       }
       e?.();
     },
-    commitUnlessHeldKey: (o) => {
-      if (o) {
+    commitUnlessHeldKey: (r) => {
+      if (r) {
         i.current = !0;
         return;
       }
@@ -1900,68 +1900,69 @@ var si = {
       onKeyDown: () => {
         t.current = !0;
       },
-      onKeyUp: r,
-      onBlur: (o) => {
-        o.relatedTarget instanceof Node && o.currentTarget.contains(o.relatedTarget) || r();
+      onKeyUp: o,
+      onBlur: (r) => {
+        r.relatedTarget instanceof Node && r.currentTarget.contains(r.relatedTarget) || o();
       }
     }
   };
-}, di = "eh8dvc0", hi = "eh8dvc1 uz3g760", ui = "eh8dvc2 uz3g761";
-var mi = ({ value: e, onChange: t, onCommit: i, min: r, max: o, step: a, prefix: l, suffix: c, isDisabled: s, hasError: u, ariaLabel: d, ariaLabelledBy: h, id: v }) => {
-  const p = Y({
-    id: v,
-    ariaLabel: d,
-    ariaLabelledBy: h
-  }), { commitUnlessHeldKey: g, gestureHandlers: S } = Pe(i);
-  return /* @__PURE__ */ n(Je.Root, {
-    className: di,
+}, Ai = "eh8dvc0", Oi = "eh8dvc1 uz3g760", Mi = "eh8dvc2 uz3g761";
+var Ni = ({ value: e, onChange: t, onCommit: i, min: o, max: r, step: a, placeholder: l, prefix: c, suffix: s, isDisabled: u, hasError: d, ariaLabel: h, ariaLabelledBy: v, id: p }) => {
+  const g = Q({
+    id: p,
+    ariaLabel: h,
+    ariaLabelledBy: v
+  }), { commitUnlessHeldKey: C, gestureHandlers: P } = Le(i);
+  return /* @__PURE__ */ n(nn.Root, {
+    className: Ai,
     value: e,
-    onValueChange: (P) => t(P),
-    onValueCommitted: (P, y) => {
-      g(y.reason === nt);
+    onValueChange: (y) => t(y),
+    onValueCommitted: (y, f) => {
+      C(f.reason === it);
     },
-    min: r,
-    max: o,
+    min: o,
+    max: r,
     step: a,
-    disabled: s,
-    children: /* @__PURE__ */ m(et, {
-      className: hi,
-      "data-error": u === !0,
-      "data-disabled": s === !0 ? "" : void 0,
+    disabled: u,
+    children: /* @__PURE__ */ m(ot, {
+      className: Oi,
+      "data-error": d === !0,
+      "data-disabled": u === !0 ? "" : void 0,
       children: [
-        l !== void 0 && /* @__PURE__ */ n("span", {
+        c !== void 0 && /* @__PURE__ */ n("span", {
           className: "eh8dvc3",
-          children: l
+          children: c
         }),
-        /* @__PURE__ */ n(Je.Input, {
-          className: ui,
-          ...S,
-          "aria-invalid": u === !0 ? !0 : void 0,
-          ...p
+        /* @__PURE__ */ n(nn.Input, {
+          className: Mi,
+          placeholder: l,
+          ...P,
+          "aria-invalid": d === !0 ? !0 : void 0,
+          ...g
         }),
-        c !== void 0 && /* @__PURE__ */ n("span", {
+        s !== void 0 && /* @__PURE__ */ n("span", {
           className: "eh8dvc3",
-          children: c
+          children: s
         })
       ]
     })
   });
-}, pi = "_1b7s5f0", te = {
+}, ki = "_1b7s5f0", re = {
   1: "_1b7s5f1",
   2: "_1b7s5f2",
   3: "_1b7s5f3",
   4: "_1b7s5f4",
   5: "_1b7s5f5",
   6: "_1b7s5f6"
-}, gi = "_1b7s5f7";
-var vi = 6, fi = ({ options: e, value: t, onChange: i, onCommit: r, columns: o, itemLayout: a = "tile", isDisabled: l, ariaLabel: c, ariaLabelledBy: s, id: u }) => {
-  const d = Y({
+}, Ri = "_1b7s5f7";
+var Ei = 6, _i = ({ options: e, value: t, onChange: i, onCommit: o, columns: r, itemLayout: a = "tile", isDisabled: l, ariaLabel: c, ariaLabelledBy: s, id: u }) => {
+  const d = Q({
     id: u,
     ariaLabel: c,
     ariaLabelledBy: s
-  }), h = a === "swatch", { commitAfterChange: v, gestureHandlers: p } = Pe(r);
-  return /* @__PURE__ */ n(kn, {
-    className: re(pi, Ci(o ?? e.length)),
+  }), h = a === "swatch", { commitAfterChange: v, gestureHandlers: p } = Le(o);
+  return /* @__PURE__ */ n(Dn, {
+    className: oe(ki, Di(r ?? e.length)),
     value: t,
     onValueChange: (g) => {
       i(g), v();
@@ -1969,10 +1970,10 @@ var vi = 6, fi = ({ options: e, value: t, onChange: i, onCommit: r, columns: o,
     ...p,
     disabled: l,
     ...d,
-    children: e.map((g) => /* @__PURE__ */ m(Nn.Root, {
+    children: e.map((g) => /* @__PURE__ */ m(_n.Root, {
       value: g.value,
       disabled: g.isDisabled,
-      className: re(gi, h && "_1b7s5f8"),
+      className: oe(Ri, h && "_1b7s5f8"),
       "aria-label": h ? g.label : void 0,
       children: [g.icon, !h && /* @__PURE__ */ n("span", {
         className: "_1b7s5f9",
@@ -1980,71 +1981,71 @@ var vi = 6, fi = ({ options: e, value: t, onChange: i, onCommit: r, columns: o,
       })]
     }, g.value))
   });
-}, Ci = (e) => {
-  switch (Math.min(Math.max(Math.round(e), 1), vi)) {
+}, Di = (e) => {
+  switch (Math.min(Math.max(Math.round(e), 1), Ei)) {
     case 1:
-      return te[1];
+      return re[1];
     case 2:
-      return te[2];
+      return re[2];
     case 3:
-      return te[3];
+      return re[3];
     case 4:
-      return te[4];
+      return re[4];
     case 5:
-      return te[5];
+      return re[5];
     default:
-      return te[6];
+      return re[6];
   }
-}, bi = "_1g5x15w0 uz3g760", yi = "_1g5x15w1", Si = "_1g5x15w2", sn = "_1g5x15w3", wi = "_1g5x15w4", xi = "_1g5x15w5", Pi = "_1g5x15w6", Ii = "_1g5x15w7";
-var Ti = ({ options: e, value: t, onChange: i, placeholder: r, isDisabled: o, hasError: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const u = Y({
+}, Hi = "_1g5x15w0 uz3g760", Vi = "_1g5x15w1", zi = "_1g5x15w2", dn = "_1g5x15w3", Fi = "_1g5x15w4", Bi = "_1g5x15w5", Gi = "_1g5x15w6", Ki = "_1g5x15w7";
+var Ui = ({ options: e, value: t, onChange: i, placeholder: o, isDisabled: r, hasError: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Q({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
   });
-  return /* @__PURE__ */ m(U.Root, {
+  return /* @__PURE__ */ m(W.Root, {
     value: t,
     onValueChange: (d) => d !== null && i(d),
-    disabled: o,
+    disabled: r,
     items: e.map((d) => ({
       value: d.value,
       label: d.label
     })),
-    children: [/* @__PURE__ */ m(U.Trigger, {
-      className: bi,
+    children: [/* @__PURE__ */ m(W.Trigger, {
+      className: Hi,
       "data-error": a === !0,
       ...u,
-      children: [/* @__PURE__ */ n(U.Value, {
-        className: yi,
-        children: (d) => Ai(e, d, r)
-      }), /* @__PURE__ */ n(U.Icon, {
-        className: sn,
-        children: /* @__PURE__ */ n(Se, { size: "sm" })
+      children: [/* @__PURE__ */ n(W.Value, {
+        className: Vi,
+        children: (d) => Wi(e, d, o)
+      }), /* @__PURE__ */ n(W.Icon, {
+        className: dn,
+        children: /* @__PURE__ */ n(we, { size: "sm" })
       })]
-    }), /* @__PURE__ */ n(U.Portal, {
-      container: Re(),
-      children: /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n(U.Positioner, {
-        className: wi,
+    }), /* @__PURE__ */ n(W.Portal, {
+      container: He(),
+      children: /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(W.Positioner, {
+        className: Fi,
         sideOffset: 4,
         alignItemWithTrigger: !1,
-        children: /* @__PURE__ */ n(U.Popup, {
-          className: xi,
-          children: e.map((d) => /* @__PURE__ */ m(U.Item, {
+        children: /* @__PURE__ */ n(W.Popup, {
+          className: Bi,
+          children: e.map((d) => /* @__PURE__ */ m(W.Item, {
             value: d.value,
             disabled: d.isDisabled,
-            className: Pi,
+            className: Gi,
             children: [
               d.icon,
               /* @__PURE__ */ m("span", {
-                className: Ii,
-                children: [/* @__PURE__ */ n(U.ItemText, { children: d.label }), d.description !== void 0 && /* @__PURE__ */ n("span", {
+                className: Ki,
+                children: [/* @__PURE__ */ n(W.ItemText, { children: d.label }), d.description !== void 0 && /* @__PURE__ */ n("span", {
                   className: "_1g5x15w8",
                   children: d.description
                 })]
               }),
-              /* @__PURE__ */ n(U.ItemIndicator, {
-                className: sn,
-                children: /* @__PURE__ */ n(Ht, { size: "sm" })
+              /* @__PURE__ */ n(W.ItemIndicator, {
+                className: dn,
+                children: /* @__PURE__ */ n(Ut, { size: "sm" })
               })
             ]
           }, d.value))
@@ -2052,34 +2053,34 @@ var Ti = ({ options: e, value: t, onChange: i, placeholder: r, isDisabled: o, ha
       }) })
     })]
   });
-}, Ai = (e, t, i) => t === null ? /* @__PURE__ */ n("span", {
-  className: Si,
+}, Wi = (e, t, i) => t === null ? /* @__PURE__ */ n("span", {
+  className: zi,
   children: i
-}) : Li(e, t), Li = (e, t) => e.find((i) => i.value === t)?.label ?? t, Oi = "vod76w0", Ni = "vod76w1", ki = "vod76w2", Mi = "vod76w3", Ei = "vod76w4", _i = "vod76w5";
-var Ri = ({ value: e, onChange: t, onCommit: i, min: r, max: o, step: a, suffix: l, formatValue: c, isDisabled: s, ariaLabel: u, ariaLabelledBy: d }) => {
-  const h = Y({
+}) : Zi(e, t), Zi = (e, t) => e.find((i) => i.value === t)?.label ?? t, qi = "vod76w0", $i = "vod76w1", Xi = "vod76w2", ji = "vod76w3", Yi = "vod76w4", Qi = "vod76w5";
+var Ji = ({ value: e, onChange: t, onCommit: i, min: o, max: r, step: a, suffix: l, formatValue: c, isDisabled: s, ariaLabel: u, ariaLabelledBy: d }) => {
+  const h = Q({
     ariaLabel: u,
     ariaLabelledBy: d
-  }, !1), v = Di(e, l, c), { commitUnlessHeldKey: p, gestureHandlers: g } = Pe(i);
+  }, !1), v = el(e, l, c), { commitUnlessHeldKey: p, gestureHandlers: g } = Le(i);
   return /* @__PURE__ */ m("div", {
-    className: Oi,
-    children: [/* @__PURE__ */ n(oe.Root, {
-      className: Ni,
+    className: qi,
+    children: [/* @__PURE__ */ n(le.Root, {
+      className: $i,
       value: e,
-      onValueChange: (S) => t(S),
-      onValueCommitted: (S, P) => {
-        p(P.reason === nt);
+      onValueChange: (C) => t(C),
+      onValueCommitted: (C, P) => {
+        p(P.reason === it);
       },
-      min: r,
-      max: o,
+      min: o,
+      max: r,
       step: a,
       disabled: s,
-      children: /* @__PURE__ */ n(oe.Control, {
-        className: ki,
-        children: /* @__PURE__ */ m(oe.Track, {
-          className: Mi,
-          children: [/* @__PURE__ */ n(oe.Indicator, { className: Ei }), /* @__PURE__ */ n(oe.Thumb, {
-            className: _i,
+      children: /* @__PURE__ */ n(le.Control, {
+        className: Xi,
+        children: /* @__PURE__ */ m(le.Track, {
+          className: ji,
+          children: [/* @__PURE__ */ n(le.Indicator, { className: Yi }), /* @__PURE__ */ n(le.Thumb, {
+            className: Qi,
             ...g,
             ...h
           })]
@@ -2090,49 +2091,49 @@ var Ri = ({ value: e, onChange: t, onCommit: i, min: r, max: o, step: a, suffix:
       children: v
     })]
   });
-}, Di = (e, t, i) => i !== void 0 ? i(e) : t !== void 0 ? `${e}${t}` : null, zi = "_1hyrlw60", Hi = "_1hyrlw61", Vi = ({ isChecked: e, onChange: t, isDisabled: i, ariaLabel: r, ariaLabelledBy: o, id: a }) => {
-  const l = Y({
+}, el = (e, t, i) => i !== void 0 ? i(e) : t !== void 0 ? `${e}${t}` : null, nl = "_1hyrlw60", tl = "_1hyrlw61", rl = ({ isChecked: e, onChange: t, isDisabled: i, ariaLabel: o, ariaLabelledBy: r, id: a }) => {
+  const l = Q({
     id: a,
-    ariaLabel: r,
-    ariaLabelledBy: o
+    ariaLabel: o,
+    ariaLabelledBy: r
   });
-  return /* @__PURE__ */ n(en.Root, {
+  return /* @__PURE__ */ n(tn.Root, {
     checked: e,
     onCheckedChange: (c) => t(c),
     disabled: i,
-    className: zi,
+    className: nl,
     ...l,
-    children: /* @__PURE__ */ n(en.Thumb, { className: Hi })
+    children: /* @__PURE__ */ n(tn.Thumb, { className: tl })
   });
-}, Fi = "uz3g761", Bi = "tpcnun0 uz3g760", Ki = ({ value: e, onChange: t, onCommit: i, placeholder: r, isDisabled: o, hasError: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const u = Y({
+}, al = "uz3g761", ol = "tpcnun0 uz3g760", il = ({ value: e, onChange: t, onCommit: i, placeholder: o, isDisabled: r, hasError: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Q({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
   });
-  return /* @__PURE__ */ n(et, {
-    className: Bi,
+  return /* @__PURE__ */ n(ot, {
+    className: ol,
     "data-error": a === !0,
-    children: /* @__PURE__ */ n(aa, {
-      className: Fi,
+    children: /* @__PURE__ */ n(wa, {
+      className: al,
       value: e,
       onValueChange: (d) => t(d),
       onBlur: i,
-      placeholder: r,
-      disabled: o,
+      placeholder: o,
+      disabled: r,
       "aria-invalid": a === !0 ? !0 : void 0,
       ...u
     })
   });
-}, Gi = "cnu9yl0", Ui = "cnu9yl1";
-var Wi = ({ options: e, value: t, onChange: i, onCommit: r, itemLayout: o = "inline", isDisabled: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
-  const u = Y({
+}, ll = "cnu9yl0", sl = "cnu9yl1";
+var cl = ({ options: e, value: t, onChange: i, onCommit: o, itemLayout: r = "inline", isDisabled: a, ariaLabel: l, ariaLabelledBy: c, id: s }) => {
+  const u = Q({
     id: s,
     ariaLabel: l,
     ariaLabelledBy: c
-  }), d = o === "stacked", { commitAfterChange: h, gestureHandlers: v } = Pe(r);
-  return /* @__PURE__ */ n(kn, {
-    className: Gi,
+  }), d = r === "stacked", { commitAfterChange: h, gestureHandlers: v } = Le(o);
+  return /* @__PURE__ */ n(Dn, {
+    className: ll,
     value: t,
     onValueChange: (p) => {
       i(p), h();
@@ -2140,71 +2141,71 @@ var Wi = ({ options: e, value: t, onChange: i, onCommit: r, itemLayout: o = "inl
     ...v,
     disabled: a,
     ...u,
-    children: e.map((p) => /* @__PURE__ */ m(Nn.Root, {
+    children: e.map((p) => /* @__PURE__ */ m(_n.Root, {
       value: p.value,
       disabled: p.isDisabled,
-      className: re(Ui, d && "cnu9yl2"),
-      "aria-label": qi(p, d),
-      children: [p.icon, tt(p, d) && /* @__PURE__ */ n("span", {
+      className: oe(sl, d && "cnu9yl2"),
+      "aria-label": dl(p, d),
+      children: [p.icon, lt(p, d) && /* @__PURE__ */ n("span", {
         className: "cnu9yl3",
         children: p.label
       })]
     }, p.value))
   });
-}, tt = (e, t) => e.icon === void 0 || t, qi = (e, t) => {
-  if (!tt(e, t))
+}, lt = (e, t) => e.icon === void 0 || t, dl = (e, t) => {
+  if (!lt(e, t))
     return e.label;
-}, rt = {
-  ToggleGroup: Wi,
-  Switch: Vi,
-  Slider: Ri,
-  RadioGrid: fi,
-  Button: ci,
-  TextField: Ki,
-  NumberField: mi,
-  Select: Ti
-}, at = ue(rt), $i = ({ controls: e, children: t }) => {
-  const i = k(() => ({
-    ...rt,
+}, st = {
+  ToggleGroup: cl,
+  Switch: rl,
+  Slider: Ji,
+  RadioGrid: _i,
+  Button: Ii,
+  TextField: il,
+  NumberField: Ni,
+  Select: Ui
+}, ct = me(st), hl = ({ controls: e, children: t }) => {
+  const i = E(() => ({
+    ...st,
     ...e
   }), [e]);
-  return /* @__PURE__ */ n(at.Provider, {
+  return /* @__PURE__ */ n(ct.Provider, {
     value: i,
     children: t
   });
-}, E = () => ae(at), Zi = "_12lhx9e0", ji = ({ children: e }) => /* @__PURE__ */ n("div", {
-  className: Zi,
+}, N = () => ie(ct), ul = "_12lhx9e0", dt = ({ children: e }) => /* @__PURE__ */ n("div", {
+  className: ul,
   children: e
-}), Xi = "_139ohwv0", F = ({ children: e }) => /* @__PURE__ */ n("div", {
-  className: Xi,
+}), ml = "_139ohwv0", z = ({ children: e }) => /* @__PURE__ */ n("div", {
+  className: ml,
   children: e
-}), ot = ue(null), Yi = ot.Provider, Qi = () => {
-  const e = ae(ot);
+}), ht = me(null), pl = ht.Provider, gl = () => {
+  const e = ie(ht);
   if (!e) throw new Error("A section must be rendered inside <EditorPanel.Root>.");
   return e;
-}, Ji = "_1jlczkt0", el = "data-graphy-editor-panel", nl = {
-  List: F,
-  Grid: ji
+}, vl = "_1jlczkt0", Cl = "data-graphy-editor-panel", fl = {
+  List: z,
+  Grid: dt
 };
-function tl(e) {
+function bl(e) {
   if (e === void 0) return !1;
   const t = e.split(/\s+/);
   return t.includes("_1ii3bsb0") || t.includes("_1ii3bsb1");
 }
-var rl = ({ handle: e, children: t, controls: i, defaultExpandedSection: r = void 0, className: o }) => {
-  const a = Rt(e), { themeClass: l, inlineVarsStyle: c } = De(), [s, u] = $(() => r ? [r] : []), d = k(() => ({
+var yl = ({ handle: e, children: t, controls: i, defaultExpandedSection: o = void 0, className: r }) => {
+  const a = Bt(e), { themeClass: l, inlineVarsStyle: c } = Ve(), [s, u] = q(() => o ? [o] : []), d = E(() => ({
     expandSection: (h) => u([h]),
     collapseAllSections: () => u([])
   }), []);
-  return /* @__PURE__ */ n(Ke.Provider, {
+  return /* @__PURE__ */ n(Ue.Provider, {
     value: a,
-    children: /* @__PURE__ */ n($i, {
+    children: /* @__PURE__ */ n(hl, {
       controls: i,
-      children: /* @__PURE__ */ n(Yi, {
+      children: /* @__PURE__ */ n(pl, {
         value: d,
-        children: /* @__PURE__ */ n(le.Root, {
-          [el]: "",
-          className: re(Ji, o, { [l]: !tl(o) }),
+        children: /* @__PURE__ */ n(ce.Root, {
+          [Cl]: "",
+          className: oe(vl, r, { [l]: !bl(r) }),
           style: c,
           value: s,
           onValueChange: (h) => u(h),
@@ -2213,37 +2214,43 @@ var rl = ({ handle: e, children: t, controls: i, defaultExpandedSection: r = voi
       })
     })
   });
-}, it = {
-  Root: rl,
-  Controls: nl
-}, cn = {
+}, ut = {
+  Root: yl,
+  Controls: fl
+}, hn = {
   stack: "pr583x0",
   grid: "pr583x1"
-}, dn = "pr583x2", al = "pr583x3", C = ({ label: e, layout: t = "grid", children: i }) => {
-  const r = de(), o = de();
+}, un = "pr583x2", Sl = {
+  plain: "pr583x4 pr583x3",
+  withIcon: "pr583x5 pr583x3"
+}, b = ({ label: e, layout: t = "grid", icon: i, children: o }) => {
+  const r = ae(), a = ae();
   return e === void 0 ? /* @__PURE__ */ n("div", {
-    className: cn[t],
+    className: hn[t],
     children: /* @__PURE__ */ n("div", {
-      className: dn,
-      children: i
+      className: un,
+      children: o
     })
   }) : /* @__PURE__ */ m("div", {
-    className: cn[t],
-    children: [/* @__PURE__ */ n("label", {
+    className: hn[t],
+    children: [/* @__PURE__ */ m("label", {
       id: r,
-      htmlFor: o,
-      className: al,
-      children: e
+      htmlFor: a,
+      className: Sl[i === void 0 ? "plain" : "withIcon"],
+      children: [i !== void 0 && /* @__PURE__ */ n("span", {
+        "aria-hidden": "true",
+        children: i
+      }), e]
     }), /* @__PURE__ */ n("div", {
-      className: dn,
-      children: /* @__PURE__ */ n(Jn, {
+      className: un,
+      children: /* @__PURE__ */ n(at, {
         labelId: r,
-        controlId: o,
-        children: i
+        controlId: a,
+        children: o
       })
     })]
   });
-}, ol = (e) => /* @__PURE__ */ n(I, {
+}, wl = (e) => /* @__PURE__ */ n(T, {
   ...e,
   children: /* @__PURE__ */ n("g", {
     stroke: "currentColor",
@@ -2252,55 +2259,55 @@ var rl = ({ handle: e, children: t, controls: i, defaultExpandedSection: r = voi
     strokeLinejoin: "round",
     children: /* @__PURE__ */ n("path", { d: "m9 6 6 6-6 6" })
   })
-}), Ge = "_40zvwv0", Ue = "_40zvwv1", il = "_40zvwv2", lt = "_40zvwv3", ll = "_40zvwv4 _40zvwv3";
-var sl = "_40zvwv6";
-var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory: r, onOpenChange: o, children: a }) => t === "collapsible" ? /* @__PURE__ */ n(hl, {
+}), We = "_40zvwv0", Ze = "_40zvwv1", xl = "_40zvwv2", mt = "_40zvwv3", Ll = "_40zvwv4 _40zvwv3";
+var Tl = "_40zvwv6";
+var Pl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory: o, onOpenChange: r, children: a }) => t === "collapsible" ? /* @__PURE__ */ n(Al, {
   title: e,
   preview: i,
-  accessory: r,
-  onOpenChange: o,
+  accessory: o,
+  onOpenChange: r,
   children: a
-}) : t === "inline" && i === void 0 ? /* @__PURE__ */ n(dl, {
+}) : t === "inline" && i === void 0 ? /* @__PURE__ */ n(Il, {
   title: e,
-  accessory: r,
+  accessory: o,
   children: a
 }) : /* @__PURE__ */ m("div", {
-  className: Ge,
+  className: We,
   children: [/* @__PURE__ */ m("div", {
-    className: Ue,
+    className: Ze,
     children: [
       /* @__PURE__ */ n("span", {
-        className: lt,
+        className: mt,
         children: e
       }),
       i !== void 0 && /* @__PURE__ */ n("span", {
         className: "_40zvwv5",
         children: i
       }),
-      r !== void 0 && /* @__PURE__ */ n("span", {
+      o !== void 0 && /* @__PURE__ */ n("span", {
         className: "_40zvwv7",
-        children: r
+        children: o
       })
     ]
   }), /* @__PURE__ */ n("div", { children: a })]
-}), dl = ({ title: e, accessory: t, children: i }) => {
-  const r = de(), o = de();
+}), Il = ({ title: e, accessory: t, children: i }) => {
+  const o = ae(), r = ae();
   return /* @__PURE__ */ n("div", {
-    className: Ge,
+    className: We,
     children: /* @__PURE__ */ m("div", {
-      className: Ue,
+      className: Ze,
       children: [
         /* @__PURE__ */ n("label", {
-          id: r,
-          htmlFor: o,
-          className: ll,
+          id: o,
+          htmlFor: r,
+          className: Ll,
           children: e
         }),
         /* @__PURE__ */ n("span", {
-          className: sl,
-          children: /* @__PURE__ */ n(Jn, {
-            labelId: r,
-            controlId: o,
+          className: Tl,
+          children: /* @__PURE__ */ n(at, {
+            labelId: o,
+            controlId: r,
             children: i
           })
         }),
@@ -2311,22 +2318,22 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       ]
     })
   });
-}, hl = ({ title: e, preview: t, accessory: i, onOpenChange: r, children: o }) => {
-  const a = A();
-  return /* @__PURE__ */ m(le.Item, {
+}, Al = ({ title: e, preview: t, accessory: i, onOpenChange: o, children: r }) => {
+  const a = I();
+  return /* @__PURE__ */ m(ce.Item, {
     value: e,
-    className: Ge,
-    onOpenChange: r,
-    children: [/* @__PURE__ */ m(le.Header, {
-      className: Ue,
+    className: We,
+    onOpenChange: o,
+    children: [/* @__PURE__ */ m(ce.Header, {
+      className: Ze,
       render: /* @__PURE__ */ n("div", {}),
       children: [
-        /* @__PURE__ */ n(le.Trigger, {
-          className: il,
+        /* @__PURE__ */ n(ce.Trigger, {
+          className: xl,
           "aria-label": a("editor.accessibility.toggleSection", { title: e })
         }),
         /* @__PURE__ */ n("span", {
-          className: lt,
+          className: mt,
           children: e
         }),
         t !== void 0 && /* @__PURE__ */ n("span", {
@@ -2338,267 +2345,267 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
           children: i
         }),
         /* @__PURE__ */ n("span", {
-          className: cl,
-          children: /* @__PURE__ */ n(ol, { size: "sm" })
+          className: Pl,
+          children: /* @__PURE__ */ n(wl, { size: "sm" })
         })
       ]
-    }), /* @__PURE__ */ n(le.Panel, { children: /* @__PURE__ */ n("div", { children: o }) })]
+    }), /* @__PURE__ */ n(ce.Panel, { children: /* @__PURE__ */ n("div", { children: r }) })]
   });
-}, Ks = ({ title: e, isChecked: t, onToggle: i, isDisabled: r, preview: o, children: a }) => {
-  const { expandSection: l, collapseAllSections: c } = Qi(), { Switch: s } = E();
+}, Ol = ({ title: e, isChecked: t, onToggle: i, isDisabled: o, preview: r, children: a }) => {
+  const { expandSection: l, collapseAllSections: c } = gl(), { Switch: s } = N();
   return /* @__PURE__ */ n(D, {
     title: e,
     layout: "collapsible",
-    preview: o,
+    preview: r,
     onOpenChange: (h) => {
-      h && !t && r !== !0 && i(!0);
+      h && !t && o !== !0 && i(!0);
     },
     accessory: /* @__PURE__ */ n(s, {
       isChecked: t,
       onChange: (h) => {
         i(h), h ? l(e) : c();
       },
-      isDisabled: r,
+      isDisabled: o,
       ariaLabel: e
     }),
     children: a
   });
-}, ul = {
+}, Ml = {
   horizontal: ["bottom", "top"],
   vertical: ["left", "right"]
-}, ml = {
+}, Nl = {
   left: "editor.axesPanel.position.left",
   right: "editor.axesPanel.position.right",
   top: "editor.axesPanel.position.top",
   bottom: "editor.axesPanel.position.bottom"
-}, pl = {
+}, kl = {
   x: "editor.axesPanel.mainAxisSection.xAxis",
   y: "editor.axesPanel.mainAxisSection.yAxis"
-}, hn = ({ axis: e, title: t, layout: i = "collapsible", preview: r }) => {
-  const o = M(), a = R(o), l = A(), { NumberField: c, Switch: s, TextField: u, ToggleGroup: d } = E();
+}, mn = ({ axis: e, title: t, layout: i = "collapsible", preview: o }) => {
+  const r = M(), a = _(r), l = I(), { NumberField: c, Switch: s, TextField: u, ToggleGroup: d } = N();
   if (!a) return null;
-  const h = a.coordSystem.type === "polar" ? a.coordSystem.axisMapping[e].geometry : "linear", v = a.config.axes[e], p = a.scales[e], g = p?.spec, S = g?.scaleType === "continuous" ? g : void 0;
-  if (h === "circular" || h === "radial" && S === void 0) return null;
-  const P = g !== void 0 && "reverse" in g ? g : void 0, y = g?.scaleType === "continuous" || g?.scaleType === "datetime", f = e === "y" && S !== void 0 && a.layers.some((b) => b.yScaleType === "primary" && b.geom === "bar"), x = S?.transform === "log", T = S?.domainMax ?? null, z = gl(S), B = (b, Z) => b.map((me) => ({
-    value: me,
-    label: Z(me)
-  })), N = a.guides.axes.find((b) => b.scaleAestheticKey === e)?.position, H = ul[N === "bottom" || N === "top" || N === void 0 && e === "x" ? "horizontal" : "vertical"], L = a.guides.legends.drawn.some((b) => H.some((Z) => Z === b.position)), w = H.map((b) => ({
-    value: b,
-    label: l(ml[b])
-  })), O = B(["auto", "edges"], (b) => l(b === "edges" ? "editor.axesPanel.labelMode.edges" : "editor.axesPanel.labelMode.auto")), Q = B(["linear", "log"], (b) => l(b === "log" ? "editor.axesPanel.scale.log" : "editor.axesPanel.scale.auto")), ht = B([
+  const h = a.coordSystem.type === "polar" ? a.coordSystem.axisMapping[e].geometry : "linear", v = a.config.axes[e], p = a.scales[e], g = p?.spec, C = g?.scaleType === "continuous" ? g : void 0;
+  if (h === "circular" || h === "radial" && C === void 0) return null;
+  const P = g !== void 0 && "reverse" in g ? g : void 0, y = g?.scaleType === "continuous" || g?.scaleType === "datetime", f = e === "y" && C !== void 0 && a.layers.some((S) => S.yScaleType === "primary" && S.geom === "bar"), x = C?.transform === "log", L = C?.domainMax ?? null, A = Rl(C), H = (S, $) => S.map((pe) => ({
+    value: pe,
+    label: $(pe)
+  })), k = a.guides.axes.find((S) => S.scaleAestheticKey === e)?.position, F = Ml[k === "bottom" || k === "top" || k === void 0 && e === "x" ? "horizontal" : "vertical"], O = a.guides.legends.drawn.some((S) => F.some(($) => $ === S.position)), w = F.map((S) => ({
+    value: S,
+    label: l(Nl[S])
+  })), R = H(["auto", "edges"], (S) => l(S === "edges" ? "editor.axesPanel.labelMode.edges" : "editor.axesPanel.labelMode.auto")), J = H(["linear", "log"], (S) => l(S === "log" ? "editor.axesPanel.scale.log" : "editor.axesPanel.scale.auto")), Ct = H([
     "auto",
     "zero",
     "custom"
-  ], (b) => l(b === "zero" ? "editor.axesPanel.startFrom.zero" : b === "custom" ? "editor.axesPanel.startFrom.custom" : "editor.axesPanel.startFrom.auto")), ut = B(["auto", "custom"], (b) => l(b === "custom" ? "editor.axesPanel.endAt.custom" : "editor.axesPanel.endAt.auto")), mt = B(["no", "yes"], (b) => l(b === "yes" ? "editor.axesPanel.yesNo.yes" : "editor.axesPanel.yesNo.no")), pt = (b) => {
-    o.commands.dispatch(new nr({
+  ], (S) => l(S === "zero" ? "editor.axesPanel.startFrom.zero" : S === "custom" ? "editor.axesPanel.startFrom.custom" : "editor.axesPanel.startFrom.auto")), ft = H(["auto", "custom"], (S) => l(S === "custom" ? "editor.axesPanel.endAt.custom" : "editor.axesPanel.endAt.auto")), bt = H(["no", "yes"], (S) => l(S === "yes" ? "editor.axesPanel.yesNo.yes" : "editor.axesPanel.yesNo.no")), yt = (S) => {
+    r.commands.dispatch(new sr({
       axis: e,
-      isVisible: b
+      isVisible: S
     }));
-  }, gt = (b) => {
-    o.commands.dispatch(new Yt({
+  }, St = (S) => {
+    r.commands.dispatch(new ar({
       axis: e,
-      label: b === "" ? null : b
+      label: S === "" ? null : S
     }), { transient: !0 });
-  }, vt = (b) => {
-    o.commands.dispatch(new er({
+  }, wt = (S) => {
+    r.commands.dispatch(new lr({
       axis: e,
-      isVisible: b
+      isVisible: S
     }));
-  }, ft = (b) => {
-    o.commands.dispatch(new Jt({
+  }, xt = (S) => {
+    r.commands.dispatch(new ir({
       axis: e,
-      tickMode: b === "edges" ? "edges" : "auto"
+      tickMode: S === "edges" ? "edges" : "auto"
     }));
-  }, Ct = (b) => {
-    o.commands.dispatch(new Tr({
+  }, Lt = (S) => {
+    r.commands.dispatch(new _r({
       scaledAesthetic: e,
-      reverse: b === "yes"
+      reverse: S === "yes"
     }));
-  }, bt = (b) => {
-    o.commands.dispatch(new Ar({
+  }, Tt = (S) => {
+    r.commands.dispatch(new Dr({
       scaledAesthetic: e,
-      transform: b === "log" ? "log" : "linear"
+      transform: S === "log" ? "log" : "linear"
     }));
-  }, $e = (b) => {
-    o.commands.dispatch(new pe({
+  }, Xe = (S) => {
+    r.commands.dispatch(new ge({
       scaledAesthetic: e,
-      ...b
+      ...S
     }), { transient: !0 });
-  }, yt = (b) => {
-    b !== null && $e({ domainMin: b });
-  }, St = (b) => {
-    b !== null && $e({ domainMax: b });
-  }, wt = (b) => {
-    if (S) {
-      if (b === "custom") {
-        S.zero && o.commands.dispatch(new Qe({
+  }, Pt = (S) => {
+    S !== null && Xe({ domainMin: S });
+  }, It = (S) => {
+    S !== null && Xe({ domainMax: S });
+  }, At = (S) => {
+    if (C) {
+      if (S === "custom") {
+        C.zero && r.commands.dispatch(new en({
           scaledAesthetic: e,
           zero: !1
-        })), o.commands.dispatch(new pe({
+        })), r.commands.dispatch(new ge({
           scaledAesthetic: e,
-          domainMin: un(p?.domain, "start")
+          domainMin: pn(p?.domain, "start")
         }));
         return;
       }
-      S.domainMin !== null && o.commands.dispatch(new pe({
+      C.domainMin !== null && r.commands.dispatch(new ge({
         scaledAesthetic: e,
         domainMin: null
-      })), o.commands.dispatch(new Qe({
+      })), r.commands.dispatch(new en({
         scaledAesthetic: e,
-        zero: b === "zero"
+        zero: S === "zero"
       }));
     }
-  }, xt = (b) => {
-    const Z = b === "custom" ? un(p?.domain, "end") : null;
-    o.commands.dispatch(new pe({
+  }, Ot = (S) => {
+    const $ = S === "custom" ? pn(p?.domain, "end") : null;
+    r.commands.dispatch(new ge({
       scaledAesthetic: e,
-      domainMax: Z
+      domainMax: $
     }));
-  }, Pt = (b) => {
-    const Z = H.find((me) => me === b);
-    Z && o.commands.dispatch(new Qt({
+  }, Mt = (S) => {
+    const $ = F.find((pe) => pe === S);
+    $ && r.commands.dispatch(new or({
       axis: e,
-      position: Z
+      position: $
     }));
   };
   return /* @__PURE__ */ n(D, {
-    title: t ?? l(pl[e]),
+    title: t ?? l(kl[e]),
     layout: i,
-    preview: r,
-    children: /* @__PURE__ */ m(F, { children: [
-      /* @__PURE__ */ n(C, {
+    preview: o,
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.visible"),
         children: /* @__PURE__ */ n(s, {
           isChecked: v.isVisible,
-          onChange: pt
+          onChange: yt
         })
       }),
-      h === "linear" && /* @__PURE__ */ m(W, { children: [/* @__PURE__ */ n(C, {
+      h === "linear" && /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.title"),
         children: /* @__PURE__ */ n(u, {
           value: v.label ?? "",
-          onChange: gt,
-          onCommit: o.commands.seal
+          onChange: St,
+          onCommit: r.commands.seal
         })
-      }), /* @__PURE__ */ n(C, {
+      }), /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.ticks"),
         children: /* @__PURE__ */ n(s, {
           isChecked: v.ticks.isVisible,
-          onChange: vt
+          onChange: wt
         })
       })] }),
-      y && /* @__PURE__ */ n(C, {
+      y && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.labels"),
         children: /* @__PURE__ */ n(d, {
           value: v.ticks.mode,
-          options: O,
-          onChange: ft
+          options: R,
+          onChange: xt
         })
       }),
-      S && h === "linear" && !L && /* @__PURE__ */ n(C, {
+      C && h === "linear" && !O && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.position"),
         children: /* @__PURE__ */ n(d, {
-          value: N ?? v.position,
+          value: k ?? v.position,
           options: w,
-          onChange: Pt
+          onChange: Mt
         })
       }),
-      P !== void 0 && /* @__PURE__ */ n(C, {
+      P !== void 0 && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.reverse"),
         children: /* @__PURE__ */ n(d, {
           value: P.reverse === !0 ? "yes" : "no",
-          options: mt,
-          onChange: Ct
+          options: bt,
+          onChange: Lt
         })
       }),
-      S && !f && /* @__PURE__ */ n(C, {
+      C && !f && /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.scale"),
         children: /* @__PURE__ */ n(d, {
           value: x ? "log" : "linear",
-          options: Q,
-          onChange: bt
+          options: J,
+          onChange: Tt
         })
       }),
-      S && !x && /* @__PURE__ */ m(W, { children: [
-        !f && /* @__PURE__ */ m(W, { children: [/* @__PURE__ */ n(C, {
+      C && !x && /* @__PURE__ */ m(G, { children: [
+        !f && /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.startFrom"),
           children: /* @__PURE__ */ n(d, {
-            value: z,
-            options: ht,
-            onChange: wt
+            value: A,
+            options: Ct,
+            onChange: At
           })
-        }), z === "custom" && /* @__PURE__ */ n(C, {
+        }), A === "custom" && /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.value"),
           children: /* @__PURE__ */ n(c, {
-            value: S.domainMin ?? null,
-            onChange: yt,
-            onCommit: o.commands.seal
+            value: C.domainMin ?? null,
+            onChange: Pt,
+            onCommit: r.commands.seal
           })
         })] }),
-        /* @__PURE__ */ n(C, {
+        /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.endAt"),
           children: /* @__PURE__ */ n(d, {
-            value: T === null ? "auto" : "custom",
-            options: ut,
-            onChange: xt
+            value: L === null ? "auto" : "custom",
+            options: ft,
+            onChange: Ot
           })
         }),
-        T !== null && /* @__PURE__ */ n(C, {
+        L !== null && /* @__PURE__ */ n(b, {
           label: l("editor.axesPanel.controls.value"),
           children: /* @__PURE__ */ n(c, {
-            value: T,
-            onChange: St,
-            onCommit: o.commands.seal
+            value: L,
+            onChange: It,
+            onCommit: r.commands.seal
           })
         })
       ] })
     ] })
   });
-}, gl = (e) => e === void 0 ? "auto" : e.domainMin !== null && e.domainMin !== void 0 ? "custom" : e.zero === !0 ? "zero" : "auto", un = (e, t) => {
+}, Rl = (e) => e === void 0 ? "auto" : e.domainMin !== null && e.domainMin !== void 0 ? "custom" : e.zero === !0 ? "zero" : "auto", pn = (e, t) => {
   const i = t === "start" ? e?.[0] : e?.[e.length - 1];
   return typeof i == "number" ? i : 0;
-}, We = ({ value: e, onChange: t }) => {
-  const i = M(), r = A(), { TextField: o } = E(), a = e !== null && typeof e != "string", l = (c) => t(c === "" ? null : c);
-  return /* @__PURE__ */ n(C, {
-    label: r("editor.elementsPanel.contentValue"),
-    children: /* @__PURE__ */ n(o, {
+}, qe = ({ value: e, onChange: t }) => {
+  const i = M(), o = I(), { TextField: r } = N(), a = e !== null && typeof e != "string", l = (c) => t(c === "" ? null : c);
+  return /* @__PURE__ */ n(b, {
+    label: o("editor.elementsPanel.contentValue"),
+    children: /* @__PURE__ */ n(r, {
       value: typeof e == "string" ? e : "",
       onChange: l,
       onCommit: i.commands.seal,
       isDisabled: a
     })
   });
-}, vl = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Switch: l } = E();
-  if (!o) return null;
-  const c = o.config.content, s = (d) => {
-    r.commands.dispatch(new xe({
+}, El = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Switch: l } = N();
+  if (!r) return null;
+  const c = r.config.content, s = (d) => {
+    o.commands.dispatch(new xe({
       slot: "caption",
       isVisible: d
     }));
   }, u = (d) => {
-    r.commands.dispatch(new or({ caption: d }), { transient: !0 });
+    o.commands.dispatch(new ur({ caption: d }), { transient: !0 });
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.elementsPanel.footerSection.caption"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.elementsPanel.contentVisible"),
       children: /* @__PURE__ */ n(l, {
         isChecked: c.isCaptionVisible,
         onChange: s
       })
-    }), /* @__PURE__ */ n(We, {
+    }), /* @__PURE__ */ n(qe, {
       value: c.caption,
       onChange: u
     })] })
   });
-}, mn = /^[a-z][a-z\d+.-]*:/i, fl = {}, Cl = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Switch: l } = E();
-  if (!o) return null;
-  const c = o.config.content, s = (u) => {
-    r.commands.dispatch(new xe({
+}, gn = /^[a-z][a-z\d+.-]*:/i, _l = {}, Dl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Switch: l } = N();
+  if (!r) return null;
+  const c = r.config.content, s = (u) => {
+    o.commands.dispatch(new xe({
       slot: "source",
       isVisible: u
     }));
@@ -2607,74 +2614,74 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     title: e ?? a("editor.elementsPanel.sourceSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.elementsPanel.contentVisible"),
       children: /* @__PURE__ */ n(l, {
         isChecked: c.isSourceVisible,
         onChange: s
       })
-    }), /* @__PURE__ */ n(bl, { source: c.source ?? fl })] })
+    }), /* @__PURE__ */ n(Hl, { source: c.source ?? _l })] })
   });
-}, bl = ({ source: e }) => {
-  const t = M(), i = A(), { TextField: r } = E(), o = (s) => {
+}, Hl = ({ source: e }) => {
+  const t = M(), i = I(), { TextField: o } = N(), r = (s) => {
     const u = (s.label ?? "") !== "" || (s.url ?? "") !== "";
-    t.commands.dispatch(new ir({ source: u ? s : null }), { transient: !0 });
+    t.commands.dispatch(new mr({ source: u ? s : null }), { transient: !0 });
   }, a = () => {
     const s = e.url ?? "";
-    s !== "" && !mn.test(s) && o({
+    s !== "" && !gn.test(s) && r({
       ...e,
       url: `https://${s}`
     }), t.commands.seal();
-  }, l = (s) => o({
+  }, l = (s) => r({
     ...e,
     url: s
-  }), c = (s) => o({
+  }), c = (s) => r({
     ...e,
     label: s
   });
-  return /* @__PURE__ */ m(W, { children: [/* @__PURE__ */ n(C, {
+  return /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n(b, {
     label: i("editor.elementsPanel.sourceSection.url"),
-    children: /* @__PURE__ */ n(r, {
+    children: /* @__PURE__ */ n(o, {
       value: e.url ?? "",
       onChange: l,
       onCommit: a,
-      hasError: mn.test(e.url ?? "") && !Yr(e.url)
+      hasError: gn.test(e.url ?? "") && !ga(e.url)
     })
-  }), /* @__PURE__ */ n(C, {
+  }), /* @__PURE__ */ n(b, {
     label: i("editor.elementsPanel.sourceSection.name"),
-    children: /* @__PURE__ */ n(r, {
+    children: /* @__PURE__ */ n(o, {
       value: e.label ?? "",
       onChange: c,
       onCommit: t.commands.seal
     })
   })] });
-}, yl = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Switch: l } = E();
-  if (!o) return null;
-  const c = o.config.content, s = (d) => {
-    r.commands.dispatch(new xe({
+}, Vl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Switch: l } = N();
+  if (!r) return null;
+  const c = r.config.content, s = (d) => {
+    o.commands.dispatch(new xe({
       slot: "subtitle",
       isVisible: d
     }));
   }, u = (d) => {
-    r.commands.dispatch(new lr({ subtitle: d }), { transient: !0 });
+    o.commands.dispatch(new pr({ subtitle: d }), { transient: !0 });
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.elementsPanel.headerSection.subtitle"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.elementsPanel.contentVisible"),
       children: /* @__PURE__ */ n(l, {
         isChecked: c.isSubtitleVisible,
         onChange: s
       })
-    }), /* @__PURE__ */ n(We, {
+    }), /* @__PURE__ */ n(qe, {
       value: c.subtitle,
       onChange: u
     })] })
   });
-}, ke = [
+}, Re = [
   0.8,
   1,
   1.2,
@@ -2685,15 +2692,15 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   2.5,
   3,
   4
-], Sl = ke.length / 2, wl = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { RadioGrid: l } = E();
-  if (!o) return null;
-  const { textScale: c } = o.config.appearance, s = (h) => a("editor.elementsPanel.textSizeSection.scaleFormat", { value: `${h}` }), u = ke.map((h) => ({
+], zl = Re.length / 2, Fl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { RadioGrid: l } = N();
+  if (!r) return null;
+  const { textScale: c } = r.config.appearance, s = (h) => a("editor.elementsPanel.textSizeSection.scaleFormat", { value: `${h}` }), u = Re.map((h) => ({
     value: `${h}`,
     label: s(h)
   })), d = (h) => {
-    const v = ke.find((p) => `${p}` === h);
-    v !== void 0 && r.commands.dispatch(new Xt({ textScale: v }));
+    const v = Re.find((p) => `${p}` === h);
+    v !== void 0 && o.commands.dispatch(new rr({ textScale: v }));
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.elementsPanel.textSizeSection.title"),
@@ -2702,77 +2709,77 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     children: /* @__PURE__ */ n(l, {
       value: `${c}`,
       options: u,
-      columns: Sl,
+      columns: zl,
       onChange: d,
       ariaLabel: a("editor.elementsPanel.textSizeSection.title")
     })
   });
-}, xl = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Switch: l } = E();
-  if (!o) return null;
-  const c = o.config.content, s = (d) => {
-    r.commands.dispatch(new xe({
+}, Bl = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Switch: l } = N();
+  if (!r) return null;
+  const c = r.config.content, s = (d) => {
+    o.commands.dispatch(new xe({
       slot: "title",
       isVisible: d
     }));
   }, u = (d) => {
-    r.commands.dispatch(new sr({ title: d }), { transient: !0 });
+    o.commands.dispatch(new gr({ title: d }), { transient: !0 });
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.elementsPanel.headerSection.toggleTitle"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.elementsPanel.contentVisible"),
       children: /* @__PURE__ */ n(l, {
         isChecked: c.isTitleVisible,
         onChange: s
       })
-    }), /* @__PURE__ */ n(We, {
+    }), /* @__PURE__ */ n(qe, {
       value: c.title,
       onChange: u
     })] })
   });
-}, Gs = ({ children: e, ...t }) => /* @__PURE__ */ n(it.Root, {
+}, Tc = ({ children: e, ...t }) => /* @__PURE__ */ n(ut.Root, {
   ...t,
-  children: e ?? /* @__PURE__ */ m(W, { children: [
-    /* @__PURE__ */ n(xl, {}),
-    /* @__PURE__ */ n(yl, {}),
-    /* @__PURE__ */ n(vl, {}),
-    /* @__PURE__ */ n(Cl, {}),
-    /* @__PURE__ */ n(wl, {})
+  children: e ?? /* @__PURE__ */ m(G, { children: [
+    /* @__PURE__ */ n(Bl, {}),
+    /* @__PURE__ */ n(Vl, {}),
+    /* @__PURE__ */ n(El, {}),
+    /* @__PURE__ */ n(Dl, {}),
+    /* @__PURE__ */ n(Fl, {})
   ] })
-}), Us = ({ children: e, ...t }) => /* @__PURE__ */ n(it.Root, {
+}), Pc = ({ children: e, ...t }) => /* @__PURE__ */ n(ut.Root, {
   ...t,
-  children: e ?? /* @__PURE__ */ m(W, { children: [/* @__PURE__ */ n(hn, { axis: "x" }), /* @__PURE__ */ n(hn, { axis: "y" })] })
-}), Ie = (e) => `${e}px`, st = (e) => `${Math.round(e * 100)}%`, Pl = (e) => `${e}°`, Il = 24, pn = ["dim", "desaturate"], Ws = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Slider: l, ToggleGroup: c } = E();
-  if (!o) return null;
-  const { cornerRadius: s } = o.config.appearance, u = ea(o.spec), d = pn.map((p) => ({
+  children: e ?? /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n(mn, { axis: "x" }), /* @__PURE__ */ n(mn, { axis: "y" })] })
+}), Te = (e) => `${e}px`, pt = (e) => `${Math.round(e * 100)}%`, Gl = (e) => `${e}°`, Kl = 24, vn = ["dim", "desaturate"], Ic = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Slider: l, ToggleGroup: c } = N();
+  if (!r) return null;
+  const { cornerRadius: s } = r.config.appearance, u = fa(r.spec), d = vn.map((p) => ({
     value: p,
     label: a(p === "dim" ? "editor.highlighting.highlightStyle.tint" : "editor.highlighting.highlightStyle.grey")
   })), h = (p) => {
-    r.commands.dispatch(new jt({ cornerRadius: p }), { transient: !0 });
+    o.commands.dispatch(new tr({ cornerRadius: p }), { transient: !0 });
   }, v = (p) => {
-    const g = pn.find((S) => S === p);
-    g && r.commands.dispatch(new vr({ dimStyle: g }));
+    const g = vn.find((C) => C === p);
+    g && o.commands.dispatch(new xr({ dimStyle: g }));
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.colorPanel.appearanceSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.colorPanel.borderSection.cornerRadius"),
       children: /* @__PURE__ */ n(l, {
         value: s,
         min: 0,
-        max: Il,
+        max: Kl,
         step: 1,
-        formatValue: Ie,
+        formatValue: Te,
         onChange: h,
-        onCommit: r.commands.seal
+        onCommit: o.commands.seal
       })
-    }), /* @__PURE__ */ n(C, {
+    }), /* @__PURE__ */ n(b, {
       label: a("editor.colorPanel.appearanceSection.highlightStyle"),
       children: /* @__PURE__ */ n(c, {
         value: u,
@@ -2781,31 +2788,31 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       })
     })] })
   });
-}, qe = (e, t) => {
-  const { colorScheme: i } = De();
-  return k(() => {
-    const r = e?.layers.find((o) => o.id === t);
-    return r === void 0 ? null : Br({ colorScheme: i }).geomReaders(r);
+}, $e = (e, t) => {
+  const { colorScheme: i } = Ve();
+  return E(() => {
+    const o = e?.layers.find((r) => r.id === t);
+    return o === void 0 ? null : Jr({ colorScheme: i }).geomReaders(o);
   }, [
     e,
     t,
     i
   ]);
-}, Tl = 0.05, qs = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Slider: l, ToggleGroup: c } = E(), s = o ? Tn(o.spec.layers, "bar") : void 0, u = qe(o, s?.id ?? null);
-  if (!o || !s || o.coordSystem.type === "polar" && o.coordSystem.bandAxis === null) return null;
+}, Ul = 0.05, Ac = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Slider: l, ToggleGroup: c } = N(), s = r ? Nn(r.spec.layers, "bar") : void 0, u = $e(r, s?.id ?? null);
+  if (!r || !s || r.coordSystem.type === "polar" && r.coordSystem.bandAxis === null) return null;
   const d = (p) => {
-    r.commands.dispatch(new rr({
+    o.commands.dispatch(new dr({
       layerId: s.id,
       width: p
     }), { transient: !0 });
   }, h = (p) => {
-    const g = Ze.find((S) => S === p);
-    g && r.commands.dispatch(new tr({
+    const g = je.find((C) => C === p);
+    g && o.commands.dispatch(new cr({
       layerId: s.id,
       borderRadius: g
     }));
-  }, v = Ze.map((p) => ({
+  }, v = je.map((p) => ({
     value: p,
     label: a(`editor.graphPanel.barSection.roundingOptions.${p}`)
   }));
@@ -2813,95 +2820,336 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     title: e ?? a("editor.graphPanel.barSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.barSection.thickness"),
       children: /* @__PURE__ */ n(l, {
         value: s.params.width,
-        min: $t,
-        max: qt,
-        step: Tl,
-        formatValue: st,
+        min: Jt,
+        max: Qt,
+        step: Ul,
+        formatValue: pt,
         onChange: d,
-        onCommit: r.commands.seal
+        onCommit: o.commands.seal
       })
-    }), /* @__PURE__ */ n(C, {
+    }), /* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.barSection.rounding"),
       layout: "stack",
       children: /* @__PURE__ */ n(c, {
-        value: u?.get("borderRadius") ?? Kt,
+        value: u?.get("borderRadius") ?? Xt,
         options: v,
         onChange: h
       })
     })] })
   });
-}, $s = ({ layerId: e, title: t, layout: i = "collapsible", preview: r }) => {
-  const o = M(), a = R(o), l = A(), { Switch: c } = E();
+}, Pe = ({ children: e }) => {
+  const t = ae();
+  return /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n("g", {
+    filter: `url(#${t})`,
+    children: e
+  }), /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ m("filter", {
+    id: t,
+    x: "-20%",
+    y: "-20%",
+    width: "140%",
+    height: "140%",
+    children: [/* @__PURE__ */ n("feDropShadow", {
+      dx: "0",
+      dy: "0",
+      stdDeviation: "0.586",
+      floodColor: "#0F0F18",
+      floodOpacity: "0.12"
+    }), /* @__PURE__ */ n("feDropShadow", {
+      dx: "0",
+      dy: "1.172",
+      stdDeviation: "0.586",
+      floodColor: "#0E0E34",
+      floodOpacity: "0.16"
+    })]
+  }) })] });
+}, Ie = "qdaoth0", Wl = (e) => /* @__PURE__ */ m(T, {
+  viewBox: "0 0 31 33",
+  ...e,
+  children: [/* @__PURE__ */ n(Pe, { children: /* @__PURE__ */ n("path", {
+    className: Ie,
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.7417 6.23664C25.7417 6.09417 25.7076 5.95967 25.6471 5.84086C25.5633 5.67624 25.4288 5.54173 25.2641 5.4579C25.1453 5.39739 25.0108 5.36328 24.8684 5.36328H12.0591C11.5767 5.36328 11.1857 5.7543 11.1857 6.23664C11.1857 6.71899 11.5767 7.11 12.0591 7.11H22.7599L5.61908 24.2508C5.27801 24.5919 5.27801 25.1448 5.61908 25.4859C5.96015 25.827 6.51313 25.827 6.8542 25.4859L23.995 8.34513V19.0459C23.995 19.5283 24.386 19.9193 24.8684 19.9193C25.3507 19.9193 25.7417 19.5283 25.7417 19.0459V6.23664ZM20.995 15.5878V19.0459C20.995 21.1851 22.7292 22.9193 24.8684 22.9193C27.0076 22.9193 28.7417 21.1851 28.7417 19.0459V6.23664C28.7417 4.09744 27.0076 2.36328 24.8684 2.36328H12.0591C9.91985 2.36328 8.18569 4.09744 8.18569 6.23664C8.18569 8.37584 9.91985 10.11 12.0591 10.11H15.5172L3.49777 22.1295C1.98512 23.6421 1.98513 26.0946 3.49776 27.6072C5.0104 29.1199 7.46288 29.1199 8.97552 27.6072L20.995 15.5878Z"
+  }) }), /* @__PURE__ */ n("path", {
+    fill: "currentColor",
+    d: "M12.0591 7.11C11.5767 7.11 11.1857 6.71899 11.1857 6.23664C11.1857 5.7543 11.5767 5.36328 12.0591 5.36328H24.8684C25.3507 5.36328 25.7417 5.7543 25.7417 6.23664V19.0459C25.7417 19.5283 25.3507 19.9193 24.8684 19.9193C24.386 19.9193 23.995 19.5283 23.995 19.0459V8.34512L6.8542 25.4859C6.51313 25.827 5.96015 25.827 5.61908 25.4859C5.27801 25.1448 5.27801 24.5919 5.61908 24.2508L22.7599 7.11H12.0591Z"
+  })]
+}), Zl = (e) => /* @__PURE__ */ n(T, {
+  viewBox: "0 0 32 32",
+  ...e,
+  children: /* @__PURE__ */ m(Pe, { children: [/* @__PURE__ */ n("path", {
+    className: Ie,
+    d: "M11 21H21V11H11V21ZM29 23C29 26.3137 26.3137 29 23 29H9C5.68629 29 3 26.3137 3 23V9C3 5.68629 5.68629 3 9 3H23C26.3137 3 29 5.68629 29 9V23Z"
+  }), /* @__PURE__ */ n("path", {
+    fill: "currentColor",
+    d: "M24.25 9C24.25 8.30964 23.6904 7.75 23 7.75H9C8.30964 7.75 7.75 8.30964 7.75 9V23C7.75 23.6904 8.30964 24.25 9 24.25H23C23.6904 24.25 24.25 23.6904 24.25 23V9ZM25.75 23C25.75 24.5188 24.5188 25.75 23 25.75H9C7.48122 25.75 6.25 24.5188 6.25 23V9C6.25 7.48122 7.48122 6.25 9 6.25H23C24.5188 6.25 25.75 7.48122 25.75 9V23Z"
+  })] })
+}), ql = (e) => /* @__PURE__ */ m(T, {
+  viewBox: "0 0 32 33",
+  ...e,
+  children: [/* @__PURE__ */ n(Pe, { children: /* @__PURE__ */ n("path", {
+    className: Ie,
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.89961 14.7968C3.08522 13.5116 1.89961 11.3966 1.89961 9.00039C1.89961 5.07917 5.07839 1.90039 8.99961 1.90039C10.7798 1.90039 12.4069 2.55553 13.6531 3.63785C14.3179 3.17306 15.1269 2.90039 15.9996 2.90039L22.9996 2.90039C25.264 2.90039 27.0996 4.73602 27.0996 7.00039L27.0996 9.7243C27.5717 9.92414 28.014 10.2165 28.3987 10.6013C29.9999 12.2024 29.9999 14.7984 28.3987 16.3995L27.9182 16.8801C29.2628 18.172 30.0996 19.9885 30.0996 22.0004C30.0996 25.9216 26.9208 29.1004 22.9996 29.1004C21.2195 29.1004 19.5923 28.4453 18.3461 27.3629C17.6813 27.8277 16.8723 28.1004 15.9996 28.1004L8.99961 28.1004C6.73524 28.1004 4.89961 26.2648 4.89961 24.0004L4.89961 14.7968Z"
+  }) }), /* @__PURE__ */ n("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.25 22C25.25 20.7574 24.2426 19.75 23 19.75C21.7574 19.75 20.75 20.7574 20.75 22C20.75 23.2426 21.7574 24.25 23 24.25C24.2426 24.25 25.25 23.2426 25.25 22ZM23 18.25C25.0711 18.25 26.75 19.9289 26.75 22C26.75 24.0711 25.0711 25.75 23 25.75C20.9289 25.75 19.25 24.0711 19.25 22C19.25 19.9289 20.9289 18.25 23 18.25ZM11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25C10.2426 11.25 11.25 10.2426 11.25 9ZM9.75 12.675C11.4617 12.3275 12.75 10.8142 12.75 9C12.75 6.92893 11.0711 5.25 9 5.25C6.92893 5.25 5.25 6.92893 5.25 9C5.25 10.8142 6.53832 12.3275 8.25 12.675L8.25 24C8.25 24.4142 8.58579 24.75 9 24.75L16 24.75C16.4142 24.75 16.75 24.4142 16.75 24L16.75 7.75L22.25 7.75L22.25 14.1893L21.0303 12.9697C20.7374 12.6768 20.2626 12.6768 19.9697 12.9697C19.6768 13.2626 19.6768 13.7374 19.9697 14.0303L22.4697 16.5303C22.7626 16.8232 23.2374 16.8232 23.5303 16.5303L26.0303 14.0303C26.3232 13.7374 26.3232 13.2626 26.0303 12.9697C25.7374 12.6768 25.2626 12.6768 24.9697 12.9697L23.75 14.1893L23.75 7C23.75 6.58579 23.4142 6.25 23 6.25L16 6.25C15.5858 6.25 15.25 6.58579 15.25 7L15.25 23.25L9.75 23.25L9.75 12.675Z"
+  })]
+}), $l = (e) => /* @__PURE__ */ m(T, {
+  viewBox: "0 0 32 33",
+  ...e,
+  children: [/* @__PURE__ */ n(Pe, { children: /* @__PURE__ */ n("path", {
+    className: Ie,
+    d: "M20.7271 2C21.4372 2 21.7114 2.00463 22.0841 2.03504C22.8228 2.0954 23.4839 2.25122 24.1592 2.59527C25.1865 3.1188 26.0219 3.9541 26.5458 4.98208C26.8896 5.65706 27.0454 6.31812 27.1057 7.05672C27.1301 7.35469 27.1379 7.58979 27.14 8.03558L27.1408 9.10155C27.1408 11.2114 25.4304 12.922 23.3205 12.922C21.4083 12.922 19.8243 11.5172 19.5441 9.68336L19.538 9.64H18.39V21.687L20.0392 21.6877C22.149 21.6877 23.8595 23.398 23.8595 25.508C23.8595 27.6178 22.149 29.3283 20.0392 29.3283H9.10159C6.99169 29.3283 5.28127 27.6178 5.28127 25.508C5.28127 23.398 6.99172 21.6877 9.10159 21.6877L10.75 21.687V9.64H9.601L9.59661 9.68334C9.32609 11.4539 7.84018 12.8246 6.01692 12.917L5.82032 12.922C3.71035 12.922 2 11.2114 2 9.10155V8.41371C2 7.70349 2.00463 7.42929 2.03504 7.05674C2.09538 6.31803 2.25122 5.65681 2.59521 4.98173C3.11877 3.95419 3.95418 3.11876 4.98174 2.5952C5.65683 2.25122 6.31798 2.09539 7.057 2.03501C7.42935 2.00463 7.70354 2 8.41371 2H20.7271Z"
+  }) }), /* @__PURE__ */ n("path", {
+    fill: "currentColor",
+    d: "M8.41371 5H20.7271C21.1595 5 21.5325 5 21.8398 5.02507C22.1641 5.05157 22.4867 5.11007 22.7971 5.26822C23.2601 5.50416 23.6366 5.88064 23.8726 6.3437C24.0307 6.65409 24.0892 6.97666 24.1157 7.30097C24.1408 7.60823 24.1408 7.98127 24.1408 8.41369V9.10155C24.1408 9.55465 23.7735 9.92195 23.3205 9.92195C22.8674 9.92195 22.5001 9.55465 22.5001 9.10155V8.44533C22.5001 7.97237 22.4995 7.66699 22.4805 7.43457C22.4623 7.21172 22.4314 7.12909 22.4107 7.08853C22.3321 6.93418 22.2066 6.80869 22.0522 6.73004C22.0117 6.70938 21.9291 6.67847 21.7062 6.66026C21.4738 6.64127 21.1684 6.64063 20.6954 6.64063H15.3907V24.6877H20.0392C20.4922 24.6877 20.8595 25.0549 20.8595 25.508C20.8595 25.961 20.4922 26.3283 20.0392 26.3283H9.10159C8.64854 26.3283 8.28127 25.961 8.28127 25.508C8.28127 25.0549 8.64854 24.6877 9.10159 24.6877H13.7501V6.64063H8.44533C7.97238 6.64063 7.66699 6.64127 7.43457 6.66026C7.21172 6.67847 7.1291 6.70938 7.08854 6.73004C6.93418 6.80869 6.80869 6.93418 6.73004 7.08853C6.70938 7.12909 6.67847 7.21172 6.66026 7.43457C6.64127 7.66699 6.64063 7.97237 6.64063 8.44533V9.10155C6.64063 9.55465 6.27337 9.92195 5.82032 9.92195C5.36727 9.92195 5 9.55465 5 9.10155V8.41371C5 7.98128 5 7.60823 5.02508 7.30097C5.05157 6.97666 5.11007 6.65409 5.26823 6.3437C5.50417 5.88064 5.88064 5.50416 6.3437 5.26822C6.65409 5.11007 6.97666 5.05157 7.30097 5.02507C7.60824 5 7.98129 5 8.41371 5Z"
+  })]
+}), Xl = {
+  x: 0.5,
+  y: 0.5
+}, jl = 0.2, Yl = {
+  x: 0.375,
+  y: 0.25,
+  width: 0.25,
+  height: 0.5
+}, Ql = {
+  fillColor: null,
+  fillOpacity: 0.25,
+  strokeWidth: 0,
+  zOrder: "background"
+}, Jl = {
+  x: 0.4,
+  y: 0.6
+}, es = {
+  x: 0.6,
+  y: 0.4
+}, ns = "relative-difference", Oc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Button: l } = N();
+  if (!r) return null;
+  const c = () => {
+    o.commands.dispatch(new j({
+      kind: "text",
+      annotation: {
+        ...Vr,
+        content: ts(a("editor.annotatePanel.callOutSection.text")),
+        at: {
+          anchorType: "panel",
+          ...Xl
+        },
+        width: jl
+      }
+    }));
+  }, s = () => {
+    o.commands.dispatch(new j({
+      kind: "arrow",
+      annotation: {
+        ...Zt,
+        start: {
+          anchorType: "panel",
+          ...Jl
+        },
+        end: {
+          anchorType: "panel",
+          ...es
+        }
+      }
+    }));
+  }, u = () => {
+    o.commands.dispatch(new j({
+      kind: "shape",
+      annotation: {
+        ...nr,
+        ...Ql,
+        region: {
+          anchorType: "panel",
+          ...Yl
+        }
+      }
+    }));
+  }, d = () => {
+    const v = ua(r);
+    v !== null && o.commands.dispatch(new j({
+      kind: "differenceArrow",
+      annotation: {
+        ...In,
+        ...v,
+        label: ns
+      }
+    }));
+  }, h = r.coordSystem.type === "cartesian";
+  return /* @__PURE__ */ n(D, {
+    title: e ?? a("editor.annotatePanel.callOutSection.title"),
+    layout: t,
+    preview: i,
+    children: /* @__PURE__ */ m(dt, { children: [
+      /* @__PURE__ */ n(l, {
+        variant: "tile",
+        icon: /* @__PURE__ */ n($l, { size: "xl" }),
+        label: a("editor.annotatePanel.callOutSection.text"),
+        onClick: c
+      }),
+      /* @__PURE__ */ n(l, {
+        variant: "tile",
+        icon: /* @__PURE__ */ n(Wl, { size: "xl" }),
+        label: a("editor.annotatePanel.callOutSection.arrow"),
+        onClick: s
+      }),
+      /* @__PURE__ */ n(l, {
+        variant: "tile",
+        icon: /* @__PURE__ */ n(Zl, { size: "xl" }),
+        label: a("editor.annotatePanel.callOutSection.box"),
+        onClick: u
+      }),
+      h && /* @__PURE__ */ n(l, {
+        variant: "tile",
+        icon: /* @__PURE__ */ n(ql, { size: "xl" }),
+        label: a("editor.annotatePanel.callOutSection.difference"),
+        onClick: d
+      })
+    ] })
+  });
+}, ts = (e) => ({
+  type: "doc",
+  content: [{
+    type: "paragraph",
+    content: [{
+      type: "text",
+      text: e
+    }]
+  }]
+}), rs = 0.1, as = 20, Mc = ({ title: e, preview: t }) => {
+  const i = M(), o = _(i), r = I(), { NumberField: a, TextField: l } = N();
+  if (!o || o.coordSystem.type === "polar") return null;
+  const c = aa(o.spec.layers), s = e ?? r("editor.annotationsPanel.goalSection.title"), u = na(c?.mapping.y), d = typeof u == "number" ? u : null, h = (g) => {
+    const C = new Br({
+      showGoalLine: g,
+      value: os(o),
+      ...c !== void 0 && { layerId: c.id }
+    });
+    i.commands.dispatch(C);
+  }, v = (g) => {
+    if (c === void 0) return;
+    const C = new Rr({
+      layerId: c.id,
+      label: g === "" ? null : g
+    });
+    i.commands.dispatch(C, { transient: !0 });
+  }, p = (g) => {
+    if (c === void 0 || g === null) return;
+    const C = new Er({
+      layerId: c.id,
+      value: g
+    });
+    i.commands.dispatch(C, { transient: !0 });
+  };
+  return /* @__PURE__ */ n(Ol, {
+    title: s,
+    preview: t,
+    isChecked: c !== void 0,
+    onToggle: h,
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
+      label: r("editor.annotationsPanel.goalSection.labelControl"),
+      children: /* @__PURE__ */ n(l, {
+        value: c?.params.label ?? "",
+        placeholder: r("editor.annotationsPanel.goalSection.labelPlaceholder"),
+        onChange: v,
+        onCommit: i.commands.seal,
+        ariaLabel: r("editor.annotationsPanel.goalSection.labelAriaLabel")
+      })
+    }), /* @__PURE__ */ n(b, {
+      label: r("editor.annotationsPanel.goalSection.valueControl"),
+      children: /* @__PURE__ */ n(a, {
+        value: d,
+        placeholder: r("editor.powerUpPanel.valueInput.numberPlaceholder"),
+        onChange: p,
+        onCommit: i.commands.seal,
+        ariaLabel: r("editor.annotationsPanel.goalSection.valueAriaLabel")
+      })
+    })] })
+  });
+}, os = (e) => {
+  const t = (e.scales.y?.domain ?? []).filter((l) => typeof l == "number");
+  if (t.length === 0) return 0;
+  const i = Math.max(...t), o = i - Math.min(...t), r = o > 0 ? o : Math.abs(i);
+  if (r === 0) return 0;
+  const a = Math.min(as, Math.max(0, 1 - Math.floor(Math.log10(r))));
+  return Number((i + r * rs).toFixed(a));
+}, Nc = ({ layerId: e, title: t, layout: i = "collapsible", preview: o }) => {
+  const r = M(), a = _(r), l = I(), { Switch: c } = N();
   if (!a) return null;
-  const s = e === void 0 ? a.spec.layers[0] : a.spec.layers.find((N) => N.id === e);
+  const s = e === void 0 ? a.spec.layers[0] : a.spec.layers.find((k) => k.id === e);
   if (!s) return null;
-  const { showDataLabels: u, format: d, showStackTotals: h, showCategoryLabels: v } = s.dataLabels, p = a.coordSystem.type === "polar", g = s.geom === "bar", S = s.position === "stack" || s.position === "fill", P = g && !p && s.position === "stack", y = g && (!p || u), f = g || s.geom === "area" && S;
-  if (!Vr(s.geom, a.coordSystem.type)) return null;
-  const x = (N) => {
-    const H = new Or({
+  const { showDataLabels: u, format: d, showStackTotals: h, showCategoryLabels: v } = s.dataLabels, p = a.coordSystem.type === "polar", g = s.geom === "bar", C = s.position === "stack" || s.position === "fill", P = g && !p && s.position === "stack", y = g && (!p || u), f = g || s.geom === "area" && C;
+  if (!Yr(s.geom, a.coordSystem.type)) return null;
+  const x = (k) => {
+    const F = new Fr({
       layerId: s.id,
-      showDataLabels: N
+      showDataLabels: k
     });
-    o.commands.dispatch(H);
-  }, T = (N) => {
-    const H = new cr({
+    r.commands.dispatch(F);
+  }, L = (k) => {
+    const F = new vr({
       layerId: s.id,
-      format: N ? "percentage" : "absolute"
+      format: k ? "percentage" : "absolute"
     });
-    o.commands.dispatch(H);
-  }, z = (N) => {
-    const H = new Mr({
+    r.commands.dispatch(F);
+  }, A = (k) => {
+    const F = new Ur({
       layerId: s.id,
-      showStackTotals: N
+      showStackTotals: k
     });
-    o.commands.dispatch(H);
-  }, B = (N) => {
-    const H = new Lr({
+    r.commands.dispatch(F);
+  }, H = (k) => {
+    const F = new zr({
       layerId: s.id,
-      showCategoryLabels: N
+      showCategoryLabels: k
     });
-    o.commands.dispatch(H);
+    r.commands.dispatch(F);
   };
   return /* @__PURE__ */ n(D, {
     title: t ?? l("editor.graphPanel.graphOptionsSection.title"),
     layout: i,
-    preview: r,
-    children: /* @__PURE__ */ m(F, { children: [
-      /* @__PURE__ */ n(C, {
+    preview: o,
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.graphOptions.dataLabels"),
         children: /* @__PURE__ */ n(c, {
           isChecked: u,
           onChange: x
         })
       }),
-      u && f && /* @__PURE__ */ n(C, {
+      u && f && /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.graphOptions.showPercentages"),
         children: /* @__PURE__ */ n(c, {
           isChecked: d === "percentage",
-          onChange: T
+          onChange: L
         })
       }),
-      P && /* @__PURE__ */ n(C, {
+      P && /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.graphOptions.stackTotals"),
         children: /* @__PURE__ */ n(c, {
           isChecked: h,
-          onChange: z
+          onChange: A
         })
       }),
-      y && /* @__PURE__ */ n(C, {
+      y && /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.graphOptions.categoryLabels"),
         children: /* @__PURE__ */ n(c, {
           isChecked: v,
-          onChange: B
+          onChange: H
         })
       })
     ] })
   });
-}, Al = (e) => /* @__PURE__ */ m(I, {
+}, is = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [/* @__PURE__ */ n("path", {
@@ -2913,7 +3161,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     fillOpacity: "0.3",
     d: "M5.744 5.565 0 11.826V8l5.744-6.957 4.718 2.087L16 0v6.957l-5.538 4z"
   })]
-}), Ll = (e) => /* @__PURE__ */ n(I, {
+}), ls = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -2955,7 +3203,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       })
     ]
   })
-}), Ol = (e) => /* @__PURE__ */ n(I, {
+}), ss = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -2970,7 +3218,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       d: "M0 12.445h4.267V.52A.52.52 0 0 0 3.748 0H.518A.52.52 0 0 0 0 .519zM5.867 7.111h4.266V.52A.52.52 0 0 0 9.615 0h-3.23a.52.52 0 0 0-.518.519zM11.733 9.481H16V.52A.52.52 0 0 0 15.482 0h-3.23a.52.52 0 0 0-.519.519z"
     })]
   })
-}), Nl = (e) => /* @__PURE__ */ n(I, {
+}), cs = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -2985,7 +3233,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       d: "M0 7.037c0-.286.232-.518.519-.518h3.23c.286 0 .518.232.518.518v5.408H0zM5.867 7.111h4.266V4.074a.52.52 0 0 0-.518-.518h-3.23a.52.52 0 0 0-.518.518zM11.733 9.481H16V.52A.52.52 0 0 0 15.482 0h-3.23a.52.52 0 0 0-.519.519z"
     })]
   })
-}), kl = (e) => /* @__PURE__ */ m(I, {
+}), ds = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -3024,7 +3272,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       rx: ".533"
     })
   ]
-}), Ml = (e) => /* @__PURE__ */ m(I, {
+}), hs = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [/* @__PURE__ */ n("path", {
@@ -3036,7 +3284,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     fillOpacity: "0.3",
     d: "M0 12.445h4.267V.52A.52.52 0 0 0 3.748 0H.518A.52.52 0 0 0 0 .519zM5.867 7.111h4.266V.52A.52.52 0 0 0 9.615 0h-3.23a.52.52 0 0 0-.518.519zM11.733 9.481H16V.52A.52.52 0 0 0 15.482 0h-3.23a.52.52 0 0 0-.519.519z"
   })]
-}), El = (e) => /* @__PURE__ */ m(I, {
+}), us = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [/* @__PURE__ */ n("path", {
@@ -3048,7 +3296,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     fillOpacity: "0.3",
     d: "M0 7.037c0-.286.232-.518.519-.518h3.23c.286 0 .518.232.518.518v5.408H0zM5.867 7.111h4.266V4.074a.52.52 0 0 0-.518-.518h-3.23a.52.52 0 0 0-.518.518zM11.733 9.481H16V.52A.52.52 0 0 0 15.482 0h-3.23a.52.52 0 0 0-.519.519z"
   })]
-}), _l = (e) => /* @__PURE__ */ n(I, {
+}), ms = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -3083,7 +3331,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       })
     ]
   })
-}), Rl = (e) => /* @__PURE__ */ n(I, {
+}), ps = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -3160,7 +3408,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       ]
     })]
   })
-}), Dl = (e) => /* @__PURE__ */ m(I, {
+}), gs = (e) => /* @__PURE__ */ m(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: [
@@ -3182,7 +3430,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       d: "M15.999 8a8 8 0 0 1-7.588 7.989l-.412.01V8z"
     })
   ]
-}), zl = (e) => /* @__PURE__ */ n(I, {
+}), vs = (e) => /* @__PURE__ */ n(T, {
   viewBox: "0 0 16 16",
   ...e,
   children: /* @__PURE__ */ m("g", {
@@ -3226,10 +3474,10 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
       })
     ]
   })
-}), Hl = 0.55, Me = [
+}), Cs = 0.55, Ee = [
   {
     name: "column",
-    icon: kl,
+    icon: ds,
     summary: {
       coordType: "cartesian",
       geom: "bar",
@@ -3238,7 +3486,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "columnStacked",
-    icon: El,
+    icon: us,
     summary: {
       coordType: "cartesian",
       geom: "bar",
@@ -3247,7 +3495,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "columnStackedFill",
-    icon: Ml,
+    icon: hs,
     summary: {
       coordType: "cartesian",
       geom: "bar",
@@ -3256,7 +3504,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "bar",
-    icon: Ll,
+    icon: ls,
     summary: {
       coordType: "flip",
       geom: "bar",
@@ -3265,7 +3513,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "barStacked",
-    icon: Nl,
+    icon: cs,
     summary: {
       coordType: "flip",
       geom: "bar",
@@ -3274,7 +3522,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "barStackedFill",
-    icon: Ol,
+    icon: ss,
     summary: {
       coordType: "flip",
       geom: "bar",
@@ -3283,7 +3531,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "line",
-    icon: Rl,
+    icon: ps,
     summary: {
       coordType: "cartesian",
       geom: "line",
@@ -3292,7 +3540,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "areaStacked",
-    icon: Al,
+    icon: is,
     summary: {
       coordType: "cartesian",
       geom: "area",
@@ -3301,7 +3549,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "scatter",
-    icon: zl,
+    icon: vs,
     summary: {
       coordType: "cartesian",
       geom: "point",
@@ -3310,7 +3558,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "pie",
-    icon: Dl,
+    icon: gs,
     summary: {
       coordType: "polar",
       geom: "bar",
@@ -3321,31 +3569,31 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   },
   {
     name: "donut",
-    icon: _l,
+    icon: ms,
     summary: {
       coordType: "polar",
       geom: "bar",
       position: "fill",
       theta: "y",
-      innerRadius: Hl
+      innerRadius: Cs
     }
   }
-], Vl = 0.05, Fl = (e) => e === null ? null : Me.find((t) => Kl(t.summary, e)) ?? null, Bl = (e, t) => {
+], fs = 0.05, bs = (e) => e === null ? null : Ee.find((t) => Ss(t.summary, e)) ?? null, ys = (e, t) => {
   const { summary: i } = e;
-  return i.coordType !== "polar" || !ye(i.innerRadius) || t === null || t.coordType !== "polar" || !ye(t.innerRadius) ? i : {
+  return i.coordType !== "polar" || !Se(i.innerRadius) || t === null || t.coordType !== "polar" || !Se(t.innerRadius) ? i : {
     ...i,
     innerRadius: t.innerRadius
   };
-}, Kl = (e, t) => e.coordType !== t.coordType || e.geom !== t.geom || e.position !== t.position ? !1 : e.coordType !== "polar" || t.coordType !== "polar" ? !0 : e.theta === t.theta && ye(e.innerRadius) === ye(t.innerRadius), ye = (e) => e >= Vl, Gl = 3, Zs = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { RadioGrid: l } = E(), c = k(() => Me.map(({ name: h, icon: v }) => ({
+}, Ss = (e, t) => e.coordType !== t.coordType || e.geom !== t.geom || e.position !== t.position ? !1 : e.coordType !== "polar" || t.coordType !== "polar" ? !0 : e.theta === t.theta && Se(e.innerRadius) === Se(t.innerRadius), Se = (e) => e >= fs, ws = 3, kc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { RadioGrid: l } = N(), c = E(() => Ee.map(({ name: h, icon: v }) => ({
     value: h,
     label: a(`editor.graphTypes.${h}`),
     icon: /* @__PURE__ */ n(v, { size: "md" })
   })), [a]);
-  if (!o) return null;
-  const s = Jr(o.spec), u = Fl(s), d = (h) => {
-    const v = Me.find((p) => p.name === h);
-    v && r.commands.dispatch(new ar(Bl(v, s)));
+  if (!r) return null;
+  const s = Ca(r.spec), u = bs(s), d = (h) => {
+    const v = Ee.find((p) => p.name === h);
+    v && o.commands.dispatch(new hr(ys(v, s)));
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.graphPanel.graphTypeSection.title"),
@@ -3354,36 +3602,36 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     children: /* @__PURE__ */ n(l, {
       value: u?.name ?? "",
       options: c,
-      columns: Gl,
+      columns: ws,
       onChange: d,
       ariaLabel: a("editor.graphPanel.graphTypeSection.title")
     })
   });
-}, gn = [
+}, Cn = [
   "solid",
   "dashed",
   "dotted"
-], Ul = Number.parseFloat(kt.gridLineWidth), Wl = 8, ql = 0, js = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Slider: l, Switch: c, ToggleGroup: s } = E(), { themeValues: u } = De();
-  if (!o) return null;
-  const d = o.guides.axes.filter($l);
+], xs = Number.parseFloat(Ht.gridLineWidth), Ls = 8, Ts = 0, Rc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Slider: l, Switch: c, ToggleGroup: s } = N(), { themeValues: u } = Ve();
+  if (!r) return null;
+  const d = r.guides.axes.filter(Ps);
   if (d.length === 0) return null;
-  const h = o.coordSystem.type !== "polar", v = d.some((f) => f.gridVisible), p = o.config.axes.y.grid, g = gn.map((f) => ({
+  const h = r.coordSystem.type !== "polar", v = d.some((f) => f.gridVisible), p = r.config.axes.y.grid, g = Cn.map((f) => ({
     value: f,
     label: a(`editor.graphPanel.gridSection.lineStyles.${f}`)
-  })), S = (f) => (x) => {
-    r.commands.dispatch(new ur({
+  })), C = (f) => (x) => {
+    o.commands.dispatch(new br({
       axis: f,
       isVisible: x
     }));
   }, P = (f) => {
-    const x = gn.find((T) => T === f);
-    x && r.commands.dispatch(new dr({
+    const x = Cn.find((L) => L === f);
+    x && o.commands.dispatch(new Cr({
       axis: "both",
       lineStyle: x
     }));
   }, y = (f) => {
-    r.commands.dispatch(new hr({
+    o.commands.dispatch(new fr({
       axis: "both",
       lineWidth: f
     }), { transient: !0 });
@@ -3392,328 +3640,328 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     title: e ?? a("editor.graphPanel.gridSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [d.map((f) => /* @__PURE__ */ n(C, {
-      label: a(Zl(f)),
+    children: /* @__PURE__ */ m(z, { children: [d.map((f) => /* @__PURE__ */ n(b, {
+      label: a(Is(f)),
       children: /* @__PURE__ */ n(c, {
         isChecked: f.gridVisible,
-        onChange: S(f.scaleAestheticKey)
+        onChange: C(f.scaleAestheticKey)
       })
-    }, f.scaleAestheticKey)), h && v && /* @__PURE__ */ m(W, { children: [/* @__PURE__ */ n(C, {
+    }, f.scaleAestheticKey)), h && v && /* @__PURE__ */ m(G, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.gridSection.gridStyle"),
       children: /* @__PURE__ */ n(s, {
         value: p.lineStyle,
         options: g,
         onChange: P
       })
-    }), /* @__PURE__ */ n(C, {
+    }), /* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.gridSection.gridThickness"),
       children: /* @__PURE__ */ n(l, {
-        value: p.lineWidth ?? Ot(u.gridLineWidth, Ul),
-        min: ql,
-        max: Wl,
+        value: p.lineWidth ?? _t(u.gridLineWidth, xs),
+        min: Ts,
+        max: Ls,
         step: 0.5,
-        formatValue: Ie,
+        formatValue: Te,
         onChange: y,
-        onCommit: r.commands.seal
+        onCommit: o.commands.seal
       })
     })] })] })
   });
-}, $l = (e) => e.scaleAestheticKey === "x" || e.scaleAestheticKey === "y", Zl = (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", jl = "total", ct = [
+}, Ps = (e) => e.scaleAestheticKey === "x" || e.scaleAestheticKey === "y", Is = (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", As = "total", gt = [
   "total",
   "average",
   "current"
-], Xl = ["total"], vn = ["previous", "first"], fn = [
+], Os = ["total"], fn = ["previous", "first"], bn = [
   "auto",
   "small",
   "medium",
   "large"
-], Xs = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Switch: l, ToggleGroup: c } = E();
-  if (!o) return null;
-  const s = o.config.headline, u = s.show !== "none", d = o.coordSystem, h = d.type === "polar", v = d.type === "polar" && d.innerRadius > 0, p = o.layers.some((w) => w.summary.grandTotal !== void 0);
+], Ec = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Switch: l, ToggleGroup: c } = N();
+  if (!r) return null;
+  const s = r.config.headline, u = s.show !== "none", d = r.coordSystem, h = d.type === "polar", v = d.type === "polar" && d.innerRadius > 0, p = r.layers.some((w) => w.summary.grandTotal !== void 0);
   if (h && !p) return null;
-  const g = h ? Xl : ct, S = o.guides.headline, P = S?.kind === "perGroup" && S.items.some((w) => w.comparison !== null), y = g.map((w) => ({
+  const g = h ? Os : gt, C = r.guides.headline, P = C?.kind === "perGroup" && C.items.some((w) => w.comparison !== null), y = g.map((w) => ({
     value: w,
     label: a(`editor.graphPanel.headlineNumberSection.metrics.${w}`)
-  })), f = vn.map((w) => ({
+  })), f = fn.map((w) => ({
     value: w,
     label: a(`editor.graphPanel.headlineNumberSection.comparison.${w}`)
-  })), x = fn.map((w) => ({
+  })), x = bn.map((w) => ({
     value: w,
     label: a(w === "auto" ? "editor.graphPanel.numberFormat.options.auto" : `editor.graphPanel.headlineNumberSize.sizes.${w}`)
-  })), T = [{
+  })), L = [{
     value: "above",
     label: a("editor.graphPanel.headlineNumberSection.position.above")
   }, {
     value: "center",
     label: a("editor.graphPanel.headlineNumberSection.position.center")
-  }], z = (w) => {
-    r.commands.dispatch(new je({ show: w ? jl : "none" }));
-  }, B = (w) => {
-    const O = g.find((Q) => Q === w);
-    O && r.commands.dispatch(new je({ show: O }));
-  }, N = (w) => {
-    const O = vn.find((Q) => Q === w);
-    O && r.commands.dispatch(new mr({ compareWith: O }));
+  }], A = (w) => {
+    o.commands.dispatch(new Ye({ show: w ? As : "none" }));
   }, H = (w) => {
-    const O = fn.find((Q) => Q === w);
-    O && r.commands.dispatch(new gr({ size: O }));
-  }, L = (w) => {
-    r.commands.dispatch(new pr({ position: w === "center" ? "center" : "above" }));
+    const R = g.find((J) => J === w);
+    R && o.commands.dispatch(new Ye({ show: R }));
+  }, k = (w) => {
+    const R = fn.find((J) => J === w);
+    R && o.commands.dispatch(new yr({ compareWith: R }));
+  }, F = (w) => {
+    const R = bn.find((J) => J === w);
+    R && o.commands.dispatch(new wr({ size: R }));
+  }, O = (w) => {
+    o.commands.dispatch(new Sr({ position: w === "center" ? "center" : "above" }));
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.graphPanel.headlineNumberSection.title"),
     layout: t,
-    preview: i ?? Yl(a, s.show),
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    preview: i ?? Ms(a, s.show),
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.headlineNumberSection.toggle"),
       children: /* @__PURE__ */ n(l, {
         isChecked: u,
-        onChange: z
+        onChange: A
       })
-    }), u && /* @__PURE__ */ m(W, { children: [
-      y.length > 1 && /* @__PURE__ */ n(C, {
+    }), u && /* @__PURE__ */ m(G, { children: [
+      y.length > 1 && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.headlineNumberSection.metricLabel"),
         layout: "stack",
         children: /* @__PURE__ */ n(c, {
           value: s.show,
           options: y,
-          onChange: B
+          onChange: H
         })
       }),
-      P && /* @__PURE__ */ n(C, {
+      P && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.headlineNumberSection.compareWithLabel"),
         layout: "stack",
         children: /* @__PURE__ */ n(c, {
-          value: na(s.compareWith),
+          value: ba(s.compareWith),
           options: f,
-          onChange: N
+          onChange: k
         })
       }),
-      /* @__PURE__ */ n(C, {
+      /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.headlineNumberSize.sizeLabel"),
         children: /* @__PURE__ */ n(c, {
           value: s.size,
           options: x,
-          onChange: H
+          onChange: F
         })
       }),
-      v && /* @__PURE__ */ n(C, {
+      v && /* @__PURE__ */ n(b, {
         label: a("editor.axesPanel.controls.position"),
         children: /* @__PURE__ */ n(c, {
           value: s.position,
-          options: T,
-          onChange: L
+          options: L,
+          onChange: O
         })
       })
     ] })] })
   });
-}, Yl = (e, t) => {
-  const i = ct.find((r) => r === t);
+}, Ms = (e, t) => {
+  const i = gt.find((o) => o === t);
   return i && e(`editor.graphPanel.headlineNumberSection.metrics.${i}`);
-}, Ae = [
+}, Oe = [
   "top",
   "bottom",
   "left",
   "right",
   "none"
-], Cn = [
+], yn = [
   "auto",
   "start",
   "center",
   "end"
-], bn = [
+], Sn = [
   "auto",
   "pill",
   "direct"
-], Ys = ({ positions: e, title: t, layout: i = "collapsible", preview: r }) => {
-  const o = M(), a = R(o), l = A(), { ToggleGroup: c } = E();
+], _c = ({ positions: e, title: t, layout: i = "collapsible", preview: o }) => {
+  const r = M(), a = _(r), l = I(), { ToggleGroup: c } = N();
   if (!a) return null;
-  const s = a.config.legend.position, u = e ?? Ae, d = a.guides.legends.drawn[0], h = Hr({
+  const s = a.config.legend.position, u = e ?? Oe, d = a.guides.legends.drawn[0], h = jr({
     legendPosition: a.guides.legends.position,
     coordSystem: a.coordSystem,
     layers: a.layers
   }), v = a.guides.headline?.kind === "perGroup", p = a.guides.colorGroups.length > 0;
   if (s === "auto" && d === void 0 && !h && (v || !p)) return null;
-  const g = d?.position ?? "none", S = s === "auto" ? g : s, P = Ae.filter((L) => L === S || u.includes(L)).map((L) => ({
-    value: L,
-    label: l(`editor.graphPanel.legendSection.${L}`)
-  })), y = (L) => {
-    const w = Ae.find((O) => O === L);
-    w && o.commands.dispatch(new br({ position: w }));
-  }, f = (L) => {
-    const w = Cn.find((O) => O === L);
-    w && o.commands.dispatch(new fr({ align: w }));
-  }, x = (L) => {
-    const w = bn.find((O) => O === L);
-    w && o.commands.dispatch(new Cr({ display: w }));
-  }, T = Cn.map((L) => ({
-    value: L,
-    label: l(`editor.graphPanel.legendSection.align.${L}`)
-  })), z = bn.map((L) => ({
-    value: L,
-    label: l(`editor.graphPanel.legendSection.display.${L}`)
-  })), B = t ?? l("editor.graphPanel.legendSection.title"), N = P.find((L) => L.value === S)?.label, H = d !== void 0;
+  const g = d?.position ?? "none", C = s === "auto" ? g : s, P = Oe.filter((O) => O === C || u.includes(O)).map((O) => ({
+    value: O,
+    label: l(`editor.graphPanel.legendSection.${O}`)
+  })), y = (O) => {
+    const w = Oe.find((R) => R === O);
+    w && r.commands.dispatch(new Pr({ position: w }));
+  }, f = (O) => {
+    const w = yn.find((R) => R === O);
+    w && r.commands.dispatch(new Lr({ align: w }));
+  }, x = (O) => {
+    const w = Sn.find((R) => R === O);
+    w && r.commands.dispatch(new Tr({ display: w }));
+  }, L = yn.map((O) => ({
+    value: O,
+    label: l(`editor.graphPanel.legendSection.align.${O}`)
+  })), A = Sn.map((O) => ({
+    value: O,
+    label: l(`editor.graphPanel.legendSection.display.${O}`)
+  })), H = t ?? l("editor.graphPanel.legendSection.title"), k = P.find((O) => O.value === C)?.label, F = d !== void 0;
   return /* @__PURE__ */ n(D, {
-    title: B,
+    title: H,
     layout: i,
-    preview: r ?? N,
-    children: /* @__PURE__ */ m(F, { children: [
-      /* @__PURE__ */ n(C, {
+    preview: o ?? k,
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
         label: l("editor.axesPanel.controls.position"),
         layout: "stack",
         children: /* @__PURE__ */ n(c, {
-          value: S,
+          value: C,
           options: P,
           onChange: y
         })
       }),
-      H && /* @__PURE__ */ n(C, {
+      F && /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.legendSection.alignLabel"),
         layout: "stack",
         children: /* @__PURE__ */ n(c, {
           value: a.config.legend.align,
-          options: T,
+          options: L,
           onChange: f
         })
       }),
-      h && /* @__PURE__ */ n(C, {
+      h && /* @__PURE__ */ n(b, {
         label: l("editor.graphPanel.legendSection.displayLabel"),
         layout: "stack",
         children: /* @__PURE__ */ n(c, {
           value: a.config.legend.display,
-          options: z,
+          options: A,
           onChange: x
         })
       })
     ] })
   });
-}, Ql = 1, Jl = 20, es = 0.5, dt = ({ layerId: e }) => {
-  const t = M(), i = R(t), { Slider: r } = E(), o = qe(i, e);
+}, Ns = 1, ks = 20, Rs = 0.5, vt = ({ layerId: e }) => {
+  const t = M(), i = _(t), { Slider: o } = N(), r = $e(i, e);
   if (!i) return null;
   const a = (l) => {
-    const c = new xr({
+    const c = new Mr({
       layerId: e,
       size: l
     });
     t.commands.dispatch(c, { transient: !0 });
   };
-  return /* @__PURE__ */ n(r, {
-    value: o?.get("size") ?? Gt,
-    min: Ql,
-    max: Jl,
-    step: es,
-    formatValue: Ie,
+  return /* @__PURE__ */ n(o, {
+    value: r?.get("size") ?? jt,
+    min: Ns,
+    max: ks,
+    step: Rs,
+    formatValue: Te,
     onChange: a,
     onCommit: t.commands.seal
   });
-}, ns = 1, ts = 10, rs = 0.1, as = [
+}, Es = 1, _s = 10, Ds = 0.1, Hs = [
   "gap",
   "zero",
   "connect"
-], Qs = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Select: l, Slider: c, Switch: s, ToggleGroup: u } = E(), d = o?.spec.layers ?? [], h = Tn(d, "line", "area"), v = qe(o, h?.id ?? null);
-  if (!o || !h) return null;
-  const p = o.coordSystem.type === "polar", g = ls(a, h), S = is(h, d), P = yn(o.spec, h.geom, "strokeWidth", h.id), y = typeof P == "number", f = h.geom === "line" ? h : void 0, x = [{
+], Dc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Select: l, Slider: c, Switch: s, ToggleGroup: u } = N(), d = r?.spec.layers ?? [], h = Nn(d, "line", "area"), v = $e(r, h?.id ?? null);
+  if (!r || !h) return null;
+  const p = r.coordSystem.type === "polar", g = Fs(a, h), C = zs(h, d), P = wn(r.spec, h.geom, "strokeWidth", h.id), y = typeof P == "number", f = h.geom === "line" ? h : void 0, x = [{
     value: "auto",
     label: a("editor.graphPanel.numberFormat.options.auto")
   }, {
     value: "custom",
     label: a("editor.graphPanel.numberFormat.options.custom")
-  }], T = (w) => {
-    r.commands.dispatch(new kr({
+  }], L = (w) => {
+    o.commands.dispatch(new Kr({
       layerId: h.id,
       showPoints: w
     }));
-  }, z = (w) => {
-    f && r.commands.dispatch(new Nr({
+  }, A = (w) => {
+    f && o.commands.dispatch(new Gr({
       layerId: f.id,
       showFill: w
     }));
-  }, B = (w) => {
-    r.commands.dispatch(new yr({
+  }, H = (w) => {
+    o.commands.dispatch(new Ir({
       layerId: h.id,
       interpolate: w ? "catmull-rom" : "linear"
     }));
-  }, N = (w) => {
-    const O = v?.get("strokeWidth") ?? Ut;
-    r.commands.dispatch(new Xe({
+  }, k = (w) => {
+    const R = v?.get("strokeWidth") ?? Yt;
+    o.commands.dispatch(new Qe({
       layerId: h.id,
-      lineWidth: w === "custom" ? O : null
+      lineWidth: w === "custom" ? R : null
     }));
-  }, H = (w) => {
-    r.commands.dispatch(new Xe({
+  }, F = (w) => {
+    o.commands.dispatch(new Qe({
       layerId: h.id,
       lineWidth: w
     }), { transient: !0 });
-  }, L = (w) => {
-    const O = os(w);
-    O && r.commands.dispatch(new Sr({
+  }, O = (w) => {
+    const R = Vs(w);
+    R && o.commands.dispatch(new Ar({
       layerId: h.id,
-      missingValues: O
+      missingValues: R
     }));
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.fineTunePanel.lineStyleSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [
-      /* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.graphOptions.showPoints"),
         children: /* @__PURE__ */ n(s, {
-          isChecked: S !== void 0,
-          onChange: T
+          isChecked: C !== void 0,
+          onChange: L
         })
       }),
-      S && /* @__PURE__ */ n(C, {
+      C && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.pointSize.label"),
-        children: /* @__PURE__ */ n(dt, { layerId: S.id })
+        children: /* @__PURE__ */ n(vt, { layerId: C.id })
       }),
-      f && !p && /* @__PURE__ */ n(C, {
+      f && !p && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.graphOptions.lineFill"),
         children: /* @__PURE__ */ n(s, {
-          isChecked: yn(o.spec, "line", "fillAlpha", f.id) !== void 0,
-          onChange: z
+          isChecked: wn(r.spec, "line", "fillAlpha", f.id) !== void 0,
+          onChange: A
         })
       }),
-      !p && /* @__PURE__ */ n(C, {
+      !p && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.graphOptions.smoothLines"),
         children: /* @__PURE__ */ n(s, {
           isChecked: h.params.interpolate === "catmull-rom",
-          onChange: B
+          onChange: H
         })
       }),
-      /* @__PURE__ */ n(C, {
+      /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.lineThickness.label"),
         children: /* @__PURE__ */ n(u, {
           value: y ? "custom" : "auto",
           options: x,
-          onChange: N
+          onChange: k
         })
       }),
-      y && /* @__PURE__ */ n(C, {
+      y && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.numberFormat.valueLabel"),
         children: /* @__PURE__ */ n(c, {
           value: P,
-          min: ns,
-          max: ts,
-          step: rs,
-          formatValue: Ie,
-          onChange: H,
-          onCommit: r.commands.seal
+          min: Es,
+          max: _s,
+          step: Ds,
+          formatValue: Te,
+          onChange: F,
+          onCommit: o.commands.seal
         })
       }),
-      !p && g.length > 1 && /* @__PURE__ */ n(C, {
+      !p && g.length > 1 && /* @__PURE__ */ n(b, {
         label: a("editor.fineTunePanel.detailSection.missingValues"),
         children: /* @__PURE__ */ n(l, {
           value: h.params.missingValues,
           options: g,
-          onChange: L
+          onChange: O
         })
       })
     ] })
   });
-}, os = (e) => as.find((t) => t === e), yn = (e, t, i, r) => Wr(e.styles.overrides, Rr(t, r))?.declarations?.[i], is = (e, t) => Oe(t, "point").find((i) => An(i, [e])), ls = (e, t) => {
+}, Vs = (e) => Hs.find((t) => t === e), wn = (e, t, i, o) => la(e.styles.overrides, qr(t, o))?.declarations?.[i], zs = (e, t) => Ne(t, "point").find((i) => kn(i, [e])), Fs = (e, t) => {
   const i = [{
     value: "gap",
     label: e("editor.graphPanel.treatEmptyValues.leaveGap.label")
@@ -3724,8 +3972,8 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
   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;
-}, ss = "k", cs = 2, ds = 0, hs = 5, Ee = [
+  }), t.geom === "area" ? i.filter((o) => o.value !== "gap") : i;
+}, Bs = "k", Gs = 2, Ks = 0, Us = 5, _e = [
   {
     value: "k",
     labelKey: "thousands"
@@ -3738,34 +3986,34 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
     value: "b",
     labelKey: "billions"
   }
-], us = ["auto", "none"], Js = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { NumberField: l, ToggleGroup: c } = E();
-  if (!o) return null;
-  const { abbreviation: s, decimals: u } = o.config.numberFormat, d = ms(s) !== void 0, h = u !== "auto", v = (x) => x.map((T) => ({
-    value: T,
-    label: a(`editor.graphPanel.numberFormat.options.${T}`)
-  })), p = Ee.map(({ value: x, labelKey: T }) => ({
+], Ws = ["auto", "none"], Hc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { NumberField: l, ToggleGroup: c } = N();
+  if (!r) return null;
+  const { abbreviation: s, decimals: u } = r.config.numberFormat, d = Zs(s) !== void 0, h = u !== "auto", v = (x) => x.map((L) => ({
+    value: L,
+    label: a(`editor.graphPanel.numberFormat.options.${L}`)
+  })), p = _e.map(({ value: x, labelKey: L }) => ({
     value: x,
-    label: a(`common.abbreviations.${T}`)
+    label: a(`common.abbreviations.${L}`)
   })), g = (x) => {
-    r.commands.dispatch(new wr({ abbreviation: x }));
-  }, S = (x) => {
-    const T = us.find((z) => z === x);
-    g(T ?? ss);
+    o.commands.dispatch(new Or({ abbreviation: x }));
+  }, C = (x) => {
+    const L = Ws.find((A) => A === x);
+    g(L ?? Bs);
   }, P = (x) => {
-    const T = Ee.find((z) => z.value === x);
-    T && g(T.value);
+    const L = _e.find((A) => A.value === x);
+    L && g(L.value);
   }, y = (x) => {
-    r.commands.dispatch(new Ye({ decimals: x === "custom" ? cs : "auto" }));
+    o.commands.dispatch(new Je({ decimals: x === "custom" ? Gs : "auto" }));
   }, f = (x) => {
-    x !== null && r.commands.dispatch(new Ye({ decimals: x }), { transient: !0 });
+    x !== null && o.commands.dispatch(new Je({ decimals: x }), { transient: !0 });
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.graphPanel.numberFormatSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [
-      /* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.numberFormat.abbreviationLabel"),
         children: /* @__PURE__ */ n(c, {
           value: d ? "custom" : s,
@@ -3774,10 +4022,10 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
             "none",
             "custom"
           ]),
-          onChange: S
+          onChange: C
         })
       }),
-      d && /* @__PURE__ */ n(C, {
+      d && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.numberFormat.valueLabel"),
         children: /* @__PURE__ */ n(c, {
           value: s,
@@ -3785,7 +4033,7 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
           onChange: P
         })
       }),
-      /* @__PURE__ */ n(C, {
+      /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.numberFormat.decimalPlacesLabel"),
         children: /* @__PURE__ */ n(c, {
           value: h ? "custom" : "auto",
@@ -3793,107 +4041,254 @@ var cl = "_40zvwv8", D = ({ title: e, layout: t = "fixed", preview: i, accessory
           onChange: y
         })
       }),
-      h && /* @__PURE__ */ n(C, {
+      h && /* @__PURE__ */ n(b, {
         label: a("editor.graphPanel.numberFormat.valueLabel"),
         children: /* @__PURE__ */ n(l, {
           value: u,
-          min: ds,
-          max: hs,
+          min: Ks,
+          max: Us,
           onChange: f,
-          onCommit: r.commands.seal
+          onCommit: o.commands.seal
         })
       })
     ] })
   });
-}, ms = (e) => Ee.find((t) => t.value === e), ec = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = R(M()), o = A();
-  if (!r) return null;
-  const a = ps(r.spec.layers);
+}, Zs = (e) => _e.find((t) => t.value === e), Vc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = _(M()), r = I();
+  if (!o) return null;
+  const a = qs(o.spec.layers);
   return a ? /* @__PURE__ */ n(D, {
-    title: e ?? o("editor.graphPanel.pointSize.label"),
+    title: e ?? r("editor.graphPanel.pointSize.label"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(C, {
-      label: o("editor.graphPanel.numberFormat.valueLabel"),
-      children: /* @__PURE__ */ n(dt, { layerId: a.id })
+    children: /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(b, {
+      label: r("editor.graphPanel.numberFormat.valueLabel"),
+      children: /* @__PURE__ */ n(vt, { layerId: a.id })
     }) })
   }) : null;
-}, ps = (e) => {
-  const t = Oe(e, "line", "area");
-  return Oe(e, "point").find((i) => !An(i, t));
-}, gs = 0.9, vs = 360, fs = 0.05, Cs = 15, nc = ({ title: e, layout: t = "collapsible", preview: i }) => {
-  const r = M(), o = R(r), a = A(), { Slider: l } = E();
-  if (!o || o.spec.coords.coordType !== "polar") return null;
-  const { innerRadius: c, startAngle: s } = o.spec.coords.params, u = (h) => {
-    r.commands.dispatch(new Pr({ innerRadius: h }), { transient: !0 });
+}, qs = (e) => {
+  const t = Ne(e, "line", "area");
+  return Ne(e, "point").find((i) => !kn(i, t));
+}, $s = 0.9, Xs = 360, js = 0.05, Ys = 15, zc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Slider: l } = N();
+  if (!r || r.spec.coords.coordType !== "polar") return null;
+  const { innerRadius: c, startAngle: s } = r.spec.coords.params, u = (h) => {
+    o.commands.dispatch(new Nr({ innerRadius: h }), { transient: !0 });
   }, d = (h) => {
-    r.commands.dispatch(new Ir({ startAngle: h }), { transient: !0 });
+    o.commands.dispatch(new kr({ startAngle: h }), { transient: !0 });
   };
   return /* @__PURE__ */ n(D, {
     title: e ?? a("editor.graphPanel.polarSection.title"),
     layout: t,
     preview: i,
-    children: /* @__PURE__ */ m(F, { children: [/* @__PURE__ */ n(C, {
+    children: /* @__PURE__ */ m(z, { children: [/* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.polarSection.innerRadius"),
       children: /* @__PURE__ */ n(l, {
         value: c,
         min: 0,
-        max: gs,
-        step: fs,
-        formatValue: st,
+        max: $s,
+        step: js,
+        formatValue: pt,
         onChange: u,
-        onCommit: r.commands.seal
+        onCommit: o.commands.seal
       })
-    }), /* @__PURE__ */ n(C, {
+    }), /* @__PURE__ */ n(b, {
       label: a("editor.graphPanel.polarSection.startAngle"),
       children: /* @__PURE__ */ n(l, {
         value: s,
         min: 0,
-        max: vs - 1,
-        step: Cs,
-        formatValue: Pl,
+        max: Xs - 1,
+        step: Ys,
+        formatValue: Gl,
         onChange: d,
-        onCommit: r.commands.seal
+        onCommit: o.commands.seal
       })
     })] })
   });
+}, Qs = (e) => /* @__PURE__ */ m(T, {
+  ...e,
+  children: [
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      opacity: "0.12",
+      d: "M2 10C2 7.19974 2 5.79961 2.54497 4.73005C3.02433 3.78924 3.78924 3.02433 4.73005 2.54497C5.79961 2 7.19974 2 10 2H14C16.8003 2 18.2004 2 19.27 2.54497C20.2108 3.02433 20.9757 3.78924 21.455 4.73005C22 5.79961 22 7.19974 22 10V14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14V10Z",
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.96644 1.25C8.59472 1.25 7.51929 1.24999 6.65494 1.32061C5.77479 1.39252 5.04768 1.54138 4.38955 1.87671C3.30762 2.42798 2.42798 3.30762 1.87671 4.38955C1.54138 5.04768 1.39252 5.77479 1.32061 6.65494C1.24999 7.51929 1.25 8.59472 1.25 9.96644V14.0336C1.25 15.4053 1.24999 16.4807 1.32061 17.3451C1.39252 18.2252 1.54138 18.9523 1.87671 19.6104C2.42798 20.6924 3.30762 21.572 4.38955 22.1233C5.04768 22.4586 5.77479 22.6075 6.65494 22.6794C7.51927 22.75 8.59469 22.75 9.96637 22.75H14.0336C15.4053 22.75 16.4807 22.75 17.3451 22.6794C18.2252 22.6075 18.9523 22.4586 19.6104 22.1233C20.6924 21.572 21.572 20.6924 22.1233 19.6104C22.4586 18.9523 22.6075 18.2252 22.6794 17.3451C22.75 16.4807 22.75 15.4053 22.75 14.0336V9.96642C22.75 8.59473 22.75 7.51927 22.6794 6.65494C22.6075 5.77479 22.4586 5.04768 22.1233 4.38955C21.572 3.30762 20.6924 2.42798 19.6104 1.87671C18.9523 1.54138 18.2252 1.39252 17.3451 1.32061C16.4807 1.24999 15.4053 1.25 14.0336 1.25H9.96644ZM5.07054 3.21322C5.48197 3.00359 5.9897 2.87996 6.77708 2.81563C7.57322 2.75058 8.58749 2.75 10 2.75H14C15.4125 2.75 16.4268 2.75058 17.2229 2.81563C18.0103 2.87996 18.518 3.00359 18.9295 3.21322C19.7291 3.62068 20.3793 4.27085 20.7868 5.07054C20.9964 5.48197 21.12 5.9897 21.1844 6.77708C21.2494 7.57322 21.25 8.58749 21.25 10V14C21.25 15.4125 21.2494 16.4268 21.1844 17.2229C21.12 18.0103 20.9964 18.518 20.7868 18.9295C20.3793 19.7291 19.7291 20.3793 18.9295 20.7868C18.518 20.9964 18.0103 21.12 17.2229 21.1844C16.4268 21.2494 15.4125 21.25 14 21.25H10C8.58749 21.25 7.57322 21.2494 6.77708 21.1844C5.9897 21.12 5.48197 20.9964 5.07054 20.7868C4.27085 20.3793 3.62068 19.7291 3.21322 18.9295C3.00359 18.518 2.87996 18.0103 2.81563 17.2229C2.75058 16.4268 2.75 15.4125 2.75 14V10C2.75 8.58749 2.75058 7.57322 2.81563 6.77708C2.87996 5.9897 3.00359 5.48197 3.21322 5.07054C3.62068 4.27085 4.27085 3.62068 5.07054 3.21322Z",
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M19.4796 12.2222L17.6085 12.2291L17.6029 10.7291L19.474 10.7222L19.4796 12.2222ZM15.3662 12.2375L13.124 12.2459L13.1184 10.7459L15.3606 10.7375L15.3662 12.2375ZM10.8817 12.2542L8.63945 12.2626L8.63386 10.7626L10.8761 10.7542L10.8817 12.2542ZM6.39719 12.2709L4.52607 12.2779L4.52048 10.7779L6.3916 10.7709L6.39719 12.2709Z",
+      fill: "currentColor"
+    })
+  ]
+}), xn = (e) => /* @__PURE__ */ m(T, {
+  ...e,
+  children: [
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      opacity: "0.12",
+      d: "M2 10C2 7.19974 2 5.79961 2.54497 4.73005C3.02433 3.78924 3.78924 3.02433 4.73005 2.54497C5.79961 2 7.19974 2 10 2H14C16.8003 2 18.2004 2 19.27 2.54497C20.2108 3.02433 20.9757 3.78924 21.455 4.73005C22 5.79961 22 7.19974 22 10V14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14V10Z",
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.96644 1.25C8.59472 1.25 7.51929 1.24999 6.65494 1.32061C5.77479 1.39252 5.04768 1.54138 4.38955 1.87671C3.30762 2.42798 2.42798 3.30762 1.87671 4.38955C1.54138 5.04768 1.39252 5.77479 1.32061 6.65494C1.24999 7.51929 1.25 8.59472 1.25 9.96644V14.0336C1.25 15.4053 1.24999 16.4807 1.32061 17.3451C1.39252 18.2252 1.54138 18.9523 1.87671 19.6104C2.42798 20.6924 3.30762 21.572 4.38955 22.1233C5.04768 22.4586 5.77479 22.6075 6.65494 22.6794C7.51927 22.75 8.59469 22.75 9.96637 22.75H14.0336C15.4053 22.75 16.4807 22.75 17.3451 22.6794C18.2252 22.6075 18.9523 22.4586 19.6104 22.1233C20.6924 21.572 21.572 20.6924 22.1233 19.6104C22.4586 18.9523 22.6075 18.2252 22.6794 17.3451C22.75 16.4807 22.75 15.4053 22.75 14.0336V9.96642C22.75 8.59473 22.75 7.51927 22.6794 6.65494C22.6075 5.77479 22.4586 5.04768 22.1233 4.38955C21.572 3.30762 20.6924 2.42798 19.6104 1.87671C18.9523 1.54138 18.2252 1.39252 17.3451 1.32061C16.4807 1.24999 15.4053 1.25 14.0336 1.25H9.96644ZM5.07054 3.21322C5.48197 3.00359 5.9897 2.87996 6.77708 2.81563C7.57322 2.75058 8.58749 2.75 10 2.75H14C15.4125 2.75 16.4268 2.75058 17.2229 2.81563C18.0103 2.87996 18.518 3.00359 18.9295 3.21322C19.7291 3.62068 20.3793 4.27085 20.7868 5.07054C20.9964 5.48197 21.12 5.9897 21.1844 6.77708C21.2494 7.57322 21.25 8.58749 21.25 10V14C21.25 15.4125 21.2494 16.4268 21.1844 17.2229C21.12 18.0103 20.9964 18.518 20.7868 18.9295C20.3793 19.7291 19.7291 20.3793 18.9295 20.7868C18.518 20.9964 18.0103 21.12 17.2229 21.1844C16.4268 21.2494 15.4125 21.25 14 21.25H10C8.58749 21.25 7.57322 21.2494 6.77708 21.1844C5.9897 21.12 5.48197 20.9964 5.07054 20.7868C4.27085 20.3793 3.62068 19.7291 3.21322 18.9295C3.00359 18.518 2.87996 18.0103 2.81563 17.2229C2.75058 16.4268 2.75 15.4125 2.75 14V10C2.75 8.58749 2.75058 7.57322 2.81563 6.77708C2.87996 5.9897 3.00359 5.48197 3.21322 5.07054C3.62068 4.27085 4.27085 3.62068 5.07054 3.21322Z",
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ n("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M18.6749 8.04877L17.1069 9.06975L16.2884 7.81273L17.8564 6.79175L18.6749 8.04877ZM15.2278 10.2932L13.3488 11.5167L12.5303 10.2597L14.4093 9.03622L15.2278 10.2932ZM11.4697 12.7402L9.59064 13.9637L8.77217 12.7067L10.6512 11.4832L11.4697 12.7402ZM7.71158 15.1872L6.14354 16.2082L5.32507 14.9511L6.89311 13.9302L7.71158 15.1872Z",
+      fill: "currentColor"
+    })
+  ]
+}), Js = (e) => E(() => {
+  if (e === null) return {
+    options: [],
+    findValue: () => {
+    }
+  };
+  const { parsingLocale: t, numberFormat: i } = e.config, o = e.guides.colorGroups.map((r) => {
+    const a = ea({
+      valueFormat: r.valueFormat,
+      locale: t,
+      numberFormat: i
+    }), l = r.value instanceof Date ? r.value.getTime() : r.value;
+    return {
+      value: l,
+      option: {
+        value: String(l),
+        label: r.label ?? a(r.value)
+      }
+    };
+  });
+  return {
+    options: o.map(({ option: r }) => r),
+    findValue: (r) => o.find((a) => a.option.value === r)?.value
+  };
+}, [e]), Ln = [
+  "linear",
+  "exponential",
+  "quadratic",
+  "polynomial",
+  "logarithmic",
+  "power",
+  "loess"
+], ec = "linear", Fc = ({ title: e, layout: t = "collapsible", preview: i }) => {
+  const o = M(), r = _(o), a = I(), { Select: l, Switch: c } = N(), { options: s, findValue: u } = Js(r);
+  if (!r || r.coordSystem.type === "polar") return null;
+  const d = sa(r.spec.layers), h = ra(r.spec.layers), v = d?.stat.type === "smooth" ? d.stat.method : ec, p = nc(h), g = Ln.map((L) => ({
+    value: L,
+    label: a(`editor.annotationsPanel.trendType.options.${L}`)
+  })), C = (L, A = {}) => {
+    const H = d ?? h, k = new Hr({
+      line: L,
+      ...A,
+      ...H !== void 0 && { layerId: H.id },
+      label: a("editor.annotationsPanel.trendsAndAveragesSection.average")
+    });
+    o.commands.dispatch(k);
+  }, P = (L) => C(L ? "trend" : "none", { method: v }), y = (L) => C(L ? "average" : "none", { group: p ?? u(s[0]?.value ?? "") }), f = (L) => {
+    const A = Ln.find((H) => H === L);
+    A !== void 0 && C("trend", { method: A });
+  }, x = (L) => {
+    const A = L === null ? void 0 : u(L);
+    A !== void 0 && C("average", { group: A });
+  };
+  return /* @__PURE__ */ n(D, {
+    title: e ?? a("editor.annotationsPanel.trendsAndAveragesSection.title"),
+    layout: t,
+    preview: i ?? /* @__PURE__ */ n(xn, { size: "lg" }),
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ n(b, {
+        label: a("editor.annotationsPanel.trendsAndAveragesSection.trend"),
+        icon: /* @__PURE__ */ n(xn, { size: "lg" }),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: d !== void 0,
+          onChange: P
+        })
+      }),
+      d !== void 0 && /* @__PURE__ */ n(b, {
+        label: a("editor.annotationsPanel.trendType.label"),
+        children: /* @__PURE__ */ n(l, {
+          value: v,
+          options: g,
+          onChange: f,
+          placeholder: a("editor.annotationsPanel.trendType.placeholder")
+        })
+      }),
+      /* @__PURE__ */ n(b, {
+        label: a("editor.annotationsPanel.trendsAndAveragesSection.average"),
+        icon: /* @__PURE__ */ n(Qs, { size: "lg" }),
+        children: /* @__PURE__ */ n(c, {
+          isChecked: h !== void 0,
+          onChange: y
+        })
+      }),
+      h !== void 0 && s.length > 0 && /* @__PURE__ */ n(b, {
+        label: a("editor.annotationsPanel.averageLineSeries.label"),
+        children: /* @__PURE__ */ n(l, {
+          value: p === void 0 ? null : String(p),
+          options: s,
+          onChange: x,
+          placeholder: a("editor.annotationsPanel.averageLineSeries.placeholder"),
+          ariaLabel: a("editor.annotationsPanel.averageLineSeries.ariaLabel")
+        })
+      })
+    ] })
+  });
+}, nc = (e) => {
+  const t = e?.transforms.find((i) => i.transformType === "filter")?.options.value;
+  return t instanceof Date ? t.getTime() : t;
 };
 export {
-  Ws as AppearanceSection,
-  Us as AxesPanel,
-  hn as AxisSection,
-  qs as BarSection,
-  ci as Button,
-  vl as CaptionSection,
-  Bs as EditableGraphRenderer,
-  it as EditorPanel,
-  Gs as ElementsPanel,
-  $s as GraphOptionsSection,
-  Zs as GraphTypeSection,
-  js as GridSection,
-  Xs as HeadlineSection,
-  Ss as IntlProvider,
-  Ys as LegendSection,
-  Qs as LineSection,
-  mi as NumberField,
-  Js as NumberFormatSection,
-  el as PANEL_ROOT_ATTRIBUTE,
-  ec as PointSection,
-  nc as PolarSection,
-  fi as RadioGrid,
-  C as Row,
+  Ic as AppearanceSection,
+  Pc as AxesPanel,
+  mn as AxisSection,
+  Ac as BarSection,
+  Ii as Button,
+  Oc as CalloutsSection,
+  El as CaptionSection,
+  Lc as EditableGraphRenderer,
+  ut as EditorPanel,
+  Tc as ElementsPanel,
+  Mc as GoalSection,
+  Nc as GraphOptionsSection,
+  kc as GraphTypeSection,
+  Rc as GridSection,
+  Ec as HeadlineSection,
+  ac as IntlProvider,
+  _c as LegendSection,
+  Dc as LineSection,
+  Ni as NumberField,
+  Hc as NumberFormatSection,
+  Cl as PANEL_ROOT_ATTRIBUTE,
+  Vc as PointSection,
+  zc as PolarSection,
+  _i as RadioGrid,
+  b as Row,
   D as Section,
-  Ti as Select,
-  Ri as Slider,
-  Cl as SourceSection,
-  yl as SubtitleSection,
-  Vi as Switch,
-  Ki as TextField,
-  wl as TextSizeSection,
-  xl as TitleSection,
-  Wi as ToggleGroup,
-  Ks as ToggledSection,
-  E as useControls,
-  Qi as usePanelExpansion,
+  Ui as Select,
+  Ji as Slider,
+  Dl as SourceSection,
+  Vl as SubtitleSection,
+  rl as Switch,
+  il as TextField,
+  Fl as TextSizeSection,
+  Bl as TitleSection,
+  cl as ToggleGroup,
+  Ol as ToggledSection,
+  Fc as TrendsAndAveragesSection,
+  N as useControls,
+  gl as usePanelExpansion,
   M as usePanelGraph
 };