@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -1,16 +1,16 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Heading, Text, Span, Row, Button } from "../../../ui";
+import { Heading, Text, Span, Row, Button, RichText, Div } from "../../../ui";
+import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
 import { MediaImage } from "../../media/MediaImage";
-import { stripHtml } from "../../../utils";
+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 flex-col h-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow min-w-[160px] min-h-[200px] ${className}`, children: [selectable && (_jsx(Button, { type: "button", size: "sm", variant: "outline", "aria-label": selected ? "Deselect store" : "Select store", onClick: (e) => {
+    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) => {
                     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: "overflow-hidden bg-gray-100 min-h-[80px] max-h-[120px]", children: _jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover" }) })) : (_jsx("div", { className: "bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 min-h-[80px] max-h-[120px]" })), _jsxs("div", { className: "px-4 pb-4 flex-1 flex flex-col justify-between", 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: "h-12 w-12 rounded-lg border-2 border-white bg-orange-100 dark:bg-orange-900/40 flex items-center justify-center text-orange-600 font-bold text-lg shadow-sm", children: store.storeName[0]?.toUpperCase() })) }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-gray-100 text-sm truncate", children: store.storeName }), store.storeDescription && (_jsx(Text, { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2", children: stripHtml(store.storeDescription) })), _jsxs(Row, { gap: "sm", className: "mt-2 text-xs text-gray-400", 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)] }))] })] })] })] }));
+                }, 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"] })] })] })] }));
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text } from "../../../ui";
+import { Div, Heading, RichText, Text } from "../../../ui";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 export function StoreAboutView({ store, labels = {}, renderSocialLinks, renderStats, className = "", }) {
     const joinDate = store.createdAt
         ? new Date(store.createdAt).toLocaleDateString(getDefaultLocale(), {
@@ -8,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(Text, { className: "text-neutral-600 whitespace-pre-line", children: store.returnPolicy })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(Text, { className: "text-neutral-600 whitespace-pre-line", children: store.shippingPolicy })] })), 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(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 }))] }))] }));
 }

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

@@ -28,7 +28,7 @@ export function StoreAddressSelectorCreate({ value, onChange, disabled = false,
         const parts = [addr.label, addr.fullName, addr.city, addr.state].filter(Boolean);
         return parts.join(" - ");
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? mergedLabels.pickupAddress, options: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-section": "storeaddressselectorcreate-div-442", children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex items-center gap-2", "data-section": "storeaddressselectorcreate-div-443", children: [_jsx("div", { className: "flex-1", "data-section": "storeaddressselectorcreate-div-444", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? mergedLabels.pickupAddress, options: [
                                         { value: "", label: mergedLabels.selectAddress },
                                         ...addresses.map((addr) => ({
                                             value: addr.id,

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

@@ -0,0 +1,5 @@
+export interface StoreAuctionsListingProps {
+    sellerId: string;
+    initialData?: any;
+}
+export declare function StoreAuctionsListing({ sellerId, initialData }: StoreAuctionsListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { getDefaultCurrency } from "../../../core/baseline-resolver";
+export function StoreAuctionsListing({ sellerId, initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const params = {
+        sort: table.get("sort") || undefined,
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        sellerId,
+        isAuction: true,
+    };
+    const { products: rawAuctions, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const auctions = rawAuctions.map((p) => ({
+        id: p.id,
+        title: p.title ?? p.name ?? "",
+        description: p.description,
+        price: p.price ?? 0,
+        currency: p.currency || getDefaultCurrency(),
+        mainImage: p.mainImage ?? p.images?.[0],
+        images: p.images,
+        isAuction: true,
+        auctionEndDate: p.auctionEndDate,
+        startingBid: p.startingBid ?? p.price,
+        currentBid: p.currentBid,
+        bidCount: p.bidCount,
+        featured: p.featured,
+        status: p.status,
+        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 }) }) }));
+}

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

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

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

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

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

@@ -1,7 +1,7 @@
 import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
+import type { SlottedListingViewProps } from "../../../ui";
 import type { StoreAuctionItem } from "../types";
-export interface StoreAuctionsViewProps extends Omit<StackedViewShellProps, "sections"> {
+export interface StoreAuctionsViewProps extends Omit<SlottedListingViewProps, "renderTable"> {
     storeSlug: string;
     labels?: {
         title?: string;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StackedViewShell } from "../../../ui";
+import { SlottedListingView } from "../../../ui";
 export function StoreAuctionsView({ labels = {}, renderAuctions, renderPagination, items = [], total = 0, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, sections: [renderAuctions(items, isLoading), renderPagination?.(total)] }));
+    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, renderTable: () => renderAuctions(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
 }

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface StoreDetailLayoutViewProps {
+    storeSlug: string;
+    /** The current active tab value: "products" | "auctions" | "reviews" | "about" */
+    activeTab: string;
+    children: ReactNode;
+}
+export declare function StoreDetailLayoutView({ storeSlug, activeTab, children, }: StoreDetailLayoutViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storeRepository } from "../../../repositories";
+import { ROUTES } from "../../../next";
+import { Container, Main, Section } from "../../../ui";
+import { StoreHeader } from "./StoreHeader";
+import { StoreNavTabs } from "./StoreNavTabs";
+export async function StoreDetailLayoutView({ storeSlug, activeTab, children, }) {
+    const store = await storeRepository.findBySlug(storeSlug).catch(() => undefined);
+    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 tabs = [
+        { value: "products", label: "Products", href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)) },
+        { value: "auctions", label: "Auctions", href: String(ROUTES.PUBLIC.STORE_AUCTIONS(storeSlug)) },
+        { value: "reviews", label: "Reviews", href: String(ROUTES.PUBLIC.STORE_REVIEWS(storeSlug)) },
+        { value: "about", label: "About", href: String(ROUTES.PUBLIC.STORE_ABOUT(storeSlug)) },
+    ];
+    return (_jsxs(Main, { children: [_jsx(StoreHeader, { store: store }), _jsxs(Container, { size: "xl", className: "mt-6", children: [_jsx(StoreNavTabs, { tabs: tabs, activeValue: activeTab }), _jsx(Section, { className: "pt-6", children: children })] })] }));
+}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, RichText, Row, Section, Span, Text, } from "../../../ui";
-import { proseMirrorToHtml } from "../../../utils/string.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", }) {
-    return (_jsxs(Section, { className: `bg-white border-b border-gray-200 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: "h-40 md:h-56 overflow-hidden bg-gray-100", 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 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 bg-orange-100 flex items-center justify-center text-orange-600 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 truncate", children: store.storeName }), store.storeDescription && (_jsx(RichText, { html: proseMirrorToHtml(store.storeDescription), copyableCode: true, className: "text-sm text-gray-500 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 border border-yellow-200 px-3 py-2 text-sm text-yellow-700", 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: [_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 ??
                             labels.vacationMode ??
