@xemahq/ui-kernel 0.10.0 → 0.11.0

package/src/ui/capture/use-schema-validation.ts

@@ -8,9 +8,16 @@
 // can nudge "you still need to fill X" without waiting for a 422.
 // ═══════════════════════════════════════════════════════════════════════════
 import { useMemo } from 'react';
-import { z } from 'zod';
+import { type z } from 'zod';
 
-import { CaptureFieldType, type CaptureFieldSpec, type CaptureSchema, type CaptureSection, type CaptureValues, toFieldList } from './field-spec';
+import {
+  CaptureFieldType,
+  type CaptureFieldSpec,
+  type CaptureSchema,
+  type CaptureSection,
+  type CaptureValues,
+  toFieldList,
+} from './field-spec';
 import { fieldSpecToZod, isEmptyValue } from './field-spec-to-zod';
 
 export interface SchemaValidationResult {
@@ -29,34 +36,52 @@ type ValidationInput =
   | readonly CaptureSection[];
 
 function isZodSchema(input: ValidationInput): input is z.ZodType {
-  return typeof (input as z.ZodType)?.safeParse === 'function';
+  return 'safeParse' in input && typeof input.safeParse === 'function';
 }
 
 /** Deterministic required sweep over the flat spec list (nested-aware). */
-function sweepMissing(fields: readonly CaptureFieldSpec[], values: CaptureValues, prefix = ''): string[] {
+function sweepMissing(
+  fields: readonly CaptureFieldSpec[],
+  values: CaptureValues,
+  prefix = '',
+): string[] {
   const missing: string[] = [];
   for (const field of fields) {
     const path = prefix ? `${prefix}.${field.key}` : field.key;
-    const value = values?.[field.key];
+    const value = values[field.key];
     if (field.type === CaptureFieldType.Object) {
-      if (field.required && isEmptyValue(value)) missing.push(path);
+      if (field.required && isEmptyValue(value)) {
+        missing.push(path);
+      }
       if (value && typeof value === 'object' && !Array.isArray(value)) {
-        missing.push(...sweepMissing(field.fields ?? [], value as CaptureValues, path));
+        missing.push(
+          ...sweepMissing(field.fields ?? [], value as CaptureValues, path),
+        );
       }
       continue;
     }
     if (field.type === CaptureFieldType.List) {
-      if (field.required && isEmptyValue(value)) missing.push(path);
+      if (field.required && isEmptyValue(value)) {
+        missing.push(path);
+      }
       if (Array.isArray(value)) {
         value.forEach((item, i) => {
           if (item && typeof item === 'object') {
-            missing.push(...sweepMissing(field.fields ?? [], item as CaptureValues, `${path}.${i}`));
+            missing.push(
+              ...sweepMissing(
+                field.fields ?? [],
+                item as CaptureValues,
+                `${path}.${i}`,
+              ),
+            );
           }
         });
       }
       continue;
     }
-    if (field.required && isEmptyValue(value)) missing.push(path);
+    if (field.required && isEmptyValue(value)) {
+      missing.push(path);
+    }
   }
   return missing;
 }
@@ -70,7 +95,10 @@ function sweepMissing(fields: readonly CaptureFieldSpec[], values: CaptureValues
  * // gate a wizard step / submit button:
  * <Button disabled={!isValid}>Continue</Button>
  */
-export function useSchemaValidation(input: ValidationInput, values: CaptureValues): SchemaValidationResult {
+export function useSchemaValidation(
+  input: ValidationInput,
+  values: CaptureValues,
+): SchemaValidationResult {
   // Field specs (when supplied) drive the deterministic required sweep and the
   // auto-adapted zod schema; a raw zod schema is used as-is.
   const fields = useMemo<readonly CaptureFieldSpec[] | null>(
@@ -89,7 +117,9 @@ export function useSchemaValidation(input: ValidationInput, values: CaptureValue
       for (const issue of result.error.issues) {
         const path = issue.path.map(String).join('.');
         // First error per path wins (deterministic, matches display order).
-        if (!(path in errors)) errors[path] = issue.message;
+        if (!(path in errors)) {
+          errors[path] = issue.message;
+        }
       }
     }
 
@@ -100,7 +130,9 @@ export function useSchemaValidation(input: ValidationInput, values: CaptureValue
       : Object.keys(errors).filter((path) => {
           const segments = path.split('.');
           let cur: unknown = values;
-          for (const seg of segments) cur = (cur as CaptureValues | undefined)?.[seg];
+          for (const seg of segments) {
+            cur = (cur as CaptureValues | undefined)?.[seg];
+          }
           return isEmptyValue(cur);
         });
 

package/src/ui/capture/use-wizard.ts

@@ -50,6 +50,29 @@ export interface WizardApi {
   readonly status: (index: number) => FormStepStatus;
 }
 
+/**
+ * Strict access guard — keeps `steps[index]` typed as defined.
+ *
+ * `activeIndex` is clamped into `[0, count - 1]`, so the only way this misses is
+ * an EMPTY `steps` array: `clamp` floors at 0 and `steps[0]` is then `undefined`.
+ * `WizardApi.activeStep` is declared non-optional and consumers dereference it
+ * (`api.activeStep.key`), so a zero-step wizard must fail here with a message
+ * naming the cause rather than hand back an `undefined` typed as `WizardStepDef`.
+ */
+function requireStep(
+  steps: readonly WizardStepDef[],
+  index: number,
+): WizardStepDef {
+  const step = steps[index];
+  if (!step) {
+    throw new Error(
+      `useWizard: no step at index ${index} (have ${steps.length}). ` +
+        '`steps` must contain at least one entry.',
+    );
+  }
+  return step;
+}
+
 /**
  * @example
  * const wizard = useWizard({
@@ -64,20 +87,30 @@ export interface WizardApi {
 export function useWizard(options: UseWizardOptions): WizardApi {
   const { steps, canAdvance, initialStep = 0, step, onStepChange } = options;
   const count = steps.length;
-  const clamp = useCallback((i: number) => Math.max(0, Math.min(count - 1, i)), [count]);
+  const clamp = useCallback(
+    (i: number) => Math.max(0, Math.min(count - 1, i)),
+    [count],
+  );
 
   const isControlled = step !== undefined;
   const [internal, setInternal] = useState(() => clamp(initialStep));
   const activeIndex = clamp(isControlled ? step : internal);
 
-  const gate = useCallback((i: number) => (canAdvance ? canAdvance(i) : true), [canAdvance]);
+  const gate = useCallback(
+    (i: number) => (canAdvance ? canAdvance(i) : true),
+    [canAdvance],
+  );
 
   const request = useCallback(
     (target: number) => {
       const next = clamp(target);
-      if (next === activeIndex) return;
+      if (next === activeIndex) {
+        return;
+      }
       onStepChange?.(next);
-      if (!isControlled) setInternal(next);
+      if (!isControlled) {
+        setInternal(next);
+      }
     },
     [activeIndex, clamp, isControlled, onStepChange],
   );
@@ -91,7 +124,9 @@ export function useWizard(options: UseWizardOptions): WizardApi {
       }
       // Forward: every step from active..target-1 must pass its gate.
       for (let i = activeIndex; i < target; i += 1) {
-        if (!gate(i)) return;
+        if (!gate(i)) {
+          return;
+        }
       }
       request(target);
     },
@@ -99,17 +134,28 @@ export function useWizard(options: UseWizardOptions): WizardApi {
   );
 
   const next = useCallback(() => {
-    if (activeIndex >= count - 1) return;
-    if (!gate(activeIndex)) return;
+    if (activeIndex >= count - 1) {
+      return;
+    }
+    if (!gate(activeIndex)) {
+      return;
+    }
     request(activeIndex + 1);
   }, [activeIndex, count, gate, request]);
 
-  const prev = useCallback(() => request(activeIndex - 1), [activeIndex, request]);
+  const prev = useCallback(
+    () => request(activeIndex - 1),
+    [activeIndex, request],
+  );
 
   const status = useCallback(
     (index: number): FormStepStatus => {
-      if (index < activeIndex) return FormStepStatus.DONE;
-      if (index === activeIndex) return FormStepStatus.ACTIVE;
+      if (index < activeIndex) {
+        return FormStepStatus.DONE;
+      }
+      if (index === activeIndex) {
+        return FormStepStatus.ACTIVE;
+      }
       return FormStepStatus.PENDING;
     },
     [activeIndex],
@@ -119,7 +165,7 @@ export function useWizard(options: UseWizardOptions): WizardApi {
     () => ({
       steps,
       activeIndex,
-      activeStep: steps[activeIndex],
+      activeStep: requireStep(steps, activeIndex),
       isFirst: activeIndex === 0,
       isLast: activeIndex === count - 1,
       canAdvance: gate(activeIndex),

package/src/ui/capture/value-format.ts

@@ -5,14 +5,24 @@ import { CaptureFieldType, type CaptureFieldSpec } from './field-spec';
 
 /** Coerce any stored value to a display/edit string (empty for absent). */
 export function asString(value: unknown): string {
-  if (typeof value === 'string') return value;
-  if (value === undefined || value === null) return '';
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value === undefined || value === null) {
+    return '';
+  }
   return String(value);
 }
 
 /** Human-readable rendering of a scalar field value for the read-only preview. */
-export function formatScalar(field: CaptureFieldSpec, value: unknown, emptyText: string): string {
-  if (value === undefined || value === null || value === '') return emptyText;
+export function formatScalar(
+  field: CaptureFieldSpec,
+  value: unknown,
+  emptyText: string,
+): string {
+  if (value === undefined || value === null || value === '') {
+    return emptyText;
+  }
   switch (field.type) {
     case CaptureFieldType.Boolean:
       return value === true ? 'Yes' : 'No';

package/src/ui/capture/wizard.tsx

@@ -6,14 +6,18 @@
 // renders a Back / Next / Finish nav bar. All state lives in the `useWizard`
 // engine you pass via `api`; this component is presentation only.
 // ═══════════════════════════════════════════════════════════════════════════
-import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';
+import {
+  Children,
+  isValidElement,
+  type ReactNode,
+} from 'react';
 
 import { cn } from '../cn';
 import { Button } from '../primitives/button';
 import { FormStepper } from '../primitives/form-stepper';
-import type { FormStep } from '../primitives/form-stepper.types';
 
 import type { WizardApi } from './use-wizard';
+import type { FormStep } from '../primitives/form-stepper.types';
 
 export interface WizardStepProps {
   /** Must match a `useWizard` step `key`. */
@@ -46,8 +50,8 @@ export interface WizardProps {
 function stepBodies(children: ReactNode): Map<string, ReactNode> {
   const map = new Map<string, ReactNode>();
   Children.forEach(children, (child) => {
-    if (isValidElement(child) && (child as ReactElement<WizardStepProps>).props?.stepKey) {
-      const p = (child as ReactElement<WizardStepProps>).props;
+    if (isValidElement<WizardStepProps>(child) && child.props.stepKey) {
+      const p = child.props;
       map.set(p.stepKey, p.children);
     }
   });
@@ -73,7 +77,7 @@ export function Wizard({
     status: api.status(index),
     // Render the active step's body inline; pending/done steps stay empty so
     // the rail reads as a guided one-step-at-a-time flow.
-    children: index === api.activeIndex ? bodies.get(step.key) ?? null : null,
+    children: index === api.activeIndex ? (bodies.get(step.key) ?? null) : null,
   }));
 
   return (

package/src/ui/charts/bar-chart.tsx

@@ -1,10 +1,8 @@
 // ═══════════════════════════════════════════════════════════════════════════
 // BarChart — categorical bars, pure SVG (Wave 9.2)
 // ═══════════════════════════════════════════════════════════════════════════
-import type { ReactNode } from 'react';
 
 import { ChartEmpty, ChartFrame, type ChartLegendItem } from './chart-frame';
-import type { ChartBaseProps, ChartDatum } from './chart-types';
 import {
   buildAriaSummary,
   chartColorAt,
@@ -13,6 +11,9 @@ import {
   niceScale,
 } from './chart-utils';
 
+import type { ChartBaseProps, ChartDatum } from './chart-types';
+import type { ReactNode } from 'react';
+
 // Internal coordinate space — the `viewBox`. `width="100%"` makes the SVG scale
 // to its container (D20 fluid), so these are ratios, not device pixels.
 const VIEW_W = 640;
@@ -42,13 +43,16 @@ export function BarChart({
   const points = finitePoints(data);
 
   if (points.length === 0) {
-    return <ChartEmpty title={title} label={emptyLabel} className={className} />;
+    return (
+      <ChartEmpty title={title} label={emptyLabel} className={className} />
+    );
   }
 
   const values = points.map((p) => p.value);
   const scale = niceScale(Math.min(...values), Math.max(...values));
   const span = scale.max - scale.min;
-  const yToPx = (v: number): number => PLOT_B - ((v - scale.min) / span) * PLOT_H;
+  const yToPx = (v: number): number =>
+    PLOT_B - ((v - scale.min) / span) * PLOT_H;
   const baseline = yToPx(0);
 
   const band = PLOT_W / points.length;

package/src/ui/charts/chart-frame.tsx

@@ -6,11 +6,12 @@
 // below `md`. That decision is driven by `useIsMobile()` — which reads the one
 // shared `MOBILE_BREAKPOINT` token — never a second breakpoint.
 // ═══════════════════════════════════════════════════════════════════════════
-import type { ReactNode } from 'react';
 
 import { cn } from '../cn';
 import { useIsMobile } from '../hooks/use-is-mobile';
 
+import type { ReactNode } from 'react';
+
 /** One row of the legend: a color swatch + its label + (optional) value. */
 export interface ChartLegendItem {
   readonly label: string;
@@ -29,7 +30,9 @@ interface ChartLegendProps {
  * secondary cue, so a color-blind or monochrome reader loses nothing.
  */
 export function ChartLegend({ items, layout }: ChartLegendProps): ReactNode {
-  if (items.length === 0) return null;
+  if (items.length === 0) {
+    return null;
+  }
   return (
     <ul
       className={cn(
@@ -48,7 +51,9 @@ export function ChartLegend({ items, layout }: ChartLegendProps): ReactNode {
           />
           <span className="text-ink-3">{item.label}</span>
           {item.value !== undefined && (
-            <span className="ml-auto font-medium tabular-nums text-ink">{item.value}</span>
+            <span className="ml-auto font-medium tabular-nums text-ink">
+              {item.value}
+            </span>
           )}
         </li>
       ))}
@@ -68,7 +73,11 @@ interface ChartFrameProps {
  * so below `md` the legend renders BELOW the plot; at/above `md` it sits to the
  * right. One token (`MOBILE_BREAKPOINT`), no second breakpoint.
  */
-export function ChartFrame({ plot, legend, className }: ChartFrameProps): ReactNode {
+export function ChartFrame({
+  plot,
+  legend,
+  className,
+}: ChartFrameProps): ReactNode {
   const isMobile = useIsMobile();
   return (
     <div className={cn('w-full min-w-0 text-ink-3', className)}>
@@ -96,7 +105,11 @@ interface ChartEmptyProps {
  * no finite points. Still carries `role="img"` + an `aria-label` so assistive
  * tech announces the (empty) chart rather than a silent gap.
  */
-export function ChartEmpty({ title, label, className }: ChartEmptyProps): ReactNode {
+export function ChartEmpty({
+  title,
+  label,
+  className,
+}: ChartEmptyProps): ReactNode {
   return (
     <div
       role="img"

package/src/ui/charts/chart-utils.ts

@@ -29,8 +29,23 @@ export const CHART_PALETTE: readonly string[] = [
 
 /** Resolve the color for the datum at `index`: explicit override wins, else palette (wraps). */
 export function chartColorAt(index: number, override?: string): string {
-  if (override !== undefined && override.length > 0) return override;
-  return CHART_PALETTE[index % CHART_PALETTE.length];
+  if (override !== undefined && override.length > 0) {
+    return override;
+  }
+  const size = CHART_PALETTE.length;
+  // `index % size` alone is NOT a wrap: JS `%` keeps the sign, so a negative
+  // index lands on a negative slot and reads back `undefined` — which used to
+  // be returned as a `string` and rendered as a missing `fill`/`stroke`. Wrap
+  // forward instead. A non-finite index yields a NaN slot and falls through to
+  // the throw rather than silently painting the wrong series color.
+  const slot = ((Math.trunc(index) % size) + size) % size;
+  const color = CHART_PALETTE[slot];
+  if (color === undefined) {
+    throw new Error(
+      `chartColorAt: no palette color for index ${index} (resolved slot ${slot} of ${size}).`,
+    );
+  }
+  return color;
 }
 
 /**
@@ -39,8 +54,12 @@ export function chartColorAt(index: number, override?: string): string {
  * SVG is byte-identical across machines/locales.
  */
 export function defaultFormatValue(value: number): string {
-  if (!Number.isFinite(value)) return '—';
-  if (Number.isInteger(value)) return String(value);
+  if (!Number.isFinite(value)) {
+    return '—';
+  }
+  if (Number.isInteger(value)) {
+    return String(value);
+  }
   return String(Number(value.toFixed(2)));
 }
 
@@ -70,15 +89,25 @@ function niceNum(range: number, round: boolean): number {
   const fraction = range / pow;
   let niceFraction: number;
   if (round) {
-    if (fraction < 1.5) niceFraction = 1;
-    else if (fraction < 3) niceFraction = 2;
-    else if (fraction < 7) niceFraction = 5;
-    else niceFraction = 10;
+    if (fraction < 1.5) {
+      niceFraction = 1;
+    } else if (fraction < 3) {
+      niceFraction = 2;
+    } else if (fraction < 7) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
   } else {
-    if (fraction <= 1) niceFraction = 1;
-    else if (fraction <= 2) niceFraction = 2;
-    else if (fraction <= 5) niceFraction = 5;
-    else niceFraction = 10;
+    if (fraction <= 1) {
+      niceFraction = 1;
+    } else if (fraction <= 2) {
+      niceFraction = 2;
+    } else if (fraction <= 5) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
   }
   return niceFraction * pow;
 }
@@ -117,7 +146,7 @@ export function niceScale(
 ): NiceScale {
   const pinZero = options.pinZero ?? true;
   const maxTicks = options.maxTicks ?? 5;
-  let lo = pinZero ? Math.min(0, dataMin) : dataMin;
+  const lo = pinZero ? Math.min(0, dataMin) : dataMin;
   let hi = pinZero ? Math.max(0, dataMax) : dataMax;
   if (lo === hi) {
     // Flat series (e.g. all equal): open a unit window so we never divide by 0.
@@ -149,10 +178,13 @@ export function buildAriaSummary(
   noun: string,
   maxItems = 8,
 ): string {
-  if (points.length === 0) return `${title}: no data.`;
+  if (points.length === 0) {
+    return `${title}: no data.`;
+  }
   const shown = points.slice(0, maxItems);
   const pairs = shown.map((p) => `${p.label} ${format(p.value)}`).join(', ');
-  const suffix = points.length > maxItems ? `, and ${points.length - maxItems} more` : '';
+  const suffix =
+    points.length > maxItems ? `, and ${points.length - maxItems} more` : '';
   const count = points.length === 1 ? `1 ${noun}` : `${points.length} ${noun}s`;
   return `${title}: ${count}. ${pairs}${suffix}.`;
 }

package/src/ui/charts/donut-chart.tsx

@@ -5,11 +5,16 @@
 // If no finite positive value remains, an explicit empty state renders instead
 // of a broken ring.
 // ═══════════════════════════════════════════════════════════════════════════
-import type { ReactNode } from 'react';
 
 import { ChartEmpty, ChartFrame, type ChartLegendItem } from './chart-frame';
+import {
+  buildAriaSummary,
+  chartColorAt,
+  defaultFormatValue,
+} from './chart-utils';
+
 import type { ChartBaseProps, ChartDatum } from './chart-types';
-import { buildAriaSummary, chartColorAt, defaultFormatValue } from './chart-utils';
+import type { ReactNode } from 'react';
 
 const SIZE = 200;
 const CX = SIZE / 2;
@@ -57,7 +62,9 @@ export function DonutChart({
   const total = slices.reduce((sum, d) => sum + d.value, 0);
 
   if (slices.length === 0 || total <= 0) {
-    return <ChartEmpty title={title} label={emptyLabel} className={className} />;
+    return (
+      <ChartEmpty title={title} label={emptyLabel} className={className} />
+    );
   }
 
   const legend: ChartLegendItem[] = slices.map((d, i) => ({
@@ -67,7 +74,8 @@ export function DonutChart({
   }));
 
   const summaryPoints = slices.map((d) => ({ label: d.label, value: d.value }));
-  const summary = ariaLabel ?? buildAriaSummary(title, summaryPoints, format, 'slice');
+  const summary =
+    ariaLabel ?? buildAriaSummary(title, summaryPoints, format, 'slice');
 
   let cursor = 0;
   const arcs = slices.map((d, i) => {
@@ -77,7 +85,11 @@ export function DonutChart({
     const sweep = slices.length === 1 ? FULL - 1e-3 : (d.value / total) * FULL;
     const end = start + sweep;
     cursor = end;
-    return { path: slicePath(start, end), color: chartColorAt(i, d.color), key: `${d.label}-${i}` };
+    return {
+      path: slicePath(start, end),
+      color: chartColorAt(i, d.color),
+      key: `${d.label}-${i}`,
+    };
   });
 
   const plot = (
@@ -90,7 +102,13 @@ export function DonutChart({
       className="mx-auto block h-auto w-full max-w-[240px] text-ink-4"
     >
       {arcs.map((a) => (
-        <path key={a.key} d={a.path} fill={a.color} stroke="var(--card, transparent)" strokeWidth={1} />
+        <path
+          key={a.key}
+          d={a.path}
+          fill={a.color}
+          stroke="var(--card, transparent)"
+          strokeWidth={1}
+        />
       ))}
       <text
         x={CX}

package/src/ui/charts/line-chart.tsx

@@ -4,10 +4,8 @@
 // Non-finite points break the line (a new segment starts after the gap) rather
 // than emitting a NaN coordinate.
 // ═══════════════════════════════════════════════════════════════════════════
-import type { ReactNode } from 'react';
 
 import { ChartEmpty, ChartFrame, type ChartLegendItem } from './chart-frame';
-import type { ChartBaseProps, ChartLineSeries } from './chart-types';
 import {
   buildAriaSummary,
   chartColorAt,
@@ -15,6 +13,9 @@ import {
   niceScale,
 } from './chart-utils';
 
+import type { ChartBaseProps, ChartLineSeries } from './chart-types';
+import type { ReactNode } from 'react';
+
 const VIEW_W = 640;
 const VIEW_H = 360;
 const PAD = { top: 12, right: 12, bottom: 44, left: 48 } as const;
@@ -46,7 +47,9 @@ function toSegments(
       current = [];
     }
   });
-  if (current.length > 0) segments.push(current.join(' '));
+  if (current.length > 0) {
+    segments.push(current.join(' '));
+  }
   return segments;
 }
 
@@ -65,23 +68,35 @@ export function LineChart({
   let maxLen = 0;
   for (const s of series) {
     maxLen = Math.max(maxLen, s.points.length);
-    for (const p of s.points) if (Number.isFinite(p.value)) finiteValues.push(p.value);
+    for (const p of s.points) {
+      if (Number.isFinite(p.value)) {
+        finiteValues.push(p.value);
+      }
+    }
   }
 
   if (finiteValues.length === 0) {
-    return <ChartEmpty title={title} label={emptyLabel} className={className} />;
+    return (
+      <ChartEmpty title={title} label={emptyLabel} className={className} />
+    );
   }
 
-  const scale = niceScale(Math.min(...finiteValues), Math.max(...finiteValues), {
-    pinZero: false,
-  });
+  const scale = niceScale(
+    Math.min(...finiteValues),
+    Math.max(...finiteValues),
+    {
+      pinZero: false,
+    },
+  );
   const span = scale.max - scale.min;
-  const yToPx = (v: number): number => PLOT_B - ((v - scale.min) / span) * PLOT_H;
+  const yToPx = (v: number): number =>
+    PLOT_B - ((v - scale.min) / span) * PLOT_H;
   const xToPx = (i: number): number =>
     maxLen <= 1 ? PLOT_L + PLOT_W / 2 : PLOT_L + (i / (maxLen - 1)) * PLOT_W;
 
   // x labels from the longest series (deterministic pick: first of that length).
-  const xLabelSource = series.find((s) => s.points.length === maxLen)?.points ?? [];
+  const xLabelSource =
+    series.find((s) => s.points.length === maxLen)?.points ?? [];
 
   const legend: ChartLegendItem[] = series.map((s, i) => ({
     label: s.name,
@@ -94,7 +109,8 @@ export function LineChart({
       .filter((p) => Number.isFinite(p.value))
       .map((p) => ({ label: `${s.name} ${p.label}`, value: p.value })),
   );
-  const summary = ariaLabel ?? buildAriaSummary(title, summaryPoints, format, 'point');
+  const summary =
+    ariaLabel ?? buildAriaSummary(title, summaryPoints, format, 'point');
 
   const plot = (
     <svg
@@ -165,7 +181,13 @@ export function LineChart({
             ))}
             {s.points.map((p, i) =>
               Number.isFinite(p.value) ? (
-                <circle key={`pt-${i}`} cx={xToPx(i)} cy={yToPx(p.value)} r={2.5} fill={color}>
+                <circle
+                  key={`pt-${i}`}
+                  cx={xToPx(i)}
+                  cy={yToPx(p.value)}
+                  r={2.5}
+                  fill={color}
+                >
                   <title>{`${s.name} — ${p.label}: ${format(p.value)}`}</title>
                 </circle>
               ) : null,