@mohasinac/appkit 2.3.2 → 2.4.0

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

@@ -1,25 +1,78 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { Search, SlidersHorizontal, X } from "lucide-react";
+import { useState, useCallback, useMemo } from "react";
+import { X } from "lucide-react";
 import { useCategoriesFiltered } from "../hooks/useCategories";
 import { ROUTES } from "../../../next";
-import { Pagination } from "../../../ui";
+import { Pagination, ListingToolbar } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
 import { CategoryFilters } from "./CategoryFilters";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 const PAGE_SIZE = 24;
+const FILTER_KEYS = ["isFeatured", "isBrand", "rootOnly", "tier", "minItemCount", "maxItemCount"];
 const SORT_OPTIONS = [
     { value: "name", label: "Name A–Z" },
     { value: "-name", label: "Name Z–A" },
     { value: "-productCount", label: "Most Products" },
 ];
-export function CategoriesIndexListing({ initialData: _ }) {
+export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "name" } });
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const sort = table.get("sort") || "name";
     const page = table.getNumber("page", 1);
+    // 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") !== "name" ||
+        activeFilterCount > 0;
     const commitSearch = useCallback(() => {
         table.set("q", searchInput.trim());
         table.setPage(1);
@@ -29,11 +82,20 @@ export function CategoriesIndexListing({ initialData: _ }) {
         table.set("q", "");
         table.setPage(1);
     };
-    const closeFilters = () => setFilterOpen(false);
+    // Tab state — "all" | "categories" | "brands" (not used when brandsOnly=true)
+    const activeTab = brandsOnly ? "brands" : (table.get("tab") || "all");
+    const isBrandParam = brandsOnly ? true :
+        activeTab === "brands" ? true :
+            activeTab === "categories" ? false :
+                undefined;
+    const switchTab = (key) => {
+        table.set("tab", key);
+        table.setPage(1);
+    };
     const { categories, total, totalPages, isLoading } = useCategoriesFiltered({
         q: table.get("q") || undefined,
         isFeatured: table.get("isFeatured") === "true" || undefined,
-        isBrand: table.get("isBrand") === "true" || undefined,
+        isBrand: isBrandParam,
         rootOnly: table.get("rootOnly") === "true" || undefined,
         tier: table.get("tier") ? Number(table.get("tier")) : undefined,
         minProductCount: table.get("minItemCount") ? Number(table.get("minItemCount")) : undefined,
@@ -43,5 +105,19 @@ export function CategoriesIndexListing({ initialData: _ }) {
         pageSize: PAGE_SIZE,
     });
     const activeSearch = table.get("q") || "";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4 -mx-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: "Search categories...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), searchInput && (_jsx("button", { type: "button", onClick: clearSearch, className: "px-2 text-zinc-400 hover:text-zinc-600 transition-colors", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort" }), _jsx("select", { value: sort, onChange: (e) => { table.set("sort", e.target.value); table.setPage(1); }, className: "rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-primary/30", children: SORT_OPTIONS.map((o) => _jsx("option", { value: o.value, children: o.label }, o.value)) })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsx("div", { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) })) : categories.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch ? `No categories matching "${activeSearch}"` : "No categories found" })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _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"] }), _jsx("button", { type: "button", onClick: closeFilters, "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(CategoryFilters, { table: table, variant: "public" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
+    const TABS = [
+        { key: "all", label: "All" },
+        { key: "categories", label: "Categories" },
+        { key: "brands", label: "Brands" },
+    ];
+    return (_jsxs("div", { className: "min-h-screen", children: [!brandsOnly && (_jsx("div", { className: "flex gap-1 border-b border-zinc-200 dark:border-slate-700 mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
+                        "px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
+                        activeTab === tab.key
+                            ? "border-primary text-primary dark:text-primary-400 dark:border-primary-400"
+                            : "border-transparent text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
+                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, 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 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsx("div", { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) })) : categories.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch
+                        ? `No ${activeTab === "brands" || brandsOnly ? "brands" : "categories"} matching "${activeSearch}"`
+                        : activeTab === "brands" || brandsOnly
+                            ? "No brands found"
+                            : "No categories found" })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(CategoryFilters, { table: pendingTable, variant: "public" }) }), _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/categories/components/CategoryDetailPageView.js

@@ -5,28 +5,49 @@ import { ROUTES } from "../../../next";
 import { Container, Main, Section } from "../../../ui";
 import { CategoryDetailTabs } from "./CategoryDetailTabs";
 export async function CategoryDetailPageView({ slug }) {
-    const [categoryResult, productsResult] = await Promise.all([
-        categoriesRepository
-            .findBy("slug", slug)
-            .then((items) => items[0])
-            .catch(() => undefined),
-        productRepository
-            .list({
-            filters: `status==published,categorySlug==${slug},isAuction==false`,
-            sorts: "-createdAt",
-            page: 1,
-            pageSize: 24,
-        })
-            .catch(() => null),
+    const category = await categoriesRepository
+        .getCategoryBySlug(slug)
+        .catch(() => undefined);
+    const [productsResult, auctionsCountResult, preOrdersCountResult, childCategories] = await Promise.all([
+        category?.id
+            ? productRepository
+                .list({
+                filters: `status==published,category==${category.id},isAuction==false,isPreOrder==false`,
+                sorts: "-createdAt",
+                page: 1,
+                pageSize: 24,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+        category?.id
+            ? productRepository
+                .list({
+                filters: `status==published,category==${category.id},isAuction==true`,
+                sorts: "auctionEndDate",
+                page: 1,
+                pageSize: 1,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+        category?.id
+            ? productRepository
+                .list({
+                filters: `status==published,category==${category.id},isPreOrder==true`,
+                sorts: "-createdAt",
+                page: 1,
+                pageSize: 1,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+        category?.id
+            ? categoriesRepository.getChildren(category.id).catch(() => [])
+            : Promise.resolve([]),
     ]);
-    const category = categoryResult;
-    const childCategories = category?.id
-        ? await categoriesRepository.getChildren(category.id).catch(() => [])
-        : [];
-    const productCount = category?.metrics?.productCount ?? 0;
+    const productCount = productsResult?.total ?? category?.metrics?.productCount ?? 0;
+    const auctionCount = auctionsCountResult?.total ?? category?.metrics?.auctionCount ?? 0;
+    const preOrderCount = preOrdersCountResult?.total ?? 0;
+    const totalCount = productCount + auctionCount + preOrderCount;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    return (_jsxs(Main, { children: [_jsxs("section", { className: `relative overflow-hidden ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs("nav", { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Home" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Categories" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx("span", { className: hasCover ? "text-white font-medium" : "text-zinc-900 dark:text-zinc-100 font-medium", children: category?.name ?? slug })] }), _jsx("h1", { className: `text-3xl md:text-4xl font-bold mb-2 ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx("p", { className: `text-base max-w-2xl mb-4 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: category.description })), productCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1 rounded-full ${hasCover
-                                    ? "bg-white/20 text-white backdrop-blur-sm"
-                                    : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }))] })] }), childCategories.length > 0 && (_jsx("section", { className: "border-b border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 py-3", children: _jsx("div", { className: "flex gap-2.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx("span", { className: "text-base leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx("span", { className: "text-xs text-zinc-400 dark:text-zinc-500", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, initialProductsData: productsResult ?? undefined }) }) })] }));
+    return (_jsxs(Main, { children: [_jsxs("section", { className: `relative overflow-hidden ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs("nav", { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Home" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Categories" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx("span", { className: hasCover ? "text-white font-medium" : "text-zinc-900 dark:text-zinc-100 font-medium", children: category?.name ?? slug })] }), _jsx("h1", { className: `text-3xl md:text-4xl font-bold mb-2 ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx("p", { className: `text-base max-w-2xl mb-4 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: category.description })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [productCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] }))] })] })] }), childCategories.length > 0 && (_jsx("section", { className: "border-b border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 py-3", children: _jsx("div", { className: "flex gap-2.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx("span", { className: "text-base leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx("span", { className: "text-xs text-zinc-400 dark:text-zinc-500", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, counts: { products: productCount, auctions: auctionCount, preOrders: preOrderCount } }) }) })] }));
 }

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

@@ -1,5 +1,11 @@
 export interface CategoryDetailTabsProps {
     categorySlug: string;
+    categoryId?: string;
     initialProductsData?: any;
+    counts?: {
+        products?: number;
+        auctions?: number;
+        preOrders?: number;
+    };
 }
-export declare function CategoryDetailTabs({ categorySlug, initialProductsData }: CategoryDetailTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, counts }: CategoryDetailTabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,14 +4,19 @@ import { useState } from "react";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
-const TABS = [
-    { id: "products", label: "Products" },
-    { id: "auctions", label: "Auctions" },
-    { id: "pre-orders", label: "Pre-Orders" },
-];
-export function CategoryDetailTabs({ categorySlug, initialProductsData }) {
+function tabLabel(label, count) {
+    if (!count)
+        return label;
+    return `${label} (${count.toLocaleString()})`;
+}
+export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, counts }) {
     const [activeTab, setActiveTab] = useState("products");
+    const TABS = [
+        { id: "products", label: tabLabel("Products", counts?.products) },
+        { id: "auctions", label: tabLabel("Auctions", counts?.auctions) },
+        { id: "pre-orders", label: tabLabel("Pre-Orders", counts?.preOrders) },
+    ];
     return (_jsxs("div", { children: [_jsx("div", { className: "flex border-b border-zinc-200 dark:border-slate-700 mb-6", children: TABS.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium transition-colors -mb-px border-b-2 ${activeTab === t.id
                         ? "border-primary text-primary"
-                        : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: t.label }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug }))] }));
+                        : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: t.label }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug }))] }));
 }

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

