@eifi1/ui-kit 0.15.3 → 0.15.4

package/dist/shell/top-bar-brand.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aA as KitLinkProps, az as KitLinkComponent } from '../kit-labels-BHfRBbHs.js';
+import { aB as KitLinkProps, aA as KitLinkComponent } from '../kit-labels-CnnBd-2N.js';
 import '../components/data-table-labels.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';

package/dist/shell.d.ts

@@ -13,7 +13,7 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
-import './kit-labels-BHfRBbHs.js';
+import './kit-labels-CnnBd-2N.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';

package/dist/wizard/stepper-nav.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../kit-labels-BHfRBbHs.js';
+import { f as ButtonVariant } from '../kit-labels-CnnBd-2N.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/data-table-labels.js';
 import '../components/mini-calendar.js';

package/dist/wizard.d.ts

@@ -6,7 +6,7 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-BHfRBbHs.js';
+import './kit-labels-CnnBd-2N.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/amount-input.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select";
 import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui";
 import { cn } from "../lib/cn";
+import { currencyMinorDigits } from "../lib/format";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
@@ -182,17 +183,6 @@ interface AmountInputProps {
   onCommit?: (value: string) => void;
 }
 
-/** The currency's minor unit (CHF 2, JPY 0), or `undefined` for no currency or a code
- *  `Intl` does not accept. */
-function currencyDigits(code: string | undefined): number | undefined {
-  if (!code) return undefined;
-  try {
-    return new Intl.NumberFormat("en", { style: "currency", currency: code }).resolvedOptions()
-      .maximumFractionDigits;
-  } catch {
-    return undefined;
-  }
-}
 
 /**
  * A settled figure, rounded to `digits` (half away from zero) and clamped to
@@ -360,7 +350,12 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // draft is shown only while it still spells what the field holds; a value set from
     // outside, a calculator result or a commit falls back to the derived spelling.
     const [draft, setDraft] = useState<string | null>(null);
-    const derived = mark === "," ? shown.replace(/\./g, ",") : shown;
+    // A value the HOST set (not one typed here) is shown at the currency's minor unit
+    // while the field is not being edited: an FX estimate of 93.4213 showed four
+    // decimals (keksdose live #356). Display only — `value` is the host's, untouched.
+    const displayDigits = digitsProp ?? currencyMinorDigits(currency);
+    const resting = focused ? shown : settleAmount(shown, displayDigits);
+    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
     const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
     const display =
       draft === null
@@ -380,7 +375,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // edit the field's own text that is simply what the field was showing; the
     // desktop calculator keeps its expression in a popover the field never sees,
     // so it passes it in (see `CalculatorButton`'s `onChange`).
-    const digits = digitsProp ?? currencyDigits(currency);
+    const digits = digitsProp ?? currencyMinorDigits(currency);
     const settle = (text: string) => settleAmount(text, digits, min, max);
     const handleText = (raw: string, previous: string = shown) => {
       const text = sanitizeLive(raw);

package/src/components/chart.tsx

@@ -243,6 +243,21 @@ interface ChartTooltipContentProps {
   boundaryRef?: RefObject<HTMLElement | null>;
   /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
   includeHidden?: boolean;
+  /**
+   * `"floating"` (the default): the box recharts moves with the cursor. `"readout"`: the
+   * same heading and values as a flat row for a FIXED place outside the plot — a
+   * `SeriesChart` whose `tooltip.placement` is `"above"`/`"below"` portals it there, so
+   * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).
+   * No border, shadow, width cap or viewport nudge; the values flow in a grid whose
+   * column count depends on the row's width alone, so the row is the same height
+   * whatever is being pointed at — and, idle, it shows {@link idleKeys} with "—".
+   */
+  variant?: "floating" | "readout";
+  /** Readout only: the series to list while nothing is active, so the row keeps the
+   *  height it will have once something is. */
+  idleKeys?: readonly string[];
+  /** Readout only: the heading while nothing is active. Default "—". */
+  idleLabel?: ReactNode;
 }
 
 export function ChartTooltipContent({
@@ -257,13 +272,19 @@ export function ChartTooltipContent({
   coordinate,
   boundaryRef,
   includeHidden = false,
+  variant = "floating",
+  idleKeys,
+  idleLabel,
 }: ChartTooltipContentProps) {
   const config = useChart();
   const tipRef = useRef<HTMLDivElement>(null);
+  const readout = variant === "readout";
   // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
   // series a legend toggle switched off with `hide`; those go here instead.
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  const visible = Boolean(active && items?.length);
+  const shown = Boolean(active && items?.length);
+  // Everything below that measures and moves the box is about a FLOATING one.
+  const visible = shown && !readout;
   // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
   // width; subtract the container's scrollLeft to get its on-screen x, then flip
   // left if the tooltip's own width would run past the visible right edge.
@@ -332,6 +353,85 @@ export function ChartTooltipContent({
       setNudge(next);
     }
   }, [visible, x, payload, label, flip, settled]);
+  // One series' line — the floating box stacks them; the readout lays them in a grid,
+  // where a long name is cut rather than wrapped so every cell stays one line high.
+  const tooltipRow = (item: TooltipPayloadItem, i: number, inRow: boolean) => {
+    // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
+    // `name` (the nameKey value). Prefer whichever the config knows.
+    const dk = item.dataKey != null ? String(item.dataKey) : undefined;
+    const nm = item.name != null ? String(item.name) : undefined;
+    const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));
+    const series = config[cfgKey];
+    const fill = typeof item.payload?.fill === "string" ? item.payload.fill : undefined;
+    // The data point's own `fill` before recharts' `item.color`: a treemap tile,
+    // or a bar with a per-cell colour, IS the colour the reader is pointing at,
+    // while `item.color` is the series-wide one — every tile's swatch came out
+    // `--chart-1` whatever colour the tile was.
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const name = series?.label ?? nm ?? cfgKey;
+    const raw = tooltipValue(item.value);
+    let text: ReactNode;
+    // An idle readout cell has asked nothing yet, so there is no absence for
+    // `formatValue` to word — it is the bare mark.
+    if (inRow && !shown) text = NO_VALUE;
+    else if (formatValue) text = formatValue(raw);
+    else if (raw == null) text = NO_VALUE;
+    else text = valueFormatter ? valueFormatter(raw) : raw;
+    return (
+      <div
+        key={`${cfgKey}-${i}`}
+        // A readout cell is capped so a wide row does not push its value a column away
+        // from its name.
+        className={cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2")}
+      >
+        <span
+          className={cn(
+            "shrink-0 rounded-[2px]",
+            indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1",
+          )}
+          style={{ backgroundColor: color }}
+        />
+        <span
+          className={cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words")}
+        >
+          {name}
+        </span>
+        <span
+          data-private
+          // Isolated, so an RTL page does not turn "-26.6" into "26.6-": a figure has no
+          // strong direction of its own, and one formatted with an RTL mark keeps it.
+          dir="auto"
+          className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
+        >
+          {text}
+        </span>
+      </div>
+    );
+  };
+
+  if (readout) {
+    // Idle, the row lists every series with no value — the same cells it will have, so
+    // nothing under it moves on the first tap.
+    const rows: TooltipPayloadItem[] = shown
+      ? items!
+      : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
+    return (
+      <div className="text-xs" data-chart-readout={shown ? "active" : "idle"}>
+        {/* A full 24 px line: the zoom's reset button sits at the top corner of a chart
+            whose row is above it, and has to fit beside the heading, not over a value. */}
+        <div data-readout-heading className="truncate font-medium leading-6 text-[var(--text-primary)]">
+          {shown && !hideLabel && label != null
+            ? labelFormatter
+              ? labelFormatter(label)
+              : label
+            : (idleLabel ?? NO_VALUE)}
+        </div>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1">
+          {rows.map((item, i) => tooltipRow(item, i, true))}
+        </div>
+      </div>
+    );
+  }
   if (!visible || !items) return null;
   return (
     <div
@@ -359,46 +459,7 @@ export function ChartTooltipContent({
           {labelFormatter ? labelFormatter(label) : label}
         </div>
       )}
-      <div className="grid gap-1.5">
-        {items.map((item, i) => {
-          // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
-          // `name` (the nameKey value). Prefer whichever the config knows.
-          const dk = item.dataKey != null ? String(item.dataKey) : undefined;
-          const nm = item.name != null ? String(item.name) : undefined;
-          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));
-          const series = config[cfgKey];
-          const fill = typeof item.payload?.fill === "string" ? item.payload.fill : undefined;
-          // The data point's own `fill` before recharts' `item.color`: a treemap tile,
-          // or a bar with a per-cell colour, IS the colour the reader is pointing at,
-          // while `item.color` is the series-wide one — every tile's swatch came out
-          // `--chart-1` whatever colour the tile was.
-          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
-          const name = series?.label ?? nm ?? cfgKey;
-          const raw = tooltipValue(item.value);
-          let shown: ReactNode;
-          if (formatValue) shown = formatValue(raw);
-          else if (raw == null) shown = NO_VALUE;
-          else shown = valueFormatter ? valueFormatter(raw) : raw;
-          return (
-            <div key={`${cfgKey}-${i}`} className="flex items-center gap-2">
-              <span
-                className={cn(
-                  "shrink-0 rounded-[2px]",
-                  indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1",
-                )}
-                style={{ backgroundColor: color }}
-              />
-              <span className="min-w-0 break-words text-[var(--text-muted)]">{name}</span>
-              <span
-                data-private
-                className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
-              >
-                {shown}
-              </span>
-            </div>
-          );
-        })}
-      </div>
+      <div className="grid gap-1.5">{items.map((item, i) => tooltipRow(item, i, false))}</div>
     </div>
   );
 }

