@mohasinac/appkit 4.30.19 → 4.31.0

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

@@ -1,21 +1,47 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AdminAddressEditorView — on the shared address shape, 2026-08-30 (W5 / D19).
+ *
+ * ## What it was
+ *
+ * `adminAddressFormSchema`, a twelfth restatement of the same eleven fields,
+ * with `postalCode: /^\d{6}$/` — India-only, on a form whose `country` was a
+ * free-text box. It was the ONLY one of the three address surfaces that used
+ * `INDIAN_STATES`; the other two shipped free text into the same
+ * `AddressDocument.state`, so the field held "Karnataka", "karnataka" and "KA"
+ * depending on which surface created the row.
+ *
+ * ## `canSave` is gone, and its last clause is why
+ *
+ * `form.postalCode.length === 6` — a LENGTH check, so `"abcdef"` satisfied it,
+ * and any non-Indian address could never be saved from this screen at all.
+ * The schema now decides, per country, and reports on the field.
+ */
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, Checkbox, ConfirmDeleteModal, Div, Form, Input, Select, Span, Stack, StackedViewShell, Text, Toggle, useToast, Show, StickyToolbar } from "../../../ui";
+import { ConfirmDeleteModal, Stack, StackedViewShell, useToast, } from "../../../ui";
+import { FieldInput, 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 } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { INDIAN_STATES } from "../../account/constants/addresses";
-import { adminAddressFormSchema } from "../schemas/admin-editor-forms";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
-const STATE_OPTIONS = INDIAN_STATES.map((s) => ({ value: s, label: s }));
-// ── Section heading helper ─────────────────────────────────────────────────────
-function SectionHeading({ children }) {
-    return (_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: children }));
-}
+import { adminAddressCreateSchema } from "../../addresses/schemas/address-form";
+import { AddressLocationFields } from "../../addresses/components/AddressLocationFields";
+import { usePostalLookup } from "../../addresses/hooks/usePostalLookup";
+import { COUNTRIES, DEFAULT_COUNTRY } from "../../../constants/geo/countries";
+const COUNTRY_OPTIONS = Object.values(COUNTRIES).map((c) => ({
+    value: c.code,
+    label: c.name,
+}));
+const OWNER_TYPE_OPTIONS = [
+    { value: "user", label: "User" },
+    { value: "store", label: "Store" },
+];
 const EMPTY = {
     ownerType: "user",
     ownerId: "",
@@ -28,7 +54,7 @@ const EMPTY = {
     city: "",
     state: "",
     postalCode: "",
-    country: "India",
+    country: DEFAULT_COUNTRY,
     isDefault: false,
 };
 export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest }) {
@@ -36,40 +62,36 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     const { showToast } = useToast();
     const [form, setForm] = React.useState(EMPTY);
-    const set = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { isLoading } = useQuery({
         queryKey: ["admin", "address", addressId],
         queryFn: async () => {
             const res = await apiClient.get(ADMIN_ENDPOINTS.ADDRESS_BY_ID(addressId));
-            return (res?.data ?? res);
+            return (res?.data ??
+                res);
         },
         enabled: isEdit,
         select: (data) => {
-            setForm({
-                ownerType: data.ownerType ?? "user",
-                ownerId: data.ownerId ?? "",
-                label: data.label ?? "",
-                fullName: data.fullName ?? "",
-                phone: data.phone ?? "",
-                addressLine1: data.addressLine1 ?? "",
-                addressLine2: data.addressLine2 ?? "",
-                landmark: data.landmark ?? "",
-                city: data.city ?? "",
-                state: data.state ?? "",
-                postalCode: data.postalCode ?? "",
-                country: data.country ?? "India",
-                isDefault: data.isDefault ?? false,
-            });
+            patch({ ...EMPTY, ...data, country: data.country || DEFAULT_COUNTRY });
             return data;
         },
     });
+    const { lookup, isLooking } = usePostalLookup({
+        // Empty fields only — never correct what the admin typed.
+        onResolved: ({ city, state }) => setForm((prev) => ({
+            ...prev,
+            city: prev.city.trim() ? prev.city : city,
+            state: prev.state.trim() ? prev.state : state,
+        })),
+    });
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save address.",
         mutationFn: async () => {
+            const draft = visibleValues(adminAddressCreateSchema, form);
             const payload = {
-                ...form,
-                addressLine2: form.addressLine2 || undefined,
-                landmark: form.landmark || undefined,
+                ...draft,
+                addressLine2: draft.addressLine2 || undefined,
+                landmark: draft.landmark || undefined,
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.ADDRESS_BY_ID(addressId), payload);
@@ -77,7 +99,8 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
             return apiClient.post(ADMIN_ENDPOINTS.ADDRESSES, payload);
         },
         onSuccess: (res) => {
-            const id = res?.data?.id ?? res?.id ?? addressId;
+            const created = res?.data?.id;
+            const id = addressId ?? created;
             showToast(isEdit ? "Address updated." : "Address created.", "success");
             if (onSaved && id)
                 onSaved(String(id));
@@ -94,26 +117,45 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
         },
     });
     const isSubmitting = saveMutation.isPending || isLoading;