@@ -71,5 +71,5 @@ export function CategoryFilters({ table, variant = "admin", }) {
     const activeOnly = table.get("isActive") === "true";
     const searchableOnly = table.get("isSearchable") === "true";
     const leafOnly = table.get("isLeaf") === "true";
-    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: tr("tier", "Tier"), options: tierOptions, selected: selectedTier, onChange: (vals) => table.set("tier", vals.join("|")), searchable: false, defaultCollapsed: variant !== "admin" }), _jsx(SwitchFilter, { title: tr("featured", "Featured"), label: tr("showFeaturedOnly", "Show featured only"), checked: featuredOnly, onChange: (v) => table.set("isFeatured", v ? "true" : ""), defaultCollapsed: true }), _jsx(SwitchFilter, { title: tr("brand", "Brand"), label: tr("showBrandsOnly", "Show brands only"), checked: brandOnly, onChange: (v) => table.set("isBrand", v ? "true" : ""), defaultCollapsed: true }), variant !== "public" && (_jsx(SwitchFilter, { title: tr("status", "Status"), label: tr("showActiveOnly", "Show active only"), checked: activeOnly, onChange: (v) => table.set("isActive", v ? "true" : ""), defaultCollapsed: true })), variant === "admin" && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: tr("searchable", "Searchable"), label: tr("showSearchableOnly", "Show searchable only"), checked: searchableOnly, onChange: (v) => table.set("isSearchable", v ? "true" : ""), defaultCollapsed: true }), _jsx(SwitchFilter, { title: tr("leaf", "Leaf"), label: tr("showLeafOnly", "Show leaf only"), checked: leafOnly, onChange: (v) => table.set("isLeaf", v ? "true" : ""), defaultCollapsed: true })] })), _jsx(SwitchFilter, { title: tr("rootLevelOnly", "Root Level"), label: tr("showRootLevelOnly", "Top level only"), checked: table.get("rootOnly") === "true", onChange: (v) => table.set("rootOnly", v ? "true" : ""), defaultCollapsed: true }), _jsx(RangeFilter, { title: tr("itemCount", "Item Count"), minValue: table.get("minItemCount"), maxValue: table.get("maxItemCount"), onMinChange: (v) => table.set("minItemCount", v), onMaxChange: (v) => table.set("maxItemCount", v), minBound: 0, maxBound: 10000, step: 10, minPlaceholder: tr("minItemCount", "Min items"), maxPlaceholder: tr("maxItemCount", "Max items"), defaultCollapsed: true })] }));
+    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: tr("tier", "Tier"), options: tierOptions, selected: selectedTier, onChange: (vals) => table.set("tier", vals.join("|")), searchable: false, defaultCollapsed: variant !== "admin" }), _jsx(SwitchFilter, { title: tr("featured", "Featured"), label: tr("showFeaturedOnly", "Show featured only"), checked: featuredOnly, onChange: (v) => table.set("isFeatured", v ? "true" : "") }), _jsx(SwitchFilter, { title: tr("brand", "Brand"), label: tr("showBrandsOnly", "Show brands only"), checked: brandOnly, onChange: (v) => table.set("isBrand", v ? "true" : "") }), variant !== "public" && (_jsx(SwitchFilter, { title: tr("status", "Status"), label: tr("showActiveOnly", "Show active only"), checked: activeOnly, onChange: (v) => table.set("isActive", v ? "true" : "") })), variant === "admin" && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: tr("searchable", "Searchable"), label: tr("showSearchableOnly", "Show searchable only"), checked: searchableOnly, onChange: (v) => table.set("isSearchable", v ? "true" : "") }), _jsx(SwitchFilter, { title: tr("leaf", "Leaf"), label: tr("showLeafOnly", "Show leaf only"), checked: leafOnly, onChange: (v) => table.set("isLeaf", v ? "true" : "") })] })), _jsx(SwitchFilter, { title: tr("rootLevelOnly", "Root Level"), label: tr("showRootLevelOnly", "Top level only"), checked: table.get("rootOnly") === "true", onChange: (v) => table.set("rootOnly", v ? "true" : "") }), _jsx(RangeFilter, { title: tr("itemCount", "Item Count"), minValue: table.get("minItemCount"), maxValue: table.get("maxItemCount"), onMinChange: (v) => table.set("minItemCount", v), onMaxChange: (v) => table.set("maxItemCount", v), minBound: 0, maxBound: 10000, step: 10, minPlaceholder: tr("minItemCount", "Min items"), maxPlaceholder: tr("maxItemCount", "Max items"), defaultCollapsed: false })] }));
 }

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

