@mohasinac/appkit 4.21.0 → 4.23.0

package/dist/schemas/registry.d.ts

@@ -1234,7 +1234,7 @@ export declare const SCHEMAS: {
             }, import("zod").ZodTypeAny, "passthrough"> | undefined;
             featuredPriority?: number | undefined;
             isBrand?: boolean | undefined;
-            createdByType?: "store" | "admin" | undefined;
+            createdByType?: "admin" | "store" | undefined;
             createdByStoreId?: string | undefined;
             itemCode?: string | undefined;
             brandWebsite?: string | undefined;
@@ -1333,7 +1333,7 @@ export declare const SCHEMAS: {
             }, import("zod").ZodTypeAny, "passthrough"> | undefined;
             featuredPriority?: number | undefined;
             isBrand?: boolean | undefined;
-            createdByType?: "store" | "admin" | undefined;
+            createdByType?: "admin" | "store" | undefined;
             createdByStoreId?: string | undefined;
             itemCode?: string | undefined;
             brandWebsite?: string | undefined;
@@ -1406,7 +1406,7 @@ export declare const SCHEMAS: {
                 }>;
             }, "strip", import("zod").ZodTypeAny, {
                 type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
-                scope: "admin" | "seller";
+                scope: "seller" | "admin";
                 name: string;
                 discount: {
                     value: number;
@@ -1425,7 +1425,7 @@ export declare const SCHEMAS: {
                 description?: string | undefined;
             }, {
                 type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
-                scope: "admin" | "seller";
+                scope: "seller" | "admin";
                 name: string;
                 discount: {
                     value: number;
@@ -1485,7 +1485,7 @@ export declare const SCHEMAS: {
             couponId: string;
             couponSnapshot: {
                 type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
-                scope: "admin" | "seller";
+                scope: "seller" | "admin";
                 name: string;
                 discount: {
                     value: number;
@@ -1525,7 +1525,7 @@ export declare const SCHEMAS: {
             couponId: string;
             couponSnapshot: {
                 type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
-                scope: "admin" | "seller";
+                scope: "seller" | "admin";
                 name: string;
                 discount: {
                     value: number;
@@ -1596,7 +1596,7 @@ export declare const SCHEMAS: {
                 body: string;
                 isRead: boolean;
                 senderId: string;
-                senderRole: "seller" | "buyer";
+                senderRole: "buyer" | "seller";
                 sentAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -1606,7 +1606,7 @@ export declare const SCHEMAS: {
                 body: string;
                 isRead: boolean;
                 senderId: string;
-                senderRole: "seller" | "buyer";
+                senderRole: "buyer" | "seller";
                 sentAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -1644,7 +1644,7 @@ export declare const SCHEMAS: {
                 body: string;
                 isRead: boolean;
                 senderId: string;
-                senderRole: "seller" | "buyer";
+                senderRole: "buyer" | "seller";
                 sentAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -1677,7 +1677,7 @@ export declare const SCHEMAS: {
                 body: string;
                 isRead: boolean;
                 senderId: string;
-                senderRole: "seller" | "buyer";
+                senderRole: "buyer" | "seller";
                 sentAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -1838,7 +1838,7 @@ export declare const SCHEMAS: {
             code: string;
             type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
             id: string;
-            scope: "admin" | "seller";
+            scope: "seller" | "admin";
             name: string;
             createdAt: string | Date | import("zod").objectOutputType<{
                 toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
@@ -1896,7 +1896,7 @@ export declare const SCHEMAS: {
             code: string;
             type: "fixed" | "percentage" | "free_shipping" | "buy_x_get_y";
             id: string;
-            scope: "admin" | "seller";
+            scope: "seller" | "admin";
             name: string;
             createdAt: string | Date | import("zod").objectInputType<{
                 toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
@@ -2372,14 +2372,14 @@ export declare const SCHEMAS: {
                 code: string;
                 type: "auto" | "coupon" | "deal";
                 discountAmount: number;
-                scope?: "admin" | "seller" | undefined;
+                scope?: "seller" | "admin" | undefined;
                 storeId?: string | undefined;
                 couponId?: string | undefined;
             }, {
                 code: string;
                 type: "auto" | "coupon" | "deal";
                 discountAmount: number;
-                scope?: "admin" | "seller" | undefined;
+                scope?: "seller" | "admin" | undefined;
                 storeId?: string | undefined;
                 couponId?: string | undefined;
             }>, "many">>;
@@ -2510,9 +2510,9 @@ export declare const SCHEMAS: {
                 overrideReason: import("zod").ZodOptional<import("zod").ZodString>;
             }, "strip", import("zod").ZodTypeAny, {
                 type: "full" | "partial";
+                reason: string;
                 amount: number;
                 refundId: string;
-                reason: string;
                 refundedAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -2525,9 +2525,9 @@ export declare const SCHEMAS: {
                 overrideReason?: string | undefined;
             }, {
                 type: "full" | "partial";
+                reason: string;
                 amount: number;
                 refundId: string;
-                reason: string;
                 refundedAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -2668,7 +2668,7 @@ export declare const SCHEMAS: {
                 code: string;
                 type: "auto" | "coupon" | "deal";
                 discountAmount: number;
-                scope?: "admin" | "seller" | undefined;
+                scope?: "seller" | "admin" | undefined;
                 storeId?: string | undefined;
                 couponId?: string | undefined;
             }[] | undefined;
@@ -2700,9 +2700,9 @@ export declare const SCHEMAS: {
             paymentBatchId?: string | undefined;
             refunds?: {
                 type: "full" | "partial";
+                reason: string;
                 amount: number;
                 refundId: string;
-                reason: string;
                 refundedAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -2816,7 +2816,7 @@ export declare const SCHEMAS: {
                 code: string;
                 type: "auto" | "coupon" | "deal";
                 discountAmount: number;
-                scope?: "admin" | "seller" | undefined;
+                scope?: "seller" | "admin" | undefined;
                 storeId?: string | undefined;
                 couponId?: string | undefined;
             }[] | undefined;
@@ -2848,9 +2848,9 @@ export declare const SCHEMAS: {
             paymentBatchId?: string | undefined;
             refunds?: {
                 type: "full" | "partial";
+                reason: string;
                 amount: number;
                 refundId: string;
-                reason: string;
                 refundedAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -2944,20 +2944,20 @@ export declare const SCHEMAS: {
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">>]>;
             }, "strip", import("zod").ZodTypeAny, {
+                reason: string;
                 orderId: string;
                 refundId: string;
                 refundedAmount: number;
                 deductedAmount: number;
-                reason: string;
                 appliedAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
             }, {
+                reason: string;
                 orderId: string;
                 refundId: string;
                 refundedAmount: number;
                 deductedAmount: number;
-                reason: string;
                 appliedAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
@@ -2999,6 +2999,9 @@ export declare const SCHEMAS: {
             platformFeeRate: number;
             paymentMethod: "bank_transfer" | "upi";
             orderIds: string[];
+            processedAt?: string | Date | import("zod").objectOutputType<{
+                toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
+            }, import("zod").ZodTypeAny, "passthrough"> | undefined;
             bankAccount?: {
                 accountHolderName: string;
                 accountNumberMasked: string;
@@ -3014,19 +3017,16 @@ export declare const SCHEMAS: {
             gstRate?: number | undefined;
             isAutomatic?: boolean | undefined;
             refundDeductions?: {
+                reason: string;
                 orderId: string;
                 refundId: string;
                 refundedAmount: number;
                 deductedAmount: number;
-                reason: string;
                 appliedAt: string | Date | import("zod").objectOutputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
             }[] | undefined;
             netAmount?: number | undefined;
-            processedAt?: string | Date | import("zod").objectOutputType<{
-                toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
-            }, import("zod").ZodTypeAny, "passthrough"> | undefined;
         }, {
             currency: string;
             status: "paid" | "failed" | "pending" | "processing";
@@ -3049,6 +3049,9 @@ export declare const SCHEMAS: {
             platformFeeRate: number;
             paymentMethod: "bank_transfer" | "upi";
             orderIds: string[];
+            processedAt?: string | Date | import("zod").objectInputType<{
+                toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
+            }, import("zod").ZodTypeAny, "passthrough"> | undefined;
             bankAccount?: {
                 accountHolderName: string;
                 accountNumberMasked: string;
@@ -3064,19 +3067,16 @@ export declare const SCHEMAS: {
             gstRate?: number | undefined;
             isAutomatic?: boolean | undefined;
             refundDeductions?: {
+                reason: string;
                 orderId: string;
                 refundId: string;
                 refundedAmount: number;
                 deductedAmount: number;
-                reason: string;
                 appliedAt: string | Date | import("zod").objectInputType<{
                     toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
                 }, import("zod").ZodTypeAny, "passthrough">;
             }[] | undefined;
             netAmount?: number | undefined;
-            processedAt?: string | Date | import("zod").objectInputType<{
-                toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
-            }, import("zod").ZodTypeAny, "passthrough"> | undefined;
         }>;
         readonly reviews: import("zod").ZodObject<{
             createdAt: import("zod").ZodUnion<[import("zod").ZodDate, import("zod").ZodString, import("zod").ZodObject<{
@@ -4192,6 +4192,7 @@ export declare const SCHEMAS: {
             closedAt?: string | Date | import("zod").objectOutputType<{
                 toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
             }, import("zod").ZodTypeAny, "passthrough"> | undefined;
+            assignedToName?: string | undefined;
             relatedParties?: {
                 storeId?: string | undefined;
                 userId?: string | undefined;
@@ -4199,7 +4200,6 @@ export declare const SCHEMAS: {
                 productId?: string | undefined;
                 bidId?: string | undefined;
             } | undefined;
-            assignedToName?: string | undefined;
             internalNotes?: string | undefined;
         }, {
             status: "closed" | "open" | "resolved" | "in_progress" | "waiting_on_user";
@@ -4235,6 +4235,7 @@ export declare const SCHEMAS: {
             closedAt?: string | Date | import("zod").objectInputType<{
                 toDate: import("zod").ZodFunction<import("zod").ZodTuple<[], import("zod").ZodUnknown>, import("zod").ZodDate>;
             }, import("zod").ZodTypeAny, "passthrough"> | undefined;
+            assignedToName?: string | undefined;
             relatedParties?: {
                 storeId?: string | undefined;
                 userId?: string | undefined;
@@ -4242,7 +4243,6 @@ export declare const SCHEMAS: {
                 productId?: string | undefined;
                 bidId?: string | undefined;
             } | undefined;
-            assignedToName?: string | undefined;
             internalNotes?: string | undefined;
         }>;
     };

package/dist/seed/bids-seed-data.js

@@ -35,6 +35,14 @@ const BIDDER_NAMES = {
     "user-rohit-collector": "Mock User 14",
     "user-ananya-collector": "Mock User 9",
 };
+/*
+ * Typed on the document, not `FirestoreDocument`. Once `BidDocument` gained
+ * `statusHistory?: StatusChangeEntry[]`, `Partial<BidDocument>` stopped being
+ * assignable to `FirestoreDocument` — an array of objects does not satisfy
+ * that index signature. The right fix is to narrow the parameter to what the
+ * caller actually passes rather than widen the document to keep a helper
+ * happy.
+ */
 function withBidDefaults(b) {
     return {
         ...b,

package/dist/ui/components/Form.d.ts

@@ -28,13 +28,34 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
      * provider would shadow the parent's for everything rendered as `children`.
      */
     shellCtx?: FormShellContextValue;
+    /**
+     * Publish Save/Cancel and the mobile error sheet into the bottom-chrome
+     * tier — the same bar the cart uses.
+     *
+     * Opt-IN, unlike `<SectionForm>` where it is on by default. `<Form>` is the
+     * generic wrapper and is used inside `<Modal>` and `<SideDrawer>` footers,
+     * inside listing toolbars, and several times over on one page
+     * (`AdminSiteSettingsView` mounts twenty). Publishing route-level chrome
+     * from all of those by default would be wrong far more often than right.
+     * The hook additionally suppresses itself inside an overlay, so passing
+     * this in a modal is a no-op rather than a bug.
+     */
+    bottomBar?: FormBottomBarConfig;
     /** Cross-axis alignment of flex/grid children. Replaces raw `items-*` className. */
     align?: "start" | "center" | "end" | "stretch";
     /** Gap between children — use instead of raw `gap-*` className. */
     gap?: GapToken;
 }
 export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export declare function Form({ children, spacing, schema, shellCtx: shellCtxProp, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, ...props }: FormProps): React.JSX.Element;
+export interface FormBottomBarConfig {
+    onSubmit: () => void | Promise<void>;
+    onCancel?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+}
+export declare function Form({ children, spacing, schema, shellCtx: shellCtxProp, bottomBar, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, ...props }: FormProps): React.JSX.Element;
 export interface FormGroupProps {
     children: React.ReactNode;
     columns?: 1 | 2 | 3 | 4;

package/dist/ui/components/Form.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { Row } from "./Layout";
 import { buildSurfaceClasses } from "./surface-tokens";
 import { FormShellContext, useFormShellState, } from "../forms/FormShell";
+import { useFormBottomActions } from "../../features/layout/hooks/useFormBottomActions";
 const FORM_SPACING_MAP = {
     none: "",
     xs: "space-y-1",
@@ -43,9 +45,35 @@ const FORM_ALIGN_MAP = {
     end: "items-end",
     stretch: "items-stretch",
 };
-export function Form({ children, spacing, schema, shellCtx: shellCtxProp, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", ...props }) {
+export function Form({ children, spacing, schema, shellCtx: shellCtxProp, bottomBar, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", ...props }) {
     const helpers = useFormShellState(schema);
     const effectiveCtx = shellCtxProp ?? helpers.shellCtx;
+    /*
+     * Marking the attempt on the NATIVE submit event covers both shapes this
+     * component is used in: the caller that calls `validate()` (which marks
+     * anyway) and the caller that hand-rolls its checks in the submit button's
+     * `onClick`. React fires `onClick` before `onSubmit`, so by the time the
+     * re-render happens the errors are already in the context.
+     *
+     * `effectiveCtx` may come from a parent's `useFormShellState`, so mark on
+     * whichever context is actually mounted — not on `helpers`, which is a
+     * second, ignored state instance in that case.
+     */
+    const { onSubmit: onSubmitProp } = props;
+    const handleSubmit = React.useCallback((e) => {
+        effectiveCtx.markSubmitAttempted();
+        onSubmitProp?.(e);
+    }, [effectiveCtx, onSubmitProp]);
+    useFormBottomActions({
+        onSubmit: bottomBar?.onSubmit ?? (() => { }),
+        onCancel: bottomBar?.onCancel,
+        submitLabel: bottomBar?.submitLabel,
+        cancelLabel: bottomBar?.cancelLabel,
+        isLoading: bottomBar?.isLoading,
+        disabled: bottomBar?.disabled,
+        enabled: bottomBar != null,
+        ctx: effectiveCtx,
+    });
     const content = typeof children === "function"
         ? children({ ...helpers, shellCtx: effectiveCtx })
         : children;
@@ -56,7 +84,7 @@ export function Form({ children, spacing, schema, shellCtx: shellCtxProp, align,
                 gap ? GAP_MAP[gap] : "",
                 buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
                 className,
-            ].filter(Boolean).join(" "), ...props, children: content }) }));
+            ].filter(Boolean).join(" "), ...props, onSubmit: handleSubmit, children: content }) }));
 }
 export function FormGroup({ children, columns = 1, gap = "md", className = "", }) {
     const gridClasses = {

package/dist/ui/components/Modal.js

@@ -7,6 +7,7 @@ import { Heading } from "./Typography";
 import { Button } from "./Button";
 import { SPRING_GENTLE } from "../../tokens/motion";
 import { useHandMode } from "../../_internal/client/hand-mode";
+import { OverlayContext } from "./overlay-context";
 const SIZE_CLASSES = {
     sm: "appkit-modal__panel--sm",
     md: "appkit-modal__panel--md",
@@ -69,9 +70,9 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
     if (typeof document === "undefined") {
         return null;
     }
-    return createPortal(_jsx(AnimatePresence, { children: visible && (_jsxs(motion.div, { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs(motion.div, { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
-                        .filter(Boolean)
-                        .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }), document.body);
+    return createPortal(_jsx(OverlayContext.Provider, { value: true, children: _jsx(AnimatePresence, { children: visible && (_jsxs(motion.div, { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs(motion.div, { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
+                            .filter(Boolean)
+                            .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }) }), document.body);
 }
 export function ModalFooter({ children, className = "", }) {
     return (_jsx("div", { className: [

package/dist/ui/components/SideDrawer.js

@@ -10,6 +10,7 @@ import { useSwipe } from "../../react";
 import { Text } from "./Typography";
 import { SPRING_SNAPPY } from "../../tokens/motion";
 import { useHandMode } from "../../_internal/client/hand-mode";
+import { OverlayContext } from "./overlay-context";
 const UI_SIDE_DRAWER = {
     backdrop: "appkit-side-drawer__backdrop",
     root: "appkit-side-drawer",
@@ -152,8 +153,8 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
     const reduced = useReducedMotion();
     const positionClass = resolvedSide === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
     const slideX = resolvedSide === "left" ? "-100%" : "100%";
-    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
-                                UI_SIDE_DRAWER.header,
-                                UI_SIDE_DRAWER.headerMode[mode],
-                            ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", reverse: hand === "left", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }));
+    return (_jsx(OverlayContext.Provider, { value: true, children: _jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
+                                    UI_SIDE_DRAWER.header,
+                                    UI_SIDE_DRAWER.headerMode[mode],
+                                ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", reverse: hand === "left", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }) }));
 }

package/dist/ui/components/overlay-context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * "Am I rendering inside a Modal or a SideDrawer?"
+ *
+ * WHY: route-level chrome must not attach itself to content that is floating
+ * above the route. The concrete case is `useFormBottomActions` — a form on a
+ * page publishes its Save/Cancel row and its error sheet into the fixed
+ * `BottomChrome` tier, which is correct there and wrong inside an overlay:
+ * the overlay already owns a footer, and a bar pinned to the viewport bottom
+ * would sit *behind* the backdrop, below the very dialog it belongs to.
+ *
+ * Detection has to come from the overlay itself. There is no way to infer it
+ * from the DOM at render time (both portal elsewhere), and asking every form
+ * to declare where it is being rendered is the kind of convention that is one
+ * forgetful call site away from a bar appearing under a backdrop.
+ *
+ * Mounted by `Modal` and `SideDrawer`. Default `false`, so a component outside
+ * any overlay — the overwhelmingly common case — needs no provider at all.
+ */
+export declare const OverlayContext: import("react").Context<boolean>;
+/** True when the calling component is rendered inside a Modal or SideDrawer. */
+export declare function useIsInsideOverlay(): boolean;

package/dist/ui/components/overlay-context.js

@@ -0,0 +1,25 @@
+"use client";
+import { createContext, useContext } from "react";
+/**
+ * "Am I rendering inside a Modal or a SideDrawer?"
+ *
+ * WHY: route-level chrome must not attach itself to content that is floating
+ * above the route. The concrete case is `useFormBottomActions` — a form on a
+ * page publishes its Save/Cancel row and its error sheet into the fixed
+ * `BottomChrome` tier, which is correct there and wrong inside an overlay:
+ * the overlay already owns a footer, and a bar pinned to the viewport bottom
+ * would sit *behind* the backdrop, below the very dialog it belongs to.
+ *
+ * Detection has to come from the overlay itself. There is no way to infer it
+ * from the DOM at render time (both portal elsewhere), and asking every form
+ * to declare where it is being rendered is the kind of convention that is one
+ * forgetful call site away from a bar appearing under a backdrop.
+ *
+ * Mounted by `Modal` and `SideDrawer`. Default `false`, so a component outside
+ * any overlay — the overwhelmingly common case — needs no provider at all.
+ */
+export const OverlayContext = createContext(false);
+/** True when the calling component is rendered inside a Modal or SideDrawer. */
+export function useIsInsideOverlay() {
+    return useContext(OverlayContext);
+}

package/dist/ui/forms/FormErrorList.d.ts

@@ -0,0 +1,29 @@
+import { type FormShellContextValue } from "./FormShell";
+export interface FormErrorListProps {
+    /**
+     * Read errors from this context value instead of the ambient one. The
+     * mobile bottom sheet needs it: `useFormBottomActions` builds the panel as
+     * a detached ReactNode that is rendered by `BottomActions`, high up in the
+     * layout tree and therefore OUTSIDE the form's own provider.
+     */
+    ctx?: FormShellContextValue;
+    className?: string;
+}
+/**
+ * The `<ul>` of current validation errors, with a jump link per entry when
+ * the form declares sections.
+ *
+ * WHY it is its own file: two surfaces render this exact list — the inline
+ * `<FormErrorSummary>` beside the submit button on desktop, and the mobile
+ * "Fix N issues" sheet in the bottom-chrome tier. Writing it twice would mean
+ * a jump-link fix, an empty-state fix or a wording fix landing in one and not
+ * the other, which is the bug-fix multiplier the Duplication Framework calls
+ * out. There are exactly two consumers and they are the same list, so this is
+ * a consolidation, not speculative abstraction.
+ *
+ * Renders nothing when there are no errors. It does NOT gate on
+ * `submitAttempted` — that is the *summary's* decision, not the list's, and
+ * the sheet needs to keep rendering while open.
+ */
+export declare function FormErrorList({ ctx: ctxProp, className }: FormErrorListProps): import("react").JSX.Element | null;
+export default FormErrorList;

package/dist/ui/forms/FormErrorList.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormShellContext } from "./FormShell";
+import { Span } from "../components/Typography";
+/**
+ * The `<ul>` of current validation errors, with a jump link per entry when
+ * the form declares sections.
+ *
+ * WHY it is its own file: two surfaces render this exact list — the inline
+ * `<FormErrorSummary>` beside the submit button on desktop, and the mobile
+ * "Fix N issues" sheet in the bottom-chrome tier. Writing it twice would mean
+ * a jump-link fix, an empty-state fix or a wording fix landing in one and not
+ * the other, which is the bug-fix multiplier the Duplication Framework calls
+ * out. There are exactly two consumers and they are the same list, so this is
+ * a consolidation, not speculative abstraction.
+ *
+ * Renders nothing when there are no errors. It does NOT gate on
+ * `submitAttempted` — that is the *summary's* decision, not the list's, and
+ * the sheet needs to keep rendering while open.
+ */
+export function FormErrorList({ ctx: ctxProp, className }) {
+    const ambient = useContext(FormShellContext);
+    const ctx = ctxProp ?? ambient;
+    if (!ctx)
+        return null;
+    const entries = Object.entries(ctx.errors);
+    if (entries.length === 0)
+        return null;
+    return (_jsx("ul", { className: ["appkit-formshell__error-summary__list", className].filter(Boolean).join(" "), children: entries.map(([key, message]) => {
+            const stepIndex = ctx.fieldToStepIndex?.[key];
+            const stepLabel = stepIndex != null ? ctx.steps[stepIndex]?.label : undefined;
+            return (_jsx("li", { children: stepLabel ? (_jsxs("button", { type: "button", className: "appkit-formshell__error-summary__step-link", onClick: () => ctx.goToStep(stepIndex), children: [_jsxs(Span, { weight: "semibold", children: [stepLabel, ":"] }), " ", message] })) : (_jsx(Span, { children: message })) }, key));
+        }) }));
+}
+export default FormErrorList;

package/dist/ui/forms/FormErrorSummary.d.ts

@@ -13,6 +13,14 @@ export interface FormErrorSummaryProps {
  * error immediately as fields change — not gated by `touched`, unlike the
  * inline per-field errors.
  *
+ * 🛑 It IS gated on `ctx.submitAttempted`, and must stay that way. The
+ * summary speaks about fields the user has not reached yet, so before a
+ * submit it reads as a list of accusations rather than of mistakes — and
+ * ~20 views run `validate(draft)` in a mount effect, so an untouched empty
+ * draft fails every `.min(1)` on first paint. Gate the DISPLAY only: the
+ * live validation underneath is what keeps this list shrinking as the user
+ * fixes things after a failed submit, which is the whole point of it.
+ *
  * For multi-step forms whose step engine populates
  * `FormShellContextValue.fieldToStepIndex`, each entry names its owning step
  * and is clickable to jump there. Falls back to a flat list when no step