@mohasinac/appkit 4.9.5 → 4.11.0

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

@@ -4,7 +4,7 @@ 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 { FormShellProvider } from "../../../ui/forms";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast } from "../../../ui";
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
@@ -25,6 +25,18 @@ const BUNDLE_PLUGIN_FALLBACK = {
 function pluginForMode(mode) {
     return mode === "bundle" ? BUNDLE_PLUGIN_FALLBACK : pluginFor(mode);
 }
+// Video duration is required for a directly-uploaded file (captured
+// automatically off the video element — see video-poster.ts) but can't be
+// obtained client-side for a YouTube/External-URL-sourced video without a
+// server round-trip, so it's optional for those two sources only.
+const productVideoSchema = z.object({
+    url: z.string().min(1),
+    type: z.literal("video").optional(),
+    thumbnailUrl: z.string().optional(),
+    source: z.enum(["upload", "youtube", "external"]).optional(),
+    youtubeId: z.string().optional(),
+    duration: z.number().positive().max(600).optional(),
+}).refine((v) => v.source === "youtube" || v.source === "external" || (v.duration != null && v.duration > 0), { message: "Video duration could not be detected — try re-uploading the file.", path: ["duration"] });
 const sellerProductSchema = z.object({
     title: z.string().min(1, "Product title is required").max(200),
     description: z.string().max(10000).optional().or(z.literal("")),
@@ -32,6 +44,8 @@ const sellerProductSchema = z.object({
     category: z.string().optional(),
     brand: z.string().optional(),
     isActive: z.boolean().optional(),
+    images: z.array(z.string()).max(5, "Up to 5 gallery images allowed").optional(),
+    video: productVideoSchema.optional(),
 }).passthrough();
 const CONDITION_OPTIONS = [
     { value: "new", label: "New" },
@@ -70,7 +84,7 @@ function StepMedia({ values, onChange, storeSlug = "store", }) {
                     name: values.title ?? "product",
                     store: storeSlug,
                     category: values.category ?? "uncategorized",
-                }), onChange: (url) => onChange({ mainImage: url }), label: "Main Image", helperText: "Recommended: 800\u00D7800px square (JPG, PNG, WebP \u2014 max 10 MB)", enableAdvancedCrop: true, cropAspectRatio: 1 }), _jsx(MediaUploadList, { label: "Gallery Images (up to 10)", value: galleryFields, onChange: (fields) => onChange({ images: fields.map((f) => f.url) }), onUpload: (file) => {
+                }), onChange: (url) => onChange({ mainImage: url }), label: "Main Image", helperText: "Recommended: 800\u00D7800px square (JPG, PNG, WebP \u2014 max 10 MB)", enableAdvancedCrop: true, cropAspectRatio: 1 }), _jsx(MediaUploadList, { label: "Gallery Images (up to 5)", value: galleryFields, onChange: (fields) => onChange({ images: fields.map((f) => f.url) }), onUpload: (file) => {
                     idxRef.current += 1;
                     return upload(file, "products", true, {
                         type: "product-image",
@@ -79,7 +93,11 @@ function StepMedia({ values, onChange, storeSlug = "store", }) {
                         store: storeSlug,
                         category: values.category ?? "uncategorized",
                     });
-                }, accept: "image/*,video/*", maxItems: 10, maxSizeMB: 10, helperText: "Show multiple angles, grading details, or box contents." }), _jsx(MediaUploadField, { label: "Product Video (optional)", value: values.video ?? "", onChange: (url) => onChange({ video: url }), onUpload: (file) => upload(file, "products", true, {
+                }, accept: "image/*,video/*", maxItems: 5, maxSizeMB: 10, helperText: "Show multiple angles, grading details, or box contents." }), _jsx(MediaUploadField, { label: "Product Video (optional)", value: values.video?.url ?? "", onChange: (url) => onChange({
+                    video: url
+                        ? { ...(values.video ?? { type: "video", source: "upload" }), url }
+                        : undefined,
+                }), onChangeField: (media) => onChange({ video: media ?? undefined }), onThumbnailChange: (thumbnailUrl) => onChange({ video: values.video ? { ...values.video, thumbnailUrl } : undefined }), onDurationChange: (duration) => onChange({ video: values.video ? { ...values.video, duration } : undefined }), onUpload: (file) => upload(file, "products", true, {
                     type: "product-video",
                     name: values.title ?? "product",
                     store: storeSlug,
@@ -87,7 +105,7 @@ function StepMedia({ values, onChange, storeSlug = "store", }) {
 }
 // ── Step 3: Auction Settings ───────────────────────────────────────────────
 function StepAuctionSettings({ values, onChange, }) {
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "Prices are in Indian Rupees (\u20B9). Enter the rupee value \u2014 no paise." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: "Starting Bid (\u20B9)", type: "number", value: toRupeesString(values.startingBid), onChange: (v) => onChange({ startingBid: fromRupeesString(v) }), placeholder: "100" }), _jsx(FormField, { name: "auctionEndDate", label: "Auction End Date & Time", type: "datetime-local", value: values.auctionEndDate ?? "", onChange: (v) => onChange({ auctionEndDate: v }) })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: "Reserve Price (\u20B9, optional)", type: "number", value: toRupeesString(values.reservePrice), onChange: (v) => onChange({ reservePrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Minimum price below which you won't sell" }), _jsx(FormField, { name: "buyNowPrice", label: "Buy Now Price (\u20B9, optional)", type: "number", value: toRupeesString(values.buyNowPrice), onChange: (v) => onChange({ buyNowPrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Allows instant purchase before auction ends" })] }), _jsx(FormField, { name: "minBidIncrement", label: "Minimum Bid Increment (\u20B9)", type: "number", value: toRupeesString(values.minBidIncrement), onChange: (v) => onChange({ minBidIncrement: fromRupeesString(v) }), placeholder: "50" }), _jsx(FormField, { name: "auctionShippingPaidBy", label: "Shipping paid by", type: "select", value: values.auctionShippingPaidBy ?? "winner", onChange: (v) => onChange({ auctionShippingPaidBy: v }), options: [
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "Prices are in Indian Rupees (\u20B9). Enter the rupee value \u2014 no paise." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: "Starting Bid (\u20B9)", type: "number", value: toRupeesString(values.startingBid), onChange: (v) => onChange({ startingBid: fromRupeesString(v) }), placeholder: "100" }), _jsx(FormField, { name: "auctionEndDate", label: "Auction End Date & Time", type: "datetime-local", value: values.auctionEndDate ?? "", onChange: (v) => onChange({ auctionEndDate: v }) })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: "Reserve Price (\u20B9, optional)", type: "number", value: toRupeesString(values.reservePrice), onChange: (v) => onChange({ reservePrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Minimum price below which you won't sell" }), _jsx(FormField, { name: "buyNowPrice", label: "Buy Now Price (\u20B9, optional)", type: "number", value: toRupeesString(values.buyNowPrice), onChange: (v) => onChange({ buyNowPrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Allows instant purchase before auction ends" })] }), _jsx(FormField, { name: "minBidIncrement", label: "Minimum Bid Increment (\u20B9)", type: "number", value: toRupeesString(values.minBidIncrement), onChange: (v) => onChange({ minBidIncrement: fromRupeesString(v) }), placeholder: "50", helpText: "Optional \u2014 can only raise the platform's tiered minimum for this listing, never lower it. Leave blank to use the tier as-is." }), _jsx(FormField, { name: "auctionShippingPaidBy", label: "Shipping paid by", type: "select", value: values.auctionShippingPaidBy ?? "winner", onChange: (v) => onChange({ auctionShippingPaidBy: v }), options: [
                     { value: "winner", label: "Winner pays shipping" },
                     { value: "seller", label: "Seller includes shipping" },
                 ] }), _jsx(Toggle, { checked: !!values.autoExtendable, onChange: (checked) => onChange({ autoExtendable: checked }), label: "Auto-extend auction if bid placed in final minutes" }), values.autoExtendable && (_jsx(FormField, { name: "auctionExtensionMinutes", label: "Extension period (minutes)", type: "number", value: String(values.auctionExtensionMinutes ?? 5), onChange: (v) => onChange({ auctionExtensionMinutes: Number(v) || 5 }), placeholder: "5" }))] }));
