@mohasinac/appkit 4.30.19 → 4.31.0

package/dist/features/admin/components/AdminBundleEditorView.js

@@ -1,60 +1,66 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * AdminBundleEditorView — S-SBUNI-4 2026-05-13.
+ * AdminBundleEditorView — S-SBUNI-4 2026-05-13, sectionised 2026-08-30.
  *
  * Unified create + edit view for categoryType:"bundle" rows. When `bundleId`
  * is set, loads + edits; when omitted, runs as a "new" form. Delegates to
- * /api/admin/bundles. Owns: name + description + bundlePrice +
- * static-only product picker + isActive. Dynamic-rule editing is out of scope
- * for this session (the API accepts dynamic rules but the form only writes
- * static rules; admins editing a pre-existing dynamic bundle see its members
- * in the picker but the rule itself stays unchanged until they switch to
- * static).
+ * /api/admin/bundles (or /api/store/bundles under `scope="store"`).
+ *
+ * ## The schema now runs
+ *
+ * It used to declare a seven-field `.passthrough()` stub inside this file,
+ * hand it to `<Form schema>`, and validate with two `if` statements instead.
+ * So the member-count bounds the picker DISPLAYS — `min 3, max 16` — were red
+ * hint text under the control that nothing enforced, and a two-member bundle
+ * saved cleanly. The real schema lives in `../../categories/schemas/bundle-form`
+ * and is parsed on every change.
+ *
+ * Static vs dynamic rules are both editable: the rule-type select swaps which
+ * member source is on screen, and `visibleValues` makes the payload follow it.
  */
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
-import { Button, Checkbox, ConfirmDeleteModal, Container, Form, Heading, Input, Row, Section, Select, Stack, Text, Textarea, useToast, } from "../../../ui";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { ConfirmDeleteModal, Div, StackedViewShell } from "../../../ui";
+import { FormErrorSummary } from "../../../ui/forms";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { BundleDynamicRuleEditor } from "../../categories/components/BundleDynamicRuleEditor";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
 import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
