@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/series-chart-ticks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/series-chart-ticks.ts"],"sourcesContent":["// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.\n//\n// Handed an explicit numeric domain, recharts divides it into equal parts and prints\n// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a\n// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These\n// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step\n// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the\n// fit leaves and a zoom window's exact edges both survive; the frame simply does not\n// get a number of its own.\n\n/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half\n *  to about twice this, which is the price of every tick being a round number. */\nconst TARGET_TICKS = 5;\n\n/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */\nexport function niceStep(span: number, target: number = TARGET_TICKS): number {\n  const rough = span / Math.max(1, target);\n  const magnitude = 10 ** Math.floor(Math.log10(rough));\n  const norm = rough / magnitude;\n  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;\n  return factor * magnitude;\n}\n\n/**\n * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no\n * span to divide (no domain, a zero-height one, anything non-finite), which leaves the\n * choice to recharts.\n *\n * Each tick is computed as `k × step` and then rounded to the step's own decimals:\n * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.\n */\nexport function niceTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const step = niceStep(high - low, target);\n  if (!(step > 0) || !Number.isFinite(step)) return undefined;\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  const ticks: number[] = [];\n  // Half a step's tolerance per end would admit ticks outside the frame; a millionth\n  // of one only forgives the float error in `low / step`.\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) {\n    // `+ 0` turns the -0 that `Number(\"-0.00\")` gives back into a plain 0.\n    ticks.push(Number((k * step).toFixed(decimals)) + 0);\n  }\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short\n * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.\n * `undefined` when the window holds no whole number at all, so the caller can fall\n * back to the fractional ticks of a deep zoom rather than show none.\n */\nexport function integerTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high >= low)) return undefined;\n  const step = high > low ? Math.max(1, niceStep(high - low, target)) : 1;\n  const ticks: number[] = [];\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) ticks.push(k * step + 0);\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * The slots of a CATEGORY axis that lie inside a window over their positions.\n *\n * `SeriesChart` draws a category axis on the slot INDEX (see `x.type: \"category\"`), so a\n * zoom window is a range of fractional positions — [2.6, 8.3] after a drag across the\n * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in\n * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.\n */\nexport function categoryTicks(\n  domain: readonly [number, number] | undefined,\n  count: number,\n): number[] | undefined {\n  if (!domain || !(count > 0)) return undefined;\n  const first = Math.max(0, Math.ceil(domain[0] - 1e-6));\n  const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));\n  const ticks: number[] = [];\n  for (let slot = first; slot <= last; slot++) ticks.push(slot);\n  return ticks.length ? ticks : undefined;\n}\n\n/** What one tick of a time axis stands for, which is also how its label is written. */\nexport type TimeTickUnit = \"hour\" | \"day\" | \"month\" | \"year\";\n\nconst HOUR = 3_600_000;\nconst DAY = 24 * HOUR;\n\n/**\n * The calendar steps a time axis may tick in, with their rough length for choosing.\n * Months and years are stepped with `Date` setters, not by adding their \"length\":\n * thirty days from the 1st of February is the 3rd of March, and a tick that promises a\n * month start and prints the 3rd is the ruler lying.\n */\nconst TIME_STEPS: readonly { unit: TimeTickUnit; n: number; ms: number }[] = [\n  { unit: \"hour\", n: 1, ms: HOUR },\n  { unit: \"hour\", n: 3, ms: 3 * HOUR },\n  { unit: \"hour\", n: 6, ms: 6 * HOUR },\n  { unit: \"hour\", n: 12, ms: 12 * HOUR },\n  { unit: \"day\", n: 1, ms: DAY },\n  { unit: \"day\", n: 2, ms: 2 * DAY },\n  { unit: \"day\", n: 7, ms: 7 * DAY },\n  { unit: \"month\", n: 1, ms: 30.44 * DAY },\n  { unit: \"month\", n: 2, ms: 60.88 * DAY },\n  { unit: \"month\", n: 3, ms: 91.31 * DAY },\n  { unit: \"month\", n: 6, ms: 182.62 * DAY },\n];\n\n/**\n * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and\n * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can\n * say as much as the tick means (\"Mar 26\" for a month start, \"14 Mar\" for a day).\n *\n * The time counterpart of {@link niceTicks}: a 1/2/5 ladder over raw milliseconds lands\n * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price\n * history and cash buffer each thinned their own ticks by hand for exactly this reason.\n */\nexport function timeTicksWithUnit(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): { ticks: number[]; unit: TimeTickUnit } | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const rough = (high - low) / Math.max(1, target);\n  let unit: TimeTickUnit = \"year\";\n  let n = 1;\n  let best = Infinity;\n  for (const step of TIME_STEPS) {\n    const miss = Math.abs(Math.log(step.ms / rough));\n    if (miss < best) {\n      best = miss;\n      unit = step.unit;\n      n = step.n;\n    }\n  }\n  // The year ladder competes on the same terms as the table: one year is 365.25 days.\n  const yearN = Math.max(1, Math.round(niceStep((high - low) / (365.25 * DAY), target)));\n  if (Math.abs(Math.log((yearN * 365.25 * DAY) / rough)) < best) {\n    unit = \"year\";\n    n = yearN;\n  }\n\n  const start = new Date(low);\n  start.setMinutes(0, 0, 0);\n  if (unit !== \"hour\") start.setHours(0);\n  if (unit === \"month\" || unit === \"year\") start.setDate(1);\n  if (unit === \"year\") start.setMonth(0);\n  // Onto the step's own grid: hours of the day, Mondays, month indices, years — so a\n  // zoom window starting on a Wednesday still ticks on Mondays.\n  if (unit === \"hour\") start.setHours(start.getHours() - (start.getHours() % n));\n  if (unit === \"day\" && n === 7) start.setDate(start.getDate() - ((start.getDay() + 6) % 7));\n  if (unit === \"month\") start.setMonth(start.getMonth() - (start.getMonth() % n));\n  if (unit === \"year\") start.setFullYear(start.getFullYear() - (start.getFullYear() % n));\n\n  const ticks: number[] = [];\n  const at = new Date(start);\n  // Bounded, so a window of a million years cannot hang the render.\n  for (let guard = 0; guard < 1000 && at.getTime() <= high; guard++) {\n    if (at.getTime() >= low) ticks.push(at.getTime());\n    if (unit === \"hour\") at.setHours(at.getHours() + n);\n    else if (unit === \"day\") at.setDate(at.getDate() + n);\n    else if (unit === \"month\") at.setMonth(at.getMonth() + n);\n    else at.setFullYear(at.getFullYear() + n);\n  }\n  return ticks.length ? { ticks, unit } : undefined;\n}\n\n/** {@link timeTicksWithUnit}, ticks only. */\nexport function timeTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  return timeTicksWithUnit(domain, target)?.ticks;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/series-chart-ticks.ts"],"sourcesContent":["// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.\n//\n// Handed an explicit numeric domain, recharts divides it into equal parts and prints\n// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a\n// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These\n// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step\n// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the\n// fit leaves and a zoom window's exact edges both survive; the frame simply does not\n// get a number of its own.\n\n/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half\n *  to about twice this, which is the price of every tick being a round number. */\nconst TARGET_TICKS = 5;\n\n/** The aim at Large and Extra large (docs/text-size-harmonization.md §4): the labels are\n *  25–50 % wider and taller, so five of them crowd an axis that holds them at Normal. */\nexport const LARGE_TEXT_TARGET_TICKS = 3;\n\n/** How many ticks to aim for at a text `scale` (`useTextSize().scale`): five at Normal,\n *  three from Large up. */\nexport function tickTarget(scale = 1): number {\n  return scale > 1 ? LARGE_TEXT_TARGET_TICKS : TARGET_TICKS;\n}\n\n/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */\nexport function niceStep(span: number, target: number = TARGET_TICKS): number {\n  const rough = span / Math.max(1, target);\n  const magnitude = 10 ** Math.floor(Math.log10(rough));\n  const norm = rough / magnitude;\n  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;\n  return factor * magnitude;\n}\n\n/**\n * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no\n * span to divide (no domain, a zero-height one, anything non-finite), which leaves the\n * choice to recharts.\n *\n * Each tick is computed as `k × step` and then rounded to the step's own decimals:\n * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.\n */\nexport function niceTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const step = niceStep(high - low, target);\n  if (!(step > 0) || !Number.isFinite(step)) return undefined;\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  const ticks: number[] = [];\n  // Half a step's tolerance per end would admit ticks outside the frame; a millionth\n  // of one only forgives the float error in `low / step`.\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) {\n    // `+ 0` turns the -0 that `Number(\"-0.00\")` gives back into a plain 0.\n    ticks.push(Number((k * step).toFixed(decimals)) + 0);\n  }\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short\n * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.\n * `undefined` when the window holds no whole number at all, so the caller can fall\n * back to the fractional ticks of a deep zoom rather than show none.\n */\nexport function integerTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high >= low)) return undefined;\n  const step = high > low ? Math.max(1, niceStep(high - low, target)) : 1;\n  const ticks: number[] = [];\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) ticks.push(k * step + 0);\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * The slots of a CATEGORY axis that lie inside a window over their positions.\n *\n * `SeriesChart` draws a category axis on the slot INDEX (see `x.type: \"category\"`), so a\n * zoom window is a range of fractional positions — [2.6, 8.3] after a drag across the\n * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in\n * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.\n */\nexport function categoryTicks(\n  domain: readonly [number, number] | undefined,\n  count: number,\n): number[] | undefined {\n  if (!domain || !(count > 0)) return undefined;\n  const first = Math.max(0, Math.ceil(domain[0] - 1e-6));\n  const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));\n  const ticks: number[] = [];\n  for (let slot = first; slot <= last; slot++) ticks.push(slot);\n  return ticks.length ? ticks : undefined;\n}\n\n/** What one tick of a time axis stands for, which is also how its label is written. */\nexport type TimeTickUnit = \"hour\" | \"day\" | \"month\" | \"year\";\n\nconst HOUR = 3_600_000;\nconst DAY = 24 * HOUR;\n\n/**\n * The calendar steps a time axis may tick in, with their rough length for choosing.\n * Months and years are stepped with `Date` setters, not by adding their \"length\":\n * thirty days from the 1st of February is the 3rd of March, and a tick that promises a\n * month start and prints the 3rd is the ruler lying.\n */\nconst TIME_STEPS: readonly { unit: TimeTickUnit; n: number; ms: number }[] = [\n  { unit: \"hour\", n: 1, ms: HOUR },\n  { unit: \"hour\", n: 3, ms: 3 * HOUR },\n  { unit: \"hour\", n: 6, ms: 6 * HOUR },\n  { unit: \"hour\", n: 12, ms: 12 * HOUR },\n  { unit: \"day\", n: 1, ms: DAY },\n  { unit: \"day\", n: 2, ms: 2 * DAY },\n  { unit: \"day\", n: 7, ms: 7 * DAY },\n  { unit: \"month\", n: 1, ms: 30.44 * DAY },\n  { unit: \"month\", n: 2, ms: 60.88 * DAY },\n  { unit: \"month\", n: 3, ms: 91.31 * DAY },\n  { unit: \"month\", n: 6, ms: 182.62 * DAY },\n];\n\n/**\n * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and\n * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can\n * say as much as the tick means (\"Mar 26\" for a month start, \"14 Mar\" for a day).\n *\n * The time counterpart of {@link niceTicks}: a 1/2/5 ladder over raw milliseconds lands\n * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price\n * history and cash buffer each thinned their own ticks by hand for exactly this reason.\n */\nexport function timeTicksWithUnit(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): { ticks: number[]; unit: TimeTickUnit } | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const rough = (high - low) / Math.max(1, target);\n  let unit: TimeTickUnit = \"year\";\n  let n = 1;\n  let best = Infinity;\n  for (const step of TIME_STEPS) {\n    const miss = Math.abs(Math.log(step.ms / rough));\n    if (miss < best) {\n      best = miss;\n      unit = step.unit;\n      n = step.n;\n    }\n  }\n  // The year ladder competes on the same terms as the table: one year is 365.25 days.\n  const yearN = Math.max(1, Math.round(niceStep((high - low) / (365.25 * DAY), target)));\n  if (Math.abs(Math.log((yearN * 365.25 * DAY) / rough)) < best) {\n    unit = \"year\";\n    n = yearN;\n  }\n\n  const start = new Date(low);\n  start.setMinutes(0, 0, 0);\n  if (unit !== \"hour\") start.setHours(0);\n  if (unit === \"month\" || unit === \"year\") start.setDate(1);\n  if (unit === \"year\") start.setMonth(0);\n  // Onto the step's own grid: hours of the day, Mondays, month indices, years — so a\n  // zoom window starting on a Wednesday still ticks on Mondays.\n  if (unit === \"hour\") start.setHours(start.getHours() - (start.getHours() % n));\n  if (unit === \"day\" && n === 7) start.setDate(start.getDate() - ((start.getDay() + 6) % 7));\n  if (unit === \"month\") start.setMonth(start.getMonth() - (start.getMonth() % n));\n  if (unit === \"year\") start.setFullYear(start.getFullYear() - (start.getFullYear() % n));\n\n  const ticks: number[] = [];\n  const at = new Date(start);\n  // Bounded, so a window of a million years cannot hang the render.\n  for (let guard = 0; guard < 1000 && at.getTime() <= high; guard++) {\n    if (at.getTime() >= low) ticks.push(at.getTime());\n    if (unit === \"hour\") at.setHours(at.getHours() + n);\n    else if (unit === \"day\") at.setDate(at.getDate() + n);\n    else if (unit === \"month\") at.setMonth(at.getMonth() + n);\n    else at.setFullYear(at.getFullYear() + n);\n  }\n  return ticks.length ? { ticks, unit } : undefined;\n}\n\n/** {@link timeTicksWithUnit}, ticks only. */\nexport function timeTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  return timeTicksWithUnit(domain, target)?.ticks;\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart.d.ts

