@mohasinac/appkit 2.7.45 → 2.7.47

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

@@ -123,6 +123,13 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const reviewCount = typeof p.reviewCount === "number" ? p.reviewCount : null;
     const category = typeof p.category === "string" ? p.category : null;
     const categoryName = typeof p.categoryName === "string" ? p.categoryName : null;
+    // categorySlugs/categoryNames: multi-category support (S-uni-formshell-prep)
+    const categorySlugs = Array.isArray(p.categorySlugs)
+        ? p.categorySlugs
+        : category ? [category] : [];
+    const categoryNames = Array.isArray(p.categoryNames)
+        ? p.categoryNames
+        : categoryName ? [categoryName] : [];
     const subcategory = typeof p.subcategory === "string" ? p.subcategory : null;
     const brand = typeof p.brand === "string" ? p.brand : null;
     const brandSlug = typeof p.brandSlug === "string" ? p.brandSlug : null;
@@ -152,6 +159,14 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const specs = Array.isArray(p.specifications)
         ? p.specifications
         : [];
+    const customFields = Array.isArray(p.customFields)
+        ? p.customFields.map((f) => ({
+            name: f.key,
+            value: String(f.value),
+            unit: f.unit,
+        }))
+        : [];
+    const allSpecs = [...specs, ...customFields];
     const customSections = Array.isArray(p.customSections)
         ? p.customSections
         : [];