-import { BUNDLE_MIN_ITEMS, BUNDLE_MAX_ITEMS, BUNDLE_KIND_SPECIAL, } from "../../../_internal/shared/features/categories/bundle-config";
+import { BUNDLE_KIND_SPECIAL } from "../../../_internal/shared/features/categories/bundle-config";
+import { bundleFormSchema, BUNDLE_RULE_TYPE_OPTIONS, } from "../../categories/schemas/bundle-form";
+const __P = {
+    p4: "p-[var(--appkit-space-4)]",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 const DEFAULT_DYNAMIC_RULE = {
     type: "dynamic",
     filter: {},
     orderBy: "createdAt-desc",
     limit: 6,
 };
-const RULE_TYPE_OPTIONS = [
-    { label: BUNDLE_COPY.adminEditor.ruleTypeStatic, value: "static" },
-    { label: BUNDLE_COPY.adminEditor.ruleTypeDynamic, value: "dynamic" },
-];
+/** No brand is the empty string — `brandSlug: undefined` in the payload. */
+const NO_BRAND_OPTION_VALUE = "";
 const EMPTY_FORM = {
     name: "",
-    description: "",
     priceRupees: "",
+    description: "",
     ruleType: "static",
     productIds: [],
     dynamicRule: DEFAULT_DYNAMIC_RULE,
-    isActive: true,
     coverImage: "",
     brandSlug: "",
+    isActive: true,
 };
-const NO_BRAND_OPTION_VALUE = "";
-const bundleFormSchema = z.object({
-    name: z.string().min(1, "Bundle name is required").max(150),
-    description: z.string().max(2000).optional().or(z.literal("")),
-    priceRupees: z.string().regex(/^\d+(\.\d{1,2})?$/, "Enter a valid price"),
-    ruleType: z.enum(["static", "dynamic"]),
-    productIds: z.array(z.string()),
-    isActive: z.boolean(),
-    coverImage: z.string().optional().or(z.literal("")),
-}).passthrough();
+/** What the API returns for one bundle — replaces an `as any` at the read. */
 function bundleToForm(bundle) {
     if (!bundle)
         return EMPTY_FORM;
@@ -64,42 +70,24 @@ function bundleToForm(bundle) {
     const idsFromMirror = bundle.bundleProductIds ?? [];
     return {
         name: bundle.name ?? "",
+        priceRupees: typeof bundle.bundlePrice === "number" ? String(bundle.bundlePrice) : "",
         description: bundle.description ?? "",
-        priceRupees: typeof bundle.bundlePrice === "number"
-            ? String(bundle.bundlePrice)
-            : "",
         ruleType: isDynamic ? "dynamic" : "static",
         productIds: fromRule.length ? fromRule : idsFromMirror,
         dynamicRule: isDynamic ? rule : DEFAULT_DYNAMIC_RULE,
-        isActive: bundle.isActive !== false,
         coverImage: bundle.display?.coverImage ?? "",
         brandSlug: bundle.brandSlug ?? "",
+        isActive: bundle.isActive !== false,
     };
 }
-function parsePriceRupees(input) {
-    const trimmed = input.trim();
-    if (!trimmed)
-        return null;
-    const n = Number(trimmed);
-    if (!Number.isFinite(n) || n <= 0)
-        return null;
-    return Math.round(n * 100) / 100;
-}
-export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "admin", }) {
+export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "admin", embedded, ...rest }) {
     const isEdit = Boolean(bundleId);
     const endpoints = React.useMemo(() => scope === "admin"
         ? { collection: ADMIN_ENDPOINTS.BUNDLES, byId: ADMIN_ENDPOINTS.BUNDLE_BY_ID }
         : { collection: SELLER_ENDPOINTS.BUNDLES, byId: SELLER_ENDPOINTS.BUNDLE_BY_ID }, [scope]);
-    const [form, setForm] = useState(EMPTY_FORM);
-    const [loading, setLoading] = useState(isEdit);
-    const [saving, setSaving] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-    const [apiError, setApiError] = useState(null);
-    const formHelpersRef = React.useRef(null);
-    const setFieldError = (path, message) => formHelpersRef.current?.setFieldError(path, message);
-    const clearErrors = () => formHelpersRef.current?.clearErrors();
-    const { showToast } = useToast();
+    const [form, setForm] = React.useState(EMPTY_FORM);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const brandsQuery = useQuery({
         queryKey: ["admin", "brands", "picker"],
         queryFn: async () => {
@@ -107,79 +95,53 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
             return res?.data?.items ?? [];
         },
     });
-    const brandOptions = [
+    const brandOptions = React.useMemo(() => [
         { label: "No specific brand", value: NO_BRAND_OPTION_VALUE },
-        ...(brandsQuery.data ?? []).map((b) => ({ label: b.name, value: b.slug ?? b.id })),
-    ];
-    // Load existing bundle on mount when editing
-    useEffect(() => {
-        if (!bundleId)
-            return;
-        let cancelled = false;
-        setLoading(true);
-        apiClient
-            .get(endpoints.byId(encodeURIComponent(bundleId)))
-            .then((res) => {
-            if (cancelled)
-                return;
-            const json = res;
-            const doc = json?.data ?? null;
-            setForm(bundleToForm(doc));
-        })
-            .catch((err) => {
-            if (cancelled)
-                return;
-            setApiError(err instanceof Error
-                ? err.message
-                : BUNDLE_COPY.adminEditor.errors.loadFailed);
-        })
-            .finally(() => {
-            if (!cancelled)
-                setLoading(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [bundleId, endpoints]);
-    const handleSave = useCallback(async () => {
-        // Save is a type="button" onClick — <Form>'s native submit never fires,
-        // so the error summary has to be unhidden explicitly.
-        formHelpersRef.current?.markSubmitAttempted();
-        clearErrors();
-        setApiError(null);
-        const price = parsePriceRupees(form.priceRupees);
-        let hasError = false;
-        if (!form.name.trim()) {
-            setFieldError("name", BUNDLE_COPY.adminEditor.errors.nameRequired);
-            hasError = true;
-        }
-        if (price === null) {
-            setFieldError("price", BUNDLE_COPY.adminEditor.errors.priceInvalid);
-            hasError = true;
-        }
-        if (hasError)
+        ...(brandsQuery.data ?? []).map((b) => ({
+            label: b.name,
+            value: b.slug ?? b.id,
+        })),
+    ], [brandsQuery.data]);
+    const bundleQuery = useQuery({
+        queryKey: ["bundle", scope, bundleId],
+        queryFn: async () => {
+            const res = (await apiClient.get(endpoints.byId(encodeURIComponent(bundleId))));
+            return res?.data ?? null;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        if (bundleQuery.data === undefined)
             return;
-        setSaving(true);
-        try {
-            // SB-UNI-5 2026-05-13 — static vs dynamic rule branching.
-            const bundleQueryRule = form.ruleType === "dynamic"
-                ? form.dynamicRule
-                : {
-                    type: "static",
-                    productIds: form.productIds,
-                };
-            // For static rules, the mirror equals the picker selection. For dynamic
-            // rules, the Function resolver writes the mirror; we send an empty list
-            // on create + leave it untouched on update so we don't clobber the
-            // resolver's cache.
-            const bundleProductIds = form.ruleType === "static" ? form.productIds : [];
+        setForm(bundleToForm(bundleQuery.data));
+    }, [bundleQuery.data]);
+    const saveMutation = useApiMutation({
+        errorMessage: BUNDLE_COPY.adminEditor.errors.saveFailed,
+        successMessage: isEdit ? "Bundle saved." : "Bundle created.",
+        mutationFn: async () => {
+            /*
+             * `visibleValues` decides which member source is sent: the picker is on
+             * screen for a static rule and the query editor for a dynamic one, and
+             * whichever is hidden is absent from the draft rather than filtered out
+             * again here by a second copy of the same condition.
+             */
+            const draft = visibleValues(bundleFormSchema, form);
+            const isStatic = form.ruleType === "static";
+            const bundleQueryRule = isStatic
+                ? { type: "static", productIds: draft.productIds ?? [] }
+                : (draft.dynamicRule ?? DEFAULT_DYNAMIC_RULE);
             const body = {
                 name: form.name.trim(),
                 description: form.description.trim() || undefined,
                 bundleKind: BUNDLE_KIND_SPECIAL,
-                bundlePrice: price,
+                bundlePrice: Number(form.priceRupees),
                 bundleQueryRule,
-                bundleProductIds,
+                /*
+                 * For a static rule the mirror equals the picker selection. For a
+                 * dynamic one the Function resolver owns the mirror; an empty list on
+                 * create leaves it for the resolver rather than clobbering its cache.
+                 */
+                bundleProductIds: isStatic ? (draft.productIds ?? []) : [],
                 display: form.coverImage.trim()
                     ? { coverImage: form.coverImage.trim() }
                     : undefined,
@@ -187,56 +149,62 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
                 brandSlug: form.brandSlug || undefined,
             };
             if (isEdit && bundleId) {
-                await apiClient.put(endpoints.byId(encodeURIComponent(bundleId)), body);
-                showToast("Bundle saved.", "success");
-                onSaved?.(bundleId);
+                return apiClient.put(endpoints.byId(encodeURIComponent(bundleId)), body);
             }
-            else {
-                const res = (await apiClient.post(endpoints.collection, body));
-                const newId = res?.data?.id;
-                showToast("Bundle created.", "success");
-                if (newId)
-                    onSaved?.(newId);
-            }
-        }
-        catch (err) {
-            void normalizeError(err);
-            const msg = err instanceof Error ? err.message : BUNDLE_COPY.adminEditor.errors.saveFailed;
-            setApiError(msg);
-            showToast(msg, "error");
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [form, bundleId, isEdit, onSaved, clearErrors, setFieldError, showToast, endpoints]);
-    const handleDelete = useCallback(async () => {
-        if (!bundleId)
+            return apiClient.post(endpoints.collection, body);
+        },
+        onSuccess: (res) => {
+            const created = res?.data?.id;
+            const id = bundleId ?? created;
+            if (onSaved && id)
+                onSaved(id);
+        },
+    });
+    const deleteMutation = useApiMutation({
+        errorMessage: BUNDLE_COPY.adminEditor.errors.deleteFailed,
+        successMessage: "Bundle deleted.",
+        mutationFn: () => apiClient.delete(endpoints.byId(encodeURIComponent(bundleId))),
+        onSuccess: () => {
+            if (onDeleted)
+                onDeleted();
+        },
+    });
+    const sections = React.useMemo(() => buildSectionsFromSchema(bundleFormSchema, {
+        options: { brandSlug: brandOptions, ruleType: BUNDLE_RULE_TYPE_OPTIONS },
+        renderers: {
+            productIds: ({ values, onChange }) => (_jsx(ProductInlineSelect, { scope: scope, multiple: true, value: values.productIds, onChange: (ids) => onChange({ productIds: ids }), placeholder: "Search and select products\u2026" })),
+            dynamicRule: ({ values, onChange }) => (_jsx(BundleDynamicRuleEditor, { value: values.dynamicRule, onChange: (next) => onChange({ dynamicRule: next }) })),
+        },
+    }), [brandOptions, scope]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:bundle-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(bundleFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = bundleFormSchema.safeParse(visibleValues(bundleFormSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
             return;
-        setDeleting(true);
-        setApiError(null);
-        try {
-            await apiClient.delete(endpoints.byId(encodeURIComponent(bundleId)));
-            showToast("Bundle deleted.", "success");
-            setDeleteConfirmOpen(false);
-            onDeleted?.();
-        }
-        catch (err) {
-            void normalizeError(err);
-            const msg = err instanceof Error ? err.message : BUNDLE_COPY.adminEditor.errors.deleteFailed;
-            setApiError(msg);
-            showToast(msg, "error");
         }
-        finally {
-            setDeleting(false);
-        }
-    }, [bundleId, onDeleted, showToast, endpoints]);
-    if (loading) {
-        return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "lg", children: _jsx(Text, { children: BUNDLE_COPY.adminEditor.loading }) }) }));
+        saveMutation.mutate();
+    };
+    const isSubmitting = saveMutation.isPending || bundleQuery.isLoading;
+    const formSection = (_jsxs(_Fragment, { children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: onSubmit, schema: bundleFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: BUNDLE_COPY.adminEditor.saveButton(false, isEdit), destructiveAction: isEdit
+                            ? {
+                                label: BUNDLE_COPY.adminEditor.deleteButton(false),
+                                onClick: () => setDeleteConfirmOpen(true),
+                            }
+                            : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete this bundle?", message: BUNDLE_COPY.adminEditor.deleteConfirm, onConfirm: () => {
+                    deleteMutation.mutate();
+                    setDeleteConfirmOpen(false);
+                }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    if (embedded) {
+        return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }
-    return (_jsx(Form, { schema: bundleFormSchema, onSubmit: (e) => e.preventDefault(), children: (helpers) => {
-            formHelpersRef.current = helpers;
-            return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: isEdit
-                                            ? BUNDLE_COPY.adminEditorTitleEdit
-                                            : BUNDLE_COPY.adminEditorTitleNew }), isEdit && (_jsx(Button, { variant: "danger", onClick: () => setDeleteConfirmOpen(true), disabled: deleting, children: BUNDLE_COPY.adminEditor.deleteButton(deleting) }))] }), _jsx(ConfirmDeleteModal, { isOpen: deleteConfirmOpen, onClose: () => setDeleteConfirmOpen(false), onConfirm: handleDelete, title: "Delete this bundle?", message: BUNDLE_COPY.adminEditor.deleteConfirm, isDeleting: deleting }), apiError && (_jsx(Text, { color: "danger", role: "alert", children: apiError })), _jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "name", label: BUNDLE_COPY.adminEditor.fields.nameLabel, value: form.name, onChange: (v) => setForm((f) => ({ ...f, name: v })), placeholder: BUNDLE_COPY.adminEditor.fields.namePlaceholder, disabled: saving, required: true }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.descriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.descriptionPlaceholder, rows: 4, disabled: saving })] }), _jsx(Stack, { gap: "xs", children: _jsx(FieldInput, { name: "price", label: BUNDLE_COPY.adminEditor.fields.priceLabel, type: "number", inputMode: "decimal", min: 1, step: 1, value: form.priceRupees, onChange: (v) => setForm((f) => ({ ...f, priceRupees: v })), placeholder: BUNDLE_COPY.adminEditor.fields.pricePlaceholder, disabled: saving, required: true }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.coverImageLabel }), _jsx(Input, { type: "url", value: form.coverImage, onChange: (e) => setForm((f) => ({ ...f, coverImage: e.target.value })), placeholder: "https://\u2026", disabled: saving })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Brand" }), _jsx(Select, { options: brandOptions, value: form.brandSlug, onValueChange: (next) => setForm((f) => ({ ...f, brandSlug: next })), disabled: saving || brandsQuery.isLoading, "aria-label": "Brand" })] }), _jsx(Checkbox, { checked: form.isActive, onChange: (e) => setForm((f) => ({ ...f, isActive: e.target.checked })), disabled: saving, label: BUNDLE_COPY.adminEditor.fields.activeLabel }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.ruleTypeLabel }), _jsx(Select, { options: RULE_TYPE_OPTIONS, value: form.ruleType, onValueChange: (next) => setForm((f) => ({ ...f, ruleType: next })), disabled: saving, "aria-label": BUNDLE_COPY.adminEditor.ruleTypeLabel })] }), form.ruleType === "static" ? (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [BUNDLE_COPY.adminEditor.ruleTypeStatic, " products (", BUNDLE_MIN_ITEMS, "\u2013", BUNDLE_MAX_ITEMS, ")"] }), _jsx(ProductInlineSelect, { scope: scope, multiple: true, value: form.productIds, onChange: (ids) => setForm((f) => ({ ...f, productIds: ids })), disabled: saving, placeholder: "Search and select products\u2026" }), form.productIds.length > 0 && form.productIds.length < BUNDLE_MIN_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Select at least ", BUNDLE_MIN_ITEMS, " products (currently ", form.productIds.length, ")."] })), form.productIds.length > BUNDLE_MAX_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Maximum ", BUNDLE_MAX_ITEMS, " products allowed (currently ", form.productIds.length, ")."] }))] })) : (_jsx(BundleDynamicRuleEditor, { value: form.dynamicRule, onChange: (next) => setForm((f) => ({ ...f, dynamicRule: next })), disabled: saving }))] }), _jsx(FormErrorSummary, {}), _jsx(Row, { gap: "sm", align: "center", justify: "end", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, "aria-busy": saving, children: BUNDLE_COPY.adminEditor.saveButton(saving, isEdit) }) })] }) }) }));
-        } }));
+    return (_jsx(StackedViewShell, { portal: scope === "store" ? "seller" : "admin", ...rest, title: isEdit
+            ? BUNDLE_COPY.adminEditorTitleEdit
+            : BUNDLE_COPY.adminEditorTitleNew, sections: [formSection] }));
 }

package/dist/features/admin/components/AdminCategoryEditorView.js

@@ -1,21 +1,48 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { Button, Card, CardBody, ConfirmDeleteModal, Div, Form, Input, PaginatedSelect, Stack, StackedViewShell, Text, Toggle, useToast, Show, StickyToolbar } from "../../../ui";
+import { Card, CardBody, ConfirmDeleteModal, Div, Input, PaginatedSelect, Stack, StackedViewShell, Text, Toggle, useToast, Show, StickyToolbar } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
 import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
+/**
+ * Covers every field the form actually edits.
+ *
+ * It previously declared four of seven and carried `.passthrough()`, so
+ * `description`, `order` and `showInMenu` were unvalidated — and `order` is
+ * typed by hand into a text input and sent through `Number()`.
+ */
 const categoryFormSchema = z.object({
     name: z.string().min(1, "Category name is required").max(120),
-    slug: z.string().regex(/^[a-z0-9-]+$/, "Lowercase letters, digits and hyphens only").optional().or(z.literal("")),
-    parentId: z.string().nullable().optional(),
+    slug: z
+        .string()
+        .regex(/^[a-z0-9-]+$/, "Lowercase letters, digits and hyphens only")
+        .optional()
+        .or(z.literal("")),
+    description: z.string().max(500, "Keep the description under 500 characters").optional().or(z.literal("")),
+    parentId: z.string().optional().or(z.literal("")),
+    order: z
+        .string()
+        .regex(/^\d*$/, "Display order must be a whole number")
+        .optional()
+        .or(z.literal("")),
     isActive: z.boolean().optional(),
-}).passthrough();
+    showInMenu: z.boolean().optional(),
+});
+const EMPTY_VALUES = {
+    name: "",
+    slug: "",
+    description: "",
+    parentId: "",
+    order: "",
+    isActive: true,
+    showInMenu: true,
+};
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -45,16 +72,23 @@ function toCategorySlug(str) {
 export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(categoryId);
     const [deleteOpen, setDeleteOpen] = React.useState(false);
-    const { shellCtx } = useFormShellState(categoryFormSchema);
-    const [name, setName] = React.useState("");
-    const [slug, setSlug] = React.useState("");
+    const [values, setValues] = React.useState(EMPTY_VALUES);
+    /* UI state, not a form value — whether the user has taken the slug over. */
     const [slugManual, setSlugManual] = React.useState(false);
-    const [description, setDescription] = React.useState("");
-    const [parentId, setParentId] = React.useState("");
-    const [order, setOrder] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    const [showInMenu, setShowInMenu] = React.useState(true);
     const { showToast } = useToast();
+    const handleChange = React.useCallback((partial) => {
+        setValues((prev) => {
+            // Object.assign, not a spread: spreading a `Partial<T>` widens every
+            // property to `| undefined`, which no longer satisfies the index
+            // signature. The intersection Object.assign returns does.
+            const next = Object.assign({}, prev, partial);
+            // Slug tracks the name until the user edits it, and `slugManual` is what
+            // stops it snapping back afterwards.
+            if (partial.name !== undefined && !slugManual)
+                next.slug = toCategorySlug(String(partial.name));
+            return next;
+        });
+    }, [slugManual]);
     const categoryQuery = useQuery({
         queryKey: ["admin", "category", categoryId],
         queryFn: async () => {
@@ -67,31 +101,31 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
         const cat = categoryQuery.data;
         if (!cat)
             return;
-        setName(cat.name ?? "");
-        setSlug(cat.slug ?? "");
         setSlugManual(true);
-        setDescription(cat.description ?? "");
-        setParentId(cat.parentId ?? cat.parentIds?.[cat.parentIds?.length - 1] ?? "");
-        setOrder(cat.order !== undefined ? String(cat.order) : "");
-        setIsActive(cat.isActive ?? true);
-        setShowInMenu(cat.display?.showInMenu ?? true);
+        setValues({
+            name: cat.name ?? "",
+            slug: cat.slug ?? "",
+            description: cat.description ?? "",
+            parentId: cat.parentId ??
+                cat.parentIds?.[cat.parentIds?.length - 1] ??
+                "",
+            order: cat.order !== undefined ? String(cat.order) : "",
+            isActive: cat.isActive ?? true,
+            showInMenu: cat.display?.showInMenu ?? true,
+        });
     }, [categoryQuery.data]);
-    const handleNameChange = (value) => {
-        setName(value);
-        if (!slugManual)
-            setSlug(toCategorySlug(value));
-    };
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save category.",
         mutationFn: async () => {
+            const name = String(values.name ?? "");
             const payload = {
                 name,
-                slug: slug || toCategorySlug(name),
-                description: description || undefined,
-                parentId: parentId || undefined,
-                order: order !== "" ? Number(order) : undefined,
-                isActive,
-                display: { showInMenu },
+                slug: String(values.slug ?? "") || toCategorySlug(name),
+                description: String(values.description ?? "") || undefined,
+                parentId: String(values.parentId ?? "") || undefined,
+                order: values.order !== "" && values.order !== undefined ? Number(values.order) : undefined,
+                isActive: values.isActive ?? true,
+                display: { showInMenu: values.showInMenu ?? true },
             };
             if (isEdit) {
                 return apiClient.put(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId), payload);
@@ -115,18 +149,61 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
         },
     });
     const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
