@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/shell/StepForm.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Check } from "lucide-react";
+import { Button } from "../../ui/components/Button";
+import { classNames } from "../../ui/style.helper";
+/** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
+export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel = "Publish Now", isLoading = false, disabled = false, }) {
+    const isFirst = currentStep === 0;
+    const isLast = currentStep === totalSteps - 1;
+    const nextStepLabel = `Next →`;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 py-3 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx("div", { 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, }) {
+    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;
+            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
+                            ? "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, }) {
+    const [stepErrors, setStepErrors] = useState({});
+    const [stepError, setStepError] = useState(null);
+    // Persist step to localStorage if formId provided
+    useEffect(() => {
+        if (formId)
+            localStorage.setItem(`stepform:${formId}`, String(currentStep));
+    }, [formId, currentStep]);
+    // Restore step from localStorage on mount
+    useEffect(() => {
+        if (!formId)
+            return;
+        const saved = localStorage.getItem(`stepform:${formId}`);
+        if (saved !== null) {
+            const n = Number(saved);
+            if (!isNaN(n) && n >= 0 && n < steps.length)
+                onStepChange(n);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formId]);
+    const goNext = useCallback(async () => {
+        const step = steps[currentStep];
+        if (step?.validate) {
+            const err = step.validate(values);
+            if (err) {
+                setStepError(err);
+                return;
+            }
+        }
+        setStepError(null);
+        if (currentStep < steps.length - 1) {
+            onStepChange(currentStep + 1);
+        }
+        else {
+            await onComplete();
+        }
+    }, [currentStep, steps, values, onComplete, onStepChange]);
+    const goPrev = useCallback(() => {
+        if (currentStep > 0) {
+            setStepError(null);
+            onStepChange(currentStep - 1);
+        }
+    }, [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) {
+                    setStepError(null);
+                    onStepChange(i);
+                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: stepErrors }) }), stepError && (_jsx("p", { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), _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/shell/index.d.ts

@@ -0,0 +1,6 @@
+export type { FormShellSection, FormShellProps, UseFormShellResult } from "./FormShell";
+export { FormShell, useFormShell } from "./FormShell";
+export type { QuickFieldType, QuickFieldDef, QuickFormDrawerProps } from "./QuickFormDrawer";
+export { QuickFormDrawer } from "./QuickFormDrawer";
+export type { StepDef, StepFormProps, StepFormActionsProps } from "./StepForm";
+export { StepForm, StepFormActions, StepIndicator } from "./StepForm";

package/dist/features/shell/index.js

@@ -0,0 +1,3 @@
+export { FormShell, useFormShell } from "./FormShell";
+export { QuickFormDrawer } from "./QuickFormDrawer";
+export { StepForm, StepFormActions, StepIndicator } from "./StepForm";

package/dist/features/stores/actions/store-query-actions.js

@@ -34,7 +34,7 @@ export async function getStoreProducts(storeSlug, params = {}) {
         throw new NotFoundError("Store not found");
     }
     const filtersArr = [
-        `sellerId==${storeDoc.ownerId}`,
+        `storeId==${storeDoc.id}`,
         "status==published",
         "isAuction==false",
     ];
@@ -56,7 +56,7 @@ export async function getStoreAuctions(storeSlug, params = {}) {
         throw new NotFoundError("Store not found");
     }
     const filtersArr = [
-        `sellerId==${storeDoc.ownerId}`,
+        `storeId==${storeDoc.id}`,
         "status==published",
         "isAuction==true",
     ];
@@ -76,7 +76,7 @@ export async function getStoreReviews(storeSlug) {
         !storeDoc.isPublic) {
         throw new NotFoundError("Store not found");
     }
-    const allProducts = await productRepository.findBySeller(storeDoc.ownerId);
+    const allProducts = await productRepository.findByStore(storeDoc.id);
     const publishedProducts = allProducts
         .filter((p) => p.status === ProductStatusValues.PUBLISHED)
         .slice(0, 20);

package/dist/features/stores/api/[storeSlug]/auctions/route.js

@@ -57,7 +57,7 @@ export async function GET(request, context) {
         const page = numParam(url, "page", 1);
         const pageSize = numParam(url, "pageSize", 24);
         const filterParts = [
-            `sellerId==${store.ownerId}`,
+            `storeId==${store.id}`,
             "status==published",
             "isAuction==true",
         ];

package/dist/features/stores/api/[storeSlug]/products/route.js

@@ -62,7 +62,7 @@ export async function GET(request, context) {
         const page = numParam(url, "page", 1);
         const pageSize = numParam(url, "pageSize", 24);
         const filterParts = [
-            `sellerId==${store.ownerId}`,
+            `storeId==${store.id}`,
             "status==published",
             "isAuction==false",
         ];

package/dist/features/stores/api/[storeSlug]/reviews/route.d.ts

@@ -19,5 +19,5 @@ type RouteContext = {
         storeSlug: string;
     }>;
 };
-export declare function GET(_request: Request, context: RouteContext): Promise<NextResponse>;
+export declare function GET(request: Request, context: RouteContext): Promise<NextResponse>;
 export {};

package/dist/features/stores/api/[storeSlug]/reviews/route.js

@@ -16,9 +16,14 @@
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../../contracts";
 // --- GET /api/stores/[storeSlug]/reviews --------------------------------------
-export async function GET(_request, context) {
+export async function GET(request, context) {
     try {
         const { storeSlug } = await context.params;
+        const url = new URL(request.url);
+        const ratingParam = url.searchParams.get("rating");
+        const ratingFilter = ratingParam ? Number(ratingParam) : 0;
+        const page = Math.max(1, Number(url.searchParams.get("page") || "1"));
+        const pageSize = Math.min(50, Math.max(1, Number(url.searchParams.get("pageSize") || "12")));
         const { db } = getProviders();
         if (!db) {
             return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
@@ -36,7 +41,7 @@ export async function GET(_request, context) {
         // Fetch up to 20 published products for this seller
         const productsRepo = db.getRepository("products");
         const productsResult = await productsRepo.findAll({
-            filters: `sellerId==${store.ownerId},status==published`,
+            filters: `storeId==${store.id},status==published`,
             sort: "itemsSold",
             order: "desc",
             perPage: 20,
@@ -52,34 +57,32 @@ export async function GET(_request, context) {
             perPage: 50,
         })
             .then((r) => r.data)));
-        // Flatten, sort by date desc, cap to 10 most recent
-        const allReviews = reviewArrays
-            .flat()
-            .sort((a, b) => new Date(b.createdAt ?? 0).getTime() -
-            new Date(a.createdAt ?? 0).getTime())
-            .slice(0, 10);
-        // Compute aggregate metrics
-        const ratingDistribution = {
-            1: 0,
-            2: 0,
-            3: 0,
-            4: 0,
-            5: 0,
-        };
+        // Compute aggregate metrics from ALL reviews (unfiltered)
+        const ratingDistribution = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
         let ratingSum = 0;
         let totalReviews = 0;
         for (const reviews of reviewArrays) {
             for (const review of reviews) {
                 totalReviews++;
                 ratingSum += review.rating;
-                ratingDistribution[review.rating] =
-                    (ratingDistribution[review.rating] ?? 0) + 1;
+                ratingDistribution[review.rating] = (ratingDistribution[review.rating] ?? 0) + 1;
             }
         }
         const averageRating = totalReviews > 0 ? ratingSum / totalReviews : 0;
-        // Enrich reviews with product title + main image
+        // Flatten and sort all reviews by date desc
         const productMap = new Map(products.map((p) => [p.id, p]));
-        const reviewsWithProduct = allReviews.map((review) => ({
+        const allSorted = reviewArrays
+            .flat()
+            .sort((a, b) => new Date(b.createdAt ?? 0).getTime() - new Date(a.createdAt ?? 0).getTime());
+        // Apply rating filter
+        const filtered = ratingFilter > 0
+            ? allSorted.filter((r) => Math.round(r.rating) === ratingFilter)
+            : allSorted;
+        const totalFiltered = filtered.length;
+        const totalPages = Math.max(1, Math.ceil(totalFiltered / pageSize));
+        const pageSlice = filtered.slice((page - 1) * pageSize, page * pageSize);
+        // Enrich with product title + main image
+        const reviewsWithProduct = pageSlice.map((review) => ({
             ...review,
             productTitle: productMap.get(review.productId)?.title ?? review.productTitle,
             productMainImage: productMap.get(review.productId)?.mainImage ?? null,
@@ -90,6 +93,8 @@ export async function GET(_request, context) {
                 reviews: reviewsWithProduct,
                 averageRating: Math.round(averageRating * 10) / 10,
                 totalReviews,
+                totalFiltered,
+                totalPages,
                 ratingDistribution,
             },
         });

package/dist/features/stores/components/InteractiveStoreCard.d.ts

@@ -1,10 +1,9 @@
 import type { StoreListItem } from "../types";
 export interface InteractiveStoreCardProps {
     store: StoreListItem;
-    /** Resolved href for the store detail page. */
     href: string;
     selectable?: boolean;
