@mohasinac/appkit 4.19.0 → 4.21.0

package/dist/_internal/server/features/reviews/actions.js

@@ -13,7 +13,7 @@ export async function createReviewAction(input) {
         if (!parsed.success) {
             throw new ValidationError(parsed.error.issues[0]?.message ?? "Invalid input");
         }
-        const { productId, storeId, rating, title, body, images } = parsed.data;
+        const { productId, storeId, rating, title, comment, images } = parsed.data;
         await assertNotDuplicateReview(productId, user.uid);
         const product = await productRepository.findById(productId);
         const profile = await userRepository.findById(user.uid);
@@ -27,7 +27,9 @@ export async function createReviewAction(input) {
             userAvatar: profile?.photoURL ?? "",
             rating,
             title,
-            comment: body,
+            // Was `comment: body` — the schema called the field `body` and this
+            // line translated it. Both now use the document's own name.
+            comment,
             images: images ?? [],
             verified: false,
             status: "pending",

package/dist/_internal/shared/features/reviews/schema.d.ts

@@ -4,23 +4,23 @@ export declare const createReviewSchema: z.ZodObject<{
     storeId: z.ZodString;
     rating: z.ZodNumber;
     title: z.ZodString;
-    body: z.ZodString;
+    comment: z.ZodString;
     images: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
     orderId: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    body: string;
     storeId: string;
     rating: number;
     images: string[];
     productId: string;
+    comment: string;
     orderId?: string | undefined;
 }, {
     title: string;
-    body: string;
     storeId: string;
     rating: number;
     productId: string;
+    comment: string;
     orderId?: string | undefined;
     images?: string[] | undefined;
 }>;

package/dist/_internal/shared/features/reviews/schema.js

@@ -5,7 +5,17 @@ export const createReviewSchema = z.object({
     storeId: z.string().min(1),
     rating: z.number().int().min(REVIEW_MIN_RATING).max(REVIEW_MAX_RATING),
     title: z.string().min(1).max(REVIEW_TITLE_MAX_LENGTH),
-    body: z.string().min(REVIEW_BODY_MIN_LENGTH).max(REVIEW_BODY_MAX_LENGTH),
+    /*
+     * 🛑 This was named `body`. The field is `comment` — on `ReviewDocument`
+     * (schemas/firestore.ts:39), on `CreateReviewActionInput`, and in what
+     * `useCreateReview` actually sends. So this schema disagreed with the
+     * document, the action AND the client, and would have rejected every real
+     * submission the moment anything used it to validate one.
+     *
+     * It went unnoticed because `POST /api/reviews` passed `body as any` and
+     * never consulted it.
+     */
+    comment: z.string().min(REVIEW_BODY_MIN_LENGTH).max(REVIEW_BODY_MAX_LENGTH),
     images: z.array(z.string().url()).max(REVIEW_IMAGES_MAX).default([]),
     orderId: z.string().optional(),
 });

package/dist/features/seller/components/SellerProductShell.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { z } from "zod";
-import { FormShell, StepForm, StepFormActions, useFormShell } from "../../shell";
+import { FormShell, SectionForm, useSectionFormNav, useFormShell } from "../../shell";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
-import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast, Row } from "../../../ui";
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
 import { QuickProductForm } from "./QuickProductForm";
@@ -153,25 +153,65 @@ function StepLiveItemSettings({ values, onChange, }) {
 function StepPrintMetaSettings({ values, onChange, intro, }) {
     return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: intro }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printSize", label: "Size", type: "text", value: values.printSize ?? "", onChange: (v) => onChange({ printSize: v }), placeholder: "e.g. A4, 12x18 in" }), _jsx(FormField, { name: "printMaterial", label: "Material", type: "text", value: values.printMaterial ?? "", onChange: (v) => onChange({ printMaterial: v }), placeholder: "e.g. Matte photo paper, Vinyl" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printFinish", label: "Finish (optional)", type: "text", value: values.printFinish ?? "", onChange: (v) => onChange({ printFinish: v }), placeholder: "e.g. Glossy, Matte, Holographic" }), _jsx(FormField, { name: "printEditionSize", label: "Edition Size (optional)", type: "number", value: String(values.printEditionSize ?? ""), onChange: (v) => onChange({ printEditionSize: v ? Number(v) : undefined }), placeholder: "Leave blank for an open edition" })] })] }));
 }