@@ -5,19 +5,22 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { b$ as ChartTooltipPlacement } from '../delete-account-setting-CpIhzxxZ.js';
+import { c6 as ChartTooltipPlacement } from '../delete-account-setting-FLyJf-kZ.js';
+import { ChartHeight } from './chart-height.js';
 import 'recharts';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -85,6 +88,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -98,7 +104,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it
@@ -362,7 +368,7 @@ interface SeriesChartX {
      * instead of being centred across it; the anchor is physical, like the plot (see
      * `ChartContainer`), so it is the same in RTL. The band under the axis grows to the
      * rotated height of the longest label on show, estimated from its length (at most
-     * 120 px, past which a label is clipped). Default 0.
+     * 120 px × the text size's scale, past which a label is clipped). Default 0.
      */
     tickAngle?: number;
     /**
@@ -517,13 +523,22 @@ interface SeriesChartProps {
     /** A value in the tooltip, where a number stands on its own and needs its unit.
      *  Default: `Intl.NumberFormat` in the kit's locale. */
     valueFormat?: (value: number) => string;
-    /** Tailwind height class, or a height in pixels. Default `h-72`. The empty state
-     *  takes it too, so a chart losing its last line does not relayout the page under it.
-     *  A number is for a height the caller holds as a number — keksdose's report charts
-     *  take `height = 260` as a prop and wrap the chart in a `SizedSeriesChart` div
-     *  (reports/charts/networth-line.tsx) only to turn it into a style, since a class
-     *  cannot be built from a number Tailwind never saw. */
-    height?: string | number;
+    /**
+     * The chart's height: a CSS length, a Tailwind height class, or px. Default `h-72`
+     * (18rem). The empty state takes it too, so a chart losing its last line does not
+     * relayout the page under it.
+     *
+     * - **A CSS length** (0.32) — `"20rem"`, `"min(20rem, 60dvh)"` — set inline. The form
+     *   for a height that should grow with the text size and still stop at the screen
+     *   (docs/text-size-harmonization.md §10.10): `min(30rem, 60dvh)` is 480 px at Normal
+     *   on a desktop and never more than 60 % of a phone at Extra large, where a scaled
+     *   480 px would be 720.
+     * - **A Tailwind class** — `"h-72"`, `"h-64 md:h-80"` — as before.
+     * - **A number** is px, set inline, and does NOT follow the text size: kept for a
+     *   height the caller holds as a number (keksdose's report charts take
+     *   `height = 260` as a prop). Prefer `"16.25rem"`, or a `min()` with a viewport cap.
+     */
+    height?: ChartHeight;
     /** Bridge holes left by sources sampled on different grids. See {@link mergeSeries}. */
     connectNulls?: boolean;
     /** Shown, centred at the chart's height, instead of an empty chart. Default: the
@@ -567,17 +582,23 @@ interface SeriesChartProps {
     maxVisibleAxes?: SeriesChartAxisBudget;
     /**
      * `"auto"` (the default): a chart so narrow that its axes' bands would leave the plot
-     * under 160 px (`MIN_PLOT_WIDTH`) draws ONE axis a side — lenkbank's four-axis curve
-     * plot on a phone, whose plot was 10 px wide. Measured on the chart's own box
-     * (`ResizeObserver`), and applied on top of `maxVisibleAxes`.
+     * under 160 px (`MIN_PLOT_WIDTH`, × the text size's scale) draws ONE axis a side —
+     * lenkbank's four-axis curve plot on a phone, whose plot was 10 px wide. And a chart
+     * with an axis on EACH side that one a side still leaves too narrow (0.32: at 150 % a
+     * 390 px phone's plot kept about 80 px between its two bands) drops the right-hand,
+     * secondary axis too. Measured on the chart's own box (`ResizeObserver`), and applied
+     * on top of `maxVisibleAxes`. Either way the series on an axis it hid say the axis'
+     * unit in the tooltip and the readout ("Rack load (N)"), and in a legend built by
+     * {@link seriesLegendEntries} with `onAxisBudget`'s ids.
      *
-     * On by default because it cannot touch a layout that works: it needs a side with two
-     * or more axes AND a plot that would otherwise be under 160 px — a four-axis chart
-     * below about 440 px, a two-left-axis one below about 300. A chart with at most one
-     * axis a side (every facing pair, every single-axis chart) is never budgeted, at any
-     * width. `"off"` keeps every declared axis whatever the width: for a stack of
-     * multi-axis charts that must keep identical bands, or a caller budgeting itself.
-     * Without layout (jsdom, SSR) nothing is measured and nothing is hidden.
+     * On by default because it cannot touch a layout that works: it needs a plot that
+     * would otherwise be under 160 px — a four-axis chart below about 440 px at Normal, a
+     * two-left-axis one below about 300, a one-a-side one below about 290 — and the
+     * left-hand axis always stays. A chart with one axis (each chart of a facing pair,
+     * every single-axis chart) is never budgeted, at any width. `"off"` keeps every
+     * declared axis whatever the width: for a stack of multi-axis charts that must keep
+     * identical bands, or a caller budgeting itself. Without layout (jsdom, SSR) nothing is
+     * measured and nothing is hidden.
      */
     axisBudget?: "auto" | "off";
     /**
@@ -600,11 +621,12 @@ interface SeriesChartProps {
      *  keep the real value. Default: none — a zero draws nothing. */
     minBarLength?: number;
 }
