@spree/dashboard-core 6.0.3 → 6.0.4

package/dist/vite/index.js

@@ -5,7 +5,81 @@ import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
 import { discoverDashboardPlugins } from "./discover.js";
 function spreeDashboardPlugin(options = {}) {
-  return [dashboardProseMirrorDedupePlugin(), dashboardTailwindSourcePlugin(options), tailwindcss()];
+  return [
+    dashboardProseMirrorDedupePlugin(),
+    dashboardTailwindSourcePlugin(options),
+    tailwindcss(),
+    dashboardFontPreloadPlugin(),
+    dashboardPackagesPlugin()
+  ];
+}
+function dashboardPackagesPlugin() {
+  return {
+    name: "spree:dashboard-packages",
+    config(config) {
+      const root = path.resolve(config.root ?? process.cwd());
+      return { define: { __SPREE_PACKAGES__: JSON.stringify(installedSpreePackages(root)) } };
+    }
+  };
+}
+function installedSpreePackages(root) {
+  const versions = {};
+  const visit = (packageRoot, includeDev) => {
+    const manifest = readJson(path.join(packageRoot, "package.json"));
+    const dependencies = {
+      ...manifest?.dependencies,
+      ...manifest?.peerDependencies,
+      ...includeDev ? manifest?.devDependencies : {}
+    };
+    const require2 = createRequire(path.join(packageRoot, "package.json"));
+    for (const name of Object.keys(dependencies)) {
+      if (!name.startsWith("@spree/") || name in versions) continue;
+      const dependencyRoot = resolvePackageRoot(name, require2);
+      const dependency = dependencyRoot && readJson(path.join(dependencyRoot, "package.json"));
+      if (!dependencyRoot || !dependency || dependency.private) continue;
+      versions[name] = dependency.version;
+      visit(dependencyRoot, false);
+    }
+  };
+  visit(root, true);
+  return Object.fromEntries(Object.entries(versions).sort(([a], [b]) => a.localeCompare(b)));
+}
+function readJson(file) {
+  try {
+    return JSON.parse(fs.readFileSync(file, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+const PRELOADED_FONT_FILE = "inter-latin-opsz-normal.woff2";
+function dashboardFontPreloadPlugin() {
+  let base = "/";
+  return {
+    name: "spree:dashboard-font-preload",
+    apply: "build",
+    configResolved(config) {
+      base = config.base;
+    },
+    transformIndexHtml(_html, ctx) {
+      const font = Object.values(ctx.bundle ?? {}).find(
+        (file) => file.type === "asset" && file.names.includes(PRELOADED_FONT_FILE)
+      );
+      if (!font) return;
+      return [
+        {
+          tag: "link",
+          attrs: {
+            rel: "preload",
+            href: `${base}${font.fileName}`,
+            as: "font",
+            type: "font/woff2",
+            crossorigin: ""
+          },
+          injectTo: "head"
+        }
+      ];
+    }
+  };
 }
 function dashboardProseMirrorDedupePlugin() {
   return {
@@ -129,12 +203,13 @@ function formatPluginErrorOverlay(errors) {
   return lines.join("\n");
 }
 function resolvePackageSourceDir(pkg, require2) {
+  const packageRoot = resolvePackageRoot(pkg, require2);
+  return packageRoot && path.join(packageRoot, "src");
+}
+function resolvePackageRoot(pkg, require2) {
   try {
     const entryPath = require2.resolve(pkg);
-    const entryFile = entryPath.startsWith("file:") ? fileURLToPath(entryPath) : entryPath;
-    const packageRoot = findPackageRoot(entryFile);
-    if (!packageRoot) return null;
-    return path.join(packageRoot, "src");
+    return findPackageRoot(entryPath.startsWith("file:") ? fileURLToPath(entryPath) : entryPath);
   } catch {
     return null;
   }
@@ -151,5 +226,6 @@ function findPackageRoot(fromFile) {
 export {
   VIRTUAL_PLUGIN_MODULE_ID,
   generateVirtualPluginModule,
+  installedSpreePackages,
   spreeDashboardPlugin
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "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.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -49,45 +49,45 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@spree/admin-sdk": ">=6.0.3 <7.0.0-0",
-    "@spree/dashboard-ui": ">=6.0.3 <7.0.0-0",
+    "@spree/admin-sdk": ">=6.0.4 <7.0.0-0",
+    "@spree/dashboard-ui": ">=6.0.4 <7.0.0-0",
     "@tanstack/react-query": "^5.100.9",
     "@tanstack/react-router": "^1.169.2",
-    "i18next": "^26.2.0",
+    "i18next": "^26.2.0 || ^27.0.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.75.0",
-    "react-i18next": "^17.0.8"
+    "react-i18next": "^17.0.8 || ^18.0.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@hookform/resolvers": "^6.0.0",
-    "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-hotkeys": "0.16.0",
+    "@hookform/resolvers": "^7.0.5",
+    "@tailwindcss/vite": "^4.3.5",
+    "@tanstack/react-hotkeys": "0.23.0",
     "date-fns": "4.4.0",
     "date-fns-tz": "3.2.0",
-    "lucide-react": "1.60.0",
+    "lucide-react": "1.71.0",
     "zod": "^4.6.7",
-    "@spree/core": "^6.0.3"
+    "@spree/core": "^6.0.4"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^5.104.5",
-    "@tanstack/react-router": "^1.170.45",
+    "@tanstack/react-query": "^5.107.1",
+    "@tanstack/react-router": "^1.170.46",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "i18next": "^26.5.3",
+    "i18next": "^27.1.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "react-hook-form": "^7.90.0",
-    "react-i18next": "^17.1.0",
+    "react-hook-form": "^7.91.0",
+    "react-i18next": "^18.0.1",
     "tsup": "^9.0.0",
     "typescript": "~7.0.2",
-    "vite": "^8.3.4",
-    "vitest": "^5.0.5",
-    "@spree/dashboard-ui": "^6.0.3",
-    "@spree/admin-sdk": "^6.0.3"
+    "vite": "^8.3.7",
+    "vitest": "^5.1.0",
+    "@spree/admin-sdk": "^6.0.4",
+    "@spree/dashboard-ui": "^6.0.4"
   },
   "scripts": {
     "lint": "biome check src",

package/src/api-client.ts

@@ -212,7 +212,7 @@ export interface PanelApiClient {
    * A download is a bare `fetch`, not an SDK call, so it bypasses whatever
    * the client normally attaches — which on the seller panel is
    * `X-Spree-Seller-Id`, and without it every Seller API request is refused
-   * before the action runs. The admin panel needs none, so it registers none.
+   * before the action runs; on the admin panel, `X-Spree-Store-Id`.
    */
   downloadHeaders?(): Record<string, string>
   /**
@@ -265,6 +265,12 @@ export interface PanelApiClient {
    */
   mediaLibrary?: {
     list(params?: Record<string, unknown>): Promise<{ data: PanelMediaRecord[] }>
+    /** Adds an uploaded blob to the library, so the picker can offer uploads. */
+    create?(params: {
+      signed_id: string
+      alt?: string
+      media_type?: 'image' | 'video'
+    }): Promise<PanelMediaRecord>
   }
   /**
    * CSV imports, for whichever catalog this panel manages.

package/src/client.ts

@@ -1,4 +1,5 @@
 import { createAdminClient } from '@spree/admin-sdk'
+import { recordRequest } from './lib/developer-inspector'
 
 // `VITE_SPREE_API_URL` controls whether the SDK builds relative or absolute URLs.
 // Three deployment topologies, one code path:
@@ -22,4 +23,5 @@ const baseUrl = import.meta.env.VITE_SPREE_API_URL || ''
 export const adminClient = createAdminClient({
   baseUrl,
   // No initial token — auth-provider bootstraps via /auth/refresh on mount.
+  onRequestComplete: recordRequest,
 })

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

@@ -16,6 +16,7 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
+  useConfirm,
 } from '@spree/dashboard-ui'
 import { useEffect, useRef } from 'react'
 import { Controller, type DefaultValues, useForm } from 'react-hook-form'
@@ -53,10 +54,7 @@ const addressFormFields = {
     .string()
     .trim()
     .min(1, { error: requiredMessage('city') }),
-  postal_code: z
-    .string()
-    .trim()
-    .min(1, { error: requiredMessage('address.postal_code') }),
+  postal_code: z.string(),
   country_code: countryCodeSchema,
   state_code: z.string(),
   phone: z.string(),
@@ -99,6 +97,33 @@ const businessSchema = z.object({
 
 type AddressFormValues = z.infer<typeof personalSchema>
 
+/**
+ * The fields whose requirement depends on the chosen country. Checked in the
+ * schema rather than on submit, so they report alongside every other missing
+ * field instead of on a second attempt.
+ */
+function withCountryRules(
+  schema: typeof personalSchema | typeof businessSchema,
+  rules: { statesRequired: boolean; postalCodeRequired: boolean },
+) {
+  return schema.superRefine((values, ctx) => {
+    if (rules.statesRequired && !values.state_code.trim()) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['state_code'],
+        message: requiredMessage('state_code')(),
+      })
+    }
+    if (rules.postalCodeRequired && !values.postal_code.trim()) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['postal_code'],
+        message: requiredMessage('address.postal_code')(),
+      })
+    }
+  })
+}
+
 /** Address rows validate on `state`; every address form binds `state_code`. */
 const ADDRESS_SERVER_FIELD_ALIASES = { state: 'state_code' } as const satisfies Partial<
   Record<string, keyof AddressFormValues>
@@ -200,15 +225,43 @@ export function AddressFormDialog({
   const resolvedTitle = title ?? t('admin.components.address_form_dialog.edit_title')
   // Optional: the seller panel has no store context, so a new address there
   // stays country-empty rather than refusing to render.
-  const storeDefaultCountryCode = useOptionalStore()?.defaultCountry
+  const storeContext = useOptionalStore()
+  const storeDefaultCountryCode = storeContext?.defaultCountry
+  // Left unmarked rather than marked optional when the store asks for a
+  // phone: a stock location never requires one, so "required" would be wrong
+  // there.
+  const phoneOptional = !storeContext?.store?.address_requires_phone
   const form = useForm<AddressFormValues>({
     defaultValues: buildDefaults(address, storeDefaultCountryCode),
-    resolver: zodResolver(business ? businessSchema : personalSchema),
+    resolver: (values, context, options) =>
+      zodResolver(
+        withCountryRules(business ? businessSchema : personalSchema, countryRules.current),
+      )(values, context, options),
   })
-  const { errors } = form.formState
+  const { errors, isDirty } = form.formState
+  const confirm = useConfirm()
+  // Saving a filled-in address waits for a change. A blank one stays
+  // saveable, so pressing Save shows what is still missing.
+  const saveNeedsChange = Boolean(address?.address1)
+
+  // Closing with an edit asks first, whichever way the sheet is closed.
+  async function requestClose() {
+    if (isDirty && !isPending) {
+      const ok = await confirm({
+        title: t('admin.actions.discard_changes'),
+        message: t('admin.common.unsaved_changes'),
+        variant: 'destructive',
+        confirmLabel: t('admin.actions.discard'),
+      })
+      if (!ok) return
+    }
+    onOpenChange(false)
+  }
 
   const countryCode = form.watch('country_code')
-  const { states, statesRequired } = useCountryStates(countryCode)
+  const { states, statesRequired, postalCodeRequired } = useCountryStates(countryCode)
+  const countryRules = useRef({ statesRequired, postalCodeRequired })
+  countryRules.current = { statesRequired, postalCodeRequired }
 
   // The parent keys the dialog on the address id so a fresh instance mounts
   // for each open, but `address` can also stream in async (loaded after the
@@ -239,14 +292,6 @@ export function AddressFormDialog({
   const useStateCombobox = states.length > 0
 
   async function onSubmit(values: AddressFormValues) {
-    if (statesRequired && !values.state_code.trim()) {
-      form.setError('state_code', {
-        type: 'manual',
-        message: requiredMessage('state_code')(),
-      })
-      return
-    }
-
     try {
       await onSave({
         first_name: values.first_name,
@@ -285,7 +330,7 @@ export function AddressFormDialog({
   }
 
   return (
-    <Sheet open={open} onOpenChange={(o) => onOpenChange(o as boolean)}>
+    <Sheet open={open} onOpenChange={(o) => (o ? onOpenChange(true) : requestClose())}>
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>{resolvedTitle}</SheetTitle>
@@ -300,14 +345,14 @@ export function AddressFormDialog({
         >
           <div className="flex-1 overflow-y-auto p-4">
             {errors.root?.message && (
-              <p className="mb-4 text-sm text-destructive" role="alert">
+              <p className="mb-4 text-base text-destructive" role="alert">
                 {errors.root.message}
               </p>
             )}
             <FieldGroup>
               {showLabel && (
                 <Field>
-                  <FieldLabel htmlFor="addr-label">
+                  <FieldLabel htmlFor="addr-label" optional>
                     {t('admin.fields.address.label.label')}
                   </FieldLabel>
                   <Input
@@ -366,7 +411,7 @@ export function AddressFormDialog({
                 <FieldError errors={[errors.address1]} />
               </Field>
               <Field>
-                <FieldLabel htmlFor="addr-a2">
+                <FieldLabel htmlFor="addr-a2" optional>
                   {t('admin.fields.address.address2.label')}
                 </FieldLabel>
                 <Input
@@ -410,7 +455,7 @@ export function AddressFormDialog({
                 </Field>
                 {useStateCombobox ? (
                   <Field>
-                    <FieldLabel htmlFor="addr-state">
+                    <FieldLabel htmlFor="addr-state" optional={!statesRequired}>
                       {t('admin.fields.state_code.label')}
                     </FieldLabel>
                     <Controller
@@ -432,7 +477,7 @@ export function AddressFormDialog({
                   </Field>
                 ) : (
                   <Field>
-                    <FieldLabel htmlFor="addr-state-abbr">
+                    <FieldLabel htmlFor="addr-state-abbr" optional={!statesRequired}>
                       {t('admin.fields.state_code.label')}
                     </FieldLabel>
                     <Input
@@ -445,7 +490,7 @@ export function AddressFormDialog({
                 )}
               </div>
               <Field>
-                <FieldLabel htmlFor="addr-zip">
+                <FieldLabel htmlFor="addr-zip" optional={!postalCodeRequired}>
                   {t('admin.fields.address.postal_code.label')}
                 </FieldLabel>
                 <Input
@@ -456,7 +501,9 @@ export function AddressFormDialog({
                 <FieldError errors={[errors.postal_code]} />
               </Field>
               <Field>
-                <FieldLabel htmlFor="addr-phone">{t('admin.fields.phone.label')}</FieldLabel>
+                <FieldLabel htmlFor="addr-phone" optional={phoneOptional}>
+                  {t('admin.fields.phone.label')}
+                </FieldLabel>
                 <Input
                   id="addr-phone"
                   aria-invalid={!!errors.phone || undefined}
@@ -473,7 +520,7 @@ export function AddressFormDialog({
                       render={({ field }) => (
                         <label
                           htmlFor="addr-default-billing"
-                          className="flex cursor-pointer items-center gap-2 text-sm"
+                          className="flex cursor-pointer items-center gap-2 text-base"
                         >
                           <Checkbox
                             id="addr-default-billing"
@@ -492,7 +539,7 @@ export function AddressFormDialog({
                       render={({ field }) => (
                         <label
                           htmlFor="addr-default-shipping"
-                          className="flex cursor-pointer items-center gap-2 text-sm"
+                          className="flex cursor-pointer items-center gap-2 text-base"
                         >
                           <Checkbox
                             id="addr-default-shipping"
@@ -509,10 +556,10 @@ export function AddressFormDialog({
             </FieldGroup>
           </div>
           <SheetFooter>
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            <Button type="button" variant="outline" onClick={requestClose}>
               {t('admin.actions.cancel')}
             </Button>
-            <Button type="submit" disabled={isPending}>
+            <Button type="submit" disabled={isPending || (saveNeedsChange && !isDirty)}>
               {isPending ? t('admin.actions.saving') : t('admin.actions.save')}
             </Button>
           </SheetFooter>

package/src/components/app-shell.tsx

@@ -103,10 +103,11 @@ export function AppShell({
           a scroll container of its own to pin inside, so it can never ride up
           over the rail's switcher.
 
-          `flex-row` so the secondary sidebar sits flush against the primary and
-          spans the sheet's full height. */}
+          `flex-row` so the page's own columns sit side by side. */}
+      {/* The settings nav sits in the chrome between the rail and the sheet,
+          on the sidebar's ground, so the sheet holds only the page. */}
+      <SettingsSidebar open={inSettings} tenantId={tenantId} />
       <SidebarInset className="min-h-0 flex-row overflow-hidden">
-        <SettingsSidebar open={inSettings} tenantId={tenantId} />
         {/* `tabIndex={-1}`: Page Up/Down, Home and End act on the focused
             element, and this is the element that scrolls. Without it focus
             stays on <body>, which has nothing to scroll now that the sheet
@@ -138,7 +139,7 @@ export function AppShell({
         <div
           ref={scrollerRef}
           tabIndex={-1}
-          className="themed-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto me-[5px] outline-none"
+          className="themed-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto outline-none"
         >
           <MobileTopBar
             uiLocales={uiLocales}

package/src/components/app-sidebar.tsx

@@ -12,6 +12,7 @@ import {
 } from '@spree/dashboard-ui'
 import { PackageIcon } from '@spree/dashboard-ui/icons'
 import { useParams } from '@tanstack/react-router'
+import type { TFunction } from 'i18next'
 import type { ComponentProps, ReactNode } from 'react'
 import { useAuth } from '../hooks/use-auth'
 import { primarySidebarSide, useTranslation } from '../lib/i18n'
@@ -28,7 +29,7 @@ import { StoreSwitcher } from './store-switcher'
  * `labelKey` is resolved here rather than at registration so labels follow a
  * language change — a literal `label` is frozen at import time.
  */
-function entryToNavItem(entry: NavEntry, tenantId: string, t: (key: string) => string): NavItem {
+function entryToNavItem(entry: NavEntry, tenantId: string, t: TFunction): NavItem {
   const pathFor = (path: string) => (path === '/' ? `/${tenantId}` : `/${tenantId}${path}`)
   return {
     title: resolveNavLabel(entry, t),

package/src/components/bulk-action-bar.tsx

@@ -328,7 +328,7 @@ function BulkActionBarLayout({
         {/* No clear button: the bar sits beside the header's select-all
             checkbox, which already clears the selection. */}
         <div ref={leadingRef} className="flex items-center gap-0.5">
-          <span className="whitespace-nowrap px-1.5 text-sm">
+          <span className="whitespace-nowrap px-1.5 text-base">
             {t('admin.components.bulk_action_bar.selected', { count })}
           </span>
           <div className="mx-1 h-5 w-px bg-border" aria-hidden />
@@ -351,6 +351,7 @@ function BulkActionBarLayout({
                 variant="ghost"
                 size="icon-sm"
                 aria-label={t('admin.actions.more_actions')}
+                className="hover:bg-accent-strong aria-expanded:bg-accent-strong"
               >
                 <EllipsisVerticalIcon className="size-4" />
               </Button>
@@ -424,10 +425,10 @@ function BulkActionButton({
       disabled={disabled}
       tabIndex={tabIndex}
       // `shrink-0` so the zero-width measuring layer can't squeeze these and
-      // report a width smaller than the button really renders at. Hover is the
-      // ghost variant's own `bg-accent` — no override needed now that the bar's
-      // muted background sits well clear of it.
-      className="shrink-0 gap-1.5 whitespace-nowrap px-2"
+      // report a width smaller than the button really renders at. Hover one
+      // step past the ghost variant's `bg-accent`, which is barely apart from
+      // the bar's own grey.
+      className="shrink-0 gap-1.5 whitespace-nowrap px-2 hover:bg-accent-strong aria-expanded:bg-accent-strong"
     >
       {action.icon}
       {action.label}

package/src/components/country-state-fields.tsx

@@ -29,6 +29,9 @@ export function useCountryStates(countryCode: string | null | undefined) {
   return {
     states: ((country?.states ?? []) as StateOption[]).filter((s) => Boolean(s.abbr)),
     statesRequired: country?.states_required ?? false,
+    // Assumed required until the country list loads, as the server does for
+    // an address without a country.
+    postalCodeRequired: country?.zipcode_required ?? true,
   }
 }
 

package/src/components/currency-select.tsx

@@ -8,6 +8,7 @@ import {
   ComboboxList,
   ComboboxSearch,
   ComboboxTriggerPlaceholder,
+  CurrencyLabel,
 } from '@spree/dashboard-ui'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -58,8 +59,9 @@ interface CurrencySelectProps {
  * 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`
- * (e.g. `USD — US Dollar`), with the name localized to the admin UI language.
+ * currency, such as a market's currency. Each option shows the currency's
+ * symbol, code and name (`[$] USD US Dollar`), the name localized to the admin
+ * UI language.
  *
  * Always searchable, whatever the list length. The picker used to fall back to
  * a plain `<Select>` under a dozen options, which meant the same field behaved
@@ -158,7 +160,7 @@ export function CurrencySelect({
           aria-invalid={invalid || undefined}
         >
           {value ? (
-            <span className="truncate">{renderOption(value)}</span>
+            <CurrencyLabel code={value} name={displayNameFor(value)} />
           ) : (
             <ComboboxTriggerPlaceholder>
               {t('admin.components.currency_select.placeholder')}
@@ -175,7 +177,7 @@ export function CurrencySelect({
           <ComboboxList>
             {(code: CurrencyCode) => (
               <ComboboxItem key={code} value={code}>
-                {renderOption(code)}
+                <CurrencyLabel code={code} name={displayNameFor(code)} />
               </ComboboxItem>
             )}
           </ComboboxList>