@mohasinac/appkit 4.8.0 → 4.9.0

package/dist/features/admin/components/AdminViewCards.js

@@ -18,7 +18,7 @@ const STATUS_TONE_CLASSES = {
 };
 function RowAvatar({ image, alt, icon, size = "9" }) {
     const dims = size === "12" ? "h-12 w-12" : "h-9 w-9";
-    return (_jsx(Div, { className: `relative ${dims} shrink-0 overflow-hidden`, rounded: "full", children: _jsx(MediaImage, { src: image, alt: alt, size: "avatar", fallback: icon }) }));
+    return (_jsx(Div, { className: `relative ${dims} shrink-0`, overflow: "hidden", rounded: "full", children: _jsx(MediaImage, { src: image, alt: alt, size: "avatar", fallback: icon }) }));
 }
 const FLAG_BADGES = [
     { key: "featured", label: "Featured", color: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning" },

package/dist/features/admin/components/DataTable.js

@@ -20,7 +20,7 @@ function buildDefaultColumns(resourceIcon) {
         {
             key: "primary",
             header: "Name",
-            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Div, { className: "relative h-8 w-8 shrink-0 overflow-hidden", rounded: "full", children: _jsx(MediaImage, { src: typeof row.image === "string" ? row.image : undefined, alt: String(row.primary ?? ""), size: "avatar", fallback: resourceIcon }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", color: "primary", className: "truncate", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: String(row.secondary) }) : null] })] })),
+            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Div, { className: "relative h-8 w-8 shrink-0", overflow: "hidden", rounded: "full", children: _jsx(MediaImage, { src: typeof row.image === "string" ? row.image : undefined, alt: String(row.primary ?? ""), size: "avatar", fallback: resourceIcon }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", color: "primary", className: "truncate", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: String(row.secondary) }) : null] })] })),
         },
         {
             key: "status",

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

@@ -16,53 +16,59 @@ export async function CategoryDetailPageView({ slug }) {
     const category = await categoriesRepository
         .getCategoryBySlug(slug)
         .catch(() => undefined);
-    // Use categorySlugs@=<id> (array-contains) — products store category FK in
-    // the categorySlugs[] array, not the legacy `category` string field.
-    const catFilter = category?.id ? sieveFilter("categorySlugs", SIEVE_OP.CONTAINS, category.id) : null;
+    // Roll up descendant categories so a parent category page shows products
+    // filed under any of its children too, not just products tagged with the
+    // parent's own id — parentIds stores the full ancestor chain, so a single
+    // array-contains query already returns the whole subtree (see
+    // categoriesRepository.getDescendantIds).
+    const descendantIds = category?.id
+        ? await categoriesRepository.getDescendantIds(category.id).catch(() => [])
+        : [];
+    const categoriesIn = category?.id ? [category.id, ...descendantIds] : null;
     const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories] = await Promise.all([
-        catFilter
+        categoriesIn
             ? productRepository
                 .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
                 sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 24,
-            })
+            }, { categoriesIn })
                 .catch(() => null)
             : Promise.resolve(null),
-        catFilter
+        categoriesIn
             ? productRepository
                 .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "auction")),
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "auction")),
                 sorts: sortBy("auctionEndDate", "ASC"),
                 page: 1,
                 pageSize: 1,
-            })
+            }, { categoriesIn })
                 .catch(() => null)
             : Promise.resolve(null),
-        catFilter
+        categoriesIn
             ? productRepository
                 .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "pre-order")),
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "pre-order")),
                 sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 1,
-            })
+            }, { categoriesIn })
                 .catch(() => null)
             : Promise.resolve(null),
-        catFilter
+        categoriesIn
             ? productRepository
                 .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw")),
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw")),
                 sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 1,
-            })
+            }, { categoriesIn })
                 .catch(() => null)
             : Promise.resolve(null),
         // SB-UNI-D — bundles fetched from the categories collection. We pull
         // all active bundle rows; the carousel filters by category affinity.
-        catFilter
+        categoriesIn
             ? categoriesRepository
                 .listByType("bundle", { activeOnly: true, limit: 50 })
                 .catch(() => [])
@@ -112,8 +118,8 @@ export async function CategoryDetailPageView({ slug }) {
         averageRating: s.stats?.averageRating,
         createdAt: s.createdAt,
     }));
-    const productCount = productsResult?.total ?? category?.metrics?.productCount ?? 0;
-    const auctionCount = auctionsCountResult?.total ?? category?.metrics?.auctionCount ?? 0;
+    const productCount = productsResult?.total ?? category?.metrics?.totalProductCount ?? category?.metrics?.productCount ?? 0;
+    const auctionCount = auctionsCountResult?.total ?? category?.metrics?.totalAuctionCount ?? category?.metrics?.auctionCount ?? 0;
     const preOrderCount = preOrdersCountResult?.total ?? 0;
     const prizeDrawCount = prizeDrawsCountResult?.total ?? 0;
     const bundleCount = bundlesResult?.length ?? 0;

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

