@preset.nz/ux-kit 0.1.0 → 0.1.2

package/src/components/dropdown-menu.tsx

@@ -1,9 +1,12 @@
-import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
+// Base UI: `DropdownMenuLabel` is Base UI's `GroupLabel`, so it must sit inside a `DropdownMenuGroup`.
+// Same shape as ContextMenu.
+
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
@@ -44,7 +47,7 @@ function DropdownMenuContent({
           data-slot="dropdown-menu-content"
           className={cn(
             "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            className,
           )}
           {...props}
         />
@@ -68,7 +71,7 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
-        className
+        className,
       )}
       {...props}
     />
@@ -91,7 +94,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
+        className,
       )}
       {...props}
     />
@@ -114,7 +117,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -157,7 +160,7 @@ function DropdownMenuCheckboxItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -190,7 +193,7 @@ function DropdownMenuRadioItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -223,7 +226,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
-        className
+        className,
       )}
       {...props}
     />
@@ -232,18 +235,18 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 }

package/src/components/empty-state.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -17,7 +17,10 @@ function EmptyState({ icon, title, description, action, className, ...props }: E
   return (
     <div
       data-slot="empty-state"
-      className={cn("flex h-full flex-col items-center justify-center gap-2 p-8 text-center", className)}
+      className={cn(
+        "flex h-full flex-col items-center justify-center gap-2 p-8 text-center",
+        className,
+      )}
       {...props}
     >
       {icon ? <div className="text-muted-foreground [&_svg]:size-8">{icon}</div> : null}
@@ -28,5 +31,5 @@ function EmptyState({ icon, title, description, action, className, ...props }: E
   )
 }
 
-export { EmptyState }
 export type { EmptyStateProps }
+export { EmptyState }

package/src/components/input.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { Input as InputPrimitive } from "@base-ui/react/input"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -10,7 +10,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/label.tsx

@@ -1,14 +1,15 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: a primitive: the consumer supplies htmlFor or wraps the control
     <label
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/list.tsx

@@ -0,0 +1,205 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// List and ListRow: a set of things (models, files, recent items) built from
+// slots. Without `selection` it is a plain `role="list"` and the rows'
+// `trailing` actions are the only interactive parts (Tab walks them). With
+// `selection` it is a `role="listbox"` with roving tabindex: Up, Down, Home
+// and End move focus, Enter or Space selects. Rows must be direct children of
+// the List (the List reads their ids). A selectable list takes no `trailing`
+// controls: a button inside an option is invalid ARIA, and its click would
+// select the row too. No virtualisation, reorder or sections.
+//
+// `className` and other props go on the List's outer element; the accessible
+// name (`aria-label`, `aria-labelledby`) goes on the element with the role.
+
+interface ListSelection {
+  selectedId: string | null
+  onSelect: (id: string) => void
+}
+
+interface ListContextValue {
+  selection: ListSelection | undefined
+  tabStopId: string | undefined
+  setFocusId: (id: string) => void
+}
+
+const ListContext = React.createContext<ListContextValue>({
+  selection: undefined,
+  tabStopId: undefined,
+  setFocusId: () => {},
+})
+
+interface ListProps extends Omit<React.ComponentProps<"div">, "role" | "children"> {
+  /** Makes the list a selectable listbox. Leave undefined for a plain list. */
+  selection?: ListSelection
+  /** Shown in place of the rows when there are no children. Usually an EmptyState. */
+  empty?: React.ReactNode
+  /** After the rows. */
+  footer?: React.ReactNode
+  children?: React.ReactNode
+}
+
+function List({
+  selection,
+  empty,
+  footer,
+  className,
+  children,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: ListProps) {
+  const rows = React.Children.toArray(children)
+  const ids = rows.flatMap((row) =>
+    React.isValidElement<{ id?: string }>(row) && typeof row.props.id === "string"
+      ? [row.props.id]
+      : [],
+  )
+  const [focusId, setFocusId] = React.useState<string | undefined>(undefined)
+  const rowsRef = React.useRef<HTMLDivElement>(null)
+
+  // The one tab stop: the last focused row, else the selected one, else the first.
+  const tabStopId =
+    [focusId, selection?.selectedId ?? undefined].find(
+      (id): id is string => id !== undefined && ids.includes(id),
+    ) ?? ids[0]
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event)
+    if (!selection || event.defaultPrevented) return
+    const options = Array.from(
+      rowsRef.current?.querySelectorAll<HTMLElement>('[role="option"]') ?? [],
+    )
+    const current = options.indexOf(event.target as HTMLElement)
+    if (current === -1) return
+    let next: number
+    switch (event.key) {
+      case "ArrowDown":
+        next = Math.min(current + 1, options.length - 1)
+        break
+      case "ArrowUp":
+        next = Math.max(current - 1, 0)
+        break
+      case "Home":
+        next = 0
+        break
+      case "End":
+        next = options.length - 1
+        break
+      default:
+        return
+    }
+    event.preventDefault()
+    options[next]?.focus()
+  }
+
+  const context = React.useMemo<ListContextValue>(
+    () => ({ selection, tabStopId, setFocusId }),
+    [selection, tabStopId],
+  )
+
+  return (
+    <div data-slot="list" className={cn("flex flex-col", className)} {...props}>
+      {rows.length === 0 ? (
+        empty
+      ) : (
+        <ListContext.Provider value={context}>
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: arrow keys on the listbox are the roving-tabindex pattern, the options hold the focus */}
+          {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: the role is always list or listbox, and both take a name; Biome can't read the ternary */}
+          <div
+            ref={rowsRef}
+            role={selection ? "listbox" : "list"}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            data-slot="list-rows"
+            className="flex flex-col divide-y divide-border"
+            onKeyDown={handleKeyDown}
+          >
+            {rows}
+          </div>
+        </ListContext.Provider>
+      )}
+      {footer && rows.length > 0 ? (
+        <div
+          data-slot="list-footer"
+          className="border-t border-border px-3 py-2 text-sm text-muted-foreground"
+        >
+          {footer}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+interface ListRowProps
+  extends Omit<
+    React.ComponentProps<"div">,
+    "id" | "title" | "role" | "children" | "onClick" | "onSelect"
+  > {
+  /** Identifies the row to `selection`. Not set as the DOM id. */
+  id: string
+  /** Before the text: an icon or thumbnail. */
+  leading?: React.ReactNode
+  title: React.ReactNode
+  /** One muted line under the title. */
+  detail?: React.ReactNode
+  /** After the text: a Button, a Badge. Clickable things go here, not on the row, and only in a plain list. */
+  trailing?: React.ReactNode
+}
+
+function ListRow({ id, leading, title, detail, trailing, className, ...props }: ListRowProps) {
+  const { selection, tabStopId, setFocusId } = React.useContext(ListContext)
+  const selectable = selection !== undefined
+  const selected = selectable && selection.selectedId === id
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    props.onKeyDown?.(event)
+    // Keys from a trailing control stay with that control.
+    if (!selectable || event.defaultPrevented || event.target !== event.currentTarget) return
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      selection.onSelect(id)
+    }
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: the role is option when selectable; a plain row has no handlers that act
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-selected is set only when the role is option
+    <div
+      data-slot="list-row"
+      data-row-id={id}
+      data-selected={selected ? "" : undefined}
+      role={selectable ? "option" : "listitem"}
+      aria-selected={selectable ? selected : undefined}
+      tabIndex={selectable ? (tabStopId === id ? 0 : -1) : undefined}
+      className={cn(
+        "flex min-h-11 items-center gap-3 px-3 py-1.5 outline-none",
+        selectable &&
+          "cursor-default hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/50 data-selected:bg-accent",
+        className,
+      )}
+      {...props}
+      onKeyDown={handleKeyDown}
+      onFocus={(event) => {
+        props.onFocus?.(event)
+        if (selectable && event.target === event.currentTarget) setFocusId(id)
+      }}
+      onClick={selectable ? () => selection.onSelect(id) : undefined}
+    >
+      {leading ? (
+        <div className="shrink-0 text-muted-foreground [&_svg]:size-5">{leading}</div>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">{title}</p>
+        {detail ? <p className="truncate text-xs text-muted-foreground">{detail}</p> : null}
+      </div>
+      {trailing ? <div className="flex shrink-0 items-center gap-2">{trailing}</div> : null}
+    </div>
+  )
+}
+
+export type { ListProps, ListRowProps, ListSelection }
+export { List, ListRow }

package/src/components/navigation-menu.tsx

@@ -1,12 +1,13 @@
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
-import { cva } from "class-variance-authority"
 import { CaretDownIcon } from "@phosphor-icons/react"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
 
 // Base UI renders content through a shared Portal > Positioner > Popup >
 // Viewport. NavigationMenu bundles that, so `NavigationMenuContent` items
 // morph inside one popup like the shadcn viewport variant.
+// Always the shared-viewport form: the Radix indicator and viewport={false} mode are gone.
 function NavigationMenu({
   className,
   children,
@@ -16,7 +17,10 @@ function NavigationMenu({
   return (
     <NavigationMenuPrimitive.Root
       data-slot="navigation-menu"
-      className={cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className)}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
       {...props}
     >
       {children}
@@ -46,7 +50,7 @@ function NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Ite
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground data-popup-open:hover:bg-accent data-popup-open:focus:bg-accent"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground data-popup-open:hover:bg-accent data-popup-open:focus:bg-accent",
 )
 
 function NavigationMenuTrigger({
@@ -79,7 +83,7 @@ function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.
       data-slot="navigation-menu-content"
       className={cn(
         "w-full p-2 pr-2.5 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 md:w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -103,7 +107,7 @@ function NavigationMenuPositioner({
         alignOffset={alignOffset}
         className={cn(
           "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-200",
-          className
+          className,
         )}
         {...props}
       >
@@ -111,7 +115,10 @@ function NavigationMenuPositioner({
           data-slot="navigation-menu-popup"
           className="relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow transition-[width,height,opacity,scale] duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0"
         >
-          <NavigationMenuPrimitive.Viewport data-slot="navigation-menu-viewport" className="relative size-full overflow-hidden" />
+          <NavigationMenuPrimitive.Viewport
+            data-slot="navigation-menu-viewport"
+            className="relative size-full overflow-hidden"
+          />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
     </NavigationMenuPrimitive.Portal>
@@ -125,7 +132,7 @@ function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Lin
       data-slot="navigation-menu-link"
       className={cn(
         "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-active:bg-accent/50 data-active:text-accent-foreground data-active:hover:bg-accent data-active:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
@@ -134,11 +141,11 @@ function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Lin
 
 export {
   NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
   NavigationMenuContent,
-  NavigationMenuTrigger,
+  NavigationMenuItem,
   NavigationMenuLink,
+  NavigationMenuList,
   NavigationMenuPositioner,
+  NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 }

package/src/components/number-field.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
 import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
-
-import { cn } from "../lib/utils"
+import * as React from "react"
 import { ArrowsHorizontalIcon } from "../icons"
+import { cn } from "../lib/utils"
 
 // NumberField: a number you can drag. The label is the scrub handle (Base UI's ScrubArea);
 // click it, or tab in, to type. Behaviour is Oblique's InputNumber on Base UI's NumberField:
@@ -29,10 +28,7 @@ interface NumberChange {
 }
 
 interface NumberFieldProps
-  extends Omit<
-    React.ComponentProps<"div">,
-    "onChange" | "defaultValue" | "children" | "value"
-  > {
+  extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue" | "children" | "value"> {
   value: number
   onValueChange?: (value: number, details: NumberChange) => void
   min?: number
@@ -112,7 +108,7 @@ function NumberField({
   const digits = integer ? 0 : (precision ?? placesOf(small))
   const options = React.useMemo<Intl.NumberFormatOptions>(
     () => ({ maximumFractionDigits: digits, useGrouping: false, ...format }),
-    [digits, format]
+    [digits, format],
   )
 
   // The field's own value, so a scrub follows the pointer without waiting for the app's round
@@ -165,6 +161,7 @@ function NumberField({
     })
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the effect follows `value` alone; `show` and `clearSettle` are per-render closures over refs and state setters
   React.useEffect(() => {
     valueRef.current = value
     if (scrub.current.started) return
@@ -174,15 +171,17 @@ function NumberField({
     show(value)
   }, [value])
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: unmount cleanup only; `clearSettle` is a per-render closure over refs
   React.useEffect(
     () => () => {
       clearSettle()
       cancelAnimationFrame(pending.current.raf)
     },
-    []
+    [],
   )
 
   // Escape while scrubbing. Captured so the app's own Escape (clear selection) doesn't also run.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the listener lives while a scrub does; `show` and `dropPending` are per-render closures over refs
   React.useEffect(() => {
     if (!scrubbing || !onScrubCancel) return
     const onKey = (e: KeyboardEvent) => {
@@ -297,7 +296,10 @@ function NumberField({
     />
   )
   const unit = suffix != null && (
-    <span data-slot="number-field-suffix" className="flex shrink-0 items-center pr-2 text-muted-foreground select-none">
+    <span
+      data-slot="number-field-suffix"
+      className="flex shrink-0 items-center pr-2 text-muted-foreground select-none"
+    >
       {suffix}
     </span>
   )
@@ -322,9 +324,10 @@ function NumberField({
       className={cn(
         "min-w-0",
         !outside && `group/number-field relative ${boxClass}`,
-        labelPlacement === "column" && "col-span-2 grid grid-cols-subgrid items-center data-disabled:opacity-50",
+        labelPlacement === "column" &&
+          "col-span-2 grid grid-cols-subgrid items-center data-disabled:opacity-50",
         labelPlacement === "above" && "flex flex-col gap-1 data-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -340,8 +343,8 @@ function NumberField({
             ? "cursor-default"
             : cn(
                 "cursor-ew-resize hover:text-foreground data-scrubbing:text-foreground",
-                !outside && "hover:bg-muted data-scrubbing:bg-selection/20"
-              )
+                !outside && "hover:bg-muted data-scrubbing:bg-selection/20",
+              ),
         )}
       >
         {label}
@@ -367,10 +370,7 @@ function NumberField({
 const AXES = ["X", "Y", "Z", "W"]
 
 interface VectorFieldProps
-  extends Omit<
-    NumberFieldProps,
-    "value" | "onValueChange" | "label" | "className"
-  > {
+  extends Omit<NumberFieldProps, "value" | "onValueChange" | "label" | "className"> {
   value: number[]
   /** The whole vector with the changed component replaced. */
   onValueChange?: (value: number[], details: NumberChange) => void
@@ -393,20 +393,20 @@ function VectorField({
   return (
     <div
       data-slot="vector-field"
-      className={cn(
-        "flex min-w-0 gap-1",
-        orientation === "column" && "flex-col",
-        className
-      )}
+      className={cn("flex min-w-0 gap-1", orientation === "column" && "flex-col", className)}
     >
       {value.map((x, i) => (
         <NumberField
+          // biome-ignore lint/suspicious/noArrayIndexKey: one field per axis; the index is the axis
           key={i}
           {...props}
           label={labels?.[i] ?? (value.length <= AXES.length ? AXES[i] : String(i + 1))}
           value={x}
           onValueChange={(n, d) =>
-            onValueChange?.(value.map((v, j) => (j === i ? n : v)), d)
+            onValueChange?.(
+              value.map((v, j) => (j === i ? n : v)),
+              d,
+            )
           }
         />
       ))}
@@ -414,15 +414,19 @@ function VectorField({
   )
 }
 
-export { NumberField, VectorField }
 export type { NumberChange, NumberFieldProps, VectorFieldProps }
+export { NumberField, VectorField }
 
 /**
  * Pixels of drag per step, so a full-range scrub is about 300px whatever the step: a 0–8 field
  * with 0.25 steps moves one step per ~9px instead of per pixel, which read as jumping.
  * Unbounded ranges keep one step per pixel.
  */
-function pixelsPerStep(min: number | undefined, max: number | undefined, step: number | undefined): number {
+function pixelsPerStep(
+  min: number | undefined,
+  max: number | undefined,
+  step: number | undefined,
+): number {
   if (min == null || max == null || !step || max <= min) return 1
   return Math.min(12, Math.max(1, Math.round((300 * step) / (max - min))))
 }

package/src/components/popover.tsx

@@ -1,8 +1,11 @@
-import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
+// Popover: Base UI Popover. There is no `PopoverAnchor`: Base UI anchors through the
+// Positioner's `anchor` prop.
+
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
@@ -33,7 +36,7 @@ function PopoverContent({
           data-slot="popover-content"
           className={cn(
             "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            className,
           )}
           {...props}
         />
@@ -72,11 +75,4 @@ function PopoverDescription({ className, ...props }: PopoverPrimitive.Descriptio
   )
 }
 
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger }