@carto/ps-react-ui 4.15.0 → 4.17.0

package/dist/legend.js

@@ -1,119 +1,267 @@
-import { jsx as s, jsxs as E, Fragment as se } from "react/jsx-runtime";
-import { c as R } from "react/compiler-runtime";
-import { createContext as he, useContext as me, useState as oe, useLayoutEffect as ye, Children as Ae, isValidElement as Be, useEffect as We, useId as Fe } from "react";
-import { L as Ne, h as Ue, g as je, a as Ze, i as Xe, r as Ke, u as qe, j as ee, k as Y, l as X, s as Je } from "./selectors-DwHj6mE2.js";
-import { Box as P, Typography as V, IconButton as de, Collapse as ve, createSvgIcon as Qe, Menu as Le, MenuItem as Ce, ListItemIcon as Ye, Slider as et, Popover as tt, Tooltip as we, InputAdornment as lt, OutlinedInput as ot, ButtonBase as nt } from "@mui/material";
-import { ExpandMore as Se, ExpandLess as Ie, LayersOutlined as it, VisibilityOffOutlined as rt, VisibilityOutlined as st, MoreVert as at, CenterFocusStrong as ct, ArrowDropDown as dt, ErrorOutline as pt } from "@mui/icons-material";
-import { S as $e } from "./smart-tooltip-D4vwQpFf.js";
+import { jsx as d, jsxs as z, Fragment as he } from "react/jsx-runtime";
+import { c as T } from "react/compiler-runtime";
+import { createContext as me, useContext as be, useState as J, useLayoutEffect as Ge, Children as ut, isValidElement as pt, useEffect as ft, useRef as Te, useId as ht } from "react";
+import { L as gt, h as yt, g as X, a as mt, m as bt, r as xt, u as vt, n as N, o as Z, p as U, b as ke, i as re, f as Lt, e as De, s as Me, j as xe, l as Ee } from "./legend-store-registry-Bo8U_qWM.js";
+import { Box as P, IconButton as ve, Typography as E, Collapse as He, createSvgIcon as St, Menu as $e, CircularProgress as Re, MenuItem as q, Divider as Ct, Slider as wt, InputAdornment as It, OutlinedInput as kt, ButtonBase as $t } from "@mui/material";
+import { DragIndicator as Ot, ExpandMore as Ve, VisibilityOffOutlined as _t, VisibilityOutlined as Be, MoreVert as Gt, ChecklistOutlined as Mt, Close as Pt, ArrowDropDown as zt, ErrorOutline as At } from "@mui/icons-material";
+import { useSortable as Tt, SortableContext as We, verticalListSortingStrategy as Ne } from "@dnd-kit/sortable";
+import { S as Fe } from "./smart-tooltip-D4vwQpFf.js";
+import { CSS as Dt } from "@dnd-kit/utilities";
+import { T as ie } from "./tooltip-BDnrRKrp.js";
 import "zustand";
 import "zustand/vanilla";
 import "zustand/middleware";
 import "zustand/react/shallow";
