basalt-ui 1.31.0 → 1.32.1

package/dist/charts/primitives/ChartLegend.js

@@ -1,10 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { alpha, VX } from "../../tokens/index.js";
-import { useDismissOnOutside } from "../cursor/touch-pin.js";
 import { DOTS_HIT_GAP, LEGEND_DOT_SIZE, LEGEND_ROW_GAP, orderEntries } from "./chart-frame-layout.js";
 import { useChartMetrics, useCoarsePointer } from "./chart-tier.js";
+import { LegendDisclosure, useLegendDisclosure } from "./legend-disclosure.js";
 const LEGEND_ITEM_BASE = {
   display: "flex",
   alignItems: "center",
@@ -24,48 +22,6 @@ const LEGEND_ITEM_BUTTON = {
   textAlign: "inherit"
 };
 const NO_HIDDEN = /* @__PURE__ */ new Set();
-const DISCLOSURE_PANEL = {
-  position: "fixed",
-  zIndex: VX.zIndexFloating,
-  display: "flex",
-  flexDirection: "column",
-  gap: LEGEND_ROW_GAP,
-  // theme-allow raw-scroll-container — a fixed floating panel of one legend, not app chrome
-  overflowY: "auto",
-  // `<dialog open>` brings UA chrome (centring margin, border, fit-content box) this resets.
-  margin: 0,
-  border: "none",
-  width: "auto",
-  height: "auto",
-  padding: 10,
-  boxSizing: "border-box",
-  backgroundColor: VX.surface.overlay,
-  boxShadow: VX.shadowOverlay,
-  color: VX.muted,
-  borderRadius: VX.radiusCard
-};
-const DISCLOSURE_MIN_HEIGHT = 96;
-function disclosurePlacement(chip, coarse) {
-  if (coarse) {
-    return {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      maxHeight: "60dvh",
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      padding: "12px 16px calc(12px + env(safe-area-inset-bottom, 0px))"
-    };
-  }
-  const below = window.innerHeight - chip.bottom;
-  const left = Math.max(8, Math.min(chip.left, window.innerWidth - 248));
-  const base = { left, right: "auto", minWidth: 200, maxWidth: "calc(100vw - 16px)" };
-  return below >= 200 || below >= chip.top ? { ...base, top: chip.bottom + 4, maxHeight: Math.max(below - 12, DISCLOSURE_MIN_HEIGHT) } : {
-    ...base,
-    bottom: window.innerHeight - chip.top + 4,
-    maxHeight: Math.max(chip.top - 12, DISCLOSURE_MIN_HEIGHT)
-  };
-}
 function wrapperStyle(placement, fontSize, dots) {
   const vertical = placement === "left" || placement === "right";
   const gap = dots ? DOTS_HIT_GAP : VX.legendGap;
@@ -252,55 +208,7 @@ function ChartLegend({
 }) {
   const tier = useChartMetrics();
   const coarse = useCoarsePointer();
-  const [disclosure, setDisclosure] = useState(null);
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const open = disclosure !== null;
-  const panelId = useId();
-  const wasOpen = useRef(false);
-  const openDisclosure = (trigger) => {
-    triggerRef.current = trigger;
-    setDisclosure(disclosurePlacement(trigger.getBoundingClientRect(), coarse));
-  };
-  useEffect(() => {
-    if (open) panelRef.current?.focus();
-    else if (wasOpen.current) triggerRef.current?.focus();
-    wasOpen.current = open;
-  }, [open]);
-  const isInsidePanel = useCallback(
-    (target) => panelRef.current?.contains(target) === true || triggerRef.current?.contains(target) === true,
-    []
-  );
-  useDismissOnOutside({
-    enabled: open,
-    isInside: isInsidePanel,
-    onDismiss: () => setDisclosure(null),
-    dismissOnResize: true,
-    scrollExemptInside: true
-  });
-  useEffect(() => {
-    if (!open || !coarse) return;
-    const panel = panelRef.current;
-    if (panel === null) return;
-    const onKeyDown = (e) => {
-      if (e.key !== "Tab") return;
-      const focusable = panel.querySelectorAll(
-        'button, [tabindex]:not([tabindex="-1"])'
-      );
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (first === void 0 || last === void 0) return;
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    panel.addEventListener("keydown", onKeyDown);
-    return () => panel.removeEventListener("keydown", onKeyDown);
-  }, [open, coarse]);
+  const { open, panelId, openFrom, close, panel } = useLegendDisclosure(coarse);
   const handleEnter = (key) => onHighlight?.(key);
   const handleLeave = () => onHighlight?.(null);
   const idPrefix = chartId ? `${chartId}-` : "";
@@ -327,7 +235,7 @@ function ChartLegend({
           opacity: hidden.has(item.key) ? 0.35 : highlighted === null || highlighted === item.key ? 1 : 0.3,
           textDecoration: hidden.has(item.key) ? "line-through" : "none"
         },
-        ...isDotTrigger ? { onClick: (e) => openDisclosure(e.currentTarget) } : onToggle !== void 0 && { onClick: () => onToggle(item.key) },
+        ...isDotTrigger ? { onClick: (e) => openFrom(e.currentTarget) } : onToggle !== void 0 && { onClick: () => onToggle(item.key) },
         onMouseEnter: () => handleEnter(item.key),
         onMouseLeave: handleLeave,
         onFocus: () => handleEnter(item.key),
@@ -358,7 +266,7 @@ function ChartLegend({
           "aria-expanded": open,
           "aria-haspopup": "dialog",
           "aria-controls": panelId,
-          onClick: (e) => open ? setDisclosure(null) : openDisclosure(e.currentTarget),
+          onClick: (e) => open ? close() : openFrom(e.currentTarget),
           style: { ...LEGEND_ITEM_BUTTON, cursor: "pointer", textDecoration: "underline" },
           children: `All ${entries.length}`
         },
@@ -373,43 +281,7 @@ function ChartLegend({
       style: { ...wrapperStyle(placement, tier.legendFontSize, mode === "dots"), ...style },
       children: [
         nodes,
-        open && createPortal(
-          /* @__PURE__ */ jsxs(Fragment, { children: [
-            coarse && /* @__PURE__ */ jsx(
-              "div",
-              {
-                "aria-hidden": true,
-                onPointerDown: (e) => {
-                  e.stopPropagation();
-                  setDisclosure(null);
-                },
-                style: {
-                  position: "fixed",
-                  inset: 0,
-                  // One below the panel it sits behind — still `VX.zIndexFloating`-derived, never a
-                  // second unrelated literal (B14).
-                  zIndex: VX.zIndexFloating - 1,
-                  backgroundColor: alpha(VX.neutral, 0.35)
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "dialog",
-              {
-                ref: panelRef,
-                id: panelId,
-                open: true,
-                tabIndex: -1,
-                "aria-label": "Legend",
-                ...coarse && { "aria-modal": true },
-                "data-basalt-legend-disclosure": coarse ? "sheet" : "popover",
-                style: { ...DISCLOSURE_PANEL, fontSize: tier.legendFontSize, ...disclosure },
-                children: entries.map((item) => entryButton(item, true))
-              }
-            )
-          ] }),
-          document.body
-        )
+        /* @__PURE__ */ jsx(LegendDisclosure, { ...panel, fontSize: tier.legendFontSize, children: entries.map((item) => entryButton(item, true)) })
       ]
     }
   );

package/dist/charts/primitives/ChartTooltip.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { TooltipRowData } from '../series.js';
 /** Tooltip header — shows formatted date + optional right-aligned label with color. */
 export declare function TooltipHeader({ date, label, labelColor, format, }: {
     date: string;
@@ -21,6 +22,10 @@ export declare function TooltipRow({ color, label, value, valueColor, shape, str
     /** Render the line swatch as dashed (only applies to shape='line'). */
     dashed?: boolean;
 }): import("react").JSX.Element;
+/** The derived rows (`deriveTooltipRows`), one {@link TooltipRow} each. */
+export declare function TooltipRows({ rows }: {
+    rows: readonly TooltipRowData[];
+}): import("react").JSX.Element[];
 export declare function TooltipBody({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/charts/primitives/ChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAuBrD,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,UAAU,EACV,MAAuB,GACxB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;sGAGkG;IAClG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,+BAoCA;AAED,4CAA4C;AAC5C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,+BA0CA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhE;AAsBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAe,EACf,QAAQ,GACT,EAAE;IACD,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACvC;;;8CAG0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,sCA2DA"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAoB/C,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,UAAU,EACV,MAAuB,GACxB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;sGAGkG;IAClG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,+BAoCA;AAED,4CAA4C;AAC5C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,+BA0CA;AAED,2EAA2E;AAC3E,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,cAAc,EAAE,CAAA;CAAE,iCAYxE;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhE;AAsBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAe,EACf,QAAQ,GACT,EAAE;IACD,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACvC;;;8CAG0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,sCA2DA"}

package/dist/charts/primitives/ChartTooltip.js

@@ -114,6 +114,20 @@ function TooltipRow({
     }
   );
 }
+function TooltipRows({ rows }) {
+  return rows.map((row) => /* @__PURE__ */ jsx(
+    TooltipRow,
+    {
+      color: row.color,
+      label: row.label,
+      value: row.value,
+      shape: row.shape,
+      dashed: row.dashed,
+      ...row.strokeWidth !== void 0 && { strokeWidth: row.strokeWidth }
+    },
+    row.key
+  ));
+}
 function TooltipBody({ children }) {
   return /* @__PURE__ */ jsx("div", { style: { padding: "5px 0" }, children });
 }
@@ -178,5 +192,6 @@ export {
   ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow
+  TooltipRow,
+  TooltipRows
 };

package/dist/charts/primitives/HoverOverlay.d.ts

@@ -1,12 +1,7 @@
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from 'react';
-/**
- * Transparent <rect> that captures pointer events (mouse + touch + pen) for tooltip + crosshair
- * sync.
- *
- * With `onKeyDown` it also becomes the chart's keyboard affordance: the rect takes focus and
- * ←/→ scrub the cursor, so a chart's values are reachable without a pointer.
- */
-export declare function HoverOverlay({ width, height, onMove, onDown, onUp, onLeave, onKeyDown, onBlur, ariaLabel, valueNow, valueMax, valueText, }: {
+import type { ChartCursor } from '../hooks/useChartCursor.js';
+/** Props of {@link HoverOverlay}. */
+export type HoverOverlayProps = {
     width: number;
     height: number;
     onMove: PointerEventHandler<SVGRectElement>;
@@ -26,5 +21,25 @@ export declare function HoverOverlay({ width, height, onMove, onDown, onUp, onLe
     valueMax?: number;
     /** Human-readable label for the focused point (the formatted x key). */
     valueText?: string;
-}): import("react").JSX.Element;
+};
+/**
+ * Transparent <rect> that captures pointer events (mouse + touch + pen) for tooltip + crosshair
+ * sync.
+ *
+ * With `onKeyDown` it also becomes the chart's keyboard affordance: the rect takes focus and
+ * ←/→ scrub the cursor, so a chart's values are reachable without a pointer.
+ */
+export declare function HoverOverlay({ width, height, onMove, onDown, onUp, onLeave, onKeyDown, onBlur, ariaLabel, valueNow, valueMax, valueText, }: HoverOverlayProps): import("react").JSX.Element;
+/**
+ * Everything a FOCUSABLE overlay over indexed data takes besides its rect: the cursor's pointer and
+ * keyboard handlers plus the slider label/position. `CartesianChart`, `DualPanel`'s top pane and
+ * the banded kinds all wire it identically, so it is stated once.
+ */
+export declare function cursorSliderProps<T>(input: {
+    cursor: ChartCursor<T>;
+    data: readonly T[];
+    getX: (d: T) => string;
+    formatX: (key: string) => string;
+    ariaLabel: string | undefined;
+}): Omit<HoverOverlayProps, 'width' | 'height'>;
 //# sourceMappingURL=HoverOverlay.d.ts.map

package/dist/charts/primitives/HoverOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverOverlay.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/HoverOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAGzF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC3C;2FACuF;IACvF,MAAM,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC5C,wEAAwE;IACxE,IAAI,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC1C,OAAO,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC5C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAChD,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAiCA"}
+{"version":3,"file":"HoverOverlay.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/HoverOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAG1D,qCAAqC;AACrC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC3C;2FACuF;IACvF,MAAM,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC5C,wEAAwE;IACxE,IAAI,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC1C,OAAO,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAC5C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAChD,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,+BAiCnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE;IAC1C,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;IACtB,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,QAAQ,CAAC,CAc9C"}

package/dist/charts/primitives/HoverOverlay.js

@@ -50,6 +50,22 @@ function HoverOverlay({
     )
   );
 }
+function cursorSliderProps(input) {
+  const { cursor, data, getX, formatX, ariaLabel } = input;
+  const { point } = cursor;
+  return {
+    onMove: cursor.onPointerMove,
+    onDown: cursor.onPointerDown,
+    onUp: cursor.onPointerUp,
+    onLeave: cursor.onPointerLeave,
+    onKeyDown: cursor.onKeyDown,
+    onBlur: cursor.onBlur,
+    valueMax: Math.max(data.length - 1, 0),
+    ...point !== null && { valueNow: data.indexOf(point), valueText: formatX(getX(point)) },
+    ...ariaLabel !== void 0 && { ariaLabel }
+  };
+}
 export {
-  HoverOverlay
+  HoverOverlay,
+  cursorSliderProps
 };

package/dist/charts/primitives/chart-card-context.d.ts

@@ -1,3 +1,16 @@
+import type { Dispatch } from 'react';
+/** One frame claiming or releasing the card's header legend slot. */
+export type LegendSlotAction = {
+    type: 'claim' | 'release';
+    id: string;
+};
+/**
+ * The ONE owner of the legend-slot protocol (`docs/waves/PLAN.md` wave 3, P2-9): claimants in claim
+ * order, and the head owns the slot. A later claimant is denied simply by not being the head, and
+ * it takes over the moment everything ahead of it releases — no retry signal, no ownership mirrored
+ * in a ref. Returns the same array on a no-op so a repeated claim/release never re-renders the card.
+ */
+export declare function legendSlotReducer(claimants: readonly string[], { type, id }: LegendSlotAction): readonly string[];
 /**
  * `ChartCard`'s internal context: `inCard` (a frame inside a card treats its computed height as a
  * MINIMUM and grows into the card body), the legend slot — the empty header-row box a chart will portal its legend into
@@ -7,23 +20,14 @@
  * 'dots' before it eats the plot floor (`docs/CHARTS-SPEC.md` §5, wave 11). `null`/`false` until the slot
  * mounts, and outside any card. Deliberately not exported from any barrel.
  *
- * `claimLegendSlot`/`releaseLegendSlot` arbitrate the slot when a card hosts more than one
- * `ChartFrame` (`docs/waves/PLAN.md` wave 3, P2-9): the first frame to claim an id keeps it for as
- * long as it holds it, every later claimant is told no and falls back to its own band legend
- * instead of a second frame silently portalling into the same node. Outside any card there is no
- * slot to contend for, so the default always grants the claim.
- *
- * `legendSlotVersion` bumps every time the owner releases the slot (round 3's carried gap): a
- * denied frame's claim attempt runs once, in its own mount effect, so with no signal that the slot
- * freed up it would sit denied forever even after the owning frame unmounts. Frames read it only to
- * put it in a dependency array — the effect re-running is the entire point, not the number itself.
+ * `legendClaimants` is {@link legendSlotReducer}'s queue (its head owns the slot) and
+ * `dispatchLegendSlot` feeds it. Outside any card there is no slot, so nothing ever claims.
  */
 export declare const ChartCardContext: import("react").Context<{
     legendSlot: HTMLDivElement | null;
     inCard: boolean;
     short: boolean;
-    claimLegendSlot: (id: string) => boolean;
-    releaseLegendSlot: (id: string) => void;
-    legendSlotVersion: number;
+    legendClaimants: readonly string[];
+    dispatchLegendSlot: Dispatch<LegendSlotAction>;
 }>;
 //# sourceMappingURL=chart-card-context.d.ts.map

package/dist/charts/primitives/chart-card-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card-context.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/chart-card-context.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB;gBACf,cAAc,GAAG,IAAI;YACzB,OAAO;WACR,OAAO;qBACG,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO;uBACrB,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;uBACpB,MAAM;EAQzB,CAAA"}
+{"version":3,"file":"chart-card-context.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/chart-card-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,qEAAqE;AACrE,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAExE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,gBAAgB,GAC7B,SAAS,MAAM,EAAE,CAInB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB;gBACf,cAAc,GAAG,IAAI;YACzB,OAAO;WACR,OAAO;qBACG,SAAS,MAAM,EAAE;wBACd,QAAQ,CAAC,gBAAgB,CAAC;EAO9C,CAAA"}

package/dist/charts/primitives/chart-card-context.js

@@ -1,13 +1,18 @@
 import { createContext } from "react";
+function legendSlotReducer(claimants, { type, id }) {
+  const held = claimants.includes(id);
+  if (type === "claim") return held ? claimants : [...claimants, id];
+  return held ? claimants.filter((c) => c !== id) : claimants;
+}
 const ChartCardContext = createContext({
   legendSlot: null,
   inCard: false,
   short: false,
-  claimLegendSlot: () => true,
-  releaseLegendSlot: () => {
-  },
-  legendSlotVersion: 0
+  legendClaimants: [],
+  dispatchLegendSlot: () => {
+  }
 });
 export {
-  ChartCardContext
+  ChartCardContext,
+  legendSlotReducer
 };

package/dist/charts/primitives/chart-frame-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-frame-layout.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/chart-frame-layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-frame-layout.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/chart-frame-layout.ts"],"names":[],"mappings":"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"}

package/dist/charts/primitives/chart-frame-layout.js

@@ -97,60 +97,54 @@ const legendEntryWidth = (item) => LEGEND_SWATCH_W + measureText(
   item.note === void 0 ? item.label : `${item.label} ${item.note}`,
   VX.legendFontSize
 );
-function fitChipRows(items, width, rows, allowZero = false) {
+function fitGreedyRows(items, fit) {
   let row = 1;
   let x = 0;
   let fitted = 0;
-  for (const item of items) {
-    const w = legendEntryWidth(item);
-    const next = x === 0 ? w : x + VX.legendGap + w;
-    if (x === 0 && allowZero && next > width) return 0;
-    if (next > width && x > 0) {
+  for (const [i, item] of items.entries()) {
+    const w = fit.widthOf(item);
+    const next = x === 0 ? w : x + fit.gap + w;
+    if (x === 0 && fit.allowZero === true && next > fit.width) return 0;
+    if (next > fit.width && x > 0) {
       row += 1;
-      if (row > rows) return fitted;
+      if (row > fit.rows) return fitted;
       x = w;
     } else {
       x = next;
     }
     fitted += 1;
+    x += fit.extraAfter?.(i) ?? 0;
   }
   return fitted;
 }
+const chipFit = { widthOf: legendEntryWidth, gap: VX.legendGap };
 function entriesWithinRows(items, width, rows) {
-  return fitChipRows(items, width, rows);
+  return fitGreedyRows(items, { ...chipFit, width, rows });
 }
 function entriesWithinChipRows(items, width, rows) {
   const total = items.length;
-  const fittedNoReserve = fitChipRows(items, width, rows);
+  const fittedNoReserve = entriesWithinRows(items, width, rows);
   if (fittedNoReserve >= total) return fittedNoReserve;
   const reserve = measureText(`All ${total}`, VX.legendFontSize) + VX.legendGap;
-  return fitChipRows(items, Math.max(width - reserve, 0), rows, true);
-}
-function fitDotRows(items, width, rows, dividerAfter, allowZero = false) {
-  let row = 1;
-  let x = 0;
-  let fitted = 0;
-  for (let i = 0; i < items.length; i += 1) {
-    const next = x === 0 ? LEGEND_DOT_SIZE : x + DOT_PITCH;
-    if (x === 0 && allowZero && next > width) return 0;
-    if (next > width && x > 0) {
-      row += 1;
-      if (row > rows) return fitted;
-      x = LEGEND_DOT_SIZE;
-    } else {
-      x = next;
-    }
-    fitted += 1;
-    if (dividerAfter.has(i)) x += DOT_PITCH;
-  }
-  return fitted;
+  return fitGreedyRows(items, {
+    ...chipFit,
+    width: Math.max(width - reserve, 0),
+    rows,
+    allowZero: true
+  });
 }
 function entriesWithinDotRows(items, width, rows, dividerAfter = /* @__PURE__ */ new Set()) {
+  const dotFit = {
+    widthOf: () => LEGEND_DOT_SIZE,
+    gap: DOT_PITCH - LEGEND_DOT_SIZE,
+    rows,
+    extraAfter: (i) => dividerAfter.has(i) ? DOT_PITCH : 0
+  };
   const total = items.length;
-  const fittedNoReserve = fitDotRows(items, width, rows, dividerAfter);
+  const fittedNoReserve = fitGreedyRows(items, { ...dotFit, width });
   if (fittedNoReserve >= total) return fittedNoReserve;
   const reserve = measureText(`All ${total}`, VX.legendFontSize) + DOT_PITCH;
-  return fitDotRows(items, Math.max(width - reserve, 0), rows, dividerAfter, true);
+  return fitGreedyRows(items, { ...dotFit, width: Math.max(width - reserve, 0), allowZero: true });
 }
 function legendEntryCap(input) {
   const { items, containerW, available, defaultMaxRows } = input;

package/dist/charts/primitives/legend-disclosure.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * `ChartLegend`'s `All N` disclosure state: which button opened it (the chip, or a dots-mode entry)
+ * and where the fixed panel sits. Focus moves into the panel on open and back to that trigger on
+ * EVERY close path; a scroll outside the panel or a resize closes it, since it is fixed to where the
+ * trigger WAS.
+ */
+export declare function useLegendDisclosure(coarse: boolean): {
+    open: boolean;
+    panelId: string;
+    openFrom: (trigger: HTMLButtonElement) => void;
+    close: () => void;
+    panel: {
+        panelRef: import("react").RefObject<HTMLDialogElement | null>;
+        panelId: string;
+        coarse: boolean;
+        placement: CSSProperties | null;
+        close: () => void;
+    };
+};
+/** The portalled panel itself — a popover under the chip on a fine pointer, a docked sheet (over a
+ * scrim) on a coarse one. Fixed-position, so opening it never grows the legend band. */
+export declare function LegendDisclosure({ panelRef, panelId, coarse, placement, close, fontSize, children, }: ReturnType<typeof useLegendDisclosure>['panel'] & {
+    fontSize: number;
+    children: ReactNode;
+}): import("react").ReactPortal | null;
+//# sourceMappingURL=legend-disclosure.d.ts.map

package/dist/charts/primitives/legend-disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend-disclosure.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/legend-disclosure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAwDrD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,OAAO;;;wBAQtB,iBAAiB;;;;;;;;;EAuD7C;AAED;wFACwF;AACxF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,GAAG;IACnD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB,sCAoCA"}