-    const canSave = form.ownerId &&
-        form.label &&
-        form.fullName &&
-        form.phone &&
-        form.addressLine1 &&
-        form.city &&
-        form.state &&
-        form.postalCode.length === 6;
-    // ── Action sidebar (desktop) ───────────────────────────────────────────────
-    const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Button, { type: "submit", form: "address-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete address" }))] }));
-    // ── Form sections ──────────────────────────────────────────────────────────
-    const formContent = (_jsxs(Form, { schema: adminAddressFormSchema, id: "address-editor-form", onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, spacing: "lg", children: [_jsx(FormErrorSummary, {}), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Ownership" }), _jsxs(Stack, { gap: "md", children: [_jsx(Row, { gap: "lg", children: ["user", "store"].map((type) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, type: "radio", name: "ownerType", value: type, checked: form.ownerType === type, onChange: () => {
-                                                set("ownerType", type);
-                                                set("ownerId", "");
-                                            }, className: "accent-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text)]", transform: "capitalize", children: type })] }, type))) }), _jsx(Input, { label: form.ownerType === "user" ? "User ID" : "Store ID (slug)", value: form.ownerId, onChange: (e) => set("ownerId", e.target.value), required: true, placeholder: form.ownerType === "user" ? "user-mohsin-c" : "store-pokemon-palace", helperText: form.ownerType === "user"
-                                    ? "Firebase Auth UID or user slug"
-                                    : "Store slug (e.g. store-pokemon-palace)" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Contact & Location" }), _jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Label", value: form.label, onChange: (e) => set("label", e.target.value), required: true, placeholder: "Home / Office / Pickup" }), _jsx(Input, { label: "Full Name", value: form.fullName, onChange: (e) => set("fullName", e.target.value), required: true, placeholder: "Recipient name (PII)" })] }), _jsx(Input, { label: "Phone", value: form.phone, onChange: (e) => set("phone", e.target.value), required: true, type: "tel", placeholder: "+91 9876543210 (PII)" }), _jsx(Input, { label: "Address Line 1", value: form.addressLine1, onChange: (e) => set("addressLine1", e.target.value), required: true, placeholder: "House/flat no., street (PII)" }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Address Line 2", value: form.addressLine2 ?? "", onChange: (e) => set("addressLine2", e.target.value), placeholder: "Area, locality (optional)" }), _jsx(Input, { label: "Landmark", value: form.landmark ?? "", onChange: (e) => set("landmark", e.target.value), placeholder: "Near hospital, etc. (optional)" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-3", children: [_jsx(Input, { label: "City", value: form.city, onChange: (e) => set("city", e.target.value), required: true, placeholder: "Mumbai" }), _jsx(Select, { label: "State", value: form.state, onValueChange: (val) => set("state", val), options: STATE_OPTIONS, placeholder: "Select state", required: true }), _jsx(Input, { label: "Postal Code", value: form.postalCode, onChange: (e) => set("postalCode", e.target.value), required: true, placeholder: "400001", maxLength: 6 })] }), _jsx(Input, { label: "Country", value: form.country, onChange: (e) => set("country", e.target.value), placeholder: "India" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Flags" }), _jsx(Toggle, { label: "Set as default address", checked: form.isDefault, onChange: (v) => set("isDefault", v) })] }), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete address" }))] })] }, "address-form"));
-    const twoPanel = (_jsxs(Div, { layout: "grid", gap: "6", lgAlign: "start", className: "lg:grid-cols-[1fr_280px]", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-[var(--appkit-space-0)]", children: formContent }), _jsx(Show, { above: "lg", children: _jsx(StickyToolbar, { offset: "header", tone: "default", border: false, padding: "none", children: actionSidebar }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Address" : "New Address", sections: [twoPanel] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this address?", message: "This address will be permanently removed. This action cannot be undone.", confirmText: "Delete address", variant: "danger" })] }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminAddressCreateSchema, {
+        options: { ownerType: OWNER_TYPE_OPTIONS, country: COUNTRY_OPTIONS },
+        renderers: {
+            /*
+             * The id's LABEL depends on the owner type, which a generated field
+             * cannot know — and switching type clears it, because a user slug is
+             * not a store slug and carrying it over produces an address attached
+             * to nothing.
+             */
+            ownerId: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "ownerId", required: true, label: values.ownerType === "user" ? "User ID" : "Store ID (slug)", hint: values.ownerType === "user"
+                    ? "Firebase Auth UID or user slug"
+                    : "Store slug, e.g. store-beyblade-arena", placeholder: values.ownerType === "user" ? "user-mohsin-c" : "store-beyblade-arena", value: values.ownerId, error: errors.ownerId, onChange: (v) => onChange({ ownerId: v }) })),
+            state: ({ values, onChange, errors }) => (_jsx(AddressLocationFields, { country: values.country, state: values.state, postalCode: values.postalCode, errors: errors, isLooking: isLooking, onChange: onChange, onPostalSettled: lookup })),
+            postalCode: () => null,
+            country: () => null,
+        },
+    }), [isLooking, lookup]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:address-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(adminAddressCreateSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const handleSubmit = () => {
+        clearErrors();
+        const parsed = adminAddressCreateSchema.safeParse(visibleValues(adminAddressCreateSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit address" : "New address", sections: [
+            _jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: adminAddressCreateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address", destructiveAction: isEdit
+                                    ? {
+                                        label: "Delete address",
+                                        onClick: () => setDeleteOpen(true),
+                                        disabled: deleteMutation.isPending,
+                                    }
+                                    : undefined })] }), deleteOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete this address?", message: "This removes the address permanently. Orders already shipped to it keep their own copy.", onConfirm: () => deleteMutation.mutate(), onClose: () => setDeleteOpen(false), isDeleting: deleteMutation.isPending }))] }, "address-form"),
+        ] }));
 }

