basalt-ui 1.30.2 → 1.32.0

package/dist/charts/primitives/ChartLegend.js

@@ -1,7 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { alpha, VX } from "../../tokens/index.js";
-import { useChartTierMetrics } from "./chart-tier.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",
@@ -20,33 +21,26 @@ const LEGEND_ITEM_BUTTON = {
   color: "inherit",
   textAlign: "inherit"
 };
-const GROUP_ORDER = ["series", "overlay", "reference"];
 const NO_HIDDEN = /* @__PURE__ */ new Set();
-const roleOf = (item) => item.role ?? "series";
-function orderEntries(items, groups) {
-  if (!groups) return { entries: items, dividerAfter: /* @__PURE__ */ new Set() };
-  const dividerAfter = /* @__PURE__ */ new Set();
-  const entries = [];
-  const nonEmptyGroups = GROUP_ORDER.map(
-    (role) => items.filter((item) => roleOf(item) === role)
-  ).filter((group) => group.length > 0);
-  nonEmptyGroups.forEach((group, i) => {
-    entries.push(...group);
-    if (i < nonEmptyGroups.length - 1) dividerAfter.add(entries.length - 1);
-  });
-  return { entries, dividerAfter };
-}
-function wrapperStyle(placement, fontSize) {
+function wrapperStyle(placement, fontSize, dots) {
   const vertical = placement === "left" || placement === "right";
+  const gap = dots ? DOTS_HIT_GAP : VX.legendGap;
   return {
     display: "flex",
     flexDirection: vertical ? "column" : "row",
     flexWrap: vertical ? "nowrap" : "wrap",
     alignItems: vertical ? "flex-start" : "center",
-    justifyContent: vertical ? "flex-start" : "center",
-    columnGap: VX.legendGap,
-    rowGap: VX.legendGap,
-    padding: "8px 0 2px",
+    justifyContent: "flex-start",
+    columnGap: gap,
+    // Always the tight row gap (R2C-9): the wider dots COLUMN gap is a hit-overlap cap, not
+    // breathing room between wrapped rows — a dots-mode header legend is 1 row by law
+    // (`LEGEND_ROWS.header` in `chart-layout.ts`) anyway, so this only ever shows in the band.
+    rowGap: LEGEND_ROW_GAP,
+    // Caps each entry's `[data-basalt-hit]` overlay at the real inter-entry gap (styles.css).
+    ...{ "--vx-hit-gap": `${gap}px` },
+    // A dots-mode row has no text baseline to breathe around — the header-fold law (wave 8) is
+    // the reason this row exists at all, so it gets the same tight treatment.
+    padding: dots ? "4px 0 2px" : "8px 0 2px",
     fontSize,
     color: VX.muted
   };
@@ -145,6 +139,21 @@ const LEGEND_CHILD_STYLE = {
   fontSize: "0.85em",
   opacity: 0.75
 };
+function LegendDot({ item }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: LEGEND_DOT_SIZE,
+        height: LEGEND_DOT_SIZE,
+        borderRadius: "50%",
+        // theme-allow raw-surface — a circle shape, not a surface corner
+        backgroundColor: item.color,
+        flexShrink: 0
+      }
+    }
+  );
+}
 function LegendChildSwatch({ item }) {
   if (item.shape === "bar") {
     return /* @__PURE__ */ jsx(
@@ -193,59 +202,57 @@ function ChartLegend({
   placement = "bottom",
   groups = false,
   maxRows,
+  mode = "chips",
   className,
   style
 }) {
-  const tier = useChartTierMetrics();
-  const [expanded, setExpanded] = useState(false);
-  const handleEnter = (e) => {
-    const key = e.currentTarget.dataset["legendKey"];
-    if (key !== void 0) onHighlight?.(key);
-  };
+  const tier = useChartMetrics();
+  const coarse = useCoarsePointer();
+  const { open, panelId, openFrom, close, panel } = useLegendDisclosure(coarse);
+  const handleEnter = (key) => onHighlight?.(key);
   const handleLeave = () => onHighlight?.(null);
-  const handleToggle = (e) => {
-    const key = e.currentTarget.dataset["legendKey"];
-    if (key !== void 0) onToggle?.(key);
-  };
   const idPrefix = chartId ? `${chartId}-` : "";
   const vertical = placement === "left" || placement === "right";
   const { entries, dividerAfter } = orderEntries(items, groups);
-  const cap = maxRows ?? tier.legendMaxRows;
-  const rolledUp = cap === void 0 ? 0 : Math.max(entries.length - cap, 0);
-  const visible = rolledUp > 0 && !expanded ? entries.slice(0, cap) : entries;
-  const nodes = [];
-  visible.forEach((item, i) => {
-    nodes.push(
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          "data-legend-key": item.key,
-          "aria-label": item.note ? `${item.label} \u2014 ${item.note}` : item.label,
-          ...onToggle !== void 0 && { "aria-pressed": !hidden.has(item.key) },
-          style: {
-            ...LEGEND_ITEM_BUTTON,
-            cursor: onToggle === void 0 ? "default" : "pointer",
-            // Toggled-off wins over hover-dimming: a hidden series must read as hidden even while
-            // it is the one being hovered.
-            opacity: hidden.has(item.key) ? 0.35 : highlighted === null || highlighted === item.key ? 1 : 0.3,
-            textDecoration: hidden.has(item.key) ? "line-through" : "none"
-          },
-          ...onToggle !== void 0 && { onClick: handleToggle },
-          onMouseEnter: handleEnter,
-          onMouseLeave: handleLeave,
-          onFocus: handleEnter,
-          onBlur: handleLeave,
-          children: [
-            /* @__PURE__ */ jsx(LegendSwatch, { item, idPrefix }),
-            /* @__PURE__ */ jsx("span", { children: item.label }),
-            item.note ? /* @__PURE__ */ jsx("span", { style: LEGEND_NOTE_STYLE, children: item.note }) : null,
-            item.children?.map((child) => /* @__PURE__ */ jsx(LegendChild, { item: child }, child.key))
-          ]
+  const rolledUp = maxRows === void 0 ? 0 : Math.max(entries.length - maxRows, 0);
+  const visible = rolledUp > 0 ? entries.slice(0, maxRows) : entries;
+  const entryButton = (item, inPanel = false) => {
+    const isDotTrigger = !inPanel && mode === "dots";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-basalt-hit": true,
+        ...!inPanel && { "data-legend-key": item.key },
+        "aria-label": item.note ? `${item.label} \u2014 ${item.note}` : item.label,
+        ...isDotTrigger && { title: item.label, "aria-haspopup": "dialog" },
+        ...isDotTrigger ? { "aria-expanded": open, "aria-controls": panelId } : onToggle !== void 0 && { "aria-pressed": !hidden.has(item.key) },
+        style: {
+          ...LEGEND_ITEM_BUTTON,
+          cursor: onToggle === void 0 && !isDotTrigger ? "default" : "pointer",
+          // Toggled-off wins over hover-dimming: a hidden series must read as hidden even while
+          // it is the one being hovered.
+          opacity: hidden.has(item.key) ? 0.35 : highlighted === null || highlighted === item.key ? 1 : 0.3,
+          textDecoration: hidden.has(item.key) ? "line-through" : "none"
         },
-        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),
+        onBlur: handleLeave,
+        children: !inPanel && mode === "dots" ? /* @__PURE__ */ jsx(LegendDot, { item }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(LegendSwatch, { item, idPrefix: inPanel ? `${idPrefix}disclosure-` : idPrefix }),
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          item.note ? /* @__PURE__ */ jsx("span", { style: LEGEND_NOTE_STYLE, children: item.note }) : null,
+          item.children?.map((child) => /* @__PURE__ */ jsx(LegendChild, { item: child }, child.key))
+        ] })
+      },
+      item.key
     );
+  };
+  const nodes = [];
+  visible.forEach((item, i) => {
+    nodes.push(entryButton(item));
     if (dividerAfter.has(i))
       nodes.push(/* @__PURE__ */ jsx(LegendDivider, { columnLayout: vertical }, `divider-${item.key}`));
   });
@@ -255,21 +262,27 @@ function ChartLegend({
         "button",
         {
           type: "button",
-          "aria-expanded": expanded,
-          onClick: () => setExpanded((prev) => !prev),
+          "data-basalt-hit": true,
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          "aria-controls": panelId,
+          onClick: (e) => open ? close() : openFrom(e.currentTarget),
           style: { ...LEGEND_ITEM_BUTTON, cursor: "pointer", textDecoration: "underline" },
-          children: expanded ? "Show less" : `+${rolledUp} more`
+          children: `All ${entries.length}`
         },
         "legend-more"
       )
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ...className !== void 0 && { className },
-      style: { ...wrapperStyle(placement, tier.legendFontSize), ...style },
-      children: nodes
+      style: { ...wrapperStyle(placement, tier.legendFontSize, mode === "dots"), ...style },
+      children: [
+        nodes,
+        /* @__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,sCAsDA"}
+{"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

@@ -3,11 +3,11 @@ import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { VX } from "../../tokens/index.js";
 import { fmtTooltipDate } from "../utils/format.js";
-import { useChartTierMetrics } from "./chart-tier.js";
+import { useChartMetrics } from "./chart-tier.js";
 const TOOLTIP_STYLES = {
   position: "fixed",
   pointerEvents: "none",
-  zIndex: 9999,
+  zIndex: VX.zIndexFloating,
   backgroundColor: VX.surface.panel,
   borderRadius: "var(--vx-radius-floating)",
   padding: "0",
@@ -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 });
 }
@@ -132,7 +146,7 @@ function ChartTooltipFloat({
   const ref = useRef(null);
   const [box, setBox] = useState(null);
   const isClient = useIsClient();
-  const { tooltipMinWidth } = useChartTierMetrics();
+  const { tooltipMinWidth } = useChartMetrics();
   useLayoutEffect(() => {
     const el = ref.current;
     if (el === null) return;
@@ -147,6 +161,7 @@ function ChartTooltipFloat({
   const height = box?.height ?? 0;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
+  if (anchor.y < 0 || anchor.y > vh) return null;
   const flipsLeft = anchor.x + TOOLTIP_GAP + width + VIEWPORT_MARGIN > vw;
   const left = flipsLeft ? Math.max(VIEWPORT_MARGIN, anchor.x - TOOLTIP_GAP - width) : anchor.x + TOOLTIP_GAP;
   const top = Math.min(
@@ -177,5 +192,6 @@ export {
   ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow
+  TooltipRow,
+  TooltipRows
 };

package/dist/charts/primitives/Crosshair.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { VX } from "../../tokens/index.js";
-import { useChartTierMetrics } from "./chart-tier.js";
+import { useChartMetrics } from "./chart-tier.js";
 function Crosshair({
   x,
   top,
@@ -14,7 +14,7 @@ function SeriesDot({
   color,
   r
 }) {
-  const { dotR } = useChartTierMetrics();
+  const { dotR } = useChartMetrics();
   return /* @__PURE__ */ jsx("circle", { cx, cy, r: r ?? dotR, fill: color, stroke: VX.dotStroke, strokeWidth: 2 });
 }
 export {

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

@@ -1,15 +1,15 @@
 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, 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>;
+    /** Coarse-pointer tap: resolves + shows the tooltip immediately, with no preceding `pointermove`
+     * (`docs/CHARTS-SPEC.md` §4, Tooltip). The press is provisional; `onUp` commits it. */
+    onDown?: PointerEventHandler<SVGRectElement>;
+    /** Commits the provisional touch press so the pin survives the lift. */
+    onUp?: PointerEventHandler<SVGRectElement>;
     onLeave: PointerEventHandler<SVGRectElement>;
     /** Present = the overlay is focusable and scrubs on ←/→. */
     onKeyDown?: KeyboardEventHandler<SVGRectElement>;
@@ -21,5 +21,25 @@ export declare function HoverOverlay({ width, height, onMove, onLeave, onKeyDown
     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;AAEzF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,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,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,+BA8BA"}
+{"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

@@ -1,8 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import styles from "./HoverOverlay.module.css";
 function HoverOverlay({
   width,
   height,
   onMove,
+  onDown,
+  onUp,
   onLeave,
   onKeyDown,
   onBlur,
@@ -11,34 +14,58 @@ function HoverOverlay({
   valueMax,
   valueText
 }) {
-  return /* @__PURE__ */ jsx(
-    "rect",
-    {
-      width,
-      height,
-      fill: "transparent",
-      ...onKeyDown !== void 0 && {
-        tabIndex: 0,
-        // `slider`, not `application`: `application` would drop this node out of the screen
-        // reader's normal browse mode entirely, which is a far bigger hammer than an arrow-key
-        // scrub needs. A slider announces both the affordance and the focused point.
-        role: "slider",
-        "aria-label": ariaLabel ?? "Chart data \u2014 use arrow keys to scrub",
-        "aria-orientation": "horizontal",
-        "aria-valuemin": 0,
-        ...valueMax !== void 0 && { "aria-valuemax": valueMax },
-        ...valueNow !== void 0 && { "aria-valuenow": valueNow },
-        ...valueText !== void 0 && { "aria-valuetext": valueText },
-        onKeyDown,
-        ...onBlur !== void 0 && { onBlur }
-      },
-      style: { touchAction: "pan-y" },
-      onPointerMove: onMove,
-      onPointerLeave: onLeave,
-      onPointerCancel: onLeave
-    }
+  return (
+    // `touch-action: pan-y` lives on the plot's `<svg>` (each kind's own), NOT here: Chrome ignores
+    // `touch-action` on an SVG child `<rect>`, so the browser claims a horizontal pan and cancels
+    // the pointer (`R2C-2`). The `overlay` class owns the focus ring: no UA outline on tap, a VX
+    // accent inset under `:focus-visible` (`R2C-15`).
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: styles.overlay,
+        width,
+        height,
+        fill: "transparent",
+        ...onKeyDown !== void 0 && {
+          tabIndex: 0,
+          // `slider`, not `application`: `application` would drop this node out of the screen
+          // reader's normal browse mode entirely, which is a far bigger hammer than an arrow-key
+          // scrub needs. A slider announces both the affordance and the focused point.
+          role: "slider",
+          "aria-label": ariaLabel ?? "Chart data \u2014 use arrow keys to scrub",
+          "aria-orientation": "horizontal",
+          "aria-valuemin": 0,
+          ...valueMax !== void 0 && { "aria-valuemax": valueMax },
+          ...valueNow !== void 0 && { "aria-valuenow": valueNow },
+          ...valueText !== void 0 && { "aria-valuetext": valueText },
+          onKeyDown,
+          ...onBlur !== void 0 && { onBlur }
+        },
+        onPointerMove: onMove,
+        ...onDown !== void 0 && { onPointerDown: onDown },
+        ...onUp !== void 0 && { onPointerUp: onUp },
+        onPointerLeave: onLeave,
+        onPointerCancel: onLeave
+      }
+    )
   );
 }
+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/HoverOverlay.module.css

@@ -0,0 +1,13 @@
+/*
+ * `HoverOverlay` — the transparent plot rect every cartesian kind scrubs through. A tap focuses it
+ * on pointerdown, so the UA's own outline would ring the whole plot on every phone tap (`R2C-15`);
+ * keyboard focus keeps a VX accent inset instead.
+ */
+.overlay {
+  outline: none;
+}
+
+.overlay:focus-visible {
+  outline: 1px solid var(--vx-accent);
+  outline-offset: -1px;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Typed CSS-module declaration — named string props, so dot access stays verbatim under the
+ * package's strict flags.
+ */
+declare const classes: {
+  readonly overlay: string
+}
+export default classes

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

@@ -0,0 +1,33 @@
+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
+ * (`docs/CHARTS-SPEC.md` §5, Legend), so a card has one chrome band, not two — and `short`, the same
+ * `measuredHeight < CARD_SHORT_HEIGHT` flag `ChartCard` already computes for the header-fold law
+ * (`data-basalt-card-short`), threaded through so `ChartFrame` can fold its header-slot legend to
+ * '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.
+ *
+ * `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;
+    legendClaimants: readonly string[];
+    dispatchLegendSlot: Dispatch<LegendSlotAction>;
+}>;
+//# sourceMappingURL=chart-card-context.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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,
+  legendClaimants: [],
+  dispatchLegendSlot: () => {
+  }
+});
+export {
+  ChartCardContext,
+  legendSlotReducer
+};