@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, RichText, Row, Section, Span, Text, } from "../../../ui";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { ShareButton } from "../../products/components/ShareButton";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", }) {
-    return (_jsxs(Section, { className: `bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: "h-40 md:h-56 overflow-hidden bg-gray-100 dark:bg-slate-800", children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", children: [_jsxs(Div, { className: "flex items-end gap-4", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-2xl shadow-sm", children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Heading, { level: 1, className: "text-xl font-bold text-gray-900 dark:text-zinc-100 truncate", children: store.storeName }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5" }))] }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: "shrink-0 rounded-lg border border-orange-500 px-4 py-2 text-sm font-medium text-orange-500 hover:bg-orange-50 transition-colors", children: labels.follow ?? "Follow" }))] }), store.isVacationMode && (_jsx(Text, { className: "mt-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-3 py-2 text-sm text-yellow-700 dark:text-yellow-300", children: store.vacationMessage ??
+    return (_jsxs(Section, { className: `bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: "h-40 md:h-56 overflow-hidden bg-gray-100 dark:bg-slate-800", children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", children: [_jsxs(Div, { className: "flex items-end gap-4", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-2xl shadow-sm", children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Div, { className: "flex flex-wrap items-center gap-2 mb-0.5", children: [_jsx(Heading, { level: 1, className: "text-xl font-bold text-gray-900 dark:text-zinc-100", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { className: "inline-flex items-center gap-1 text-sm font-medium text-amber-500", children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { className: "gap-3 text-xs text-gray-500 dark:text-zinc-400 mb-0.5", children: [store.category && _jsx(Span, { className: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: "rounded-lg border border-orange-500 px-4 py-2 text-sm font-medium text-orange-500 hover:bg-orange-50 transition-colors", children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: "mt-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-3 py-2 text-sm text-yellow-700 dark:text-yellow-300", children: store.vacationMessage ??
                             labels.vacationMode ??
-                            "Store is on vacation mode" })), _jsxs(Row, { className: "gap-4 mt-3 text-sm text-gray-500 dark:text-zinc-400", children: [store.totalProducts != null && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] })), store.averageRating != null && (_jsxs(Span, { children: ["\u2605 ", store.averageRating.toFixed(1), " (", store.totalReviews, " ", labels.reviews ?? "reviews", ")"] }))] })] })] }));
+                            "Store is on vacation mode" }))] })] }));
 }

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

