basalt-ui 1.31.0 → 1.32.0

package/configs/oxlint-plugin.test.ts

@@ -19,15 +19,18 @@ import basaltPlugin, {
   KNOWN_RULE_IDS,
   PLUGIN_RULE_ADVISORY,
   PLUGIN_RULE_GRACE,
+  RAW_BREAKPOINT_RECIPE,
   RETIRED_RULE_IDS,
 } from './oxlint-plugin.js'
 import { CTL_THEME } from '../src/theme/ctl-theme'
 import {
+  GRACE_PERIOD_KINDS,
   GUARD_RULES,
   PLUGIN_RULE_IDS,
   WAIVER_ID_ALIASES as GUARD_WAIVER_ID_ALIASES,
 } from '../src/guard/index.ts'
 import { PLUGIN_RULE_ID_LIST, SURFACES } from '../src/surfaces.ts'
+import { CONTAINER_CLASSES } from '../src/tokens/size-classes.ts'
 
 const PLUGIN_PATH = resolve(import.meta.dirname, 'oxlint-plugin.js')
 const OXLINT_BIN = resolve(import.meta.dirname, '..', '..', '..', 'node_modules', '.bin', 'oxlint')
@@ -1332,6 +1335,42 @@ describe('assertGraceLedger', () => {
   })
 })
 
