@mohasinac/appkit 2.7.44 → 2.7.46

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

@@ -33,7 +33,7 @@ import { cartIsDigitalOnly } from "../../../shared/listing-types/cart-shipping";
  * verifies in a micro-transaction. Fire-and-forget safe (logs on exhaustion
  * but never fails the already-created order).
  */
-async function claimDigitalCodeForOrder(db, productId, orderId, userId) {
+async function claimDigitalCodeForOrder(db, productId, orderId, userId, opts) {
     const codesRef = db
         .collection(PRODUCT_COLLECTION)
         .doc(productId)
@@ -44,6 +44,7 @@ async function claimDigitalCodeForOrder(db, productId, orderId, userId) {
         return;
     }
     const codeRef = snap.docs[0].ref;
+    let claimed = false;
     await db.runTransaction(async (tx) => {
         const latest = await tx.get(codeRef);
         if (!latest.exists || latest.data()?.status !== "available")
@@ -55,7 +56,17 @@ async function claimDigitalCodeForOrder(db, productId, orderId, userId) {
             claimedAt: new Date(),
             updatedAt: new Date(),
         });
+        claimed = true;
     });
+    if (claimed && opts?.userEmail) {
+        const { sendDigitalCodeClaimedEmail } = await import("../../../../features/contact/server");
+        sendDigitalCodeClaimedEmail({
+            to: opts.userEmail,
+            userName: opts.userName ?? "there",
+            productTitle: opts.productTitle ?? "your product",
+            orderId,
+        }).catch((e) => serverLogger.error("claimDigitalCode: email failed", e));
+    }
 }
 /**
  * SB-UNI-O — Live-item jurisdiction guard.
@@ -503,7 +514,11 @@ export async function createCheckoutOrderAction(input) {
         // SB-UNI-N — claim a digital code for digital-code orders (fire-and-forget,
         // order is already persisted so a claim failure is logged, not thrown).
         if ((group[0]?.product?.listingType ?? "standard") === "digital-code") {
-            claimDigitalCodeForOrder(getAdminDb(), firstItem.productId, order.id, uid).catch((e) => serverLogger.error("claimDigitalCode", e));
+            claimDigitalCodeForOrder(getAdminDb(), firstItem.productId, order.id, uid, {
+                userEmail: userEmail || undefined,
+                userName,
+                productTitle: firstItem.productTitle,
+            }).catch((e) => serverLogger.error("claimDigitalCode", e));
         }
         for (const code of groupCouponCodes) {
             const entry = couponUsageAccumulator.get(code);
@@ -878,7 +893,11 @@ export async function verifyAndPlaceRazorpayOrderAction(input) {
         // SB-UNI-N — claim a digital code for digital-code orders (fire-and-forget,
         // order is already persisted so a claim failure is logged, not thrown).
         if ((group[0]?.product?.listingType ?? "standard") === "digital-code") {
-            claimDigitalCodeForOrder(getAdminDb(), firstItem.productId, order.id, uid).catch((e) => serverLogger.error("claimDigitalCode", e));
+            claimDigitalCodeForOrder(getAdminDb(), firstItem.productId, order.id, uid, {
+                userEmail: userEmail || undefined,
+                userName,
+                productTitle: firstItem.productTitle,
+            }).catch((e) => serverLogger.error("claimDigitalCode", e));
         }
         if (userEmail) {
             emailsToSend.push({

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

@@ -63,6 +63,13 @@ export async function setProductStatusAction(input) {
         throw new ValidationError(parsed.error.issues[0]?.message ?? "Invalid input");
     const product = await assertProductOwnership(parsed.data.productId, user.uid);
     assertStatusTransition(product.status, parsed.data.status);
+    // SB-UNI-O — live listings must be admin-verified before a seller can publish them.
+    if (parsed.data.status === "published" &&
+        (product.listingType ?? "standard") === "live" &&
+        !product.liveItem?.vendorVerified &&
+        user.role !== "admin") {
+        throw new ValidationError("Live listings require admin verification before publishing. Contact support to request verification.");
+    }
     return productRepository.update(parsed.data.productId, { status: parsed.data.status });
 }
 export async function setProductFeaturedAction(input) {

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

@@ -17,7 +17,10 @@ import { randomUUID } from "crypto";
 import { getProviders } from "../../../../contracts/registry";
 import { orderRepository } from "../../../..";
 import { NotFoundError, ValidationError } from "../../../../errors";
+import { serverLogger } from "../../../../monitoring";
 import { applyRefundDeductionAction } from "../payouts/actions";
+import { getAdminDb } from "../../../../providers/db-firebase";
+import { PRODUCT_COLLECTION, PRODUCT_CODES_SUBCOLLECTION, } from "../../../../features/products/schemas/firestore";
 export async function processRefundAction(input) {
     const order = await orderRepository.findById(input.orderId);
     if (!order)
@@ -31,6 +34,26 @@ export async function processRefundAction(input) {
     if (order.isNonRefundable) {
         throw new ValidationError("This order is marked non-refundable and cannot be refunded.");
     }
+    // SB-UNI-N — digital-code refund gate: block if code is already claimed (revealed).
+    const digitalCodeItems = (order.items ?? []).filter((i) => (i.listingType ?? "standard") === "digital-code");
+    if (digitalCodeItems.length > 0) {
+        const db = getAdminDb();
+        for (const item of digitalCodeItems) {
+            const codesSnap = await db
+                .collection(PRODUCT_COLLECTION)
+                .doc(item.productId)
+                .collection(PRODUCT_CODES_SUBCOLLECTION)
+                .where("orderId", "==", input.orderId)
+                .limit(1)
+                .get();
+            if (!codesSnap.empty) {
+                const codeStatus = codesSnap.docs[0].data()?.status;
+                if (codeStatus === "claimed") {
+                    throw new ValidationError("The digital code for this order has already been revealed and cannot be refunded automatically. Please contact support.");
+                }
+            }
+        }
+    }
     const refundId = randomUUID();
     const now = new Date();
     let razorpayRefundId;
@@ -62,6 +85,27 @@ export async function processRefundAction(input) {
             : {}),
     };
     await orderRepository.postRefundEvent(input.orderId, event, isFull);
+    // SB-UNI-N — revoke any available (unclaimed) digital codes linked to this order.
+    if (digitalCodeItems.length > 0) {
+        const db = getAdminDb();
+        for (const item of digitalCodeItems) {
+            db.collection(PRODUCT_COLLECTION)
+                .doc(item.productId)
+                .collection(PRODUCT_CODES_SUBCOLLECTION)
+                .where("orderId", "==", input.orderId)
+                .where("status", "==", "available")
+                .limit(1)
+                .get()
+                .then((snap) => {
+                if (!snap.empty) {
+                    snap.docs[0].ref
+                        .update({ status: "revoked", updatedAt: new Date() })
+                        .catch((e) => serverLogger.error("refund: code revoke failed", e));
+                }
+            })
+                .catch((e) => serverLogger.error("refund: code query failed", e));
+        }
+    }
     // Fire-and-forget: deduct from the store's pending payout if one exists.
     // Failure here must not roll back the already-posted refund event.
     if (order.storeId) {

package/dist/client.d.ts

@@ -57,8 +57,8 @@ export { OtpInput } from "./ui/components/OtpInput";
 export type { OtpInputProps } from "./ui/components/OtpInput";
 export { DateInput, DateRangeInput } from "./ui/components/DateInput";
 export type { DateInputProps, DateRangeInputProps } from "./ui/components/DateInput";
-export type { FormShellProps, FormShellStep, FormShellContextValue } from "./ui/forms";
-export { FormShell, useFormShell } from "./ui/forms";
+export type { FormShellProps, FormShellProviderProps, FormShellStep, FormShellContextValue, UseFormShellStateResult } from "./ui/forms";
+export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState } from "./ui/forms";
 export type { FieldInputProps } from "./ui/forms";
 export { FieldInput } from "./ui/forms";
 export type { FieldSelectProps } from "./ui/forms";

package/dist/client.js

@@ -123,7 +123,7 @@ export { Checkbox } from "./ui/components/Checkbox";
 export { Input } from "./ui/components/Input";
 export { OtpInput } from "./ui/components/OtpInput";
 export { DateInput, DateRangeInput } from "./ui/components/DateInput";
-export { FormShell, useFormShell } from "./ui/forms";
+export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState } from "./ui/forms";
 export { FieldInput } from "./ui/forms";
 export { FieldSelect } from "./ui/forms";
 export { FieldCheckbox } from "./ui/forms";

package/dist/features/account/components/AddressForm.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Checkbox, FormField, FormGroup } from "../../../ui";
+import { useFormShellState } from "../../../ui/forms";
 import { THEME_CONSTANTS } from "../../../tokens";
 const DEFAULT_LABELS = {
     label: "Address Label",
@@ -33,6 +34,7 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
     const mergedLabels = { ...DEFAULT_LABELS, ...labels };
     const mergedPlaceholders = { ...DEFAULT_PLACEHOLDERS, ...placeholders };
     const effectiveSubmitLabel = submitLabel ?? mergedLabels.save;
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const [formData, setFormData] = useState({
         label: initialData?.label || "",
         fullName: initialData?.fullName || "",
@@ -47,10 +49,30 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
     });
     const handleChange = (field, value) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
+        if (typeof value === "string" && value.trim())
+            setFieldError(field, null);
     };
     const handleSubmit = async (e) => {
         e.preventDefault();
+        clearErrors();
+        const errs = {};
+        if (!formData.fullName.trim())
+            errs["fullName"] = "Full name is required";
+        if (!formData.phone.trim())
+            errs["phone"] = "Phone number is required";
+        if (!formData.addressLine1.trim())
+            errs["addressLine1"] = "Address is required";
+        if (!formData.city.trim())
+            errs["city"] = "City is required";
+        if (!formData.state.trim())
+            errs["state"] = "State is required";
+        if (!formData.postalCode.trim())
+            errs["postalCode"] = "Postal code is required";
+        if (Object.keys(errs).length > 0) {
+            Object.entries(errs).forEach(([k, v]) => setFieldError(k, v));
+            return;
+        }
         await onSubmit(formData);
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs("div", { className: `flex items-center justify-start ${THEME_CONSTANTS.spacing.gap.xs} pt-2`, "data-section": "addressform-div-223", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true, error: shellCtx.errors["fullName"] }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true, error: shellCtx.errors["phone"] }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true, error: shellCtx.errors["addressLine1"] }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true, error: shellCtx.errors["city"] }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true, error: shellCtx.errors["state"] }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true, error: shellCtx.errors["postalCode"] })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs("div", { className: `flex items-center justify-start ${THEME_CONSTANTS.spacing.gap.xs} pt-2`, "data-section": "addressform-div-223", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
 }

package/dist/features/admin/components/AdminBlogEditorView.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, RichTextEditor, Select, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -57,6 +58,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     const [metaDescription, setMetaDescription] = React.useState("");
     const { showToast } = useToast();
     const { upload } = useMediaUpload();
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     // --- load existing post (edit mode) ---
     const postQuery = useQuery({
         queryKey: ["admin", "blog", postId],
@@ -146,17 +148,22 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     });
     const isSubmitting = saveMutation.isPending || postQuery.isLoading;
     const canSave = Boolean(title);
-    const formSection = (_jsxs(Form, { onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, className: "space-y-5", children: [_jsx(Input, { label: "Title", value: title, onChange: (e) => handleTitleChange(e.target.value), required: true, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                    setSlug(e.target.value);
-                    setSlugManual(true);
-                }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: (v) => setCategory(v) }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: (v) => setStatus(v) })] }), _jsx(Input, { label: "Excerpt", value: excerpt, onChange: (e) => setExcerpt(e.target.value), placeholder: "Short summary shown in listings and cards" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "blog", true, { type: "blog-cover", title: title || slug, category }), onChange: setCoverImage }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Content" }), _jsx(RichTextEditor, { value: content, onChange: setContent, placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. pokemon, grading, tcg" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Author name", value: authorName, onChange: (e) => setAuthorName(e.target.value), placeholder: "Author display name" }), _jsx(Input, { label: "Publish date (optional)", value: publishedAt, onChange: (e) => setPublishedAt(e.target.value), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Toggle, { label: "Featured post", checked: isFeatured, onChange: setIsFeatured }), _jsx(Input, { label: "Meta title (optional)", value: metaTitle, onChange: (e) => setMetaTitle(e.target.value), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta description (optional)", value: metaDescription, onChange: (e) => setMetaDescription(e.target.value), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create post" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                            if (confirm("Delete this post? This cannot be undone.")) {
-                                deleteMutation.mutate();
-                            }
-                        }, children: "Delete post" }))] })] }, "blog-form"));
+    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                clearErrors();
+                if (!title.trim()) {
+                    setFieldError("title", "Title is required");
+                    return;
+                }
+                saveMutation.mutate();
+            }, className: "space-y-5", children: [_jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => handleTitleChange(v), required: true, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                        setSlug(e.target.value);
+                        setSlugManual(true);
+                    }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: (v) => setCategory(v) }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: (v) => setStatus(v) })] }), _jsx(Input, { label: "Excerpt", value: excerpt, onChange: (e) => setExcerpt(e.target.value), placeholder: "Short summary shown in listings and cards" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "blog", true, { type: "blog-cover", title: title || slug, category }), onChange: setCoverImage }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Content" }), _jsx(RichTextEditor, { value: content, onChange: setContent, placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. pokemon, grading, tcg" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Author name", value: authorName, onChange: (e) => setAuthorName(e.target.value), placeholder: "Author display name" }), _jsx(Input, { label: "Publish date (optional)", value: publishedAt, onChange: (e) => setPublishedAt(e.target.value), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Toggle, { label: "Featured post", checked: isFeatured, onChange: setIsFeatured }), _jsx(Input, { label: "Meta title (optional)", value: metaTitle, onChange: (e) => setMetaTitle(e.target.value), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta description (optional)", value: metaDescription, onChange: (e) => setMetaDescription(e.target.value), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create post" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                if (confirm("Delete this post? This cannot be undone.")) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete post" }))] })] }, "blog-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
     }

package/dist/features/admin/components/AdminBrandEditorView.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, Toggle, useToast, } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -23,6 +24,7 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     const [isActive, setIsActive] = React.useState(true);
     const [displayOrder, setDisplayOrder] = React.useState("");
     const { showToast } = useToast();
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const brandQuery = useQuery({
         queryKey: ["admin", "brand", brandId],
         queryFn: async () => {
@@ -88,17 +90,22 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     });
     const { upload } = useMediaUpload();
     const isSubmitting = saveMutation.isPending || brandQuery.isLoading;
-    const formSection = (_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: "Brand name", value: name, onChange: (e) => handleNameChange(e.target.value), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                            setSlug(e.target.value);
-                            setSlugManual(true);
-                        }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                            if (confirm("Delete this brand? This cannot be undone.")) {
-                                deleteMutation.mutate();
-                            }
-                        }, children: "Delete brand" }))] })] }, "brand-form"));
+    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                clearErrors();
+                if (!name.trim()) {
+                    setFieldError("name", "Brand 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: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                                setSlug(e.target.value);
+                                setSlugManual(true);
+                            }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                if (confirm("Delete this brand? This cannot be undone.")) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete brand" }))] })] }, "brand-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
     }

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Alert, Button, Form, FormActions, Input, Select, StackedViewShell, Toggle, Div, Text, Heading, Row, } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const CLS_PANEL = "rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 space-y-3";
@@ -103,6 +104,7 @@ export function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel,
     const [overlayBtnNewTab, setOverlayBtnNewTab] = React.useState(false);
     const [errorMsg, setErrorMsg] = React.useState("");
     const [successMsg, setSuccessMsg] = React.useState("");
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const slideQuery = useQuery({
         queryKey: ["admin", "carousel", slideId],
         queryFn: async () => {
@@ -195,13 +197,21 @@ export function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel,
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Carousel Slide" : "New Carousel Slide", sections: [
             errorMsg ? _jsx(Alert, { variant: "error", children: errorMsg }, "err") : null,
             successMsg ? _jsx(Alert, { variant: "success", children: successMsg }, "ok") : null,
-            _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); saveMutation.mutate(); }, className: "space-y-6", children: [_jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Slide info" }), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Background" }), _jsx(BackgroundEditor, { value: background, onChange: setBackground, prefix: "slide" })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Overlay text (optional)" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pok\u00E9mon TCG \u00B7 Hot Wheels \u00B7 Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 space-y-2", children: [_jsx(Text, { className: "text-sm font-medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: "/products" }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Cards (0\u20132)" }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
-                                            const usedZones = cards.map((c) => c.zone);
-                                            const freeZone = [1, 2, 3, 4, 5, 6].find((z) => !usedZones.includes(z)) ?? 1;
-                                            setCards([...cards, makeCard(freeZone)]);
-                                        }, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { className: "text-sm text-zinc-400", children: "No cards \u2014 the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !title || saveMutation.isPending, children: isEdit ? "Save changes" : "Create slide" }), onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" })), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                    if (confirm("Delete this slide? This cannot be undone."))
-                                        deleteMutation.mutate();
-                                }, children: "Delete slide" }))] })] }, "slide-form"),
+            _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                        e.preventDefault();
+                        clearErrors();
+                        if (!title.trim()) {
+                            setFieldError("title", "Title is required");
+                            return;
+                        }
+                        saveMutation.mutate();
+                    }, className: "space-y-6", children: [_jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Slide info" }), _jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => setTitle(v), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Background" }), _jsx(BackgroundEditor, { value: background, onChange: setBackground, prefix: "slide" })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Overlay text (optional)" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pok\u00E9mon TCG \u00B7 Hot Wheels \u00B7 Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 space-y-2", children: [_jsx(Text, { className: "text-sm font-medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: "/products" }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Cards (0\u20132)" }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                                const usedZones = cards.map((c) => c.zone);
+                                                const freeZone = [1, 2, 3, 4, 5, 6].find((z) => !usedZones.includes(z)) ?? 1;
+                                                setCards([...cards, makeCard(freeZone)]);
+                                            }, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { className: "text-sm text-zinc-400", children: "No cards \u2014 the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !title || saveMutation.isPending, children: isEdit ? "Save changes" : "Create slide" }), onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" })), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                        if (confirm("Delete this slide? This cannot be undone."))
+                                            deleteMutation.mutate();
+                                    }, children: "Delete slide" }))] })] }, "slide-form") }),
         ] }));
 }

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

@@ -6,6 +6,7 @@ import { Button, Card, CardBody, ConfirmDeleteModal, Form, InlineCreateSelect, I
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 async function loadCategoryOptions(query, page) {
     const params = new URLSearchParams({ page: String(page), pageSize: "25" });
     if (query)
@@ -38,6 +39,7 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
     const [isActive, setIsActive] = React.useState(true);
     const [showInMenu, setShowInMenu] = React.useState(true);
     const { showToast } = useToast();
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const categoryQuery = useQuery({
         queryKey: ["admin", "category", categoryId],
         queryFn: async () => {
@@ -101,17 +103,22 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
     });
     const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
     const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", className: "space-y-3", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: isEdit ? (isActive ? "Active" : "Inactive") : "New" }), _jsx(Button, { type: "submit", form: "category-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] }));
-    const formContent = (_jsxs(Form, { id: "category-editor-form", onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Identity" }), _jsxs("div", { 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) => handleNameChange(e.target.value), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                            setSlug(e.target.value);
-                                            setSlugManual(true);
-                                        }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Parent category" }), _jsx(InlineCreateSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Display" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", 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? Products in this category will become uncategorized.")) {
-                                deleteMutation.mutate();
-                            }
-                        }, children: "Delete category" }))] })] }, "cat-form"));
+    const formContent = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { id: "category-editor-form", onSubmit: (e) => {
+                e.preventDefault();
+                clearErrors();
+                if (!name.trim()) {
+                    setFieldError("name", "Category name is required");
+                    return;
+                }
+                saveMutation.mutate();
+            }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Identity" }), _jsxs("div", { 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) => handleNameChange(v), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                                                setSlug(e.target.value);
+                                                setSlugManual(true);
+                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Parent category" }), _jsx(InlineCreateSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Display" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", 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? Products in this category will become uncategorized.")) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete category" }))] })] }, "cat-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
     }

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Button, Form, Input, Select, StackedViewShell, Toggle, useToast, } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const TYPE_OPTIONS = [
@@ -60,6 +61,7 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
     const [combinable, setCombinable] = React.useState(false);
     const [appliesToAuctions, setAppliesToAuctions] = React.useState(false);
     const { showToast } = useToast();
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     // --- load existing data (edit mode) ---
     const couponQuery = useQuery({
         queryKey: ["admin", "coupon", couponId],
@@ -169,17 +171,22 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
         : type === "fixed"
             ? "Discount amount (paise)"
             : "Discount value";
-    const formSection = (_jsxs(Form, { onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, className: "space-y-5", children: [_jsx(Select, { label: "Coupon type", options: TYPE_OPTIONS, value: type, onValueChange: (v) => setType(v), required: true }), _jsx(Input, { label: "Campaign name", value: name, onChange: (e) => handleNameChange(e.target.value), required: true, placeholder: "e.g. Summer Sale 20%" }), !isEdit && (_jsx(Input, { label: "Coupon code", value: code, onChange: (e) => {
-                    setCode(toCouponCode(e.target.value));
-                    setCodeManual(true);
-                }, required: true, placeholder: "e.g. SUMMER20", helperText: "Auto-generated from name. Uppercase alphanumeric + hyphens only." })), isEdit && (_jsx(Input, { label: "Coupon code", value: code, disabled: true, helperText: "Code cannot be changed after creation." })), _jsx(Input, { label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Internal notes about this coupon" }), _jsx(CouponDiscountFields, { type: type, discountValue: discountValue, setDiscountValue: setDiscountValue, maxDiscount: maxDiscount, setMaxDiscount: setMaxDiscount, minPurchase: minPurchase, setMinPurchase: setMinPurchase, buyQty: buyQty, setBuyQty: setBuyQty, getQty: getQty, setGetQty: setGetQty, discountLabel: discountLabel }), _jsx(CouponValidityFields, { startDate: startDate, setStartDate: setStartDate, endDate: endDate, setEndDate: setEndDate, isActive: isActive, setIsActive: setIsActive, totalLimit: totalLimit, setTotalLimit: setTotalLimit, perUserLimit: perUserLimit, setPerUserLimit: setPerUserLimit, isEdit: isEdit, currentUsage: currentUsage }), _jsx(Toggle, { label: "First-time users only", checked: firstTimeOnly, onChange: setFirstTimeOnly }), _jsx(Toggle, { label: "Allow stacking with seller coupons", checked: combinable, onChange: setCombinable }), _jsx(Toggle, { label: "Applies to auctions", checked: appliesToAuctions, onChange: setAppliesToAuctions }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create coupon" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                            if (confirm("Delete this coupon? This cannot be undone.")) {
-                                deleteMutation.mutate();
-                            }
-                        }, children: "Delete coupon" }))] })] }, "coupon-form"));
+    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                clearErrors();
+                if (!name.trim()) {
+                    setFieldError("name", "Campaign name is required");
+                    return;
+                }
+                saveMutation.mutate();
+            }, className: "space-y-5", children: [_jsx(Select, { label: "Coupon type", options: TYPE_OPTIONS, value: type, onValueChange: (v) => setType(v), required: true }), _jsx(FieldInput, { name: "name", label: "Campaign name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Summer Sale 20%" }), !isEdit && (_jsx(Input, { label: "Coupon code", value: code, onChange: (e) => {
+                        setCode(toCouponCode(e.target.value));
+                        setCodeManual(true);
+                    }, required: true, placeholder: "e.g. SUMMER20", helperText: "Auto-generated from name. Uppercase alphanumeric + hyphens only." })), isEdit && (_jsx(Input, { label: "Coupon code", value: code, disabled: true, helperText: "Code cannot be changed after creation." })), _jsx(Input, { label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Internal notes about this coupon" }), _jsx(CouponDiscountFields, { type: type, discountValue: discountValue, setDiscountValue: setDiscountValue, maxDiscount: maxDiscount, setMaxDiscount: setMaxDiscount, minPurchase: minPurchase, setMinPurchase: setMinPurchase, buyQty: buyQty, setBuyQty: setBuyQty, getQty: getQty, setGetQty: setGetQty, discountLabel: discountLabel }), _jsx(CouponValidityFields, { startDate: startDate, setStartDate: setStartDate, endDate: endDate, setEndDate: setEndDate, isActive: isActive, setIsActive: setIsActive, totalLimit: totalLimit, setTotalLimit: setTotalLimit, perUserLimit: perUserLimit, setPerUserLimit: setPerUserLimit, isEdit: isEdit, currentUsage: currentUsage }), _jsx(Toggle, { label: "First-time users only", checked: firstTimeOnly, onChange: setFirstTimeOnly }), _jsx(Toggle, { label: "Allow stacking with seller coupons", checked: combinable, onChange: setCombinable }), _jsx(Toggle, { label: "Applies to auctions", checked: appliesToAuctions, onChange: setAppliesToAuctions }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create coupon" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                if (confirm("Delete this coupon? This cannot be undone.")) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete coupon" }))] })] }, "coupon-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
     }

package/dist/features/admin/components/AdminFaqEditorView.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, RichTextEditor, Select, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 // --- Constants ---------------------------------------------------------------
@@ -38,6 +39,7 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
     const [showOnHomepage, setShowOnHomepage] = React.useState(false);
     const [showInFooter, setShowInFooter] = React.useState(false);
     const { showToast } = useToast();
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     // --- load existing FAQ (edit mode) ---
     const faqQuery = useQuery({
         queryKey: ["admin", "faqs", faqId],
@@ -112,17 +114,22 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
     });
     const isSubmitting = saveMutation.isPending || faqQuery.isLoading;
     const canSave = Boolean(question.trim()) && Boolean(answer.trim());
-    const formSection = (_jsxs(Form, { onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, className: "space-y-5", children: [_jsx(Input, { label: "Question", value: question, onChange: (e) => handleQuestionChange(e.target.value), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                    setSlug(e.target.value);
-                    setSlugManual(true);
-                }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs("div", { className: "space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                            if (confirm("Delete this FAQ? This cannot be undone.")) {
-                                deleteMutation.mutate();
-                            }
-                        }, children: "Delete FAQ" }))] })] }, "faq-form"));
+    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                clearErrors();
+                if (!question.trim()) {
+                    setFieldError("question", "Question is required");
+                    return;
+                }
+                saveMutation.mutate();
+            }, className: "space-y-5", children: [_jsx(FieldInput, { name: "question", label: "Question", value: question, onChange: (v) => handleQuestionChange(v), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                        setSlug(e.target.value);
+                        setSlugManual(true);
+                    }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs("div", { className: "space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                if (confirm("Delete this FAQ? This cannot be undone.")) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete FAQ" }))] })] }, "faq-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
     }