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

package/src/lib/components/console/catalog-organization-card.component.js

@@ -24,7 +24,7 @@ import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { Timestamp } from "@aglyn/shared-util-timestamp";
 import { Alert, Autocomplete, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
 import { collection, deleteDoc, doc, setDoc } from "firebase/firestore";
-import { useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
 import { ceilingedWindow, collectionCeiling, useFirestoreCollection, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
 import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
@@ -89,13 +89,601 @@ const RULE_OPS = [
         label: 'contains'
     }
 ];
+const productLabel = (product)=>product.name;
+const sameProduct = (option, value)=>option.$id === value.$id;
+/**
+ * A manual collection's products, as chips — MEMOIZED, and every prop it
+ * takes is stable while the picked products are (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). The collection's name, slug and
+ * rules share one draft with this list, so each keystroke in them
+ * re-rendered it; kept out of those renders, it commits only when it changes.
+ */ const CollectionProductsField = /*#__PURE__*/ memo(function CollectionProductsField(props) {
+    const { onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        options: props.products,
+        getOptionLabel: productLabel,
+        isOptionEqualToValue: sameProduct,
+        value: props.value,
+        onChange: (_event, picked)=>onChange(picked),
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: "Products",
+                size: "small"
+            }))
+    });
+});
+/**
+ * A text field that redraws only when what it shows changes (AGL-3423).
+ *
+ * Both editors keep their draft in this card, so a keystroke in either one
+ * re-renders the card, and drawn whole that is both lists with a match count
+ * per collection, their pagers, and every field of the dialog typed into.
+ * 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
+ * `CollectionProductsField`). The lists and each part of the dialogs are
+ * memoized on what they show, and each field 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_FIELD = {
+    mt: 1
+};
+const RULE_FIELD = {
+    width: 130
+};
+const RULE_OP = {
+    width: 110
+};
+const RULE_VALUE = {
+    flex: 1
+};
+const MODE_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "manual",
+        children: 'Manual — pick products'
+    }, "manual"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "smart",
+        children: 'Smart — rule based'
+    }, "smart")
+];
+const RULE_FIELD_MENU = RULE_FIELDS.map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: field.value,
+        children: field.label
+    }, field.value));
+const RULE_OP_MENU = RULE_OPS.map((op)=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: op.value,
+        children: op.label
+    }, op.value));
+/** The category tree, a page at a time, and the button that adds one. */ const CategoriesSection = /*#__PURE__*/ memo(function CategoriesSection(props) {
+    const { categories, visible, onEdit, onDelete } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Categories'
+            }),
+            categories.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Group products into a browsable tree (e.g. Brakes → Pads).'
+            }) : visible.map((category)=>/*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center',
+                        pl: category.depth * 2
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            sx: {
+                                flex: 1
+                            },
+                            noWrap: true,
+                            children: [
+                                category.name,
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    component: "span",
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: ` /${category.slug}`
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            onClick: ()=>{
+                                var _category_parentId;
+                                return onEdit({
+                                    id: category.$id,
+                                    name: category.name,
+                                    parentId: (_category_parentId = category.parentId) != null ? _category_parentId : ''
+                                });
+                            },
+                            children: 'Edit'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "error",
+                            onClick: onDelete(category),
+                            children: 'Delete'
+                        })
+                    ]
+                }, category.$id)),
+            categories.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                page: props.page,
+                pageSize: props.pageSize,
+                rowCount: visible.length,
+                // The categories the card HOLDS — a client slice of rows already
+                // read, so the total is known exactly.
+                count: categories.length,
+                onPageChange: props.onPageChange,
+                onPageSizeChange: props.onPageSizeChange
+            }),
+            props.truncated ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: `Showing ${CATEGORY_CEILING} categories, ordered by id. This ` + 'catalog has more — a category whose parent is past that ' + 'boundary is drawn at the top level here rather than under it.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                onClick: ()=>onEdit({
+                        id: null,
+                        name: '',
+                        parentId: ''
+                    }),
+                children: 'Add category'
+            })
+        ]
+    });
+});
+/** The catalog collections, a page at a time, and the button that adds one. */ const CollectionsSection = /*#__PURE__*/ memo(function CollectionsSection(props) {
+    const { collections, visible, products, countPrefix, onEdit, onDelete } = props;
+    /**
+   * How many products a collection holds — over the CATALOG WINDOW.
+   *
+   * Rendered with "at least" when the probe found a product past the ceiling,
+   * because past that point this is a lower bound and printing it as a total
+   * is the count-that-is-a-window-length defect. The number itself is honest
+   * either way; only the claim around it changes.
+   */ const collectionCount = (row)=>products.filter((product)=>CommerceModel.matchesCollection(product, row, product.$id)).length;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Collections'
+            }),
+            visible.map((row)=>{
+                var _row_mode;
+                return /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            sx: {
+                                flex: 1
+                            },
+                            noWrap: true,
+                            children: [
+                                row.name,
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    component: "span",
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: ` · ${(_row_mode = row.mode) != null ? _row_mode : 'manual'} · ${countPrefix}${collectionCount(row)} products`
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            onClick: ()=>{
+                                var _row_slug, _row_mode, _row_productIds, _row_rules;
+                                return onEdit({
+                                    id: row.$id,
+                                    name: row.name,
+                                    slug: (_row_slug = row.slug) != null ? _row_slug : '',
+                                    mode: (_row_mode = row.mode) != null ? _row_mode : 'manual',
+                                    productIds: (_row_productIds = row.productIds) != null ? _row_productIds : [],
+                                    rules: (_row_rules = row.rules) != null ? _row_rules : [],
+                                    matchAll: row.matchAll !== false
+                                });
+                            },
+                            children: 'Edit'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "error",
+                            onClick: onDelete(row),
+                            children: 'Delete'
+                        })
+                    ]
+                }, row.$id);
+            }),
+            collections.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                page: props.page,
+                pageSize: props.pageSize,
+                rowCount: visible.length,
+                // The CATALOG collections, which is what this list is. Not the
+                // window's length: content collections share the subcollection
+                // and are classified out before this count is taken.
+                count: collections.length,
+                onPageChange: props.onPageChange,
+                onPageSizeChange: props.onPageSizeChange
+            }),
+            props.truncated ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: `Showing ${COLLECTION_CEILING} collections, ordered by id. This ` + 'site has more — the slug check below only covers the ones ' + 'listed here, so an address may already be taken by one that ' + 'is not.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                onClick: ()=>onEdit({
+                        id: null,
+                        name: '',
+                        slug: '',
+                        mode: 'manual',
+                        productIds: [],
+                        rules: [],
+                        matchAll: true
+                    }),
+                children: 'Add collection'
+            })
+        ]
+    });
+});
+/** The category editor: a name and a parent. */ const CategoryDialog = /*#__PURE__*/ memo(function CategoryDialog(props) {
+    var _ref, _ref1;
+    const { draft, categories, setDraft } = props;
+    const draftId = draft == null ? void 0 : draft.id;
+    const close = useCallback(()=>setDraft(null), [
+        setDraft
+    ]);
+    const setName = useCallback((event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                name: event.target.value
+            }) : prev), [
+        setDraft
+    ]);
+    const setParent = useCallback((event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                parentId: event.target.value
+            }) : prev), [
+        setDraft
+    ]);
+    const parentMenu = useMemo(()=>[
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: "",
+                children: 'None (top level)'
+            }, ""),
+            // The whole set, not `visibleCategories` — a parent picker that
+            // offered only the current page could not reparent a category under
+            // one two pages away.
+            ...categories.filter((category)=>category.$id !== draftId).map((category)=>/*#__PURE__*/ _jsx(MenuItem, {
+                    value: category.$id,
+                    children: `${'— '.repeat(category.depth)}${category.name}`
+                }, category.$id))
+        ], [
+        categories,
+        draftId
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: Boolean(draft),
+        onClose: close,
+        maxWidth: "xs",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: (draft == null ? void 0 : draft.id) ? 'Edit category' : 'New category'
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Name",
+                        value: (_ref = draft == null ? void 0 : draft.name) != null ? _ref : '',
+                        onChange: setName,
+                        size: "small",
+                        autoFocus: true,
+                        sx: FIRST_FIELD
+                    }),
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Parent category",
+                        value: (_ref1 = draft == null ? void 0 : draft.parentId) != null ? _ref1 : '',
+                        onChange: setParent,
+                        size: "small",
+                        select: true,
+                        children: parentMenu
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: close,
+                        children: 'Cancel'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        color: "primary",
+                        disabled: !(draft == null ? void 0 : draft.name.trim()),
+                        onClick: props.onSave,
+                        children: 'Save'
+                    })
+                ]
+            })
+        ]
+    });
+});
+const CollectionRuleRow = /*#__PURE__*/ memo(function CollectionRuleRow(props) {
+    const { index, rule, onChange } = props;
+    const setField = useCallback((event)=>onChange(index, {
+            field: event.target.value
+        }), [
+        index,
+        onChange
+    ]);
+    const setOp = useCallback((event)=>onChange(index, {
+            op: event.target.value
+        }), [
+        index,
+        onChange
+    ]);
+    const setCategory = useCallback((event)=>onChange(index, {
+            value: event.target.value
+        }), [
+        index,
+        onChange
+    ]);
+    const ruleField = rule.field;
+    const setValue = useCallback((event)=>onChange(index, {
+            value: ruleField === 'priceUsd' ? Number(event.target.value) : event.target.value
+        }), [
+        index,
+        onChange,
+        ruleField
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                value: rule.field,
+                onChange: setField,
+                size: "small",
+                select: true,
+                sx: RULE_FIELD,
+                children: RULE_FIELD_MENU
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                value: rule.op,
+                onChange: setOp,
+                size: "small",
+                select: true,
+                sx: RULE_OP,
+                children: RULE_OP_MENU
+            }),
+            rule.field === 'categoryId' ? /*#__PURE__*/ _jsx(MemoTextField, {
+                value: rule.value,
+                onChange: setCategory,
+                size: "small",
+                select: true,
+                sx: RULE_VALUE,
+                children: props.categoryMenu
+            }) : /*#__PURE__*/ _jsx(MemoTextField, {
+                value: rule.value,
+                onChange: setValue,
+                size: "small",
+                sx: RULE_VALUE,
+                placeholder: rule.field === 'type' ? 'physical' : 'Value'
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                color: "error",
+                onClick: ()=>onChange(index, null),
+                children: '✕'
+            })
+        ]
+    });
+});
+/** Whether every rule must hold, or any one. */ const CollectionMatchSwitch = /*#__PURE__*/ memo(function CollectionMatchSwitch(props) {
+    const { matchAll, setDraft } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                children: 'Match'
+            }),
+            /*#__PURE__*/ _jsx(Switch, {
+                size: "small",
+                checked: matchAll,
+                onChange: (event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                            matchAll: event.target.checked
+                        }) : prev)
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                children: matchAll ? 'all rules' : 'any rule'
+            })
+        ]
+    });
+});
+/** A smart collection's rules, whether all or any must hold, and the button that adds one. */ const CollectionRulesFields = /*#__PURE__*/ memo(function CollectionRulesFields(props) {
+    const { rules, matchAll, categories, setDraft, onRule } = props;
+    const categoryMenu = useMemo(()=>categories.map((category)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: category.$id,
+                children: category.name
+            }, category.$id)), [
+        categories
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(CollectionMatchSwitch, {
+                matchAll: matchAll,
+                setDraft: setDraft
+            }),
+            rules.map((rule, index)=>/*#__PURE__*/ _jsx(CollectionRuleRow, {
+                    index: index,
+                    rule: rule,
+                    categoryMenu: categoryMenu,
+                    onChange: onRule
+                }, index)),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                onClick: ()=>onRule(rules.length, {}),
+                children: 'Add rule'
+            })
+        ]
+    });
+});
+/** The products a draft collection holds, the first few by name. */ const CollectionPreview = /*#__PURE__*/ memo(function CollectionPreview(props) {
+    const { matches, countPrefix } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 0.5,
+        sx: {
+            flexWrap: 'wrap'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: `Matches ${countPrefix}${matches.length} products: `
+            }),
+            matches.slice(0, 6).map((product)=>/*#__PURE__*/ _jsx(Chip, {
+                    label: product.name,
+                    size: "small"
+                }, product.$id)),
+            matches.length > 6 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: `+${matches.length - 6} more`
+            }) : null
+        ]
+    });
+});
+/** The collection editor: a name, a mode, and the products or rules it holds. */ const CollectionDialog = /*#__PURE__*/ memo(function CollectionDialog(props) {
+    var _ref, _ref1, _ref2;
+    const { draft, error, setDraft } = props;
+    const close = useCallback(()=>setDraft(null), [
+        setDraft
+    ]);
+    const setName = useCallback((event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                name: event.target.value
+            }) : prev), [
+        setDraft
+    ]);
+    const setMode = useCallback((event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                mode: event.target.value
+            }) : prev), [
+        setDraft
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: Boolean(draft),
+        onClose: close,
+        maxWidth: "sm",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: (draft == null ? void 0 : draft.id) ? 'Edit collection' : 'New collection'
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Name",
+                        value: (_ref = draft == null ? void 0 : draft.name) != null ? _ref : '',
+                        onChange: setName,
+                        size: "small",
+                        autoFocus: true,
+                        sx: FIRST_FIELD,
+                        error: props.slugTaken,
+                        helperText: (draft == null ? void 0 : draft.name) ? `/collections/${props.slug}` : undefined
+                    }),
+                    /*#__PURE__*/ _jsx(MemoTextField, {
+                        label: "Mode",
+                        value: (_ref1 = draft == null ? void 0 : draft.mode) != null ? _ref1 : 'manual',
+                        onChange: setMode,
+                        size: "small",
+                        select: true,
+                        children: MODE_MENU
+                    }),
+                    (draft == null ? void 0 : draft.mode) === 'manual' ? /*#__PURE__*/ _jsx(CollectionProductsField, {
+                        products: props.products,
+                        value: props.picked,
+                        onChange: props.onProducts
+                    }) : /*#__PURE__*/ _jsx(CollectionRulesFields, {
+                        rules: (_ref2 = draft == null ? void 0 : draft.rules) != null ? _ref2 : NO_RULES,
+                        matchAll: (draft == null ? void 0 : draft.matchAll) !== false,
+                        categories: props.categories,
+                        setDraft: setDraft,
+                        onRule: props.onRule
+                    }),
+                    error ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        children: error
+                    }) : null,
+                    draft ? /*#__PURE__*/ _jsx(CollectionPreview, {
+                        matches: props.matches,
+                        countPrefix: props.countPrefix
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: close,
+                        children: 'Cancel'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        color: "primary",
+                        disabled: !(draft == null ? void 0 : draft.name.trim()) || Boolean(error),
+                        onClick: props.onSave,
+                        children: 'Save'
+                    })
+                ]
+            })
+        ]
+    });
+});
+/** A collection with no rules yet, the same list on every render. */ const NO_RULES = [];
 /**
  * Categories & collections manager (AGL-280): category tree (parentId)
  * at `hosts/{hostId}/productCategories`, manual + smart collections at
  * `hosts/{hostId}/collections` with a live matched-product preview from
  * the same `matchesCollection` matcher the storefront uses.
  */ export function CatalogOrganizationCard(props) {
-    var _CommerceModel_validateCollection, _ref, _ref1, _ref2, _ref3, _ref4;
+    var _CommerceModel_validateCollection;
     const { hostId } = props;
     const firestore = useFirestore();
     const { enqueueSnackbar } = useSnackbar();
@@ -421,14 +1009,35 @@ const RULE_OPS = [
     const collectionError = collectionDraft ? collectionDraft.name ? (_CommerceModel_validateCollection = CommerceModel.validateCollection(_extends({}, collectionDraft, {
         slug: draftSlug
     }))) != null ? _CommerceModel_validateCollection : slugTaken ? `Another collection already serves /collections/${draftSlug}` : null : null : null;
+    const collectionProductIds = collectionDraft == null ? void 0 : collectionDraft.productIds;
+    const collectionProducts = useMemo(()=>products.filter((product)=>(collectionProductIds != null ? collectionProductIds : []).includes(product.$id)), [
+        products,
+        collectionProductIds
+    ]);
+    const setCollectionProducts = useCallback((picked)=>setCollectionDraft((prev)=>prev ? _extends({}, prev, {
+                productIds: picked.map((item)=>item.$id)
+            }) : prev), []);
+    /*
+   * Recomputed when what decides membership changes — the mode, the picked
+   * products, the rules and whether all must hold — and not on a keystroke in
+   * the name, which no match reads (AGL-3423).
+   */ const draftMode = collectionDraft == null ? void 0 : collectionDraft.mode;
+    const draftRules = collectionDraft == null ? void 0 : collectionDraft.rules;
+    const draftMatchAll = collectionDraft == null ? void 0 : collectionDraft.matchAll;
     const previewMatches = useMemo(()=>{
-        if (!collectionDraft) return [];
-        const candidate = _extends({}, collectionDraft, {
-            slug: collectionDraft.slug || CommerceModel.commerceSlug(collectionDraft.name)
-        });
+        if (!draftMode) return [];
+        const candidate = {
+            mode: draftMode,
+            productIds: collectionProductIds,
+            rules: draftRules,
+            matchAll: draftMatchAll
+        };
         return products.filter((product)=>CommerceModel.matchesCollection(product, candidate, product.$id));
     }, [
-        collectionDraft,
+        draftMode,
+        collectionProductIds,
+        draftRules,
+        draftMatchAll,
         products
     ]);
     /**
@@ -568,7 +1177,7 @@ const RULE_OPS = [
                 // entries with it was the opposite of what happens, and the two
                 // blockers are the whole point of the feature — say them before the
                 // button is armed, not in a 409 afterwards.
-                description: `Storefront blocks pointing at "${row.name}" go empty. The delete ` + 'is refused while the collection still has entries, or while a ' + 'screen uses it as a list or entry template — empty it and detach ' + 'those screens first. It also takes the site admin role.',
+                description: `Storefront blocks pointing at "${row.name}" go empty. The delete ` + 'is refused while the collection still has entries, or while a ' + 'page uses it as a list or entry template — empty it and detach ' + 'those pages first. It also takes the site admin role.',
                 confirmationText: 'Delete',
                 confirmationButtonProps: {
                     color: 'error'
@@ -622,14 +1231,6 @@ const RULE_OPS = [
         enqueueSnackbar,
         restampMembership
     ]);
-    /**
-   * How many products a collection holds — over the CATALOG WINDOW.
-   *
-   * Rendered with "at least" when the probe found a product past the ceiling,
-   * because past that point this is a lower bound and printing it as a total
-   * is the count-that-is-a-window-length defect. The number itself is honest
-   * either way; only the claim around it changes.
-   */ const collectionCount = (row)=>products.filter((product)=>CommerceModel.matchesCollection(product, row, product.$id)).length;
     /*
    * "at least", or nothing at all.
    *
@@ -642,11 +1243,18 @@ const RULE_OPS = [
    * because a catalog of exactly the ceiling is complete: nothing is missing,
    * and a comparison would put "at least" on a number that is exact.
    */ const countPrefix = productsTruncated ? 'at least ' : '';
-    const updateRule = (index, patch)=>{
-        var _collectionDraft_rules;
-        if (!collectionDraft) return;
+    /*
+   * A rule's change, written over the collection draft as last rendered, from
+   * a handler that keeps its identity so a rule row redraws only when its own
+   * rule changes (AGL-3423).
+   */ const latestCollectionDraft = useRef(collectionDraft);
+    latestCollectionDraft.current = collectionDraft;
+    const updateRule = useCallback((index, patch)=>{
+        var _draft_rules;
+        const draft = latestCollectionDraft.current;
+        if (!draft) return;
         const rules = [
-            ...(_collectionDraft_rules = collectionDraft.rules) != null ? _collectionDraft_rules : []
+            ...(_draft_rules = draft.rules) != null ? _draft_rules : []
         ];
         if (patch === null) rules.splice(index, 1);
         else rules[index] = _extends({
@@ -654,10 +1262,10 @@ const RULE_OPS = [
             op: 'eq',
             value: ''
         }, rules[index], patch);
-        setCollectionDraft(_extends({}, collectionDraft, {
+        setCollectionDraft(_extends({}, draft, {
             rules
         }));
-    };
+    }, []);
     return /*#__PURE__*/ _jsxs(CardDisplay, {
         header: 'Categories & collections',
         help: pluginDocsHelp('catalog', {
@@ -669,459 +1277,57 @@ const RULE_OPS = [
             /*#__PURE__*/ _jsxs(Stack, {
                 spacing: 1,
                 children: [
-                    /*#__PURE__*/ _jsx(Typography, {
-                        variant: "subtitle2",
-                        children: 'Categories'
-                    }),
-                    categories.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
-                        variant: "body2",
-                        color: "text.secondary",
-                        children: 'Group products into a browsable tree (e.g. Brakes → Pads).'
-                    }) : visibleCategories.map((category)=>/*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                alignItems: 'center',
-                                pl: category.depth * 2
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsxs(Typography, {
-                                    variant: "body2",
-                                    sx: {
-                                        flex: 1
-                                    },
-                                    noWrap: true,
-                                    children: [
-                                        category.name,
-                                        /*#__PURE__*/ _jsx(Typography, {
-                                            component: "span",
-                                            variant: "caption",
-                                            color: "text.secondary",
-                                            children: ` /${category.slug}`
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    onClick: ()=>{
-                                        var _category_parentId;
-                                        return setCategoryDraft({
-                                            id: category.$id,
-                                            name: category.name,
-                                            parentId: (_category_parentId = category.parentId) != null ? _category_parentId : ''
-                                        });
-                                    },
-                                    children: 'Edit'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    color: "error",
-                                    onClick: handleCategoryDelete(category),
-                                    children: 'Delete'
-                                })
-                            ]
-                        }, category.$id)),
-                    categories.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                    /*#__PURE__*/ _jsx(CategoriesSection, {
+                        categories: categories,
+                        visible: visibleCategories,
                         page: categoryPage,
                         pageSize: categoryPageSize,
-                        rowCount: visibleCategories.length,
-                        // The categories the card HOLDS — a client slice of rows already
-                        // read, so the total is known exactly.
-                        count: categories.length,
+                        truncated: categoriesTruncated,
                         onPageChange: setCategoryPage,
-                        onPageSizeChange: setCategoryPageSize
-                    }),
-                    categoriesTruncated ? /*#__PURE__*/ _jsx(Alert, {
-                        severity: "info",
-                        children: `Showing ${CATEGORY_CEILING} categories, ordered by id. This ` + 'catalog has more — a category whose parent is past that ' + 'boundary is drawn at the top level here rather than under it.'
-                    }) : null,
-                    /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        sx: {
-                            alignSelf: 'flex-start'
-                        },
-                        onClick: ()=>setCategoryDraft({
-                                id: null,
-                                name: '',
-                                parentId: ''
-                            }),
-                        children: 'Add category'
+                        onPageSizeChange: setCategoryPageSize,
+                        onEdit: setCategoryDraft,
+                        onDelete: handleCategoryDelete
                     }),
                     /*#__PURE__*/ _jsx(Divider, {
                         sx: {
                             my: 1
                         }
                     }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        variant: "subtitle2",
-                        children: 'Collections'
-                    }),
-                    visibleCollections.map((row)=>{
-                        var _row_mode;
-                        return /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                alignItems: 'center'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsxs(Typography, {
-                                    variant: "body2",
-                                    sx: {
-                                        flex: 1
-                                    },
-                                    noWrap: true,
-                                    children: [
-                                        row.name,
-                                        /*#__PURE__*/ _jsx(Typography, {
-                                            component: "span",
-                                            variant: "caption",
-                                            color: "text.secondary",
-                                            children: ` · ${(_row_mode = row.mode) != null ? _row_mode : 'manual'} · ${countPrefix}${collectionCount(row)} products`
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    onClick: ()=>{
-                                        var _row_slug, _row_mode, _row_productIds, _row_rules;
-                                        return setCollectionDraft({
-                                            id: row.$id,
-                                            name: row.name,
-                                            slug: (_row_slug = row.slug) != null ? _row_slug : '',
-                                            mode: (_row_mode = row.mode) != null ? _row_mode : 'manual',
-                                            productIds: (_row_productIds = row.productIds) != null ? _row_productIds : [],
-                                            rules: (_row_rules = row.rules) != null ? _row_rules : [],
-                                            matchAll: row.matchAll !== false
-                                        });
-                                    },
-                                    children: 'Edit'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    color: "error",
-                                    onClick: handleCollectionDelete(row),
-                                    children: 'Delete'
-                                })
-                            ]
-                        }, row.$id);
-                    }),
-                    commerceCollections.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                    /*#__PURE__*/ _jsx(CollectionsSection, {
+                        collections: commerceCollections,
+                        visible: visibleCollections,
+                        products: products,
+                        countPrefix: countPrefix,
                         page: collectionPage,
                         pageSize: collectionPageSize,
-                        rowCount: visibleCollections.length,
-                        // The CATALOG collections, which is what this list is. Not the
-                        // window's length: content collections share the subcollection
-                        // and are classified out before this count is taken.
-                        count: commerceCollections.length,
+                        truncated: collectionsTruncated,
                         onPageChange: setCollectionPage,
-                        onPageSizeChange: setCollectionPageSize
-                    }),
-                    collectionsTruncated ? /*#__PURE__*/ _jsx(Alert, {
-                        severity: "info",
-                        children: `Showing ${COLLECTION_CEILING} collections, ordered by id. This ` + 'site has more — the slug check below only covers the ones ' + 'listed here, so an address may already be taken by one that ' + 'is not.'
-                    }) : null,
-                    /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        sx: {
-                            alignSelf: 'flex-start'
-                        },
-                        onClick: ()=>setCollectionDraft({
-                                id: null,
-                                name: '',
-                                slug: '',
-                                mode: 'manual',
-                                productIds: [],
-                                rules: [],
-                                matchAll: true
-                            }),
-                        children: 'Add collection'
+                        onPageSizeChange: setCollectionPageSize,
+                        onEdit: setCollectionDraft,
+                        onDelete: handleCollectionDelete
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsxs(Dialog, {
-                open: Boolean(categoryDraft),
-                onClose: ()=>setCategoryDraft(null),
-                maxWidth: "xs",
-                fullWidth: true,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: (categoryDraft == null ? void 0 : categoryDraft.id) ? 'Edit category' : 'New category'
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogContent, {
-                        sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Name",
-                                value: (_ref = categoryDraft == null ? void 0 : categoryDraft.name) != null ? _ref : '',
-                                onChange: (event)=>setCategoryDraft((prev)=>prev ? _extends({}, prev, {
-                                            name: event.target.value
-                                        }) : prev),
-                                size: "small",
-                                autoFocus: true,
-                                sx: {
-                                    mt: 1
-                                }
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Parent category",
-                                value: (_ref1 = categoryDraft == null ? void 0 : categoryDraft.parentId) != null ? _ref1 : '',
-                                onChange: (event)=>setCategoryDraft((prev)=>prev ? _extends({}, prev, {
-                                            parentId: event.target.value
-                                        }) : prev),
-                                size: "small",
-                                select: true,
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'None (top level)'
-                                    }),
-                                    categories.filter((category)=>category.$id !== (categoryDraft == null ? void 0 : categoryDraft.id)).map((category)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            value: category.$id,
-                                            children: `${'— '.repeat(category.depth)}${category.name}`
-                                        }, category.$id))
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>setCategoryDraft(null),
-                                children: 'Cancel'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                color: "primary",
-                                disabled: !(categoryDraft == null ? void 0 : categoryDraft.name.trim()),
-                                onClick: handleCategorySave,
-                                children: 'Save'
-                            })
-                        ]
-                    })
-                ]
+            /*#__PURE__*/ _jsx(CategoryDialog, {
+                draft: categoryDraft,
+                categories: categories,
+                setDraft: setCategoryDraft,
+                onSave: handleCategorySave
             }),
