basalt-ui 1.31.0 → 1.32.0

package/dist/guard/index.js

@@ -33,7 +33,8 @@ const SIZE_CLASS_LITERALS = /* @__PURE__ */ new Set(["52.5em", "75em", "52.49375
 const SHELL_CSS_PATH = /(?:^|\/)shell\//;
 function isSanctionedShellMediaQuery(relPath, query) {
   if (!SHELL_CSS_PATH.test(relPath)) return false;
-  const widths = query.match(new RegExp(CSS_WIDTH_NUM, "g")) ?? [];
+  const widthClauses = query.match(/\([^()]*\bwidth\b[^()]*\)/g) ?? [];
+  const widths = widthClauses.flatMap((c) => c.match(new RegExp(CSS_WIDTH_NUM, "g")) ?? []);
   return widths.length > 0 && widths.every((w) => SIZE_CLASS_LITERALS.has(w));
 }
 const MICRO_RADIUS_CEILING_PX = 3;
@@ -230,13 +231,13 @@ const DEFAULT_GUARD_CONFIG = {
 const GRACE_PERIOD_KINDS = {
   "raw-selection-control": {
     since: "1.26.0",
-    promote: "1.32.0",
-    why: 'Extended 1.31.0 -> 1.32.0 at the 1.31.0 release: the basalt tree still carries incumbents (data-table, notifications center, theme-lab) and the argo sweep has not run. new in the wave-6 control guards (docs/CONTROLS-SPEC.md \xA76, law C1). The text lane cannot see ancestry, so "no home" is approximated by a 12-line host-tag window \u2014 the loosest reading in the guard, and the reason this one lands warn rather than error even though its law is settled. ONE LAW, TWO LANES, ONE PROMOTION: it moves with its AST twin, `basalt/control-outside-home`, whose PLUGIN_RULE_GRACE entry carries the full argument and the measurement, and it must never be promoted or extended alone \u2014 a consumer waiving one spelling and failing the other is the exact confusion `WAIVER_ID_ALIASES` exists to close. RE-MEASURED 2026-09-09 across the whole fleet on 1.29.2: 29 AST-lane incumbents in five repos, plus three of basalt\'s own (data-table, notifications/center, theme-lab). Extended to 1.31.0 because 1.30.0 is the FIRST release in which either lane names a home a provider-only consumer can reach \u2014 every home both messages listed was a shell slot, and the shell-less `PageBar` sentence ships in this minor. Promoting in the same minor that makes a rule satisfiable gives nobody a window to act. 1.31.0 is when the 29 are re-measured against that number.'
+    promote: "1.33.0",
+    why: "Extended 1.32.0 -> 1.33.0 at the 1.32.0 release, the last extension: basalt's own tree is at 0 (consumer-loop r1 dogfood) and argo is at 2, but RE-MEASURED 2026-09-30 the fleet carries ~33 (image-gen 11, rb 7, image-share 6, weatherorb 5, email-gateway 4, argo 2). The 1.32.0 fleet upgrade clears them while they warn, together with raw-breakpoint, so 1.33.0 promotes all four ids against a measured-clean fleet. Extended 1.31.0 -> 1.32.0 at the 1.31.0 release: the basalt tree still carries incumbents (data-table, notifications center, theme-lab) and the argo sweep has not run. new in the wave-6 control guards (docs/CONTROLS-SPEC.md \xA76, law C1). The text lane cannot see ancestry, so \"no home\" is approximated by a 12-line host-tag window \u2014 the loosest reading in the guard, and the reason this one lands warn rather than error even though its law is settled. ONE LAW, TWO LANES, ONE PROMOTION: it moves with its AST twin, `basalt/control-outside-home`, whose PLUGIN_RULE_GRACE entry carries the full argument and the measurement, and it must never be promoted or extended alone \u2014 a consumer waiving one spelling and failing the other is the exact confusion `WAIVER_ID_ALIASES` exists to close. RE-MEASURED 2026-09-09 across the whole fleet on 1.29.2: 29 AST-lane incumbents in five repos, plus three of basalt's own (data-table, notifications/center, theme-lab). Extended to 1.31.0 because 1.30.0 is the FIRST release in which either lane names a home a provider-only consumer can reach \u2014 every home both messages listed was a shell slot, and the shell-less `PageBar` sentence ships in this minor. Promoting in the same minor that makes a rule satisfiable gives nobody a window to act. 1.31.0 is when the 29 are re-measured against that number."
   },
   "raw-media-query": {
     since: "1.31.0",
-    promote: "1.32.0",
-    why: "new in the wave-11 responsive/touch guards \u2014 the CSS-text twin of the oxlint plugin's `basalt/raw-breakpoint`. Reaching CSS is a NEW file type for this check, same reasoning as `css-raw-surface`, and basalt's own `src/dashboard/stat-group.module.css` / `widget-grid.module.css` already declare `@container` names (`basalt-stat-group`, `basalt-widget-grid`) outside the declared four-name table, plus `shell/**`'s own legitimate width `@media` rules \u2014 real incumbents in basalt's own tree at ship time, so this ships warn rather than error from the start. Promotes with its AST twin at 1.32.0."
+    promote: "1.33.0",
+    why: "The CSS-text twin of the oxlint plugin's `basalt/raw-breakpoint` \u2014 ONE LAW, TWO LANES, ONE PROMOTION, so it moves with that rule and never alone (`configs/oxlint-plugin.test.ts` \u203A twin lanes share one promotion pins the pair). New in the wave-11 responsive/touch guards; reaching CSS is a NEW file type for this check, same reasoning as `css-raw-surface`, with incumbents in basalt's own tree at ship time, so it shipped warn. Extended 1.32.0 -> 1.33.0 with its twin: 1.31.0 named no reachable container primitive, and 1.32.0 is the first minor that documents one (`CONTAINER_CLASSES` + the declared `@container` names, MIGRATING \xA7 `basalt/raw-breakpoint`)."
   }
 };
 function severityOf(kind, cfg) {

package/dist/notifications/center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"center.d.ts","sourceRoot":"","sources":["../../src/notifications/center.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAyClD;;4CAE4C;AAC5C,eAAO,MAAM,0BAA0B,MAAM,CAAA;AAwF7C,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,uBAAuB,+BAyEhG"}
+{"version":3,"file":"center.d.ts","sourceRoot":"","sources":["../../src/notifications/center.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAyClD;;4CAE4C;AAC5C,eAAO,MAAM,0BAA0B,MAAM,CAAA;AAwF7C,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,uBAAuB,+BA4EhG"}

package/dist/provider/index.d.ts.map

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

package/dist/provider/index.js

@@ -70,17 +70,22 @@ class BasaltErrorBoundary extends Component {
 function composeInjectedCss(base, fontsCss, radiusCss, densityCss) {
   return [base, fontsCss, radiusCss, densityCss].filter(Boolean).join("\n");
 }
-let hostAttributeCount = 0;
+function createMountCounter() {
+  let count = 0;
+  return { mount: () => ++count, unmount: () => --count };
+}
+const hostAttributeMounts = createMountCounter();
 function useHostAttribute() {
   const isPwa = useMediaQuery("(display-mode: standalone)", false);
   useIsomorphicLayoutEffect(() => {
     document.documentElement.setAttribute("data-basalt-host", isPwa ? "pwa" : "web");
   }, [isPwa]);
   useIsomorphicLayoutEffect(() => {
-    hostAttributeCount++;
+    hostAttributeMounts.mount();
     return () => {
-      hostAttributeCount--;
-      if (hostAttributeCount === 0) document.documentElement.removeAttribute("data-basalt-host");
+      if (hostAttributeMounts.unmount() === 0) {
+        document.documentElement.removeAttribute("data-basalt-host");
+      }
     };
   }, []);
 }
@@ -134,18 +139,15 @@ function BasaltBridge({
     children
   ] });
 }
-let mountedProviderCount = 0;
+const providerMounts = createMountCounter();
 function useDuplicateProviderGuard() {
   useEffect(() => {
-    mountedProviderCount++;
-    if (mountedProviderCount > 1 && isDev()) {
+    if (providerMounts.mount() > 1 && isDev()) {
       console.warn(
         "[basalt] BasaltProvider: more than one instance is mounted at once \u2014 nested/duplicate BasaltProviders double-mount MantineProvider, the palette <style> and ConnectivityProvider. Mount exactly one, at the app root."
       );
     }
-    return () => {
-      mountedProviderCount--;
-    };
+    return () => void providerMounts.unmount();
   }, []);
 }
 function BasaltProvider({

package/dist/shell/aside-docking.d.ts

@@ -0,0 +1,31 @@
+import type { SizeClass } from './use-size-class.js';
+export type AsideDockingInput = {
+    claimed: boolean;
+    folded: boolean;
+    sizeClass: SizeClass;
+    /** The `asideDockQuery` media query's result. */
+    roomToDock: boolean;
+    asideWidth: number;
+    asideRailWidth: number;
+};
+export type AsideDocking = {
+    /** An open aside pushes main rather than overlaying it. */
+    docks: boolean;
+    /** An open aside renders over main (reserving only its rail). */
+    overlay: boolean;
+    /** The width `AppShell` reserves for the region. */
+    width: number;
+};
+/** The `min-width` query that holds while navbar + open aside + `MAIN_MIN_WIDTH` fit side by side. */
+export declare function asideDockQuery(input: {
+    navbarWidth: number;
+    asideWidth: number;
+}): string;
+/**
+ * The room-to-dock query's SSR/no-`matchMedia` fallback — an `'expanded'` `sizeClassHint` means the
+ * server already believes there is room, matching `useSizeClass`'s own hint-seeded guard
+ * (`use-size-class.ts`), so the first client paint doesn't fold a default-open aside for one commit.
+ */
+export declare function roomToDockServerFallback(sizeClassHint: SizeClass | undefined): boolean;
+export declare function resolveAsideDocking(input: AsideDockingInput): AsideDocking;
+//# sourceMappingURL=aside-docking.d.ts.map

package/dist/shell/aside-docking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aside-docking.d.ts","sourceRoot":"","sources":["../../src/shell/aside-docking.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAQjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,iDAAiD;IACjD,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,2DAA2D;IAC3D,KAAK,EAAE,OAAO,CAAA;IACd,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,sGAAsG;AACtG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAEzF;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAEtF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAK1E"}

package/dist/shell/aside-docking.js

@@ -0,0 +1,19 @@
+import { toEm } from "../tokens/size-classes.js";
+const MAIN_MIN_WIDTH = 720;
+function asideDockQuery(input) {
+  return `(min-width: ${toEm(input.navbarWidth + input.asideWidth + MAIN_MIN_WIDTH)})`;
+}
+function roomToDockServerFallback(sizeClassHint) {
+  return sizeClassHint === "expanded";
+}
+function resolveAsideDocking(input) {
+  const docks = input.sizeClass === "expanded" && input.roomToDock;
+  const open = input.claimed && !input.folded;
+  const reserved = open && docks ? input.asideWidth : input.asideRailWidth;
+  return { docks, overlay: open && !docks, width: input.claimed ? reserved : 0 };
+}
+export {
+  asideDockQuery,
+  resolveAsideDocking,
+  roomToDockServerFallback
+};

package/dist/shell/index.d.ts

@@ -4,7 +4,6 @@ import type { GlobalAction } from '../controls/actions.js';
 import type { AccountMenuItem, BasaltAccountProps } from './account-types.js';
 import type { SidebarSearchActions, SidebarSearchConfig } from './sidebar-search.js';
 import type { MobileNavConfig, SidebarBlock, SidebarSection } from './nav-types.js';
-import type { SizeClass } from './use-size-class.js';
 export { AppSidebar, type AppSidebarProps } from './app-sidebar.js';
 export { NavCountBadge, type NavCountBadgeProps } from './nav-count-badge.js';
 export { SidebarSearch, type SidebarSearchProps, type SidebarSearchConfig, type SidebarSearchActions, } from './sidebar-search.js';
@@ -136,16 +135,6 @@ export type BasaltShellProps = BasaltProps & {
     /** Page content. */
     children?: ReactNode;
 };
-/**
- * The room-to-dock `min-width` query's SSR/no-`matchMedia` fallback — an `'expanded'`
- * `sizeClassHint` means the server already believes there is room, matching `useSizeClass`'s own
- * hint-seeded guard one level up (`use-size-class.ts`). Extracted as its own pure function (rather
- * than the inline `sizeClassHint === 'expanded'` it replaces) purely so `index.test.tsx` can pin it
- * without needing to render `BasaltShell` through a real SSR pass — `AppShell`'s + `PageAside`'s own
- * effects/refs/portals make that path unobservable through rendered markup, and the previous
- * hardcoded `false` fallback here shipped with no test at all for exactly that reason.
- */
-export declare function roomToDockServerFallback(sizeClassHint: SizeClass | undefined): boolean;
 /**
  * The shell's two page-level regions are providers, and both wrap the frame rather than living
  * inside it: `PageBarProvider` owns the header portal and the single-kebab claim, `AsideProvider`

package/dist/shell/index.d.ts.map

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

package/dist/shell/index.js

@@ -12,10 +12,10 @@ import { blockRowCount, projectMobileNav } from "./mobile-nav-model.js";
 import { AppBreadcrumbs } from "./app-breadcrumbs.js";
 import { PageBarBandOutlet, PageBarOutlet, PageBarProvider, usePageKebabClaimed } from "./page-bar.js";
 import { AsideDocksContext, AsideOutlet, AsideProvider, useAsideRegion } from "./page-aside.js";
+import { asideDockQuery, resolveAsideDocking, roomToDockServerFallback } from "./aside-docking.js";
 import { OverflowMenu, globalActionAsBarAction, globalActionMobile } from "../controls/actions.js";
 import { CtlSlot, useBasaltSpacing } from "../theme/index.js";
 import { createPersistedStore } from "../state/persisted.js";
-import { toEm } from "../tokens/size-classes.js";
 import { SizeClassHintContext, useSizeClass } from "./use-size-class.js";
 import brandClasses from "./app-brand.module.css";
 import headerClasses from "./app-header.module.css";
@@ -73,10 +73,6 @@ function collapseStore(key) {
   collapseStores.set(key, store);
   return store;
 }
-const MAIN_MIN_WIDTH = 720;
-function roomToDockServerFallback(sizeClassHint) {
-  return sizeClassHint === "expanded";
-}
 function BasaltShell(props) {
   assertRequiredProps("BasaltShell", props, ["brand", "sections"]);
   return /* @__PURE__ */ jsx(PageBarProvider, { globalActions: props.globalActions ?? [], children: /* @__PURE__ */ jsx(AsideProvider, { children: /* @__PURE__ */ jsx(ShellFrame, { ...props }) }) });
@@ -109,14 +105,18 @@ function ShellFrame({
   const navbarWidth = collapsed ? step.appShellNavbarRailWidth : step.appShellNavbarWidth;
   const sizeClassHint = useContext(SizeClassHintContext);
   const roomToDock = useMediaQuery(
-    `(min-width: ${toEm(navbarWidth + step.appShellAsideWidth + MAIN_MIN_WIDTH)})`,
+    asideDockQuery({ navbarWidth, asideWidth: step.appShellAsideWidth }),
     roomToDockServerFallback(sizeClassHint)
   );
-  const docks = sizeClass === "expanded" && roomToDock;
-  const asideOpen = aside.claimed && !aside.folded;
-  const asideOverlay = asideOpen && !docks;
-  const asideReserved = asideOpen && docks ? step.appShellAsideWidth : step.appShellAsideRailWidth;
-  const asideWidth = aside.claimed ? asideReserved : 0;
+  const docking = resolveAsideDocking({
+    claimed: aside.claimed,
+    folded: aside.folded,
+    sizeClass,
+    roomToDock,
+    asideWidth: step.appShellAsideWidth,
+    asideRailWidth: step.appShellAsideRailWidth
+  });
+  const asideOverlay = docking.overlay;
   const { requestClose } = aside;
   useEffect(() => {
     if (!asideOverlay) return;
@@ -141,7 +141,7 @@ function ShellFrame({
     () => projectMobileNav(sections, { config: mobileNav, extraMoreRows }),
     [sections, mobileNav, extraMoreRows]
   );
-  return /* @__PURE__ */ jsx(AsideDocksContext.Provider, { value: docks, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AsideDocksContext.Provider, { value: docking.docks, children: /* @__PURE__ */ jsxs(
     AppShell,
     {
       h: "100dvh",
@@ -157,7 +157,7 @@ function ShellFrame({
       },
       aside: {
         // An overlay reserves the rail only — `<AppShell.Aside>` below widens itself over main.
-        width: asideWidth,
+        width: docking.width,
         breakpoint: "sm",
         // Below `sm` there is no region at all — `PageAside` renders its content in the page
         // flow instead, one node, no responsive twin (law C9).
@@ -256,7 +256,6 @@ export {
   SidebarAccount,
   SidebarSearch,
   projectMobileNav2 as projectMobileNav,
-  roomToDockServerFallback,
   useBreakpoint,
   useSizeClass2 as useSizeClass
 };

package/dist/shell/use-breakpoint.d.ts

@@ -1,6 +1,6 @@
 export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * @deprecated Use `useSizeClass` — removed next minor (see `MIGRATING.md`). `theme.breakpoints` is
+ * @deprecated Use `useSizeClass` — removed in 1.33.0 (see `MIGRATING.md`). `theme.breakpoints` is
  * now derived: `sm` moved 48em → 52.5em and `md`/`lg`/`xl` all sit at 75em (`xs`/`sm` collapse,
  * `md`/`lg`/`xl` collapse).
  */

package/dist/theme/floating.module.css

@@ -42,6 +42,7 @@
  * `.sheetBody` is the Modal body; it reaches the trailing button row `overlays.confirm`
  * renders (Mantine `Group`), stretching the buttons to full width at the `--vx-hit` floor.
  */
+/* theme-allow raw-media-query — the bottom sheet IS the compact size class's overlay form */
 @media (max-width: 52.49375em) {
   .sheetInner {
     align-items: flex-end;

package/dist/theme-lab/derive-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive-controls.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-controls.tsx"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAiDpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,uFAAuF;IACvF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAwFhE"}
+{"version":3,"file":"derive-controls.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-controls.tsx"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAiDpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,uFAAuF;IACvF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA0FhE"}

package/llms.txt

@@ -1,4 +1,4 @@
-# basalt-ui v1.31.0
+# basalt-ui v1.32.0
 # Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
 #
 # basalt-ui is an opinionated framework for Mantine-based React apps.
@@ -19,7 +19,7 @@
 # ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
 
 Package: basalt-ui
-Version: 1.31.0
+Version: 1.32.0
 
 ## basalt-ui
 Import: import { ... } from 'basalt-ui'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",
@@ -171,6 +171,7 @@
     "@shikijs/themes": "^4.4.3",
     "@tanstack/react-hotkeys": "0.10.0",
     "@tanstack/react-router-devtools": "^1.167.2",
+    "@testing-library/react": "16.3.3",
     "@types/bun": "^1.4.2",
     "@types/hast": "^3.0.5",
     "@types/react": "^19.3.0",

package/src/charts/kinds/BandStrip.tsx

@@ -8,21 +8,15 @@ import type { ChartMargin } from '../../tokens'
 import type { CursorResolution } from '../cursor/resolve'
 import { useBandPlot } from '../hooks/useBandPlot'
 import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
-import { AxisBottomDate } from '../primitives/Axes'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-} from '../primitives/ChartTooltip'
+import { TooltipRow } from '../primitives/ChartTooltip'
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
-import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import type { ChartLegendConfig, SeriesStyle } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { BandAxisOverlay, BandTooltip, clampFraction } from './band-chrome'
 import { isDev } from '../../common/is-dev'
 
 /**
@@ -256,7 +250,7 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
     ...(tooltip !== undefined && { 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 !== undefined && !styleByKey.has(absentState)) {
@@ -351,8 +345,6 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
-  const cfg = tooltip === false ? undefined : tooltip
-  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
   const row = point === null ? null : deriveBandRow(getBand(point), styleByKey, hidden, point)
 
   return (
@@ -383,69 +375,31 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
 
           {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={stripHeight} />}
 
-          <AxisBottomDate
-            top={stripHeight}
-            scale={scale}
-            tickValues={band.tickValues}
-            tickFormat={(v) => formatX(String(v))}
-            anchorTerminals={band.xAnchorTerminals}
-            {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
-          />
-
-          <HoverOverlay
-            width={plotWidth}
+          <BandAxisOverlay
+            band={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 !== undefined && { ariaLabel })}
+            getX={getX}
+            formatX={formatX}
+            ariaLabel={ariaLabel}
           />
         </Group>
       </svg>
 
-      {band.showTooltip && point !== null && (
-        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
-          <TooltipHeader
-            date={getX(point)}
-            {...(cfg?.formatHeader !== undefined && {
-              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
-            })}
-            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
+      <BandTooltip band={band} tooltip={tooltip} getX={getX} hidden={hidden}>
+        {row !== null && (
+          <TooltipRow
+            color={row.color}
+            label={row.label}
+            value={row.value}
+            shape={row.shape}
+            dashed={row.dashed}
           />
-          <TooltipBody>
-            {cfg?.prependRows?.(point, { hidden })}
-            {row !== null && (
-              <TooltipRow
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-              />
-            )}
-            {cfg?.extraRows?.(point, { hidden })}
-          </TooltipBody>
-        </ChartTooltipFloat>
-      )}
+        )}
+      </BandTooltip>
     </>
   )
 }
 
-/** 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. */
-function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0
-  return Math.min(Math.max(value, 0), 1)
-}
-
 /**
  * The strip's one derived row: the hovered band's STATE, named and formatted by its own `series`
  * entry. A strip cannot show a row for a state it does not draw, and cannot name a state the

package/src/charts/kinds/DualPanel.tsx

@@ -13,11 +13,12 @@ import {
   TooltipBody,
   TooltipHeader,
   TooltipRow,
+  TooltipRows,
 } from '../primitives/ChartTooltip'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
 import { Crosshair, SeriesDot } from '../primitives/Crosshair'
-import { HoverOverlay } from '../primitives/HoverOverlay'
+import { cursorSliderProps, HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
 import type { ChartState } from '../primitives/ChartPending'
@@ -595,18 +596,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           <HoverOverlay
             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 !== undefined && { ariaLabel })}
+            {...cursorSliderProps({ cursor, data, getX, formatX, ariaLabel })}
           />
         </Group>
 
@@ -688,17 +678,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             })()}
           />
           <TooltipBody>
-            {deriveTooltipRows(visibleSeries, point, formatTop).map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
+            <TooltipRows rows={deriveTooltipRows(visibleSeries, point, formatTop)} />
             {barVisible &&
               (() => {
                 const v = getBar(point)

package/src/charts/kinds/MirroredBars.tsx

@@ -10,22 +10,17 @@ import type { CursorResolution } from '../cursor/resolve'
 import { useBandPlot } from '../hooks/useBandPlot'
 import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
 import { probeAxisLabels } from '../layout/auto-margin'
-import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
+import { AxisLeftNumeric } from '../primitives/Axes'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-} from '../primitives/ChartTooltip'
+import { TooltipRows } from '../primitives/ChartTooltip'
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
-import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import { deriveTooltipRows } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { BandAxisOverlay, BandTooltip, clampFraction } from './band-chrome'
 
 /** One of the two panes. Each resolves its own domain — that is the whole point of the kind. */
 export type MirroredBarPane = {
@@ -242,7 +237,7 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
     ...(tooltip !== undefined && { tooltip }),
   })
 
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band
 
   // ── Pass 2: the pane rects, now that the plot height is known ───────────────────────────────
   const barBand = Math.max(plot.height - margin.top - margin.bottom, 2)
@@ -346,8 +341,6 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
-  const cfg = tooltip === false ? undefined : tooltip
-  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
   // Each pane's row falls back to ITS OWN axis formatter, never the other pane's — the two panes
   // are in different units by construction (an explicit per-series `formatValue` still wins).
   const visibleSeries = series
@@ -419,70 +412,23 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
           {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={barBand} />}
 
-          <AxisBottomDate
-            top={barBand}
-            scale={scale}
-            tickValues={band.tickValues}
-            tickFormat={(v) => formatX(String(v))}
-            anchorTerminals={band.xAnchorTerminals}
-            {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
-          />
-
-          <HoverOverlay
-            width={plotWidth}
+          <BandAxisOverlay
+            band={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 !== undefined && { ariaLabel })}
+            getX={getX}
+            formatX={formatX}
+            ariaLabel={ariaLabel}
           />
         </Group>
       </svg>
 
-      {band.showTooltip && point !== null && (
-        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
-          <TooltipHeader
-            date={getX(point)}
-            {...(cfg?.formatHeader !== undefined && {
-              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
-            })}
-            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
-          />
-          <TooltipBody>
-            {cfg?.prependRows?.(point, { hidden })}
-            {rows.map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
-            {cfg?.extraRows?.(point, { hidden })}
-          </TooltipBody>
-        </ChartTooltipFloat>
-      )}
+      <BandTooltip band={band} tooltip={tooltip} getX={getX} hidden={hidden}>
+        <TooltipRows rows={rows} />
+      </BandTooltip>
     </>
   )
 }
 
-/** A 0..1 share, non-finite included — see `BandStrip`'s identical guard. */
-function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0
-  return Math.min(Math.max(value, 0), 1)
-}
-
 /** A drawable value, or null. See the call site for why NaN is not drawable. */
 function finiteOrNull(v: number | null | undefined): number | null {
   return v === null || v === undefined || Number.isNaN(v) ? null : v