package/dist/features/admin/components/AdminBrandEditorView.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Create or edit a brand.
+ *
+ * Fields come from `brandFormSchema`, which used to be declared locally in this
+ * file, unannotated, and — the part that mattered — never executed: the submit
+ * handler checked `name.trim()` and called the mutation. So `website`'s URL rule
+ * had never rejected anything, and the raw `<Input>`s it would have reported on
+ * carry no `name`, which means `applyZodIssues` had nowhere to put an error even
+ * if the parse had run. Both halves are fixed by deriving the form from the
+ * schema: every field is a `Field*` with a name, and the parse gates the save.
+ *
+ * The submit button is no longer `disabled={!name}`. A disabled control with no
+ * explanation cannot tell the admin which field it is waiting on; the schema now
+ * says so, on the field.
+ */
 import React from "react";
 import type { StackedViewShellProps } from "../../../ui";
 export interface AdminBrandEditorViewProps extends Omit<StackedViewShellProps, "sections"> {

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

@@ -1,57 +1,70 @@
 "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";
+/**
+ * Create or edit a brand.
+ *
+ * Fields come from `brandFormSchema`, which used to be declared locally in this
+ * file, unannotated, and — the part that mattered — never executed: the submit
+ * handler checked `name.trim()` and called the mutation. So `website`'s URL rule
+ * had never rejected anything, and the raw `<Input>`s it would have reported on
+ * carry no `name`, which means `applyZodIssues` had nowhere to put an error even
+ * if the parse had run. Both halves are fixed by deriving the form from the
+ * schema: every field is a `Field*` with a name, and the parse gates the save.
+ *
+ * The submit button is no longer `disabled={!name}`. A disabled control with no
+ * explanation cannot tell the admin which field it is waiting on; the schema now
+ * says so, on the field.
+ */
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
-import { mediaUrlSchema } from "../../../validation/schemas";
-import { Button, ConfirmDeleteModal, Div, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
-import { ImageUpload } from "../../media/upload/ImageUpload";
-import { useMediaUpload } from "../../media";
-import { apiClient } from "../../../http";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-const brandFormSchema = z.object({
-    name: z.string().min(1, "Brand name is required").max(120),
-    slug: z.string().regex(/^[a-z0-9-]+$/i).optional().or(z.literal("")),
-    description: z.string().max(2000).optional().or(z.literal("")),
-    logoURL: mediaUrlSchema.optional().or(z.literal("")),
-    website: z.string().url().optional().or(z.literal("")),
-    country: z.string().max(80).optional().or(z.literal("")),
-    founded: z.number().int().min(1800).max(new Date().getFullYear()).optional(),
-    isActive: z.boolean(),
-    displayOrder: z.number().int().min(0).optional(),
-});
-const __P = {
-    p4: "p-[var(--appkit-space-4)]",
-};
-const __O = {
-    yAuto: "overflow-y-auto",
+import { apiClient } from "../../../http";
+import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { buildSectionsFromSchema } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
+import { useMediaUpload } from "../../media";
+import { ImageUpload } from "../../media/upload/ImageUpload";
+import { brandFormSchema } from "../schemas/admin-editor-forms";
+const __P = { p4: "p-[var(--appkit-space-4)]" };
+const __O = { yAuto: "overflow-y-auto" };
+const EMPTY = {
+    name: "",
+    slug: "",
+    description: "",
+    logoURL: "",
+    website: "",
+    country: "",
+    founded: "",
+    isActive: true,
+    displayOrder: "",
 };
 function toBrandSlug(str) {
-    const base = str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    const base = str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
     return base.startsWith("brand-") ? base : `brand-${base}`;
 }
+/** `""` means "not set" — `Number("")` is 0, which is a real display order. */
+function optionalNumber(raw) {
+    return raw.trim() === "" ? undefined : Number(raw);
+}
 export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(brandId);
-    const [name, setName] = React.useState("");
-    const [slug, setSlug] = React.useState("");
-    const [slugManual, setSlugManual] = React.useState(false);
-    const [description, setDescription] = React.useState("");
-    const [logoURL, setLogoURL] = React.useState("");
-    const [website, setWebsite] = React.useState("");
-    const [country, setCountry] = React.useState("");
-    const [founded, setFounded] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    const [displayOrder, setDisplayOrder] = React.useState("");
+    const [form, setForm] = React.useState(EMPTY);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
     const { showToast } = useToast();
+    const { upload } = useMediaUpload();
     const brandQuery = useQuery({
         queryKey: ["admin", "brand", brandId],
         queryFn: async () => {
-            const res = await apiClient.get(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId));
-            return res?.data ?? res;
+            const res = (await apiClient.get(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId)));
+            return (res?.data ?? res);
         },
         enabled: isEdit,
     });
@@ -59,39 +72,49 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
         const brand = brandQuery.data;
         if (!brand)
             return;
-        setName(brand.name ?? "");
-        setSlug(brand.slug ?? "");
-        setSlugManual(true);
-        setDescription(brand.description ?? "");
-        setLogoURL(brand.logoURL ?? "");
-        setWebsite(brand.website ?? "");
-        setCountry(brand.country ?? "");
-        setFounded(brand.founded !== undefined ? String(brand.founded) : "");
-        setIsActive(brand.isActive ?? true);
-        setDisplayOrder(brand.displayOrder !== undefined ? String(brand.displayOrder) : "");
+        setForm({
+            name: brand.name ?? "",
+            slug: brand.slug ?? "",
+            description: brand.description ?? "",
+            logoURL: brand.logoURL ?? "",
+            website: brand.website ?? "",
+            country: brand.country ?? "",
+            founded: brand.founded !== undefined ? String(brand.founded) : "",
+            isActive: brand.isActive ?? true,
+            displayOrder: brand.displayOrder !== undefined ? String(brand.displayOrder) : "",
+        });
     }, [brandQuery.data]);