-import { Opacity as ft } from "@carto/meridian-ds/custom-icons";
-const ae = {
+import { useSensors as Et, useSensor as Pe, PointerSensor as Ht, KeyboardSensor as Rt, DndContext as Vt, closestCenter as Bt, DragOverlay as Wt } from "@dnd-kit/core";
+const ge = {
   expandLayer: "Expand layer",
   collapseLayer: "Collapse layer",
   hideLayer: "Hide layer",
   showLayer: "Show layer",
   layerOptions: "Layer options",
-  zoomTo: "Zoom to",
+  zoomTo: "Zoom to layer",
+  loading: "Loading…",
+  showOnlyLayer: "Show only this layer",
+  showAllLayers: "Show all layers",
   hideGroup: "Hide group",
   showGroup: "Show group",
   expandGroup: "Expand group",
   collapseGroup: "Collapse group",
+  groupOptions: "Group options",
+  showOnlyGroup: "Show only this group",
+  showAllGroups: "Show all groups",
+  collapseAllGroups: "Collapse all groups",
+  expandAllGroups: "Expand all groups",
+  zoomToGroup: "Zoom to group",
+  panelOptions: "Legend options",
+  enabledLayers: "Enabled layers",
+  toggleEnabledLayers: "Quickly toggle enabled layers",
+  moreOptions: "More options",
+  reorder: "Reorder",
   opacity: "Opacity",
   attribute: "Attribute",
+  close: "Close",
   radiusRangeBy: "Radius range by",
   colorBasedOn: "Color based on",
   colorGradient: "Color gradient",
   maxPrefix: "MAX: ",
   minPrefix: "MIN: "
-}, ke = he({
-  labels: ae
+}, Ue = me({
+  labels: ge
 });
-function K() {
-  return me(ke);
+function B() {
+  return be(Ue);
 }
-function ut(t) {
-  const e = R(24), {
+function Nt(t) {
+  const e = T(24), {
     id: o,
-    layers: n,
-    groups: i,
-    labels: r,
-    keepAlive: l,
-    children: p
-  } = t, a = l === void 0 ? !0 : l;
-  let d;
-  e[0] !== i || e[1] !== o || e[2] !== n ? (d = () => {
-    if (Ue(o))
-      return je(o);
-    const L = Ze(o, {
-      layers: n,
-      groups: i
+    layers: r,
+    groups: l,
+    labels: i,
+    keepAlive: n,
+    children: a
+  } = t, s = n === void 0 ? !0 : n;
+  let c;
+  e[0] !== l || e[1] !== o || e[2] !== r ? (c = () => {
+    if (yt(o))
+      return X(o);
+    const w = mt(o, {
+      layers: r,
+      groups: l
     });
-    return Xe(o, L), L;
-  }, e[0] = i, e[1] = o, e[2] = n, e[3] = d) : d = e[3];
-  const [f] = oe(d);
-  let m, c;
-  e[4] !== o || e[5] !== a || e[6] !== f ? (m = () => (Ke(o, f), () => {
-    qe(o, {
-      keepAlive: a
+    return bt(o, w), w;
+  }, e[0] = l, e[1] = o, e[2] = r, e[3] = c) : c = e[3];
+  const [p] = J(c);
+  let f, u;
+  e[4] !== o || e[5] !== s || e[6] !== p ? (f = () => (xt(o, p), () => {
+    vt(o, {
+      keepAlive: s
     });
-  }), c = [o, f, a], e[4] = o, e[5] = a, e[6] = f, e[7] = m, e[8] = c) : (m = e[7], c = e[8]), ye(m, c);
-  let g, u;
-  e[9] !== i || e[10] !== n || e[11] !== f ? (g = () => {
-    f.getState()._sync(n, i ?? []);
-  }, u = [f, n, i], e[9] = i, e[10] = n, e[11] = f, e[12] = g, e[13] = u) : (g = e[12], u = e[13]), ye(g, u);
-  let h;
-  e[14] !== r ? (h = r ? {
-    ...ae,
-    ...r
-  } : ae, e[14] = r, e[15] = h) : h = e[15];
-  let y;
-  e[16] !== h ? (y = {
-    labels: h
-  }, e[16] = h, e[17] = y) : y = e[17];
-  const x = y;
-  let b;
-  e[18] !== p || e[19] !== x ? (b = /* @__PURE__ */ s(ke.Provider, { value: x, children: p }), e[18] = p, e[19] = x, e[20] = b) : b = e[20];
+  }), u = [o, p, s], e[4] = o, e[5] = s, e[6] = p, e[7] = f, e[8] = u) : (f = e[7], u = e[8]), Ge(f, u);
+  let y, h;
+  e[9] !== l || e[10] !== r || e[11] !== p ? (y = () => {
+    p.getState()._sync(r, l ?? []);
+  }, h = [p, r, l], e[9] = l, e[10] = r, e[11] = p, e[12] = y, e[13] = h) : (y = e[12], h = e[13]), Ge(y, h);
+  let g;
+  e[14] !== i ? (g = i ? {
+    ...ge,
+    ...i
+  } : ge, e[14] = i, e[15] = g) : g = e[15];
   let v;
-  return e[21] !== o || e[22] !== b ? (v = /* @__PURE__ */ s(Ne.Provider, { value: o, children: b }), e[21] = o, e[22] = b, e[23] = v) : v = e[23], v;
+  e[16] !== g ? (v = {
+    labels: g
+  }, e[16] = g, e[17] = v) : v = e[17];
+  const b = v;
+  let C;
+  e[18] !== a || e[19] !== b ? (C = /* @__PURE__ */ d(Ue.Provider, { value: b, children: a }), e[18] = a, e[19] = b, e[20] = C) : C = e[20];
+  let L;
+  return e[21] !== o || e[22] !== C ? (L = /* @__PURE__ */ d(gt.Provider, { value: o, children: C }), e[21] = o, e[22] = C, e[23] = L) : L = e[23], L;
+}
+function je(t) {
+  return (e) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
+  };
+}
+const Ze = me(null);
+function Q() {
+  return be(Ze);
 }
-const ze = he(null);
-function te() {
-  return me(ze);
+const Ke = me(null);
+function ue() {
+  return be(Ke);
 }
-const _e = he(null);
-function ht() {
-  return me(_e);
+const Xe = me(null);
+function qe() {
+  return be(Xe);
 }
-const mt = {
+const Ft = {
   fadeGroup: {
     display: "flex",
     alignItems: "center",
     gap: 0.25
   }
 };
-function Pe(t) {
-  const e = R(3), {
+function Qe(t) {
+  const e = T(3), {
     children: o
-  } = t, i = te() !== null ? "PsLegend-rowFade" : "PsLegend-groupFade";
-  let r;
-  return e[0] !== o || e[1] !== i ? (r = /* @__PURE__ */ s(P, { className: i, sx: mt.fadeGroup, children: o }), e[0] = o, e[1] = i, e[2] = r) : r = e[2], r;
+  } = t, l = Q() !== null ? "PsLegend-rowFade" : "PsLegend-groupFade";
+  let i;
+  return e[0] !== o || e[1] !== l ? (i = /* @__PURE__ */ d(P, { className: l, sx: Ft.fadeGroup, children: o }), e[0] = o, e[1] = l, e[2] = i) : i = e[2], i;
 }
-function Me(t) {
+function Ye(t) {
   const e = [], o = [];
-  for (const n of Ae.toArray(t))
-    gt(n, Pe) ? e.push(n) : o.push(n);
+  for (const r of ut.toArray(t))
+    Ut(r, Qe) ? e.push(r) : o.push(r);
   return {
     actions: e,
     body: o
   };
 }
-function gt(t, e) {
-  return Be(t) && t.type === e;
+function Ut(t, e) {
+  return pt(t) && t.type === e;
+}
+const Je = me(!1);
+function et() {
+  return be(Je);
+}
+const Se = (t, e) => `${t}:${e}`;
+function de(t) {
+  const e = t.indexOf(":");
+  if (e === -1) return null;
+  const o = t.slice(0, e);
+  return o !== "group" && o !== "layer" ? null : {
+    kind: o,
+    id: t.slice(e + 1)
+  };
+}
+const le = {
+  // Absolute handle — no flex slot; sticky header is the containing block.
+  handleSlot: {
+    position: "absolute",
+    zIndex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 24
+  },
+  handleSlotLayer: {
+    right: 2
+  },
+  handleSlotGroup: {
+    right: 2
+  },
+  handle: {
+    padding: "2px",
+    cursor: "grab",
+    touchAction: "none",
+    color: "text.secondary",
+    "& .MuiSvgIcon-root": {
+      fontSize: 18
+    },
+    "&:active": {
+      cursor: "grabbing"
+    },
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  overlay: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    padding: ({
+      spacing: t
+    }) => t(1, 1.5),
+    backgroundColor: "background.paper",
+    borderRadius: 1,
+    boxShadow: 4,
+    height: "auto",
+    maxWidth: "100%",
+    overflow: "hidden"
+  },
+  overlayIcon: {
+    display: "flex",
+    color: "text.secondary"
+  },
+  overlayLabel: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+};
+function tt(t) {
+  const e = T(31), {
+    kind: o,
+    id: r,
+    render: l
+  } = t, {
+    labels: i
+  } = B();
+  let n;
+  e[0] !== r || e[1] !== o ? (n = Se(o, r), e[0] = r, e[1] = o, e[2] = n) : n = e[2];
+  let a;
+  e[3] !== n ? (a = {
+    id: n
+  }, e[3] = n, e[4] = a) : a = e[4];
+  const {
+    attributes: s,
+    listeners: c,
+    setNodeRef: p,
+    setActivatorNodeRef: f,
+    transform: u,
+    transition: y,
+    isDragging: h
+  } = Tt(a);
+  let g;
+  if (e[5] !== s || e[6] !== h || e[7] !== o || e[8] !== i.reorder || e[9] !== c || e[10] !== l || e[11] !== f || e[12] !== p || e[13] !== u || e[14] !== y) {
+    const v = {
+      transform: Dt.Transform.toString(u ? {
+        ...u,
+        x: 0
+      } : null),
+      transition: y
+    }, b = `PsLegend-dragHandle-${o}`, C = o === "group" ? le.handleSlotGroup : le.handleSlotLayer;
+    let L;
+    e[16] !== C ? (L = [le.handleSlot, C], e[16] = C, e[17] = L) : L = e[17];
+    let w;
+    e[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ d(Ot, {}), e[18] = w) : w = e[18];
+    let x;
+    e[19] !== s || e[20] !== i.reorder || e[21] !== c || e[22] !== f ? (x = /* @__PURE__ */ d(ve, { ref: f, size: "xsmall", "aria-label": i.reorder, ...s, ...c, sx: le.handle, children: w }), e[19] = s, e[20] = i.reorder, e[21] = c, e[22] = f, e[23] = x) : x = e[23];
+    let I;
+    e[24] !== i.reorder || e[25] !== x ? (I = /* @__PURE__ */ d(ie, { title: i.reorder, children: x }), e[24] = i.reorder, e[25] = x, e[26] = I) : I = e[26];
+    let S;
+    e[27] !== b || e[28] !== L || e[29] !== I ? (S = /* @__PURE__ */ d(P, { component: "span", className: b, sx: L, children: I }), e[27] = b, e[28] = L, e[29] = I, e[30] = S) : S = e[30], g = l({
+      rootRef: p,
+      rootStyle: v,
+      dragging: h,
+      handle: S
+    }), e[5] = s, e[6] = h, e[7] = o, e[8] = i.reorder, e[9] = c, e[10] = l, e[11] = f, e[12] = p, e[13] = u, e[14] = y, e[15] = g;
+  } else
+    g = e[15];
+  return g;
 }
-const Oe = 48, ie = {
+const ot = 48, Y = {
   group: {
     display: "flex",
     flexDirection: "column",
@@ -144,8 +292,30 @@ const Oe = 48, ie = {
     },
     "&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *": {
       opacity: 1
+    },
+    // Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
+    // slot, so it never shifts the title/icon); the button inside fades in
+    // on hover/focus and is always visible on touch devices.
+    "& .PsLegend-dragHandle-group > *": {
+      opacity: 0,
+      transition: ({
+        transitions: t
+      }) => t.create("opacity", {
+        duration: t.duration.standard,
+        easing: t.easing.easeInOut
+      }),
+      "@media (hover: none)": {
+        opacity: 1
+      }
+    },
+    "&:hover .PsLegend-dragHandle-group > *, &:focus-within .PsLegend-dragHandle-group > *": {
+      opacity: 1
     }
   },
+  // The original stays in place, dimmed, while its overlay clone is dragged.
+  groupDragging: {
+    opacity: 0.4
+  },
   // Figma: 48px tall, icon at 12px from the left, 8px gap to the label,
   // actions right-aligned with ~8px edge inset (the small icon-button padding
   // brings the glyphs to the design's 16px optical inset), hairline divider
@@ -157,7 +327,7 @@ const Oe = 48, ie = {
     padding: ({
       spacing: t
     }) => t(1.5, 2, 1.5, 1),
-    minHeight: Oe,
+    minHeight: ot,
     borderBottom: "1px solid",
     borderColor: "divider",
     position: "sticky",
@@ -165,19 +335,55 @@ const Oe = 48, ie = {
     // Above the sticky row headers (2), which in turn sit above MUI's
     // z-index-1 form internals in row content.
     zIndex: 3,
-    backgroundColor: "background.paper"
+    // Distinct from the row header / panel body (both `background.paper`) so
+    // the group header visually separates from the rest.
+    backgroundColor: "background.default"
+  },
+  // Accordion click target: everything in the header but the actions box.
+  // Non-native button (role='button'), so it carries its own focus ring.
+  titleArea: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    cursor: "pointer",
+    userSelect: "none",
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: -2
+    }
   },
   groupIcon: {
     display: "flex",
     color: "text.secondary"
   },
   label: {
-    flex: 1,
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  // Informative collapse indicator beside the title (the whole title area is
+  // the button). Points down when expanded, right when collapsed. Touch
+  // devices don't get it — the title row is the affordance there.
+  chevron: {
+    fontSize: 16,
+    color: "text.secondary",
+    flexShrink: 0,
+    transition: ({
+      transitions: t
+    }) => t.create("transform", {
+      duration: t.duration.shorter
+    }),
+    "@media (hover: none)": {
+      display: "none"
+    }
+  },
+  chevronCollapsed: {
+    transform: "rotate(-90deg)"
+  },
   // Icon buttons match the row header's 24×24 (2px padding + 20px icon).
   actions: {
     display: "flex",
@@ -189,73 +395,66 @@ const Oe = 48, ie = {
     }
   }
 };
-function yt(t) {
-  const e = R(37), {
+function jt(t) {
+  const e = T(27), {
     groupId: o,
-    children: n
-  } = t, i = ee();
-  let r;
-  e[0] !== o ? (r = ($) => $.groups[o], e[0] = o, e[1] = r) : r = e[1];
-  const l = Y(i, r), p = Y(i, xt), {
-    labels: a
-  } = K();
-  if (!l)
+    children: r
+  } = t, l = N();
+  let i;
+  e[0] !== o ? (i = (x) => x.groups[o], e[0] = o, e[1] = i) : i = e[1];
+  const n = Z(l, i), a = Z(l, Kt);
+  let s;
+  e[2] !== o ? (s = (x) => ke(x, o) === "hidden", e[2] = o, e[3] = s) : s = e[3];
+  const c = U(l, s), p = et();
+  let f;
+  e[4] !== o ? (f = (x) => re(x, o).map(Zt), e[4] = o, e[5] = f) : f = e[5];
+  const u = Z(l, f);
+  if (!n)
     return null;
-  let d;
-  e[2] !== n ? (d = Me(n), e[2] = n, e[3] = d) : d = e[3];
-  const {
-    actions: f,
-    body: m
-  } = d;
-  let c;
-  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ s(P, { sx: ie.groupIcon, children: /* @__PURE__ */ s(it, { fontSize: "small" }) }), e[4] = c) : c = e[4];
-  let g, u;
-  e[5] !== l.label ? (g = [l.label], u = ($) => {
-    const {
-      ref: M
-    } = $;
-    return /* @__PURE__ */ s(V, { ref: M, variant: "button", color: "text.primary", sx: ie.label, children: l.label });
-  }, e[5] = l.label, e[6] = g, e[7] = u) : (g = e[6], u = e[7]);
-  let h;
-  e[8] !== l.label || e[9] !== g || e[10] !== u ? (h = /* @__PURE__ */ s($e, { title: l.label, dependencies: g, children: u }), e[8] = l.label, e[9] = g, e[10] = u, e[11] = h) : h = e[11];
   let y;
-  e[12] !== l.collapsed || e[13] !== o || e[14] !== p ? (y = () => p(o, !l.collapsed), e[12] = l.collapsed, e[13] = o, e[14] = p, e[15] = y) : y = e[15];
-  const x = l.collapsed ? a.expandGroup : a.collapseGroup;
-  let b;
-  e[16] !== l.collapsed ? (b = l.collapsed ? /* @__PURE__ */ s(Se, { fontSize: "small" }) : /* @__PURE__ */ s(Ie, { fontSize: "small" }), e[16] = l.collapsed, e[17] = b) : b = e[17];
+  e[6] !== r ? (y = Ye(r), e[6] = r, e[7] = y) : y = e[7];
+  const {
+    actions: h,
+    body: g
+  } = y;
   let v;
-  e[18] !== y || e[19] !== x || e[20] !== b ? (v = /* @__PURE__ */ s(de, { size: "small", onClick: y, "aria-label": x, children: b }), e[18] = y, e[19] = x, e[20] = b, e[21] = v) : v = e[21];
-  let L;
-  e[22] !== f || e[23] !== v ? (L = /* @__PURE__ */ E(P, { sx: ie.actions, children: [
-    f,
-    v
-  ] }), e[22] = f, e[23] = v, e[24] = L) : L = e[24];
-  let w;
-  e[25] !== L || e[26] !== h ? (w = /* @__PURE__ */ E(P, { sx: ie.header, children: [
-    c,
-    h,
-    L
-  ] }), e[25] = L, e[26] = h, e[27] = w) : w = e[27];
-  const k = !l.collapsed;
+  e[8] !== n.collapsed || e[9] !== o || e[10] !== a ? (v = () => a(o, !n.collapsed), e[8] = n.collapsed, e[9] = o, e[10] = a, e[11] = v) : v = e[11];
+  const b = v;
   let C;
-  e[28] !== m || e[29] !== k ? (C = /* @__PURE__ */ s(ve, { in: k, children: m }), e[28] = m, e[29] = k, e[30] = C) : C = e[30];
-  let S;
-  e[31] !== w || e[32] !== C ? (S = /* @__PURE__ */ E(P, { sx: ie.group, children: [
-    w,
-    C
-  ] }), e[31] = w, e[32] = C, e[33] = S) : S = e[33];
-  let z;
-  return e[34] !== o || e[35] !== S ? (z = /* @__PURE__ */ s(_e.Provider, { value: o, children: S }), e[34] = o, e[35] = S, e[36] = z) : z = e[36], z;
+  e[12] !== h || e[13] !== g || e[14] !== n.collapsed || e[15] !== n.icon || e[16] !== n.label || e[17] !== o || e[18] !== c || e[19] !== u || e[20] !== p || e[21] !== b ? (C = (x) => /* @__PURE__ */ d(Ke.Provider, { value: o, children: /* @__PURE__ */ z(P, { ref: x?.rootRef, style: x?.rootStyle, sx: [Y.group, x?.dragging === !0 && Y.groupDragging], children: [
+    /* @__PURE__ */ z(P, { sx: Y.header, children: [
+      x?.handle,
+      /* @__PURE__ */ z(P, { sx: Y.titleArea, role: "button", tabIndex: 0, "aria-expanded": !n.collapsed, onClick: b, onKeyDown: je(b), children: [
+        n.icon != null && /* @__PURE__ */ d(P, { sx: Y.groupIcon, children: n.icon }),
+        /* @__PURE__ */ d(Fe, { title: n.label, dependencies: [n.label], children: (I) => {
+          const {
+            ref: S
+          } = I;
+          return /* @__PURE__ */ d(E, { ref: S, variant: "button", fontWeight: "bold", color: c ? "text.disabled" : "text.primary", sx: Y.label, children: n.label });
+        } }),
+        /* @__PURE__ */ d(Ve, { sx: [Y.chevron, n.collapsed && Y.chevronCollapsed] })
+      ] }),
+      /* @__PURE__ */ d(P, { sx: Y.actions, children: h })
+    ] }),
+    /* @__PURE__ */ d(He, { in: !n.collapsed, children: p ? /* @__PURE__ */ d(We, { items: u, strategy: Ne, children: g }) : g })
+  ] }) }), e[12] = h, e[13] = g, e[14] = n.collapsed, e[15] = n.icon, e[16] = n.label, e[17] = o, e[18] = c, e[19] = u, e[20] = p, e[21] = b, e[22] = C) : C = e[22];
+  const L = C;
+  let w;
+  return e[23] !== o || e[24] !== L || e[25] !== p ? (w = p ? /* @__PURE__ */ d(tt, { kind: "group", id: o, render: L }) : L(), e[23] = o, e[24] = L, e[25] = p, e[26] = w) : w = e[26], w;
 }
-function xt(t) {
+function Zt(t) {
+  return Se("layer", t.id);
+}
+function Kt(t) {
   return t.setGroupCollapsed;
 }
-const Z = {
+const j = {
   // Padding lives on header/content/footer (not the root) so the sticky
   // header is opaque and full-bleed while pinned.
   row: {
     display: "flex",
     flexDirection: "column",
+    position: "relative",
     "& + &": {
       borderTop: "1px solid",
       borderColor: "divider"
@@ -288,8 +487,30 @@ const Z = {
     // (the renderers keep their own list-scoped rule for standalone usage).
     "&:hover .PsLegend-value, &:focus-within .PsLegend-value": {
       opacity: 1
+    },
+    // Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
+    // slot, so it never shifts the title/icon); the button inside fades in
+    // on hover/focus and is always visible on touch devices.
+    "& .PsLegend-dragHandle-layer > *": {
+      opacity: 0,
+      transition: ({
+        transitions: t
+      }) => t.create("opacity", {
+        duration: t.duration.standard,
+        easing: t.easing.easeInOut
+      }),
+      "@media (hover: none)": {
+        opacity: 1
+      }
+    },
+    "&:hover .PsLegend-dragHandle-layer > *, &:focus-within .PsLegend-dragHandle-layer > *": {
+      opacity: 1
     }
   },
+  // The original stays in place, dimmed, while its overlay clone is dragged.
+  rowDragging: {
+    opacity: 0.4
+  },
   // Figma `_Legend header`: 16px top/left inset (title glyphs start at
   // y≈17, x=16 in the 68px-tall header), actions share the title's vertical
   // band (subtitle flows below them) — hence `flex-start` with the title
@@ -316,21 +537,51 @@ const Z = {
     display: "flex",
     flexDirection: "column"
   },
+  // Accordion click target (whole title block + spare space). Non-native
+  // button, so it carries its own focus ring.
+  titleBoxInteractive: {
+    cursor: "pointer",
+    userSelect: "none",
+    "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "primary.main",
+      outlineOffset: -2
+    }
+  },
   // The title line and the actions box share the same 24px band, centered,
   // so the title and the action icons stay aligned under the header's
   // `flex-start` — no padding magic. The subtitle flows below.
   titleLine: {
     minHeight: 24,
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    gap: 0.5
   },
   title: {
-    flex: 1,
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  // Informative collapse indicator beside the title (the title area is the
+  // button). Points down when expanded, right when collapsed; not shown on
+  // touch devices — there the title row itself is the affordance.
+  chevron: {
+    fontSize: 16,
+    color: "text.secondary",
+    flexShrink: 0,
+    transition: ({
+      transitions: t
+    }) => t.create("transform", {
+      duration: t.duration.shorter
+    }),
+    "@media (hover: none)": {
+      display: "none"
+    }
+  },
+  chevronCollapsed: {
+    transform: "rotate(-90deg)"
+  },
   // Same 24px band as the title line, so both sides of the header stay
   // aligned even when the composed actions are shorter (or fade out).
   // Icon buttons (actions + collapse chevron) are squeezed to 24×24:
@@ -366,353 +617,779 @@ const Z = {
     opacity: 0.5
   }
 };
-function bt(t) {
-  const e = R(57), {
+function Xt(t) {
+  const e = T(30), {
     layerId: o,
-    children: n
-  } = t, i = ee();
-  let r;
-  e[0] !== o ? (r = (j) => j.layers[o], e[0] = o, e[1] = r) : r = e[1];
-  const l = Y(i, r), p = Y(i, vt), {
-    labels: a
-  } = K(), [d, f] = oe(null), [m, c] = oe(!1);
-  let g;
-  e[2] !== d || e[3] !== o || e[4] !== m ? (g = {
+    children: r
+  } = t, l = N();
+  let i;
+  e[0] !== o ? (i = (m) => m.layers[o], e[0] = o, e[1] = i) : i = e[1];
+  const n = Z(l, i), a = Z(l, qt);
+  let s;
+  e[2] !== o ? (s = (m) => Lt(m, o), e[2] = o, e[3] = s) : s = e[3];
+  const c = U(l, s), p = ue() !== null, f = et(), [u, y] = J(!1), h = n?.visible ?? !0, g = u && h;
+  let v;
+  e[4] !== o || e[5] !== g ? (v = {
     layerId: o,
-    headerEl: d,
-    opacityOpen: m,
-    setOpacityOpen: c
-  }, e[2] = d, e[3] = o, e[4] = m, e[5] = g) : g = e[5];
-  const u = g;
-  if (!l)
+    opacityOpen: g,
+    setOpacityOpen: y
+  }, e[4] = o, e[5] = g, e[6] = v) : v = e[6];
+  const b = v;
+  if (!n)
     return null;
-  let h;
-  e[6] !== n ? (h = Me(n), e[6] = n, e[7] = h) : h = e[7];
-  const {
-    actions: y,
-    body: x
-  } = h, b = !l.visible || l.collapsed, v = l.groupId ? Oe : 0;
-  let L;
-  e[8] !== v ? (L = {
-    top: v
-  }, e[8] = v, e[9] = L) : L = e[9];
-  let w, k;
-  e[10] !== l.name ? (w = [l.name], k = (j) => {
-    const {
-      ref: q
-    } = j;
-    return /* @__PURE__ */ s(V, { ref: q, variant: "button", color: "text.primary", sx: Z.title, children: l.name });
-  }, e[10] = l.name, e[11] = w, e[12] = k) : (w = e[11], k = e[12]);
   let C;
-  e[13] !== l.name || e[14] !== w || e[15] !== k ? (C = /* @__PURE__ */ s(P, { sx: Z.titleLine, children: /* @__PURE__ */ s($e, { title: l.name, dependencies: w, children: k }) }), e[13] = l.name, e[14] = w, e[15] = k, e[16] = C) : C = e[16];
-  let S;
-  e[17] !== l.subtitle ? (S = l.subtitle && /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: l.subtitle }), e[17] = l.subtitle, e[18] = S) : S = e[18];
-  let z;
-  e[19] !== C || e[20] !== S ? (z = /* @__PURE__ */ E(P, { sx: Z.titleBox, children: [
-    C,
-    S
-  ] }), e[19] = C, e[20] = S, e[21] = z) : z = e[21];
-  let $;
-  e[22] !== l.collapsed || e[23] !== o || e[24] !== p ? ($ = () => p(o, !l.collapsed), e[22] = l.collapsed, e[23] = o, e[24] = p, e[25] = $) : $ = e[25];
-  const M = !l.visible, I = b ? a.expandLayer : a.collapseLayer;
-  let _;
-  e[26] !== b ? (_ = b ? /* @__PURE__ */ s(Se, { fontSize: "small" }) : /* @__PURE__ */ s(Ie, { fontSize: "small" }), e[26] = b, e[27] = _) : _ = e[27];
+  e[7] !== r ? (C = Ye(r), e[7] = r, e[8] = C) : C = e[8];
+  const {
+    actions: L,
+    body: w
+  } = C, x = !n.visible || n.collapsed, I = p ? ot : 0, S = n.visible && c;
   let O;
-  e[28] !== $ || e[29] !== M || e[30] !== I || e[31] !== _ ? (O = /* @__PURE__ */ s(de, { size: "small", onClick: $, disabled: M, "aria-label": I, children: _ }), e[28] = $, e[29] = M, e[30] = I, e[31] = _, e[32] = O) : O = e[32];
-  let T;
-  e[33] !== y || e[34] !== O ? (T = /* @__PURE__ */ E(P, { sx: Z.actions, children: [
-    y,
-    O
-  ] }), e[33] = y, e[34] = O, e[35] = T) : T = e[35];
-  let D;
-  e[36] !== T || e[37] !== L || e[38] !== z ? (D = /* @__PURE__ */ E(P, { ref: f, sx: Z.header, style: L, children: [
-    z,
-    T
-  ] }), e[36] = T, e[37] = L, e[38] = z, e[39] = D) : D = e[39];
-  const N = !b;
-  let A;
-  e[40] !== l.visible ? (A = l.visible ? Z.content : {
-    ...Z.content,
-    ...Z.dimmed
-  }, e[40] = l.visible, e[41] = A) : A = e[41];
-  let F;
-  e[42] !== x || e[43] !== A ? (F = /* @__PURE__ */ s(P, { sx: A, children: x }), e[42] = x, e[43] = A, e[44] = F) : F = e[44];
-  let B;
-  e[45] !== l.helperText ? (B = l.helperText && /* @__PURE__ */ s(P, { sx: Z.footer, children: typeof l.helperText == "string" ? /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: l.helperText }) : l.helperText }), e[45] = l.helperText, e[46] = B) : B = e[46];
-  let W;
-  e[47] !== N || e[48] !== F || e[49] !== B ? (W = /* @__PURE__ */ E(ve, { in: N, children: [
-    F,
-    B
-  ] }), e[47] = N, e[48] = F, e[49] = B, e[50] = W) : W = e[50];
-  let H;
-  e[51] !== D || e[52] !== W ? (H = /* @__PURE__ */ E(P, { sx: Z.row, children: [
-    D,
-    W
-  ] }), e[51] = D, e[52] = W, e[53] = H) : H = e[53];
+  e[9] !== n.collapsed || e[10] !== o || e[11] !== a ? (O = () => a(o, !n.collapsed), e[9] = n.collapsed, e[10] = o, e[11] = a, e[12] = O) : O = e[12];
+  const k = O;
+  let $;
+  e[13] !== L || e[14] !== w || e[15] !== S || e[16] !== x || e[17] !== n.collapsed || e[18] !== n.helperText || e[19] !== n.name || e[20] !== n.subtitle || e[21] !== n.visible || e[22] !== b || e[23] !== I || e[24] !== k ? ($ = (m) => /* @__PURE__ */ d(Ze.Provider, { value: b, children: /* @__PURE__ */ z(P, { ref: m?.rootRef, style: m?.rootStyle, sx: [j.row, m?.dragging === !0 && j.rowDragging], children: [
+    /* @__PURE__ */ z(P, { sx: j.header, style: {
+      top: I
+    }, children: [
+      m?.handle,
+      /* @__PURE__ */ z(P, { sx: [j.titleBox, S && j.titleBoxInteractive], ...S && {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": !n.collapsed,
+        onClick: k,
+        onKeyDown: je(k)
+      }, children: [
+        /* @__PURE__ */ z(P, { sx: j.titleLine, children: [
+          /* @__PURE__ */ d(Fe, { title: n.name, dependencies: [n.name], children: (M) => {
+            const {
+              ref: A
+            } = M;
+            return /* @__PURE__ */ d(E, { ref: A, variant: "button", color: n.visible ? "text.primary" : "text.disabled", sx: j.title, children: n.name });
+          } }),
+          S && /* @__PURE__ */ d(Ve, { sx: [j.chevron, n.collapsed && j.chevronCollapsed] })
+        ] }),
+        n.subtitle && !x && /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.subtitle })
+      ] }),
+      /* @__PURE__ */ d(P, { sx: j.actions, children: L })
+    ] }),
+    /* @__PURE__ */ z(He, { in: !x, children: [
+      /* @__PURE__ */ d(P, { sx: n.visible ? j.content : {
+        ...j.content,
+        ...j.dimmed
+      }, children: w }),
+      n.helperText && /* @__PURE__ */ d(P, { sx: j.footer, children: typeof n.helperText == "string" ? /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: n.helperText }) : n.helperText })
+    ] })
+  ] }) }), e[13] = L, e[14] = w, e[15] = S, e[16] = x, e[17] = n.collapsed, e[18] = n.helperText, e[19] = n.name, e[20] = n.subtitle, e[21] = n.visible, e[22] = b, e[23] = I, e[24] = k, e[25] = $) : $ = e[25];
+  const _ = $;
   let G;
-  return e[54] !== u || e[55] !== H ? (G = /* @__PURE__ */ s(ze.Provider, { value: u, children: H }), e[54] = u, e[55] = H, e[56] = G) : G = e[56], G;
+  return e[26] !== o || e[27] !== _ || e[28] !== f ? (G = f ? /* @__PURE__ */ d(tt, { kind: "layer", id: o, render: _ }) : _(), e[26] = o, e[27] = _, e[28] = f, e[29] = G) : G = e[29], G;
 }
-function vt(t) {
+function qt(t) {
   return t.setCollapsed;
 }
-const Lt = Qe(/* @__PURE__ */ E("g", { transform: "translate(12 12) scale(1.33333) translate(-184 -24)", children: [
-  /* @__PURE__ */ s("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M184.901 29.5794L185.217 29.5415C185.803 29.4604 186.372 29.3216 186.918 29.1319L187 29.1007L187 29.1033L187.208 29.0255L187.536 28.8904C187.722 28.8088 187.906 28.721 188.086 28.6272L188.366 28.4747C188.381 28.4663 188.395 28.4578 188.41 28.4493C188.418 28.4451 188.425 28.4408 188.432 28.4365C188.455 28.4234 188.478 28.4102 188.5 28.3969C188.551 28.3668 188.601 28.3362 188.652 28.3052L188.912 28.1374C189.598 27.6788 190.217 27.1271 190.75 26.5002L190.751 26.4954C190.989 26.2164 191.21 25.9226 191.413 25.6152C191.488 25.5007 191.561 25.3843 191.631 25.2662L191.757 25.0445L191.878 24.8189L192.021 24.5306L192.15 24.2443L192.25 24C190.98 20.7776 187.885 18.4747 184.239 18.3782L184 18.375L183.716 18.3795L183.637 18.3823L183.373 18.3967L183.103 18.4198L182.838 18.4506L182.666 18.4749L182.426 18.5146C182.19 18.557 181.957 18.6087 181.728 18.6684L181.55 18.7175L181.271 18.8039L182.508 20.04L182.801 19.9854C183.194 19.9182 183.592 19.875 184 19.875C186.842 19.875 189.378 21.4725 190.615 24C190.172 24.915 189.55 25.7025 188.807 26.34L188.811 26.3446C188.71 26.4323 188.606 26.5172 188.5 26.5991C188.455 26.6337 188.41 26.6679 188.364 26.7015C188.108 26.8897 187.84 27.0611 187.562 27.2145C187.088 27.4755 186.585 27.6844 186.058 27.836L186.062 27.84L185.778 27.9125C185.707 27.9293 185.635 27.9452 185.563 27.9602C185.297 28.0173 185.025 28.06 184.75 28.0876V28.0866C184.503 28.1118 184.253 28.125 184 28.125C181.158 28.125 178.622 26.5275 177.385 24C177.91 22.9275 178.675 22.0425 179.582 21.3525L180.895 22.665L180.826 22.844C180.697 23.2065 180.625 23.595 180.625 24C180.625 25.86 182.14 27.375 184 27.375C184.258 27.375 184.509 27.3459 184.75 27.2915C185.462 27.129 186.09 26.7397 186.553 26.2048L179.79 19.4389C179.339 19.6833 178.912 19.9656 178.512 20.2817L178.517 20.2875L178.271 20.4884C177.704 20.9671 177.197 21.516 176.766 22.1227C176.404 22.6333 176.095 23.1838 175.845 23.7662L175.75 24C177.048 27.2925 180.25 29.625 184 29.625L184.285 29.6205L184.492 29.6116L184.628 29.6025L184.901 29.5794ZM182.133 23.9025L184.09 25.86L184.045 25.8703L184 25.875C182.965 25.875 182.125 25.035 182.125 24L182.133 23.9025Z" }),
-  /* @__PURE__ */ s("path", { d: "M187.368 23.9925C187.375 22.1325 185.86 20.625 184 20.625C183.722 20.625 183.46 20.6625 183.198 20.73L184.75 22.2825L184.889 22.3507C185.252 22.5477 185.543 22.8625 185.71 23.2425L187.263 24.795L187.304 24.6011C187.342 24.4045 187.368 24.2006 187.368 23.9925Z" })
-] }), "VisibilityIndeterminate"), Ct = {
-  visible: st,
-  hidden: rt,
-  mixed: Lt
+const Qt = St(/* @__PURE__ */ z("g", { transform: "translate(12 12) scale(1.33333) translate(-184 -24)", children: [
+  /* @__PURE__ */ d("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M184.901 29.5794L185.217 29.5415C185.803 29.4604 186.372 29.3216 186.918 29.1319L187 29.1007L187 29.1033L187.208 29.0255L187.536 28.8904C187.722 28.8088 187.906 28.721 188.086 28.6272L188.366 28.4747C188.381 28.4663 188.395 28.4578 188.41 28.4493C188.418 28.4451 188.425 28.4408 188.432 28.4365C188.455 28.4234 188.478 28.4102 188.5 28.3969C188.551 28.3668 188.601 28.3362 188.652 28.3052L188.912 28.1374C189.598 27.6788 190.217 27.1271 190.75 26.5002L190.751 26.4954C190.989 26.2164 191.21 25.9226 191.413 25.6152C191.488 25.5007 191.561 25.3843 191.631 25.2662L191.757 25.0445L191.878 24.8189L192.021 24.5306L192.15 24.2443L192.25 24C190.98 20.7776 187.885 18.4747 184.239 18.3782L184 18.375L183.716 18.3795L183.637 18.3823L183.373 18.3967L183.103 18.4198L182.838 18.4506L182.666 18.4749L182.426 18.5146C182.19 18.557 181.957 18.6087 181.728 18.6684L181.55 18.7175L181.271 18.8039L182.508 20.04L182.801 19.9854C183.194 19.9182 183.592 19.875 184 19.875C186.842 19.875 189.378 21.4725 190.615 24C190.172 24.915 189.55 25.7025 188.807 26.34L188.811 26.3446C188.71 26.4323 188.606 26.5172 188.5 26.5991C188.455 26.6337 188.41 26.6679 188.364 26.7015C188.108 26.8897 187.84 27.0611 187.562 27.2145C187.088 27.4755 186.585 27.6844 186.058 27.836L186.062 27.84L185.778 27.9125C185.707 27.9293 185.635 27.9452 185.563 27.9602C185.297 28.0173 185.025 28.06 184.75 28.0876V28.0866C184.503 28.1118 184.253 28.125 184 28.125C181.158 28.125 178.622 26.5275 177.385 24C177.91 22.9275 178.675 22.0425 179.582 21.3525L180.895 22.665L180.826 22.844C180.697 23.2065 180.625 23.595 180.625 24C180.625 25.86 182.14 27.375 184 27.375C184.258 27.375 184.509 27.3459 184.75 27.2915C185.462 27.129 186.09 26.7397 186.553 26.2048L179.79 19.4389C179.339 19.6833 178.912 19.9656 178.512 20.2817L178.517 20.2875L178.271 20.4884C177.704 20.9671 177.197 21.516 176.766 22.1227C176.404 22.6333 176.095 23.1838 175.845 23.7662L175.75 24C177.048 27.2925 180.25 29.625 184 29.625L184.285 29.6205L184.492 29.6116L184.628 29.6025L184.901 29.5794ZM182.133 23.9025L184.09 25.86L184.045 25.8703L184 25.875C182.965 25.875 182.125 25.035 182.125 24L182.133 23.9025Z" }),
+  /* @__PURE__ */ d("path", { d: "M187.368 23.9925C187.375 22.1325 185.86 20.625 184 20.625C183.722 20.625 183.46 20.6625 183.198 20.73L184.75 22.2825L184.889 22.3507C185.252 22.5477 185.543 22.8625 185.71 23.2425L187.263 24.795L187.304 24.6011C187.342 24.4045 187.368 24.2006 187.368 23.9925Z" })
+] }), "VisibilityIndeterminate"), Yt = {
+  visible: Be,
+  hidden: _t,
+  mixed: Qt
 };
-function wt(t) {
-  const e = R(33), {
+function Jt(t) {
+  const e = T(36), {
     visibility: o,
-    onToggle: n,
-    labels: i
-  } = t, r = ee(), l = te(), p = ht(), {
-    labels: a
-  } = K(), d = o !== void 0 && n !== void 0;
-  let f;
-  e[0] !== d || e[1] !== l ? (f = (I) => !d && l ? I.layers[l.layerId]?.visible ?? !0 : !0, e[0] = d, e[1] = l, e[2] = f) : f = e[2];
-  const m = X(r, f);
-  let c;
-  e[3] !== d || e[4] !== p || e[5] !== l ? (c = (I) => !d && !l && p ? Je(I, p) : "visible", e[3] = d, e[4] = p, e[5] = l, e[6] = c) : c = e[6];
-  const g = Y(r, c), u = X(r, It), h = X(r, St);
-  let y, x;
-  e[7] !== d || e[8] !== p || e[9] !== l ? (y = () => {
-    !d && !l && !p && console.warn("Legend.VisibilityToggle needs `visibility`/`onToggle` props or a Legend.Row / Legend.Group context.");
-  }, x = [d, l, p], e[7] = d, e[8] = p, e[9] = l, e[10] = y, e[11] = x) : (y = e[10], x = e[11]), We(y, x);
-  let b, v, L = i;
-  if (d) {
-    b = o;
-    let I;
-    e[12] !== n || e[13] !== o ? (I = () => n(o === "hidden"), e[12] = n, e[13] = o, e[14] = I) : I = e[14], v = I;
-  } else if (l) {
-    b = m ? "visible" : "hidden";
-    let I;
-    e[15] !== m || e[16] !== l || e[17] !== u ? (I = () => u(l.layerId, !m), e[15] = m, e[16] = l, e[17] = u, e[18] = I) : I = e[18], v = I;
-  } else if (p) {
-    b = g;
-    let I;
-    e[19] !== p || e[20] !== g || e[21] !== h ? (I = () => h(p, g === "hidden"), e[19] = p, e[20] = g, e[21] = h, e[22] = I) : I = e[22], v = I;
-    let _;
-    e[23] !== a || e[24] !== i ? (_ = i ?? {
-      hideLayer: a.hideGroup,
-      showLayer: a.showGroup
-    }, e[23] = a, e[24] = i, e[25] = _) : _ = e[25], L = _;
+    onToggle: r,
+    labels: l
+  } = t, i = N(), n = Q(), a = ue(), {
+    labels: s
+  } = B(), c = o !== void 0 && r !== void 0;
+  let p;
+  e[0] !== c || e[1] !== n ? (p = (m) => !c && n ? m.layers[n.layerId]?.visible ?? !0 : !0, e[0] = c, e[1] = n, e[2] = p) : p = e[2];
+  const f = U(i, p);
+  let u;
+  e[3] !== c || e[4] !== a || e[5] !== n ? (u = (m) => !c && !n && a ? ke(m, a) : "visible", e[3] = c, e[4] = a, e[5] = n, e[6] = u) : u = e[6];
+  const y = Z(i, u), h = U(i, to), g = U(i, eo);
+  let v, b;
+  e[7] !== c || e[8] !== a || e[9] !== n ? (v = () => {
+    !c && !n && !a && console.warn("Legend.VisibilityToggle needs `visibility`/`onToggle` props or a Legend.Row / Legend.Group context.");
+  }, b = [c, n, a], e[7] = c, e[8] = a, e[9] = n, e[10] = v, e[11] = b) : (v = e[10], b = e[11]), ft(v, b);
+  let C, L, w = l;
+  if (c) {
+    C = o;
+    let m;
+    e[12] !== r || e[13] !== o ? (m = () => r(o === "hidden"), e[12] = r, e[13] = o, e[14] = m) : m = e[14], L = m;
+  } else if (n) {
+    C = f ? "visible" : "hidden";
+    let m;
+    e[15] !== f || e[16] !== n || e[17] !== h ? (m = () => h(n.layerId, !f), e[15] = f, e[16] = n, e[17] = h, e[18] = m) : m = e[18], L = m;
+  } else if (a) {
+    C = y;
+    let m;
+    e[19] !== a || e[20] !== y || e[21] !== g ? (m = () => g(a, y === "hidden"), e[19] = a, e[20] = y, e[21] = g, e[22] = m) : m = e[22], L = m;
+    let M;
+    e[23] !== s || e[24] !== l ? (M = l ?? {
+      hideLayer: s.hideGroup,
+      showLayer: s.showGroup
+    }, e[23] = s, e[24] = l, e[25] = M) : M = e[25], w = M;
   } else
     return null;
   const {
-    hideLayer: w,
-    showLayer: k
-  } = L ?? a, C = Ct[b], S = b === "visible" ? void 0 : "active", z = b === "hidden" ? k : w;
+    hideLayer: x,
+    showLayer: I
+  } = w ?? s, S = Yt[C], O = C === "hidden" ? I : x, k = C === "visible" ? void 0 : "active";
   let $;
-  e[26] !== C ? ($ = /* @__PURE__ */ s(C, { fontSize: "small" }), e[26] = C, e[27] = $) : $ = e[27];
-  let M;
-  return e[28] !== v || e[29] !== S || e[30] !== z || e[31] !== $ ? (M = /* @__PURE__ */ s(de, { size: "small", className: S, onClick: v, "aria-label": z, children: $ }), e[28] = v, e[29] = S, e[30] = z, e[31] = $, e[32] = M) : M = e[32], M;
+  e[26] !== S ? ($ = /* @__PURE__ */ d(S, { fontSize: "small" }), e[26] = S, e[27] = $) : $ = e[27];
+  let _;
+  e[28] !== L || e[29] !== O || e[30] !== k || e[31] !== $ ? (_ = /* @__PURE__ */ d(ve, { size: "small", className: k, onClick: L, "aria-label": O, children: $ }), e[28] = L, e[29] = O, e[30] = k, e[31] = $, e[32] = _) : _ = e[32];
+  let G;
+  return e[33] !== O || e[34] !== _ ? (G = /* @__PURE__ */ d(ie, { title: O, children: _ }), e[33] = O, e[34] = _, e[35] = G) : G = e[35], G;
 }
-function St(t) {
+function eo(t) {
   return t.setGroupVisibility;
 }
-function It(t) {
+function to(t) {
   return t.setVisibility;
 }
-function $t(t) {
-  const e = R(17), {
-    children: o
-  } = t, n = ee(), [i, r] = oe(null), l = !!i, p = te();
-  let a;
-  e[0] !== p ? (a = (w) => p ? w.layers[p.layerId]?.visible ?? !0 : !0, e[0] = p, e[1] = a) : a = e[1];
-  const d = X(n, a), {
-    labels: f
-  } = K();
-  if (!p || !o || !d)
-    return null;
-  let m;
-  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = (w) => {
-    w.stopPropagation(), r(w.currentTarget);
-  }, e[2] = m) : m = e[2];
-  const c = m;
+function Oe(t) {
+  const e = T(23), {
+    children: o,
+    gate: r,
+    ariaLabel: l,
+    active: i
+  } = t, n = r === void 0 ? !0 : r, a = i === void 0 ? !1 : i, [s, c] = J(null), [p, f] = J(!1), u = Te(!1), y = !!s, {
+    labels: h
+  } = B();
   let g;
-  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => r(null), e[3] = g) : g = e[3];
-  const u = g, h = l ? "active" : void 0, y = !d;
-  let x;
-  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ s(at, { fontSize: "small" }), e[4] = x) : x = e[4];
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => c(null), e[0] = g) : g = e[0];
+  const v = g;
   let b;
-  e[5] !== f.layerOptions || e[6] !== l || e[7] !== h || e[8] !== y ? (b = /* @__PURE__ */ s(de, { size: "small", className: h, disabled: y, onClick: c, "aria-label": f.layerOptions, "aria-haspopup": "menu", "aria-expanded": l, children: x }), e[5] = f.layerOptions, e[6] = l, e[7] = h, e[8] = y, e[9] = b) : b = e[9];
-  let v;
-  e[10] !== i || e[11] !== o || e[12] !== l ? (v = /* @__PURE__ */ s(Le, { anchorEl: i, open: l, onClose: u, onClick: u, children: o }), e[10] = i, e[11] = o, e[12] = l, e[13] = v) : v = e[13];
+  e[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = (V) => {
+    u.current = V, f(V);
+  }, e[1] = b) : b = e[1];
+  const C = b;
   let L;
-  return e[14] !== b || e[15] !== v ? (L = /* @__PURE__ */ E(se, { children: [
-    b,
-    v
-  ] }), e[14] = b, e[15] = v, e[16] = L) : L = e[16], L;
+  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (L = () => u.current, e[2] = L) : L = e[2];
+  const w = L;
+  let x;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = () => {
+    u.current || v();
+  }, e[3] = x) : x = e[3];
+  const I = x;
+  let S;
+  e[4] !== p ? (S = {
+    busy: p,
+    isBusy: w,
+    setBusy: C,
+    close: v
+  }, e[4] = p, e[5] = S) : S = e[5];
+  const O = S;
+  if (!n || !o)
+    return null;
+  let k;
+  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = (V) => {
+    V.stopPropagation(), c(V.currentTarget);
+  }, e[6] = k) : k = e[6];
+  const $ = k, _ = y || p || a ? "active" : void 0;
+  let G;
+  e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (G = /* @__PURE__ */ d(Gt, { fontSize: "small" }), e[7] = G) : G = e[7];
+  let m;
+  e[8] !== l || e[9] !== y || e[10] !== _ ? (m = /* @__PURE__ */ d(ve, { size: "small", className: _, onClick: $, "aria-label": l, "aria-haspopup": "menu", "aria-expanded": y, children: G }), e[8] = l, e[9] = y, e[10] = _, e[11] = m) : m = e[11];
+  let M;
+  e[12] !== h.moreOptions || e[13] !== m ? (M = /* @__PURE__ */ d(ie, { title: h.moreOptions, children: m }), e[12] = h.moreOptions, e[13] = m, e[14] = M) : M = e[14];
+  let A;
+  e[15] !== s || e[16] !== o || e[17] !== y ? (A = /* @__PURE__ */ d($e, { anchorEl: s, open: y, onClose: I, onClick: I, children: o }), e[15] = s, e[16] = o, e[17] = y, e[18] = A) : A = e[18];
+  let D;
+  return e[19] !== O || e[20] !== M || e[21] !== A ? (D = /* @__PURE__ */ z(Xe.Provider, { value: O, children: [
+    M,
+    A
+  ] }), e[19] = O, e[20] = M, e[21] = A, e[22] = D) : D = e[22], D;
+}
+function oo(t) {
+  const e = T(5), {
+    children: o
+  } = t, r = Q(), {
+    labels: l
+  } = B(), i = !!r, n = r?.opacityOpen ?? !1;
+  let a;
+  return e[0] !== o || e[1] !== l.layerOptions || e[2] !== i || e[3] !== n ? (a = /* @__PURE__ */ d(Oe, { gate: i, ariaLabel: l.layerOptions, active: n, children: o }), e[0] = o, e[1] = l.layerOptions, e[2] = i, e[3] = n, e[4] = a) : a = e[4], a;
 }
-function kt(t) {
-  const e = R(7), {
+async function nt(t, e) {
+  if (!t.isBusy()) {
+    t.setBusy(!0);
+    try {
+      await e();
+    } finally {
+      t.setBusy(!1), t.close();
+    }
+  }
+}
+function no(t) {
+  const e = T(13), {
     onZoomTo: o
-  } = t, n = te(), {
-    labels: i
-  } = K();
-  if (!n)
+  } = t, r = N(), l = Q(), i = qe();
+  let n;
+  e[0] !== l ? (n = (g) => l ? g.layers[l.layerId]?.visible ?? !1 : !1, e[0] = l, e[1] = n) : n = e[1];
+  const a = U(r, n), {
+    labels: s
+  } = B();
+  if (!l || !a)
+    return null;
+  const c = i?.busy ?? !1;
+  let p;
+  e[2] !== i || e[3] !== o || e[4] !== l ? (p = (g) => {
+    g.stopPropagation(), i && nt(i, () => o(l.layerId));
+  }, e[2] = i, e[3] = o, e[4] = l, e[5] = p) : p = e[5];
+  const f = p;
+  let u;
+  e[6] !== c ? (u = c && /* @__PURE__ */ d(Re, { size: 16, sx: {
+    mr: 1
+  } }), e[6] = c, e[7] = u) : u = e[7];
+  const y = c ? s.loading : s.zoomTo;
+  let h;
+  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ z(q, { disabled: c, onClick: f, children: [
+    u,
+    y
+  ] }), e[8] = c, e[9] = f, e[10] = u, e[11] = y, e[12] = h) : h = e[12], h;
+}
+function lo() {
+  const t = T(6), e = N(), o = Q(), {
+    labels: r
+  } = B();
+  if (!o)
+    return null;
+  let l;
+  t[0] !== e || t[1] !== o.layerId ? (l = () => {
+    const a = X(e).getState(), s = a.layers[o.layerId];
+    if (s)
+      for (const c of re(a, s.groupId))
+        a.setVisibility(c.id, c.id === o.layerId);
+  }, t[0] = e, t[1] = o.layerId, t[2] = l) : l = t[2];
+  const i = l;
+  let n;
+  return t[3] !== r.showOnlyLayer || t[4] !== i ? (n = /* @__PURE__ */ d(q, { onClick: i, children: r.showOnlyLayer }), t[3] = r.showOnlyLayer, t[4] = i, t[5] = n) : n = t[5], n;
+}
+function io() {
+  const t = T(6), e = N(), o = ue(), r = Q(), {
+    labels: l
+  } = B();
+  if (o === null && !r)
+    return null;
+  let i;
+  t[0] !== o || t[1] !== e ? (i = () => {
+    const s = X(e).getState();
+    if (o !== null)
+      s.setGroupVisibility(o, !0);
+    else
+      for (const c of re(s, void 0))
+        s.setVisibility(c.id, !0);
+  }, t[0] = o, t[1] = e, t[2] = i) : i = t[2];
+  const n = i;
+  let a;
+  return t[3] !== l.showAllLayers || t[4] !== n ? (a = /* @__PURE__ */ d(q, { onClick: n, children: l.showAllLayers }), t[3] = l.showAllLayers, t[4] = n, t[5] = a) : a = t[5], a;
+}
+function ro(t) {
+  const e = T(4), {
+    children: o
+  } = t, r = ue(), {
+    labels: l
+  } = B(), i = r !== null;
+  let n;
+  return e[0] !== o || e[1] !== l.groupOptions || e[2] !== i ? (n = /* @__PURE__ */ d(Oe, { gate: i, ariaLabel: l.groupOptions, children: o }), e[0] = o, e[1] = l.groupOptions, e[2] = i, e[3] = n) : n = e[3], n;
+}
+function so() {
+  const t = T(6), e = N(), o = ue(), {
+    labels: r
+  } = B();
+  if (o === null)
+    return null;
+  let l;
+  t[0] !== o || t[1] !== e ? (l = () => {
+    const a = X(e).getState();
+    for (const s of xe(a))
+      a.setGroupVisibility(s.id, s.id === o);
+    for (const s of re(a, void 0))
+      a.setVisibility(s.id, !1);
+  }, t[0] = o, t[1] = e, t[2] = l) : l = t[2];
+  const i = l;
+  let n;
+  return t[3] !== r.showOnlyGroup || t[4] !== i ? (n = /* @__PURE__ */ d(q, { onClick: i, children: r.showOnlyGroup }), t[3] = r.showOnlyGroup, t[4] = i, t[5] = n) : n = t[5], n;
+}
+function ao() {
+  const t = T(5), e = N(), o = U(e, De), {
+    labels: r
+  } = B();
+  if (!o)
     return null;
-  let r;
-  e[0] !== o || e[1] !== n.layerId ? (r = () => o(n.layerId), e[0] = o, e[1] = n.layerId, e[2] = r) : r = e[2];
   let l;
-  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ s(Ye, { children: /* @__PURE__ */ s(ct, { fontSize: "small" }) }), e[3] = l) : l = e[3];
+  t[0] !== e ? (l = () => {
+    const a = X(e).getState();
+    for (const s of xe(a))
+      a.setGroupVisibility(s.id, !0);
+    for (const s of re(a, void 0))
+      a.setVisibility(s.id, !0);
+  }, t[0] = e, t[1] = l) : l = t[1];
+  const i = l;
+  let n;
+  return t[2] !== r.showAllGroups || t[3] !== i ? (n = /* @__PURE__ */ d(q, { onClick: i, children: r.showAllGroups }), t[2] = r.showAllGroups, t[3] = i, t[4] = n) : n = t[4], n;
+}
+function co() {
+  const t = T(5), e = N(), o = U(e, De), r = U(e, Me), {
+    labels: l
+  } = B();
+  if (!o)
+    return null;
+  let i;
+  t[0] !== e ? (i = () => {
+    const c = X(e).getState(), p = Me(c);
+    for (const f of xe(c))
+      c.setGroupCollapsed(f.id, !p);
+  }, t[0] = e, t[1] = i) : i = t[1];
+  const n = i, a = r ? l.expandAllGroups : l.collapseAllGroups;
+  let s;
+  return t[2] !== a || t[3] !== n ? (s = /* @__PURE__ */ d(q, { onClick: n, children: a }), t[2] = a, t[3] = n, t[4] = s) : s = t[4], s;
+}
+function uo(t) {
+  const e = T(13), {
+    onZoomTo: o
+  } = t, r = N(), l = ue(), i = qe();
+  let n;
+  e[0] !== l ? (n = (g) => l !== null && ke(g, l) === "hidden", e[0] = l, e[1] = n) : n = e[1];
+  const a = U(r, n), {
+    labels: s
+  } = B();
+  if (l === null || a)
+    return null;
+  const c = i?.busy ?? !1;
   let p;
-  return e[4] !== i.zoomTo || e[5] !== r ? (p = /* @__PURE__ */ E(Ce, { onClick: r, children: [
-    l,
-    i.zoomTo
-  ] }), e[4] = i.zoomTo, e[5] = r, e[6] = p) : p = e[6], p;
+  e[2] !== l || e[3] !== i || e[4] !== o ? (p = (g) => {
+    g.stopPropagation(), i && nt(i, () => o(l));
+  }, e[2] = l, e[3] = i, e[4] = o, e[5] = p) : p = e[5];
+  const f = p;
+  let u;
+  e[6] !== c ? (u = c && /* @__PURE__ */ d(Re, { size: 16, sx: {
+    mr: 1
+  } }), e[6] = c, e[7] = u) : u = e[7];
+  const y = c ? s.loading : s.zoomToGroup;
+  let h;
+  return e[8] !== c || e[9] !== f || e[10] !== u || e[11] !== y ? (h = /* @__PURE__ */ z(q, { disabled: c, onClick: f, children: [
+    u,
+    y
+  ] }), e[8] = c, e[9] = f, e[10] = u, e[11] = y, e[12] = h) : h = e[12], h;
 }
-const fe = {
+function po(t) {
+  const e = T(3), {
+    children: o
+  } = t, {
+    labels: r
+  } = B();
+  let l;
+  return e[0] !== o || e[1] !== r.panelOptions ? (l = /* @__PURE__ */ d(Oe, { ariaLabel: r.panelOptions, children: o }), e[0] = o, e[1] = r.panelOptions, e[2] = l) : l = e[2], l;
+}
+const ee = {
   // Tooltip wrapper around the (possibly disabled) trigger button. A plain
-  // inline span would be sized by the line box (baseline + descender) and
-  // end up ~1px taller than the 24px button inside.
+  // inline span would be sized by the line box and end up taller than the
+  // button inside.
   triggerWrap: {
     display: "inline-flex"
   },
-  popover: {
+  paper: {
+    width: 240,
+    maxHeight: 320,
+    // List padding is disabled (flush sticky header); keep a small bottom
+    // inset so the last 32px item doesn't touch the paper edge.
+    paddingBottom: 0.5
+  },
+  stickyHeader: {
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    backgroundColor: "background.paper",
+    padding: 1,
+    marginBlockEnd: 1,
+    lineHeight: "16px",
+    borderBottom: "1px solid",
+    borderColor: "divider"
+  },
+  groupCaption: {
+    display: "block",
+    padding: ({
+      spacing: t
+    }) => t(0.5, 1.5)
+  },
+  // The whole item is the hide action (keyboard-friendly); the eye is its
+  // visual affordance.
+  item: {
+    minHeight: 32,
     display: "flex",
     alignItems: "center",
-    gap: 1.5,
+    justifyContent: "space-between",
+    gap: 1,
     padding: ({
       spacing: t
-    }) => t(1, 1.5),
-    width: 280
+    }) => t(0, 1, 0, 1.5)
+  },
+  itemName: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // Design's 18px glyph — decorative (the item itself is the action).
+  eye: {
+    fontSize: 18,
+    color: "action.active",
+    flexShrink: 0
+  },
+  divider: {
+    marginY: 1
+  }
+};
+function fo(t, e) {
+  return Ee(X(t).getState());
+}
+function ho() {
+  const t = T(33), e = N(), [o, r] = J(null);
+  U(e, mo);
+  const l = fo(e), i = Z(e, yo), {
+    labels: n
+  } = B(), a = l.reduce(go, 0), s = !!o && a > 0;
+  let c;
+  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = (G) => r(G.currentTarget), t[0] = c) : c = t[0];
+  const p = c;
+  let f;
+  t[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = () => r(null), t[1] = f) : f = t[1];
+  const u = f, y = s ? "active" : void 0, h = a === 0;
+  let g;
+  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ d(Mt, { fontSize: "small" }), t[2] = g) : g = t[2];
+  let v;
+  t[3] !== n.enabledLayers || t[4] !== s || t[5] !== y || t[6] !== h ? (v = /* @__PURE__ */ d(P, { component: "span", sx: ee.triggerWrap, children: /* @__PURE__ */ d(ve, { size: "small", className: y, disabled: h, onClick: p, "aria-label": n.enabledLayers, "aria-haspopup": "menu", "aria-expanded": s, children: g }) }), t[3] = n.enabledLayers, t[4] = s, t[5] = y, t[6] = h, t[7] = v) : v = t[7];
+  let b;
+  t[8] !== n.toggleEnabledLayers || t[9] !== v ? (b = /* @__PURE__ */ d(ie, { title: n.toggleEnabledLayers, children: v }), t[8] = n.toggleEnabledLayers, t[9] = v, t[10] = b) : b = t[10];
+  const C = $e;
+  let L;
+  t[11] !== u ? (L = {
+    onExited: u
+  }, t[11] = u, t[12] = L) : L = t[12];
+  let w, x;
+  t[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = {
+    disablePadding: !0
+  }, x = {
+    paper: {
+      sx: ee.paper
+    }
+  }, t[13] = w, t[14] = x) : (w = t[13], x = t[14]);
+  const I = `${n.enabledLayers} (${a})`;
+  let S;
+  t[15] !== I ? (S = /* @__PURE__ */ d(E, { component: "div", variant: "caption", color: "text.primary", sx: ee.stickyHeader, children: I }), t[15] = I, t[16] = S) : S = t[16];
+  let O;
+  t[17] !== n.hideLayer || t[18] !== i ? (O = (G, m) => [m > 0 ? /* @__PURE__ */ d(Ct, { sx: ee.divider }, `divider-${G.group?.id ?? "ungrouped"}`) : null, G.group ? /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.secondary", sx: ee.groupCaption, children: G.group.label }, `caption-${G.group.id}`) : null, ...G.layers.map((M) => /* @__PURE__ */ z(q, { disableRipple: !0, sx: ee.item, onClick: () => i(M.id, !1), children: [
+    /* @__PURE__ */ d(E, { variant: "body2", sx: ee.itemName, children: M.name }),
+    /* @__PURE__ */ d(ie, { title: n.hideLayer, children: /* @__PURE__ */ d(Be, { sx: ee.eye }) })
+  ] }, M.id))], t[17] = n.hideLayer, t[18] = i, t[19] = O) : O = t[19];
+  const k = l.flatMap(O);
+  let $;
+  t[20] !== C || t[21] !== o || t[22] !== u || t[23] !== s || t[24] !== S || t[25] !== k || t[26] !== L || t[27] !== w || t[28] !== x ? ($ = /* @__PURE__ */ z(C, { anchorEl: o, open: s, onClose: u, TransitionProps: L, MenuListProps: w, slotProps: x, children: [
+    S,
+    k
+  ] }), t[20] = C, t[21] = o, t[22] = u, t[23] = s, t[24] = S, t[25] = k, t[26] = L, t[27] = w, t[28] = x, t[29] = $) : $ = t[29];
+  let _;
+  return t[30] !== $ || t[31] !== b ? (_ = /* @__PURE__ */ z(he, { children: [
+    b,
+    $
+  ] }), t[30] = $, t[31] = b, t[32] = _) : _ = t[32], _;
+}
+function go(t, e) {
+  return t + e.layers.length;
+}
+function yo(t) {
+  return t.setVisibility;
+}
+function mo(t) {
+  return Ee(t).map(bo).join("|");
+}
+function bo(t) {
+  const {
+    group: e,
+    layers: o
+  } = t;
+  return `${e?.id ?? ""}${e?.label ?? ""}:${o.map(xo).join(",")}`;
+}
+function xo(t) {
+  return `${t.id}${t.name}`;
+}
+function vo(t) {
+  const e = T(27), {
+    children: o
+  } = t, r = N(), [l, i] = J(null), n = Te(void 0), a = Z(r, Lo);
+  let s;
+  e[0] !== r ? (s = (k, $) => {
+    const _ = de(k), G = de($);
+    return !_ || G?.kind !== _.kind ? !1 : _.kind === "layer" ? X(r).getState().layers[G.id]?.groupId === n.current : !0;
+  }, e[0] = r, e[1] = s) : s = e[1];
+  const c = s;
+  let p;
+  e[2] !== c ? (p = (k, $) => {
+    const {
+      context: _
+    } = $, {
+      active: G,
+      collisionRect: m,
+      droppableRects: M,
+      droppableContainers: A
+    } = _;
+    if (!G || !m || k.code !== "ArrowDown" && k.code !== "ArrowUp")
+      return;
+    k.preventDefault();
+    const D = k.code === "ArrowDown", W = A.getEnabled().filter((R) => R.id !== G.id && c(String(G.id), String(R.id))).flatMap((R) => {
+      const H = M.get(R.id);
+      return H ? [H] : [];
+    }).filter((R) => D ? R.top > m.top : R.top < m.top).sort((R, H) => D ? R.top - H.top : H.top - R.top)[0];
+    return W ? {
+      x: W.left,
+      y: W.top
+    } : void 0;
+  }, e[2] = c, e[3] = p) : p = e[3];
+  const f = p;
+  let u;
+  e[4] !== f ? (u = {
+    coordinateGetter: f
+  }, e[4] = f, e[5] = u) : u = e[5];
+  const y = Et(Pe(Ht), Pe(Rt, u));
+  let h;
+  e[6] !== c ? (h = (k) => {
+    const $ = k.droppableContainers.filter((_) => c(String(k.active.id), String(_.id)));
+    return Bt({
+      ...k,
+      droppableContainers: $
+    });
+  }, e[6] = c, e[7] = h) : h = e[7];
+  const g = h;
+  let v;
+  e[8] !== r ? (v = (k) => {
+    const $ = String(k.active.id);
+    i($);
+    const _ = de($);
+    n.current = _?.kind === "layer" ? X(r).getState().layers[_.id]?.groupId : void 0;
+  }, e[8] = r, e[9] = v) : v = e[9];
+  const b = v;
+  let C;
+  e[10] !== r ? (C = (k) => {
+    i(null);
+    const {
+      active: $,
+      over: _
+    } = k;
+    if (!_ || $.id === _.id)
+      return;
+    const G = de(String($.id)), m = de(String(_.id));
+    if (!G || G.kind !== m?.kind)
+      return;
+    const M = X(r).getState();
+    if (G.kind === "group") {
+      const R = xe(M).findIndex((H) => H.id === m.id);
+      R !== -1 && M.moveGroup(G.id, R);
+      return;
+    }
+    const A = M.layers[G.id], D = M.layers[m.id];
+    if (!A || !D || A.groupId !== D.groupId)
+      return;
+    const W = re(M, A.groupId).findIndex((R) => R.id === m.id);
+    W !== -1 && M.moveLayer(G.id, W);
+  }, e[10] = r, e[11] = C) : C = e[11];
+  const L = C;
+  let w;
+  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = () => i(null), e[12] = w) : w = e[12];
+  let x;
+  e[13] !== o || e[14] !== a ? (x = /* @__PURE__ */ d(We, { items: a, strategy: Ne, children: o }), e[13] = o, e[14] = a, e[15] = x) : x = e[15];
+  let I;
+  e[16] !== l ? (I = l && /* @__PURE__ */ d(wo, { activeId: l }), e[16] = l, e[17] = I) : I = e[17];
+  let S;
+  e[18] !== I ? (S = /* @__PURE__ */ d(Wt, { children: I }), e[18] = I, e[19] = S) : S = e[19];
+  let O;
+  return e[20] !== g || e[21] !== L || e[22] !== b || e[23] !== y || e[24] !== S || e[25] !== x ? (O = /* @__PURE__ */ d(Je.Provider, { value: !0, children: /* @__PURE__ */ z(Vt, { sensors: y, collisionDetection: g, onDragStart: b, onDragEnd: L, onDragCancel: w, children: [
+    x,
+    S
+  ] }) }), e[20] = g, e[21] = L, e[22] = b, e[23] = y, e[24] = S, e[25] = x, e[26] = O) : O = e[26], O;
+}
+function Lo(t) {
+  return [...xe(t).map(Co), ...re(t, void 0).map(So)];
+}
+function So(t) {
+  return Se("layer", t.id);
+}
+function Co(t) {
+  return Se("group", t.id);
+}
+function wo(t) {
+  const e = T(15), {
+    activeId: o
+  } = t, r = N();
+  let l;
+  e[0] !== o ? (l = de(o), e[0] = o, e[1] = l) : l = e[1];
+  const i = l;
+  let n;
+  e[2] !== i ? (n = (h) => i ? i.kind === "group" ? h.groups[i.id]?.label : h.layers[i.id]?.name : void 0, e[2] = i, e[3] = n) : n = e[3];
+  const a = U(r, n);
+  let s;
+  e[4] !== i ? (s = (h) => i?.kind === "group" ? h.groups[i.id]?.icon : void 0, e[4] = i, e[5] = s) : s = e[5];
+  const c = U(r, s);
+  if (!i || a === void 0)
+    return null;
+  let p;
+  e[6] !== c || e[7] !== i.kind ? (p = i.kind === "group" && c != null && /* @__PURE__ */ d(P, { sx: le.overlayIcon, children: c }), e[6] = c, e[7] = i.kind, e[8] = p) : p = e[8];
+  const f = i.kind === "group" ? "bold" : void 0;
+  let u;
+  e[9] !== a || e[10] !== f ? (u = /* @__PURE__ */ d(E, { variant: "button", fontWeight: f, color: "text.primary", sx: le.overlayLabel, children: a }), e[9] = a, e[10] = f, e[11] = u) : u = e[11];
+  let y;
+  return e[12] !== p || e[13] !== u ? (y = /* @__PURE__ */ z(P, { sx: le.overlay, children: [
+    p,
+    u
+  ] }), e[12] = p, e[13] = u, e[14] = y) : y = e[14], y;
+}
+const pe = {
+  // Figma "Legend Opacity": a soft rounded bar between the row header and the
+  // body — caption label + ✕ on the first line, slider + % input below.
+  inline: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+    borderRadius: 1
+  },
+  inlineHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  inlineControls: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5
   },
   slider: {
     flex: 1
   },
   // Wide enough for "100 %" — the value must never ellipsize.
   input: {
-    width: 76,
+    width: 68,
     flexShrink: 0,
     "& input": {
       textAlign: "right"
     }
   }
