@aglyn/plugins-commerce 1.0.0-beta.218 → 1.0.0-beta.220

package/src/lib/components/console/product-editor-dialog.component.js

@@ -23,14 +23,16 @@ import { Timestamp } from "@aglyn/shared-util-timestamp";
 import { Alert, Autocomplete, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, MenuItem, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
 import { collection, doc, getDoc } from "firebase/firestore";
 import { productCollectionFields } from "./smart-collections.js";
-import { useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { ceilingedWindow, collectionCeiling, useFirestore, useFirestoreCollection, useHostResourceApi, writeGuardedBySeed, useUser } from "@aglyn/tenant-feature-instance";
 import { writeSiteWideChange } from "@aglyn/tenant-feature-instance/hooks/helpers/site-wide-change";
 import { useMediaPicker } from "@aglyn/aglyn";
 import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
 import { seoListingFieldCount, seoListingFieldTooLong } from "@aglyn/aglyn/app-utils/seo-listing-fields";
 import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useContentStable } from "@aglyn/shared-ui-jsx/hooks/use-content-stable";
 import { EntitlementUpsell, useCommerceEntitlement } from "./entitlement-gate.component.js";
+import { PRODUCT_EDITOR_ZONE } from "./product-zones.js";
 import { MembersVideosField, PaidDownloadAddButton, PaidMediaProtection } from "./paid-media.js";
 /**
  * What each picker in this dialog will offer.
@@ -72,6 +74,991 @@ function comboLabel(options) {
     const values = Object.values(options != null ? options : {});
     return values.length ? values.join(' / ') : 'Default';
 }
+/** Stand-in for a list the product does not hold yet, the same one each render. */ const NO_ITEMS = [];
+const NO_OPTIONS = [];
+const NO_FILES = [];
+const NO_VIDEOS = [];
+const FILL_ROW = {
+    flex: 1
+};
+const categoryLabel = (category)=>category.name;
+const recordLabel = (item)=>{
+    var _item_name;
+    return (_item_name = item.name) != null ? _item_name : item.$id;
+};
+const sameRecord = (option, value)=>option.$id === value.$id;
+/**
+ * One of the editor's chip lists — tags, categories, an option's values,
+ * related products — MEMOIZED, and every prop it takes is stable while its
+ * own list is (AGL-3423).
+ *
+ * A multiple Autocomplete hands its input a new chip array as
+ * `startAdornment` on every render, and MUI's `InputBase` copies that into
+ * its `FormControl` from a passive effect: a state update left pending after
+ * every commit the field takes part in. React 19 counts each such commit as a
+ * nested update, and keystrokes delivered back to back commit one after
+ * another with nothing to clear the count, so the fifty-first throws
+ * "Maximum update depth exceeded" (#185). Every field in this editor writes
+ * one draft, so every keystroke in any of them re-rendered all four lists;
+ * kept out of those renders, a list commits only when it changes.
+ */ const ProductChipsField = /*#__PURE__*/ memo(function ProductChipsField(props) {
+    const { index = 0, onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        freeSolo: props.freeSolo,
+        options: props.options,
+        value: props.value,
+        getOptionLabel: props.getOptionLabel,
+        isOptionEqualToValue: props.isOptionEqualToValue,
+        onChange: (_event, next)=>onChange(next, index),
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: props.label,
+                size: "small",
+                placeholder: props.placeholder,
+                helperText: props.helperText
+            })),
+        sx: props.fill ? FILL_ROW : undefined
+    });
+});
+/**
+ * A text field that redraws only when what it shows changes (AGL-3423).
+ *
+ * Every field in this editor writes one draft, so a keystroke in any of them
+ * re-renders the dialog, and drawn whole that is some forty inputs and twelve
+ * hundred components for one letter in a product with four variants. When a
+ * keystroke costs that much, typed input queues and is processed back to
+ * back, which is what lets a chip list's pending update climb to #185 (see
+ * `ProductChipsField`). The sections below are memoized on the slice of the
+ * draft they show, and each field in them is this, handed a handler and
+ * styles that keep their identity, so the keystroke redraws the field it
+ * lands in.
+ */ const MemoTextField = /*#__PURE__*/ memo(TextField);
+const FIRST_ROW = {
+    mt: 1
+};
+const WIDE_ROW = {
+    xs: 'column',
+    sm: 'row'
+};
+const NARROW_SELECT = {
+    minWidth: 140
+};
+const SUPPLIER_SELECT = {
+    minWidth: 160
+};
+const OVERSELL_SELECT = {
+    minWidth: 200
+};
+const KIND_SELECT = {
+    minWidth: 130
+};
+const SHORT_SELECT = {
+    minWidth: 120
+};
+const BILLING_SELECT = {
+    minWidth: 180
+};
+const COUNT_FIELD = {
+    width: 140
+};
+const VERSION_FIELD = {
+    width: 100
+};
+const OPTION_FIELD = {
+    width: 160
+};
+const PRICE_CELL = {
+    width: 88
+};
+const CODE_CELL = {
+    width: 110
+};
+const STOCK_CELL = {
+    width: 72
+};
+const DECIMAL_INPUT = {
+    htmlInput: {
+        inputMode: 'decimal'
+    }
+};
+const NUMERIC_INPUT = {
+    htmlInput: {
+        inputMode: 'numeric'
+    }
+};
+const TYPE_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "physical",
+        children: 'Physical'
+    }, "physical"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "digital",
+        children: 'Digital'
+    }, "digital"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "service",
+        children: 'Service'
+    }, "service")
+];
+const STATUS_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "draft",
+        children: 'Draft'
+    }, "draft"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "active",
+        children: 'Active'
+    }, "active"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "archived",
+        children: 'Archived'
+    }, "archived")
+];
+const OVERSELL_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "deny",
+        children: 'Stop selling (sold out)'
+    }, "deny"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "backorder",
+        children: 'Keep selling (backorder)'
+    }, "backorder")
+];
+const TAX_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "taxable",
+        children: 'Taxable'
+    }, "taxable"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "exempt",
+        children: 'Tax exempt'
+    }, "exempt")
+];
+const INTERVAL_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "month",
+        children: 'Monthly'
+    }, "month"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "year",
+        children: 'Yearly'
+    }, "year")
+];
+/**
+ * A zone hosted in the dialog, drawn again only when what it is handed
+ * changes (AGL-3423). The shell's renderer is not memoized: drawn straight
+ * into the dialog, every widget in the zone would redraw on each keystroke in
+ * any field.
+ */ const HostedZone = /*#__PURE__*/ memo(function HostedZone(props) {
+    const { renderer: Renderer } = props, zone = _object_without_properties_loose(props, [
+        "renderer"
+    ]);
+    return /*#__PURE__*/ _jsx(Renderer, _extends({}, zone));
+});
+/** The product's name and address, type, status, supplier and description. */ const ProductBasicsFields = /*#__PURE__*/ memo(function ProductBasicsFields(props) {
+    var _props_supplierId;
+    const { suppliers, update } = props;
+    const setType = useCallback((event)=>update({
+            type: event.target.value
+        }), [
+        update
+    ]);
+    const setStatus = useCallback((event)=>update({
+            status: event.target.value
+        }), [
+        update
+    ]);
+    const setSupplier = useCallback((event)=>update({
+            supplierId: event.target.value || undefined
+        }), [
+        update
+    ]);
+    const setDescription = useCallback((event)=>update({
+            description: event.target.value
+        }), [
+        update
+    ]);
+    const supplierMenu = useMemo(()=>[
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "",
+                children: 'None (self-fulfilled)'
+            }, ""),
+            ...suppliers.map((supplier)=>/*#__PURE__*/ _jsx(MenuItem, {
+                    value: supplier.$id,
+                    children: supplier.name
+                }, supplier.$id))
+        ], [
+        suppliers
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: WIDE_ROW,
+                spacing: 2,
+                sx: FIRST_ROW,
+                children: [
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Name",
+                        value: props.name,
+                        onChange: props.onName,
+                        size: "small",
+                        autoFocus: true,
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Slug",
+                        value: props.slug,
+                        onChange: props.onSlug,
+                        size: "small",
+                        fullWidth: true,
+                        helperText: props.slug ? `/products/${props.slug}` : undefined
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Type",
+                        value: props.type,
+                        onChange: setType,
+                        size: "small",
+                        select: true,
+                        sx: NARROW_SELECT,
+                        children: TYPE_MENU
+                    }),
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Status",
+                        value: props.status,
+                        onChange: setStatus,
+                        size: "small",
+                        select: true,
+                        sx: NARROW_SELECT,
+                        children: STATUS_MENU
+                    }),
+                    suppliers.length > 0 ? /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Supplier",
+                        value: (_props_supplierId = props.supplierId) != null ? _props_supplierId : '',
+                        onChange: setSupplier,
+                        size: "small",
+                        select: true,
+                        sx: SUPPLIER_SELECT,
+                        helperText: "Routes paid orders",
+                        children: supplierMenu
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Description",
+                value: props.description,
+                onChange: setDescription,
+                size: "small",
+                multiline: true,
+                minRows: 2
+            })
+        ]
+    });
+});
+/** The product's images, each removable, and the button that adds one. */ const ProductMediaFields = /*#__PURE__*/ memo(function ProductMediaFields(props) {
+    const { mediaUrls, update, pick } = props;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            display: 'flex',
+            gap: 1,
+            flexWrap: 'wrap'
+        },
+        children: [
+            mediaUrls.map((url, index)=>/*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        position: 'relative'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            component: "img",
+                            src: url,
+                            alt: "",
+                            sx: {
+                                width: 72,
+                                height: 72,
+                                objectFit: 'cover',
+                                borderRadius: 1,
+                                border: 1,
+                                borderColor: 'divider'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            size: "small",
+                            "aria-label": "Remove image",
+                            onClick: ()=>update((product)=>{
+                                    var _product_mediaUrls;
+                                    return {
+                                        mediaUrls: ((_product_mediaUrls = product.mediaUrls) != null ? _product_mediaUrls : []).filter((_item, itemIndex)=>itemIndex !== index)
+                                    };
+                                }),
+                            sx: {
+                                position: 'absolute',
+                                top: -8,
+                                right: -8,
+                                bgcolor: 'background.paper',
+                                border: 1,
+                                borderColor: 'divider',
+                                p: 0.25
+                            },
+                            children: '✕'
+                        })
+                    ]
+                }, `${url}-${index}`)),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                onClick: ()=>void pick((media)=>update((product)=>{
+                            var _product_mediaUrls;
+                            return {
+                                mediaUrls: [
+                                    ...(_product_mediaUrls = product.mediaUrls) != null ? _product_mediaUrls : [],
+                                    media.url
+                                ]
+                            };
+                        })),
+                children: 'Add image'
+            })
+        ]
+    });
+});
+const ProductOptionRow = /*#__PURE__*/ memo(function ProductOptionRow(props) {
+    const { index, option, onChange, onValues } = props;
+    const setName = useCallback((event)=>onChange(index, {
+            name: event.target.value
+        }), [
+        index,
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'flex-start'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Option",
+                value: option.name,
+                onChange: setName,
+                size: "small",
+                sx: OPTION_FIELD,
+                placeholder: "Size"
+            }),
+            /*#__PURE__*/ _jsx(ProductChipsField, {
+                freeSolo: true,
+                fill: true,
+                label: "Values",
+                placeholder: "S, M, L…",
+                options: NO_ITEMS,
+                value: option.values,
+                index: index,
+                onChange: onValues
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                color: "error",
+                onClick: ()=>onChange(index, null),
+                sx: {
+                    mt: 0.5
+                },
+                children: 'Remove'
+            })
+        ]
+    });
+});
+/** The product's options, one row each, and the button that adds one. */ const ProductOptionsFields = /*#__PURE__*/ memo(function ProductOptionsFields(props) {
+    const { options, onChange, onValues } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            options.map((option, index)=>/*#__PURE__*/ _jsx(ProductOptionRow, {
+                    index: index,
+                    option: option,
+                    onChange: onChange,
+                    onValues: onValues
+                }, index)),
+            options.length < CommerceModel.COMMERCE_MAX_OPTIONS ? /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                onClick: ()=>onChange(options.length, {
+                        name: '',
+                        values: []
+                    }),
+                children: 'Add option'
+            }) : null
+        ]
+    });
+});
+const ProductVariantRow = /*#__PURE__*/ memo(function ProductVariantRow(props) {
+    var _variant_priceUsd, _variant_compareAtPriceUsd, _variant_sku, _variant_barcode, _variant_inventory, _variant_weightGrams;
+    const { index, variant, stockApplies, onField } = props;
+    const label = comboLabel(variant.options);
+    // One handler per cell, each keeping its identity while the row's does.
+    const set = useMemo(()=>{
+        const cell = (field)=>(event)=>onField(index, field, event.target.value);
+        return {
+            priceUsd: cell('priceUsd'),
+            compareAtPriceUsd: cell('compareAtPriceUsd'),
+            sku: cell('sku'),
+            barcode: cell('barcode'),
+            inventory: cell('inventory'),
+            weightGrams: cell('weightGrams')
+        };
+    }, [
+        index,
+        onField
+    ]);
+    const stockInput = useMemo(()=>({
+            htmlInput: {
+                inputMode: 'numeric',
+                'aria-label': `Stock — ${label}`
+            }
+        }), [
+        label
+    ]);
+    return /*#__PURE__*/ _jsxs(TableRow, {
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                sx: {
+                    whiteSpace: 'nowrap'
+                },
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_priceUsd = variant.priceUsd) != null ? _variant_priceUsd : '',
+                    onChange: set.priceUsd,
+                    size: "small",
+                    sx: PRICE_CELL,
+                    // An empty price is marked (AGL-2916): a proposed
+                    // product arrives with none, and Save waits for one.
+                    error: !CommerceModel.variantHasPrice(variant),
+                    placeholder: "Set",
+                    slotProps: DECIMAL_INPUT
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_compareAtPriceUsd = variant.compareAtPriceUsd) != null ? _variant_compareAtPriceUsd : '',
+                    onChange: set.compareAtPriceUsd,
+                    size: "small",
+                    sx: PRICE_CELL,
+                    slotProps: DECIMAL_INPUT
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_sku = variant.sku) != null ? _variant_sku : '',
+                    onChange: set.sku,
+                    size: "small",
+                    sx: CODE_CELL
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_barcode = variant.barcode) != null ? _variant_barcode : '',
+                    onChange: set.barcode,
+                    size: "small",
+                    sx: CODE_CELL
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_inventory = variant.inventory) != null ? _variant_inventory : '',
+                    placeholder: stockApplies ? '—' : 'n/a',
+                    disabled: !stockApplies,
+                    onChange: set.inventory,
+                    size: "small",
+                    sx: STOCK_CELL,
+                    slotProps: stockInput
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(MemoTextField, {
+                    value: (_variant_weightGrams = variant.weightGrams) != null ? _variant_weightGrams : '',
+                    onChange: set.weightGrams,
+                    size: "small",
+                    sx: PRICE_CELL,
+                    slotProps: NUMERIC_INPUT
+                })
+            })
+        ]
+    });
+});
+/** The matrix's column headings, one element for every render. */ const VARIANTS_HEAD = /*#__PURE__*/ _jsx(TableHead, {
+    children: /*#__PURE__*/ _jsxs(TableRow, {
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Variant'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Price ($)'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Compare-at'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'SKU'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Barcode'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Stock'
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: 'Weight (g)'
+            })
+        ]
+    })
+});
+/**
+ * The variants matrix: one row per combination of the options above, each
+ * with its own price, SKU, barcode, stock and weight. A keystroke in one row
+ * leaves the others' props as they were.
+ */ const ProductVariantsTable = /*#__PURE__*/ memo(function ProductVariantsTable(props) {
+    const { variants, stockApplies, onField } = props;
+    return /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsxs(ScrollTable, {
+            size: "small",
+            children: [
+                VARIANTS_HEAD,
+                /*#__PURE__*/ _jsx(TableBody, {
+                    children: variants.map((variant, index)=>/*#__PURE__*/ _jsx(ProductVariantRow, {
+                            index: index,
+                            variant: variant,
+                            stockApplies: stockApplies,
+                            onField: onField
+                        }, variant.id))
+                })
+            ]
+        })
+    });
+});
+/** What happens when stock runs out, the gift-card kind, tax, and the low-stock alert. */ const ProductSellingFields = /*#__PURE__*/ memo(function ProductSellingFields(props) {
+    var _props_lowStockThreshold;
+    const { giftsLocked, giftsPlanLabel, update } = props;
+    const setOversellPolicy = useCallback((event)=>update({
+            oversellPolicy: event.target.value
+        }), [
+        update
+    ]);
+    const setKind = useCallback((event)=>update({
+            giftCard: event.target.value === 'gift'
+        }), [
+        update
+    ]);
+    const setTax = useCallback((event)=>update({
+            taxExempt: event.target.value === 'exempt'
+        }), [
+        update
+    ]);
+    const setLowStock = useCallback((event)=>{
+        const raw = event.target.value.trim();
+        update({
+            lowStockThreshold: raw === '' ? undefined : Math.max(0, Math.round(Number(raw)))
+        });
+    }, [
+        update
+    ]);
+    const kindMenu = useMemo(()=>[
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "standard",
+                children: 'Standard'
+            }, "standard"),
+            // Disabled, never removed (AGL-2080). A product saved as a gift
+            // card before the plan lapsed still has `giftCard: true`, and a
+            // MUI select whose value is absent from its options renders
+            // blank — the next edit would silently rewrite the product to
+            // Standard. Locking the option refuses NEW configuration
+            // without rewriting existing data.
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "gift",
+                disabled: giftsLocked,
+                children: giftsLocked ? `Gift card — ${giftsPlanLabel != null ? giftsPlanLabel : 'upgrade'} plan` : 'Gift card'
+            }, "gift")
+        ], [
+        giftsLocked,
+        giftsPlanLabel
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "When out of stock",
+                value: props.oversellPolicy,
+                onChange: setOversellPolicy,
+                size: "small",
+                select: true,
+                sx: OVERSELL_SELECT,
+                children: OVERSELL_MENU
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Kind",
+                value: props.giftCard ? 'gift' : 'standard',
+                onChange: setKind,
+                size: "small",
+                select: true,
+                sx: KIND_SELECT,
+                helperText: giftsLocked ? `Gift cards are on ${giftsPlanLabel != null ? giftsPlanLabel : 'a higher plan'}` : 'Gift cards issue a code',
+                children: kindMenu
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Tax",
+                value: props.taxExempt ? 'exempt' : 'taxable',
+                onChange: setTax,
+                size: "small",
+                select: true,
+                sx: SHORT_SELECT,
+                children: TAX_MENU
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Low-stock alert at",
+                value: (_props_lowStockThreshold = props.lowStockThreshold) != null ? _props_lowStockThreshold : '',
+                placeholder: "Off",
+                disabled: !props.stockApplies,
+                onChange: setLowStock,
+                size: "small",
+                sx: COUNT_FIELD,
+                slotProps: NUMERIC_INPUT,
+                helperText: "Notifies managers"
+            })
+        ]
+    });
+});
+/** One-time or subscription billing, its interval, and a free trial. */ const ProductBillingFields = /*#__PURE__*/ memo(function ProductBillingFields(props) {
+    var _props_subsPlanLabel, _subscription_trialDays;
+    const { subscription, subscriptionOptional, subsLocked, update, replaceDraft } = props;
+    const setBilling = useCallback((event)=>{
+        const value = event.target.value;
+        // `replaceDraft`, not `update`: a patch is spread over the draft,
+        // which would resurrect the keys deleted below.
+        replaceDraft((product)=>{
+            // "Both" (AGL-545): the PDP offers one-time OR subscribe at
+            // the same price; the interval field beside picks the cadence.
+            // Cleared keys are deleted (not set undefined) so the
+            // client-direct setDoc on save never sees undefined values.
+            const next = _extends({}, product);
+            if (value === 'once') {
+                delete next.subscription;
+            } else {
+                var _product_subscription, _ref;
+                var _product_subscription1;
+                next.subscription = _extends({}, (_product_subscription = product.subscription) != null ? _product_subscription : {}, {
+                    interval: value === 'both' ? (_ref = (_product_subscription1 = product.subscription) == null ? void 0 : _product_subscription1.interval) != null ? _ref : 'month' : value
+                });
+            }
+            if (value === 'both') next.subscriptionOptional = true;
+            else delete next.subscriptionOptional;
+            return next;
+        });
+    }, [
+        replaceDraft
+    ]);
+    const setBillingInterval = useCallback((event)=>{
+        const interval = event.target.value;
+        update((product)=>({
+                subscription: _extends({}, product.subscription, {
+                    interval
+                })
+            }));
+    }, [
+        update
+    ]);
+    const setTrialDays = useCallback((event)=>{
+        const raw = event.target.value.trim();
+        update((product)=>({
+                subscription: _extends({}, product.subscription, raw === '' ? {
+                    trialDays: undefined
+                } : {
+                    trialDays: Math.max(1, Math.round(Number(raw)))
+                })
+            }));
+    }, [
+        update
+    ]);
+    const billingMenu = useMemo(()=>[
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "once",
+                children: 'One-time purchase'
+            }, "once"),
+            // Same rule as the gift-card option: disabled, not removed, so an
+            // existing subscription product keeps its interval instead of being
+            // silently reset to one-time.
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "month",
+                disabled: subsLocked,
+                children: 'Monthly subscription'
+            }, "month"),
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "year",
+                disabled: subsLocked,
+                children: 'Yearly subscription'
+            }, "year"),
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "both",
+                disabled: subsLocked,
+                children: 'Both — buyer chooses'
+            }, "both")
+        ], [
+        subsLocked
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Billing",
+                value: subscription ? subscriptionOptional ? 'both' : subscription.interval : 'once',
+                onChange: setBilling,
+                size: "small",
+                select: true,
+                sx: BILLING_SELECT,
+                helperText: subsLocked ? `Subscriptions are on ${(_props_subsPlanLabel = props.subsPlanLabel) != null ? _props_subsPlanLabel : 'a higher plan'}` : 'Subscriptions bill until canceled',
+                children: billingMenu
+            }),
+            subscription && subscriptionOptional ? /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Interval",
+                value: subscription.interval,
+                onChange: setBillingInterval,
+                size: "small",
+                select: true,
+                sx: SHORT_SELECT,
+                children: INTERVAL_MENU
+            }) : null,
+            subscription ? /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Free trial (days)",
+                placeholder: "None",
+                value: (_subscription_trialDays = subscription.trialDays) != null ? _subscription_trialDays : '',
+                onChange: setTrialDays,
+                size: "small",
+                sx: COUNT_FIELD,
+                slotProps: NUMERIC_INPUT
+            }) : null
+        ]
+    });
+});
+const DigitalFileRow = /*#__PURE__*/ memo(function DigitalFileRow(props) {
+    var _file_version;
+    const { index, file, update } = props;
+    const setVersion = useCallback((event)=>{
+        const version = event.target.value.slice(0, 20);
+        update((product)=>{
+            var _product_digitalFiles;
+            const digitalFiles = [
+                ...(_product_digitalFiles = product.digitalFiles) != null ? _product_digitalFiles : []
+            ];
+            digitalFiles[index] = _extends({}, file, {
+                version
+            });
+            return {
+                digitalFiles
+            };
+        });
+    }, [
+        file,
+        index,
+        update
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "body2",
+                sx: {
+                    flex: 1
+                },
+                noWrap: true,
+                children: [
+                    file.fileName,
+                    file.version ? ` · v${file.version}` : ''
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PaidMediaProtection, {
+                url: file.url,
+                hostId: props.hostId,
+                productId: props.productId,
+                kind: "download"
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "Version",
+                value: (_file_version = file.version) != null ? _file_version : '',
+                onChange: setVersion,
+                size: "small",
+                sx: VERSION_FIELD
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                color: "error",
+                onClick: ()=>update((product)=>{
+                        var _product_digitalFiles;
+                        return {
+                            digitalFiles: ((_product_digitalFiles = product.digitalFiles) != null ? _product_digitalFiles : []).filter((_item, itemIndex)=>itemIndex !== index)
+                        };
+                    }),
+                children: '✕'
+            })
+        ]
+    });
+});
+/*
+ * The paid-media controls beside the digital fields, drawn again only when
+ * what they are handed changes: a keystroke in the download limit leaves the
+ * videos, and the protection check on each, as they were.
+ */ const MemoMembersVideosField = /*#__PURE__*/ memo(MembersVideosField);
+const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
+/** A digital product's files, its download limit and its members videos. */ const ProductDigitalFields = /*#__PURE__*/ memo(function ProductDigitalFields(props) {
+    var _props_downloadLimit;
+    const { hostId, productId, update } = props;
+    const addFile = useCallback((file)=>update((product)=>{
+            var _product_digitalFiles;
+            return {
+                digitalFiles: [
+                    ...(_product_digitalFiles = product.digitalFiles) != null ? _product_digitalFiles : [],
+                    file
+                ]
+            };
+        }), [
+        update
+    ]);
+    const setDownloadLimit = useCallback((event)=>{
+        const raw = event.target.value.trim();
+        update({
+            downloadLimit: raw === '' ? undefined : Math.max(1, Math.round(Number(raw)))
+        });
+    }, [
+        update
+    ]);
+    const setVideos = useCallback((gatedVideos)=>update({
+            gatedVideos
+        }), [
+        update
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Divider, {
+                textAlign: "left",
+                children: 'Digital delivery'
+            }),
+            props.digitalFiles.map((file, index)=>/*#__PURE__*/ _jsx(DigitalFileRow, {
+                    index: index,
+                    file: file,
+                    hostId: hostId,
+                    productId: productId,
+                    update: update
+                }, index)),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(MemoPaidDownloadAddButton, {
+                        hostId: hostId,
+                        productId: productId,
+                        onAdd: addFile
+                    }),
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Download limit",
+                        placeholder: "Unlimited",
+                        value: (_props_downloadLimit = props.downloadLimit) != null ? _props_downloadLimit : '',
+                        onChange: setDownloadLimit,
+                        size: "small",
+                        sx: COUNT_FIELD,
+                        slotProps: NUMERIC_INPUT,
+                        helperText: "Attempts per order"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Buyers always download the current files — uploading a new ' + 'version re-delivers to everyone.'
+            }),
+            /*#__PURE__*/ _jsx(MemoMembersVideosField, {
+                hostId: hostId,
+                productId: productId,
+                videos: props.gatedVideos,
+                onChange: setVideos
+            })
+        ]
+    });
+});
+/** The product's search listing: its title, description and share image. */ const ProductSeoFields = /*#__PURE__*/ memo(function ProductSeoFields(props) {
+    const { title, description, update, pick } = props;
+    const setTitle = useCallback((event)=>{
+        const next = event.target.value;
+        update((product)=>({
+                seo: _extends({}, product.seo, {
+                    title: next
+                })
+            }));
+    }, [
+        update
+    ]);
+    const setDescription = useCallback((event)=>{
+        const next = event.target.value;
+        update((product)=>({
+                seo: _extends({}, product.seo, {
+                    description: next
+                })
+            }));
+    }, [
+        update
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Divider, {
+                textAlign: "left",
+                children: 'Search engine listing'
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: WIDE_ROW,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "SEO title",
+                        value: title != null ? title : '',
+                        onChange: setTitle,
+                        // The counts every search listing editor prints (AGL-2910): what a
+                        // search result shows before it truncates.
+                        helperText: seoListingFieldCount('title', title),
+                        error: seoListingFieldTooLong('title', title),
+                        size: "small",
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>void pick((media)=>update((product)=>({
+                                        seo: _extends({}, product.seo, {
+                                            imageUrl: media.url
+                                        })
+                                    }))),
+                        children: props.hasImage ? 'Change OG image' : 'OG image'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                label: "SEO description",
+                value: description != null ? description : '',
+                onChange: setDescription,
+                helperText: seoListingFieldCount('description', description),
+                error: seoListingFieldTooLong('description', description),
+                size: "small",
+                multiline: true,
+                minRows: 2
+            })
+        ]
+    });
+});
 /**
  * Products hub editor (AGL-279): the full catalog editor — basics,
  * media, tags, options → variants matrix, per-variant pricing/stock, and
@@ -79,8 +1066,8 @@ function comboLabel(options) {
  * first variant so the legacy Product block + checkout API (AGL-90) keep
  * charging correctly without reading the variants array.
  */ export function ProductEditorDialog(props) {
-    var _ref, _ref1, _current_description, _current_tags, _current_categoryIds, _current_options, _current_mediaUrls, _ref2, _ref3, _current_supplierId, _current_description1, _current_tags1, _current_mediaUrls1, _current_options1, _ref4, _subs_planLabel, _gifts_planLabel, _subs_planLabel1, _gifts_planLabel1, _current_oversellPolicy, _gifts_planLabel2, _gifts_planLabel3, _current_lowStockThreshold, _subs_planLabel2, _current_subscription_trialDays, _current_digitalFiles, _current_downloadLimit, _current_gatedVideos, _ref5, _ref6, _ref7, _current_description2, _ref8, _ref9;
-    var _current_seo, _current_seo1, _current_options2, _current_seo2, _current_seo3, _current_seo4, _current_seo5, _current_seo6, _current_seo7, _current_seo8, _current_seo9, _current_seo10, _current_seo11;
+    var _ref, _ref1, _current_description, _current_tags, _current_categoryIds, _current_options, _current_mediaUrls, _ref2, _ref3, _ref4, _current_description1, _ref5, _ref6, _current_description2, _current_tags1, _current_mediaUrls1, _current_options1, _subs_planLabel, _gifts_planLabel, _subs_planLabel1, _gifts_planLabel1, _current_oversellPolicy, _current_digitalFiles, _current_gatedVideos;
+    var _current_seo, _current_seo1, _current_seo2, _current_seo3, _current_seo4, _current_seo5, _current_seo6, _current_seo7;
     const { hostId, product, seedFromCache, seedUnreadable, open, onClose } = props;
     /**
    * Field-level entitlement gates (AGL-2080). Both of these were fully
@@ -160,7 +1147,50 @@ function comboLabel(options) {
     ]);
     // Lazy-init per open; parent remounts via `key` on product change.
     const current = (_ref = draft != null ? draft : lifted) != null ? _ref : blankProduct();
-    const update = (patch)=>setDraft(_extends({}, current, patch));
+    /*
+   * The two writes every field goes through, each keeping its identity for
+   * the life of the dialog so a memoized section redraws only when its own
+   * slice of the draft does (AGL-3423). Both write from the draft as last
+   * rendered, which `latest` holds: `update` spreads a patch over it, and a
+   * patch that is a function is handed it, so no field holds a copy of the
+   * product to spread. A write that lands after a picker closes lands on the
+   * draft as it is then.
+   */ const latest = useRef(current);
+    latest.current = current;
+    const replaceDraft = useCallback((build)=>setDraft(build(latest.current)), []);
+    const update = useCallback((patch)=>replaceDraft((at)=>_extends({}, at, typeof patch === 'function' ? patch(at) : patch)), [
+        replaceDraft
+    ]);
+    const setTags = useCallback((tags)=>update({
+            tags: tags.map((tag)=>String(tag).trim()).filter(Boolean)
+        }), [
+        update
+    ]);
+    const setCategories = useCallback((picked)=>update({
+            categoryIds: picked.map((category)=>category.$id)
+        }), [
+        update
+    ]);
+    const setRelatedProducts = useCallback((picked)=>update({
+            relatedProductIds: picked.map((item)=>item.$id)
+        }), [
+        update
+    ]);
+    const categoryIds = current.categoryIds;
+    const pickedCategories = useMemo(()=>categories.rows.filter((category)=>(categoryIds != null ? categoryIds : []).includes(category.$id)), [
+        categories.rows,
+        categoryIds
+    ]);
+    const relatedProductIds = current.relatedProductIds;
+    const productId = product == null ? void 0 : product.$id;
+    const relatedOptions = useMemo(()=>relatedProducts.rows.filter((item)=>!item.deletedAt && item.$id !== productId), [
+        relatedProducts.rows,
+        productId
+    ]);
+    const pickedRelated = useMemo(()=>relatedProducts.rows.filter((item)=>(relatedProductIds != null ? relatedProductIds : []).includes(item.$id)), [
+        relatedProducts.rows,
+        relatedProductIds
+    ]);
     /** The shell's zone renderer (AGL-2910); `null` outside the console shell. */ const WidgetSlot = useConsoleWidgetSlot();
     /**
    * A listing zone widget's proposal, staged into the draft like typing.
@@ -207,7 +1237,10 @@ function comboLabel(options) {
         }), [
         categories.rows
     ]);
-    const zoneProduct = {
+    /*
+   * What the two zones are handed, held by content: a keystroke in a field
+   * neither zone reads (a SKU, a price) leaves both as they were.
+   */ const zoneProduct = useContentStable({
         id: (_ref1 = product == null ? void 0 : product.$id) != null ? _ref1 : null,
         name: current.name,
         type: current.type,
@@ -221,7 +1254,17 @@ function comboLabel(options) {
         mediaUrls: (_current_mediaUrls = current.mediaUrls) != null ? _current_mediaUrls : [],
         seoTitle: (_ref2 = (_current_seo = current.seo) == null ? void 0 : _current_seo.title) != null ? _ref2 : '',
         seoDescription: (_ref3 = (_current_seo1 = current.seo) == null ? void 0 : _current_seo1.description) != null ? _ref3 : ''
-    };
+    });
+    const seoSubject = useContentStable({
+        kind: 'product',
+        id: (_ref4 = product == null ? void 0 : product.$id) != null ? _ref4 : null,
+        name: current.name,
+        description: String((_current_description1 = current.description) != null ? _current_description1 : '')
+    });
+    const seoValues = useContentStable({
+        title: (_ref5 = (_current_seo2 = current.seo) == null ? void 0 : _current_seo2.title) != null ? _ref5 : '',
+        description: (_ref6 = (_current_seo3 = current.seo) == null ? void 0 : _current_seo3.description) != null ? _ref6 : ''
+    });
     const error = current.name ? CommerceModel.validateProduct(current) : null;
     /**
    * Stock tracking is inert on a subscription-only product (AGL-1744) —
@@ -244,85 +1287,106 @@ function comboLabel(options) {
    * count this just cleared. Keys are DELETED rather than set undefined; the
    * save is a client-direct `setDoc`, which rejects undefined values.
    */ const handleClearStockTracking = ()=>{
-        update({
-            variants: current.variants.map((variant)=>{
-                const { inventoryByLocation: _perLocation } = variant, rest = _object_without_properties_loose(variant, [
-                    "inventoryByLocation"
-                ]);
-                return _extends({}, rest, {
-                    inventory: null
-                });
-            })
-        });
+        update((at)=>({
+                variants: at.variants.map((variant)=>{
+                    const { inventoryByLocation: _perLocation } = variant, rest = _object_without_properties_loose(variant, [
+                        "inventoryByLocation"
+                    ]);
+                    return _extends({}, rest, {
+                        inventory: null
+                    });
+                })
+            }));
     };
-    const handleName = (name)=>update(_extends({
+    const handleName = useCallback((event)=>{
+        const name = event.target.value;
+        update(_extends({
             name
         }, !product && !slugTouched ? {
             slug: CommerceModel.commerceSlug(name)
         } : {}));
-    const handleOptionsChange = useCallback((index, patch)=>{
-        var _current_options;
-        var _current_options1;
-        // A RENAME moves each variant's selection to the new name (AGL-3066).
-        // Rebuilding the matrix matches variants by name and value, so under a
-        // new name it finds none and replaces every variant, its id, price, SKU
-        // and stock with them. Only a change of values rebuilds.
-        if (patch && ((_current_options1 = current.options) == null ? void 0 : _current_options1[index]) && Object.keys(patch).length === 1 && typeof patch.name === 'string') {
-            update(CommerceModel.renameProductOptions(current, current.options.map((option, at)=>at === index ? patch.name : option.name)));
-            return;
-        }
-        const options = [
-            ...(_current_options = current.options) != null ? _current_options : []
-        ];
-        if (patch === null) options.splice(index, 1);
-        else options[index] = _extends({
-            name: '',
-            values: []
-        }, options[index], patch);
-        // Regenerate the matrix, carrying data over by option-combo key so
-        // edits to prices/SKUs survive option tweaks.
-        const previous = new Map(current.variants.map((variant)=>[
-                comboKey(variant.options),
-                variant
-            ]));
-        const fallback = current.variants[0];
-        const variants = CommerceModel.expandVariantMatrix(options).map((combo, comboIndex)=>{
-            var _ref, _ref1;
-            const existing = previous.get(comboKey(combo));
-            return existing != null ? existing : {
-                id: `v${Date.now().toString(36)}${comboIndex}`,
-                options: combo,
-                priceUsd: (_ref = fallback == null ? void 0 : fallback.priceUsd) != null ? _ref : 0,
-                inventory: (_ref1 = fallback == null ? void 0 : fallback.inventory) != null ? _ref1 : null
-            };
-        });
-        update({
-            options,
-            variants
-        });
     }, [
-        current
+        product,
+        slugTouched,
+        update
     ]);
-    const handleVariantField = (index, field, raw)=>{
-        const variants = [
-            ...current.variants
-        ];
-        const numeric = [
-            'priceUsd',
-            'compareAtPriceUsd',
-            'weightGrams'
-        ];
-        const value = field === 'inventory' ? raw.trim() === '' ? null : Math.max(0, Math.round(Number(raw))) : numeric.includes(field) ? raw.trim() === '' ? undefined : Number(raw) : raw;
-        variants[index] = _extends({}, variants[index], {
-            [field]: value
-        });
-        if (value === undefined && (field === 'compareAtPriceUsd' || field === 'weightGrams')) {
-            delete variants[index][field];
-        }
+    const handleSlug = useCallback((event)=>{
+        setSlugTouched(true);
         update({
-            variants
+            slug: CommerceModel.commerceSlug(event.target.value)
         });
-    };
+    }, [
+        update
+    ]);
+    const handleOptionsChange = useCallback((index, patch)=>update((at)=>{
+            var _at_options;
+            var _at_options1;
+            // A RENAME moves each variant's selection to the new name (AGL-3066).
+            // Rebuilding the matrix matches variants by name and value, so under a
+            // new name it finds none and replaces every variant, its id, price, SKU
+            // and stock with them. Only a change of values rebuilds.
+            if (patch && ((_at_options1 = at.options) == null ? void 0 : _at_options1[index]) && Object.keys(patch).length === 1 && typeof patch.name === 'string') {
+                return CommerceModel.renameProductOptions(at, at.options.map((option, optionIndex)=>optionIndex === index ? patch.name : option.name));
+            }
+            const options = [
+                ...(_at_options = at.options) != null ? _at_options : []
+            ];
+            if (patch === null) options.splice(index, 1);
+            else options[index] = _extends({
+                name: '',
+                values: []
+            }, options[index], patch);
+            // Regenerate the matrix, carrying data over by option-combo key so
+            // edits to prices/SKUs survive option tweaks.
+            const previous = new Map(at.variants.map((variant)=>[
+                    comboKey(variant.options),
+                    variant
+                ]));
+            const fallback = at.variants[0];
+            const variants = CommerceModel.expandVariantMatrix(options).map((combo, comboIndex)=>{
+                var _ref, _ref1;
+                const existing = previous.get(comboKey(combo));
+                return existing != null ? existing : {
+                    id: `v${Date.now().toString(36)}${comboIndex}`,
+                    options: combo,
+                    priceUsd: (_ref = fallback == null ? void 0 : fallback.priceUsd) != null ? _ref : 0,
+                    inventory: (_ref1 = fallback == null ? void 0 : fallback.inventory) != null ? _ref1 : null
+                };
+            });
+            return {
+                options,
+                variants
+            };
+        }), [
+        update
+    ]);
+    const setOptionValues = useCallback((values, index)=>handleOptionsChange(index, {
+            values: values.map((value)=>String(value).trim()).filter(Boolean)
+        }), [
+        handleOptionsChange
+    ]);
+    const handleVariantField = useCallback((index, field, raw)=>update((at)=>{
+            const variants = [
+                ...at.variants
+            ];
+            const numeric = [
+                'priceUsd',
+                'compareAtPriceUsd',
+                'weightGrams'
+            ];
+            const value = field === 'inventory' ? raw.trim() === '' ? null : Math.max(0, Math.round(Number(raw))) : numeric.includes(field) ? raw.trim() === '' ? undefined : Number(raw) : raw;
+            variants[index] = _extends({}, variants[index], {
+                [field]: value
+            });
+            if (value === undefined && (field === 'compareAtPriceUsd' || field === 'weightGrams')) {
+                delete variants[index][field];
+            }
+            return {
+                variants
+            };
+        }), [
+        update
+    ]);
     const handleSave = useCallback(async ()=>{
         var _ref, _ref1, _ref2;
         var _current_mediaUrls;
@@ -509,163 +1573,37 @@ function comboLabel(options) {
                     gap: 2
                 },
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: {
-                            xs: 'column',
-                            sm: 'row'
-                        },
-                        spacing: 2,
-                        sx: {
-                            mt: 1
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Name",
-                                value: current.name,
-                                onChange: (event)=>handleName(event.target.value),
-                                size: "small",
-                                autoFocus: true,
-                                fullWidth: true
-                            }),
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Slug",
-                                value: current.slug,
-                                onChange: (event)=>{
-                                    setSlugTouched(true);
-                                    update({
-                                        slug: CommerceModel.commerceSlug(event.target.value)
-                                    });
-                                },
-                                size: "small",
-                                fullWidth: true,
-                                helperText: current.slug ? `/products/${current.slug}` : undefined
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Type",
-                                value: current.type,
-                                onChange: (event)=>update({
-                                        type: event.target.value
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 140
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "physical",
-                                        children: 'Physical'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "digital",
-                                        children: 'Digital'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "service",
-                                        children: 'Service'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Status",
-                                value: current.status,
-                                onChange: (event)=>update({
-                                        status: event.target.value
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 140
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "draft",
-                                        children: 'Draft'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "active",
-                                        children: 'Active'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "archived",
-                                        children: 'Archived'
-                                    })
-                                ]
-                            }),
-                            suppliers.rows.length > 0 ? /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Supplier",
-                                value: (_current_supplierId = current.supplierId) != null ? _current_supplierId : '',
-                                onChange: (event)=>update({
-                                        supplierId: event.target.value || undefined
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 160
-                                },
-                                helperText: "Routes paid orders",
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'None (self-fulfilled)'
-                                    }),
-                                    suppliers.rows.map((supplier)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            value: supplier.$id,
-                                            children: supplier.name
-                                        }, supplier.$id))
-                                ]
-                            }) : null
-                        ]
+                    /*#__PURE__*/ _jsx(ProductBasicsFields, {
+                        name: current.name,
+                        slug: current.slug,
+                        type: current.type,
+                        status: current.status,
+                        supplierId: current.supplierId,
+                        description: (_current_description2 = current.description) != null ? _current_description2 : '',
+                        suppliers: suppliers.rows,
+                        onName: handleName,
+                        onSlug: handleSlug,
+                        update: update
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
-                        label: "Description",
-                        value: (_current_description1 = current.description) != null ? _current_description1 : '',
-                        onChange: (event)=>update({
-                                description: event.target.value
-                            }),
-                        size: "small",
-                        multiline: true,
-                        minRows: 2
-                    }),
-                    /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
+                    /*#__PURE__*/ _jsx(ProductChipsField, {
                         freeSolo: true,
-                        options: [],
-                        value: (_current_tags1 = current.tags) != null ? _current_tags1 : [],
-                        onChange: (_event, tags)=>update({
-                                tags: tags.map((tag)=>String(tag).trim()).filter(Boolean)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Tags",
-                                size: "small",
-                                placeholder: "Type and press Enter"
-                            }))
+                        label: "Tags",
+                        placeholder: "Type and press Enter",
+                        options: NO_ITEMS,
+                        value: (_current_tags1 = current.tags) != null ? _current_tags1 : NO_ITEMS,
+                        onChange: setTags
                     }),