@@ -4,7 +4,7 @@ import { Label, Checkbox, RichTextEditor, Text } from "../../../ui";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media";
 import { FormField } from "../../../ui";
 import { flattenCategories } from "../types";
-import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter";
 const DEFAULT_LABELS = {
     name: "Name",
     slug: "Slug",
@@ -24,9 +24,12 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
     const update = (partial) => {
         onChange({ ...category, ...partial });
     };
+    const makeSlug = (name, isBrand) => {
+        const base = slugify(name);
+        return isBrand ? `category-brand-${base}` : `category-${base}`;
+    };
     const handleNameChange = (value) => {
-        const slug = value.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-        update({ name: value, slug });
+        update({ name: value, slug: makeSlug(value, category.isBrand ?? false) });
     };
     return (_jsxs("div", { className: stackClassName, "data-section": "categoryform-div-262", children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs("div", { className: "appkit-form-field", "data-section": "categoryform-div-263", children: [_jsx(Label, { className: "appkit-form-field__label", children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description" }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
                     type: "category-image",
@@ -38,5 +41,8 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
                         label: `${"  ".repeat(cat.tier)}${cat.name}`,
                         disabled: cat.id === category.id,
                     })),
-                ] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { checked: category.isActive || false, onChange: (e) => update({ isActive: e.target.checked }), disabled: isReadonly, label: L.enabled }), _jsx(Checkbox, { checked: category.showOnHomepage || false, onChange: (e) => update({ showOnHomepage: e.target.checked }), disabled: isReadonly, label: L.showOnHomepage }), _jsx(Checkbox, { checked: category.isBrand || false, onChange: (e) => update({ isBrand: e.target.checked }), disabled: isReadonly, label: L.isBrand })] }), _jsx(FormField, { name: "order", label: L.order, type: "number", value: String(category.order || 0), onChange: (value) => update({ order: parseInt(value) || 0 }), disabled: isReadonly })] }));
+                ] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { checked: category.isActive || false, onChange: (e) => update({ isActive: e.target.checked }), disabled: isReadonly, label: L.enabled }), _jsx(Checkbox, { checked: category.showOnHomepage || false, onChange: (e) => update({ showOnHomepage: e.target.checked }), disabled: isReadonly, label: L.showOnHomepage }), _jsx(Checkbox, { checked: category.isBrand || false, onChange: (e) => {
+                            const isBrand = e.target.checked;
+                            update({ isBrand, slug: makeSlug(category.name ?? "", isBrand) });
+                        }, disabled: isReadonly, label: L.isBrand })] }), _jsx(FormField, { name: "order", label: L.order, type: "number", value: String(category.order || 0), onChange: (value) => update({ order: parseInt(value) || 0 }), disabled: isReadonly })] }));
 }

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

