@mohasinac/appkit 4.13.1 → 4.15.0

package/dist/features/categories/components/CategoryDetailTabs.d.ts

@@ -7,14 +7,16 @@ export interface CategoryDetailTabsProps {
     initialProductsData?: any;
     initialBundles?: CategoryDocument[];
     initialStores?: StoreListItem[];
-    counts?: {
-        products?: number;
-        auctions?: number;
-        preOrders?: number;
-        prizeDraws?: number;
-        bundles?: number;
-        stores?: number;
-    };
+    /**
+     * tabSlug -> row count. `undefined` means the count could not be resolved,
+     * NOT zero — such a tab stays visible so a failed query can never hide real
+     * inventory (Root Cause #59).
+     *
+     * Keyed by tab id rather than by hand-named properties: the previous shape
+     * named only 6 of the 10 tabs, so classifieds / digital-codes / live / art
+     * were structurally uncountable and could never hide (Root Cause #61).
+     */
+    counts?: Record<string, number | undefined>;
     /** Enabled listing types (e.g. ["standard","auction","pre-order"]). When omitted, all tabs shown. */
     enabledListingTypes?: string[];
     /** Enabled category types (e.g. ["category","brand","bundle"]). When omitted, all tabs shown. */

package/dist/features/categories/components/CategoryDetailTabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "../../../ui";
+import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
@@ -39,17 +39,7 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
 };
 export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
-    const countFor = (id) => {
-        switch (id) {
-            case "products": return counts?.products;
-            case "auctions": return counts?.auctions;
-            case "pre-orders": return counts?.preOrders;
-            case "prize-draws": return counts?.prizeDraws;
-            case "bundles": return counts?.bundles;
-            case "stores": return counts?.stores;
-            default: return undefined;
-        }
-    };
+    const countFor = (id) => counts?.[id];
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
         if (mapping) {
@@ -62,14 +52,19 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
                     return false;
             }
         }
-        // Hide a tab only when its count is known and explicitly zero — a tab
-        // whose count was never fetched (undefined) stays visible so we don't
-        // silently hide a listing type this page hasn't wired count-tracking
-        // for yet.
+        // Hide a tab only when its count is known and explicitly zero. `undefined`
+        // now means the count query FAILED (every tab is counted), so keeping it
+        // visible is the fail-open choice: an empty tab is a far smaller error than
+        // hiding a tab that holds real listings.
         const count = countFor(t.id);
         return count === undefined || count > 0;
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
     const [activeTab, setActiveTab] = useState(firstTabId);
+    // Every tab counted zero — render the empty state rather than an empty tab
+    // strip with no body beneath it.
+    if (visibleTabs.length === 0) {
+        return (_jsx(EmptyState, { title: "Nothing listed here yet", description: "This category has no active listings right now. Check back soon." }));
+    }
     return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), GENERIC_TAB_LISTING_TYPES[activeTab] && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, listingTypes: GENERIC_TAB_LISTING_TYPES[activeTab], initialData: activeTab === pluginFor("standard").tabSlug ? initialProductsData : undefined })), activeTab === pluginFor("auction").tabSlug && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("pre-order").tabSlug && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("prize-draw").tabSlug && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

package/dist/features/categories/components/CategoryProductsListing.js

@@ -13,6 +13,9 @@ import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/comp
 import { useGuestCart } from "../../cart/hooks/useGuestCart";
 import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
+import { AvailabilityTabs } from "../../products/components/AvailabilityTabs";
+import { AVAILABILITY_VALUES } from "../../../constants/field-names";
+import { TABLE_KEYS } from "../../../constants/table-keys";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -38,6 +41,12 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
     const localWishlist = useGuestWishlist();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "product").map((i) => i.itemId));
     const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    // Absent means "available" — the same default `listStoreProducts`
