@mohasinac/appkit 4.10.0 → 4.11.1

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

@@ -1,14 +1,56 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { z } from "zod";
 import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { StepForm } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
+// No accountNumber format check here on purpose — the UI supports "leave
+// blank to keep the existing saved account number" on re-save (see the
+// accountNumber field's helpText below), and the exact keep-existing
+// semantics live server-side; a client-side format requirement risks
+// blocking that legitimate blank-resave case.
+const payoutSettingsDraftSchema = z.object({
+    method: z.enum(["upi", "bank_transfer"]),
+    upiId: z.string(),
+    accountHolderName: z.string(),
+    accountNumber: z.string(),
+    ifscCode: z.string(),
+    bankName: z.string(),
+    accountType: z.enum(["savings", "current"]),
+    gstin: z.string(),
+    pan: z.string(),
+    businessType: z.string(),
+    autoPayout: z.boolean(),
+    minimumThreshold: z.string(),
+    emiEnabled: z.boolean(),
+}).superRefine((v, ctx) => {
+    if (v.method === "upi") {
+        if (!v.upiId.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["upiId"], message: "UPI ID is required" });
+        }
+        else if (!/^[\w.\-_]{2,256}@[a-zA-Z]{2,64}$/.test(v.upiId.trim())) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["upiId"], message: "Please enter a valid UPI ID" });
+        }
+    }
+    else {
+        if (!v.accountHolderName.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["accountHolderName"], message: "Account holder name is required" });
+        }
+        if (v.ifscCode.trim() && !/^[A-Z]{4}0[A-Z0-9]{6}$/.test(v.ifscCode.trim())) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["ifscCode"], message: "Invalid IFSC code" });
+        }
+        if (!v.bankName.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["bankName"], message: "Bank name is required" });
+        }
+    }
+});
 const DEFAULT_DRAFT = {
     method: "upi",
     upiId: "",
@@ -32,6 +74,11 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
     const [currentStep, setCurrentStep] = useState(0);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(payoutSettingsDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -97,8 +144,14 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                 body: JSON.stringify(body),
             });
             const json = await res.json();
-            if (!res.ok)
-                throw new Error(json?.error ?? "Failed to save");
+            if (!res.ok) {
+                if (Array.isArray(json?.issues) && json.issues.length > 0) {
+                    applyZodIssues(json.issues, setFieldError);
+                }
+                setError(json?.error ?? "Failed to save");
+                return;
+            }
+            clearErrors();
             setSuccess(true);
             const updated = json?.data?.payoutDetails ?? { method: draft.method, isConfigured: false };
             setCurrent(updated);
@@ -116,6 +169,7 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
     const steps = [
         {
             label: "Payout Method",
+            fields: ["method", "upiId", "accountHolderName", "accountNumber", "ifscCode", "bankName", "accountType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Method" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Payout configured" : "Not configured" }) })), current?.isConfigured && (_jsx(Alert, { variant: "info", children: current.method === "upi"
                             ? `Current UPI: ${current.upiId}`
                             : `Current bank: ${current.bankAccount?.bankName ?? ""} — ••••${current.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"} (${current.bankAccount?.accountType})` })), _jsx(Stack, { gap: "sm", children: ([
@@ -125,14 +179,25 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         },
         {
             label: "Tax Info",
+            fields: ["gstin", "pan", "businessType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Tax Information" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Optional \u2014 required only for GST invoice generation and TDS compliance." }), _jsx(FormField, { name: "gstin", label: "GSTIN (optional)", type: "text", value: values.gstin, onChange: (v) => onChange({ gstin: v.toUpperCase() }), placeholder: "e.g. 22AAAAA0000A1Z5", helpText: "15-character Goods and Services Tax Identification Number.", disabled: busy }), _jsx(FormField, { name: "pan", label: "PAN (optional)", type: "text", value: values.pan, onChange: (v) => onChange({ pan: v.toUpperCase() }), placeholder: "e.g. ABCDE1234F", helpText: "Required for payouts above \u20B950,000 per year (TDS threshold).", disabled: busy }), _jsx(FormField, { name: "businessType", label: "Business Type (optional)", type: "text", value: values.businessType, onChange: (v) => onChange({ businessType: v }), placeholder: "e.g. Individual, Sole Proprietor, Private Limited", disabled: busy })] })),
         },
         {
             label: "Preferences",
+            fields: ["autoPayout", "minimumThreshold", "emiEnabled"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." })] })),
         },
     ];
+    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]);
+    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Payout Settings", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-payout-settings", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Payout Details", isLoading: busy })] }, "payout"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-payout-settings", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Payout Details", isLoading: busy })] })] }, "payout"),
         ] }));
 }

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

