@mohasinac/appkit 4.30.19 → 4.31.0

package/dist/features/corporate/schemas/index.js

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { annotate } from "../../shell/field-ui-meta";
 export const corporateInquiryStatusSchema = z.enum([
     "pending",
     "contacted",
@@ -37,23 +38,30 @@ export const corporateInquirySchema = z.object({
  * Form schema for submitting a corporate inquiry.
  */
 export const submitCorporateInquirySchema = z.object({
-    companyName: z.string().trim().min(2, "A company name is required.").max(160),
-    contactPerson: z.string().trim().min(2, "Who should we reply to?").max(120),
-    designation: z.string().trim().max(120).optional(),
-    email: z
+    companyName: annotate(z.string().trim().min(2, "A company name is required.").max(160), {
+        section: "who", sectionLabel: "Your company", sectionRequired: true,
+        order: 1, row: "pair", label: "Company name",
+    }),
+    contactPerson: annotate(z.string().trim().min(2, "Who should we reply to?").max(120), {
+        section: "who", order: 2, row: "pair", label: "Contact person",
+    }),
+    designation: annotate(z.string().trim().max(120).optional(), {
+        section: "who", order: 3, row: "pair", label: "Designation",
+    }),
+    email: annotate(z
         .string()
         .trim()
         .toLowerCase()
         .min(1, "An email address is required.")
-        .email("That doesn't look like an email address."),
+        .email("That doesn't look like an email address."), { section: "who", order: 4, row: "pair", inputType: "email", label: "Email" }),
     // Indian mobile, tolerant of spacing and a country code. Optional — a
     // reachable email is enough, and demanding a phone number loses enquiries.
-    phone: z
+    phone: annotate(z
         .string()
         .trim()
         .regex(/^(\+?91[-\s]?)?[6-9]\d{9}$/, "Enter a 10-digit Indian mobile number.")
         .optional()
-        .or(z.literal("")),
+        .or(z.literal("")), { section: "who", order: 5, row: "pair", inputType: "tel", label: "Phone" }),
     /*
      * 🛑 COERCED. These were `z.number()`, and this schema's own form sends
      * strings — so every submission carrying a unit count failed to parse the
@@ -62,19 +70,32 @@ export const submitCorporateInquirySchema = z.object({
      *
      * A sales reply is priced from these two, and until now both were free text.
      */
-    units: z.coerce
+    units: annotate(z.coerce
         .number({ invalid_type_error: "Enter the number of units as a number." })
         .int("Units must be a whole number.")
         .positive("At least one unit.")
         .max(1000000, "That looks like a typo — contact us directly for orders this large.")
-        .optional(),
-    budgetPerUnit: z.coerce
+        .optional(), { section: "pricing", sectionLabel: "What you need", order: 1, row: "pair", kind: "number", label: "Units" }),
+    budgetPerUnit: annotate(z.coerce
         .number({ invalid_type_error: "Enter a per-unit budget as a number." })
         .min(0, "A budget cannot be negative.")
         .max(10000000, "That looks like a typo.")
-        .optional(),
-    totalBudget: z.coerce.number().min(0).optional(),
-    deliveryDateRequired: z.string().optional(),
-    customBranding: z.boolean().default(false),
-    message: z.string().trim().max(4000).optional(),
+        .optional(), { section: "pricing", order: 2, row: "pair", kind: "number", label: "Budget per unit (₹)" }),
+    // Computed from units × budgetPerUnit on the client, so it is shown as a
+    // live read-only preview rather than asked for twice.
+    totalBudget: annotate(z.coerce.number().min(0).optional(), {
+        section: "pricing", order: 3, row: "pair", kind: "number", label: "Total budget (₹)",
+        derived: true, tier: "t1-derive",
+    }),
+    deliveryDateRequired: annotate(z.string().optional(), {
+        section: "schedule", sectionLabel: "Timeline", order: 1, row: "pair", kind: "date",
+        label: "Delivery date required by",
+    }),
+    customBranding: annotate(z.boolean().default(false), {
+        section: "schedule", order: 2, row: "full", kind: "toggle", label: "We need custom branding",
+    }),
+    message: annotate(z.string().trim().max(4000).optional(), {
+        section: "detail", sectionLabel: "Anything else", order: 1, row: "full", kind: "textarea",
+        label: "Message",
+    }),
 });

package/dist/features/filters/FilterPanel.js

@@ -5,6 +5,7 @@ import { Div } from "../../ui";
 import { FilterFacetSection } from "./FilterFacetSection";
 import { RangeFilter } from "./RangeFilter";
 import { SwitchFilter } from "./SwitchFilter";
+import { joinFilterValues, splitFilterValues } from "../../constants/table-keys";
 export function FilterPanel({ config, table, className = "", }) {
     const [expandedIndex, setExpandedIndex] = useState(() => config.findIndex((c) => !c.defaultCollapsed));
     const handleToggle = (idx) => setExpandedIndex((prev) => (prev === idx ? null : idx));
@@ -17,9 +18,8 @@ export function FilterPanel({ config, table, className = "", }) {
                     return (_jsx(FilterFacetSection, { title: item.title, options: item.options, selectionMode: "single", selected: selected, defaultCollapsed: item.defaultCollapsed, searchable: item.searchable, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, ""), onChange: (vals) => table.set(item.key, vals[0] ?? "") }, `${item.type}-${item.key}`));
                 }
                 case "facet-multi": {
-                    const raw = table.get(item.key);
-                    const selected = raw ? raw.split(",").filter(Boolean) : [];
-                    return (_jsx(FilterFacetSection, { title: item.title, options: item.options, selectionMode: "multi", selected: selected, defaultCollapsed: item.defaultCollapsed, searchable: item.searchable, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, ""), onChange: (vals) => table.set(item.key, vals.join(",")) }, `${item.type}-${item.key}`));
+                    const selected = splitFilterValues(table.get(item.key));
+                    return (_jsx(FilterFacetSection, { title: item.title, options: item.options, selectionMode: "multi", selected: selected, defaultCollapsed: item.defaultCollapsed, searchable: item.searchable, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, ""), onChange: (vals) => table.set(item.key, joinFilterValues(vals)) }, `${item.type}-${item.key}`));
                 }
                 case "switch": {
                     const checked = table.get(item.key) === "true";

package/dist/features/filters/RangeFilter.d.ts

@@ -18,6 +18,16 @@ export interface RangeFilterProps {
     className?: string;
     isOpen?: boolean;
     onToggle?: () => void;
+    /**
+     * Override the clear behaviour. **Rarely needed** — clearing a range is
+     * `onMinChange("") + onMaxChange("")`, which is now the default, so the X
+     * appears on every range filter without a call site opting in.
+     *
+     * It used to be required-in-practice: 18 of the 19 call sites passed nothing
+     * and therefore rendered no clear button at all, leaving a range you could
+     * set and not unset. Pass this only when clearing must ALSO reset something
+     * outside the two values (`FilterPanel` clears its own pending map).
+     */
     onClear?: () => void;
 }
 export declare function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onMinChange, onMaxChange, type, prefix, minPlaceholder, maxPlaceholder, defaultCollapsed, showSlider, minBound, maxBound, step, className, isOpen: controlledOpen, onToggle, onClear, }: RangeFilterProps): import("react").JSX.Element;

package/dist/features/filters/RangeFilter.js

@@ -5,10 +5,41 @@ import { Button, Div, Input, Row, Slider, Span, Stack, Text } from "../../ui";
 import { cn } from "./filterUtils";
 const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_BTN = "inline-flex items-center justify-center w-5 h-5 text-[var(--appkit-color-text-muted)] hover:text-error dark:hover:text-error rounded-full transition-colors";
+/**
+ * Parse a filter value, distinguishing "not set" from a legitimate zero.
+ *
+ * 🛑 NOT `parseFloat(v) || bound`. `parseFloat("")` is NaN and falsy, which is
+ * the intended case — but so is `parseFloat("0")`, so a user asking for a max
+ * of 0 got the 500000 bound instead, and the filter they could see in the
+ * inputs was not the one being applied.
+ */
+function rawNum(value) {
+    const n = Number.parseFloat(value);
+    return Number.isFinite(n) ? n : null;
+}
 function DualSlider({ minValue, maxValue, onMinChange, onMaxChange, minBound, maxBound, step = 1, prefix = "", }) {
-    const minNum = Math.max(minBound, Math.min(parseFloat(minValue) || minBound, maxBound));
-    const maxNum = Math.min(maxBound, Math.max(parseFloat(maxValue) || maxBound, minBound));
-    return (_jsxs(Stack, { gap: "sm", className: "w-full", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, minNum] }), _jsx(Span, { size: "xs", color: "muted", children: "-" }), _jsxs(Span, { size: "sm", weight: "semibold", className: "tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, maxNum] })] }), _jsxs(Stack, { gap: "xs", "aria-hidden": "true", children: [_jsx(Slider, { value: minNum, min: minBound, max: Math.max(minBound, maxNum - step), step: step, onChange: (v) => onMinChange(String(v)) }), _jsx(Slider, { value: maxNum, min: Math.min(maxBound, minNum + step), max: maxBound, step: step, onChange: (v) => onMaxChange(String(v)) })] }), _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", color: "muted", children: [prefix, minBound] }), _jsxs(Span, { size: "xs", color: "muted", children: [prefix, maxBound] })] })] }));
+    const minRaw = rawNum(minValue);
+    const maxRaw = rawNum(maxValue);
+    /*
+     * Display only. An unset side shows its bound so the track reads sensibly —
+     * but the bound is never what gets WRITTEN, which is the distinction the old
+     * `|| bound` collapsed.
+     */
+    const minNum = Math.min(Math.max(minRaw ?? minBound, minBound), maxBound);
+    const maxNum = Math.max(Math.min(maxRaw ?? maxBound, maxBound), minBound);
+    /*
+     * Each slider spans the FULL range and clamps itself on write.
+     *
+     * It used to derive its opposite end from the other thumb — the min slider's
+     * `max` was `maxNum - step` — so with max unset, `maxNum` collapsed to the
+     * bound, and any later change to one side silently re-scaled and appeared to
+     * reset the other. Clamping on write instead of on range means dragging one
+     * thumb can never move or clear the other, and a value that would cross is
+     * pinned rather than the whole control rescaling underneath the user.
+     */
+    const writeMin = (v) => onMinChange(String(Math.min(v, maxRaw ?? maxBound)));
+    const writeMax = (v) => onMaxChange(String(Math.max(v, minRaw ?? minBound)));
+    return (_jsxs(Stack, { gap: "sm", className: "w-full", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, minNum] }), _jsx(Span, { size: "xs", color: "muted", children: "-" }), _jsxs(Span, { size: "sm", weight: "semibold", className: "tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, maxNum] })] }), _jsxs(Stack, { gap: "xs", "aria-hidden": "true", children: [_jsx(Slider, { value: minNum, min: minBound, max: maxBound, step: step, onChange: writeMin }), _jsx(Slider, { value: maxNum, min: minBound, max: maxBound, step: step, onChange: writeMax })] }), _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", color: "muted", children: [prefix, minBound] }), _jsxs(Span, { size: "xs", color: "muted", children: [prefix, maxBound] })] })] }));
 }
 export function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onMinChange, onMaxChange, type = "number", prefix, minPlaceholder, maxPlaceholder, defaultCollapsed = true, showSlider = false, minBound, maxBound, step = 1, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
     const isControlled = controlledOpen !== undefined;
