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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.6",
   "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",
@@ -63,23 +63,26 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^6.0.0",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-hotkeys": "^0.14.3",
+    "@tanstack/react-hotkeys": "^0.16.0",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
-    "lucide-react": "^1.58.0",
-    "zod": "^4.6.7"
+    "lucide-react": "^1.60.0",
+    "zod": "^4.6.7",
+    "@spree/core": "^0.3.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.104.5",
+    "@tanstack/react-router": "^1.170.45",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "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"
+    "@spree/dashboard-ui": "^1.0.0-rc.6",
+    "@spree/admin-sdk": "^1.0.0-rc.6"
   },
   "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,13 @@
  * promise the seller panel methods its API does not have.
  */
 
-import type { CountryCode, PermissionRule, UploadFileOptions } from '@spree/admin-sdk'
+import type {
+  DigitalAssetProvider,
+  PaginationMeta,
+  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 {
@@ -227,6 +234,29 @@ export interface PanelApiClient {
   }
   /** Removing a file already on a product. */
   deleteProductMedia?(productId: string, mediaId: string): Promise<void>
+  /**
+   * The downloadable files a digital product delivers to its buyers.
+   *
+   * Registered rather than imported for the same reason as everything else
+   * here: the Digital files card is one component serving both panels.
+   * `providers` is operator-only — a provider is the marketplace's own code
+   * reaching into its internal systems — so a seller's client leaves it out
+   * and the card offers file uploads alone.
+   */
+  digitalAssets?: {
+    list(
+      productId: string,
+      params?: { page?: number; limit?: number },
+    ): Promise<{ data: PanelDigitalAsset[]; meta?: PaginationMeta }>
+    create(productId: string, params: PanelDigitalAssetParams): Promise<PanelDigitalAsset>
+    update(
+      productId: string,
+      id: string,
+      params: PanelDigitalAssetParams,
+    ): Promise<PanelDigitalAsset>
+    delete(productId: string, id: string): Promise<void>
+    providers?(productId: string): Promise<{ data: DigitalAssetProvider[] }>
+  }
   /**
    * The store-wide media library, for placing a file already uploaded onto
    * another product. Operator-only: a seller sees their own product's files,
@@ -354,10 +384,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 +416,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
@@ -492,6 +525,42 @@ export interface PanelExport {
   filename?: string | null
 }
 
+/**
+ * A downloadable file, as the Digital files card reads it. Structural, like
+ * the other records here: both serializers carry these fields, and only the
+ * operator's adds `provider_settings`.
+ */
+export interface PanelDigitalAsset {
+  id: string
+  variant_id: string | null
+  filename: string | null
+  content_type: string | null
+  byte_size: number | null
+  /** Null means the store's download settings apply. */
+  authorized_clicks: number | null
+  authorized_days: number | null
+  /** The limits in force, after the store-settings fallback. */
+  effective_authorized_clicks: number
+  effective_authorized_days: number
+  provider_type: string | null
+  provider_name: string
+  download_url: string | null
+  provider_settings?: Record<string, unknown>
+}
+
+/**
+ * What either panel writes. The provider fields are the operator's alone; a
+ * seller's API refuses them.
+ */
+export interface PanelDigitalAssetParams {
+  signed_id?: string
+  variant_id?: string
+  authorized_clicks?: number | null
+  authorized_days?: number | null
+  provider_type?: string
+  provider_settings?: Record<string, unknown>
+}
+
 /** A library file, as the picker lists it. */
 export interface PanelMediaRecord {
   id: string
@@ -598,7 +667,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-amounts-field.tsx

@@ -0,0 +1,93 @@
+import { currencyParts, isCurrencyCode } from '@spree/core'
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from '@spree/dashboard-ui'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { amountForCurrency, applyCurrencyAmount } from '../lib/currency-amounts'
+
+/**
+ * The amount an amount-based delivery calculator charges, one input per
+ * currency the store sells in, written to the per-currency `amounts`
+ * preference. A currency left blank has no amount, and the method is not
+ * offered to those carts. A single-currency store sees one plain amount
+ * field.
+ */
+export function CurrencyAmountsField({
+  values,
+  onChange,
+  currencies,
+  defaultCurrency,
+  error,
+}: {
+  values: Record<string, unknown>
+  onChange: (next: Record<string, unknown>) => void
+  /** The currencies the store sells in. */
+  currencies: readonly string[]
+  defaultCurrency: string
+  error?: { message?: string }
+}) {
+  const { t, i18n } = useTranslation()
+
+  // The store's currency list is the source of truth, but a method may already
+  // carry an amount in a currency the store has since stopped selling in —
+  // dropping that input would silently discard the amount on the next save.
+  const amounts = (values.amounts ?? {}) as Record<string, unknown>
+  const extraCodes = Object.keys(amounts).join(',')
+  const codes = useMemo(() => {
+    const supported = currencies.length > 0 ? currencies : [defaultCurrency]
+    const extra = extraCodes
+      .split(',')
+      .filter(isCurrencyCode)
+      .filter((code) => !supported.includes(code))
+    return [defaultCurrency, ...supported.filter((code) => code !== defaultCurrency), ...extra]
+  }, [currencies, defaultCurrency, extraCodes])
+
+  const multiCurrency = codes.length > 1
+
+  function amountFor(code: string): string {
+    const raw = amountForCurrency(values, code, defaultCurrency)
+    return raw === null ? '' : String(raw)
+  }
+
+  return (
+    <Field>
+      <FieldLabel htmlFor={`calculator-amount-${defaultCurrency}`}>
+        {t('admin.currency_amounts.label')}
+      </FieldLabel>
+      <div className="flex flex-col gap-2">
+        {codes.map((code) => (
+          <InputGroup key={code}>
+            <InputGroupAddon>
+              <InputGroupText>{currencyParts(code, i18n.language).symbol}</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput
+              id={`calculator-amount-${code}`}
+              type="number"
+              step="any"
+              min="0"
+              aria-label={t('admin.currency_amounts.amount_in_currency', { currency: code })}
+              value={amountFor(code)}
+              onChange={(event) =>
+                onChange(applyCurrencyAmount(values, code, event.target.value, defaultCurrency))
+              }
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>{code}</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+        ))}
+      </div>
+      {multiCurrency && (
+        <span className="text-muted-foreground text-xs">{t('admin.currency_amounts.help')}</span>
+      )}
+      <FieldError errors={[error]} />
+    </Field>
+  )
+}

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`

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/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'

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>
+  )
+}