@spree/dashboard-core 6.0.3 → 6.0.4

package/src/components/media-picker-sheet.tsx

@@ -1,307 +1,20 @@
 import {
-  Button,
-  SearchInput,
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@spree/dashboard-ui'
-import { CheckIcon, ImageIcon, Loader2Icon, PlayIcon, UploadIcon } from '@spree/dashboard-ui/icons'
-import { useQuery } from '@tanstack/react-query'
-import { useDeferredValue, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTenantId } from '../providers/tenant-provider'
+  MediaPickerDialog,
+  type MediaPickerDialogProps,
+  type MediaPickerOption,
+} from './media-picker-dialog'
 
-/** The shape the picker needs; a full Media record satisfies it. */
-export interface MediaPickerOption {
-  id: string
-  alt?: string | null
-  filename?: string | null
-  media_type?: string
-  small_url?: string | null
-  poster_url?: string | null
-  original_url?: string | null
-  /** Blob signed id, for handing a picked file to a plain attachment field. */
-  signed_id?: string | null
-}
+export type { MediaPickerOption, MediaPickerSearchOptions } from './media-picker-dialog'
 
-export interface MediaPickerSheetProps<T extends MediaPickerOption> {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  /** Paginated search over the library. Called with the trimmed query. */
-  search: (query: string) => Promise<{ data: T[] }>
-  /** Called with the picked files when the user confirms. */
-  onConfirm: (media: T[]) => void | Promise<void>
-  /** Uploads a file and returns the created library row, for the upload tab. */
-  onUpload?: (file: File) => Promise<T>
-  /** One file only — the picker confirms as soon as a tile is clicked. */
-  multiple?: boolean
-  /** Cache-isolation key, one per picker instance. */
-  queryKey: string
-  accept?: string
-  title?: string
-  description?: string
-  confirmLabel?: string
-  onConfirmError?: (error: unknown) => void
-}
+/** @deprecated Renamed to `MediaPickerDialogProps`; removed in the next minor release. */
+export type MediaPickerSheetProps<T extends MediaPickerOption> = MediaPickerDialogProps<T>
 
 /**
- * Browse the store's media library and pick files from it.
- *
- * A grid rather than the row list {@link ResourcePickerSheet} uses: choosing a
- * picture means looking at it, and a filename tells a merchant almost nothing
- * about which photo it is.
- *
- * Headless — the caller supplies `search` and `onUpload`, so the same sheet
- * serves the product media card (which places files on a product) and plain
- * image fields (which take the picked file's blob).
+ * @deprecated The picker is now a dialog; use `MediaPickerDialog`. This name
+ * keeps working until the next minor release.
  */