-    const actionSidebar = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: isEdit ? (isActive ? "Active" : "Inactive") : "New" }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "submit", form: "category-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] }) }));
-    const formContent = (_jsx(Form, { id: "category-editor-form", schema: categoryFormSchema, shellCtx: shellCtx, onSubmit: (e) => e.preventDefault(), spacing: "lg", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Identity" }), _jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                                setSlug(e.target.value);
-                                                setSlugManual(true);
-                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Parent category" }), _jsx(PaginatedSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Display" }), _jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
-                                clearErrors();
-                                if (!name.trim()) {
-                                    setFieldError("name", "Category name is required");
-                                    return;
-                                }
-                                saveMutation.mutate();
-                            }, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] })] })) }, "cat-form"));
+    /*
+     * The sections. Order comes from `required` first, then the group band
+     * (`basics` -> required, `visibility` -> visibility), so "mandatory first,
+     * least important last" needs no per-form sectionOrder.
+     *
+     * `fields` is what makes the error summary's jump links and the per-section
+     * error badge work — it is the map from a Zod path back to the panel holding
+     * that control.
+     */
+    const sections = React.useMemo(() => [
+        {
+            id: "basics",
+            label: "Identity",
+            required: true,
+            fields: ["name", "slug", "description", "parentId"],
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: String(v.name ?? ""), onChange: (val) => onChange({ name: val }), required: true, placeholder: "e.g. Toys & Games", error: errors.name }), _jsx(Input, { label: "Slug", value: String(v.slug ?? ""), onChange: (e) => {
+                                    setSlugManual(true);
+                                    onChange({ slug: e.target.value });
+                                }, placeholder: "toys-and-games", helperText: "Auto-generated from the name until you edit it. Used in URLs.", error: errors.slug })] }), _jsx(Input, { label: "Description", value: String(v.description ?? ""), onChange: (e) => onChange({ description: e.target.value }), placeholder: "Brief description of the category", error: errors.description }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Parent category" }), _jsx(PaginatedSelect, { value: String(v.parentId ?? "") || null, onChange: (val) => onChange({ parentId: val ?? "" }), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => {
+                                        onChange({ parentId: id });
+                                        onCreated({ value: id, label: n });
+                                    }, onCancel: onCancel })) }), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to create a root category." })] })] })),
+        },
+        {
+            id: "visibility",
+            label: "Display",
+            fields: ["order", "isActive", "showInMenu"],
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Display order", value: String(v.order ?? ""), onChange: (e) => onChange({ order: e.target.value }), type: "number", min: 0, placeholder: "0", error: errors.order }), _jsx(Toggle, { label: "Active", checked: v.isActive ?? true, onChange: (checked) => onChange({ isActive: checked }) }), _jsx(Toggle, { label: "Show in menu", checked: v.showInMenu ?? true, onChange: (checked) => onChange({ showInMenu: checked }) })] })),
+        },
+    ], []);
+    const nav = useSectionFormNav(sections, values);
+    const { shellCtx } = useFormShellState(categoryFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    /*
+     * The sidebar is STATUS ONLY now.
+     *
+     * It used to carry its own Save and Delete, and the Save was dead: it was
+     * `type="submit"` against a `<Form onSubmit={(e) => e.preventDefault()}>`
+     * with no onClick of its own, while the only call to `saveMutation.mutate()`
+     * lived in a second, `lg:hidden` button row. The two were mutually exclusive
+     * by breakpoint, so on any desktop viewport the admin category editor could
+     * not save at all. One action list rendered twice is what makes that
+     * unrepresentable.
+     */
+    const actionSidebar = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: isEdit ? (values.isActive ? "Active" : "Inactive") : "New" }), _jsx(FormErrorSummary, {})] }) }));
+    const formContent = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(SectionForm, { sections: sections, values: values, onChange: handleChange, onSubmit: () => saveMutation.mutate(), schema: categoryFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create category", destructiveAction: isEdit
+                ? {
+                    label: "Delete category",
+                    onClick: () => setDeleteOpen(true),
+                    disabled: deleteMutation.isPending,
+                }
+                : undefined }) }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }