@vitavision/ui 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitavision/ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "The vitavision instrument design system: Tailwind v4 tokens, theme, and React primitives.",
   "license": "MIT OR Apache-2.0",
   "repository": {

package/src/components/Tabs.tsx

@@ -86,10 +86,7 @@ export function Tabs<Id extends string>({
       aria-label={label}
       aria-orientation="horizontal"
       onKeyDown={onKeyDown}
-      className={cn(
-        "inline-flex max-w-full flex-wrap items-center gap-0.5 rounded-control border border-line bg-raised p-0.5",
-        className,
-      )}
+      className={cn("inline-flex max-w-full flex-wrap items-center gap-0.5 rounded-control border border-line bg-raised p-0.5", className)}
     >
       {items.map((item) => {
         const selected = item.id === active;
@@ -100,9 +97,7 @@ export function Tabs<Id extends string>({
             role="tab"
             id={idPrefix === undefined ? undefined : `${idPrefix}-tab-${item.id}`}
             aria-selected={selected}
-            aria-controls={
-              idPrefix !== undefined && selected ? `${idPrefix}-panel-${item.id}` : undefined
-            }
+            aria-controls={idPrefix !== undefined && selected ? `${idPrefix}-panel-${item.id}` : undefined}
             tabIndex={item.id === focusable ? 0 : -1}
             data-tab-id={item.id}
             data-state={selected ? "active" : "inactive"}
@@ -112,9 +107,7 @@ export function Tabs<Id extends string>({
             className={cn(
               "inline-flex items-center gap-1.5 rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors",
               "disabled:cursor-not-allowed disabled:opacity-40",
-              selected
-                ? "bg-surface text-fg shadow-sm"
-                : "text-fg-muted hover:text-fg",
+              selected ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg",
               focusRing,
             )}
           >

package/src/components/ThemeToggle.tsx

@@ -81,11 +81,7 @@ export function ThemeToggle({
         onClick={advance}
         aria-label={LABEL[choice]}
         data-theme-choice={choice}
-        className={cn(
-          "rounded-control p-1.5 text-fg-muted transition-colors hover:bg-raised hover:text-fg",
-          focusRing,
-          className,
-        )}
+        className={cn("rounded-control p-1.5 text-fg-muted transition-colors hover:bg-raised hover:text-fg", focusRing, className)}
       >
         <Icon className="size-4" />
       </button>

package/src/components/ui/Badge.tsx

@@ -89,10 +89,7 @@ export function StatusDot({
   children?: ReactNode;
 }) {
   return (
-    <span
-      data-tone={tone}
-      className={cn("inline-flex items-center gap-1.5 text-xs text-fg-muted", className)}
-    >
+    <span data-tone={tone} className={cn("inline-flex items-center gap-1.5 text-xs text-fg-muted", className)}>
       <span className={cn("size-1.5 shrink-0 rounded-full", DOT_CLASSES[tone])} aria-hidden />
       {children}
     </span>

package/src/components/ui/Breakdown.tsx

@@ -0,0 +1,139 @@
+/*
+ * Counts by category, as one thin stacked bar.
+ *
+ * The segments may use the verdict colours because each one counts things the app has already
+ * judged: strings it passed, strings it flagged, strings that failed a check. That is the only
+ * licence. A share of a continuous quantity, or one series beside another, is not a verdict and
+ * belongs on a chart.
+ *
+ * It is a `role="img"`: the bar is one picture whose meaning is its name. `progressbar` and
+ * `meter` carry a single value, and a `list` of segments would make a reader step through
+ * parts of a glyph that is meant to be taken in at once. The name is the counts in words, so
+ * colour is never the only cue.
+ *
+ * Widths are flex grow factors rather than percentages, so the one-pixel gaps that keep two
+ * neighbouring colours apart come out of the bar and not off its end. The layout is inline
+ * rather than classes, so the shares and the 2 px floor hold under any stylesheet.
+ */
+
+import type { ComponentProps } from "react";
+
+import { byDensity, useDensity } from "./Density";
+import { cn } from "./cn";
+
+/** Counts written the same on the server and in every browser: `2,556`, `0.5`. */
+const count = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+
+/**
+ * The colour of a `Breakdown` segment: a verdict (`normal`, `warn`, `defect`) for things the app
+ * has judged, or `neutral` for a category that is no verdict (skipped, not applicable).
+ */
+export type BreakdownTone = "normal" | "warn" | "defect" | "neutral";
+
+/** One category of a `Breakdown`: how many, in which colour, and what a reader calls them. */
+export interface BreakdownSegment {
+  /** How many. Negative and non-finite values count as 0, and a segment of 0 is left out. */
+  value: number;
+  /** The colour, by meaning. */
+  tone: BreakdownTone;
+  /** What the count is, as it reads after the number: `"done"` gives "412 done". Unique among the segments. */
+  label: string;
+}
+
+/** Options of `breakdownText`, the same as the `Breakdown` props of the same names. */
+export interface BreakdownTextOptions {
+  /** The whole. Defaults to the sum of the segments; a total below the sum counts as the sum. */
+  total?: number | undefined;
+  /** What the rest of the total is, as it reads after the number: `"to do"` gives "131 to do". */
+  remainderLabel?: string | undefined;
+}
+
+const TONE_CLASSES: Record<BreakdownTone, string> = {
+  normal: "bg-normal",
+  warn: "bg-warn",
+  defect: "bg-defect",
+  neutral: "bg-fg-subtle",
+};
+
+/** A count as drawn: 0 for anything that is not a finite, positive number. */
+const amount = (value: number) => (Number.isFinite(value) && value > 0 ? value : 0);
+
+/** The segments that are drawn, the whole, and the rest of it. */
+function measure(segments: readonly BreakdownSegment[], total: number | undefined) {
+  const shown = segments.filter((segment) => amount(segment.value) > 0);
+  const sum = shown.reduce((acc, segment) => acc + amount(segment.value), 0);
+  const whole = total !== undefined && Number.isFinite(total) && total > sum ? total : sum;
+  return { shown, sum, whole, rest: whole - sum };
+}
+
+/**
+ * The counts of a breakdown in words: `"412 done, 20 to check, 3 problems, 131 to do of 566"`.
+ *
+ * It is the default accessible name of `Breakdown`, and the text for a tooltip or a label printed
+ * beside the bar. Segments of 0 are left out; the rest of the total is named only with a
+ * `remainderLabel`. With nothing to count it reads `"0 of 566"`.
+ *
+ * @param segments - The categories, in order.
+ * @param options - The `total` and the `remainderLabel`.
+ * @returns The text.
+ */
+export function breakdownText(segments: readonly BreakdownSegment[], options: BreakdownTextOptions = {}): string {
+  const { shown, whole, rest } = measure(segments, options.total);
+  const parts = shown.map((segment) => `${count.format(amount(segment.value))} ${segment.label}`);
+  if (options.remainderLabel !== undefined && rest > 0) parts.push(`${count.format(rest)} ${options.remainderLabel}`);
+  return `${parts.length > 0 ? parts.join(", ") : "0"} of ${count.format(whole)}`;
+}
+
+/** Props of `Breakdown`: the segments and their total, plus the `<div>` props. */
+export type BreakdownProps = Omit<ComponentProps<"div">, "children" | "role"> & {
+  /** The categories, drawn left to right in this order, each as wide as its share of the total. */
+  segments: readonly BreakdownSegment[];
+  /**
+   * The whole. Defaults to the sum of the segments; the rest is drawn as empty track. A total
+   * below the sum counts as the sum.
+   */
+  total?: number | undefined;
+  /** What the empty track counts, for the accessible name: `"to do"` gives "131 to do". */
+  remainderLabel?: string | undefined;
+};
+
+/**
+ * A thin bar of counts by category: 412 done, 20 to check and 3 problems out of 566, with the
+ * rest as empty track. Segments are drawn in the order given, each as wide as its share of the
+ * total (a non-zero count is never narrower than 2 px); segments of 0 are left out.
+ *
+ * Its colours are verdicts, so use it only for things the app has judged — never for a share of
+ * a continuous quantity or for series side by side (use `Progress` or a chart).
+ *
+ * A `role="img"` whose name lists every non-zero count, as `breakdownText` writes it: "412 done,
+ * 20 to check, 3 problems, 131 to do of 566". `aria-label` or `aria-labelledby` replaces it. The track
+ * matches `Progress` and follows the density in force. State is exposed as `data-state`
+ * (`"empty"` with nothing counted, `"partial"`, or `"complete"` when the segments fill the
+ * total), and each segment's tone as its `data-tone`. Width changes ease over 300 ms, and not at
+ * all with reduced motion.
+ */
+export function Breakdown({ segments, total, remainderLabel, className, "aria-label": ariaLabel, ...rest }: BreakdownProps) {
+  const density = useDensity();
+  const { shown, sum, rest: remainder } = measure(segments, total);
+  const name = ariaLabel ?? (rest["aria-labelledby"] ? undefined : breakdownText(segments, { total, remainderLabel }));
+  return (
+    <div
+      role="img"
+      aria-label={name}
+      data-state={sum === 0 ? "empty" : remainder > 0 ? "partial" : "complete"}
+      {...rest}
+      className={cn("w-full overflow-hidden rounded-full bg-line", byDensity(density, "h-1.5", "h-1"), className)}
+      style={{ display: "flex", gap: 1, ...rest.style }}
+    >
+      {shown.map((segment) => (
+        <div
+          key={segment.label}
+          data-tone={segment.tone}
+          className={cn("h-full transition-[flex-grow] duration-300", TONE_CLASSES[segment.tone])}
+          style={{ flex: `${amount(segment.value)} 0 0`, minWidth: 2 }}
+        />
+      ))}
+      {remainder > 0 && <div className="h-full transition-[flex-grow] duration-300" style={{ flex: `${remainder} 0 0` }} />}
+    </div>
+  );
+}

package/src/components/ui/Button.tsx

@@ -111,11 +111,7 @@ export function Button({
 
   if (asChild) {
     return (
-      <Slot
-        {...rest}
-        data-variant={variant}
-        className={buttonClasses({ variant, size: resolved, className })}
-      >
+      <Slot {...rest} data-variant={variant} className={buttonClasses({ variant, size: resolved, className })}>
         {icon && <ButtonIcon icon={icon} />}
         <Slottable>{children}</Slottable>
       </Slot>
@@ -132,11 +128,7 @@ export function Button({
       {...rest}
       className={buttonClasses({ variant, size: resolved, className })}
     >
-      {loading ? (
-        <Loader2 className="size-3.5 shrink-0 animate-spin" aria-hidden />
-      ) : (
-        icon && <ButtonIcon icon={icon} />
-      )}
+      {loading ? <Loader2 className="size-3.5 shrink-0 animate-spin" aria-hidden /> : icon && <ButtonIcon icon={icon} />}
       {children}
     </button>
   );
@@ -179,11 +171,7 @@ export function ButtonLink({
   const Comp = asChild ? Slot : "a";
 
   return (
-    <Comp
-      {...rest}
-      data-variant={variant}
-      className={buttonClasses({ variant, size: resolved, className })}
-    >
+    <Comp {...rest} data-variant={variant} className={buttonClasses({ variant, size: resolved, className })}>
       {icon && <ButtonIcon icon={icon} />}
       <Slottable>{children}</Slottable>
     </Comp>

package/src/components/ui/Dialog.tsx

@@ -20,10 +20,7 @@ import { cn, focusRingInset } from "./cn";
  * resizes. A scrolling body has to be reachable by keyboard (so it can be scrolled without
  * a pointer); a body that fits must not add a tab stop.
  */
-function useOverflowing(): [
-  (node: HTMLDivElement | null) => (() => void) | undefined,
-  boolean,
-] {
+function useOverflowing(): [(node: HTMLDivElement | null) => (() => void) | undefined, boolean] {
   const [overflowing, setOverflowing] = useState(false);
   const ref = useCallback((node: HTMLDivElement | null) => {
     if (node === null) return undefined;
@@ -89,17 +86,10 @@ export function Dialog({
             className,
           )}
         >
-          <RadixDialog.Title className="text-sm font-semibold tracking-tight text-fg">
-            {title}
-          </RadixDialog.Title>
+          <RadixDialog.Title className="text-sm font-semibold tracking-tight text-fg">{title}</RadixDialog.Title>
           {/* Radix warns when a dialog has no description; render an empty one rather than
               inventing prose for a form whose fields already carry their own labels. */}
-          <RadixDialog.Description
-            className={cn(
-              "mt-2 text-sm leading-relaxed text-fg-muted",
-              description === undefined && "sr-only",
-            )}
-          >
+          <RadixDialog.Description className={cn("mt-2 text-sm leading-relaxed text-fg-muted", description === undefined && "sr-only")}>
             {description ?? title}
           </RadixDialog.Description>
           <div
@@ -166,12 +156,7 @@ export function ConfirmDialog({
           <RadixDialog.Close asChild>
             <Button variant="ghost">Cancel</Button>
           </RadixDialog.Close>
-          <Button
-            variant={destructive ? "danger" : "primary"}
-            loading={loading}
-            disabled={disabled}
-            onClick={onConfirm}
-          >
+          <Button variant={destructive ? "danger" : "primary"} loading={loading} disabled={disabled} onClick={onConfirm}>
             {confirmLabel}
           </Button>
         </>

package/src/components/ui/Disclosure.tsx

@@ -47,14 +47,9 @@ export function Disclosure({
           "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal",
         )}
       >
-        <ChevronRight
-          className="size-3.5 shrink-0 transition-transform group-open:rotate-90"
-          aria-hidden
-        />
+        <ChevronRight className="size-3.5 shrink-0 transition-transform group-open:rotate-90" aria-hidden />
         {summary}
-        {count !== undefined && (
-          <span className="font-mono text-fg-subtle tabular-nums">{count}</span>
-        )}
+        {count !== undefined && <span className="font-mono text-fg-subtle tabular-nums">{count}</span>}
       </summary>
       <div className="pt-3">{children}</div>
     </details>

package/src/components/ui/DropdownMenu.tsx

@@ -36,15 +36,7 @@ export interface DropdownMenuProps {
  * page behind stays readable and operable. Toggling a `MenuCheckboxItem` keeps the menu open,
  * so several layers can be switched in one visit.
  */
-export function DropdownMenu({
-  trigger,
-  children,
-  open,
-  onOpenChange,
-  align = "start",
-  side = "bottom",
-  className,
-}: DropdownMenuProps) {
+export function DropdownMenu({ trigger, children, open, onOpenChange, align = "start", side = "bottom", className }: DropdownMenuProps) {
   return (
     <RadixMenu.Root
       // Non-modal: a modal menu hides the rest of the page from assistive technology while
@@ -134,13 +126,7 @@ export interface MenuCheckboxItemProps {
  * A toggle (`role="menuitemcheckbox"`): a layer on or off. A check marks it on. Choosing it
  * leaves the menu open.
  */
-export function MenuCheckboxItem({
-  children,
-  checked,
-  onCheckedChange,
-  shortcut,
-  disabled,
-}: MenuCheckboxItemProps) {
+export function MenuCheckboxItem({ children, checked, onCheckedChange, shortcut, disabled }: MenuCheckboxItemProps) {
   return (
     <RadixMenu.CheckboxItem
       checked={checked}

package/src/components/ui/Feedback.tsx

@@ -58,11 +58,7 @@ export function Callout({
     <div
       role={tone === "error" ? "alert" : "status"}
       data-tone={tone}
-      className={cn(
-        "flex items-start gap-2.5 rounded-control border px-3 py-2.5 text-sm leading-snug",
-        classes,
-        className,
-      )}
+      className={cn("flex items-start gap-2.5 rounded-control border px-3 py-2.5 text-sm leading-snug", classes, className)}
     >
       <Icon className={cn("mt-0.5 size-4 shrink-0", ICON_TONE[tone])} aria-hidden />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
@@ -147,6 +143,9 @@ export function SkeletonRows({
  * A `role="progressbar"` with `aria-valuenow` in percent. Its accessible name is
  * `aria-label` if given, else `label`, else "Progress" — pass one that names the job when
  * a screen shows more than one bar.
+ *
+ * @deprecated Use `Progress`: a value out of a `max` with a "412 of 2,556" value text, an
+ * indeterminate state, and a track that follows the density.
  */
 export function ProgressBar({
   fraction,
@@ -175,10 +174,7 @@ export function ProgressBar({
         data-complete={percent === 100 ? "" : undefined}
         className="h-1.5 overflow-hidden rounded-full bg-line"
       >
-        <div
-          className="h-full rounded-full bg-signal transition-[width] duration-300"
-          style={{ width: `${percent}%` }}
-        />
+        <div className="h-full rounded-full bg-signal transition-[width] duration-300" style={{ width: `${percent}%` }} />
       </div>
       {label && (
         <span className="font-mono text-xs text-fg-muted tabular-nums">

package/src/components/ui/Field.tsx

@@ -85,10 +85,7 @@ export function Field({
   const density = useDensity();
 
   const hasError = error !== undefined && error !== null && error !== false;
-  const describedBy =
-    [description ? descriptionId : undefined, hasError ? errorId : undefined]
-      .filter(Boolean)
-      .join(" ") || undefined;
+  const describedBy = [description ? descriptionId : undefined, hasError ? errorId : undefined].filter(Boolean).join(" ") || undefined;
 
   // A group carries the description itself; its controls would only repeat it.
   const control = useMemo(
@@ -109,9 +106,7 @@ export function Field({
             </span>
           )}
         </span>
-        {annotation && (
-          <span className="ml-auto font-mono text-[11px] text-fg-subtle">{annotation}</span>
-        )}
+        {annotation && <span className="ml-auto font-mono text-[11px] text-fg-subtle">{annotation}</span>}
       </span>
       <FieldContext value={control}>{children}</FieldContext>
     </>
@@ -122,17 +117,11 @@ export function Field({
       className={cn("flex min-w-0 flex-col", gap, className)}
       data-invalid={hasError ? "" : undefined}
       data-required={required ? "" : undefined}
-      {...(as === "group"
-        ? { role: "group", "aria-label": label, "aria-describedby": describedBy }
-        : {})}
+      {...(as === "group" ? { role: "group", "aria-label": label, "aria-describedby": describedBy } : {})}
     >
       {/* The description and the error sit outside the <label>: inside it they would be read
           as part of the control's name as well as its description. */}
-      {as === "label" ? (
-        <label className={cn("flex min-w-0 flex-col", gap)}>{labelled}</label>
-      ) : (
-        labelled
-      )}
+      {as === "label" ? <label className={cn("flex min-w-0 flex-col", gap)}>{labelled}</label> : labelled}
 
       {description && (
         <span id={descriptionId} className="text-xs leading-snug text-fg-muted">

package/src/components/ui/HighlightedText.tsx

@@ -0,0 +1,84 @@
+/*
+ * A string with marked spans: the placeholders, tags and protected terms of a UI string, and
+ * where a translation does not match its source.
+ *
+ * The string is only ever text. It is cut into runs and each run is a React text child, so
+ * `<b>` in a string is shown as the four characters `<b>`, never parsed. There is no
+ * `dangerouslySetInnerHTML` here, nor anywhere in the package.
+ *
+ * Each kind differs in shape, not only in colour (a box, a mono face, an underline style),
+ * and a screen reader hears the kind after the span. That label is selection-proof: a reader
+ * copying the string gets the string.
+ */
+
+import type { ComponentProps } from "react";
+
+import { cn } from "./cn";
+import { HIGHLIGHT_KINDS, segmentText, type HighlightKind, type HighlightSpan } from "./highlightSpans";
+
+/** What a screen reader hears after a span of each kind, by default. */
+const LABELS: Record<HighlightKind, string> = {
+  placeholder: "placeholder",
+  tag: "markup",
+  "protected-term": "protected term",
+  mismatch: "mismatch",
+};
+
+/** The look of each kind; listed in `HIGHLIGHT_KINDS` order, so a later kind wins a clash. */
+const STYLES: Record<HighlightKind, string> = {
+  // Code-like, in a quiet box.
+  tag: "rounded-sm bg-raised px-px font-mono text-fg-muted",
+  // Read as a name: a dotted underline, the face unchanged.
+  "protected-term": "underline decoration-fg-subtle decoration-dotted decoration-1 underline-offset-[3px]",
+  // A slot the code fills: mono, outlined.
+  placeholder: "rounded-sm bg-raised px-px font-mono text-fg ring-1 ring-line-strong ring-inset",
+  // A verdict the app made: a wavy underline and a tint, in the defect colour.
+  mismatch: "bg-defect/12 text-fg underline decoration-defect decoration-wavy decoration-1 underline-offset-[3px]",
+};
+
+/** Props of `HighlightedText`: the text, its spans, and every `<span>` prop but `children`. */
+export type HighlightedTextProps = Omit<ComponentProps<"span">, "children"> & {
+  /** The string. Shown as text, whitespace and line breaks kept; markup in it is not interpreted. */
+  text: string;
+  /** The ranges to mark, in UTF-16 offsets, in any order; overlaps are allowed. `findSpans` builds them from patterns. */
+  spans?: readonly HighlightSpan[] | undefined;
+  /**
+   * What a screen reader hears after a span of each kind: "placeholder", "markup",
+   * "protected term" and "mismatch" by default. `null` silences a kind. A span's own `label` wins.
+   */
+  labels?: Partial<Record<HighlightKind, string | null>> | undefined;
+};
+
+/**
+ * A string with highlighted spans: placeholders (`%1`, `{count}`), markup tags (`<b>`),
+ * protected terms (`ParamsManager`) and mismatches, each drawn in its own shape. The caller
+ * supplies the spans, or finds them with `findSpans`.
+ *
+ * The text is rendered as text, never as HTML. Each span is a `<mark>` with `data-kind` (the
+ * kinds covering it, space-separated), followed by its label for screen readers ("%1,
+ * placeholder"), which a copy of the text leaves out.
+ */
+export function HighlightedText({ text, spans = [], labels, className, ...rest }: HighlightedTextProps) {
+  const segments = segmentText(text, spans);
+  return (
+    <span {...rest} className={cn("break-words whitespace-pre-wrap", className)}>
+      {segments.map((segment) => {
+        if (segment.spans.length === 0) return segment.text;
+        const kinds = HIGHLIGHT_KINDS.filter((kind) => segment.spans.some((span) => span.kind === kind));
+        const said = segment.spans
+          .map((span) => span.label ?? (labels?.[span.kind] === undefined ? LABELS[span.kind] : labels[span.kind]))
+          .filter((label): label is string => typeof label === "string" && label !== "");
+        return (
+          <mark
+            key={segment.start}
+            data-kind={kinds.join(" ")}
+            className={cn("bg-transparent text-inherit", ...kinds.map((kind) => STYLES[kind]))}
+          >
+            {segment.text}
+            {said.length > 0 && <span className="sr-only select-none">{`, ${[...new Set(said)].join(", ")}`}</span>}
+          </mark>
+        );
+      })}
+    </span>
+  );
+}

package/src/components/ui/Input.tsx

@@ -46,13 +46,7 @@ export function useControlHeight(): string {
  * is described by the field's description and error.
  */
 export function Input({ className, "aria-describedby": describedBy, ...rest }: ComponentProps<"input">) {
-  return (
-    <input
-      {...useFieldDescription(describedBy)}
-      {...rest}
-      className={cn(controlClasses, useControlHeight(), className)}
-    />
-  );
+  return <input {...useFieldDescription(describedBy)} {...rest} className={cn(controlClasses, useControlHeight(), className)} />;
 }
 
 /**
@@ -126,11 +120,7 @@ export function NumberInput({ onValueChange, onClear, precision, ...props }: Num
   const { unit, ...rest } = props;
   // A `null` text value is an empty field, not a switch to uncontrolled.
   const text = (rest.value === null ? { ...rest, value: "" } : rest) as TextNumberInputProps;
-  return unit === undefined || unit === "" ? (
-    <PlainNumberInput {...text} />
-  ) : (
-    <UnitNumberInput unit={unit} {...text} />
-  );
+  return unit === undefined || unit === "" ? <PlainNumberInput {...text} /> : <UnitNumberInput unit={unit} {...text} />;
 }
 
 type TextNumberInputProps = Omit<NumberInputProps, "unit" | "value" | "onValueChange" | "onClear" | "precision"> & {
@@ -153,8 +143,7 @@ function ValueNumberInput({
   ...rest
 }: Omit<NumberInputProps, "onValueChange"> & { onValueChange: (value: number) => void }) {
   const numeric = typeof value === "number" ? value : null;
-  const show = (v: number | null) =>
-    v === null ? "" : precision === undefined ? String(v) : formatNumber(v, precision);
+  const show = (v: number | null) => (v === null ? "" : precision === undefined ? String(v) : formatNumber(v, precision));
   // Non-null while the field is being edited: the text as typed, and the value on focus.
   const [draft, setDraft] = useState<{ text: string; initial: number | null } | null>(null);
 
@@ -214,11 +203,7 @@ function ValueNumberInput({
   );
 }
 
-function PlainNumberInput({
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}: TextNumberInputProps) {
+function PlainNumberInput({ className, "aria-describedby": describedBy, ...rest }: TextNumberInputProps) {
   return (
     <input
       {...useFieldDescription(describedBy)}
@@ -235,12 +220,7 @@ function PlainNumberInput({
  * `NumberInput` stays byte-identical to the one before `unit` existed, down to the ids React
  * hands the elements rendered after it.
  */
-function UnitNumberInput({
-  unit,
-  style,
-  "aria-describedby": describedBy,
-  ...rest
-}: TextNumberInputProps & { unit: string }) {
+function UnitNumberInput({ unit, style, "aria-describedby": describedBy, ...rest }: TextNumberInputProps & { unit: string }) {
   const unitId = useId();
   return (
     <span data-unit={unit} className="relative flex w-full min-w-0 items-center">
@@ -262,21 +242,3 @@ function UnitNumberInput({
     </span>
   );
 }
-
-/**
- * Multi-line text — set in mono, for JSON and lists. Takes every `<textarea>` prop, `ref`
- * included.
- */
-export function Textarea({
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}: ComponentProps<"textarea">) {
-  return (
-    <textarea
-      {...useFieldDescription(describedBy)}
-      {...rest}
-      className={cn(controlClasses, "py-1.5 font-mono", className)}
-    />
-  );
-}

package/src/components/ui/Panel.tsx

@@ -47,11 +47,7 @@ export function Panel({
           <h2
             className={cn(
               "truncate font-semibold text-fg",
-              byDensity(
-                density,
-                "text-sm tracking-tight",
-                "text-[11px] tracking-wider uppercase text-fg-muted",
-              ),
+              byDensity(density, "text-sm tracking-tight", "text-[11px] tracking-wider uppercase text-fg-muted"),
             )}
           >
             {title}
@@ -97,10 +93,7 @@ export function Section({
     <section className={cn("flex flex-col", byDensity(density, "gap-3", "gap-1.5"), className)}>
       <div className={cn("flex items-baseline", byDensity(density, "gap-2.5", "gap-2"))}>
         {step !== undefined && (
-          <span
-            className="font-mono text-xs text-fg-subtle tabular-nums"
-            aria-hidden
-          >
+          <span className="font-mono text-xs text-fg-subtle tabular-nums" aria-hidden>
             {String(step).padStart(2, "0")}
           </span>
         )}
@@ -212,16 +205,11 @@ export function ReadoutStrip({
   if (shown.length === 0) return null;
 
   return (
-    <ol
-      className={cn(
-        "flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-fg-muted",
-        className,
-      )}
-    >
+    <ol className={cn("flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-fg-muted", className)}>
       {shown.map((item, index) => (
         // The items are positional facts with no identity of their own (a label is optional
         // and values repeat), so their place in the strip is the key.
-        // eslint-disable-next-line @eslint-react/no-array-index-key -- positional list, see above
+        // oxlint-disable-next-line react/no-array-index-key -- positional list, see above
         <li key={index} className="flex items-center gap-2">
           {index > 0 && (
             <span className="text-fg-subtle" aria-hidden>