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

package/src/products/bulk-variants-dialog.tsx

@@ -1,3 +1,4 @@
+import { DimensionUnit, normalizeMoneyInput, WeightUnit } from '@spree/core'
 import type { ProductFormValues, VariantFormValues } from '@spree/dashboard-core'
 import { useCountries, useCountryDisplayName } from '@spree/dashboard-core'
 import {
@@ -23,9 +24,6 @@ import {
 } from './use-product-form-data'
 import { composeOptionsText } from './variants-matrix'
 
-const WEIGHT_UNITS = ['g', 'kg', 'lb', 'oz'] as const
-const DIMENSION_UNITS = ['mm', 'cm', 'in'] as const
-
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   form: UseFormReturn<ProductFormValues, any, any>
@@ -171,39 +169,24 @@ export function BulkVariantsDialog({ form, open, onOpenChange }: Props) {
           set(`variants.${idx}.cartons_per_pallet`, change.value)
           break
         case 'cartonWeight': {
-          if (change.value == null || change.value.trim() === '') {
-            set(`variants.${idx}.carton_weight`, null)
-            break
-          }
-          const parsed = Number(change.value.trim().replace(',', '.'))
-          if (!Number.isFinite(parsed) || parsed < 0) break
-          set(`variants.${idx}.carton_weight`, parsed)
+          const parsed = readMeasure(change.value)
+          if (parsed !== undefined) set(`variants.${idx}.carton_weight`, parsed)
           break
         }
         case 'preorderable':
           set(`variants.${idx}.preorderable`, change.value)
           break
         case 'backorderLimit': {
-          if (change.value == null || change.value.trim() === '') {
-            set(`variants.${idx}.backorder_limit`, null)
-            break
+          const parsed = readMeasure(change.value)
+          if (parsed !== undefined) {
+            set(`variants.${idx}.backorder_limit`, parsed === null ? null : Math.trunc(parsed))
           }
-          const parsed = Number(change.value.trim().replace(',', '.'))
-          if (!Number.isFinite(parsed) || parsed < 0) break
-          set(`variants.${idx}.backorder_limit`, Math.trunc(parsed))
           break
         }
         default: {
-          // weight / height / width / depth — decimals. Accept a comma
-          // decimal (the cell ships raw input); ignore anything that doesn't
-          // parse to a non-negative number rather than mangling it.
-          if (change.value == null || change.value.trim() === '') {
-            set(`variants.${idx}.${change.field}`, null)
-            break
-          }
-          const parsed = Number(change.value.trim().replace(',', '.'))
-          if (!Number.isFinite(parsed) || parsed < 0) break
-          set(`variants.${idx}.${change.field}`, parsed)
+          // weight / height / width / depth
+          const parsed = readMeasure(change.value)
+          if (parsed !== undefined) set(`variants.${idx}.${change.field}`, parsed)
           break
         }
       }
@@ -242,8 +225,8 @@ export function BulkVariantsDialog({ form, open, onOpenChange }: Props) {
           <BulkVariantsTable
             rows={rows}
             onChange={handleChange}
-            weightUnitOptions={unitOptions(WEIGHT_UNITS)}
-            dimensionUnitOptions={unitOptions(DIMENSION_UNITS)}
+            weightUnitOptions={unitOptions(Object.values(WeightUnit))}
+            dimensionUnitOptions={unitOptions(Object.values(DimensionUnit))}
             taxCategoryOptions={
               taxCategories.length > 0
                 ? taxCategories.map((c) => ({ value: c.id, label: c.name }))
@@ -293,3 +276,19 @@ export function BulkVariantsDialog({ form, open, onOpenChange }: Props) {
     </Dialog>
   )
 }
+
+// Cells show numbers with a period, so they read back the same way, with
+// comma grouping (`1,500`) or a lone decimal comma (`2,5`) also accepted.
+const MEASURE_INPUT = /^(?:(?:\d{1,3}(?:,\d{3})+|\d+)(?:\.\d+)?|\d+,\d+)$/
+
+/**
+ * A measurement typed or pasted into a cell: `null` when cleared, `undefined`
+ * when it is not a non-negative number, so the cell keeps its value rather
+ * than being mangled.
+ */
+function readMeasure(value: string | null | undefined): number | null | undefined {
+  const typed = value?.trim() ?? ''
+  if (typed === '') return null
+  if (!MEASURE_INPUT.test(typed)) return undefined
+  return Number(normalizeMoneyInput(typed, 'en'))
+}

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

@@ -1,5 +1,11 @@
 import type { ProductFormValues } from '@spree/dashboard-core'
-import { ImageUploadField, parseVideoUrl, useTranslation } from '@spree/dashboard-core'
+import {
+  extensionFieldNames,
+  ImageUploadField,
+  parseVideoUrl,
+  Slot,
+  useTranslation,
+} from '@spree/dashboard-core'
 import {
   Button,
   Field,
@@ -18,6 +24,7 @@ import i18n from 'i18next'
 import { useCallback, useEffect, useRef } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
 import type { PanelVariant as Variant } from './product-types'
+import { useSheetSaveHandlers } from './sheet-save-handlers'
 
 // The fields this sheet edits. Snapshot, cancel-restore and the type all derive
 // from this one list, so a new editable field can't reach the form and then be
@@ -39,13 +46,25 @@ interface Props {
   variants: Variant[]
   open: boolean
   onOpenChange: (open: boolean) => void
+  /** The product form's key — names the slot and the row's extension fields. */
+  formKey: string
+  productId?: string
 }
 
 // Form-backed media editor. The sheet 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 closes (parent form Save
-// commits). Same model as the per-variant Sheet.
-export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange }: Props) {
+// 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
+// Sheet.
+export function MediaEditSheet({
+  form,
+  mediaIndex,
+  variants,
+  open,
+  onOpenChange,
+  formKey,
+  productId,
+}: Props) {
   const { t } = useTranslation()
 
   // Snapshot on open so Cancel can restore. Re-snapshot if mediaIndex changes
@@ -58,7 +77,11 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
   // freshly-uploaded row that has no id yet we fall back to the current
   // index — uploads don't surface a drag handle so the race is impossible.
   type MediaRow = NonNullable<ProductFormValues['media']>[number]
-  type Snapshot = Pick<MediaRow, (typeof EDITED_FIELDS)[number]> & { key: string | null }
+  type Snapshot = Pick<MediaRow, (typeof EDITED_FIELDS)[number]> & {
+    key: string | null
+    // Fields a `<formKey>.media.form_fields` widget edits, restored the same way.
+    extensions: Record<string, unknown>
+  }
   const snapshotRef = useRef<Snapshot | null>(null)
   const rowKey = useCallback(
     (m: MediaRow): string | null => m.id ?? m.signed_id ?? m.uploadId ?? null,
@@ -84,8 +107,18 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
       // Copy the array — the snapshot must not alias the row's own value.
       variant_ids: [...(row.variant_ids ?? [])],
       key: rowKey(row),
+      extensions: structuredClone(
+        Object.fromEntries(
+          extensionFieldNames(`${formKey}.media`).map((name) => [
+            name,
+            (row as Record<string, unknown>)[name],
+          ]),
+        ),
+      ),
     }
-  }, [open, mediaIndex, form, rowKey])
+  }, [open, mediaIndex, form, rowKey, formKey])
+
+  const { onSave, saveAll, saving } = useSheetSaveHandlers()
 
   const entry = form.watch(`media.${mediaIndex}`)
   if (!entry) return null
