@mohasinac/appkit 2.7.44 → 2.7.46

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Button, Form, Input, StackedViewShell, useToast, } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -67,17 +68,23 @@ export function AdminSublistingCategoryEditorView({ categoryId, onSaved, onDelet
     });
     const { upload } = useMediaUpload();
     const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Sub-listing Category" : "New Sub-listing Category", sections: [
-            _jsxs(Form, { onSubmit: (e) => {
-                    e.preventDefault();
-                    saveMutation.mutate();
-                }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Category name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Base Set Charizard 108/120" }), _jsx(Input, { label: "Item code", value: itemCode, onChange: (e) => setItemCode(e.target.value), placeholder: "e.g. PSA 10, 108/120, STH", helperText: "Grade, card number, or series code. Optional." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description shown on the public category page" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "sublisting-categories", true, {
-                            type: "category-image",
-                            name: name || "sublisting",
-                        }), onChange: setCoverImage }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                    if (confirm("Delete this category? All linked listings will be unlinked. This cannot be undone.")) {
-                                        deleteMutation.mutate();
-                                    }
-                                }, children: "Delete" }))] })] }, "sc-editor-form"),
+            _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                        e.preventDefault();
+                        clearErrors();
+                        if (!name.trim()) {
+                            setFieldError("name", "Category name is required");
+                            return;
+                        }
+                        saveMutation.mutate();
+                    }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: name, onChange: (v) => setName(v), required: true, placeholder: "e.g. Base Set Charizard 108/120" }), _jsx(Input, { label: "Item code", value: itemCode, onChange: (e) => setItemCode(e.target.value), placeholder: "e.g. PSA 10, 108/120, STH", helperText: "Grade, card number, or series code. Optional." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description shown on the public category page" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "sublisting-categories", true, {
+                                type: "category-image",
+                                name: name || "sublisting",
+                            }), onChange: setCoverImage }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                        if (confirm("Delete this category? All linked listings will be unlinked. This cannot be undone.")) {
+                                            deleteMutation.mutate();
+                                        }
+                                    }, children: "Delete" }))] })] }, "sc-editor-form") }, "sc-ctx"),
         ] }));
 }

package/dist/features/contact/email.d.ts