-}, xe = (t) => Math.min(100, Math.max(0, Math.round(t)));
-function zt() {
-  const t = R(16), e = ee(), o = te(), n = o?.layerId;
-  let i;
-  t[0] !== n ? (i = (y) => n ? y.layers[n]?.opacity ?? 1 : 1, t[0] = n, t[1] = i) : i = t[1];
-  const r = X(e, i);
-  let l;
-  t[2] !== n ? (l = (y) => n ? y.layers[n]?.visible ?? !0 : !0, t[2] = n, t[3] = l) : l = t[3];
-  const p = X(e, l), {
-    labels: a
-  } = K();
-  if (!o || !p)
+}, ze = (t) => Math.min(100, Math.max(0, Math.round(t)));
+function Io() {
+  const t = T(10), e = N(), o = Q();
+  let r;
+  t[0] !== o ? (r = (p) => o ? p.layers[o.layerId] : void 0, t[0] = o, t[1] = r) : r = t[1];
+  const l = Z(e, r), i = Z(e, ko), {
+    labels: n
+  } = B();
+  if (!o || !l?.visible || !l.opacityControl)
     return null;
-  const f = r !== 1 || o.opacityOpen ? "active" : void 0;
-  let m;
-  t[4] !== o ? (m = () => o.setOpacityOpen(!0), t[4] = o, t[5] = m) : m = t[5];
+  let a;
+  t[2] !== l || t[3] !== o || t[4] !== i ? (a = () => {
+    const p = !o.opacityOpen;
+    o.setOpacityOpen(p), p && l.collapsed && i(o.layerId, !1);
+  }, t[2] = l, t[3] = o, t[4] = i, t[5] = a) : a = t[5];
+  const s = a;
   let c;
-  t[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ s(ft, { fontSize: "small" }), t[6] = c) : c = t[6];
-  let g;
-  t[7] !== a.opacity || t[8] !== m ? (g = /* @__PURE__ */ s(de, { size: "small", onClick: m, "aria-label": a.opacity, children: c }), t[7] = a.opacity, t[8] = m, t[9] = g) : g = t[9];
-  let u;
-  t[10] !== f || t[11] !== g ? (u = /* @__PURE__ */ s(P, { component: "span", className: f, sx: fe.triggerWrap, children: g }), t[10] = f, t[11] = g, t[12] = u) : u = t[12];
-  let h;
-  return t[13] !== a.opacity || t[14] !== u ? (h = /* @__PURE__ */ s(we, { title: a.opacity, children: u }), t[13] = a.opacity, t[14] = u, t[15] = h) : h = t[15], h;
+  return t[6] !== n.opacity || t[7] !== o.opacityOpen || t[8] !== s ? (c = /* @__PURE__ */ d(q, { selected: o.opacityOpen, onClick: s, children: n.opacity }), t[6] = n.opacity, t[7] = o.opacityOpen, t[8] = s, t[9] = c) : c = t[9], c;
 }