@@ -180,6 +213,8 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
   }
 
   const handleCancel = () => {
+    // A save already sent can't be called back, so the sheet stays until it settles.
+    if (saving) return
     const snap = snapshotRef.current
     if (snap) {
       // Resolve the row by stable key — the media array may have reordered
@@ -203,6 +238,13 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
           shouldTouch: false,
         })
       }
+      for (const [name, value] of Object.entries(snap.extensions)) {
+        // Extension names are outside the typed row.
+        form.setValue(`media.${targetIndex}.${name}` as any, value, {
+          shouldDirty: false,
+          shouldTouch: false,
+        })
+      }
     }
     onOpenChange(false)
   }
@@ -309,13 +351,30 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
               </div>
             </Field>
           )}
+
+          <Slot
+            name={`${formKey}.media.form_fields`}
+            context={{
+              productId,
+              media: entry,
+              mediaIndex,
+              fieldPrefix: `media.${mediaIndex}`,
+              onSave,
+            }}
+          />
         </div>
 
         <SheetFooter>
-          <Button type="button" variant="outline" onClick={handleCancel}>
+          <Button type="button" variant="outline" disabled={saving} onClick={handleCancel}>
             {t('admin.actions.cancel')}
           </Button>
-          <Button type="button" onClick={() => onOpenChange(false)}>
+          <Button
+            type="button"
+            disabled={saving}
+            onClick={async () => {
+              if (await saveAll()) onOpenChange(false)
+            }}
+          >
             {t('admin.actions.done')}
           </Button>
         </SheetFooter>

