@mohasinac/appkit 4.43.0 → 4.45.0

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

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui";
-import { CategoryProductsListing } from "./CategoryProductsListing";
-import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
-import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
-import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing";
-import { CategoryBundlesListing } from "./CategoryBundlesListing";
-import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs";
-import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
-import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui/index.js";
+import { CategoryProductsListing } from "./CategoryProductsListing.js";
+import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing.js";
+import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing.js";
+import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing.js";
+import { CategoryBundlesListing } from "./CategoryBundlesListing.js";
+import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs.js";
+import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 /**
  * Tab slug → listing/category type, derived (2026-08-21). The hand-written
  * version covered 5 of 10 tabs, and this view's filter did `if (!mapping)

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumb } from "../../../ui";
-import { ROUTES } from "../../../next/routing/route-map";
+import { Breadcrumb } from "../../../ui/index.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 /**
  * BreadcrumbTrail — a category-aware breadcrumb component.
  *

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

@@ -15,13 +15,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * pushed the buyer past the cart immediately.
  */
 import { useState, useCallback } from "react";
-import { Button, LoginRequiredModal, Row, Stack, Text } from "../../../ui";
-import { QuantityStepper } from "../../../ui/components/QuantityStepper";
-import { useToast } from "../../../ui";
-import { isAuthError } from "../../../utils/auth-error";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
-import { normalizeError } from "../../../errors/normalize";
+import { Button, LoginRequiredModal, Row, Stack, Text } from "../../../ui/index.js";
+import { QuantityStepper } from "../../../ui/components/QuantityStepper.js";
+import { useToast } from "../../../ui/index.js";
+import { isAuthError } from "../../../utils/auth-error.js";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy.js";
+import { normalizeError } from "../../../errors/normalize.js";
 export function BundleBuyNowCta({ bundleSlug, outOfStock = false, onBuyNow, onAddToCart, compact = false, }) {
     const { showToast } = useToast();
     const [submitting, setSubmitting] = useState(false);

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

@@ -9,13 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * action so the lightbox does not break product discovery.
  */
 import { useState } from "react";
-import Link from "next/link";
-import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices";
-import { Button, Div, GatedPrice, Grid, Row, Text } from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-import { ImageLightbox } from "../../../ui/components/ImageLightbox";
-import { ROUTES } from "../../../next/routing/route-map";
-import { formatCurrency } from "../../../utils/number.formatter";
+import Link from "next/link.js";
+import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices.js";
+import { Button, Div, GatedPrice, Grid, Row, Text } from "../../../ui/index.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { ImageLightbox } from "../../../ui/components/ImageLightbox.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { formatCurrency } from "../../../utils/number.formatter.js";
 const PLACEHOLDER_EMOJI = "📦";
 function toGalleryImages(members, canSeePrices) {
     return members.map((p, i) => ({

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Container, Div, GatedPrice, PricesOnly, Heading, Li, Main, Row, Section, Span, Stack, Text, Ul, } from "../../../ui";
-import { formatCurrency } from "../../../utils/number.formatter";
-import Link from "next/link";
-import { BUNDLE_COPY, BUNDLE_STOCK_VARIANT, } from "../../../_internal/shared/features/categories/bundle-copy";
-import { BundleBuyNowCta } from "./BundleBuyNowCta";
-import { BundleCollage } from "./BundleCollage";
-import { MediaImage } from "../../media/MediaImage";
-import { ROUTES } from "../../../next/routing/route-map";
-import { computeBundleDiscount } from "../../../_internal/shared/features/categories/bundle-pricing";
-import { CategoryGrid } from "./CategoryGrid";
+import { Badge, Container, Div, GatedPrice, PricesOnly, Heading, Li, Main, Row, Section, Span, Stack, Text, Ul, } from "../../../ui/index.js";
+import { formatCurrency } from "../../../utils/number.formatter.js";
+import Link from "next/link.js";
+import { BUNDLE_COPY, BUNDLE_STOCK_VARIANT, } from "../../../_internal/shared/features/categories/bundle-copy.js";
+import { BundleBuyNowCta } from "./BundleBuyNowCta.js";
+import { BundleCollage } from "./BundleCollage.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { computeBundleDiscount } from "../../../_internal/shared/features/categories/bundle-pricing.js";
+import { CategoryGrid } from "./CategoryGrid.js";
 const __O = {
     hidden: "overflow-hidden",
 };

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

@@ -14,11 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `bundleQueryResolvedAt` timestamp. This editor only writes the rule.
  */
 import { useCallback } from "react";
-import { Div, Input, Row, Select, Stack, TagInput, Text } from "../../../ui";
-import { CategoryInlineSelect } from "../../seller/components/CategoryInlineSelect";
-import { BrandInlineSelect } from "../../seller/components/BrandInlineSelect";
-import { BUNDLE_MAX_ITEMS } from "../../../_internal/shared/features/categories/bundle-config";
-import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
+import { Div, Input, Row, Select, Stack, TagInput, Text } from "../../../ui/index.js";
+import { CategoryInlineSelect } from "../../seller/components/CategoryInlineSelect.js";
+import { BrandInlineSelect } from "../../seller/components/BrandInlineSelect.js";
+import { BUNDLE_MAX_ITEMS } from "../../../_internal/shared/features/categories/bundle-config.js";
+import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy.js";
 const DEFAULT_DYNAMIC_RULE = {
     type: "dynamic",
     filter: {},

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

@@ -14,10 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * `defaultBundleItemsFetch`.
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Badge, Button, Checkbox, Div, Input, Row, Stack, Text } from "../../../ui";
-import { BUNDLE_MAX_ITEMS, BUNDLE_MIN_ITEMS, } from "../../../_internal/shared/features/categories/bundle-config";
-import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
-import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";
+import { Badge, Button, Checkbox, Div, Input, Row, Stack, Text } from "../../../ui/index.js";
+import { BUNDLE_MAX_ITEMS, BUNDLE_MIN_ITEMS, } from "../../../_internal/shared/features/categories/bundle-config.js";
+import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy.js";
+import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { categoriesRepository } from "../../../repositories";
-import { Container, Heading, Main, Section, Text } from "../../../ui";
-import { AdSlot } from "../../homepage/components/AdSlot";
-import { CategoryBundlesListing } from "./CategoryBundlesListing";
-import { safeRead } from "../../../errors/safe-read";
-import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility";
+import { categoriesRepository } from "../../../repositories/index.js";
+import { Container, Heading, Main, Section, Text } from "../../../ui/index.js";
+import { AdSlot } from "../../homepage/components/AdSlot.js";
+import { CategoryBundlesListing } from "./CategoryBundlesListing.js";
+import { safeRead } from "../../../errors/safe-read.js";
+import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility.js";
 const DEFAULT_LIMIT = 200;
 function sp(params, key) {
     const v = params[key];

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

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
-import { useCategoriesFiltered } from "../hooks/useCategories";
-import { ROUTES } from "../../../next";
-import { Button, Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
-import { CategoryCard } from "./CategoryGrid";
-import { CategoryFilters } from "./CategoryFilters";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
-import { sortBy } from "../../../constants/sort";
-import { CATEGORY_FIELDS } from "../../../constants/field-names";
+import { useCategoriesFiltered } from "../hooks/useCategories.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { Button, Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui/index.js";
+import { CategoryCard } from "./CategoryGrid.js";
+import { CategoryFilters } from "./CategoryFilters.js";
+import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys.js";
+import { sortBy } from "../../../constants/sort.js";
+import { CATEGORY_FIELDS } from "../../../constants/field-names.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
-import { Container, Heading, Main, Section } from "../../../ui";
-import { AdSlot } from "../../homepage/components/AdSlot";
-import { CategoriesIndexListing } from "./CategoriesIndexListing";
+import { Container, Heading, Main, Section } from "../../../ui/index.js";
+import { AdSlot } from "../../homepage/components/AdSlot.js";
+import { CategoriesIndexListing } from "./CategoriesIndexListing.js";
 function sp(params, key) {
     const v = params[key];
     return Array.isArray(v) ? v[0] ?? "" : v ?? "";

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

@@ -10,12 +10,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 import { Row, Stack, sortBy } from "@mohasinac/appkit/client";
 import { useMemo, useCallback, useState } from "react";
-import { Div, Grid, Label, Span, Text, Toggle, StickyToolbar } from "../../../ui";
-import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { BundleBuyNowCta } from "./BundleBuyNowCta";
-import { MarketplaceBundleCard } from "../../products/components/MarketplaceBundleCard";
-import { TABLE_KEYS } from "../../../constants/table-keys";
+import { Div, Grid, Label, Span, Text, Toggle, StickyToolbar } from "../../../ui/index.js";
+import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui/index.js";
+import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
+import { BundleBuyNowCta } from "./BundleBuyNowCta.js";
+import { MarketplaceBundleCard } from "../../products/components/MarketplaceBundleCard.js";
+import { TABLE_KEYS } from "../../../constants/table-keys.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };

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

@@ -1,26 +1,37 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row, SIEVE_OP, sieveAnd, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
-import Link from "next/link";
-import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories";
-import { ROUTES } from "../../../next";
-import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-import { CategoryDetailTabs } from "./CategoryDetailTabs";
-import { CategoryGrid } from "./CategoryGrid";
-import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
-import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
-import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data";
-import { listingTabCounts, } from "../../../_internal/server/features/products/listing-tab-counts";
-import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
-import { enabledCategoryTypes, enabledListingTypes } from "../../../_internal/shared/listing-types/feature-flags";
-import { siteSettingsRepository } from "../../../repositories";
-import { safeRead } from "../../../errors/safe-read";
-import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility";
+import Link from "next/link.js";
+import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories/index.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../../ui/index.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { CategoryDetailTabs } from "./CategoryDetailTabs.js";
+import { CategoryGrid } from "./CategoryGrid.js";
+import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection.js";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel.js";
+import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data.js";
+import { listingTabCounts, } from "../../../_internal/server/features/products/listing-tab-counts.js";
+import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs.js";
+import { enabledCategoryTypes, enabledListingTypes } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { siteSettingsRepository } from "../../../repositories/index.js";
+import { safeRead } from "../../../errors/safe-read.js";
+import { breadcrumbJsonLd, collectionPageJsonLd, faqJsonLd, } from "../../../seo/json-ld.js";
+import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility.js";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
 };
+/**
+ * Read and display bounds for this page. Every one of these replaced an
+ * unbounded read — see the comments at each use site for what each one cost.
+ */
+/** Tiles rendered in "Related Categories". A sample, not an index. */
+const RELATED_CATEGORY_LIMIT = 24;
+/** Documents read to fill those tiles. Headroom for the non-listing filter. */
+const RELATED_CATEGORY_FETCH = 60;
+/** Descendant slugs the Stores tab will match on → at most 4 chunked queries. */
+const STORE_CATEGORY_SLUG_MAX = 120;
 export async function CategoryDetailPageView({ slug }) {
     // The category IS this page's subject — a read failure must surface rather
     // than render an anonymous, empty category page. `undefined` still means
@@ -75,8 +86,18 @@ export async function CategoryDetailPageView({ slug }) {
         // Related categories — every other category sharing this category's root
         // (siblings + cousins across the tree, up to the tier-0/1/2 depth the
         // catalog actually uses), not just direct children.
+        //
+        // 🛑 BOUNDED. This read is a display grid, and it used to be an unbounded
+        // `.get()` over the whole root subtree — ~9% of a 50K/day Firestore budget
+        // for one page render once the forest reaches ~330 nodes, and it rendered
+        // every one of those as a tile. The section is a SAMPLE of nearby
+        // categories; the tier-grouped children grid above it is the real index.
+        // Fetch headroom is larger than the display cap because the filter below
+        // drops this category plus every brand/bundle/sublisting row.
+        // `buildTree` still passes no limit — a truncated node list there would
+        // silently drop whole branches.
         category?.rootId
-            ? safeRead(() => categoriesRepository.getCategoriesByRootId(category.rootId), {
+            ? safeRead(() => categoriesRepository.getCategoriesByRootId(category.rootId, { limit: RELATED_CATEGORY_FETCH }), {
                 route: "/categories/[slug]",
                 key: "category.rootSiblings",
                 fallback: [],
@@ -98,7 +119,9 @@ export async function CategoryDetailPageView({ slug }) {
             fallback: null,
         }),
     ]);
-    const relatedCategories = rootSiblingCategories.filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"));
+    const relatedCategories = rootSiblingCategories
+        .filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"))
+        .slice(0, RELATED_CATEGORY_LIMIT);
     // Stores tab — stores whose storeCategory is this category or ANY descendant.
     //
     // `storeCategory` is a single slug with no ancestor chain (unlike a product's
@@ -108,14 +131,25 @@ export async function CategoryDetailPageView({ slug }) {
     // an unbounded N+1. Both are fixed by pipe-joining the slugs into OR-groups:
     // the enhanced Sieve adapter turns a same-field OR into a Firestore `in`,
     // which caps at 30 values, hence the chunking.
-    const storeCategorySlugs = [
-        slug,
-        ...(await safeRead(() => categoriesRepository.getDescendantIds(category?.id ?? ""), {
-            route: "/categories/[slug]",
-            key: "category.descendantIds",
-            fallback: [],
-        })),
-    ].filter(Boolean);
+    //
+    // 🛑 The descendant ids are REUSED from `childCategories` above, not fetched
+    // again. `getDescendantIds` is literally `getDescendants().map(d => d.id)`,
+    // so calling it here ran the identical paginated subtree query a second time
+    // and threw the documents away — on a ~330-node root that is ~330 wasted
+    // reads per page view, and the two answers could disagree if one read failed
+    // while the other succeeded.
+    //
+    // 🛑 And the fan-out is CAPPED, nearest-first. One `listStores` query per 30
+    // slugs is 11 queries at ~330 nodes and 51 at ~1,500; sorting by tier takes
+    // the closest descendants, which is what someone browsing a root cares
+    // about. `storeCount` was already a floor (each chunk caps at pageSize 50),
+    // so this tightens a floor rather than making an exact number wrong.
+    const descendantIdsByProximity = [...childCategories]
+        .sort((a, b) => (a.tier ?? 0) - (b.tier ?? 0))
+        .map((c) => c.id);
+    const storeCategorySlugs = [slug, ...descendantIdsByProximity]
+        .filter(Boolean)
+        .slice(0, STORE_CATEGORY_SLUG_MAX);
     const SLUG_CHUNK = 30;
     const slugChunks = [];
     for (let i = 0; i < storeCategorySlugs.length; i += SLUG_CHUNK) {
@@ -146,6 +180,24 @@ export async function CategoryDetailPageView({ slug }) {
         itemsSold: s.stats?.itemsSold,
         totalReviews: s.stats?.totalReviews,
         averageRating: s.stats?.averageRating,
+        /*
+         * 🛑 This whole `.map()` is a SIXTH hand-rolled copy of
+         * `toStoreListItem` — the adapter Root Cause #70 created precisely to
+         * collapse the three that existed then, and which three public store
+         * APIs now share. It is recorded as an F1 defect rather than fixed here
+         * (the defect policy: a found defect goes in the backlog, not in the
+         * step's commit), and the reason it cannot be a drive-by is a boundary:
+         * the adapter lives in `_internal/server/` and this file is in
+         * `features/`, so adopting it is an import-graph decision, not a rename.
+         *
+         * These two fields are added rather than deferred because `tsc` demands
+         * them — which is the whole value of having made them REQUIRED on
+         * `StoreListItem`: the compiler enumerated every copy, and this is the
+         * one the audit's "union of what the registered builders emit" check
+         * cannot see.
+         */
+        supportsShippingProtection: s.supportsShippingProtection ?? false,
+        supportsSaleProtection: s.supportsSaleProtection ?? false,
         createdAt: s.createdAt,
     }));
     const storeCount = categoryStores.length;
@@ -161,7 +213,88 @@ export async function CategoryDetailPageView({ slug }) {
     const preOrderCount = counts["pre-orders"] ?? 0;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: Array.from(new Set(childCategories.map((c) => c.tier)))
+    /*
+     * ── D4: structured data. This page emitted NONE ─────────────────────────
+     *
+     * Verified before building: zero `ld+json` anywhere under
+     * `features/categories/`, and `collectionPageJsonLd`/`itemListJsonLd` did
+     * not exist at all. Meanwhile worldhobbyshop — the SEO leader of the fifteen
+     * crawled — ships a 6-level `BreadcrumbList` plus a `CollectionPage`, and no
+     * Shopify competitor has either. §5 ranks this the highest-impact SEO change
+     * in the plan.
+     *
+     * 🛑 It costs ZERO extra reads. The route is already fully dynamic SSR, and
+     * `ancestors[]`, `name`, `description`, `faqs` and the counts all ride reads
+     * this component already performs — which is why it was worth doing here
+     * rather than deferring it behind a data change.
+     */
+    const categoryPath = String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug));
+    /*
+     * 🛑 SORTED BY TIER, not trusted in stored order.
+     *
+     * My first version asserted `ancestors[]` is stored root-first and used it as
+     * given. The existing `BreadcrumbTrail` — the visible breadcrumb on this very
+     * page — explicitly does `.sort((a, b) => a.tier - b.tier)` before rendering,
+     * so the stored order is NOT relied on anywhere else either. Following the
+     * precedent rather than my assumption: a `BreadcrumbList` is the one node
+     * whose entire value is the order, and a leaf announced before its parent is
+     * worse than no breadcrumb at all.
+     *
+     * `.slice()` first because `sort` mutates, and this array came off the
+     * category document that the rest of the render still reads.
+     *
+     * The URL uses `ancestor.id`, matching `BreadcrumbTrail` — `CategoryAncestor`
+     * carries `id`/`name`/`tier` and no `slug`.
+     */
+    const ldBreadcrumb = breadcrumbJsonLd([
+        { name: "Home", url: "/" },
+        { name: "Categories", url: String(ROUTES.PUBLIC.CATEGORIES) },
+        ...(category?.ancestors ?? [])
+            .slice()
+            .sort((a, b) => a.tier - b.tier)
+            .map((a) => ({
+            name: a.name,
+            url: String(ROUTES.PUBLIC.CATEGORY_DETAIL(a.id)),
+        })),
+        { name: category?.name ?? "Category", url: categoryPath },
+    ]);
+    /*
+     * 🛑 Items are the CHILD CATEGORIES, not the products.
+     *
+     * Two reasons, and the second is the one that matters. A product list would
+     * want prices to be useful markup, and a price here is blocked outright
+     * (`audit-guest-price-leak` R3) because the page shows none to a signed-out
+     * crawler — which is exactly what hobbykartindia does and §2 records as the
+     * thing not to copy. And a category page's real contribution to a crawl is
+     * TAXONOMY ROUTING: telling the crawler which sub-collections exist is what
+     * made worldhobbyshop's 6-level tree its biggest edge, and it is the one
+     * thing a grid of product cards does not say in markup.
+     */
+    const ldCollection = collectionPageJsonLd({
+        name: category?.name ?? "Category",
+        url: categoryPath,
+        ...(category?.description ? { description: category.description } : {}),
+        items: childCategories.map((c) => ({
+            name: c.name,
+            url: String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.id)),
+        })),
+        /*
+         * The real total, so page 1 of a paginated collection does not declare the
+         * collection's size as this page's length — the list-envelope lesson,
+         * applied to markup.
+         */
+        totalItems: childCategories.length,
+    });
+    /*
+     * 🛑 Per-category FAQs, which is the tcgindia pattern nobody else in the
+     * crawl uses and which no page here emitted. Omitted entirely when the
+     * category has none — an empty `FAQPage` is a claim that there are no
+     * questions, which is different from having nothing to say.
+     */
+    const ldFaq = category?.faqs && category.faqs.length > 0
+        ? faqJsonLd(category.faqs.map((f) => ({ question: f.question, answer: f.answer })))
+        : null;
+    return (_jsxs(Main, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldBreadcrumb) } }), _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldCollection) } }), ldFaq && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldFaq) } })), _jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: Array.from(new Set(childCategories.map((c) => c.tier)))
                         .sort((a, b) => a - b)
                         .map((tier) => (_jsxs(Div, { padding: "b-2xs", children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", className: "mb-[var(--appkit-space-1-5)]", children: tier - (category?.tier ?? 0) === 1
                                     ? "Subcategories"

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui";
-import { CategoryProductsListing } from "./CategoryProductsListing";
-import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
-import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
-import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing";
-import { CategoryBundlesListing } from "./CategoryBundlesListing";
-import { CategoryStoresListing } from "./CategoryStoresListing";
-import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs";
-import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
-import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui/index.js";
+import { CategoryProductsListing } from "./CategoryProductsListing.js";
+import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing.js";
+import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing.js";
+import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing.js";
+import { CategoryBundlesListing } from "./CategoryBundlesListing.js";
+import { CategoryStoresListing } from "./CategoryStoresListing.js";
+import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs.js";
+import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 /**
  * Maps CATEGORY_PAGE_TABS id (a `tabSlug`) → listing type / category type key
  * for feature-flag filtering.

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

@@ -2,10 +2,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { sortBy } from "@mohasinac/appkit/client";
 import { useTranslations } from "next-intl";
-import { FilterFacetSection } from "../../filters/FilterFacetSection";
-import { RangeFilter } from "../../filters/RangeFilter";
-import { SwitchFilter } from "../../filters/SwitchFilter";
-import { Div } from "../../../ui";
+import { FilterFacetSection } from "../../filters/FilterFacetSection.js";
+import { RangeFilter } from "../../filters/RangeFilter.js";
+import { SwitchFilter } from "../../filters/SwitchFilter.js";
+import { Div } from "../../../ui/index.js";
 export const CATEGORY_FILTER_KEYS = {
     admin: [
         "tier",

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, FormGroup } 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, slugify } from "../../../utils/string.formatter";
+import { Div, FormGroup } from "../../../ui/index.js";
+import { Label, Checkbox, RichTextEditor, Text } from "../../../ui/index.js";
+import { ImageUpload, MediaImage, useMediaUpload } from "../../media/index.js";
+import { FormField } from "../../../ui/index.js";
+import { flattenCategories } from "../types/index.js";
+import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter.js";
 const __O = {
     hidden: "overflow-hidden",
 };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
+import Link from "next/link.js";
 import { ArrowRight } from "lucide-react";
-import { Div, Grid, Row, Span, Stack, Text } from "../../../ui";
-import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
-import { MediaImage } from "../../media/MediaImage";
+import { Div, Grid, Row, Span, Stack, Text } from "../../../ui/index.js";
+import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
+import { MediaImage } from "../../media/MediaImage.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Heading, Li, Section, Span, Stack, Ul } from "../../../ui";
-import { FAQAccordion } from "../../faq/components/FAQAccordion";
+import { Container, Heading, Li, Section, Span, Stack, Ul } from "../../../ui/index.js";
+import { FAQAccordion } from "../../faq/components/FAQAccordion.js";
 /**
  * Shared "why shop here" highlights + FAQ accordion, rendered on both
  * category and brand detail pages — the only editorial content either page

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

@@ -1,23 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { withoutPriceSorts } from "../../products/constants/sieve";
-import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices";
+import { withoutPriceSorts } from "../../products/constants/sieve.js";
+import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices.js";
 import { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { usePendingTable } from "../../../react/hooks/usePendingTable";
-import { useProducts } from "../../products/hooks/useProducts";
-import { Div, Grid, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast, StickyToolbar } from "../../../ui";
-import { useAuthGate } from "../../../react/hooks/useAuthGate";
-import { ACTION_ID } from "../../products/constants/action-defs";
-import { ROUTES } from "../../../next";
-import { ProductGrid } from "../../products/components/ProductGrid";
-import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/components/ProductFilters";
-import { useGuestCart } from "../../cart/hooks/useGuestCart";
-import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
-import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
-import { AvailabilityTabs } from "../../products/components/AvailabilityTabs";
-import { AVAILABILITY_VALUES } from "../../../constants/field-names";
-import { TABLE_KEYS } from "../../../constants/table-keys";
+import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
+import { usePendingTable } from "../../../react/hooks/usePendingTable.js";
+import { useProducts } from "../../products/hooks/useProducts.js";
+import { Div, Grid, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast, StickyToolbar } from "../../../ui/index.js";
+import { useAuthGate } from "../../../react/hooks/useAuthGate.js";
+import { ACTION_ID } from "../../products/constants/action-defs.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { ProductGrid } from "../../products/components/ProductGrid.js";
+import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/components/ProductFilters.js";
+import { useGuestCart } from "../../cart/hooks/useGuestCart.js";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist.js";
+import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops.js";
+import { AvailabilityTabs } from "../../products/components/AvailabilityTabs.js";
+import { AVAILABILITY_VALUES } from "../../../constants/field-names.js";
+import { TABLE_KEYS } from "../../../constants/table-keys.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };