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

package/src/locales/es.json

@@ -1608,11 +1608,13 @@
         "seeded_report_read_only": "Este es un reporte incorporado y no se puede modificar. Guardá una copia.",
         "taken": "ya está en uso",
         "too_long": "es demasiado largo (máximo {{count}} caracteres)",
+        "too_many_decimals": "tiene más de {{count}} decimales",
         "too_short": "es demasiado corto (mínimo {{count}} caracteres)",
         "wrong_length": "tiene un largo incorrecto (debería ser {{count}} caracteres)"
       },
       "country_required": "El país es obligatorio",
       "currency_required": "La moneda es obligatoria",
+      "locale_required": "El idioma es obligatorio",
       "first_name_required": "El nombre es obligatorio",
       "invalid_email": "Ingresá un email válido",
       "invalid_email_or_password": "Email o contraseña inválidos",
@@ -1624,7 +1626,8 @@
       "passwords_dont_match": "Las contraseñas no coinciden",
       "positive_number": "{{field}} debe ser mayor que 0",
       "required": "{{field}} es obligatorio",
-      "store_name_required": "El nombre de la tienda es obligatorio"
+      "store_name_required": "El nombre de la tienda es obligatorio",
+      "too_many_decimals": "{{field}} puede tener como máximo {{count}} decimales"
     },
     "common": {
       "active": "Activo",
@@ -1662,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": {
@@ -1463,11 +1465,13 @@
         "seeded_report_read_only": "Ce rapport est intégré et ne peut pas être modifié. Enregistrez plutôt une copie.",
         "taken": "est déjà utilisé",
         "too_long": "est trop long ({{count}} caractères maximum)",
+        "too_many_decimals": "a plus de {{count}} décimales",
         "too_short": "est trop court ({{count}} caractères minimum)",
         "wrong_length": "n'a pas la bonne longueur ({{count}} caractères attendus)"
       },
       "country_required": "Le pays est requis",
       "currency_required": "La devise est requise",
+      "locale_required": "La langue est requise",
       "first_name_required": "Le prénom est obligatoire",
       "invalid_email": "Saisissez une adresse e-mail valide",
       "invalid_email_or_password": "E-mail ou mot de passe invalide",
@@ -1479,7 +1483,8 @@
       "passwords_dont_match": "Les mots de passe ne correspondent pas",
       "positive_number": "{{field}} doit être supérieur à 0",
       "required": "{{field}} est obligatoire",