@@ -49,6 +49,14 @@ export declare function sendContactEmail(params: {
     success: boolean;
     data?: unknown;
 }>;
+export declare function sendDigitalCodeClaimedEmail(params: {
+    to: string;
+    userName: string;
+    productTitle: string;
+    orderId: string;
+}): Promise<{
+    success: boolean;
+}>;
 export declare function sendSiteSettingsChangedEmail(params: {
     adminEmails: string[];
     changedByEmail: string;

package/dist/features/contact/email.js

@@ -220,6 +220,66 @@ export async function sendContactEmail(params) {
         return { success: false };
     }
 }
+export async function sendDigitalCodeClaimedEmail(params) {
+    const siteName = getSiteName();
+    const siteUrl = getSiteUrl();
+    const { to, userName, productTitle, orderId } = params;
+    const orderUrl = `${siteUrl}/user/orders/view/${orderId}`;
+    try {
+        const { error } = await sendConfiguredEmail({
+            to,
+            subject: `Your digital code for "${productTitle}" is ready`,
+            html: `
+        <!DOCTYPE html><html>
+        <head><meta charset="utf-8"><title>Digital Code Ready</title></head>
+        <body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:#f5f5f5;">
+          <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f5f5f5;padding:40px 0;">
+            <tr><td align="center">
+              <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);">
+                <tr><td style="background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);padding:40px;text-align:center;">
+                  <p style="font-size:48px;margin:0 0 12px;">&#x1F511;</p>
+                  <h1 style="color:#ffffff;margin:0;font-size:26px;font-weight:600;">Your Digital Code Is Ready</h1>
+                </td></tr>
+                <tr><td style="padding:40px;">
+                  <p style="color:#333;font-size:16px;line-height:1.6;margin:0 0 16px;">Hi ${userName},</p>
+                  <p style="color:#333;font-size:16px;line-height:1.6;margin:0 0 24px;">
+                    Your digital code for <strong>${productTitle}</strong> has been assigned to your order and is ready to reveal.
+                  </p>
+                  <table width="100%" cellpadding="12" cellspacing="0" border="0" style="background:#f8f9fa;border-radius:8px;margin-bottom:24px;">
+                    <tr><td style="color:#666;font-size:14px;width:40%;">Order ID</td>
+                        <td style="color:#333;font-size:14px;font-weight:600;">${orderId}</td></tr>
+                    <tr><td style="color:#666;font-size:14px;">Product</td>
+                        <td style="color:#333;font-size:14px;">${productTitle}</td></tr>
+                  </table>
+                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0;">
+                    <tr><td align="center">
+                      <a href="${orderUrl}" style="display:inline-block;padding:14px 40px;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);color:#ffffff;text-decoration:none;border-radius:6px;font-size:15px;font-weight:600;">
+                        Reveal Your Code
+                      </a>
+                    </td></tr>
+                  </table>
+                  <p style="color:#999;font-size:13px;line-height:1.6;margin:0;">For security, the code is only shown inside your ${siteName} account.</p>
+                </td></tr>
+                <tr><td style="background-color:#f8f9fa;padding:24px;text-align:center;border-top:1px solid #eee;">
+                  <p style="color:#9ca3af;font-size:12px;margin:0;">&#169; ${currentYear()} ${siteName}. All rights reserved.</p>
+                </td></tr>
+              </table>
+            </td></tr>
+          </table>
+        </body></html>`,
+            text: `Hi ${userName},\n\nYour digital code for "${productTitle}" (Order: ${orderId}) is ready to reveal.\n\nVisit your order: ${orderUrl}\n\nFor security, the code is only shown inside your ${siteName} account.\n\n© ${currentYear()} ${siteName}`,
+        });
+        if (error) {
+            serverLogger.error("Failed to send digital code claimed email", { error });
+            return { success: false };
+        }
+        return { success: true };
+    }
+    catch (error) {
+        serverLogger.error("Error sending digital code claimed email", { error });
+        return { success: false };
+    }
+}
 export async function sendSiteSettingsChangedEmail(params) {
     const siteName = getSiteName();
     const siteUrl = getSiteUrl();

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { FormShell, StepForm, StepFormActions, useFormShell } from "../../shell";
+import { FormShellProvider } from "../../../ui/forms";
 import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, Text, Toggle } from "../../../ui";
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
@@ -146,6 +147,25 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
     const [stepError, setStepError] = useState(null);
     const { isDirty, markDirty, markClean } = useFormShell();
     const router = useRouter();
+    // 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(() => { });
+        }, 2000);
+        return () => { if (autoSaveTimer.current)
+            clearTimeout(autoSaveTimer.current); };
+    }, [draft, isDirty, mode]);
     const update = useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
         markDirty();
@@ -247,12 +267,16 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
             await handlePublish();
         }
     }, [currentStep, steps, draft, handlePublish]);
+    // Step error badges — run each step's validate against current draft
+    const stepValidationErrors = useMemo(() => steps.map((s) => (s.validate ? Boolean(s.validate(draft)) : false)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [draft]);
     const breadcrumb = mode === "create" ? `Store / ${listingTypeLabel}s / New` : `Store / ${listingTypeLabel}s / Edit`;
     const title = mode === "create"
         ? `New ${listingTypeLabel}`
         : draft.title ?? `Edit ${listingTypeLabel}`;
     if (mode === "create") {
-        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: 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 }), stepError && (_jsx(Text, { className: "px-5 pb-3 text-sm text-[var(--appkit-color-error)]", children: stepError }))] })), children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading, hideActions: true }) }));
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: 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 }), stepError && (_jsx(Text, { className: "px-5 pb-3 text-sm text-[var(--appkit-color-error)]", children: stepError }))] })), children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, 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 = [
@@ -263,5 +287,5 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         ...(listingType === "digital-code" ? [{ id: "digitalcode", label: "Code Details" }] : []),
         ...(listingType === "live" ? [{ id: "live", label: "Live Item" }] : []),
     ];
