@mohasinac/appkit 4.21.0 → 4.22.0

package/dist/client.d.ts

@@ -164,6 +164,11 @@ export type { ColorPickerFieldProps } from "./ui/forms";
 export { ColorPickerField } from "./ui/forms";
 export type { FormErrorSummaryProps } from "./ui/forms";
 export { FormErrorSummary } from "./ui/forms";
+export type { FormErrorListProps } from "./ui/forms";
+export { FormErrorList } from "./ui/forms";
+export { useFormBottomActions } from "./features/layout/index";
+export type { UseFormBottomActionsOptions } from "./features/layout/index";
+export { OverlayContext, useIsInsideOverlay } from "./ui/components/overlay-context";
 export { Select } from "./ui/components/Select";
 export type { SelectOption, SelectProps } from "./ui/components/Select";
 export { Heading } from "./ui/components/Typography";

package/dist/client.js

@@ -222,6 +222,9 @@ export { FieldCheckbox } from "./ui/forms";
 export { FieldTextarea } from "./ui/forms";
 export { ColorPickerField } from "./ui/forms";
 export { FormErrorSummary } from "./ui/forms";
+export { FormErrorList } from "./ui/forms";
+export { useFormBottomActions } from "./features/layout/index";
+export { OverlayContext, useIsInsideOverlay } from "./ui/components/overlay-context";
 export { Select } from "./ui/components/Select";
 export { Heading } from "./ui/components/Typography";
 export { Label, Text, Span, Caption } from "./ui/components/Typography";

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import { Button, Checkbox, FormField, FormGroup, Row, useToast } from "../../../ui";
 import { Form } from "../../../ui/components/Form";
@@ -64,7 +64,43 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
         country: initialData?.country || defaultCountry,
         isDefault: initialData?.isDefault || false,
     });
-    const { shellCtx, validate } = useFormShellState(addressFormSchema);
+    const { shellCtx, validate, setFieldError, clearErrors, markSubmitAttempted } = useFormShellState(addressFormSchema);
+    /*
+     * ONE submit path, shared by the inline Save button and the pinned mobile
+     * bar. Two copies would be two chances for the bar to skip a check the
+     * button performs — and the bar is the one a phone user actually presses,
+     * since the inline row sits below the fold on a form this long.
+     */
+    const submitAddress = useCallback(async (h) => {
+        const setErr = h?.setFieldError ?? setFieldError;
+        const clear = h?.clearErrors ?? clearErrors;
+        markSubmitAttempted();
+        clear();
+        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]) => setErr(k, v));
+            return;
+        }
+        try {
+            await onSubmit(formData);
+        }
+        catch (err) {
+            void normalizeError(err);
+            showToast(err instanceof Error ? err.message : "Failed to save address", "error");
+        }
+    }, [formData, onSubmit, showToast, setFieldError, clearErrors, markSubmitAttempted]);
     useEffect(() => {
         validate(formData);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,31 +108,11 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
     const handleChange = (field, value) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
     };
-    return (_jsx(Form, { onSubmit: (e) => e.preventDefault(), spacing: "md", shellCtx: shellCtx, children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { 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 }), _jsx(FormErrorSummary, {}), _jsxs(Row, { padding: "t-xs", align: "center", justify: "start", gap: "xs", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, isLoading: isLoading, onClick: async () => {
-                                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;
-                                }
-                                try {
-                                    await onSubmit(formData);
-                                }
-                                catch (err) {
-                                    void normalizeError(err);
-                                    showToast(err instanceof Error ? err.message : "Failed to save address", "error");
-                                }
-                            }, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] })) }));
+    return (_jsx(Form, { onSubmit: (e) => e.preventDefault(), spacing: "md", shellCtx: shellCtx, bottomBar: {
+            onSubmit: submitAddress,
+            onCancel,
+            submitLabel: effectiveSubmitLabel,
+            cancelLabel: mergedLabels.cancel,
+            isLoading,
+        }, children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { 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 }), _jsx(FormErrorSummary, {}), _jsxs(Row, { padding: "t-xs", align: "center", justify: "start", gap: "xs", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, isLoading: isLoading, onClick: () => void submitAddress({ setFieldError, clearErrors }), children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] })) }));
 }

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

