@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useCategoriesList } 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";
+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);
+    };
+    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 }) }) }));
+}

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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() {
+    const result = await categoriesRepository
+        .list({ page: 1, pageSize: 200, sorts: "name" })
+        .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/CategoriesListView.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Container, Div, Heading, Text } from "../../../ui";
+import { Container, Div, Heading, Input, SlottedListingView, Text, } from "../../../ui";
 import { CategoryFilters } from "./CategoryFilters";
 import { CategorySortSelect } from "./CategorySortSelect";
 export function CategoriesListView({ labels = {}, table, filterVariant = "public", sortValue, onSortChange, renderSearch, renderSort, renderFilters, renderCategories, renderPagination, items = [], total = 0, isLoading = false, className = "", }) {
@@ -22,6 +22,6 @@ export function CategoriesListView({ labels = {}, table, filterVariant = "public
         return items.filter((c) => (c.name ?? "").toLowerCase().includes(q) ||
             (c.description ?? "").toLowerCase().includes(q));
     }, [items, search]);
-    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Container, { size: "full", className: "py-8", children: [(labels.title || labels.subtitle) && (_jsxs(Div, { className: "mb-6", children: [labels.title && (_jsx(Heading, { level: 1, className: "text-2xl font-bold", children: labels.title })), labels.subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", children: labels.subtitle }))] })), renderSearch?.(search, setSearch), renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters?.() ??
-                    (table ? (_jsx(CategoryFilters, { table: table, variant: filterVariant })) : null), renderCategories(filtered, isLoading), renderPagination?.(total)] }) }));
+    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsx(Container, { size: "full", className: "py-8", children: _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderHeader: () => labels.title || labels.subtitle ? (_jsxs(Div, { className: "mb-2", children: [labels.title ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold", children: labels.title })) : null, labels.subtitle ? (_jsx(Text, { variant: "secondary", className: "mt-1", children: labels.subtitle })) : null] })) : null, renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search categories", className: "max-w-sm" })), renderSort: () => renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters: () => renderFilters?.() ??
+                    (table ? _jsx(CategoryFilters, { table: table, variant: filterVariant }) : null), renderTable: () => renderCategories(filtered, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }) }) }));
 }

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

