@mohasinac/appkit 2.3.1 → 2.3.2

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

@@ -1,44 +1,47 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { useCategoriesList } from "../hooks/useCategories";
+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 { useCategoriesFiltered } from "../hooks/useCategories";
 import { ROUTES } from "../../../next";
-import { Container, Grid, Input, Section, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
-import { CategoryCard } from "./CategoryGrid";
 import { Pagination } from "../../../ui";
+import { CategoryCard } from "./CategoryGrid";
+import { CategoryFilters } from "./CategoryFilters";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
 const PAGE_SIZE = 24;
-export function CategoriesIndexListing({ initialData }) {
-    const { categories, isLoading } = useCategoriesList({ initialData });
-    const [search, setSearch] = useState("");
-    const [sort, setSort] = useState("name");
-    const [page, setPage] = useState(1);
-    const filtered = useMemo(() => {
-        let result = [...categories];
-        const q = search.trim().toLowerCase();
-        if (q) {
-            result = result.filter((c) => c.name.toLowerCase().includes(q) ||
-                (c.description ?? "").toLowerCase().includes(q));
-        }
-        result.sort((a, b) => {
-            if (sort === "-productCount") {
-                return (b.productCount ?? 0) - (a.productCount ?? 0);
-            }
-            if (sort === "-name") {
-                return b.name.localeCompare(a.name);
-            }
-            return a.name.localeCompare(b.name);
-        });
-        return result;
-    }, [categories, search, sort]);
-    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-    const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
-    const handleSearch = (val) => {
-        setSearch(val);
-        setPage(1);
+const SORT_OPTIONS = [
+    { value: "name", label: "Name A–Z" },
+    { value: "-name", label: "Name Z–A" },
+    { value: "-productCount", label: "Most Products" },
+];
+export function CategoriesIndexListing({ initialData: _ }) {
+    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);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const clearSearch = () => {
+        setSearchInput("");
+        table.set("q", "");
+        table.setPage(1);
     };
-    return (_jsx(Section, { children: _jsx(Container, { size: "xl", children: _jsx(SlottedListingView, { portal: "public", manageSearch: false, manageSort: false, inlineToolbar: true, renderSearch: () => (_jsx(Input, { value: search, onChange: (e) => handleSearch(e.target.value), placeholder: "Search categories...", className: "max-w-sm" })), renderSort: () => (_jsx(SortDropdown, { value: sort, onChange: (v) => { setSort(v); setPage(1); }, options: [
-                        { value: "name", label: "Name A–Z" },
-                        { value: "-name", label: "Name Z–A" },
-                        { value: "-productCount", label: "Most Products" },
-                    ] })), renderTable: () => paginated.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 categories found" }), search && (_jsxs(Text, { className: "text-sm text-zinc-500", children: ["No results for \u201C", search, "\u201D"] }))] })) : (_jsx(Grid, { cols: 4, gap: "md", children: paginated.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })), renderPagination: () => totalPages > 1 ? (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage })) : null, total: filtered.length, isLoading: isLoading }) }) }));
+    const closeFilters = () => setFilterOpen(false);
+    const { categories, total, totalPages, isLoading } = useCategoriesFiltered({
+        q: table.get("q") || undefined,
+        isFeatured: table.get("isFeatured") === "true" || undefined,
+        isBrand: table.get("isBrand") === "true" || undefined,
+        rootOnly: table.get("rootOnly") === "true" || undefined,
+        tier: table.get("tier") ? Number(table.get("tier")) : undefined,
+        minProductCount: table.get("minItemCount") ? Number(table.get("minItemCount")) : undefined,
+        maxProductCount: table.get("maxItemCount") ? Number(table.get("maxItemCount")) : undefined,
+        sort,
+        page,
+        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" }) })] })] }))] }));
 }

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

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

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

@@ -3,9 +3,48 @@ import { categoriesRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { CategoriesIndexListing } from "./CategoriesIndexListing";
-export async function CategoriesIndexPageView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildCategoryFilters(params) {
+    const parts = [];
+    const isFeatured = sp(params, "isFeatured");
+    if (isFeatured === "true")
+        parts.push("isFeatured==true");
+    const isBrand = sp(params, "isBrand");
+    if (isBrand === "true")
+        parts.push("isBrand==true");
+    const rootOnly = sp(params, "rootOnly");
+    if (rootOnly === "true")
+        parts.push("tier==0");
+    const minItemCount = sp(params, "minItemCount");
+    const maxItemCount = sp(params, "maxItemCount");
+    if (minItemCount)
+        parts.push(`metrics.totalItemCount>=${minItemCount}`);
+    if (maxItemCount)
+        parts.push(`metrics.totalItemCount<=${maxItemCount}`);
+    const tier = sp(params, "tier");
+    if (tier) {
+        const values = tier.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`tier==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`tier==${values.join("|")}`);
+    }
+    return parts.join(",");
+}
+export async function CategoriesIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "name";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const filters = buildCategoryFilters(searchParams);
     const result = await categoriesRepository
-        .list({ page: 1, pageSize: 200, sorts: "name" })
+        .list({
+        page,
+        pageSize: 200,
+        sorts: sort,
+        ...(filters ? { filters } : {}),
+    })
         .catch(() => null);
     const initialData = (result?.items ?? []);
     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: "Categories" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoriesIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { categoriesRepository, productRepository } from "../../../repositories";
 import { ROUTES } from "../../../next";
-import { normalizeRichTextHtml } from "../../../utils/string.formatter";
-import { Container, Div, Heading, Main, Row, RichText, Section, Span, } from "../../../ui";
-import { CategoryProductsListing } from "./CategoryProductsListing";
+import { Container, Main, Section } from "../../../ui";
+import { CategoryDetailTabs } from "./CategoryDetailTabs";
 export async function CategoryDetailPageView({ slug }) {
     const [categoryResult, productsResult] = await Promise.all([
         categoriesRepository
@@ -13,7 +12,7 @@ export async function CategoryDetailPageView({ slug }) {
             .catch(() => undefined),
         productRepository
             .list({
-            filters: `status==published,categorySlug==${slug}`,
+            filters: `status==published,categorySlug==${slug},isAuction==false`,
             sorts: "-createdAt",
             page: 1,
             pageSize: 24,
@@ -21,5 +20,13 @@ export async function CategoryDetailPageView({ slug }) {
             .catch(() => null),
     ]);
     const category = categoryResult;
-    return (_jsxs(Main, { children: [_jsx(Section, { className: "bg-zinc-50 py-4 dark:bg-zinc-900", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { align: "center", gap: "xs", className: "text-sm text-zinc-500", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600", children: "Home" }), _jsx(Span, { children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: "hover:text-primary-600", children: "Categories" }), _jsx(Span, { children: "/" }), _jsx(Span, { className: "text-zinc-900 dark:text-zinc-100", children: category?.name ?? slug })] }) }) }), _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-2 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: category?.name ?? slug }), category?.description && (_jsx(Div, { className: "mb-8 text-zinc-600 dark:text-zinc-400", children: _jsx(RichText, { html: normalizeRichTextHtml(category.description) }) })), _jsx(CategoryProductsListing, { categorySlug: slug, initialData: productsResult ?? undefined })] }) })] }));
+    const childCategories = category?.id
+        ? await categoriesRepository.getChildren(category.id).catch(() => [])
+        : [];
+    const productCount = category?.metrics?.productCount ?? 0;
+    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 }) }) })] }));
 }

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

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

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    const [activeTab, setActiveTab] = useState("products");
+    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 }))] }));
+}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
 import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const CATEGORY_FILTER_KEYS = {
@@ -70,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 })] }))] }));
+    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 })] }));
 }

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

@@ -8,8 +8,9 @@ export interface CategoryCardProps {
 export declare function CategoryCard({ category, href, onClick, className, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
 export interface CategoryGridProps {
     categories: CategoryItem[];
+    getHref?: (category: CategoryItem) => string;
     onCategoryClick?: (category: CategoryItem) => void;
     emptyLabel?: string;
     className?: string;
 }
-export declare function CategoryGrid({ categories, onCategoryClick, emptyLabel, className, }: CategoryGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel, className, }: CategoryGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Div, Grid, Text } from "../../../ui";
+import { ArrowRight } from "lucide-react";
+import { Div, Span, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 export function CategoryCard({ category, href, onClick, className = "", }) {
-    const cardClass = `group relative overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md ${onClick || href ? "cursor-pointer" : ""} ${className}`;
-    const inner = (_jsxs(_Fragment, { children: [category.display?.coverImage ? (_jsx(Div, { className: "aspect-video w-full overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: _jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${category.display.coverImage})` } }) })) : (_jsx(Div, { className: "aspect-video w-full bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700" })), _jsxs(Div, { className: "p-4", children: [_jsx(Text, { className: `font-semibold ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-900 dark:text-white`, children: category.name }), category.description && (_jsx(Text, { className: `mt-1 text-sm ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400`, children: category.description })), category.metrics && (_jsxs(Text, { className: "mt-2 text-xs text-neutral-400 dark:text-zinc-500", children: [category.metrics.productCount.toLocaleString(), " items"] }))] })] }));
+    const productCount = category.metrics?.productCount ?? category.productCount ?? 0;
+    const inner = (_jsxs(Div, { className: "flex h-full flex-col", children: [_jsxs(Div, { className: "relative aspect-[4/3] w-full overflow-hidden bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700 flex-shrink-0", children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${category.display.coverImage})` } })) : category.display?.color ? (_jsx(Div, { className: "h-full w-full opacity-80", style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center text-4xl", children: category.display.icon })), category.isFeatured && (_jsx(Span, { className: "absolute left-2 top-2 rounded-full bg-amber-400 p-1 text-xs leading-none", children: "\u2605" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col p-3.5", children: [_jsx(Text, { className: `font-semibold text-sm leading-snug ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-900 dark:text-white`, children: category.name }), category.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400 flex-1`, children: category.description })), _jsxs(Div, { className: "mt-2 flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { className: "inline-flex items-center gap-1 rounded-md border border-zinc-200 dark:border-zinc-700 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+    const cardClass = `group relative flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));
     }
@@ -12,9 +14,9 @@ export function CategoryCard({ category, href, onClick, className = "", }) {
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(category)
             : undefined, onClick: onClick ? () => onClick(category) : undefined, className: cardClass, children: inner }));
 }
-export function CategoryGrid({ categories, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
+export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
     if (categories.length === 0) {
         return (_jsx(Text, { className: "py-12 text-center text-sm text-neutral-500 dark:text-zinc-500", children: emptyLabel }));
     }
-    return (_jsx(Grid, { cols: "categoryCards", className: className, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, onClick: onCategoryClick }, cat.id))) }));
+    return (_jsx("div", { className: `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
 }

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

@@ -1,29 +1,40 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, LayoutGrid, List, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Div, Grid, Pagination, SlottedListingView, SortDropdown, Input, Stack, Text, } from "../../../ui";
+import { Pagination, SortDropdown } from "../../../ui";
 import { ROUTES } from "../../../next";
-import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+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, }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "card");
     const params = {
         q: table.get("q") || undefined,
         categorySlug,
         condition: table.get("condition") || undefined,
+        brand: table.get("brand") || undefined,
         minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
         maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
-        sort: table.get("sort") || undefined,
+        sort: table.get("sort") || "-createdAt",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
+        isAuction: false,
     };
     const { products, total, totalPages, page, isLoading } = useProducts(params, { initialData });
-    return (_jsx(Div, { className: "min-h-[200px]", 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 in category...", 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" },
-                    { value: "-views", label: "Most Viewed" },
-                ] })), 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 in this category yet" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "Check back soon or browse other categories." })] })) : (_jsx(Grid, { cols: "productCards", gap: "md", children: products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug ?? p.id)) }, p.id))) })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }));
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    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" }) })] })] }))] }));
 }

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

@@ -24,3 +24,5 @@ export { getCategoryTableColumns } from "./CategoryTableColumns";
 export type { CategoryTableColumnsLabels } from "./CategoryTableColumns";
 export { CategoriesIndexListing } from "./CategoriesIndexListing";
 export type { CategoriesIndexListingProps } from "./CategoriesIndexListing";
+export { CategoryDetailTabs } from "./CategoryDetailTabs";
+export type { CategoryDetailTabsProps } from "./CategoryDetailTabs";

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

@@ -12,3 +12,4 @@ export { CategoryForm } from "./CategoryForm";
 export { CategorySelectorCreate } from "./CategorySelectorCreate";
 export { getCategoryTableColumns } from "./CategoryTableColumns";
 export { CategoriesIndexListing } from "./CategoriesIndexListing";
+export { CategoryDetailTabs } from "./CategoryDetailTabs";

package/dist/features/categories/hooks/useCategories.d.ts

@@ -9,6 +9,26 @@ export declare function useCategoriesList(opts?: UseCategoriesListOptions): {
     isLoading: boolean;
     error: Error | null;
 };
+export interface CategoriesFilteredParams {
+    q?: string;
+    isFeatured?: boolean;
+    isBrand?: boolean;
+    rootOnly?: boolean;
+    tier?: number;
+    minProductCount?: number;
+    maxProductCount?: number;
+    sort?: string;
+    page?: number;
+    pageSize?: number;
+}
+/** API-driven for structured filters; text search + pagination done in hook (Firestore substring limitation). */
+export declare function useCategoriesFiltered(params?: CategoriesFilteredParams): {
+    categories: CategoryItem[];
+    total: number;
+    totalPages: number;
+    isLoading: boolean;
+    error: Error | null;
+};
 interface UseCategoryDetailOptions {
     initialCategory?: CategoryItem;
     initialChildren?: CategoryItem[];

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

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -7,7 +8,7 @@ export function useCategoriesList(opts) {
         queryFn: () => apiClient.get(CATEGORY_ENDPOINTS.FLAT),
         initialData: opts?.initialData,
         enabled: opts?.enabled,
-        staleTime: 5 * 60 * 1000, // 5 min — categories change infrequently
+        staleTime: 5 * 60 * 1000,
     });
     return {
         categories: query.data ?? [],
@@ -16,6 +17,54 @@ export function useCategoriesList(opts) {
         error: query.error,
     };
 }
+/** API-driven for structured filters; text search + pagination done in hook (Firestore substring limitation). */
+export function useCategoriesFiltered(params = {}) {
+    const sp = new URLSearchParams();
+    sp.set("flat", "true");
+    if (params.isFeatured)
+        sp.set("featured", "true");
+    if (params.isBrand)
+        sp.set("isBrand", "true");
+    if (params.rootOnly)
+        sp.set("tier", "0");
+    else if (params.tier !== undefined)
+        sp.set("tier", String(params.tier));
+    const qs = sp.toString();
+    const query = useQuery({
+        queryKey: ["categories", "filtered", qs],
+        queryFn: () => apiClient.get(`/api/categories?${qs}`),
+        staleTime: 2 * 60 * 1000,
+    });
+    const { page = 1, pageSize = 24, sort = "name", q = "", minProductCount, maxProductCount } = params;
+    const paginated = useMemo(() => {
+        let items = query.data ?? [];
+        const lq = q.toLowerCase();
+        if (lq)
+            items = items.filter((c) => c.name.toLowerCase().includes(lq) || (c.description ?? "").toLowerCase().includes(lq));
+        if (minProductCount !== undefined)
+            items = items.filter((c) => (c.productCount ?? 0) >= minProductCount);
+        if (maxProductCount !== undefined)
+            items = items.filter((c) => (c.productCount ?? 0) <= maxProductCount);
+        items = [...items].sort((a, b) => {
+            if (sort === "-productCount")
+                return (b.productCount ?? 0) - (a.productCount ?? 0);
+            if (sort === "-name")
+                return b.name.localeCompare(a.name);
+            return a.name.localeCompare(b.name);
+        });
+        const total = items.length;
+        const totalPages = Math.max(1, Math.ceil(total / pageSize));
+        const slice = items.slice((page - 1) * pageSize, page * pageSize);
+        return { items: slice, total, totalPages };
+    }, [query.data, q, sort, page, pageSize, minProductCount, maxProductCount]);
+    return {
+        categories: paginated.items,
+        total: paginated.total,
+        totalPages: paginated.totalPages,
+        isLoading: query.isLoading,
+        error: query.error,
+    };
+}
 export function useCategoryDetail(slug, opts) {
     const categoryEndpoint = opts?.categoryEndpoint ?? CATEGORY_ENDPOINTS.BY_SLUG(encodeURIComponent(slug));
     const categoryQuery = useQuery({

package/dist/features/categories/hooks/useCategoryTree.d.ts

@@ -0,0 +1,17 @@
+import type { CategoryItem } from "../types";
+/**
+ * Returns all categories flattened in DFS tree order:
+ * parent → its children → their children, etc.
+ * Suitable for use as filter facet options.
+ */
+export declare function useCategoryTree(opts?: {
+    enabled?: boolean;
+}): {
+    categories: CategoryItem[];
+    isLoading: boolean;
+};
+/** Convert category tree to FacetOption[] with indentation prefix for tier > 0. */
+export declare function categoriesToFacetOptions(categories: CategoryItem[]): {
+    value: string;
+    label: string;
+}[];

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

@@ -0,0 +1,65 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints";
+/**
+ * Returns all categories flattened in DFS tree order:
+ * parent → its children → their children, etc.
+ * Suitable for use as filter facet options.
+ */
+export function useCategoryTree(opts) {
+    const { data, isLoading } = useQuery({
+        queryKey: ["categories", "tree"],
+        queryFn: async () => {
+            const res = await apiClient.get(`${CATEGORY_ENDPOINTS.LIST}?pageSize=300&sort=tier,order,name`);
+            const items = Array.isArray(res)
+                ? res
+                : res.items ?? res.data ?? [];
+            return flattenTree(items);
+        },
+        enabled: opts?.enabled ?? true,
+        staleTime: 5 * 60 * 1000, // 5 min
+    });
+    return {
+        categories: data ?? [],
+        isLoading,
+    };
+}
+/** Build a flat DFS-ordered list from a flat array with parentIds. */
+function flattenTree(items) {
+    // Build adjacency map
+    const byId = new Map();
+    const children = new Map();
+    for (const item of items) {
+        byId.set(item.id, item);
+        const parentId = item.parentIds?.[item.parentIds.length - 1] ?? null;
+        if (!children.has(parentId))
+            children.set(parentId, []);
+        children.get(parentId).push(item);
+    }
+    // Sort each level by order then name
+    const sortLevel = (nodes) => nodes.sort((a, b) => {
+        if (a.order != null && b.order != null)
+            return a.order - b.order;
+        return a.name.localeCompare(b.name);
+    });
+    const result = [];
+    function dfs(parentId) {
+        const nodes = children.get(parentId) ?? [];
+        for (const node of sortLevel([...nodes])) {
+            result.push(node);
+            dfs(node.id);
+        }
+    }
+    dfs(null);
+    return result;
+}
+/** Convert category tree to FacetOption[] with indentation prefix for tier > 0. */
+export function categoriesToFacetOptions(categories) {
+    return categories.map((cat) => ({
+        value: cat.slug,
+        label: (cat.tier ?? 0) === 0
+            ? cat.name
+            : `${"  ".repeat(cat.tier ?? 1)}↳ ${cat.name}`,
+    }));
+}

package/dist/features/events/components/AdminEventEditorView.d.ts

@@ -0,0 +1,6 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminEventEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    eventId?: string;
+    onSaved?: (id: string) => void;
+}
+export declare function AdminEventEditorView({ eventId, onSaved, ...rest }: AdminEventEditorViewProps): import("react/jsx-runtime").JSX.Element;