-            /*#__PURE__*/ _jsxs(Dialog, {
-                open: Boolean(collectionDraft),
-                onClose: ()=>setCollectionDraft(null),
-                maxWidth: "sm",
-                fullWidth: true,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: (collectionDraft == null ? void 0 : collectionDraft.id) ? 'Edit collection' : 'New collection'
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogContent, {
-                        sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Name",
-                                value: (_ref2 = collectionDraft == null ? void 0 : collectionDraft.name) != null ? _ref2 : '',
-                                onChange: (event)=>setCollectionDraft((prev)=>prev ? _extends({}, prev, {
-                                            name: event.target.value
-                                        }) : prev),
-                                size: "small",
-                                autoFocus: true,
-                                sx: {
-                                    mt: 1
-                                },
-                                error: slugTaken,
-                                helperText: (collectionDraft == null ? void 0 : collectionDraft.name) ? `/collections/${draftSlug}` : undefined
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                label: "Mode",
-                                value: (_ref3 = collectionDraft == null ? void 0 : collectionDraft.mode) != null ? _ref3 : 'manual',
-                                onChange: (event)=>setCollectionDraft((prev)=>prev ? _extends({}, prev, {
-                                            mode: event.target.value
-                                        }) : prev),
-                                size: "small",
-                                select: true,
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "manual",
-                                        children: 'Manual — pick products'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "smart",
-                                        children: 'Smart — rule based'
-                                    })
-                                ]
-                            }),
-                            (collectionDraft == null ? void 0 : collectionDraft.mode) === 'manual' ? /*#__PURE__*/ _jsx(Autocomplete, {
-                                multiple: true,
-                                options: products,
-                                getOptionLabel: (product)=>product.name,
-                                isOptionEqualToValue: (option, value)=>option.$id === value.$id,
-                                value: products.filter((product)=>{
-                                    var _collectionDraft_productIds;
-                                    return ((_collectionDraft_productIds = collectionDraft.productIds) != null ? _collectionDraft_productIds : []).includes(product.$id);
-                                }),
-                                onChange: (_event, picked)=>setCollectionDraft((prev)=>prev ? _extends({}, prev, {
-                                            productIds: picked.map((item)=>item.$id)
-                                        }) : prev),
-                                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                        label: "Products",
-                                        size: "small"
-                                    }))
-                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        direction: "row",
-                                        spacing: 1,
-                                        sx: {
-                                            alignItems: 'center'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "body2",
-                                                children: 'Match'
-                                            }),
-                                            /*#__PURE__*/ _jsx(Switch, {
-                                                size: "small",
-                                                checked: (collectionDraft == null ? void 0 : collectionDraft.matchAll) !== false,
-                                                onChange: (event)=>setCollectionDraft((prev)=>prev ? _extends({}, prev, {
-                                                            matchAll: event.target.checked
-                                                        }) : prev)
-                                            }),
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "body2",
-                                                children: (collectionDraft == null ? void 0 : collectionDraft.matchAll) !== false ? 'all rules' : 'any rule'
-                                            })
-                                        ]
-                                    }),
-                                    ((_ref4 = collectionDraft == null ? void 0 : collectionDraft.rules) != null ? _ref4 : []).map((rule, index)=>/*#__PURE__*/ _jsxs(Stack, {
-                                            direction: "row",
-                                            spacing: 1,
-                                            children: [
-                                                /*#__PURE__*/ _jsx(TextField, {
-                                                    value: rule.field,
-                                                    onChange: (event)=>updateRule(index, {
-                                                            field: event.target.value
-                                                        }),
-                                                    size: "small",
-                                                    select: true,
-                                                    sx: {
-                                                        width: 130
-                                                    },
-                                                    children: RULE_FIELDS.map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: field.value,
-                                                            children: field.label
-                                                        }, field.value))
-                                                }),
-                                                /*#__PURE__*/ _jsx(TextField, {
-                                                    value: rule.op,
-                                                    onChange: (event)=>updateRule(index, {
-                                                            op: event.target.value
-                                                        }),
-                                                    size: "small",
-                                                    select: true,
-                                                    sx: {
-                                                        width: 110
-                                                    },
-                                                    children: RULE_OPS.map((op)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: op.value,
-                                                            children: op.label
-                                                        }, op.value))
-                                                }),
-                                                rule.field === 'categoryId' ? /*#__PURE__*/ _jsx(TextField, {
-                                                    value: rule.value,
-                                                    onChange: (event)=>updateRule(index, {
-                                                            value: event.target.value
-                                                        }),
-                                                    size: "small",
-                                                    select: true,
-                                                    sx: {
-                                                        flex: 1
-                                                    },
-                                                    children: categories.map((category)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: category.$id,
-                                                            children: category.name
-                                                        }, category.$id))
-                                                }) : /*#__PURE__*/ _jsx(TextField, {
-                                                    value: rule.value,
-                                                    onChange: (event)=>updateRule(index, {
-                                                            value: rule.field === 'priceUsd' ? Number(event.target.value) : event.target.value
-                                                        }),
-                                                    size: "small",
-                                                    sx: {
-                                                        flex: 1
-                                                    },
-                                                    placeholder: rule.field === 'type' ? 'physical' : 'Value'
-                                                }),
-                                                /*#__PURE__*/ _jsx(Button, {
-                                                    size: "small",
-                                                    color: "error",
-                                                    onClick: ()=>updateRule(index, null),
-                                                    children: '✕'
-                                                })
-                                            ]
-                                        }, index)),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        size: "small",
-                                        sx: {
-                                            alignSelf: 'flex-start'
-                                        },
-                                        onClick: ()=>{
-                                            var _ref;
-                                            var _collectionDraft_rules;
-                                            return updateRule((_ref = collectionDraft == null ? void 0 : (_collectionDraft_rules = collectionDraft.rules) == null ? void 0 : _collectionDraft_rules.length) != null ? _ref : 0, {});
-                                        },
-                                        children: 'Add rule'
-                                    })
-                                ]
-                            }),
-                            collectionError ? /*#__PURE__*/ _jsx(Alert, {
-                                severity: "warning",
-                                children: collectionError
-                            }) : null,
-                            collectionDraft ? /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 0.5,
-                                sx: {
-                                    flexWrap: 'wrap'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        color: "text.secondary",
-                                        children: `Matches ${countPrefix}${previewMatches.length} products: `
-                                    }),
-                                    previewMatches.slice(0, 6).map((product)=>/*#__PURE__*/ _jsx(Chip, {
-                                            label: product.name,
-                                            size: "small"
-                                        }, product.$id)),
-                                    previewMatches.length > 6 ? /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        color: "text.secondary",
-                                        children: `+${previewMatches.length - 6} more`
-                                    }) : null
-                                ]
-                            }) : null
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>setCollectionDraft(null),
-                                children: 'Cancel'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                color: "primary",
-                                disabled: !(collectionDraft == null ? void 0 : collectionDraft.name.trim()) || Boolean(collectionError),
-                                onClick: handleCollectionSave,
-                                children: 'Save'
-                            })
-                        ]
-                    })
-                ]
+            /*#__PURE__*/ _jsx(CollectionDialog, {
+                draft: collectionDraft,
+                slug: draftSlug,
+                slugTaken: slugTaken,
+                error: collectionError,
+                products: products,
+                picked: collectionProducts,
+                categories: categories,
+                matches: previewMatches,
+                countPrefix: countPrefix,
+                setDraft: setCollectionDraft,
+                onProducts: setCollectionProducts,
+                onRule: updateRule,
+                onSave: handleCollectionSave
             })
         ]
     });