@@ -0,0 +1,4 @@
+export interface CategoryDetailPageViewProps {
+    slug: string;
+}
+export declare function CategoryDetailPageView({ slug }: CategoryDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, 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";
+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}`,
+            sorts: "-createdAt",
+            page: 1,
+            pageSize: 24,
+        })
+            .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 })] }) })] }));
+}

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";

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

@@ -1,10 +1,10 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormGroup } from "../../../ui";
-import { Label, Checkbox } from "../../../ui";
+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";
 const DEFAULT_LABELS = {
     name: "Name",
     slug: "Slug",
@@ -28,10 +28,10 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
         const slug = value.toLowerCase().replace(/[^a-z0-9]+/g, "-");
         update({ name: value, slug });
     };
-    return (_jsxs("div", { className: stackClassName, 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 })] }), _jsx(FormField, { name: "description", label: L.description, type: "textarea", rows: 3, value: category.description || "", onChange: (value) => update({ description: value }), disabled: isReadonly }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
+    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",
                     name: category.name || "category",
-                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs("div", { children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: L.categoryImage }), _jsx("div", { className: "relative h-32 w-40 overflow-hidden rounded", children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
+                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs("div", { "data-section": "categoryform-div-264", children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: L.categoryImage }), _jsx("div", { className: "relative h-32 w-40 overflow-hidden rounded", "data-section": "categoryform-div-265", children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
                     { value: "", label: L.noneRoot },
                     ...flattenCategories(allCategories).map((cat) => ({
                         value: cat.id,

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

@@ -1,10 +1,11 @@
 import type { CategoryItem } from "../types";
 export interface CategoryCardProps {
     category: CategoryItem;
+    href?: string;
     onClick?: (category: CategoryItem) => void;
     className?: string;
 }
-export declare function CategoryCard({ category, onClick, className, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryCard({ category, href, onClick, className, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
 export interface CategoryGridProps {
     categories: CategoryItem[];
     onCategoryClick?: (category: CategoryItem) => void;

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

@@ -1,10 +1,16 @@
-"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 Link from "next/link";
 import { Div, Grid, Text } from "../../../ui";
-export function CategoryCard({ category, onClick, className = "", }) {
-    return (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+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"] }))] })] }));
+    if (href) {
+        return (_jsx(Link, { href: href, className: cardClass, children: inner }));
+    }
+    return (_jsx(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(category)
-            : undefined, onClick: onClick ? () => onClick(category) : undefined, className: `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 ? "cursor-pointer" : ""} ${className}`, 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 text-neutral-900 dark:text-white line-clamp-2", children: category.name }), category.description && (_jsx(Text, { className: "mt-1 text-sm text-neutral-500 dark:text-zinc-400 line-clamp-2", 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"] }))] })] }));
+            : undefined, onClick: onClick ? () => onClick(category) : undefined, className: cardClass, children: inner }));
 }
 export function CategoryGrid({ categories, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
     if (categories.length === 0) {

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

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

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Heading, Row, Text } from "../../../ui";
+import { Div, Heading, Input, SlottedListingView, Text, } from "../../../ui";
 import { CategoryFilters } from "./CategoryFilters";
 import { CategorySortSelect } from "./CategorySortSelect";
 export function CategoryProductsView({ labels = {}, table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
@@ -16,6 +16,6 @@ export function CategoryProductsView({ labels = {}, table, filterVariant = "publ
         }
         table?.set("sorts", next);
     };
-    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Div, { className: "py-6 px-4 max-w-screen-xl mx-auto space-y-4", children: [category && renderBreadcrumbs?.(category), category && (_jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold", children: category.name }), category.description && (_jsx(Text, { className: "text-neutral-500 mt-1", children: category.description }))] })), childCategories.length > 0 && renderChildCategories?.(childCategories), _jsxs(Row, { wrap: true, gap: "3", children: [renderSearch?.(search, setSearch), renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters?.() ??
-                            (table ? (_jsx(CategoryFilters, { table: table, variant: filterVariant })) : null), renderViewToggle?.(viewMode, setViewMode)] }), renderActiveFilters?.(), renderProducts(isLoading), renderPagination?.(total)] }) }));
+    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Div, { className: "py-6 px-4 max-w-screen-xl mx-auto space-y-4", children: [category && renderBreadcrumbs?.(category), category && (_jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold", children: category.name }), category.description && (_jsx(Text, { className: "text-neutral-500 mt-1", children: category.description }))] })), childCategories.length > 0 && renderChildCategories?.(childCategories), _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search in category", className: "max-w-sm" })), renderSort: () => renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters: () => renderFilters?.() ??
+                        (table ? _jsx(CategoryFilters, { table: table, variant: filterVariant }) : null), renderActiveFilters: renderActiveFilters, renderBulkActions: () => renderViewToggle?.(viewMode, setViewMode) ?? null, renderTable: () => renderProducts(isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading })] }) }));
 }

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

@@ -33,7 +33,7 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
             return;
         mutate(draft);
     }, [draft, mutate]);
-    return (_jsxs("div", { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
+    return (_jsxs("div", { className: stackClassName, "data-section": "categoryselectorcreate-div-266", children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
 }
 export function CategorySelectorCreate({ value, onChange, disabled = false, label, labels = {}, stackClassName = "space-y-4", }) {
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -47,7 +47,7 @@ export function CategorySelectorCreate({ value, onChange, disabled = false, labe
         if (newId)
             onChange(newId);
     }, [onChange, refetch]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("div", { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-section": "categoryselectorcreate-div-267", children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex gap-2 items-center", "data-section": "categoryselectorcreate-div-268", children: [_jsx("div", { className: "flex-1", "data-section": "categoryselectorcreate-div-269", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
                                         { value: "", label: L.selectPlaceholder },
                                         ...flat.map((cat) => ({
                                             value: cat.id,

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Row, Select, Span } from "../../../ui";
 import { getCategorySortOptions, } from "./CategoryFilters";

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

@@ -18,13 +18,13 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
             {
                 key: "image",
                 header: "",
-                render: (cat) => (_jsx("div", { className: "relative w-9 h-9 rounded overflow-hidden flex-shrink-0", children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-base", style: { backgroundColor: cat.display?.color ?? "#94a3b8" }, children: cat.display?.icon ?? "🗂️" })) })),
+                render: (cat) => (_jsx("div", { className: "relative w-9 h-9 rounded overflow-hidden flex-shrink-0", "data-section": "categorytablecolumns-div-270", children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-base", style: { backgroundColor: cat.display?.color ?? "#94a3b8" }, "data-section": "categorytablecolumns-div-271", children: cat.display?.icon ?? "🗂️" })) })),
             },
             {
                 key: "name",
                 header: L.colName,
                 sortable: true,
-                render: (cat) => (_jsxs("div", { style: { paddingLeft: `${cat.tier * 20}px` }, children: [cat.name, cat.tier > 0 && (_jsxs(Span, { className: "text-zinc-400 text-xs ml-2", children: ["(Tier ", cat.tier, ")"] }))] })),
+                render: (cat) => (_jsxs("div", { style: { paddingLeft: `${cat.tier * 20}px` }, "data-section": "categorytablecolumns-div-272", children: [cat.name, cat.tier > 0 && (_jsxs(Span, { className: "text-zinc-400 text-xs ml-2", children: ["(Tier ", cat.tier, ")"] }))] })),
             },
             {
                 key: "slug",
@@ -43,7 +43,7 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
                 render: (cat) => (_jsx(StatusBadge, { status: cat.isActive ? "active" : "inactive", label: cat.isActive ? L.statusActive : L.statusInactive })),
             },
         ],
-        actions: (cat) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", onClick: (e) => {
+        actions: (cat) => (_jsxs("div", { className: "flex gap-2", "data-section": "categorytablecolumns-div-273", children: [_jsx(Button, { variant: "ghost", onClick: (e) => {
                         e.stopPropagation();
                         onEdit(cat);
                     }, className: "text-primary hover:text-primary/80", children: L.actionEdit }), _jsx(Button, { variant: "ghost", onClick: (e) => {

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

@@ -18,7 +18,7 @@ function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0,
                     if (hasChildren)
                         setExpanded((p) => !p);
                     onSelect?.(item);
-                }, className: `flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition select-none
+                }, className: `flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition select-none
           ${isActive ? "bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, style: { paddingLeft: `${8 + indent}px` }, children: [hasChildren && (_jsx(Span, { "aria-hidden": "true", className: `text-xs text-neutral-400 dark:text-zinc-500 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`, children: "\u25B6" })), !hasChildren && _jsx(Span, { className: "w-3" }), item.display?.icon && (_jsx(Span, { className: "flex-shrink-0 text-base", "aria-hidden": "true", children: item.display.icon })), _jsx(Text, { className: "flex-1 truncate", children: item.name }), item.metrics && (_jsx(Span, { className: "ml-auto flex-shrink-0 text-xs text-neutral-400 dark:text-zinc-500 tabular-nums", children: item.metrics.productCount }))] }), hasChildren && expanded && (_jsx(Div, { role: "group", children: children.map((child) => (_jsx(CategoryTreeNode, { item: child, activeId: activeId, onSelect: onSelect, depth: depth + 1 }, child.id))) }))] }));
 }
 /**

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

@@ -1,5 +1,6 @@
 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 text-neutral-500 line-clamp-2", 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 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 }))] })] }));
 }

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

@@ -14,9 +14,13 @@ export { CategorySortSelect } from "./CategorySortSelect";
 export type { CategorySortSelectProps } from "./CategorySortSelect";
 export { CategoryProductsView } from "./CategoryProductsView";
 export type { CategoryProductsViewProps } from "./CategoryProductsView";
+export { CategoryProductsListing } from "./CategoryProductsListing";
+export type { CategoryProductsListingProps } from "./CategoryProductsListing";
 export { CategoryForm } from "./CategoryForm";
 export type { CategoryFormProps, CategoryFormLabels } from "./CategoryForm";
 export { CategorySelectorCreate } from "./CategorySelectorCreate";
 export type { CategorySelectorCreateProps, CategorySelectorCreateLabels, } from "./CategorySelectorCreate";
 export { getCategoryTableColumns } from "./CategoryTableColumns";
 export type { CategoryTableColumnsLabels } from "./CategoryTableColumns";
+export { CategoriesIndexListing } from "./CategoriesIndexListing";
+export type { CategoriesIndexListingProps } from "./CategoriesIndexListing";

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

@@ -7,6 +7,8 @@ export { CategoriesListView } from "./CategoriesListView";
 export { CategoryFilters, CATEGORY_FILTER_KEYS, CATEGORY_ADMIN_SORT_OPTIONS, CATEGORY_SELLER_SORT_OPTIONS, CATEGORY_PUBLIC_SORT_OPTIONS, getCategoryFilterKeys, getCategorySortOptions, } from "./CategoryFilters";
 export { CategorySortSelect } from "./CategorySortSelect";
 export { CategoryProductsView } from "./CategoryProductsView";
+export { CategoryProductsListing } from "./CategoryProductsListing";
 export { CategoryForm } from "./CategoryForm";
 export { CategorySelectorCreate } from "./CategorySelectorCreate";
 export { getCategoryTableColumns } from "./CategoryTableColumns";
+export { CategoriesIndexListing } from "./CategoriesIndexListing";

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

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

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

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

package/dist/features/categories/repository/categories.repository.d.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import { BaseRepository, type FirebaseSieveFields, type FirebaseSieveResult, type SieveModel } from "../../../providers/db-firebase";
 import { type CategoryCreateInput, type CategoryDocument, type CategoryMoveInput, type CategoryTreeNode } from "../schemas";
 export declare class CategoriesRepository extends BaseRepository<CategoryDocument> {

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

@@ -1,4 +1,3 @@
-import "server-only";
 import { increment, arrayUnion, arrayRemove, } from "../../../contracts/field-ops";
 import { DatabaseError } from "../../../errors";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";

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

@@ -23,12 +23,12 @@ export declare const categoryDisplaySchema: z.ZodObject<{
     showInMenu: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     icon?: string | undefined;
-    showInMenu?: boolean | undefined;
     coverImage?: string | undefined;
+    showInMenu?: boolean | undefined;
 }, {
     icon?: string | undefined;
-    showInMenu?: boolean | undefined;
     coverImage?: string | undefined;
+    showInMenu?: boolean | undefined;
 }>;
 export declare const categoryMetricsSchema: z.ZodObject<{
     productCount: z.ZodNumber;
@@ -104,81 +104,81 @@ export declare const categoryItemSchema: z.ZodObject<{
         showInMenu: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         icon?: string | undefined;
-        showInMenu?: boolean | undefined;
         coverImage?: string | undefined;
+        showInMenu?: boolean | undefined;
     }, {
         icon?: string | undefined;
-        showInMenu?: boolean | undefined;
         coverImage?: string | undefined;
+        showInMenu?: boolean | undefined;
     }>>;
     createdAt: z.ZodOptional<z.ZodString>;
     updatedAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     id: string;
     name: string;
-    slug: string;
     tier: number;
+    slug: string;
+    path?: string | undefined;
+    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    display?: {
+        icon?: string | undefined;
+        coverImage?: string | undefined;
+        showInMenu?: boolean | undefined;
+    } | undefined;
+    order?: number | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    path?: string | undefined;
-    type?: "brand" | "category" | "collection" | "concern" | undefined;
+    description?: string | undefined;
     seo?: {
         title?: string | undefined;
         description?: string | undefined;
         keywords?: string[] | undefined;
         ogImage?: string | undefined;
     } | undefined;
-    order?: number | undefined;
-    display?: {
-        icon?: string | undefined;
-        showInMenu?: boolean | undefined;
-        coverImage?: string | undefined;
-    } | undefined;
-    description?: string | undefined;
-    rootId?: string | undefined;
-    parentIds?: string[] | undefined;
-    isLeaf?: boolean | undefined;
     isFeatured?: boolean | undefined;
-    featuredPriority?: number | undefined;
-    childrenIds?: string[] | undefined;
+    isLeaf?: boolean | undefined;
     metrics?: {
         productCount: number;
         totalItemCount: number;
         lastUpdated?: string | undefined;
     } | undefined;
+    rootId?: string | undefined;
+    parentIds?: string[] | undefined;
+    featuredPriority?: number | undefined;
+    childrenIds?: string[] | undefined;
 }, {
     id: string;
     name: string;
-    slug: string;
     tier: number;
+    slug: string;
+    path?: string | undefined;
+    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    display?: {
+        icon?: string | undefined;
+        coverImage?: string | undefined;
+        showInMenu?: boolean | undefined;
+    } | undefined;
+    order?: number | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    path?: string | undefined;
-    type?: "brand" | "category" | "collection" | "concern" | undefined;
+    description?: string | undefined;
     seo?: {
         title?: string | undefined;
         description?: string | undefined;
         keywords?: string[] | undefined;
         ogImage?: string | undefined;
     } | undefined;
-    order?: number | undefined;
-    display?: {
-        icon?: string | undefined;
-        showInMenu?: boolean | undefined;
-        coverImage?: string | undefined;
-    } | undefined;
-    description?: string | undefined;
-    rootId?: string | undefined;
-    parentIds?: string[] | undefined;
-    isLeaf?: boolean | undefined;
     isFeatured?: boolean | undefined;
-    featuredPriority?: number | undefined;
-    childrenIds?: string[] | undefined;
+    isLeaf?: boolean | undefined;
     metrics?: {
         productCount: number;
         totalItemCount: number;
         lastUpdated?: string | undefined;
     } | undefined;
+    rootId?: string | undefined;
+    parentIds?: string[] | undefined;
+    featuredPriority?: number | undefined;
+    childrenIds?: string[] | undefined;
 }>;
 export declare const categoryListParamsSchema: z.ZodObject<{
     type: z.ZodOptional<z.ZodEnum<["category", "concern", "collection", "brand"]>>;
@@ -189,18 +189,18 @@ export declare const categoryListParamsSchema: z.ZodObject<{
     page: z.ZodOptional<z.ZodNumber>;
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    perPage?: number | undefined;
-    type?: "brand" | "category" | "collection" | "concern" | undefined;
-    page?: number | undefined;
     q?: string | undefined;
+    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    page?: number | undefined;
+    perPage?: number | undefined;
     tier?: number | undefined;
     parentId?: string | undefined;
     featured?: boolean | undefined;
 }, {
-    perPage?: number | undefined;
-    type?: "brand" | "category" | "collection" | "concern" | undefined;
-    page?: number | undefined;
     q?: string | undefined;
+    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    page?: number | undefined;
+    perPage?: number | undefined;
     tier?: number | undefined;
     parentId?: string | undefined;
     featured?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 export * from "./firestore";
 import { z } from "zod";
-// ─── Sub-schemas ──────────────────────────────────────────────────────────────
+// --- Sub-schemas --------------------------------------------------------------
 export const categoryTypeSchema = z.enum([
     "category",
     "concern",
@@ -23,7 +23,7 @@ export const categoryMetricsSchema = z.object({
     totalItemCount: z.number(),
     lastUpdated: z.string().optional(),
 });
-// ─── Base item schema ─────────────────────────────────────────────────────────
+// --- Base item schema ---------------------------------------------------------
 /**
  * Base Zod schema for a category item.
  * Apps can extend this to add their own fields:

package/dist/features/categories/server.d.ts

@@ -3,7 +3,6 @@
  *
  * Server-only entry point — repositories and API route handlers.
  */
-import "server-only";
 export * from "./actions";
 export { CategoriesRepository, categoriesRepository, } from "./repository/categories.repository";
 export { GET as categoriesGET, GET, POST } from "./api/route";

package/dist/features/categories/server.js

@@ -3,7 +3,6 @@
  *
  * Server-only entry point — repositories and API route handlers.
  */
-import "server-only";
 export * from "./actions";
 export { CategoriesRepository, categoriesRepository, } from "./repository/categories.repository";
 export { GET as categoriesGET, GET, POST } from "./api/route";

package/dist/features/checkout/actions/checkout-actions.d.ts

@@ -1,4 +1,10 @@
-import "server-only";
+/**
+ * Checkout Domain Actions (appkit)
+ *
+ * OTP-based checkout consent flow — delegates entirely to already-appkit-owned
+ * helpers (consent-otp, auth repository, address repository).
+ * Auth, rate-limiting, and Next.js specifics are handled by the consumer.
+ */
 import { userRepository } from "../../auth/repository/user.repository";
 /** Returns masked email so the UI can confirm which inbox to check. */
 export declare function sendCheckoutConsentOtp(userId: string, userEmail: string, addressId: string): Promise<{

package/dist/features/checkout/actions/checkout-actions.js

@@ -1,4 +1,3 @@
-import "server-only";
 /**
  * Checkout Domain Actions (appkit)
  *