@@ -1,4 +1,16 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
+/**
+ * SellerPayoutDetailContent — the payout detail body (status progress,
+ * amount breakdown, refund deductions, dates, orders, reminder toggle).
+ * Shared by the seller payouts list's SideDrawer and the standalone
+ * `/store/payouts/[id]/view` page so the two surfaces can't drift — same
+ * pattern as SellerOrderDetailPanel for orders.
+ */
+export declare function SellerPayoutDetailContent({ payout, onToggleReminder, reminderPending, }: {
+    payout: Record<string, unknown>;
+    onToggleReminder: (next: boolean) => void;
+    reminderPending: boolean;
+}): React.JSX.Element;
 export type SellerPayoutsViewProps = ListingLayoutProps;
 export declare function SellerPayoutsView({ children, ...props }: SellerPayoutsViewProps): React.JSX.Element;

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

@@ -4,8 +4,10 @@ import { normalizeError } from "../../../errors/normalize";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState } from "react";
+import { useRouter } from "next/navigation";
 import { Badge, Div, FilterChipGroup, ListingLayout, Row, RowActionMenu, SideDrawer, Span, Stack, Text, Toggle, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
@@ -28,7 +30,25 @@ function StatusProgress({ status }) {
     const currentIndex = PAYOUT_STAGES.indexOf(normalized);
     return (_jsx(Row, { gap: "xs", align: "center", children: PAYOUT_STAGES.map((stage, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Div, { className: `h-0.5 w-6 ${i <= currentIndex ? "bg-primary" : "bg-[var(--appkit-color-border)]"}` }), _jsx(Span, { size: "xs", weight: i === currentIndex ? "bold" : "medium", className: i <= currentIndex ? "text-primary" : "text-[var(--appkit-color-text-muted)]", children: stage[0].toUpperCase() + stage.slice(1) })] }, stage))) }));
 }