-const TYPE_SPECIFIC_STEPS = {
+// ── Type-specific step registry ──────────────────────────────────────────────
+// Replaces the ad-hoc per-type ternary chain that used to pick the wizard step
+// (create mode) / section (edit mode) — one Record lookup instead of a
+// duplicated 5(+)-way chain in each mode.
+/*
+ * Per-section schemas for the product form.
+ *
+ * These replace the `validate: (v) => "message" | null` callbacks each step
+ * used to carry. The rules are unchanged; what changes is where the failure
+ * surfaces. A step-level string could only ever render as one banner above the
+ * whole step — a Zod issue carries a PATH, so the message lands on the field
+ * that caused it and `<FormErrorSummary>` can offer a jump link to it.
+ *
+ * Kept beside the sections rather than folded into `sellerProductSchema`
+ * because they are per-LISTING-TYPE: a starting bid is required for an auction
+ * and meaningless for a sticker sheet, and a single whole-form schema would
+ * have to branch on type for every one of them.
+ */
+const sectionSchemas = {
+    basic: z.object({
+        title: z.string().trim().min(3, "Title must be at least 3 characters"),
+        description: z.string().trim().min(20, "Description must be at least 20 characters"),
+    }).passthrough(),
+    media: z.object({
+        mainImage: z.string().min(1, "A main image is required"),
+    }).passthrough(),
+    auction: z.object({
+        startingBid: z.coerce.number({ invalid_type_error: "Starting bid is required" }).positive("Starting bid must be greater than zero"),
+        auctionEndDate: z.string().min(1, "Auction end date is required"),
+    }).passthrough(),
+    preorder: z.object({
+        preOrderDeliveryDate: z.string().min(1, "Estimated delivery date is required"),
+    }).passthrough(),
+    classified: z.object({
+        classifiedCity: z.string().trim().min(1, "City is required for classified listings"),
+    }).passthrough(),
+    live: z.object({
+        liveSpecies: z.string().trim().min(1, "Species name is required"),
+    }).passthrough(),
+};
+const TYPE_SPECIFIC_SECTIONS = {
     auction: {
         id: "auction",
         label: "Auction Settings",
         render: ({ values, onChange }) => (_jsx(StepAuctionSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.startingBid ? "Starting bid is required" : !v.auctionEndDate ? "Auction end date is required" : null),
+        schema: sectionSchemas.auction,
     },
     "pre-order": {
         id: "preorder",
         label: "Pre-Order",
         sectionHeading: "Pre-Order Settings",
         render: ({ values, onChange }) => (_jsx(StepPreOrderSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.preOrderDeliveryDate ? "Estimated delivery date is required" : null),
+        schema: sectionSchemas.preorder,
     },
     classified: {
         id: "classified",
         label: "Meetup Details",
         render: ({ values, onChange }) => (_jsx(StepClassifiedSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.classifiedCity?.trim() ? "City is required for classified listings" : null),
+        schema: sectionSchemas.classified,
     },
     "digital-code": {
         id: "digitalcode",
@@ -182,7 +222,7 @@ const TYPE_SPECIFIC_STEPS = {
         id: "live",
         label: "Live Item Details",
         render: ({ values, onChange }) => (_jsx(StepLiveItemSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.liveSpecies?.trim() ? "Species name is required" : null),
+        schema: sectionSchemas.live,
     },
     art: {
         id: "printmeta",
@@ -241,13 +281,18 @@ const EDIT_SECTIONS = [
 export function SellerProductShell({ mode, listingType = "standard", initialValues, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCategorySelector, renderBrandSelector, renderAddressSelector, renderTemplateSelector, onSaveAsTemplate, previewSlot, }) {
     const [draft, setDraft] = useState(initialValues ?? { status: "draft", condition: "new" });
     const [formMode, setFormMode] = useState(mode === "create" && listingType === "standard" ? "quick" : "full");
-    const [currentStep, setCurrentStep] = useState(0);
+    /*
+     * Declared here, ABOVE the sections array, because section render callbacks
+     * close over `setFieldError`/`clearErrors`. The nav seam cannot be supplied
+     * yet — it needs the sections — so it is composed in below. That ordering is
+     * why the original `wizardShellCtx` existed; only its contents change.
+     */
+    const { shellCtx: baseShellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
     const [stepError, setStepError] = useState(null);
     const { isDirty, markDirty, markClean } = useFormShell();
     const router = useRouter();
     const { showToast } = useToast();
     const { upload: shellUpload } = useMediaUpload();
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
     const update = useCallback((partial) => {
         setDraft((prev) => {
             const next = { ...prev, ...partial };
@@ -346,63 +391,73 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         }
     }, [draft, onPublish, markClean, clearErrors, setFieldError, showToast]);
     const listingTypeLabel = pluginForMode(listingType).typeLabel;
-    const typeSpecificStep = TYPE_SPECIFIC_STEPS[listingType] ?? null;
-    const steps = [
+    const typeSpecificSection = TYPE_SPECIFIC_SECTIONS[listingType] ?? null;
+    const sections = [
         {
+            id: "basic",
             label: "Basic",
+            required: true,
+            quick: true,
             fields: ["title", "description", "category", "brand", "condition", "tags", "barcodeId"],
             render: ({ values, onChange }) => (_jsx(StepBasic, { values: values, onChange: onChange, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })),
-            validate: (v) => {
-                if (!v.title?.trim() || v.title.trim().length < 3)
-                    return "Title must be at least 3 characters";
-                if (!v.description?.trim() || v.description.trim().length < 20)
-                    return "Description must be at least 20 characters";
-                return null;
-            },
+            schema: sectionSchemas.basic,
         },
         {
+            id: "media",
             label: "Media",
+            keepMounted: true,
             fields: ["mainImage", "images", "video", "video.url", "video.duration", "video.thumbnailUrl", "youtubeId", "externalVideoUrl"],
             render: ({ values, onChange }) => (_jsx(StepMedia, { values: values, onChange: onChange, storeSlug: storeSlug })),
-            validate: (v) => (!v.mainImage ? "A main image is required" : null),
+            schema: sectionSchemas.media,
         },
-        ...(typeSpecificStep ? [typeSpecificStep] : []),
+        ...(typeSpecificSection ? [typeSpecificSection] : []),
         {
+            id: "pricing",
             label: "Pricing",
+            required: true,
+            quick: true,
             fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent", "gstRate", "hsnCode"],
             render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
-            validate: (v) => {
-                if (!v.price)
-                    return "Price is required";
-                if (pluginForMode(listingType).showsStockQuantity &&
-                    (v.stockQuantity === undefined || v.stockQuantity === null)) {
-                    return "Stock quantity is required";
-                }
-                return null;
-            },
+            // Built per render because whether stock is required depends on the
+            // listing type's own plugin — a digital code has no stock to speak of.
+            schema: z
+                .object({
+                price: z.coerce
+                    .number({ invalid_type_error: "Price is required" })
+                    .positive("Price is required"),
+                stockQuantity: pluginForMode(listingType).showsStockQuantity
+                    ? z.coerce.number({ invalid_type_error: "Stock quantity is required" }).int().min(0)
+                    : z.coerce.number().int().min(0).optional(),
+            })
+                .passthrough(),
         },
         {
+            id: "shipping",
             label: "Shipping",
             fields: ["shippingPaidBy", "pickupAddressId", "insurance", "insuranceCost"],
             render: ({ values, onChange }) => (_jsx(StepShipping, { values: values, onChange: onChange, renderAddressSelector: renderAddressSelector })),
         },
         {
+            id: "publish",
             label: "Publish",
             fields: ["seoTitle", "seoDescription", "isOnSale", "status"],
             render: ({ values, onChange }) => (_jsx(StepPublish, { values: values, onChange: onChange })),
         },
     ];
-    // Field-name → owning-step-index map for FormErrorSummary's step
-    // attribution/jump-to-step links (full-wizard create mode only — quick
-    // and edit modes don't have step navigation).
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length, typeSpecificStep]);
+    /*
+     * One nav for BOTH modes. Create used to be a wizard with its own
+     * fieldToStepIndex map and a separately-composed wizardShellCtx, while edit
+     * rendered the same sections as a single page — two layouts over one set of
+     * content, kept in step by hand.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    /** The one context both modes render through. */
+    const shellCtx = useMemo(() => ({
+        ...baseShellCtx,
+        sections: sectionMeta,
+        onGoToSection: goToSection,
+        fieldToSectionIndex,
+    }), [baseShellCtx, sectionMeta, goToSection, fieldToSectionIndex]);
     // Live validation — re-run on every draft change, not just on submit, so
     // FormErrorSummary and inline field errors both stay current as the
     // seller types (per the "even on-change errors must be shown" requirement).
@@ -410,34 +465,15 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [draft, validate]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
-    const handleNext = useCallback(async () => {
-        const step = steps[currentStep];
-        if (step?.validate) {
-            const err = step.validate(draft);
-            if (err) {
-                setStepError(err);
-                return;
-            }
-        }
-        setStepError(null);
-        if (currentStep < steps.length - 1) {
-            setCurrentStep((c) => c + 1);
-        }
-        else {
-            try {
-                await handlePublish();
-            }
-            catch (err) {
-                void normalizeError(err);
-                showToast(err instanceof Error ? err.message : "Something went wrong.", "error");
-            }
-        }
-    }, [currentStep, steps, draft, handlePublish, showToast]);
-    // Step error badges — run each step's validate against current draft
-    const stepValidationErrors = useMemo(() => steps.map((s) => (s.validate ? Boolean(s.validate(draft)) : false)), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [draft]);
+    /*
+     * `handleNext` and `stepValidationErrors` are gone with the wizard.
+     *
+     * The next-gate was the thing SectionForm exists to remove: it ran the
+     * current step's `validate` and REFUSED to advance, so a seller who could
+     * not satisfy step 2 could not reach step 5 to see what else was needed.
+     * Every section is now reachable at any time and the shared submit is what
+     * checks the whole draft.
+     */
     const breadcrumb = mode === "create" ? `Store / ${listingTypeLabel}s / New` : `Store / ${listingTypeLabel}s / Edit`;
     const title = mode === "create"
         ? `New ${listingTypeLabel}`
@@ -452,12 +488,12 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
                     }) }) }) }));
     }
     if (mode === "create") {
-        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void handleNext(), onPrev: currentStep > 0 ? () => setCurrentStep((c) => c - 1) : undefined, completeLabel: `Publish ${listingTypeLabel}`, isLoading: isLoading && currentStep === steps.length - 1, disabled: isLoading }), currentStep === 0 && (_jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }) })), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError })), _jsx(FormShellContext.Provider, { value: wizardShellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsx(FormErrorSummary, {}) }) })] })), children: _jsx(FormShellContext.Provider, { value: wizardShellCtx, children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading, hideActions: true, stepErrors: stepValidationErrors }) }) }));
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "y-sm", children: _jsx(FormErrorSummary, {}) }) }), _jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsxs(Row, { gap: "sm", justify: "between", wrap: true, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }), _jsx(Button, { variant: "primary", onClick: () => void handlePublish(), isLoading: isLoading, disabled: isLoading, children: `Publish ${listingTypeLabel}` })] }) }), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError }))] })), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handlePublish, schema: sellerProductSchema, openIds: openIds, onOpenChange: setOpenIds, isLoading: isLoading, hideActions: true }) }) }));
     }
     // Edit mode — FormShell with section nav + full form
     const editSections = [
         ...EDIT_SECTIONS,
-        ...(typeSpecificStep ? [{ id: typeSpecificStep.id, label: typeSpecificStep.label }] : []),
+        ...(typeSpecificSection ? [{ id: typeSpecificSection.id, label: typeSpecificSection.label }] : []),
     ];