-                            "Store is on vacation mode" })), _jsxs(Row, { className: "gap-4 mt-3 text-sm text-gray-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), " (", store.totalReviews, " ", labels.reviews ?? "reviews", ")"] }))] })] })] }));
+                            "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", ")"] }))] })] })] }));
 }

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

@@ -1,4 +1,3 @@
-"use client";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Div } from "../../../ui";
 export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, className = "", }) {
@@ -6,9 +5,9 @@ export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, cla
     if (renderTabBar) {
         return _jsx(_Fragment, { children: renderTabBar(tabs, activeValue, handleChange) });
     }
-    return (_jsx(Div, { role: "tablist", className: `flex gap-2 border-b border-neutral-200 overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx("a", { href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
+    return (_jsx(Div, { role: "tablist", className: `flex gap-2 border-b border-neutral-200 dark:border-slate-700 overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx("a", { href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
-                : "border-transparent text-neutral-500 hover:text-neutral-800"}`, children: tab.label }, tab.value)) : (_jsx("button", { type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
+                : "border-transparent text-neutral-500 dark:text-zinc-400 hover:text-neutral-800 dark:hover:text-zinc-200"}`, children: tab.label }, tab.value)) : (_jsx("button", { type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
-                : "border-transparent text-neutral-500 hover:text-neutral-800"}`, children: tab.label }, tab.value))) }));
+                : "border-transparent text-neutral-500 dark:text-zinc-400 hover:text-neutral-800 dark:hover:text-zinc-200"}`, children: tab.label }, tab.value))) }));
 }

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