@@ -223,25 +241,7 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
     const router = useRouter();
     const { showToast } = useToast();
     const { upload: shellUpload } = useMediaUpload();
-    // Auto-save in create mode — debounce 2s on any draft change
-    const autoSaveTimer = useRef(null);
-    const draftRef = useRef(draft);
-    draftRef.current = draft;
-    const onSaveRef = useRef(onSave);
-    onSaveRef.current = onSave;
-    useEffect(() => {
-        if (mode !== "create" || !isDirty)
-            return;
-        if (autoSaveTimer.current)
-            clearTimeout(autoSaveTimer.current);
-        autoSaveTimer.current = setTimeout(() => {
-            const result = onSaveRef.current(draftRef.current);
-            if (result && typeof result.catch === "function")
-                result.catch(console.error);
-        }, 2000);
-        return () => { if (autoSaveTimer.current)
-            clearTimeout(autoSaveTimer.current); };
-    }, [draft, isDirty, mode]);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
     const update = useCallback((partial) => {
         setDraft((prev) => {
             const next = { ...prev, ...partial };
@@ -275,22 +275,35 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
             router.back();
     }, [onDiscard, router]);
     // `silent` suppresses the success toast — used by the debounced auto-save
-    // path (FormShellProvider's onSaveDraft) so it doesn't pop a "Saved." toast
-    // every couple of seconds while the seller is still typing. The manual
-    // "Save Draft"/"Save Changes" button click stays loud (silent=false).
+    // effect above so it doesn't pop a "Saved." toast every couple of seconds
+    // while the seller is still typing. The manual "Save Draft"/"Save Changes"
+    // button click stays loud (silent=false).
+    //
+    // `onSave`/`onPublish` never throw in normal operation (backed by
+    // `wrapAction`-wrapped server actions, which always resolve to a
+    // `{ok, ...}` envelope) — the try/catch here is a defensive fallback for
+    // a genuinely unexpected rejection (e.g. a network failure during the RSC
+    // round-trip itself), not the primary error path.
     const handleSave = useCallback(async (silent = false) => {
         try {
-            await onSave(draft);
-            markClean();
+            const result = await onSave(draft);
+            if (result.ok) {
+                markClean();
+                clearErrors();
+                if (!silent)
+                    showToast("Saved.", "success");
+                return;
+            }
+            applyZodIssues(result.issues ?? [], setFieldError);
             if (!silent)
-                showToast("Saved.", "success");
+                showToast(result.error || "Fix the highlighted errors and try again.", "error");
         }
         catch (err) {
             void normalizeError(err);
             if (!silent)
                 showToast(err instanceof Error ? err.message : "Failed to save.", "error");
         }
-    }, [draft, onSave, markClean, showToast]);
+    }, [draft, onSave, markClean, clearErrors, setFieldError, showToast]);
     const handleAutoSave = useCallback(async () => {
         try {
             await handleSave(true);
@@ -299,22 +312,39 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
             void normalizeError(err);
         }
     }, [handleSave]);
