@adecore/ui 0.38.0 → 0.40.0

package/src/Toasts.tsx

@@ -27,14 +27,12 @@ const TONE = {
 /* The box is as tall as the title's own line, so what sits beside the title centers on that line. */
 const TITLE_LINE = 'flex h-(--text-sm--line-height) shrink-0 items-center';
 
-/*
- * How long the offer in a toast still stands, drawn from the timer that takes the toast away: the
- * ring starts as far along as that timer already is, so both end together. With motion off it stays full.
- */
+/* Starts as far along as the timer that takes the toast away, so both end together. With motion off it stays full. */
 function TimerRing({ deadline, onDismiss }: { deadline: ToastDeadline; onDismiss(): void }) {
     const { t } = useTranslation('ui');
     const lifetime = deadline.end - deadline.start;
     const [elapsed] = useState(() => elapsedOf(deadline, Date.now()));
+
     return (
         <IconButton size="xs" label={t('action.dismiss')} className="group/ring relative -my-px" onClick={onDismiss}>
             <svg width={16} height={16} viewBox="0 0 16 16" className="-rotate-90" aria-hidden>
@@ -74,6 +72,7 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
     const actions = [...(toast.action === undefined ? [] : [toast.action]), ...(toast.actions ?? [])];
     // An offer that runs out shows how long it has left instead.
     const countdown = actions.length > 0 ? toast.deadline : undefined;
+
     return (
         <Surface className="group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3">
             <span className={clsx(TITLE_LINE, 'w-4 justify-center')}>
@@ -85,8 +84,7 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
             </span>
             <div className="flex min-w-0 grow flex-col gap-1">
                 <span className="text-sm break-words text-text">{toast.title}</span>
-                {/* Wraps rather than clips: the line under the title is the one that says what went
-                   wrong, and a reason cut off at the card's edge is no reason at all. */}
+                {/* Wraps rather than clips: a reason cut off at the card's edge is no reason at all. */}
                 {toast.description !== undefined && toast.description !== '' && (
                     <span className="text-xs break-words text-pretty text-text-muted">{toast.description}</span>
                 )}
@@ -122,20 +120,18 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
 
 export interface ToastsProps<T extends Toast> {
     store: ToastStoreHook<T>;
-    /* Drawn under the description, for what only the app knows how to offer, such as copying a command's output. */
+
+    /* Drawn under the description. */
     footer?: (toast: T) => ReactNode;
+
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-/*
- * Bottom right, over everything: what an action is doing while it runs and how it went when it is
- * over, and a deletion that can still be taken back. A success takes itself away after four seconds,
- * a deletion after eight, and a failure waits to be read.
- */
 export function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>) {
     // Through `useStore`: the compiler takes a call of the prop itself for a plain function and would skip it on a later draw.
     const toasts = useStore(store, (state) => state.toasts);
+
     // Stays mounted with nothing in it: a screen reader skips what a live region says the moment it is inserted.
     return (
         <div

package/src/Tooltip.tsx

@@ -19,28 +19,33 @@ export interface TooltipProps {
     label: ReactNode;
     open?: boolean;
     onOpenChange?(open: boolean): void;
+
     /* A virtual anchor positions a controlled hint over canvas content without adding an input target. */
     anchor?: ComponentProps<typeof BaseTooltip.Positioner>['anchor'];
+
     /* A shortcut, or a short phrase about a key that is not one ("Shift skips the cache"). */
     kbd?: Shortcut | string;
+
     side?: TooltipSide;
     sideOffset?: number;
-    /* Makes the label the accessible name of the trigger as well: what an icon-only button needs,
-       and the way to keep the name and the tooltip from ever saying two different things. */
+
+    /* Makes the label the accessible name of the trigger as well, so the name and the tooltip never say two different things. */
     name?: boolean;
-    /* Keeps the hint closed, for a trigger that only needs one some of the time. */
+
     disabled?: boolean;
-    /* The trigger element. Its own children and handlers are kept; Base UI merges the tooltip props in. */
+
+    /* Its own children and handlers are kept; Base UI merges the tooltip props in. */
     children?: ReactElement<Record<string, unknown>>;
 }
 
-/* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
+/* Every hint in an app is one of these, never a `title`. */
 export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
     const hintRef = (element: HTMLElement | null) => {
         if (element === null || kbd === undefined || typeof kbd === 'string') {
             return undefined;
         }
+
         return registerShortcutHint(element, kbd);
     };
 

package/src/UIProvider.tsx

@@ -7,27 +7,27 @@ import { startInputModality } from './modality.ts';
 import { TooltipProvider } from './Tooltip.tsx';
 
 export interface UIProviderProps {
-    /* The app's i18next instance. The library's `ui` namespace is added to it, in every language it ships. */
+    /* The library's `ui` namespace is added to it, in every language it ships. */
     i18n: I18n;
-    /* Where the formatters read the language and the region a person set. Without one they write English in the region of that language. */
+
+    /* Without one the formatters write English in the region of that language. */
     formatSource?: FormatSource;
+
     children: ReactNode;
 }
 
-/*
- * Everything the library needs from an app, once, around the whole tree: its words in the app's
- * i18next, the source of the formatters, the shared tooltip delay and the note of which input device
- * is in use. Mount it above the first component of the library.
- */
 export function UIProvider({ i18n, formatSource, children }: UIProviderProps) {
     const [handed, setHanded] = useState<{ i18n: I18n | null; source: FormatSource | undefined }>({ i18n: null, source: undefined });
+
     // In render and not in an effect, so the first child already reads the words and the region.
     // Both calls only store what they are handed, so a render React throws away leaves nothing wrong behind.
     if (handed.i18n !== i18n || handed.source !== formatSource) {
         addUiResources(i18n);
+
         if (formatSource !== undefined) {
             setFormatSource(formatSource);
         }
+
         setHanded({ i18n, source: formatSource });
     }
 

package/src/Waveform.tsx

@@ -7,6 +7,7 @@ import { useMeasuredWidth } from './useMeasuredWidth.ts';
 
 /* About one bar per 3px, each 2px wide; a bar sits at its own time, so it lines up with the marks and the playhead. */
 const BAR_PITCH = 3;
+
 const BAR_WIDTH = 2;
 
 /* The height of a silent bar, so silence still reads as a line. */
@@ -20,50 +21,62 @@ const barsOf = (levels: readonly number[], duration: number, from: number, to: n
     if (count <= 0 || levels.length === 0 || duration <= 0 || to <= from) {
         return [];
     }
+
     const perSecond = levels.length / duration;
+
     return Array.from({ length: count }, (_, i) => {
         const start = from + ((to - from) * i) / count;
         const end = from + ((to - from) * (i + 1)) / count;
+
         if (end <= 0 || start >= duration) {
             return null;
         }
+
         const first = Math.max(0, Math.floor(start * perSecond));
         const last = Math.min(levels.length - 1, Math.max(first, Math.ceil(end * perSecond) - 1));
         let level = 0;
+
         for (let index = first; index <= last; index++) {
             level = Math.max(level, levels[index] ?? 0);
         }
+
         return Math.min(1, Math.max(SILENCE, level));
     });
 };
 
 export interface WaveformProps {
-    /* The loudness as samples spread evenly over the duration, from 0 for silence to 1 for the loudest, at any rate. */
+    /* Samples spread evenly over the duration, from 0 for silence to 1 for the loudest, at any rate. */
     levels: readonly number[];
-    /* In seconds. */
+
+    /* In seconds, as are all times here. */
     duration: number;
-    /* The stretch it shows, in seconds, such as the visible part of a zoomed timeline. Defaults to the whole. */
+
+    /* Defaults to the whole. */
     range?: readonly [from: number, to: number];
-    /* How far it has played, in seconds. Left out, the waveform draws no playhead. */
+
+    /* Left out, the waveform draws no playhead. */
     value?: number;
-    /* Seeks to a time in seconds. Without it the waveform only shows. */
+
+    /* Without it the waveform only shows. */
     onValueChange?(value: number): void;
-    /* The time a drag lets go at, and the one a key moved to: where a player resumes what it held during the drag. */
+
+    /* Where a drag lets go and where a key moved to. */
     onValueCommitted?(value: number): void;
-    /* How far an arrow key moves the playhead, in seconds. */
+
     step?: number;
-    /* Hears a key before the waveform does. A key it calls `preventDefault` on, the waveform leaves alone and lets
-       bubble, for a player around it that binds the key to something else. */
+
+    /* Runs first; a key it calls `preventDefault` on, the waveform leaves alone and lets bubble. */
     onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
-    /* Times in seconds drawn as lines through the waveform, such as cuts. */
+
     marks?: readonly number[];
     label: string;
+
     /* Its height, which the waveform fills. */
     className?: string;
+
     ref?: Ref<HTMLDivElement>;
 }
 
-/* The loudness of a piece of audio over time, played up to the playhead, where a press or a drag seeks. */
 export function Waveform({
     levels,
     duration,
@@ -88,11 +101,18 @@ export function Waveform({
     const bars = barsOf(levels, duration, from, to, count);
 
     const positionOf = (time: number): number => (span > 0 ? (time - from) / span : 0);
-    const inView = (time: number): boolean => positionOf(time) >= 0 && positionOf(time) <= 1;
+
+    const inView = (time: number): boolean => {
+        const position = positionOf(time);
+
+        return position >= 0 && position <= 1;
+    };
+
     const clamp = (time: number): number => Math.min(duration, Math.max(0, time));
 
     const seekAt = (e: PointerEvent<HTMLDivElement>): void => {
         const rect = e.currentTarget.getBoundingClientRect();
+
         if (rect.width > 0) {
             dragged.current = clamp(from + ((e.clientX - rect.left) / rect.width) * span);
             onValueChange?.(dragged.current);
@@ -108,10 +128,13 @@ export function Waveform({
 
     const moveByKey = (e: KeyboardEvent<HTMLDivElement>): void => {
         onKeyDown?.(e);
+
         if (e.defaultPrevented) {
             return;
         }
+
         const at = value ?? 0;
+
         const moves: Record<string, number> = {
             ArrowLeft: at - step,
             ArrowDown: at - step,
@@ -122,10 +145,13 @@ export function Waveform({
             Home: 0,
             End: duration
         };
+
         const next = moves[e.key];
+
         if (next === undefined) {
             return;
         }
+
         // The slider owns these keys; a transport listening higher up would move the playhead a second time.
         e.preventDefault();
         e.stopPropagation();
@@ -172,7 +198,9 @@ export function Waveform({
                     if (level === null) {
                         return null;
                     }
+
                     const center = from + (span * (i + 0.5)) / count;
+
                     return (
                         <rect
                             key={i}
@@ -186,6 +214,7 @@ export function Waveform({
                 })}
                 {marks.filter(inView).map((mark) => {
                     const x = Math.round(positionOf(mark) * width) + 0.5;
+
                     return (
                         <line key={mark} x1={x} x2={x} y1={0} y2={100} strokeWidth={1} vectorEffect="non-scaling-stroke" className="stroke-accent opacity-60" />
                     );

package/src/Wipe.tsx

@@ -9,6 +9,7 @@ import { splitAt, splitForKey } from './wipe-split.ts';
 export interface WipeProps {
     /* The share of the width left of the handle, from 0 to 1. */
     value: number;
+
     onValueChange(value: number): void;
     before: ReactNode;
     after: ReactNode;
@@ -18,12 +19,7 @@ export interface WipeProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-/*
- * Two versions of one picture in one frame: `before` left of the split and `after` right of it, with a
- * handle between them a person drags or moves with the arrow keys. It fills the positioned element it
- * sits in. The handle is a line with a round knob on it, or the plain line, which is dragged anywhere
- * along its height.
- */
+/* It fills the positioned element it sits in. A plain line handle is dragged anywhere along its height. */
 export function Wipe({ value: split, onValueChange: onSplit, before, after, label, handle = 'knob', className, ref }: WipeProps) {
     const frame = useRef<HTMLDivElement>(null);
     const percent = `${split * 100}%`;
@@ -31,6 +27,7 @@ export function Wipe({ value: split, onValueChange: onSplit, before, after, labe
     function moveTo(clientX: number): void {
         const rect = frame.current?.getBoundingClientRect();
         const next = rect ? splitAt(clientX, rect) : null;
+
         if (next !== null) {
             onSplit(next);
         }
@@ -51,9 +48,11 @@ export function Wipe({ value: split, onValueChange: onSplit, before, after, labe
 
     function onKeyDown(e: KeyboardEvent<HTMLDivElement>): void {
         const next = splitForKey(split, e.key);
+
         if (next === null) {
             return;
         }
+
         // Only while the handle has the focus, so a canvas or a timeline around it never hears these keys.
         e.preventDefault();
         e.stopPropagation();

package/src/ZoomControls.tsx

@@ -13,8 +13,10 @@ import { activeZoomPreset, steppedZoom, ZOOM_PRESETS } from './zoom.ts';
 export interface ZoomSelection {
     label: string;
     shortcut?: Shortcut;
+
     /* Nothing is selected, so the row is there but says so rather than doing nothing. */
     enabled: boolean;
+
     onZoom(): void;
 }
 
@@ -30,14 +32,16 @@ export interface ZoomLabels {
 export interface ZoomControlsProps {
     /* 1 is 100%. */
     zoom: number;
+
     onZoomChange(zoom: number): void;
     onFitAll(): void;
-    /* The percentages in the menu under the readout. */
     presets?: readonly number[];
     labels?: ZoomLabels;
     shortcuts?: { zoomReset?: Shortcut; fitAll?: Shortcut };
+
     /* Left out by a surface with nothing to select. */
     selection?: ZoomSelection;
+
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -50,7 +54,6 @@ function MenuIcon({ icon }: { icon: LucideIcon }) {
     );
 }
 
-/* The zoom group of a dock: out, the readout with its presets, in, and fit everything. */
 export function ZoomControls({
     zoom,
     onZoomChange,

package/src/clipboard.ts

@@ -1,15 +1,14 @@
-/*
- * The clipboard, as the app uses it. A browser hands text over only to a document that is focused
- * and allowed, and there is nothing a person can do about a refusal, so both sides stay quiet.
- */
+/* A browser hands text over only to a focused, allowed document, and a person can do nothing about a refusal, so both sides stay quiet. */
 
-/* Resolves to whether the text got there, for a caller that tells the person; it never rejects. */
+/* Never rejects. */
 export const copyText = async (text: string): Promise<boolean> => {
     try {
         if (!navigator.clipboard) {
             return false;
         }
+
         await navigator.clipboard.writeText(text);
+
         return true;
     } catch {
         return false;

package/src/combobox/parts.tsx

@@ -12,7 +12,7 @@ import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 import type { Shortcut } from '../shortcut.ts';
 
-/* A line in the list instead of rows: nothing found, a search still running. It takes no room while it has nothing to say. */
+/* It takes no room while it has nothing to say. */
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
 
 /* The field keeps free text: Base UI's autocomplete, whose suggestions only offer text, rather than its combobox, which holds a value. */
@@ -20,14 +20,16 @@ export const ComboboxRoot = Autocomplete.Root;
 
 export type ComboboxInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'size' | 'className'> & {
     className?: string;
+
     /* The heights of `Input`. */
     size?: 'md' | 'sm';
+
     mono?: boolean;
+
     /* Drawn in front of the text. `className` then goes to the box around the icon and the input; `ref` stays on the input. */
     icon?: LucideIcon;
 };
 
-/* The field the suggestions open under, drawn as the library's `Input`. */
 export function ComboboxInput({ size = 'md', mono = false, icon, className, id, ...props }: ComboboxInputProps) {
     const field = useFieldControl();
     const small = size === 'sm';
@@ -61,9 +63,9 @@ type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementK
 
 export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
 
-/* The portal, the positioner and the menu surface of the suggestions: under the field and at least as wide as it. */
 export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ...props }: ComboboxPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+
     return (
         <Autocomplete.Portal>
             <Autocomplete.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
@@ -75,28 +77,28 @@ export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6
 
 export function ComboboxList(props: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
+
     return <Autocomplete.List aria-label={t('combobox.suggestions')} {...props} />;
 }
 
 export type ComboboxItemProps = ComponentProps<typeof Autocomplete.Item> & {
-    /* Before the label, such as a 14px icon or a file's mark. */
     icon?: ReactNode;
-    /* Beside the label and the first to give way when the row is narrow, such as the folder a file sits in. */
+
+    /* The first to give way when the row is narrow. */
     hint?: ReactNode;
-    /* A second line under the label. */
+
     description?: ReactNode;
-    /* At the end of the row, before the shortcut: a state, a count, a reference. */
+
+    /* Before the shortcut. */
     trailing?: ReactNode;
+
     shortcut?: Shortcut;
-    /* Leaves the row out: only what makes it an option (the highlight, Enter, the click) stays, for a row that lays out itself, such as lines of source. */
+
+    /* Keeps only what makes it an option, for a row that lays out itself. */
     unstyled?: boolean;
 };
 
-/*
- * One suggestion. Its children are the label. `onClick` runs for a click and for Enter on the
- * highlighted row; Base UI clicks the row for Enter, so a modifier held with Enter is read in the
- * field's `onKeyDown` instead.
- */
+/* Base UI clicks the row for Enter, so a modifier held with Enter is read in the field's `onKeyDown` instead. */
 export function ComboboxItem({ icon, hint, description, trailing, shortcut, unstyled = false, className, children, ...props }: ComboboxItemProps) {
     if (unstyled) {
         return (
@@ -105,7 +107,9 @@ export function ComboboxItem({ icon, hint, description, trailing, shortcut, unst
             </Autocomplete.Item>
         );
     }
+
     const label = <span className="min-w-0 truncate">{children}</span>;
+
     return (
         <Autocomplete.Item className={withClass(clsx('menu-item', description !== undefined && 'items-start'), className)} {...props}>
             {icon !== undefined && <span className="flex h-lh shrink-0 items-center text-text-faint">{icon}</span>}
@@ -141,7 +145,7 @@ export function ComboboxEmpty({ className, ...props }: ComponentProps<typeof Aut
     return <Autocomplete.Empty className={withClass(LIST_NOTE, className)} {...props} />;
 }
 
-/* A line read out as it changes, such as a search that is still running or how many it found. It stays mounted; only its children come and go. */
+/* Read out as it changes. It stays mounted; only its children come and go. */
 export function ComboboxStatus({ className, ...props }: ComponentProps<typeof Autocomplete.Status>) {
     return <Autocomplete.Status className={withClass(LIST_NOTE, className)} {...props} />;
 }

package/src/command-palette/context.ts

@@ -3,8 +3,10 @@ import { createContext, useContext, type RefObject } from 'react';
 interface PaletteRefs {
     /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
     input: RefObject<HTMLInputElement | null>;
+
     /* For the root to scroll back to the top when the app sets the query. */
     list: RefObject<HTMLDivElement | null>;
+
     highlight(row: Element): void;
     virtualScroll: RefObject<((index: number, reason: string) => void) | null>;
 }

package/src/command-palette/index.parts.ts

@@ -7,6 +7,7 @@ export {
     ComboboxItem as Item,
     ComboboxStatus as Status
 } from '../combobox/parts.tsx';
+
 export {
     CommandPaletteFooter as Footer,
     CommandPaletteInput as Input,

package/src/command-palette/parts.tsx

@@ -33,11 +33,7 @@ type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen
 
 export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
 
-/*
- * A dialog around a list that is always open. `open` and its handlers are the dialog's; the rest
- * is Base UI's autocomplete, so the query, the items and their filter work as in a combobox. The
- * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
- */
+/* `open` and its handlers are the dialog's; the rest is Base UI's autocomplete. The first row stays highlighted while the pointer leaves the list, which is what Enter runs. */
 export function CommandPaletteRoot<ItemValue>({
     open,
     defaultOpen,
@@ -59,8 +55,7 @@ export function CommandPaletteRoot<ItemValue>({
     const [focusHighlight, setFocusHighlight] = useState(false);
     /*
      * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
-     * the list is empty for one commit that is never painted: Base UI drops the highlight then and
-     * puts it on the first row of what comes back.
+     * the list is empty for one unpainted commit, so Base UI highlights the first row of what comes back.
      */
     const [settledValue, setSettledValue] = useState(value);
     const resetting = value !== undefined && value !== settledValue;
@@ -69,9 +64,11 @@ export function CommandPaletteRoot<ItemValue>({
         if (!resetting) {
             return;
         }
+
         if (listRef.current !== null) {
             listRef.current.scrollTop = 0;
         }
+
         // The rows may come back only after Base UI has seen the empty list in a commit of its own.
         // oxlint-disable-next-line react/set-state-in-effect
         setSettledValue(value);
@@ -81,11 +78,13 @@ export function CommandPaletteRoot<ItemValue>({
         if (row.hasAttribute('data-highlighted')) {
             return;
         }
+
         // Base UI has no imperative highlight action and disables highlighting on item focus.
         // Enable pointer navigation just for this event when the app has disabled hover highlighting.
         if (!highlightItemOnHover) {
             flushSync(() => setFocusHighlight(true));
         }
+
         try {
             row.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, movementX: 1 }));
         } finally {
@@ -106,6 +105,7 @@ export function CommandPaletteRoot<ItemValue>({
                         if (details.reason === 'input-change') {
                             setSettledValue(next);
                         }
+
                         onValueChange?.(next, details);
                     }}
                     items={(resetting ? NO_ITEMS : items) as readonly ItemValue[] | undefined}
@@ -113,6 +113,7 @@ export function CommandPaletteRoot<ItemValue>({
                         if (item !== undefined && virtualScroll.current !== null) {
                             queueMicrotask(() => virtualScroll.current?.(details.index, details.reason));
                         }
+
                         onItemHighlighted?.(item, details);
                     }}
                     inline
@@ -132,13 +133,11 @@ export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
     size?: keyof typeof SIZE;
 };
 
-/*
- * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
- * changes height with every key, and a centered popup would walk up and down the screen.
- */
+/* It hangs from a fixed line near the top: the list changes height with every key, and a centered popup would walk up and down. */
 export function CommandPalettePopup({ size = 'md', initialFocus, className, ...props }: CommandPalettePopupProps) {
     const { t } = useTranslation('ui');
     const refs = useContext(PaletteRefsContext);
+
     return (
         <DialogPopup
             aria-label={t('palette.label')}
@@ -152,19 +151,24 @@ export function CommandPalettePopup({ size = 'md', initialFocus, className, ...p
 export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'className'> & {
     /* In front of the text instead of the magnifier: the mark of a mode, a button back. */
     leading?: ReactNode;
+
     /* After the text, before the Escape hint: toggles of a search, a button that uses the text. */
     trailing?: ReactNode;
+
     /* The Escape key at the end of the field. Off where Escape does something else first. */
     escapeHint?: boolean;
+
     /* A pattern or a path read back letter by letter. */
     mono?: boolean;
+
     /* Goes to the row around the field; `ref` stays on the input. */
     className?: string;
 };
 
-/* The field across the top. It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
+/* It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
 export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono = false, className, ref, ...props }: CommandPaletteInputProps) {
     const refs = useContext(PaletteRefsContext);
+
     return (
         <div className={clsx('relative flex shrink-0 items-center gap-2 border-b border-border px-3', className)}>
             {leading ?? <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />}
@@ -180,10 +184,11 @@ export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono
     );
 }
 
-/* The rows. It scrolls on its own, so the field and the footer stay put. */
+/* It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList({ className, ref, onFocus, ...props }: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
     const refs = useContext(PaletteRefsContext);
+
     return (
         <Autocomplete.List
             ref={mergeRefs(ref, refs?.list)}
@@ -193,9 +198,11 @@ export function CommandPaletteList({ className, ref, onFocus, ...props }: Compon
             onFocus={(event) => {
                 onFocus?.(event);
                 const row = event.target.closest('[role="option"]');
+
                 if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
                     return;
                 }
+
                 refs.highlight(row);
                 refs.input.current.focus({ preventScroll: true });
             }}
@@ -205,7 +212,6 @@ export function CommandPaletteList({ className, ref, onFocus, ...props }: Compon
 
 export type CommandPaletteFooterProps = useRender.ComponentProps<'div'>;
 
-/* Under the list: the keys that work here, a count, an action that leaves the palette. */
 export function CommandPaletteFooter({ render, className, ref, ...props }: CommandPaletteFooterProps) {
     return useRender({
         render,