@@ -0,0 +1,5 @@
+export interface StoreProductsListingProps {
+    sellerId: string;
+    initialData?: any;
+}
+export declare function StoreProductsListing({ sellerId, initialData }: StoreProductsListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { ROUTES } from "../../../next";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { ProductFilters } from "../../products/components/ProductFilters";
+export function StoreProductsListing({ sellerId, initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const params = {
+        q: table.get("q") || undefined,
+        condition: table.get("condition") || undefined,
+        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
+        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
+        sort: table.get("sort") || undefined,
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        sellerId,
+        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 }) }) }));
+}

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

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

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

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

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

@@ -1,11 +1,16 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Div, Heading, Row } from "../../../ui";
+import { Div, Heading, Input, Select, SlottedListingView } from "../../../ui";
 export function StoreProductsView({ storeSlug, labels = {}, renderProducts, renderSearch, renderSort, renderFilters, renderActiveFilters, renderViewToggle, renderPagination, items = [], total = 0, isLoading = false, className = "", }) {
     const [search, setSearch] = useState("");
     const [sort, setSort] = useState("-createdAt");
     const [viewMode, setViewMode] = useState("grid");
     void storeSlug;
-    return (_jsxs(Div, { className: `py-4 ${className}`, children: [labels.title && (_jsx(Heading, { level: 2, className: "mb-4 text-xl font-semibold", children: labels.title })), _jsxs(Row, { wrap: true, gap: "3", className: "mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort), renderFilters?.(), renderViewToggle?.(viewMode, setViewMode)] }), renderActiveFilters?.(), renderProducts(items, isLoading), renderPagination?.(total)] }));
+    return (_jsx(Div, { className: `py-4 ${className}`, children: _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderHeader: () => labels.title ? (_jsx(Heading, { level: 2, className: "mb-1 text-xl font-semibold", children: labels.title })) : null, renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search store products", className: "max-w-sm" })), renderSort: () => renderSort?.(sort, setSort) ?? (_jsx(Select, { value: sort, onValueChange: setSort, options: [
+                    { value: "-createdAt", label: "Newest" },
+                    { value: "createdAt", label: "Oldest" },
+                    { value: "price", label: "Price: Low to High" },
+                    { value: "-price", label: "Price: High to Low" },
+                ], className: "min-w-44" })), renderFilters: renderFilters, renderActiveFilters: renderActiveFilters, renderBulkActions: () => renderViewToggle?.(viewMode, setViewMode) ?? null, renderTable: () => renderProducts(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }) }));
 }

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

@@ -0,0 +1,4 @@
+export interface StoreReviewsListingProps {
+    storeSlug: string;
+}
+export declare function StoreReviewsListing({ storeSlug }: StoreReviewsListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+"use client";
+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 { ReviewCard } from "../../reviews/components/ReviewsList";
+const STAR_OPTIONS = [
+    { value: 0, label: "All Ratings" },
+    { value: 5, label: "5 ★" },
+    { value: 4, label: "4 ★" },
+    { value: 3, label: "3 ★" },
+    { value: 2, label: "2 ★" },
+    { value: 1, label: "1 ★" },
+];
+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);
+    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
+                                ? "border-primary bg-primary/10 text-primary"
+                                : "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" })] }))] }))] }) }));
+}

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