-                    categories.rows.length > 0 ? /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
+                    categories.rows.length > 0 ? /*#__PURE__*/ _jsx(ProductChipsField, {
+                        label: "Categories",
                         options: categories.rows,
-                        getOptionLabel: (category)=>category.name,
-                        isOptionEqualToValue: (option, value)=>option.$id === value.$id,
-                        value: categories.rows.filter((category)=>{
-                            var _current_categoryIds;
-                            return ((_current_categoryIds = current.categoryIds) != null ? _current_categoryIds : []).includes(category.$id);
-                        }),
-                        onChange: (_event, picked)=>update({
-                                categoryIds: picked.map((category)=>category.$id)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Categories",
-                                size: "small"
-                            }))
+                        getOptionLabel: categoryLabel,
+                        isOptionEqualToValue: sameRecord,
+                        value: pickedCategories,
+                        onChange: setCategories
                     }) : null,
-                    WidgetSlot ? /*#__PURE__*/ _jsx(WidgetSlot, {
-                        slot: "productEditor",
+                    WidgetSlot ? /*#__PURE__*/ _jsx(HostedZone, {
+                        renderer: WidgetSlot,
+                        slot: PRODUCT_EDITOR_ZONE.id,
                         hostId: hostId,
                         orgId: undefined,
                         product: zoneProduct,
@@ -676,269 +1614,24 @@ function comboLabel(options) {
                         textAlign: "left",
                         children: 'Media'
                     }),
-                    /*#__PURE__*/ _jsxs(Box, {
-                        sx: {
-                            display: 'flex',
-                            gap: 1,
-                            flexWrap: 'wrap'
-                        },
-                        children: [
-                            ((_current_mediaUrls1 = current.mediaUrls) != null ? _current_mediaUrls1 : []).map((url, index)=>/*#__PURE__*/ _jsxs(Box, {
-                                    sx: {
-                                        position: 'relative'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Box, {
-                                            component: "img",
-                                            src: url,
-                                            alt: "",
-                                            sx: {
-                                                width: 72,
-                                                height: 72,
-                                                objectFit: 'cover',
-                                                borderRadius: 1,
-                                                border: 1,
-                                                borderColor: 'divider'
-                                            }
-                                        }),
-                                        /*#__PURE__*/ _jsx(IconButton, {
-                                            size: "small",
-                                            "aria-label": "Remove image",
-                                            onClick: ()=>{
-                                                var _current_mediaUrls;
-                                                return update({
-                                                    mediaUrls: ((_current_mediaUrls = current.mediaUrls) != null ? _current_mediaUrls : []).filter((_item, itemIndex)=>itemIndex !== index)
-                                                });
-                                            },
-                                            sx: {
-                                                position: 'absolute',
-                                                top: -8,
-                                                right: -8,
-                                                bgcolor: 'background.paper',
-                                                border: 1,
-                                                borderColor: 'divider',
-                                                p: 0.25
-                                            },
-                                            children: '✕'
-                                        })
-                                    ]
-                                }, `${url}-${index}`)),
-                            /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                onClick: ()=>void pick((media)=>{
-                                        var _current_mediaUrls;
-                                        return update({
-                                            mediaUrls: [
-                                                ...(_current_mediaUrls = current.mediaUrls) != null ? _current_mediaUrls : [],
-                                                media.url
-                                            ]
-                                        });
-                                    }),
-                                children: 'Add image'
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(ProductMediaFields, {
+                        mediaUrls: (_current_mediaUrls1 = current.mediaUrls) != null ? _current_mediaUrls1 : NO_ITEMS,
+                        update: update,
+                        pick: pick
                     }),
                     /*#__PURE__*/ _jsx(Divider, {
                         textAlign: "left",
                         children: 'Options & variants'
                     }),
-                    ((_current_options1 = current.options) != null ? _current_options1 : []).map((option, index)=>/*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                alignItems: 'flex-start'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(TextField, {
-                                    label: "Option",
-                                    value: option.name,
-                                    onChange: (event)=>handleOptionsChange(index, {
-                                            name: event.target.value
-                                        }),
-                                    size: "small",
-                                    sx: {
-                                        width: 160
-                                    },
-                                    placeholder: "Size"
-                                }),
-                                /*#__PURE__*/ _jsx(Autocomplete, {
-                                    multiple: true,
-                                    freeSolo: true,
-                                    options: [],
-                                    value: option.values,
-                                    onChange: (_event, values)=>handleOptionsChange(index, {
-                                            values: values.map((value)=>String(value).trim()).filter(Boolean)
-                                        }),
-                                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                            label: "Values",
-                                            size: "small",
-                                            placeholder: "S, M, L…"
-                                        })),
-                                    sx: {
-                                        flex: 1
-                                    }
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    color: "error",
-                                    onClick: ()=>handleOptionsChange(index, null),
-                                    sx: {
-                                        mt: 0.5
-                                    },
-                                    children: 'Remove'
-                                })
-                            ]
-                        }, index)),
-                    ((_ref4 = (_current_options2 = current.options) == null ? void 0 : _current_options2.length) != null ? _ref4 : 0) < CommerceModel.COMMERCE_MAX_OPTIONS ? /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        sx: {
-                            alignSelf: 'flex-start'
-                        },
-                        onClick: ()=>{
-                            var _ref;
-                            var _current_options;
-                            return handleOptionsChange((_ref = (_current_options = current.options) == null ? void 0 : _current_options.length) != null ? _ref : 0, {
-                                name: '',
-                                values: []
-                            });
-                        },
-                        children: 'Add option'
-                    }) : null,
-                    /*#__PURE__*/ _jsx(Box, {
-                        children: /*#__PURE__*/ _jsxs(ScrollTable, {
-                            size: "small",
-                            children: [
-                                /*#__PURE__*/ _jsx(TableHead, {
-                                    children: /*#__PURE__*/ _jsxs(TableRow, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Variant'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Price ($)'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Compare-at'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'SKU'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Barcode'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Stock'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: 'Weight (g)'
-                                            })
-                                        ]
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(TableBody, {
-                                    children: current.variants.map((variant, index)=>{
-                                        var _variant_priceUsd, _variant_compareAtPriceUsd, _variant_sku, _variant_barcode, _variant_inventory, _variant_weightGrams;
-                                        return /*#__PURE__*/ _jsxs(TableRow, {
-                                            children: [
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    sx: {
-                                                        whiteSpace: 'nowrap'
-                                                    },
-                                                    children: comboLabel(variant.options)
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_priceUsd = variant.priceUsd) != null ? _variant_priceUsd : '',
-                                                        onChange: (event)=>handleVariantField(index, 'priceUsd', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 88
-                                                        },
-                                                        // An empty price is marked (AGL-2916): a proposed
-                                                        // product arrives with none, and Save waits for one.
-                                                        error: !CommerceModel.variantHasPrice(variant),
-                                                        placeholder: "Set",
-                                                        slotProps: {
-                                                            htmlInput: {
-                                                                inputMode: 'decimal'
-                                                            }
-                                                        }
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_compareAtPriceUsd = variant.compareAtPriceUsd) != null ? _variant_compareAtPriceUsd : '',
-                                                        onChange: (event)=>handleVariantField(index, 'compareAtPriceUsd', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 88
-                                                        },
-                                                        slotProps: {
-                                                            htmlInput: {
-                                                                inputMode: 'decimal'
-                                                            }
-                                                        }
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_sku = variant.sku) != null ? _variant_sku : '',
-                                                        onChange: (event)=>handleVariantField(index, 'sku', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 110
-                                                        }
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_barcode = variant.barcode) != null ? _variant_barcode : '',
-                                                        onChange: (event)=>handleVariantField(index, 'barcode', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 110
-                                                        }
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_inventory = variant.inventory) != null ? _variant_inventory : '',
-                                                        placeholder: stockApplies ? '—' : 'n/a',
-                                                        disabled: !stockApplies,
-                                                        onChange: (event)=>handleVariantField(index, 'inventory', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 72
-                                                        },
-                                                        slotProps: {
-                                                            htmlInput: {
-                                                                inputMode: 'numeric',
-                                                                'aria-label': `Stock — ${comboLabel(variant.options)}`
-                                                            }
-                                                        }
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                                        value: (_variant_weightGrams = variant.weightGrams) != null ? _variant_weightGrams : '',
-                                                        onChange: (event)=>handleVariantField(index, 'weightGrams', event.target.value),
-                                                        size: "small",
-                                                        sx: {
-                                                            width: 88
-                                                        },
-                                                        slotProps: {
-                                                            htmlInput: {
-                                                                inputMode: 'numeric'
-                                                            }
-                                                        }
-                                                    })
-                                                })
-                                            ]
-                                        }, variant.id);
-                                    })
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ _jsx(ProductOptionsFields, {
+                        options: (_current_options1 = current.options) != null ? _current_options1 : NO_OPTIONS,
+                        onChange: handleOptionsChange,
+                        onValues: setOptionValues
+                    }),
+                    /*#__PURE__*/ _jsx(ProductVariantsTable, {
+                        variants: current.variants,
+                        stockApplies: stockApplies,
+                        onField: handleVariantField
                     }),
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "caption",
@@ -959,419 +1652,58 @@ function comboLabel(options) {
                         upgradeHref: subsLocked ? subs.upgradeHref : gifts.upgradeHref,
                         children: subsLocked && giftsLocked ? `Subscription products (${(_subs_planLabel = subs.planLabel) != null ? _subs_planLabel : 'higher plan'}) ` + `and gift cards (${(_gifts_planLabel = gifts.planLabel) != null ? _gifts_planLabel : 'higher plan'}) are ` + 'not on your plan. You can still save this product — those ' + 'two options stay locked until you upgrade.' : subsLocked ? `Subscription products are on ${(_subs_planLabel1 = subs.planLabel) != null ? _subs_planLabel1 : 'a higher plan'}. ` + 'A subscription saved without it is refused at checkout, ' + 'so the option stays locked here instead.' : `Gift cards are on ${(_gifts_planLabel1 = gifts.planLabel) != null ? _gifts_planLabel1 : 'a higher plan'}. ` + 'A gift-card product saved without it is refused at ' + 'checkout, so the option stays locked here instead.'
                     }) : null,
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "When out of stock",
-                                value: (_current_oversellPolicy = current.oversellPolicy) != null ? _current_oversellPolicy : 'deny',
-                                onChange: (event)=>update({
-                                        oversellPolicy: event.target.value
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 200
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "deny",
-                                        children: 'Stop selling (sold out)'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "backorder",
-                                        children: 'Keep selling (backorder)'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Kind",
-                                value: current.giftCard ? 'gift' : 'standard',
-                                onChange: (event)=>update({
-                                        giftCard: event.target.value === 'gift'
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 130
-                                },
-                                helperText: giftsLocked ? `Gift cards are on ${(_gifts_planLabel2 = gifts.planLabel) != null ? _gifts_planLabel2 : 'a higher plan'}` : 'Gift cards issue a code',
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "standard",
-                                        children: 'Standard'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "gift",
-                                        disabled: giftsLocked,
-                                        children: giftsLocked ? `Gift card — ${(_gifts_planLabel3 = gifts.planLabel) != null ? _gifts_planLabel3 : 'upgrade'} plan` : 'Gift card'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Tax",
-                                value: current.taxExempt ? 'exempt' : 'taxable',
-                                onChange: (event)=>update({
-                                        taxExempt: event.target.value === 'exempt'
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "taxable",
-                                        children: 'Taxable'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "exempt",
-                                        children: 'Tax exempt'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Low-stock alert at",
-                                value: (_current_lowStockThreshold = current.lowStockThreshold) != null ? _current_lowStockThreshold : '',
-                                placeholder: "Off",
-                                disabled: !stockApplies,
-                                onChange: (event)=>{
-                                    const raw = event.target.value.trim();
-                                    update({
-                                        lowStockThreshold: raw === '' ? undefined : Math.max(0, Math.round(Number(raw)))
-                                    });
-                                },
-                                size: "small",
-                                sx: {
-                                    width: 140
-                                },
-                                slotProps: {
-                                    htmlInput: {
-                                        inputMode: 'numeric'
-                                    }
-                                },
-                                helperText: "Notifies managers"
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(ProductSellingFields, {
+                        oversellPolicy: (_current_oversellPolicy = current.oversellPolicy) != null ? _current_oversellPolicy : 'deny',
+                        giftCard: Boolean(current.giftCard),
+                        taxExempt: Boolean(current.taxExempt),
+                        lowStockThreshold: current.lowStockThreshold,
+                        stockApplies: stockApplies,
+                        giftsLocked: giftsLocked,
+                        giftsPlanLabel: gifts.planLabel,
+                        update: update
                     }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Billing",
-                                value: current.subscription ? current.subscriptionOptional ? 'both' : current.subscription.interval : 'once',
-                                onChange: (event)=>{
-                                    const value = event.target.value;
-                                    // "Both" (AGL-545): the PDP offers one-time OR subscribe at
-                                    // the same price; the interval field beside picks the cadence.
-                                    // Cleared keys are deleted (not set undefined) so the
-                                    // client-direct setDoc on save never sees undefined values.
-                                    const next = _extends({}, current);
-                                    if (value === 'once') {
-                                        delete next.subscription;
-                                    } else {
-                                        var _current_subscription, _ref;
-                                        var _current_subscription1;
-                                        next.subscription = _extends({}, (_current_subscription = current.subscription) != null ? _current_subscription : {}, {
-                                            interval: value === 'both' ? (_ref = (_current_subscription1 = current.subscription) == null ? void 0 : _current_subscription1.interval) != null ? _ref : 'month' : value
-                                        });
-                                    }
-                                    if (value === 'both') next.subscriptionOptional = true;
-                                    else delete next.subscriptionOptional;
-                                    // setDraft directly: update() spreads the patch over
-                                    // `current`, which would resurrect the deleted keys.
-                                    setDraft(next);
-                                },
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 180
-                                },
-                                helperText: subsLocked ? `Subscriptions are on ${(_subs_planLabel2 = subs.planLabel) != null ? _subs_planLabel2 : 'a higher plan'}` : 'Subscriptions bill until canceled',
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "once",
-                                        children: 'One-time purchase'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "month",
-                                        disabled: subsLocked,
-                                        children: 'Monthly subscription'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "year",
-                                        disabled: subsLocked,
-                                        children: 'Yearly subscription'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "both",
-                                        disabled: subsLocked,
-                                        children: 'Both — buyer chooses'
-                                    })
-                                ]
-                            }),
-                            current.subscription && current.subscriptionOptional ? /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Interval",
-                                value: current.subscription.interval,
-                                onChange: (event)=>update({
-                                        subscription: _extends({}, current.subscription, {
-                                            interval: event.target.value
-                                        })
-                                    }),
-                                size: "small",
-                                select: true,
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "month",
-                                        children: 'Monthly'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "year",
-                                        children: 'Yearly'
-                                    })
-                                ]
-                            }) : null,
-                            current.subscription ? /*#__PURE__*/ _jsx(TextField, {
-                                label: "Free trial (days)",
-                                placeholder: "None",
-                                value: (_current_subscription_trialDays = current.subscription.trialDays) != null ? _current_subscription_trialDays : '',
-                                onChange: (event)=>{
-                                    const raw = event.target.value.trim();
-                                    update({
-                                        subscription: _extends({}, current.subscription, raw === '' ? {
-                                            trialDays: undefined
-                                        } : {
-                                            trialDays: Math.max(1, Math.round(Number(raw)))
-                                        })
-                                    });
-                                },
-                                size: "small",
-                                sx: {
-                                    width: 140
-                                },
-                                slotProps: {
-                                    htmlInput: {
-                                        inputMode: 'numeric'
-                                    }
-                                }
-                            }) : null
-                        ]
+                    /*#__PURE__*/ _jsx(ProductBillingFields, {
+                        subscription: current.subscription,
+                        subscriptionOptional: current.subscriptionOptional,
+                        subsLocked: subsLocked,
+                        subsPlanLabel: subs.planLabel,
+                        update: update,
+                        replaceDraft: replaceDraft
                     }),
