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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Spree Dashboard framework — registries (table, nav, slot, settings-nav), providers (auth, permission, store), admin SDK client, generic infra hooks, and the defineDashboardPlugin extension API. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -49,13 +49,10 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@spree/admin-sdk": ">=0.7.0 <1.0.0-0 || >=1.0.0-0 <2.0.0-0",
+    "@spree/admin-sdk": ">=1.0.0-rc.4 <2.0.0-0",
     "@spree/dashboard-ui": ">=0.10.0 <1.0.0-0 || >=1.0.0-0 <2.0.0-0",
-    "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-query": "^5.100.9",
     "@tanstack/react-router": "^1.169.2",
-    "@tanstack/react-table": "^8.21.3",
     "i18next": "^26.2.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -66,21 +63,23 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
     "@tailwindcss/vite": "^4.2.4",
-    "date-fns": "^4.1.0",
+    "@tanstack/react-hotkeys": "^0.14.3",
+    "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
-    "lucide-react": "^1.47.0",
-    "zod": "^4.4.3"
+    "lucide-react": "^1.58.0",
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.5",
-    "@spree/dashboard-ui": "^1.0.0-rc.3",
-    "@spree/admin-sdk": "^1.0.0-rc.2"
+    "tsup": "^9.0.0",
+    "typescript": "~7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5",
+    "@spree/admin-sdk": "^1.0.0-rc.4",
+    "@spree/dashboard-ui": "^1.0.0-rc.4"
   },
   "scripts": {
     "lint": "biome check src",

package/src/components/currency-select.tsx

@@ -103,9 +103,8 @@ export function CurrencySelect({
 
   // Union of the option list and the current value so editing a record whose
   // currency isn't in the list (a store-supported list that later narrowed)
-  // never silently drops the selection. An empty `options` (e.g. a runtime
-  // without `Intl.supportedValuesOf` yields an empty `ALL_CURRENCY_CODES`)
-  // falls back to the store's currencies rather than an empty picker.
+  // never silently drops the selection. An empty `options` falls back to the
+  // store's currencies rather than an empty picker.
   const items = useMemo(() => {
     const base = options?.length ? options : currencies
     return isCurrencyCode(value) && !base.includes(value) ? [value, ...base] : base

package/src/components/import-wizard-dialog.tsx

@@ -1,4 +1,6 @@
 import {
+  Alert,
+  AlertDescription,
   Badge,
   Button,
   Card,
@@ -33,6 +35,7 @@ import {
   CheckCircle2Icon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CircleAlertIcon,
   DownloadIcon,
   RotateCcwIcon,
   XIcon,
@@ -107,13 +110,7 @@ export function ImportWizardDialog({ importId, onClose, onViewRecords }: ImportW
       }}
       modal
     >
-      <DialogContent
-        // Edge-to-edge minus a 3-unit gutter — see BulkPriceEditorDialog for
-        // why 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}>
         {importId && (
           <ImportWizard
             importId={importId}
@@ -472,10 +469,10 @@ function MappingStep({
         </div>
 
         {error && (
-          <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-destructive text-sm">
-            <AlertTriangleIcon className="size-4 shrink-0" />
-            <span>{error.message}</span>
-          </div>
+          <Alert variant="destructive">
+            <CircleAlertIcon />
+            <AlertDescription>{error.message}</AlertDescription>
+          </Alert>
         )}
       </CardContent>
     </Card>

package/src/components/preferences-form.tsx

@@ -46,6 +46,8 @@ export interface PreferenceFieldDef {
   format?: string
   default: unknown
   choices?: string[]
+  /** Labels the declaration gave its choices, for values that cannot name themselves (an endpoint URL). */
+  choiceLabels?: Record<string, string>
   /** Whether the setting may be left empty (it reads back as null). */
   nullable: boolean
   /** The property's own JSON Schema, for widgets that need more (list items, object properties). */
@@ -101,6 +103,7 @@ export function preferenceFields(
     format: property.format ?? property.items?.format,
     default: property.default ?? null,
     choices: property.enum?.filter((choice): choice is string => typeof choice === 'string'),
+    choiceLabels: property['x-spree-choice-labels'],
     nullable: Array.isArray(property.type) && property.type.includes('null'),
     schema: property,
   }))
@@ -432,12 +435,23 @@ export function PreferenceField({
       // the set is what the server validates against, so typing anything
       // else can only fail on save.
       if (field.choices?.length) {
-        const options = field.choices.map((choice) => ({
+        // A translation wins where one exists, so the locale files stay in
+        // charge of the values that read as words; then the label the
+        // declaration supplied, for the ones that do not — a URL cannot serve
+        // as its own i18n key, let alone as a label.
+        const declared = field.choices.map((choice) => ({
           value: choice,
           label: i18n.exists(`${preferenceKey}_options.${choice}`)
             ? t(`${preferenceKey}_options.${choice}`)
-            : humanizeKey(choice),
+            : (field.choiceLabels?.[choice] ?? humanizeKey(choice)),
         }))
+        // A stored value outside the set is offered as its own option rather
+        // than dropped, so one written past the picker by an API client is not
+        // silently rewritten to the first choice.
+        const options =
+          typeof value === 'string' && value !== '' && !declared.some((o) => o.value === value)
+            ? [...declared, { value, label: value }]
+            : declared
 
         return (
           <Field>

package/src/components/resource-combobox.tsx

@@ -109,6 +109,11 @@ export function ResourceCombobox<T extends ComboboxOption>({
     // elsewhere (a customer created on another page) never invalidates it.
     // Every search refetches; cached rows for a repeated term still paint first.
     staleTime: 0,
+    // Keeps the last results on screen while the next query loads, so the
+    // list does not blank on every keystroke. Only within one tenant: the
+    // second argument is the query those results came from.
+    placeholderData: (previous, previousQuery) =>
+      previousQuery?.queryKey[1] === tenantId ? previous : undefined,
   })
 
   // Hydrate the currently selected ID into a record so the trigger shows

package/src/components/resource-picker-sheet.tsx

@@ -1,6 +1,11 @@
 import {
   Button,
   Checkbox,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
   type PaginationMeta,
   SearchInput,
   Sheet,
@@ -308,11 +313,10 @@ export function ResourcePickerSheet<T extends PickerOption>({
                   const subtitle = getOptionSubtitle?.(option)
                   return (
                     <li key={option.id}>
-                      <button
-                        type="button"
-                        disabled={inList}
+                      <Item
+                        render={<button type="button" disabled={inList} />}
                         onClick={() => toggle(option)}
-                        className="flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+                        className="flex-nowrap gap-3 rounded-none px-4 py-2.5 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
                       >
                         <Checkbox
                           checked={checked}
@@ -320,20 +324,22 @@ export function ResourcePickerSheet<T extends PickerOption>({
                           className="pointer-events-none"
                         />
                         {getOptionImageUrl && <Thumbnail src={imageUrl} size="sm" />}
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate text-sm">{getOptionLabel(option)}</span>
+                        <ItemContent className="min-w-0 gap-0">
+                          <ItemTitle className="block truncate font-normal">
+                            {getOptionLabel(option)}
+                          </ItemTitle>
                           {subtitle && (
-                            <span className="block truncate text-muted-foreground text-xs">
+                            <ItemDescription className="line-clamp-1 text-xs">
                               {subtitle}
-                            </span>
+                            </ItemDescription>
                           )}
-                        </span>
+                        </ItemContent>
                         {inList && (
-                          <span className="shrink-0 text-muted-foreground text-xs">
+                          <ItemActions className="shrink-0 text-muted-foreground text-xs">
                             {t('admin.resource_picker.already_added')}
-                          </span>
+                          </ItemActions>
                         )}
-                      </button>
+                      </Item>
                     </li>
                   )
                 })}

package/src/components/table-toolbar.tsx

@@ -1177,17 +1177,19 @@ function InlineValueList({
     }))
   }, [isCurrency, currencies, isTags, tags.data, resources.data, column.filterResource, query])
 
-  // Selected values ride at the top so a choice made before searching does not
-  // disappear the moment the query stops matching it.
+  // Values already selected when the list opens ride at the top, so an active
+  // filter is visible without scrolling. The set is frozen at mount: ticking a
+  // box must not move rows under the pointer.
+  const [pinned] = useState(() => selected)
   const ordered = useMemo(() => {
-    const chosen = options.filter((option) => selected.includes(option.value))
-    const rest = options.filter((option) => !selected.includes(option.value))
+    const chosen = options.filter((option) => pinned.includes(option.value))
+    const rest = options.filter((option) => !pinned.includes(option.value))
     // Not truncated: a list cut at ten looks like a list of ten, and a
     // vocabulary of forty tags would silently lose thirty with nothing on
     // screen to say so. The container scrolls instead, so the scrollbar
     // reports how much more there is — and searching narrows it.
     return [...chosen, ...rest]
-  }, [options, selected])
+  }, [options, pinned])
 
   if (!isCurrency && (tags.isLoading || resources.isLoading)) {
     return (
@@ -1507,6 +1509,7 @@ function FilterPanel({
             behind the panel is already showing the result. */}
         {field && multi && column && (
           <InlineValueList
+            key={column.key}
             column={column}
             tenantId={tenantId}
             query={query}

package/src/lib/currencies.ts

@@ -1,18 +1,34 @@
-import type { CurrencyCode } from '@spree/admin-sdk'
-import { isCurrencyCode } from './iso-codes'
+import { CurrencyCode } from '@spree/admin-sdk'
+
+// Replaced currencies Spree still accepts so orders priced in them stay
+// valid, but which no merchant should pick for new pricing.
+const RETIRED_CURRENCY_CODES: ReadonlySet<string> = new Set([
+  'BYR',
+  'CUC',
+  'EEK',
+  'HRK',
+  'LTL',
+  'LVL',
+  'MRO',
+  'MTL',
+  'SKK',
+  'SLL',
+  'STD',
+  'TMM',
+  'VEF',
+  'ZMK',
+  'ZWD',
+  'ZWL',
+  'ZWN',
+  'ZWR',
+])
 
 /**
- * Every ISO 4217 currency code the runtime knows about — the active-currency
- * counterpart to the Rails admin's `Money::Currency.table` list. Used for
- * contexts where the merchant can pick *any* currency (a market's currency)
- * rather than one the store already supports. Degrades to an empty list on
- * runtimes without `Intl.supportedValuesOf`, so callers fall back to
- * `supported_currencies`.
+ * Every currency Spree accepts that is still in use. Used for contexts where
+ * the merchant can pick *any* currency (a market's currency) rather than one
+ * the store already supports. The list ships with the SDK, so a currency a
+ * newer server adds appears once the dashboard is upgraded with it.
  */
-export const ALL_CURRENCY_CODES: CurrencyCode[] = (() => {
-  try {
-    return Intl.supportedValuesOf('currency').filter(isCurrencyCode)
-  } catch {
-    return []
-  }
-})()
+export const ALL_CURRENCY_CODES: readonly CurrencyCode[] = Object.values(CurrencyCode).filter(
+  (code) => !RETIRED_CURRENCY_CODES.has(code),
+)

package/src/lib/iso-codes.ts

@@ -5,9 +5,11 @@ import { z } from 'zod/v4'
 /**
  * Whether a value has the shape of an ISO 3166-1 alpha-2 country code.
  *
- * Shape only: the server holds the authoritative list and rejects a code it
- * does not know, so the dashboard does not ship a second copy of it. This is
- * the one place a plain string becomes a `CountryCode`.
+ * Shape only: the connected server holds the authoritative list and rejects
+ * a code it does not know, while the SDK's `CountryCode` list is fixed when it
+ * is built. Checking against that copy would hide or reject a code an older or
+ * newer server accepts. This is the one place a plain string becomes a
+ * `CountryCode`.
  */
 export function isCountryCode(value: unknown): value is CountryCode {
   return typeof value === 'string' && /^[A-Z]{2}$/.test(value)

package/src/lib/permissions.ts

@@ -20,6 +20,7 @@ export const Subject = {
   CustomerGroup: 'customer_group',
   AdminUser: 'admin_user',
   ApiKey: 'api_key',
+  OauthApplication: 'oauth_application',
   AllowedOrigin: 'allowed_origin',
   Store: 'store',
   // The store's packaging vocabulary: the box it ships parcels in, and the
@@ -45,6 +46,7 @@ export const Subject = {
   ClaimReason: 'claim_reason',
   RefundReason: 'refund_reason',
   OrderCancellationReason: 'order_cancellation_reason',
+  TaxExemptionReason: 'tax_exemption_reason',
   CustomFieldDefinition: 'custom_field_definition',
   Integration: 'integration',
   PaymentMethod: 'payment_method',

package/src/lib/settings-nav-registry.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { canSeeSettingsEntry, type SettingsNavEntry } from './settings-nav-registry'
+
+const entry = (overrides: Partial<SettingsNavEntry>): SettingsNavEntry => ({
+  key: 'settings.example',
+  label: 'Example',
+  path: '/example',
+  group: 'store',
+  ...overrides,
+})
+
+const allowing =
+  (...subjects: string[]) =>
+  (_action: string, subject: string) =>
+    subjects.includes(subject)
+
+describe('canSeeSettingsEntry', () => {
+  it('shows an entry without a subject to everyone', () => {
+    expect(canSeeSettingsEntry(entry({}), allowing())).toBe(true)
+  })
+
+  it('checks a single subject', () => {
+    expect(canSeeSettingsEntry(entry({ subject: 'tax_rate' }), allowing('tax_rate'))).toBe(true)
+    expect(canSeeSettingsEntry(entry({ subject: 'tax_rate' }), allowing())).toBe(false)
+  })
+
+  // A page of tabs is reachable through any one of them.
+  it('shows an entry with several subjects when any one is allowed', () => {
+    const taxes = entry({ subjects: ['tax_category', 'tax_rate', 'tax_exemption_reason'] })
+
+    expect(canSeeSettingsEntry(taxes, allowing('tax_exemption_reason'))).toBe(true)
+    expect(canSeeSettingsEntry(taxes, allowing('product'))).toBe(false)
+  })
+})

package/src/lib/settings-nav-registry.ts

@@ -60,6 +60,12 @@ export interface SettingsNavEntry {
   position?: number
   /** CanCanCan subject required to see this item. Omit for always-visible. */
   subject?: SubjectName
+  /**
+   * For a page holding several resources, as tabs: the entry is shown when
+   * `action` is allowed on any of these, so a role reaching one tab still
+   * finds the page. Takes precedence over `subject`.
+   */
+  subjects?: SubjectName[]
   /**
    * Action checked against `subject`. Defaults to `'read'`. Settings pages
    * that only exist to *change* something (store settings, emails) should
@@ -220,6 +226,19 @@ export function settingsEntryMatches(
   return haystack.some((value) => value?.toLowerCase().includes(needle))
 }
 
+/**
+ * Whether a staff member may reach this settings entry. The sidebar, the
+ * settings landing page and the command palette all ask this, so they agree.
+ */
+export function canSeeSettingsEntry(
+  entry: SettingsNavEntry,
+  can: (action: string, subject: string) => boolean,
+): boolean {
+  const action = entry.action ?? 'read'
+  if (entry.subjects?.length) return entry.subjects.some((subject) => can(action, subject))
+  return !entry.subject || can(action, entry.subject)
+}
+
 /**
  * Drop entries the current staff member cannot reach. Exported because the
  * sidebar and the settings landing page must agree on what a role can see —
@@ -231,7 +250,7 @@ export function filterSettingsByPermissions(
   permissions: { can: (action: string, subject: string) => boolean },
 ): SettingsNavSnapshot {
   return regroup(snapshot, (entry) =>
-    !entry.subject ? true : permissions.can(entry.action ?? 'read', entry.subject),
+    canSeeSettingsEntry(entry, (action, subject) => permissions.can(action, subject)),
   )
 }
 
@@ -265,9 +284,7 @@ export function hasVisibleSettingsEntries(permissions: unknown): boolean {
     ?.can
   if (typeof can !== 'function') return false
 
-  return getSnapshot().all.some(
-    (entry) => !entry.subject || can(entry.action ?? 'read', entry.subject),
-  )
+  return getSnapshot().all.some((entry) => canSeeSettingsEntry(entry, can))
 }
 
 /** Test-only: clear the registry. */

package/src/locales/ar.json

@@ -183,7 +183,9 @@
       "searching": "جارٍ البحث…",
       "select_placeholder": "اختر…",
       "unsaved_changes": "لديك تغييرات غير محفوظة.",
-      "yes": "نعم"
+      "yes": "نعم",
+      "done": "تم",
+      "error": "حدث خطأ ما."
     },
     "components": {
       "address_block": {

package/src/locales/de.json

@@ -183,7 +183,9 @@
       "searching": "Wird gesucht…",
       "select_placeholder": "Auswählen…",
       "unsaved_changes": "Sie haben ungespeicherte Änderungen.",
-      "yes": "Ja"
+      "yes": "Ja",
+      "done": "Fertig",
+      "error": "Etwas ist schiefgelaufen."
     },
     "components": {
       "address_block": {

package/src/locales/en.json

@@ -183,7 +183,9 @@
       "searching": "Searching…",
       "select_placeholder": "Select…",
       "unsaved_changes": "You have unsaved changes.",
-      "yes": "Yes"
+      "yes": "Yes",
+      "done": "Done",
+      "error": "Something went wrong."
     },
     "components": {
       "address_block": {

package/src/locales/es.json

@@ -1665,7 +1665,9 @@
       "searching": "Buscando…",
       "select_placeholder": "Seleccionar…",
       "unsaved_changes": "Tenés cambios sin guardar.",
-      "yes": "Sí"
+      "yes": "Sí",
+      "done": "Listo",
+      "error": "Algo salió mal."
     },
     "messages": {
       "address_removed": "Dirección eliminada",

package/src/locales/fr.json

@@ -183,7 +183,9 @@
       "searching": "Recherche…",
       "select_placeholder": "Sélectionner…",
       "unsaved_changes": "Vous avez des modifications non enregistrées.",
-      "yes": "Oui"
+      "yes": "Oui",
+      "done": "Terminé",
+      "error": "Une erreur s'est produite."
     },
     "components": {
       "address_block": {

package/src/locales/pl.json

@@ -184,7 +184,9 @@
       "searching": "Wyszukiwanie…",
       "select_placeholder": "Wybierz…",
       "unsaved_changes": "Masz niezapisane zmiany.",
-      "yes": "Tak"
+      "yes": "Tak",
+      "done": "Gotowe",
+      "error": "Coś poszło nie tak."
     },
     "components": {
       "address_block": {

package/src/locales/zh-CN.json

@@ -183,7 +183,9 @@
       "searching": "搜索中…",
       "select_placeholder": "请选择…",
       "unsaved_changes": "您有未保存的更改。",
-      "yes": "是"
+      "yes": "是",
+      "done": "完成",
+      "error": "出了点问题。"
     },
     "components": {
       "address_block": {

package/src/products/bulk-variants-dialog.tsx

@@ -215,13 +215,7 @@ export function BulkVariantsDialog({ form, open, onOpenChange }: Props) {
 
   return (
     <Dialog open={open} onOpenChange={(next) => (next ? onOpenChange(true) : handleCancel())} modal>
-      <DialogContent
-        // Edge-to-edge minus a 3-unit gutter, same overrides as the bulk
-        // price dialog (see BulkPriceEditorDialog for why each is needed).
-        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="flex flex-row items-center justify-between gap-3 space-y-0 border-b p-3">
           <DialogTitle className="truncate">
             {t('admin.products.variants.bulk_edit.title')}

package/src/products/inventory-section.tsx

@@ -2,13 +2,13 @@ import type { ProductFormValues, StockLevelFormValues } from '@spree/dashboard-c
 import { useStockLocations } from '@spree/dashboard-core'
 import {
   DataGrid,
+  type DataGridColumn,
   editableRowIndex,
   NumberCell,
   ReadOnlyCell,
   SwitchCell,
 } from '@spree/dashboard-ui'
 import { ExternalLinkIcon } from '@spree/dashboard-ui/icons'
-import type { ColumnDef } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
 import { type UseFormReturn, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -135,7 +135,7 @@ export function InventorySection({ form, stockLocationHref }: InventorySectionPr
     [form],
   )
 
-  const columns = useMemo<ColumnDef<InventoryRow>[]>(
+  const columns = useMemo<DataGridColumn<InventoryRow>[]>(
     () => [
       {
         id: 'location',

package/src/products/variants-options-builder.tsx

@@ -4,6 +4,10 @@ import {
   Field,
   FieldLabel,
   Input,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemTitle,
   Select,
   SelectContent,
   SelectItem,
@@ -130,39 +134,38 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
               )
             }
             return (
-              <li
-                key={ot.id}
-                className="flex items-center gap-3 rounded-lg border border-border-subtle px-3 py-2"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">{ot.label}</div>
-                  <div className="mt-1 flex flex-wrap gap-1">
+              <Item key={ot.id} variant="outline" render={<li />} className="border-border-subtle">
+                <ItemContent className="min-w-0">
+                  <ItemTitle>{ot.label}</ItemTitle>
+                  <div className="flex flex-wrap gap-1">
                     {ot.values.map((v) => (
                       <Badge key={v.name} variant="secondary">
                         {v.label ?? v.name}
                       </Badge>
                     ))}
                   </div>
-                </div>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('admin.actions.edit')}
-                  onClick={() => setEditingIndex(i)}
-                >
-                  <PencilIcon />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('admin.actions.remove')}
-                  onClick={() => removeAt(i)}
-                >
-                  <XIcon />
-                </Button>
-              </li>
+                </ItemContent>
+                <ItemActions>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={t('admin.actions.edit')}
+                    onClick={() => setEditingIndex(i)}
+                  >
+                    <PencilIcon />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={t('admin.actions.remove')}
+                    onClick={() => removeAt(i)}
+                  >
+                    <XIcon />
+                  </Button>
+                </ItemActions>
+              </Item>
             )
           })}
         </ul>

package/src/products/variants-section.tsx

@@ -16,6 +16,9 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import type { ProductFormValues, VariantFormValues } from '@spree/dashboard-core'
 import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
   Button,
   Card,
   CardContent,
@@ -31,7 +34,7 @@ import {
   TableHeader,
   TableRow,
 } from '@spree/dashboard-ui'
-import { PencilIcon, SwatchBookIcon, XIcon } from '@spree/dashboard-ui/icons'
+import { PencilIcon, SwatchBookIcon, TriangleAlertIcon, XIcon } from '@spree/dashboard-ui/icons'
 import { type CSSProperties, useEffect, useMemo, useState } from 'react'
 import { type UseFormReturn, useFieldArray, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -361,31 +364,34 @@ export function VariantsSection({ form, seedFromType = false }: Props) {
         />
 
         {orphanedKeys.length > 0 && (
-          <div className="rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm dark:border-amber-700 dark:bg-amber-950/40">
-            <p className="font-medium text-amber-900 dark:text-amber-100">
+          <Alert variant="warning">
+            <TriangleAlertIcon />
+            <AlertTitle>
               {t('admin.products.variants.orphan_warning', { count: orphanedKeys.length })}
-            </p>
-            {orphanedEntries.length > 0 && (
-              <ul className="mt-1 list-disc pl-5 text-amber-900 dark:text-amber-200">
-                {orphanedEntries.map((entry) => (
-                  <li key={entry.key}>{entry.label}</li>
-                ))}
-              </ul>
-            )}
-            <div className="mt-2 flex items-center justify-end gap-2">
-              <Button type="button" variant="ghost" size="sm" onClick={handleKeepOrphans}>
-                {t('admin.products.variants.keep')}
-              </Button>
-              <Button
-                type="button"
-                variant="destructive"
-                size="sm"
-                onClick={handleConfirmDropOrphans}
-              >
-                {t('admin.actions.remove')}
-              </Button>
-            </div>
-          </div>
+            </AlertTitle>
+            <AlertDescription>
+              {orphanedEntries.length > 0 && (
+                <ul className="list-disc pl-5">
+                  {orphanedEntries.map((entry) => (
+                    <li key={entry.key}>{entry.label}</li>
+                  ))}
+                </ul>
+              )}
+              <div className="mt-2 flex items-center justify-end gap-2">
+                <Button type="button" variant="ghost" size="sm" onClick={handleKeepOrphans}>
+                  {t('admin.products.variants.keep')}
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleConfirmDropOrphans}
+                >
+                  {t('admin.actions.remove')}
+                </Button>
+              </div>
+            </AlertDescription>
+          </Alert>
         )}
 
         {fields.length > 0 && !awaitingOptionValues && (