package/src/components/chip.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useRef, useState } from "react";
+import { forwardRef, isValidElement, useId, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Check, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -307,7 +307,13 @@ interface ChipBaseProps {
    * drawn, so write it in normal case.
    */
   caps?: boolean;
-  icon?: LucideIcon;
+  /**
+   * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or
+   * — since 0.15.4 — a ready element (`icon={<Check className="text-[var(--success)]" />}`)
+   * for a glyph whose colour or stroke carries a state; it is sized to the same box
+   * (keksdose live #358 built that slot by hand inside `children`).
+   */
+  icon?: LucideIcon | ReactElement;
   /**
    * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a
    * toggle.
@@ -500,8 +506,27 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         </span>
       )}
       {dot && <span aria-hidden data-chip-dot="" className={cn("shrink-0 rounded-full", DOT_SIZE[size], DOT[tone])} />}
-      {Icon && <Icon className={cn(s.icon, "shrink-0")} aria-hidden />}
-      <span className="min-w-0 truncate">{children}</span>
+      {Icon &&
+        (isValidElement(Icon) ? (
+          <span aria-hidden className={cn(s.icon, "inline-flex shrink-0 [&>svg]:size-full")}>
+            {Icon}
+          </span>
+        ) : (
+          <Icon className={cn(s.icon, "shrink-0")} aria-hidden />
+        ))}
+      {/* Text truncates. Mixed children (an icon and a word) sit in a row instead: as a
+          plain span, the svg — a block under Tailwind's preflight — stacked above the
+          text (keksdose live #358). */}
+      <span
+        className={cn(
+          "min-w-0",
+          typeof children === "string" || typeof children === "number"
+            ? "truncate"
+            : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0",
+        )}
+      >
+        {children}
+      </span>
     </>
   );
 