+/**
+ * SellerPayoutDetailContent — the payout detail body (status progress,
+ * amount breakdown, refund deductions, dates, orders, reminder toggle).
+ * Shared by the seller payouts list's SideDrawer and the standalone
+ * `/store/payouts/[id]/view` page so the two surfaces can't drift — same
+ * pattern as SellerOrderDetailPanel for orders.
+ */
+export function SellerPayoutDetailContent({ payout, onToggleReminder, reminderPending, }) {
+    const expectedByDate = payout.requestedAt
+        ? new Date(new Date(payout.requestedAt).getTime() + PAYOUT_CYCLE_DAYS * 24 * 60 * 60 * 1000)
+        : null;
+    const orderIds = Array.isArray(payout.orderIds) ? payout.orderIds : [];
+    const refundDeductions = Array.isArray(payout.refundDeductions)
+        ? payout.refundDeductions
+        : [];
+    return (_jsxs(Stack, { gap: "lg", children: [_jsx(StatusProgress, { status: toStringValue(payout.status, "pending") }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Amount" }), _jsx(Text, { size: "xl", weight: "bold", children: toCurrency(payout.netAmount ?? payout.amount ?? payout.totalAmount) })] }), (payout.grossAmount != null || payout.platformFee != null) && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Breakdown" }), _jsxs(Stack, { gap: "none", children: [payout.grossAmount != null && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Gross amount" }), _jsx(Text, { size: "xs", children: toCurrency(payout.grossAmount) })] })), payout.platformFee != null && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Platform fee" }), _jsxs(Text, { size: "xs", children: ["-", toCurrency(payout.platformFee)] })] })), refundDeductions.length > 0 && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Refund deductions" }), _jsxs(Text, { size: "xs", className: "text-error", children: ["-", toCurrency(refundDeductions.reduce((sum, d) => sum + Number(d.deductedAmount ?? 0), 0))] })] }))] })] })), refundDeductions.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Refund deductions (", refundDeductions.length, ")"] }), _jsx(Stack, { gap: "xs", children: refundDeductions.map((d, i) => (_jsxs(Div, { rounded: "lg", padding: "inlineSm", surface: "muted", border: "default", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", className: "font-mono", children: d.orderId }), _jsxs(Text, { size: "xs", className: "text-error", children: ["-", toCurrency(d.deductedAmount)] })] }), _jsx(Text, { size: "xs", color: "muted", children: d.reason })] }, `${d.orderId}-${i}`))) })] })), payout.transactionId ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Transaction / reference ID" }), _jsx(Text, { size: "sm", className: "font-mono", children: String(payout.transactionId) })] })) : null, _jsxs(Row, { gap: "lg", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Requested" }), _jsx(Text, { size: "sm", children: formatDate(payout.requestedAt ?? payout.createdAt) })] }), payout.status === "paid" ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Paid on" }), _jsx(Text, { size: "sm", children: formatDate(payout.processedAt) })] })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Expected by" }), _jsx(Text, { size: "sm", children: expectedByDate ? formatDate(expectedByDate.toISOString()) : "—" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Payment method" }), _jsx(Text, { size: "sm", className: "capitalize", children: toStringValue(payout.paymentMethod, "—").replace("_", " ") })] })] }), orderIds.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Orders included (", orderIds.length, ")"] }), _jsx(Div, { className: "max-h-40", overflow: "y-auto", children: _jsx(Stack, { gap: "xs", children: orderIds.map((oid) => (_jsx(Text, { size: "xs", className: "font-mono", color: "muted", children: oid }, oid))) }) })] })), _jsxs(Row, { align: "center", justify: "between", border: "default", rounded: "lg", padding: "inline", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Remind me" }), _jsx(Text, { size: "xs", color: "muted", children: "Flag this payout for a personal follow-up" })] }), _jsx(Toggle, { checked: Boolean(payout.sellerReminderFlag), onChange: onToggleReminder, disabled: reminderPending, size: "md", "aria-label": ACTIONS.STORE["set-payout-reminder"].ariaLabel })] })] }));
+}
 export function SellerPayoutsView({ children, ...props }) {
+    const router = useRouter();
     const { showToast } = useToast();
     const [selectedPayout, setSelectedPayout] = useState(null);
     const [reminderPending, setReminderPending] = useState(false);
@@ -132,6 +152,10 @@ export function SellerPayoutsView({ children, ...props }) {
                     label: ACTIONS.STORE["view-payout"].label,
                     onClick: () => setSelectedPayout(rawByIdRef.current[row.id] ?? { id: row.id }),
                 },
+                {
+                    label: "Open full page",
+                    onClick: () => router.push(String(ROUTES.STORE.PAYOUT_DETAIL(row.id))),
+                },
                 {
                     label: ACTIONS.STORE["export-payout"].label,
                     onClick: () => handleExport([rawByIdRef.current[row.id] ?? { id: row.id }]),
@@ -142,9 +166,5 @@ export function SellerPayoutsView({ children, ...props }) {
                         { id: "true", label: "Show all" },
                     ], value: pendingFilters.showAllPayouts ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showAllPayouts: id })), allId: "" })] })),
     };