-function _t() {
-  const t = R(44), e = ee(), o = te(), n = o?.layerId;
-  let i;
-  t[0] !== n ? (i = (H) => n ? H.layers[n]?.opacity ?? 1 : 1, t[0] = n, t[1] = i) : i = t[1];
-  const r = X(e, i);
+function ko(t) {
+  return t.setCollapsed;
+}
+function $o() {
+  const t = T(47), e = N(), o = Q(), r = o?.layerId;
   let l;
-  t[2] !== n ? (l = (H) => n ? H.layers[n]?.visible ?? !0 : !0, t[2] = n, t[3] = l) : l = t[3];
-  const p = X(e, l), a = X(e, Mt), {
-    labels: d
-  } = K(), [f, m] = oe(null), [c, g] = oe(null);
-  if (!o || !n || !p)
+  t[0] !== r ? (l = (H) => r ? H.layers[r]?.opacity ?? 1 : 1, t[0] = r, t[1] = l) : l = t[1];
+  const i = U(e, l), n = U(e, _o), {
+    labels: a
+  } = B(), [s, c] = J(null), [p, f] = J(null);
+  if (!o || !r || !o.opacityOpen)
     return null;
   let u;
-  t[4] !== f || t[5] !== r ? (u = f ?? xe(r * 100), t[4] = f, t[5] = r, t[6] = u) : u = t[6];
-  const h = u;
-  let y;
-  t[7] !== n || t[8] !== a ? (y = (H) => {
-    const G = xe(H);
-    return a(n, G / 100), G;
-  }, t[7] = n, t[8] = a, t[9] = y) : y = t[9];
-  const x = y;
-  let b;
-  t[10] !== x ? (b = (H) => {
-    if (g(H), H.trim() === "")
+  t[2] !== s || t[3] !== i ? (u = s ?? ze(i * 100), t[2] = s, t[3] = i, t[4] = u) : u = t[4];
+  const y = u;
+  let h;
+  t[5] !== r || t[6] !== n ? (h = (H) => {
+    const F = ze(H);
+    return n(r, F / 100), F;
+  }, t[5] = r, t[6] = n, t[7] = h) : h = t[7];
+  const g = h;
+  let v;
+  t[8] !== g ? (v = (H) => {
+    if (f(H), H.trim() === "")
       return;
-    const G = Number(H);
-    if (!Number.isFinite(G))
+    const F = Number(H);
+    if (!Number.isFinite(F))
       return;
-    const j = x(G);
-    j !== G && g(String(j));
-  }, t[10] = x, t[11] = b) : b = t[11];
-  const v = b;
-  let L;
-  t[12] !== o ? (L = () => {
-    o.setOpacityOpen(!1), g(null), m(null);
-  }, t[12] = o, t[13] = L) : L = t[13];
-  const w = L, k = o.opacityOpen && !!o.headerEl;
-  let C, S;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
-    vertical: "bottom",
-    horizontal: "left"
-  }, S = {
-    vertical: "top",
-    horizontal: "left"
-  }, t[14] = C, t[15] = S) : (C = t[14], S = t[15]);
-  const z = o.headerEl?.clientWidth;
-  let $;
-  t[16] !== z ? ($ = {
-    paper: {
-      sx: {
-        width: z
-      }
-    }
-  }, t[16] = z, t[17] = $) : $ = t[17];
-  let M;
-  t[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = (H, G) => {
-    m(G), g(null);
-  }, t[18] = M) : M = t[18];
+    const se = g(F);
+    se !== F && f(String(se));
+  }, t[8] = g, t[9] = v) : v = t[9];
+  const b = v;
+  let C;
+  t[10] !== o ? (C = () => {
+    o.setOpacityOpen(!1), f(null), c(null);
+  }, t[10] = o, t[11] = C) : C = t[11];
+  const L = C;
+  let w;
+  t[12] !== a.opacity ? (w = /* @__PURE__ */ d(E, { variant: "caption", fontWeight: "medium", color: "text.primary", children: a.opacity }), t[12] = a.opacity, t[13] = w) : w = t[13];
+  let x;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ d(Pt, { fontSize: "small" }), t[14] = x) : x = t[14];
   let I;
