@mohasinac/appkit 4.8.1 → 4.9.1

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/dist/features/products/components/ProductForm.js

@@ -112,7 +112,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     name: product.title || "product",
                     category: (product.categorySlugs?.[0] ?? product.category) || "uncategorized",
                     store: product.storeName || "store",
-                }), onChange: (url) => update({ mainImage: url }), label: t("formMainImage"), helperText: "Recommended: 800x800px (1:1)" })), isReadonly && product.mainImage && (_jsx(FormField, { name: "mainImage", label: t("formMainImage"), type: "text", value: product.mainImage, onChange: () => { }, disabled: true })), !isReadonly && (_jsx(MediaUploadList, { label: t("formGalleryImages"), value: galleryImages, onChange: (fields) => update({ images: fields.map((f) => f.url) }), onUpload: handleGalleryUpload, accept: "image/*,video/*", maxItems: 5, maxSizeMB: 10, helperText: t("formGalleryImagesHelper"), onAbort: onMediaAbort })), !isReadonly && (_jsx(MediaUploadField, { label: t("formVideo"), value: product.video?.url || "", onChange: (url) => update({
+                }), onChange: (url) => update({ mainImage: url }), label: t("formMainImage"), helperText: "Recommended: 800x800px (1:1)" })), isReadonly && product.mainImage && (_jsx(FormField, { name: "mainImage", label: t("formMainImage"), type: "text", value: product.mainImage, onChange: () => { }, disabled: true })), !isReadonly && (_jsx(MediaUploadList, { label: t("formGalleryImages"), value: galleryImages, onChange: (fields) => update({ images: fields.map((f) => f.url) }), onUpload: handleGalleryUpload, accept: "image/*,video/*", maxItems: 5, maxSizeMB: 10, helperText: t("formGalleryImagesHelper"), onAbort: onMediaAbort })), !isReadonly && (_jsx(MediaUploadField, { label: product.listingType === "live" ? `${t("formVideo")} *` : t("formVideo"), value: product.video?.url || "", onChange: (url) => update({
                     video: url
                         ? {
                             url,
@@ -137,7 +137,9 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                             thumbnailUrl: media.thumbnailUrl,
                         },
                     });
-                }, onUpload: handleVideoUpload, accept: "video/*", maxSizeMB: 50, helperText: t("formVideoHelper"), onAbort: onMediaAbort })), _jsx(TagInput, { label: t("formTags"), value: product.tags || [], onChange: (tags) => update({ tags }), disabled: isReadonly, placeholder: t("formTagsPlaceholder") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { label: t("formFeatured"), checked: !!product.featured, onChange: (e) => update({ featured: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formIsPromoted"), checked: !!product.isPromoted, onChange: (e) => update({ isPromoted: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowShipBeforeEmiComplete"), checked: !!product.allowShipBeforeEmiComplete, onChange: (e) => update({ allowShipBeforeEmiComplete: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowOffers"), checked: !!product.allowOffers, onChange: (e) => update({
+                }, onUpload: handleVideoUpload, accept: "video/*", maxSizeMB: 50, helperText: product.listingType === "live"
+                    ? "Required for live listings — buyers must see the actual animal/plant moving before purchase."
+                    : t("formVideoHelper"), onAbort: onMediaAbort })), _jsx(TagInput, { label: t("formTags"), value: product.tags || [], onChange: (tags) => update({ tags }), disabled: isReadonly, placeholder: t("formTagsPlaceholder") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { label: t("formFeatured"), checked: !!product.featured, onChange: (e) => update({ featured: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formIsPromoted"), checked: !!product.isPromoted, onChange: (e) => update({ isPromoted: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowShipBeforeEmiComplete"), checked: !!product.allowShipBeforeEmiComplete, onChange: (e) => update({ allowShipBeforeEmiComplete: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowOffers"), checked: !!product.allowOffers, onChange: (e) => update({
                             allowOffers: e.target.checked,
                             minOfferPercent: e.target.checked ? product.minOfferPercent ?? 50 : undefined,
                         }), disabled: isReadonly })] }), product.allowOffers && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAllowOffersHelp"), children: t("formAllowOffersHelp") }), _jsx(FormField, { name: "minOfferPercent", label: t("formMinOfferPercent"), type: "number", value: String(product.minOfferPercent ?? ""), onChange: (value) => update({ minOfferPercent: Number(value) }), disabled: isReadonly, placeholder: "50" })] })), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionTaxGst") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "gstRate", label: t("formGstRate"), type: "select", 

package/dist/features/tester/seed-data/products-tester-seed-data.js

@@ -379,8 +379,8 @@ export const productsTesterSeedData = [
     withTokens({
         id: "live-tester-sandbox-1",
         slug: "live-tester-sandbox-1",
-        title: "Test Live Item — Watch Me!",
-        description: "Disposable test live-item listing for the tester QA program. Auto-expires in 7 days.",
+        title: "Test Live Item — Golden Retriever Puppy",
+        description: "Disposable test live-item listing for the tester QA program (verifies the mandatory-video rule, gallery video slide, and watermark on a real animal listing). Auto-expires in 7 days.",
         categorySlugs: COLLECTIBLES_CATEGORY_SLUGS,
         categoryNames: COLLECTIBLES_CATEGORY_NAMES,
         brandSlug: "brand-tester-sandbox",
@@ -392,7 +392,16 @@ export const productsTesterSeedData = [
         listingType: "live",
         images: [seedExtMedia("https://picsum.photos/seed/live-image-tester-sandbox-1-20260101/900/900")],
         mainImage: seedExtMedia("https://picsum.photos/seed/live-image-tester-sandbox-1-20260101/900/900"),
-        video: { url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
+        // Real, directly-playable dog video (a raw <video> element, not routed through
+        // /api/media/ext which is image-only — Root Cause #27) — Wikimedia Commons,
+        // CC-BY-SA 4.0, https://commons.wikimedia.org/wiki/File:Slow_motion_of_running_greyhound.webm.
+        // Exercises the mandatory-video-for-live rule + gallery video slide + watermark
+        // on a genuine "animal actually moving" clip instead of a broken YouTube watch-page URL.
+        video: {
+            url: "https://upload.wikimedia.org/wikipedia/commons/4/42/Slow_motion_of_running_greyhound.webm", // audit-seed-external-url-ok: raw <video> src, CC-BY-SA 4.0 (Wikimedia Commons)
+            thumbnailUrl: seedExtMedia("https://picsum.photos/seed/live-video-thumb-tester-sandbox-1-20260101/800/450"),
+            duration: 14,
+        },
         isSold: false,
         stockQuantity: 1,
         availableQuantity: 1,
@@ -401,9 +410,9 @@ export const productsTesterSeedData = [
         isPromoted: false,
         isOnSale: false,
         liveItem: {
-            species: "Test Species",
+            species: "Dog (Golden Retriever)",
             ageMonths: 6,
-            sex: "n/a",
+            sex: "male",
             careInfo: "Disposable test care info for the tester QA program.",
             transport: { method: "courier", handlingFee: 100, insuranceIncluded: true },
             jurisdictionAllowed: ["IN-KA", "IN-MH"],

package/package.json

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