@@ -0,0 +1,4 @@
+export interface StoreReviewsPageViewProps {
+    storeSlug: string;
+}
+export declare function StoreReviewsPageView({ storeSlug }: StoreReviewsPageViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StoreReviewsListing } from "./StoreReviewsListing";
+export function StoreReviewsPageView({ storeSlug }) {
+    return _jsx(StoreReviewsListing, { storeSlug: storeSlug });
+}

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

@@ -1,7 +1,7 @@
 import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
+import type { SlottedListingViewProps } from "../../../ui";
 import type { Review } from "../../reviews/types";
-export interface StoreReviewsViewProps extends Omit<StackedViewShellProps, "sections"> {
+export interface StoreReviewsViewProps extends Omit<SlottedListingViewProps, "renderTable"> {
     storeSlug: string;
     labels?: {
         title?: string;

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

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StackedViewShell } from "../../../ui";
+import { SlottedListingView } from "../../../ui";
 export function StoreReviewsView({ labels = {}, renderReviews, renderSummary, renderPagination, items = [], total = 0, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, sections: [
-            renderSummary?.(),
-            renderReviews(items, isLoading),
-            renderPagination?.(total),
-        ] }));
+    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, renderFilters: () => renderSummary?.() ?? null, renderTable: () => renderReviews(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
 }

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

@@ -0,0 +1,4 @@
+export interface StoresIndexListingProps {
+    initialData?: any;
+}
+export declare function StoresIndexListing({ initialData }: StoresIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useStores } from "../hooks/useStores";
+import { Div, Grid, Input, Pagination, SlottedListingView, SortDropdown, } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { InteractiveStoreCard } from "./InteractiveStoreCard";
+export function StoresIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const { stores, total, totalPages, isLoading } = useStores({
+        page: table.getNumber("page", 1),
+        pageSize: table.getNumber("pageSize", 24),
+        sort: table.get("sort") || undefined,
+        category: table.get("category") || 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 }) }));
+}

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