-    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, footerTopSlot: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormErrorSummary, {}) }), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificStep && (_jsxs(Section, { id: typeSpecificStep.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificStep.sectionHeading ?? typeSpecificStep.label }), typeSpecificStep.render({ values: draft, onChange: update, errors: {} })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
+    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, footerTopSlot: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormErrorSummary, {}) }), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificSection && (_jsxs(Section, { id: typeSpecificSection.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificSection.sectionHeading ?? typeSpecificSection.label }), typeSpecificSection.render({ values: draft, onChange: update, errors: {} })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }

package/dist/features/seller/components/SellerShippingView.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import { Alert, Badge, Div, FormField, Heading, Row, Stack, Text } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
-import { StepForm } from "../../shell";
+import { SectionForm, useSectionFormNav } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const shippingDraftSchema = z.object({
@@ -35,12 +35,6 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
-    const [currentStep, setCurrentStep] = useState(0);
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(shippingDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -105,33 +99,42 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
         }
     };
     const busy = loading || saving;
-    const steps = [
+    const sections = [
         {
+            id: "carrier",
             label: "Carrier",
+            required: true,
+            quick: true,
             fields: ["customCarrierName", "customShippingPrice"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Carrier" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Configured" : "Not configured" }) })), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Set a fixed shipping fee and carrier name for all orders. You enter the carrier and tracking number yourself when you ship each order." }), _jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "customCarrierName", label: "Carrier Name", type: "text", value: values.customCarrierName, onChange: (v) => onChange({ customCarrierName: v }), placeholder: "e.g. India Post, DTDC, Delhivery", disabled: busy }), _jsx(FormField, { name: "customShippingPrice", label: "Shipping Price (\u20B9)", type: "number", value: values.customShippingPrice, onChange: (v) => onChange({ customShippingPrice: v }), placeholder: "0 for free shipping", helpText: "Charged to buyer at checkout. Enter 0 for free shipping.", disabled: busy })] })] })),
         },
         {
+            id: "pickup-address",
             label: "Pickup Address",
             fields: ["pickupAddressId"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Pickup Address" }), current?.pickupAddress && (_jsxs(Alert, { variant: "info", children: ["Current pickup: ", current.pickupAddress.locationName ?? "", current.pickupAddress.city ? `, ${current.pickupAddress.city}` : ""] })), _jsx(StoreAddressSelectorCreate, { value: values.pickupAddressId, onChange: (id) => onChange({ pickupAddressId: id }), label: "Pickup Address", disabled: busy })] })),
         },
         {
+            id: "rules",
             label: "Rules",
             fields: ["freeShippingThreshold", "fragileSurcharge"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Rules" }), _jsx(FormField, { name: "freeShippingThreshold", label: "Free Shipping Threshold (\u20B9)", type: "number", value: values.freeShippingThreshold, onChange: (v) => onChange({ freeShippingThreshold: v }), placeholder: "e.g. 500 \u2014 orders above this get free shipping", helpText: "Leave blank or 0 to disable free shipping offers.", disabled: busy }), _jsx(FormField, { name: "fragileSurcharge", label: "Fragile Item Surcharge (\u20B9)", type: "number", value: values.fragileSurcharge, onChange: (v) => onChange({ fragileSurcharge: v }), placeholder: "e.g. 50 \u2014 added for items marked fragile", helpText: "Leave blank or 0 to disable the fragile surcharge.", disabled: busy })] })),
         },
     ];
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    /*
+     * `useSectionFormNav` replaces the hand-rolled fieldToStepIndex map and the
+     * manually-composed wizardShellCtx. The old shape had to be kept in sync by
+     * hand — and `useMemo(..., [steps.length])` meant a step whose FIELDS
+     * changed without changing the COUNT never recomputed its map, so
+     * FormErrorSummary could jump to the wrong step.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(shippingDraftSchema, { sections: sectionMeta, onGoToSection: goToSection, fieldToSectionIndex });
+    useEffect(() => {
+        validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    }, [draft, validate]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-shipping", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: shippingDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
         ] }));
 }

package/dist/features/seller/components/SellerStorefrontView.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import { StackedViewShell } from "../../../ui";
 import { Alert, Div, FormField, FormGroup, Heading, Stack, Text, Toggle, } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { ImageUpload, useMediaUpload } from "../../media";
-import { StepForm, useFormShell } from "../../shell";
+import { SectionForm, useSectionFormNav, useFormShell } from "../../shell";
 // Small local schema for the storefront form-input shape (not the broader
 // `sellerStoreSchema`, which requires id/storeSlug/ownerId/status/createdAt —
 // fields this editable draft never has, so applying it directly would show
@@ -23,14 +23,8 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = false,
     const [draft, setDraft] = useState(initialValues ?? {});
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
-    const [currentStep, setCurrentStep] = useState(0);
     const { markDirty, markClean } = useFormShell();
     const { upload } = useMediaUpload();
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(storefrontDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
     const update = useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
         markDirty();
@@ -54,39 +48,47 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = false,
         }
     };
     const busy = saving || isLoading;
-    const steps = [
+    const sections = [
         {
+            id: "store-identity",
             label: "Store Identity",
+            required: true,
+            quick: true,
             fields: ["storeName", "storeDescription", "storeCategory", "bio"],
-            validate: (values) => !values.storeName?.trim() ? "Store name is required" : null,
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Store Identity" }), _jsx(FormField, { name: "storeName", label: "Store Name", type: "text", value: values.storeName ?? "", onChange: (v) => onChange({ storeName: v }), placeholder: "e.g. Pok\u00E9mon Palace", disabled: busy }), _jsx(FormField, { name: "storeCategory", label: "Store Category", type: "text", value: values.storeCategory ?? "", onChange: (v) => onChange({ storeCategory: v }), placeholder: "e.g. Trading Cards, Action Figures", disabled: busy }), _jsx(FormField, { name: "bio", label: "Short Bio (shown in search results)", type: "textarea", value: values.bio ?? "", onChange: (v) => onChange({ bio: v }), placeholder: "One-liner about your store (max 300 chars)", disabled: busy }), _jsx(FormField, { name: "storeDescription", label: "Full Description", type: "textarea", value: values.storeDescription ?? "", onChange: (v) => onChange({ storeDescription: v }), placeholder: "Detailed store description shown on your public store page\u2026", disabled: busy })] })),
         },
         {
+            id: "branding",
             label: "Branding",
             fields: ["storeLogoURL", "storeBannerURL"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Branding" }), _jsxs(FormGroup, { columns: 2, children: [_jsx(ImageUpload, { label: "Store Logo", currentImage: values.storeLogoURL, onUpload: (file) => upload(file, "stores", true, { type: "store-logo", store: storeSlug }), onChange: (url) => onChange({ storeLogoURL: url }), helperText: "Square image, min 200\u00D7200px" }), _jsx(ImageUpload, { label: "Store Banner", currentImage: values.storeBannerURL, onUpload: (file) => upload(file, "stores", true, { type: "store-banner", store: storeSlug }), onChange: (url) => onChange({ storeBannerURL: url }), helperText: "Recommended: 1200\u00D7300px" })] })] })),
         },
         {
+            id: "policies",
             label: "Policies",
             fields: ["returnPolicy", "shippingPolicy"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Policies" }), _jsx(FormField, { name: "returnPolicy", label: "Return Policy", type: "textarea", value: values.returnPolicy ?? "", onChange: (v) => onChange({ returnPolicy: v }), placeholder: "Describe your return policy\u2026", disabled: busy }), _jsx(FormField, { name: "shippingPolicy", label: "Shipping Policy", type: "textarea", value: values.shippingPolicy ?? "", onChange: (v) => onChange({ shippingPolicy: v }), placeholder: "How and when you ship orders\u2026", disabled: busy })] })),
         },
         {
+            id: "contact-visibility",
             label: "Contact & Visibility",
             fields: ["website", "location", "socialLinks", "isPublic", "isVacationMode", "vacationMessage"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Contact & Social" }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "website", label: "Website", type: "text", value: values.website ?? "", onChange: (v) => onChange({ website: v }), placeholder: "https://example.com", disabled: busy }), _jsx(FormField, { name: "location", label: "Location", type: "text", value: values.location ?? "", onChange: (v) => onChange({ location: v }), placeholder: "e.g. Mumbai, India", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "twitter", label: "Twitter / X URL", type: "text", value: values.socialLinks?.twitter ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, twitter: v } }), placeholder: "https://twitter.com/...", disabled: busy }), _jsx(FormField, { name: "instagram", label: "Instagram URL", type: "text", value: values.socialLinks?.instagram ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, instagram: v } }), placeholder: "https://instagram.com/...", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "facebook", label: "Facebook URL", type: "text", value: values.socialLinks?.facebook ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, facebook: v } }), placeholder: "https://facebook.com/...", disabled: busy }), _jsx(FormField, { name: "linkedin", label: "LinkedIn URL", type: "text", value: values.socialLinks?.linkedin ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, linkedin: v } }), placeholder: "https://linkedin.com/...", disabled: busy })] }), _jsx(Heading, { level: 4, className: "mt-4 mb-2", children: "Visibility" }), _jsx(Toggle, { checked: values.isPublic !== false, onChange: (checked) => onChange({ isPublic: checked }), label: "Make store public \u2014 visible to all buyers", disabled: busy }), values.isPublic === false && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Your store is hidden. Existing orders are unaffected." })), _jsx(Heading, { level: 4, className: "mt-4 mb-2", children: "Vacation Mode" }), _jsx(Toggle, { checked: !!values.isVacationMode, onChange: (checked) => onChange({ isVacationMode: checked }), label: "Enable vacation mode \u2014 your store will show a notice to buyers", disabled: busy }), values.isVacationMode && (_jsx(FormField, { name: "vacationMessage", label: "Vacation Message", type: "textarea", value: values.vacationMessage ?? "", onChange: (v) => onChange({ vacationMessage: v }), placeholder: "I'm away until\u2026 Orders placed now will ship when I return.", disabled: busy }))] })),
         },
     ];
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    /*
+     * `useSectionFormNav` replaces the hand-rolled fieldToStepIndex map and the
+     * manually-composed wizardShellCtx. The old `useMemo(..., [steps.length])`
+     * meant a step whose FIELDS changed without changing the COUNT never
+     * recomputed its map, so the error summary could jump to the wrong step.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(storefrontDraftSchema, { sections: sectionMeta, onGoToSection: goToSection, fieldToSectionIndex });
+    useEffect(() => {
+        validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    }, [draft, validate]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Storefront Settings", sections: [
-            _jsxs(Div, { children: [saved && (_jsx(Alert, { variant: "success", className: "mb-6", children: "Changes saved successfully." })), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-storefront", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Changes", isLoading: busy })] })] }, "stepform"),
+            _jsxs(Div, { children: [saved && (_jsx(Alert, { variant: "success", className: "mb-6", children: "Changes saved successfully." })), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: storefrontDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Storefront", isLoading: busy })] })] }, "stepform"),
         ] }));
 }

package/dist/features/shell/FormShell.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 /**
  * Carries the `schema` prop passed to `<FormShell>` down to any nested
- * `<StepForm>` that doesn't declare its own `schema`/`StepDef.schema` —
+ * `<SectionForm>` that doesn't declare its own `schema`/`SectionDef.schema` —
  * `FormShell` (chrome) has no form values of its own to validate, so it
  * can't run `.safeParse()` itself; this is what makes the prop load-bearing
  * instead of silently discarded.
@@ -18,7 +18,7 @@ export interface FormShellProps {
     breadcrumb?: string;
     isDirty?: boolean;
     isLoading?: boolean;
-    /** Left-nav anchor sections (section mode). Omit when using StepForm inside. */
+    /** Left-nav anchor sections. */
     sections?: FormShellSection[];
     onSaveDraft?: () => void | Promise<void>;
     onPublish?: () => void | Promise<void>;
@@ -52,8 +52,8 @@ export interface FormShellProps {
     /**
      * Zod schema covering the form's fields. `FormShell` has no form values of
      * its own, so it can't `.safeParse()` this directly — instead it provides
-     * the schema via `FormSchemaContext` to any nested `<StepForm>` that
-     * doesn't declare its own `schema`/`StepDef.schema`, so existing
+     * the schema via `FormSchemaContext` to any nested `<SectionForm>` that
+     * doesn't declare its own `schema`/`SectionDef.schema`, so existing
      * `<FormShell schema={x}>` call sites start validating with zero changes.
      * `audit-form-schema` requires every callsite to declare one.
      */

package/dist/features/shell/FormShell.js

@@ -9,7 +9,7 @@ import { FORM_ACTION_META, FORM_ACTION_ID } from "../products/constants/action-d
 import { Div, Row, Span, Stack, Text } from "../../ui";
 /**
  * Carries the `schema` prop passed to `<FormShell>` down to any nested
- * `<StepForm>` that doesn't declare its own `schema`/`StepDef.schema` —
+ * `<SectionForm>` that doesn't declare its own `schema`/`SectionDef.schema` —
  * `FormShell` (chrome) has no form values of its own to validate, so it
  * can't run `.safeParse()` itself; this is what makes the prop load-bearing
  * instead of silently discarded.

package/dist/features/shell/index.d.ts

@@ -4,8 +4,6 @@ export type { CommandPaletteGroup, CommandPaletteProps } from "./CommandPalette"
 export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export type { QuickFieldType, QuickFieldDef, QuickFormDrawerProps } from "./QuickFormDrawer";
 export { QuickFormDrawer } from "./QuickFormDrawer";
-export type { StepDef, StepFormProps, StepFormActionsProps } from "./StepForm";
-export { StepForm, StepFormActions, StepIndicator } from "./StepForm";
 export type { SectionDef, SectionFormProps, UseSectionFormNavResult, } from "./SectionForm";
 export { SectionForm, useSectionFormNav, orderSections, buildFieldToSectionIndex, sectionAnchorId, } from "./SectionForm";
 export type { EntityFormDefinition } from "./entity-form";

package/dist/features/shell/index.js

@@ -1,7 +1,6 @@
 export { FormShell, useFormShell, FormSchemaContext } from "./FormShell";
 export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export { QuickFormDrawer } from "./QuickFormDrawer";
-export { StepForm, StepFormActions, StepIndicator } from "./StepForm";
 export { SectionForm, useSectionFormNav, orderSections, buildFieldToSectionIndex, sectionAnchorId, } from "./SectionForm";
 export { deriveQuickFields, deriveQuickFieldNames, allDefinitionFields, applyDerive, assertNoDeriveCollision, humaniseFieldName, } from "./entity-form";
 export { ui, annotate, ROW_COLUMNS, inferFieldUiMeta, resolveFieldUiMeta, unwrapSchema, schemaEnumOptions, schemaIsOptional, objectShape, } from "./field-ui-meta";

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -3083,6 +3083,30 @@ const rawTesterChecklistItems = [
                     description: "Both PATCH routes previously spread the raw request body into Firestore with no schema, so any key and any status string could be written. Confirm the normal Take / Action / Dismiss and Approve / Reject flows still all work — that is what the tightening must not have broken.",
                     href: "/admin/reports",
                 },
+                {
+                    key: "listing-form-every-section-reachable",
+                    label: "Creating a listing shows ALL sections at once — you can open Pricing before finishing Basic, and nothing blocks you",
+                    description: "The last step wizard was removed 2026-08-26. It gated Next on the current step's validate, so a seller who could not satisfy step 2 could not reach step 5 to find out what else was needed. Open /store/products/new, expand a later section immediately, and confirm it opens. The required section (Basic) stays open and cannot be collapsed.",
+                    href: "/store/products/new",
+                },
+                {
+                    key: "listing-form-errors-land-on-fields",
+                    label: "Publishing an incomplete listing puts each error on ITS OWN FIELD, and the summary links jump to that section",
+                    description: "The per-step validate callbacks returned a single string rendered as one banner over the whole step. They are per-section Zod schemas now, so a missing auction start bid reports on the start-bid field. Press Publish with several sections incomplete and confirm each message appears beside its input, and that clicking an entry in the summary opens the right section.",
+                    href: "/store/products/new",
+                },
+                {
+                    key: "listing-form-save-draft-anywhere",
+                    label: "\"Save as draft & finish later\" is available from any section, not only the first",
+                    description: "It used to be gated on `currentStep === 0`, which was a wizard artefact — a draft is a draft whichever section you are looking at. Fill in a title, scroll to a later section, and confirm the button is still there and still saves.",
+                    href: "/store/products/new",
+                },
+                {
+                    key: "seller-shipping-storefront-sections",
+                    label: "Shipping Configuration and Storefront Settings are collapsible sections with one Save at the bottom — no Next/Back",
+                    description: "Both were 3- and 4-step wizards until 2026-08-26. Check that every section is reachable immediately, that the error summary jumps to the right one, and that a single Save covers whichever sections you edited.",
+                    href: "/store/shipping",
+                },
                 {
                     key: "admin-tables-render-badges-not-text",
                     label: "Admin list tables show a coloured STATUS BADGE, a thumbnail and formatted money — not raw text",

package/dist/index.d.ts

@@ -3203,8 +3203,6 @@ export { CommandPalette, useCommandPaletteHotkey } from "./features/shell/index"
 export type { CommandPaletteGroup, CommandPaletteProps } from "./features/shell/index";
 export { QuickFormDrawer } from "./features/shell/index";
 export type { QuickFieldType, QuickFieldDef, QuickFormDrawerProps } from "./features/shell/index";
-export { StepForm, StepFormActions, StepIndicator } from "./features/shell/index";
-export type { StepDef, StepFormProps, StepFormActionsProps } from "./features/shell/index";
 export { SectionForm, useSectionFormNav, orderSections, buildFieldToSectionIndex, sectionAnchorId, } from "./features/shell/index";
 export type { SectionDef, SectionFormProps, UseSectionFormNavResult } from "./features/shell/index";
 export { deriveQuickFields, deriveQuickFieldNames, allDefinitionFields, applyDerive, assertNoDeriveCollision, humaniseFieldName, } from "./features/shell/index";
@@ -3294,3 +3292,5 @@ export { adminOrderUpdateSchema, employeeInviteSchema, hardBanReasonSchema, feat
 export { changeEmailSchema } from "./features/account/schemas/index";
 export { adminUserUpdateSchema, whatsappSettingsSchema, lotteryPullSchema, } from "./features/admin/schemas/admin-user-form";
 export { siteSettingsFormSchema } from "./features/admin/schemas/site-settings-form";
+export { createReviewSchema as reviewSubmitSchema } from "./_internal/shared/features/reviews/schema";
+export { wishlistAddSchema } from "./schemas/api-routes";

package/dist/index.js

@@ -5608,9 +5608,8 @@ export { FormShell, useFormShell } from "./features/shell/index";
 export { CommandPalette, useCommandPaletteHotkey } from "./features/shell/index";
 // [CLIENT] QuickFormDrawer â€" 40% desktop / 100% mobile auto-rendered field drawer.
 export { QuickFormDrawer } from "./features/shell/index";
-// [CLIENT] StepForm â€" multi-step wizard with step indicator, prev/next, localStorage persistence.
-export { StepForm, StepFormActions, StepIndicator } from "./features/shell/index";
-// [CLIENT] SectionForm — collapsible-section form engine replacing StepForm.
+// [CLIENT] SectionForm — collapsible-section form engine. Replaced StepForm,
+// which was deleted 2026-08-26.
 // Required section first and always open, one shared submit at the bottom, no
 // per-section gate blocking a later section.
 export { SectionForm, useSectionFormNav, orderSections, buildFieldToSectionIndex, sectionAnchorId, } from "./features/shell/index";
@@ -5703,3 +5702,12 @@ export { adminOrderUpdateSchema, employeeInviteSchema, hardBanReasonSchema, feat
 export { changeEmailSchema } from "./features/account/schemas/index";
 export { adminUserUpdateSchema, whatsappSettingsSchema, lotteryPullSchema, } from "./features/admin/schemas/admin-user-form";
 export { siteSettingsFormSchema } from "./features/admin/schemas/site-settings-form";
+/*
+ * Two schemas that existed and whose own routes did not use them.
+ * `postApiWishlist` had sat in SCHEMAS.api since the registry was seeded while
+ * `/api/wishlist` read its body raw; `createReviewSchema` was reachable only
+ * through a server action while `POST /api/reviews` passed `body as any`.
+ * Re-exported here under names that read clearly at a route call site.
+ */
+export { createReviewSchema as reviewSubmitSchema } from "./_internal/shared/features/reviews/schema";
+export { wishlistAddSchema } from "./schemas/api-routes";

package/dist/schemas/api-routes.d.ts

@@ -1,4 +1,13 @@
+import { z } from "zod";
 import type { ApiRouteSchema } from "./types";
+/** The body shape, named so a route can import it directly. */
+export declare const wishlistAddSchema: z.ZodObject<{
+    productId: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    productId: string;
+}, {
+    productId: string;
+}>;
 export declare const postApiWishlist: ApiRouteSchema;
 export declare const postApiAuthSession: ApiRouteSchema;
 export declare const postApiAdminProductsIdGroup: ApiRouteSchema;

package/dist/schemas/api-routes.js

@@ -16,10 +16,12 @@
 // as the highest unknown-leakage offenders). W5–W7 will register the rest.
 import { z } from "zod";
 // ── POST /api/wishlist ────────────────────────────────────────────────────────
+/** The body shape, named so a route can import it directly. */
+export const wishlistAddSchema = z.object({
+    productId: z.string().min(1),
+});
 export const postApiWishlist = {
-    body: z.object({
-        productId: z.string().min(1),
-    }),
+    body: wishlistAddSchema,
 };
 // ── POST /api/auth/session ───────────────────────────────────────────────────
 export const postApiAuthSession = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.19.0",
+  "version": "4.21.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"