-  t[19] !== x ? (I = (H, G) => {
-    x(G), m(null);
-  }, t[19] = x, t[20] = I) : I = t[20];
+  t[15] !== L || t[16] !== a.close ? (I = /* @__PURE__ */ d(ve, { size: "small", onClick: L, "aria-label": a.close, children: x }), t[15] = L, t[16] = a.close, t[17] = I) : I = t[17];
+  let S;
+  t[18] !== a.close || t[19] !== I ? (S = /* @__PURE__ */ d(ie, { title: a.close, children: I }), t[18] = a.close, t[19] = I, t[20] = S) : S = t[20];
+  let O;
+  t[21] !== w || t[22] !== S ? (O = /* @__PURE__ */ z(P, { sx: pe.inlineHeader, children: [
+    w,
+    S
+  ] }), t[21] = w, t[22] = S, t[23] = O) : O = t[23];
+  let k;
+  t[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = (H, F) => {
+    c(F), f(null);
+  }, t[24] = k) : k = t[24];
+  let $;
+  t[25] !== g ? ($ = (H, F) => {
+    g(F), c(null);
+  }, t[25] = g, t[26] = $) : $ = t[26];
   let _;
-  t[21] !== d.opacity || t[22] !== h || t[23] !== I ? (_ = /* @__PURE__ */ s(et, { size: "small", min: 0, max: 100, step: 1, value: h, onChange: M, onChangeCommitted: I, "aria-label": d.opacity, sx: fe.slider }), t[21] = d.opacity, t[22] = h, t[23] = I, t[24] = _) : _ = t[24];
-  const O = c ?? String(h);
-  let T;
-  t[25] !== v ? (T = (H) => v(H.target.value), t[25] = v, t[26] = T) : T = t[26];
-  let D;
-  t[27] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = () => g(null), t[27] = D) : D = t[27];
-  let N;
-  t[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ s(lt, { position: "end", children: "%" }), t[28] = N) : N = t[28];
+  t[27] !== a.opacity || t[28] !== y || t[29] !== $ ? (_ = /* @__PURE__ */ d(wt, { size: "small", min: 0, max: 100, step: 1, value: y, onChange: k, onChangeCommitted: $, "aria-label": a.opacity, sx: pe.slider }), t[27] = a.opacity, t[28] = y, t[29] = $, t[30] = _) : _ = t[30];
+  const G = p ?? String(y);
+  let m;
+  t[31] !== b ? (m = (H) => b(H.target.value), t[31] = b, t[32] = m) : m = t[32];
+  let M;
+  t[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = () => f(null), t[33] = M) : M = t[33];
   let A;
-  t[29] !== d.opacity ? (A = {
+  t[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ d(It, { position: "end", children: "%" }), t[34] = A) : A = t[34];
+  let D;
+  t[35] !== a.opacity ? (D = {
     inputMode: "numeric",
-    "aria-label": d.opacity
-  }, t[29] = d.opacity, t[30] = A) : A = t[30];
-  let F;
-  t[31] !== O || t[32] !== T || t[33] !== A ? (F = /* @__PURE__ */ s(ot, { size: "small", value: O, onChange: T, onBlur: D, onKeyDown: Pt, endAdornment: N, inputProps: A, sx: fe.input }), t[31] = O, t[32] = T, t[33] = A, t[34] = F) : F = t[34];
-  let B;
-  t[35] !== _ || t[36] !== F ? (B = /* @__PURE__ */ E(P, { sx: fe.popover, children: [
-    _,
-    F
-  ] }), t[35] = _, t[36] = F, t[37] = B) : B = t[37];
+    "aria-label": a.opacity
+  }, t[35] = a.opacity, t[36] = D) : D = t[36];
+  let V;
+  t[37] !== G || t[38] !== m || t[39] !== D ? (V = /* @__PURE__ */ d(kt, { size: "small", value: G, onChange: m, onBlur: M, onKeyDown: Oo, endAdornment: A, inputProps: D, sx: pe.input }), t[37] = G, t[38] = m, t[39] = D, t[40] = V) : V = t[40];
   let W;
-  return t[38] !== w || t[39] !== o.headerEl || t[40] !== $ || t[41] !== B || t[42] !== k ? (W = /* @__PURE__ */ s(tt, { open: k, anchorEl: o.headerEl, onClose: w, anchorOrigin: C, transformOrigin: S, slotProps: $, children: B }), t[38] = w, t[39] = o.headerEl, t[40] = $, t[41] = B, t[42] = k, t[43] = W) : W = t[43], W;
+  t[41] !== _ || t[42] !== V ? (W = /* @__PURE__ */ z(P, { sx: pe.inlineControls, children: [
+    _,
+    V
+  ] }), t[41] = _, t[42] = V, t[43] = W) : W = t[43];
+  let R;
+  return t[44] !== W || t[45] !== O ? (R = /* @__PURE__ */ z(P, { sx: pe.inline, children: [
+    O,
+    W
+  ] }), t[44] = W, t[45] = O, t[46] = R) : R = t[46], R;
 }