-    const handleNameChange = (value) => {
-        setName(value);
-        if (!slugManual)
-            setSlug(toBrandSlug(value));
-    };
+    const sections = React.useMemo(() => buildSectionsFromSchema(brandFormSchema, {
+        renderers: {
+            logoURL: ({ values, onChange }) => (_jsx(ImageUpload, { label: "Cover image", currentImage: values.logoURL, onUpload: (file) => upload(file, "brands", true, {
+                    type: "brand-logo",
+                    brand: values.name || values.slug,
+                }), onChange: (url) => onChange({ logoURL: url }) })),
+        },
+    }), [upload]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:brand-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(brandFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save brand.",
         mutationFn: async () => {
             const payload = {
-                name,
-                slug: slug || toBrandSlug(name),
-                description: description || undefined,
-                logoURL: logoURL || undefined,
-                website: website || undefined,
-                country: country || undefined,
-                founded: founded !== "" ? Number(founded) : undefined,
-                isActive,
-                displayOrder: displayOrder !== "" ? Number(displayOrder) : undefined,
+                name: form.name,
+                // Create-only: an existing brand keeps the slug its links resolve on.
+                slug: isEdit ? form.slug : toBrandSlug(form.name),
+                description: form.description || undefined,
+                logoURL: form.logoURL || undefined,
+                website: form.website || undefined,
+                country: form.country || undefined,
+                founded: optionalNumber(form.founded),
+                isActive: form.isActive,
+                displayOrder: optionalNumber(form.displayOrder),
             };
-            if (isEdit) {
+            if (isEdit)
                 return apiClient.put(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId), payload);
-            }
             return apiClient.post(ADMIN_ENDPOINTS.BRANDS, payload);
         },
         onSuccess: (res) => {
@@ -110,19 +133,32 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
                 onDeleted();
         },
     });
