@mohasinac/appkit 4.64.1 → 4.66.0

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

@@ -4,7 +4,14 @@ import { useState, useCallback, useMemo } from "react";
 import { useCategoriesFiltered } from "../hooks/useCategories.js";
 import { CATEGORY_TABS, DEFAULT_CATEGORY_TAB, matchesCategoryTab, } from "../constants/category-tabs.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
-import { Div, Grid, ListingFilterDrawer, ListingToolbar, OverflowRow, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
+import { ListingFilterDrawer } from "../../../ui/components/ListingFilterDrawer.js";
+import { ListingToolbar } from "../../../ui/components/ListingToolbar.js";
+import { OverflowRow } from "../../../ui/components/OverflowRow.js";
+import { Pagination } from "../../../ui/components/Pagination.js";
+import { Text } from "../../../ui/components/Typography.js";
+import { StickyToolbar } from "../../../ui/components/StickyToolbar.js";
 import { CategoryCard } from "./CategoryGrid.js";
 import { CategoryFilters } from "./CategoryFilters.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
@@ -20,7 +27,6 @@ const __O = {
 const PAGE_SIZE = 24;
 function renderCategoryGrid(props) {
     const { isLoading, categories, view, activeSearch, activeTab, brandsOnly } = props;
-    const isBrandView = activeTab === "brands" || brandsOnly;
     /* The empty state names the tab the visitor is actually on. It said
      * "categories" on all five, so an empty Parts tab reported the wrong thing. */
     const noun = brandsOnly
@@ -155,12 +161,21 @@ export function CategoriesIndexListing({ brandsOnly = false }) {
     const switchTab = (key) => {
         table.set(TABLE_KEYS.TAB, key);
     };
-    const { categories, totalPages, isLoading } = useCategoriesFiltered({
+    const { categories, allRows, totalPages, isLoading } = useCategoriesFiltered({
         q: table.get(TABLE_KEYS.QUERY) || undefined,
         isFeatured: table.get(TABLE_KEYS.IS_FEATURED) === "true" || undefined,
         isBrand: isBrandParam,
-        // The tab partition — applied before pagination inside the hook.
-        predicate: (c) => matchesCategoryTab(c, activeTab),
+        /*
+         * The tab partition — applied before pagination inside the hook.
+         *
+         * 🛑 `useCallback` on `activeTab` is REQUIRED, not hygiene. The hook
+         * memoises its filter/sort/slice on this reference; an inline arrow is a
+         * new reference every render, so it would recompute on each one. (The
+         * converse was the actual bug: the predicate was missing from the hook's
+         * dependency list entirely, so a tab change recomputed NOTHING and the
+         * previous tab's rows stayed on screen.)
+         */
+        predicate: useCallback((c) => matchesCategoryTab(c, activeTab), [activeTab]),
         rootOnly: table.get("rootOnly") === "true" || undefined,
         tier: getNumericParam(table, "tier"),
         minProductCount: getNumericParam(table, "minItemCount"),
@@ -186,7 +201,41 @@ export function CategoriesIndexListing({ brandsOnly = false }) {
      * navigate. That is also why the items carry `onSelect` rather than `href`,
      * and therefore why `linkProps`/`scroll` do not apply here.
      */
-    const tabItems = CATEGORY_TABS.map((tab) => ({
+    /*
+     * 🛑 A TAB THAT CAN ONLY EVER BE EMPTY IS THE SAME DEAD FACET AS AN EMPTY CARD.
+     *
+     * This index already removed its Parts tab for being "the worse half of two
+     * better homes", and `category-tabs.ts` records that *"every tab answers a
+     * question; 'all' answered none"*. A tab whose answer is always "nothing"
+     * answers none either — it is a labelled promise of content that opens on
+     * "No characters found".
+     *
+     * It became load-bearing the moment 320 character rows were seeded `isActive:
+     * false`: the type is real, the rows exist and resolve, and NOT ONE is live
+     * until a product carries a character slug. Shipping the tab regardless
+     * would have put a permanently empty section in the site's main taxonomy
+     * index — and then quietly filled itself the day someone flipped a flag,
+     * with no second commit needed. That is the behaviour worth having, so the
+     * tab is DERIVED from the payload rather than from a list.
+     *
+     * 🛑 Counted from `allRows` — the whole cached response — never from
+     * `categories`, which is this tab's own paginated slice and would make every
+     * inactive tab hide itself. Root Cause #72 is the trap here ("a 'hide it when
+     * it's empty' rule is only as good as its count map"), and the reason this
+     * version is safe is that there IS no map: both the count and the render
+     * partition one payload through the same `matchesCategoryTab`, so a tab
+     * cannot be uncovered by construction.
+     *
+     * Two rows that must not be collapsed into the count:
+     *   - WHILE LOADING, `allRows` is empty, so every tab would vanish and
+     *     reappear. The bar renders in full until the payload lands.
+     *   - THE ACTIVE TAB IS NEVER HIDDEN. A direct link to `?tab=characters`
+     *     must not leave the visitor on a bar with no selected tab; it shows the
+     *     tab and its honest empty state.
+     */
+    const tabItems = CATEGORY_TABS.filter((tab) => isLoading ||
+        tab.key === activeTab ||
+        allRows.some((c) => matchesCategoryTab(c, tab.key))).map((tab) => ({
         id: tab.key,
         label: tab.label,
         onSelect: () => switchTab(tab.key),

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

@@ -1,11 +1,11 @@
 import React from "react";
-type SearchParams = Record<string, string | string[]>;
+import type { SearchParamsRecord } from "../../../utils/search-params";
 export interface CategoriesIndexPageViewProps {
     /**
      * @deprecated Accepted and ignored. Kept so the consumer page shim compiles
      * either way; remove once no caller passes it.
      */
-    searchParams?: SearchParams;
+    searchParams?: SearchParamsRecord;
 }
 /**
  * The categories index.
@@ -30,4 +30,3 @@ export interface CategoriesIndexPageViewProps {
  * lose (contrast `/products`, where the grid IS in the SSR HTML and must stay).
  */
 export declare function CategoriesIndexPageView(_props?: CategoriesIndexPageViewProps): Promise<React.JSX.Element>;
-export {};

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

@@ -1,39 +1,9 @@
 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/index.js";
+import { Container } from "../../../ui/components/Layout.js";
+import { Heading } from "../../../ui/components/Typography.js";
+import { Main, Section } from "../../../ui/components/Semantic.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 ?? "";
-}
-function buildCategoryFilters(params) {
-    const parts = [];
-    const isFeatured = sp(params, "isFeatured");
-    if (isFeatured === "true")
-        parts.push("isFeatured==true");
-    const isBrand = sp(params, "isBrand");
-    if (isBrand === "true")
-        parts.push("isBrand==true");
-    const rootOnly = sp(params, "rootOnly");
-    if (rootOnly === "true")
-        parts.push("tier==0");
-    const minItemCount = sp(params, "minItemCount");
-    const maxItemCount = sp(params, "maxItemCount");
-    if (minItemCount)
-        parts.push(sieveFilter("metrics.totalItemCount", SIEVE_OP.GTE, minItemCount));
-    if (maxItemCount)
-        parts.push(sieveFilter("metrics.totalItemCount", SIEVE_OP.LTE, maxItemCount));
-    const tier = sp(params, "tier");
-    if (tier) {
-        const values = tier.split("|").filter(Boolean);
-        if (values.length === 1)
-            parts.push(sieveFilter("tier", SIEVE_OP.EQ, values[0]));
-        else if (values.length > 1)
-            parts.push(sieveFilter("tier", SIEVE_OP.EQ, values.join("|")));
-    }
-    return parts.join(",");
-}
 /**
  * The categories index.
  *

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

@@ -10,8 +10,14 @@ 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/index.js";
-import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Grid } from "../../../ui/components/Layout.js";
+import { Label, Span, Text } from "../../../ui/components/Typography.js";
+import { Toggle } from "../../../ui/components/Toggle.js";
+import { StickyToolbar } from "../../../ui/components/StickyToolbar.js";
+import { ListingToolbar } from "../../../ui/components/ListingToolbar.js";
+import { Pagination } from "../../../ui/components/Pagination.js";
+import { FilterDrawer } from "../../../ui/components/FilterDrawer.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
 import { BundleBuyNowCta } from "./BundleBuyNowCta.js";
 import { MarketplaceBundleCard } from "../../products/components/MarketplaceBundleCard.js";

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

@@ -4,7 +4,12 @@ import { sortBy } from "@mohasinac/appkit";
 import { categoryCrumbs, withTrailHead } from "../utils/breadcrumb-chain.js";
 import { ownTotalFor, descendantTotalFor } from "../schemas/category-counts.js";
 import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories/index.js";
-import { Container, Div, Heading, ImageMosaic, Main, MOSAIC_MIN, Section, Span, SplitTile, Stack, Text } from "../../../ui/index.js";
+import { Container, Stack } from "../../../ui/components/Layout.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Heading, Span, Text } from "../../../ui/components/Typography.js";
+import { ImageMosaic, MOSAIC_MIN } from "../../../ui/components/ImageMosaic.js";
+import { Main, Section } from "../../../ui/components/Semantic.js";
+import { SplitTile } from "../../../ui/components/SplitTile.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 import { MediaImage } from "../../media/MediaImage.js";
@@ -25,7 +30,7 @@ import { getGroupsForCategory } from "../../../_internal/server/features/grouped
 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 { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
 import { safeRead } from "../../../errors/safe-read.js";
 import { breadcrumbJsonLd, collectionPageJsonLd, faqJsonLd, } from "../../../seo/json-ld.js";
 import { toStoreListItem } from "../../../_internal/server/features/stores/adapters.js";

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

@@ -1,7 +1,8 @@
 "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/index.js";
+import { EmptyState } from "../../../ui/components/EmptyState.js";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui/components/Tabs.js";
 import { AvailabilityScopeHint } from "../../products/components/AvailabilityScopeHint.js";
 import { CategoryProductsListing } from "./CategoryProductsListing.js";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing.js";

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

@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection.js";
 import { RangeFilter } from "../../filters/RangeFilter.js";
 import { SwitchFilter } from "../../filters/SwitchFilter.js";
-import { Div } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
 export const CATEGORY_FILTER_KEYS = {
     admin: [
         "tier",

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

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Div, FormGroup } from "../../../ui/index.js";
-import { Label, Checkbox, RichTextEditor, Text } from "../../../ui/index.js";
+import { Label, Text } from "../../../ui/components/Typography.js";
+import { Checkbox } from "../../../ui/components/Checkbox.js";
+import { RichTextEditor } from "../../../ui/components/RichTextEditor.js";
 import { FieldLabel } from "../../../ui/forms/index.js";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media/index.js";
 import { FormField } from "../../../ui/index.js";

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link.js";
 import { ArrowRight } from "lucide-react";
-import { Div, Grid, Row, Span, Stack, Text } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
+import { Span, Text } from "../../../ui/components/Typography.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { ImageMosaic, MOSAIC_MIN } from "../../../ui/components/ImageMosaic.js";

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Heading, Li, Section, Span, Stack, Ul } from "../../../ui/index.js";
+import { Container, Stack } from "../../../ui/components/Layout.js";
+import { Heading, Span } from "../../../ui/components/Typography.js";
+import { Li, Section, Ul } from "../../../ui/components/Semantic.js";
 import { FAQAccordion } from "../../faq/components/FAQAccordion.js";
 /**
  * Shared "why shop here" highlights + FAQ accordion, rendered on both

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

@@ -6,7 +6,14 @@ import { useState, useCallback } from "react";
 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 { Div } from "../../../ui/components/Div.js";
+import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
+import { FilterDrawer } from "../../../ui/components/FilterDrawer.js";
+import { ListingToolbar } from "../../../ui/components/ListingToolbar.js";
+import { LoginRequiredModal } from "../../../ui/components/LoginRequiredModal.js";
+import { Pagination } from "../../../ui/components/Pagination.js";
+import { useToast } from "../../../ui/components/toast-context.js";
+import { StickyToolbar } from "../../../ui/components/StickyToolbar.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";

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

@@ -1,6 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Div, Label, Row, Select, SideDrawer } from "../../../ui/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Label } from "../../../ui/components/Typography.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Select } from "../../../ui/components/Select.js";
+import { SideDrawer } from "../../../ui/components/SideDrawer.js";
 import { useState, useCallback, useEffect } from "react";
 import { z } from "zod";
 import { useCategories, useCreateCategory } from "../hooks/useCategorySelector.js";

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

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Row, Select, Span } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Select } from "../../../ui/components/Select.js";
+import { Span } from "../../../ui/components/Typography.js";
 import { getCategorySortOptions, } from "./CategoryFilters.js";
 export function CategorySortSelect({ value, onChange, variant = "public", label = "Sort", className = "", }) {
     const options = [...getCategorySortOptions(variant)];

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

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
-import { Grid, Stack, Text } from "../../../ui/index.js";
+import { Grid, Stack } from "../../../ui/components/Layout.js";
+import { Text } from "../../../ui/components/Typography.js";
 export function CategoryStoresListing({ stores }) {
     if (stores.length === 0) {
         return (_jsx(Stack, { justify: "center", className: "text-left", padding: "y-4xl", align: "start", children: _jsx(Text, { size: "sm", color: "muted", children: "No stores found in this category." }) }));

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

@@ -1,7 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Row, Span, StatusBadge } from "../../../ui/index.js";
-import { MediaImage } from "../../media/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Span } from "../../../ui/components/Typography.js";
+import { StatusBadge } from "../../../ui/components/StatusBadge.js";
+import { MediaImage } from "../../media/MediaImage.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
 const __O = {
     hidden: "overflow-hidden",

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

@@ -33,7 +33,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Div, Row, Stack, Text } from "../../../ui/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Row, Stack } from "../../../ui/components/Layout.js";
+import { Text } from "../../../ui/components/Typography.js";
 import { apiClient } from "../../../http/index.js";
 import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";

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

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/client";
 import { useState } from "react";
-import { Div, Span, Text } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Span, Text } from "../../../ui/components/Typography.js";
 function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0, }) {
     const hasChildren = children.length > 0;
     const isActive = item.id === activeId;

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Heading, Text } from "../../../ui/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Heading, Text } from "../../../ui/components/Typography.js";
 import { MediaImage } from "../../media/MediaImage.js";
 export function ConcernCard({ concern, onClick, className = "", }) {
     return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), 

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid } from "../../../ui/index.js";
+import { Grid } from "../../../ui/components/Layout.js";
 import { ConcernCard } from "./ConcernCard.js";
 export function ConcernGrid({ concerns, onSelect, className = "", }) {
     if (concerns.length === 0)

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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { PricesOnly, Stack, Text } from "../../../ui/index.js";
+import { PricesOnly } from "../../../ui/components/GatedPrice.js";
+import { Stack } from "../../../ui/components/Layout.js";
+import { Text } from "../../../ui/components/Typography.js";
 import { apiClient } from "../../../http/index.js";
 import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";

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

@@ -41,7 +41,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @tag sideEffects:none
  */
 import { useMemo, useState } from "react";
-import { Div, HorizontalScroller, Row, Span, Stack, Text } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { HorizontalScroller } from "../../../ui/components/HorizontalScroller.js";
+import { Row, Stack } from "../../../ui/components/Layout.js";
+import { Span, Text } from "../../../ui/components/Typography.js";
 import { FieldInput } from "../../../ui/forms/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { TextLink } from "../../../ui/components/TextLink.js";

package/dist/features/categories/constants/category-tabs.d.ts

@@ -39,7 +39,7 @@
  * @tag pattern:shared-literal
  * @tag sideEffects:none
  */
-export type CategoryTabKey = "categories" | "brands" | "franchises" | "bundles";
+export type CategoryTabKey = "categories" | "brands" | "franchises" | "bundles" | "characters";
 export interface CategoryTabDef {
     key: CategoryTabKey;
     label: string;

package/dist/features/categories/constants/category-tabs.js

@@ -48,6 +48,11 @@ export const CATEGORY_TABS = [
     { key: "categories", label: "Categories" },
     { key: "brands", label: "Brands" },
     { key: "franchises", label: "Franchises" },
+    /*
+     * Who USED the bey. Answers a question none of the others can and the one
+     * buyers actually ask — "Tyson's Dragoon", not "Attack Ring MA-04".
+     */
+    { key: "characters", label: "Characters" },
     { key: "bundles", label: "Bundles" },
 ];
 export const DEFAULT_CATEGORY_TAB = "categories";
@@ -66,6 +71,8 @@ export function matchesCategoryTab(c, tab) {
             return type === "brand";
         case "franchises":
             return type === "franchise";
+        case "characters":
+            return type === "character";
         case "bundles":
             return type === "bundle";
         case "categories":

package/dist/features/categories/hooks/useCategories.d.ts

@@ -32,12 +32,18 @@ export interface CategoriesFilteredParams {
      * Not part of the react-query key, deliberately — the FETCH is the same
      * unfiltered `?flat=true` for every tab, so keying on it would mint five
      * cache entries for one response.
+     *
+     * 🛑 That applies to the QUERY KEY ONLY. It must still be a dependency of the
+     * in-memory filter/sort memo, and omitting it there was a live bug: a tab
+     * change altered nothing else the memo watched, so it returned the previous
+     * tab's rows. Caller supplies it via `useCallback` on the tab key.
      */
     predicate?: (c: CategoryItem) => boolean;
 }
 /** API-driven for structured filters; text search + pagination done in hook (Firestore substring limitation). */
 export declare function useCategoriesFiltered(params?: CategoriesFilteredParams): {
     categories: CategoryItem[];
+    allRows: CategoryItem[];
     total: number;
     totalPages: number;
     isLoading: boolean;

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

@@ -38,8 +38,57 @@ export function useCategoriesFiltered(params = {}) {
         staleTime: 2 * 60 * 1000,
     });
     const { page = 1, pageSize = 24, sort = "name", q = "", minProductCount, maxProductCount } = params;
+    /*
+     * Every LIVE row in the payload — before any tab partition, search or
+     * pagination. Exposed because a caller that partitions this response into
+     * tabs needs to know whether a tab has anything in it at all, and its own
+     * `categories` slice cannot tell it that (it is one tab's page).
+     *
+     * 🛑 Deliberately NOT narrowed by `q`. A tab bar that loses tabs as the
+     * visitor types is worse than one that keeps a tab whose search found
+     * nothing — the second has an honest empty state, the first makes the
+     * section look deleted.
+     */
+    const allRows = useMemo(() => {
+        const items = query.data ?? [];
+        /*
+         * 🛑 AN INACTIVE ROW IS A DEAD FACET, AND UNTIL 2026-10-24 NOTHING ENFORCED IT.
+         *
+         * `brand-rows.ts` trap 3 states the rule — *"a row with no product is a
+         * DEAD FACET, and worse than absent: it renders as a card in the grid that
+         * opens an empty page"* — and `franchise-rows.ts` claims its seven inactive
+         * rows are therefore *"excluded from the grid and from search"*.
+         *
+         * **They were not.** `GET /api/categories` builds its Sieve string from
+         * `type` / `parentIds` / `isFeatured` / `isBrand` / `showOnHomepage` /
+         * `tier` only, and `useCategoriesFiltered` sends nothing but `flat=true`,
+         * so no layer ever added an `isActive` clause. All seven inactive
+         * franchises have been rendering on the Franchises tab, each one a card
+         * opening an empty page. The promise was in a comment; the mechanism did
+         * not exist (Root Cause #106).
+         *
+         * It surfaced when 320 inactive CHARACTER rows were seeded on the strength
+         * of that promise — seven dead cards is easy to miss, 320 is not.
+         *
+         * 🛑 IN MEMORY, AND ONLY ON AN EXPLICIT `false`. Two reasons, both of which
+         * a server-side clause would get wrong:
+         *
+         *   - A Firestore inequality EXCLUDES every document that lacks the field.
+         *     `isActive` is optional on `CategoryDocument`, so pushing this down
+         *     would hide every row that never set it — which is most of the real
+         *     taxonomy. That is the documented trap in CLAUDE.md's TS-patterns
+         *     table, in the one shape that returns a plausible non-empty list.
+         *   - The same reason `isActive?: boolean` is declared on `CategoryItem` at
+         *     all: absent must mean "live", never "unknown".
+         *
+         * ADMIN IS NOT AFFECTED. `/admin/categories` reads this route through
+         * `useAdminListingData`, not this hook, and must keep seeing inactive rows
+         * — they are what it offers a Status column to flip.
+         */
+        return items.filter((c) => c.isActive !== false);
+    }, [query.data]);
     const paginated = useMemo(() => {
-        let items = query.data ?? [];
+        let items = allRows;
         const lq = q.toLowerCase();
         if (lq)
             items = items.filter((c) => c.name.toLowerCase().includes(lq) || (c.description ?? "").toLowerCase().includes(lq));
@@ -83,9 +132,31 @@ export function useCategoriesFiltered(params = {}) {
         const totalPages = Math.max(1, Math.ceil(total / pageSize));
         const slice = items.slice((page - 1) * pageSize, page * pageSize);
         return { items: slice, total, totalPages };
-    }, [query.data, q, sort, page, pageSize, minProductCount, maxProductCount]);
+        /*
+         * 🛑 `params.predicate` BELONGS IN THIS LIST, and leaving it out was a live
+         * bug on the categories index — not a theoretical lint complaint.
+         *
+         * The predicate IS the tab partition. `switchTab` writes only the `tab` URL
+         * param, so on a tab change `q`, `sort`, `page` and `pageSize` are all
+         * unchanged, and the request string is identical for every tab except
+         * brands (the one that sends `isBrand=true`) — so react-query hands back
+         * the SAME `query.data` reference. With the predicate absent from the deps,
+         * nothing in them changed, the memo returned its cached slice, and
+         * **switching Categories → Franchises → Bundles re-rendered the previous
+         * tab's rows.** Only the brands tab worked, by accident, because its query
+         * key differs.
+         *
+         * It is a changing reference by nature, so the call site must `useCallback`
+         * it on the tab key — `CategoriesIndexListing` now does. Were it ever
+         * passed inline again the memo would recompute every render, which is
+         * merely wasteful over ~1,500 in-memory rows and still CORRECT; the
+         * previous behaviour was neither.
+         */
+    }, [allRows, q, sort, page, pageSize, minProductCount, maxProductCount, params.predicate, params.isBrand]);
     return {
         categories: paginated.items,
+        /* Every live row, unpartitioned — see `allRows` above. */
+        allRows,
         total: paginated.total,
         totalPages: paginated.totalPages,
         isLoading: query.isLoading,