-    const expectedByDate = selectedPayout?.requestedAt
-        ? new Date(new Date(selectedPayout.requestedAt).getTime() + PAYOUT_CYCLE_DAYS * 24 * 60 * 60 * 1000)
-        : null;
-    const orderIds = Array.isArray(selectedPayout?.orderIds) ? selectedPayout.orderIds : [];
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: Boolean(selectedPayout), onClose: () => setSelectedPayout(null), title: selectedPayout ? `Payout #${toStringValue(selectedPayout.payoutNumber ?? selectedPayout.id, "")}` : "Payout", mode: "view", children: selectedPayout && (_jsxs(Stack, { gap: "lg", children: [_jsx(StatusProgress, { status: toStringValue(selectedPayout.status, "pending") }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Amount" }), _jsx(Text, { size: "xl", weight: "bold", children: toCurrency(selectedPayout.amount ?? selectedPayout.totalAmount) })] }), selectedPayout.transactionId ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Transaction / reference ID" }), _jsx(Text, { size: "sm", className: "font-mono", children: String(selectedPayout.transactionId) })] })) : null, _jsxs(Row, { gap: "lg", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Requested" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.requestedAt ?? selectedPayout.createdAt) })] }), selectedPayout.status === "paid" ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Paid on" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.processedAt) })] })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Expected by" }), _jsx(Text, { size: "sm", children: expectedByDate ? formatDate(expectedByDate.toISOString()) : "—" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Payment method" }), _jsx(Text, { size: "sm", className: "capitalize", children: toStringValue(selectedPayout.paymentMethod, "—").replace("_", " ") })] })] }), orderIds.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Orders included (", orderIds.length, ")"] }), _jsx(Div, { className: "max-h-40", overflow: "y-auto", children: _jsx(Stack, { gap: "xs", children: orderIds.map((oid) => (_jsx(Text, { size: "xs", className: "font-mono", color: "muted", children: oid }, oid))) }) })] })), _jsxs(Row, { align: "center", justify: "between", border: "default", rounded: "lg", padding: "inline", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Remind me" }), _jsx(Text, { size: "xs", color: "muted", children: "Flag this payout for a personal follow-up" })] }), _jsx(Toggle, { checked: Boolean(selectedPayout.sellerReminderFlag), onChange: handleToggleReminder, disabled: reminderPending, size: "md", "aria-label": ACTIONS.STORE["set-payout-reminder"].ariaLabel })] })] })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: Boolean(selectedPayout), onClose: () => setSelectedPayout(null), title: selectedPayout ? `Payout #${toStringValue(selectedPayout.payoutNumber ?? selectedPayout.id, "")}` : "Payout", mode: "view", children: selectedPayout && (_jsx(SellerPayoutDetailContent, { payout: selectedPayout, onToggleReminder: handleToggleReminder, reminderPending: reminderPending })) })] }));
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { MediaField } from "../../media/types";
 export type ProductListingMode = "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | "classified" | "digital-code" | "live" | "art" | "stickers";
 export interface SellerProductDraft {
     title?: string;
@@ -10,7 +11,7 @@ export interface SellerProductDraft {
     tags?: string[];
     mainImage?: string;
     images?: string[];
-    video?: string;
+    video?: MediaField;
     youtubeId?: string;
     price?: number;
     compareAtPrice?: number;
@@ -70,13 +71,19 @@ export interface SellerProductDraft {
     printFinish?: string;
     printEditionSize?: number;
 }
+/** Shape returned by `onSave`/`onPublish` — structurally compatible with appkit's `ActionResult<T>` failure/success arms, without importing the server-only type into this client component. */
+export interface ProductActionResult {
+    ok: boolean;
+    error?: string;
+    issues?: unknown[];
+}
 export interface SellerProductShellProps {
     mode: "create" | "edit";
     listingType?: ProductListingMode;
     initialValues?: SellerProductDraft;
     productId?: string;
-    onSave: (draft: SellerProductDraft) => void | Promise<void>;
-    onPublish: (draft: SellerProductDraft) => void | Promise<void>;
+    onSave: (draft: SellerProductDraft) => Promise<ProductActionResult>;
+    onPublish: (draft: SellerProductDraft) => Promise<ProductActionResult>;
     onDiscard?: () => void;
     isLoading?: boolean;
     storeSlug?: string;

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,
@@ -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;