@@ -142,6 +142,9 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
         };
     }, [bundleId, endpoints]);
     const handleSave = useCallback(async () => {
+        // Save is a type="button" onClick — <Form>'s native submit never fires,
+        // so the error summary has to be unhidden explicitly.
+        formHelpersRef.current?.markSubmitAttempted();
         clearErrors();
         setApiError(null);
         const price = parsePriceRupees(form.priceRupees);

package/dist/features/auctions/components/PlaceBidFormClient.js

@@ -183,7 +183,7 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
     return (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Current bid" : "Starting bid" }), _jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Starting bid" : "Minimum bid" })] }), _jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { size: "xl", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsx(Span, { size: "sm", color: "muted", children: formatCurrency(hasBids ? startingBid : minBid, currency) })] }), _jsxs(Text, { size: "xs", color: "faint", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", " \u00B7 min increment", " ", formatCurrency(minBidIncrement, currency)] })] }), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to place a bid. Please log in or create an account to continue." }), _jsx(Form, { schema: schema, onSubmit: (e) => {
                     // handler wired through render-prop below — keeps setFieldError in scope
                     e.preventDefault();
-                }, children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "sm", children: [_jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "xs", wrap: true, role: "radiogroup", "aria-label": "Bid amount preset", children: [BID_PRESET_MULTIPLIERS.map((n) => {
+                }, children: ({ setFieldError, clearErrors, markSubmitAttempted }) => (_jsxs(Stack, { gap: "sm", children: [_jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "xs", wrap: true, role: "radiogroup", "aria-label": "Bid amount preset", children: [BID_PRESET_MULTIPLIERS.map((n) => {
                                     const amount = presetAmount(n);
                                     const delta = amount - currentBid;
                                     // `delta` is 0 only for the opening preset on a bid-free
@@ -204,6 +204,8 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
                                 : hasBids
                                     ? `Minimum next bid ${formatCurrency(minBid, currency)} (current bid + ${formatCurrency(minBidIncrement, currency)} increment).`
                                     : `Minimum opening bid ${formatCurrency(minBid, currency)} — the seller's starting bid. The ${formatCurrency(minBidIncrement, currency)} increment applies from the second bid on.` }), success && (_jsx(Text, { className: "text-success", size: "xs", children: "\u2713 Bid placed successfully!" })), !isEnded && auctionEndDate && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: auctionEndDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded || isPending, isLoading: isPending, type: "button", onClick: () => {
+                                // type="button" — no native submit, so unhide the summary here.
+                                markSubmitAttempted();
                                 clearErrors();
                                 const parsed = schema.safeParse({ bidAmount });
                                 if (!parsed.success)

package/dist/features/catalogue/components/CatalogueItemEditorView.js

@@ -62,7 +62,9 @@ export function CatalogueItemEditorView({ item, onSaved }) {
             onSaved?.(saved.id);
         },
     });
-    return (_jsx(Form, { schema: createCatalogueItemSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(Stack, { gap: "md", children: [item?.listingStatus && item.listingStatus !== "not_listed" && (_jsxs(Alert, { variant: "info", children: ["This item is ", item.listingStatus.replace(/_/g, " "), item.listingStatus === "rejected" && item.rejectionReason ? `: ${item.rejectionReason}` : "."] })), _jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "title", label: "Title", required: true, value: title, onChange: setTitle }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: condition, onChange: setCondition, options: CONDITION_OPTIONS }), _jsx(FieldInput, { name: "price", label: "Estimated resale price (\u20B9)", type: "number", min: "0", value: price, onChange: setPrice }), _jsx(FieldInput, { name: "quantity", label: "Quantity", type: "number", min: "1", value: quantity, onChange: setQuantity })] }), _jsx(FieldTextarea, { name: "description", label: "Description", value: description, onChange: setDescription, rows: 3 }), _jsx(MediaUploadList, { label: "Photos", value: galleryFields, onChange: (fields) => setImages(fields.map((f) => f.url)), onUpload: handleUpload, accept: "image/*", maxItems: 8, helperText: "Photos older than 30 days must be refreshed before this item can be listed." }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Toggle, { checked: visibility === "public", onChange: (checked) => setVisibility(checked ? "public" : "private"), size: "sm" }), _jsx(Span, { children: visibility === "public" ? "Public — visible on your profile" : "Private — only you can see it" })] }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
+    return (_jsx(Form, { schema: createCatalogueItemSchema, spacing: "md", children: ({ setFieldError, markSubmitAttempted }) => (_jsxs(Stack, { gap: "md", children: [item?.listingStatus && item.listingStatus !== "not_listed" && (_jsxs(Alert, { variant: "info", children: ["This item is ", item.listingStatus.replace(/_/g, " "), item.listingStatus === "rejected" && item.rejectionReason ? `: ${item.rejectionReason}` : "."] })), _jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "title", label: "Title", required: true, value: title, onChange: setTitle }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: condition, onChange: setCondition, options: CONDITION_OPTIONS }), _jsx(FieldInput, { name: "price", label: "Estimated resale price (\u20B9)", type: "number", min: "0", value: price, onChange: setPrice }), _jsx(FieldInput, { name: "quantity", label: "Quantity", type: "number", min: "1", value: quantity, onChange: setQuantity })] }), _jsx(FieldTextarea, { name: "description", label: "Description", value: description, onChange: setDescription, rows: 3 }), _jsx(MediaUploadList, { label: "Photos", value: galleryFields, onChange: (fields) => setImages(fields.map((f) => f.url)), onUpload: handleUpload, accept: "image/*", maxItems: 8, helperText: "Photos older than 30 days must be refreshed before this item can be listed." }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Toggle, { checked: visibility === "public", onChange: (checked) => setVisibility(checked ? "public" : "private"), size: "sm" }), _jsx(Span, { children: visibility === "public" ? "Public — visible on your profile" : "Private — only you can see it" })] }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
+                        // type="button" — no native submit, so unhide the summary here.
+                        markSubmitAttempted();
                         const parsed = createCatalogueItemSchema.safeParse({
                             title,
                             images,

package/dist/features/layout/BottomActions.js

@@ -114,7 +114,7 @@ export default function BottomActions() {
         setPickerOpen(false);
         setInfoOpen(false);
     });
-    const { actions, bulk, infoLabel, secondaryLabel, infoPanel, desktop } = state;
+    const { actions, bulk, infoLabel, secondaryLabel, infoPanel, infoOpenSignal, desktop } = state;
     // Desktop reveal-on-scroll. Kept as a plain passive listener to match BackToTop —
     // there is no shared scroll-position hook in the codebase and one consumer doesn't
     // justify inventing one. Only armed when a page actually opts into "after-scroll".
@@ -144,6 +144,23 @@ export default function BottomActions() {
         if (!hasInfoPanel)
             setInfoOpen(false);
     }, [hasInfoPanel]);
+    /*
+     * Force-open on a bumped signal — a failed form submit, today. Depends on
+     * the counter alone, so a re-render with the same value never re-opens what
+     * the user has since collapsed. `hasInfoPanel` is read but deliberately NOT
+     * a dependency: publishing the panel and bumping the signal are two separate
+     * setState calls, so re-running on `hasInfoPanel` would open the panel again
+     * one render after the user closed it.
+     */
+    const lastSignalRef = useRef(undefined);
+    useEffect(() => {
+        if (infoOpenSignal == null)
+            return;
+        if (lastSignalRef.current === infoOpenSignal)
+            return;
+        lastSignalRef.current = infoOpenSignal;
+        setInfoOpen(true);
+    }, [infoOpenSignal]);
     // Keep selectedActionId in sync with available bulk actions
     useEffect(() => {
         if (!isBulkMode) {

package/dist/features/layout/BottomActionsContext.d.ts

@@ -109,6 +109,19 @@ export interface BottomActionsState {
      * bulk mode, which owns the same space for its action picker.
      */
     infoPanel?: React.ReactNode;
+    /**
+     * A COUNTER, not a boolean — bump it to force `infoPanel` open once.
+     *
+     * `BottomActions` owns `infoOpen` in local state so the user can collapse
+     * the panel at will. A boolean `forceOpen` would fight that: it stays true,
+     * so every subsequent render re-opens what they just closed. A counter
+     * expresses the real intent — "this is a NEW event, show it" — and fires
+     * exactly once per increment.
+     *
+     * Used by a form's failed submit: the error list should appear without a
+     * tap, and stay dismissible afterwards.
+     */
+    infoOpenSignal?: number;
 }
 interface BottomActionsContextValue {
     state: BottomActionsState;
@@ -131,10 +144,16 @@ interface BottomActionsContextValue {
     setSecondaryLabel: (label: string | undefined) => void;
     /** Set or clear the expandable panel revealed above the bar. */
     setInfoPanel: (panel: React.ReactNode | undefined) => void;
+    /** Set the force-open counter. See BottomActionsState.infoOpenSignal. */
+    setInfoOpenSignal: (signal: number | undefined) => void;
     /** Set the desktop visibility policy. */
     setDesktopMode: (mode: BottomActionsDesktopMode | undefined) => void;
     /** Clear all state (called on feature unmount). */
     clearAll: () => void;
+    claim: (id: string) => void;
+    release: (id: string) => void;
+    /** The id currently allowed to publish. `useBottomActions` gates on this. */
+    topClaimId: string | null;
 }
 export declare function BottomActionsProvider({ children, }: {
     children: React.ReactNode;

package/dist/features/layout/BottomActionsContext.js

@@ -47,6 +47,32 @@ export function BottomActionsProvider({ children, }) {
     const actionCallbacksRef = useRef(new Map());
     const bulkCallbacksRef = useRef(new Map());
     const bulkClearRef = useRef(undefined);
+    // Stack of claimant ids, oldest first. The last entry owns the bar.
+    const claimsRef = useRef([]);
+    const [topClaimId, setTopClaimId] = useState(null);
+    const claim = useCallback((id) => {
+        if (claimsRef.current.includes(id))
+            return;
+        claimsRef.current = [...claimsRef.current, id];
+        setTopClaimId(id);
+    }, []);
+    const release = useCallback((id) => {
+        const next = claimsRef.current.filter((c) => c !== id);
+        if (next.length === claimsRef.current.length)
+            return;
+        claimsRef.current = next;
+        const newTop = next.length > 0 ? next[next.length - 1] : null;
+        setTopClaimId(newTop);
+        // Only blank the bar when nobody is left. Otherwise the newly-top
+        // consumer republishes on the very next effect pass, so clearing here
+        // would be a visible flicker of an empty bar.
+        if (newTop === null) {
+            actionCallbacksRef.current = new Map();
+            bulkCallbacksRef.current = new Map();
+            bulkClearRef.current = undefined;
+            setState(EMPTY);
+        }
+    }, []);
     const setActions = useCallback((actions) => {
         // Update callback map (always latest)
         actionCallbacksRef.current = new Map(actions.map((a) => [a.id, a.onClick]));
@@ -90,6 +116,9 @@ export function BottomActionsProvider({ children, }) {
     const setInfoPanel = useCallback((infoPanel) => {
         setState((prev) => ({ ...prev, infoPanel }));
     }, []);
+    const setInfoOpenSignal = useCallback((infoOpenSignal) => {
+        setState((prev) => (prev.infoOpenSignal === infoOpenSignal ? prev : { ...prev, infoOpenSignal }));
+    }, []);
     const setDesktopMode = useCallback((desktop) => {
         setState((prev) => (prev.desktop === desktop ? prev : { ...prev, desktop }));
     }, []);
@@ -109,8 +138,12 @@ export function BottomActionsProvider({ children, }) {
         setInfoLabel,
         setSecondaryLabel,
         setInfoPanel,
+        setInfoOpenSignal,
         setDesktopMode,
         clearAll,
+        claim,
+        release,
+        topClaimId,
     }), [
         state,
         setActions,
@@ -118,8 +151,12 @@ export function BottomActionsProvider({ children, }) {
         setInfoLabel,
         setSecondaryLabel,
         setInfoPanel,
+        setInfoOpenSignal,
         setDesktopMode,
         clearAll,
+        claim,
+        release,
+        topClaimId,
     ]);
     return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
 }

package/dist/features/layout/hooks/useBottomActions.d.ts

@@ -11,10 +11,20 @@ export interface UseBottomActionsOptions {
      * See BottomActionsState.infoPanel.
      */
     infoPanel?: React.ReactNode;
+    /** Bump to force `infoPanel` open once. See BottomActionsState.infoOpenSignal. */
+    infoOpenSignal?: number;
     /**
      * Whether the bar may also show on desktop. Defaults to "hidden" (mobile/tablet only),
      * so pages that don't opt in behave exactly as before.
      */
     desktop?: BottomActionsDesktopMode;
+    /**
+     * Set false to opt out entirely — no claim is taken, so this consumer is
+     * invisible to the stack and cannot displace whoever currently owns the
+     * bar. Load-bearing: `useFormBottomActions` is called unconditionally from
+     * `<Form>`, which mounts on ~75 surfaces, and a claim from each of those
+     * would push a listing's bulk bar off the stack for nothing.
+     */
+    enabled?: boolean;
 }
 export declare function useBottomActions(options?: UseBottomActionsOptions): void;

package/dist/features/layout/hooks/useBottomActions.js

@@ -1,8 +1,28 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useEffect, useId, useRef } from "react";
 import { useBottomActionsContext, } from "../BottomActionsContext";
 export function useBottomActions(options = {}) {
-    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setInfoPanel, setDesktopMode, clearAll, } = useBottomActionsContext();
+    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setInfoPanel, setInfoOpenSignal, setDesktopMode, claim, release, topClaimId, } = useBottomActionsContext();
+    /*
+     * One bar, many potential claimants. `DataListingView` already holds it on
+     * ~70 admin screens, so a form opened in a drawer over a listing used to
+     * overwrite the listing's bar and blank it on close.
+     *
+     * Claim on mount, release on unmount. `isTop` gates every publish below, so
+     * a backgrounded consumer stops writing — and because `isTop` is a
+     * dependency of each effect, regaining the top re-publishes everything
+     * automatically. That is what restores the listing's bar when the form
+     * closes, with no cooperation needed from either side.
+     */
+    const enabled = options.enabled !== false;
+    const claimId = useId();
+    useEffect(() => {
+        if (!enabled)
+            return;
+        claim(claimId);
+        return () => release(claimId);
+    }, [claim, release, claimId, enabled]);
+    const isTop = enabled && topClaimId === claimId;
     const actionsRef = useRef(options.actions ?? []);
     actionsRef.current = options.actions ?? [];
     const bulkRef = useRef(options.bulk);
@@ -14,17 +34,25 @@ export function useBottomActions(options = {}) {
         ? `${options.bulk.selectedCount}|${options.bulk.actions.map((a) => `${a.id}|${a.label}|${a.variant}|${a.badge}|${a.disabled}|${a.loading}|${a.grow}`).join(",")}`
         : "";
     useEffect(() => {
+        if (!isTop)
+            return;
         setActions(actionsRef.current);
-    }, [setActions, actionKey]);
+    }, [setActions, actionKey, isTop]);
     useEffect(() => {
+        if (!isTop)
+            return;
         setBulkConfig(bulkRef.current);
-    }, [setBulkConfig, bulkCountKey]);
+    }, [setBulkConfig, bulkCountKey, isTop]);
     useEffect(() => {
+        if (!isTop)
+            return;
         setInfoLabel(options.infoLabel);
-    }, [setInfoLabel, options.infoLabel]);
+    }, [setInfoLabel, options.infoLabel, isTop]);
     useEffect(() => {
+        if (!isTop)
+            return;
         setSecondaryLabel(options.secondaryLabel);
-    }, [setSecondaryLabel, options.secondaryLabel]);
+    }, [setSecondaryLabel, options.secondaryLabel, isTop]);
     // A ReactNode is a fresh object on every render, so it can't be a dependency
     // without looping. Mirror it through a ref and re-publish whenever anything
     // the panel actually derives from changes — callers pass `infoLabel`, which
@@ -33,12 +61,21 @@ export function useBottomActions(options = {}) {
     infoPanelRef.current = options.infoPanel;
     const hasInfoPanel = options.infoPanel != null;
     useEffect(() => {
+        if (!isTop)
+            return;
         setInfoPanel(infoPanelRef.current);
-    }, [setInfoPanel, hasInfoPanel, options.infoLabel, options.secondaryLabel]);
+    }, [setInfoPanel, hasInfoPanel, options.infoLabel, options.secondaryLabel, isTop]);
     useEffect(() => {
-        setDesktopMode(options.desktop);
-    }, [setDesktopMode, options.desktop]);
+        if (!isTop)
+            return;
+        setInfoOpenSignal(options.infoOpenSignal);
+    }, [setInfoOpenSignal, options.infoOpenSignal, isTop]);
     useEffect(() => {
-        return () => clearAll();
-    }, [clearAll]);
+        if (!isTop)
+            return;
+        setDesktopMode(options.desktop);
+    }, [setDesktopMode, options.desktop, isTop]);
+    // NOTE: no clearAll() on unmount any more — `release()` above owns that, and
+    // only blanks the bar when the stack empties. Clearing here would flash an
+    // empty bar between a drawer closing and the listing behind it republishing.
 }

