@graphysdk/react-renderer 0.0.1-plugins.9 → 1.8.1-beta.1786025839240

package/dist/editable.mjs

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