@eifi1/ui-kit 0.51.4 → 0.51.5

package/src/components/progress-bar.tsx

@@ -25,15 +25,7 @@ export { DEFAULT_PROGRESS_BAR_LABELS };
  * "careful" about a figure that is neither. keksdose's report meters (food-group-card,
  * drilldown-modal) sit beside amounts that are already in the money colours.
  */
-export type ProgressBarTone =
-  | "brand"
-  | "neutral"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info"
-  | "income"
-  | "expense";
+export type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info" | "income" | "expense";
 /**
  * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a
  * letter because the letters are taken in order — an `xs` at 6px would be THICKER than
@@ -340,8 +332,7 @@ export function ProgressBar({
           : text;
       })
     : [];
-  const current =
-    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);
+  const current = partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);
   const indeterminate = current === undefined;
   const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));
   const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;
@@ -352,14 +343,11 @@ export function ProgressBar({
       ? new Intl.ListFormat(kitLocale, { style: "short", type: "unit" }).format(partTexts)
       : valueText;
 
-  const over =
-    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
+  const over = overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
   const overageNode =
     over > 0 ? (
       <p id={`${hintId}-over`} data-part="overage" data-private={priv} className="mt-1 text-xs text-danger">
-        {typeof overage === "function"
-          ? overage(over)
-          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
+        {typeof overage === "function" ? overage(over) : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
       </p>
     ) : null;
   const describedBy =
@@ -380,7 +368,12 @@ export function ProgressBar({
           {showValue && valueText !== undefined && (
             // Hidden: the same words are the bar's aria-valuetext, and reading them
             // twice in a row is noise.
-            <span aria-hidden data-part="value" data-private={priv} className="ms-auto shrink-0 tabular-nums text-muted">
+            <span
+              aria-hidden
+              data-part="value"
+              data-private={priv}
+              className="ms-auto shrink-0 tabular-nums text-muted"
+            >
               {valueText}
             </span>
           )}
@@ -443,7 +436,10 @@ export function ProgressBar({
             data-part="fill"
             // Block flow starts at the inline start, so a plain width fills from the
             // right under `dir="rtl"` with nothing extra.
-            className={cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", FILL[tone])}
+            className={cn(
+              "h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none",
+              FILL[tone],
+            )}
             style={{ width: `${fraction * 100}%` }}
           />
         )}
@@ -454,10 +450,7 @@ export function ProgressBar({
             <li key={seg.key ?? i} className="flex items-center gap-2">
               <span
                 aria-hidden
-                className={cn(
-                  "size-2.5 shrink-0 rounded-sm",
-                  fills[i],
-                )}
+                className={cn("size-2.5 shrink-0 rounded-sm", fills[i])}
                 style={{ backgroundColor: seg.className ? undefined : seg.color }}
               />
               {seg.label != null && (
@@ -470,9 +463,7 @@ export function ProgressBar({
                 data-private={priv}
                 className={cn(
                   "ms-auto shrink-0 text-xs tabular-nums",
-                  toneTextClass(
-                    (typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted",
-                  ),
+                  toneTextClass((typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted"),
                 )}
               >
                 {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}

package/src/components/qr-code.tsx

@@ -32,14 +32,7 @@ export interface QrCodeProps extends Omit<ComponentPropsWithRef<"svg">, "childre
  * A value too long for any QR version (≈2.9 kB) renders nothing rather than throwing
  * in render.
  */
