@mohasinac/appkit 4.10.0 → 4.11.0

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

@@ -1,21 +1,16 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { Badge, Row, Span, Stack, sortBy } from "@mohasinac/appkit/client";
+import { Badge, sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, ListingToolbar, Pagination, RowActionMenu, Text, useToast, StickyToolbar, } from "../../../ui";
-import { useBottomActions } from "../../layout";
+import { ConfirmDeleteModal, Div, RowActionMenu, Text, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { ROUTES } from "../../../next";
-import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { TABLE_KEYS } from "../../../constants/table-keys";
-const PAGE_SIZE = 25;
+import { toRecordArray, toStringValue } from "../hooks/useSellerListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 const DEFAULT_SORT = "displayOrder";
 const SORT_OPTIONS = [
     { value: sortBy("displayOrder", "ASC"), label: "Display Order" },
@@ -42,40 +37,11 @@ const COLUMNS = [
 ];
 export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, onBulkActivate, onBulkDeactivate, }) {
     const { showToast } = useToast();
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         deleteFn: onDelete,
         successMessage: "Category deleted.",
-        onSuccess: () => { refetch?.(); },
     });
-    const commitSearch = useCallback(() => { table.set(TABLE_KEYS.QUERY, searchInput.trim()); }, [searchInput, table]);
-    const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
-        setSearchInput("");
-    }, [table]);
-    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) || table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT;
-    const { rows, total, isLoading, errorMessage, refetch } = useSellerListingData({
-        queryKey: ["seller", "store-categories"],
-        endpoint: SELLER_ENDPOINTS.STORE_CATEGORIES,
-        page: table.getNumber(TABLE_KEYS.PAGE, 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
-        q: table.get(TABLE_KEYS.QUERY) || undefined,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-            id: toStringValue(item.id, `cat-${index}`),
-            raw: item,
-            label: String(item.label ?? ""),
-            slug: String(item.slug ?? ""),
-            productCount: Number(item.productIds?.length ?? 0),
-            isActive: Boolean(item.isActive),
-        })),
-        getTotal: (response, rows) => typeof response.total === "number" ? response.total : rows.length,
-    });
-    const currentPage = table.getNumber(TABLE_KEYS.PAGE, 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
     const handleDelete = useCallback(async (id) => {
         if (!onDelete)
             return;
@@ -88,11 +54,6 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
         }
         setDeleteTargetId(null);
     }, [onDelete, performDelete, showToast]);