-      "store_name_required": "Le nom de la boutique est requis"
+      "store_name_required": "Le nom de la boutique est requis",
+      "too_many_decimals": "{{field}} peut avoir au plus {{count}} décimales"
     },
     "products": {
       "autocomplete": {

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": {
@@ -1480,11 +1482,13 @@
         "seeded_report_read_only": "To raport wbudowany i nie można go zmienić. Zapisz zamiast tego kopię.",
         "taken": "jest już zajęte",
         "too_long": "jest za długie (maksymalnie {{count}} znaków)",
+        "too_many_decimals": "ma więcej niż {{count}} miejsca po przecinku",
         "too_short": "jest za krótkie (minimalnie {{count}} znaków)",
         "wrong_length": "ma nieprawidłową długość (powinno mieć {{count}} znaków)"
       },
       "country_required": "Kraj jest wymagany",
       "currency_required": "Waluta jest wymagana",
+      "locale_required": "Język jest wymagany",
       "first_name_required": "Imię jest wymagane",
       "invalid_email": "Wprowadź prawidłowy adres e-mail",
       "invalid_email_or_password": "Nieprawidłowy adres e-mail lub hasło",
@@ -1496,7 +1500,8 @@
       "passwords_dont_match": "Hasła nie są zgodne",
       "positive_number": "Pole {{field}} musi być większe niż 0",
       "required": "Pole {{field}} jest wymagane",
-      "store_name_required": "Nazwa sklepu jest wymagana"
+      "store_name_required": "Nazwa sklepu jest wymagana",
+      "too_many_decimals": "{{field}} może mieć najwyżej {{count}} miejsca po przecinku"
     },
     "products": {
       "autocomplete": {

package/src/locales/zh-CN.json

@@ -183,7 +183,9 @@
       "searching": "搜索中…",
       "select_placeholder": "请选择…",
       "unsaved_changes": "您有未保存的更改。",
-      "yes": "是"
+      "yes": "是",
+      "done": "完成",
+      "error": "出了点问题。"
     },
     "components": {
       "address_block": {
@@ -1463,11 +1465,13 @@
         "seeded_report_read_only": "这是内置报表，无法修改。请改为保存副本。",
         "taken": "已被占用",
         "too_long": "太长（最多 {{count}} 个字符）",
+        "too_many_decimals": "超过 {{count}} 位小数",
         "too_short": "太短（最少 {{count}} 个字符）",
         "wrong_length": "长度不正确（应为 {{count}} 个字符）"
       },
       "country_required": "请选择国家/地区",
       "currency_required": "请选择货币",
+      "locale_required": "请选择语言",
       "first_name_required": "名字为必填项",
       "invalid_email": "请输入有效的邮箱地址",
       "invalid_email_or_password": "邮箱或密码无效",
@@ -1479,7 +1483,8 @@
       "passwords_dont_match": "两次输入的密码不一致",
       "positive_number": "{{field}} 必须大于 0",
       "required": "{{field}} 为必填项",
-      "store_name_required": "商店名称为必填项"
+      "store_name_required": "商店名称为必填项",
+      "too_many_decimals": "{{field}}最多只能有 {{count}} 位小数"
     },
     "products": {
       "autocomplete": {

package/src/plugin.ts

@@ -106,11 +106,11 @@ export interface DashboardPluginConfig {
   /** Table mutations keyed by table key (see `defineTable`). */
   tables?: Record<string, TableMutations>
   /**
-   * Custom routes mounted under `/$storeId/`. Each entry's `path` is relative
-   * (e.g. `/brands`, `/brands/$brandId`). The dashboard's catch-all route at
-   * `/$storeId/*` dispatches based on the splat — your `component` renders
-   * exactly like any first-party route, including TanStack Router's
-   * `useParams()` for path params.
+   * Custom routes. By default mounted under `/$storeId/`, with a relative
+   * `path` (e.g. `/brands`, `/brands/$brandId`) — the dashboard's catch-all
+   * route at `/$storeId/*` dispatches based on the splat. Set `scope` to
+   * `'authenticated'` or `'public'` to mount a page at the root, outside any
+   * store.
    */
   routes?: RouteEntry[]
   /**

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

@@ -63,7 +63,7 @@ export function BulkVariantsDialog({ form, open, onOpenChange }: Props) {
     () =>
       countries.map((country) => ({
         value: country.iso,
-        label: countryName({ iso: country.iso, iso3: country.iso3, name: country.name }),
+        label: countryName(country),
       })),
     [countries, countryName],
   )
@@ -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/product-bulk-price-editor.tsx

@@ -1,21 +1,20 @@
+import type { CurrencyCode } from '@spree/admin-sdk'
 import type { ProductFormValues, VariantPriceFormValues } from '@spree/dashboard-core'
 import { type BulkPriceRow, BulkPriceTable } from '@spree/dashboard-ui'
 import { useCallback, useMemo } from 'react'
 import { type UseFormReturn, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { useMoneyLocale } from '../hooks/use-money-locale'
+import { currencyParts } from '../lib/currency-parts'
+import { normalizeMoneyInput } from '../lib/normalize-money'
 import { composeOptionsText } from '../products/variants-matrix'
-import { currencyParts } from './currency-parts'
-import { normalizeMoneyInput } from './normalize-money'
-import {
-  useFormCurrencyLocale as useCurrencyLocale,
-  useFormOptionTypes as useOptionTypes,
-} from './use-product-form-data'
+import { useFormOptionTypes as useOptionTypes } from './use-product-form-data'
 
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   form: UseFormReturn<ProductFormValues, any, any>
   /** ISO currency code (e.g. "USD", "EUR"). */
-  currency: string
+  currency: CurrencyCode
   /** Display label for the product, used as the table's section header. */
   productName: string
 }
@@ -27,33 +26,23 @@ interface Props {
  * in form state the same way. No server fetch, no edit-tracking map: the
  * parent form's `isDirty` is the single source of truth for save gating.
  *
- * Amounts are STRINGS, not numbers. The merchant's raw input flows straight
- * through to the API; the backend's `Spree::LocalizedNumber.parse` handles
- * locale-aware parsing (comma decimals, grouped digits, etc.) so the
- * frontend doesn't have to reimplement it. Frontend coercion via `Number()`
- * would silently mangle inputs like `"1.234,56"` into `NaN` and drop the
- * price entirely.
+ * Amounts are STRINGS, not numbers: canonical `"1234.56"` in form state and
+ * on the wire, normalized from the admin's own number format as each cell
+ * commits. `Number()` coercion would lose precision and turn `"1.234,56"`
+ * into `NaN`.
  */
 export function ProductBulkPriceEditor({ form, currency, productName }: Props) {
   const { t } = useTranslation()
   const variants = useWatch({ control: form.control, name: 'variants' }) ?? []
   const { data: optionTypesData } = useOptionTypes()
   const optionTypes = useMemo(() => optionTypesData?.data ?? [], [optionTypesData])
-  const localeForCurrency = useCurrencyLocale()
-
-  // Format the grid in the currency's market locale (e.g. EUR → `de`, comma
-  // decimal). The same locale normalizes the merchant's input back to canonical
-  // form on commit (see `handleChange`), so form state — like the API value it
-  // hydrates from — is ALWAYS canonical `"1234.56"`. Untouched prices therefore
-  // never get re-normalized on save.
-  //
-  // Fall back to `en` (canonical period-decimal), NOT the UI language: money
-  // formatting/parsing must never depend on the dashboard's language, or a USD
-  // value under a German UI would be parsed as `40.00` → 4000.
-  const marketLocale = localeForCurrency(currency) || 'en'
+  // Shown and read in the person's own number format (see useMoneyLocale). Form
+  // state, like the API value it hydrates from, is always canonical "1234.56",
+  // so an untouched price is never re-read on save.
+  const moneyLocale = useMoneyLocale()
   const { symbol, decimal } = useMemo(
-    () => currencyParts(currency, marketLocale),
-    [currency, marketLocale],
+    () => currencyParts(currency, moneyLocale),
+    [currency, moneyLocale],
   )
 
   // Project the form's variants into BulkPriceRow[] for the picked currency.
@@ -95,7 +84,7 @@ export function ProductBulkPriceEditor({ form, currency, productName }: Props) {
       // whitespace, OR malformed input (normalizes to `''`) all mean "no value"
       // — never persist `''` as a real amount.
       const trimmed = next == null ? '' : next.trim()
-      const normalized = trimmed === '' ? '' : normalizeMoneyInput(trimmed, marketLocale)
+      const normalized = trimmed === '' ? '' : normalizeMoneyInput(trimmed, moneyLocale)
       const raw = normalized === '' ? null : normalized
 
       const nextPrices: VariantPriceFormValues[] = [...current]
@@ -132,7 +121,7 @@ export function ProductBulkPriceEditor({ form, currency, productName }: Props) {
         shouldDirty: true,
       })
     },
-    [form, currency, marketLocale],
+    [form, currency, moneyLocale],
   )
 
   return (

package/src/products/product-form-cards.tsx

@@ -13,6 +13,7 @@ import {
   useSortable,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import type { CurrencyCode } from '@spree/admin-sdk'
 import type { MediaType, ProductFormValues } from '@spree/dashboard-core'
 import {
   getApiClient,
@@ -20,7 +21,7 @@ import {
   parseVideoUrl,
   ResourceMultiAutocomplete,
   TagCombobox,
-  useDirectUpload,
+  useFileUpload,
   useOptionalStore,
 } from '@spree/dashboard-core'
 import {
@@ -198,8 +199,8 @@ export function PricesCard({
    * StoreProvider; a seller's tenant is a seller and the store is derived
    * server-side, so it passes the currencies its profile reports.
    */
-  currencies?: string[]
-  defaultCurrency?: string
+  currencies?: CurrencyCode[]
+  defaultCurrency?: CurrencyCode
 }) {
   const { t } = useTranslation()
   const store = useOptionalStore()
@@ -208,7 +209,7 @@ export function PricesCard({
   // Not `useState(defaultCurrency)` alone: the store (or the seller's profile)
   // arrives after the first render, so a state seeded from the fallback would
   // stick and price everything in the wrong currency.
-  const [selectedCurrency, setCurrency] = useState<string | null>(null)
+  const [selectedCurrency, setCurrency] = useState<CurrencyCode | null>(null)
   const currency = selectedCurrency ?? defaultCurrency
 
   // Until the real default arrives there is no currency to price in, and an
@@ -224,7 +225,10 @@ export function PricesCard({
           {t('admin.common.prices')}
         </CardTitle>
         {currencies.length > 1 && (
-          <Select value={currency} onValueChange={setCurrency}>
+          <Select
+            value={currency}
+            onValueChange={(next) => setCurrency(currencies.find((code) => code === next) ?? null)}
+          >
             <SelectTrigger size="sm" className="w-24">
               <SelectValue />
             </SelectTrigger>
@@ -296,7 +300,7 @@ export function MediaCard({
   form: UseFormReturn<ProductFormValues, any, any>
 }) {
   const { t } = useTranslation()
-  const directUpload = useDirectUpload()
+  const fileUpload = useFileUpload()
   const deleteMedia = useDeleteProductMedia(productId ?? '')
   const confirm = useConfirm()
   const [pending, setPending] = useState<PendingUpload[]>([])
@@ -349,7 +353,7 @@ export function MediaCard({
         const preview = URL.createObjectURL(file)
         setPending((prev) => [...prev, { id: uploadId, file, preview, progress: 'uploading' }])
         try {
-          const result = await directUpload.mutateAsync(file)
+          const result = await fileUpload.mutateAsync(file)
           const current = form.getValues('media') ?? []
           form.setValue(
             'media',
@@ -384,7 +388,7 @@ export function MediaCard({
         }
       }
     },
-    [directUpload, form, t],
+    [fileUpload, form, t],
   )
 
   const handleDrop = useCallback(

package/src/products/product-form-mapping.ts

@@ -46,17 +46,21 @@ export function variantToFormValues(variant: PanelVariant, position: number): Va
     tax_category_id: variant.tax_category_id ?? null,
     // Base prices only: this array is posted back as the variant's base
     // prices, so a price-list row taken in here returns as the shop price.
-    prices: (variant.prices ?? [])
-      .filter((p) => p.currency != null && p.price_list_id == null)
-      .map((p) => ({
-        currency: p.currency as string,
-        // Keep amounts as the canonical decimal strings the API returns.
-        // The bulk price editor displays them with the locale's decimal
-        // separator and ships the raw user input unchanged on submit;
-        // `Spree::LocalizedNumber.parse` handles locale-aware parsing.
-        amount: p.amount != null ? String(p.amount) : '',
-        compare_at_amount: p.compare_at_amount != null ? String(p.compare_at_amount) : null,
-      })),
+    prices: (variant.prices ?? []).flatMap(
+      ({ currency, price_list_id, amount, compare_at_amount }) =>
+        currency != null && price_list_id == null
+          ? [
+              {
+                currency,
+                // Keep amounts as the canonical decimal strings the API returns;
+                // the price editor shows them in the admin's number format and
+                // normalizes edits back before they reach the form.
+                amount: amount != null ? String(amount) : '',
+                compare_at_amount: compare_at_amount != null ? String(compare_at_amount) : null,
+              },
+            ]
+          : [],
+    ),
     stock_levels: (variant.stock_levels ?? []).map((si) => ({
       id: si.id,
       stock_location_id: si.stock_location_id ?? si.stock_location?.id ?? '',

package/src/products/product-schema.ts

@@ -1,6 +1,7 @@
 import { requiredMessage } from '@spree/dashboard-ui'
 import i18n from 'i18next'
 import { z } from 'zod/v4'
+import { countryCodeSchema, currencyCodeSchema } from '../lib/iso-codes'
 import { normalizeQuantityRule } from './normalize-quantity'
 import { isSupportedVideoUrl } from './video-url'
 
@@ -33,13 +34,10 @@ export const variantOptionPairSchema = z.object({
 
 export type VariantOptionPair = z.infer<typeof variantOptionPairSchema>
 
-// Form-side prices use raw STRING amounts (the merchant's typed input).
-// The backend's `Spree::LocalizedNumber.parse` handles locale-aware parsing
-// (comma decimals, grouped digits, etc.), so the frontend ships exactly what
-// the merchant typed — no `Number(...)` coercion that mangles `"1.234,56"`
-// into `NaN` and silently drops the price.
+// Form-side prices are canonical decimal STRINGS ("1234.56"), never numbers:
+// `Number(...)` coercion loses precision and turns `"1.234,56"` into `NaN`.
 export const variantPriceFormSchema = z.object({
-  currency: z.string(),
+  currency: currencyCodeSchema,
   amount: z.string(),
   compare_at_amount: z.string().nullable().optional(),
 })
@@ -61,7 +59,7 @@ export const variantFormSchema = z.object({
   weight_unit: z.string().nullable().optional(),
   dimensions_unit: z.string().nullable().optional(),
   hs_code: z.string().nullable().optional(),
-  country_of_origin: z.string().nullable().optional(),
+  country_of_origin: countryCodeSchema.nullable().optional(),
   customs_description: z.string().nullable().optional(),
   // Held as strings so an unusable entry can be reported rather than
   // silently coerced away: normalizing `0` straight to null would clear the
@@ -101,7 +99,7 @@ export const customFieldFormSchema = z.object({
 export type CustomFieldFormValues = z.infer<typeof customFieldFormSchema>
 
 // Media in form state. Persisted entries carry an `id`; pre-save entries carry
-// a `signed_id` (from a completed ActiveStorage direct upload) or a
+// a `signed_id` (from a completed upload) or a
 // `source_media_id` (a file picked from the library). All can hold edits to
 // alt, position, and variant_ids that the parent product PATCH/POST ships
 // inline. previewUrl + uploadId are UI-only; stripped at submit.

package/src/products/product-types.ts

@@ -1,3 +1,5 @@
+import type { CountryCode, CurrencyCode } from '@spree/admin-sdk'
+
 /**
  * What the shared product form reads off a product, its variants and its
  * media.
@@ -42,12 +44,12 @@ export interface PanelVariant {
   price?: { amount?: string | null; currency?: string | null } | null
   prices?: Array<{
     amount?: string | null
-    currency?: string | null
+    currency?: CurrencyCode | null
     compare_at_amount?: string | null
     price_list_id?: string | null
   }>
   cost_price?: string | null
-  cost_currency?: string | null
+  cost_currency?: CurrencyCode | null
   weight?: number | null
   height?: number | null
   width?: number | null
@@ -55,7 +57,7 @@ export interface PanelVariant {
   weight_unit?: string | null
   dimensions_unit?: string | null
   hs_code?: string | null
-  country_of_origin?: string | null
+  country_of_origin?: CountryCode | null
   customs_description?: string | null
   minimum_order_quantity?: number | null
   order_multiple?: number | null

package/src/products/use-product-form-data.ts

@@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import type {
   PanelCollection,
   PanelDeliveryProfile,
-  PanelMarket,
   PanelNamedRecord,
   PanelOptionType,
   PanelPackageType,
@@ -244,30 +243,3 @@ export function collectionAutocompleteProps(queryKey: string) {
     getOptionLabel: (collection: PanelCollection) => collection.name ?? collection.id,
   }
 }
-
-/**
- * Resolves a currency to the locale its amounts are typed and shown in, so a
- * EUR field accepts `1.234,56` and normalizes it to `1234.56`. Mirrors the
- * operator dashboard's `useCurrencyLocale`, reading through the registered
- * client so the shared price editor works in either panel; a panel with no
- * markets answers undefined and callers fall back to the UI language.
- */
-export function useFormCurrencyLocale(): (currency: string | undefined) => string | undefined {
-  const client = getApiClient()
-
-  const { data } = useQuery({
-    queryKey: useResourceKey('markets', 'panel-form'),
-    queryFn: async (): Promise<{ data: PanelMarket[] }> =>
-      (await client.markets?.list({ limit: 100 })) ?? { data: [] },
-    enabled: Boolean(client.markets),
-    staleTime: FIVE_MINUTES,
-  })
-
-  const markets = data?.data ?? []
-
-  return (currency) => {
-    if (!currency) return undefined
-
-    return markets.find((market) => market.currency === currency)?.default_locale ?? undefined
-  }
-}

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>