-    selected?: boolean;
+    isSelected?: boolean;
     onSelect?: (id: string, selected: boolean) => void;
     labels?: {
         products?: string;
@@ -14,8 +13,4 @@ export interface InteractiveStoreCardProps {
     };
     className?: string;
 }
-/**
- * Generic store card with optional selection.
- * Callers compute `href` using their locale-aware routing helper.
- */
-export declare function InteractiveStoreCard({ store, href, selectable, selected, onSelect, labels, className, }: InteractiveStoreCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractiveStoreCard({ store, href, selectable, isSelected, onSelect, labels, className, }: InteractiveStoreCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Heading, Text, Span, Row, Button, RichText, Div } from "../../../ui";
-import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
+import { Heading, Span, Row, Button, RichText, Div } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils";
-/**
- * Generic store card with optional selection.
- * Callers compute `href` using their locale-aware routing helper.
- */
-export function InteractiveStoreCard({ store, href, selectable, selected, onSelect, labels = {}, className = "", }) {
-    return (_jsxs(Div, { className: `relative flex ${LAYOUT.cardHeight.store} min-w-[190px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [selectable && (_jsx(Button, { type: "button", size: "sm", variant: "outline", "aria-label": selected ? "Deselect store" : "Select store", onClick: (e) => {
+import { useLongPress } from "../../../react/hooks/useLongPress";
+export function InteractiveStoreCard({ store, href, selectable, isSelected = false, onSelect, labels = {}, className = "", }) {
+    const initial = store.storeName[0]?.toUpperCase() ?? "S";
+    const hasLogo = Boolean(store.storeLogoURL);
+    const hasBanner = Boolean(store.storeBannerURL);
+    const longPress = useLongPress(() => onSelect?.(store.id, !isSelected));
+    return (_jsxs(Div, { className: [
+            "group relative flex flex-col h-full overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 shadow-sm transition-shadow hover:shadow-lg",
+            isSelected
+                ? "border-[var(--appkit-color-primary,theme(colors.violet.600))] outline outline-2 outline-[var(--appkit-color-primary,theme(colors.violet.600))]"
+                : "border-zinc-200 dark:border-zinc-700",
+            className,
+        ].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(Button, { type: "button", "aria-label": isSelected ? "Deselect store" : "Select store", onClick: (e) => {
                     e.preventDefault();
-                    onSelect?.(store.id, !selected);
-                }, className: `absolute top-2 left-2 z-10 h-5 w-5 rounded border-2 ${selected ? "bg-primary-500 border-primary-500" : "bg-white border-gray-300"} flex items-center justify-center`, children: selected && (_jsx(Span, { className: "text-white text-xs leading-none", children: "\u2713" })) })), _jsxs(Link, { href: href, className: "block", children: [store.storeBannerURL ? (_jsx(Div, { className: "aspect-video overflow-hidden bg-zinc-100 dark:bg-slate-800", children: _jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover" }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs(Div, { className: "flex flex-1 flex-col px-4 pb-4", children: [_jsx(Div, { className: "-mt-6 mb-3", children: store.storeLogoURL ? (_jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar", className: "h-12 w-12 rounded-lg border-2 border-white object-cover shadow-sm" })) : (_jsx(Div, { className: "flex h-12 w-12 items-center justify-center rounded-lg border-2 border-white bg-primary-100 text-lg font-bold text-primary-700 shadow-sm dark:bg-primary-900/40 dark:text-primary-300", children: store.storeName[0]?.toUpperCase() })) }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-900 dark:text-zinc-100`, children: store.storeName }), _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} min-h-9 text-xs text-zinc-500 dark:text-zinc-400` }), _jsxs(Row, { gap: "sm", className: "mt-2 text-xs text-zinc-500 dark:text-zinc-500", children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] })), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Text, { className: "mt-auto pt-3 text-xs font-medium text-primary dark:text-primary-400", children: [labels.visitStore ?? "Visit store", " \u2192"] })] })] })] }));
+                    e.stopPropagation();
+                    onSelect(store.id, !isSelected);
+                }, className: [
+                    "absolute top-2.5 left-2.5 z-10 h-6 w-6 rounded-md border-2 flex items-center justify-center bg-white/90 dark:bg-zinc-800/90 shadow-sm transition-all duration-150",
+                    isSelected
+                        ? "bg-[var(--appkit-color-primary,theme(colors.violet.600))] border-[var(--appkit-color-primary,theme(colors.violet.600))] text-white opacity-100"
+                        : "border-zinc-300 dark:border-zinc-600",
+                    selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                ].join(" "), children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6l3 3 5-5" }) })) })), _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"] }))] })] })] })] }));
 }

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

@@ -9,5 +9,5 @@ export function StoreAboutView({ store, labels = {}, renderSocialLinks, renderSt
             month: "long",
         })
         : null;
-    return (_jsxs(Div, { className: `space-y-6 py-6 ${className}`, children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold mb-2", children: labels.aboutTitle ?? "About" }), _jsx(Text, { className: "text-neutral-600 whitespace-pre-line", children: store.bio })] })), renderStats?.(store), _jsxs(Div, { className: "space-y-3 text-sm", children: [store.location && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "text-neutral-600", children: store.location })] })), joinDate && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "text-neutral-600", children: joinDate })] })), store.website && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.websiteLabel ?? "Website" }), _jsx("a", { href: store.website, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:underline break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy), className: "text-neutral-600" })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy), className: "text-neutral-600" })] })), store.isVacationMode && (_jsxs(Div, { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [_jsx(Text, { className: "text-yellow-800 font-medium", children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: "text-yellow-700 mt-1", children: store.vacationMessage }))] }))] }));
+    return (_jsxs(Div, { className: `space-y-6 py-6 ${className}`, children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold mb-2", children: labels.aboutTitle ?? "About" }), _jsx(RichText, { html: normalizeRichTextHtml(store.bio), className: "text-neutral-600" })] })), renderStats?.(store), _jsxs(Div, { className: "space-y-3 text-sm", children: [store.location && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "text-neutral-600", children: store.location })] })), joinDate && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "text-neutral-600", children: joinDate })] })), store.website && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-700 min-w-[120px]", children: labels.websiteLabel ?? "Website" }), _jsx("a", { href: store.website, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:underline break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy), className: "text-neutral-600" })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy), className: "text-neutral-600" })] })), store.isVacationMode && (_jsxs(Div, { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [_jsx(Text, { className: "text-yellow-800 font-medium", children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: "text-yellow-700 mt-1", children: store.vacationMessage }))] }))] }));
 }

package/dist/features/stores/components/StoreAuctionsListing.d.ts

@@ -1,5 +1,8 @@
 export interface StoreAuctionsListingProps {
-    sellerId: string;
+    /** Store document ID — preferred for filtering */
+    storeId?: string;
+    /** @deprecated Use storeId */
+    sellerId?: string;
     initialData?: any;
 }
-export declare function StoreAuctionsListing({ sellerId, initialData }: StoreAuctionsListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function StoreAuctionsListing({ storeId, sellerId, initialData }: StoreAuctionsListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,95 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Container, Grid, Input, Pagination, Section, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
-import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
+import { Pagination, useToast, ListingToolbar } from "../../../ui";
+import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
+import { ProductFilters } from "../../products/components/ProductFilters";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
-export function StoreAuctionsListing({ sellerId, initialData }) {
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushWishlistOp } from "../../cart/utils/pending-ops";
+const AUCTION_SORT_OPTIONS = [
+    { value: "auctionEndDate", label: "Ending Soonest" },
+    { value: "-createdAt", label: "Newest" },
+    { value: "-currentBid", label: "Highest Bid" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "-price", label: "Price: High to Low" },
+];
+const FILTER_KEYS = ["minPrice", "maxPrice"];
+export function StoreAuctionsListing({ storeId, sellerId, initialData }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const { showToast } = useToast();
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    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));
+    // Pending filter state — buffered until "Apply Filters" clicked
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const pendingTable = useMemo(() => ({
+        get: (key) => pendingFilters[key] ?? "",
+        getNumber: (key, fallback = 0) => {
+            const v = pendingFilters[key];
+            if (!v)
+                return fallback;
+            const n = Number(v);
+            return isNaN(n) ? fallback : n;
+        },
+        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
+        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
+        clear: (keys) => {
+            const ks = keys ?? FILTER_KEYS;
+            setPendingFilters((p) => ({
+                ...p,
+                ...Object.fromEntries(ks.map((k) => [k, ""])),
+            }));
+        },
+        setPage: (_) => { },
+        setPageSize: (_) => { },
+        setSort: (_) => { },
+        buildSieveParams: () => "",
+        buildSearchParams: () => "",
+        params: new URLSearchParams(),
+    }), [pendingFilters]);
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        table.get("sort") !== "auctionEndDate" ||
+        activeFilterCount > 0;
     const params = {
-        sort: table.get("sort") || undefined,
+        q: table.get("q") || undefined,
+        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
+        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
+        sort: table.get("sort") || "auctionEndDate",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
-        sellerId,
+        storeId: storeId || undefined,
+        sellerId: !storeId ? sellerId : undefined,
         isAuction: true,
     };
-    const { products: rawAuctions, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const { products: rawAuctions, totalPages, page, isLoading } = useProducts(params, { initialData });
     const auctions = rawAuctions.map((p) => ({
         id: p.id,
         title: p.title ?? p.name ?? "",
@@ -33,9 +108,25 @@ export function StoreAuctionsListing({ sellerId, initialData }) {
         slug: p.slug,
         buyNowPrice: p.buyNowPrice,
     }));
-    return (_jsx(Section, { children: _jsx(Container, { size: "xl", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search auctions...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                        { value: "auctionEndDate", label: "Ending Soonest" },
-                        { value: "-createdAt", label: "Newest" },
-                        { value: "-currentBid", label: "Highest Bid" },
-                    ] })), renderTable: () => auctions.length === 0 && !isLoading ? (_jsxs(Stack, { align: "center", gap: "3", className: "justify-center py-24 text-center", children: [_jsx(Text, { className: "text-xl font-medium text-zinc-900 dark:text-zinc-50", children: "No auctions yet" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "This store has no active auctions." })] })) : (_jsx(Grid, { cols: "productCards", gap: "md", children: auctions.map((item) => (_jsx(MarketplaceAuctionCard, { product: item }, item.id))) })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }) }));
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const wishlistActions = {
+        addToWishlist: (productId) => {
+            localWishlist.add(productId, "auction");
+            pushWishlistOp({ op: "add", itemId: productId, type: "auction" });
+            showToast("Added to wishlist", "success");
+            return Promise.resolve();
+        },
+        removeFromWishlist: (productId) => {
+            localWishlist.remove(productId, "auction");
+            pushWishlistOp({ op: "remove", itemId: productId, type: "auction" });
+            showToast("Removed from wishlist", "info");
+            return Promise.resolve();
+        },
+        isWishlisted: (productId) => wishlistedIds.has(productId),
+    };
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "auctionEndDate", sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, view: view, onViewChange: (v) => { setView(v); table.set("view", v); }, 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).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-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions, labels: { emptyTitle: "No auctions yet", emptyDescription: "This store has no active auctions." } })) }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "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(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _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/stores/components/StoreAuctionsPageView.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { productRepository, storeRepository } from "../../../repositories";
+import { productRepository } from "../../../repositories";
+import { getStoreBySlug } from "./StoreDetailLayoutView";
 import { StoreAuctionsListing } from "./StoreAuctionsListing";
 export async function StoreAuctionsPageView({ storeSlug }) {
-    const store = await storeRepository.findBySlug(storeSlug).catch(() => undefined);
-    const ownerId = store?.ownerId;
-    const result = ownerId
+    const store = await getStoreBySlug(storeSlug);
+    const storeId = store?.id;
+    const result = storeId
         ? await productRepository
             .list({
-            filters: `sellerId==${ownerId},status==published,isAuction==true`,
+            filters: `storeId==${storeId},status==published,isAuction==true`,
             sorts: "auctionEndDate",
             page: 1,
             pageSize: 24,
         })
             .catch(() => null)
         : null;
-    if (!ownerId) {
+    if (!storeId) {
         return null;
     }
-    return (_jsx(StoreAuctionsListing, { sellerId: ownerId, initialData: result ?? undefined }));
+    return (_jsx(StoreAuctionsListing, { storeId: storeId, initialData: result ?? undefined }));
 }

package/dist/features/stores/components/StoreDetailLayoutView.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+export declare const getStoreBySlug: (slug: string) => Promise<import("..").StoreDocument | null | undefined>;
 export interface StoreDetailLayoutViewProps {
     storeSlug: string;
     /** The current active tab value: "products" | "auctions" | "reviews" | "about" */

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

@@ -1,17 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { storeRepository } from "../../../repositories";
+import { cache } from "react";
+import { storeRepository, productRepository } from "../../../repositories";
 import { ROUTES } from "../../../next";
 import { Container, Main, Section } from "../../../ui";
 import { StoreHeader } from "./StoreHeader";
 import { StoreNavTabs } from "./StoreNavTabs";
+export const getStoreBySlug = cache((slug) => storeRepository.findBySlug(slug).catch(() => undefined));
+function tabLabel(base, count) {
+    if (!count)
+        return base;
+    return `${base} (${count.toLocaleString()})`;
+}
 export async function StoreDetailLayoutView({ storeSlug, activeTab, children, }) {
-    const store = await storeRepository.findBySlug(storeSlug).catch(() => undefined);
+    const store = await getStoreBySlug(storeSlug);
     if (!store) {
         return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsx("p", { className: "text-center text-zinc-500", children: "Store not found." }) }) }) }));
     }
+    const storeId = store?.id;
+    const [productsCount, auctionsCount, preOrdersCount] = storeId
+        ? await Promise.all([
+            productRepository
+                .list({ filters: `storeId==${storeId},status==published,isAuction==false,isPreOrder==false`, page: 1, pageSize: 1 })
+                .then((r) => r.total)
+                .catch(() => 0),
+            productRepository
+                .list({ filters: `storeId==${storeId},status==published,isAuction==true`, page: 1, pageSize: 1 })
+                .then((r) => r.total)
+                .catch(() => 0),
+            productRepository
+                .list({ filters: `storeId==${storeId},status==published,isPreOrder==true`, page: 1, pageSize: 1 })
+                .then((r) => r.total)
+                .catch(() => 0),
+        ])
+        : [0, 0, 0];
     const tabs = [
-        { value: "products", label: "Products", href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)) },
-        { value: "auctions", label: "Auctions", href: String(ROUTES.PUBLIC.STORE_AUCTIONS(storeSlug)) },
+        { value: "products", label: tabLabel("Products", productsCount), href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)) },
+        { value: "auctions", label: tabLabel("Auctions", auctionsCount), href: String(ROUTES.PUBLIC.STORE_AUCTIONS(storeSlug)) },
+        { value: "pre-orders", label: tabLabel("Pre-Orders", preOrdersCount), href: String(ROUTES.PUBLIC.STORE_PRE_ORDERS(storeSlug)) },
+        { value: "coupons", label: "Coupons", href: String(ROUTES.PUBLIC.STORE_COUPONS(storeSlug)) },
         { value: "reviews", label: "Reviews", href: String(ROUTES.PUBLIC.STORE_REVIEWS(storeSlug)) },
         { value: "about", label: "About", href: String(ROUTES.PUBLIC.STORE_ABOUT(storeSlug)) },
     ];

package/dist/features/stores/components/StoreFilters.d.ts

@@ -0,0 +1,5 @@
+import type { UrlTable } from "../../filters/FilterPanel";
+export interface StoreFiltersProps {
+    table: UrlTable;
+}
+export declare function StoreFilters({ table }: StoreFiltersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
+import { SwitchFilter } from "../../filters/SwitchFilter";
+import { Div } from "../../../ui";
+export function StoreFilters({ table }) {
+    const t = useTranslations("filters");
+    const ratingOptions = [
+        { value: "5", label: t("rating5Stars") },
+        { value: "4", label: t("rating4Stars") },
+        { value: "3", label: t("rating3Stars") },
+        { value: "2", label: t("rating2Stars") },
+        { value: "1", label: t("rating1Star") },
+    ];
+    const selectedRatings = table.get("rating")
+        ? table.get("rating").split("|").filter(Boolean)
+        : [];
+    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: t("rating"), options: ratingOptions, selected: selectedRatings, onChange: (vals) => table.set("rating", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("productCount"), minValue: table.get("minProductCount"), maxValue: table.get("maxProductCount"), onMinChange: (v) => table.set("minProductCount", v), onMaxChange: (v) => table.set("maxProductCount", v), minBound: 0, maxBound: 10000, step: 10, minPlaceholder: t("minProductCount"), maxPlaceholder: t("maxProductCount"), defaultCollapsed: true }), _jsx(SwitchFilter, { title: t("featured"), label: t("showFeaturedOnly"), checked: table.get("featured") === "true", onChange: (v) => table.set("featured", v ? "true" : ""), defaultCollapsed: true })] }));
+}