@spree/dashboard-ui 1.0.0-rc.3 → 1.0.0-rc.5

package/src/spree/data-grid/data-grid.tsx

@@ -1,10 +1,11 @@
 import {
+  type ColumnDef,
   flexRender,
-  getCoreRowModel,
   type Row,
+  type RowData,
   type Table,
-  type TableOptions,
-  useReactTable,
+  tableFeatures,
+  useTable,
 } from '@tanstack/react-table'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { cn } from '../../lib/utils'
@@ -14,9 +15,18 @@ import type { CellCoords, CellKey, CellRegistration, RenderSectionHeader } from
 import { cellKey } from './types'
 import { useDataGridKeyboard } from './use-data-grid-keyboard'
 
-interface DataGridProps<T> {
+// The grid renders rows as given — no sorting, filtering or column state — so
+// it needs only the table's core features.
+const dataGridFeatures = tableFeatures({})
+type DataGridFeatures = typeof dataGridFeatures
+
+/** A column of a `DataGrid`. */
+// biome-ignore lint/suspicious/noExplicitAny: each column reads a value of its own type
+export type DataGridColumn<T extends RowData> = ColumnDef<DataGridFeatures, T, any>
+
+interface DataGridProps<T extends RowData> {
   rows: T[]
-  columns: TableOptions<T>['columns']
+  columns: DataGridColumn<T>[]
   getRowId: (row: T) => string
   /** Optional grouping. Return a node spanning all columns to render this row
    *  as a (non-editable) section header. Return null to render the row as
@@ -39,7 +49,7 @@ interface DataGridProps<T> {
   scrollable?: boolean
 }
 
-export function DataGrid<T>({
+export function DataGrid<T extends RowData>({
   rows,
   columns,
   getRowId,
@@ -48,11 +58,11 @@ export function DataGrid<T>({
   'aria-label': ariaLabel,
   scrollable = false,
 }: DataGridProps<T>) {
-  const table = useReactTable<T>({
+  const table = useTable({
+    features: dataGridFeatures,
     data: rows,
     columns,
     getRowId,
-    getCoreRowModel: getCoreRowModel(),
   })
 
   return (
@@ -66,14 +76,14 @@ export function DataGrid<T>({
   )
 }
 
-function DataGridShell<T>({
+function DataGridShell<T extends RowData>({
   table,
   renderSectionHeader,
   className,
   ariaLabel,
   scrollable,
 }: {
-  table: Table<T>
+  table: Table<DataGridFeatures, T>
   renderSectionHeader?: RenderSectionHeader<T>
   className?: string
   ariaLabel?: string
@@ -324,12 +334,12 @@ function DataGridShell<T>({
   )
 }
 
-function DataGridRow<T>({
+function DataGridRow<T extends RowData>({
   row,
   renderSectionHeader,
   columnCount,
 }: {
-  row: Row<T>
+  row: Row<DataGridFeatures, T>
   renderSectionHeader?: RenderSectionHeader<T>
   columnCount: number
 }) {
@@ -345,7 +355,7 @@ function DataGridRow<T>({
   }
   return (
     <tr>
-      {row.getVisibleCells().map((cell) => (
+      {row.getAllCells().map((cell) => (
         <td key={cell.id} className="h-9 p-0 align-middle">
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </td>

package/src/spree/data-grid/index.ts

@@ -8,6 +8,6 @@ export {
   TextCell,
 } from './cells'
 export { useDataGridContext } from './context'
-export { DataGrid } from './data-grid'
+export { DataGrid, type DataGridColumn } from './data-grid'
 export { editableRowIndex } from './helpers'
 export type { CellCoords, RenderSectionHeader } from './types'

package/src/spree/form-actions.tsx

@@ -22,16 +22,22 @@ export function FormSaveButton<TFieldValues extends FieldValues>({
   form,
   label,
   savingLabel,
+  dirty = false,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   label?: string
   savingLabel?: string
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   */
+  dirty?: boolean
 }) {
   const { t } = useTranslation()
   const { isDirty, isSubmitting } = useFormState({ control: form.control })
 
   return (
-    <Button type="submit" disabled={!isDirty || isSubmitting}>
+    <Button type="submit" disabled={!(isDirty || dirty) || isSubmitting}>
       {isSubmitting && <Loader2Icon className="animate-spin" />}
       {isSubmitting
         ? (savingLabel ?? t('admin.actions.saving'))
@@ -52,15 +58,22 @@ export function FormDiscardButton<TFieldValues extends FieldValues>({
   form,
   label,
   onDiscard,
+  dirty = false,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   label?: string
   onDiscard?: () => void
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   * Pass `onDiscard` too, so discarding drops them.
+   */
+  dirty?: boolean
 }) {
   const { t } = useTranslation()
   const { isDirty, isSubmitting } = useFormState({ control: form.control })
 
-  if (!isDirty) return null
+  if (!isDirty && !dirty) return null
 
   return (
     <Button
@@ -83,17 +96,23 @@ export function FormActions<TFieldValues extends FieldValues>({
   savingLabel,
   discardLabel,
   onDiscard,
+  dirty,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   saveLabel?: string
   savingLabel?: string
   discardLabel?: string
   onDiscard?: () => void
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   */
+  dirty?: boolean
 }) {
   return (
     <>
-      <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} />
-      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} />
+      <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} dirty={dirty} />
+      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} dirty={dirty} />
     </>
   )
 }
@@ -113,8 +132,11 @@ export function FormActions<TFieldValues extends FieldValues>({
 export function useFormSubmitShortcut<TFieldValues extends FieldValues>(
   form: UseFormReturn<TFieldValues, any, any>,
   onSubmit: (values: TFieldValues) => void | Promise<void>,
+  /** Unsaved changes held outside the form, as on `FormActions`. */
+  { dirty: externalDirty = false }: { dirty?: boolean } = {},
 ) {
-  const { isDirty, isSubmitting } = useFormState({ control: form.control })
+  const { isDirty: formDirty, isSubmitting } = useFormState({ control: form.control })
+  const isDirty = formDirty || externalDirty
 
   useHotkey(
     'Mod+S',

package/src/spree/fulfillment-item-list.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '../ui/item'
 import { Thumbnail } from '../ui/thumbnail'
 import { PackageIcon } from './icons'
 
@@ -30,17 +31,17 @@ export type FulfillmentItemRowData = {
  */
 function ItemRow({ row }: { row: FulfillmentItemRowData }) {
   return (
-    <div className="flex items-center gap-3 p-3">
+    <Item className="flex-nowrap gap-3 rounded-none border-0 p-3">
       <Thumbnail src={row.thumbnailUrl} fallback={<PackageIcon />} />
 
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium">{row.name}</div>
+      <ItemContent className="min-w-0 gap-0">
+        <ItemTitle className="block truncate">{row.name}</ItemTitle>
         {row.optionsText && (
-          <div className="truncate text-xs text-muted-foreground">{row.optionsText}</div>
+          <ItemDescription className="line-clamp-1 text-xs">{row.optionsText}</ItemDescription>
         )}
-      </div>
+      </ItemContent>
 
-      <div className="min-w-0 shrink text-right text-muted-foreground text-sm">
+      <ItemActions className="min-w-0 shrink flex-col items-end gap-0 text-right text-muted-foreground text-sm">
         {row.displayPrice ? (
           <span className="whitespace-nowrap">
             {row.displayPrice} × {row.quantity}
@@ -48,9 +49,9 @@ function ItemRow({ row }: { row: FulfillmentItemRowData }) {
         ) : (
           <span className="whitespace-nowrap">× {row.quantity}</span>
         )}
-        {row.priceSource && <div className="truncate text-xs">{row.priceSource}</div>}
-      </div>
-    </div>
+        {row.priceSource && <div className="max-w-full truncate text-xs">{row.priceSource}</div>}
+      </ItemActions>
+    </Item>
   )
 }
 

package/src/spree/icons.ts

@@ -21,9 +21,11 @@ export {
   BellIcon,
   BoldIcon,
   BookOpenIcon,
+  BotIcon,
   BoxesIcon,
   BracesIcon,
   Building2Icon,
+  CalculatorIcon,
   CalendarIcon,
   CalendarOffIcon,
   ChartColumnIcon,
@@ -36,6 +38,7 @@ export {
   ChevronsLeftIcon,
   ChevronsRightIcon,
   ChevronsUpDownIcon,
+  CircleAlertIcon,
   CircleCheckIcon,
   CircleDotIcon,
   CircleIcon,

package/src/spree/post-sale-fields.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Field, FieldLabel } from '../ui/field'
 import { Input } from '../ui/input'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
 
 /** A unit on the order that a return, exchange or claim can name. */
@@ -31,26 +32,27 @@ export function QuantityPicker({
   return (
     <div className="flex flex-col gap-2">
       {units.map((unit) => (
-        <div
-          key={unit.id}
-          className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
-        >
-          <span className="min-w-0 truncate text-sm">{unit.label}</span>
-          <Input
-            type="number"
-            min={0}
-            max={unit.quantity}
-            className="w-20"
-            value={selection[unit.id] ?? 0}
-            aria-label={unit.label}
-            onChange={(event) =>
-              onChange({
-                ...selection,
-                [unit.id]: Math.max(0, Math.min(Number(event.target.value), unit.quantity)),
-              })
-            }
-          />
-        </div>
+        <Item key={unit.id} variant="outline" className="flex-nowrap border-border-subtle">
+          <ItemContent className="min-w-0">
+            <ItemTitle className="block truncate font-normal">{unit.label}</ItemTitle>
+          </ItemContent>
+          <ItemActions>
+            <Input
+              type="number"
+              min={0}
+              max={unit.quantity}
+              className="w-20"
+              value={selection[unit.id] ?? 0}
+              aria-label={unit.label}
+              onChange={(event) =>
+                onChange({
+                  ...selection,
+                  [unit.id]: Math.max(0, Math.min(Number(event.target.value), unit.quantity)),
+                })
+              }
+            />
+          </ItemActions>
+        </Item>
       ))}
     </div>
   )

package/src/spree/resource-combobox.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { type ReactNode, useState } from 'react'
 import {
   Combobox,
   ComboboxContent,
@@ -84,14 +84,30 @@ export function ResourceCombobox<T extends ComboboxOption>({
   disabled,
   id,
 }: ResourceComboboxProps<T>) {
-  const selected = items.find((r) => r.id === value) ?? null
+  // The picked record is remembered so it stays selected while `items` is
+  // between fetches. Without it, the selection drops out of the list for a
+  // moment, Base UI reads that as the value being cleared, empties the input,
+  // and the field flickers between labels until the queries settle.
+  const [picked, setPicked] = useState<T | null>(null)
+  const selected =
+    items.find((r) => r.id === value) ?? (picked && picked.id === value ? picked : null)
 
   return (
     <Combobox
       items={items}
       value={selected}
-      onValueChange={(record: T | null) => onChange(record?.id, record)}
-      onInputValueChange={onInputChange}
+      // Compared by id: a refetch hands back equal records as new objects.
+      isItemEqualToValue={(item: T, current: T) => item.id === current.id}
+      onValueChange={(record: T | null) => {
+        setPicked(record)
+        onChange(record?.id, record)
+      }}
+      // Picking an option writes its label into the input. That is not a
+      // search, so the query goes back to the empty list instead of searching
+      // for the full label of what was just chosen.
+      onInputValueChange={(next, details) =>
+        onInputChange?.(details.reason === 'item-press' ? '' : next)
+      }
       itemToStringLabel={(record: T | null) => (record ? getOptionLabel(record) : '')}
       itemToStringValue={(record: T | null) => record?.id ?? ''}
       // Filtering is server-side: the caller's `onInputChange` already narrows

package/src/spree/secret-input.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
 import { Field, FieldLabel } from '../ui/field'
-import { Input } from '../ui/input'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../ui/input-group'
+import { EyeIcon, EyeOffIcon } from './icons'
 
 // Server masks stored secrets as `••••…` on read so admins can see "yes,
 // something is stored" without exposing the actual value. Detecting that
@@ -35,7 +36,9 @@ interface SecretInputProps {
  * mask (`••••3K9z`) and renders as a read-only badge with a "Replace"
  * button — never as an input, and never with a reveal toggle, because the
  * server does not send the secret and there is nothing to unhide. Replace
- * switches to an empty password input so the admin opts in to rotation;
+ * switches to an empty password input so the admin opts in to rotation; that
+ * input does carry a reveal toggle, since what it hides is what the admin is
+ * typing right now;
  * Cancel reverts to the badge so the next save preserves the existing
  * secret via the backend's masked round-trip guard.
  *
@@ -57,6 +60,7 @@ export function SecretInput({
   // after `onChange('')` has cleared the parent value.
   const [pendingMask, setPendingMask] = useState<string | null>(null)
   const replacing = pendingMask !== null
+  const [revealed, setRevealed] = useState(false)
 
   // A stored secret always renders as the badge: the server sent a mask,
   // not the value, so there is nothing a reveal toggle could show.
@@ -93,17 +97,29 @@ export function SecretInput({
     <Field>
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <div className="flex items-center gap-2">
-        <Input
-          id={id}
-          type="password"
-          autoComplete="new-password"
-          placeholder={
-            replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
-          }
-          value={(value as string) ?? ''}
-          onChange={(e) => onChange(e.target.value)}
-          className="flex-1"
-        />
+        <InputGroup className="flex-1">
+          <InputGroupInput
+            id={id}
+            type={revealed ? 'text' : 'password'}
+            autoComplete="new-password"
+            spellCheck={false}
+            placeholder={
+              replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
+            }
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              size="icon-xs"
+              aria-label={revealed ? t('admin.actions.hide') : t('admin.actions.show')}
+              aria-pressed={revealed}
+              onClick={() => setRevealed((visible) => !visible)}
+            >
+              {revealed ? <EyeOffIcon /> : <EyeIcon />}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
         {replacing && (
           <Button
             type="button"

package/src/spree/tax-identifiers-card.tsx

@@ -15,17 +15,20 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
   Field,
   FieldDescription,
   FieldError,
   FieldGroup,
   FieldLabel,
   Input,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
   RelativeTime,
+  RowActions,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -35,7 +38,7 @@ import {
   StatusBadge,
   useConfirm,
 } from '../index'
-import { BadgeCheckIcon, EllipsisVerticalIcon, PencilIcon, PlusIcon, TrashIcon } from './icons'
+import { BadgeCheckIcon, PlusIcon } from './icons'
 
 /** One selectable registration kind. */
 interface KindOption {
@@ -153,81 +156,71 @@ export function TaxIdentifiersCard({
           <p className="text-muted-foreground text-sm">{t('admin.tax_identifiers.empty')}</p>
         </CardContent>
       ) : (
-        <CardContent className="flex flex-col gap-3">
-          {identifiers.map((identifier) => (
-            <div
-              key={identifier.id}
-              className="flex items-start justify-between gap-3 rounded-md border p-3"
-            >
-              <div className="flex min-w-0 flex-col gap-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="font-medium text-sm">{identifier.value}</span>
-                  <Badge variant="outline">
-                    {t(`admin.tax_identifiers.kinds.${identifier.kind}`, {
-                      defaultValue: identifier.kind,
-                    })}
-                  </Badge>
-                  {identifier.validation_status ? (
-                    <StatusBadge
-                      status={identifier.validation_status}
-                      label={t(
-                        `admin.tax_identifiers.validation_status.${identifier.validation_status}`,
-                        { defaultValue: identifier.validation_status },
-                      )}
-                    />
-                  ) : (
-                    <Badge variant="secondary">
-                      {t('admin.tax_identifiers.validation_status.not_checked')}
+        <CardContent>
+          <ItemGroup className="gap-3">
+            {identifiers.map((identifier) => (
+              <Item key={identifier.id} role="listitem" variant="outline" className="items-start">
+                <ItemContent className="min-w-0">
+                  <ItemTitle className="flex-wrap">
+                    {identifier.value}
+                    <Badge variant="outline">
+                      {t(`admin.tax_identifiers.kinds.${identifier.kind}`, {
+                        defaultValue: identifier.kind,
+                      })}
                     </Badge>
+                    {identifier.validation_status ? (
+                      <StatusBadge
+                        status={identifier.validation_status}
+                        label={t(
+                          `admin.tax_identifiers.validation_status.${identifier.validation_status}`,
+                          { defaultValue: identifier.validation_status },
+                        )}
+                      />
+                    ) : (
+                      <Badge variant="secondary">
+                        {t('admin.tax_identifiers.validation_status.not_checked')}
+                      </Badge>
+                    )}
+                  </ItemTitle>
+                  {identifier.validated_at && (
+                    <ItemDescription className="text-xs">
+                      <RelativeTime
+                        iso={identifier.validated_at}
+                        prefix={t('admin.tax_identifiers.checked_prefix')}
+                      />
+                    </ItemDescription>
+                  )}
+                  {!identifier.validatable && (
+                    <ItemDescription className="text-xs">
+                      {t('admin.tax_identifiers.not_validatable')}
+                    </ItemDescription>
                   )}
-                </div>
-                {identifier.validated_at && (
-                  <span className="text-muted-foreground text-xs">
-                    <RelativeTime
-                      iso={identifier.validated_at}
-                      prefix={t('admin.tax_identifiers.checked_prefix')}
+                </ItemContent>
+
+                {canEdit && (
+                  <ItemActions>
+                    <RowActions
+                      actions={[
+                        {
+                          key: 'validate',
+                          label: t('admin.tax_identifiers.validate_action'),
+                          icon: <BadgeCheckIcon className="size-4" />,
+                          disabled: !identifier.validatable || mutations.isValidating,
+                          onSelect: () => mutations.validate(identifier.id).catch(() => undefined),
+                        },
+                        { key: 'edit', onSelect: () => setEditing(identifier) },
+                        {
+                          key: 'delete',
+                          destructive: true,
+                          onSelect: () => handleDelete(identifier),
+                        },
+                      ]}
                     />
-                  </span>
-                )}
-                {!identifier.validatable && (
-                  <span className="text-muted-foreground text-xs">
-                    {t('admin.tax_identifiers.not_validatable')}
-                  </span>
+                  </ItemActions>
                 )}
-              </div>
-
-              {canEdit && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-xs">
-                      <EllipsisVerticalIcon className="size-4" />
-                      <span className="sr-only">{t('admin.actions.actions_menu')}</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      disabled={!identifier.validatable || mutations.isValidating}
-                      onClick={() => mutations.validate(identifier.id).catch(() => undefined)}
-                    >
-                      <BadgeCheckIcon className="size-4" />
-                      {t('admin.tax_identifiers.validate_action')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setEditing(identifier)}>
-                      <PencilIcon className="size-4" />
-                      {t('admin.actions.edit')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-destructive focus:text-destructive"
-                      onClick={() => handleDelete(identifier)}
-                    >
-                      <TrashIcon className="size-4" />
-                      {t('admin.actions.delete')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
-          ))}
+              </Item>
+            ))}
+          </ItemGroup>
         </CardContent>
       )}
 

package/src/spree/wizard.tsx

@@ -188,13 +188,7 @@ export function Wizard({
       }}
       modal
     >
-      <DialogContent
-        // Edge-to-edge minus a gutter, like the import wizard and the bulk
-        // price editor — every inset/translate/max is overridden.
-        className="!inset-3 !w-auto !max-w-none !translate-x-0 !translate-y-0 flex flex-col p-0"
-        style={{ maxHeight: 'none' }}
-        showCloseButton={false}
-      >
+      <DialogContent fullScreen showCloseButton={false}>
         <DialogHeader className="h-14 shrink-0 flex-row items-center gap-3 space-y-0 border-b border-border-subtle bg-background px-4 py-0">
           <div className="flex min-w-0 items-center gap-3">
             <DialogTitle className="truncate text-base">{title}</DialogTitle>

package/src/ui/badge.tsx

@@ -1,3 +1,4 @@
+import type { BuiltInStatus } from '@spree/core'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -80,6 +81,7 @@ const statusToneMap: Record<string, StatusTone> = {
   authorized: 'info',
   complete: 'success',
   completed: 'success',
+  placed: 'success',
   paid: 'success',
   fulfilled: 'success',
   delivered: 'success',
@@ -157,18 +159,36 @@ const statusToneMap: Record<string, StatusTone> = {
   ready_to_ship: 'warning',
   ordered: 'info',
   partially_received: 'info',
+  // More arrived than was ordered: done, but worth a look.
+  over_received: 'warning',
   // Gift cards.
   partially_redeemed: 'info',
   redeemed: 'neutral',
   // Price lists — `scheduled` is live-but-not-yet, which is the same shape as
   // any other "waiting on the clock" state.
   scheduled: 'info',
+  // The rest of the API's own statuses, on the same rule as above.
+  accepted: 'success',
+  waived: 'neutral',
+  withdrawn: 'neutral',
+  awaiting_confirmation: 'warning',
+  lapsed: 'neutral',
+  mapping: 'warning',
+  completed_mapping: 'info',
+  unresolved: 'destructive',
+  on_hand: 'success',
+  backordered: 'warning',
+  shipped: 'success',
+  checkout: 'neutral',
+  invalid: 'destructive',
+  purchased: 'success',
+  refund_requested: 'warning',
   // Boolean filter values. A yes/no pair is a state like any other — "in
   // stock: no" is the row an operator is looking for, and reading it in the
   // same green/red the rest of the app uses saves them parsing the word.
   true: 'success',
   false: 'destructive',
-}
+} satisfies Record<BuiltInStatus, StatusTone> & Record<string, StatusTone>
 
 // Dot fills, by tone. These read the same `--status-*` ramps the tinted Badge
 // variants use, but take the *reading* step rather than the fill step: a 6px