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

package/dist/vite/discover.js

@@ -20,10 +20,13 @@ function discoverDashboardPluginManifests({ root, onWarn }, names) {
       manifests.push({ name });
       continue;
     }
-    const routes = pkg.spree?.dashboard?.routes;
+    const marker = pkg.spree?.dashboard;
+    const resolveDir = (dir) => dir ? path.resolve(path.dirname(manifestPath), dir) : void 0;
     manifests.push({
       name,
-      routesDir: routes ? linkedPackagePath(root, name, path.resolve(path.dirname(manifestPath), routes)) : void 0
+      routesDir: resolveDir(marker?.routes),
+      authenticatedRoutesDir: resolveDir(marker?.authenticatedRoutes),
+      publicRoutesDir: resolveDir(marker?.publicRoutes)
     });
   }
   return manifests;
@@ -63,17 +66,9 @@ function discoverDashboardPlugins({ root, onWarn }) {
   }
   return discovered;
 }
-function linkedPackagePath(root, packageName, resolvedPath) {
-  const realPath = fs.realpathSync(resolvedPath);
-  for (let dir = root; ; dir = path.dirname(dir)) {
-    const link = path.join(dir, "node_modules", packageName);
-    if (fs.existsSync(path.join(link, "package.json"))) {
-      const inside = path.relative(fs.realpathSync(link), realPath);
-      if (inside.startsWith("..") || path.isAbsolute(inside)) return resolvedPath;
-      return path.join(link, inside);
-    }
-    if (path.dirname(dir) === dir) return resolvedPath;
-  }
+function resolveShellRoutesDir(root, packageName) {
+  const require2 = createRequire(path.join(root, "package.json"));
+  return path.join(path.dirname(fs.realpathSync(require2.resolve(packageName))), "routes");
 }
 function resolveManifest(pkg, require2) {
   try {
@@ -98,5 +93,5 @@ function resolveManifest(pkg, require2) {
 export {
   discoverDashboardPluginManifests,
   discoverDashboardPlugins,
-  linkedPackagePath
+  resolveShellRoutesDir
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "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",
@@ -67,11 +67,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.2.4",
-    "@types/spark-md5": "^3.0.5",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "lucide-react": "^1.47.0",
-    "spark-md5": "^3.0.2",
     "zod": "^4.4.3"
   },
   "devDependencies": {
@@ -81,8 +79,8 @@
     "typescript": "~6.0.3",
     "vite": "^8.0.16",
     "vitest": "^4.1.5",
-    "@spree/admin-sdk": "^1.0.0-rc.1",
-    "@spree/dashboard-ui": "^1.0.0-rc.1"
+    "@spree/dashboard-ui": "^1.0.0-rc.3",
+    "@spree/admin-sdk": "^1.0.0-rc.2"
   },
   "scripts": {
     "lint": "biome check src",

package/src/api-client.ts

@@ -14,7 +14,7 @@
  * promise the seller panel methods its API does not have.
  */
 
-import type { PermissionRule } from '@spree/admin-sdk'
+import type { CountryCode, PermissionRule, UploadFileOptions } from '@spree/admin-sdk'
 
 /** What a panel may change on the signed-in person's own account. */
 export interface PanelAccountParams {
@@ -23,11 +23,11 @@ export interface PanelAccountParams {
   /** The panel's UI language, as a bundle code the panel ships (e.g. `de`). */
   selected_locale?: string
   /**
-   * ActiveStorage signed id to set the photo, or `null` to remove it. Omit to
+   * A `signed_id` from an upload to set the photo, or `null` to remove it. Omit to
    * leave the current one alone — the only field here where `null` means
    * something the API acts on.
    */
-  avatar?: string | null
+  avatar_signed_id?: string | null
 }
 
 /**
@@ -105,19 +105,15 @@ export interface PanelApiClient {
    * fulfillments, so they retire one by deactivating it.
    */
   /**
-   * Exchanges blob metadata for a presigned upload URL.
+   * Uploads a file through the panel's own `POST /files` and resolves to its
+   * `signed_id`.
    *
    * Registered rather than imported for the same reason as everything else
    * here: the shared upload field would otherwise work only in the
    * operator's panel, and a seller uploading an onboarding document would
    * get a 401 from an API they hold no key for.
    */
-  createDirectUpload?(params: {
-    blob: { filename: string; byte_size: number; checksum: string; content_type: string }
-  }): Promise<{
-    direct_upload: { url: string; headers: Record<string, string> }
-    signed_id: string
-  }>
+  uploadFile?(file: File, options: UploadFileOptions): Promise<{ signed_id: string }>
   /**
    * Writes the signed-in person's own account — their name, photo and the
    * panel's language.
@@ -304,16 +300,6 @@ export interface PanelApiClient {
   tags?: {
     list(params?: Record<string, unknown>): Promise<{ data: Array<{ name: string }> }>
   }
-  /**
-   * Currency-to-locale pairs, which is what tells a money field whether
-   * `34,56` is thirty-four and a half or three thousand. The operator's
-   * markets answer it; a panel that registers none falls back to the UI
-   * language, the same answer the operator's hook gives for an unmatched
-   * currency.
-   */
-  markets?: {
-    list(params?: Record<string, unknown>): Promise<{ data: PanelMarket[] }>
-  }
 }
 
 export interface PanelDeliveryProfile extends PanelNamedRecord {
@@ -427,7 +413,7 @@ export interface PanelImport {
   completed_rows_count: number
   failed_rows_count: number
   processing_errors?: string | null
-  preferred_delimiter?: string
+  delimiter?: string
   schema_fields: Array<{ name: string; label: string; required: boolean }>
   csv_headers: string[]
   sample_row: Record<string, string | null>
@@ -465,10 +451,10 @@ export interface PanelImportRow {
 
 export interface PanelImportCreateParams {
   type: string
-  /** Signed blob id of the already direct-uploaded CSV. */
-  attachment: string
+  /** The `signed_id` of the already uploaded CSV. */
+  attachment_signed_id: string
   /** CSV column separator — the four both APIs accept. */
-  preferred_delimiter?: PanelImportDelimiter
+  delimiter?: PanelImportDelimiter
   /** The price list a `price_list_prices` import merges into. */
   price_list_id?: string
   results_url?: string
@@ -481,13 +467,6 @@ export interface PanelImportCompleteMappingParams {
   mappings?: Array<{ schema_field: string; file_column: string | null }>
 }
 
-/** A market, as the money fields read it. */
-export interface PanelMarket {
-  id: string
-  currency?: string | null
-  default_locale?: string | null
-}
-
 /**
  * What either panel sends to queue an export.
  *
@@ -593,7 +572,7 @@ export interface PanelStockLocation {
   zipcode?: string | null
   phone?: string | null
   company?: string | null
-  country_code?: string | null
+  country_code?: CountryCode | null
   state_code?: string | null
   state_name?: string | null
   /** Rendered read-only in the table; either panel's serializer derives it. */
@@ -635,9 +614,8 @@ export type PanelStockLocationCreateParams = PanelStockLocationParams & { name:
  * install.
  */
 export interface PanelCountry {
-  iso: string
+  iso: CountryCode
   iso3: string
-  name: string
   states_required?: boolean
   zipcode_required?: boolean
   states?: Array<{ abbr: string; name: string }>
@@ -684,3 +662,13 @@ export function getApiClient(): PanelApiClient {
 export function hasApiClient(): boolean {
   return registered !== null
 }
+
+/**
+ * Hands filters built at runtime to a typed SDK list method. A table builds
+ * its filters from its column definitions, and a page shared by both panels
+ * sends the same keys to two APIs with different filter types, so neither can
+ * be checked by the compiler; the API validates them instead.
+ */
+export function runtimeListParams<P>(params?: Record<string, unknown>): P {
+  return params as P
+}

package/src/components/address-form-dialog.test.ts

@@ -17,9 +17,9 @@ describe('resolveAddressCountryCode', () => {
     expect(resolveAddressCountryCode({ country_code: null }, 'FR')).toBe('FR')
   })
 
-  it('stays empty when neither the address nor the store has a country', () => {
-    expect(resolveAddressCountryCode(null, null)).toBe('')
-    expect(resolveAddressCountryCode(undefined, undefined)).toBe('')
-    expect(resolveAddressCountryCode({ country_code: '' }, '')).toBe('')
+  it('stays unset when neither the address nor the store has a country', () => {
+    expect(resolveAddressCountryCode(null, null)).toBeUndefined()
+    expect(resolveAddressCountryCode(undefined, undefined)).toBeUndefined()
+    expect(resolveAddressCountryCode({ country_code: '' }, '')).toBeUndefined()
   })
 })

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

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import type { CountryCode } from '@spree/admin-sdk'
 import {
   Button,
   Checkbox,
@@ -17,10 +18,11 @@ import {
   SheetTitle,
 } from '@spree/dashboard-ui'
 import { useEffect, useRef } from 'react'
-import { Controller, useForm } from 'react-hook-form'
+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 { useOptionalStore } from '../providers/store-provider'
 import { CountryCombobox } from './country-combobox'
 import { StateCombobox, useCountryStates } from './country-state-fields'
@@ -33,7 +35,7 @@ export interface AddressParams {
   address2: string
   city: string
   postal_code: string
-  country_code: string
+  country_code: CountryCode
   state_code: string
   phone: string
   label?: string
@@ -55,10 +57,7 @@ const addressFormFields = {
     .string()
     .trim()
     .min(1, { error: requiredMessage('address.postal_code') }),
-  country_code: z
-    .string()
-    .trim()
-    .min(1, { error: requiredMessage('country_code') }),
+  country_code: countryCodeSchema,
   state_code: z.string(),
   phone: z.string(),
   label: z.string(),
@@ -139,14 +138,15 @@ export interface EditableAddress {
 export function resolveAddressCountryCode(
   address: EditableAddress | null | undefined,
   storeDefaultCountryCode?: string | null,
-): string {
-  return address?.country_code || storeDefaultCountryCode || ''
+): CountryCode | undefined {
+  const countryCode = address?.country_code || storeDefaultCountryCode
+  return isCountryCode(countryCode) ? countryCode : undefined
 }
 
 function buildDefaults(
   address: EditableAddress | null | undefined,
   storeDefaultCountryCode?: string | null,
-): AddressFormValues {
+): DefaultValues<AddressFormValues> {
   return {
     first_name: address?.first_name ?? '',
     last_name: address?.last_name ?? '',
@@ -228,7 +228,7 @@ export function AddressFormDialog({
   // picked a different country is not overwritten.
   useEffect(() => {
     if (address?.country_code) return
-    if (!storeDefaultCountryCode) return
+    if (!isCountryCode(storeDefaultCountryCode)) return
     if (form.getValues('country_code')) return
     form.setValue('country_code', storeDefaultCountryCode)
   }, [address?.country_code, storeDefaultCountryCode, form])

package/src/components/app-shell.tsx

@@ -31,6 +31,7 @@ export function AppShell({
   inSettings,
   uiLocales,
   onEditProfile,
+  notifications,
   children,
 }: {
   /** Prefix for the nav links. Defaults to the route's `storeId`. */
@@ -43,6 +44,11 @@ export function AppShell({
   uiLocales?: ReadonlyArray<{ code: string; name: string }>
   /** Opens the app's edit-profile dialog from the account menu. */
   onEditProfile?: () => void
+  /**
+   * A control shown beside the account menu, such as the dashboard's
+   * notifications bell. The seller panel passes none.
+   */
+  notifications?: ReactNode
   children: ReactNode
 }) {
   // The settings area brings a full-width nav of its own, and two stacked
@@ -83,6 +89,7 @@ export function AppShell({
         header={sidebarHeader}
         uiLocales={uiLocales}
         onEditProfile={onEditProfile}
+        notifications={notifications}
       />
       {/* The sheet is exactly as tall as the viewport and scrolls internally,
           rather than growing with the page and letting the document scroll.
@@ -129,7 +136,11 @@ export function AppShell({
           tabIndex={-1}
           className="themed-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto me-[5px] outline-none"
         >
-          <MobileTopBar uiLocales={uiLocales} onEditProfile={onEditProfile} />
+          <MobileTopBar
+            uiLocales={uiLocales}
+            onEditProfile={onEditProfile}
+            notifications={notifications}
+          />
           <SheetTopBar tenantId={tenantId} inSettings={inSettings} />
           <MobileBreadcrumbBar
             tenantId={tenantId}

package/src/components/app-sidebar.tsx

@@ -129,6 +129,7 @@ export function AppSidebar({
   header,
   uiLocales,
   onEditProfile,
+  notifications,
   ...props
 }: ComponentProps<typeof Sidebar> & {
   /**
@@ -142,11 +143,13 @@ export function AppSidebar({
   uiLocales?: ReadonlyArray<{ code: string; name: string }>
   /** Opens the app's edit-profile dialog from the account menu. */
   onEditProfile?: () => void
+  /** Shown beside the account menu, such as a notifications bell. */
+  notifications?: ReactNode
 }) {
   const { i18n } = useTranslation()
   const { storeId } = useParams({ strict: false }) as { storeId?: string }
   const { navItems, bottomItems, isLoading } = useNavItems(tenantId ?? storeId ?? 'default')
-  const { isMobile } = useSidebar()
+  const { isMobile, state } = useSidebar()
 
   return (
     <Sidebar collapsible="icon" variant="inset" side={primarySidebarSide(i18n.language)} {...props}>
@@ -190,7 +193,20 @@ export function AppSidebar({
           list fades out above it rather than scrolling it away. */}
       {!isLoading && !isMobile && <NavBottom items={bottomItems} className="py-2" />}
       <SidebarFooter className="hidden md:flex">
-        <SidebarUser uiLocales={uiLocales} onEditProfile={onEditProfile} />
+        {/* In icon mode the rail is too narrow for a row, so the control
+            stacks above the avatar. */}
+        <div
+          className={
+            state === 'collapsed'
+              ? 'flex flex-col-reverse items-center gap-1'
+              : 'flex items-center gap-1'
+          }
+        >
+          <div className="min-w-0 flex-1">
+            <SidebarUser uiLocales={uiLocales} onEditProfile={onEditProfile} />
+          </div>
+          {notifications}
+        </div>
       </SidebarFooter>
     </Sidebar>
   )

package/src/components/country-combobox.tsx

@@ -1,3 +1,4 @@
+import type { CountryCode } from '@spree/admin-sdk'
 import {
   Combobox,
   ComboboxButtonTrigger,
@@ -18,14 +19,15 @@ 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: string; iso3: string; name: string }
+export type CountryOption = { iso: CountryCode; iso3: string }
 
 /**
- * Resolves a country's display name in the admin UI language (keyed on the
- * stable ISO code), falling back to the API's backend-locale `name` when the
- * runtime lacks coverage. Exported so every country-labelled surface
- * (pickers, grid cells) reads the same.
+ * Resolves a country's display name in the admin UI language from its ISO
+ * code, falling back to the code when the runtime has no name for it.
+ * Exported so every country-labelled surface (pickers, grid cells) reads the
+ * same.
  *
  * The resolver is referentially stable across renders — callers feed it into
  * `useMemo` deps, and a fresh closure each render would rebuild every derived
@@ -34,32 +36,37 @@ export type CountryOption = { iso: string; iso3: string; name: string }
 export function useCountryDisplayName() {
   const displayName = useDisplayName('region')
   return useCallback(
-    (country: CountryOption) => displayName(country.iso) ?? country.name,
+    (country: { iso: string }) => displayName(country.iso) ?? country.iso,
     [displayName],
   )
 }
 
 /**
- * Case-insensitive substring match against name, iso, and iso3 so the user
- * can find a country by typing "United States", "US", or "USA". Both pickers
- * filter the cached `useCountries()` list client-side — countries are a
- * ~250-row static set, so there's no remote search. Mirrors the server-side
- * `search` Ransack scope (`Spree::Country.search`).
+ * Sorts any list of countries by the name the admin reads, collated in the
+ * admin's language (a Swedish admin sees Österrike after Zimbabwe). Each name
+ * is resolved once per sort. The API cannot do this: it answers in ISO order
+ * and does not know the reader's language.
  */
-export function countryFilter(item: CountryOption, query: string): boolean {
-  const q = query.trim().toLowerCase()
-  if (!q) return true
-  return (
-    item.name.toLowerCase().includes(q) ||
-    item.iso.toLowerCase().includes(q) ||
-    item.iso3.toLowerCase().includes(q)
+export function useSortByCountryName() {
+  const countryName = useCountryDisplayName()
+  const { i18n } = useTranslation()
+  const collator = useMemo(() => new Intl.Collator(i18n.language), [i18n.language])
+  return useCallback(
+    <T,>(items: readonly T[], isoOf: (item: T) => string): T[] =>
+      items
+        .map((item) => ({ item, name: countryName({ iso: isoOf(item) }) }))
+        .sort((left, right) => collator.compare(left.name, right.name))
+        .map(({ item }) => item),
+    [countryName, collator],
   )
 }
 
 /**
- * Filter that also matches the LOCALIZED country name shown to the user (not
- * just the raw backend `name` / ISO codes), so typing a translated label finds
- * its country. Memoized on the display-name resolver.
+ * Case-insensitive substring match against the country's name in the admin's
+ * language, its ISO code and its ISO3 code, so typing "Deutschland", "DE" or
+ * "DEU" finds it. Both pickers filter the cached `useCountries()` list
+ * client-side — countries are a ~250-row static set, so there's no remote
+ * search. Memoized on the display-name resolver.
  */
 function useCountryFilter() {
   const countryName = useCountryDisplayName()
@@ -67,7 +74,11 @@ function useCountryFilter() {
     () => (item: CountryOption, query: string) => {
       const q = query.trim().toLowerCase()
       if (!q) return true
-      return countryName(item).toLowerCase().includes(q) || countryFilter(item, query)
+      return (
+        countryName(item).toLowerCase().includes(q) ||
+        item.iso.toLowerCase().includes(q) ||
+        item.iso3.toLowerCase().includes(q)
+      )
     },
     [countryName],
   )
@@ -88,12 +99,20 @@ function CountryRow({ country, label }: { country: CountryOption; label: string
   )
 }
 
-/** Maps the cached country list onto the flat option shape both pickers use. */
+/**
+ * Maps the cached country list onto the flat option shape both pickers use,
+ * sorted by the name the admin reads (the API answers in ISO order).
+ */
 function useCountryOptions(): CountryOption[] {
   const { countries } = useCountries()
+  const sortByName = useSortByCountryName()
   return useMemo(
-    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
-    [countries],
+    () =>
+      sortByName(
+        countries.map((c) => ({ iso: c.iso, iso3: c.iso3 })),
+        (c) => c.iso,
+      ),
+    [countries, sortByName],
   )
 }
 
@@ -118,7 +137,8 @@ export function CountryCombobox({
   /** Forwarded to the trigger so a `<FieldLabel htmlFor>` can target it. */
   id?: string
   value: string | null | undefined
-  onValueChange: (iso: string) => void
+  /** Fires with the picked code, or `''` when the selection is cleared. */
+  onValueChange: (iso: CountryCode | '') => void
   /** Forwarded to the trigger so RHF's `<Controller>` can track touched state. */
   onBlur?: () => void
   /** Trigger text while nothing is selected. */
@@ -204,9 +224,9 @@ export function CountryMultiCombobox({
   disabled = false,
 }: {
   /** Selected 2-letter ISO codes. */
-  value: string[]
+  value: readonly string[]
   /** Fires with the next array of ISO codes. */
-  onValueChange: (isos: string[]) => void
+  onValueChange: (isos: CountryCode[]) => void
   placeholder?: string
   emptyText?: string
   disabled?: boolean
@@ -222,7 +242,10 @@ export function CountryMultiCombobox({
   // strings. Selected ISOs not yet present in `items` (list still loading)
   // fall back to a stub so chips don't vanish on first render.
   const selected = useMemo<CountryOption[]>(
-    () => value.map((iso) => items.find((c) => c.iso === iso) ?? { iso, iso3: '', name: iso }),
+    () =>
+      value
+        .filter(isCountryCode)
+        .map((iso) => items.find((c) => c.iso === iso) ?? { iso, iso3: '' }),
     [value, items],
   )
 

package/src/components/currency-select.tsx

@@ -1,3 +1,4 @@
+import type { CurrencyCode } from '@spree/admin-sdk'
 import {
   Combobox,
   ComboboxButtonTrigger,
@@ -11,6 +12,7 @@ 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'
@@ -29,14 +31,14 @@ interface CurrencySelectProps {
   /** Controlled value. Pair with `onChange` to lift state out. */
   value?: string
   /** Fires on every selection change. */
-  onChange?: (currency: string) => void
+  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
    * contexts where the merchant chooses a currency the store doesn't yet
    * support — e.g. a market's currency.
    */
-  options?: string[]
+  options?: readonly CurrencyCode[]
   /**
    * Announces the field as required to assistive technology (`aria-required`).
    * It does not enforce anything: the trigger is a button, so there is no
@@ -106,10 +108,10 @@ export function CurrencySelect({
   // falls back to the store's currencies rather than an empty picker.
   const items = useMemo(() => {
     const base = options?.length ? options : currencies
-    return value && !base.includes(value) ? [value, ...base] : base
+    return isCurrencyCode(value) && !base.includes(value) ? [value, ...base] : base
   }, [options, currencies, value])
 
-  const handleChange = (next: string) => {
+  const handleChange = (next: CurrencyCode) => {
     if (!isControlled) setInternalValue(next)
     onChange?.(next)
   }
@@ -122,7 +124,7 @@ export function CurrencySelect({
 
   // Case-insensitive match against the code and its localized name so typing
   // "EUR" or "Euro" both find it.
-  const filter = (code: string, query: string) => {
+  const filter = (code: CurrencyCode, query: string) => {
     const q = query.trim().toLowerCase()
     if (!q) return true
     return code.toLowerCase().includes(q) || renderOption(code).toLowerCase().includes(q)
@@ -137,10 +139,14 @@ export function CurrencySelect({
       {hiddenInput}
       <Combobox
         items={items}
-        value={value}
-        onValueChange={(next: string | null) => handleChange(next ?? '')}
-        itemToStringLabel={(code: string | null) => (code ? renderOption(code) : '')}
-        itemToStringValue={(code: string | null) => code ?? ''}
+        value={isCurrencyCode(value) ? value : null}
+        // Nothing on the picker clears it, so a null selection is not a choice
+        // to report.
+        onValueChange={(next: CurrencyCode | null) => {
+          if (next) handleChange(next)
+        }}
+        itemToStringLabel={(code: CurrencyCode | null) => (code ? renderOption(code) : '')}
+        itemToStringValue={(code: CurrencyCode | null) => code ?? ''}
         filter={filter}
         disabled={disabled}
       >
@@ -169,7 +175,7 @@ export function CurrencySelect({
           />
           <ComboboxEmpty>{t('admin.components.currency_select.empty')}</ComboboxEmpty>
           <ComboboxList>
-            {(code: string) => (
+            {(code: CurrencyCode) => (
               <ComboboxItem key={code} value={code}>
                 {renderOption(code)}
               </ComboboxItem>

package/src/components/file-upload-field.tsx

@@ -15,7 +15,7 @@ import {
 import { FileIcon, UploadCloudIcon, XIcon } from '@spree/dashboard-ui/icons'
 import { type ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDirectUpload } from '../hooks/use-direct-upload'
+import { useFileUpload } from '../hooks/use-file-upload'
 
 /**
  * Controlled upload state. A field is in exactly one of three states:
@@ -89,7 +89,7 @@ export interface FileUploadFieldProps {
 }
 
 /**
- * Universal single-file upload field backed by ActiveStorage direct upload.
+ * Universal single-file upload field backed by `POST /files`.
  * Picking or dropping a file uploads it immediately; the attached file (or
  * the persisted server-side one) renders as an `Attachment` with a remove
  * action. Fully controlled — the consumer maps {@link FileUploadValue} onto
@@ -115,7 +115,7 @@ export function FileUploadField({
   onUploadingChange,
 }: FileUploadFieldProps) {
   const { t } = useTranslation()
-  const directUpload = useDirectUpload({ private: privateStorage })
+  const fileUpload = useFileUpload({ visibility: privateStorage ? 'private' : 'public' })
   const [pending, setPending] = useState<File | null>(null)
 
   const isImage = variant === 'image'
@@ -153,7 +153,7 @@ export function FileUploadField({
     setPending(file)
     onUploadingChange?.(true)
     try {
-      const result = await directUpload.mutateAsync(file)
+      const result = await fileUpload.mutateAsync(file)
       // Revoke a preview we're replacing in-place; the object URL otherwise
       // lives in caller-owned state, so its lifetime is their responsibility
       // (a hidden-then-shown card must not remount with a dead URL).

package/src/components/import-button.tsx

@@ -75,7 +75,7 @@ interface ImportButtonProps {
 
 /**
  * Toolbar entry point for CSV imports: opens a Sheet with the upload form
- * (file, delimiter, template download). The CSV direct-uploads on pick via
+ * (file, delimiter, template download). The CSV uploads on pick via
  * `FileUploadField`; submitting creates the import from the signed blob id
  * and hands it to `onCreated`.
  */
@@ -190,6 +190,9 @@ export function ImportButton({
               // Windows browsers report `.csv` as `application/vnd.ms-excel`,
               // which the server's content-type validation rejects.
               transformFile={(picked) => new File([picked], picked.name, { type: 'text/csv' })}
+              // Imports are kept on private storage: a CSV can carry
+              // customer data.
+              private
             />
 
             <Field>