package/src/products/normalize-quantity.ts

@@ -2,10 +2,9 @@
 // `Spree::Variant`'s own validations so a merchant hears about a bad value
 // while typing rather than on save.
 
-/** What a buyer is quoted in. Stored quantities stay units at every level. */
-export const PURCHASE_UNITS = ['unit', 'carton'] as const
+import { PURCHASE_UNITS, type PurchaseUnit } from '@spree/core'
 
-export type PurchaseUnit = (typeof PURCHASE_UNITS)[number]
+export { PURCHASE_UNITS, type PurchaseUnit }
 
 /**
  * Reads a quantity rule from a number input. Blank means the rule is unset,

package/src/products/product-bulk-price-editor.tsx

@@ -1,12 +1,10 @@
-import type { CurrencyCode } from '@spree/admin-sdk'
+import { type CurrencyCode, currencyParts, normalizeMoneyInput } from '@spree/core'
 import type { ProductFormValues, VariantPriceFormValues } from '@spree/dashboard-core'
 import { type BulkPriceRow, BulkPriceTable } from '@spree/dashboard-ui'
 import { useCallback, useMemo } from 'react'
 import { type UseFormReturn, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useMoneyLocale } from '../hooks/use-money-locale'
-import { currencyParts } from '../lib/currency-parts'
-import { normalizeMoneyInput } from '../lib/normalize-money'
 import { composeOptionsText } from '../products/variants-matrix'
 import { useFormOptionTypes as useOptionTypes } from './use-product-form-data'
 

package/src/products/product-form-cards.tsx

@@ -13,13 +13,14 @@ import {
   useSortable,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import type { CurrencyCode } from '@spree/admin-sdk'
+import type { CurrencyCode } from '@spree/core'
 import type { MediaType, ProductFormValues } from '@spree/dashboard-core'
 import {
   getApiClient,
   MediaPickerSheet,
   parseVideoUrl,
   ResourceMultiAutocomplete,
+  Slot,
   TagCombobox,
   useFileUpload,
   useOptionalStore,
@@ -86,7 +87,11 @@ import { InventorySection } from './inventory-section'
 import { MediaEditSheet } from './media-edit-sheet'
 import { ProductBulkPriceEditor } from './product-bulk-price-editor'
 import { variantHasTaxCategoryOverride } from './product-form-mapping'
-import type { VariantFormValues } from './product-schema'
+import {
+  ASSIGNABLE_PRODUCT_STATUSES,
+  type MediaFormValues,
+  type VariantFormValues,
+} from './product-schema'
 import type {
   PanelMedia as Media,
   PanelProduct as Product,
@@ -175,8 +180,12 @@ export function GeneralCard({
 // Variants (just a passthrough so the page composition reads top-down)
 // ---------------------------------------------------------------------------
 
-export function VariantsCard({ form, seedFromType }: FormCardProps & { seedFromType?: boolean }) {
-  return <VariantsSection form={form} seedFromType={seedFromType} />
+export function VariantsCard({
+  form,
+  seedFromType,
+  formKey = 'product',
+}: FormCardProps & { seedFromType?: boolean; formKey?: string }) {
+  return <VariantsSection form={form} seedFromType={seedFromType} formKey={formKey} />
 }
 
 // ---------------------------------------------------------------------------
@@ -260,6 +269,13 @@ export function PricesCard({
 // merchant sees where uploads will go but can't trigger them.
 // ---------------------------------------------------------------------------
 
+/**
+ * A media entry appended to the gallery without an upload: a `signed_id` from
+ * a finished upload, a library `source_media_id`, or an external video link.
+ * `previewUrl` is what the tile shows until the product is saved.
+ */
+export type NewMediaEntry = Omit<MediaFormValues, 'position' | 'uploadId'>
+
 interface PendingUpload {
   id: string
   file: File
@@ -289,8 +305,11 @@ export function MediaCard({
   productId,
   variants,
   form,
+  formKey = 'product',
 }: {
   productId?: string
+  /** The product form's key — names the media slots and the rows' extension fields. */
+  formKey?: string
   // The MediaEditSheet's "assign to variant" pill row needs the list of
   // server-persisted variants — only those have an id that can ride the
   // PATCH's media[].variant_ids. Form-state variants without a server id
@@ -413,20 +432,21 @@ export function MediaCard({
 
   // An external video has no file to upload — it goes straight into form state
   // with its link, and the provider's own still stands in as the preview.
-  const handleAddVideo = useCallback(
-    (url: string) => {
+  // Appends entries that need no upload of their own — a video link, a
+  // library pick, or whatever a `<formKey>.media.actions` widget hands over —
+  // positioned after the existing ones. They save with the product.
+  const appendMedia = useCallback(
+    (entries: NewMediaEntry[]) => {
       const current = form.getValues('media') ?? []
       form.setValue(
         'media',
         [
           ...current,
-          {
-            media_type: 'external_video' as const,
-            external_video_url: url,
-            position: current.length + 1,
-            previewUrl: parseVideoUrl(url)?.thumbnailUrl ?? undefined,
+          ...entries.map((entry, index) => ({
+            ...entry,
+            position: current.length + index + 1,
             uploadId: crypto.randomUUID(),
-          },
+          })),
         ],
         { shouldDirty: true },
       )
@@ -434,31 +454,34 @@ export function MediaCard({
     [form],
   )
 
+  const handleAddVideo = useCallback(
+    (url: string) =>
+      appendMedia([
+        {
+          media_type: 'external_video',
+          external_video_url: url,
+          previewUrl: parseVideoUrl(url)?.thumbnailUrl ?? undefined,
+        },
+      ]),
+    [appendMedia],
+  )
+
   // Files picked from the library become ordinary form entries carrying the
   // source's id. The product save places them, sharing the file rather than
   // uploading a second copy.
   const handleAddFromLibrary = useCallback(
-    (picked: Media[]) => {
-      const current = form.getValues('media') ?? []
-      form.setValue(
-        'media',
-        [
-          ...current,
-          ...picked.map((media, index) => ({
-            source_media_id: media.id,
-            alt: media.alt ?? undefined,
-            media_type: (media.media_type ?? 'image') as MediaType,
-            position: current.length + index + 1,
-            previewUrl: media.small_url ?? media.original_url ?? undefined,
-            videoUrl: media.video_url ?? null,
-            posterUrl: media.poster_url ?? null,
-            uploadId: crypto.randomUUID(),
-          })),
-        ],
-        { shouldDirty: true },
-      )
-    },
-    [form],
+    (picked: Media[]) =>
+      appendMedia(
+        picked.map((media) => ({
+          source_media_id: media.id,
+          alt: media.alt ?? undefined,
+          media_type: (media.media_type ?? 'image') as MediaType,
+          previewUrl: media.small_url ?? media.original_url ?? undefined,
+          videoUrl: media.video_url ?? null,
+          posterUrl: media.poster_url ?? null,
+        })),
+      ),
+    [appendMedia],
   )
 
   const handleDelete = useCallback(
@@ -620,6 +643,11 @@ export function MediaCard({
               <FilmIcon />
               {t('admin.products.media.add_video')}
             </Button>
+
+            <Slot
+              name={`${formKey}.media.actions`}
+              context={{ productId, addMedia: appendMedia }}
+            />
           </div>
         </CardContent>
       </Card>
@@ -649,6 +677,8 @@ export function MediaCard({
           onOpenChange={(open) => {
             if (!open) setEditingIndex(null)
           }}
+          formKey={formKey}
+          productId={productId}
         />
       )}
     </>
@@ -889,8 +919,6 @@ export function SEOCard({ form, product }: FormCardProps & { product?: Product }
 // Status
 // ---------------------------------------------------------------------------
 
-const ASSIGNABLE_STATUSES = ['draft', 'active', 'archived']
-
 export function StatusCard({
   form,
   reviewActions,
@@ -915,9 +943,11 @@ export function StatusCard({
   // made, so the operator can move the product on from here like any other —
   // overriding their own refusal is not a review action, and leaving the
   // picker disabled there was a dead end with no way out.
-  const inReview = Boolean(status) && !ASSIGNABLE_STATUSES.includes(status as string)
+  const inReview = Boolean(status) && !ASSIGNABLE_PRODUCT_STATUSES.includes(status as string)
   const awaitingDecision = status === 'proposed'
-  const values = inReview ? [status as string, ...ASSIGNABLE_STATUSES] : ASSIGNABLE_STATUSES
+  const values = inReview
+    ? [status as string, ...ASSIGNABLE_PRODUCT_STATUSES]
+    : ASSIGNABLE_PRODUCT_STATUSES
 
   return (
     <SharedStatusCard<ProductFormValues>

package/src/products/product-form-mapping.ts

@@ -1,3 +1,4 @@
+import { extensionFormValues, extensionRowValues } from '../lib/form-fields-registry'
 import { i18n } from '../lib/i18n'
 import { normalizeQuantityRule } from './normalize-quantity'
 import type { MediaType, ProductFormValues, VariantFormValues } from './product-schema'
@@ -11,8 +12,18 @@ import type { PanelMedia, PanelProduct, PanelVariant } from './product-types'
  * this mapping would be two ways to disagree.
  */
 
-export function variantToFormValues(variant: PanelVariant, position: number): VariantFormValues {
+/**
+ * `formKey` is the product form's key (`'product'`, or `'seller.product'` in
+ * the seller panel); the rows' extension fields are registered under
+ * `${formKey}.variant` and `${formKey}.media`.
+ */
+export function variantToFormValues(
+  variant: PanelVariant,
+  position: number,
+  formKey = 'product',
+): VariantFormValues {
   return {
+    ...extensionFormValues(`${formKey}.variant`, variant),
     id: variant.id,
     sku: variant.sku ?? null,
     barcode: variant.barcode ?? null,
@@ -76,8 +87,9 @@ export function variantToFormValues(variant: PanelVariant, position: number): Va
 // late paint) so a new media field can't reach one and miss the other.
 // Takes the generated SDK type rather than a hand-listed shape, so a field
 // added to the serializer can't quietly go missing here.
-export function mediaToFormValues(media: PanelMedia, index: number) {
+export function mediaToFormValues(media: PanelMedia, index: number, formKey = 'product') {
   return {
+    ...extensionFormValues(`${formKey}.media`, media),
     id: media.id,
     alt: media.alt ?? null,
     position: media.position ?? index + 1,
@@ -108,6 +120,7 @@ export function productToFormValues(
   // captures it atomically instead of via a follow-up setValue that races
   // with the merchant's unsaved edits.
   media?: PanelMedia[],
+  formKey = 'product',
 ): ProductFormValues {
   const hasVariants = (product.variant_count ?? 0) > 0
   const variantSource = hasVariants
@@ -140,14 +153,14 @@ export function productToFormValues(
     meta_title: product.meta_title ?? '',
     meta_description: product.meta_description ?? '',
     slug: product.slug ?? '',
-    variants: variantSource.map((v, i) => variantToFormValues(v, i)),
+    variants: variantSource.map((v, i) => variantToFormValues(v, i, formKey)),
     custom_fields:
       product.custom_fields?.map((cf) => ({
         id: cf.id,
         custom_field_definition_id: cf.custom_field_definition_id,
         value: cf.value,
       })) ?? [],
-    media: media?.map(mediaToFormValues) ?? [],
+    media: media?.map((m, i) => mediaToFormValues(m, i, formKey)) ?? [],
     product_publications: (product.product_publications ?? []).map((l) => ({
       id: l.id,
       channel_id: l.channel_id,
@@ -157,6 +170,31 @@ export function productToFormValues(
   }
 }
 
+/**
+ * The submitted values with each variant and media row's extension fields put
+ * back from live form state. The Zod parse behind a submit strips keys the
+ * schema doesn't know from every row; it keeps the rows' order, so row `i` of
+ * the parse is row `i` of the form. Call it first in a submit handler, before
+ * rows are filtered or reordered.
+ */
+export function withExtensionRowValues(
+  formKey: string,
+  values: ProductFormValues,
+  raw: Partial<ProductFormValues>,
+): ProductFormValues {
+  return {
+    ...values,
+    variants: values.variants?.map((variant, index) => ({
+      ...variant,
+      ...extensionRowValues(`${formKey}.variant`, raw.variants?.[index]),
+    })),
+    media: values.media?.map((media, index) => ({
+      ...media,
+      ...extensionRowValues(`${formKey}.media`, raw.media?.[index]),
+    })),
+  }
+}
+
 // Strip UI-only fields (stock_location_name) and undefined entries so the
 // PATCH body matches the Admin API VariantUpdateParams shape exactly. The
 // Spree::Product#variants= setter reconciles by id, creates new entries,
@@ -187,13 +225,14 @@ export function prepareVariantsTaxForProductSave(
   })
 }
 
-export function variantToWirePayload(v: VariantFormValues, index: number) {
+export function variantToWirePayload(v: VariantFormValues, index: number, formKey = 'product') {
   // DB columns `sku` and `weight` are NOT NULL with defaults ("", 0.0).
   // The other scalar fields (barcode, dimensions, weight_unit,
   // dimensions_unit, tax_category_id) ARE nullable — those we always send
   // even when null so the merchant can clear them. NOT-NULL fields fall
   // back to their schema defaults when blank.
   const payload: Record<string, unknown> = {
+    ...extensionRowValues(`${formKey}.variant`, v),
     position: index + 1,
     options: v.options,
     sku: v.sku ?? '',

package/src/products/product-schema.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest'
+import { productFormSchema } from './product-schema'
+
+describe('productFormSchema status', () => {
+  it('accepts a status an extension added, so the form still saves', () => {
+    expect(productFormSchema.shape.status.safeParse('pending_compliance').success).toBe(true)
+  })
+})

package/src/products/product-schema.ts

@@ -1,3 +1,4 @@
+import { MEDIA_TYPES, type MediaType, PRODUCT_STATUSES, subsetOf } from '@spree/core'
 import { requiredMessage } from '@spree/dashboard-ui'
 import i18n from 'i18next'
 import { z } from 'zod/v4'
@@ -103,9 +104,7 @@ export type CustomFieldFormValues = z.infer<typeof customFieldFormSchema>
 // `source_media_id` (a file picked from the library). All can hold edits to
 // alt, position, and variant_ids that the parent product PATCH/POST ships
 // inline. previewUrl + uploadId are UI-only; stripped at submit.
-export const MEDIA_TYPES = ['image', 'video', 'external_video'] as const
-
-export type MediaType = (typeof MEDIA_TYPES)[number]
+export { MEDIA_TYPES, type MediaType }
 
 export const mediaFormSchema = z
   .object({
@@ -169,6 +168,13 @@ export const productPublicationFormSchema = z.object({
 
 export type ProductPublicationFormValues = z.infer<typeof productPublicationFormSchema>
 
+/** Statuses a merchant sets by hand; the rest come from the review workflow. */
+export const ASSIGNABLE_PRODUCT_STATUSES = subsetOf(PRODUCT_STATUSES, [
+  'draft',
+  'active',
+  'archived',
+])
+
 export const productFormSchema = z.object({
   // General
   name: z.string().min(1, { error: requiredMessage('name') }),
@@ -176,10 +182,11 @@ export const productFormSchema = z.object({
 
   // Status
   // Every status the API may answer, not just the ones a form sets. A
-  // marketplace product also comes back `proposed` or `rejected`, and a schema
-  // that rejects those makes the whole form unsavable rather than flagging a
-  // field (docs/plans/6.0-seller-product-submission.md).
-  status: z.enum(['draft', 'active', 'archived', 'proposed', 'rejected']).optional(),
+  // marketplace product also comes back `proposed` or `rejected`, an extension
+  // may add statuses of its own, and a schema that rejects any of those makes
+  // the whole form unsavable rather than flagging a field
+  // (docs/plans/6.0-seller-product-submission.md).
+  status: z.string().optional(),
 
   // Categorization
   category_ids: z.array(z.string()).optional(),

package/src/products/product-types.ts

@@ -1,4 +1,4 @@
-import type { CountryCode, CurrencyCode } from '@spree/admin-sdk'
+import type { CountryCode, CurrencyCode } from '@spree/core'
 
 /**
  * What the shared product form reads off a product, its variants and its

package/src/products/sheet-save-handlers.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from 'react'
+
+/** Persists a slot widget's own edits; resolves `false` to keep the sheet open. */
+export type SheetSaveHandler = () => Promise<boolean>
+
+/**
+ * Lets widgets in a product-page sheet's slot save their own records when the
+ * sheet's Done is pressed. The sheet's fields ride the product's Save, but a
+ * widget writing a different record (a variant's custom fields) has no other
+ * moment that matches what the merchant expects: Done keeps, Cancel drops.
+ */
+export function useSheetSaveHandlers() {
+  const handlers = useRef(new Set<SheetSaveHandler>())
+  const [saving, setSaving] = useState(false)
+
+  /** Registers a handler; the returned function unregisters it. */
+  const onSave = useCallback((handler: SheetSaveHandler) => {
+    handlers.current.add(handler)
+    return () => {
+      handlers.current.delete(handler)
+    }
+  }, [])
+
+  // A widget that throws keeps the sheet open like one that resolves `false`,
+  // rather than escaping as an unhandled rejection from the Done click.
+  const saveAll = useCallback(async () => {
+    setSaving(true)
+    try {
+      const results = await Promise.allSettled([...handlers.current].map((handler) => handler()))
+      return results.every((result) => result.status === 'fulfilled' && result.value)
+    } finally {
+      setSaving(false)
+    }
+  }, [])
+
+  return { onSave, saveAll, saving }
+}