@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/rhf/fields.tsx

@@ -286,7 +286,19 @@ export function RhfField<
 
 type OwnInputProps = Omit<
   InputProps,
-  "name" | "value" | "defaultValue" | "onChange" | "onBlur" | "ref" | "label" | "error" | "invalid" | "className" | "disabled" | "required" | "inputClassName"
+  | "name"
+  | "value"
+  | "defaultValue"
+  | "onChange"
+  | "onBlur"
+  | "ref"
+  | "label"
+  | "error"
+  | "invalid"
+  | "className"
+  | "disabled"
+  | "required"
+  | "inputClassName"
 > & {
   /**
    * Classes for the `<input>` — `className` is the item's box (kastlan 42: a
@@ -344,7 +356,18 @@ export function RhfTextField<
 
 type OwnTextareaProps = Omit<
   TextareaProps,
-  "name" | "value" | "defaultValue" | "onChange" | "onBlur" | "ref" | "label" | "error" | "invalid" | "className" | "disabled" | "required"
+  | "name"
+  | "value"
+  | "defaultValue"
+  | "onChange"
+  | "onBlur"
+  | "ref"
+  | "label"
+  | "error"
+  | "invalid"
+  | "className"
+  | "disabled"
+  | "required"
 > & {
   /** Classes for the `<textarea>`. */
   inputClassName?: string;
@@ -420,8 +443,23 @@ function toNumber(value: unknown, mark: "," | "."): number | null {
  *  label, the hint, the item's `className`). Everything else of the field's passes
  *  through (DUP-9, refactor audit 2026-10: a `Pick` allow-list dropped what the field
  *  gained without a word). */
-type BoundByForm = "value" | "defaultValue" | "onChange" | "onBlur" | "ref" | "name" | "disabled" | "required"
-  | "invalid" | "error" | "label" | "hint" | "className" | "aria-describedby" | "aria-invalid" | "aria-required";
+type BoundByForm =
+  | "value"
+  | "defaultValue"
+  | "onChange"
+  | "onBlur"
+  | "ref"
+  | "name"
+  | "disabled"
+  | "required"
+  | "invalid"
+  | "error"
+  | "label"
+  | "hint"
+  | "className"
+  | "aria-describedby"
+  | "aria-invalid"
+  | "aria-required";
 
 export type RhfNumberFieldProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -1009,12 +1047,7 @@ function RangeBody({
       {messages.map((message, i) => (
         // FormMessage's look and its rule: no `role="alert"` — read when focus reaches
         // the trigger, which names these in its description.
-        <p
-          key={message}
-          id={messageIds[i]}
-          data-slot="form-message"
-          className="text-caption leading-tight text-danger"
-        >
+        <p key={message} id={messageIds[i]} data-slot="form-message" className="text-caption leading-tight text-danger">
           {message}
         </p>
       ))}
@@ -1565,13 +1598,14 @@ export type RhfCheckboxProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TTransformed = TFieldValues,
-> = // No `help` (0.36): a box has no label line — its label sits beside it, inside the
+> =
+  // No `help` (0.36): a box has no label line — its label sits beside it, inside the
   // `<label>` a "?" cannot join — and Checkbox takes none.
   Omit<RhfFieldBaseProps<TFieldValues, TName, TTransformed>, "help"> &
-  // Checkbox's own — its lock (`commit`, `disabledReason`) among them, which a `Pick`
-  // list dropped until 0.34 (DUP-9) — less the box's state the form holds, and its
-  // `description`, which is the twin's `hint`.
-  Omit<CheckboxProps, BoundByForm | "checked" | "defaultChecked" | "onCheckedChange" | "description">;
+    // Checkbox's own — its lock (`commit`, `disabledReason`) among them, which a `Pick`
+    // list dropped until 0.34 (DUP-9) — less the box's state the form holds, and its
+    // `description`, which is the twin's `hint`.
+    Omit<CheckboxProps, BoundByForm | "checked" | "defaultChecked" | "onCheckedChange" | "description">;
 
 /**
  * The kit's {@link Checkbox}, label beside the box and `hint` under it (the
@@ -1652,10 +1686,7 @@ export type RhfToggleGroupProps<
   // The group's own (its `disabledReasonDisplay` was not on the `Pick` list this was
   // until 0.34, DUP-9), less what the form binds, the ids, and the label's placement:
   // the label is the form's, above.
-  Omit<
-    ToggleGroupBaseProps<T>,
-    BoundByForm | "id" | "aria-labelledby" | "labelPlacement" | "chromeClassName"
-  > & {
+  Omit<ToggleGroupBaseProps<T>, BoundByForm | "id" | "aria-labelledby" | "labelPlacement" | "chromeClassName"> & {
     /** Classes for the group itself — `className` is the item's box. */
     groupClassName?: string;
   } & RhfToggleGroupMode<T>;

package/src/rhf/form-core.tsx

@@ -164,10 +164,7 @@ export function useFormField() {
   const state = getFieldState(field.name, formState);
   const formDescriptionId = `${item.id}-description`;
   const formMessageId = `${item.id}-message`;
-  const describedBy = [
-    item.mounted.description && formDescriptionId,
-    item.mounted.message && formMessageId,
-  ]
+  const describedBy = [item.mounted.description && formDescriptionId, item.mounted.message && formMessageId]
     .filter(Boolean)
     .join(" ");
   return {
@@ -195,8 +192,7 @@ export function FormItem({ className, ...rest }: FormItemProps) {
     message: false,
   });
   const mark = useCallback(
-    (slot: Described, on: boolean) =>
-      setMounted((prev) => (prev[slot] === on ? prev : { ...prev, [slot]: on })),
+    (slot: Described, on: boolean) => setMounted((prev) => (prev[slot] === on ? prev : { ...prev, [slot]: on })),
     [],
   );
   const value = useMemo(() => ({ id, mounted, mark }), [id, mounted, mark]);

package/src/rhf/line-items.tsx

@@ -49,15 +49,13 @@ import {
 } from "../components/line-items";
 
 /** A cell's context, with the row's path in the form. */
-export interface RhfLineItemCellContext<TItem, TArrayName extends string>
-  extends LineItemCellContext<TItem> {
+export interface RhfLineItemCellContext<TItem, TArrayName extends string> extends LineItemCellContext<TItem> {
   /** The row's path: `${name}.${index}` — bind the cell's field to
    *  `` `${name}.amount` ``. */
   name: `${TArrayName}.${number}`;
 }
 
-export interface RhfLineItemsColumn<TItem, TArrayName extends string>
-  extends Omit<LineItemsColumn<TItem>, "render"> {
+export interface RhfLineItemsColumn<TItem, TArrayName extends string> extends Omit<LineItemsColumn<TItem>, "render"> {
   render: (ctx: RhfLineItemCellContext<TItem, TArrayName>) => ReactNode;
 }
 
@@ -66,9 +64,9 @@ export interface RhfLineItemsProps<
   TArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
   TTransformed = TFieldValues,
 > extends Omit<
-    LineItemsProps<FieldArrayWithId<TFieldValues, TArrayName, "id">>,
-    "items" | "columns" | "onAdd" | "onRemove" | "getKey"
-  > {
+  LineItemsProps<FieldArrayWithId<TFieldValues, TArrayName, "id">>,
+  "items" | "columns" | "onAdd" | "onRemove" | "getKey"
+> {
   name: TArrayName;
   /** `form.control`. Optional under `<Form {...form}>`. */
   control?: UseFieldArrayProps<TFieldValues, TArrayName, "id", TTransformed>["control"];

package/src/rhf/use-rhf-wizard-step.ts

@@ -45,10 +45,7 @@ import { useCallback, useEffect, useRef } from "react";
 import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
 import { useOptionalWizardContext } from "../wizard/wizard-context";
 
-export type RhfWizardStepOptions<
-  TFieldValues extends FieldValues,
-  TTransformed = TFieldValues,
-> =
+export type RhfWizardStepOptions<TFieldValues extends FieldValues, TTransformed = TFieldValues> =
   | {
       /** Validate only these fields — the step's share of a form that spans steps. */
       fields: readonly FieldPath<TFieldValues>[];
@@ -68,15 +65,9 @@ export type RhfWizardStepOptions<
  * Connects `form` to the wizard's step validation and returns the step's validator.
  * See the module note for the two modes.
  */
-export function useRhfWizardStep<
-  TFieldValues extends FieldValues,
-  TContext = unknown,
-  TTransformed = TFieldValues,
->(
+export function useRhfWizardStep<TFieldValues extends FieldValues, TContext = unknown, TTransformed = TFieldValues>(
   form: UseFormReturn<TFieldValues, TContext, TTransformed>,
-  options?:
-    | RhfWizardStepOptions<TFieldValues, TTransformed>
-    | ((values: TTransformed) => void),
+  options?: RhfWizardStepOptions<TFieldValues, TTransformed> | ((values: TTransformed) => void),
 ): () => Promise<boolean> {
   const opts = typeof options === "function" ? { onValid: options } : (options ?? {});
   const optsRef = useRef(opts);

package/src/search/command-palette.tsx

@@ -227,8 +227,7 @@ export function CommandPalette({
   // go from a German name to an English "Search" on update — so a translated
   // placeholder keeps doing the job until a `dialog` is supplied.
   const dialogName =
-    l.dialog ??
-    (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);
+    l.dialog ?? (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);
   const [ownQuery, setOwnQuery] = useState("");
   const controlled = queryProp !== undefined;
   const query = controlled ? queryProp : ownQuery;
@@ -426,9 +425,7 @@ export function CommandPalette({
         data-fullscreen={isPhone || undefined}
         className={cn(
           "flex w-full flex-col overflow-hidden bg-surface outline-none",
-          isPhone
-            ? "h-full"
-            : "max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl",
+          isPhone ? "h-full" : "max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl",
         )}
         // Full screen means edge to edge, so the notch, the home indicator and the
         // rounded corners are the panel's to keep clear of.
@@ -518,7 +515,13 @@ export function CommandPalette({
             the list markup in between is presentational so the listbox's children are
             groups and options only — as a plain <li>/<ul> tree a reader announced
             "list, 2 items" between options and never tied the heading to its rows. */}
-        <ul id={listId} ref={listRef} role="listbox" aria-label={dialogName} className="min-h-0 flex-1 overflow-y-auto py-1">
+        <ul
+          id={listId}
+          ref={listRef}
+          role="listbox"
+          aria-label={dialogName}
+          className="min-h-0 flex-1 overflow-y-auto py-1"
+        >
           {groups.map(({ group, items }, groupIndex) => (
             <li key={group} role="presentation">
               <div
@@ -540,7 +543,9 @@ export function CommandPalette({
                           comfortable ? "min-h-11 py-2.5" : "py-2",
                         )}
                       >
-                        {item.icon && <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>}
+                        {item.icon && (
+                          <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>
+                        )}
                         <span className="min-w-0 flex-1 truncate">{item.label}</span>
                       </li>
                     );
@@ -561,9 +566,7 @@ export function CommandPalette({
                     className: cn(
                       "flex w-full items-center gap-2.5 px-3 text-start",
                       comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
-                      isActive
-                        ? "bg-active text-primary"
-                        : "text-secondary",
+                      isActive ? "bg-active text-primary" : "text-secondary",
                     ),
                   };
                   const inner = (
@@ -595,14 +598,7 @@ export function CommandPalette({
                             // #451) — and the palette deliberately stays OPEN for
                             // it: ⌘-clicking three results in a row is the reason to
                             // want this, and closing after the first would undo it.
-                            if (
-                              e.button !== 0 ||
-                              e.metaKey ||
-                              e.ctrlKey ||
-                              e.shiftKey ||
-                              e.altKey
-                            )
-                              return;
+                            if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
                             e.preventDefault();
                             choose(item);
                           }}
@@ -622,11 +618,7 @@ export function CommandPalette({
           ))}
         </ul>
 
-        {l.hint && (
-          <div className="border-t border-subtle px-3 py-1.5 text-caption text-placeholder">
-            {l.hint}
-          </div>
-        )}
+        {l.hint && <div className="border-t border-subtle px-3 py-1.5 text-caption text-placeholder">{l.hint}</div>}
       </div>
     </div>,
     document.body,

package/src/search/global-search.tsx

@@ -206,9 +206,17 @@ const identity = (href: string) => href;
 function signature(entries: readonly SearchEntry[]): string {
   return entries
     .map((e) =>
-      [e.id, e.title, (e.keywords ?? []).join("\u0003"), e.description, e.group, e.hint, e.href, e.weight, e.redact].join(
-        "\u0001",
-      ),
+      [
+        e.id,
+        e.title,
+        (e.keywords ?? []).join("\u0003"),
+        e.description,
+        e.group,
+        e.hint,
+        e.href,
+        e.weight,
+        e.redact,
+      ].join("\u0001"),
     )
     .join("\u0002");
 }
@@ -217,7 +225,9 @@ function signature(entries: readonly SearchEntry[]): string {
  *  row that was clicked (and held focus) is gone. */
 function refocusField() {
   requestAnimationFrame(() => {
-    const fields = document.querySelectorAll<HTMLInputElement>('[role="dialog"][aria-modal="true"] input[role="combobox"]');
+    const fields = document.querySelectorAll<HTMLInputElement>(
+      '[role="dialog"][aria-modal="true"] input[role="combobox"]',
+    );
     fields[fields.length - 1]?.focus();
   });
 }
@@ -458,8 +468,7 @@ function GlobalSearchImpl({
 
     if (!q) {
       const out: CommandItem[] = [];
-      const groupOf = (entry: SearchEntry) =>
-        suggestionsKeepGroups ? (entry.group ?? l.suggestions) : l.suggestions;
+      const groupOf = (entry: SearchEntry) => (suggestionsKeepGroups ? (entry.group ?? l.suggestions) : l.suggestions);
       suggestionList.forEach((s, i) => {
         if (typeof s === "string") {
           const entry = byId.get(s);
@@ -532,7 +541,26 @@ function GlobalSearchImpl({
     }
 
     return ordered(out);
-  }, [q, suggestionList, suggestionsKeepGroups, byId, index, sourceList, sourceResults, order, groupLimit, toItem, l.suggestions, l.results, pl.loading, pl.error, setOpen, setQuery, noop, redactLabels]);
+  }, [
+    q,
+    suggestionList,
+    suggestionsKeepGroups,
+    byId,
+    index,
+    sourceList,
+    sourceResults,
+    order,
+    groupLimit,
+    toItem,
+    l.suggestions,
+    l.results,
+    pl.loading,
+    pl.error,
+    setOpen,
+    setQuery,
+    noop,
+    redactLabels,
+  ]);
   /* eslint-enable react-hooks/refs */
 
   // The palette re-runs its provider on a `revision` change, never on the provider's
@@ -577,7 +605,9 @@ function GlobalSearchImpl({
               >
                 <Search
                   className={triggerIconSize === undefined ? "size-4" : undefined}
-                  style={triggerIconSize === undefined ? undefined : { width: triggerIconSize, height: triggerIconSize }}
+                  style={
+                    triggerIconSize === undefined ? undefined : { width: triggerIconSize, height: triggerIconSize }
+                  }
                 />
               </button>
             </Tooltip>

package/src/search/search-index.ts

@@ -158,7 +158,11 @@ function withinDistance(a: string, b: string, max: number): boolean {
 
 type WordKind = keyof typeof WORD_SCORE;
 
-function matchWord(q: string, word: string, opts: Required<Pick<SearchIndexOptions, "typoMinLength" | "infixMinLength">>): WordKind | null {
+function matchWord(
+  q: string,
+  word: string,
+  opts: Required<Pick<SearchIndexOptions, "typoMinLength" | "infixMinLength">>,
+): WordKind | null {
   if (word === q) return "exact";
   if (word.startsWith(q)) return "prefix";
   if (q.length >= opts.infixMinLength && word.includes(q)) return "infix";

package/src/settings/device-reset-setting.tsx

@@ -41,8 +41,10 @@ export { DEFAULT_DEVICE_RESET_LABELS };
 export const DEVICE_RESET_ANCHOR = "settings-device-reset";
 
 // `onReset` is the card's own: the DOM's form-reset handler never fires on a div.
-export interface DeviceResetSettingProps
-  extends Omit<SettingsSectionProps, "anchor" | "title" | "description" | "children" | "onReset"> {
+export interface DeviceResetSettingProps extends Omit<
+  SettingsSectionProps,
+  "anchor" | "title" | "description" | "children" | "onReset"
+> {
   /** The app's sentence after the kit's description: what of its own goes back, and what
    *  stays (keksdose: the date format, the feature set and the gestures go; presentation
    *  mode and the home position stay). */
@@ -72,12 +74,7 @@ export interface DeviceResetSettingProps
  * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:
  * inside a `SettingsLayout`, `SettingsSection` throws in development without it.
  */
-export function DeviceResetSetting({
-  description,
-  labels: labelsProp,
-  onReset,
-  ...rest
-}: DeviceResetSettingProps) {
+export function DeviceResetSetting({ description, labels: labelsProp, onReset, ...rest }: DeviceResetSettingProps) {
   const labels = useKitLabels("deviceReset", DEFAULT_DEVICE_RESET_LABELS, labelsProp);
   const confirm = useConfirm();
 

package/src/settings/settings-heading.tsx

@@ -50,7 +50,9 @@ export function useSettingsHeadingLevel(): SettingsHeadingTag | null {
 export function SettingsCardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">) {
   const level = useSettingsHeadingLevel();
   if (!level) return <div {...props} className={cn(CARD_TITLE_CLASS, className)} />;
-  return <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, "outline-none", className)} />;
+  return (
+    <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, "outline-none", className)} />
+  );
 }
 
 /**

package/src/settings/settings-layout.tsx

@@ -16,12 +16,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { createSearchIndex } from "../search/search-index";
 import type { SearchEntry } from "../search/search-index";
-import {
-  normalizeSettingsBase,
-  settingsHref,
-  settingsKeywords,
-  visibleSettingsEntries,
-} from "./settings-catalogue";
+import { normalizeSettingsBase, settingsHref, settingsKeywords, visibleSettingsEntries } from "./settings-catalogue";
 import type { SettingsEntry, SettingsGroup } from "./settings-catalogue";
 import { SettingsLayoutContext } from "./settings-context";
 import type { SettingsLayoutContextValue } from "./settings-context";
@@ -337,7 +332,10 @@ export function SettingsLayout<G extends string>({
                 e.preventDefault();
                 route.back();
               }}
-              className={cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary", FOCUS_RING)}
+              className={cn(
+                "-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary",
+                FOCUS_RING,
+              )}
             >
               <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
               {pageTitle}
@@ -458,12 +456,7 @@ export function SettingsLayout<G extends string>({
             {searching ? (
               results
             ) : open ? (
-              <div
-                id={panelId}
-                role="tabpanel"
-                aria-labelledby={`${panelId}-tab`}
-                className="space-y-4"
-              >
+              <div id={panelId} role="tabpanel" aria-labelledby={`${panelId}-tab`} className="space-y-4">
                 <PageHeader as="h2" size="sm" title={open.title} description={open.help} />
                 {cards(open.id)}
               </div>

package/src/settings/use-settings-focus.ts

@@ -115,3 +115,11 @@ export function useSettingsFocus(anchor?: string | null): void {
     [],
   );
 }
+
+/**
+ * {@link useSettingsFocus} under a name for any page (0.51.4, keksdose run 89): the hook
+ * was always allowed on an app's own pages (keksdose's /reports/matching lands
+ * `?focus=matching-unmatched` on a card), but its name said Settings at every such call
+ * site. The same function, so the two cannot drift; `useSettingsFocus` stays.
+ */
+export const useFocusParam: typeof useSettingsFocus = useSettingsFocus;

package/src/settings/use-settings-route.ts

@@ -70,7 +70,9 @@ export function settingsFromListState(): Record<string, true> {
 }
 
 function isFromList(state: unknown): boolean {
-  return typeof state === "object" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true;
+  return (
+    typeof state === "object" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true
+  );
 }
 
 export interface SettingsLocation {
@@ -197,8 +199,7 @@ export function useSettingsRoute<G extends string>(options: UseSettingsRouteOpti
     return map;
   }, [entries]);
   const ids = visible.map((g) => g.id);
-  const fallback =
-    defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);
+  const fallback = defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);
 
   const { group, sub, redirect } = resolveSettingsLocation(location, {
     basePath: base,

package/src/shell/app-shell.tsx

@@ -1,4 +1,14 @@
-import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { Link, NavLink, matchPath, useHref, useLocation } from "react-router";
@@ -401,9 +411,7 @@ function useNavHeightVar(
     // the OUTERMOST shell, for what it portals to <body> (a sheet docking on the bar).
     // The DOM check backs up the context for a shell mounted in a separate React root.
     const global = !embedded && !shell?.parentElement?.closest("[data-app-shell]");
-    const targets = [shell, global ? document.documentElement : null].filter(
-      (el): el is HTMLElement => el !== null,
-    );
+    const targets = [shell, global ? document.documentElement : null].filter((el): el is HTMLElement => el !== null);
     // `getBoundingClientRect().height`, rounded DOWN — not `offsetHeight`, and not
     // ceil. Measured on the running app at 406x816: the bar is **55.5px** tall, and
     // both `offsetHeight` and `Math.ceil` answer 56. That is why live #314 round four
@@ -484,8 +492,7 @@ export function AppShell({
   useNavDevWarnings(nav);
   // An embedded shell sharing the default key would overwrite the outer app's sidebar
   // preference with its own — so it persists only when given a key of its own.
-  const collapseStorageKey =
-    collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
+  const collapseStorageKey = collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
   // The three props are per-shell overrides of the provider's `appShell`; one left
   // undefined falls through to the provider rather than to English.
   const labels = useKitLabels("appShell", DEFAULT_APP_SHELL_LABELS, {
@@ -692,10 +699,7 @@ export function AppShell({
             group's `items` were simply unreachable below `md`. ONE measured box, so
             `--app-nav-h` covers both rows and whatever docks on the bar sits on the
             whole of it. */}
-        <div
-          ref={navRef}
-          className="md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-subtle bg-surface"
-        >
+        <div ref={navRef} className="md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-subtle bg-surface">
           {mobileSubNav && <MobileSubNav nav={nav} layout={mobileSubNavLayout} />}
           <nav
             data-tour="nav"
@@ -854,9 +858,7 @@ const mobileCellClass = (active: boolean) =>
     // label on two lines never leaves its neighbours a different shape.
     "relative flex h-full w-full flex-col items-center justify-start py-2 text-caption gap-0.5 transition-colors",
     "before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors",
-    active
-      ? "font-semibold text-brand before:bg-brand"
-      : "text-muted before:bg-transparent",
+    active ? "font-semibold text-brand before:bg-brand" : "text-muted before:bg-transparent",
   );
 
 /**
@@ -939,7 +941,11 @@ function SheetLink({
           level === "entry"
             ? "flex min-h-11 items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
             : "flex min-h-11 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-          isActive ? "bg-inverse text-inverse" : level === "entry" ? "text-primary hover:bg-hover" : "text-secondary hover:bg-hover",
+          isActive
+            ? "bg-inverse text-inverse"
+            : level === "entry"
+              ? "text-primary hover:bg-hover"
+              : "text-secondary hover:bg-hover",
         )
       }
     >
@@ -1001,7 +1007,14 @@ function MobileGroupCell({
         <ul className="space-y-1">
           {!ownPageListed && (
             <li>
-              <SheetLink to={item.to} end={item.end} icon={item.icon} label={labels.overview} onClick={close} level="entry" />
+              <SheetLink
+                to={item.to}
+                end={item.end}
+                icon={item.icon}
+                label={labels.overview}
+                onClick={close}
+                level="entry"
+              />
             </li>
           )}
           {pages.map((sub) => (
@@ -1090,12 +1103,26 @@ function MobileMoreCell({
         <ul className="space-y-1">
           {hidden.map((item) => (
             <li key={item.to}>
-              <SheetLink to={item.to} end={item.end} icon={item.icon} label={item.label} onClick={close} level="entry" />
+              <SheetLink
+                to={item.to}
+                end={item.end}
+                icon={item.icon}
+                label={item.label}
+                onClick={close}
+                level="entry"
+              />
               {!!item.items?.length && (
                 <ul aria-label={item.label} className="ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2">
                   {item.items.map((sub) => (
                     <li key={sub.to}>
-                      <SheetLink to={sub.to} end={sub.end} icon={sub.icon} label={sub.label} onClick={close} level="page" />
+                      <SheetLink
+                        to={sub.to}
+                        end={sub.end}
+                        icon={sub.icon}
+                        label={sub.label}
+                        onClick={close}
+                        level="page"
+                      />
                     </li>
                   ))}
                 </ul>
@@ -1182,7 +1209,8 @@ function MobileSubNav({ nav, layout }: { nav: AppShellNavItem[]; layout: "wrap"
 
 /** `strong` is the current page; `trail` is the group that CONTAINS the current page
  *  while the page itself is shown elsewhere (the inline list below it). */
-const navLinkClass = (collapsed: boolean, forceActive: boolean, trail = false) =>
+const navLinkClass =
+  (collapsed: boolean, forceActive: boolean, trail = false) =>
   ({ isActive }: { isActive: boolean }) =>
     `flex items-center gap-3 min-h-9 ${collapsed ? "justify-center px-2" : "px-3"} py-2 rounded-md text-sm transition-colors duration-150 ${
       isActive || (forceActive && !trail)
@@ -1390,9 +1418,7 @@ function SidebarGroup({
                   className={({ isActive }) =>
                     cn(
                       "flex min-h-8 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-                      isActive
-                        ? "bg-inverse text-inverse"
-                        : "text-secondary hover:bg-hover",
+                      isActive ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover",
                     )
                   }
                 >
@@ -1528,9 +1554,7 @@ function SidebarFlyout({ item, children }: { item: AppShellNavItem; children: Re
                       className={({ isActive }) =>
                         cn(
                           "flex items-center gap-2.5 px-3 py-2 text-sm",
-                          isActive
-                            ? "bg-active font-medium text-primary"
-                            : "text-secondary hover:bg-hover",
+                          isActive ? "bg-active font-medium text-primary" : "text-secondary hover:bg-hover",
                         )
                       }
                     >

package/src/shell/auth-layout.tsx

@@ -125,12 +125,7 @@ export function AuthLayout({
           <div className="mb-2">{logo}</div>
         ))}
       {title != null && (
-        <Heading
-          className={cn(
-            "font-semibold leading-tight text-primary",
-            wide ? "text-2xl md:text-3xl" : "text-2xl",
-          )}
-        >
+        <Heading className={cn("font-semibold leading-tight text-primary", wide ? "text-2xl md:text-3xl" : "text-2xl")}>
           {title}
         </Heading>
       )}