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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-rc.4",
+  "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",
@@ -69,7 +69,8 @@
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
     "lucide-react": "^1.58.0",
-    "zod": "^4.6.7"
+    "zod": "^4.6.7",
+    "@spree/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -78,8 +79,8 @@
     "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/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`

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

package/src/components/table-toolbar.tsx

@@ -1,3 +1,4 @@
+import type { FilterPredicate } from '@spree/core'
 import {
   Button,
   Checkbox,
@@ -36,7 +37,7 @@ import {
   XIcon,
 } from '@spree/dashboard-ui/icons'
 import { useQuery } from '@tanstack/react-query'
-import { useCallback, useDeferredValue, useMemo, useState } from 'react'
+import { Fragment, useCallback, useDeferredValue, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getApiClient } from '../api-client'
 import { useAuth } from '../hooks/use-auth'
@@ -55,6 +56,7 @@ import {
 } from '../lib/table-registry'
 import { useOptionalStore } from '../providers/store-provider'
 import { useTenantId } from '../providers/tenant-provider'
+import { LocaleLabel, useLocaleLabel } from './locale-select'
 import { StoreDatePicker } from './store-date-picker'
 
 interface TableToolbarProps {
@@ -81,7 +83,16 @@ interface TableToolbarProps {
 
 // Operator labels are stored as i18n keys (`admin.components.table_toolbar.operators.*`)
 // and resolved with `t()` at render time so they follow the active language.
-const operatorsByType: Record<string, { value: string; labelKey: string }[]> = {
+type OperatorOption = { value: FilterPredicate; labelKey: string }
+
+const storeCodeOperators: OperatorOption[] = [
+  { value: 'eq', labelKey: 'admin.components.table_toolbar.operators.is' },
+  { value: 'not_eq', labelKey: 'admin.components.table_toolbar.operators.is_not' },
+  { value: 'in', labelKey: 'admin.components.table_toolbar.operators.is_any_of' },
+  { value: 'not_in', labelKey: 'admin.components.table_toolbar.operators.is_none_of' },
+]
+
+const operatorsByType: Record<string, OperatorOption[]> = {
   string: [
     // `i_cont` (case-insensitive) rather than `cont` — an admin typing
     // "2 years" expects to match "2 Years".
@@ -125,13 +136,9 @@ const operatorsByType: Record<string, { value: string; labelKey: string }[]> = {
     { value: 'not_in', labelKey: 'admin.components.table_toolbar.operators.is_none_of' },
   ],
   // Same shape as `enum` — the value picker just sources its option list
-  // from the active store's `supported_currencies`.
-  currency: [
-    { value: 'eq', labelKey: 'admin.components.table_toolbar.operators.is' },
-    { value: 'not_eq', labelKey: 'admin.components.table_toolbar.operators.is_not' },
-    { value: 'in', labelKey: 'admin.components.table_toolbar.operators.is_any_of' },
-    { value: 'not_in', labelKey: 'admin.components.table_toolbar.operators.is_none_of' },
-  ],
+  // from the currencies / languages of the active store's markets.
+  currency: storeCodeOperators,
+  locale: storeCodeOperators,
 }
 
 function getOperators(type: string) {
@@ -155,7 +162,7 @@ const noValueOperators = ['present', 'blank']
 
 /** Stable empty list, so a panel with no store doesn't rebuild `items` (and
  *  re-emit Base UI Select state) on every render. */
-const noCurrencies: string[] = []
+const noCodes: string[] = []
 
 // ============================================================================
 // TableToolbar
@@ -489,6 +496,15 @@ function FilterChip({
               <ResourceFilterValue value={first.value} config={col.filterResource} />
             ) : col?.filterType === 'tags' ? (
               <span>{parseFilterIds(first.value).join(', ')}</span>
+            ) : col?.filterType === 'locale' ? (
+              <span>
+                {parseFilterIds(first.value).map((code, index) => (
+                  <Fragment key={code}>
+                    {index > 0 && ', '}
+                    <LocaleLabel code={code} />
+                  </Fragment>
+                ))}
+              </span>
             ) : col?.filterType === 'enum' && col.filterOptions ? (
               <span>
                 {parseFilterIds(first.value)
@@ -515,6 +531,25 @@ function FilterChip({
   )
 }
 
+/**
+ * The whole option list of a resource small enough to fetch once (`listAll`),
+ * cached under `[queryKey, tenant, 'all']` — the key the resource's own
+ * full-list hook uses, so filters and the rest of the dashboard share one
+ * fetch that the resource's writes invalidate.
+ */
+function useListAll(
+  config: ColumnDef['filterResource'],
+  tenantId: string | undefined,
+  enabled = true,
+) {
+  return useQuery({
+    queryKey: [config?.queryKey, tenantId, 'all'],
+    queryFn: () => config?.listAll?.() ?? Promise.resolve({ data: [] }),
+    enabled: enabled && Boolean(config?.listAll),
+    staleTime: config?.staleTime ?? 60_000,
+  })
+}
+
 /**
  * Hydrates the CSV id list in a resource filter into human labels. Reuses
  * the resource's `hydrate` callback so each chip benefits from React Query's
@@ -530,19 +565,21 @@ function ResourceFilterValue({
   const tenantId = useTenantId()
   const ids = useMemo(() => parseFilterIds(value), [value])
 
-  const { data } = useQuery({
+  const all = useListAll(config, tenantId, ids.length > 0)
+  const hydrated = useQuery({
     // Tenant-scope the cache key so chips don't resolve against another
     // tenant's hydrate results after a store or seller switch.
-    queryKey: ['filter-chip', config.queryKey, tenantId, ids],
+    queryKey: [config.queryKey, tenantId, 'filter-chip', ids],
     queryFn: () => config.hydrate(ids),
-    enabled: ids.length > 0,
-    staleTime: 60_000,
+    enabled: ids.length > 0 && !config.listAll,
+    staleTime: config.staleTime ?? 60_000,
   })
+  const records = config.listAll ? all.data?.data : hydrated.data?.data
 
   if (ids.length === 0) return null
 
   const labels = ids.map((id) => {
-    const record = data?.data.find((r) => r.id === id)
+    const record = records?.find((r) => r.id === id)
     return record ? config.getOptionLabel(record) : id
   })
 
@@ -768,12 +805,7 @@ function QuickResourceFilter({
     [existingValue],
   )
 
-  const { data } = useQuery({
-    queryKey: ['quick-filter-all', config.queryKey, tenantId],
-    queryFn: () => config.listAll?.() ?? Promise.resolve({ data: [] }),
-    enabled: !!config.listAll,
-    staleTime: 60_000,
-  })
+  const { data } = useListAll(config, tenantId)
   const options = useMemo(
     () =>
       (data?.data ?? []).map((item) => ({ value: item.id, label: config.getOptionLabel(item) })),
@@ -1101,10 +1133,15 @@ function InlineValueList({
   const tagsClient = getApiClient().tags
   const isTags = column.filterType === 'tags'
   const isCurrency = column.filterType === 'currency'
-  // `filterType: 'currency'` is only declared by tables in the operator's
-  // dashboard, which always has a store. Reading it optionally keeps the panel
-  // mountable in one that has none.
-  const currencies = useOptionalStore()?.currencies ?? noCurrencies
+  const isLocale = column.filterType === 'locale'
+  // Store codes are listed client-side from the store payload, never searched.
+  const isStoreCode = isCurrency || isLocale
+  // `filterType: 'currency'` / `'locale'` are only declared by tables in the
+  // operator's dashboard, which always has a store. Reading it optionally
+  // keeps the panel mountable in one that has none.
+  const store = useOptionalStore()
+  const storeCodes = (isCurrency ? store?.currencies : isLocale ? store?.locales : null) ?? noCodes
+  const localeLabel = useLocaleLabel()
 
   // Tags arrive as one list and are filtered client-side; resources are
   // searched server-side, since their vocabulary is unbounded.
@@ -1129,18 +1166,23 @@ function InlineValueList({
   // genuinely new query reaches the network.
   const deferredQuery = useDeferredValue(query)
 
+  // A resource listed whole is fetched once and narrowed here as the operator
+  // types; anything larger is searched server-side.
+  const listed = Boolean(column.filterResource?.listAll)
+  const all = useListAll(column.filterResource, tenantId, !isTags && !isStoreCode)
+
   const resources = useQuery({
     // Tenant-scoped so a store or seller switch cannot reuse the previous
     // tenant's results.
-    queryKey: ['panel-resource-filter', column.filterResource?.queryKey, tenantId, deferredQuery],
+    queryKey: [column.filterResource?.queryKey, tenantId, 'panel-resource-filter', deferredQuery],
     queryFn: () => column.filterResource?.search(deferredQuery),
-    enabled: !isTags && !isCurrency && Boolean(column.filterResource),
+    enabled: !isTags && !isStoreCode && !listed && Boolean(column.filterResource),
     // These lists are reference data an operator reopens repeatedly while
     // narrowing one list, and the result is small now that only the displayed
     // fields are requested. Holding it for the session keeps reopening the
     // panel instant; `gcTime` outlives the unmount between opens.
-    staleTime: 5 * 60_000,
-    gcTime: 30 * 60_000,
+    staleTime: column.filterResource?.staleTime ?? 5 * 60_000,
+    gcTime: Math.max(30 * 60_000, column.filterResource?.staleTime ?? 0),
     // Keeps the previous matches on screen while the next query resolves, so
     // the list does not blank on every keystroke.
     //
@@ -1149,7 +1191,7 @@ function InlineValueList({
     // drops them instead of briefly offering another tenant's records as
     // though they were this one's.
     placeholderData: (previous, previousQuery) => {
-      const [, previousResource, previousTenant] = (previousQuery?.queryKey ?? []) as unknown[]
+      const [previousResource, previousTenant] = (previousQuery?.queryKey ?? []) as unknown[]
       const sameScope =
         previousResource === column.filterResource?.queryKey && previousTenant === tenantId
       return sameScope ? previous : undefined
@@ -1157,11 +1199,14 @@ function InlineValueList({
   })
 
   const options = useMemo(() => {
-    if (isCurrency) {
+    if (isStoreCode) {
       const needle = query.trim().toLowerCase()
-      return currencies
-        .filter((code) => !needle || code.toLowerCase().includes(needle))
-        .map((code) => ({ value: code, label: code }))
+      return storeCodes
+        .map((code) => ({
+          value: code,
+          label: isLocale ? localeLabel(code) : code,
+        }))
+        .filter((option) => !needle || option.label.toLowerCase().includes(needle))
     }
     if (isTags) {
       const names = tags.data?.data?.map((tag) => tag.name) ?? []
@@ -1171,11 +1216,29 @@ function InlineValueList({
     }
     const config = column.filterResource
     if (!config) return []
-    return (resources.data?.data ?? []).map((record) => ({
+    const records = (listed ? all.data?.data : resources.data?.data) ?? []
+    const resourceOptions = records.map((record) => ({
       value: record.id,
       label: config.getOptionLabel(record),
     }))
-  }, [isCurrency, currencies, isTags, tags.data, resources.data, column.filterResource, query])
+    if (!listed) return resourceOptions
+    const needle = query.trim().toLowerCase()
+    return resourceOptions.filter(
+      (option) => !needle || option.label.toLowerCase().includes(needle),
+    )
+  }, [
+    listed,
+    all.data,
+    isStoreCode,
+    isLocale,
+    storeCodes,
+    localeLabel,
+    isTags,
+    tags.data,
+    resources.data,
+    column.filterResource,
+    query,
+  ])
 
   // Values already selected when the list opens ride at the top, so an active
   // filter is visible without scrolling. The set is frozen at mount: ticking a
@@ -1191,7 +1254,7 @@ function InlineValueList({
     return [...chosen, ...rest]
   }, [options, pinned])
 
-  if (!isCurrency && (tags.isLoading || resources.isLoading)) {
+  if (!isStoreCode && (tags.isLoading || resources.isLoading || all.isLoading)) {
     return (
       <p className="px-2 py-6 text-center text-muted-foreground">{t('admin.common.loading')}</p>
     )
@@ -1274,7 +1337,7 @@ function FilterPanel({
   // Types whose values are chosen from a list rather than typed. `multi` ones
   // accumulate a set and need an explicit Apply; the single ones commit on the
   // click that picks them.
-  const multi = type === 'tags' || type === 'resource' || type === 'currency'
+  const multi = type === 'tags' || type === 'resource' || type === 'currency' || type === 'locale'
   // Dates are their own shape: a list of relative presets, with the calendar
   // behind "custom". Same presets the quick filter offers, so a range means
   // the same thing wherever it was set.
@@ -1653,7 +1716,7 @@ function FilterPanel({
               </Select>
             ) : null}
 
-            {/* Everything picked from a list — currency, tags, resources — or
+            {/* Everything picked from a list — currency, locale, tags, resources — or
                 from a calendar is handled above; this branch is only the types
                 you type into. */}
             {!noValueOperators.includes(operator) && listOptions.length === 0 && (