+    // Auto-save in create mode — debounce 2s on any draft change. Routed
+    // through handleAutoSave/handleSave (not a direct onSave call) so a
+    // validation failure during auto-save applies field errors + populates
+    // FormErrorSummary the same way a manual save does.
+    useEffect(() => {
+        if (mode !== "create" || !isDirty)
+            return;
+        const timer = setTimeout(() => { void handleAutoSave(); }, 2000);
+        return () => clearTimeout(timer);
+    }, [draft, isDirty, mode, handleAutoSave]);
     const handlePublish = useCallback(async () => {
         try {
-            await onPublish({ ...draft, status: "published" });
-            markClean();
-            showToast("Published.", "success");
+            const result = await onPublish({ ...draft, status: "published" });
+            if (result.ok) {
+                markClean();
+                clearErrors();
+                showToast("Published.", "success");
+                return;
+            }
+            applyZodIssues(result.issues ?? [], setFieldError);
+            showToast(result.error || "Fix the highlighted errors and try again.", "error");
         }
         catch (err) {
             void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to publish.", "error");
         }
-    }, [draft, onPublish, markClean, showToast]);
+    }, [draft, onPublish, markClean, clearErrors, setFieldError, showToast]);
     const listingTypeLabel = pluginForMode(listingType).typeLabel;
     const typeSpecificStep = TYPE_SPECIFIC_STEPS[listingType] ?? null;
     const steps = [
         {
             label: "Basic",
+            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)
@@ -326,12 +356,14 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         },
         {
             label: "Media",
+            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),
         },
         ...(typeSpecificStep ? [typeSpecificStep] : []),
         {
             label: "Pricing",
+            fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent", "gstRate", "hsnCode"],
             render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
             validate: (v) => {
                 if (!v.price)
@@ -345,13 +377,34 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         },
         {
             label: "Shipping",
+            fields: ["shippingPaidBy", "pickupAddressId", "insurance", "insuranceCost"],
             render: ({ values, onChange }) => (_jsx(StepShipping, { values: values, onChange: onChange, renderAddressSelector: renderAddressSelector })),
         },
         {
             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]);
