basalt-ui 1.30.2 → 1.31.0

package/dist/charts/primitives/ChartLegend.js

@@ -1,7 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+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 { useChartTierMetrics } from "./chart-tier.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";
 const LEGEND_ITEM_BASE = {
   display: "flex",
   alignItems: "center",
@@ -20,33 +23,68 @@ 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 };
+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) {
+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 +183,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 +246,105 @@ 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 [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 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) => openDisclosure(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 +354,63 @@ 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 ? setDisclosure(null) : openDisclosure(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,
+        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
+        )
+      ]
     }
   );
 }

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;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"}

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",
@@ -132,7 +132,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 +147,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(

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

@@ -6,10 +6,15 @@ import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } fro
  * 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, }: {
+export declare function HoverOverlay({ width, height, onMove, onDown, onUp, onLeave, onKeyDown, onBlur, ariaLabel, valueNow, valueMax, valueText, }: {
     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>;

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;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"}

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,32 +14,40 @@ 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
+      }
+    )
   );
 }
 export {

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,29 @@
+/**
+ * `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.
+ *
+ * `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.
+ */
+export declare const ChartCardContext: import("react").Context<{
+    legendSlot: HTMLDivElement | null;
+    inCard: boolean;
+    short: boolean;
+    claimLegendSlot: (id: string) => boolean;
+    releaseLegendSlot: (id: string) => void;
+    legendSlotVersion: number;
+}>;
+//# 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":"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"}

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

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+const ChartCardContext = createContext({
+  legendSlot: null,
+  inCard: false,
+  short: false,
+  claimLegendSlot: () => true,
+  releaseLegendSlot: () => {
+  },
+  legendSlotVersion: 0
+});
+export {
+  ChartCardContext
+};