-export function QrCode({
-  value,
-  label,
-  errorCorrection = "M",
-  margin = 4,
-  className,
-  ...rest
-}: QrCodeProps) {
+export function QrCode({ value, label, errorCorrection = "M", margin = 4, className, ...rest }: QrCodeProps) {
   const path = useMemo(() => {
     try {
       const { modules, size } = encodeQr(value, { errorCorrection });
@@ -47,7 +40,7 @@ export function QrCode({
       // commands rather than one <rect> per module.
       let d = "";
       for (let y = 0; y < size; y++) {
-        for (let x = 0; x < size; ) {
+        for (let x = 0; x < size;) {
           if (!modules[y][x]) {
             x++;
             continue;

package/src/components/row-actions.tsx

@@ -471,7 +471,15 @@ function useActionHref(action: RowAction): string | undefined {
 }
 
 /** One entry of the "⋯" menu: the words, as a link for an `href`, else a button. */
-function MenuAction({ action, close, run }: { action: RowAction; close: () => void; run: (action: RowAction) => void }) {
+function MenuAction({
+  action,
+  close,
+  run,
+}: {
+  action: RowAction;
+  close: () => void;
+  run: (action: RowAction) => void;
+}) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
   const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];

package/src/components/search-field.tsx

@@ -6,11 +6,10 @@ import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./field-base";
 import { mergeRefs } from "./field-parts";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
-interface SearchFieldOwnProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "value" | "onChange" | "type" | "aria-label"
-  > {
+interface SearchFieldOwnProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type" | "aria-label"
+> {
   value: string;
   /** The typed text. Emitted as a plain string, not an event: every caller of the
    *  four this replaced wanted the string, and one of them held it in a URL param

package/src/components/select.tsx

@@ -157,9 +157,7 @@ export function Select(props: SelectProps) {
   // account type became read-only and still looked exactly like a picker). A locked
   // one has no menu either.
   const chevron =
-    rest.disabled || listBox || locked ? null : (
-      <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />
-    );
+    rest.disabled || listBox || locked ? null : <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />;
   // `pe-9` is the room the chevron takes; a list box has none to make room for.
   //
   // A list box's height is `size` rows plus its padding, but its rows are clipped at
@@ -263,13 +261,7 @@ export function Select(props: SelectProps) {
   return (
     <FieldGroup errorEl={below} reserve={reserve}>
       {withReason(
-        <FloatingField
-          className={boxClass}
-          htmlFor={fieldId}
-          label={label}
-          staticLabel
-          hint={hint}
-        >
+        <FloatingField className={boxClass} htmlFor={fieldId} label={label} staticLabel hint={hint}>
           <select
             ref={ref}
             id={fieldId}

package/src/components/separator.tsx

@@ -27,11 +27,7 @@ export function Separator({ orientation = "horizontal", decorative = false, clas
       role={decorative ? "none" : "separator"}
       aria-orientation={!decorative && vertical ? "vertical" : undefined}
       data-orientation={orientation}
-      className={cn(
-        "shrink-0 bg-[var(--border)]",
-        vertical ? "w-px self-stretch" : "h-px w-full",
-        className,
-      )}
+      className={cn("shrink-0 bg-[var(--border)]", vertical ? "w-px self-stretch" : "h-px w-full", className)}
     />
   );
 }

package/src/components/series-chart-axes.ts

@@ -59,7 +59,10 @@ export function tiltedTickBand(labels: readonly string[], angle: number, scale =
   const rad = (Math.abs(angle) * Math.PI) / 180;
   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)));
+  return Math.min(
+    Math.round(MAX_TILTED_TICK_BAND * scale),
+    Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)),
+  );
 }
 
 /** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
@@ -201,10 +204,7 @@ export function anchoredBand(extent: readonly [number, number] | undefined): [nu
  * it in its neighbour's colour on each click. Resolving the colours on the full list
  * and filtering after keeps each series in the colour its legend entry shows.
  */
-export function visibleSeries(
-  series: readonly SeriesChartSeries[],
-  hidden: ReadonlySet<string>,
-): SeriesChartSeries[] {
+export function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[] {
   return series
     .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))
     .filter((entry) => !hidden.has(entry.key));

package/src/components/series-chart-budget.ts

@@ -59,10 +59,7 @@ const sideOf = (axis: BudgetAxis) => axis.orientation ?? "left";
  * stays), then the rest in declaration order, until the cap. Per side, that is simply the
  * first `left` left-hand axes and the first `right` right-hand ones.
  */
-export function budgetedAxes(
-  axes: readonly BudgetAxis[],
-  budget: SeriesChartAxisBudget | undefined,
-): string[] {
+export function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAxisBudget | undefined): string[] {
   if (budget === undefined) return [];
   const visible = axes.filter((axis) => !axis.hide);
   if (typeof budget === "number") {

package/src/components/series-chart-ticks.ts

@@ -90,10 +90,7 @@ export function integerTicks(
  * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in
  * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.
  */
-export function categoryTicks(
-  domain: readonly [number, number] | undefined,
-  count: number,
-): number[] | undefined {
+export function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined {
   if (!domain || !(count > 0)) return undefined;
   const first = Math.max(0, Math.ceil(domain[0] - 1e-6));
   const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));

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). */