-    const { upload } = useMediaUpload();
-    const isSubmitting = saveMutation.isPending || brandQuery.isLoading;
-    const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: brandFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                        setSlug(e.target.value);
-                                        setSlugManual(true);
-                                    }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Country of origin", value: country, onChange: (e) => setCountry(e.target.value), placeholder: "e.g. Japan" }), _jsx(Input, { label: "Founded year", value: founded, onChange: (e) => setFounded(e.target.value), type: "number", min: 1800, max: new Date().getFullYear(), placeholder: "e.g. 1999" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
-                                        clearErrors();
-                                        if (!name.trim()) {
-                                            setFieldError("name", "Brand name is required");
-                                            return;
-                                        }
-                                        saveMutation.mutate();
-                                    }, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", onClick: () => setDeleteConfirmOpen(true), children: "Delete brand" }))] })] })) }, "brand-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Brand", message: "Delete this brand? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = brandFormSchema.safeParse({
+            ...form,
+            slug: isEdit ? form.slug : toBrandSlug(form.name),
+            founded: optionalNumber(form.founded),
+            displayOrder: optionalNumber(form.displayOrder),
+        });
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    // The live slug preview tracks the name until the brand exists.
+    React.useEffect(() => {
+        if (isEdit)
+            return;
+        setForm((prev) => ({ ...prev, slug: prev.name ? toBrandSlug(prev.name) : "" }));
+    }, [form.name, isEdit]);
+    const formSection = (_jsxs(_Fragment, { children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: (partial) => setForm((prev) => Object.assign({}, prev, partial)), onSubmit: onSubmit, schema: brandFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending || brandQuery.isLoading, submitLabel: isEdit ? "Save changes" : "Create brand", destructiveAction: isEdit
+                            ? { label: "Delete brand", onClick: () => setDeleteConfirmOpen(true) }
+                            : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Brand", message: "Delete this brand? This cannot be undone.", onConfirm: () => {
+                    deleteMutation.mutate();
+                    setDeleteConfirmOpen(false);
+                }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }

package/dist/features/admin/components/AdminBundleEditorView.d.ts

@@ -1,17 +1,25 @@
 /**
- * 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 from "react";
-export interface AdminBundleEditorViewProps {
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminBundleEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
     /** When set, the form loads an existing bundle; otherwise it runs as "new". */
     bundleId?: string;
     /** Called after a successful create with the new bundle id. */
@@ -25,5 +33,7 @@ export interface AdminBundleEditorViewProps {
      * products.
      */
     scope?: "admin" | "store";
+    /** Render bare, for a drawer that supplies its own chrome. */
+    embedded?: boolean;
 }
-export declare function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope, }: AdminBundleEditorViewProps): React.JSX.Element;
+export declare function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope, embedded, ...rest }: AdminBundleEditorViewProps): React.JSX.Element;