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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "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,24 @@
     "@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",
+    "@spree/core": "^0.2.0"
   },
   "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.5",
+    "@spree/dashboard-ui": "^1.0.0-rc.5"
   },
   "scripts": {
     "lint": "biome check src",

package/src/api-client.ts

@@ -1,3 +1,4 @@
+import type { PackageTypeKind, PickupStockPolicy } from '@spree/core'
 /**
  * The client registry.
  *
@@ -14,7 +15,8 @@
  * promise the seller panel methods its API does not have.
  */
 
-import type { CountryCode, PermissionRule, UploadFileOptions } from '@spree/admin-sdk'
+import type { PermissionRule, UploadFileOptions } from '@spree/admin-sdk'
+import type { CountryCode, DimensionUnit, WeightUnit } from '@spree/core'
 
 /** What a panel may change on the signed-in person's own account. */
 export interface PanelAccountParams {
@@ -354,10 +356,10 @@ export interface PanelPackageTypeParams {
   length?: number | null
   width?: number | null
   height?: number | null
-  dimensions_unit?: PanelPackageDimensionUnit | null
+  dimensions_unit?: DimensionUnit | null
   weight?: number | null
   max_weight?: number | null
-  weight_unit?: PanelPackageWeightUnit | null
+  weight_unit?: WeightUnit | null
   default?: boolean
   /**
    * Not nullable: both SDKs take a merge, so clearing a key is sending the
@@ -386,9 +388,12 @@ export interface PanelPackageTypeWrites extends PanelPackageTypeReads {
   delete?(id: string): Promise<void>
 }
 
-export type PanelPackageTypeKind = 'box' | 'envelope' | 'carton' | 'pallet' | 'container'
-export type PanelPackageDimensionUnit = 'mm' | 'cm' | 'in' | 'ft'
-export type PanelPackageWeightUnit = 'g' | 'kg' | 'lb' | 'oz'
+/** @deprecated Use `PackageTypeKind` from `@spree/core`. */
+export type PanelPackageTypeKind = PackageTypeKind
+/** @deprecated Use `DimensionUnit` from `@spree/core`. */
+export type PanelPackageDimensionUnit = DimensionUnit
+/** @deprecated Use `WeightUnit` from `@spree/core`. */
+export type PanelPackageWeightUnit = WeightUnit
 
 /**
  * A new row must say what it is and what to call it — packaging without
@@ -598,7 +603,7 @@ export type PanelStockLocationParams = Partial<
    * because plugins register their own, but the pickup policy is a fixed pair
    * the server validates, and both SDKs type it that way.
    */
-  pickup_stock_policy?: 'local' | 'any'
+  pickup_stock_policy?: PickupStockPolicy
 }
 
 /**

package/src/components/address-form-dialog.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import type { CountryCode } from '@spree/admin-sdk'
+import { type CountryCode, isCountryCode } from '@spree/core'
 import {
   Button,
   Checkbox,
@@ -22,7 +22,7 @@ import { Controller, type DefaultValues, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod/v4'
 import { mapSpreeErrorsToForm } from '../lib/form-errors'
-import { countryCodeSchema, isCountryCode } from '../lib/iso-codes'
+import { countryCodeSchema } from '../lib/iso-codes'
 import { useOptionalStore } from '../providers/store-provider'
 import { CountryCombobox } from './country-combobox'
 import { StateCombobox, useCountryStates } from './country-state-fields'

package/src/components/country-combobox.tsx

@@ -1,4 +1,4 @@
-import type { CountryCode } from '@spree/admin-sdk'
+import { type CountryCode, isCountryCode } from '@spree/core'
 import {
   Combobox,
   ComboboxButtonTrigger,
@@ -19,7 +19,6 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useCountries } from '../hooks/use-countries'
 import { useDisplayName } from '../hooks/use-display-name'
-import { isCountryCode } from '../lib/iso-codes'
 
 export type CountryOption = { iso: CountryCode; iso3: string }
 

package/src/components/currency-select.tsx

@@ -1,4 +1,4 @@
-import type { CurrencyCode } from '@spree/admin-sdk'
+import { type CurrencyCode, isCurrencyCode } from '@spree/core'
 import {
   Combobox,
   ComboboxButtonTrigger,
@@ -12,10 +12,9 @@ import {
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDisplayName } from '../hooks/use-display-name'
-import { isCurrencyCode } from '../lib/iso-codes'
 import { useOptionalStore } from '../providers/store-provider'
 
-export { ALL_CURRENCY_CODES } from '../lib/currencies'
+export { ACTIVE_CURRENCY_CODES as ALL_CURRENCY_CODES } from '@spree/core'
 
 interface CurrencySelectProps {
   /** Classes for the trigger — used to match a neighbouring control's height. */
@@ -33,8 +32,8 @@ interface CurrencySelectProps {
   /** Fires on every selection change. */
   onChange?: (currency: CurrencyCode) => void
   /**
-   * Currency codes to pick from. Defaults to the current store's
-   * `supported_currencies`. Pass `ALL_CURRENCY_CODES` (or any custom list) for
+   * Currency codes to pick from. Defaults to the currencies of the current
+   * store's markets. Pass `ALL_CURRENCY_CODES` (or any custom list) for
    * contexts where the merchant chooses a currency the store doesn't yet
    * support — e.g. a market's currency.
    */
@@ -55,8 +54,8 @@ interface CurrencySelectProps {
 }
 
 /**
- * Picker for a currency code. Defaults to the current store's
- * `supported_currencies` (and the store's `default_currency`), so callers
+ * Picker for a currency code. Defaults to the currencies of the
+ * current store's markets (the default market's first), so callers
  * choosing among already-configured currencies don't have to wire anything up.
  * Pass `options` (e.g. `ALL_CURRENCY_CODES`) when the merchant may pick any
  * currency, such as a market's currency. Each option reads `CODE — Full Name`
@@ -103,9 +102,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/file-upload-field.tsx

@@ -270,6 +270,7 @@ export function FileUploadField({
             </AttachmentContent>
             <AttachmentActions>
               <AttachmentAction
+                type="button"
                 aria-label={t('admin.actions.remove')}
                 onClick={handleRemove}
                 disabled={disabled || !!pending}

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/locale-select.tsx

@@ -13,13 +13,13 @@ import {
   ComboboxValue,
   useComboboxAnchor,
 } from '@spree/dashboard-ui'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDisplayName } from '../hooks/use-display-name'
 import { useStore } from '../providers/store-provider'
 
 interface BaseProps {
-  /** Locale codes to pick from. Defaults to the current store's `supported_locales`. */
+  /** Locale codes to pick from. Defaults to the languages of the current store's markets. */
   options?: string[]
   /** Locale to filter out (e.g. the default locale when picking additional supported ones). */
   excludeCode?: string
@@ -63,16 +63,6 @@ interface MultiProps extends BaseProps {
 
 type LocaleSelectProps = SingleProps | MultiProps
 
-/**
- * Resolves a locale code (`en`, `pt-BR`) to its display name (`English`,
- * `Portuguese (Brazil)`) in the admin UI language, falling back to the code
- * itself when the runtime lacks coverage.
- */
-function useLocaleDisplayName() {
-  const displayName = useDisplayName('language')
-  return (code: string) => displayName(code) ?? code
-}
-
 /**
  * Mirrors `CurrencySelect`'s row format: `CODE — Localized Name`. Codes the
  * runtime cannot name (`Intl.DisplayNames` returns the code back, as it does
@@ -96,6 +86,16 @@ function localeFilter(labelFor: (locale: string) => string) {
   }
 }
 
+/**
+ * Returns a function that labels a locale code the way the dashboard shows
+ * locales everywhere: `EN — English`, named in the admin UI language. For
+ * plain-text contexts (option lists, search); render `LocaleLabel` in JSX.
+ */
+export function useLocaleLabel() {
+  const displayName = useDisplayName('language')
+  return useCallback((code: string) => formatOption(code, displayName(code) ?? code), [displayName])
+}
+
 /**
  * Static text label for a locale code: `EN — English`. Use this in tables
  * and read-only contexts where the picker isn't needed but the same
@@ -103,16 +103,16 @@ function localeFilter(labelFor: (locale: string) => string) {
  * has no entry.
  */
 export function LocaleLabel({ code }: { code: string }) {
-  const displayNameFor = useLocaleDisplayName()
+  const labelFor = useLocaleLabel()
   if (!code) return null
-  return <>{formatOption(code, displayNameFor(code))}</>
+  return <>{labelFor(code)}</>
 }
 
 /**
- * Picker for one of the current store's `supported_locales`. Single-select by
- * default; pass `multiple` for a chips multi-select. Each option reads
- * `CODE — Localized Name` (e.g. `EN — English`), localized via the browser's
- * `Intl.DisplayNames` against the store's `default_locale`. Use this anywhere
+ * Picker for one of the languages the current store's markets offer.
+ * Single-select by default; pass `multiple` for a chips multi-select. Each
+ * option reads `CODE — Localized Name` (e.g. `EN — English`), named in the
+ * admin UI language via the browser's `Intl.DisplayNames`. Use this anywhere
  * the merchant is choosing a storefront language (market default, supported
  * locales list, customer preference, etc.).
  *
@@ -124,7 +124,7 @@ export function LocaleLabel({ code }: { code: string }) {
 export function LocaleSelect(props: LocaleSelectProps) {
   const { t } = useTranslation()
   const { locales: storeLocales } = useStore()
-  const displayNameFor = useLocaleDisplayName()
+  const localeLabel = useLocaleLabel()
 
   // Union of `props.options` (everything the picker should show) and the
   // currently selected values — so editing an existing record doesn't
@@ -145,15 +145,14 @@ export function LocaleSelect(props: LocaleSelectProps) {
   // per character; a lookup map keeps it to a single pass per list change.
   const labels = useMemo(() => {
     const map = new Map<string, string>()
-    for (const locale of items) map.set(locale, formatOption(locale, displayNameFor(locale)))
+    for (const locale of items) map.set(locale, localeLabel(locale))
     return map
-  }, [items, displayNameFor])
+  }, [items, localeLabel])
 
   // `CODE — Name` label for a locale, from the precomputed map (falls back to a
   // direct lookup for a value not in the current option list, e.g. a selected
   // chip the list later dropped).
-  const labelFor = (locale: string) =>
-    labels.get(locale) ?? formatOption(locale, displayNameFor(locale))
+  const labelFor = (locale: string) => labels.get(locale) ?? localeLabel(locale)
 
   if (props.multiple) {
     return (

package/src/components/nav-main.tsx

@@ -183,6 +183,11 @@ function CollapsedDropdown({
           <DropdownMenuItem key={subItem.title} asChild>
             <Link to={subItem.url} className="no-underline">
               {subItem.title}
+              {subItem.badge && (
+                <span className="ms-auto shrink-0 ps-3">
+                  <subItem.badge />
+                </span>
+              )}
             </Link>
           </DropdownMenuItem>
         ))}
@@ -261,9 +266,9 @@ function NavItemContent({
               <SidebarMenuSubItem key={subItem.title}>
                 <SidebarMenuSubButton asChild isActive={subActive}>
                   <Link to={subItem.url}>
-                    <span>{subItem.title}</span>
+                    <span className="truncate">{subItem.title}</span>
                     {subItem.badge && (
-                      <span className="ml-auto">
+                      <span className="ml-auto shrink-0">
                         <subItem.badge />
                       </span>
                     )}

package/src/components/preferences-form.tsx

@@ -1,10 +1,5 @@
-import type { CurrencyCode } from '@spree/admin-sdk'
-import {
-  compareMoney,
-  isDecimalString,
-  type PreferencePropertySchema,
-  type PreferenceSchema,
-} from '@spree/admin-sdk'
+import type { PreferencePropertySchema, PreferenceSchema } from '@spree/admin-sdk'
+import { type CurrencyCode, compareMoney, currencyParts, isDecimalString } from '@spree/core'
 import {
   Button,
   Field,
@@ -29,7 +24,6 @@ import { PlusIcon, TrashIcon } from '@spree/dashboard-ui/icons'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMoneyLocale } from '../hooks/use-money-locale'
-import { currencyParts } from '../lib/currency-parts'
 import { CountryCombobox, CountryMultiCombobox } from './country-combobox'
 import { CurrencySelect } from './currency-select'
 import { StoreDatePicker } from './store-date-picker'
@@ -46,6 +40,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 +97,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 +429,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/settings-sidebar.tsx

@@ -358,8 +358,15 @@ function SettingsItem({
       <SidebarMenuButton asChild isActive={isActive}>
         <Link to={url} tabIndex={tabIndex}>
           <NavIcon icon={Icon} isActive={isActive} />
-          <span>{label}</span>
+          {/* `truncate` so a long translated label gives way to the badge
+              rather than pushing it out of the sidebar. */}
+          <span className="truncate">{label}</span>
           {entry.comingSoon && <SidebarMenuBadge className="ms-auto">Soon</SidebarMenuBadge>}
+          {entry.badge && (
+            <span className="ms-auto shrink-0">
+              <entry.badge />
+            </span>
+          )}
         </Link>
       </SidebarMenuButton>
     </SidebarMenuItem>

package/src/components/slot.tsx

@@ -1,7 +1,8 @@
 import { Fragment } from 'react'
+import { FormProvider, type UseFormReturn } from 'react-hook-form'
 import { type SlotAmbientContext, useSlotEntries } from '../lib/slot-registry'
 
-interface SlotProps<TContext> {
+export interface SlotProps<TContext> {
   /** Slot name, e.g. "product.form_sidebar" or "order.dropdown". */
   name: string
   /** Slot-specific context passed to every registered component. */
@@ -48,3 +49,22 @@ export function Slot<TContext extends object = object>({
     </>
   )
 }
+
+/**
+ * A slot inside a form that isn't wrapped in `FormProvider` — a create or edit
+ * sheet. Widgets rendered here reach the form with `useHostForm()`, so fields
+ * they bind save with the sheet's own submit.
+ */
+export function HostFormSlot<TContext extends object = object>({
+  form,
+  ...slot
+}: SlotProps<TContext> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<any, any, any>
+}) {
+  return (
+    <FormProvider {...form}>
+      <Slot {...slot} />
+    </FormProvider>
+  )
+}