package/src/components/form-actions.tsx

@@ -160,7 +160,15 @@ export function FormActions({
       {...rest}
       style={
         placement === "sticky"
-          ? { paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))", ...style }
+          ? {
+              paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))",
+              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`
+              // pinned the row under AppShell's nav, which covers the page's last ~56px.
+              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an
+              // AppShell); the 1px overlaps the two top borders into one line.
+              bottom: "max(0px, calc(var(--app-nav-h, 0px) - 1px))",
+              ...style,
+            }
           : style
       }
       className={cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}

package/src/components/number-input.tsx

@@ -1,4 +1,4 @@
-import { useId, useRef, useState } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
@@ -191,6 +191,21 @@ export function NumberInput({
   const asDisplay = isMobile && variant === "display";
   const showCalc = calculator && !disabled && !isMobile;
   const [focused, setFocused] = useState(false);
+  // The unit and the calculator's measured width, reserved as the field's end padding.
+  const endRef = useRef<HTMLDivElement>(null);
+  const [endWidth, setEndWidth] = useState<number | null>(null);
+  const hasEnd = showCalc || suffix !== undefined;
+  useLayoutEffect(() => {
+    const el = endRef.current;
+    if (!hasEnd || !el || typeof ResizeObserver === "undefined") return;
+    // The first callback fires on `observe`; no layout (jsdom) keeps the class fallback.
+    const observer = new ResizeObserver(() => {
+      const width = el.getBoundingClientRect().width;
+      setEndWidth(width > 0 ? Math.ceil(width) : null);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasEnd]);
   // On mobile, focusing opens the numpad bottom sheet instead of the native
   // keyboard (#334); the ref lets its "Done" blur → commit + close.
   const showNumpad = isMobile && !disabled && focused;
@@ -272,12 +287,17 @@ export function NumberInput({
           showCalc && suffix !== undefined ? "pe-16" : showCalc ? "pe-9" : suffix !== undefined ? "pe-8" : undefined,
           invalid && FIELD_INVALID,
         )}
+        // The classes above are the fallback; once the end controls are measured the
+        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a
+        // "%" in a ~78px table cell 32px of padding and the digits ~32px of room
+        // (keksdose live #367); a long unit ("km/h") got too little.
+        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + 4 } : undefined}
       />
       {(showCalc || suffix !== undefined) && (
         // One flex track for both, so the unit and the calculator sit side by side
         // instead of stacking on the same corner — AmountInput's arrangement, which
         // has carried a chip and a calculator together since #430.
-        <div className="absolute inset-y-0 end-0 flex items-center">
+        <div ref={endRef} className="absolute inset-y-0 end-0 flex items-center">
           {showCalc && (
             <CalculatorButton
               value={value}

package/src/components/series-chart.tsx

@@ -68,7 +68,13 @@ import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } fr
 // The rule stays internal, like the ticks; the one type a public prop names is re-exported.
 export type { SeriesChartAxisBudget } from "./series-chart-budget";
 import { paletteFor } from "../theme/chart-palette";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import {
+  useKitChartTooltipPlacement,
+  useKitLabels,
+  useKitLocale,
+  type ChartTooltipPlacement,
+} from "../i18n/kit-labels";
+import { useMediaQuery } from "../hooks/use-media-query";
 import { cn } from "../lib/cn";
 
 export interface SeriesChartSeries {
@@ -356,8 +362,49 @@ export interface SeriesChartX {
   integerTicks?: boolean;
 }
 
+/** Where the tooltip goes — see {@link SeriesChartTooltip.placement}. */
+export type SeriesChartTooltipPlacement = ChartTooltipPlacement;
+
+/** Below Tailwind's `sm` — where `"auto"` takes the tooltip off the plot. Narrower than
+ *  the kit's `PHONE_QUERY` (767 px) on purpose: a tablet's plot is wide enough that the
+ *  box beside the finger leaves the data in view; a phone's is not. */
+const TOOLTIP_READOUT_QUERY = "(max-width: 639px)";
+
+/**
+ * The placement a chart actually uses: its own, else the provider's, else `"cursor"`;
+ * `"auto"` is `"above"` on a phone (`phone`: below `sm`) and `"cursor"` from `sm` up.
+ */
+export function resolveTooltipPlacement(
+  own: SeriesChartTooltipPlacement | undefined,
+  fromProvider: SeriesChartTooltipPlacement | undefined,
+  phone: boolean,
+): "cursor" | "above" | "below" {
+  const wanted = own ?? fromProvider ?? "cursor";
+  return wanted === "auto" ? (phone ? "above" : "cursor") : wanted;
+}
+
 /** Room for the tooltip beyond the chart — see {@link SeriesChartProps.tooltip}. */
 export interface SeriesChartTooltip {
+  /**
+   * Where the values under the pointer are shown (keksdose #359: on a phone the box
+   * sat under the finger, on the very data it was reporting).
+   * - `"cursor"` (the default): the floating box that follows the pointer.
+   * - `"above"` / `"below"`: a READOUT row — the same heading and values, flat — in
+   *   room reserved over or under the plot from the first render, so nothing jumps on
+   *   the first tap. It follows hover, a tap and the keyboard's stops; the cursor line
+   *   and the active dot stay on the plot, and no box floats. Idle, it lists the series
+   *   with "—" under the x axis' title. The row is taken out of the chart's `height`
+   *   (the plot gets shorter, the page around it does not move).
+   * - `"auto"`: `"above"` below Tailwind's `sm` (640 px), `"cursor"` from there up.
+   *
+   * Default: the provider's `chartTooltipPlacement`, else `"cursor"`.
+   *
+   * The row is deliberately NOT an `aria-live` region: scrubbing a line announces a
+   * value per pixel of travel. A keyboard reader already hears each stop's name
+   * ("period — series: value") from the stop itself, and the row stays in the
+   * document for a screen reader to read on its way past.
+   */
+  placement?: SeriesChartTooltipPlacement;
   /** Let the tooltip run past the chart's own box on that axis instead of recharts
    *  clamping it inside. Default: `{ x: true }` when `boundary` is set, else neither. */
   allowEscapeViewBox?: { x?: boolean; y?: boolean };
@@ -1173,6 +1220,10 @@ function SeriesPlot({
   // Up here, above the empty state's early return, like every hook.
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
+  // Where the tooltip goes, and — off the plot — the row it is portalled into.
+  const phone = useMediaQuery(TOOLTIP_READOUT_QUERY, false);
+  const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
+  const [readout, setReadout] = useState<HTMLDivElement | null>(null);
 
   // The chart's own width, for the automatic axis budget. Its box, not the plot's: the
   // box does not change when an axis is hidden, so the rule cannot oscillate. Nothing
@@ -1495,13 +1546,21 @@ function SeriesPlot({
     animationEasing: "ease-out" as const,
   };
 
-  return (
+  const inRow = placement !== "cursor";
+  const chart = (
     <ChartContainer
       ref={setBox}
       data-axis-budget={budgeted.length ? budgetKey.replace(/\n/g, " ") : undefined}
       config={config}
-      className={cn("w-full", heightClass, className, onPointClick && "cursor-pointer")}
-      style={heightStyle}
+      className={cn(
+        "w-full",
+        // With a readout the chart's height is the whole block's, and the plot takes
+        // what the row leaves.
+        inRow ? "min-h-0 flex-1" : heightClass,
+        className,
+        onPointClick && "cursor-pointer",
+      )}
+      style={inRow ? undefined : heightStyle}
     >
       <ComposedChart
         data={plotted as Record<string, unknown>[]}
@@ -1607,23 +1666,45 @@ function SeriesPlot({
             </YAxis>
           );
         })}
-        <ChartTooltip
-          {...(tooltip?.allowEscapeViewBox || tooltip?.boundary
-            ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } }
-            : {})}
-          // The content shifts itself 12 px off the cursor (or flips) against the
-          // boundary; recharts' own offset on top would double it.
-          {...(tooltip?.boundary ? { offset: 0 } : {})}
-          // The keyboard's stop shows its tooltip as the pointer's would.
-          defaultIndex={focusedStop?.index}
-          content={
-            <ChartTooltipContent
-              labelFormatter={(value) => xLabel(Number(value))}
-              valueFormatter={valueFormat ?? number}
-              boundaryRef={tooltip?.boundary}
+        {inRow ? (
+          // Not before the row exists: without its own portal recharts would float this
+          // content over the plot for the first frame.
+          readout && (
+            <ChartTooltip
+              portal={readout}
+              // recharts hides an inactive tooltip; the row shows its idle state instead.
+              wrapperStyle={{ visibility: "visible" }}
+              defaultIndex={focusedStop?.index}
+              content={
+                <ChartTooltipContent
+                  variant="readout"
+                  idleKeys={series.map((entry) => entry.key)}
+                  idleLabel={x.title || undefined}
+                  labelFormatter={(value) => xLabel(Number(value))}
+                  valueFormatter={valueFormat ?? number}
+                />
+              }
             />
-          }
-        />
+          )
+        ) : (
+          <ChartTooltip
+            {...(tooltip?.allowEscapeViewBox || tooltip?.boundary
+              ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } }
+              : {})}
+            // The content shifts itself 12 px off the cursor (or flips) against the
+            // boundary; recharts' own offset on top would double it.
+            {...(tooltip?.boundary ? { offset: 0 } : {})}
+            // The keyboard's stop shows its tooltip as the pointer's would.
+            defaultIndex={focusedStop?.index}
+            content={
+              <ChartTooltipContent
+                labelFormatter={(value) => xLabel(Number(value))}
+                valueFormatter={valueFormat ?? number}
+                boundaryRef={tooltip?.boundary}
+              />
+            }
+          />
+        )}
         {series.map((entry) => {
           const type = entry.type ?? "line";
           const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
@@ -1787,6 +1868,27 @@ function SeriesPlot({
       </ComposedChart>
     </ChartContainer>
   );
+  if (!inRow) return chart;
+  // The row's own box, reserved from the first render: its idle state has the cells the
+  // active one will, so the first tap fills it in rather than pushing the plot down.
+  const row = (
+    <div
+      ref={setReadout}
+      data-tooltip-readout={placement}
+      className={cn(
+        "shrink-0",
+        // Above, the heading line shares the top corner with the zoom's reset button.
+        placement === "above" ? "pb-2 [&_[data-readout-heading]]:pe-32" : "pt-2",
+      )}
+    />
+  );
+  return (
+    <div className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
+      {placement === "above" && row}
+      {chart}
+      {placement === "below" && row}
+    </div>
+  );
 }
 
 const ZoomablePlot = withChartZoom(SeriesPlot);

package/src/i18n/kit-labels.tsx

@@ -417,8 +417,12 @@ interface KitI18n {
   locale?: string;
   weekStartsOn?: WeekDay;
   linkComponent?: KitLinkComponent;
+  chartTooltipPlacement?: ChartTooltipPlacement;
 }
 
+/** Where a chart shows the values under the pointer — see `SeriesChartTooltip.placement`. */
+export type ChartTooltipPlacement = "cursor" | "above" | "below" | "auto";
+
 /**
  * What every kit link receives: the anchor attributes the kit decided (href, class,
  * aria-current, handlers, children, ref). An app's router link maps them —
@@ -475,6 +479,13 @@ export interface UiKitProviderProps {
    * hash-router `#/path` is handed to it like `/path` (see `pickLinkRenderer`).
    */
   linkComponent?: KitLinkComponent;
+  /**
+   * Where every `SeriesChart` below shows its tooltip when it does not say so itself
+   * (`tooltip.placement`) — set once so an app's phone charts stop putting the box under
+   * the reader's finger (keksdose #359). Default: `"cursor"`, the box that follows the
+   * pointer, as before.
+   */
+  chartTooltipPlacement?: ChartTooltipPlacement;
   children: ReactNode;
 }
 