@@ -0,0 +1 @@
+export declare function StoresIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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() {
+    const result = await storeRepository
+        .listStores({ page: 1, pageSize: 24, sorts: "-createdAt" }, 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

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Div, Grid, Heading, Row, Span, Text } from "../../../ui";
-import { stripHtml } from "../../../utils/string.formatter";
+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 bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [store.storeBannerURL ? (_jsx(Div, { className: "h-24 overflow-hidden bg-gray-100", 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" })), _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 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: "h-12 w-12 rounded-lg border-2 border-white bg-orange-100 flex items-center justify-center text-orange-600 font-bold shadow-sm", children: store.storeName[0]?.toUpperCase() })) }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 text-sm truncate", children: store.storeName }), store.storeDescription && (_jsx(Text, { className: "text-xs text-gray-500 mt-0.5 line-clamp-2", children: stripHtml(store.storeDescription) })), _jsxs(Row, { className: "gap-3 mt-2 text-xs text-gray-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)] }))] })] })] }));
+    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)] }))] })] })] }));
 }
 export function StoresListView({ stores, labels = {}, total = 0, currentPage = 1, totalPages = 1, className = "", slots, }) {
     if (stores.length === 0) {
         if (slots?.renderEmptyState) {
             return _jsx(_Fragment, { children: slots.renderEmptyState() });
         }
-        return (_jsx(Text, { className: "text-center text-gray-500 py-12", children: labels.empty ?? "No stores found." }));
+        return (_jsx(Text, { className: "text-center text-gray-500 dark:text-zinc-400 py-12", children: labels.empty ?? "No stores found." }));
     }
     return (_jsxs(Div, { className: "space-y-4", children: [slots?.renderHeader
                 ? slots.renderHeader({ total })

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

@@ -14,3 +14,11 @@ export { StoreReviewsView } from "./StoreReviewsView";
 export type { StoreReviewsViewProps } from "./StoreReviewsView";
 export { InteractiveStoreCard } from "./InteractiveStoreCard";
 export type { InteractiveStoreCardProps } from "./InteractiveStoreCard";
+export { StoresIndexListing } from "./StoresIndexListing";
+export type { StoresIndexListingProps } from "./StoresIndexListing";
+export { StoreProductsListing } from "./StoreProductsListing";
+export type { StoreProductsListingProps } from "./StoreProductsListing";
+export { StoreAuctionsListing } from "./StoreAuctionsListing";
+export type { StoreAuctionsListingProps } from "./StoreAuctionsListing";
+export { StoreReviewsListing } from "./StoreReviewsListing";
+export type { StoreReviewsListingProps } from "./StoreReviewsListing";

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

@@ -7,3 +7,7 @@ export { StoreProductsView } from "./StoreProductsView";
 export { StoreAuctionsView } from "./StoreAuctionsView";
 export { StoreReviewsView } from "./StoreReviewsView";
 export { InteractiveStoreCard } from "./InteractiveStoreCard";
+export { StoresIndexListing } from "./StoresIndexListing";
+export { StoreProductsListing } from "./StoreProductsListing";
+export { StoreAuctionsListing } from "./StoreAuctionsListing";
+export { StoreReviewsListing } from "./StoreReviewsListing";

package/dist/features/stores/hooks/useStoreAddressSelector.js

@@ -1,4 +1,3 @@
-"use client";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";

package/dist/features/stores/hooks/useStores.d.ts

@@ -2,13 +2,14 @@ import type { StoreListResponse, StoreListParams, StoreDetail, StoreProductsResp
 interface UseStoresOptions {
     enabled?: boolean;
     endpoint?: string;
+    initialData?: any;
 }
 export declare function useStores(params?: StoreListParams, opts?: UseStoresOptions): {
     stores: import("..").StoreListItem[];
     total: number;
     totalPages: number;
     hasMore: boolean;
-    isLoading: boolean;
+    isLoading: false;
     error: string | null;
     refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreListResponse, Error>>;
 };

package/dist/features/stores/hooks/useStores.js

@@ -1,4 +1,3 @@
-"use client";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { STORE_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -19,6 +18,7 @@ export function useStores(params = {}, opts) {
     const { data, isLoading, error, refetch } = useQuery({
         queryKey: ["stores", qs],
         queryFn: () => apiClient.get(endpoint),
+        initialData: opts?.initialData,
         enabled: opts?.enabled ?? true,
     });
     return {

package/dist/features/stores/repository/store-address.repository.js

@@ -6,7 +6,7 @@
  *
  * Mirrors the user address repository but scoped to stores.
  */
-import { getAdminDb, prepareForFirestore, deserializeTimestamps, } from "../../../providers/db-firebase";
+import { getAdminDb, getFirestoreCount, prepareForFirestore, deserializeTimestamps, } from "../../../providers/db-firebase";
 import { DatabaseError, NotFoundError } from "../../../errors";
 import { encryptPiiFields, decryptPiiFields, ADDRESS_PII_FIELDS, } from "../../../security";
 import { STORE_ADDRESS_SUBCOLLECTION, STORE_ADDRESS_FIELDS, STORE_COLLECTION, } from "../schemas";
@@ -80,8 +80,7 @@ class StoreAddressRepository {
      */
     async count(storeSlug) {
         try {
-            const snapshot = await this.getCollection(storeSlug).count().get();
-            return snapshot.data().count;
+            return await getFirestoreCount(this.getCollection(storeSlug));
         }
         catch (error) {
             throw new DatabaseError(`Failed to count addresses for store: ${storeSlug}`, error);

package/dist/features/stores/repository/store.repository.d.ts

@@ -1,4 +1,3 @@
-import "server-only";
 /**
  * Store Repository
  *

package/dist/features/stores/repository/store.repository.js

@@ -1,4 +1,3 @@
-import "server-only";
 /**
  * Store Repository
  *