@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/series-chart.tsx

@@ -67,7 +67,14 @@ import {
 } from "./chart-zoom-core";
 import { STEP_DASH, strokeDash, type LegendEntry } from "./toggle-legend";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
-import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit, type TimeTickUnit } from "./series-chart-ticks";
+import {
+  categoryTicks,
+  integerTicks,
+  niceTicks,
+  tickTarget,
+  timeTicksWithUnit,
+  type TimeTickUnit,
+} from "./series-chart-ticks";
 // The tick module stays internal; the one type of it a public prop names is re-exported.
 export type { TimeTickUnit } from "./series-chart-ticks";
 import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } from "./series-chart-budget";
@@ -233,9 +240,7 @@ export type SeriesChartXValue = number | string | Date;
 
 /** Ticks a caller decides — a list, or a function of the domain on show, so a zoom
  *  window gets ticks from the same rule instead of none. */
-export type SeriesChartTickValues<T> =
-  | readonly T[]
-  | ((domain: [number, number]) => readonly T[] | undefined);
+export type SeriesChartTickValues<T> = readonly T[] | ((domain: [number, number]) => readonly T[] | undefined);
 
 interface SeriesChartAxisShape {
   id: string;
@@ -312,8 +317,7 @@ interface SeriesChartAxisShape {
  * pair, whose neighbour already said it). A HIDDEN axis scales its lines and draws
  * nothing, so there is nowhere for a title to go.
  */
-export type SeriesChartAxis = SeriesChartAxisShape &
-  ({ title: string; hide?: false } | { title?: string; hide: true });
+export type SeriesChartAxis = SeriesChartAxisShape & ({ title: string; hide?: false } | { title?: string; hide: true });
 
 /**
  * What a tick or the tooltip heading of the abscissa is handed besides its position —
@@ -408,7 +412,6 @@ export interface SeriesChartX {
 /** Where the tooltip goes — see {@link SeriesChartTooltip.placement}. */
 export type SeriesChartTooltipPlacement = ChartTooltipPlacement;
 
-
 /**
  * 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.
@@ -479,15 +482,7 @@ export interface SeriesChartSpan {
 /** The colours a reference or a marker can take by name — the kit's semantic tokens,
  *  so a threshold reads the same on every chart and flips with the theme. */
 export type SeriesChartTone =
-  | "muted"
-  | "brand"
-  | "income"
-  | "expense"
-  | "net"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
 
 const TONE_COLOR: Record<SeriesChartTone, string> = {
   muted: "var(--text-muted)",
@@ -806,9 +801,7 @@ interface PointStop {
 function focusedBarShape(index: number) {
   return function FocusedBar(props: BarShapeProps) {
     const focused = props.originalDataIndex === index;
-    return (
-      <Rectangle {...props} {...(focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {})} />
-    );
+    return <Rectangle {...props} {...(focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {})} />;
   };
 }
 
@@ -826,13 +819,7 @@ const REFERENCE_LABEL_SIZE = 10;
  * the card — "over the c" on a phone. The width is measured once drawn; the first
  * frame (and a DOM without layout) uses a 0.6em-per-character estimate, which errs wide.
  */
-function MarkerLabel({
-  viewBox,
-  value,
-}: {
-  viewBox?: { x?: number; y?: number; width?: number };
-  value?: ReactNode;
-}) {
+function MarkerLabel({ viewBox, value }: { viewBox?: { x?: number; y?: number; width?: number }; value?: ReactNode }) {
   const plot = usePlotArea();
   const ref = useRef<SVGTextElement>(null);
   const [measured, setMeasured] = useState<number>();
@@ -1060,12 +1047,7 @@ function SeriesPlot({
       ? []
       : budgetedAxes(
           afterCap,
-          autoAxisBudget(
-            afterCap,
-            width,
-            (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale),
-            scale,
-          ),
+          autoAxisBudget(afterCap, width, (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale), scale),
         );
   const budgeted = [...capped, ...auto];
   const budgetKey = budgeted.join("\n");
@@ -1108,15 +1090,8 @@ function SeriesPlot({
   // the moment a legend entry was switched off.
   if (!model.source.length || !series.length) {
     return (
-      <div
-        className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)}
-        style={heightStyle}
-      >
-        {empty !== undefined ? (
-          empty
-        ) : (
-          <p className="text-xs text-muted">{labels.empty}</p>
-        )}
+      <div className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)} style={heightStyle}>
+        {empty !== undefined ? empty : <p className="text-xs text-muted">{labels.empty}</p>}
       </div>
     );
   }
@@ -1137,9 +1112,7 @@ function SeriesPlot({
   const drawnAxes = budgeted.length
     ? axes.map((axis) => (budgeted.includes(axis.id) ? { ...axis, hide: true as const } : axis))
     : axes;
-  const lostUnit = new Map(
-    axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)]),
-  );
+  const lostUnit = new Map(axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)]));
   const config: ChartConfig = Object.fromEntries(
     series.map((entry, index) => [
       entry.key,
@@ -1185,14 +1158,11 @@ function SeriesPlot({
     (model.kind === "category"
       ? [-0.5, rows.length - 0.5]
       : padBand(
-          ...(extend(
-            undefined,
-            [
-              ...allPlotted.map((row) => finite(row[xKey])),
-              ...xRefs.map((ref) => xPos(ref.value)),
-              ...(markers ?? []).map((marker) => xPos(marker.x)),
-            ],
-          ) ?? [Infinity, -Infinity]),
+          ...(extend(undefined, [
+            ...allPlotted.map((row) => finite(row[xKey])),
+            ...xRefs.map((ref) => xPos(ref.value)),
+            ...(markers ?? []).map((marker) => xPos(marker.x)),
+          ]) ?? [Infinity, -Infinity]),
         ));
 
   const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : undefined;
@@ -1222,11 +1192,7 @@ function SeriesPlot({
     ...(timeUnit?.unit === "hour" ? { timeStyle: "short" } : {}),
   });
   const categoryText = (value: SeriesChartXValue) =>
-    value instanceof Date
-      ? dateFormat.format(value)
-      : typeof value === "number"
-        ? number(value)
-        : String(value ?? "");
+    value instanceof Date ? dateFormat.format(value) : typeof value === "number" ? number(value) : String(value ?? "");
   const tickAt = (position: number): SeriesChartXTick => ({
     value: model.valueAt(position),
     ...(model.kind === "category" ? { index: Math.round(position) } : {}),
@@ -1240,13 +1206,15 @@ function SeriesPlot({
         : number(position);
   const format = x.format ?? defaultFormat;
   const xFormat = (position: number) => format(position, tickAt(position));
-  const label =
-    x.label ??
-    (model.kind === "time" ? (position: number) => dateFormat.format(position) : format);
+  const label = x.label ?? (model.kind === "time" ? (position: number) => dateFormat.format(position) : format);
   const xLabel = (position: number) => label(position, tickAt(position));
 
   const tickAngle = x.ticks === false ? 0 : (x.tickAngle ?? 0);
-  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
+  const tickBand = tiltedTickBand(
+    (xTicks ?? []).map((tick) => xFormat(tick)),
+    tickAngle,
+    scale,
+  );
 
   const source: ZoomFitSource = {
     rows: allPlotted,
@@ -1257,9 +1225,7 @@ function SeriesPlot({
   // An axis a bar or an area stands on is read from zero (see `includeZero`).
   const anchored = (axis: SeriesChartAxis) =>
     axis.includeZero ??
-    series.some(
-      (entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line",
-    );
+    series.some((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line");
   // Whole-number ticks on an axis whose values are all whole — see
   // `SeriesChartAxis.integerTicks`. A stack of whole layers sums to a whole number, so
   // the layers are enough to look at.
@@ -1317,7 +1283,9 @@ function SeriesPlot({
     const [low, high] = fittedX ?? [-Infinity, Infinity];
     const placed = plotted
       .map((row, index) => ({ index, at: model.kind === "category" ? index : finite(row[xKey]) }))
-      .filter((slot): slot is { index: number; at: number } => slot.at !== undefined && slot.at >= low && slot.at <= high)
+      .filter(
+        (slot): slot is { index: number; at: number } => slot.at !== undefined && slot.at >= low && slot.at <= high,
+      )
       .sort((a, b) => a.at - b.at);
     placed.forEach(({ index, at }, k) => {
       const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
@@ -1449,28 +1417,19 @@ function SeriesPlot({
           // other tick, keeping the last, gives 4 8 12 — still an even ruler.
           interval="equidistantPreserveEnd"
           tick={x.ticks === false ? false : undefined}
-          {...(tickAngle
-            ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" }
-            : {})}
+          {...(tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {})}
           // With neither ticks nor title there is nothing to reserve the band for, and
           // recharts' own 30 px would leave a gap under every chart of a stack.
           height={x.ticks === false && !x.title ? 4 : tickBand}
           tickFormatter={(value: number) => xFormat(Number(value))}
         >
           {x.title && (
-            <Label
-              value={x.title}
-              position="insideBottom"
-              offset={-grow(12)}
-              className="fill-muted text-caption"
-            />
+            <Label value={x.title} position="insideBottom" offset={-grow(12)} className="fill-muted text-caption" />
           )}
         </XAxis>
         {drawnAxes.map((axis) => {
           const domain = fittedY(axis);
-          const zoomed = anchored(axis)
-            ? zoom?.xDomain !== undefined
-            : zoom?.yDomains[axis.id] !== undefined;
+          const zoomed = anchored(axis) ? zoom?.xDomain !== undefined : zoom?.yDomains[axis.id] !== undefined;
           return (
             <YAxis
               key={axis.id}
@@ -1577,7 +1536,12 @@ function SeriesPlot({
                 radius={entry.stack === undefined ? BAR_RADIUS : 0}
                 // Read off the row rather than recharts' `value`: in a stack that is the
                 // layer's running top, which a hole has too — and a hole gets no stub.
-                {...(stub ? { minPointSize: (_value: unknown, index: number) => (finite(plotted[index]?.[entry.key]) === undefined ? 0 : stub) } : {})}
+                {...(stub
+                  ? {
+                      minPointSize: (_value: unknown, index: number) =>
+                        finite(plotted[index]?.[entry.key]) === undefined ? 0 : stub,
+                    }
+                  : {})}
                 // Only the focused stop's series swaps its shape, and only for as long
                 // as it has focus: every other bar keeps recharts' own.
                 {...(focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {})}
@@ -1692,11 +1656,7 @@ function SeriesPlot({
               stroke="var(--bg-surface)"
               strokeWidth={1.5}
               ifOverflow="discard"
-              label={
-                marker.label
-                  ? { value: marker.label, position: "top", content: <MarkerLabel /> }
-                  : undefined
-              }
+              label={marker.label ? { value: marker.label, position: "top", content: <MarkerLabel /> } : undefined}
             />
           );
         })}

package/src/components/settings-fields.tsx

@@ -34,8 +34,7 @@ import type { KitLanguageCode } from "../i18n/languages";
  * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which
  * left the toggle out of the type the component is documented by (API-9).
  */
-export interface ThemeSettingSelectProps
-  extends Omit<SelectProps, "value" | "onChange" | "children"> {
+export interface ThemeSettingSelectProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
   /** The `Select` (default). See {@link ThemeSettingToggleProps} for `"toggle"`. */
   variant?: "select";
   value: ThemePreference;
@@ -63,8 +62,7 @@ export interface ThemeSettingSelectProps
  * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
  * system" (keksdose's control, §8).
  */
-export interface ThemeSettingToggleProps
-  extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label"> {
+export interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label"> {
   variant: "toggle";
   value: ThemePreference;
   onChange: (value: ThemePreference) => void;
@@ -106,13 +104,7 @@ export function ThemeSetting(props: ThemeSettingProps) {
   }
   const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;
   return (
-    <Select
-      {...rest}
-      id={id}
-      label={label}
-      value={value}
-      onChange={(e) => onChange(e.target.value as ThemePreference)}
-    >
+    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value as ThemePreference)}>
       <option value="system">{optionLabels.system}</option>
       <option value="light">{optionLabels.light}</option>
       <option value="dark">{optionLabels.dark}</option>
@@ -122,8 +114,7 @@ export function ThemeSetting(props: ThemeSettingProps) {
 
 /** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change
  *  handler re-typed to the language CODE the caller stores. */
-export interface LanguageSettingProps
-  extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
+export interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
   /** The reader's language: one of the rows' codes — or any tag, shown as the row it
    *  resolves to ({@link LanguageSelect}'s rule). */
   value: string;
@@ -190,7 +181,14 @@ export type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
  * phone the group has 240 px, and "Extra large" cut to "Extra l…" would be the one
  * setting that cannot read its own value.
  */
-export function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = "wrap", ...rest }: TextSizeSettingProps) {
+export function TextSizeSetting({
+  value,
+  onChange,
+  label,
+  labels: labelsProp,
+  overflow = "wrap",
+  ...rest
+}: TextSizeSettingProps) {
   const labels = useAppearanceLabels(labelsProp);
   const named = label !== undefined && label !== null && label !== false;
   return (
@@ -215,7 +213,14 @@ export type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
  * "More" and could not say "follow the device" (the theme's lesson, §8 of the settings
  * contract). `useAccountAppearance().contrast` is that mode.
  */
-export function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = "wrap", ...rest }: ContrastSettingProps) {
+export function ContrastSetting({
+  value,
+  onChange,
+  label,
+  labels: labelsProp,
+  overflow = "wrap",
+  ...rest
+}: ContrastSettingProps) {
   const labels = useAppearanceLabels(labelsProp);
   const named = label !== undefined && label !== null && label !== false;
   return (

package/src/components/share-card.tsx

@@ -385,10 +385,7 @@ export function SharePanel({
       {canAdd && (
         <div className="space-y-2">
           <div
-            className={cn(
-              "grid grid-cols-1 gap-2",
-              choosable && "sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start",
-            )}
+            className={cn("grid grid-cols-1 gap-2", choosable && "sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start")}
           >
             <Autocomplete<string>
               label={addWithoutEmail ? labels.emailOptional : labels.email}
@@ -434,9 +431,7 @@ export function SharePanel({
                 value={newRole}
                 onChange={setNewRole}
                 disabled={busy !== null}
-                caption={
-                  roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined
-                }
+                caption={roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined}
                 // Level with the floating field beside it, as the two apps do by hand.
                 optionClassName="sm:min-h-10"
               />
@@ -520,7 +515,8 @@ export function SharePanel({
                                 if (next === g.role) return;
                                 // A raise under a lock that allows only lowerings: refused,
                                 // and the tooltip round the choice says why.
-                                if (roleLock.raise !== undefined && roles.findIndex((r) => r.key === next) > rank) return;
+                                if (roleLock.raise !== undefined && roles.findIndex((r) => r.key === next) > rank)
+                                  return;
                                 void run(`role:${g.id}`, () => onRoleChange(g, next));
                               }}
                             />
@@ -570,10 +566,7 @@ export function SharePanel({
                     <div className="min-w-0 flex-1 basis-40">
                       <div
                         data-private={p.email ? true : undefined}
-                        className={cn(
-                          "truncate-until-large text-sm",
-                          p.email ? "text-primary" : "text-muted",
-                        )}
+                        className={cn("truncate-until-large text-sm", p.email ? "text-primary" : "text-muted")}
                       >
                         {name}
                       </div>
@@ -648,8 +641,7 @@ export function ShareCard({ title, variant = "outline", className, ...panel }: S
 }
 
 export interface ShareDialogProps
-  extends SharePanelProps,
-    Pick<DialogFrameProps, "open" | "onClose" | "size" | "className"> {
+  extends SharePanelProps, Pick<DialogFrameProps, "open" | "onClose" | "size" | "className"> {
   /** The heading. Default {@link ShareCardLabels.dialogTitle}. */
   title?: ReactNode;
   /** Under the heading — what is being shared (Kurvenschmiede passes its name). */

package/src/components/sign-chip.tsx

@@ -86,23 +86,23 @@ export function SignChip({ negative, onNegativeChange, disabled, labels: labelsP
   // and the bubble that said only that goes.
   const large = useLargeText();
   const chip = (
-      <Chip
-        size="lg"
-        tone={negative ? "expense" : "income"}
-        icon={negative ? Minus : Plus}
-        onClick={() => onNegativeChange(!negative)}
-        disabled={disabled}
-        aria-label={name}
-        // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every
-        // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the
-        // hairline border is the 42px a labelled field measures (#431).
-        className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", !large && className)}
-      >
-        {current}
-        {/* The swap arrows after the word, in the label's own row: decoration (the
+    <Chip
+      size="lg"
+      tone={negative ? "expense" : "income"}
+      icon={negative ? Minus : Plus}
+      onClick={() => onNegativeChange(!negative)}
+      disabled={disabled}
+      aria-label={name}
+      // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every
+      // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the
+      // hairline border is the 42px a labelled field measures (#431).
+      className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", !large && className)}
+    >
+      {current}
+      {/* The swap arrows after the word, in the label's own row: decoration (the
             name already says what a press does), set a little apart from the word. */}
-        <ArrowUpDown className="ms-1.5 inline size-3.5 align-[-0.2em] opacity-60" aria-hidden />
-      </Chip>
+      <ArrowUpDown className="ms-1.5 inline size-3.5 align-[-0.2em] opacity-60" aria-hidden />
+    </Chip>
   );
   if (!large) {
     return (

package/src/components/signature-pad.tsx

@@ -1,5 +1,11 @@
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, PointerEvent as ReactPointerEvent, ReactNode, Ref } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+  Ref,
+} from "react";
 import { Eraser, Keyboard, PenLine, Undo2 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { hasContent } from "../lib/presence";
@@ -430,7 +436,10 @@ export function SignaturePad({
 
   /* ── Pointer ── */
 
-  const toPoint = (e: { clientX: number; clientY: number; pressure: number; pointerType: string }, rect: DOMRect): Point => {
+  const toPoint = (
+    e: { clientX: number; clientY: number; pressure: number; pointerType: string },
+    rect: DOMRect,
+  ): Point => {
     const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;
     return {
       x: (e.clientX - rect.left) / scale,
@@ -605,13 +614,12 @@ export function SignaturePad({
           {labels.clear}
         </Button>
         {allowTypedName && (
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={switchMode}
-            disabled={disabled}
-          >
-            {typed ? <PenLine aria-hidden="true" className="size-4" /> : <Keyboard aria-hidden="true" className="size-4" />}
+          <Button type="button" variant="secondary" onClick={switchMode} disabled={disabled}>
+            {typed ? (
+              <PenLine aria-hidden="true" className="size-4" />
+            ) : (
+              <Keyboard aria-hidden="true" className="size-4" />
+            )}
             {typed ? labels.useDrawn : labels.useTyped}
           </Button>
         )}
@@ -696,7 +704,9 @@ export function SignatureView({
       data-empty={kind === "empty" || undefined}
     >
       {captioned && (
-        <figcaption id={captionId} className="block text-sm font-medium text-primary">{caption}</figcaption>
+        <figcaption id={captionId} className="block text-sm font-medium text-primary">
+          {caption}
+        </figcaption>
       )}
       <div
         className={cn(
@@ -725,9 +735,7 @@ export function SignatureView({
             {name}
           </span>
         )}
-        {kind === "empty" && (
-          <span className="relative text-xs text-muted">{labels.viewEmpty}</span>
-        )}
+        {kind === "empty" && <span className="relative text-xs text-muted">{labels.viewEmpty}</span>}
         {/* The signing line, as on the pad. Decoration only. */}
         <div
           aria-hidden="true"

package/src/components/signed-amount.tsx

@@ -20,16 +20,7 @@ import { DEFAULT_SIGNED_AMOUNT_LABELS } from "./signed-amount-labels";
  * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.
  */
 export type TextTone =
-  | "default"
-  | "muted"
-  | "brand"
-  | "income"
-  | "expense"
-  | "net"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "default" | "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
 
 const TEXT_TONE: Record<TextTone, string> = {
   default: "text-primary",
@@ -166,9 +157,7 @@ function signedToneClass(
 
 const ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;
 
-export interface SignedAmountProps
-  extends SignedFormatProps,
-    Omit<ComponentPropsWithRef<"span">, "children"> {
+export interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithRef<"span">, "children"> {
   value: number;
   /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
   tone?: SignedAmountTone;
@@ -324,7 +313,10 @@ export function Delta({
       data-direction={dir}
       className={cn("relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums", className)}
     >
-      <span data-private={sensitive ? "" : undefined} className={cn("inline-flex items-center gap-0.5 font-medium", tone)}>
+      <span
+        data-private={sensitive ? "" : undefined}
+        className={cn("inline-flex items-center gap-0.5 font-medium", tone)}
+      >
         {arrow && <Icon className="size-[1em] shrink-0" aria-hidden />}
         {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before
             this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so

package/src/components/skeleton.tsx

@@ -71,21 +71,10 @@ function SkeletonFill({ shape = "line", lines, className, ...rest }: Omit<Skelet
     return (
       <div {...rest} aria-hidden className={cn("flex flex-col gap-2", className)} data-skeleton="lines">
         {Array.from({ length: lines }, (_, i) => (
-          <div
-            key={i}
-            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3")}
-            data-skeleton="line"
-          />
+          <div key={i} className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3")} data-skeleton="line" />
         ))}
       </div>
     );
   }
-  return (
-    <div
-      {...rest}
-      aria-hidden
-      data-skeleton={shape}
-      className={cn(SKELETON_CLASS, SHAPE[shape], className)}
-    />
-  );
+  return <div {...rest} aria-hidden data-skeleton={shape} className={cn(SKELETON_CLASS, SHAPE[shape], className)} />;
 }

package/src/components/slider.tsx

@@ -120,10 +120,11 @@ export interface SliderMark {
 }
 
 export interface SliderProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
-  >,
+  extends
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
+    >,
     FieldHelpProps {
   /** The value. On a log scale this is the real value, not the track position. */
   value: number;
@@ -235,8 +236,7 @@ export function Slider({
   // digits; it is not formatting, and `formatValue` is how to get a locale.
   const valueText = formatValue
     ? formatValue(value)
-    : (rest["aria-valuetext"] ??
-      (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));
+    : (rest["aria-valuetext"] ?? (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const raw = Number(e.target.value);
@@ -280,21 +280,13 @@ export function Slider({
         // drops to a line of its own, still at the end, only when the two don't fit.
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
           {label !== undefined && (
-            <label
-              htmlFor={inputId}
-              className="min-w-0 select-none text-xs font-medium text-secondary"
-            >
+            <label htmlFor={inputId} className="min-w-0 select-none text-xs font-medium text-secondary">
               {label}
             </label>
           )}
           {labelHint !== undefined && <span className="flex shrink-0 items-center">{labelHint}</span>}
           {readout !== undefined && (
-            <span
-              className={cn(
-                "ms-auto max-w-full text-xs tabular-nums text-primary",
-                plainReadout && "select-none",
-              )}
-            >
+            <span className={cn("ms-auto max-w-full text-xs tabular-nums text-primary", plainReadout && "select-none")}>
               {readout}
             </span>
           )}
@@ -323,10 +315,7 @@ export function Slider({
         // `min`, not under the track's rounded end. Each tick is a zero-width column
         // centred on its point, which centres its label on it in either direction
         // without a `translate` that would need flipping for right-to-left.
-        <div
-          aria-hidden
-          className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}
-        >
+        <div aria-hidden className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}>
           {normalizedMarks.map((m) => (
             <span
               key={m.value}

package/src/components/sparkline.tsx

@@ -39,17 +39,7 @@ export { DEFAULT_SPARKLINE_LABELS };
  *    own value, a line or area takes the colour of its LAST value (where it ended up).
  */
 export type SparklineTone =
-  | "chart"
-  | "brand"
-  | "muted"
-  | "income"
-  | "expense"
-  | "net"
-  | "signed"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "chart" | "brand" | "muted" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
 
 // `color`, not `stroke`/`fill`: every mark paints with `currentColor`, so one class
 // per element is enough and a signed bar chart needs no second lookup table.
@@ -70,8 +60,7 @@ const signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.inco
 
 /** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so
  *  those three are the sparkline's own; everything else lands on the `<svg>`. */
-export interface SparklineProps
-  extends Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height"> {
+export interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height"> {
   /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
    *  there rather than drawing a zero or bridging across the missing point. */
   data: ReadonlyArray<number | null | undefined>;