package/dist/features/layout/hooks/useFormBottomActions.d.ts

@@ -0,0 +1,57 @@
+import { type FormShellContextValue } from "../../../ui/forms/FormShell";
+export interface UseFormBottomActionsOptions {
+    /** Runs when the pinned primary button is pressed. */
+    onSubmit: () => void | Promise<void>;
+    /** Omit to render no Cancel button — a settings page with nowhere to go back to. */
+    onCancel?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    /** Set false to leave the bar to someone else on this route. */
+    enabled?: boolean;
+    /**
+     * Read the form state from here instead of the ambient context. `<Form>`
+     * needs it: the hook runs in `Form`'s body, which is ABOVE the provider
+     * `Form` itself renders, so the ambient lookup would find the parent's
+     * context or none at all.
+     */
+    ctx?: FormShellContextValue;
+}
+/**
+ * Pin a form's Save/Cancel row to the bottom of a phone screen, and turn its
+ * validation errors into a pull-up sheet above it.
+ *
+ * ## Nothing here is new chrome
+ *
+ * This is `useBottomActions` with a form-shaped payload. The cart's bottom bar
+ * — "Total ₹777 · Details ⌃" over a pinned CTA — is 100% that primitive's
+ * output already, so the sheet mechanics, the collapse rule
+ * (`grid-rows-[1fr] ↔ [0fr]`, background on the innermost div),
+ * click-outside-to-close, the `ResizeObserver` that publishes
+ * `--bottom-chrome-height`, and all three bottom-edge offsets come for free.
+ * Re-deriving any of that would be a second, worse copy.
+ *
+ * ## Three details that will bite anyone editing this
+ *
+ * 1. **The label must encode the count.** `useBottomActions` re-publishes
+ *    `infoPanel` only when `hasInfoPanel`, `infoLabel` or `secondaryLabel`
+ *    change — a ReactNode is a fresh object every render and cannot be a
+ *    dependency without looping. "Fix 6 issues" → "Fix 5 issues" is
+ *    therefore what pushes the updated list through. A generic label like
+ *    "Errors" would freeze the sheet's contents at whatever they were the
+ *    first time it opened.
+ *
+ * 2. **The panel is rendered outside the form's provider.** `BottomActions`
+ *    lives in the layout shell, so the detached node cannot reach
+ *    `FormShellContext` by itself — hence `<FormErrorList ctx={ctx}>` with
+ *    the context passed explicitly.
+ *
+ * 3. **Suppressed inside a Modal or SideDrawer.** An overlay owns its own
+ *    footer, and a viewport-fixed bar would render *behind* the backdrop,
+ *    below the dialog it belongs to. `useIsInsideOverlay()` is how the
+ *    overlay tells us, because neither portal leaves a detectable trace in
+ *    the DOM at the form's position.
+ */
+export declare function useFormBottomActions({ onSubmit, onCancel, submitLabel, cancelLabel, isLoading, disabled, enabled, ctx: ctxProp, }: UseFormBottomActionsOptions): void;
+export default useFormBottomActions;