-    const bulkActions = [
-        ...(onBulkDelete ? [buildBulkAction(ACTIONS.STORE["delete-listing"], async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
-        ...(onBulkActivate ? [buildBulkAction(ACTIONS.ADMIN["activate-bundle"], async () => { await onBulkActivate(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
-        ...(onBulkDeactivate ? [buildBulkAction(ACTIONS.ADMIN["deactivate-bundle"], async () => { await onBulkDeactivate(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
-    ];
     const handleNavigateNew = () => {
         if (onCreateClick) {
             onCreateClick();
@@ -100,19 +61,50 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
         }
         window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_NEW);
     };
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: handleNavigateNew, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Category" })] }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Stack, { gap: "sm", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { color: "faint", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
-                                {
-                                    label: ACTIONS.STORE["edit-listing"].label,
-                                    onClick: () => onEditClick
-                                        ? onEditClick(row.id)
-                                        : (window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_EDIT(row.id))),
-                                },
-                                ...(onDelete ? [{
-                                        label: ACTIONS.STORE["delete-listing"].label,
-                                        destructive: true,
-                                        onClick: () => setDeleteTargetId(row.id),
-                                        disabled: deletingId === row.id,
-                                    }] : []),
-                            ] })) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Category", message: "Are you sure you want to delete this category? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+    const config = {
+        portal: "seller",
+        title: "Store Categories",
+        searchPlaceholder: "Search categories by label...",
+        emptyLabel: "No categories yet — add your first storefront category",
+        filterKeys: [],
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "store-categories", "listing"],
+        endpoint: SELLER_ENDPOINTS.STORE_CATEGORIES,
+        sortOptions: SORT_OPTIONS,
+        columns: COLUMNS,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `cat-${index}`),
+            raw: item,
+            label: String(item.label ?? ""),
+            slug: String(item.slug ?? ""),
+            productCount: Number(item.productIds?.length ?? 0),
+            isActive: Boolean(item.isActive),
+        })),
+        getTotal: (response, rows) => (typeof response.total === "number" ? response.total : rows.length),
+        buildFilters: () => undefined,
+        primaryAction: { label: "New Category", onClick: handleNavigateNew },
+        buildBulkActions: (selection) => {
+            const actions = [
+                ...(onBulkDelete ? [buildBulkAction(ACTIONS.STORE["delete-listing"], async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); })] : []),
+                ...(onBulkActivate ? [buildBulkAction(ACTIONS.ADMIN["activate-bundle"], async () => { await onBulkActivate(selection.selectedIds); selection.clearSelection(); })] : []),
+                ...(onBulkDeactivate ? [buildBulkAction(ACTIONS.ADMIN["deactivate-bundle"], async () => { await onBulkDeactivate(selection.selectedIds); selection.clearSelection(); })] : []),
+            ];
+            return actions;
+        },
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.STORE["edit-listing"].label,
+                    onClick: () => onEditClick
+                        ? onEditClick(row.id)
+                        : (window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_EDIT(row.id))),
+                },
+                ...(onDelete ? [{
+                        label: ACTIONS.STORE["delete-listing"].label,
+                        destructive: true,
+                        onClick: () => setDeleteTargetId(row.id),
+                        disabled: deletingId === row.id,
+                    }] : []),
+            ] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Category", message: "Are you sure you want to delete this category? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

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

@@ -1,3 +1,8 @@
+export interface StorefrontSaveResult {
+    ok: boolean;
+    error?: string;
+    issues?: unknown[];
+}
 export interface StorefrontDraft {
     storeName?: string;
     storeDescription?: string;
@@ -21,7 +26,7 @@ export interface StorefrontDraft {
 }
 export interface SellerStorefrontViewProps {
     initialValues?: StorefrontDraft;
-    onSave: (data: StorefrontDraft) => void | Promise<void>;
+    onSave: (data: StorefrontDraft) => Promise<StorefrontSaveResult>;
     isLoading?: boolean;
     storeSlug?: string;
 }

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

@@ -1,10 +1,24 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, 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";
+// 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
+// false "required" errors on every keystroke).
+const storefrontDraftSchema = z.object({
+    storeName: z.string().min(2, "Store name is required").max(80),
+    storeDescription: z.string().max(10000).optional().or(z.literal("")),
+    storeCategory: z.string().max(80).optional().or(z.literal("")),
+    bio: z.string().max(300, "Bio must be 300 characters or fewer").optional().or(z.literal("")),
+    website: z.string().url("Enter a valid URL").optional().or(z.literal("")),
+    vacationMessage: z.string().max(300).optional().or(z.literal("")),
+}).passthrough();
 export function SellerStorefrontView({ initialValues, onSave, isLoading = false, storeSlug = "store", }) {
     const [draft, setDraft] = useState(initialValues ?? {});
     const [saving, setSaving] = useState(false);
@@ -12,6 +26,11 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = 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();
@@ -21,9 +40,14 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = false,
         setSaving(true);
         setSaved(false);
         try {
-            await onSave(draft);
-            markClean();
-            setSaved(true);
+            const result = await onSave(draft);
+            if (result.ok) {
+                markClean();
+                clearErrors();
+                setSaved(true);
+                return;
+            }
+            applyZodIssues(result.issues ?? [], setFieldError);
         }
         finally {
             setSaving(false);
@@ -33,23 +57,36 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = false,
     const steps = [
         {
             label: "Store Identity",
+            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 })] })),
         },
         {
             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" })] })] })),
         },
         {
             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 })] })),
         },
         {
             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;
+        // 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: "Storefront Settings", sections: [
-            _jsxs(Div, { children: [saved && (_jsx(Alert, { variant: "success", className: "mb-6", children: "Changes saved successfully." })), _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: 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"),
         ] }));
 }

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