+// ── twin lanes: one law, two lanes, one promotion ─────────────────────────────
+// A guard kind and a plugin rule that enforce ONE law in two lanes (CSS/text vs. JSX AST) must
+// promote together — a consumer failing one spelling and warned on the other is the confusion the
+// pairing exists to prevent. `raw-media-query` split from `basalt/raw-breakpoint` exactly that way
+// (1.32.0 vs 1.33.0). Twins are DERIVED, not hand-listed, from the two places they are declared: a
+// `WAIVER_ID_ALIASES` pair, and a guard entry whose `why` calls itself the twin of `basalt/<id>`.
+
+const pluginGrace = PLUGIN_RULE_GRACE as Record<string, GraceEntry>
+const guardGrace = GRACE_PERIOD_KINDS as Record<string, GraceEntry>
+
+function twinLanes(): Array<[kind: string, rule: string]> {
+  const pairs = new Map<string, string>()
+  for (const [kind, aliases] of Object.entries(WAIVER_ID_ALIASES)) {
+    for (const rule of aliases) if (kind in guardGrace || rule in pluginGrace) pairs.set(kind, rule)
+  }
+  for (const [kind, entry] of Object.entries(guardGrace)) {
+    const match = /twin of the oxlint plugin's `basalt\/([a-z-]+)`/.exec(entry.why)
+    if (match?.[1] !== undefined) pairs.set(kind, match[1])
+  }
+  return [...pairs].filter(([kind]) => kind in guardGrace)
+}
+
+describe('twin lanes share one promotion', () => {
+  it('derives the raw-media-query ↔ raw-breakpoint pair (the derivation is not silently empty)', () => {
+    expect(twinLanes()).toContainEqual(['raw-media-query', 'raw-breakpoint'])
+  })
+
+  it.each(twinLanes())('%s and basalt/%s are both in grace with the same promote', (kind, rule) => {
+    expect([kind, rule, guardGrace[kind]?.promote]).toEqual([
+      kind,
+      rule,
+      pluginGrace[rule]?.promote,
+    ])
+  })
+})
+
 describe('PLUGIN_RULE_GRACE', () => {
   const shipped = JSON.parse(readFileSync(resolve(import.meta.dirname, 'oxlint.json'), 'utf8')) as {
     rules: Record<string, unknown>
@@ -3467,6 +3506,149 @@ describe('basalt/raw-breakpoint', () => {
     expect(rules).not.toContain('raw-breakpoint')
   })
 
+  // The recipe's px keys are CONTAINER_CLASSES written out by hand in two places — the plugin
+  // (plain JS, cannot import TS source) and MIGRATING's rule entry. Retuning a class must fail here.
+  describe('recipe px literals ↔ CONTAINER_CLASSES', () => {
+    const boundaries = new Set<number>(Object.values(CONTAINER_CLASSES).filter((px) => px > 0))
+    const pxLiterals = (text: string) => [...text.matchAll(/(\d+)px/g)].map((m) => Number(m[1]))
+
+    it('every px key in the rule messages is a CONTAINER_CLASSES boundary', () => {
+      const found = pxLiterals(RAW_BREAKPOINT_RECIPE as string)
+      expect(found.length).toBeGreaterThan(0)
+      for (const px of found) expect([px, boundaries.has(px)]).toEqual([px, true])
+    })
+
+    it("every px value and the class table in MIGRATING's raw-breakpoint entry match", () => {
+      const migrating = readFileSync(resolve(import.meta.dir, '../MIGRATING.md'), 'utf8')
+      const start = migrating.indexOf('### `basalt/raw-breakpoint`')
+      expect(start).toBeGreaterThan(-1)
+      const end = migrating.indexOf('\n### ', start + 1)
+      const section = migrating.slice(start, end === -1 ? undefined : end)
+      for (const px of pxLiterals(section)) expect([px, boundaries.has(px)]).toEqual([px, true])
+      const { compact, regular, wide } = CONTAINER_CLASSES
+      expect(section).toContain(`compact ${compact} · regular ${regular} · wide ${wide}`)
+    })
+  })
+
+  // The sanctioned answer, read from @mantine/core 9.3 source: SimpleGrid type="container" writes
+  // each key verbatim as `@container simple-grid (min-width: <key>)`, Grid type="container" only
+  // goes container WITH a `breakpoints` map. Exempt exactly where Mantine resolves the object.
+  describe('Mantine type="container" grids', () => {
+    const grid = (jsx: string) =>
+      run(`import { Grid, SimpleGrid } from '@mantine/core'\nexport const C = () => ${jsx}\n`)
+    const CONTAINER_MESSAGE = /Theme breakpoint name under type="container"/
+
+    it('does NOT flag a px-keyed container SimpleGrid (the recipe)', () => {
+      expect(
+        grid(`<SimpleGrid type="container" cols={{ base: 1, '480px': 2, '800px': 3 }} />`).rules,
+      ).not.toContain('raw-breakpoint')
+    })
+
+    it('does NOT flag a lone `base` under type="container"', () => {
+      expect(grid(`<SimpleGrid type="container" cols={{ base: 2 }} />`).rules).not.toContain(
+        'raw-breakpoint',
+      )
+    })
+
+    it('flags a theme-named key on a container SimpleGrid — Mantine emits a dead (min-width: sm)', () => {
+      const { rules, output } = grid(`<SimpleGrid type="container" cols={{ base: 1, sm: 2 }} />`)
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('still flags type="media" (and a dynamic type) with the viewport message', () => {
+      for (const type of [`"media"`, `{kind}`]) {
+        const { rules, output } = grid(`<SimpleGrid type=${type} cols={{ base: 1, sm: 2 }} />`)
+        expect(rules).toContain('raw-breakpoint')
+        expect(CONTAINER_MESSAGE.test(output)).toBe(false)
+      }
+    })
+
+    it('does NOT flag Grid.Col spans under a container Grid with a breakpoints map', () => {
+      const src =
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px' }}>\n` +
+        `  {items.map((i) => <Grid.Col key={i} span={{ base: 12, sm: 6 }}>x</Grid.Col>)}\n` +
+        `</Grid>`
+      expect(grid(src).rules).not.toContain('raw-breakpoint')
+    })
+
+    it('flags Grid.Col spans under a container Grid with NO breakpoints — Mantine falls back to media', () => {
+      const { rules, output } = grid(
+        `<Grid type="container"><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('reports a const-extracted theme-keyed object on a container SimpleGrid — still a dead query', () => {
+      const { rules, output } = run(
+        `import { SimpleGrid } from '@mantine/core'\n` +
+          `const cols = { base: 1, sm: 2 }\n` +
+          `export const C = () => <SimpleGrid type="container" cols={cols} />\n`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    // Grid goes container only on a truthy map, and an empty one emits no query — so the exemption
+    // needs a map that statically resolves to a non-empty object, not the attribute's presence.
+    it.each([
+      ['undefined', `breakpoints={undefined}`, ''],
+      ['an empty object', `breakpoints={{}}`, ''],
+      ['an unresolvable identifier', `breakpoints={imported}`, `import { imported } from './bp'\n`],
+    ])('flags Grid.Col spans under a container Grid whose breakpoints is %s', (_, bp, extra) => {
+      const { rules, output } = run(
+        `import { Grid } from '@mantine/core'\n${extra}` +
+          `export const C = () => <Grid type="container" ${bp}><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>\n`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('does NOT flag Grid.Col spans under a container Grid whose breakpoints is a same-file const', () => {
+      const { rules } = run(
+        `import { Grid } from '@mantine/core'\n` +
+          `const bp = { xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }\n` +
+          `export const C = () => <Grid type="container" breakpoints={bp}><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>\n`,
+      )
+      expect(rules).not.toContain('raw-breakpoint')
+    })
+
+    // Only the grid-keyed props route through the container queries; Box style props on the same
+    // element still compile to viewport @media, so they keep the ordinary viewport message.
+    it.each([
+      [
+        'SimpleGrid p',
+        `<SimpleGrid type="container" cols={{ base: 1, '480px': 2 }} p={{ base: 'xs', lg: 'md' }} />`,
+      ],
+      [
+        'Grid mt',
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }} mt={{ base: 0, sm: 'md' }}>x</Grid>`,
+      ],
+      [
+        'Grid.Col mih',
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }}><Grid.Col span={6} mih={{ base: 80, lg: 120 }}>x</Grid.Col></Grid>`,
+      ],
+    ])('flags a Box style prop on a container grid as viewport (%s)', (_, jsx) => {
+      const { rules, output } = grid(jsx)
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(false)
+    })
+
+    it('does NOT flag container-routed spacing props on a container grid', () => {
+      const src =
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }} gap={{ base: 'xs', sm: 'md' }}>` +
+        `<Grid.Col span={{ base: 12, sm: 6 }} order={{ base: 2, sm: 1 }}>x</Grid.Col></Grid>`
+      expect(grid(src).rules).not.toContain('raw-breakpoint')
+    })
+
+    it('still flags Grid.Col spans under an ordinary Grid', () => {
+      expect(
+        grid(`<Grid><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>`).rules,
+      ).toContain('raw-breakpoint')
+    })
+  })
+
   it('flags visibleFrom/hiddenFrom outside a shell home', () => {
     const { rules } = run(
       `import { Box } from '@mantine/core'\n` +

package/dist/charts/kinds/BandStrip.d.ts.map

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

package/dist/charts/kinds/BandStrip.js

@@ -4,18 +4,12 @@ import { memo, useMemo } from "react";
 import { assertRequiredProps } from "../../common/validate.js";
 import { VX, alpha } from "../../tokens/index.js";
 import { useBandPlot } from "../hooks/useBandPlot.js";
-import { AxisBottomDate } from "../primitives/Axes.js";
 import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow
-} from "../primitives/ChartTooltip.js";
+import { TooltipRow } from "../primitives/ChartTooltip.js";
 import { Crosshair } from "../primitives/Crosshair.js";
 import { HatchPattern, hatchFill, hatchSizeFor } from "../primitives/HatchPattern.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
 import { fmtAxisDate } from "../utils/format.js";
+import { BandAxisOverlay, BandTooltip, clampFraction } from "./band-chrome.js";
 import { isDev } from "../../common/is-dev.js";
 const DEFAULT_MARKER_INSET = 6;
 const NO_READING = "\u2014";
@@ -85,7 +79,7 @@ function BandStripPlot(props) {
     ...marginOverride !== void 0 && { margin: marginOverride },
     ...tooltip !== void 0 && { tooltip }
   });
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band;
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band;
   const stripHeight = Math.max(plot.height - margin.top - margin.bottom, 1);
   const hatchId = `${chartId}-band-absent`;
   if (absentState !== void 0 && !styleByKey.has(absentState)) {
@@ -171,8 +165,6 @@ function BandStripPlot(props) {
     return out;
   }, [bands, getBand, getX, styleByKey, hidden, bandWidth, step, stripHeight, hatchId, absentState]);
   if (plotWidth <= 0 || bands.length === 0) return null;
-  const cfg = tooltip === false ? void 0 : tooltip;
-  const badge = cfg?.label === void 0 || point === null ? null : cfg.label(point);
   const row = point === null ? null : deriveBandRow(getBand(point), styleByKey, hidden, point);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -196,71 +188,31 @@ function BandStripPlot(props) {
             rects,
             crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: stripHeight }),
             /* @__PURE__ */ jsx(
-              AxisBottomDate,
+              BandAxisOverlay,
               {
-                top: stripHeight,
-                scale,
-                tickValues: band.tickValues,
-                tickFormat: (v) => formatX(String(v)),
-                anchorTerminals: band.xAnchorTerminals,
-                ...band.xWrapWidth !== void 0 && { wrapWidth: band.xWrapWidth }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              HoverOverlay,
-              {
-                width: plotWidth,
+                band,
                 height: stripHeight,
-                onMove: cursor.onPointerMove,
-                onDown: cursor.onPointerDown,
-                onUp: cursor.onPointerUp,
-                onLeave: cursor.onPointerLeave,
-                onKeyDown: cursor.onKeyDown,
-                onBlur: cursor.onBlur,
-                valueMax: Math.max(bands.length - 1, 0),
-                ...point !== null && {
-                  valueNow: bands.indexOf(point),
-                  valueText: formatX(getX(point))
-                },
-                ...ariaLabel !== void 0 && { ariaLabel }
+                getX,
+                formatX,
+                ariaLabel
               }
             )
           ] })
         ]
       }
     ),