@@ -25,6 +56,12 @@ export function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onM
         minBound !== undefined &&
         maxBound !== undefined;
     const hasValue = !!(minValue || maxValue);
+    // Clearing a range needs nothing a caller has to supply. See `onClear` above.
+    const handleClear = onClear ??
+        (() => {
+            onMinChange("");
+            onMaxChange("");
+        });
     const inputClass = "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20 ";
-    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-[space-between] text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Stack, { gap: "3", className: "mt-3", children: [canShowSlider && (_jsx(DualSlider, { minValue: minValue, maxValue: maxValue, onMinChange: onMinChange, onMaxChange: onMaxChange, minBound: minBound, maxBound: maxBound, step: step, prefix: prefix })), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { size: "xs", className: "flex-shrink-0 pb-[0.375rem]", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-[space-between] text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), hasValue && (_jsx(Button, { type: "button", onClick: handleClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Stack, { gap: "3", className: "mt-3", children: [canShowSlider && (_jsx(DualSlider, { minValue: minValue, maxValue: maxValue, onMinChange: onMinChange, onMaxChange: onMaxChange, minBound: minBound, maxBound: maxBound, step: step, prefix: prefix })), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { size: "xs", className: "flex-shrink-0 pb-[0.375rem]", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
 }

package/dist/features/homepage/components/MarketplaceHomepageView.js

@@ -7,7 +7,17 @@ import { safeRead } from "../../../errors/safe-read";
 import { fetchLiveStats } from "../lib/live-stats";
 import { renderSection, AnnouncementBar } from "../lib/section-renderer";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
-import { filterSectionsByFeatureFlags } from "../../../_internal/shared/features/homepage/section-gate";
+import { isListingTypeEnabled } from "../../../_internal/shared/listing-types/feature-flags";
+/**
+ * Homepage sections that advertise a specific listing type, and must therefore
+ * disappear when the site stops offering it. A section type absent from this
+ * map always renders.
+ */
+const HOMEPAGE_SECTION_LISTING_TYPE = {
+    auctions: "auction",
+    "pre-orders": "pre-order",
+    "prize-draws": "prize-draw",
+};
 import { getFeaturedProducts, getFeaturedAuctions, getFeaturedPreOrders } from "../../products/actions/product-actions";
 import { listTopLevelCategories, listBrandCategories } from "../../categories/actions/category-actions";
 import { listFeaturedBundles } from "../../../_internal/server/features/bundles/data";
@@ -49,10 +59,19 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             route: "/", key: "homepage.faqs", fallback: [],
         }),
     ]);
-    // Respect the feature flags. This gate existed but lived inside a function
-    // with no call sites, so until 2026-08-24 turning off `auctions` hid auctions
-    // everywhere EXCEPT the homepage, which went on advertising them.
-    const enabledSections = filterSectionsByFeatureFlags(allSections, siteSettings?.featureFlags);
+    // A homepage section must not advertise a listing type the site does not
+    // offer. This gate previously read `featureFlags.{auctions,preOrders,events,
+    // blog}`; that group was deleted on 2026-08-29, and only the listing-type
+    // half of it had a real successor (`settings.listings.listingTypes`).
+    //
+    // So auctions / pre-orders / prize-draws are gated by the same control that
+    // hides them on every other surface, and the `events` / `blog` sections are
+    // now unconditional — there is no product control for "we don't run events",
+    // and there never was one that anything but this line read.
+    const enabledSections = allSections.filter((section) => {
+        const gated = HOMEPAGE_SECTION_LISTING_TYPE[section.type];
+        return !gated || isListingTypeEnabled(gated, siteSettings);
+    });
     // Collect live metric requests from all enabled stats sections
     const liveStatRequests = [];
     for (const section of enabledSections) {

package/dist/features/homepage/hooks/useBlogArticles.js

@@ -23,7 +23,7 @@ export function useBlogArticles(options) {
                 return featuredResult;
             }
             const remaining = MIN_BLOG_COUNT - featured.length;
-            const latestResult = await apiClient.get(`${BLOG_ENDPOINTS.SORTED("-publishedAt")}&perPage=${MIN_BLOG_COUNT + remaining}`);
+            const latestResult = await apiClient.get(`${BLOG_ENDPOINTS.SORTED("-publishedAt")}&pageSize=${MIN_BLOG_COUNT + remaining}`);
             const existingIds = new Set(featured.map((p) => p.id));
             const filler = latestResult.posts
                 .filter((p) => !existingIds.has(p.id))

package/dist/features/layout/BottomActions.js

@@ -33,7 +33,7 @@ import { useState, useRef, useEffect, useId } from "react";
 import { X, ChevronUp, ChevronDown, Check } from "lucide-react";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import { useClickOutside } from "../../react";
-import { Div, Row, Span, Text, Button } from "../../ui";
+import { ActionRow, Div, Row, Span, Text, Button } from "../../ui";
 // Token values inlined from @mohasinac/appkit/tokens
 const BOTTOM_NAV_BG = "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]";
 const BOTTOM_NAV_HEIGHT = "h-14";
@@ -88,21 +88,94 @@ function InfoPanel({ id, open, children, }) {
             .filter(Boolean)
             .join(" "), "aria-hidden": !open, children: _jsx(Div, { className: "max-h-[60vh]", overflow: "y-auto", padding: "md", children: children }) }));
 }
-function PageActionsRow({ pageActions, dispatchAction, }) {
-    return (_jsx(_Fragment, { children: pageActions.map((action) => {
+/**
+ * How many actions fit on one line before the row splits in two.
+ *
+ * 🛑 ROW COUNT is a function of `pageActions.length` and NOTHING else — never
+ * of validation state, and never of measured width. `BottomChrome`'s
+ * ResizeObserver faithfully republishes `--bottom-chrome-height` on any height
+ * change, and every consumer (BackToTop, the pagination bar, the footer's
+ * clearance) reflows with it. A bar that grew a row when an error appeared
+ * would shift the whole page while the user was typing. The error count lives
+ * in `infoLabel`, which sits in the absolutely-positioned panel and is excluded
+ * from the published height by construction.
+ *
+ * The invariant is about ROW COUNT, not pixel height. `ActionRow` lets a long
+ * label wrap to a second line, which changes the bar's height by ~16px,
+ * monotonically, and the observer handles that correctly. What must never
+ * happen is a row count that FLIPS: that is a ~48px step and it is reversible
+ * mid-interaction.
+ *
+ * Which is exactly why the count split stays primary and `flex-wrap` is only an
+ * overflow net. In this app LABELS ARE STATE — "Add to Cart" becomes "Adding…",
+ * "Buy Now" becomes "Out of Stock", "Apply" becomes "Apply (3)". If width alone
+ * decided rows, tapping Add to Cart would shorten the label, free ~40px,
+ * un-wrap a row and shift the page under the user's thumb at the exact moment
+ * they committed to the tap.
+ *
+ * 🛑 This constant is COUPLED to `--appkit-size-action-min` (tokens.css).
+ * Two actions per line is safe only while `2 × action-min + gap` fits the
+ * narrowest supported viewport (280px). Raising either without re-checking that
+ * sum reintroduces device-dependent row flipping.
+ */
+const SINGLE_ROW_MAX_ACTIONS = 2;
+function ActionButtons({ actions, dispatchAction, }) {
+    return (_jsx(_Fragment, { children: actions.map((action) => {
             const isIconOnly = !action.label;
-            const growClass = isIconOnly || action.grow === false
-                ? "flex-shrink-0 w-11"
-                : "flex-1 min-w-0";
+            /*
+             * Width is ActionRow's job now, not this component's — every action is
+             * sized from its own label by `.appkit-action-row__group > *`, and only
+             * the leftover is shared out. There is deliberately NO per-action width
+             * class here: the old `grow` ternary is what produced a 44px stub
+             * reading "Ba" next to a full-width "Continue to payment".
+             *
+             * The one thing a stylesheet cannot infer is that a child has no label,
+             * so icon-only opts into its square tap target explicitly.
+             *
+             * 🛑 Never add `flex-1`, `flex-shrink-0`, `basis-*`, `w-*`, `h-*`,
+             * `truncate` or `leading-none` below. Both tailwind configs set
+             * `important: true`, so any of them beats ActionRow's CSS and silently
+             * reverts this bar to the squeezed behaviour with no visible error.
+             */
             return (_jsxs(Button, { type: "button", variant: action.variant ?? "primary", size: "sm", isLoading: action.loading, disabled: action.disabled, onClick: () => dispatchAction(action.id), className: [
-                    "h-10 relative",
-                    growClass,
-                    isIconOnly ? "px-[var(--appkit-space-0)] justify-center" : "",
+                    "relative",
+                    isIconOnly ? "appkit-action-row__icon-only justify-center" : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] ${CLS_COUNT_BADGE} text-[10px] ${FLEX_CENTER} px-[var(--appkit-space-1)] pointer-events-none select-none`, rounded: "full", weight: "bold", "aria-hidden": "true", children: action.badge }))] }, action.id));
+                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] ${CLS_COUNT_BADGE} text-[10px] ${FLEX_CENTER} px-[var(--appkit-space-1)] pointer-events-none select-none`, rounded: "full", weight: "bold", "aria-hidden": "true", children: action.badge }))] }, action.id));
         }) }));
 }
+/**
+ * Lays a form's or a page's actions out across one or two lines.
+ *
+ * | n    | layout                                                          |
+ * |------|-----------------------------------------------------------------|
+ * | 1    | one row, full-width primary                                     |
+ * | 2    | one row, each sized from its own label                          |
+ * | 3+   | two rows — secondaries above, primary full-width below           |
+ *
+ * The LAST action is treated as the primary. That holds for every producer:
+ * `useFormBottomActions` appends submit last, and the checkout/cart bars build
+ * `[back, primary]`. Putting it on its own line keeps the thumb target the same
+ * size no matter how many secondary actions a screen has, which is the whole
+ * reason a 5-action form (3 forms + soft-ban + hard-ban on the admin user
+ * editor) was unrepresentable before.
+ *
+ * Secondaries WRAP rather than overflowing into a menu. Wrapping keeps the
+ * height a pure function of the action count — the invariant above — whereas a
+ * popover would add a second interaction to reach an action that is already
+ * only one line away. No current caller exceeds five.
+ */
+function PageActionsRow({ pageActions, dispatchAction, }) {
+    if (pageActions.length === 0)
+        return null;
+    if (pageActions.length <= SINGLE_ROW_MAX_ACTIONS) {
+        return (_jsx(ActionRow, { children: _jsx(ActionButtons, { actions: pageActions, dispatchAction: dispatchAction }) }));
+    }
+    const secondaries = pageActions.slice(0, -1);
+    const primary = pageActions[pageActions.length - 1];
+    return (_jsxs(Div, { className: "flex w-full flex-col gap-[var(--appkit-space-2)]", children: [_jsx(ActionRow, { children: _jsx(ActionButtons, { actions: secondaries, dispatchAction: dispatchAction }) }), _jsx(ActionRow, { children: _jsx(ActionButtons, { actions: [primary], dispatchAction: dispatchAction }) })] }));
+}
 export default function BottomActions() {
     const { state, actionCallbacksRef, bulkCallbacksRef, bulkClearRef } = useBottomActionsContext();
     const [pickerOpen, setPickerOpen] = useState(false);
@@ -204,7 +277,7 @@ export default function BottomActions() {
                             isVisible ? "" : "pointer-events-none",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `min-${BOTTOM_NAV_HEIGHT} py-[var(--appkit-space-2)]`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                                 "flex-1 min-w-0 h-10 flex items-center gap-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",

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

@@ -14,7 +14,7 @@
  * ```tsx
  * useBottomActions({
  * actions: [
- * { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", grow: false, onClick: handleWishlist },
+ * { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", onClick: handleWishlist },
  * { id: "cart", label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
  * { id: "buy", label: t("buyNow"), variant: "primary", onClick: handleBuyNow },
  * ],
@@ -53,11 +53,6 @@ export interface BottomAction {
     disabled?: boolean;
     /** Show spinner inside the button. */
     loading?: boolean;
-    /**
-     * When true (default) the button grows to fill remaining space.
-     * Set to false for compact icon-only buttons.
-     */
-    grow?: boolean;
 }
 export interface BottomBulkConfig {
     /** Number of currently selected items. Bar activates when > 0. */

package/dist/features/layout/BottomActionsContext.js

@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * ```tsx
  * useBottomActions({
  * actions: [
- * { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", grow: false, onClick: handleWishlist },
+ * { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", onClick: handleWishlist },
  * { id: "cart", label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
  * { id: "buy", label: t("buyNow"), variant: "primary", onClick: handleBuyNow },
  * ],

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

@@ -28,10 +28,10 @@ export function useBottomActions(options = {}) {
     const bulkRef = useRef(options.bulk);
     bulkRef.current = options.bulk;
     const actionKey = (options.actions ?? [])
-        .map(({ id, label, variant, badge, disabled, loading, grow }) => `${id}|${label}|${variant}|${badge}|${disabled}|${loading}|${grow}`)
+        .map(({ id, label, variant, badge, disabled, loading }) => `${id}|${label}|${variant}|${badge}|${disabled}|${loading}`)
         .join(",");
     const bulkCountKey = options.bulk
-        ? `${options.bulk.selectedCount}|${options.bulk.actions.map((a) => `${a.id}|${a.label}|${a.variant}|${a.badge}|${a.disabled}|${a.loading}|${a.grow}`).join(",")}`
+        ? `${options.bulk.selectedCount}|${options.bulk.actions.map((a) => `${a.id}|${a.label}|${a.variant}|${a.badge}|${a.disabled}|${a.loading}`).join(",")}`
         : "";
     useEffect(() => {
         if (!isTop)

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

@@ -1,4 +1,5 @@
 import { type FormShellContextValue } from "../../../ui/forms/FormShell";
+import type { BottomAction } from "../BottomActionsContext";
 export interface UseFormBottomActionsOptions {
     /** Runs when the pinned primary button is pressed. */
     onSubmit: () => void | Promise<void>;
@@ -26,6 +27,16 @@ export interface UseFormBottomActionsOptions {
         onClick: () => void;
         disabled?: boolean;
     };
+    /**
+     * Further actions this form offers, spliced between the destructive one and
+     * Submit so the ordering rule survives: destructive furthest from the thumb,
+     * submit under it.
+     *
+     * Exists because the bar was hard-capped at three. `/admin/users` needs five
+     * (three forms plus soft-ban and hard-ban), so its extra actions had nowhere
+     * to go and stayed as an inline row the pinned bar then competed with.
+     */
+    extraActions?: BottomAction[];
     ctx?: FormShellContextValue;
 }
 /**
@@ -63,5 +74,5 @@ export interface UseFormBottomActionsOptions {
  *    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, destructiveAction, ctx: ctxProp, }: UseFormBottomActionsOptions): void;
+export declare function useFormBottomActions({ onSubmit, onCancel, submitLabel, cancelLabel, isLoading, disabled, enabled, destructiveAction, extraActions, ctx: ctxProp, }: UseFormBottomActionsOptions): void;
 export default useFormBottomActions;

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

@@ -40,7 +40,7 @@ import { useBottomActions } from "./useBottomActions";
  *    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, destructiveAction, ctx: ctxProp, }) {
+export function useFormBottomActions({ onSubmit, onCancel, submitLabel = "Save", cancelLabel = "Cancel", isLoading = false, disabled = false, enabled = true, destructiveAction, extraActions, ctx: ctxProp, }) {
     const ambient = useContext(FormShellContext);
     const ctx = ctxProp ?? ambient;
     const insideOverlay = useIsInsideOverlay();
@@ -53,14 +53,18 @@ export function useFormBottomActions({ onSubmit, onCancel, submitLabel = "Save",
         const list = [];
         /*
          * Destructive FIRST, so it is furthest from the thumb's resting position
-         * on the primary action. It never grows, so Save keeps the width.
+         * on the primary action, which BottomActions renders last.
+         *
+         * None of these set a width. `grow` no longer exists on BottomAction —
+         * ActionRow sizes every action from its own label and shares only the
+         * leftover, so "Cancel" and "Save" each get a width that fits their text
+         * instead of Cancel collapsing to a 44px square while Save took the rest.
          */
         if (destructiveAction) {
             list.push({
                 id: "form-destructive",
                 label: destructiveAction.label,
                 variant: "danger",
-                grow: false,
                 onClick: destructiveAction.onClick,
                 disabled: destructiveAction.disabled || isLoading,
             });
@@ -70,22 +74,24 @@ export function useFormBottomActions({ onSubmit, onCancel, submitLabel = "Save",
                 id: "form-cancel",
                 label: cancelLabel,
                 variant: "outline",
-                grow: false,
                 onClick: onCancel,
                 disabled: isLoading,
             });
         }
+        if (extraActions?.length)
+            list.push(...extraActions);
+        // Submit LAST: BottomActions treats the final action as the primary and
+        // gives it its own full-width line once the bar holds three or more.
         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, destructiveAction]);
+    }, [active, onCancel, cancelLabel, submitLabel, isLoading, disabled, onSubmit, destructiveAction, extraActions]);
     useBottomActions({
         actions,
         // Encodes the count on purpose — see (1) in the header.

package/dist/features/lottery/schemas/config-write.d.ts

@@ -20,7 +20,16 @@ export declare const lotterySlotWriteSchema: z.ZodObject<{
     slotNumber: number;
     image?: string | undefined;
 }>;
+/**
+ * 🛑 `annotate()` must be the OUTERMOST call on each field — it keys a WeakMap
+ * by schema instance and every zod wrapper returns a new one.
+ */
 export declare const lotteryConfigWriteSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
+    pricingMode: z.ZodEnum<["uniform", "variable"]>;
+    uniformPrice: z.ZodOptional<z.ZodNumber>;
+    drawWindowDurationMinutes: z.ZodNumber;
+    maxPullsPerTransaction: z.ZodNumber;
+    maxPullsPerUser: z.ZodNumber;
     slots: z.ZodArray<z.ZodObject<{
         slotNumber: z.ZodNumber;
         name: z.ZodString;
@@ -37,11 +46,6 @@ export declare const lotteryConfigWriteSchema: z.ZodEffects<z.ZodEffects<z.ZodOb
         slotNumber: number;
         image?: string | undefined;
     }>, "many">;
-    pricingMode: z.ZodEnum<["uniform", "variable"]>;
-    uniformPrice: z.ZodOptional<z.ZodNumber>;
-    drawWindowDurationMinutes: z.ZodNumber;
-    maxPullsPerTransaction: z.ZodNumber;
-    maxPullsPerUser: z.ZodNumber;
 }, "strict", z.ZodTypeAny, {
     slots: {
         name: string;