@@ -9,7 +9,7 @@ export type { SellerPreOrdersViewProps } from "./SellerPreOrdersView";
 export { SellerPrizeDrawsView } from "./SellerPrizeDrawsView";
 export type { SellerPrizeDrawsViewProps } from "./SellerPrizeDrawsView";
 export { PrintCenterView } from "./PrintCenterView";
-export { SellerOrdersView } from "./SellerOrdersView";
+export { SellerOrdersView, SellerOrderDetailPanel } from "./SellerOrdersView";
 export type { SellerOrdersViewProps } from "./SellerOrdersView";
 export { SellerOffersView } from "./SellerOffersView";
 export type { SellerOffersViewProps } from "./SellerOffersView";
@@ -23,7 +23,7 @@ export { SellerBidsView } from "./SellerBidsView";
 export type { SellerBidsViewProps } from "./SellerBidsView";
 export { SellersListView } from "./SellersListView";
 export type { SellersListViewProps } from "./SellersListView";
-export { SellerPayoutsView } from "./SellerPayoutsView";
+export { SellerPayoutsView, SellerPayoutDetailContent } from "./SellerPayoutsView";
 export type { SellerPayoutsViewProps } from "./SellerPayoutsView";
 export { SellerPayoutStats } from "./SellerPayoutStats";
 export type { SellerPayoutStatsProps } from "./SellerPayoutStats";

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

@@ -4,14 +4,14 @@ export { SellerAuctionsView } from "./SellerAuctionsView";
 export { SellerPreOrdersView } from "./SellerPreOrdersView";
 export { SellerPrizeDrawsView } from "./SellerPrizeDrawsView";
 export { PrintCenterView } from "./PrintCenterView";
-export { SellerOrdersView } from "./SellerOrdersView";
+export { SellerOrdersView, SellerOrderDetailPanel } from "./SellerOrdersView";
 export { SellerOffersView } from "./SellerOffersView";
 export { SellerOffersPanel } from "./SellerOffersPanel";
 export { SellerCouponsView } from "./SellerCouponsView";
 export { SellerCouponEditorView } from "./SellerCouponEditorView";
 export { SellerBidsView } from "./SellerBidsView";
 export { SellersListView } from "./SellersListView";
-export { SellerPayoutsView } from "./SellerPayoutsView";
+export { SellerPayoutsView, SellerPayoutDetailContent } from "./SellerPayoutsView";
 export { SellerPayoutStats } from "./SellerPayoutStats";
 export { SellerPayoutHistoryTable } from "./SellerPayoutHistoryTable";
 export { SellerPayoutSettingsView } from "./SellerPayoutSettingsView";

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