-    band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
-      /* @__PURE__ */ jsx(
-        TooltipHeader,
-        {
-          date: getX(point),
-          ...cfg?.formatHeader !== void 0 && {
-            format: (key) => cfg.formatHeader?.(key, point) ?? key
-          },
-          ...badge !== null && { label: badge.text, labelColor: badge.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        cfg?.prependRows?.(point, { hidden }),
-        row !== null && /* @__PURE__ */ jsx(
-          TooltipRow,
-          {
-            color: row.color,
-            label: row.label,
-            value: row.value,
-            shape: row.shape,
-            dashed: row.dashed
-          }
-        ),
-        cfg?.extraRows?.(point, { hidden })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx(BandTooltip, { band, tooltip, getX, hidden, children: row !== null && /* @__PURE__ */ jsx(
+      TooltipRow,
+      {
+        color: row.color,
+        label: row.label,
+        value: row.value,
+        shape: row.shape,
+        dashed: row.dashed
+      }
+    ) })
   ] });
 }
-function clampFraction(value) {
-  if (value === void 0 || !Number.isFinite(value)) return 0;
-  return Math.min(Math.max(value, 0), 1);
-}
 function deriveBandRow(span, styleByKey, hidden, datum) {
   const style = styleByKey.get(span.state);
   if (style === void 0) {

package/dist/charts/kinds/DualPanel.d.ts.map

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

package/dist/charts/kinds/DualPanel.js

@@ -11,11 +11,12 @@ import {
   ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow
+  TooltipRow,
+  TooltipRows
 } from "../primitives/ChartTooltip.js";
 import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
 import { Crosshair, SeriesDot } from "../primitives/Crosshair.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
+import { cursorSliderProps, HoverOverlay } from "../primitives/HoverOverlay.js";
 import { ZoneRects } from "../primitives/ZoneRects.js";
 import { useChartCursor } from "../hooks/useChartCursor.js";
 import { autoMargin, probeAxisLabels } from "../layout/auto-margin.js";
@@ -365,18 +366,7 @@ function DualPanelPlot(props) {
               {
                 width: xMax,
                 height: topH + PANE_GAP,
-                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 }
+                ...cursorSliderProps({ cursor, data, getX, formatX, ariaLabel })
               }
             )
           ] }),