-                    current.type === 'digital' ? /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Divider, {
-                                textAlign: "left",
-                                children: 'Digital delivery'
-                            }),
-                            ((_current_digitalFiles = current.digitalFiles) != null ? _current_digitalFiles : []).map((file, index)=>{
-                                var _file_version;
-                                return /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    sx: {
-                                        alignItems: 'center'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsxs(Typography, {
-                                            variant: "body2",
-                                            sx: {
-                                                flex: 1
-                                            },
-                                            noWrap: true,
-                                            children: [
-                                                file.fileName,
-                                                file.version ? ` · v${file.version}` : ''
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsx(PaidMediaProtection, {
-                                            url: file.url,
-                                            hostId: hostId,
-                                            productId: product == null ? void 0 : product.$id,
-                                            kind: "download"
-                                        }),
-                                        /*#__PURE__*/ _jsx(TextField, {
-                                            label: "Version",
-                                            value: (_file_version = file.version) != null ? _file_version : '',
-                                            onChange: (event)=>{
-                                                var _current_digitalFiles;
-                                                const digitalFiles = [
-                                                    ...(_current_digitalFiles = current.digitalFiles) != null ? _current_digitalFiles : []
-                                                ];
-                                                digitalFiles[index] = _extends({}, file, {
-                                                    version: event.target.value.slice(0, 20)
-                                                });
-                                                update({
-                                                    digitalFiles
-                                                });
-                                            },
-                                            size: "small",
-                                            sx: {
-                                                width: 100
-                                            }
-                                        }),
-                                        /*#__PURE__*/ _jsx(Button, {
-                                            size: "small",
-                                            color: "error",
-                                            onClick: ()=>{
-                                                var _current_digitalFiles;
-                                                return update({
-                                                    digitalFiles: ((_current_digitalFiles = current.digitalFiles) != null ? _current_digitalFiles : []).filter((_item, itemIndex)=>itemIndex !== index)
-                                                });
-                                            },
-                                            children: '✕'
-                                        })
-                                    ]
-                                }, index);
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ _jsx(PaidDownloadAddButton, {
-                                        hostId: hostId,
-                                        productId: product == null ? void 0 : product.$id,
-                                        onAdd: (file)=>{
-                                            var _current_digitalFiles;
-                                            return update({
-                                                digitalFiles: [
-                                                    ...(_current_digitalFiles = current.digitalFiles) != null ? _current_digitalFiles : [],
-                                                    file
-                                                ]
-                                            });
-                                        }
-                                    }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Download limit",
-                                        placeholder: "Unlimited",
-                                        value: (_current_downloadLimit = current.downloadLimit) != null ? _current_downloadLimit : '',
-                                        onChange: (event)=>{
-                                            const raw = event.target.value.trim();
-                                            update({
-                                                downloadLimit: raw === '' ? undefined : Math.max(1, Math.round(Number(raw)))
-                                            });
-                                        },
-                                        size: "small",
-                                        sx: {
-                                            width: 140
-                                        },
-                                        slotProps: {
-                                            htmlInput: {
-                                                inputMode: 'numeric'
-                                            }
-                                        },
-                                        helperText: "Attempts per order"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "caption",
-                                color: "text.secondary",
-                                children: 'Buyers always download the current files — uploading a new ' + 'version re-delivers to everyone.'
-                            }),
-                            /*#__PURE__*/ _jsx(MembersVideosField, {
-                                hostId: hostId,
-                                productId: product == null ? void 0 : product.$id,
-                                videos: (_current_gatedVideos = current.gatedVideos) != null ? _current_gatedVideos : [],
-                                onChange: (gatedVideos)=>update({
-                                        gatedVideos
-                                    })
-                            })
-                        ]
+                    current.type === 'digital' ? /*#__PURE__*/ _jsx(ProductDigitalFields, {
+                        hostId: hostId,
+                        productId: product == null ? void 0 : product.$id,
+                        digitalFiles: (_current_digitalFiles = current.digitalFiles) != null ? _current_digitalFiles : NO_FILES,
+                        downloadLimit: current.downloadLimit,
+                        gatedVideos: (_current_gatedVideos = current.gatedVideos) != null ? _current_gatedVideos : NO_VIDEOS,
+                        update: update
                     }) : null,
-                    /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
-                        options: relatedProducts.rows.filter((item)=>!item.deletedAt && item.$id !== (product == null ? void 0 : product.$id)),
-                        getOptionLabel: (item)=>{
-                            var _item_name;
-                            return (_item_name = item.name) != null ? _item_name : item.$id;
-                        },
-                        isOptionEqualToValue: (option, value)=>option.$id === value.$id,
-                        value: relatedProducts.rows.filter((item)=>{
-                            var _current_relatedProductIds;
-                            return ((_current_relatedProductIds = current.relatedProductIds) != null ? _current_relatedProductIds : []).includes(item.$id);
-                        }),
-                        onChange: (_event, picked)=>update({
-                                relatedProductIds: picked.map((item)=>item.$id)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Related products (upsells)",
-                                size: "small",
-                                helperText: "Shown by the Related products block; blank falls back to frequently-bought-together"
-                            }))
-                    }),
-                    /*#__PURE__*/ _jsx(Divider, {
-                        textAlign: "left",
-                        children: 'Search engine listing'
+                    /*#__PURE__*/ _jsx(ProductChipsField, {
+                        label: "Related products (upsells)",
+                        helperText: "Shown by the Related products block; blank falls back to frequently-bought-together",
+                        options: relatedOptions,
+                        getOptionLabel: recordLabel,
+                        isOptionEqualToValue: sameRecord,
+                        value: pickedRelated,
+                        onChange: setRelatedProducts
                     }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: {
-                            xs: 'column',
-                            sm: 'row'
-                        },
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "SEO title",
-                                value: (_ref5 = (_current_seo2 = current.seo) == null ? void 0 : _current_seo2.title) != null ? _ref5 : '',
-                                onChange: (event)=>update({
-                                        seo: _extends({}, current.seo, {
-                                            title: event.target.value
-                                        })
-                                    }),
-                                // The counts every search listing editor prints (AGL-2910): what a
-                                // search result shows before it truncates.
-                                helperText: seoListingFieldCount('title', (_current_seo3 = current.seo) == null ? void 0 : _current_seo3.title),
-                                error: seoListingFieldTooLong('title', (_current_seo4 = current.seo) == null ? void 0 : _current_seo4.title),
-                                size: "small",
-                                fullWidth: true
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                onClick: ()=>void pick((media)=>update({
-                                            seo: _extends({}, current.seo, {
-                                                imageUrl: media.url
-                                            })
-                                        })),
-                                children: ((_current_seo5 = current.seo) == null ? void 0 : _current_seo5.imageUrl) ? 'Change OG image' : 'OG image'
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(TextField, {
-                        label: "SEO description",
-                        value: (_ref6 = (_current_seo6 = current.seo) == null ? void 0 : _current_seo6.description) != null ? _ref6 : '',
-                        onChange: (event)=>update({
-                                seo: _extends({}, current.seo, {
-                                    description: event.target.value
-                                })
-                            }),
-                        helperText: seoListingFieldCount('description', (_current_seo7 = current.seo) == null ? void 0 : _current_seo7.description),
-                        error: seoListingFieldTooLong('description', (_current_seo8 = current.seo) == null ? void 0 : _current_seo8.description),
-                        size: "small",
-                        multiline: true,
-                        minRows: 2
+                    /*#__PURE__*/ _jsx(ProductSeoFields, {
+                        title: (_current_seo4 = current.seo) == null ? void 0 : _current_seo4.title,
+                        description: (_current_seo5 = current.seo) == null ? void 0 : _current_seo5.description,
+                        hasImage: Boolean((_current_seo6 = current.seo) == null ? void 0 : _current_seo6.imageUrl),
+                        update: update,
+                        pick: pick
                     }),
-                    WidgetSlot ? /*#__PURE__*/ _jsx(WidgetSlot, {
+                    WidgetSlot ? /*#__PURE__*/ _jsx(HostedZone, {
+                        renderer: WidgetSlot,
                         slot: "seoFields",
                         hostId: hostId,
                         orgId: undefined,
                         orgSlug: "",
-                        subject: {
-                            kind: 'product',
-                            id: (_ref7 = product == null ? void 0 : product.$id) != null ? _ref7 : null,
-                            name: current.name,
-                            description: String((_current_description2 = current.description) != null ? _current_description2 : '')
-                        },
+                        subject: seoSubject,
                         fields: PRODUCT_SEO_LISTING_FIELDS,
-                        values: {
-                            title: (_ref8 = (_current_seo9 = current.seo) == null ? void 0 : _current_seo9.title) != null ? _ref8 : '',
-                            description: (_ref9 = (_current_seo10 = current.seo) == null ? void 0 : _current_seo10.description) != null ? _ref9 : ''
-                        },
-                        hasImage: Boolean((_current_seo11 = current.seo) == null ? void 0 : _current_seo11.imageUrl),
+                        values: seoValues,
+                        hasImage: Boolean((_current_seo7 = current.seo) == null ? void 0 : _current_seo7.imageUrl),
                         proposeValues: proposeSeoValues
                     }) : null,
                     error ? /*#__PURE__*/ _jsx(Alert, {