-/** How much of an axis band the rotated title takes, in px. Reserved rather than
- *  shared with the ticks: a title merely offset inside the band prints on top of a
- *  five-figure tick, and which gives way depends on the data. */
+/** How much of an axis band the rotated title takes, in px at Normal — × the text size's
+ *  scale on the chart (§3.2), since the title is text. Reserved rather than shared with
+ *  the ticks: a title merely offset inside the band prints on top of a five-figure tick,
+ *  and which gives way depends on the data. */
 declare const AXIS_TITLE_STRIP = 16;
-/** The width the ticks of a y axis get when a caller does not say. */
+/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
 declare const AXIS_TICK_WIDTH = 48;
 /** The band a fitted axis draws, padded — and a real band for constant data, which is
  *  a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */
@@ -615,9 +637,17 @@ declare function paddedDomain(values: Iterable<number>): [number, number] | unde
  * without a second padding rule. `low > high` means "nothing was seen": `undefined`.
  */
 declare function padBand(low: number, high: number): [number, number] | undefined;
-/** The whole band a y axis occupies: its ticks, and its title when it draws one. For
- *  lining a heading up over a PLOT rather than over its column. */
-declare function axisBandWidth(tickWidth: number | undefined, titled: boolean): number;
+/**
+ * The whole band a y axis occupies: its ticks, and its title when it draws one. For
+ * lining a heading up over a PLOT rather than over its column.
+ *
+ * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every
+ * band — the default 48 px and a caller's own `width` alike (keksdose's
+ * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`
+ * and grow with the text. A heading lined up over the plot has to pass the same scale.
+ * One factor for both sides of a facing pair, so the mirrored bands stay equal.
+ */
+declare function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale?: number): number;
 /**
  * The colour an axis TITLE takes, or `undefined` for the neutral one.
  *

package/dist/components/series-chart.js

@@ -24,7 +24,7 @@ import {
 } from "./chart-zoom.js";
 import { STEP_DASH, strokeDash } from "./toggle-legend.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
-import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit } from "./series-chart-ticks.js";
+import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit } from "./series-chart-ticks.js";
 import { autoAxisBudget, axisUnit, budgetedAxes } from "./series-chart-budget.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import {
@@ -32,9 +32,10 @@ import {
   useKitLabels,
   useKitLocale
 } from "../i18n/kit-labels.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
+import { useTextSize } from "../theme/text-size.js";
+import { chartHeightProps } from "./chart-height.js";
 import { cn } from "../lib/cn.js";
-const TOOLTIP_READOUT_QUERY = "(max-width: 639px)";
 function resolveTooltipPlacement(own, fromProvider, phone) {
   const wanted = own ?? fromProvider ?? "cursor";
   return wanted === "auto" ? phone ? "above" : "cursor" : wanted;
@@ -56,12 +57,14 @@ const MAX_TILTED_TICK_BAND = 120;
 const TICK_CHAR_WIDTH = 7;
 const TICK_LINE_HEIGHT = 12;
 const TICK_GAP = 8;
-function tiltedTickBand(labels, angle) {
-  if (!angle) return void 0;
+const LEVEL_TICK_BAND = 30;
+const MIN_TICK_GAP = 32;
+function tiltedTickBand(labels, angle, scale = 1) {
+  if (!angle) return scale === 1 ? void 0 : Math.ceil(LEVEL_TICK_BAND * scale);
   const rad = Math.abs(angle) * Math.PI / 180;
-  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH;
-  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT + TICK_GAP;
-  return Math.min(MAX_TILTED_TICK_BAND, Math.max(30, Math.ceil(band)));
+  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
+  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
+  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
 }
 const AXIS_TICK_WIDTH = 48;
 const AUTO_PAD = 0.04;
@@ -80,8 +83,9 @@ function padBand(low, high) {
   const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;
   return [low - pad, high + pad];
 }
-function axisBandWidth(tickWidth, titled) {
-  return (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+function axisBandWidth(tickWidth, titled, scale = 1) {
+  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+  return scale === 1 ? band : Math.round(band * scale);
 }
 function soleSeriesColor(axis, series) {
   const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);
@@ -234,6 +238,7 @@ function focusedBarShape(index) {
   };
 }
 const MARKER_LABEL_SIZE = 11;
+const REFERENCE_LABEL_SIZE = 10;
 function MarkerLabel({
   viewBox,
   value
@@ -241,16 +246,17 @@ function MarkerLabel({
   const plot = usePlotArea();
   const ref = useRef(null);
   const [measured, setMeasured] = useState();
+  const fontSize = MARKER_LABEL_SIZE * useTextSize().scale;
   const text = value == null ? "" : String(value);
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof el.getComputedTextLength !== "function") return;
     const w = el.getComputedTextLength();
     if (w > 0 && w !== measured) setMeasured(w);
-  }, [text, measured]);
+  }, [text, measured, fontSize]);
   if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
   const cx = viewBox.x + (viewBox.width ?? 0) / 2;
-  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  const half = (measured ?? text.length * fontSize * 0.6) / 2;
   const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
   return /* @__PURE__ */ jsx(
     "text",
@@ -259,7 +265,7 @@ function MarkerLabel({
       x,
       y: viewBox.y - 5,
       textAnchor: "middle",
-      fontSize: MARKER_LABEL_SIZE,
+      fontSize,
       fontWeight: 600,
       fill: "var(--text-primary)",
       className: "recharts-label",
@@ -359,9 +365,12 @@ function SeriesPlot({
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
+  const { scale } = useTextSize();
+  const ticksAim = tickTarget(scale);
+  const grow = (px) => scale === 1 ? px : Math.round(px * scale);
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState(void 0);
-  const phone = useMediaQuery(TOOLTIP_READOUT_QUERY, false);
+  const phone = useBreakpoint("max-sm", false);
   const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
   const [readout, setReadout] = useState(null);
   const [box, setBox] = useState(null);
@@ -381,7 +390,8 @@ function SeriesPlot({
     autoAxisBudget(
       afterCap,
       width,
-      (axis) => axisBandWidth(axis.width, Boolean(axis.title))
+      (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale),
+      scale
     )
   );
   const budgeted = [...capped, ...auto];
@@ -392,8 +402,7 @@ function SeriesPlot({
     reported.current = budgetKey;
     onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
   }, [budgetKey, onAxisBudget]);
-  const heightClass = typeof height === "string" ? height : void 0;
-  const heightStyle = typeof height === "number" ? { height } : void 0;
+  const { className: heightClass, style: heightStyle } = chartHeightProps(height);
   if (!model.source.length || !series.length) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -427,11 +436,12 @@ function SeriesPlot({
   const onRight = visible.some((axis) => axis.orientation === "right");
   const margin = {
     // Room for a marker's label over a point at the top of the band.
-    top: markers?.some((marker) => marker.label) ? 22 : 8,
-    right: onRight ? 0 : 10,
-    left: onLeft ? 0 : 10,
+    top: markers?.some((marker) => marker.label) ? grow(22) : 8,
+    // The first and last x tick's overhang: text, so it grows with it.
+    right: onRight ? 0 : grow(10),
+    left: onLeft ? 0 : grow(10),
     // Under the ticks, not under the whole axis: whatever comes next owns the gap.
-    bottom: x.title ? 18 : 2
+    bottom: x.title ? grow(18) : 2
   };
   const refs = references ?? [];
   const xRefs = refs.filter((ref) => ref.axis === "x");
@@ -447,12 +457,12 @@ function SeriesPlot({
       ]
     ) ?? [Infinity, -Infinity]
   ));
-  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX) : void 0;
+  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : void 0;
   const integerX = model.kind === "number" && (x.integerTicks ?? plotted.every((row2) => {
     const value = finite(row2[xKey]);
     return value === void 0 || Number.isInteger(value);
   }));
-  const xTicks = resolveTicks(x.tickValues, fittedX, xPos) ?? (model.kind === "category" ? categoryTicks(fittedX, rows.length) : model.kind === "time" ? timeUnit?.ticks : integerX ? integerTicks(fittedX) ?? niceTicks(fittedX) : niceTicks(fittedX));
+  const xTicks = resolveTicks(x.tickValues, fittedX, xPos) ?? (model.kind === "category" ? categoryTicks(fittedX, rows.length) : model.kind === "time" ? timeUnit?.ticks : integerX ? integerTicks(fittedX, ticksAim) ?? niceTicks(fittedX, ticksAim) : niceTicks(fittedX, ticksAim));
   const timeFormat = new Intl.DateTimeFormat(locale, TIME_TICK_FORMAT[timeUnit?.unit ?? "day"]);
   const dateFormat = new Intl.DateTimeFormat(locale, {
     dateStyle: "medium",
@@ -470,7 +480,7 @@ function SeriesPlot({
   const label = x.label ?? (model.kind === "time" ? (position) => dateFormat.format(position) : format);
   const xLabel = (position) => label(position, tickAt(position));
   const tickAngle = x.ticks === false ? 0 : x.tickAngle ?? 0;
-  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle);
+  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
   const source = {
     rows: plotted,
     series,
@@ -617,7 +627,7 @@ function SeriesPlot({
                 allowDataOverflow: zoom?.xDomain !== void 0 || model.kind === "category",
                 tickLine: false,
                 axisLine: false,
-                minTickGap: 32,
+                minTickGap: grow(MIN_TICK_GAP),
                 interval: "equidistantPreserveEnd",
                 tick: x.ticks === false ? false : void 0,
                 ...tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {},
@@ -628,8 +638,8 @@ function SeriesPlot({
                   {
                     value: x.title,
                     position: "insideBottom",
-                    offset: -12,
-                    className: "fill-[var(--text-muted)] text-[11px]"
+                    offset: -grow(12),
+                    className: "fill-[var(--text-muted)] text-caption"
                   }
                 )
               }
@@ -643,10 +653,10 @@ function SeriesPlot({
                   yAxisId: axis.id,
                   hide: axis.hide,
                   domain,
-                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain) ?? niceTicks(domain) : niceTicks(domain)),
+                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain, ticksAim) ?? niceTicks(domain, ticksAim) : niceTicks(domain, ticksAim)),
                   allowDataOverflow: zoomed,
                   orientation: axis.orientation ?? "left",
-                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title)),
+                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title), scale),
                   tickLine: false,
                   axisLine: false,
                   tickFormatter: axis.format ?? number,
@@ -658,8 +668,8 @@ function SeriesPlot({
                       angle: axis.orientation === "right" ? 90 : -90,
                       position: axis.orientation === "right" ? "insideRight" : "insideLeft",
                       style: { textAnchor: "middle", fill: soleSeriesColor(axis, series) },
-                      offset: AXIS_TITLE_OFFSET,
-                      className: "fill-[var(--text-muted)] text-[11px]"
+                      offset: grow(AXIS_TITLE_OFFSET),
+                      className: "fill-[var(--text-muted)] text-caption"
                     }
                   )
                 },
@@ -803,7 +813,7 @@ function SeriesPlot({
                   label: ref.label ? {
                     value: ref.label,
                     position: "insideTopLeft",
-                    fontSize: 10,
+                    fontSize: REFERENCE_LABEL_SIZE * scale,
                     fill: color
                   } : void 0
                 },