@@ -234,7 +249,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                         ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
                                         : "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400"}`, children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
                                             ? ` — only ${effectiveStock} left`
-                                            : ""] })), (categoryName || category || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category })), subcategory && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400 capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: "inline-flex items-center gap-1 rounded-full border border-teal-300 bg-teal-50 px-2.5 py-1 text-xs font-semibold text-teal-700 transition-colors hover:border-teal-500 hover:bg-teal-100 dark:border-teal-800/60 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:border-teal-600 dark:hover:bg-teal-900/50", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
+                                            : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400 capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: "inline-flex items-center gap-1 rounded-full border border-teal-300 bg-teal-50 px-2.5 py-1 text-xs font-semibold text-teal-700 transition-colors hover:border-teal-500 hover:bg-teal-100 dark:border-teal-800/60 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:border-teal-600 dark:hover:bg-teal-900/50", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
                                         featured: "Featured",
                                         fasterDelivery: "Faster Delivery",
                                         ratedSeller: "Rated Seller",
@@ -270,7 +285,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: allSpecs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: allSpecs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),

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

@@ -17,11 +17,13 @@ import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
+import { useBrands } from "../hooks/useBrands";
+import { useProductFeatures } from "./ProductFeaturesContext";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
-const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.CONDITION, TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.BRAND, TABLE_KEYS.STORE_ID, TABLE_KEYS.FREE_SHIPPING, TABLE_KEYS.TAGS];
+const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.CONDITION, TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.BRAND, TABLE_KEYS.STORE_ID, TABLE_KEYS.FREE_SHIPPING, TABLE_KEYS.TAGS, TABLE_KEYS.FEATURES, TABLE_KEYS.IS_PART_OF_BUNDLE];
 export function ProductsIndexListing({ initialData }) {
     const router = useRouter();
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
@@ -32,7 +34,7 @@ export function ProductsIndexListing({ initialData }) {
     const [compareIds, setCompareIds] = useState([]);
     const showSold = table.get(TABLE_KEYS.SHOW_SOLD) === "true";
     const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
@@ -42,10 +44,9 @@ export function ProductsIndexListing({ initialData }) {
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_SOLD]: "" });
-        onFilterClear();
+        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_SOLD]: "" });
         setSearchInput("");
-    }, [table, onFilterClear]);
+    }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_SOLD) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
@@ -55,6 +56,9 @@ export function ProductsIndexListing({ initialData }) {
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "product").map((i) => i.itemId));
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
+    const { brandOptions } = useBrands();
+    const features = useProductFeatures() ?? [];
+    const featureOptions = features.map((f) => ({ value: f.id, label: f.label }));
     const params = {
         q: table.get(TABLE_KEYS.QUERY) || undefined,
         category: table.get(TABLE_KEYS.CATEGORY) || undefined,
@@ -169,5 +173,5 @@ export function ProductsIndexListing({ initialData }) {
                 ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view === "grid" ? "card" : "list", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart, onBuyNow: handleBuyNow, selectionMode: selection.isSelecting, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "product", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
-                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions, featureOptions: featureOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -206,6 +206,8 @@ export interface ProductDocument {
     /** Reverse pointers — bundle ids that include this product. */
     partOfBundleIds?: string[];
     partOfBundleTitles?: string[];
+    /** Denormalised flag — true when partOfBundleIds has at least one entry. Enables Firestore isPartOfBundle==true query. */
+    isPartOfBundle?: boolean;
     prizeDrawItems?: PrizeDrawItem[];
     pricePerEntry?: number;
     prizeMaxEntries?: number;

package/dist/features/reviews/actions/review-actions.js

@@ -33,12 +33,14 @@ export async function createReview(userId, input) {
         storeId: product.storeId,
         storeName: product.storeName,
         userId,
+        userSlug: profile?.id,
         userName: profile?.displayName ?? "Anonymous",
         userAvatar: profile?.photoURL ?? "",
         rating: input.rating,
         title: input.title,
         comment: input.comment,
         images,
+        hasImages: images.length > 0,
         video: finalVideoUrl
             ? {
                 url: finalVideoUrl,

package/dist/features/reviews/components/ReviewDetailShell.js

@@ -72,8 +72,9 @@ export function ReviewDetailShell({ review, storeHref }) {
         ? String(ROUTES.PUBLIC.PRODUCT_DETAIL(review.productId))
         : null;
     const sellerHref = storeHref ?? null;
-    const reviewerHref = !review.isAnonymous && review.userId
-        ? String(ROUTES.PUBLIC.PROFILE(review.userId))
+    const reviewerProfileId = review.userSlug ?? review.userId;
+    const reviewerHref = !review.isAnonymous && reviewerProfileId
+        ? String(ROUTES.PUBLIC.PROFILE(reviewerProfileId))
         : null;
     const currentImage = lightboxIdx !== null ? images[lightboxIdx] : null;
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-neutral-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 pb-8 pt-10", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs("span", { className: "text-2xl font-bold text-neutral-900 dark:text-white", children: [review.rating, ".0"] }), review.verified && (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "\u2713 Verified Purchase" })), review.featured && (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400", children: "\u2605 Featured" }))] }), review.title && (_jsx(Heading, { level: 1, className: "text-2xl font-bold text-neutral-900 dark:text-white mb-4 leading-snug", children: review.title })), _jsxs("div", { className: "flex items-center gap-3", children: [review.userAvatar ? (_jsx("div", { role: "img", "aria-label": displayName, className: "h-11 w-11 flex-shrink-0 rounded-full bg-center bg-cover ring-2 ring-white dark:ring-zinc-800", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-base font-bold text-primary ring-2 ring-white dark:ring-zinc-800", children: initials })), _jsxs("div", { className: "min-w-0", children: [reviewerHref ? (_jsx(Link, { href: reviewerHref, className: "text-sm font-semibold text-neutral-900 dark:text-white hover:text-primary transition-colors", children: displayName })) : (_jsx("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: review.isAnonymous ? "Anonymous" : displayName })), date && (_jsx(Text, { className: "text-xs text-neutral-400 dark:text-zinc-500 mt-0.5", children: date }))] })] })] }) }), _jsxs("div", { className: "mx-auto max-w-3xl px-4 py-8 space-y-8", children: [review.comment && (_jsx(Section, { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-neutral-700 dark:text-zinc-300" }) })), images.length > 0 && (_jsxs(Section, { children: [_jsxs(Heading, { level: 2, className: "text-sm font-semibold uppercase tracking-wide text-neutral-400 dark:text-zinc-500 mb-3", children: ["Photos (", images.length, ")"] }), _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: images.map((img, i) => (_jsxs("button", { type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, className: "group relative aspect-square overflow-hidden rounded-xl border border-neutral-200 dark:border-zinc-700 bg-neutral-100 dark:bg-zinc-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx("div", { className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30", children: _jsx("span", { className: "text-white text-xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-sm font-semibold uppercase tracking-wide text-neutral-400 dark:text-zinc-500 mb-3", children: "Video" }), _jsx("div", { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-zinc-700 bg-black aspect-video", children: _jsx("video", { src: review.video.url, poster: review.video.thumbnailUrl, controls: true, className: "h-full w-full", preload: "metadata" }) })] })), _jsxs(Section, { className: "flex items-center gap-4 py-4 border-t border-neutral-100 dark:border-zinc-800", children: [_jsx("div", { className: "text-sm text-neutral-500 dark:text-zinc-400", children: helpfulCount > 0 && (_jsxs("span", { children: [_jsx("strong", { className: "text-neutral-900 dark:text-white", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs("button", { type: "button", onClick: handleVote, disabled: voted || voting, className: `ml-auto flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors ${voted

package/dist/features/reviews/components/ReviewFilters.js

@@ -60,5 +60,5 @@ export function ReviewFilters({ table, variant = "admin", brandOptions, }) {
         : [];
     const isAdmin = variant === "admin";
     const showStatus = variant !== "public";
-    return (_jsxs(Div, { children: [showStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("rating"), options: ratingOptions, selected: selectedRating, onChange: (vals) => table.set("rating", vals.join("|")), searchable: false, defaultCollapsed: variant === "admin" }), brandOptions && brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: table.get("brand") ? [table.get("brand")] : [], onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, selectionMode: "single", defaultCollapsed: true })), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), isAdmin && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: t("verified"), label: t("showVerifiedOnly"), checked: table.get("verified") === "true", onChange: (v) => table.set("verified", v ? "true" : "") }), _jsx(SwitchFilter, { title: t("featured"), label: t("showFeaturedOnly"), checked: table.get("featured") === "true", onChange: (v) => table.set("featured", v ? "true" : "") })] })), _jsx(RangeFilter, { title: t("votesRange"), minValue: table.get("minVotes"), maxValue: table.get("maxVotes"), onMinChange: (v) => table.set("minVotes", v), onMaxChange: (v) => table.set("maxVotes", v), minBound: 0, maxBound: 10000, step: 1, minPlaceholder: t("minVotes"), maxPlaceholder: t("maxVotes"), defaultCollapsed: true })] }));
+    return (_jsxs(Div, { children: [showStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("rating"), options: ratingOptions, selected: selectedRating, onChange: (vals) => table.set("rating", vals.join("|")), searchable: false, defaultCollapsed: variant === "admin" }), brandOptions && brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: table.get("brand") ? [table.get("brand")] : [], onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, selectionMode: "single", defaultCollapsed: true })), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), isAdmin && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: t("verified"), label: t("showVerifiedOnly"), checked: table.get("verified") === "true", onChange: (v) => table.set("verified", v ? "true" : "") }), _jsx(SwitchFilter, { title: t("featured"), label: t("showFeaturedOnly"), checked: table.get("featured") === "true", onChange: (v) => table.set("featured", v ? "true" : "") })] })), _jsx(RangeFilter, { title: t("votesRange"), minValue: table.get("minVotes"), maxValue: table.get("maxVotes"), onMinChange: (v) => table.set("minVotes", v), onMaxChange: (v) => table.set("maxVotes", v), minBound: 0, maxBound: 10000, step: 1, minPlaceholder: t("minVotes"), maxPlaceholder: t("maxVotes"), defaultCollapsed: true }), _jsx(SwitchFilter, { title: "Media", label: "Show reviews with photos only", checked: table.get("hasImages") === "true", onChange: (v) => table.set("hasImages", v ? "true" : "") })] }));
 }