@@ -454,18 +444,7 @@ function DualPanelPlot(props) {
         }
       ),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        deriveTooltipRows(visibleSeries, point, formatTop).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
-        )),
+        /* @__PURE__ */ jsx(TooltipRows, { rows: deriveTooltipRows(visibleSeries, point, formatTop) }),
         barVisible && (() => {
           const v = getBar(point);
           if (v === null || v === void 0 || Number.isNaN(v)) return null;

package/dist/charts/kinds/MirroredBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MirroredBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAUrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG;IAC5B;mEAC+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;sBACkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;oFACgF;IAChF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,GAAG;IAC/C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,sFAAsF;IACtF,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;;;;OAKG;IACH,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,yCAAyC;IACzC,EAAE,EAAE,eAAe,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAA;IACrB;8FAC0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC;kCAC8B;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;kGAC8F;IAC9F,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC;gFAC4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AA8BD;;;;;;;;;;;;;GAaG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAwBxD;AAgWD,eAAO,MAAM,YAAY,EAAuB,OAAO,iBAAiB,CAAA"}
+{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MirroredBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAIrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI/D,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG;IAC5B;mEAC+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;sBACkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;oFACgF;IAChF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,GAAG;IAC/C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,sFAAsF;IACtF,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;;;;OAKG;IACH,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,yCAAyC;IACzC,EAAE,EAAE,eAAe,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAA;IACrB;8FAC0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC;kCAC8B;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;kGAC8F;IAC9F,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC;gFAC4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AA8BD;;;;;;;;;;;;;GAaG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAwBxD;AA+SD,eAAO,MAAM,YAAY,EAAuB,OAAO,iBAAiB,CAAA"}

package/dist/charts/kinds/MirroredBars.js

@@ -6,19 +6,14 @@ import { assertRequiredProps } from "../../common/validate.js";
 import { VX, alpha } from "../../tokens/index.js";
 import { useBandPlot } from "../hooks/useBandPlot.js";
 import { probeAxisLabels } from "../layout/auto-margin.js";
-import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
+import { AxisLeftNumeric } from "../primitives/Axes.js";
 import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow
-} from "../primitives/ChartTooltip.js";
+import { TooltipRows } from "../primitives/ChartTooltip.js";
 import { Crosshair } from "../primitives/Crosshair.js";
 import { HatchPattern, hatchFill, hatchSizeFor } from "../primitives/HatchPattern.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
 import { deriveTooltipRows } from "../series.js";
 import { fmtAxisDate } from "../utils/format.js";
+import { BandAxisOverlay, BandTooltip, clampFraction } from "./band-chrome.js";
 const DEFAULT_UP_FRACTION = 0.35;
 const DEFAULT_PANE_TICKS = 3;
 function assertPaneKey(side, key, resolved, series) {
@@ -107,7 +102,7 @@ function MirroredBarsPlot(props) {
     ...marginOverride !== void 0 && { margin: marginOverride },
     ...tooltip !== void 0 && { tooltip }
   });
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band;
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band;
   const barBand = Math.max(plot.height - margin.top - margin.bottom, 2);
   const upHeight = Math.max(Math.round(barBand * upFraction), 1);
   const downHeight = Math.max(barBand - upHeight, 1);
@@ -198,8 +193,6 @@ function MirroredBarsPlot(props) {
     hatchId
   ]);
   if (plotWidth <= 0 || bands.length === 0) return null;
-  const cfg = tooltip === false ? void 0 : tooltip;
-  const badge = cfg?.label === void 0 || point === null ? null : cfg.label(point);
   const visibleSeries = series.filter((s) => !hidden.has(s.key)).map((s) => {
     if (s.formatValue !== void 0) return s;
     if (s.key === up.key) return { ...s, formatValue: (v) => up.format(v) };
@@ -258,73 +251,22 @@ function MirroredBarsPlot(props) {
             ),
             crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: barBand }),
             /* @__PURE__ */ jsx(
-              AxisBottomDate,
+              BandAxisOverlay,
               {
-                top: barBand,
-                scale,
-                tickValues: band.tickValues,
-                tickFormat: (v) => formatX(String(v)),
-                anchorTerminals: band.xAnchorTerminals,
-                ...band.xWrapWidth !== void 0 && { wrapWidth: band.xWrapWidth }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              HoverOverlay,
-              {
-                width: plotWidth,
+                band,
                 height: barBand,
-                onMove: cursor.onPointerMove,
-                onDown: cursor.onPointerDown,
-                onUp: cursor.onPointerUp,
-                onLeave: cursor.onPointerLeave,
-                onKeyDown: cursor.onKeyDown,
-                onBlur: cursor.onBlur,
-                valueMax: Math.max(bands.length - 1, 0),
-                ...point !== null && {
-                  valueNow: bands.indexOf(point),
-                  valueText: formatX(getX(point))
-                },
-                ...ariaLabel !== void 0 && { ariaLabel }
+                getX,
+                formatX,
+                ariaLabel
               }
             )
           ] })
         ]
       }
     ),