@@ -491,6 +502,7 @@ export function UiKitProvider({
   locale,
   weekStartsOn,
   linkComponent,
+  chartTooltipPlacement,
   children,
 }: UiKitProviderProps) {
   const outer = useContext(KitI18nContext);
@@ -500,8 +512,9 @@ export function UiKitProvider({
       weekStartsOn: weekStartsOn ?? outer.weekStartsOn,
       labels: mergeOverrides(outer.labels, labels),
       linkComponent: linkComponent ?? outer.linkComponent,
+      chartTooltipPlacement: chartTooltipPlacement ?? outer.chartTooltipPlacement,
     }),
-    [outer, labels, locale, weekStartsOn, linkComponent],
+    [outer, labels, locale, weekStartsOn, linkComponent, chartTooltipPlacement],
   );
   return <KitI18nContext.Provider value={value}>{children}</KitI18nContext.Provider>;
 }
@@ -589,6 +602,11 @@ export function useKitWeekStart(): WeekDay | undefined {
   return useContext(KitI18nContext).weekStartsOn;
 }
 
+/** The provider's `chartTooltipPlacement`, or `undefined` — a chart's own prop wins. */
+export function useKitChartTooltipPlacement(): ChartTooltipPlacement | undefined {
+  return useContext(KitI18nContext).chartTooltipPlacement;
+}
+
 /** {@link DEFAULT_FILE_LABELS}, but formatting in the provider's locale. */
 export function useKitFileLabels(prop?: Partial<FileLabels>): FileLabels {
   const locale = useKitLocale();