package/dist/features/reviews/components/ReviewsIndexListing.js

@@ -12,7 +12,13 @@ import { sortBy } from "../../../constants/sort";
 import { REVIEW_FIELDS } from "../../../constants/field-names";
 const PAGE_SIZE = 12;
 const DEFAULT_SORT = sortBy(REVIEW_FIELDS.CREATED_AT);
-const FILTER_KEYS = ["rating", TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO, "minVotes", "maxVotes"];
+const FILTER_KEYS = ["rating", TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO, "minVotes", "maxVotes", "hasImages"];
+const SORT_OPTION_LABELS = {
+    sortNewest: "Newest First",
+    sortOldest: "Oldest First",
+    sortHighestRated: "Highest Rated",
+    sortLowestRated: "Lowest Rated",
+};
 export function ReviewsIndexListing({ initialData, variant = "public", }) {
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
@@ -88,13 +94,14 @@ export function ReviewsIndexListing({ initialData, variant = "public", }) {
         dateTo: table.get(TABLE_KEYS.DATE_TO) || undefined,
         minVotes: table.get("minVotes") ? Number(table.get("minVotes")) : undefined,
         maxVotes: table.get("maxVotes") ? Number(table.get("maxVotes")) : undefined,
+        hasImages: table.get("hasImages") === "true" ? true : undefined,
         sort,
         page: currentPage,
         perPage: PAGE_SIZE,
     }, { initialData });
     const sortOptions = REVIEW_PUBLIC_SORT_OPTIONS.map((opt) => ({
         value: opt.value,
-        label: opt.key,
+        label: SORT_OPTION_LABELS[opt.key] ?? opt.key,
     }));
     return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search reviews by product name...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: _jsxs("div", { className: "p-4 space-y-3", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] }) }, i))) })) : reviews.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No reviews found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: reviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: reviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(ReviewFilters, { table: pendingTable, variant: variant }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

package/dist/features/reviews/hooks/useReviews.js

@@ -29,6 +29,8 @@ export function useReviews(params = {}, opts) {
         sp.set("minVotes", String(params.minVotes));
     if (params.maxVotes !== undefined)
         sp.set("maxVotes", String(params.maxVotes));
+    if (params.hasImages)
+        sp.set("hasImages", "true");
     // General listing mode (no productId)
     if (!params.productId && !params.userId && !params.storeId) {
         sp.set("latest", "true");

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

@@ -22,12 +22,16 @@ export interface ReviewDocument {
     storeId?: string;
     storeName?: string;
     userId: string;
+    /** Firestore document ID of the reviewer (slug like `user-mohsin-c`). Populated on create; used to build profile links. */
+    userSlug?: string;
     userName: string;
     userAvatar?: string;
     rating: number;
     title: string;
     comment: string;
     images?: string[];
+    /** Denormalized flag — true when images array is non-empty. Enables hasImages==true Firestore query. */
+    hasImages?: boolean;
     video?: ReviewVideoField;
     status: ReviewStatus;
     moderatorId?: string;

package/dist/features/reviews/types/index.d.ts

@@ -17,6 +17,8 @@ export interface Review {
     storeSlug?: string;
     storeName?: string;
     userId: string;
+    /** Firestore document slug for the reviewer — use for profile links instead of userId (Auth UID). */
+    userSlug?: string;
     userName: string;
     userAvatar?: string;
     rating: 1 | 2 | 3 | 4 | 5;
@@ -58,6 +60,7 @@ export interface ReviewListParams {
     dateTo?: string;
     minVotes?: number;
     maxVotes?: number;
+    hasImages?: boolean;
 }
 export interface CreateReviewInput {
     productId: string;

package/dist/features/scams/components/ScamRegistryView.js

@@ -5,8 +5,14 @@ import { Shield, Phone, Wallet, Mail, ChevronRight, Search } from "lucide-react"
 import { Container, Heading, Main, Section, Text, Grid, Stack, Row, Card, Badge, Alert, EmptyState, Input, } from "../../../ui";
 import { listVerifiedScammers } from "../actions/scam-actions";
 import { SCAM_PLATFORM_LABELS } from "../schemas/firestore";
-import { SCAM_TYPE_LABELS } from "../constants/scam-types";
+import { SCAM_TYPES, SCAM_TYPE_LABELS } from "../constants/scam-types";
 import { ROUTES } from "../../../next/routing/route-map";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest Reports" },
+    { value: "createdAt", label: "Oldest Reports" },
+    { value: "-incidentCount", label: "Most Victims" },
+    { value: "-amountLost", label: "Highest Loss" },
+];
 function sp(params, key) {
     const v = params[key];
     return Array.isArray(v) ? (v[0] ?? "") : (v ?? "");
@@ -26,17 +32,44 @@ function ScammerCard({ scammer }) {
 }
 export async function ScamRegistryView({ searchParams = {} }) {
     const query = sp(searchParams, "q");
-    const result = await listVerifiedScammers(searchParams).catch(() => ({
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const scamType = sp(searchParams, "scamType");
+    const pageSize = 20;
+    const result = await listVerifiedScammers({ ...searchParams, sort, pageSize: String(pageSize) }).catch(() => ({
         items: [],
         total: 0,
         page: 1,
-        pageSize: 20,
+        pageSize,
         hasMore: false,
     }));
+    const totalPages = Math.max(1, Math.ceil(result.total / pageSize));
     const reportHref = String(ROUTES.PUBLIC.SCAM_REPORT);
-    return (_jsxs(Main, { children: [_jsx("div", { className: "border-b appkit-alert--warning rounded-none", children: _jsx(Container, { size: "xl", className: "py-2.5", children: _jsxs(Alert, { variant: "warning", compact: true, children: ["All profiles on this page have been verified by our moderation team. If you recognise a scammer not listed here,", " ", _jsx(Link, { href: reportHref, className: "font-medium underline hover:no-underline", children: "report them" }), "."] }) }) }), _jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "xl", children: [_jsxs(Row, { justify: "between", gap: "md", align: "end", className: "flex-wrap", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 1, className: "text-3xl font-semibold", children: "Scam Registry" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: "Verified scammers active in India's collectibles community. Search by name, phone, or UPI." })] }), _jsxs(Link, { href: reportHref, className: "appkit-button appkit-button--danger appkit-button--md shrink-0", children: [_jsx(Shield, { className: "h-4 w-4" }), "Report a Scammer"] })] }), _jsx("form", { method: "GET", className: "max-w-xl", children: _jsx(Input, { type: "search", name: "q", defaultValue: query, placeholder: "Search name, phone number, UPI ID, or email\u2026", icon: _jsx(Search, { className: "h-4 w-4" }) }) }), result.items.length === 0 ? (_jsx(EmptyState, { icon: _jsx(Shield, { className: "h-12 w-12" }), title: query
-                                    ? "No verified scammers matched your search"
-                                    : "No verified scammers in the registry yet", description: query
-                                    ? "Try a different name, phone number, or UPI ID."
-                                    : "Verified reports will appear here once reviewed by our moderation team." })) : (_jsxs(Stack, { gap: "md", children: [result.total > 0 && (_jsxs(Text, { variant: "secondary", className: "text-sm", children: [result.total, " verified profile", result.total !== 1 ? "s" : ""] })), _jsx(Grid, { cols: 3, gap: "md", children: result.items.map((scammer) => (_jsx(ScammerCard, { scammer: scammer }, scammer.id))) })] })), result.hasMore && (_jsx(Row, { justify: "center", children: _jsx(Link, { href: `/scams?page=${result.page + 1}${query ? `&q=${encodeURIComponent(query)}` : ""}`, className: "appkit-button appkit-button--outline appkit-button--md", children: "Load more" }) }))] }) }) })] }));
+    function buildHref(overrides) {
+        const p = new URLSearchParams();
+        if (query)
+            p.set("q", query);
+        if (sort !== "-createdAt")
+            p.set("sort", sort);
+        if (scamType)
+            p.set("scamType", scamType);
+        p.set("page", String(result.page));
+        for (const [k, v] of Object.entries(overrides)) {
+            if (v)
+                p.set(k, v);
+            else
+                p.delete(k);
+        }
+        const qs = p.toString();
+        return `/scams${qs ? `?${qs}` : ""}`;
+    }
+    return (_jsxs(Main, { children: [_jsx("div", { className: "border-b appkit-alert--warning rounded-none", children: _jsx(Container, { size: "xl", className: "py-2.5", children: _jsxs(Alert, { variant: "warning", compact: true, children: ["All profiles on this page have been verified by our moderation team. If you recognise a scammer not listed here,", " ", _jsx(Link, { href: reportHref, className: "font-medium underline hover:no-underline", children: "report them" }), "."] }) }) }), _jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "xl", children: [_jsxs(Row, { justify: "between", gap: "md", align: "end", className: "flex-wrap", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 1, className: "text-3xl font-semibold", children: "Scam Registry" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: "Verified scammers active in India's collectibles community. Search by name, phone, or UPI." })] }), _jsxs(Link, { href: reportHref, className: "appkit-button appkit-button--danger appkit-button--md shrink-0", children: [_jsx(Shield, { className: "h-4 w-4" }), "Report a Scammer"] })] }), _jsxs("form", { method: "GET", className: "flex flex-wrap gap-3", children: [_jsx("div", { className: "flex-1 min-w-48", children: _jsx(Input, { type: "search", name: "q", defaultValue: query, placeholder: "Search name, phone, UPI ID, or email\u2026", icon: _jsx(Search, { className: "h-4 w-4" }) }) }), _jsxs("select", { name: "scamType", defaultValue: scamType, className: "rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-primary", children: [_jsx("option", { value: "", children: "All scam types" }), SCAM_TYPES.map((t) => (_jsx("option", { value: t.id, children: t.label }, t.id)))] }), _jsx("select", { name: "sort", defaultValue: sort, className: "rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-primary", children: SORT_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), _jsx("button", { type: "submit", className: "rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Search" }), (query || scamType || sort !== "-createdAt") && (_jsx(Link, { href: "/scams", className: "rounded-lg border border-zinc-300 dark:border-slate-600 px-4 py-2 text-sm text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: "Clear" }))] }), scamType && SCAM_TYPE_LABELS[scamType] && (_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: "Filtering by:" }), _jsxs(Link, { href: buildHref({ scamType: "" }), className: "inline-flex items-center gap-1 rounded-full bg-rose-100 dark:bg-rose-900/30 px-2.5 py-0.5 text-xs font-medium text-rose-700 dark:text-rose-300 hover:bg-rose-200 transition-colors", children: [SCAM_TYPE_LABELS[scamType], _jsx("span", { "aria-hidden": "true", children: "\u00D7" })] })] })), result.items.length === 0 ? (_jsx(EmptyState, { icon: _jsx(Shield, { className: "h-12 w-12" }), title: query || scamType
+                                    ? "No verified scammers matched your filters"
+                                    : "No verified scammers in the registry yet", description: query || scamType
+                                    ? "Try a different search or clear your filters."
+                                    : "Verified reports will appear here once reviewed by our moderation team." })) : (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { variant: "secondary", className: "text-sm", children: [result.total, " verified profile", result.total !== 1 ? "s" : "", scamType && SCAM_TYPE_LABELS[scamType]
+                                                ? ` · ${SCAM_TYPE_LABELS[scamType]}`
+                                                : ""] }), _jsx(Grid, { cols: 3, gap: "md", children: result.items.map((scammer) => (_jsx(ScammerCard, { scammer: scammer }, scammer.id))) })] })), totalPages > 1 && (_jsxs(Row, { justify: "center", gap: "sm", className: "flex-wrap", children: [result.page > 1 && (_jsx(Link, { href: buildHref({ page: String(result.page - 1) }), className: "appkit-button appkit-button--outline appkit-button--sm", children: "\u2190 Prev" })), Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
+                                        const p = i + 1;
+                                        return (_jsx(Link, { href: buildHref({ page: String(p) }), className: `appkit-button appkit-button--sm ${p === result.page ? "appkit-button--primary" : "appkit-button--outline"}`, children: p }, p));
+                                    }), result.page < totalPages && (_jsx(Link, { href: buildHref({ page: String(result.page + 1) }), className: "appkit-button appkit-button--outline appkit-button--sm", children: "Next \u2192" }))] }))] }) }) })] }));
 }