-    band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
-      /* @__PURE__ */ jsx(
-        TooltipHeader,
-        {
-          date: getX(point),
-          ...cfg?.formatHeader !== void 0 && {
-            format: (key) => cfg.formatHeader?.(key, point) ?? key
-          },
-          ...badge !== null && { label: badge.text, labelColor: badge.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        cfg?.prependRows?.(point, { hidden }),
-        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
-        )),
-        cfg?.extraRows?.(point, { hidden })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx(BandTooltip, { band, tooltip, getX, hidden, children: /* @__PURE__ */ jsx(TooltipRows, { rows }) })
   ] });
 }
-function clampFraction(value) {
-  if (value === void 0 || !Number.isFinite(value)) return 0;
-  return Math.min(Math.max(value, 0), 1);
-}
 function finiteOrNull(v) {
   return v === null || v === void 0 || Number.isNaN(v) ? null : v;
 }

package/dist/charts/kinds/band-chrome.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { BandPlot, BandTooltipConfig } from '../hooks/useBandPlot.js';
+/**
+ * The chrome `BandStrip` and `MirroredBars` share around their own marks — the slot axis, the
+ * keyboard/pointer overlay and the tooltip shell — so the two `useBandPlot` kinds cannot drift in
+ * any of them. Internal; neither is exported from a barrel.
+ *
+ * theme-allow-file hand-rolled-plot — the slot axis and overlay of the two declared banded
+ * exceptions (`BandStrip`, `MirroredBars`), which carry the same waiver for the same reason.
+ */
+/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
+ * end, since the alternative is a band that does not render at all. */
+export declare function clampFraction(value: number | undefined): number;
+/** The slot axis under a `height`-tall band row, plus the hover/keyboard overlay over it. */
+export declare function BandAxisOverlay<T>({ band, height, getX, formatX, ariaLabel, }: {
+    band: BandPlot<T>;
+    height: number;
+    getX: (d: T) => string;
+    formatX: (key: string) => string;
+    ariaLabel: string | undefined;
+}): import("react").JSX.Element;
+/** The tooltip shell: header (+ badge), the consumer's prepended rows, the kind's own derived
+ * `children` rows, the consumer's extra rows. Renders nothing off-hover or with `tooltip: false`. */
+export declare function BandTooltip<T>({ band, tooltip, getX, hidden, children, }: {
+    band: BandPlot<T>;
+    tooltip: BandTooltipConfig<T> | false | undefined;
+    getX: (d: T) => string;
+    hidden: ReadonlySet<string>;
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=band-chrome.d.ts.map

package/dist/charts/kinds/band-chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"band-chrome.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/band-chrome.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAKvE;;;;;;;GAOG;AAEH;uEACuE;AACvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG/D;AAED,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,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,+BAkBA;AAED;qGACqG;AACrG,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjB,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IACjD,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB,sCAqBA"}

package/dist/charts/kinds/band-chrome.js

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AxisBottomDate } from "../primitives/Axes.js";
+import { ChartTooltipFloat, TooltipBody, TooltipHeader } from "../primitives/ChartTooltip.js";
+import { cursorSliderProps, HoverOverlay } from "../primitives/HoverOverlay.js";
+function clampFraction(value) {
+  if (value === void 0 || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value, 0), 1);
+}
+function BandAxisOverlay({
+  band,
+  height,
+  getX,
+  formatX,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AxisBottomDate,
+      {
+        top: height,
+        scale: band.scale,
+        tickValues: band.tickValues,
+        tickFormat: (v) => formatX(String(v)),
+        anchorTerminals: band.xAnchorTerminals,
+        ...band.xWrapWidth !== void 0 && { wrapWidth: band.xWrapWidth }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HoverOverlay,
+      {
+        width: band.plotWidth,
+        height,
+        ...cursorSliderProps({ cursor: band.cursor, data: band.bands, getX, formatX, ariaLabel })
+      }
+    )
+  ] });
+}
+function BandTooltip({
+  band,
+  tooltip,
+  getX,
+  hidden,
+  children
+}) {
+  const { point } = band;
+  if (!band.showTooltip || point === null) return null;
+  const cfg = tooltip === false ? void 0 : tooltip;
+  const badge = cfg?.label === void 0 ? null : cfg.label(point);
+  return /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
+    /* @__PURE__ */ jsx(
+      TooltipHeader,
+      {
+        date: getX(point),
+        ...cfg?.formatHeader !== void 0 && {
+          format: (key) => cfg.formatHeader?.(key, point) ?? key
+        },
+        ...badge !== null && { label: badge.text, labelColor: badge.color }
+      }
+    ),
+    /* @__PURE__ */ jsxs(TooltipBody, { children: [
+      cfg?.prependRows?.(point, { hidden }),
+      children,
+      cfg?.extraRows?.(point, { hidden })
+    ] })
+  ] });
+}
+export {
+  BandAxisOverlay,
+  BandTooltip,
+  clampFraction
+};