basalt-ui 1.41.0 → 2.0.1

package/src/controls/toggle-filter.tsx

@@ -13,14 +13,15 @@
 import { Switch } from '@mantine/core'
 import { useId } from 'react'
 import type { ReactNode } from 'react'
-import type { BasaltProps } from '../common/props'
 import { assertRequiredProps } from '../common/validate'
-import type { BooleanField, FieldHandle } from '../state'
+import type { FieldHandle } from '../state'
+import type { BooleanField } from '../state/fields'
 import { useFilterRegistration, useFilterSurface } from './filter-context'
 import { FilterPill } from './filter-pill'
 import { PanelRow } from './panel-row'
+import type { UncontrolledProps } from './uncontrolled'
 
-export type ToggleFilterProps = BasaltProps & {
+export type ToggleFilterProps = UncontrolledProps & {
   readonly field: FieldHandle<BooleanField>
   readonly label: string
   readonly icon?: ReactNode
@@ -28,7 +29,7 @@ export type ToggleFilterProps = BasaltProps & {
 
 export function ToggleFilter(props: ToggleFilterProps): ReactNode {
   // F-ERR-1 — without this a missing `field` surfaces as `undefined is not an object
-  // (evaluating 'field.use')`, caught by `BasaltErrorBoundary`.
+  // (evaluating 'field.use')`, caught by `RootBoundary`.
   assertRequiredProps('ToggleFilter', props, ['field'], {
     field: 'bind it to a store field (`store.field.<name>`), never a value/onChange pair.',
   })

package/src/controls/uncontrolled.ts

@@ -0,0 +1,12 @@
+import type { BasaltProps } from '../common/props'
+
+/**
+ * Law C2 as named slots: a basalt filter or tab owns its value through `field`, so `value`,
+ * `onChange` and `size` are typed `never` — the compile error names the mistake instead of
+ * reporting an unknown prop (`docs/V2-SPEC.md` §3).
+ */
+export type UncontrolledProps = BasaltProps & {
+  value?: never
+  onChange?: never
+  size?: never
+}

package/src/controls/view-tabs.tsx

@@ -30,13 +30,13 @@
 import { SegmentedControl, Select } from '@mantine/core'
 import type { ReactNode } from 'react'
 import { cx } from '../common/props'
-import type { BasaltProps } from '../common/props'
 import { assertRequiredProps } from '../common/validate'
 import type { EnumField, FieldHandle } from '../state'
 import classes from './controls.module.css'
 import { useFilterSurface } from './filter-context'
 import { useControlName } from './filter-sheet'
 import { PanelChoice, PanelRow, useTrackFits } from './panel-row'
+import type { UncontrolledProps } from './uncontrolled'
 
 /** Past three options the phone form is a `Select`, not a track. */
 const PHONE_TRACK_MAX = 3
@@ -48,7 +48,7 @@ export type ViewTabsOption<T extends string> = {
   readonly only?: 'sm-up' | 'sm-down'
 }
 
-export type ViewTabsProps<T extends string> = BasaltProps & {
+export type ViewTabsProps<T extends string> = UncontrolledProps & {
   readonly field: FieldHandle<EnumField<T>>
   /** Defaults to `field.options` (every declared value, labelled by `store.labels()`). */
   readonly options?: readonly ViewTabsOption<T>[]
@@ -64,7 +64,7 @@ export type ViewTabsProps<T extends string> = BasaltProps & {
 
 export function ViewTabs<T extends string>(props: ViewTabsProps<T>): ReactNode {
   // F-ERR-1 — without this a missing `field` surfaces as `undefined is not an object
-  // (evaluating 'field.use')`, caught by `BasaltErrorBoundary`.
+  // (evaluating 'field.use')`, caught by `RootBoundary`.
   assertRequiredProps('ViewTabs', props, ['field'], {
     field: 'bind it to a store field (`store.field.<name>`), never a value/onChange pair.',
   })

package/src/controls-dates/date-range-picker.tsx

@@ -29,7 +29,7 @@ import type { RangeCustomPickerProps } from '../controls/range-filter'
 
 export function DateRangePicker(props: RangeCustomPickerProps): ReactNode {
   // F-ERR-1 — without this a missing `value` surfaces as `undefined is not an object
-  // (evaluating 'value.from')`, caught by `BasaltErrorBoundary`.
+  // (evaluating 'value.from')`, caught by `RootBoundary`.
   assertRequiredProps('DateRangePicker', props, ['value'], {
     value: "pass `{ from, to }` — usually injected by `RangeFilter`'s `customPicker`.",
   })

package/src/controls-dates/index.ts

@@ -5,4 +5,3 @@
  * Proven from outside the package by `scripts/pack-test.sh`.
  */
 export { DateRangePicker } from './date-range-picker'
-export type { RangeCustomPickerProps } from '../controls/range-filter'

package/src/dashboard/index.ts

@@ -1,48 +1,7 @@
-export {
-  WidgetHeader,
-  type WidgetHeaderDeltaProps,
-  type WidgetHeaderMetricProps,
-  type WidgetHeaderProps,
-  type WidgetHeaderSlot,
-  type WidgetHeaderTier,
-  type WidgetHeaderTitleProps,
-} from './widget-header'
-export { DeltaBadge, type DeltaBadgeProps, type DeltaPolarity } from './delta-badge'
-export { Section, type SectionProps, type SectionSlot } from './section'
-export {
-  StatCard,
-  type StatCardBreakdownRow,
-  type StatCardProps,
-  type StatCardSlot,
-  type StatCardTone,
-} from './stat-card'
-export {
-  WidgetGrid,
-  type WidgetGridCols,
-  type WidgetGridItemProps,
-  type WidgetGridProps,
-} from './widget-grid'
-export { StatGroup, type StatGroupCols, type StatGroupProps } from './stat-group'
-export { EmptyState, type EmptyStateProps, type EmptyStateSlot } from './empty-state'
-export {
-  SettingsSection,
-  type SettingsSectionProps,
-  type SettingsSectionSlot,
-  SettingsRow,
-  type SettingsRowProps,
-  type SettingsRowSlot,
-  DangerZone,
-  type DangerZoneProps,
-} from './settings-section'
-export {
-  QueryState,
-  type QueryStateProps,
-  type QueryStateLike,
-  type QueryStateSlot,
-  type QueryStateTier,
-  type QueryEmptyCopy,
-  LoadingState,
-  type LoadingStateProps,
-  ErrorState,
-  type ErrorStateProps,
-} from './query-state'
+export { WidgetHeader } from './widget-header'
+export { DeltaBadge } from './delta-badge'
+export { Section } from './section'
+export { StatCard, type StatCardBreakdownRow, type StatCardTone } from './stat-card'
+export { StatGroup } from './stat-group'
+export { EmptyState } from './empty-state'
+export { SettingsSection, SettingsRow, DangerZone } from './settings-section'

package/src/dashboard/section.tsx

@@ -12,8 +12,7 @@
  *
  * `actions` and `tabs` are two separate `CtlSlot`-wrapped fragments rendered in the header row
  * (C1/C5) via `WidgetHeader`'s single `actions` slot; `tabs` hides while the section is collapsed.
- * `Section` holds ≤3 actions (C6) — past that, a dev-only `useValidateProps` message fires once per
- * title (the AST guard lands in wave 6).
+ * `Section` holds ≤3 actions (C6) — a fourth is a tsc error (the `SectionActions` type).
  *
  * `collapsible` state persists via `createPersistedState('basalt:section:<persistKey>')` when
  * `persistKey` is given, else it is local `useState` — the header always stays drawn, only the body
@@ -46,15 +45,15 @@
  *   <UsageChart />
  * </Section>
  */
-import { Children, useId } from 'react'
+import { useId } from 'react'
 import type { ReactNode } from 'react'
 import { cx } from '../common/props'
 import type { BasaltProps, SlotStylesProps } from '../common/props'
 import { BASALT_PREFIX } from '../common/errors'
 import { useValidateProps } from '../common/validate'
 import { CtlSlot } from '../theme'
-import { BarActionSlot, isBarActionList } from '../controls/actions'
-import type { SlotActions } from '../controls/actions'
+import { BarActionSlot } from '../controls/actions'
+import type { SectionActions } from '../controls/actions'
 import { useFilterSurface } from '../controls/filter-context'
 import { QueryState } from './query-state'
 import type { QueryEmptyCopy, QueryStateLike } from './query-state'
@@ -79,12 +78,10 @@ export type SectionProps = Omit<WidgetHeaderProps, 'tier' | 'classNames' | 'acti
   BasaltProps &
   SlotStylesProps<SectionSlot> & {
     /**
-     * Header actions, in either form (law C15): a typed `BarAction[]`, which basalt projects through
-     * the SAME row `PageBar` and `ActionGroup` use — ≤3 inline, the rest folded into `More`, one
-     * kebab below `sm` — or an opaque `ReactNode` a caller drew itself, rendered verbatim. The ≤3
-     * budget (C6) is checked against whichever form is given.
+     * Header actions as typed data (law C15), projected through the SAME row `PageBar` uses — one
+     * kebab below `sm`. At most three: a fourth is a tsc error (law C6, `docs/V2-SPEC.md` §3).
      */
-    actions?: SlotActions
+    actions?: SectionActions
     /**
      * The section's async result. Given one, the BODY renders through `QueryState` at the section
      * tier — pending / error-with-retry / empty each REPLACE `children`, data renders them — while
@@ -122,27 +119,6 @@ export type SectionProps = Omit<WidgetHeaderProps, 'tier' | 'classNames' | 'acti
     children: ReactNode
   }
 
-/**
- * ≤3 actions is C6 (docs/CONTROLS-SPEC.md §1) — the AST guard (`basalt/page-bar-budget`) lands in
- * wave 6; this is the dev-only stopgap so the budget is visible before the lint rule exists.
- *
- * Returns the message rather than logging it, because it is a {@link useValidateProps} check now:
- * it used to `console.warn` straight from the render body, which said it again on every keystroke
- * that re-rendered the page. The title is IN the message on purpose — the dedup key is
- * `${component} ${message}`, so two over-budget sections only both get heard because they name
- * themselves.
- */
-function actionBudgetMessage(title: string, actions: SlotActions): string | null {
-  // Both arms of the union are counted, and the typed one is counted EXACTLY: `Children.count` over
-  // a `BarAction[]` would report the array's length as one child.
-  const count = isBarActionList(actions) ? actions.length : Children.count(actions)
-  if (count <= 3) return null
-  return (
-    `${BASALT_PREFIX} Section "${title}": ${count} actions exceeds the ≤3 budget ` +
-    '(docs/CONTROLS-SPEC.md C6) — move the rest behind a menu.'
-  )
-}
-
 function ChevronToggle({
   open,
   onToggle,
@@ -196,13 +172,9 @@ export function Section({
 }: SectionProps) {
   const { title } = headerProps
 
-  // Two dev-only checks, one hook — both are misuses that RENDER fine, which is what puts them in
-  // `useValidateProps` rather than in `assertRequiredProps`.
-  //
-  //  1. A `persistKey` with nothing to fold writes a localStorage key nobody ever reads back — the
-  //     shape a consumer lands on after deleting `collapsible` and leaving the key behind.
-  //  2. More than three header actions (C6). This used to `console.warn` from the render body, so a
-  //     page that re-rendered on every keystroke reprinted it every keystroke.
+  // A `persistKey` with nothing to fold writes a localStorage key nobody ever reads back — the
+  // shape a consumer lands on after deleting `collapsible` and leaving the key behind. It renders
+  // fine, which is what puts it in `useValidateProps` rather than in `assertRequiredProps`.
   useValidateProps(
     'Section',
     () => [
@@ -210,9 +182,8 @@ export function Section({
         ? `${BASALT_PREFIX} Section "${title}": \`persistKey\` is set but \`collapsible\` is ` +
           'false — there is no fold to persist. Add `collapsible`, or drop `persistKey`.'
         : null,
-      actions === undefined ? null : actionBudgetMessage(title, actions),
     ],
-    [persistKey, collapsible, title, actions],
+    [persistKey, collapsible, title],
   )
 
   const [open, setOpen] = usePersistedOrLocal({

package/src/dashboard/stat-card.tsx

@@ -19,8 +19,8 @@
  * carries them as a muted line, and `info` puts "how this number is computed" behind the glyph
  * beside the title instead of inside the heading's accessible name.
  *
- * `src/dashboard` stays @visx-free — `sparkline` is a plain `ReactNode` slot, never a chart import
- * here. Pass a `LineSparkline`/`BarSparkline` from `basalt-ui/charts` at the call site.
+ * `src/dashboard` stays chart-free — `sparkline` is a plain `ReactNode` slot, never a chart import
+ * here. Pass your own sparkline at the call site (basalt ships no `Sparkline` kind in 2.0.0).
  *
  * `query` hands the card's pending/error/empty branch to `QueryState` at the `'section'` tier,
  * rendered under the header rather than over it — the title row is chrome and must not flicker.
@@ -39,15 +39,14 @@
  *
  * @example
  * import { StatCard } from 'basalt-ui'
- * import { LineSparkline } from 'basalt-ui/charts'
  *
  * // `sparkline` is a RENDER PROP over the slot's measured box, so full-bleed is genuinely the
- * // card's width — no `useChartSize` wrapper component, no hardcoded pixel value.
+ * // card's width — no measuring wrapper component, no hardcoded pixel value.
  * <StatCard
  *   title="Active Users"
  *   value="12,483"
  *   delta={4.2}
- *   sparkline={({ width, height }) => <LineSparkline data={history} width={width} height={height} />}
+ *   sparkline={({ width, height }) => <MySparkline data={history} width={width} height={height} />}
  * />
  *
  * @example
@@ -59,7 +58,7 @@
  *   delta={4.2}
  *   sparklinePlacement="right"
  *   sparkline={({ width, height }) => (
- *     <BarSparkline data={history} width={width} height={height} ariaLabel="Active users trend" />
+ *     <MySparkline data={history} width={width} height={height} ariaLabel="Active users trend" />
  *   )}
  * />
  *
@@ -152,9 +151,9 @@ const SPARKLINE_RIGHT_HEIGHT = 26
 /**
  * The measured box a `sparkline` render prop receives.
  *
- * A `LineSparkline`/`BarSparkline` takes `width`/`height` as NUMBERS (they are SVG attributes — an
+ * An SVG sparkline takes `width`/`height` as NUMBERS (they are SVG attributes — an
  * svg cannot size itself from CSS and then scale its scales), so "full bleed" was never expressible
- * as a `ReactNode`: the caller had to guess a pixel width, or write its own `useChartSize` wrapper
+ * as a `ReactNode`: the caller had to guess a pixel width, or write its own measuring wrapper
  * component. Four consumers wrote that wrapper; two of them hardcoded a width and drew a sparkline
  * that stopped short of the card edge on every viewport but the one they built on.
  */
@@ -164,9 +163,8 @@ export type StatCardSparklineSize = {
 }
 
 /**
- * Measures a slot and re-measures on resize. Plain `ResizeObserver`, not `useChartSize`:
- * `src/dashboard/**` is Mantine-coupled and @visx-FREE (see the module doc), and `useChartSize`
- * wraps `@visx/responsive`.
+ * Measures a slot and re-measures on resize. Plain `ResizeObserver`: `src/dashboard/**` is
+ * Mantine-coupled and chart-FREE (see the module doc).
  *
  * The `undefined` guard is for the test DOM — happy-dom ships no `ResizeObserver`, and the one-shot
  * measure above it is what keeps a mounted card rendering its sparkline there.
@@ -266,14 +264,14 @@ export type StatCardProps = BasaltProps &
     /**
      * Optional trend visual. Either a node, or a RENDER PROP receiving the slot's measured box.
      *
-     * Prefer the render prop for anything from `basalt-ui/charts`: those take numeric `width`/`height`
+     * Prefer the render prop for any SVG sparkline: those take numeric `width`/`height`
      * (SVG attributes), so a plain node has to hardcode a width, and a hardcoded width is not
      * full-bleed on any viewport but the one it was typed on. With `sparklinePlacement="bleed"` the
      * measured width is the card's own inner width including the bled inset; with `'right'` it is the
      * fixed 72×26 slot (see {@link SPARKLINE_RIGHT_WIDTH} for why that one is not measured).
      *
      * @example
-     * sparkline={({ width, height }) => <BarSparkline data={history} width={width} height={height} />}
+     * sparkline={({ width, height }) => <MySparkline data={history} width={width} height={height} />}
      */
     sparkline?: ReactNode | ((size: StatCardSparklineSize) => ReactNode)
     /** Where `sparkline` sits. `'bleed'` (default) is today's full-width row bled to the card edges;
@@ -314,8 +312,8 @@ export function StatCard({
   const isRender = typeof sparkline === 'function'
   const bleeds = sparklinePlacement === 'bleed'
   // Only a render prop needs a measurement; a plain node sizes itself.
-  const slot = useSlotWidth(isRender)
-  const measured: StatCardSparklineSize = { width: slot.width, height: SPARKLINE_RIGHT_HEIGHT }
+  const { ref: slotRef, width: slotWidth } = useSlotWidth(isRender)
+  const measured: StatCardSparklineSize = { width: slotWidth, height: SPARKLINE_RIGHT_HEIGHT }
 
   // A `<dl>`, not a table and not a stack of divs: each row IS a term and its value, which is the
   // one semantic that survives a reader meeting the card out of context.
@@ -350,7 +348,7 @@ export function StatCard({
   const sparklineNode: ReactNode =
     sparkline === undefined ? null : (
       <div
-        ref={slot.ref}
+        ref={slotRef}
         className={cx(
           bleeds ? classes.sparklineBleed : classes.sparklineRight,
           classNames?.sparkline,

package/src/dashboard/widget-header.module.css

@@ -345,26 +345,28 @@
 /*
  * The same fold, triggered by the CARD'S OWN HEIGHT instead of its width (wave 8's header-economy
  * law) — a short-but-wide chart card (a KPI-style plot with little vertical room) still needs the
- * subtitle line back. Not a `@container basalt-card` SIZE query: `container-type: size` on an
- * auto-height card collapses it to 0 (see `ChartCard`'s `CARD_SHORT_HEIGHT` doc), so `ChartCard`
- * measures itself with a ResizeObserver instead and sets `data-basalt-card-short` under 280px.
+ * subtitle line back. A height cannot be a `@container` query: `container-type: size` on an
+ * auto-height card collapses it to 0. So the hook is a selector on markup that is already in the
+ * server HTML (W10 SSR contract): a chart that states a small `height` marks its box
+ * `data-basalt-chart-short`, and the card matches it with `:has`. A card whose body is not a chart
+ * is measured instead (`ChartCard`'s ResizeObserver, under 280px) and sets `data-basalt-card-short`.
  */
-[data-basalt-card-short] .subtitle {
+:is([data-basalt-card-short], [data-basalt-chart-card]:has([data-basalt-chart-short])) .subtitle {
   display: none;
 }
 
-[data-basalt-card-short] .foldGlyph {
+:is([data-basalt-card-short], [data-basalt-chart-card]:has([data-basalt-chart-short])) .foldGlyph {
   display: inline-flex;
 }
 
-[data-basalt-card-short] .foldNote {
+:is([data-basalt-card-short], [data-basalt-chart-card]:has([data-basalt-chart-short])) .foldNote {
   display: block;
 }
 
 /* A short card's KPI numeral is the header's own tallest line (the merged title row has no other
  * source of height once the subtitle folds) — the same floor the width `cqi` clamp already uses,
  * so a short card never introduces a THIRD value size. */
-[data-basalt-card-short] .value {
+:is([data-basalt-card-short], [data-basalt-chart-card]:has([data-basalt-chart-short])) .value {
   font-size: var(--vx-text-lg);
 }
 

package/src/dev-dock.tsx

@@ -1,36 +1,17 @@
 /**
- * `BasaltDevDock` — a fixed, dev-only bottom drawer hosting the in-app tooling: TanStack Router
- * devtools, TanStack Query devtools (the embeddable `ReactQueryDevtoolsPanel` — NOT
- * `BasaltQueryDevtools`, which wraps the floating-button `ReactQueryDevtools` and would duplicate
- * this dock's own chrome), and the theme lab (`basalt-ui/theme-lab`'s `ThemeLabControls`). Ported
- * from argo's `components/dev-dock.tsx` (91 lines) — same three-tool shape, same "only renders the
- * ACTIVE panel" contract: the launcher (which tool is open) lives wherever the consumer puts it —
- * a `SettingsMenuItem` per tool with `active` set to the currently-open one (C5's
- * `SettingsMenuItem.active`) is the seeded pattern — this component owns only the render.
+ * The dev dock — mounted by `BasaltProvider` behind a literal `NODE_ENV` check and not exported
+ * from the barrel (V2-SPEC § 2). A fixed bottom drawer hosting the Router devtools, the Query
+ * devtools panel and the theme lab; it renders only the ACTIVE panel, and the provider's three
+ * `dev.*` Spotlight commands choose which.
  *
- * Every dependency is an OPTIONAL peer, loaded lazily so importing (or even rendering, with
- * `tool={null}`) this module never requires `@tanstack/react-router-devtools`,
- * `@tanstack/react-query-devtools` or `@tanstack/react-router` unless a consumer actually opens
- * that tool — same discipline as `BasaltQueryDevtools` (`query-devtools.tsx`) and
- * `ThemeLabControls`'s own `React.lazy` wrapper here. In production this returns `null`
- * immediately, before any dynamic import fires.
- *
- * @example
- * import { BasaltDevDock, type BasaltDevDockTool } from 'basalt-ui'
- * import { useState } from 'react'
- * import { useRouter } from '@tanstack/react-router'
- *
- * function DevTools() {
- *   const [tool, setTool] = useState<BasaltDevDockTool | null>(null)
- *   const router = useRouter()
- *   return <BasaltDevDock tool={tool} onClose={() => setTool(null)} router={router} />
- * }
- * // wire the launchers as settings-menu entries with `active: tool === 'router'` etc.
+ * Every dependency is an OPTIONAL peer loaded through `import()` when its tool opens, so neither
+ * devtools package is required until then. In production this returns `null` before any import.
  */
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, useEffect } from 'react'
 import type { ReactNode } from 'react'
 import { Box, CloseButton, Flex, Group, Text } from '@mantine/core'
 import type { BasaltProps } from './common/props'
+import { applyOverrides, loadOverrides } from './theme-lab/boot'
 import type { ThemeLabControlsProps } from './theme-lab'
 
 /** Which panel is open. `null` renders nothing (the dock is unmounted, not hidden). */
@@ -98,6 +79,12 @@ export function BasaltDevDock({
   className,
   style,
 }: BasaltDevDockProps): ReactNode {
+  // The theme lab owns only the editing UI — re-apply persisted overrides at boot so a tuning
+  // session survives a refresh, whether or not the dock is open.
+  useEffect(() => {
+    if (process.env['NODE_ENV'] === 'production') return
+    applyOverrides(loadOverrides())
+  }, [])
   if (process.env['NODE_ENV'] === 'production') return null
   if (tool === null) return null
 

package/src/format/date.ts

@@ -1,70 +1,11 @@
 /**
- * Date/time/duration formatting. `fmtAxisDate`/`fmtTooltipDate` moved here from
- * `src/charts/utils/format.ts` (C5 consolidation) — that file now re-exports from this module.
- * The rest (`clock`/`weekday`/`relativeTime`/`duration`/`durationClock`) are new, seeded from argo
- * consumers (`features/{walking-pad,reading,astro-window,garmin-health}/{formatters,format,
+ * Date/time/duration formatting (`clock`/`weekday`/`relativeTime`/`duration`/`durationClock`),
+ * seeded from argo consumers (`features/{walking-pad,reading,astro-window,garmin-health}/{formatters,format,
  * formulas}.ts` — read those files' own JSDoc for the exact call sites this generalizes).
  */
 import { dateFormat, NON_FINITE, toDate } from './shared'
 import type { LocaleOption } from './shared'
 
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-const SHORT_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-
-/** Axis-friendly short date: DD.MM. A non-finite or invalid date prints {@link NON_FINITE}. */
-export function fmtAxisDate(value: unknown): string {
-  if (typeof value === 'number' && !Number.isFinite(value)) return NON_FINITE
-  if (value instanceof Date) {
-    if (Number.isNaN(value.getTime())) return NON_FINITE
-    const dd = String(value.getDate()).padStart(2, '0')
-    const mm = String(value.getMonth() + 1).padStart(2, '0')
-    return `${dd}.${mm}`
-  }
-  const s = String(value ?? '')
-  const match = s.match(/(\d{4})-(\d{2})-(\d{2})/)
-  if (match) return `${match[3]}.${match[2]}`
-  return s
-}
-
-/** Tooltip-friendly long date: "Mon Apr 21 2026". A non-finite or invalid date prints
- * {@link NON_FINITE}. */
-export function fmtTooltipDate(date: unknown): string {
-  if (typeof date === 'number' && !Number.isFinite(date)) return NON_FINITE
-  if (date instanceof Date) {
-    if (Number.isNaN(date.getTime())) return NON_FINITE
-    return `${SHORT_DAYS[date.getDay()]} ${MONTHS[date.getMonth()]} ${date.getDate()} ${date.getFullYear()}`
-  }
-  const s = String(date ?? '')
-  const match = s.match(/(\d{4})-(\d{2})-(\d{2})/)
-  if (!match) return s
-  const d = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
-  return `${SHORT_DAYS[d.getDay()]} ${MONTHS[d.getMonth()]} ${d.getDate()} ${d.getFullYear()}`
-}
-
-export type ClockOptions = LocaleOption & {
-  /** IANA zone (`'Europe/Vienna'`). Default the runtime's own zone — the same "local" argo's
-   * `d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })` call sites meant. */
-  timeZone?: string
-  /** Render `:ss` too. Default false. */
-  seconds?: boolean
-}
-
-/** A local clock reading — `"09:41"`. Seeds: `m365-explorer/explorer-page.tsx`,
- * `walking-pad/session-history.tsx` (both `toLocaleTimeString([...], { hour: '2-digit', minute:
- * '2-digit' })`). A non-finite/unparseable input prints {@link NON_FINITE}. */
-export function clock(value: Date | number | string, options: ClockOptions = {}): string {
-  const date = toDate(value)
-  if (date === null) return NON_FINITE
-  const { locale, timeZone, seconds = false } = options
-  return dateFormat(locale, {
-    hour: '2-digit',
-    minute: '2-digit',
-    ...(seconds && { second: '2-digit' }),
-    hour12: false,
-    ...(timeZone !== undefined && { timeZone }),
-  }).format(date)
-}
-
 export type WeekdayOptions = LocaleOption & {
   /** `Intl.DateTimeFormat`'s own weekday widths. Default `'short'` (`"Mon"`). */
   format?: 'short' | 'long' | 'narrow'
@@ -139,37 +80,6 @@ export function relativeTime(
   return relativeTimeFormat(locale).format(Math.round(diffMs / unit.ms), unit.unit)
 }
 
-export type DurationUnit = 'seconds' | 'minutes'
-
-export type DurationOptions = {
-  /** Unit of the input value. Default `'seconds'`. */
-  unit?: DurationUnit
-}
-
-/**
- * Human duration — `"1h 02m"`, `"5m"`, `"42s"`. Minutes zero-pad once an hour is present (`"1h
- * 02m"`, a clock-reading convention); alone they don't (`"5m"`). Seconds show only under a minute
- * (`"42s"`). A non-finite value prints {@link NON_FINITE}.
- *
- * The one signature standing in for argo's four duration spellings: `walking-pad/
- * formatters.ts#formatDuration` (seconds, `<60s` → `"Ns"` — this IS that shape),
- * `reading/format.ts#formatReadTime` (seconds, no `<60s` branch, floors at `"0m"` — pass a value
- * `>= 60` and the shapes match), `astro-window/formulas.ts#fmtMinutes` (minutes as input — pass
- * `{ unit: 'minutes' }`). The fourth, `walking-pad/formatters.ts#formatDurationClock` (`h:mm:ss`),
- * is {@link durationClock} below, not this.
- */
-export function duration(value: number, options: DurationOptions = {}): string {
-  if (!Number.isFinite(value)) return NON_FINITE
-  const { unit = 'seconds' } = options
-  const totalSeconds = Math.max(0, Math.round(unit === 'minutes' ? value * 60 : value))
-  if (totalSeconds < 60) return `${totalSeconds}s`
-  const totalMinutes = Math.round(totalSeconds / 60)
-  const h = Math.floor(totalMinutes / 60)
-  const m = totalMinutes % 60
-  if (h === 0) return `${m}m`
-  return `${h}h ${String(m).padStart(2, '0')}m`
-}
-
 /** Clock-style duration — `"1:02:03"`, `"04:12"`. Seeded from `walking-pad/
  * formatters.ts#formatDurationClock`. A non-finite value prints {@link NON_FINITE}. */
 export function durationClock(seconds: number): string {

package/src/format/index.ts

@@ -2,68 +2,22 @@
  * `basalt-ui/format` — Mantine-free, React-free `Intl`-backed formatting. One implementation for
  * numbers/percentages/money, dates/times/durations and the two measurement units argo needed
  * (`km`/`kcal`) — replacing argo's `features/*\/{formatters,formulas,format}.ts` (~350 of 643
- * lines across four duration spellings) and the chart layer's own `charts/utils/format.ts`, which
- * now re-exports from here.
+ * lines across four duration spellings) and the 1.x chart layer's own formatters (2.0's charts
+ * import the internals directly).
  *
  * Every formatter takes `(value, opts?)`; `locale` on every `opts` defaults to `undefined` —
  * `Intl`'s own "use the runtime's locale". Every non-finite/unparseable input prints the same
  * {@link NON_FINITE} em dash rather than `"NaN"` or throwing.
  *
  * @example
- * import { money, percent, duration, weekday, relativeTime } from 'basalt-ui/format'
+ * import { money, percent, durationClock, weekday, relativeTime } from 'basalt-ui/format'
  *
  * money(1234, { currency: 'USD' })        // "$1,234"
  * percent(0.42)                            // "42%"
- * duration(3_723)                          // "1h 02m"
+ * durationClock(3_723)                    // "1:02:03"
  * weekday('2026-09-02')                    // "Wed"
  * relativeTime(Date.now() - 3_600_000)     // "1 hour ago"
  */
-export {
-  compact,
-  deltaPct,
-  type DeltaPctOptions,
-  fmtCompact,
-  type FmtCompactOptions,
-  fmtCurrency,
-  type FmtCurrencyOptions,
-  fmtInt,
-  fmtPercent,
-  type FmtPercentOptions,
-  integer,
-  type LocaleOption,
-  money,
-  NON_FINITE,
-  percent,
-} from './number'
-export {
-  clock,
-  type ClockOptions,
-  duration,
-  durationClock,
-  type DurationOptions,
-  type DurationUnit,
-  fmtAxisDate,
-  fmtTooltipDate,
-  relativeTime,
-  type RelativeTimeOptions,
-  weekday,
-  type WeekdayOptions,
-} from './date'
-export { kcal, type KcalOptions, km, type KmOptions } from './measure'
-
-import { fmtCompact, fmtCurrency, fmtInt, fmtPercent } from './number'
-import { fmtAxisDate, fmtTooltipDate } from './date'
-
-/**
- * Every shipped chart-facing formatter under one name, so a chart can be handed the whole set
- * (`format={formatters.compact}`). Unchanged shape from `charts/utils/format.ts` — this is the
- * SAME object, not a second one, so an existing `formatters.x` call site keeps working verbatim.
- */
-export const formatters = {
-  compact: fmtCompact,
-  percent: fmtPercent,
-  currency: fmtCurrency,
-  int: fmtInt,
-  axisDate: fmtAxisDate,
-  tooltipDate: fmtTooltipDate,
-} as const
+export { integer, money, percent } from './number'
+export { durationClock, relativeTime, weekday } from './date'
+export { kcal, km } from './measure'