package/dist/features/seller/components/SellerProductShell.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { FormShell, StepForm, StepFormActions, useFormShell } from "../../shell";
+import { FormShellProvider } from "../../../ui/forms";
 import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, Text, Toggle } from "../../../ui";
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
@@ -146,6 +147,25 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
     const [stepError, setStepError] = useState(null);
     const { isDirty, markDirty, markClean } = useFormShell();
     const router = useRouter();
+    // Auto-save in create mode — debounce 2s on any draft change
+    const autoSaveTimer = useRef(null);
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    const onSaveRef = useRef(onSave);
+    onSaveRef.current = onSave;
+    useEffect(() => {
+        if (mode !== "create" || !isDirty)
+            return;
+        if (autoSaveTimer.current)
+            clearTimeout(autoSaveTimer.current);
+        autoSaveTimer.current = setTimeout(() => {
+            const result = onSaveRef.current(draftRef.current);
+            if (result && typeof result.catch === "function")
+                result.catch(() => { });
+        }, 2000);
+        return () => { if (autoSaveTimer.current)
+            clearTimeout(autoSaveTimer.current); };
+    }, [draft, isDirty, mode]);
     const update = useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
         markDirty();
@@ -247,12 +267,16 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
             await handlePublish();
         }
     }, [currentStep, steps, draft, handlePublish]);