+    // resolves server-side. These six store tabs sent NO availability
+    // param at all until 2026-08-24, while their SSR fetch did apply one,
+    // so any client refetch silently widened the list (Root Cause #30).
+    const availability = table.get(TABLE_KEYS.AVAILABILITY) ||
+        AVAILABILITY_VALUES.AVAILABLE;
     const params = {
         q: table.get("q") || undefined,
         category: categoryId || undefined,
@@ -52,6 +61,7 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
         // sievejs parses it as a same-field OR and the Firebase adapter upgrades
         // it to a `.where(…, "in", …)` query.
         listingType: listingTypes.join("|"),
+        availability,
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
     const commitSearch = useCallback(() => {
@@ -106,7 +116,7 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
                     isLoading, products: products, view,
                     getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),
                     onWishlistToggle: handleWishlistToggle, wishlistedIds, onAddToCart: handleAddToCart,

package/dist/features/categories/components/ConcernCard.js

@@ -2,5 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 export function ConcernCard({ concern, onClick, className = "", }) {
-    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-[var(--appkit-space-3)] rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-[var(--appkit-space-4)] text-left shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { className: "relative h-16 w-16", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: concern.display.coverImage, alt: concern.name, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), 
+        // No bare `flex` here: globals.css declares `.flex` un-layered + !important,
+        // which overrides `.appkit-button`'s own display. It is redundant anyway —
+        // the button is already a flex container. `flex-col items-center` now
+        // actually reaches the icon and label, which have been rendering
+        // side-by-side since the ripple wrapper landed (Root Cause #68).
+        className: `group flex-col items-center gap-[var(--appkit-space-3)] rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-[var(--appkit-space-4)] text-left shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { className: "relative h-16 w-16", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: concern.display.coverImage, alt: concern.name, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
 }

package/dist/features/categories/schemas/firestore.d.ts

@@ -162,6 +162,19 @@ export interface CategoryDocument extends BaseDocument {
     bundleQueryResolvedAt?: Date;
     /** Hand-picked products list (mirror of bundleQueryRule for static rules); kept for index-friendly queries. */
     bundleProductIds?: string[];
+    /**
+     * Categories this bundle belongs to — the union of its member products'
+     * `categorySlugs`. A bundle row has no category of its own, so without this
+     * the category page could not scope its Bundles tab at all and counted every
+     * active bundle site-wide.
+     *
+     * Denormalised at bundle create/update time and refreshed by the daily bundle
+     * stock sync. Per Root Cause #42 a mirror is never trusted alone: readers
+     * treat an ABSENT mirror as "unscoped" (show it) rather than "belongs to no
+     * category" (hide it), so a write path that forgets to set it degrades to
+     * over-inclusion instead of silently losing the bundle.
+     */
+    bundleCategorySlugs?: string[];
     /**
      * Sum of member products' individual prices (decimal rupees) — the "buy
      * separately" total the discount badge is measured against. Denormalised

package/dist/features/categories/schemas/index.d.ts

@@ -106,35 +106,35 @@ export declare const bundleQueryRuleSchema: z.ZodDiscriminatedUnion<"type", [z.Z
         tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
         listingType: z.ZodOptional<z.ZodEnum<["standard", "pre-order", "prize-draw"]>>;
     }, "strip", z.ZodTypeAny, {
-        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+        categorySlug?: string | undefined;
         brandSlug?: string | undefined;
         tags?: string[] | undefined;
-        categorySlug?: string | undefined;
-    }, {
         listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+    }, {
+        categorySlug?: string | undefined;
         brandSlug?: string | undefined;
         tags?: string[] | undefined;
-        categorySlug?: string | undefined;
+        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
     }>;
     orderBy: z.ZodOptional<z.ZodEnum<["price-asc", "price-desc", "createdAt-desc"]>>;
     limit: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
     type: "dynamic";
     filter: {
-        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+        categorySlug?: string | undefined;
         brandSlug?: string | undefined;
         tags?: string[] | undefined;
-        categorySlug?: string | undefined;
+        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
     };
     limit: number;
     orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;
 }, {
     type: "dynamic";
     filter: {
-        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+        categorySlug?: string | undefined;
         brandSlug?: string | undefined;
         tags?: string[] | undefined;
-        categorySlug?: string | undefined;
+        listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
     };
     limit: number;
     orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;
@@ -260,35 +260,35 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
             tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
             listingType: z.ZodOptional<z.ZodEnum<["standard", "pre-order", "prize-draw"]>>;
         }, "strip", z.ZodTypeAny, {
-            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
-        }, {
             listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+        }, {
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
+            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
         }>;
         orderBy: z.ZodOptional<z.ZodEnum<["price-asc", "price-desc", "createdAt-desc"]>>;
         limit: z.ZodNumber;
     }, "strip", z.ZodTypeAny, {
         type: "dynamic";
         filter: {
-            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
+            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
         };
         limit: number;
         orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;
     }, {
         type: "dynamic";
         filter: {
-            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
+            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
         };
         limit: number;
         orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;
@@ -394,11 +394,10 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     slug: string;
-    order: number;
-    position: number;
-    isFeatured: boolean;
     isActive: boolean;
+    order: number;
     createdBy: string;
+    isFeatured: boolean;
     rootId: string;
     tier: number;
     isLeaf: boolean;
@@ -409,6 +408,7 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         ogImage?: string | undefined;
         canonicalUrl?: string | undefined;
     };
+    position: number;
     parentIds: string[];
     isSearchable: boolean;
     childrenIds: string[];
@@ -466,10 +466,10 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
     } | {
         type: "dynamic";
         filter: {
-            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
+            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
         };
         limit: number;
         orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;
@@ -493,11 +493,10 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     slug: string;
-    order: number;
-    position: number;
-    isFeatured: boolean;
     isActive: boolean;
+    order: number;
     createdBy: string;
+    isFeatured: boolean;
     rootId: string;
     tier: number;
     isLeaf: boolean;
@@ -508,6 +507,7 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         ogImage?: string | undefined;
         canonicalUrl?: string | undefined;
     };
+    position: number;
     parentIds: string[];
     isSearchable: boolean;
     childrenIds: string[];
@@ -565,10 +565,10 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
     } | {
         type: "dynamic";
         filter: {
-            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
+            categorySlug?: string | undefined;
             brandSlug?: string | undefined;
             tags?: string[] | undefined;
-            categorySlug?: string | undefined;
+            listingType?: "standard" | "pre-order" | "prize-draw" | undefined;
         };
         limit: number;
         orderBy?: "price-asc" | "price-desc" | "createdAt-desc" | undefined;

package/dist/features/classified/components/ClassifiedDetailPageView.d.ts

@@ -3,5 +3,20 @@ export interface ClassifiedDetailPageViewProps {
     slug: string;
     /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
     initialProduct?: ProductDocument | null;
+    /**
+     * Render prop for offer UI, mounted inside the contact-seller panel.
+     *
+     * Deliberately the SAME shape `ProductDetailPageView.renderOfferAction` uses,
+     * so both detail views share one contract and both consumer pages share one
+     * snippet. Called only when all three offer gates pass: `featureFlags.offers`,
+     * the classified type's `canMakeOffer` capability, and the seller's own
+     * `allowOffers` opt-in.
+     */
+    renderOfferAction?: (opts: {
+        productId: string;
+        price: number;
+        currency: string;
+        minOfferPercent: number;
+    }) => React.ReactNode;
 }
-export declare function ClassifiedDetailPageView({ slug, initialProduct }: ClassifiedDetailPageViewProps): Promise<import("react").JSX.Element>;
+export declare function ClassifiedDetailPageView({ slug, initialProduct, renderOfferAction }: ClassifiedDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/classified/components/ClassifiedDetailPageView.js

@@ -21,6 +21,9 @@ import { computeRelatedItems } from "../../../_internal/server/features/products
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
 import { ClassifiedContactSellerPanel } from "./ClassifiedContactSellerPanel";
+import { getSiteSettingsGlobal } from "../../admin/utils/getSiteSettingsGlobal";
+import { canMakeOffer } from "../../../_internal/shared/listing-types/capabilities";
+import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
 import { ListingBottomActions } from "../../products/components/ListingBottomActions";
 function toDescriptionHtml(raw) {
     if (!raw)
@@ -28,7 +31,7 @@ function toDescriptionHtml(raw) {
     const s = typeof raw === "string" ? raw : JSON.stringify(raw);
     return normalizeRichTextHtml(s);
 }
-export async function ClassifiedDetailPageView({ slug, initialProduct }) {
+export async function ClassifiedDetailPageView({ slug, initialProduct, renderOfferAction }) {
     const product = initialProduct !== undefined
         ? (initialProduct ?? undefined)
         : await getClassifiedForDetail(slug).catch(() => undefined);
@@ -52,10 +55,19 @@ export async function ClassifiedDetailPageView({ slug, initialProduct }) {
     const specs = Array.isArray(p.specifications) ? p.specifications : [];
     const customSections = Array.isArray(p.customSections) ? p.customSections : [];
     const descriptionHtml = toDescriptionHtml(p.description);
-    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups] = await Promise.all([
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, siteSettings] = await Promise.all([
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
+        getSiteSettingsGlobal().catch(() => null),
     ]);
+    // Classifieds are the one non-standard type where haggling is the norm, so
+    // `canMakeOffer` is true for them — but the seller still opts in per listing
+    // (`allowOffers`, usually alongside `classified.negotiable`).
+    const offersAvailable = siteSettings?.featureFlags?.offers !== false &&
+        canMakeOffer("classified") &&
+        p.allowOffers === true &&
+        price !== null &&
+        !!renderOfferAction;
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
                     title,
                     thumb: images[0],
@@ -66,5 +78,13 @@ export async function ClassifiedDetailPageView({ slug, initialProduct }) {
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBuyBar: () => (_jsx(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: _jsx(ClassifiedContactSellerPanel, { productId: String(product.id), onContactSeller: startClassifiedConversationAction }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "classified", anchorId: "classified-contact-bar", price: price, currency: currency })] })] }));
+                            })) })), renderBuyBar: () => (_jsxs(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [offersAvailable &&
+                                    renderOfferAction({
+                                        productId: String(product.id),
+                                        price: price,
+                                        currency,
+                                        minOfferPercent: typeof p.minOfferPercent === "number"
+                                            ? p.minOfferPercent
+                                            : DEFAULT_MIN_OFFER_PERCENT,
+                                    }), _jsx(ClassifiedContactSellerPanel, { productId: String(product.id), onContactSeller: startClassifiedConversationAction })] })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "classified", anchorId: "classified-contact-bar", price: price, currency: currency })] })] }));
 }

package/dist/features/events/components/AdminEventEditorView.js

@@ -2,14 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import React, { useEffect, useMemo } from "react";
-import { z } from "zod";
+import React, { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Alert, Button, Div, Grid, Heading, Input, Label, RichTextEditor, Row, Select, Stack, StackedViewShell, TagInput, Text, Textarea, Toggle, } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { StepForm } from "../../shell";
+import { SectionForm, useSectionFormNav } from "../../shell";
+import { eventDraftSchema } from "../schemas/event-form";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
 import { CouponInlineSelect } from "../../seller/components/CouponInlineSelect";
 // Covers the cross-type required fields plus the two conditional rules the
@@ -19,27 +19,6 @@ import { CouponInlineSelect } from "../../seller/components/CouponInlineSelect";
 // form-builder arrays, raffle/spin config) are deliberately left unvalidated
 // — modeling their full conditional shape correctly would need much deeper
 // per-type domain rules than this pass is scoped for.
-const eventDraftSchema = z.object({
-    type: z.string(),
-    title: z.string().min(1, "Title is required"),
-    startsAt: z.string().min(1, "Start date is required"),
-    endsAt: z.string().min(1, "End date is required"),
-    couponId: z.string(),
-    displayCode: z.string(),
-    pollOptions: z.array(z.object({ id: z.string(), label: z.string() })),
-}).passthrough().superRefine((v, ctx) => {
-    if (v.type === "offer") {
-        if (!v.couponId.trim()) {
-            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["couponId"], message: "Coupon is required for offer events" });
-        }
-        if (!v.displayCode.trim()) {
-            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["displayCode"], message: "Display code is required for offer events" });
-        }
-    }
-    if (v.type === "poll" && v.pollOptions.filter((o) => o.label.trim()).length < 2) {
-        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["pollOptions"], message: "Poll events require at least 2 options" });
-    }
-});
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -226,7 +205,6 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
     const isEdit = Boolean(eventId);
     const [draft, setDraft] = React.useState(DEFAULT_DRAFT);
     const [slugManual, setSlugManual] = React.useState(false);
-    const [currentStep, setCurrentStep] = React.useState(0);
     const [saveMessage, setSaveMessage] = React.useState(null);
     const [triggerMessage, setTriggerMessage] = React.useState(null);
     const [raffleWinnerName, setRaffleWinnerName] = React.useState("");
@@ -358,44 +336,49 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
     });
     const isLoading = saveMutation.isPending || eventQuery.isLoading;
     // --- steps ---
-    const steps = [
+    /**
+     * Sections, not steps — every field reachable at once, one submit at the
+     * bottom. The old wizard gated Settings behind Details validating, so a
+     * missing end date made an event's poll options unreachable.
+     *
+     * Ids match the schema's `section` annotations exactly, which is what lets
+     * `<FormErrorSummary>` jump to the right panel.
+     */
+    const sections = [
         {
+            id: "details",
+            required: true,
+            quick: true,
             label: "Details",
             fields: ["type", "title", "slug", "description", "startsAt", "endsAt", "tags"],
-            validate: (values) => {
-                if (!values.title.trim())
-                    return "Title is required";
-                if (!values.startsAt)
-                    return "Start date is required";
-                if (!values.endsAt)
-                    return "End date is required";
-                return null;
-            },
+            // The per-step `validate` is gone: every rule it stated is already in
+            // eventDraftSchema (title/startsAt/endsAt are .min(1)), and it only ever
+            // acted as a gate to the next step.
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Details" }), !isEdit && (_jsx(Select, { label: "Event type", value: values.type, options: allowedTypes ? EVENT_TYPE_OPTIONS.filter((o) => allowedTypes.includes(o.value)) : EVENT_TYPE_OPTIONS, onChange: (e) => onChange({ type: e.target.value }) })), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
                             const v = e.target.value;
                             onChange({ title: v, ...(!slugManual && { slug: toEventSlug(v) }) });
                         }, placeholder: "Charizard Flash Sale 2026", required: true }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => { setSlugManual(true); onChange({ slug: e.target.value }); }, placeholder: "event-charizard-flash-sale-2026", helperText: "Auto-generated from title. Must start with 'event-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { children: "Description" }), _jsx(RichTextEditor, { value: values.description, onChange: (v) => onChange({ description: v }), minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: values.startsAt, onChange: (e) => onChange({ startsAt: e.target.value }), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: values.endsAt, onChange: (e) => onChange({ endsAt: e.target.value }), required: true })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, sale, 2026" })] })),
         },
         {
+            id: "media",
             label: "Media",
+            // <Collapse> unmounts its children — without this, collapsing the
+            // section mid-upload discards the transfer.
+            keepMounted: true,
             fields: ["coverImageUrl"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(Input, { label: "Cover Image URL (optional)", value: values.coverImageUrl, onChange: (e) => onChange({ coverImageUrl: e.target.value }), placeholder: "https://\u2026", helperText: "Direct link to the event cover image." })] })),
         },
         {
+            id: "settings",
             label: "Settings",
             fields: ["status", "allowGuestParticipation", "discountPercent", "saleBannerText", "couponId", "displayCode", "offerBannerText", "pollOptions", "resultsVisibility", "allowMultiSelect", "allowComment", "maxEntriesPerUser", "hasLeaderboard", "hasPointSystem", "pointsLabel", "entryReviewRequired", "surveyFields", "anonymous", "feedbackFields"],
-            validate: (values) => {
-                if (values.type === "offer" && !values.couponId.trim())
-                    return "Coupon ID is required for offer events";
-                if (values.type === "offer" && !values.displayCode.trim())
-                    return "Display code is required for offer events";
-                if (values.type === "poll" && values.pollOptions.filter((o) => o.label.trim()).length < 2)
-                    return "Poll events require at least 2 options";
-                return null;
-            },
+            // Same: the offer-coupon, offer-display-code and poll-minimum-options
+            // rules are all stated in eventDraftSchema's superRefine, which now
+            // surfaces them inline on the field instead of as a step-blocking banner.
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Settings" }), isEdit && (_jsx(Select, { label: "Status", value: values.status, options: EVENT_STATUS_OPTIONS, onChange: (e) => onChange({ status: e.target.value }) })), values.createdBy && (_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Created by" }), _jsx(Text, { size: "sm", color: "muted", children: values.createdBy })] })), _jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Toggle, { checked: values.allowGuestParticipation, onChange: (v) => onChange({ allowGuestParticipation: v }), label: "Allow guest participation (no login required)" }), _jsx(Text, { size: "xs", color: "muted", children: "When enabled, unauthenticated visitors can participate in this event (poll vote, survey/feedback response, raffle entry, or wheel spin), identified by a hashed IP address instead of an account. Applies uniformly to whatever entry mechanism this event type uses." })] }), values.type === "sale" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Sale configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Discount %", type: "number", value: values.discountPercent, onChange: (e) => onChange({ discountPercent: e.target.value }), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: values.saleBannerText, onChange: (e) => onChange({ saleBannerText: e.target.value }), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), values.type === "offer" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Offer configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Coupon" }), _jsx(CouponInlineSelect, { scope: "admin", value: values.couponId, onChange: (id) => onChange({ couponId: id ?? "" }), placeholder: "Search coupons\u2026", allowCreate: false })] }), _jsx(Input, { label: "Display code", value: values.displayCode, onChange: (e) => onChange({ displayCode: e.target.value }), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: values.offerBannerText, onChange: (e) => onChange({ offerBannerText: e.target.value }), placeholder: "Use CHARIZARD25 at checkout" })] })), values.type === "poll" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Poll configuration" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Options (minimum 2)" }), values.pollOptions.map((opt, idx) => (_jsxs(Row, { gap: "xs", children: [_jsx(Div, { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => onChange({ pollOptions: values.pollOptions.map((o) => o.id === opt.id ? { ...o, label: e.target.value } : o) }), placeholder: `Option ${idx + 1}` }) }), values.pollOptions.length > 2 && (_jsx(Button, { variant: "ghost", type: "button", onClick: () => onChange({ pollOptions: values.pollOptions.filter((o) => o.id !== opt.id) }), className: CLS_REMOVE_BTN_PX2, "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ pollOptions: [...values.pollOptions, { id: `opt${Date.now()}`, label: "" }] }), children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: values.resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => onChange({ resultsVisibility: e.target.value }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Toggle, { checked: values.allowMultiSelect, onChange: (v) => onChange({ allowMultiSelect: v }), label: "Allow multi-select" }), _jsx(Toggle, { checked: values.allowComment, onChange: (v) => onChange({ allowComment: v }), label: "Allow comment with vote" })] })] })), values.type === "survey" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Survey configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Max entries per user", type: "number", value: values.maxEntriesPerUser, onChange: (e) => onChange({ maxEntriesPerUser: e.target.value }), placeholder: "1" }), values.hasPointSystem && (_jsx(Input, { label: "Points label", value: values.pointsLabel, onChange: (e) => onChange({ pointsLabel: e.target.value }), placeholder: "Points" }))] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: values.requireLogin, onChange: (v) => onChange({ requireLogin: v }), label: "Require login to participate" }), _jsx(Toggle, { checked: values.hasLeaderboard, onChange: (v) => onChange({ hasLeaderboard: v }), label: "Show leaderboard" }), _jsx(Toggle, { checked: values.hasPointSystem, onChange: (v) => onChange({ hasPointSystem: v }), label: "Enable point system" }), _jsx(Toggle, { checked: values.entryReviewRequired, onChange: (v) => onChange({ entryReviewRequired: v }), label: "Require employee review before entry is approved" })] }), _jsx(FormFieldBuilder, { fields: values.surveyFields, setFields: (f) => onChange({ surveyFields: f }) })] })), values.type === "feedback" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Feedback configuration" }), _jsx(Toggle, { checked: values.anonymous, onChange: (v) => onChange({ anonymous: v }), label: "Allow anonymous submissions" }), _jsx(FormFieldBuilder, { fields: values.feedbackFields, setFields: (f) => onChange({ feedbackFields: f }) })] }))] })),
         },
         {
+            id: "raffle",
             label: "Raffle / Spin",
             fields: ["hasRaffle", "raffleType", "raffleTopN", "rafflePrize", "rafflePrizeCouponId", "rafflePrizeProductIds", "spinPrizes", "spinMaxPerUser", "spinWindowStart", "spinWindowEnd"],
             render: ({ values, onChange }) => {
@@ -407,16 +390,11 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
         },
     ];
     const alertSection = eventQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event", children: eventQuery.error instanceof Error ? eventQuery.error.message : "Unknown error" })) : null;
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
-    const formContent = (_jsxs(Stack, { gap: "sm", children: [alertSection, _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-event", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Event", isLoading: isLoading })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") || saveMessage.toLowerCase().includes("error") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
+    // Replaces the hand-rolled fieldToStepIndex + goToStep pair. The hook owns
+    // the expand-then-scroll ordering a raw setState cannot: a collapsed panel
+    // must MOUNT before scrollIntoView and focus can reach the offending field.
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const formContent = (_jsxs(Stack, { gap: "sm", children: [alertSection, _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: () => { saveMutation.mutate(); }, schema: eventDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: isEdit ? "Save Changes" : "Create Event", isLoading: isLoading })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") || saveMessage.toLowerCase().includes("error") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }

package/dist/features/events/components/AdminEventEntriesView.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useApiMutation, sieveFilter, SIEVE_OP, sortBy } from "@mohasinac/appkit/client";
-import React from "react";
+import React, { useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, Div, Input, Row, Select, Stack, Text, useToast } from "../../../ui";
+import { Alert, Button, Div, Input, Row, Select, Stack, Text, useToast, RecordDetailModal, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { normalizeError } from "../../../errors/normalize";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
@@ -128,6 +128,10 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
         },
     ];
     const eventTitle = statsQuery.data?.event?.title;
+    // Approve / Waitlist / Cancel were offered on an entry the admin could never
+    // read — the poll vote, the comment and the survey answers were all invisible
+    // (Root Cause #56, "acting blind"). The row already carries the whole entry.
+    const [detail, setDetail] = useState(null);
     const config = {
         portal: "admin",
         title: eventTitle ? `${eventTitle} Entries` : "Event Entries",
@@ -139,6 +143,7 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
         endpoint: resolvedEntriesEndpoint,
         sortOptions: [{ value: sortBy("submittedAt", "DESC"), label: "Most recent" }],
         columns,
+        onRowClick: (row) => setDetail(row),
         mapRows: (response) => response.items ?? [],
         getTotal: (response) => response.total ?? (response.items ?? []).length,
         buildFilters: (state) => state.reviewStatus ? sieveFilter("reviewStatus", SIEVE_OP.EQ, state.reviewStatus) : undefined,
@@ -146,5 +151,19 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
         toolbarExtra: eventId ? (_jsx(Button, { variant: "ghost", action: ACTIONS.ADMIN["export-event-entries"], onClick: handleExportReport })) : undefined,
         renderAboveContent: () => (_jsxs(Stack, { gap: "3", className: "px-[var(--appkit-space-3)] pb-[var(--appkit-space-2)]", children: [!eventId ? (_jsx(Alert, { variant: "warning", title: "Missing event id", children: "Event id is required to load entries." })) : null, statsQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event stats", children: statsQuery.error instanceof Error ? statsQuery.error.message : "Unknown error" })) : null, _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-3", children: [_jsx(Alert, { variant: "info", title: "Total entries", children: String(statsQuery.data?.stats?.totalEntries ?? 0) }), _jsx(Alert, { variant: "success", title: "Approved", children: String(statsQuery.data?.stats?.approvedEntries ?? 0) }), _jsx(Alert, { variant: "warning", title: "Flagged", children: String(statsQuery.data?.stats?.flaggedEntries ?? 0) })] })] })),
     };
-    return _jsx(DataListingView, { config: config });
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: detail?.userDisplayName || detail?.userEmail || "Entry", badges: detail ? [{ label: detail.reviewStatus }] : undefined, description: detail?.pollComment, fields: detail
+                    ? [
+                        { label: "Entrant", value: detail.userDisplayName ?? detail.userId ?? "—" },
+                        { label: "Email", value: detail.userEmail ?? "—" },
+                        { label: "Review status", value: detail.reviewStatus },
+                        { label: "Points", value: detail.points != null ? String(detail.points) : "—" },
+                        { label: "Raffle eligible", value: detail.raffleEligible ? "Yes" : "No" },
+                        { label: "Poll votes", value: detail.pollVotes?.join(", ") || "—" },
+                        { label: "Reviewed by", value: detail.reviewedBy ?? "—" },
+                        { label: "Review note", value: detail.reviewNote ?? "—" },
+                        { label: "Entry ID", value: detail.id },
+                    ]
+                    : undefined, 
+                // The survey/feedback answers — the actual submission being judged.
+                metadata: detail?.formResponses })] }));
 }