@mohasinac/appkit 4.53.1 → 4.54.0

package/dist/ui/components/HorizontalScroller.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback, } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { CarouselNav } from "./CarouselNav.js";
 const BREAKPOINTS = [
     ["2xl", 1536],
     ["xl", 1280],
@@ -21,12 +22,23 @@ function resolvePerView(perView, containerWidth) {
     }
     return 1;
 }
-export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", arrowStyle = "circle", showScrollbar, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
+export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", arrowStyle = "circle", showScrollbar, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, showNav = false, navAriaLabel, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
     const [colCount, setColCount] = useState(typeof perView === "number" ? perView : 3);
     const [isPaused, setIsPaused] = useState(false);
     const [atStart, setAtStart] = useState(true);
     const [atEnd, setAtEnd] = useState(true);
+    /*
+     * Page position, for the optional `showNav` indicator.
+     *
+     * 🛑 Derived from scroll geometry, never stored as the source of truth: the
+     * rail is a native scroller and a user can drag it to any offset, so an index
+     * this component *decided* would disagree with where the content actually is
+     * the first time someone swipes. One page = one viewport width, matching what
+     * `scrollBy` already moves.
+     */
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageCount, setPageCount] = useState(1);
     const internalRef = useRef(null);
     const containerRef = (externalRef ??
         internalRef);
@@ -91,6 +103,11 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             return;
         // 1px tolerance for sub-pixel rounding
         const maxScroll = el.scrollWidth - el.clientWidth;
+        const width = el.clientWidth;
+        if (width > 0) {
+            setPageCount(Math.max(1, Math.ceil(el.scrollWidth / width)));
+            setPageIndex(Math.round(el.scrollLeft / width));
+        }
         if (maxScroll <= 1) {
             setAtStart(true);
             setAtEnd(true);
@@ -99,6 +116,12 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         setAtStart(el.scrollLeft <= 1);
         setAtEnd(el.scrollLeft >= maxScroll - 1);
     }, [containerRef]);
+    const goToPage = useCallback((page) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.scrollTo({ left: page * el.clientWidth, behavior: "smooth" });
+    }, [containerRef]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === "ArrowRight") {
             e.preventDefault();
@@ -196,6 +219,23 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         updateExtents();
         onScroll?.();
     };
+    /*
+     * The in-flow position indicator.
+     *
+     * 🛑 This is the fix for "no affordance on a phone", and it deliberately does
+     * NOT un-hide the absolute arrows below 640px. Those are `display:none` there
+     * for a documented reason — a 44px circle has nowhere to go over a
+     * single-column card, and `--with-arrows` reserves 2 × 44px of wrapper gutter
+     * to seat them, which on a narrow screen is width taken from the card itself.
+     * An in-flow control needs no gutter and no breakpoint, so the affordance
+     * exists at every width instead of appearing at one.
+     *
+     * No `progressMs`: a rail's autoScroll advances by 0.8 of a viewport rather
+     * than one page, so a fill timed to the interval would not line up with the
+     * segment it sits in. A position cue that is right beats a progress cue that
+     * is approximately right.
+     */
+    const navNode = showNav && pageCount > 1 ? (_jsx(CarouselNav, { count: pageCount, index: pageIndex, onSelect: goToPage, onPrev: () => scrollBy(-1), onNext: () => scrollBy(1), tone: "on-surface", atStart: atStart, atEnd: atEnd, loop: loop, paused: isPaused, ariaLabel: navAriaLabel ?? "Scroll position", className: "appkit-hscroller__nav" })) : null;
     if (showArrows) {
         const prevDisabled = !loop && atStart;
         const nextDisabled = !loop && atEnd;
@@ -206,9 +246,9 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
                 className,
             ]
                 .filter(Boolean)
-                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-511", children: [!arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
+                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-511", children: [!arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })), navNode] }));
     }