+    // Step error badges — run each step's validate against current draft
+    const stepValidationErrors = useMemo(() => steps.map((s) => (s.validate ? Boolean(s.validate(draft)) : false)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [draft]);
     const breadcrumb = mode === "create" ? `Store / ${listingTypeLabel}s / New` : `Store / ${listingTypeLabel}s / Edit`;
     const title = mode === "create"
         ? `New ${listingTypeLabel}`
         : draft.title ?? `Edit ${listingTypeLabel}`;
     if (mode === "create") {
-        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, renderBottomBar: () => (_jsxs("div", { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void handleNext(), onPrev: currentStep > 0 ? () => setCurrentStep((c) => c - 1) : undefined, completeLabel: `Publish ${listingTypeLabel}`, isLoading: isLoading && currentStep === steps.length - 1, disabled: isLoading }), stepError && (_jsx(Text, { className: "px-5 pb-3 text-sm text-[var(--appkit-color-error)]", children: stepError }))] })), children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading, hideActions: true }) }));
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, renderBottomBar: () => (_jsxs("div", { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void handleNext(), onPrev: currentStep > 0 ? () => setCurrentStep((c) => c - 1) : undefined, completeLabel: `Publish ${listingTypeLabel}`, isLoading: isLoading && currentStep === steps.length - 1, disabled: isLoading }), stepError && (_jsx(Text, { className: "px-5 pb-3 text-sm text-[var(--appkit-color-error)]", children: stepError }))] })), children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading, hideActions: true, stepErrors: stepValidationErrors }) }) }));
     }
     // Edit mode — FormShell with section nav + full form
     const editSections = [
@@ -263,5 +287,5 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         ...(listingType === "digital-code" ? [{ id: "digitalcode", label: "Code Details" }] : []),
         ...(listingType === "live" ? [{ id: "live", label: "Live Item" }] : []),
     ];
-    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), listingType === "auction" && (_jsxs(Section, { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs(Section, { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), listingType === "classified" && (_jsxs(Section, { id: "classified", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Meetup Details" }), _jsx(StepClassifiedSettings, { values: draft, onChange: update })] })), listingType === "digital-code" && (_jsxs(Section, { id: "digitalcode", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Code Details" }), _jsx(StepDigitalCodeSettings, { values: draft, onChange: update })] })), listingType === "live" && (_jsxs(Section, { id: "live", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Live Item Details" }), _jsx(StepLiveItemSettings, { values: draft, onChange: update })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)] pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-secondary-text)]", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }));
+    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), listingType === "auction" && (_jsxs(Section, { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs(Section, { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), listingType === "classified" && (_jsxs(Section, { id: "classified", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Meetup Details" }), _jsx(StepClassifiedSettings, { values: draft, onChange: update })] })), listingType === "digital-code" && (_jsxs(Section, { id: "digitalcode", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Code Details" }), _jsx(StepDigitalCodeSettings, { values: draft, onChange: update })] })), listingType === "live" && (_jsxs(Section, { id: "live", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Live Item Details" }), _jsx(StepLiveItemSettings, { values: draft, onChange: update })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)] pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-secondary-text)]", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }

package/dist/features/shell/StepForm.d.ts

@@ -23,6 +23,8 @@ export interface StepFormProps<T extends object = Record<string, unknown>> {
     onStepChange: (step: number) => void;
     /** Suppress the built-in action bar. Use FormShell's renderBottomBar instead. */
     hideActions?: boolean;
+    /** Per-step error flags — when true, step button shows a red error badge */
+    stepErrors?: boolean[];
 }
 export interface StepFormActionsProps {
     currentStep: number;
@@ -36,11 +38,13 @@ export interface StepFormActionsProps {
 /** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
 export declare function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel, isLoading, disabled, }: StepFormActionsProps): import("react/jsx-runtime").JSX.Element;
 /** Step indicator bar shown above step content. */
-export declare function StepIndicator({ steps, currentStep, onStepClick, }: {
+export declare function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }: {
     steps: {
         label: string;
     }[];
     currentStep: number;
     onStepClick?: (index: number) => void;
+    /** True for each step that has a validation error — renders a red dot badge */
+    stepErrors?: boolean[];
 }): import("react/jsx-runtime").JSX.Element;
-export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/features/shell/StepForm.js

@@ -13,25 +13,28 @@ export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, compl
     return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(_Fragment, { children: !isFirst && onPrev && (_jsx(Button, { variant: "outline", size: "sm", onClick: onPrev, disabled: disabled || isLoading, children: "\u2190 Back" })) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-xs text-[var(--appkit-color-text-muted)]", children: [currentStep + 1, " / ", totalSteps] }), _jsx(Button, { variant: "primary", size: "sm", onClick: onNext, disabled: disabled || isLoading, isLoading: isLoading && isLast, children: isLast ? completeLabel : nextStepLabel })] })] }));
 }
 /** Step indicator bar shown above step content. */
-export function StepIndicator({ steps, currentStep, onStepClick, }) {
+export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }) {
     return (_jsx("nav", { "aria-label": "Form steps", className: "flex items-center gap-0 mb-6 overflow-x-auto", children: steps.map((step, i) => {
             const isDone = i < currentStep;
             const isActive = i === currentStep;
+            const hasError = stepErrors?.[i] === true;
             return (_jsxs("div", { className: "flex items-center gap-0 flex-shrink-0", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
                             ? "font-semibold text-[var(--appkit-color-primary)]"
                             : isDone
                                 ? "text-[var(--appkit-color-text-muted)] cursor-pointer hover:text-[var(--appkit-color-text)]"
-                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", isActive
-                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                    : isDone
-                                        ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                        : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone ? _jsx(Check, { className: "w-3 h-3" }) : i + 1 }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
+                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs("span", { className: "relative flex-shrink-0", children: [hasError && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--appkit-color-error)] z-10", "aria-label": "This step has errors" })), _jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
+                                            ? "border-[var(--appkit-color-error)] bg-[var(--appkit-color-error)] text-white"
+                                            : isActive
+                                                ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                : isDone
+                                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone && !hasError ? _jsx(Check, { className: "w-3 h-3" }) : hasError ? "!" : i + 1 })] }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
                             ? "bg-[var(--appkit-color-primary)]"
                             : "bg-[var(--appkit-color-border)]") }))] }, i));
         }) }));
 }