@@ -1,5 +1,8 @@
 export interface CategoryProductsListingProps {
     categorySlug: string;
+    categoryId?: string;
+    /** Filter products by brand name (for brand detail pages) */
+    brandName?: string;
     initialData?: any;
 }
-export declare function CategoryProductsListing({ categorySlug, initialData, }: CategoryProductsListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryProductsListing({ categorySlug, categoryId, brandName, initialData, }: CategoryProductsListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,21 +4,28 @@ import { useState, useCallback } from "react";
 import { Search, SlidersHorizontal, LayoutGrid, List, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, SortDropdown } from "../../../ui";
+import { Pagination, SortDropdown, useToast } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { ProductGrid } from "../../products/components/ProductGrid";
 import { ProductFilters } from "../../products/components/ProductFilters";
 import { PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/components/ProductFilters";
-export function CategoryProductsListing({ categorySlug, initialData, }) {
+import { useGuestCart } from "../../cart/hooks/useGuestCart";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
+export function CategoryProductsListing({ categorySlug, categoryId, brandName, 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));
     const params = {
         q: table.get("q") || undefined,
-        categorySlug,
+        category: categoryId || undefined,
         condition: table.get("condition") || undefined,
-        brand: table.get("brand") || undefined,
+        brand: brandName || 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") || "-createdAt",
@@ -31,10 +38,32 @@ export function CategoryProductsListing({ categorySlug, initialData, }) {
         table.set("q", searchInput.trim());
         table.setPage(1);
     }, [searchInput, table]);
+    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]);
     const handleViewToggle = (next) => {
         setView(next);
         table.set("view", next);
     };
     const closeFilters = () => setFilterOpen(false);
-    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: PRODUCT_PUBLIC_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("card"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "card" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: `No products found in this category.` })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _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"] }), _jsx("button", { type: "button", onClick: closeFilters, "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: table, currencyPrefix: "\u20B9" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
+    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx("div", { className: "sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: PRODUCT_PUBLIC_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("card"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "card" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("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: "No products found in this category.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _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"] }), _jsx("button", { type: "button", onClick: closeFilters, "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: table, currencyPrefix: "\u20B9" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
 }

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 export function ConcernCard({ concern, onClick, className = "", }) {
-    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 bg-white p-4 text-center shadow-sm transition hover:border-primary hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { role: "img", "aria-label": concern.name, className: "h-16 w-16 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${concern.display.coverImage})` } })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-neutral-900 group-hover:text-primary", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500`, children: concern.description }))] })] }));
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { role: "img", "aria-label": concern.name, className: "h-16 w-16 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${concern.display.coverImage})` } })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary dark:group-hover:text-primary-400", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400`, children: concern.description }))] })] }));
 }

