@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/testing/react.ts

@@ -49,8 +49,7 @@ export async function rowMenuAction(
   // Any row's name: the words around the name, whatever the language puts first.
   const [before, after] = actionsFor("\u0000").split("\u0000");
   const anyRow = (name: string) =>
-    name === actions ||
-    (name.length > before.length + after.length && name.startsWith(before) && name.endsWith(after));
+    name === actions || (name.length > before.length + after.length && name.startsWith(before) && name.endsWith(after));
   const trigger = (await screen.findAllByRole("button", { name: row === undefined ? anyRow : actionsFor(row) }))[0];
   fireEvent.click(trigger);
   const title = trigger.getAttribute("aria-label") ?? trigger.textContent ?? "";

package/src/testing/viewport.ts

@@ -89,9 +89,7 @@ function condition(part: string, width: number, options: ViewportOptions): boole
 function answer(query: string, width: number, options: ViewportOptions): boolean {
   return query
     .split(",")
-    .some((alternative) =>
-      alternative.split(/\s+and\s+/).every((part) => condition(part, width, options)),
-    );
+    .some((alternative) => alternative.split(/\s+and\s+/).every((part) => condition(part, width, options)));
 }
 
 /** A list {@link viewportMatchMedia} handed out: what {@link setViewportWidth} flips. */
@@ -155,7 +153,12 @@ function mediaQueryList(query: string, viewport: StubViewport): StubMediaQueryLi
  *  `matches` and `media`, on an `Event` (jsdom has no `MediaQueryListEvent`). */
 function changeEvent(list: StubMediaQueryList): Event {
   const event = new Event("change");
-  for (const [key, value] of Object.entries({ matches: list.matches, media: list.media, target: list, currentTarget: list })) {
+  for (const [key, value] of Object.entries({
+    matches: list.matches,
+    media: list.media,
+    target: list,
+    currentTarget: list,
+  })) {
     Object.defineProperty(event, key, { value, enumerable: true });
   }
   return event;
@@ -175,10 +178,7 @@ function changeEvent(list: StubMediaQueryList): Event {
  * `vi.stubGlobal("matchMedia", viewportMatchMedia(375))` — or use
  * {@link stubViewportWidth}.
  */
-export function viewportMatchMedia(
-  width: number,
-  options: ViewportOptions = {},
-): (query: string) => MediaQueryList {
+export function viewportMatchMedia(width: number, options: ViewportOptions = {}): (query: string) => MediaQueryList {
   const viewport: StubViewport = { width, options, lists: new Set() };
   const matchMedia = (query: string) => {
     const list = mediaQueryList(query, viewport);
@@ -215,7 +215,7 @@ export function setViewportWidth(width: number): void {
   if (!viewport) {
     throw new Error(
       "setViewportWidth: no viewport stub is in force — put one in first with " +
-        "stubViewportWidth(width), or vi.stubGlobal(\"matchMedia\", viewportMatchMedia(width)).",
+        'stubViewportWidth(width), or vi.stubGlobal("matchMedia", viewportMatchMedia(width)).',
     );
   }
   viewport.width = width;

package/src/theme/contrast-tokens.ts

@@ -1,4 +1,14 @@
-import { contrast, hexToOklch, luminance, oklchToHex, oklchToRgb, parseHex, rgbToOklch, solveLightness, toHex } from "./color";
+import {
+  contrast,
+  hexToOklch,
+  luminance,
+  oklchToHex,
+  oklchToRgb,
+  parseHex,
+  rgbToOklch,
+  solveLightness,
+  toHex,
+} from "./color";
 import type { TokenSet } from "./palette-presets";
 
 /**
@@ -218,7 +228,8 @@ function steppedBorder(t: TokenSet, well: WellStep | null): string {
   // light well (§13.4), which is the darkest surface under More contrast.
   const surface2 = well?.bgSurface2 ?? t.bgSurface2;
   let lo = BORDER_STRONG_SHARE;
-  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET) return mix(t.border, t.textPrimary, 1 - lo);
+  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET)
+    return mix(t.border, t.textPrimary, 1 - lo);
   let hi = 1;
   for (let i = 0; i < 16; i++) {
     const mid = (lo + hi) / 2;

package/src/theme/palette-derive.ts

@@ -218,8 +218,7 @@ function surfaceSet(hue: number, mode: ThemeMode, tint: number, weight: number)
   // the three. Solving against `bgSurface` alone left it at 1.36:1 on `bgPage`, so the
   // target and the audit disagreed about the same border.
   const hardest = [bgPage, bgSurface, bgSurface2].reduce((a, b) =>
-    contrast(a, mode === "light" ? "#000000" : "#ffffff") <
-    contrast(b, mode === "light" ? "#000000" : "#ffffff")
+    contrast(a, mode === "light" ? "#000000" : "#ffffff") < contrast(b, mode === "light" ? "#000000" : "#ffffff")
       ? a
       : b,
   );
@@ -261,12 +260,7 @@ function tintOn(hue: number, chroma: number, surface: string, mode: ThemeMode):
   return oklchToHex({ l, c: Math.min(chroma * 0.45, 0.06), h: hue });
 }
 
-export function derivePalette({
-  anchors,
-  mode,
-  surfaceTint = 0.55,
-  textContrast,
-}: DeriveOptions): DerivedPalette {
+export function derivePalette({ anchors, mode, surfaceTint = 0.55, textContrast }: DeriveOptions): DerivedPalette {
   const warnings: string[] = [];
   const brand = hexToOklch(anchors.brand);
   if (!brand) {
@@ -285,8 +279,7 @@ export function derivePalette({
   // wherever it lands. Solving against `bgSurface` alone is the mistake that makes a
   // muted label fail on the page background it also sits on.
   const worstSurface = [surfaces.bgPage, surfaces.bgSurface, surfaces.bgSurface2].reduce((a, b) =>
-    contrast(a, mode === "light" ? "#000000" : "#ffffff") <
-    contrast(b, mode === "light" ? "#000000" : "#ffffff")
+    contrast(a, mode === "light" ? "#000000" : "#ffffff") < contrast(b, mode === "light" ? "#000000" : "#ffffff")
       ? a
       : b,
   );
@@ -304,8 +297,7 @@ export function derivePalette({
   // roles above keep their margin (4.6:1 and up) and need no second solve.
   const hover = hoverFill({ textPrimary, bgSurface: surfaces.bgSurface });
   const worstText = [worstSurface, hover].reduce((a, b) =>
-    contrast(a, mode === "light" ? "#000000" : "#ffffff") <
-    contrast(b, mode === "light" ? "#000000" : "#ffffff")
+    contrast(a, mode === "light" ? "#000000" : "#ffffff") < contrast(b, mode === "light" ? "#000000" : "#ffffff")
       ? a
       : b,
   );
@@ -328,9 +320,7 @@ export function derivePalette({
   // and passing either through unchanged put a value in the TokenSet that is not a CSS
   // colour — it then fails silently at paint time, three layers from here.
   let brandHex =
-    brandRatio >= 3
-      ? toHex(parseHex(anchors.brand)!)
-      : solveAgainst(brand.h, brandChroma, 3, brandGround, mode);
+    brandRatio >= 3 ? toHex(parseHex(anchors.brand)!) : solveAgainst(brand.h, brandChroma, 3, brandGround, mode);
   if (brandRatio < 3) {
     warnings.push(
       `brand ${anchors.brand} sits at ${brandRatio.toFixed(2)}:1 against the ${mode} surfaces, ` +
@@ -425,20 +415,8 @@ export function derivePalette({
     const hue = semanticHue[role];
     const chroma = semanticChroma[role];
     const bg = tintOn(hue, chroma, surfaces.bgSurface, mode);
-    const onSurface = solveLightness(
-      4.5,
-      parseHex(worstText)!,
-      hue,
-      chroma,
-      mode === "light" ? "darker" : "lighter",
-    );
-    const onTint = solveLightness(
-      4.5,
-      parseHex(bg)!,
-      hue,
-      chroma,
-      mode === "light" ? "darker" : "lighter",
-    );
+    const onSurface = solveLightness(4.5, parseHex(worstText)!, hue, chroma, mode === "light" ? "darker" : "lighter");
+    const onTint = solveLightness(4.5, parseHex(bg)!, hue, chroma, mode === "light" ? "darker" : "lighter");
     const l = mode === "light" ? Math.min(onSurface, onTint) : Math.max(onSurface, onTint);
     return oklchToHex({ l, c: chroma, h: hue });
   };
@@ -508,7 +486,13 @@ export function derivePalette({
   // numpad's sign, a future row's figure), so it gets the text floor too (0.33). The
   // fixed lightness left it at 4.24:1 on four light pages.
   const neutralChroma = 0.012 * weight;
-  const neutralFloor = solveLightness(4.5, parseHex(worstText)!, brand.h, neutralChroma, mode === "light" ? "darker" : "lighter");
+  const neutralFloor = solveLightness(
+    4.5,
+    parseHex(worstText)!,
+    brand.h,
+    neutralChroma,
+    mode === "light" ? "darker" : "lighter",
+  );
   const moneyNeutral = oklchToHex({
     l: mode === "light" ? Math.min(0.52, neutralFloor) : Math.max(0.72, neutralFloor),
     c: neutralChroma,
@@ -557,12 +541,7 @@ export function derivePalette({
  * `moneyIncome`/`moneyExpense` — so a heatmap cell and the figure printed beside it
  * agree about which way is which, rather than each inventing its own convention.
  */
-function deriveHeat(
-  income: string,
-  expense: string,
-  surfaces: { bgSurface2: string },
-  mode: ThemeMode,
-): HeatStops {
+function deriveHeat(income: string, expense: string, surfaces: { bgSurface2: string }, mode: ThemeMode): HeatStops {
   const exp = hexToOklch(expense)!;
   return {
     neutral: surfaces.bgSurface2,
@@ -649,7 +628,13 @@ export function auditPalette(
   }
   // The stepped light well, a hex `applyTokenSet` writes (§13.3, decision 2).
   if (step?.well) {
-    add("bgSurface2 on bgSurface", t.bgSurface2, t.bgSurface, WELL_STEP_MIN, "house rule: the well stands two hover steps from the card");
+    add(
+      "bgSurface2 on bgSurface",
+      t.bgSurface2,
+      t.bgSurface,
+      WELL_STEP_MIN,
+      "house rule: the well stands two hover steps from the card",
+    );
   }
   for (const [name, bg] of textGrounds) {
     add(`textPrimary on ${name}`, t.textPrimary, bg, 7, "WCAG 1.4.6 AAA body text");
@@ -694,13 +679,7 @@ export function auditPalette(
     add("warning on warningBg", semantic.warning, semantic.warningBg, 4.5, "WCAG 1.4.3 — badge text");
     add("info on infoBg", semantic.info, semantic.infoBg, 4.5, "WCAG 1.4.3 — badge text");
     add("success on successBg", semantic.success, semantic.successBg, 4.5, "WCAG 1.4.3 — badge text");
-    add(
-      "dangerContrast on danger",
-      semantic.dangerContrast,
-      semantic.danger,
-      4.5,
-      "WCAG 1.4.3 AA body text",
-    );
+    add("dangerContrast on danger", semantic.dangerContrast, semantic.danger, 4.5, "WCAG 1.4.3 AA body text");
   }
 
   const failures = checks.filter((c) => !c.passes);
@@ -771,12 +750,7 @@ const SINGLE_LIGHTNESS_MAX_SERIES = 4;
  * wants their charts to follow their brand and is willing to read the report — not as
  * a silent upgrade to the default.
  */
-export function deriveChartRamp(
-  brandHex: string,
-  mode: ThemeMode,
-  surfaces: string[],
-  count = 9,
-): ChartRampReport {
+export function deriveChartRamp(brandHex: string, mode: ThemeMode, surfaces: string[], count = 9): ChartRampReport {
   const brand = hexToOklch(brandHex) ?? { l: 0.6, c: 0.12, h: 264 };
   const base = mode === "light" ? 0.58 : 0.74;
   const c = Math.max(0.09, Math.min(brand.c, 0.15));

package/src/theme/palette-presets.ts

@@ -174,7 +174,6 @@ export const DEFAULT_PRESET: PalettePreset = {
   },
 };
 
-
 /**
  * The 0.48 default: the same surfaces, brand and money, with Paul Tol's "Muted" nine
  * as the chart ramp and the teal/amber heat stops that went with it. Selectable, no

package/src/theme/palette-store.ts

@@ -41,10 +41,7 @@ interface PaletteState {
  * that app's theme store (for the active light/dark mode). Returns the palette
  * hook plus the effect + selector hooks that read the active preset's tokens.
  */
-export function createPaletteStore(
-  storageKey: string,
-  useTheme: UseBoundStore<StoreApi<ThemeState>>,
-) {
+export function createPaletteStore(storageKey: string, useTheme: UseBoundStore<StoreApi<ThemeState>>) {
   const usePalette = create<PaletteState>()(
     logger(
       persist(

package/src/theme/text-size.ts

@@ -260,7 +260,7 @@ export function createTextSizeStore(storageKey: string) {
           merge: (persisted, current) => ({
             ...current,
             size: isTextSize((persisted as { size?: unknown } | null)?.size)
-              ? ((persisted as { size: TextSize }).size)
+              ? (persisted as { size: TextSize }).size
               : null,
           }),
         },

package/src/theme/theme-store.ts

@@ -37,9 +37,7 @@ function resolve(preference: ThemePreference): ThemeMode {
  *  persisted the concrete `mode` (light/dark); carry that over as an explicit
  *  preference so the choice survives. Shared by the store's `migrate` and the
  *  pre-hydration {@link applyPersistedTheme}. */
-function preferenceFromState(
-  s: { mode?: string; preference?: string } | null | undefined,
-): ThemePreference {
+function preferenceFromState(s: { mode?: string; preference?: string } | null | undefined): ThemePreference {
   if (s?.preference === "light" || s?.preference === "dark" || s?.preference === "system") {
     return s.preference;
   }
@@ -112,9 +110,7 @@ export function createThemeStore(storageKey: string) {
           // Only the preference is persisted; `mode` is derived on load.
           partialize: (s) => ({ preference: s.preference }),
           migrate: (persistedState): { preference: ThemePreference } => ({
-            preference: preferenceFromState(
-              persistedState as { mode?: string; preference?: string } | null,
-            ),
+            preference: preferenceFromState(persistedState as { mode?: string; preference?: string } | null),
           }),
           onRehydrateStorage: () => (state) => {
             // The persisted preference decides the concrete mode at load.

package/src/tour/tour-catalogue.tsx

@@ -220,14 +220,16 @@ export function TourCatalogue({
   const done = (tour: TourInfo) => isTourDone(tour, completed[tour.id]);
   const needle = foldForSearch(query.trim(), locale);
   const matchesQuery = (tour: TourInfo) =>
-    !needle || [tour.title, tour.description, tour.about].some((text) => !!text && foldForSearch(text, locale).includes(needle));
+    !needle ||
+    [tour.title, tour.description, tour.about].some((text) => !!text && foldForSearch(text, locale).includes(needle));
   const inState = (tour: TourInfo) => (state === "all" ? true : state === "done" ? done(tour) : !done(tour));
   const inGroup = (tour: TourInfo, id: string | null = group) => id === null || tour.group === id;
 
   const found = listed.filter((t) => matchesQuery(t) && inGroup(t));
   const foundDone = found.filter(done).length;
   const visible = found.filter(inState);
-  const groupCount = (id: string | null) => listed.filter((t) => matchesQuery(t) && inState(t) && inGroup(t, id)).length;
+  const groupCount = (id: string | null) =>
+    listed.filter((t) => matchesQuery(t) && inState(t) && inGroup(t, id)).length;
   const filtering = needle.length > 0 || state !== "all" || group !== null;
   const sections = groups
     .map((g) => ({ ...g, tours: visible.filter((t) => t.group === g.id) }))

package/src/tour/tour-dock.ts

@@ -89,7 +89,11 @@ export function dockStyle(edge: DockEdge, spot: DockRect | null, band: Band): CS
     maxHeight: cap,
   };
   if (edge === "top") {
-    return { ...base, top: band.top <= 0 ? `max(${GUTTER}px, env(safe-area-inset-top))` : band.top + GUTTER, bottom: "auto" };
+    return {
+      ...base,
+      top: band.top <= 0 ? `max(${GUTTER}px, env(safe-area-inset-top))` : band.top + GUTTER,
+      bottom: "auto",
+    };
   }
   const fromBottom = vh - band.bottom;
   return {

package/src/tour/tour-engine.ts

@@ -12,10 +12,7 @@ export function liveEngine<T extends object>(
 ): { engine: T; set: (current: T) => void } {
   let current = initial;
   const read = () => {
-    if (!current)
-      throw new Error(
-        "[ui-kit] The tour engine was read before its provider rendered.",
-      );
+    if (!current) throw new Error("[ui-kit] The tour engine was read before its provider rendered.");
     return current;
   };
   const engine = {} as T;
@@ -26,8 +23,7 @@ export function liveEngine<T extends object>(
         const value = read()[key];
         // A method is looked up when it is CALLED, so a kept `engine.stop` is the latest too.
         return typeof value === "function"
-          ? (...args: unknown[]) =>
-              (read()[key] as (...a: unknown[]) => unknown)(...args)
+          ? (...args: unknown[]) => (read()[key] as (...a: unknown[]) => unknown)(...args)
           : value;
       },
     });

package/src/tour/tour.tsx

@@ -597,7 +597,8 @@ export function TourProvider({
       }
       // The step awaiting it, or the first later one: the record is saved, so the fields
       // between are passed over.
-      const awaiting = s[i]?.awaitGate === signal.key ? i : s.findIndex((st, k) => k > i && st.awaitGate === signal.key);
+      const awaiting =
+        s[i]?.awaitGate === signal.key ? i : s.findIndex((st, k) => k > i && st.awaitGate === signal.key);
       if (awaiting < 0) return;
       const to = forward(s, awaiting + 1, "next");
       if (to < 0) finish();
@@ -681,7 +682,8 @@ function resolveAt(steps: TourStep[], at: TourAt): number {
   const anchor = `data-tour="${at}"`;
   const found = steps.findIndex((step) => step.target?.includes(anchor));
   if (found >= 0) return found;
-  if (devWarnings()) console.warn(`[ui-kit] A tour was started at "${at}", but no step targets [${anchor}]: it starts at 0.`);
+  if (devWarnings())
+    console.warn(`[ui-kit] A tour was started at "${at}", but no step targets [${anchor}]: it starts at 0.`);
   return 0;
 }
 
@@ -778,7 +780,7 @@ function spotRectOf(el: Element, step: TourStep): Rect {
   let bottom = own.top + own.height;
   const reach = (step.padding ?? 8) + RING_BAND;
   // Grow until nothing more is in reach: a hint under the field, then an error under it.
-  for (let grew = true; grew; ) {
+  for (let grew = true; grew;) {
     grew = false;
     for (let i = lines.length - 1; i >= 0; i--) {
       const r = lines[i];
@@ -1119,7 +1121,7 @@ function TourOverlay({
     if (!ready || !step.optional || step.gate || !devWarnings()) return;
     console.warn(
       `[ui-kit] Tour step "${step.title}" is \`optional\` without a \`gate\`: it shows the Optional chip ` +
-        "and a plain Next. \"Leave empty\" needs a gate to compare.",
+        'and a plain Next. "Leave empty" needs a gate to compare.',
     );
   }, [ready, step]);
 
@@ -1302,7 +1304,12 @@ function TourOverlay({
       // On an interactive step a key pressed in the target, or in a layer it opened (the
       // number pad's Escape, a menu's arrows), is the page's. The card's and the bare
       // page's (focus on <body>) stay the tour's.
-      if (interactive && e.target instanceof Node && e.target !== document.body && !rootRef.current?.contains(e.target)) {
+      if (
+        interactive &&
+        e.target instanceof Node &&
+        e.target !== document.body &&
+        !rootRef.current?.contains(e.target)
+      ) {
         return;
       }
       // Escape is the tour's Escape layer's (above) once the step is shown; while it is
@@ -1479,7 +1486,11 @@ function SpotlightShields({ spot }: { spot: Rect }) {
   const bottom = spot.top + spot.height;
   return (
     <>
-      <div data-tour-shield="" className={shield} style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }} />
+      <div
+        data-tour-shield=""
+        className={shield}
+        style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }}
+      />
       <div data-tour-shield="" className={shield} style={{ top: bottom, left: 0, right: 0, bottom: 0 }} />
       <div
         data-tour-shield=""
@@ -1688,7 +1699,16 @@ function TourCard({
     }
     setEdge(null);
     setStyle(
-      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir),
+      placeCard(
+        rect,
+        card.offsetWidth,
+        card.offsetHeight,
+        window.innerWidth,
+        window.innerHeight,
+        12,
+        step.placement,
+        dir,
+      ),
     );
   }, [ref, rect, index, step.placement, step.target, dir, docked, bandTick]);
 
@@ -1728,11 +1748,7 @@ function TourCard({
       {step.action && <div className="mt-3">{step.action}</div>}
       <div className="mt-4 space-y-2">
         <div className="flex items-center justify-between gap-2">
-          <button
-            type="button"
-            onClick={onSkip}
-            className="text-xs text-placeholder hover:text-secondary"
-          >
+          <button type="button" onClick={onSkip} className="text-xs text-placeholder hover:text-secondary">
             {labels.skip}
           </button>
           <div className="flex items-center gap-2">

package/src/tour/use-tour-progress.ts

@@ -197,7 +197,10 @@ function fromRecord(value: unknown): TourCompletions | undefined {
  * The record, and whether the text was READ (empty, the kit's shape, or a shape `migrate`
  * knows) rather than dropped: a write over an unread text would lose it (B-1).
  */
-function parse(raw: string | null, migrate: UseTourProgressOptions["migrate"]): { value: TourCompletions; readable: boolean } {
+function parse(
+  raw: string | null,
+  migrate: UseTourProgressOptions["migrate"],
+): { value: TourCompletions; readable: boolean } {
   if (raw === null || raw.trim() === "") return { value: EMPTY, readable: true };
   let value: unknown = raw;
   try {
@@ -294,7 +297,10 @@ function devWarn(message: string) {
  * Remember `account` for `key` if it is the first one, and return the key's account.
  * @internal Not part of the barrel; `TourProvider` registers its `progress` with it.
  */
-export function rememberAccount(key: string, account: TourProgressAccount | undefined): TourProgressAccount | undefined {
+export function rememberAccount(
+  key: string,
+  account: TourProgressAccount | undefined,
+): TourProgressAccount | undefined {
   if (account && !accounts.has(key)) {
     accounts.set(key, account);
     if (account.adopt && account.adopt.storageKey === key) {

package/src/tour/use-tour-url-sync.ts

@@ -58,7 +58,9 @@ function navigationInFlight(history: Navigator | undefined, dataRouter: DataRout
   const live = state?.location ?? (history as (Navigator & { location?: Partial<Place> }) | undefined)?.location;
   if (!live) return false;
   return (
-    live.pathname !== rendered.pathname || (live.search ?? "") !== rendered.search || (live.hash ?? "") !== rendered.hash
+    live.pathname !== rendered.pathname ||
+    (live.search ?? "") !== rendered.search ||
+    (live.hash ?? "") !== rendered.hash
   );
 }
 

package/src/vite-env.d.ts

@@ -19,8 +19,5 @@ interface ImportMeta {
    * prop, which is the kind of guard the consumer app writes with `readFileSync`
    * and cannot be written that way here.
    */
-  glob<T = unknown>(
-    pattern: string,
-    options?: { query?: string; import?: string; eager?: boolean },
-  ): Record<string, T>;
+  glob<T = unknown>(pattern: string, options?: { query?: string; import?: string; eager?: boolean }): Record<string, T>;
 }

package/src/wizard/stepper-nav.tsx

@@ -226,14 +226,8 @@ export function StepperNav<TData extends Record<string, unknown>>({
     <div className={cn("flex flex-col gap-6", className)}>
       {(title || description) && (
         <div>
-          {title && (
-            <h1 className="text-2xl font-bold tracking-tight text-primary">
-              {title}
-            </h1>
-          )}
-          {description && (
-            <p className="mt-1 text-sm text-muted">{description}</p>
-          )}
+          {title && <h1 className="text-2xl font-bold tracking-tight text-primary">{title}</h1>}
+          {description && <p className="mt-1 text-sm text-muted">{description}</p>}
         </div>
       )}
 
@@ -262,14 +256,10 @@ export function StepperNav<TData extends Record<string, unknown>>({
                   <span
                     className={cn(
                       "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors",
-                      status === "completed" &&
-                        "border-brand bg-brand text-brand-contrast",
-                      status === "active" &&
-                        "border-brand bg-surface text-brand",
-                      status === "upcoming" &&
-                        "border-subtle bg-surface text-placeholder",
-                      status === "skipped" &&
-                        "border-subtle bg-surface-2 text-muted",
+                      status === "completed" && "border-brand bg-brand text-brand-contrast",
+                      status === "active" && "border-brand bg-surface text-brand",
+                      status === "upcoming" && "border-subtle bg-surface text-placeholder",
+                      status === "skipped" && "border-subtle bg-surface-2 text-muted",
                     )}
                   >
                     {status === "completed" ? <Check className="size-4" /> : index + 1}
@@ -278,9 +268,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
                   <span
                     className={cn(
                       "hidden text-xs font-medium md:block",
-                      status === "active" || status === "completed"
-                        ? "text-primary"
-                        : "text-muted",
+                      status === "active" || status === "completed" ? "text-primary" : "text-muted",
                     )}
                   >
                     {step.label}
@@ -290,10 +278,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
                 {/* Connector line */}
                 {!isLast && (
                   <div
-                    className={cn(
-                      "mx-2 h-0.5 flex-1",
-                      status === "completed" ? "bg-brand" : "bg-[var(--border)]",
-                    )}
+                    className={cn("mx-2 h-0.5 flex-1", status === "completed" ? "bg-brand" : "bg-[var(--border)]")}
                   />
                 )}
               </li>
@@ -317,13 +302,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
 
       {/* Submit error */}
       {wizard.error && (
-        <div
-          role="alert"
-          className={cn(
-            "text-sm text-danger",
-            alertFrameClass("danger"),
-          )}
-        >
+        <div role="alert" className={cn("text-sm text-danger", alertFrameClass("danger"))}>
           {wizard.error}
         </div>
       )}
@@ -347,11 +326,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
             </Button>
           )}
           {wizard.currentStep.optional && !wizard.isLastStep && !wizard.isCommitStep && (
-            <Button
-              variant="ghost"
-              onClick={wizard.skip}
-              disabled={wizard.nextBlocked || wizard.isValidating}
-            >
+            <Button variant="ghost" onClick={wizard.skip} disabled={wizard.nextBlocked || wizard.isValidating}>
               {l.skip}
             </Button>
           )}

package/src/wizard/types.ts

@@ -119,7 +119,6 @@ export interface UseWizardOptions<TData extends Record<string, unknown>> {
 
 export type StepStatus = "upcoming" | "active" | "completed" | "skipped";
 
-
 /** What `finish` resolves to at run time (0.50): whether the commit went through, and the
  *  error's message when `onComplete` threw. `undefined` when there was nothing to run. */
 export interface WizardFinishResult {
@@ -168,9 +167,7 @@ export interface UseWizardReturn<TData extends Record<string, unknown>> {
   /** Leave after the post-commit steps: drops the URL param, then calls `onDone`. */
   done: () => void;
   /** Register a validator for the mounted step (used by useRhfWizardStep). */
-  registerStepValidate: (
-    fn: () => ValidateResult | Promise<ValidateResult>,
-  ) => () => void;
+  registerStepValidate: (fn: () => ValidateResult | Promise<ValidateResult>) => () => void;
   /** True when the mounted step has blocked forward navigation (Next/Skip disabled). */
   nextBlocked: boolean;
   /** Set by the active step (via useWizardNextGate) to disable/enable Next+Skip. */