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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -37,7 +37,6 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-router": "^1.169.2",
     "i18next": "^26.2.0",
     "react": "^19.2.6",
@@ -60,37 +59,40 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@fontsource-variable/geist": "5.2.8",
-    "@fontsource-variable/geist-mono": "5.2.7",
-    "@tanstack/react-table": "8.21.3",
-    "@tiptap/core": "3.31.3",
-    "@tiptap/extension-image": "3.31.3",
-    "@tiptap/extension-link": "3.31.3",
-    "@tiptap/extension-placeholder": "3.31.3",
-    "@tiptap/pm": "3.31.3",
-    "@tiptap/react": "3.31.3",
-    "@tiptap/starter-kit": "3.31.3",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "@tanstack/react-hotkeys": "^0.14.3",
+    "@tanstack/react-table": "9.3.1",
+    "@tiptap/core": "3.32.0",
+    "@tiptap/extension-bubble-menu": "3.32.0",
+    "@tiptap/extension-floating-menu": "3.32.0",
+    "@tiptap/extension-image": "3.32.0",
+    "@tiptap/extension-link": "3.32.0",
+    "@tiptap/extension-placeholder": "3.32.0",
+    "@tiptap/pm": "3.32.0",
+    "@tiptap/react": "3.32.0",
+    "@tiptap/starter-kit": "3.32.0",
     "@uiw/react-json-view": "1.12.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "date-fns": "4.1.0",
+    "date-fns": "4.4.0",
     "date-fns-tz": "3.2.0",
-    "flag-icons": "7.5.0",
-    "lucide-react": "1.47.0",
-    "react-colorful": "5.7.0",
-    "react-day-picker": "9.14.0",
+    "flag-icons": "7.6.0",
+    "lucide-react": "1.58.0",
+    "react-colorful": "5.8.1",
+    "react-day-picker": "10.0.2",
     "recharts": "3.10.1",
-    "shadcn": "4.21.0",
-    "tailwind-merge": "3.5.0",
+    "shadcn": "4.22.0",
+    "tailwind-merge": "3.7.0",
     "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.2.4",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.16"