-    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: _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 })] }), listingType === "auction" && (_jsxs(Section, { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs(Section, { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), listingType === "classified" && (_jsxs(Section, { id: "classified", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Meetup Details" }), _jsx(StepClassifiedSettings, { values: draft, onChange: update })] })), listingType === "digital-code" && (_jsxs(Section, { id: "digitalcode", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Code Details" }), _jsx(StepDigitalCodeSettings, { values: draft, onChange: update })] })), listingType === "live" && (_jsxs(Section, { id: "live", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Live Item Details" }), _jsx(StepLiveItemSettings, { values: draft, onChange: update })] })), _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)] pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-secondary-text)]", 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, children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, 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 })] }), listingType === "auction" && (_jsxs(Section, { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs(Section, { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), listingType === "classified" && (_jsxs(Section, { id: "classified", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Meetup Details" }), _jsx(StepClassifiedSettings, { values: draft, onChange: update })] })), listingType === "digital-code" && (_jsxs(Section, { id: "digitalcode", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Code Details" }), _jsx(StepDigitalCodeSettings, { values: draft, onChange: update })] })), listingType === "live" && (_jsxs(Section, { id: "live", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Live Item Details" }), _jsx(StepLiveItemSettings, { values: draft, onChange: update })] })), _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)] pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-secondary-text)]", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }

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

@@ -23,6 +23,8 @@ export interface StepFormProps<T extends object = Record<string, unknown>> {
     onStepChange: (step: number) => void;
     /** Suppress the built-in action bar. Use FormShell's renderBottomBar instead. */
     hideActions?: boolean;
+    /** Per-step error flags — when true, step button shows a red error badge */
+    stepErrors?: boolean[];
 }
 export interface StepFormActionsProps {
     currentStep: number;
@@ -36,11 +38,13 @@ export interface StepFormActionsProps {
 /** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
 export declare function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel, isLoading, disabled, }: StepFormActionsProps): import("react/jsx-runtime").JSX.Element;
 /** Step indicator bar shown above step content. */
-export declare function StepIndicator({ steps, currentStep, onStepClick, }: {
+export declare function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }: {
     steps: {
         label: string;
     }[];
     currentStep: number;
     onStepClick?: (index: number) => void;
+    /** True for each step that has a validation error — renders a red dot badge */
+    stepErrors?: boolean[];
 }): import("react/jsx-runtime").JSX.Element;
-export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/features/shell/StepForm.js

@@ -13,25 +13,28 @@ export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, compl
     return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(_Fragment, { children: !isFirst && onPrev && (_jsx(Button, { variant: "outline", size: "sm", onClick: onPrev, disabled: disabled || isLoading, children: "\u2190 Back" })) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-xs text-[var(--appkit-color-text-muted)]", children: [currentStep + 1, " / ", totalSteps] }), _jsx(Button, { variant: "primary", size: "sm", onClick: onNext, disabled: disabled || isLoading, isLoading: isLoading && isLast, children: isLast ? completeLabel : nextStepLabel })] })] }));
 }
 /** Step indicator bar shown above step content. */
-export function StepIndicator({ steps, currentStep, onStepClick, }) {
+export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }) {
     return (_jsx("nav", { "aria-label": "Form steps", className: "flex items-center gap-0 mb-6 overflow-x-auto", children: steps.map((step, i) => {
             const isDone = i < currentStep;
             const isActive = i === currentStep;
+            const hasError = stepErrors?.[i] === true;
             return (_jsxs("div", { className: "flex items-center gap-0 flex-shrink-0", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
                             ? "font-semibold text-[var(--appkit-color-primary)]"
                             : isDone
                                 ? "text-[var(--appkit-color-text-muted)] cursor-pointer hover:text-[var(--appkit-color-text)]"
-                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", isActive
-                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                    : isDone
-                                        ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                        : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone ? _jsx(Check, { className: "w-3 h-3" }) : i + 1 }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
+                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs("span", { className: "relative flex-shrink-0", children: [hasError && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--appkit-color-error)] z-10", "aria-label": "This step has errors" })), _jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
+                                            ? "border-[var(--appkit-color-error)] bg-[var(--appkit-color-error)] text-white"
+                                            : isActive
+                                                ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                : isDone
+                                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone && !hasError ? _jsx(Check, { className: "w-3 h-3" }) : hasError ? "!" : i + 1 })] }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
                             ? "bg-[var(--appkit-color-primary)]"
                             : "bg-[var(--appkit-color-border)]") }))] }, i));
         }) }));
 }
-export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, }) {
-    const [stepErrors, setStepErrors] = useState({});
+export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, }) {
+    const [fieldErrors, setFieldErrors] = useState({});
     const [stepError, setStepError] = useState(null);
     // Persist step to localStorage if formId provided
     useEffect(() => {
@@ -75,8 +78,8 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
     }, [currentStep, onStepChange]);
     const currentStepDef = steps[currentStep];
     const isLast = currentStep === steps.length - 1;
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, onStepClick: (i) => { if (i < currentStep) {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i < currentStep) {
                     setStepError(null);
                     onStepChange(i);
-                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: stepErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
+                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
 }