-export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, }) {
-    const [stepErrors, setStepErrors] = useState({});
+export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, }) {
+    const [fieldErrors, setFieldErrors] = useState({});
     const [stepError, setStepError] = useState(null);
     // Persist step to localStorage if formId provided
     useEffect(() => {
@@ -75,8 +78,8 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
     }, [currentStep, onStepChange]);
     const currentStepDef = steps[currentStep];
     const isLast = currentStep === steps.length - 1;
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, onStepClick: (i) => { if (i < currentStep) {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i < currentStep) {
                     setStepError(null);
                     onStepChange(i);
-                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: stepErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
+                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
 }

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -19,5 +19,5 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { className: "relative aspect-video w-full overflow-hidden bg-gradient-to-br from-zinc-100 via-zinc-200 to-zinc-300 dark:from-zinc-800 dark:via-zinc-700 dark:to-zinc-900 flex-shrink-0", children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Span, { className: "text-5xl opacity-20 select-none", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Div, { className: "absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: "absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/50 backdrop-blur-sm px-2 py-0.5 text-xs font-semibold text-yellow-300", children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Div, { className: "flex flex-col flex-1 px-4 pb-4", children: [_jsx(Div, { className: "-mt-5 mb-2 flex items-end justify-between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar", className: "h-10 w-10 rounded-lg border-2 border-white dark:border-zinc-800 shadow-md object-cover" })) : (_jsx(Div, { className: "flex h-10 w-10 items-center justify-center rounded-lg border-2 border-white dark:border-zinc-800 bg-primary/10 dark:bg-primary/20 text-base font-bold text-primary shadow-md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp1} text-sm font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-primary transition-colors`, children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500 dark:text-zinc-400 flex-1` })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { gap: "sm", className: "mt-2.5 flex-wrap text-xs text-zinc-500 dark:text-zinc-400", children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Div, { className: "mt-3 pt-2.5 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between", children: [_jsxs(Span, { className: "text-xs font-semibold text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { className: "relative aspect-video w-full overflow-hidden bg-gradient-to-br from-zinc-100 via-zinc-200 to-zinc-300 dark:from-zinc-800 dark:via-zinc-700 dark:to-zinc-900 flex-shrink-0", children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Span, { className: "text-5xl opacity-20 select-none", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Div, { className: "absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: "absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/50 backdrop-blur-sm px-2 py-0.5 text-xs font-semibold text-yellow-300", children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Div, { className: "flex flex-col flex-1 px-4 pb-4", children: [_jsx(Div, { className: "-mt-5 mb-2 flex items-end justify-between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar", className: "h-10 w-10 rounded-lg border-2 border-white dark:border-zinc-800 shadow-md object-cover" })) : (_jsx(Div, { className: "flex h-10 w-10 items-center justify-center rounded-lg border-2 border-white dark:border-zinc-800 bg-primary/10 dark:bg-primary/20 text-base font-bold text-primary shadow-md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp1} text-sm font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-primary transition-colors`, children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500 dark:text-zinc-400 flex-1` })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { gap: "sm", className: "mt-2.5 flex-wrap text-xs text-zinc-500 dark:text-zinc-400", children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Div, { className: "mt-3 pt-2.5 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between", children: [_jsxs(Span, { className: "text-xs font-semibold text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
 }

package/dist/features/stores/components/StoreAuctionsListing.js

@@ -32,7 +32,7 @@ export function StoreAuctionsListing({ storeId, initialData }) {
     const [view, setView] = useState(table.get("view") || "grid");
     const localWishlist = useGuestWishlist();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "auction").map((i) => i.itemId));
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
@@ -42,10 +42,9 @@ export function StoreAuctionsListing({ storeId, initialData }) {
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        table.setMany({ q: "", sort: "" });
-        onFilterClear();
+        onResetAll({ q: "", sort: "" });
         setSearchInput("");
-    }, [table, onFilterClear]);
+    }, [onResetAll]);
     const hasActiveState = !!table.get("q") ||
         table.get("sort") !== DEFAULT_SORT ||
         filterActiveCount > 0;