+    "typescript": "~7.0.2",
+    "vite": "^8.3.4"
   },
   "scripts": {
     "lint": "biome check src",

package/src/index.ts

@@ -117,6 +117,7 @@ export * from './ui/empty'
 export * from './ui/field'
 export * from './ui/input'
 export * from './ui/input-group'
+export * from './ui/item'
 export * from './ui/label'
 export * from './ui/media-preview'
 export * from './ui/pagination'

package/src/spree/address-book-row.tsx

@@ -1,14 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { Badge } from '../ui/badge'
-import { Button } from '../ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { AddressBlock, type AddressBlockValue } from './address-block'
-import { EllipsisVerticalIcon, PencilIcon, TrashIcon } from './icons'
+import { RowActions } from './row-actions'
 
 /** What every address book row needs, whoever owns the book. */
 export interface AddressBookEntry extends AddressBlockValue {
@@ -45,52 +39,44 @@ export function AddressBookRow({
   const { t } = useTranslation()
 
   return (
-    <div className="flex items-start justify-between gap-2 rounded-md border p-3">
-      <div className="flex min-w-0 flex-col gap-1">
-        <span className="flex flex-wrap items-center gap-2">
-          {address.label && (
-            <span className="font-medium text-foreground text-sm">{address.label}</span>
-          )}
-          {address.is_default_billing && (
-            <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
-          )}
-          {address.is_default_shipping && (
-            <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
-          )}
-        </span>
+    <Item variant="outline" className="items-start">
+      <ItemContent className="min-w-0">
+        {(address.label || address.is_default_billing || address.is_default_shipping) && (
+          <ItemTitle className="flex-wrap">
+            {address.label}
+            {address.is_default_billing && (
+              <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
+            )}
+            {address.is_default_shipping && (
+              <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
+            )}
+          </ItemTitle>
+        )}
         <AddressBlock address={address} />
-      </div>
+      </ItemContent>
 
       {canEdit && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon-xs" className="shrink-0">
-              <EllipsisVerticalIcon className="size-4" />
-              <span className="sr-only">{t('admin.actions.actions_menu')}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={onEdit}>
-              <PencilIcon className="size-4" />
-              {t('admin.actions.edit')}
-            </DropdownMenuItem>
-            {onSetDefaultBilling && !address.is_default_billing && (
-              <DropdownMenuItem onClick={onSetDefaultBilling}>
-                {t('admin.address_book.set_default_billing')}
-              </DropdownMenuItem>
-            )}
-            {onSetDefaultShipping && !address.is_default_shipping && (
-              <DropdownMenuItem onClick={onSetDefaultShipping}>
-                {t('admin.address_book.set_default_shipping')}
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuItem variant="destructive" onClick={onRemove}>
-              <TrashIcon className="size-4" />
-              {t('admin.actions.delete')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <ItemActions>
+          <RowActions
+            actions={[
+              { key: 'edit', onSelect: onEdit },
+              {
+                key: 'set_default_billing',
+                label: t('admin.address_book.set_default_billing'),
+                visible: !!onSetDefaultBilling && !address.is_default_billing,
+                onSelect: () => onSetDefaultBilling?.(),
+              },
+              {
+                key: 'set_default_shipping',
+                label: t('admin.address_book.set_default_shipping'),
+                visible: !!onSetDefaultShipping && !address.is_default_shipping,
+                onSelect: () => onSetDefaultShipping?.(),
+              },
+              { key: 'delete', destructive: true, onSelect: onRemove },
+            ]}
+          />
+        </ItemActions>
       )}
-    </div>
+    </Item>
   )
 }

package/src/spree/bulk-price-table.tsx

@@ -1,8 +1,16 @@
-import type { ColumnDef } from '@tanstack/react-table'
 import { PlusIcon, XIcon } from 'lucide-react'
 import { useMemo } from 'react'
+import { Alert, AlertDescription } from '../ui/alert'
 import { Button } from '../ui/button'
-import { DataGrid, DecimalCell, editableRowIndex, MoneyCell, ReadOnlyCell } from './data-grid'
+import {
+  DataGrid,
+  type DataGridColumn,
+  DecimalCell,
+  editableRowIndex,
+  MoneyCell,
+  ReadOnlyCell,
+} from './data-grid'
+import { CircleAlertIcon } from './icons'
 import { SearchInput } from './search-input'
 
 export interface BulkPriceRow {
@@ -131,7 +139,7 @@ export function BulkPriceTable({
   isLoading,
   error,
 }: BulkPriceTableProps) {
-  const columns = useMemo<ColumnDef<BulkPriceRow>[]>(
+  const columns = useMemo<DataGridColumn<BulkPriceRow>[]>(
     () => [
       {
         id: 'variant',
@@ -203,7 +211,7 @@ export function BulkPriceTable({
                   />
                 )
               },
-            } satisfies ColumnDef<BulkPriceRow>,
+            } satisfies DataGridColumn<BulkPriceRow>,
           ]
         : []),
       {
@@ -291,7 +299,7 @@ export function BulkPriceTable({
                   </Button>
                 )
               },
-            } satisfies ColumnDef<BulkPriceRow>,
+            } satisfies DataGridColumn<BulkPriceRow>,
           ]
         : []),
     ],
@@ -312,12 +320,10 @@ export function BulkPriceTable({
     // table in a card does.
     <div className="flex h-full flex-col gap-3">
       {error && (
-        <div
-          role="alert"
-          className="mx-3 shrink-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-destructive text-sm"
-        >
-          {error}
-        </div>
+        <Alert variant="destructive" className="mx-3 w-auto shrink-0">
+          <CircleAlertIcon />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
       )}
       {showToolbar && (
         // Always-mounted toolbar. Conditionally rendering the search input

package/src/spree/bulk-variants-table.tsx

@@ -1,6 +1,13 @@
-import type { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { DataGrid, DecimalCell, ReadOnlyCell, SelectCell, SwitchCell, TextCell } from './data-grid'
+import {
+  DataGrid,
+  type DataGridColumn,
+  DecimalCell,
+  ReadOnlyCell,
+  SelectCell,
+  SwitchCell,
+  TextCell,
+} from './data-grid'
 
 export interface BulkVariantsRow {
   id: string
@@ -139,7 +146,7 @@ export function BulkVariantsTable({
   cartonOptions,
   onChange,
 }: BulkVariantsTableProps) {
-  const columns = useMemo<ColumnDef<BulkVariantsRow>[]>(() => {
+  const columns = useMemo<DataGridColumn<BulkVariantsRow>[]>(() => {
     // Keyboard column coordinates, fixed per column: variant label is
     // read-only (unregistered), then sku=1, barcode=2, weight=3, unit=4,
     // height=5, width=6, depth=7, unit=8, preorderable=9, backorder=10,
@@ -148,7 +155,7 @@ export function BulkVariantsTable({
     const numericHeader = (label: string) => () => <span className="block text-right">{label}</span>
     const rowLabel = (r: BulkVariantsRow) => r.variantLabel ?? labels.variantDefault
 
-    const defs: ColumnDef<BulkVariantsRow>[] = [
+    const defs: DataGridColumn<BulkVariantsRow>[] = [
       {
         id: 'variant',
         header: labels.variant,
@@ -182,7 +189,7 @@ export function BulkVariantsTable({
           />
         ),
       },
-      ...DECIMAL_COLUMNS.map<ColumnDef<BulkVariantsRow>>(({ field, col }) => ({
+      ...DECIMAL_COLUMNS.map<DataGridColumn<BulkVariantsRow>>(({ field, col }) => ({
         id: field,
         header: numericHeader(labels[field]),
         cell: ({ row }) => (

package/src/spree/claim-resolve-dialog.tsx

@@ -11,6 +11,7 @@ import {
 } from '../ui/dialog'
 import { Field, FieldLabel } from '../ui/field'
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
 import { Switch } from '../ui/switch'
 import type { RefundMethod } from './return-dialogs'
@@ -178,21 +179,23 @@ export function ClaimResolveDialog({
                 {t('admin.pages.orders.detail.claims.replacement_items')}
               </span>
               {lines.map((line) => (
-                <div
-                  key={line.id}
-                  className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
-                >
-                  <span className="truncate text-sm">
-                    {line.label}
-                    <span className="text-muted-foreground"> ×{line.quantity}</span>
-                  </span>
-                  <Switch
-                    checked={replacing[line.id] ?? false}
-                    onCheckedChange={(checked) =>
-                      setReplacing({ ...replacing, [line.id]: checked })
-                    }
-                  />
-                </div>
+                <Item key={line.id} variant="outline" className="flex-nowrap border-border-subtle">
+                  <ItemContent className="min-w-0">
+                    <ItemTitle className="block truncate font-normal">
+                      {line.label}
+                      <span className="text-muted-foreground"> ×{line.quantity}</span>
+                    </ItemTitle>
+                  </ItemContent>
+                  <ItemActions>
+                    <Switch
+                      aria-label={line.label}
+                      checked={replacing[line.id] ?? false}
+                      onCheckedChange={(checked) =>
+                        setReplacing({ ...replacing, [line.id]: checked })
+                      }
+                    />
+                  </ItemActions>
+                </Item>
               ))}
             </div>
           )}

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/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/dialog.tsx

@@ -95,20 +95,29 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  fullScreen = false,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Popup> & {
   showCloseButton?: boolean
+  /**
+   * Fills the window minus a small gutter, over an opaque overlay — for
+   * wizards and editors that replace the page rather than sit on top of it.
+   * A see-through overlay would let the page's own panel edges show around
+   * the dialog as a second border.
+   */
+  fullScreen?: boolean
 }) {
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay className={cn(fullScreen && 'bg-background dark:bg-background')} />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
           'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[min(500px,calc(100%-2rem))] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
+          fullScreen && 'inset-3 w-auto max-w-none translate-x-0 translate-y-0 sm:max-w-none',
           className,
         )}
-        style={{ maxHeight: '90vh' }}
+        style={fullScreen ? undefined : { maxHeight: '90vh' }}
         {...props}
       >
         {children}

package/src/ui/item.tsx

@@ -0,0 +1,188 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+import { Separator } from './separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-2', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'border-transparent bg-muted/50',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'item',
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+}

package/src/ui/toast.tsx

@@ -12,6 +12,7 @@ import {
   TriangleAlertIcon,
   XIcon,
 } from '../spree/icons'
+import { Button } from './button'
 
 /**
  * App-wide toast manager. Created outside React so a toast can be raised from
@@ -26,18 +27,89 @@ import {
 export const toastManager = ToastPrimitive.createToastManager()
 
 const ICONS: Record<string, React.ReactNode> = {
-  success: <CircleCheckIcon className="size-4 text-emerald-600 dark:text-emerald-400" />,
-  error: <OctagonXIcon className="size-4 text-destructive" />,
-  warning: <TriangleAlertIcon className="size-4 text-amber-600 dark:text-amber-400" />,
-  info: <InfoIcon className="size-4 text-muted-foreground" />,
-  loading: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
+  success: <CircleCheckIcon className="text-emerald-600 dark:text-emerald-400" />,
+  error: <OctagonXIcon className="text-destructive" />,
+  warning: <TriangleAlertIcon className="text-amber-600 dark:text-amber-400" />,
+  info: <InfoIcon className="text-muted-foreground" />,
+  loading: <Loader2Icon className="animate-spin text-muted-foreground" />,
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        // `z-40`, below the overlay layer (`z-50`) rather than above
+        // everything: the stack sits bottom-right, which is exactly where a
+        // side sheet's footer buttons are, and a toast drifting over Save is
+        // both unclickable and a click the merchant did not intend.
+        'pointer-events-none fixed inset-x-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-40 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        '[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
+        'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]',
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
+        'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
+        '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
+        'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        'flex items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  const icon = type ? ICONS[type] : null
+  if (!icon) return null
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
 }
 
 function ToastList() {
   const { toasts } = ToastPrimitive.useToastManager()
 
   return toasts.map((toast) => (
-    <ToastPrimitive.Root
+    <Toast
       key={toast.id}
       toast={toast}
       // Base UI types a toast as `dialog`, which puts every transient
@@ -45,37 +117,31 @@ function ToastList() {
       // lookup, ours or a screen reader user's, matches whatever toast happens
       // to be on screen. `status` is what a passive notification should expose.
       role={toast.type === 'error' ? 'alert' : 'status'}
-      // `--toast-index` / `--toast-offset-y` drive the stacked-card effect:
-      // toasts behind the front one scale down and sit slightly higher.
-      className={cn(
-        // Normal flow inside a bottom-anchored column, not absolute
-        // positioning: a zero-height viewport gives an absolutely-positioned
-        // child nothing to sit on, and it renders below the fold.
-        'pointer-events-auto w-full',
-        'rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg',
-        'transition-all duration-200 ease-out',
-        'data-[starting-style]:translate-y-2 data-[starting-style]:opacity-0',
-        'data-[ending-style]:translate-y-2 data-[ending-style]:opacity-0',
-      )}
     >
-      <div className="flex items-start gap-3">
-        {toast.type && ICONS[toast.type] && (
-          <span className="mt-0.5 shrink-0">{ICONS[toast.type]}</span>
-        )}
+      <ToastContent>
+        <ToastIcon type={toast.type} />
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <ToastPrimitive.Title className="font-medium text-sm leading-snug" />
-          <ToastPrimitive.Description className="text-muted-foreground text-sm leading-snug" />
+          <ToastPrimitive.Title data-slot="toast-title" className="font-medium text-sm" />
+          <ToastPrimitive.Description
+            data-slot="toast-description"
+            className="text-muted-foreground text-sm"
+          />
         </div>
+        <ToastPrimitive.Action
+          data-slot="toast-action"
+          render={<Button variant="outline" size="sm" />}
+          className="shrink-0"
+        />
         <ToastPrimitive.Close
-          // 44px tap target on touch, compact for a pointer — the same rule the
-          // rest of the app follows for icon-only controls.
-          className="-mt-1 -mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          data-slot="toast-close"
           aria-label={i18n.t('admin.actions.close')}
+          render={<Button variant="ghost" size="icon-sm" />}
+          className="relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground"
         >
-          <XIcon className="size-4" />
+          <XIcon aria-hidden="true" />
         </ToastPrimitive.Close>
-      </div>
-    </ToastPrimitive.Root>
+      </ToastContent>
+    </Toast>
   ))
 }
 
@@ -90,22 +156,10 @@ export function Toaster({ children }: { children?: React.ReactNode }) {
   return (
     <ToastPrimitive.Provider toastManager={toastManager}>
       {children}
-      <ToastPrimitive.Portal>
-        <ToastPrimitive.Viewport
-          className={cn(
-            // Below the overlay layer (`z-50`) rather than above everything:
-            // the stack sits bottom-right, which is exactly where a side
-            // sheet's footer buttons are, and a toast drifting over Save is
-            // both unclickable and a click the merchant did not intend.
-            'fixed right-4 z-40 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-2',
-            // `pointer-events-none` on the column so the empty space above the
-            // stack never blocks the page; each toast takes them back.
-            'pointer-events-none',
-            'bottom-[max(1rem,env(safe-area-inset-bottom))]',
-          )}
-        >
+      <ToastPrimitive.Portal data-slot="toast-portal">
+        <ToastViewport>
           <ToastList />
-        </ToastPrimitive.Viewport>
+        </ToastViewport>
       </ToastPrimitive.Portal>
     </ToastPrimitive.Provider>
   )