@@ -1,4 +1,12 @@
 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` —
+ * `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.
+ */
+export declare const FormSchemaContext: import("react").Context<import("zod").ZodTypeAny | undefined>;
 export interface FormShellSection {
     id: string;
     label: string;
@@ -20,6 +28,15 @@ export interface FormShellProps {
     publishLabel?: string;
     /** Override the entire bottom action bar. */
     renderBottomBar?: () => ReactNode;
+    /**
+     * Rendered above the default Save/Publish buttons in FormShell's own
+     * built-in footer (the `onSaveDraft`/`onPublish` branch, not used when
+     * `renderBottomBar` is supplied — that override owns its whole footer).
+     * Typically `<FormShellContext.Provider value={shellCtx}><FormErrorSummary /></FormShellContext.Provider>`
+     * — lets a caller show the shared live error summary beside the built-in
+     * buttons without having to reimplement the footer itself.
+     */
+    footerTopSlot?: ReactNode;
     /**
      * When provided, a 👁 Preview button appears in the top bar.
      * Clicking it replaces the form body with this read-only render.
@@ -33,9 +50,12 @@ export interface FormShellProps {
      */
     splitPreview?: boolean;
     /**
-     * Optional Zod schema covering the form's fields. Currently informational
-     * (consumed by the caller's submit handler); `audit-form-schema` requires
-     * every callsite to declare one so the validation contract is explicit.
+     * 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
+     * `<FormShell schema={x}>` call sites start validating with zero changes.
+     * `audit-form-schema` requires every callsite to declare one.
      */
     schema?: import("zod").ZodTypeAny;
     children: ReactNode;
@@ -46,4 +66,4 @@ export interface UseFormShellResult {
     markClean: () => void;
 }
 export declare function useFormShell(): UseFormShellResult;
-export declare function FormShell({ isOpen, onClose, title, breadcrumb, schema: _schema, isDirty, isLoading, sections, onSaveDraft, onPublish, saveLabel, publishLabel, renderBottomBar, previewSlot, splitPreview: splitPreviewProp, children, }: FormShellProps): import("react").JSX.Element | null;
+export declare function FormShell({ isOpen, onClose, title, breadcrumb, schema, isDirty, isLoading, sections, onSaveDraft, onPublish, saveLabel, publishLabel, renderBottomBar, footerTopSlot, previewSlot, splitPreview: splitPreviewProp, children, }: FormShellProps): import("react").JSX.Element | null;

package/dist/features/shell/FormShell.js

@@ -1,12 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useEffect, useRef, useState } from "react";
 import { X, AlertTriangle, Eye, ArrowLeft } from "lucide-react";
 import { Button } from "../../ui/components/Button";
 import { IconButton } from "../../ui/components/IconButton";
 import { classNames } from "../../ui/style.helper";
 import { FORM_ACTION_META, FORM_ACTION_ID } from "../products/constants/action-defs";
 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` —
+ * `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.
+ */
+export const FormSchemaContext = createContext(undefined);
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -24,9 +32,7 @@ export function useFormShell() {
     };
 }
 const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-export function FormShell({ isOpen, onClose, title, breadcrumb, 
-// schema is consumed by callers (audit-form-schema asserts presence at callsites)
-schema: _schema, isDirty = false, isLoading = false, sections, onSaveDraft, onPublish, saveLabel = FORM_ACTION_META[FORM_ACTION_ID.SAVE_DRAFT].label, publishLabel = FORM_ACTION_META[FORM_ACTION_ID.PUBLISH].label, renderBottomBar, previewSlot, splitPreview: splitPreviewProp, children, }) {
+export function FormShell({ isOpen, onClose, title, breadcrumb, schema, isDirty = false, isLoading = false, sections, onSaveDraft, onPublish, saveLabel = FORM_ACTION_META[FORM_ACTION_ID.SAVE_DRAFT].label, publishLabel = FORM_ACTION_META[FORM_ACTION_ID.PUBLISH].label, renderBottomBar, footerTopSlot, previewSlot, splitPreview: splitPreviewProp, children, }) {
     // W1-37: auto-enable splitPreview when a previewSlot is provided. Callers
     // can still pass splitPreview={false} explicitly to opt out.
     const splitPreview = splitPreviewProp ?? Boolean(previewSlot);
@@ -116,8 +122,8 @@ schema: _schema, isDirty = false, isLoading = false, sections, onSaveDraft, onPu
     };
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", gap: "xs", rounded: "lg", textSize: "sm", textColor: "muted", className: "flex-shrink-0", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx(IconButton, { type: "button", onClick: attemptClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Text, { className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs(Button, { variant: "outline", type: "button", onClick: () => setPreviewMode(true), gap: "xs", rounded: "lg", paddingX: "sm", textSize: "sm", textColor: "muted", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-[var(--appkit-space-4)] px-[var(--appkit-space-3)] gap-[var(--appkit-space-1)] overflow-y-auto", children: sections.map((sec) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => scrollToSection(sec.id), rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", textColor: "muted", justify: "start", className: "text-left", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, padding: "y-xs", children: sections.map((sec) => (_jsx(Button, { variant: "outline", type: "button", onClick: () => scrollToSection(sec.id), rounded: "full", paddingX: "sm", paddingY: "xs", textSize: "xs", textColor: "muted", className: "flex-shrink-0 hover:border-primary hover:text-primary whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-[var(--appkit-space-0)] lg:pt-[var(--appkit-space-0)]" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { textSize: "sm", gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", paddingY: "y-xs", paddingX: "x-md", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { padding: "y-md", children: previewSlot() })] })) : splitPreview && previewSlot ? (
+    return (_jsxs(FormSchemaContext.Provider, { value: schema, children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", gap: "xs", rounded: "lg", textSize: "sm", textColor: "muted", className: "flex-shrink-0", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx(IconButton, { type: "button", onClick: attemptClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Text, { className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs(Button, { variant: "outline", type: "button", onClick: () => setPreviewMode(true), gap: "xs", rounded: "lg", paddingX: "sm", textSize: "sm", textColor: "muted", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-[var(--appkit-space-4)] px-[var(--appkit-space-3)] gap-[var(--appkit-space-1)] overflow-y-auto", children: sections.map((sec) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => scrollToSection(sec.id), rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", textColor: "muted", justify: "start", className: "text-left", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, padding: "y-xs", children: sections.map((sec) => (_jsx(Button, { variant: "outline", type: "button", onClick: () => scrollToSection(sec.id), rounded: "full", paddingX: "sm", paddingY: "xs", textSize: "xs", textColor: "muted", className: "flex-shrink-0 hover:border-primary hover:text-primary whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-[var(--appkit-space-0)] lg:pt-[var(--appkit-space-0)]" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { textSize: "sm", gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", paddingY: "y-xs", paddingX: "x-md", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { padding: "y-md", children: previewSlot() })] })) : splitPreview && previewSlot ? (
                                 // S-STORE-3-D — desktop 60/40 split: form left, preview right.
                                 // Below `lg`, falls back to single-column form (preview-as-modal via existing toggle).
-                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem] lg:px-[1.5rem] lg:py-[1.5rem] lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem] lg:max-w-none lg:px-[0] lg:py-[0]", padding: "y-lg", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, rounded: "lg", children: [_jsxs(Row, { textWeight: "semibold", textSize: "xs", gap: "xs", className: "mb-3 uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem]", padding: "y-lg", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Row, { justify: "between", paddingX: "x-5", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", style: { paddingBottom: "calc(var(--appkit-space-3) + var(--keyboard-inset-height, 0px))" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-lg", className: "fixed inset-0", style: { zIndex: "var(--appkit-z-confirm)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)]", shadow: "2xl", rounded: "xl", padding: "lg", style: { zIndex: "var(--appkit-z-confirm)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { layout: "flex-center", className: "flex-shrink-0 w-10 h-10 bg-[var(--appkit-color-warning-surface)]", rounded: "full", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: "Unsaved changes" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
+                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem] lg:px-[1.5rem] lg:py-[1.5rem] lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem] lg:max-w-none lg:px-[0] lg:py-[0]", padding: "y-lg", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, rounded: "lg", children: [_jsxs(Row, { textWeight: "semibold", textSize: "xs", gap: "xs", className: "mb-3 uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem]", padding: "y-lg", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Stack, { gap: "none", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [footerTopSlot && (_jsx(Div, { paddingX: "x-5", padding: "t-sm", children: footerTopSlot })), _jsxs(Row, { justify: "between", paddingX: "x-5", padding: "y-sm", style: { paddingBottom: "calc(var(--appkit-space-3) + var(--keyboard-inset-height, 0px))" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-lg", className: "fixed inset-0", style: { zIndex: "var(--appkit-z-confirm)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)]", shadow: "2xl", rounded: "xl", padding: "lg", style: { zIndex: "var(--appkit-z-confirm)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { layout: "flex-center", className: "flex-shrink-0 w-10 h-10 bg-[var(--appkit-color-warning-surface)]", rounded: "full", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: "Unsaved changes" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
 }

package/dist/features/shell/QuickFormDrawer.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { X } from "lucide-react";
 import { Button } from "../../ui/components/Button";
 import { IconButton } from "../../ui/components/IconButton";
 import { FormField } from "../../ui/components/FormField";
 import { Toggle } from "../../ui/components/Toggle";
 import { Div, Form, Row, Stack, Text } from "../../ui";
+import { FormShellContext, FormErrorSummary } from "../../ui/forms";
 import { useHandMode } from "../../_internal/client/hand-mode";
 function initValues(fields, defaults = {}) {
     const out = {};
@@ -67,6 +68,37 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
         setErrors(errs);
         return Object.keys(errs).length === 0;
     };
+    // Live-derived (not state — a pure function of the current values, so it
+    // never needs a separate effect) validation for the error summary below.
+    // Deliberately kept SEPARATE from the `errors` state above: `errors` only
+    // populates on submit and gates each field's inline error display, which
+    // must stay submit-gated so an untouched, freshly-opened drawer doesn't
+    // show every required field as invalid immediately. The summary is meant
+    // to be live per the shared error-summary requirement; the per-field
+    // inline errors are not.
+    const liveErrors = (() => {
+        if (schema) {
+            const parsed = schema.safeParse(values);
+            if (parsed.success)
+                return {};
+            const errs = {};
+            for (const issue of parsed.error.issues) {
+                const path = issue.path[0];
+                if (typeof path === "string" && !errs[path])
+                    errs[path] = issue.message;
+            }
+            return errs;
+        }
+        const errs = {};
+        for (const f of fields) {
+            if (f.required) {
+                const v = values[f.name];
+                if (v === undefined || v === null || v === "")
+                    errs[f.name] = `${f.label} is required`;
+            }
+        }
+        return errs;
+    })();
     const handleSubmit = useCallback(async (e) => {
         e?.preventDefault();
         if (!validate())
@@ -121,18 +153,41 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
         document.addEventListener("keydown", handle);
         return () => document.removeEventListener("keydown", handle);
     }, [isOpen, handleClose]);
+    // Synthesize a FormShellContextValue from `liveErrors` (not the submit-gated
+    // `errors` state) so <FormErrorSummary> — the shared live-error-summary
+    // primitive — can be reused here without migrating this drawer's
+    // already-working schema/errors mechanism onto useFormShellState. Kept
+    // separate from `errors` deliberately: this context only backs the
+    // summary, never the per-field inline `error={errors[field.name]}` props
+    // above, which must stay submit-gated.
+    const shellCtx = useMemo(() => ({
+        errors: liveErrors,
+        touched: {},
+        setFieldError: () => { },
+        setFieldTouched: () => { },
+        clearFieldError: () => { },
+        steps: [],
+        currentStep: 0,
+        goToStep: () => { },
+        nextStep: () => { },
+        prevStep: () => { },
+        isPublishReady: Object.keys(liveErrors).length === 0,
+        isDirty: false,
+        isSubmitting: submitting,
+        stepErrorCounts: [],
+    }), [liveErrors, submitting]);
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: `fixed inset-y-0 ${hand === "left" ? "left-0" : "right-0"} bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]`, children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", reverse: hand === "left", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx(IconButton, { type: "button", onClick: handleClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs(Form, { className: "flex-1", overflow: "y-auto", paddingX: "x-md", paddingY: "y-md-lg", spacing: "md", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
-                                const value = values[field.name];
-                                if (field.type === "toggle") {
-                                    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
-                                }
-                                return (_jsxs(Div, { children: [_jsx(FormField, { name: field.name, label: field.label, type: field.type === "textarea"
-                                                ? "textarea"
-                                                : field.type === "select"
-                                                    ? "select"
-                                                    : "text", value: String(value ?? ""), onChange: (v) => set(field.name, field.type === "number" ? Number(v) : v), options: field.options, placeholder: field.placeholder, disabled: busy, error: errors[field.name] }), field.helperText && !errors[field.name] && (_jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
-                            }), renderExtra?.(values, set)] }), _jsxs(Row, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)]", padding: "md", align: "center", justify: "between", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleClose, disabled: busy, children: cancelLabel }), _jsxs(Button, { variant: "primary", size: "sm", onClick: () => void handleSubmit(), disabled: busy, isLoading: busy, children: [submitLabel, " \u2192"] })] })] })] }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: `fixed inset-y-0 ${hand === "left" ? "left-0" : "right-0"} bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]`, children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", reverse: hand === "left", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx(IconButton, { type: "button", onClick: handleClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs(Form, { className: "flex-1", overflow: "y-auto", paddingX: "x-md", paddingY: "y-md-lg", spacing: "md", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+                                    const value = values[field.name];
+                                    if (field.type === "toggle") {
+                                        return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
+                                    }
+                                    return (_jsxs(Div, { children: [_jsx(FormField, { name: field.name, label: field.label, type: field.type === "textarea"
+                                                    ? "textarea"
+                                                    : field.type === "select"
+                                                        ? "select"
+                                                        : "text", value: String(value ?? ""), onChange: (v) => set(field.name, field.type === "number" ? Number(v) : v), options: field.options, placeholder: field.placeholder, disabled: busy, error: errors[field.name] }), field.helperText && !errors[field.name] && (_jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
+                                }), renderExtra?.(values, set)] }), _jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)]", children: [_jsx(Div, { paddingX: "x-md", padding: "t-sm", children: _jsx(FormErrorSummary, {}) }), _jsxs(Row, { padding: "md", align: "center", justify: "between", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleClose, disabled: busy, children: cancelLabel }), _jsxs(Button, { variant: "primary", size: "sm", onClick: () => void handleSubmit(), disabled: busy, isLoading: busy, children: [submitLabel, " \u2192"] })] })] })] })] }) }));
 }

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { JsonValue } from "@mohasinac/appkit/client";
+import type { ZodTypeAny } from "zod";
 export interface StepDef<T extends object = Record<string, JsonValue>> {
     label: string;
     render: (props: {
@@ -9,6 +10,19 @@ export interface StepDef<T extends object = Record<string, JsonValue>> {
     }) => ReactNode;
     /** Returns an error message string if invalid, or null/undefined if valid. */
     validate?: (values: T) => string | null | undefined;
+    /**
+     * Schema field names this step owns — drives error→step attribution
+     * (surfaced to the caller via `onValidationChange`'s `fieldToStepIndex`,
+     * consumed by `<FormErrorSummary>`).
+     */
+    fields?: string[];
+    /**
+     * Per-step Zod schema. Runs live (on every value change, not just on
+     * Next/Publish) via `onValidationChange`. Falls back to the whole-form
+     * `schema` prop, then to a schema inherited from an ancestor `FormShell`
+     * via `FormSchemaContext`, when omitted.
+     */
+    schema?: ZodTypeAny;
 }
 export interface StepFormProps<T extends object = Record<string, JsonValue>> {
     steps: StepDef<T>[];
@@ -26,6 +40,21 @@ export interface StepFormProps<T extends object = Record<string, JsonValue>> {
     hideActions?: boolean;
     /** Per-step error flags — when true, step button shows a red error badge */
     stepErrors?: boolean[];
+    /**
+     * Whole-form Zod schema, used by any step that doesn't declare its own
+     * `StepDef.schema`. Falls back to an ancestor `FormShell`'s schema (via
+     * `FormSchemaContext`) when omitted here too.
+     */
+    schema?: ZodTypeAny;
+    /**
+     * Fired whenever live validation recomputes — the current field-name→
+     * message map plus a field-name→step-index map derived from `steps[].fields`.
+     * The caller (which owns the single `FormShellContext.Provider` for the
+     * surrounding form) composes these into its own context value so
+     * `<FormErrorSummary>` and per-field inline errors both work, instead of
+     * `StepForm` mounting a second, potentially-shadowing provider itself.
+     */
+    onValidationChange?: (fieldErrors: Record<string, string>, fieldToStepIndex: Record<string, number>) => void;
 }
 export interface StepFormActionsProps {
     currentStep: number;
@@ -48,4 +77,4 @@ export declare function StepIndicator({ steps, currentStep, onStepClick, stepErr
     /** True for each step that has a validation error — renders a red dot badge */
     stepErrors?: boolean[];
 }): import("react").JSX.Element;
-export declare function StepForm<T extends object = Record<string, JsonValue>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react").JSX.Element;
+export declare function StepForm<T extends object = Record<string, JsonValue>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, schema, onValidationChange, }: StepFormProps<T>): import("react").JSX.Element;