package/dist/features/categories/hooks/useCategories.js

@@ -41,6 +41,8 @@ export function useCategoriesFiltered(params = {}) {
         const lq = q.toLowerCase();
         if (lq)
             items = items.filter((c) => c.name.toLowerCase().includes(lq) || (c.description ?? "").toLowerCase().includes(lq));
+        if (params.isBrand === false)
+            items = items.filter((c) => !c.isBrand);
         if (minProductCount !== undefined)
             items = items.filter((c) => (c.productCount ?? 0) >= minProductCount);
         if (maxProductCount !== undefined)

package/dist/features/categories/repository/categories.repository.js

@@ -98,6 +98,7 @@ export class CategoriesRepository extends BaseRepository {
                 .collection(this.collection)
                 .where("isLeaf", "==", true)
                 .where("isActive", "==", true)
+                .limit(500)
                 .get();
             return snapshot.docs.map((doc) => this.mapDoc(doc));
         }
@@ -141,10 +142,8 @@ export class CategoriesRepository extends BaseRepository {
                 .collection(this.collection)
                 .where("parentIds", "array-contains", parentId)
                 .orderBy("order", "asc")
+                .limit(100)
                 .get();
-            const parent = await this.findById(parentId);
-            if (!parent)
-                return [];
             return snapshot.docs
                 .map((doc) => this.mapDoc(doc))
                 .filter((category) => category.parentIds[category.parentIds.length - 1] === parentId);

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

@@ -41,26 +41,45 @@ export interface CategoryDocument {
     path: string;
     order: number;
     isLeaf: boolean;
+    /**
+     * Global DFS pre-order position across the entire category tree (1-indexed).
+     * Set and maintained by the onCategoryWrite Cloud Function.
+     * Enables ordered range queries without loading the whole tree.
+     */
+    position: number;
+    /**
+     * Count of this node plus all its descendants.
+     * The range [position, position + subtreeSize - 1] covers the full subtree.
+     * Used to efficiently locate insertion points and shift sibling positions.
+     */
+    subtreeSize: number;
     metrics: CategoryDocumentMetrics;
     isFeatured: boolean;
     featuredPriority?: number;
     isBrand?: boolean;
+    type?: import("../types").CategoryType;
     seo: CategoryDocumentSEO;
     display: CategoryDocumentDisplay;
     isActive: boolean;
     isSearchable: boolean;
     showOnHomepage?: boolean;
     createdBy: string;
+    /** Whether this category was created by admin or a store owner. */
+    createdByType?: "admin" | "store";
+    /** The storeId of the store that requested this category (only set when createdByType === "store"). */
+    createdByStoreId?: string;
+    /** Display name of the store that requested this category. */
+    createdByStoreName?: string;
     createdAt: Date;
     updatedAt: Date;
     ancestors: CategoryAncestor[];
 }
 export declare const CATEGORIES_COLLECTION: "categories";
-export declare const CATEGORIES_INDEXED_FIELDS: readonly ["slug", "rootId", "tier", "parentIds", "isLeaf", "isFeatured", "featuredPriority", "isBrand", "isActive", "isSearchable", "showOnHomepage", "createdBy", "createdAt"];
+export declare const CATEGORIES_INDEXED_FIELDS: readonly ["slug", "rootId", "tier", "parentIds", "isLeaf", "isFeatured", "featuredPriority", "isBrand", "isActive", "isSearchable", "showOnHomepage", "createdBy", "createdByType", "createdByStoreId", "createdAt"];
 export declare const MIN_ITEMS_FOR_FEATURED: 8;
 export declare const MAX_FEATURED_CATEGORIES: 4;
 export declare const DEFAULT_CATEGORY_DATA: Partial<CategoryDocument>;
-export declare const CATEGORIES_PUBLIC_FIELDS: readonly ["id", "name", "slug", "description", "rootId", "parentIds", "childrenIds", "tier", "path", "order", "isLeaf", "metrics.totalProductCount", "metrics.totalAuctionCount", "metrics.totalItemCount", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "ancestors"];
+export declare const CATEGORIES_PUBLIC_FIELDS: readonly ["id", "name", "slug", "description", "rootId", "parentIds", "childrenIds", "tier", "path", "order", "position", "subtreeSize", "isLeaf", "metrics.totalProductCount", "metrics.totalAuctionCount", "metrics.totalItemCount", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "ancestors"];
 export declare const CATEGORIES_UPDATABLE_FIELDS: readonly ["name", "slug", "description", "order", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "isSearchable"];
 export type CategoryCreateInput = Omit<CategoryDocument, "id" | "createdAt" | "updatedAt" | "metrics" | "isLeaf" | "ancestors"> & {
     parentIds?: string[];
@@ -110,6 +129,8 @@ export declare const CATEGORY_FIELDS: {
     readonly TIER: "tier";
     readonly PATH: "path";
     readonly ORDER: "order";
+    readonly POSITION: "position";
+    readonly SUBTREE_SIZE: "subtreeSize";
     readonly IS_LEAF: "isLeaf";
     readonly METRICS: "metrics";
     readonly METRIC: {

package/dist/features/categories/schemas/firestore.js

@@ -20,6 +20,8 @@ export const CATEGORIES_INDEXED_FIELDS = [
     "isSearchable",
     "showOnHomepage",
     "createdBy",
+    "createdByType",
+    "createdByStoreId",
     "createdAt",
 ];
 export const MIN_ITEMS_FOR_FEATURED = 8;
@@ -28,6 +30,8 @@ export const DEFAULT_CATEGORY_DATA = {
     childrenIds: [],
     isLeaf: true,
     order: 0,
+    position: 0,
+    subtreeSize: 1,
     isFeatured: false,
     isBrand: false,
     isActive: true,
@@ -58,6 +62,8 @@ export const CATEGORIES_PUBLIC_FIELDS = [
     "tier",
     "path",
     "order",
+    "position",
+    "subtreeSize",
     "isLeaf",
     "metrics.totalProductCount",
     "metrics.totalAuctionCount",
@@ -145,6 +151,8 @@ export const CATEGORY_FIELDS = {
     TIER: "tier",
     PATH: "path",
     ORDER: "order",
+    POSITION: "position",
+    SUBTREE_SIZE: "subtreeSize",
     IS_LEAF: "isLeaf",
     METRICS: "metrics",
     METRIC: {