@@ -12,7 +12,11 @@ const __O = {
 };
 const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-warning-surface p-[var(--appkit-space-1)] leading-none";
 export function CategoryCard({ category, href, onClick, className = "", }) {
-    const productCount = category.metrics?.productCount ?? category.productCount ?? 0;
+    // totalProductCount is the rollup (self + all descendant categories),
+    // maintained incrementally by onProductWrite — prefer it over the
+    // own-node-only productCount so a parent category's card shows the same
+    // "N products" a visitor actually sees once they open the page.
+    const productCount = category.metrics?.totalProductCount ?? category.metrics?.productCount ?? category.productCount ?? 0;
     const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [category.display?.coverImage ? (_jsx(MediaImage, { src: category.display.coverImage, alt: category.name, size: "card", className: "transition-transform duration-300 group-hover:scale-105" })) : category.display?.color ? (_jsx(DynamicBgDiv, { color: category.display.color, className: "h-full w-full opacity-80" })) : null, category.display?.icon && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-[var(--appkit-color-text)] dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", 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-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {

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

@@ -12,6 +12,14 @@ export declare class CategoriesRepository extends BaseRepository<CategoryDocumen
     getCategoriesByTier(tier: number): Promise<CategoryDocument[]>;
     getCategoriesByRootId(rootId: string): Promise<CategoryDocument[]>;
     getChildren(parentId: string): Promise<CategoryDocument[]>;
+    /**
+     * IDs of every descendant category at any depth (not just direct
+     * children) — `parentIds` stores the full ancestor chain, so a single
+     * array-contains query on that field already returns the whole subtree
+     * with no recursion needed. Used to expand a parent category's product
+     * listing/count to include products filed under any of its children.
+     */
+    getDescendantIds(categoryId: string): Promise<string[]>;
     getFeaturedCategories(): Promise<CategoryDocument[]>;
     getBrandCategories(limit?: number): Promise<CategoryDocument[]>;
     updateMetrics(categoryId: string, productDelta: number, auctionDelta: number, productId?: string): Promise<void>;

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

@@ -161,6 +161,27 @@ export class CategoriesRepository extends BaseRepository {
             throw new DatabaseError(`Failed to retrieve children categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
+    /**
+     * IDs of every descendant category at any depth (not just direct
+     * children) — `parentIds` stores the full ancestor chain, so a single
+     * array-contains query on that field already returns the whole subtree
+     * with no recursion needed. Used to expand a parent category's product
+     * listing/count to include products filed under any of its children.
+     */
+    async getDescendantIds(categoryId) {
+        try {
+            const snapshot = await this.db
+                .collection(this.collection)
+                .where("parentIds", "array-contains", categoryId)
+                .limit(100)
+                .get();
+            return snapshot.docs.map((doc) => doc.id);
+        }
+        catch (error) {
+            void normalizeError(error);
+            throw new DatabaseError(`Failed to retrieve descendant categories: ${error instanceof Error ? error.message : "Unknown error"}`);
+        }
+    }
     async getFeaturedCategories() {
         try {
             const snapshot = await this.db

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

@@ -14,6 +14,10 @@ export interface CategoryDisplay {
 export interface CategoryMetrics {
     productCount: number;
     auctionCount?: number;
+    /** Rollup — this category's own productCount plus every descendant category's, maintained incrementally by onProductWrite. */
+    totalProductCount?: number;
+    /** Rollup — same as totalProductCount but for auctions. */
+    totalAuctionCount?: number;
     totalItemCount: number;
     lastUpdated?: string;
 }

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -22,7 +22,7 @@ function CategoryChip({ category }) {
     const iconSrc = category.display?.icon;
     const coverImage = category.display?.coverImage;
     const initial = category.name[0]?.toUpperCase() ?? "?";
-    const productCount = category.metrics?.productCount ?? 0;
+    const productCount = category.metrics?.totalProductCount ?? category.metrics?.productCount ?? 0;
     return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, surface: "subtle", children: _jsx(Image, { src: resolveMediaUrl(coverImage), alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { surface: "muted", className: "aspect-video w-full" })), _jsxs(Stack, { className: `flex-1 ${__P.p3} text-left`, children: [_jsx(Row, { textWeight: "bold", textSize: "sm", className: "mb-2 h-9 w-9 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: resolveMediaUrl(iconSrc), alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx(Span, { size: "lg", "aria-hidden": "true", className: "leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", truncate: 2, children: category.name }), _jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto text-primary dark:text-primary-400 pt-[0.75rem]", size: "xs", weight: "medium", children: "Browse category \u2192" })] })] }));
 }
 const CTA_CLASSES = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"