+    // 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).
+    useEffect(() => {
+        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) {
@@ -384,7 +437,7 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         ? `New ${listingTypeLabel}`
         : draft.title ?? `Edit ${listingTypeLabel}`;
     if (mode === "create" && formMode === "quick") {
-        return (_jsx(FormShellProvider, { isDirty: isDirty, values: draft, onSaveDraft: handleAutoSave, children: _jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, schema: sellerProductSchema, children: _jsx(QuickProductForm, { values: draft, onChange: update, onPublish: () => void handlePublish(), onSave: () => void handleSave(), onSwitchToFull: () => setFormMode("full"), isLoading: isLoading, renderCategorySelector: renderCategorySelector, storeSlug: storeSlug, onUploadImage: (file) => shellUpload(file, "products", true, {
+        return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, schema: sellerProductSchema, children: _jsx(QuickProductForm, { values: draft, onChange: update, onPublish: () => void handlePublish(), onSave: () => void handleSave(), onSwitchToFull: () => setFormMode("full"), isLoading: isLoading, renderCategorySelector: renderCategorySelector, storeSlug: storeSlug, onUploadImage: (file) => shellUpload(file, "products", true, {
                         type: "product-image",
                         index: 1,
                         name: draft.title ?? "product",
@@ -393,12 +446,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 }))] })), children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, onSaveDraft: handleAutoSave, 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(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 }) }) }));
     }
     // Edit mode — FormShell with section nav + full form
     const editSections = [
         ...EDIT_SECTIONS,
         ...(typeSpecificStep ? [{ id: typeSpecificStep.id, label: typeSpecificStep.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, children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, onSaveDraft: handleAutoSave, 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 })] }), 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." })] }))] })] }) }) }));
 }

package/dist/features/seller/components/SellerProductsFilterDrawer.d.ts

@@ -1,15 +1,10 @@
 import React from "react";
-export interface SellerProductsFilterDrawerProps {
-    isOpen: boolean;
+export interface SellerProductsFilterFieldsProps {
     pendingFilters: Record<string, string>;
     statusOptions: ReadonlyArray<{
         id: string;
         label: string;
     }>;
-    activeFilterCount: number;
     onChange: (next: Record<string, string>) => void;
-    onClear: () => void;
-    onApply: () => void;
-    onClose: () => void;
 }
-export declare function SellerProductsFilterDrawer({ isOpen, pendingFilters, statusOptions, activeFilterCount, onChange, onClear, onApply, onClose, }: SellerProductsFilterDrawerProps): React.JSX.Element;
+export declare function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }: SellerProductsFilterFieldsProps): React.JSX.Element;

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

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, FilterChipGroup, ListingFilterDrawer, Row, Stack, Text } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Div, FilterChipGroup, Row, Stack, Text } from "../../../ui";
 import { FieldInput, FieldSelect } from "../../../ui/forms";
 import { CategoryInlineSelect } from "./CategoryInlineSelect";
 import { BrandInlineSelect } from "./BrandInlineSelect";
@@ -12,7 +12,7 @@ const CONDITION_OPTIONS = [
     { value: "refurbished", label: "Refurbished" },
     { value: "for-parts", label: "For parts" },
 ];
-export function SellerProductsFilterDrawer({ isOpen, pendingFilters, statusOptions, activeFilterCount, onChange, onClear, onApply, onClose, }) {
+export function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }) {
     const patch = (k, v) => onChange({ ...pendingFilters, [k]: v });
-    return (_jsxs(ListingFilterDrawer, { open: isOpen, onClose: onClose, onApply: onApply, onClear: onClear, activeCount: activeFilterCount, children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
 }

package/dist/features/seller/components/SellerProductsView.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
-import type { ListingLayoutProps } from "../../../ui";
-export interface SellerProductsViewProps extends ListingLayoutProps {
+export interface SellerProductsViewProps {
     onDeleteProduct?: (id: string) => Promise<void>;
-    /** S-STORE-2-E — "New Listing" toolbar button. */
     onCreateClick?: () => void;
 }
-export declare function SellerProductsView({ onDeleteProduct, onCreateClick, children, ...props }: SellerProductsViewProps): React.JSX.Element;
+export declare function SellerProductsView({ onDeleteProduct, onCreateClick, }: SellerProductsViewProps): React.JSX.Element;