@@ -0,0 +1,7 @@
+export interface StorePreOrdersListingProps {
+    storeId?: string;
+    /** @deprecated Use storeId */
+    sellerId?: string;
+    initialData?: any;
+}
+export declare function StorePreOrdersListing({ storeId, sellerId, initialData }: StorePreOrdersListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+"use client";
+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 { Pagination, ListingToolbar } from "../../../ui";
+import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
+import { ProductFilters } from "../../products/components/ProductFilters";
+import { ROUTES } from "../../../next";
+const PREORDER_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "preOrderDeliveryDate", label: "Delivery Soon" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "-price", label: "Price: High to Low" },
+];
+const FILTER_KEYS = ["minPrice", "maxPrice"];
+export function StorePreOrdersListing({ storeId, sellerId, initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "grid");
+    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") !== "-createdAt" ||
+        activeFilterCount > 0;
+    const params = {
+        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") || "-createdAt",
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        storeId: storeId || undefined,
+        sellerId: !storeId ? sellerId : undefined,
+        isPreOrder: true,
+    };
+    const { products: preOrders, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4";
+    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PREORDER_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-3 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))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "This store has no pre-orders yet." })) : 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: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.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: [_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/StorePreOrdersPageView.d.ts

@@ -0,0 +1,4 @@
+export interface StorePreOrdersPageViewProps {
+    storeSlug: string;
+}
+export declare function StorePreOrdersPageView({ storeSlug }: StorePreOrdersPageViewProps): Promise<import("react/jsx-runtime").JSX.Element | null>;

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

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

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

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

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

@@ -1,29 +1,128 @@
 "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, Div, Grid, Input, Pagination, Section, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { Pagination, useToast, ListingToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
-import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
-import { ProductFilters } from "../../products/components/ProductFilters";
-export function StoreProductsListing({ sellerId, initialData }) {
+import { ProductGrid } from "../../products/components/ProductGrid";
+import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/components/ProductFilters";
+import { useGuestCart } from "../../cart/hooks/useGuestCart";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
+const FILTER_KEYS = ["condition", "brand", "minPrice", "maxPrice"];
+export function StoreProductsListing({ storeId, sellerId, initialData }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const { showToast } = useToast();
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "card");
+    const localCart = useGuestCart();
+    const localWishlist = useGuestWishlist();
+    const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "product").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") !== "-createdAt" ||
+        activeFilterCount > 0;
     const params = {
         q: table.get("q") || undefined,
         condition: table.get("condition") || undefined,
+        brand: table.get("brand") || undefined,
         minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
         maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
-        sort: table.get("sort") || undefined,
+        sort: table.get("sort") || "-createdAt",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
-        sellerId,
+        storeId: storeId || undefined,
+        sellerId: !storeId ? sellerId : undefined,
         isAuction: false,
     };
-    const { products, total, totalPages, page, isLoading } = useProducts(params, { initialData });
-    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 store products...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                        { value: "-createdAt", label: "Newest First" },
-                        { value: "-price", label: "Price: High to Low" },
-                        { value: "price", label: "Price: Low to High" },
-                        { value: "title", label: "Title A-Z" },
-                    ] })), renderFilters: () => _jsx(ProductFilters, { table: table }), renderTable: () => products.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 products yet" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "This store has not listed any products yet." })] })) : (_jsx(Div, { children: _jsx(Grid, { cols: "productCards", gap: "md", children: products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug ?? p.id)) }, p.id))) }) })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }) }));
+    const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const handleViewToggle = (next) => {
+        setView(next);
+        table.set("view", next);
+    };
+    const handleWishlistToggle = useCallback((productId) => {
+        const isWishlisted = wishlistedIds.has(productId);
+        if (isWishlisted) {
+            localWishlist.remove(productId, "product");
+            pushWishlistOp({ op: "remove", itemId: productId, type: "product" });
+            showToast("Removed from wishlist", "info");
+        }
+        else {
+            localWishlist.add(productId, "product");
+            pushWishlistOp({ op: "add", itemId: productId, type: "product" });
+            showToast("Added to wishlist", "success");
+        }
+    }, [wishlistedIds, localWishlist, showToast]);
+    const handleAddToCart = useCallback((product) => {
+        localCart.add(product.id, 1, {
+            productTitle: product.title,
+            productImage: product.mainImage,
+            price: product.price,
+        });
+        pushCartOp({
+            op: "add",
+            productId: product.id,
+            quantity: 1,
+            productTitle: product.title,
+            productImage: product.mainImage,
+            price: product.price,
+        });
+        showToast("Added to cart", "success");
+    }, [localCart, showToast]);
+    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store products...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), 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: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", 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-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, emptyLabel: "This store has no products yet.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })) }), 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/StoreProductsPageView.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 { StoreProductsListing } from "./StoreProductsListing";
 export async function StoreProductsPageView({ 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==false`,
+            filters: `storeId==${storeId},status==published,isAuction==false`,
             sorts: "-createdAt",
             page: 1,
             pageSize: 24,
         })
             .catch(() => null)
         : null;
-    if (!ownerId) {
+    if (!storeId) {
         return null;
     }
-    return (_jsx(StoreProductsListing, { sellerId: ownerId, initialData: result ?? undefined }));
+    return (_jsx(StoreProductsListing, { storeId: storeId, initialData: result ?? undefined }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { useStoreReviews } from "../hooks/useStores";
-import { Container, Div, Grid, Row, Section, Span, Stack, Text, } from "../../../ui";
+import { Container, Grid, Pagination, Row, Section, Span, Stack, Text, } from "../../../ui";
 import { ReviewCard } from "../../reviews/components/ReviewsList";
 const STAR_OPTIONS = [
     { value: 0, label: "All Ratings" },
@@ -16,13 +16,8 @@ const PAGE_SIZE = 12;
 export function StoreReviewsListing({ storeSlug }) {
     const [ratingFilter, setRatingFilter] = useState(0);
     const [page, setPage] = useState(1);
-    const { reviews, averageRating, totalReviews, isLoading } = useStoreReviews(storeSlug);
-    const filtered = ratingFilter > 0
-        ? reviews.filter((r) => Math.round(r.rating) === ratingFilter)
-        : reviews;
-    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-    const start = (page - 1) * PAGE_SIZE;
-    const paginated = filtered.slice(start, start + PAGE_SIZE);
+    const { reviews, averageRating, totalReviews, totalPages, isLoading } = useStoreReviews(storeSlug, { rating: ratingFilter || undefined, page, pageSize: PAGE_SIZE });
+    const paginated = reviews;
     return (_jsx(Section, { children: _jsxs(Container, { size: "xl", children: [totalReviews > 0 && (_jsxs(Row, { align: "center", gap: "sm", className: "mb-6", children: [_jsx(Span, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-100", children: averageRating.toFixed(1) }), _jsxs(Span, { className: "text-zinc-500 text-sm", children: ["/ 5 \u00B7 ", totalReviews, " reviews"] })] })), _jsx(Row, { gap: "xs", className: "mb-6 flex-wrap", children: STAR_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => { setRatingFilter(opt.value); setPage(1); }, className: [
                             "rounded-full border px-3 py-1 text-sm font-medium transition-colors",
                             ratingFilter === opt.value
@@ -30,5 +25,5 @@ export function StoreReviewsListing({ storeSlug }) {
                                 : "border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300",
                         ].join(" "), children: opt.label }, opt.value))) }), isLoading ? (_jsx(Stack, { align: "center", gap: "3", className: "justify-center py-12", children: _jsx(Text, { className: "text-zinc-500", children: "Loading reviews..." }) })) : paginated.length === 0 ? (_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 reviews yet" }), _jsx(Text, { className: "text-sm text-zinc-500", children: ratingFilter > 0
                                 ? `No ${ratingFilter}-star reviews yet.`
-                                : "Be the first to review this store by purchasing a product." })] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, { cols: 3, gap: "md", children: paginated.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) }), totalPages > 1 && (_jsxs(Row, { gap: "xs", className: "mt-8 justify-center", children: [_jsx("button", { type: "button", disabled: page === 1, onClick: () => setPage((p) => p - 1), className: "rounded-lg border px-3 py-1.5 text-sm disabled:opacity-40", children: "\u2039" }), _jsxs(Div, { className: "flex items-center px-3 text-sm text-zinc-600 dark:text-zinc-400", children: [page, " / ", totalPages] }), _jsx("button", { type: "button", disabled: page === totalPages, onClick: () => setPage((p) => p + 1), className: "rounded-lg border px-3 py-1.5 text-sm disabled:opacity-40", children: "\u203A" })] }))] }))] }) }));
+                                : "Be the first to review this store by purchasing a product." })] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, { cols: 3, gap: "md", children: paginated.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) }), totalPages > 1 && (_jsx(Row, { className: "mt-8 justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage }) }))] }))] }) }));
 }

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

@@ -1,22 +1,119 @@
 "use client";
-import { jsx as _jsx } 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 { useStores } from "../hooks/useStores";
-import { Div, Grid, Input, Pagination, SlottedListingView, SortDropdown, } from "../../../ui";
+import { BulkActionsBar, Pagination, ListingToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { InteractiveStoreCard } from "./InteractiveStoreCard";
+import { StoreFilters } from "./StoreFilters";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+const STORE_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "storeName", label: "Name A–Z" },
+    { value: "-itemsSold", label: "Most Sales" },
+    { value: "-averageRating", label: "Top Rated" },
+];
+const FILTER_KEYS = ["category", "rating", "minProductCount", "maxProductCount", "featured"];
 export function StoresIndexListing({ initialData }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
-    const { stores, total, totalPages, isLoading } = useStores({
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    // 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") !== "-createdAt" ||
+        activeFilterCount > 0;
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    // Build sieve filters from applied URL params
+    const ratingRaw = table.get("rating");
+    const minProductCount = table.get("minProductCount");
+    const maxProductCount = table.get("maxProductCount");
+    const featured = table.get("featured");
+    const filterParts = [];
+    if (ratingRaw) {
+        const ratings = ratingRaw.split("|").filter(Boolean);
+        if (ratings.length === 1)
+            filterParts.push(`averageRating>=${ratings[0]}`);
+    }
+    if (minProductCount)
+        filterParts.push(`stats.totalProducts>=${minProductCount}`);
+    if (maxProductCount)
+        filterParts.push(`stats.totalProducts<=${maxProductCount}`);
+    if (featured === "true")
+        filterParts.push("isFeatured==true");
+    const { stores, totalPages, isLoading } = useStores({
+        q: table.get("q") || undefined,
         page: table.getNumber("page", 1),
         pageSize: table.getNumber("pageSize", 24),
         sort: table.get("sort") || undefined,
         category: table.get("category") || undefined,
+        filters: filterParts.length > 0 ? filterParts.join(",") : undefined,
     }, { initialData });
-    return (_jsx(Div, { className: "min-h-screen", 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 stores...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                    { value: "-createdAt", label: "Newest First" },
-                    { value: "storeName", label: "A-Z" },
-                    { value: "-itemsSold", label: "Most Sales" },
-                    { value: "-averageRating", label: "Top Rated" },
-                ] })), renderTable: () => (_jsx(Grid, { cols: 3, gap: "md", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug ?? store.id)) }, store.storeSlug ?? store.id))) })), renderPagination: () => (_jsx(Pagination, { currentPage: table.getNumber("page", 1), totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }));
+    const selection = useBulkSelection({ items: stores, keyExtractor: (s) => s.id ?? s.storeSlug });
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search stores...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: STORE_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: stores.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), 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: table.getNumber("page", 1), 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) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-4 space-y-2.5", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "h-10 w-10 rounded-lg bg-zinc-200 dark:bg-slate-700" }) }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _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-1/2" })] })] }, i))) })) : stores.length === 0 ? (_jsx("p", { className: "py-16 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No stores found." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: stores.map((store) => {
+                        const storeKey = store.storeSlug ?? store.id;
+                        return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
+                    }) })) }), _jsx(BulkActionsBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+                    {
+                        key: "compare",
+                        label: "Compare",
+                        variant: "secondary",
+                        onClick: () => {
+                            /* BK3 compare overlay — wired in a later session */
+                            selection.clearSelection();
+                        },
+                    },
+                ] }), 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(StoreFilters, { table: pendingTable }) }), _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/StoresIndexPageView.d.ts

@@ -1 +1,6 @@
-export declare function StoresIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;
+type SearchParams = Record<string, string | string[]>;
+export interface StoresIndexPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function StoresIndexPageView({ searchParams }: StoresIndexPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -3,9 +3,16 @@ import { storeRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { StoresIndexListing } from "./StoresIndexListing";
-export async function StoresIndexPageView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+export async function StoresIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const pageSize = Number(sp(searchParams, "pageSize")) || 24;
     const result = await storeRepository
-        .listStores({ page: 1, pageSize: 24, sorts: "-createdAt" }, true)
+        .listStores({ page, pageSize, sorts: sort }, true)
         .catch(() => null);
     return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Stores" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(StoresIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -5,7 +5,7 @@ import { Div, Grid, Heading, RichText, Row, Span, Text } from "../../../ui";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { THEME_CONSTANTS } from "../../../tokens";
 function StoreCard({ store, labels = {}, className = "" }) {
-    return (_jsxs(Link, { href: `/stores/${store.storeSlug}`, className: `block rounded-xl border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [store.storeBannerURL ? (_jsx(Div, { className: "h-24 overflow-hidden bg-gray-100 dark:bg-slate-800", children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${store.storeBannerURL})` } }) })) : (_jsx(Div, { className: "h-24 bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20" })), _jsxs(Div, { className: "px-4 pb-4", children: [_jsx(Div, { className: "-mt-6 mb-3", children: store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "h-12 w-12 rounded-lg border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: "h-12 w-12 rounded-lg border-2 border-white dark:border-slate-800 bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold shadow-sm", children: store.storeName[0]?.toUpperCase() })) }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-sm truncate", 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-0.5 text-xs text-gray-500 dark:text-zinc-400 ${THEME_CONSTANTS.utilities.textClamp2}` })), _jsxs(Row, { className: "gap-3 mt-2 text-xs text-gray-400 dark:text-zinc-500", children: [store.totalProducts != null && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] })), store.averageRating != null && (_jsxs(Span, { children: ["\u2605 ", store.averageRating.toFixed(1)] }))] })] })] }));
+    return (_jsxs(Link, { href: `/stores/${store.storeSlug ?? store.id}`, className: `block rounded-xl border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [store.storeBannerURL ? (_jsx(Div, { className: "h-24 overflow-hidden bg-gray-100 dark:bg-slate-800", children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${store.storeBannerURL})` } }) })) : (_jsx(Div, { className: "h-24 bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20" })), _jsxs(Div, { className: "px-4 pb-4", children: [_jsx(Div, { className: "-mt-6 mb-3", children: store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "h-12 w-12 rounded-lg border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: "h-12 w-12 rounded-lg border-2 border-white dark:border-slate-800 bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold shadow-sm", children: store.storeName[0]?.toUpperCase() })) }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-sm truncate", 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-0.5 text-xs text-gray-500 dark:text-zinc-400 ${THEME_CONSTANTS.utilities.textClamp2}` })), _jsxs(Row, { className: "gap-3 mt-2 text-xs text-gray-400 dark:text-zinc-500", children: [store.totalProducts != null && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] })), store.averageRating != null && (_jsxs(Span, { children: ["\u2605 ", store.averageRating.toFixed(1)] }))] })] })] }));
 }
 export function StoresListView({ stores, labels = {}, total = 0, currentPage = 1, totalPages = 1, className = "", slots, }) {
     if (stores.length === 0) {

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

@@ -22,3 +22,6 @@ export { StoreAuctionsListing } from "./StoreAuctionsListing";
 export type { StoreAuctionsListingProps } from "./StoreAuctionsListing";
 export { StoreReviewsListing } from "./StoreReviewsListing";
 export type { StoreReviewsListingProps } from "./StoreReviewsListing";
+export { StorePreOrdersListing } from "./StorePreOrdersListing";
+export type { StorePreOrdersListingProps } from "./StorePreOrdersListing";
+export type { StorePreOrdersPageViewProps } from "./StorePreOrdersPageView";

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

@@ -11,3 +11,4 @@ export { StoresIndexListing } from "./StoresIndexListing";
 export { StoreProductsListing } from "./StoreProductsListing";
 export { StoreAuctionsListing } from "./StoreAuctionsListing";
 export { StoreReviewsListing } from "./StoreReviewsListing";
+export { StorePreOrdersListing } from "./StorePreOrdersListing";