package/dist/features/layout/hooks/useFormBottomActions.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { FormShellContext } from "../../../ui/forms/FormShell";
+import { FormErrorList } from "../../../ui/forms/FormErrorList";
+import { useIsInsideOverlay } from "../../../ui/components/overlay-context";
+import { useBottomActions } from "./useBottomActions";
+/**
+ * Pin a form's Save/Cancel row to the bottom of a phone screen, and turn its
+ * validation errors into a pull-up sheet above it.
+ *
+ * ## Nothing here is new chrome
+ *
+ * This is `useBottomActions` with a form-shaped payload. The cart's bottom bar
+ * — "Total ₹777 · Details ⌃" over a pinned CTA — is 100% that primitive's
+ * output already, so the sheet mechanics, the collapse rule
+ * (`grid-rows-[1fr] ↔ [0fr]`, background on the innermost div),
+ * click-outside-to-close, the `ResizeObserver` that publishes
+ * `--bottom-chrome-height`, and all three bottom-edge offsets come for free.
+ * Re-deriving any of that would be a second, worse copy.
+ *
+ * ## Three details that will bite anyone editing this
+ *
+ * 1. **The label must encode the count.** `useBottomActions` re-publishes
+ *    `infoPanel` only when `hasInfoPanel`, `infoLabel` or `secondaryLabel`
+ *    change — a ReactNode is a fresh object every render and cannot be a
+ *    dependency without looping. "Fix 6 issues" → "Fix 5 issues" is
+ *    therefore what pushes the updated list through. A generic label like
+ *    "Errors" would freeze the sheet's contents at whatever they were the
+ *    first time it opened.
+ *
+ * 2. **The panel is rendered outside the form's provider.** `BottomActions`
+ *    lives in the layout shell, so the detached node cannot reach
+ *    `FormShellContext` by itself — hence `<FormErrorList ctx={ctx}>` with
+ *    the context passed explicitly.
+ *
+ * 3. **Suppressed inside a Modal or SideDrawer.** An overlay owns its own
+ *    footer, and a viewport-fixed bar would render *behind* the backdrop,
+ *    below the dialog it belongs to. `useIsInsideOverlay()` is how the
+ *    overlay tells us, because neither portal leaves a detectable trace in
+ *    the DOM at the form's position.
+ */
+export function useFormBottomActions({ onSubmit, onCancel, submitLabel = "Save", cancelLabel = "Cancel", isLoading = false, disabled = false, enabled = true, ctx: ctxProp, }) {
+    const ambient = useContext(FormShellContext);
+    const ctx = ctxProp ?? ambient;
+    const insideOverlay = useIsInsideOverlay();
+    const active = enabled && !insideOverlay && ctx != null;
+    const errorCount = ctx ? Object.keys(ctx.errors).length : 0;
+    const showErrors = !!ctx?.submitAttempted && errorCount > 0;
+    const actions = useMemo(() => {
+        if (!active)
+            return [];
+        const list = [];
+        if (onCancel) {
+            list.push({
+                id: "form-cancel",
+                label: cancelLabel,
+                variant: "outline",
+                grow: false,
+                onClick: onCancel,
+                disabled: isLoading,
+            });
+        }
+        list.push({
+            id: "form-submit",
+            label: submitLabel,
+            variant: "primary",
+            grow: true,
+            loading: isLoading,
+            disabled: disabled || isLoading,
+            onClick: () => void onSubmit(),
+        });
+        return list;
+    }, [active, onCancel, cancelLabel, submitLabel, isLoading, disabled, onSubmit]);
+    useBottomActions({
+        actions,
+        // Encodes the count on purpose — see (1) in the header.
+        infoLabel: showErrors
+            ? `Fix ${errorCount} ${errorCount === 1 ? "issue" : "issues"}`
+            : undefined,
+        infoPanel: showErrors && ctx ? _jsx(FormErrorList, { ctx: ctx }) : undefined,
+        // Bumped by every submit attempt, so a second failed Save re-opens a
+        // sheet the user collapsed — while an ordinary re-render does not.
+        infoOpenSignal: showErrors ? ctx?.submitAttemptCount : undefined,
+        // No claim at all when inactive — see UseBottomActionsOptions.enabled.
+        enabled: active,
+    });
+}
+export default useFormBottomActions;