-function Pt(t) {
+function Oo(t) {
   t.key === "Enter" && t.target.blur();
 }
-function Mt(t) {
+function _o(t) {
   return t.setOpacity;
 }
-const Ot = {
-  Trigger: zt,
-  Popover: _t
-}, le = {
+const Go = {
+  Item: Io,
+  Inline: $o
+}, ne = {
   // Outlined-input look-alike trigger (the design's select has no floating
   // label — just the value + chevron in a 32px bordered field).
   trigger: {
@@ -764,63 +1441,63 @@ const Ot = {
     }
   }
 };
-function Tt() {
-  const t = R(34), e = ee(), n = te()?.layerId;
-  let i;
-  t[0] !== n ? (i = (S) => n ? S.layers[n]?.sections : void 0, t[0] = n, t[1] = i) : i = t[1];
-  const r = Y(e, i), l = Y(e, Et), {
-    labels: p
-  } = K(), [a, d] = oe(null), f = !!a;
-  if (!n || !r || r.length === 0)
+function Mo() {
+  const t = T(34), e = N(), r = Q()?.layerId;
+  let l;
+  t[0] !== r ? (l = (O) => r ? O.layers[r]?.sections : void 0, t[0] = r, t[1] = l) : l = t[1];
+  const i = Z(e, l), n = Z(e, Po), {
+    labels: a
+  } = B(), [s, c] = J(null), p = !!s;
+  if (!r || !i || i.length === 0)
     return null;
-  const m = r[0].active, c = r.length > 1;
-  let g;
-  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = (S) => d(S.currentTarget), t[2] = g) : g = t[2];
-  let u;
-  t[3] !== m ? (u = /* @__PURE__ */ s(V, { variant: "body2", sx: le.value, children: m }), t[3] = m, t[4] = u) : u = t[4];
-  let h;
-  t[5] !== f ? (h = f ? {
-    ...le.chevron,
-    ...le.chevronOpen
-  } : le.chevron, t[5] = f, t[6] = h) : h = t[6];
+  const f = i[0].active, u = i.length > 1;
   let y;
-  t[7] !== h ? (y = /* @__PURE__ */ s(dt, { fontSize: "small", sx: h }), t[7] = h, t[8] = y) : y = t[8];
-  let x;
-  t[9] !== p.attribute || t[10] !== f || t[11] !== u || t[12] !== y ? (x = /* @__PURE__ */ E(nt, { sx: le.trigger, onClick: g, "aria-label": p.attribute, "aria-haspopup": "listbox", "aria-expanded": f, children: [
-    u,
-    y
-  ] }), t[9] = p.attribute, t[10] = f, t[11] = u, t[12] = y, t[13] = x) : x = t[13];
+  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = (O) => c(O.currentTarget), t[2] = y) : y = t[2];
+  let h;
+  t[3] !== f ? (h = /* @__PURE__ */ d(E, { variant: "body2", sx: ne.value, children: f }), t[3] = f, t[4] = h) : h = t[4];
+  let g;
+  t[5] !== p ? (g = p ? {
+    ...ne.chevron,
+    ...ne.chevronOpen
+  } : ne.chevron, t[5] = p, t[6] = g) : g = t[6];
+  let v;
+  t[7] !== g ? (v = /* @__PURE__ */ d(zt, { fontSize: "small", sx: g }), t[7] = g, t[8] = v) : v = t[8];
   let b;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = () => d(null), t[14] = b) : b = t[14];
-  const v = a?.clientWidth;
-  let L;
-  t[15] !== v ? (L = {
+  t[9] !== a.attribute || t[10] !== p || t[11] !== h || t[12] !== v ? (b = /* @__PURE__ */ z($t, { sx: ne.trigger, onClick: y, "aria-label": a.attribute, "aria-haspopup": "listbox", "aria-expanded": p, children: [
+    h,
+    v
+  ] }), t[9] = a.attribute, t[10] = p, t[11] = h, t[12] = v, t[13] = b) : b = t[13];
+  let C;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = () => c(null), t[14] = C) : C = t[14];
+  const L = s?.clientWidth;
+  let w;
+  t[15] !== L ? (w = {
     paper: {
       sx: {
-        width: v
+        width: L
       }
     }
-  }, t[15] = v, t[16] = L) : L = t[16];
-  let w;
-  if (t[17] !== n || t[18] !== r || t[19] !== l || t[20] !== c) {
-    let S;
-    t[22] !== n || t[23] !== l || t[24] !== c ? (S = (z) => [c && z.title ? /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", component: "li", sx: le.sectionTitle, children: z.title }, `${z.id}-title`) : null, ...z.options.map(($) => /* @__PURE__ */ s(Ce, { selected: $ === z.active, sx: le.option, onClick: () => {
-      l(n, z.id, $), d(null);
-    }, children: $ }, `${z.id}-${$}`))], t[22] = n, t[23] = l, t[24] = c, t[25] = S) : S = t[25], w = r.map(S), t[17] = n, t[18] = r, t[19] = l, t[20] = c, t[21] = w;
+  }, t[15] = L, t[16] = w) : w = t[16];
+  let x;
+  if (t[17] !== r || t[18] !== i || t[19] !== n || t[20] !== u) {
+    let O;
+    t[22] !== r || t[23] !== n || t[24] !== u ? (O = (k) => [u && k.title ? /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", component: "li", sx: ne.sectionTitle, children: k.title }, `${k.id}-title`) : null, ...k.options.map(($) => /* @__PURE__ */ d(q, { selected: $ === k.active, sx: ne.option, onClick: () => {
+      n(r, k.id, $), c(null);
+    }, children: $ }, `${k.id}-${$}`))], t[22] = r, t[23] = n, t[24] = u, t[25] = O) : O = t[25], x = i.map(O), t[17] = r, t[18] = i, t[19] = n, t[20] = u, t[21] = x;
   } else
-    w = t[21];
-  let k;
-  t[26] !== a || t[27] !== f || t[28] !== L || t[29] !== w ? (k = /* @__PURE__ */ s(Le, { anchorEl: a, open: f, onClose: b, slotProps: L, children: w }), t[26] = a, t[27] = f, t[28] = L, t[29] = w, t[30] = k) : k = t[30];
-  let C;
-  return t[31] !== k || t[32] !== x ? (C = /* @__PURE__ */ E(se, { children: [
-    x,
-    k
-  ] }), t[31] = k, t[32] = x, t[33] = C) : C = t[33], C;
+    x = t[21];
+  let I;
+  t[26] !== s || t[27] !== p || t[28] !== w || t[29] !== x ? (I = /* @__PURE__ */ d($e, { anchorEl: s, open: p, onClose: C, slotProps: w, children: x }), t[26] = s, t[27] = p, t[28] = w, t[29] = x, t[30] = I) : I = t[30];
+  let S;
+  return t[31] !== I || t[32] !== b ? (S = /* @__PURE__ */ z(he, { children: [
+    b,
+    I
+  ] }), t[31] = I, t[32] = b, t[33] = S) : S = t[33], S;
 }
