@spree/dashboard-core 6.0.2 → 6.0.4

package/src/pages/settings-index.tsx

@@ -1,9 +1,10 @@
-import { Card, SearchInput } from '@spree/dashboard-ui'
-import { PackageIcon } from '@spree/dashboard-ui/icons'
-import { Link } from '@tanstack/react-router'
+import { Card, cn, SearchInput } from '@spree/dashboard-ui'
+import { ChevronRightIcon, PackageIcon } from '@spree/dashboard-ui/icons'
+import { Link, Navigate } from '@tanstack/react-router'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageHeader } from '../components/page-header'
+import { useSettingsRailShown } from '../components/settings-sidebar'
 import { resolveNavDescription, resolveNavLabel } from '../lib/nav-registry'
 import {
   filterSettingsByPermissions,
@@ -14,21 +15,25 @@ import {
 import { usePermissions } from '../providers/permission-provider'
 
 /**
- * Settings landing page — a card grid of every settings area the current
- * member can reach, grouped the same way the sidebar groups them.
+ * Settings landing page — every settings area the current member can reach,
+ * one card of rows per group, grouped the same way the sidebar groups them.
+ *
+ * Phones and tablets only. From `lg` the settings rail lists the same entries
+ * beside the page, so this page would only repeat it; there it hands over to
+ * the first section the member can open instead.
  *
  * Shared by the operator dashboard and the marketplace seller panel. Each
  * host passes its tenant id so the cards link under that panel's prefix
  * (`/$storeId/settings/…` or `/$sellerId/settings/…`).
  *
  * It doubles as the settings navigation below `lg`, where `SettingsSidebar` is
- * hidden: on a narrow viewport this grid is the only way into the area, so it
- * must never be replaced by a redirect to a specific page.
+ * hidden: on a narrow viewport this list is the only way into the area, so the
+ * redirect must stay bound to the rail being on screen.
  */
 export function SettingsIndexPage({ tenantId }: { tenantId: string }) {
   const { t } = useTranslation()
   const snapshot = useSettingsNav()
-  const { permissions } = usePermissions()
+  const { permissions, isLoading: permissionsLoading } = usePermissions()
   const [query, setQuery] = useState('')
 
   // Permission filtering depends only on the snapshot, so it survives typing.
@@ -38,42 +43,52 @@ export function SettingsIndexPage({ tenantId }: { tenantId: string }) {
   )
   const groups = useMemo(() => filterSettingsByQuery(allowed, query, t).groups, [allowed, query, t])
 
+  const railShown = useSettingsRailShown()
+  const first = railShown
+    ? allowed.groups.flatMap((g) => g.entries).find((entry) => !entry.comingSoon)
+    : undefined
+  if (first) return <Navigate to={`/${tenantId}/settings${first.path}` as never} replace />
+  // Nothing to open yet while permissions load; render nothing rather than
+  // flash the list the rail already shows. Loaded with nothing to open, the
+  // list below says so rather than leaving the page blank.
+  if (railShown && permissionsLoading) return null
+
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-8">
       <PageHeader
         title={t('admin.settings_page.title')}
         subtitle={t('admin.settings_page.description')}
       />
 
-      {/* Hidden from `lg`, where the settings sidebar is on screen listing the
-          same entries and carrying the same search. Below that the sidebar is
-          gone, so this is the only way to filter — and the only navigation. */}
-      <div className="lg:hidden">
-        <SearchInput
-          value={query}
-          onValueChange={setQuery}
-          placeholder={t('admin.settings_page.search_placeholder')}
-          aria-label={t('admin.settings_page.search_placeholder')}
-          clearLabel={t('admin.common.clear')}
-          className="h-11 max-w-md"
-        />
-      </div>
+      <SearchInput
+        value={query}
+        onValueChange={setQuery}
+        placeholder={t('admin.settings_page.search_placeholder')}
+        aria-label={t('admin.settings_page.search_placeholder')}
+        clearLabel={t('admin.common.clear')}
+        className="h-11 max-w-md"
+      />
 
       {groups.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
+        <p className="text-base text-muted-foreground">
           {t('admin.settings_page.no_results', { query: query.trim() })}
         </p>
       ) : (
         groups.map(({ group, entries }) => (
           <section key={group.key} className="flex flex-col gap-3">
-            <h2 className="text-sm font-medium text-muted-foreground">
-              {resolveNavLabel(group, t)}
-            </h2>
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-              {entries.map((entry) => (
-                <SettingsCard key={entry.key} entry={entry} tenantId={tenantId} />
-              ))}
-            </div>
+            <h2 className="font-semibold text-base">{resolveNavLabel(group, t)}</h2>
+            <Card className="gap-0 overflow-hidden">
+              <ul>
+                {entries.map((entry, index) => (
+                  <SettingsIndexRow
+                    key={entry.key}
+                    entry={entry}
+                    tenantId={tenantId}
+                    divided={index > 0}
+                  />
+                ))}
+              </ul>
+            </Card>
           </section>
         ))
       )}
@@ -81,35 +96,51 @@ export function SettingsIndexPage({ tenantId }: { tenantId: string }) {
   )
 }
 
-function SettingsCard({ entry, tenantId }: { entry: SettingsNavEntry; tenantId: string }) {
+function SettingsIndexRow({
+  entry,
+  tenantId,
+  divided,
+}: {
+  entry: SettingsNavEntry
+  tenantId: string
+  /** Draws the rule above the row's text, which starts past the icon. */
+  divided: boolean
+}) {
   const { t } = useTranslation()
   const Icon = entry.icon ?? PackageIcon
   const label = resolveNavLabel(entry, t)
   const description = resolveNavDescription(entry, t)
 
   return (
-    <Card className="p-0 transition-colors border-border-subtle hover:bg-accent/80 hover:border-border">
-      {/* The whole card is the target — a small title-only link would fail the
-          44px minimum on touch and leaves most of the card dead to a click. */}
-      {/* Paths come from a runtime registry plugins extend, so they can't be
+    <li>
+      {/* The whole row is the target, so it clears the 44px touch minimum.
+          Paths come from a runtime registry plugins extend, so they can't be
           checked against the generated route tree. */}
       <Link
         to={`/${tenantId}/settings${entry.path}` as never}
-        // The whole card is the target, so without a replacement for the
-        // suppressed outline a keyboard user tabbing the grid cannot tell which
-        // card they are on. A solid ring rather than the border pair buttons
-        // use: this link draws no border of its own to recolour.
-        className="flex h-full items-start gap-3 rounded-xl p-4 outline-none focus-visible:shadow-[0_0_0_2px_var(--ring)]"
+        // The row draws no border of its own, so focus gets an inset ring in
+        // place of the suppressed outline.
+        className="group flex items-center gap-3.5 ps-4 outline-none transition-colors hover:bg-accent focus-visible:shadow-[inset_0_0_0_2px_var(--ring)]"
       >
-        <Icon className="mt-0.5 size-6 shrink-0 text-muted-foreground opacity-80 hover:opacity-100" />
-        <span className="flex min-w-0 flex-col gap-1">
-          <span className="flex items-center gap-1.5 text-sm font-medium leading-none">
-            {label}
-            {entry.badge && <entry.badge />}
+        <Icon className="size-5 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
+        <span
+          className={cn(
+            'flex min-w-0 flex-1 items-center gap-3 py-3.5 pe-4',
+            divided && 'border-border-subtle border-t',
+          )}
+        >
+          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className="flex items-center gap-1.5 text-base font-medium">
+              {label}
+              {entry.badge && <entry.badge />}
+            </span>
+            {description && (
+              <span className="text-base text-muted-foreground md:truncate">{description}</span>
+            )}
           </span>
-          {description && <span className="text-sm text-muted-foreground">{description}</span>}
+          <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground rtl:rotate-180" />
         </span>
       </Link>
-    </Card>
+    </li>
   )
 }

package/src/pages/stock-locations.tsx

@@ -34,7 +34,7 @@ import { Can } from '../components/can'
 import { CountryCombobox } from '../components/country-combobox'
 import { StateCombobox, useCountryStates } from '../components/country-state-fields'
 import { RecordMetadataSection } from '../components/record-metadata'
-import { ResourceTable, resourceSearchSchema } from '../components/resource-table'
+import { ResourceTable, resourceSearchSchema, type TableView } from '../components/resource-table'
 import { HostFormSlot } from '../components/slot'
 import {
   canDeleteStockLocations,
@@ -94,8 +94,11 @@ export function StockLocationsPage({
   stockLevelsPanel: StockLevelsPanel,
   activityPanel: ActivityPanel,
   formKey = 'stock_location',
+  views,
 }: {
   search: StockLocationsSearch
+  /** Tabs splitting the list — the operator's own locations and their sellers'. */
+  views?: TableView[]
   /** Names the sheets' slot and extension fields — `seller.stock_location` in the seller panel. */
   formKey?: string
   /** Rendered inside the edit sheet, below the form. Optional — see above. */
@@ -149,6 +152,7 @@ export function StockLocationsPage({
         queryKey="stock-locations"
         queryFn={(params) => listStockLocations(params)}
         searchParams={search}
+        views={views}
         rowActions={(location) => (
           <RowActions
             actions={[
@@ -273,16 +277,20 @@ function CreateStockLocationSheet({
 // Edit Sheet
 // ============================================================================
 
-function EditStockLocationSheet({
+/**
+ * One location's editor. Exported so a record page that lists locations (a
+ * seller's) opens it in place rather than sending the operator to settings.
+ */
+export function EditStockLocationSheet({
   id,
-  formKey,
+  formKey = 'stock_location',
   open,
   onOpenChange,
   stockLevelsPanel: StockLevelsPanel,
   activityPanel: ActivityPanel,
 }: {
   id: string
-  formKey: string
+  formKey?: string
   open: boolean
   onOpenChange: (open: boolean) => void
   stockLevelsPanel?: ComponentType<{ stockLocationId: string }>
@@ -330,7 +338,7 @@ function EditStockLocationSheet({
           <SheetDescription>{t('admin.stock_locations.edit_description')}</SheetDescription>
         </SheetHeader>
         {isLoading ? (
-          <div className="p-4 text-sm text-muted-foreground">{t('admin.common.loading')}</div>
+          <div className="p-4 text-base text-muted-foreground">{t('admin.common.loading')}</div>
         ) : (
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col">
             <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
@@ -384,7 +392,7 @@ function StockLocationFormFields({ form }: { form: UseFormReturn<StockLocationFo
     // to as well as its own.
     <div className="flex flex-col gap-6">
       {errors.root?.message && (
-        <p className="text-sm text-destructive" role="alert">
+        <p className="text-base text-destructive" role="alert">
           {errors.root.message}
         </p>
       )}

package/src/products/digital-asset-edit-sheet.tsx

@@ -175,7 +175,7 @@ export function DigitalAssetEditSheet({
 
           <p className="text-muted-foreground text-xs">{t('admin.digital_assets.limits_help')}</p>
 
-          {error && <p className="text-destructive text-sm">{error}</p>}
+          {error && <p className="text-destructive text-base">{error}</p>}
         </div>
 
         <SheetFooter>

package/src/products/digital-asset-provider-sheet.tsx

@@ -71,7 +71,7 @@ export function DigitalAssetProviderSheet({ productId, provider, onOpenChange, o
             onChange={setValues}
           />
 
-          {error && <p className="text-destructive text-sm">{error}</p>}
+          {error && <p className="text-destructive text-base">{error}</p>}
         </div>
 
         <SheetFooter>

package/src/products/digital-assets-card.tsx

@@ -31,7 +31,7 @@ import {
   useConfirm,
 } from '@spree/dashboard-ui'
 import {
-  ChevronDownIcon,
+  ChevronsUpDownIcon,
   DownloadIcon,
   FileDownIcon,
   FileIcon,
@@ -274,7 +274,7 @@ export function DigitalAssetsCard({
                     {uploading
                       ? t('admin.digital_assets.uploading_short')
                       : t('admin.digital_assets.add')}
-                    <ChevronDownIcon className="ml-2 size-4" />
+                    <ChevronsUpDownIcon className="ml-2 size-4" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
@@ -298,8 +298,8 @@ export function DigitalAssetsCard({
       </CardHeader>
 
       <CardContent className="flex flex-col gap-4">
-        <p className="text-muted-foreground text-sm">{t('admin.digital_assets.description')}</p>
-        {notice && canWrite && <p className="text-sm">{notice}</p>}
+        <p className="text-muted-foreground text-base">{t('admin.digital_assets.description')}</p>
+        {notice && canWrite && <p className="text-base">{notice}</p>}
 
         <input
           ref={fileInputRef}
@@ -320,7 +320,7 @@ export function DigitalAssetsCard({
         {isLoading ? (
           <Skeleton className="h-24 w-full" />
         ) : !hasAssets && !canWrite ? (
-          <p className="text-muted-foreground text-sm">{t('admin.digital_assets.empty')}</p>
+          <p className="text-muted-foreground text-base">{t('admin.digital_assets.empty')}</p>
         ) : !hasAssets ? (
           <button
             type="button"
@@ -331,7 +331,7 @@ export function DigitalAssetsCard({
             className="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors hover:border-foreground/30 disabled:pointer-events-none disabled:opacity-60"
           >
             <FileIcon className="size-8 text-muted-foreground" />
-            <p className="text-muted-foreground text-sm">
+            <p className="text-muted-foreground text-base">
               {uploading
                 ? t('admin.digital_assets.uploading_short')
                 : t('admin.digital_assets.drop_hint')}
@@ -339,7 +339,7 @@ export function DigitalAssetsCard({
           </button>
         ) : (
           <div className="overflow-hidden rounded-xl border border-border-subtle">
-            <Table>
+            <Table roundedTop>
               <TableHeader>
                 <TableRow>
                   <TableHead>{t('admin.digital_assets.columns.file')}</TableHead>

package/src/products/inventory-section.tsx

@@ -227,10 +227,10 @@ export function InventorySection({ form, stockLocationHref }: InventorySectionPr
     // Showing "no stock locations" while the query is still in flight is
     // misleading — the locations may exist but haven't loaded yet.
     if (stockLocationsLoading) {
-      return <p className="text-sm text-muted-foreground">{t('admin.common.loading')}</p>
+      return <p className="text-base text-muted-foreground">{t('admin.common.loading')}</p>
     }
     return (
-      <p className="text-sm text-muted-foreground">
+      <p className="text-base text-muted-foreground">
         {stockLocations.length === 0
           ? t('admin.products.inventory.empty_no_locations')
           : t('admin.products.inventory.empty_no_variants')}

package/src/products/media-edit-sheet.tsx

@@ -2,24 +2,14 @@ import type { ProductFormValues } from '@spree/dashboard-core'
 import {
   extensionFieldNames,
   ImageUploadField,
+  MediaEditorDialog,
+  MediaEditorSection,
   parseVideoUrl,
   Slot,
   useTranslation,
 } from '@spree/dashboard-core'
-import {
-  Button,
-  Field,
-  FieldError,
-  FieldLabel,
-  Input,
-  MediaPreview,
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@spree/dashboard-ui'
-import { CheckIcon } from '@spree/dashboard-ui/icons'
+import { Button, Field, FieldError, FieldLabel, Input, MediaPreview } from '@spree/dashboard-ui'
+import { CheckIcon, InfoIcon, LayersIcon } from '@spree/dashboard-ui/icons'
 import { useCallback, useEffect, useRef } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
 import { variantLabel } from './assignable-variants'
@@ -51,7 +41,7 @@ interface Props {
   productId?: string
 }
 
-// Form-backed media editor. The sheet edits `form.media[index]` directly —
+// Form-backed media editor, full screen. It edits `form.media[index]` directly —
 // changes ride the parent product PATCH/POST, no per-asset API calls.
 // Cancel restores a snapshot taken on open; Done runs the slot widgets' own
 // saves, then closes (parent form Save commits). Same model as the per-variant
@@ -250,121 +240,12 @@ export function MediaEditSheet({
   }
 
   return (
-    <Sheet open={open} onOpenChange={(o) => (o ? onOpenChange(o) : handleCancel())}>
-      <SheetContent side="right" showCloseButton={false} className="flex flex-col">
-        <SheetHeader>
-          <SheetTitle>{t('admin.products.media.edit_title')}</SheetTitle>
-        </SheetHeader>
-
-        <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-5">
-          <MediaPreview
-            mediaType={entry.media_type}
-            previewUrl={previewUrl}
-            videoUrl={videoUrl}
-            embedUrl={parsedVideo?.embedUrl}
-            alt={alt}
-            focalPoint={focalPoint}
-            onFocalPointClick={handleFocalPointClick}
-          />
-
-          {isImage && previewUrl && (
-            <div className="flex items-center justify-between gap-2 -mt-3">
-              <p className="text-xs text-muted-foreground">
-                {t('admin.products.media.focal_point_help')}
-              </p>
-              {focalPoint && (
-                <Button type="button" variant="ghost" size="sm" onClick={clearFocalPoint}>
-                  {t('admin.products.media.focal_point_reset')}
-                </Button>
-              )}
-            </div>
-          )}
-
-          {isExternalVideo && (
-            <Field>
-              <FieldLabel htmlFor="media-video-url">
-                {t('admin.fields.media.external_video_url.label')}
-              </FieldLabel>
-              <Input
-                id="media-video-url"
-                value={externalVideoUrl}
-                aria-invalid={videoUrlInvalid || undefined}
-                onChange={(e) => setExternalVideoUrl(e.target.value)}
-                placeholder={t('admin.fields.media.external_video_url.placeholder')}
-              />
-              {videoUrlInvalid && (
-                <FieldError>{t('admin.products.media.video_url_invalid')}</FieldError>
-              )}
-            </Field>
-          )}
-
-          <Field>
-            <FieldLabel htmlFor="media-alt">{t('admin.fields.media.alt.label')}</FieldLabel>
-            <Input
-              id="media-alt"
-              value={alt}
-              onChange={(e) => setAlt(e.target.value)}
-              placeholder={t('admin.fields.media.alt.placeholder')}
-            />
-          </Field>
-
-          {isVideo && (
-            <Field>
-              <FieldLabel>{t('admin.fields.media.poster.label')}</FieldLabel>
-              <ImageUploadField
-                value={posterValue}
-                onChange={setPoster}
-                help={t('admin.fields.media.poster.help')}
-              />
-            </Field>
-          )}
-
-          {variants.length > 0 && (
-            <Field>
-              <FieldLabel>{t('admin.products.media.assigned_variants_label')}</FieldLabel>
-              <p className="text-xs text-muted-foreground">
-                {t('admin.products.media.assigned_variants_help')}
-              </p>
-              <div className="flex flex-wrap gap-2 pt-2">
-                {variants.map((v) => {
-                  const id = v.id
-                  if (!id) return null
-                  const selected = selectedVariantIds.has(id)
-                  const label = variantLabel(v)
-                  return (
-                    <button
-                      key={id}
-                      type="button"
-                      onClick={() => toggleVariant(id)}
-                      aria-pressed={selected}
-                      className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
-                        selected
-                          ? 'border-primary bg-primary text-primary-foreground'
-                          : 'border-border bg-background text-muted-foreground hover:border-muted-foreground hover:text-foreground'
-                      }`}
-                    >
-                      {selected && <CheckIcon className="size-3" />}
-                      {label}
-                    </button>
-                  )
-                })}
-              </div>
-            </Field>
-          )}
-
-          <Slot
-            name={`${formKey}.media.form_fields`}
-            context={{
-              productId,
-              media: entry,
-              mediaIndex,
-              fieldPrefix: `media.${mediaIndex}`,
-              onSave,
-            }}
-          />
-        </div>
-
-        <SheetFooter>
+    <MediaEditorDialog
+      open={open}
+      onOpenChange={(o) => (o ? onOpenChange(o) : handleCancel())}
+      title={t('admin.products.media.edit_title')}
+      actions={
+        <>
           <Button type="button" variant="outline" disabled={saving} onClick={handleCancel}>
             {t('admin.actions.cancel')}
           </Button>
@@ -377,8 +258,130 @@ export function MediaEditSheet({
           >
             {t('admin.actions.done')}
           </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
+        </>
+      }
+      preview={
+        <MediaPreview
+          fit="stage"
+          mediaType={entry.media_type}
+          previewUrl={previewUrl}
+          videoUrl={videoUrl}
+          embedUrl={parsedVideo?.embedUrl}
+          alt={alt}
+          focalPoint={focalPoint}
+          onFocalPointClick={handleFocalPointClick}
+        />
+      }
+      hint={
+        isImage && previewUrl ? (
+          <>
+            <span
+              aria-hidden
+              className={`size-3 shrink-0 rounded-full border-2 border-white ${focalPoint ? 'bg-blue-500' : ''}`}
+            />
+            <span>{t('admin.products.media.focal_point_help')}</span>
+            {focalPoint && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="xs"
+                className="-me-1.5"
+                onClick={clearFocalPoint}
+              >
+                {t('admin.products.media.focal_point_reset')}
+              </Button>
+            )}
+          </>
+        ) : undefined
+      }
+    >
+      <MediaEditorSection icon={<InfoIcon />} title={t('admin.media_editor.information')}>
+        {isExternalVideo && (
+          <Field>
+            <FieldLabel htmlFor="media-video-url">
+              {t('admin.fields.media.external_video_url.label')}
+            </FieldLabel>
+            <Input
+              id="media-video-url"
+              value={externalVideoUrl}
+              aria-invalid={videoUrlInvalid || undefined}
+              onChange={(e) => setExternalVideoUrl(e.target.value)}
+              placeholder={t('admin.fields.media.external_video_url.placeholder')}
+            />
+            {videoUrlInvalid && (
+              <FieldError>{t('admin.products.media.video_url_invalid')}</FieldError>
+            )}
+          </Field>
+        )}
+
+        <Field>
+          <FieldLabel htmlFor="media-alt">{t('admin.fields.media.alt.label')}</FieldLabel>
+          <Input
+            id="media-alt"
+            value={alt}
+            onChange={(e) => setAlt(e.target.value)}
+            placeholder={t('admin.fields.media.alt.placeholder')}
+          />
+        </Field>
+
+        {isVideo && (
+          <Field>
+            <FieldLabel>{t('admin.fields.media.poster.label')}</FieldLabel>
+            <ImageUploadField
+              value={posterValue}
+              onChange={setPoster}
+              help={t('admin.fields.media.poster.help')}
+            />
+          </Field>
+        )}
+
+        {/* Plugin fields join the file's own, as on the media library's editor. */}
+        <Slot
+          name={`${formKey}.media.form_fields`}
+          context={{
+            productId,
+            media: entry,
+            mediaIndex,
+            fieldPrefix: `media.${mediaIndex}`,
+            onSave,
+          }}
+        />
+      </MediaEditorSection>
+
+      {variants.length > 0 && (
+        <MediaEditorSection
+          icon={<LayersIcon />}
+          title={t('admin.products.media.assigned_variants_label')}
+        >
+          <p className="-mt-2 text-muted-foreground text-xs">
+            {t('admin.products.media.assigned_variants_help')}
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {variants.map((v) => {
+              const id = v.id
+              if (!id) return null
+              const selected = selectedVariantIds.has(id)
+              const label = variantLabel(v)
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => toggleVariant(id)}
+                  aria-pressed={selected}
+                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+                    selected
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-border bg-background text-muted-foreground hover:border-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  {selected && <CheckIcon className="size-3" />}
+                  {label}
+                </button>
+              )
+            })}
+          </div>
+        </MediaEditorSection>
+      )}
+    </MediaEditorDialog>
   )
 }