package/dist/features/layout/index.d.ts

@@ -30,6 +30,8 @@ export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActions
 export type { BottomAction, BottomBulkConfig, BottomActionsState, BottomActionsDesktopMode, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";
 export type { UseBottomActionsOptions } from "./hooks/useBottomActions";
+export { useFormBottomActions } from "./hooks/useFormBottomActions";
+export type { UseFormBottomActionsOptions } from "./hooks/useFormBottomActions";
 export { default as BottomActions } from "./BottomActions";
 export { BottomChrome } from "./BottomChrome";
 export type { BottomChromeProps } from "./BottomChrome";

package/dist/features/layout/index.js

@@ -16,6 +16,7 @@ export { LayoutClient } from "./LayoutClient";
 export { AppLayoutShell } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";
+export { useFormBottomActions } from "./hooks/useFormBottomActions";
 export { default as BottomActions } from "./BottomActions";
 export { BottomChrome } from "./BottomChrome";
 export { BottomNavbar } from "./BottomNavbar";

package/dist/features/products/components/MakeOfferButton.js

@@ -38,7 +38,9 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
     const schema = makeOfferFormSchema({ listedPrice, minOffer, formatAmount: fmt });
     const [offerAmount, setOfferAmount] = useState(String(Math.max(minOfferAmount(listedPrice, 90), minOffer)));
     const [buyerNote, setBuyerNote] = useState("");
-    function submit(setFieldError, clearErrors) {
+    function submit(setFieldError, clearErrors, markSubmitAttempted) {
+        // type="button" — no native submit, so unhide the summary here.
+        markSubmitAttempted();
         clearErrors();
         const parsed = schema.safeParse({ offerAmount, buyerNote: buyerNote || undefined });
         if (!parsed.success) {
@@ -75,8 +77,8 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
     if (state === "pending") {
         return (_jsxs(Div, { className: `${CLS_PENDING_BOX} ${className}`, children: [_jsx(Span, { size: "lg", children: "\u23F3" }), _jsx(Text, { className: CLS_PENDING_TITLE, children: "Offer Pending" }), _jsx(Text, { className: CLS_PENDING_BODY, children: "You already have an offer on this item. Check My Offers for updates." })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", border: "strong", className: `w-full ${className}`, onClick: () => setState("open"), children: "Make Offer" }), _jsx(Modal, { isOpen: state === "open", onClose: () => setState("idle"), size: "md", title: "Make an offer", children: _jsx(Form, { schema: schema, onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] }), _jsx(FieldInput, { name: "offerAmount", type: "number", label: "Your offer amount", required: true, value: offerAmount, onChange: (value) => {
+    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", border: "strong", className: `w-full ${className}`, onClick: () => setState("open"), children: "Make Offer" }), _jsx(Modal, { isOpen: state === "open", onClose: () => setState("idle"), size: "md", title: "Make an offer", children: _jsx(Form, { schema: schema, onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors, markSubmitAttempted }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] }), _jsx(FieldInput, { name: "offerAmount", type: "number", label: "Your offer amount", required: true, value: offerAmount, onChange: (value) => {
                                     setOfferAmount(value);
                                     clearErrors();
-                                }, min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { size: "xs", color: "faint", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] }), _jsx(FieldInput, { name: "buyerNote", type: "text", label: "Note to seller (optional)", value: buyerNote, onChange: setBuyerNote, placeholder: "E.g. Bundle deal, long-time fan\u2026", maxLength: 300, "aria-label": "Note to seller" }), _jsx(Text, { size: "xs", color: "muted", children: "The seller will accept, decline, or suggest a counter price." }), _jsx(FormErrorSummary, {}), _jsxs(Stack, { gap: "xs", children: [_jsx(Button, { action: ACTIONS.PRODUCT["make-offer"], variant: "primary", size: "sm", type: "button", isLoading: isPending, disabled: isPending, onClick: () => submit(setFieldError, clearErrors), children: isPending ? "Sending…" : `Send offer of ${fmt(Number(offerAmount) || 0)}` }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setState("idle"), disabled: isPending, children: "Cancel" })] })] })) }) })] }));
+                                }, min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { size: "xs", color: "faint", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] }), _jsx(FieldInput, { name: "buyerNote", type: "text", label: "Note to seller (optional)", value: buyerNote, onChange: setBuyerNote, placeholder: "E.g. Bundle deal, long-time fan\u2026", maxLength: 300, "aria-label": "Note to seller" }), _jsx(Text, { size: "xs", color: "muted", children: "The seller will accept, decline, or suggest a counter price." }), _jsx(FormErrorSummary, {}), _jsxs(Stack, { gap: "xs", children: [_jsx(Button, { action: ACTIONS.PRODUCT["make-offer"], variant: "primary", size: "sm", type: "button", isLoading: isPending, disabled: isPending, onClick: () => submit(setFieldError, clearErrors, markSubmitAttempted), children: isPending ? "Sending…" : `Send offer of ${fmt(Number(offerAmount) || 0)}` }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setState("idle"), disabled: isPending, children: "Cancel" })] })] })) }) })] }));
 }