-function Et(t) {
+function Po(t) {
   return t.setSectionValue;
 }
-const J = {
+const te = {
   list: {
     display: "flex",
     flexDirection: "column",
@@ -880,8 +1557,8 @@ const J = {
     overflow: "visible",
     textOverflow: "clip"
   }
-}, ge = 12, ce = 1.5, Te = 2, Ht = 1;
-function Dt(t) {
+}, _e = 12, ye = 1.5, lt = 2, zo = 1;
+function Ao(t) {
   switch (t) {
     case "dashed":
       return {
@@ -889,7 +1566,7 @@ function Dt(t) {
       };
     case "dotted":
       return {
-        dash: `0.1 ${ce * 2}`,
+        dash: `0.1 ${ye * 2}`,
         round: !0
       };
     // `dash-dot` is line-only and `corners` is handled separately: both
@@ -898,7 +1575,7 @@ function Dt(t) {
       return {};
   }
 }
-function Gt(t) {
+function To(t) {
   switch (t) {
     case "dashed":
       return {
@@ -906,7 +1583,7 @@ function Gt(t) {
       };
     case "dotted":
       return {
-        dash: `0.1 ${Te * 2}`,
+        dash: `0.1 ${lt * 2}`,
         round: !0
       };
     case "dash-dot":
@@ -919,8 +1596,8 @@ function Gt(t) {
       return {};
   }
 }
-function Vt(t, e) {
-  const o = (n) => /* @__PURE__ */ s("path", { d: n, stroke: e, strokeWidth: 1.2, fill: "none" });
+function Do(t, e) {
+  const o = (r) => /* @__PURE__ */ d("path", { d: r, stroke: e, strokeWidth: 1.2, fill: "none" });
   switch (t) {
     case "horizontal":
       return {
@@ -950,156 +1627,156 @@ function Vt(t, e) {
     case "dots":
       return {
         size: 4,
-        content: /* @__PURE__ */ s("circle", { cx: 2, cy: 2, r: 0.9, fill: e })
+        content: /* @__PURE__ */ d("circle", { cx: 2, cy: 2, r: 0.9, fill: e })
       };
     case "grid":
       return {
         size: 3,
-        content: /* @__PURE__ */ s("circle", { cx: 1.5, cy: 1.5, r: 0.7, fill: e })
+        content: /* @__PURE__ */ d("circle", { cx: 1.5, cy: 1.5, r: 0.7, fill: e })
       };
     default:
       return null;
   }
 }
-function Ee(t) {
-  const e = R(46), {
+function it(t) {
+  const e = T(46), {
     shape: o,
-    color: n,
-    isStrokeColor: i,
-    fillPattern: r,
-    strokeStyle: l,
-    size: p
-  } = t, a = o === void 0 ? "circle" : o, d = i === void 0 ? !1 : i, f = r === void 0 ? "solid" : r, m = l === void 0 ? "solid" : l, c = p === void 0 ? ge : p, g = Fe();
-  if (a === "line") {
-    let N;
-    e[0] !== m ? (N = Gt(m), e[0] = m, e[1] = N) : N = e[1];
+    color: r,
+    isStrokeColor: l,
+    fillPattern: i,
+    strokeStyle: n,
+    size: a
+  } = t, s = o === void 0 ? "circle" : o, c = l === void 0 ? !1 : l, p = i === void 0 ? "solid" : i, f = n === void 0 ? "solid" : n, u = a === void 0 ? _e : a, y = ht();
+  if (s === "line") {
+    let V;
+    e[0] !== f ? (V = To(f), e[0] = f, e[1] = V) : V = e[1];
     const {
-      dash: A,
-      round: F
-    } = N, B = `0 0 ${c} ${c}`;
-    let W;
-    e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (W = {
+      dash: W,
+      round: R
+    } = V, H = `0 0 ${u} ${u}`;
+    let F;
+    e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (F = {
       display: "block",
       overflow: "visible"
-    }, e[2] = W) : W = e[2];
-    const H = c / 2, G = c / 2, j = F ? "round" : "butt";
-    let q;
-    e[3] !== n || e[4] !== A || e[5] !== c || e[6] !== G || e[7] !== j || e[8] !== H ? (q = /* @__PURE__ */ s("line", { x1: 0, y1: H, x2: c, y2: G, stroke: n, strokeWidth: Te, strokeDasharray: A, strokeLinecap: j }), e[3] = n, e[4] = A, e[5] = c, e[6] = G, e[7] = j, e[8] = H, e[9] = q) : q = e[9];
-    let pe;
-    return e[10] !== c || e[11] !== q || e[12] !== B ? (pe = /* @__PURE__ */ s("svg", { width: c, height: c, viewBox: B, "aria-hidden": !0, "data-shape": "line", style: W, children: q }), e[10] = c, e[11] = q, e[12] = B, e[13] = pe) : pe = e[13], pe;
+    }, e[2] = F) : F = e[2];
+    const se = u / 2, Ce = u / 2, we = R ? "round" : "butt";
+    let ae;
+    e[3] !== r || e[4] !== W || e[5] !== u || e[6] !== Ce || e[7] !== we || e[8] !== se ? (ae = /* @__PURE__ */ d("line", { x1: 0, y1: se, x2: u, y2: Ce, stroke: r, strokeWidth: lt, strokeDasharray: W, strokeLinecap: we }), e[3] = r, e[4] = W, e[5] = u, e[6] = Ce, e[7] = we, e[8] = se, e[9] = ae) : ae = e[9];
+    let Le;
+    return e[10] !== u || e[11] !== ae || e[12] !== H ? (Le = /* @__PURE__ */ d("svg", { width: u, height: u, viewBox: H, "aria-hidden": !0, "data-shape": "line", style: F, children: ae }), e[10] = u, e[11] = ae, e[12] = H, e[13] = Le) : Le = e[13], Le;
   }
-  const u = d ? ce / 2 : 0, h = !d && f !== "solid";
-  let y;
-  e[14] !== n || e[15] !== f || e[16] !== h ? (y = h ? Vt(f, n) : null, e[14] = n, e[15] = f, e[16] = h, e[17] = y) : y = e[17];
-  const x = y, b = d && m === "corners" && a === "square";
+  const h = c ? ye / 2 : 0, g = !c && p !== "solid";
   let v;
-  e[18] !== d || e[19] !== m ? (v = d ? Dt(m) : {
+  e[14] !== r || e[15] !== p || e[16] !== g ? (v = g ? Do(p, r) : null, e[14] = r, e[15] = p, e[16] = g, e[17] = v) : v = e[17];
+  const b = v, C = c && f === "corners" && s === "square";
+  let L;
+  e[18] !== c || e[19] !== f ? (L = c ? Ao(f) : {
     dash: void 0,
     round: !1
-  }, e[18] = d, e[19] = m, e[20] = v) : v = e[20];
+  }, e[18] = c, e[19] = f, e[20] = L) : L = e[20];
   const {
-    dash: L,
-    round: w
-  } = v, k = d ? ce : Ht, C = d ? L : void 0, S = w ? "round" : "butt";
-  let z;
-  e[21] !== n || e[22] !== S || e[23] !== k || e[24] !== C ? (z = {
-    stroke: n,
-    strokeWidth: k,
-    strokeDasharray: C,
-    strokeLinecap: S
-  }, e[21] = n, e[22] = S, e[23] = k, e[24] = C, e[25] = z) : z = e[25];
-  const $ = z, M = d ? "none" : h ? `url(#${g})` : n, I = `0 0 ${c} ${c}`;
-  let _;
-  e[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = {
+    dash: w,
+    round: x
+  } = L, I = c ? ye : zo, S = c ? w : void 0, O = x ? "round" : "butt";
+  let k;
+  e[21] !== r || e[22] !== O || e[23] !== I || e[24] !== S ? (k = {
+    stroke: r,
+    strokeWidth: I,
+    strokeDasharray: S,
+    strokeLinecap: O
+  }, e[21] = r, e[22] = O, e[23] = I, e[24] = S, e[25] = k) : k = e[25];
+  const $ = k, _ = c ? "none" : g ? `url(#${y})` : r, G = `0 0 ${u} ${u}`;
+  let m;
+  e[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = {
     display: "block"
-  }, e[26] = _) : _ = e[26];
-  let O;
-  e[27] !== g || e[28] !== x ? (O = x && /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ s("pattern", { id: g, patternUnits: "userSpaceOnUse", width: x.size, height: x.size, children: x.content }) }), e[27] = g, e[28] = x, e[29] = O) : O = e[29];
-  let T;
-  e[30] !== n || e[31] !== $ || e[32] !== M || e[33] !== u || e[34] !== b || e[35] !== d || e[36] !== a || e[37] !== c || e[38] !== h ? (T = b ? /* @__PURE__ */ s(Rt, { size: c, color: n }) : a === "circle" ? /* @__PURE__ */ s("circle", { cx: c / 2, cy: c / 2, r: c / 2 - u, fill: M, ...$, stroke: d || h ? n : "none" }) : /* @__PURE__ */ s("rect", { x: u, y: u, width: c - u * 2, height: c - u * 2, fill: M, ...$, stroke: d || h ? n : "none" }), e[30] = n, e[31] = $, e[32] = M, e[33] = u, e[34] = b, e[35] = d, e[36] = a, e[37] = c, e[38] = h, e[39] = T) : T = e[39];
+  }, e[26] = m) : m = e[26];
+  let M;
+  e[27] !== y || e[28] !== b ? (M = b && /* @__PURE__ */ d("defs", { children: /* @__PURE__ */ d("pattern", { id: y, patternUnits: "userSpaceOnUse", width: b.size, height: b.size, children: b.content }) }), e[27] = y, e[28] = b, e[29] = M) : M = e[29];
+  let A;
+  e[30] !== r || e[31] !== $ || e[32] !== _ || e[33] !== h || e[34] !== C || e[35] !== c || e[36] !== s || e[37] !== u || e[38] !== g ? (A = C ? /* @__PURE__ */ d(Eo, { size: u, color: r }) : s === "circle" ? /* @__PURE__ */ d("circle", { cx: u / 2, cy: u / 2, r: u / 2 - h, fill: _, ...$, stroke: c || g ? r : "none" }) : /* @__PURE__ */ d("rect", { x: h, y: h, width: u - h * 2, height: u - h * 2, fill: _, ...$, stroke: c || g ? r : "none" }), e[30] = r, e[31] = $, e[32] = _, e[33] = h, e[34] = C, e[35] = c, e[36] = s, e[37] = u, e[38] = g, e[39] = A) : A = e[39];
   let D;
-  return e[40] !== a || e[41] !== c || e[42] !== I || e[43] !== O || e[44] !== T ? (D = /* @__PURE__ */ E("svg", { width: c, height: c, viewBox: I, "aria-hidden": !0, "data-shape": a, style: _, children: [
-    O,
-    T
-  ] }), e[40] = a, e[41] = c, e[42] = I, e[43] = O, e[44] = T, e[45] = D) : D = e[45], D;
+  return e[40] !== s || e[41] !== u || e[42] !== G || e[43] !== M || e[44] !== A ? (D = /* @__PURE__ */ z("svg", { width: u, height: u, viewBox: G, "aria-hidden": !0, "data-shape": s, style: m, children: [
+    M,
+    A
+  ] }), e[40] = s, e[41] = u, e[42] = G, e[43] = M, e[44] = A, e[45] = D) : D = e[45], D;
 }
-function Rt(t) {
-  const e = R(19), {
+function Eo(t) {
+  const e = T(19), {
     size: o,
-    color: n
-  } = t, i = Math.max(2, o * 0.3), r = ce / 2, l = o - r;
-  let p;
-  e[0] !== n ? (p = {
-    stroke: n,
-    strokeWidth: ce,
+    color: r
+  } = t, l = Math.max(2, o * 0.3), i = ye / 2, n = o - i;
+  let a;
+  e[0] !== r ? (a = {
+    stroke: r,
+    strokeWidth: ye,
     fill: "none"
-  }, e[0] = n, e[1] = p) : p = e[1];
-  const a = p, d = `M${r} ${r + i} V${r} H${r + i}`;
-  let f;
-  e[2] !== a || e[3] !== d ? (f = /* @__PURE__ */ s("path", { d, ...a }), e[2] = a, e[3] = d, e[4] = f) : f = e[4];
-  const m = `M${l - i} ${r} H${l} V${r + i}`;
-  let c;
-  e[5] !== a || e[6] !== m ? (c = /* @__PURE__ */ s("path", { d: m, ...a }), e[5] = a, e[6] = m, e[7] = c) : c = e[7];
-  const g = `M${l} ${l - i} V${l} H${l - i}`;
+  }, e[0] = r, e[1] = a) : a = e[1];
+  const s = a, c = `M${i} ${i + l} V${i} H${i + l}`;
+  let p;
+  e[2] !== s || e[3] !== c ? (p = /* @__PURE__ */ d("path", { d: c, ...s }), e[2] = s, e[3] = c, e[4] = p) : p = e[4];
+  const f = `M${n - l} ${i} H${n} V${i + l}`;
   let u;
-  e[8] !== a || e[9] !== g ? (u = /* @__PURE__ */ s("path", { d: g, ...a }), e[8] = a, e[9] = g, e[10] = u) : u = e[10];
-  const h = `M${r + i} ${l} H${r} V${l - i}`;
-  let y;
-  e[11] !== a || e[12] !== h ? (y = /* @__PURE__ */ s("path", { d: h, ...a }), e[11] = a, e[12] = h, e[13] = y) : y = e[13];
-  let x;
-  return e[14] !== f || e[15] !== c || e[16] !== u || e[17] !== y ? (x = /* @__PURE__ */ E(se, { children: [
-    f,
-    c,
+  e[5] !== s || e[6] !== f ? (u = /* @__PURE__ */ d("path", { d: f, ...s }), e[5] = s, e[6] = f, e[7] = u) : u = e[7];
+  const y = `M${n} ${n - l} V${n} H${n - l}`;
+  let h;
+  e[8] !== s || e[9] !== y ? (h = /* @__PURE__ */ d("path", { d: y, ...s }), e[8] = s, e[9] = y, e[10] = h) : h = e[10];
+  const g = `M${i + l} ${n} H${i} V${n - l}`;
+  let v;
+  e[11] !== s || e[12] !== g ? (v = /* @__PURE__ */ d("path", { d: g, ...s }), e[11] = s, e[12] = g, e[13] = v) : v = e[13];
+  let b;
+  return e[14] !== p || e[15] !== u || e[16] !== h || e[17] !== v ? (b = /* @__PURE__ */ z(he, { children: [
+    p,
     u,
-    y
-  ] }), e[14] = f, e[15] = c, e[16] = u, e[17] = y, e[18] = x) : x = e[18], x;
+    h,
+    v
+  ] }), e[14] = p, e[15] = u, e[16] = h, e[17] = v, e[18] = b) : b = e[18], b;
 }
-const At = 16;
-function He(t) {
-  const e = R(23), {
+const Ho = 16;
+function rt(t) {
+  const e = T(23), {
     data: o
   } = t, {
-    items: n,
-    shape: i,
-    isStrokeColor: r,
-    fillPattern: l,
-    strokeStyle: p,
-    orientation: a
-  } = o, d = i === void 0 ? "circle" : i, f = r === void 0 ? !1 : r, m = l === void 0 ? "solid" : l, c = p === void 0 ? "solid" : p, g = a === void 0 ? "vertical" : a, u = g === "horizontal";
-  let h;
-  e[0] !== n ? (h = n.reduce(Bt, 0), e[0] = n, e[1] = h) : h = e[1];
-  const x = Math.max(At, h), b = u ? J.listHorizontal : null;
-  let v;
-  e[2] !== b ? (v = {
-    ...J.list,
-    ...b
-  }, e[2] = b, e[3] = v) : v = e[3];
+    items: r,
+    shape: l,
+    isStrokeColor: i,
+    fillPattern: n,
+    strokeStyle: a,
+    orientation: s
+  } = o, c = l === void 0 ? "circle" : l, p = i === void 0 ? !1 : i, f = n === void 0 ? "solid" : n, u = a === void 0 ? "solid" : a, y = s === void 0 ? "vertical" : s, h = y === "horizontal";
+  let g;
+  e[0] !== r ? (g = r.reduce(Ro, 0), e[0] = r, e[1] = g) : g = e[1];
+  const b = Math.max(Ho, g), C = h ? te.listHorizontal : null;
   let L;
-  if (e[4] !== m || e[5] !== x || e[6] !== u || e[7] !== f || e[8] !== n || e[9] !== d || e[10] !== c) {
-    let k;
-    e[12] !== m || e[13] !== x || e[14] !== u || e[15] !== f || e[16] !== d || e[17] !== c ? (k = (C, S) => /* @__PURE__ */ E(P, { sx: {
-      ...J.item,
-      ...u ? J.itemHorizontal : null
+  e[2] !== C ? (L = {
+    ...te.list,
+    ...C
+  }, e[2] = C, e[3] = L) : L = e[3];
+  let w;
+  if (e[4] !== f || e[5] !== b || e[6] !== h || e[7] !== p || e[8] !== r || e[9] !== c || e[10] !== u) {
+    let I;
+    e[12] !== f || e[13] !== b || e[14] !== h || e[15] !== p || e[16] !== c || e[17] !== u ? (I = (S, O) => /* @__PURE__ */ z(P, { sx: {
+      ...te.item,
+      ...h ? te.itemHorizontal : null
     }, children: [
-      /* @__PURE__ */ s(P, { sx: {
-        ...J.gutter,
-        width: u ? void 0 : x
-      }, children: /* @__PURE__ */ s(Ee, { shape: C.shape ?? d, color: C.color, isStrokeColor: C.isStrokeColor ?? f, fillPattern: C.fillPattern ?? m, strokeStyle: C.strokeStyle ?? c, size: C.size ?? ge }) }),
-      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", sx: {
-        ...J.label,
-        ...u ? J.labelHorizontal : null
-      }, children: C.label }),
-      C.value != null && /* @__PURE__ */ s(V, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: J.value, children: C.value })
-    ] }, `${C.label}-${S}`), e[12] = m, e[13] = x, e[14] = u, e[15] = f, e[16] = d, e[17] = c, e[18] = k) : k = e[18], L = n.map(k), e[4] = m, e[5] = x, e[6] = u, e[7] = f, e[8] = n, e[9] = d, e[10] = c, e[11] = L;
+      /* @__PURE__ */ d(P, { sx: {
+        ...te.gutter,
+        width: h ? void 0 : b
+      }, children: /* @__PURE__ */ d(it, { shape: S.shape ?? c, color: S.color, isStrokeColor: S.isStrokeColor ?? p, fillPattern: S.fillPattern ?? f, strokeStyle: S.strokeStyle ?? u, size: S.size ?? _e }) }),
+      /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", sx: {
+        ...te.label,
+        ...h ? te.labelHorizontal : null
+      }, children: S.label }),
+      S.value != null && /* @__PURE__ */ d(E, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: te.value, children: S.value })
+    ] }, `${S.label}-${O}`), e[12] = f, e[13] = b, e[14] = h, e[15] = p, e[16] = c, e[17] = u, e[18] = I) : I = e[18], w = r.map(I), e[4] = f, e[5] = b, e[6] = h, e[7] = p, e[8] = r, e[9] = c, e[10] = u, e[11] = w;
   } else
-    L = e[11];
-  let w;
-  return e[19] !== g || e[20] !== v || e[21] !== L ? (w = /* @__PURE__ */ s(P, { "data-orientation": g, sx: v, children: L }), e[19] = g, e[20] = v, e[21] = L, e[22] = w) : w = e[22], w;
+    w = e[11];
+  let x;
+  return e[19] !== y || e[20] !== L || e[21] !== w ? (x = /* @__PURE__ */ d(P, { "data-orientation": y, sx: L, children: w }), e[19] = y, e[20] = L, e[21] = w, e[22] = x) : x = e[22], x;
 }
-function Bt(t, e) {
-  return Math.max(t, e.size ?? ge);
+function Ro(t, e) {
+  return Math.max(t, e.size ?? _e);
 }
-const U = {
+const K = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -1159,97 +1836,97 @@ const U = {
     whiteSpace: "nowrap"
   }
 };
-function Wt(t) {
+function Vo(t) {
   const {
     avg: e,
     stops: o
   } = t;
   if (e == null || o.length < 2) return null;
-  const n = o[0].value, i = o[o.length - 1].value;
-  if (n === i) return null;
-  const r = (e - n) / (i - n) * 100;
-  return Math.min(100, Math.max(0, r));
+  const r = o[0].value, l = o[o.length - 1].value;
+  if (r === l) return null;
+  const i = (e - r) / (l - r) * 100;
+  return Math.min(100, Math.max(0, i));
 }
-function De(t) {
-  const e = R(40), {
+function st(t) {
+  const e = T(40), {
     data: o,
-    labels: n
-  } = t, i = n === void 0 ? ae : n, {
-    colors: r,
-    stops: l,
-    isContinuous: p,
-    attribute: a,
-    formatValue: d
-  } = o, f = d === void 0 ? String : d;
-  let m;
-  e[0] !== o ? (m = Wt(o), e[0] = o, e[1] = m) : m = e[1];
-  const c = m, g = l[0], u = l[l.length - 1];
-  let h;
-  e[2] !== r ? (h = r.join(", "), e[2] = r, e[3] = h) : h = e[3];
-  const y = `linear-gradient(90deg, ${h})`, x = !p && l.length === r.length + 1, b = !p && !x;
-  let v;
-  e[4] !== l ? (v = (_) => `${l[_]?.label ?? ""} – ${l[_ + 1]?.label ?? ""}`, e[4] = l, e[5] = v) : v = e[5];
-  const L = v;
-  let w;
-  e[6] !== a || e[7] !== i ? (w = a && /* @__PURE__ */ E(P, { sx: U.attribute, children: [
-    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: i.colorBasedOn }),
-    /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", children: a })
-  ] }), e[6] = a, e[7] = i, e[8] = w) : w = e[8];
-  const k = w;
-  if (b) {
-    let _;
-    e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ s(pt, { fontSize: "small" }), e[9] = _) : _ = e[9];
-    const O = `Discrete ramp needs ${r.length + 1} stops (one per color boundary) but got ${l.length}.`;
-    let T;
-    e[10] !== O ? (T = /* @__PURE__ */ E(P, { sx: U.error, children: [
-      _,
-      /* @__PURE__ */ s(V, { variant: "caption", color: "error", children: O })
-    ] }), e[10] = O, e[11] = T) : T = e[11];
+    labels: r
+  } = t, l = r === void 0 ? ge : r, {
+    colors: i,
+    stops: n,
+    isContinuous: a,
+    attribute: s,
+    formatValue: c
+  } = o, p = c === void 0 ? String : c;
+  let f;
+  e[0] !== o ? (f = Vo(o), e[0] = o, e[1] = f) : f = e[1];
+  const u = f, y = n[0], h = n[n.length - 1];
+  let g;
+  e[2] !== i ? (g = i.join(", "), e[2] = i, e[3] = g) : g = e[3];
+  const v = `linear-gradient(90deg, ${g})`, b = !a && n.length === i.length + 1, C = !a && !b;
+  let L;
+  e[4] !== n ? (L = (m) => `${n[m]?.label ?? ""} – ${n[m + 1]?.label ?? ""}`, e[4] = n, e[5] = L) : L = e[5];
+  const w = L;
+  let x;
+  e[6] !== s || e[7] !== l ? (x = s && /* @__PURE__ */ z(P, { sx: K.attribute, children: [
+    /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: l.colorBasedOn }),
+    /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", children: s })
+  ] }), e[6] = s, e[7] = l, e[8] = x) : x = e[8];
+  const I = x;
+  if (C) {
+    let m;
+    e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ d(At, { fontSize: "small" }), e[9] = m) : m = e[9];
+    const M = `Discrete ramp needs ${i.length + 1} stops (one per color boundary) but got ${n.length}.`;
+    let A;
+    e[10] !== M ? (A = /* @__PURE__ */ z(P, { sx: K.error, children: [
+      m,
+      /* @__PURE__ */ d(E, { variant: "caption", color: "error", children: M })
+    ] }), e[10] = M, e[11] = A) : A = e[11];
     let D;
-    return e[12] !== k || e[13] !== T ? (D = /* @__PURE__ */ E(P, { sx: U.container, children: [
-      k,
-      T
-    ] }), e[12] = k, e[13] = T, e[14] = D) : D = e[14], D;
+    return e[12] !== I || e[13] !== A ? (D = /* @__PURE__ */ z(P, { sx: K.container, children: [
+      I,
+      A
+    ] }), e[12] = I, e[13] = A, e[14] = D) : D = e[14], D;
   }
-  let C;
-  e[15] !== r || e[16] !== y || e[17] !== p || e[18] !== i || e[19] !== L ? (C = p ? /* @__PURE__ */ s(P, { role: "img", "aria-label": i.colorGradient, sx: {
+  let S;
+  e[15] !== i || e[16] !== v || e[17] !== a || e[18] !== l || e[19] !== w ? (S = a ? /* @__PURE__ */ d(P, { role: "img", "aria-label": l.colorGradient, sx: {
     width: "100%",
     height: "100%",
-    background: y
-  } }) : r.map((_, O) => /* @__PURE__ */ s(P, { role: "img", "aria-label": L(O), sx: {
-    ...U.step,
-    backgroundColor: _
-  } }, O)), e[15] = r, e[16] = y, e[17] = p, e[18] = i, e[19] = L, e[20] = C) : C = e[20];
-  let S;
-  e[21] !== C ? (S = /* @__PURE__ */ s(P, { sx: U.bar, children: C }), e[21] = C, e[22] = S) : S = e[22];
-  let z;
-  e[23] !== c || e[24] !== o.avg || e[25] !== f ? (z = c != null && o.avg != null && /* @__PURE__ */ s(we, { title: f(o.avg), placement: "top", arrow: !0, children: /* @__PURE__ */ s(P, { sx: U.avgLine, style: {
-    left: `${c}%`
-  } }) }), e[23] = c, e[24] = o.avg, e[25] = f, e[26] = z) : z = e[26];
+    background: v
+  } }) : i.map((m, M) => /* @__PURE__ */ d(P, { role: "img", "aria-label": w(M), sx: {
+    ...K.step,
+    backgroundColor: m
+  } }, M)), e[15] = i, e[16] = v, e[17] = a, e[18] = l, e[19] = w, e[20] = S) : S = e[20];
+  let O;
+  e[21] !== S ? (O = /* @__PURE__ */ d(P, { sx: K.bar, children: S }), e[21] = S, e[22] = O) : O = e[22];
+  let k;
+  e[23] !== u || e[24] !== o.avg || e[25] !== p ? (k = u != null && o.avg != null && /* @__PURE__ */ d(ie, { title: p(o.avg), placement: "top", arrow: !0, children: /* @__PURE__ */ d(P, { sx: K.avgLine, style: {
+    left: `${u}%`
+  } }) }), e[23] = u, e[24] = o.avg, e[25] = p, e[26] = k) : k = e[26];
   let $;
-  e[27] !== S || e[28] !== z ? ($ = /* @__PURE__ */ E(P, { sx: U.barWrap, children: [
-    S,
-    z
-  ] }), e[27] = S, e[28] = z, e[29] = $) : $ = e[29];
-  let M;
-  e[30] !== r.length || e[31] !== g?.label || e[32] !== x || e[33] !== u?.label || e[34] !== l ? (M = x ? /* @__PURE__ */ s(P, { sx: U.boundaryLabels, children: l.map((_, O) => {
-    const T = O === l.length - 1, D = O === 0 ? void 0 : T ? "translateX(-100%)" : "translateX(-50%)";
-    return /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", sx: U.boundaryLabel, style: {
-      left: `${O / r.length * 100}%`,
+  e[27] !== O || e[28] !== k ? ($ = /* @__PURE__ */ z(P, { sx: K.barWrap, children: [
+    O,
+    k
+  ] }), e[27] = O, e[28] = k, e[29] = $) : $ = e[29];
+  let _;
+  e[30] !== i.length || e[31] !== y?.label || e[32] !== b || e[33] !== h?.label || e[34] !== n ? (_ = b ? /* @__PURE__ */ d(P, { sx: K.boundaryLabels, children: n.map((m, M) => {
+    const A = M === n.length - 1, D = M === 0 ? void 0 : A ? "translateX(-100%)" : "translateX(-50%)";
+    return /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", sx: K.boundaryLabel, style: {
+      left: `${M / i.length * 100}%`,
       transform: D
-    }, children: _.label }, `${_.label}-${O}`);
-  }) }) : /* @__PURE__ */ E(P, { sx: U.labels, children: [
-    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: g?.label }),
-    /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: u?.label })
-  ] }), e[30] = r.length, e[31] = g?.label, e[32] = x, e[33] = u?.label, e[34] = l, e[35] = M) : M = e[35];
-  let I;
-  return e[36] !== k || e[37] !== $ || e[38] !== M ? (I = /* @__PURE__ */ E(P, { sx: U.container, children: [
-    k,
+    }, children: m.label }, `${m.label}-${M}`);
+  }) }) : /* @__PURE__ */ z(P, { sx: K.labels, children: [
+    /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: y?.label }),
+    /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: h?.label })
+  ] }), e[30] = i.length, e[31] = y?.label, e[32] = b, e[33] = h?.label, e[34] = n, e[35] = _) : _ = e[35];
+  let G;
+  return e[36] !== I || e[37] !== $ || e[38] !== _ ? (G = /* @__PURE__ */ z(P, { sx: K.container, children: [
+    I,
     $,
-    M
-  ] }), e[36] = k, e[37] = $, e[38] = M, e[39] = I) : I = e[39], I;
+    _
+  ] }), e[36] = I, e[37] = $, e[38] = _, e[39] = G) : G = e[39], G;
 }