-    return (_jsx("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-513", children: _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content }) }));
+    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-513", children: [_jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content }), navNode] }));
 }
 function scrollerCls(snapToItems, showScrollbar) {
     return [

package/dist/ui/components/ImageMosaic.d.ts

@@ -1,11 +1,18 @@
 import React from "react";
 /** Below this there is nothing to arrange, so the caller should render nothing. */
 export declare const MOSAIC_MIN = 3;
+/**
+ * `band` — the category-hero strip this was built for (180/260px).
+ * `hero`  — the homepage hero's right column, roughly double height.
+ */
+export type ImageMosaicSize = "band" | "hero";
 export interface ImageMosaicProps {
     /** Image URLs, most important first. Fewer than `MOSAIC_MIN` renders null. */
     images: readonly string[];
     /** Describes the SUBJECT, not the images — one alt for a decorative group. */
     alt: string;
+    /** Height preset. Defaults to `"band"`, the original behaviour. */
+    size?: ImageMosaicSize;
     className?: string;
 }
 /**
@@ -40,4 +47,4 @@ export interface ImageMosaicProps {
  * breaks SSR/hydration agreement and makes the page feel unstable — and it is
  * the shape Root Cause #25 is about on the seed side.
  */
-export declare function ImageMosaic({ images, alt, className }: ImageMosaicProps): React.JSX.Element | null;
+export declare function ImageMosaic({ images, alt, size, className }: ImageMosaicProps): React.JSX.Element | null;

package/dist/ui/components/ImageMosaic.js

@@ -37,10 +37,11 @@ export const MOSAIC_MIN = 3;
  * breaks SSR/hydration agreement and makes the page feel unstable — and it is
  * the shape Root Cause #25 is about on the seed side.
  */
-export function ImageMosaic({ images, alt, className }) {
+export function ImageMosaic({ images, alt, size = "band", className }) {
     const tiles = images.filter(Boolean).slice(0, MOSAIC_MAX);
     if (tiles.length < MOSAIC_MIN)
         return null;
     const [lead, ...rest] = tiles;
-    return (_jsxs(Div, { className: `appkit-image-mosaic ${className ?? ""}`, role: "img", "aria-label": alt, children: [_jsx(Div, { className: "appkit-image-mosaic__lead", children: _jsx(MediaImage, { src: lead, alt: "", size: "card" }) }), _jsx(Div, { className: "appkit-image-mosaic__rest", children: rest.map((src, i) => (_jsx(Div, { className: "appkit-image-mosaic__tile", children: _jsx(MediaImage, { src: src, alt: "", size: "thumbnail" }) }, `${src}-${i}`))) })] }));
+    const sizeClass = size === "hero" ? "appkit-image-mosaic--hero" : "";
+    return (_jsxs(Div, { className: `appkit-image-mosaic ${sizeClass} ${className ?? ""}`, role: "img", "aria-label": alt, children: [_jsx(Div, { className: "appkit-image-mosaic__lead", children: _jsx(MediaImage, { src: lead, alt: "", size: "card" }) }), _jsx(Div, { className: "appkit-image-mosaic__rest", children: rest.map((src, i) => (_jsx(Div, { className: "appkit-image-mosaic__tile", children: _jsx(MediaImage, { src: src, alt: "", size: "thumbnail" }) }, `${src}-${i}`))) })] }));
 }

package/dist/ui/components/ImageMosaic.style.css

@@ -27,6 +27,28 @@
   }
 }
 
+/*
+ * `size="hero"` — the homepage hero's right column.
+ *
+ * 🛑 A separate modifier rather than a caller `className` height, because the
+ * fixed-height rule above is this primitive's OWN decision (see the header) and
+ * a consumer utility would simply fight it — with `important: true` in both
+ * Tailwind configs, which of the two wins is decided by emission order, not by
+ * the author. The band height is tuned for a category title; a hero column
+ * standing beside a `size="7xl"` headline needs roughly double or the mosaic
+ * reads as a letterboxed strip next to the copy.
+ */
+.appkit-image-mosaic--hero {
+  height: clamp(320px, 34vw, 460px);
+  border-radius: var(--appkit-radius-2xl);
+}
+
+@media (min-width: 768px) {
+  .appkit-image-mosaic--hero {
+    height: clamp(360px, 34vw, 480px);
+  }
+}
+
 .appkit-image-mosaic__lead,
 .appkit-image-mosaic__tile {
   position: relative;

package/dist/ui/components/Layout.style.css

@@ -324,6 +324,12 @@
 .appkit-section--tone-page-header { background-image: var(--appkit-gradient-page-header); }
 .appkit-section--tone-hero        { background-image: var(--appkit-gradient-section-mesh); }
 .appkit-section--tone-accent-banner { background-image: var(--appkit-gradient-accent-banner); }
+/* The variant layer finally exposing --appkit-gradient-whatsapp-card, which
+   had existed in the token layer with that exact name and NO consumer. The
+   community card used `accent-banner` instead — the same primary→secondary
+   gradient as CTABannerSection two sections below it, which is a real part of
+   why the homepage read monotonous. */
+.appkit-section--tone-whatsapp    { background-image: var(--appkit-gradient-whatsapp-card); }
 
 /* Semantic — Ul/Ol marker presets */
 .appkit-list--marker-disc    { list-style: disc; padding-left: 1.25rem; }

package/dist/ui/components/Semantic.d.ts

@@ -41,7 +41,7 @@ import type { SurfaceProps, RoundedKey, PaddingKey, BorderKey, SurfaceKey } from
  * `--appkit-gradient-*` CSS variable so admin custom themes restyle the
  * section without consumer changes.
  */
-export type SectionTone = "plain" | "page-header" | "hero" | "accent-banner";
+export type SectionTone = "plain" | "page-header" | "hero" | "accent-banner" | "whatsapp";
 type SemanticColor = "default" | "primary" | "muted" | "faint" | "inverse" | "success" | "warning" | "error" | "info";
 type SectionLayout = "default" | "flex" | "flex-col" | "flex-sm-row" | "flex-sm-row-between";
 type SectionGap = "none" | "xs" | "sm" | "md" | "lg";
@@ -62,7 +62,8 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement>, Surface
     /**
      * Themed background tone. Defaults to `"plain"`. Use `"page-header"` for
      * subtle gradient page-headers, `"hero"` for radial mesh hero backgrounds,
-     * `"accent-banner"` for primary→secondary brand banners.
+     * `"accent-banner"` for primary→secondary brand banners, `"whatsapp"` for
+     * the WhatsApp-brand green→teal community card.
      */
     tone?: SectionTone;
     /** Scoped color/gradient/image background — an alternative to `tone` for admin/CMS-configured section backgrounds. Renders behind `children`, absolutely positioned within the section. */

package/dist/ui/components/Semantic.js

@@ -6,6 +6,7 @@ const SECTION_TONE_MAP = {
     "page-header": "appkit-section--tone-page-header",
     hero: "appkit-section--tone-hero",
     "accent-banner": "appkit-section--tone-accent-banner",
+    whatsapp: "appkit-section--tone-whatsapp",
 };
 const SEMANTIC_COLOR_MAP = {
     default: "",

package/dist/ui/components/Typography.d.ts

@@ -44,6 +44,8 @@ declare const TYPOGRAPHY: {
         readonly inherit: "";
         readonly accent: "appkit-color--accent";
         readonly inverse: "appkit-color--inverse";
+        /** Second tier on a dark/branded surface. See Typography.style.css. */
+        readonly "inverse-muted": "appkit-color--inverse-muted";
     };
 };
 export type ColorVariant = keyof typeof TYPOGRAPHY.colorVariant;

package/dist/ui/components/Typography.js

@@ -46,6 +46,8 @@ const TYPOGRAPHY = {
         inherit: "",
         accent: "appkit-color--accent",
         inverse: "appkit-color--inverse",
+        /** Second tier on a dark/branded surface. See Typography.style.css. */
+        "inverse-muted": "appkit-color--inverse-muted",
     },
 };
 const DROP_SHADOW_MAP = {

package/dist/ui/components/Typography.style.css

@@ -165,6 +165,25 @@
   color: var(--appkit-color-text-on-primary, #ffffff);
 }
 
+/* Secondary text on a surface that stays dark/branded in EVERY theme.
+ *
+ * WHY: eight live sites hand-rolled a second tier on a branded surface and
+ * none of them worked the same way. Three in WhatsAppCommunitySection were
+ * `className="/80"` / `"/90"` / `"/75"` — codemod residue from a sweep that
+ * stripped `text-white` off `text-white/80` and left the modifier. Tailwind
+ * cannot generate a class named `/80`, so all three were silent no-ops and
+ * the intended hierarchy rendered flat. Five more in HeroCarousel used raw
+ * `opacity-70`/`-80`/`-90`, which fades the whole element, not just its ink.
+ *
+ * Reads --appkit-color-text-on-primary rather than literal white, so a theme
+ * whose on-primary ink is not #fff still gets a correct second tier. Three
+ * different alphas for one idea is the drift that produced this; there is one
+ * tier here on purpose.
+ */
+.appkit-color--inverse-muted {
+  color: color-mix(in srgb, var(--appkit-color-text-on-primary, #ffffff) 78%, transparent);
+}
+
 .dark .appkit-color--primary {
   color: var(--appkit-color-text);
 }

package/dist/ui/components/index.style.css

@@ -40,6 +40,7 @@
 @import "./DescriptionField.style.css";
 @import "./FormGrid.style.css";
 @import "./HorizontalScroller.style.css";
+@import "./CarouselNav.style.css";
 @import "./NavigationLoader.style.css";
 @import "./ImageLightbox.style.css";
 @import "./SideModal.style.css";

package/dist/ui/index.d.ts

@@ -106,7 +106,7 @@ export { StarRating } from "./components/StarRating";
 export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";
 export { Breadcrumb } from "./components/Breadcrumb";
 export { ImageMosaic, MOSAIC_MIN } from "./components/ImageMosaic";
-export type { ImageMosaicProps } from "./components/ImageMosaic";
+export type { ImageMosaicProps, ImageMosaicSize } from "./components/ImageMosaic";
 export { SplitTile } from "./components/SplitTile";
 export type { SplitTileProps, SplitTilePane } from "./components/SplitTile";
 export type { ImageLightboxProps, LightboxImage, } from "./components/ImageLightbox";
@@ -133,6 +133,8 @@ export type { ItemRowProps } from "./components/ItemRow";
 export { ItemRow } from "./components/ItemRow";
 export type { HorizontalScrollerProps, PerViewConfig, } from "./components/HorizontalScroller";
 export { HorizontalScroller } from "./components/HorizontalScroller";
+export { CarouselNav, CAROUSEL_RAIL_MAX } from "./components/CarouselNav";
+export type { CarouselNavProps, CarouselNavTone } from "./components/CarouselNav";
 export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
 export type { SettingsSectionProps, ToggleRowProps } from "./components/SettingsSection";

package/dist/ui/index.js

@@ -98,6 +98,10 @@ export { SummaryCard } from "./components/SummaryCard.js";
 export { CountdownDisplay } from "./components/CountdownDisplay.js";
 export { ItemRow } from "./components/ItemRow.js";
 export { HorizontalScroller } from "./components/HorizontalScroller.js";
+/* The ONE carousel position/navigation control — replaces the hero's bespoke
+   pill dots, the rail arrows that vanished below 640px, and the testimonial
+   rail's complete absence of an indicator. */
+export { CarouselNav, CAROUSEL_RAIL_MAX } from "./components/CarouselNav.js";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid.js";
 export { SettingsSection, ToggleRow } from "./components/SettingsSection.js";
 export { DetailPageHero } from "./components/DetailPageHero.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.53.1",
+  "version": "4.54.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -254,7 +254,8 @@
     "driver.js": "^1.8.0",
     "jsbarcode": "^3.12.3",
     "motion": "^13.1.1",
-    "phonepe-pg-sdk-node": "^2.0.2",
+    "phonepe-pg-sdk-node": ">=2.0.2",
+    "razorpay": "^2.9.8",
     "react-advanced-cropper": "^0.20.1",
     "tailwind-merge": "^3.3.0",
     "zod": "^3.24.0",

package/scripts/seed-cli.mjs

@@ -387,6 +387,104 @@ const COLLECTION_MAP = {
  * A root with no mapping yields NO franchise (living collectibles are not an
  * IP) — see `FRANCHISE_BY_CATEGORY_ROOT`.
  */
+/**
+ * The real, sellable catalogue — everything else in the product seed is demo
+ * furniture and is DROPPED HERE, before anything is written.
+ *
+ * ── 🛑 WHY A FILTER AND NOT A DELETION ────────────────────────────────────
+ *
+ * The fixtures stay in their files on purpose: they are the only coverage
+ * several features have (every `preOrderProductionStatus` value, a sold-out
+ * reservation, a depleted digital-code pool, an ended-unsold auction), and
+ * the tester checklist deep-links to them by id. Deleting them would silently
+ * remove that coverage. Not LOADING them is the part that was wanted.
+ *
+ * ── 🛑 WHY THIS HAD TO EXIST ──────────────────────────────────────────────
+ *
+ * `appkit-seed load` writes every registered row and `purge` deletes
+ * `seedPurpose: "test"` afterwards — so the demo listings came BACK on every
+ * reseed, and anyone who ran `load` to fix imagery silently republished 76
+ * fake products to the live storefront. That happened twice in one session.
+ * The owner's instruction was "delete them from the seed itself and make sure
+ * they do not return"; this is the point where that can be guaranteed, since
+ * every write path funnels through here.
+ *
+ * ── The discriminator is the STORE, not the listing type ──────────────────
+ *
+ * `store-beyblade-arena` is the fictional demo seller; `store-letitrip-
+ * official` is the real one. Keying on the store rather than on a per-file
+ * allow-list means a fixture added to ANY product seed file later is excluded
+ * automatically, which is the failure mode this is replacing — a list that
+ * has to be remembered is a list that drifts.
+ *
+ * Set `SEED_INCLUDE_DEMO=1` to load them anyway, for local demo work.
+ */
+const REAL_STORE_IDS = new Set(["store-letitrip-official"]);
+
+function realListingsOnly(products) {
+  if (process.env.SEED_INCLUDE_DEMO === "1") {
+    console.log("▌ SEED_INCLUDE_DEMO=1 — demo listings INCLUDED");
+    return products;
+  }
+  /*
+   * 🛑 TWO rules, because the store alone is not enough. Six prize-draw
+   * fixtures live under the REAL store and are still demo furniture — their
+   * imagery is a 460-byte generated colour tile from /images/seed-tiles/,
+   * which is the giveaway: a listing nobody photographed is a listing nobody
+   * intends to sell. Measured before writing this: every one of the six, and
+   * nothing real, matches.
+   */
+  const isPlaceholder = (p) => {
+    const urls = [p?.mainImage, ...(Array.isArray(p?.images) ? p.images : [])]
+      .map((v) => (typeof v === "string" ? v : v?.url))
+      .filter(Boolean);
+    return urls.length > 0 && urls.every((u) => String(u).includes("/images/seed-tiles/"));
+  };
+  const kept = products.filter((p) => REAL_STORE_IDS.has(p?.storeId) && !isPlaceholder(p));
+  const dropped = products.length - kept.length;
+  if (dropped > 0) {
+    console.log(`  • ${dropped} demo listing(s) not loaded (set SEED_INCLUDE_DEMO=1 to include)`);
+  }
+  return kept;
+}
+
+/**
+ * Drop bundle categories whose members are not in the loaded catalogue.
+ *
+ * 🛑 A bundle is ALL-OR-NOTHING — `canAddToCart` buys every member together —
+ * so a bundle missing even one member is unsellable, and one missing ALL of
+ * them is a card that opens an empty page. Measured right after the demo
+ * listings stopped loading: of the five seeded bundles, three had zero
+ * surviving members and the other two had 1-of-4 and 2-of-3. All five were
+ * still `isActive: true`, and all five rendered on the HOMEPAGE as collage
+ * cards built from `display.mosaicImages` — which are baked at seed time from
+ * the members' own imagery, so they kept showing pictures of products that no
+ * longer exist. That is 92 placeholder-tile references on the homepage.
+ *
+ * Derived rather than hand-maintained for the same reason as the product
+ * filter: a bundle that becomes valid later starts loading again on its own,
+ * and one that breaks stops, with nobody having to remember either.
+ *
+ * Only `categoryType: "bundle"` rows are considered. Every other category is
+ * taxonomy and is never touched — rebuilding the tree is expensive and is
+ * explicitly not what this is for.
+ */
+function loadableBundlesOnly(categories, loadedProducts) {
+  const live = new Set(loadedProducts.map((p) => p?.id).filter(Boolean));
+  let dropped = 0;
+  const kept = categories.filter((c) => {
+    if (c?.categoryType !== "bundle") return true;
+    const ids = Array.isArray(c.bundleProductIds) ? c.bundleProductIds : [];
+    const ok = ids.length > 0 && ids.every((id) => live.has(id));
+    if (!ok) dropped++;
+    return ok;
+  });
+  if (dropped > 0) {
+    console.log(`  • ${dropped} bundle(s) not loaded — members missing from the catalogue`);
+  }
+  return kept;
+}
+
 function withFranchise(products) {
   let stamped = 0;
   const out = products.map((p) => {
@@ -469,32 +567,13 @@ function withDerivedCategoryFields(products) {
   return out;
 }
 
-const SEED_DATA_MAP = {
-  users: usersSeedData,
-  /*
-   * store-extensions. COLLECTION_MAP was only HALF the wiring: load() reads
-   * SEED_DATA_MAP and short-circuits on an empty array, so adding the ten
-   * collection names alone produced "no seed data, skipping" for all ten.
-   * Same shape as the art/stickers note further down -- added everywhere
-   * except the map that actually runs.
-   */
-  payoutMethods: payoutMethodsSeedData,
-  shippingConfigs: shippingConfigsSeedData,
-  analyticsCards: analyticsCardsSeedData,
-  analyticsAlerts: analyticsAlertsSeedData,
-  storeCategories: storeCategoriesSeedData,
-  listingTemplates: listingTemplatesSeedData,
-  moderationQueue: moderationQueueSeedData,
-  reports: reportsSeedData,
-  itemRequests: itemRequestsSeedData,
-  storeGoogleConfig: storeGoogleConfigSeedData,
-  addresses: addressesSeedData,
-  storeAddresses: storeAddressesSeedData,
-  // SB-UNI-C: brands were merged into categories (categoryType:"brand") — no
-  // standalone brands collection/seed exists anymore.
-  categories: categoriesSeedData,
-  stores: storesSeedData,
-  products: withFranchise(withDerivedCategoryFields([
+/**
+ * The real catalogue, computed ONCE so the bundle filter and the product
+ * loader cannot disagree about what "loaded" means. Deriving it twice is
+ * Root Cause #75's shape — two copies of one rule, one of which learns about
+ * a change and the other does not.
+ */
+const REAL_PRODUCTS = realListingsOnly([
     ...(productsStandardSeedData || []),
     // Real, wiki-verified Beyblade X listings under store-letitrip-official —
     // added 2026-10-19 for PhonePe merchant registration, which requires at
@@ -536,7 +615,34 @@ const SEED_DATA_MAP = {
      * what should happen to a leaf that now has BOTH a real listing and a
      * generated one.
      */
-  ])),
+  ]);
+
+const SEED_DATA_MAP = {
+  users: usersSeedData,
+  /*
+   * store-extensions. COLLECTION_MAP was only HALF the wiring: load() reads
+   * SEED_DATA_MAP and short-circuits on an empty array, so adding the ten
+   * collection names alone produced "no seed data, skipping" for all ten.
+   * Same shape as the art/stickers note further down -- added everywhere
+   * except the map that actually runs.
+   */
+  payoutMethods: payoutMethodsSeedData,
+  shippingConfigs: shippingConfigsSeedData,
+  analyticsCards: analyticsCardsSeedData,
+  analyticsAlerts: analyticsAlertsSeedData,
+  storeCategories: storeCategoriesSeedData,
+  listingTemplates: listingTemplatesSeedData,
+  moderationQueue: moderationQueueSeedData,
+  reports: reportsSeedData,
+  itemRequests: itemRequestsSeedData,
+  storeGoogleConfig: storeGoogleConfigSeedData,
+  addresses: addressesSeedData,
+  storeAddresses: storeAddressesSeedData,
+  // SB-UNI-C: brands were merged into categories (categoryType:"brand") — no
+  // standalone brands collection/seed exists anymore.
+  categories: loadableBundlesOnly(categoriesSeedData, REAL_PRODUCTS),
+  stores: storesSeedData,
+  products: withFranchise(withDerivedCategoryFields(REAL_PRODUCTS)),
   orders: ordersSeedData,
   reviews: reviewsSeedData,
   bids: bidsSeedData,

package/dist/_internal/server/jobs/core/whatsappCatalogImport.d.ts

@@ -1,27 +0,0 @@
-/**
- * Core: async WhatsApp Business Catalog import (`whatsappCatalogImport` job).
- *
- * `POST /api/store/whatsapp-settings/catalog-import` used to do this inline:
- * one Meta fetch capped at `limit=250`, then a sequential per-item loop doing
- * up to 2 `findBySlug` reads plus 1 `create` write EACH — a real 10s-timeout
- * risk on Vercel Hobby (CLAUDE.md Rule #6) well before the cap was reached.
- * It also declared `paging.next` in its response type and never followed it,
- * so a catalog larger than 250 items silently imported only the first page.
- *
- * Running here instead buys the Function's 300s budget, which is what makes
- * following `paging.next` safe rather than making the timeout worse.
- *
- * Two efficiency changes vs. the old route:
- *  - Existing-slug detection is ONE `findByStore` read into a Set, not 2 reads
- *    per item. A seller's WA catalog is populated by pushing their own store's
- *    products, so store-scoped lookup is equivalent to the old global
- *    `findBySlug` here while costing a single query.
- *  - That Set is updated as we create, so duplicate rows within one Meta
- *    response can't produce two products.
- */
-import type { JobContext } from "../runtime/types";
-import type { JobRunResult } from "./jobRunners";
-export interface WhatsAppCatalogImportPayload {
-    storeSlug: string;
-}
-export declare function runWhatsAppCatalogImport(payload: WhatsAppCatalogImportPayload, ctx: JobContext): Promise<JobRunResult>;