-export function MediaPickerSheet<T extends MediaPickerOption>({
-  open,
-  onOpenChange,
-  search,
-  onConfirm,
-  onUpload,
-  multiple = true,
-  queryKey,
-  accept = 'image/png,image/jpeg,image/webp,image/gif',
-  title,
-  description,
-  confirmLabel,
-  onConfirmError,
-}: MediaPickerSheetProps<T>) {
-  const { t } = useTranslation()
-  const tenantId = useTenantId()
-
-  const [input, setInput] = useState('')
-  const deferredInput = useDeferredValue(input)
-  const trimmedQuery = deferredInput.trim()
-  const [staged, setStaged] = useState<Map<string, T>>(new Map())
-  const [submitting, setSubmitting] = useState(false)
-  const [uploading, setUploading] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  // Bumped whenever the sheet closes. An upload started in an earlier session
-  // must not confirm into a host that has already moved on — closing mid-upload
-  // would otherwise still set the field the merchant cancelled.
-  const sessionRef = useRef(0)
-
-  // The tenant id is part of the key: a library is one tenant's, and without
-  // it reopening the picker after a store or seller switch serves the previous
-  // tenant's files from cache — whose ids the new tenant's API would reject.
-  const { data, isFetching, refetch } = useQuery({
-    queryKey: [queryKey, 'media-picker', tenantId, trimmedQuery],
-    queryFn: () => search(trimmedQuery),
-    enabled: open,
-    staleTime: 30_000,
-  })
-
-  const results = data?.data ?? []
-
-  async function pick(option: T) {
-    if (!multiple) {
-      await submit([option])
-      return
-    }
-
-    setStaged((prev) => {
-      const next = new Map(prev)
-      if (next.has(option.id)) next.delete(option.id)
-      else next.set(option.id, option)
-      return next
-    })
-  }
-
-  async function submit(media: T[]) {
-    if (media.length === 0) return
-    setSubmitting(true)
-    try {
-      await onConfirm(media)
-      reset()
-      onOpenChange(false)
-    } catch (error) {
-      // The mutation shows its own error; keep the sheet open with the
-      // selection intact so the merchant can retry.
-      onConfirmError?.(error)
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  async function handleUpload(files: FileList | null) {
-    if (!files?.length || !onUpload) return
-
-    const session = sessionRef.current
-    setUploading(true)
-    try {
-      const uploaded: T[] = []
-      for (const file of Array.from(files)) {
-        uploaded.push(await onUpload(file))
-      }
-      // The file is in the library either way — only the confirmation is
-      // abandoned, so nothing the merchant uploaded is lost.
-      if (session !== sessionRef.current) return
-
-      await refetch()
-
-      if (multiple) {
-        setStaged((prev) => {
-          const next = new Map(prev)
-          for (const media of uploaded) next.set(media.id, media)
-          return next
-        })
-      } else {
-        await submit(uploaded.slice(0, 1))
-      }
-    } catch (error) {
-      onConfirmError?.(error)
-    } finally {
-      setUploading(false)
-      if (fileInputRef.current) fileInputRef.current.value = ''
-    }
-  }
-
-  function reset() {
-    setStaged(new Map())
-    setInput('')
-  }
-
-  function handleOpenChange(next: boolean) {
-    if (!next) {
-      sessionRef.current += 1
-      reset()
-    }
-    onOpenChange(next)
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent className="w-full gap-0 p-0 sm:max-w-2xl">
-        <SheetHeader>
-          <SheetTitle>{title ?? t('admin.media_picker.title')}</SheetTitle>
-          <SheetDescription>{description ?? t('admin.media_picker.description')}</SheetDescription>
-        </SheetHeader>
-
-        <div className="flex items-center gap-2 border-b border-border-subtle p-4">
-          <SearchInput
-            value={input}
-            onValueChange={setInput}
-            // Enter has no action here; swallow it so it can't submit a host form.
-            onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
-            placeholder={t('admin.media_picker.search_placeholder')}
-            clearLabel={t('admin.common.clear')}
-            className="flex-1"
-          />
-          {onUpload && (
-            <>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept={accept}
-                multiple={multiple}
-                className="hidden"
-                onChange={(e) => handleUpload(e.target.files)}
-              />
-              <Button
-                type="button"
-                variant="outline"
-                disabled={uploading}
-                onClick={() => fileInputRef.current?.click()}
-              >
-                {uploading ? (
-                  <Loader2Icon className="size-4 animate-spin" />
-                ) : (
-                  <UploadIcon className="size-4" />
-                )}
-                <span>{t('admin.media_picker.upload')}</span>
-              </Button>
-            </>
-          )}
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-y-auto p-4">
-          {isFetching && results.length === 0 ? (
-            <div className="flex items-center justify-center py-10 text-muted-foreground">
-              <Loader2Icon className="size-5 animate-spin" />
-            </div>
-          ) : results.length === 0 ? (
-            <p className="p-6 text-center text-muted-foreground text-sm">
-              {trimmedQuery ? t('admin.media_picker.no_results') : t('admin.media_picker.empty')}
-            </p>
-          ) : (
-            <ul className="grid grid-cols-3 gap-3 sm:grid-cols-4">
-              {results.map((media) => {
-                const checked = staged.has(media.id)
-                const thumbnail = media.small_url ?? media.poster_url ?? media.original_url
-                const label = media.alt || media.filename || ''
-
-                return (
-                  <li key={media.id}>
-                    <button
-                      type="button"
-                      onClick={() => pick(media)}
-                      aria-pressed={checked}
-                      className={`group relative block w-full overflow-hidden rounded-md border transition-colors ${
-                        checked
-                          ? 'border-primary ring-2 ring-primary'
-                          : 'border-border hover:border-muted-foreground'
-                      }`}
-                    >
-                      <span className="flex aspect-square items-center justify-center bg-muted">
-                        {thumbnail ? (
-                          <img
-                            src={thumbnail}
-                            alt={label}
-                            loading="lazy"
-                            className="size-full object-cover"
-                          />
-                        ) : (
-                          <ImageIcon className="size-6 text-muted-foreground" />
-                        )}
-                      </span>
-
-                      {media.media_type !== 'image' && (
-                        <span className="absolute top-1.5 left-1.5 rounded bg-black/60 p-1 text-white">
-                          <PlayIcon className="size-3" />
-                        </span>
-                      )}
-
-                      {checked && (
-                        <span className="absolute top-1.5 right-1.5 rounded-full bg-primary p-1 text-primary-foreground">
-                          <CheckIcon className="size-3" />
-                        </span>
-                      )}
-
-                      {label && (
-                        <span className="block truncate px-2 py-1.5 text-left text-xs">
-                          {label}
-                        </span>
-                      )}
-                    </button>
-                  </li>
-                )
-              })}
-            </ul>
-          )}
-        </div>
-
-        {multiple && (
-          <SheetFooter className="flex-row items-center justify-between border-t border-border">
-            <span className="text-muted-foreground text-xs">
-              {t('admin.media_picker.selected_count', { count: staged.size })}
-            </span>
-            <Button
-              type="button"
-              disabled={staged.size === 0 || submitting}
-              onClick={() => submit(Array.from(staged.values()))}
-            >
-              {submitting && <Loader2Icon className="size-4 animate-spin" />}
-              <span>{confirmLabel ?? t('admin.media_picker.confirm')}</span>
-            </Button>
-          </SheetFooter>
-        )}
-      </SheetContent>
-    </Sheet>
-  )
+export function MediaPickerSheet<T extends MediaPickerOption>(props: MediaPickerDialogProps<T>) {
+  // Off unless asked for: a sheet-era `search` ignores the sort and filter
+  // options, so the controls would change nothing.
+  return <MediaPickerDialog browseControls={false} {...props} />
 }

package/src/components/mobile-top-bar.tsx

@@ -59,7 +59,7 @@ export function MobileTopBar({
       {isLoading ? (
         <Skeleton className="h-4 w-28" />
       ) : (
-        <span className="min-w-0 flex-1 truncate font-medium text-sm">{label}</span>
+        <span className="min-w-0 flex-1 truncate font-medium text-base">{label}</span>
       )}
 
       {palette && (

package/src/components/nav-main.tsx

@@ -39,12 +39,23 @@ export type NavItem = {
   }[]
 }
 
-export function NavIcon({ icon: Icon, isActive }: { icon: NavItem['icon']; isActive?: boolean }) {
+export function NavIcon({
+  icon: Icon,
+  isActive,
+  muted,
+}: {
+  icon: NavItem['icon']
+  isActive?: boolean
+  /** Rest the icon at muted text colour, so only the current page's icon is lit. */
+  muted?: boolean
+}) {
   return (
     <span
       className={
         'inline-flex shrink-0 items-center justify-center rounded-lg p-[0.2rem] transition-colors duration-100 ' +
-        (isActive ? 'text-foreground' : 'group-hover/menu-button:text-foreground')
+        (isActive
+          ? 'text-foreground'
+          : `group-hover/menu-button:text-foreground${muted ? ' text-muted-foreground' : ''}`)
       }
     >
       <Icon size={16} strokeWidth={2} />

package/src/components/page-header.tsx

@@ -21,7 +21,10 @@ import {
 import type { JsonPreviewDrawerProps } from '@spree/dashboard-ui/spree/json-preview-drawer'
 import { lazy, type ReactNode, Suspense, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { getApiClient, hasApiClient } from '../api-client'
+import { buildCurlCommand } from '../lib/curl'
 import { docsUrl } from '../lib/docs'
+import { useJsonLinkResolver } from '../providers/json-link-resolver-provider'
 import { useRegisterPageHeader, useStickyHeaderOffset } from '../providers/sticky-header-provider'
 import { Slot } from './slot'
 
@@ -130,8 +133,15 @@ interface PageHeaderProps {
   /** Heading for the delete prompt. Defaults to none, as the message carries it. */
   deleteConfirmTitle?: string
   /**
-   * When supplied, the more-actions dropdown gains a "View as JSON" item that
-   * opens a developer-style drawer with the resource payload.
+   * The record's Admin API path, e.g. `/api/v3/admin/products/prod_xyz`.
+   * Together with `resource` it adds "View as JSON", showing `resource` as
+   * loaded — no second request.
+   */
+  endpoint?: string
+  /**
+   * A custom "View as JSON" drawer, for a page whose payload differs from
+   * `resource` (Orders load a richer shape than the header shows). Wins over
+   * `endpoint`.
    */
   jsonPreview?: PageHeaderJsonPreview
 }
@@ -162,13 +172,13 @@ export function PageHeader({
   deleteLabel,
   deleteConfirmMessage,
   deleteConfirmTitle,
+  endpoint,
   jsonPreview,
 }: PageHeaderProps) {
   const { t } = useTranslation()
   const slotCtx = { ...slotContext, resource }
-  const showDropdown = Boolean(
-    resource || onDelete || dropdownItems || destructiveItems || jsonPreview,
-  )
+  const json = useJsonPreview({ title, resource, endpoint, jsonPreview })
+  const showDropdown = Boolean(resource || onDelete || dropdownItems || destructiveItems || json)
   const [jsonOpen, setJsonOpen] = useState(false)
   // Latches true on first open so the drawer (and its lazy JsonView chunk)
   // doesn't mount until the user actually invokes it, but stays mounted
@@ -199,7 +209,7 @@ export function PageHeader({
     // `bg-card` masks the content scrolling behind it — the same surface as
     // the content sheet this sits in, so the pinned band is invisible at rest
     // rather than a stripe of the page ground across the top of a white sheet;
-    // `-mx-4 px-4 lg:-mx-6 lg:px-6` and `-mt-4 lg:-mt-6 pt-4 lg:pt-6` undo
+    // `-mx-4 px-4` and `-mt-4 pt-4` undo
     // and re-apply the parent padding so the sticky band runs edge-to-edge.
     //
     // The `::after` pseudo-element is the bottom hairline — it fades in
@@ -218,7 +228,7 @@ export function PageHeader({
         // Opaque for the same reason as the top bar: this band pins over the
         // page's own scrolling content, so a translucent fill lets that content
         // ghost through it.
-        '-mx-4 -mt-4 flex flex-row items-start gap-2 bg-card p-4 sm:gap-3 lg:-mx-6 lg:-mt-6 lg:px-6 lg:pt-6',
+        '-mx-4 -mt-4 flex flex-row items-start gap-2 bg-card p-4 sm:gap-3',
         sticky && 'sticky top-0 z-20',
         'transition-[box-shadow] duration-200 ease-out motion-reduce:transition-none',
         'after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:opacity-0 after:transition-opacity after:duration-200 after:[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]',
@@ -237,7 +247,7 @@ export function PageHeader({
           {/* Smaller and clipped on a phone: sharing the row with the actions
               leaves a long product name too little width to wrap into
               anything readable. */}
-          <h1 className="min-w-0 truncate font-semibold text-xl leading-tight sm:text-2xl sm:whitespace-normal">
+          <h1 className="min-w-0 truncate font-semibold text-lg sm:text-xl sm:whitespace-normal">
             {title}
           </h1>
           {/* Statuses and the timestamp share the second line: both answer
@@ -248,14 +258,14 @@ export function PageHeader({
             <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
               {badges}
               {subtitle && (
-                <span className="line-clamp-2 text-sm text-muted-foreground sm:line-clamp-none">
+                <span className="line-clamp-2 text-base text-muted-foreground sm:line-clamp-none">
                   {subtitle}
                 </span>
               )}
             </div>
           )}
           {(description || docsPath) && (
-            <p className="text-muted-foreground text-sm">
+            <p className="text-muted-foreground text-base">
               {description}
               {docsPath && (
                 <>
@@ -285,20 +295,54 @@ export function PageHeader({
             deleteLabel={deleteLabel ?? t('admin.actions.delete')}
             deleteConfirmMessage={deleteConfirmMessage}
             deleteConfirmTitle={deleteConfirmTitle}
-            onOpenJson={jsonPreview ? openJson : undefined}
+            onOpenJson={json ? openJson : undefined}
           />
         )}
       </div>
 
-      {jsonPreview && jsonEverOpened && (
+      {json && jsonEverOpened && (
         <Suspense fallback={null}>
-          <JsonPreviewDrawer open={jsonOpen} onOpenChange={setJsonOpen} {...jsonPreview} />
+          <JsonPreviewDrawer
+            open={jsonOpen}
+            onOpenChange={setJsonOpen}
+            {...json}
+            curl={json.endpoint ? curlFor(json.endpoint) : undefined}
+          />
         </Suspense>
       )}
     </header>
   )
 }
 
+function useJsonPreview({
+  title,
+  resource,
+  endpoint,
+  jsonPreview,
+}: Pick<PageHeaderProps, 'title' | 'resource' | 'endpoint' | 'jsonPreview'>) {
+  const contextResolveLink = useJsonLinkResolver()
+  const preview: PageHeaderJsonPreview | undefined =
+    jsonPreview ??
+    (resource && endpoint
+      ? {
+          title: typeof title === 'string' ? title : undefined,
+          fetch: () => Promise.resolve(resource),
+          endpoint,
+        }
+      : undefined)
+  if (!preview) return undefined
+
+  return { ...preview, resolveLink: preview.resolveLink ?? contextResolveLink }
+}
+
+// Built only once the drawer opens, not on every header render.
+function curlFor(endpoint: string) {
+  return buildCurlCommand(
+    endpoint,
+    hasApiClient() ? (getApiClient().downloadHeaders?.() ?? {}) : {},
+  )
+}
+
 // ---------------------------------------------------------------------------
 // More-actions dropdown
 // ---------------------------------------------------------------------------

package/src/components/page-tabs.tsx

@@ -65,7 +65,7 @@ export function PageTabs({ tabs, slotName = 'page.tabs', slotContext, className
             params={tab.params}
             search={tab.search}
             className={cn(
-              'inline-flex items-center px-3 py-2 -mb-px text-sm font-medium border-b-2 transition-colors',
+              'inline-flex items-center px-3 py-2 -mb-px text-base font-medium border-b-2 transition-colors',
               active
                 ? 'border-foreground text-foreground'
                 : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',

package/src/components/product-stock-summary.tsx

@@ -45,7 +45,7 @@ export function ProductStockSummary({ product }: { product: ProductStockFields }
   )
 
   return (
-    <span className="text-sm text-muted-foreground">
+    <span className="text-base text-muted-foreground">
       {status}
       {product.variant_count > 1 && (
         <>

package/src/components/read-row.tsx

@@ -0,0 +1,38 @@
+import { cn } from '@spree/dashboard-ui'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * One labelled value in a sidebar card: the label on the left, the value on
+ * the right, with a placeholder when unset. `stacked` puts a long free-text
+ * value (notes, a reason) under its label instead, where right-aligned
+ * paragraphs would be hard to read.
+ */
+export function ReadRow({
+  label,
+  children,
+  stacked = false,
+}: {
+  label: string
+  children: ReactNode
+  stacked?: boolean
+}) {
+  const { t } = useTranslation()
+  const value = children ?? (
+    <span className="text-muted-foreground">{t('admin.sellers.not_provided')}</span>
+  )
+  if (stacked) {
+    return (
+      <div className="flex flex-col gap-1 text-base">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="whitespace-pre-line">{value}</span>
+      </div>
+    )
+  }
+  return (
+    <div className={cn('flex items-start justify-between gap-3 text-base')}>
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <span className="min-w-0 text-right">{value}</span>
+    </div>
+  )
+}

package/src/components/resource-combobox.tsx

@@ -162,7 +162,7 @@ export function ResourceCombobox<T extends ComboboxOption>({
               // the dropdown unmounts, so a click never lands.
               <button
                 type="button"
-                className="flex w-full cursor-pointer items-center gap-2 border-t border-border px-2.5 py-2 text-left text-sm hover:bg-accent"
+                className="flex w-full cursor-pointer items-center gap-2 border-t border-border px-2.5 py-2 text-left text-base hover:bg-accent"
                 onMouseDown={(event) => {
                   event.preventDefault()
                   action.onSelect()