-const ne = {
+const ce = {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -1289,89 +1966,89 @@ const ne = {
     flexDirection: "column",
     justifyContent: "space-between"
   }
-}, re = 72, Ft = 0.3, be = 2, ue = 4;
-function Nt(t) {
-  const e = (t.stops ?? []).filter((r) => Number.isFinite(r));
-  if (e.length >= be)
-    return e.sort((r, l) => l - r).slice(0, ue);
+}, fe = 72, Bo = 0.3, Ae = 2, Ie = 4;
+function Wo(t) {
+  const e = (t.stops ?? []).filter((i) => Number.isFinite(i));
+  if (e.length >= Ae)
+    return e.sort((i, n) => n - i).slice(0, Ie);
   const {
     min: o,
-    max: n
+    max: r
   } = t;
-  if (o === n) return [n];
-  const i = Math.min(ue, Math.max(be, t.steps ?? ue));
+  if (o === r) return [r];
+  const l = Math.min(Ie, Math.max(Ae, t.steps ?? Ie));
   return Array.from({
-    length: i
-  }, (r, l) => n - (n - o) * l / (i - 1));
+    length: l
+  }, (i, n) => r - (r - o) * n / (l - 1));
 }
-function Ut(t, e) {
-  if (e <= 1) return re;
-  const o = 1 - (1 - Ft) * (t / (e - 1));
-  return re * o;
+function No(t, e) {
+  if (e <= 1) return fe;
+  const o = 1 - (1 - Bo) * (t / (e - 1));
+  return fe * o;
 }
-function Ge(t) {
-  const e = R(40), {
+function at(t) {
+  const e = T(40), {
     data: o,
-    labels: n
-  } = t, i = n === void 0 ? ae : n, {
-    attribute: r,
-    formatValue: l
-  } = o, p = l === void 0 ? String : l;
-  let a, d, f, m, c, g, u, h, y;
-  if (e[0] !== r || e[1] !== o || e[2] !== p || e[3] !== i) {
-    const L = Nt(o), w = L.length;
+    labels: r
+  } = t, l = r === void 0 ? ge : r, {
+    attribute: i,
+    formatValue: n
+  } = o, a = n === void 0 ? String : n;
+  let s, c, p, f, u, y, h, g, v;
+  if (e[0] !== i || e[1] !== o || e[2] !== a || e[3] !== l) {
+    const w = Wo(o), x = w.length;
+    let I;
+    e[13] !== a || e[14] !== l || e[15] !== x ? (I = (_, G) => {
+      const m = a(_);
+      return x <= 1 ? m : G === 0 ? /* @__PURE__ */ z(he, { children: [
+        l.maxPrefix,
+        m
+      ] }) : G === x - 1 ? /* @__PURE__ */ z(he, { children: [
+        l.minPrefix,
+        m
+      ] }) : m;
+    }, e[13] = a, e[14] = l, e[15] = x, e[16] = I) : I = e[16];
+    const S = I;
+    p = P, g = ce.root, e[17] !== i || e[18] !== l ? (v = i && /* @__PURE__ */ z(P, { sx: ce.attribute, children: [
+      /* @__PURE__ */ d(E, { variant: "overline", color: "text.secondary", children: l.radiusRangeBy }),
+      /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", children: i })
+    ] }), e[17] = i, e[18] = l, e[19] = v) : v = e[19], c = P, y = ce.body;
+    let O;
+    e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = {
+      ...ce.circles,
+      width: fe,
+      height: fe
+    }, e[20] = O) : O = e[20];
     let k;
-    e[13] !== p || e[14] !== i || e[15] !== w ? (k = (M, I) => {
-      const _ = p(M);
-      return w <= 1 ? _ : I === 0 ? /* @__PURE__ */ E(se, { children: [
-        i.maxPrefix,
-        _
-      ] }) : I === w - 1 ? /* @__PURE__ */ E(se, { children: [
-        i.minPrefix,
-        _
-      ] }) : _;
-    }, e[13] = p, e[14] = i, e[15] = w, e[16] = k) : k = e[16];
-    const C = k;
-    f = P, h = ne.root, e[17] !== r || e[18] !== i ? (y = r && /* @__PURE__ */ E(P, { sx: ne.attribute, children: [
-      /* @__PURE__ */ s(V, { variant: "overline", color: "text.secondary", children: i.radiusRangeBy }),
-      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", children: r })
-    ] }), e[17] = r, e[18] = i, e[19] = y) : y = e[19], d = P, g = ne.body;
-    let S;
-    e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (S = {
-      ...ne.circles,
-      width: re,
-      height: re
-    }, e[20] = S) : S = e[20];
-    let z;
-    e[21] !== w ? (z = (M, I) => {
-      const _ = Ut(I, w);
-      return /* @__PURE__ */ s(P, { "aria-hidden": !0, sx: {
-        ...ne.circle,
-        width: _,
-        height: _
-      } }, I);
-    }, e[21] = w, e[22] = z) : z = e[22], u = /* @__PURE__ */ s(P, { sx: S, children: L.map(z) }), a = P, e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = {
-      ...ne.labels,
-      height: re
-    }, e[23] = m) : m = e[23];
+    e[21] !== x ? (k = (_, G) => {
+      const m = No(G, x);
+      return /* @__PURE__ */ d(P, { "aria-hidden": !0, sx: {
+        ...ce.circle,
+        width: m,
+        height: m
+      } }, G);
+    }, e[21] = x, e[22] = k) : k = e[22], h = /* @__PURE__ */ d(P, { sx: O, children: w.map(k) }), s = P, e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = {
+      ...ce.labels,
+      height: fe
+    }, e[23] = f) : f = e[23];
     let $;
-    e[24] !== C ? ($ = (M, I) => /* @__PURE__ */ s(V, { variant: "caption", color: "text.secondary", children: C(M, I) }, I), e[24] = C, e[25] = $) : $ = e[25], c = L.map($), e[0] = r, e[1] = o, e[2] = p, e[3] = i, e[4] = a, e[5] = d, e[6] = f, e[7] = m, e[8] = c, e[9] = g, e[10] = u, e[11] = h, e[12] = y;
+    e[24] !== S ? ($ = (_, G) => /* @__PURE__ */ d(E, { variant: "caption", color: "text.secondary", children: S(_, G) }, G), e[24] = S, e[25] = $) : $ = e[25], u = w.map($), e[0] = i, e[1] = o, e[2] = a, e[3] = l, e[4] = s, e[5] = c, e[6] = p, e[7] = f, e[8] = u, e[9] = y, e[10] = h, e[11] = g, e[12] = v;
   } else
-    a = e[4], d = e[5], f = e[6], m = e[7], c = e[8], g = e[9], u = e[10], h = e[11], y = e[12];
-  let x;
-  e[26] !== a || e[27] !== m || e[28] !== c ? (x = /* @__PURE__ */ s(a, { sx: m, children: c }), e[26] = a, e[27] = m, e[28] = c, e[29] = x) : x = e[29];
+    s = e[4], c = e[5], p = e[6], f = e[7], u = e[8], y = e[9], h = e[10], g = e[11], v = e[12];
   let b;
-  e[30] !== d || e[31] !== g || e[32] !== u || e[33] !== x ? (b = /* @__PURE__ */ E(d, { sx: g, children: [
-    u,
-    x
-  ] }), e[30] = d, e[31] = g, e[32] = u, e[33] = x, e[34] = b) : b = e[34];
-  let v;
-  return e[35] !== f || e[36] !== b || e[37] !== h || e[38] !== y ? (v = /* @__PURE__ */ E(f, { sx: h, children: [
-    y,
+  e[26] !== s || e[27] !== f || e[28] !== u ? (b = /* @__PURE__ */ d(s, { sx: f, children: u }), e[26] = s, e[27] = f, e[28] = u, e[29] = b) : b = e[29];
+  let C;
+  e[30] !== c || e[31] !== y || e[32] !== h || e[33] !== b ? (C = /* @__PURE__ */ z(c, { sx: y, children: [
+    h,
     b
-  ] }), e[35] = f, e[36] = b, e[37] = h, e[38] = y, e[39] = v) : v = e[39], v;
+  ] }), e[30] = c, e[31] = y, e[32] = h, e[33] = b, e[34] = C) : C = e[34];
+  let L;
+  return e[35] !== p || e[36] !== C || e[37] !== g || e[38] !== v ? (L = /* @__PURE__ */ z(p, { sx: g, children: [
+    v,
+    C
+  ] }), e[35] = p, e[36] = C, e[37] = g, e[38] = v, e[39] = L) : L = e[39], L;
 }
-const Q = {
+const oe = {
   list: {
     display: "flex",
     flexDirection: "column",
@@ -1427,61 +2104,61 @@ const Q = {
     textOverflow: "clip"
   }
 };
-function Ve(t) {
-  const e = R(11), {
+function ct(t) {
+  const e = T(11), {
     data: o
-  } = t, n = o.orientation ?? "vertical", i = n === "horizontal", r = i ? Q.listHorizontal : null;
-  let l;
-  e[0] !== r ? (l = {
-    ...Q.list,
-    ...r
-  }, e[0] = r, e[1] = l) : l = e[1];
-  let p;
-  if (e[2] !== o.items || e[3] !== i) {
-    let d;
-    e[5] !== i ? (d = (f, m) => /* @__PURE__ */ E(P, { sx: {
-      ...Q.item,
-      ...i ? Q.itemHorizontal : null
+  } = t, r = o.orientation ?? "vertical", l = r === "horizontal", i = l ? oe.listHorizontal : null;
+  let n;
+  e[0] !== i ? (n = {
+    ...oe.list,
+    ...i
+  }, e[0] = i, e[1] = n) : n = e[1];
+  let a;
+  if (e[2] !== o.items || e[3] !== l) {
+    let c;
+    e[5] !== l ? (c = (p, f) => /* @__PURE__ */ z(P, { sx: {
+      ...oe.item,
+      ...l ? oe.itemHorizontal : null
     }, children: [
-      /* @__PURE__ */ s(P, { component: "img", src: f.icon, alt: "", sx: Q.icon }),
-      /* @__PURE__ */ s(V, { variant: "caption", color: "text.primary", sx: {
-        ...Q.label,
-        ...i ? Q.labelHorizontal : null
-      }, children: f.label }),
-      f.value != null && /* @__PURE__ */ s(V, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: Q.value, children: f.value })
-    ] }, `${f.label}-${m}`), e[5] = i, e[6] = d) : d = e[6], p = o.items.map(d), e[2] = o.items, e[3] = i, e[4] = p;
+      /* @__PURE__ */ d(P, { component: "img", src: p.icon, alt: "", sx: oe.icon }),
+      /* @__PURE__ */ d(E, { variant: "caption", color: "text.primary", sx: {
+        ...oe.label,
+        ...l ? oe.labelHorizontal : null
+      }, children: p.label }),
+      p.value != null && /* @__PURE__ */ d(E, { className: "PsLegend-value", variant: "caption", color: "text.secondary", sx: oe.value, children: p.value })
+    ] }, `${p.label}-${f}`), e[5] = l, e[6] = c) : c = e[6], a = o.items.map(c), e[2] = o.items, e[3] = l, e[4] = a;
   } else
-    p = e[4];
-  let a;
-  return e[7] !== n || e[8] !== l || e[9] !== p ? (a = /* @__PURE__ */ s(P, { "data-orientation": n, sx: l, children: p }), e[7] = n, e[8] = l, e[9] = p, e[10] = a) : a = e[10], a;
+    a = e[4];
+  let s;
+  return e[7] !== r || e[8] !== n || e[9] !== a ? (s = /* @__PURE__ */ d(P, { "data-orientation": r, sx: n, children: a }), e[7] = r, e[8] = n, e[9] = a, e[10] = s) : s = e[10], s;
 }
-function Re(t) {
-  const e = R(10), {
+function dt(t) {
+  const e = T(10), {
     data: o,
-    labels: n
+    labels: r
   } = t;
   switch (o.type) {
     case "category": {
-      let i;
-      return e[0] !== o ? (i = /* @__PURE__ */ s(He, { data: o }), e[0] = o, e[1] = i) : i = e[1], i;
+      let l;
+      return e[0] !== o ? (l = /* @__PURE__ */ d(rt, { data: o }), e[0] = o, e[1] = l) : l = e[1], l;
     }
     case "ramp": {
-      let i;
-      return e[2] !== o || e[3] !== n ? (i = /* @__PURE__ */ s(De, { data: o, labels: n }), e[2] = o, e[3] = n, e[4] = i) : i = e[4], i;
+      let l;
+      return e[2] !== o || e[3] !== r ? (l = /* @__PURE__ */ d(st, { data: o, labels: r }), e[2] = o, e[3] = r, e[4] = l) : l = e[4], l;
     }
     case "proportion": {
-      let i;
-      return e[5] !== o || e[6] !== n ? (i = /* @__PURE__ */ s(Ge, { data: o, labels: n }), e[5] = o, e[6] = n, e[7] = i) : i = e[7], i;
+      let l;
+      return e[5] !== o || e[6] !== r ? (l = /* @__PURE__ */ d(at, { data: o, labels: r }), e[5] = o, e[6] = r, e[7] = l) : l = e[7], l;
     }
     case "icon": {
-      let i;
-      return e[8] !== o ? (i = /* @__PURE__ */ s(Ve, { data: o }), e[8] = o, e[9] = i) : i = e[9], i;
+      let l;
+      return e[8] !== o ? (l = /* @__PURE__ */ d(ct, { data: o }), e[8] = o, e[9] = l) : l = e[9], l;
     }
     default:
       return o;
   }
 }
-const jt = {
+const Fo = {
   // Figma: stacked variable sections sit ~16px apart (wider than the row
   // content's 8px block gap).
   stack: {
@@ -1490,47 +2167,57 @@ const jt = {
     gap: 2
   }
 };
-function Zt() {
-  const t = R(9), e = ee(), o = te();
-  let n;
-  t[0] !== o ? (n = (a) => o ? a.layers[o.layerId]?.variables : void 0, t[0] = o, t[1] = n) : n = t[1];
-  const i = Y(e, n), {
-    labels: r
-  } = K();
-  if (!i || i.length === 0)
+function Uo() {
+  const t = T(9), e = N(), o = Q();
+  let r;
+  t[0] !== o ? (r = (s) => o ? s.layers[o.layerId]?.variables : void 0, t[0] = o, t[1] = r) : r = t[1];
+  const l = Z(e, r), {
+    labels: i
+  } = B();
+  if (!l || l.length === 0)
     return null;
-  let l;
-  if (t[2] !== r || t[3] !== i) {
-    let a;
-    t[5] !== r ? (a = (d, f) => /* @__PURE__ */ s(Re, { data: d, labels: r }, f), t[5] = r, t[6] = a) : a = t[6], l = i.map(a), t[2] = r, t[3] = i, t[4] = l;
+  let n;
+  if (t[2] !== i || t[3] !== l) {
+    let s;
+    t[5] !== i ? (s = (c, p) => /* @__PURE__ */ d(dt, { data: c, labels: i }, p), t[5] = i, t[6] = s) : s = t[6], n = l.map(s), t[2] = i, t[3] = l, t[4] = n;
   } else
-    l = t[4];
-  let p;
-  return t[7] !== l ? (p = /* @__PURE__ */ s(P, { sx: jt.stack, children: l }), t[7] = l, t[8] = p) : p = t[8], p;
+    n = t[4];
+  let a;
+  return t[7] !== n ? (a = /* @__PURE__ */ d(P, { sx: Fo.stack, children: n }), t[7] = n, t[8] = a) : a = t[8], a;
 }
-const rl = {
+const an = {
   // Composition shell
-  Provider: ut,
-  Group: yt,
-  Row: bt,
-  Actions: Pe,
+  Provider: Nt,
+  Group: jt,
+  Row: Xt,
+  Actions: Qe,
+  Sortable: vo,
   // Store-connected actions & controls (context-driven)
-  VisibilityToggle: wt,
-  RowMenu: $t,
-  ZoomTo: kt,
-  Opacity: Ot,
-  ConfigSelect: Tt,
-  Item: Zt,
+  VisibilityToggle: Jt,
+  RowMenu: oo,
+  ZoomTo: no,
+  ShowOnlyLayer: lo,
+  ShowAllLayers: io,
+  GroupMenu: ro,
+  ShowOnlyGroup: so,
+  ShowAllGroups: ao,
+  CollapseAllGroups: co,
+  ZoomToGroup: uo,
+  PanelMenu: po,
+  VisibleLayers: ho,
+  Opacity: Go,
+  ConfigSelect: Mo,
+  Item: Uo,
   // Pure UI
-  ItemUI: Re,
-  Swatch: Ee,
-  CategoryUI: He,
-  RampUI: De,
-  ProportionUI: Ge,
-  IconUI: Ve
+  ItemUI: dt,
+  Swatch: it,
+  CategoryUI: rt,
+  RampUI: st,
+  ProportionUI: at,
+  IconUI: ct
 };
 export {
-  ae as DEFAULT_LEGEND_LABELS,
-  rl as Legend
+  ge as DEFAULT_LEGEND_LABELS,
+  an as Legend
 };
 //# sourceMappingURL=legend.js.map