@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, sieveAnd, SIEVE_OP } from "@mohasinac/appkit";
+import { Row, SIEVE_OP, sieveAnd, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import Link from "next/link";
 import { categoriesRepository, productRepository, } from "../../../repositories";
@@ -73,7 +73,10 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         : [];
     const coverImage = brand?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    const brandColor = brand?.display?.color || "#6366f1";
+    // Brand accent — falls back to the primary theme token when the brand hasn't
+    // configured one. The value is consumed as `style={{ backgroundColor }}` so it
+    // accepts both CSS vars and raw hex written by an admin.
+    const brandColor = brand?.display?.color || "var(--appkit-color-primary)";
     const counts = {
         products: productsResult?.total ?? brand?.metrics?.productCount ?? 0,
         auctions: auctionsResult?.total ?? brand?.metrics?.auctionCount ?? 0,
@@ -88,7 +91,15 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         counts.bundles;
     return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", 
                                 // audit-inline-style-ok: dynamic image URL
-                                style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { className: "absolute inset-0 bg-black/55" })] })), !hasCover && (_jsx("div", { className: "absolute inset-0 opacity-10", 
+                                style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx("div", { className: "absolute inset-0 opacity-10", 
                         // audit-inline-style-ok: runtime theme color
-                        style: { backgroundColor: brandColor } })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 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.BRANDS ?? "/brands"), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-100", children: brand?.name ?? slug })] }), _jsxs(Div, { className: "flex items-center gap-4 mb-3", children: [brand?.display?.icon && (_jsx(Span, { className: "text-5xl leading-none", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: `text-3xl md:text-4xl font-bold ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { className: `text-base max-w-2xl mt-1 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: brand.description }))] })] }), _jsxs(Div, { className: "flex flex-wrap gap-2 mt-3", children: [counts.products > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts })) : (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "Brand not found." })) }) })] }));
+                        style: { backgroundColor: brandColor } })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto ${hasCover ? "py-12" : "py-8"}`, padding: "x-md", children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 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.BRANDS ?? "/brands"), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-100", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-zinc-900 dark:text-zinc-50"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (
+                                            // audit-variant-ok: brand description — conditional muted-zinc fallback when no cover; inverse default keeps over-image legibility
+                                            _jsx(Text, { color: "inverse", className: `max-w-2xl mt-1 ${hasCover ? "/80" : "text-zinc-600 dark:text-zinc-400"}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", className: "flex-wrap mt-3", children: [counts.products > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR tinted primary (no cover); no white-overlay surface variant
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR warning surface (no cover); compound bg cannot use Span.surface
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR info surface (no cover); compound bg cannot use Span.surface
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-info-surface text-info dark:bg-info-surface dark:text-info"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "Brand not found." })) }) })] }));
 }

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

@@ -48,7 +48,7 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
             default: return undefined;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `flex border-b border-zinc-200 dark:border-slate-700 mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "flex", border: "default", className: `border-b mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
                         ? "border-primary text-primary"
                         : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: tabLabel(t.label, countFor(t.id)) }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { brandName: brandName })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { brandName: brandName })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles, brandName: brandName }))] }));
 }

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

@@ -38,9 +38,9 @@ export interface BreadcrumbTrailProps {
  * @example
  * ```tsx
  * <BreadcrumbTrail
- *   category={category}
- *   rootHref="/categories"
- *   basePath="/categories"
+ * category={category}
+ * rootHref="/categories"
+ * basePath="/categories"
  * />
  * ```
  */

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

@@ -10,9 +10,9 @@ import { Breadcrumb } from "../../../ui";
  * @example
  * ```tsx
  * <BreadcrumbTrail
- *   category={category}
- *   rootHref="/categories"
- *   basePath="/categories"
+ * category={category}
+ * rootHref="/categories"
+ * basePath="/categories"
  * />
  * ```
  */

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

@@ -12,6 +12,7 @@ import { Button, LoginRequiredModal, Stack, Text } from "../../../ui";
 import { useToast } from "../../../ui";
 import { isAuthError } from "../../../utils/auth-error";
 import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
+import { normalizeError } from "../../../errors/normalize";
 export function BundleBuyNowCta({ bundleSlug, outOfStock = false, onBuyNow, compact = false, }) {
     const { showToast } = useToast();
     const [submitting, setSubmitting] = useState(false);
@@ -24,6 +25,7 @@ export function BundleBuyNowCta({ bundleSlug, outOfStock = false, onBuyNow, comp
             await onBuyNow({ bundleSlug });
         }
         catch (err) {
+            void normalizeError(err);
             if (isAuthError(err)) {
                 setShowLoginModal(true);
             }

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

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState } from "react";
 import Link from "next/link";
-import { Div, Text } from "../../../ui";
+import { Div, Row, Text } from "../../../ui";
 import { ImageLightbox } from "../../../ui/components/ImageLightbox";
 import { ROUTES } from "../../../next/routing/route-map";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -39,12 +39,12 @@ export function BundleCollage({ members, onItemClick }) {
     if (!members.length)
         return null;
     const galleryImages = toGalleryImages(members);
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: members.map((p, idx) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", children: members.map((p, idx) => {
                     const cover = p.mainImage ?? p.images?.[0];
                     const href = String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#");
-                    return (_jsxs(Div, { className: "group relative overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] transition-transform hover:scale-[1.01]", children: [_jsxs("button", { type: "button", onClick: makeBundleItemClickHandler(p, idx, onItemClick, setLightboxIndex), className: "relative block aspect-square w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)]", "aria-label": `View ${p.title} in lightbox`, children: [cover ? (
+                    return (_jsxs(Div, { className: "group relative overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] transition-transform hover:scale-[1.01]", rounded: "lg", children: [_jsxs("button", { type: "button", onClick: makeBundleItemClickHandler(p, idx, onItemClick, setLightboxIndex), className: "relative block aspect-square w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)]", "aria-label": `View ${p.title} in lightbox`, children: [cover ? (
                                     /* eslint-disable-next-line @next/next/no-img-element */
-                                    _jsx("img", { src: cover, alt: p.title, className: "absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105", loading: "lazy" })) : (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-[var(--appkit-color-surface-muted)] text-3xl", children: PLACEHOLDER_EMOJI })), _jsxs(Div, { className: "absolute left-2 top-2 rounded bg-black/70 px-1.5 py-0.5 text-xs font-semibold text-white", children: ["#", idx + 1] })] }), _jsxs(Div, { className: "p-2", children: [_jsx(Link, { href: href, className: "line-clamp-2 text-sm font-medium hover:underline", children: p.title }), _jsx(Text, { className: "mt-0.5 text-xs text-[var(--appkit-color-text-muted)]", children: formatCurrency((p.price ?? 0) / 100, p.currency ?? "INR") })] })] }, p.id));
+                                    _jsx("img", { src: cover, alt: p.title, className: "absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105", loading: "lazy" })) : (_jsx(Row, { textSize: "3xl", surface: "muted", className: "absolute inset-0", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", idx + 1] })] }), _jsxs(Div, { padding: "xs", children: [_jsx(Link, { href: href, className: "line-clamp-2 text-sm font-medium hover:underline", children: p.title }), _jsx(Text, { className: "mt-0.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: formatCurrency((p.price ?? 0) / 100, p.currency ?? "INR") })] })] }, p.id));
                 }) }), _jsx(ImageLightbox, { images: galleryImages, activeIndex: lightboxIndex, onClose: () => setLightboxIndex(null), onNavigate: (i) => setLightboxIndex(i), showThumbnails: true })] }));
 }
 export default BundleCollage;

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

@@ -1,13 +1,12 @@
 /**
  * BundleDetailView — public detail page for a bundle (categoryType:"bundle"
- * row on the categories collection). Rebuilt in S-SBUNI-3 2026-05-13 after
- * the SB-UNI-V deletion. Slot-shell pattern: parent passes the doc + the
- * resolved product members; this view stays presentational.
+ * row on the categories collection). Slot-shell pattern: parent passes the
+ * doc + the resolved product members; this view stays presentational.
  *
  * Members rendered as a simple grid of product cards (links to PDPs). The
- * "Buy bundle" CTA + non-refundable consent modal are intentionally NOT
- * wired yet — bundle add-to-cart needs the SB-UNI-3 carry-over cohort
- * (cart line `{bundleCategorySlug, qty}` + N-line checkout expansion).
+ * "Buy now" CTA is wired via the `onBuyNow` prop — the consumer page action
+ * delegates to addBundleToCartAction + redirect to checkout
+ * (see src/actions/bundle.actions.ts).
  */
 import type { CategoryDocument } from "../schemas";
 import type { ProductDocument } from "../../products/schemas/firestore";

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

@@ -5,6 +5,7 @@ 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";
 const __O = {
     hidden: "overflow-hidden",
@@ -21,7 +22,9 @@ export function BundleDetailView({ bundle, members = [], onBuyNow, }) {
     const priceLabel = bundle.bundlePriceInPaise
         ? formatCurrency(bundle.bundlePriceInPaise / 100, "INR")
         : BUNDLE_COPY.detail.priceFallback;
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "lg", align: "start", className: "flex-col md:flex-row", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden} rounded-2xl bg-zinc-100 dark:bg-zinc-800`, children: cover ? (
-                                        // eslint-disable-next-line @next/next/no-img-element, lir/no-raw-media-elements
-                                        _jsx("img", { src: cover, alt: bundle.name, className: "h-full w-full object-cover" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center text-6xl", children: PLACEHOLDER_EMOJI })) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(Heading, { level: 1, className: "text-3xl font-semibold text-zinc-900 dark:text-zinc-100", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), _jsxs(Text, { size: "sm", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.detail.itemCount(memberCount)] }), _jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: STOCK_BADGE_TEXT[stock] })] }), bundle.description && (_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-sm font-semibold text-[var(--appkit-color-text-muted)]", children: BUNDLE_COPY.detailDescriptionHeading }), _jsx(Text, { className: "whitespace-pre-line", children: bundle.description })] })), onBuyNow ? (_jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow })) : (_jsxs(Div, { className: "rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-4 text-sm dark:border-zinc-700 dark:bg-zinc-900", "aria-live": "polite", children: [_jsx(Text, { weight: "semibold", className: "mb-1 block", children: BUNDLE_COPY.detail.ctaDisabled }), _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.detail.ctaHint })] }))] })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: BUNDLE_COPY.detailItemsHeading }), members.length === 0 ? (_jsx(Text, { color: "muted", children: BUNDLE_COPY.detail.emptyMembers })) : (_jsx(Ul, { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: members.map((p, i) => (_jsxs(Li, { className: "flex items-center gap-2 rounded-lg border border-zinc-100 dark:border-zinc-800 px-3 py-2 text-sm", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-zinc-400 w-5", children: ["#", i + 1] }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#"), className: "flex-1 truncate font-medium hover:underline hover:text-primary", children: p.title })] }, p.id))) }))] })] }) }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "lg", align: "start", className: "flex-col md:flex-row", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, rounded: "2xl", surface: "subtle", children: _jsx(Div, { className: "h-full w-full", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "hero", fallback: PLACEHOLDER_EMOJI }) }) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), _jsxs(Text, { size: "sm", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.detail.itemCount(memberCount)] }), _jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: STOCK_BADGE_TEXT[stock] })] }), bundle.description && (_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text-muted)]", size: "sm", weight: "semibold", children: BUNDLE_COPY.detailDescriptionHeading }), _jsx(Text, { className: "whitespace-pre-line", children: bundle.description })] })), onBuyNow ? (_jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow })) : (_jsxs(Div, { textSize: "sm", className: "border-dashed", border: "strong", surface: "muted", rounded: "xl", padding: "md", "aria-live": "polite", children: [_jsx(Text, { weight: "semibold", className: "mb-1 block", children: BUNDLE_COPY.detail.ctaDisabled }), _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.detail.ctaHint })] }))] })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", children: BUNDLE_COPY.detailItemsHeading }), members.length === 0 ? (_jsx(Text, { color: "muted", children: BUNDLE_COPY.detail.emptyMembers })) : (
+                                // audit-variant-ok: members grid Ul — grid grid-cols-1 sm:grid-cols-2 + gap-2 responsive grid layout; Ul lacks grid layout variant
+                                _jsx(Ul, { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: members.map((p, i) => (
+                                    // audit-variant-ok: bundle-member row — Li composite (flex+border+px+py+text-sm) is a Card pattern Li doesn't yet expose; defer to Li.surfaceProps extension
+                                    _jsxs(Li, { className: "flex items-center gap-2 rounded-lg border border-zinc-100 dark:border-zinc-800 px-3 py-2 text-sm", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "w-5", color: "faint", children: ["#", i + 1] }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#"), className: "flex-1 truncate font-medium hover:underline hover:text-primary", children: p.title })] }, p.id))) }))] })] }) }) }) }));
 }

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

@@ -41,13 +41,13 @@ export function BundleDynamicRuleEditor({ value, onChange, disabled = false, })
     const patch = useCallback((next) => onChange({ ...rule, ...next }), [rule, onChange]);
     const patchFilter = useCallback((next) => onChange({ ...rule, filter: { ...rule.filter, ...next } }), [rule, onChange]);
     const tagsValue = (rule.filter.tags ?? []).join(", ");
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.title }), _jsx(Text, { size: "xs", color: "muted", children: BUNDLE_COPY.adminEditor.dynamic.hint })] }), _jsxs(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.categorySlug }), _jsx(CategoryInlineSelect, { value: rule.filter.categorySlug ?? "", onChange: (id) => patchFilter({ categorySlug: id || undefined }), disabled: disabled, placeholder: "Filter by category\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.brandSlug }), _jsx(BrandInlineSelect, { value: rule.filter.brandSlug ?? "", onChange: (id) => patchFilter({ brandSlug: id || undefined }), disabled: disabled, placeholder: "Filter by brand\u2026" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.tags }), _jsx(Input, { type: "text", value: tagsValue, onChange: (e) => {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.title }), _jsx(Text, { size: "xs", color: "muted", children: BUNDLE_COPY.adminEditor.dynamic.hint })] }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.categorySlug }), _jsx(CategoryInlineSelect, { value: rule.filter.categorySlug ?? "", onChange: (id) => patchFilter({ categorySlug: id || undefined }), disabled: disabled, placeholder: "Filter by category\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.brandSlug }), _jsx(BrandInlineSelect, { value: rule.filter.brandSlug ?? "", onChange: (id) => patchFilter({ brandSlug: id || undefined }), disabled: disabled, placeholder: "Filter by brand\u2026" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.tags }), _jsx(Input, { type: "text", value: tagsValue, onChange: (e) => {
                             const parsed = e.target.value
                                 .split(",")
                                 .map((t) => t.trim())
                                 .filter(Boolean);
                             patchFilter({ tags: parsed.length ? parsed : undefined });
-                        }, placeholder: "pokemon, starter-deck", disabled: disabled })] }), _jsxs(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.listingType }), _jsx(Select, { options: LISTING_TYPE_OPTIONS, value: rule.filter.listingType ?? "", onValueChange: (next) => patchFilter({
+                        }, placeholder: "pokemon, starter-deck", disabled: disabled })] }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-3", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.listingType }), _jsx(Select, { options: LISTING_TYPE_OPTIONS, value: rule.filter.listingType ?? "", onValueChange: (next) => patchFilter({
                                     listingType: next === "" ? undefined : next,
                                 }), disabled: disabled, "aria-label": BUNDLE_COPY.adminEditor.dynamic.fields.listingType })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", children: BUNDLE_COPY.adminEditor.dynamic.fields.orderBy }), _jsx(Select, { options: ORDER_BY_OPTIONS.map((o) => ({
                                     label: o.label,

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

@@ -24,23 +24,25 @@ const __O = {
     yAuto: "overflow-y-auto",
 };
 const SEARCH_DEBOUNCE_MS = 250;
-const CLS_ROW_SELECTED = "bg-blue-50 dark:bg-blue-950";
+const CLS_ROW_SELECTED = "bg-info-surface dark:bg-info-surface";
 function renderBundleSelectedChips(props) {
     const { value, metadata, remove } = props;
     if (value.length === 0)
         return null;
-    return (_jsx(Div, { className: `flex flex-wrap gap-2 rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900`, children: value.map((id) => {
+    return (
+    // audit-variant-ok: chips row — flex-wrap layout; Div.layout=flex doesn't auto-wrap
+    _jsx(Div, { layout: "flex", gap: "2", className: `flex-wrap ${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: value.map((id) => {
             const meta = metadata[id];
             const label = meta?.title ?? id;
-            return (_jsxs(Row, { gap: "xs", align: "center", className: "rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs dark:border-zinc-600 dark:bg-zinc-800", children: [_jsx(Text, { size: "xs", className: "max-w-[200px] truncate", children: label }), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": BUNDLE_COPY.picker.removeAria(label), onClick: () => remove(id), children: "\u00D7" })] }, id));
+            return (_jsxs(Row, { textSize: "xs", gap: "xs", align: "center", paddingY: "y-2xs", border: "strong", padding: "x-sm", surface: "default", rounded: "full", children: [_jsx(Text, { size: "xs", className: "max-w-[200px] truncate", children: label }), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": BUNDLE_COPY.picker.removeAria(label), onClick: () => remove(id), children: "\u00D7" })] }, id));
         }) }));
 }
 function renderBundleSearchResults(props) {
     const { results, selectedSet, value, maxItems, toggle, isSearching, searchError, debouncedQuery } = props;
-    return (_jsxs(_Fragment, { children: [searchError && _jsx(Text, { size: "sm", color: "danger", children: searchError }), isSearching && _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.picker.searchingHint }), !isSearching && debouncedQuery.length >= 2 && results.length === 0 && !searchError && (_jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.picker.noMatches(debouncedQuery) })), results.length > 0 && (_jsx(Div, { className: `max-h-72 ${__O.yAuto} rounded-lg border border-zinc-200 dark:border-zinc-700`, children: results.map((r) => {
+    return (_jsxs(_Fragment, { children: [searchError && _jsx(Text, { size: "sm", color: "danger", children: searchError }), isSearching && _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.picker.searchingHint }), !isSearching && debouncedQuery.length >= 2 && results.length === 0 && !searchError && (_jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.picker.noMatches(debouncedQuery) })), results.length > 0 && (_jsx(Div, { className: `max-h-72 ${__O.yAuto}`, rounded: "lg", border: "default", children: results.map((r) => {
                     const isSelected = selectedSet.has(r.id);
                     const atCap = !isSelected && value.length >= maxItems;
-                    return (_jsxs(Row, { gap: "sm", align: "center", className: `border-b border-zinc-100 px-3 py-2 last:border-b-0 dark:border-zinc-800 ${isSelected ? CLS_ROW_SELECTED : ""} ${atCap ? "opacity-50" : ""}`, children: [_jsx(Checkbox, { checked: isSelected, disabled: atCap, onChange: () => toggle(r.id), "aria-label": BUNDLE_COPY.picker.toggleAria(r.title) }), _jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsx(Text, { size: "sm", weight: "medium", children: r.title }), _jsxs(Row, { gap: "sm", children: [_jsx(Text, { size: "xs", color: "muted", children: r.id }), typeof r.priceInPaise === "number" && _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 \u20B9", Math.round(r.priceInPaise / 100).toLocaleString("en-IN")] })] })] })] }, r.id));
+                    return (_jsxs(Row, { border: "subtle", gap: "sm", align: "center", className: `border-b last:border-b-0 ${isSelected ? CLS_ROW_SELECTED : ""} ${atCap ? "opacity-50" : ""}`, padding: "inlineSm", children: [_jsx(Checkbox, { checked: isSelected, disabled: atCap, onChange: () => toggle(r.id), "aria-label": BUNDLE_COPY.picker.toggleAria(r.title) }), _jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsx(Text, { size: "sm", weight: "medium", children: r.title }), _jsxs(Row, { gap: "sm", children: [_jsx(Text, { size: "xs", color: "muted", children: r.id }), typeof r.priceInPaise === "number" && _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 \u20B9", Math.round(r.priceInPaise / 100).toLocaleString("en-IN")] })] })] })] }, r.id));
                 }) }))] }));
 }
 export function BundleItemsPicker({ value, onChange, fetchProducts, minItems = BUNDLE_MIN_ITEMS, maxItems = BUNDLE_MAX_ITEMS, initialMetadata = {}, }) {
@@ -77,6 +79,7 @@ export function BundleItemsPicker({ value, onChange, fetchProducts, minItems = B
                 return next;
             });
         })
+            // audit-unknown-ok: error-handler entry point — accepts thrown values of any shape
             .catch((err) => {
             if (cancelled)
                 return;
@@ -108,7 +111,7 @@ export function BundleItemsPicker({ value, onChange, fetchProducts, minItems = B
     const tooMany = value.length > maxItems;
     const countLabel = BUNDLE_COPY.picker.selectedCount(value.length, minItems, maxItems);
     const countVariant = tooFew || tooMany ? "warning" : "success";
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.picker.title }), _jsx(Badge, { variant: countVariant, children: countLabel })] }), renderBundleSelectedChips({ value, metadata, remove }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "search", placeholder: BUNDLE_COPY.picker.searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": BUNDLE_COPY.picker.searchAriaLabel }), renderBundleSearchResults({ results, selectedSet, value, maxItems, toggle, isSearching, searchError, debouncedQuery })] })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.picker.title }), _jsx(Badge, { variant: countVariant, children: countLabel })] }), renderBundleSelectedChips({ value, metadata, remove }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "search", placeholder: BUNDLE_COPY.picker.searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": BUNDLE_COPY.picker.searchAriaLabel }), renderBundleSearchResults({ results, selectedSet, value, maxItems, toggle, isSearching, searchError, debouncedQuery })] })] }));
 }
 /**
  * Default fetcher hitting the public /api/products endpoint. Consumers can
@@ -121,6 +124,7 @@ export async function defaultBundleItemsFetch(query) {
         throw new Error(`Search failed: ${res.status}`);
     }
     const data = (await res.json());
+    // audit-unknown-ok: picker API response items
     const rawItems = data?.data?.items ?? data?.items ?? [];
     return rawItems
         .map((r) => {

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

@@ -23,5 +23,5 @@ export async function BundlesListView({ searchParams = {}, onBuyNow, }) {
     const bundles = storeId
         ? all.filter((c) => c.createdByStoreId === storeId)
         : all;
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-2 text-3xl font-semibold text-zinc-900 dark:text-zinc-100", children: "Collectible Bundles" }), _jsx(Text, { className: "mb-6 text-sm text-[var(--appkit-color-text-muted)]", children: "Curated multi-product bundles \u2014 Pok\u00E9mon starter sets, Beyblade tournament packs, Hot Wheels collector boxes and more. One price, one checkout, one shipment." }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoryBundlesListing, { initialBundles: bundles, onBuyNow: onBuyNow }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-2", color: "primary", size: "3xl", weight: "semibold", children: "Collectible Bundles" }), _jsx(Text, { className: "mb-6 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Curated multi-product bundles \u2014 Pok\u00E9mon starter sets, Beyblade tournament packs, Hot Wheels collector boxes and more. One price, one checkout, one shipment." }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoryBundlesListing, { initialBundles: bundles, onBuyNow: onBuyNow }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -3,7 +3,7 @@ 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 { Div, ListingFilterDrawer, ListingToolbar, Pagination, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
 import { CategoryFilters } from "./CategoryFilters";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
@@ -21,15 +21,15 @@ function renderCategoryGrid(props) {
     const { isLoading, categories, view, activeSearch, activeTab, brandsOnly } = props;
     const isBrandView = activeTab === "brands" || brandsOnly;
     if (isLoading) {
-        return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3}.5 space-y-2`, children: [_jsx(Div, { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) }));
+        return (_jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-[4/3]", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}.5`, gap: "sm", children: [_jsx(Div, { className: "h-3.5 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     if (categories.length === 0) {
-        return (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch ? `No ${isBrandView ? "brands" : "categories"} matching "${activeSearch}"` : isBrandView ? "No brands found" : "No categories found" }));
+        return (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: activeSearch ? `No ${isBrandView ? "brands" : "categories"} matching "${activeSearch}"` : isBrandView ? "No brands found" : "No categories found" }));
     }
     if (view === "list") {
-        return (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
+        return (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
     }
-    return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
+    return (_jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
 }
 function renderCategoryFilterDrawer(props) {
     const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;
@@ -84,6 +84,7 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
         buildSieveParams: () => "",
         buildSearchParams: () => "",
         params: new URLSearchParams(),
+        // audit-unknown-ok: TS structural escape — table-state type
     }), [pendingFilters]);
     const openFilters = useCallback(() => {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
@@ -144,10 +145,10 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
         { key: "categories", label: "Categories" },
         { key: "brands", label: "Brands" },
     ];
-    return (_jsxs(Div, { className: "min-h-screen", children: [!brandsOnly && (_jsx(Div, { className: "flex gap-1 border-b border-zinc-200 dark:border-slate-700 mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
+    return (_jsxs(Div, { className: "min-h-screen", children: [!brandsOnly && (_jsx(Row, { gap: "xs", border: "default", className: "border-b mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
                         "px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
                         activeTab === tab.key
                             ? "border-primary text-primary dark:text-primary-400 dark:border-primary-400"
                             : "border-transparent text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
-                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: renderCategoryGrid({ isLoading, categories, view, activeSearch, activeTab, brandsOnly }) }), renderCategoryFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
+                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryGrid({ isLoading, categories, view, activeSearch, activeTab, brandsOnly }) }), renderCategoryFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
 }

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

@@ -47,6 +47,7 @@ export async function CategoriesIndexPageView({ searchParams = {} }) {
         ...(filters ? { filters } : {}),
     })
         .catch(() => null);
+    // audit-unknown-ok: TS structural escape — CategoryItem
     const initialData = (result?.items ?? []);
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Categories" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoriesIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Categories" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoriesIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -8,9 +8,9 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * All data is server-fetched; this component owns URL-state driven
  * sort/search/filter/pagination on top of the initial snapshot.
  */
-import { sortBy } from "@mohasinac/appkit";
+import { Row, Stack, sortBy } from "@mohasinac/appkit";
 import { useMemo, useCallback, useState } from "react";
-import { Div, Span, Text } from "../../../ui";
+import { Div, Label, Span, Text } from "../../../ui";
 import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { BundleBuyNowCta } from "./BundleBuyNowCta";
@@ -84,8 +84,10 @@ export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, })
     const pageItems = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
     const filterActiveCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
     if (filtered.length === 0 && !query && !showOutOfStock) {
-        return (_jsx(Div, { className: "rounded-2xl border border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700", children: _jsxs(Text, { color: "muted", children: ["No bundles available", brandName ? ` for ${brandName}` : "", " yet."] }) }));
+        return (_jsx(Div, { className: "border-dashed text-center", padding: "y-4xl", rounded: "2xl", border: "default", children: _jsxs(Text, { color: "muted", children: ["No bundles available", brandName ? ` for ${brandName}` : "", " yet."] }) }));
     }
     return (_jsxs(Div, { className: "min-h-[40vh]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search bundles...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
-                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: pageItems.length === 0 ? (_jsxs(Text, { className: "py-16 text-center text-sm text-zinc-500 dark:text-zinc-400", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: pageItems.map((bundle) => (_jsxs(Div, { className: "flex flex-col", children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { surface: "default", className: "border-t border-zinc-100 px-3 pt-2 pb-3 dark:border-zinc-800 -mt-px rounded-b-xl border border-t-0 border-zinc-200 dark:border-zinc-800", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Div, { className: `space-y-4 ${__P.p4}`, children: _jsxs("label", { className: "flex items-center justify-between gap-3 cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-zinc-700 dark:text-zinc-300", children: "Show out-of-stock bundles" }), _jsx("button", { type: "button", role: "switch", "aria-checked": pendingShowOutOfStock, onClick: () => setPendingShowOutOfStock((v) => !v), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${pendingShowOutOfStock ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${pendingShowOutOfStock ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }) })] }));
+                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: pageItems.length === 0 ? (_jsxs(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "center", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: pageItems.map((bundle) => (_jsxs(Stack, { children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (
+                            // audit-variant-ok: card footer CTA wrapper — explicit border-top reset + rounded-b-xl asymmetric corner; Div lacks asymmetric corner/border variants
+                            _jsx(Div, { border: "default", surface: "default", className: "border-t border-zinc-100 pt-2 pb-3 -mt-px rounded-b-xl border-t-0 dark:border-zinc-800", padding: "x-sm", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Label, { layout: "flex", gap: "lg", className: "justify-between cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", color: "muted", children: "Show out-of-stock bundles" }), _jsx("button", { type: "button", role: "switch", "aria-checked": pendingShowOutOfStock, onClick: () => setPendingShowOutOfStock((v) => !v), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${pendingShowOutOfStock ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx(Span, { className: `inline-block h-3.5 w-3.5 transform shadow-sm transition-transform duration-200 ${pendingShowOutOfStock ? "translate-x-[19px]" : "translate-x-[3px]"}`, rounded: "full", surface: "default" }) })] }) }) })] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveAnd, sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+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";
@@ -101,6 +101,7 @@ export async function CategoryDetailPageView({ slug }) {
         itemsSold: s.stats?.itemsSold,
         totalReviews: s.stats?.totalReviews,
         averageRating: s.stats?.averageRating,
+        // audit-unknown-ok: TS structural escape — primitive cast
         createdAt: s.createdAt,
     }));
     const productCount = productsResult?.total ?? category?.metrics?.productCount ?? 0;
@@ -114,9 +115,19 @@ export async function CategoryDetailPageView({ slug }) {
     const hasCover = Boolean(coverImage);
     return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", 
                                 // audit-inline-style-ok: dynamic image URL
-                                style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { className: "absolute inset-0 bg-black/55" })] })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 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-zinc-500 dark:text-zinc-400 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-zinc-900 dark:text-zinc-100", children: category?.name ?? slug })] }), _jsx(Heading, { level: 1, className: `text-3xl md:text-4xl font-bold mb-2 ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { className: `text-base max-w-2xl mb-4 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: category.description })), _jsxs(Div, { className: "flex flex-wrap gap-2", children: [productCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"}`, children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), childCategories.length > 0 && (_jsx(Section, { surface: "default", className: "border-b border-zinc-100 dark:border-zinc-800", children: _jsx(Div, { className: "max-w-7xl mx-auto px-4 py-3", children: _jsx(Div, { className: `flex gap-2.5 ${__O.xAuto} pb-1`, 
+                                style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto ${hasCover ? "py-12" : "py-8"}`, padding: "x-md", children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 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-zinc-500 dark:text-zinc-400 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-zinc-900 dark:text-zinc-100", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-zinc-900 dark:text-zinc-50"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (
+                            // audit-variant-ok: category description — conditional muted-zinc fallback when no cover; inverse default keeps over-image legibility
+                            _jsx(Text, { color: "inverse", className: `max-w-2xl mb-4 ${hasCover ? "/80" : "text-zinc-600 dark:text-zinc-400"}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR tinted primary (no cover); no white-overlay surface variant
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 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 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR warning surface (no cover); compound bg cannot use Span.surface
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning"}`, rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR info surface (no cover); compound bg cannot use Span.surface
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-info-surface text-info dark:bg-info-surface dark:text-info"}`, rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (
+                                    // audit-variant-ok: count chip — conditional translucent-white (cover) OR success surface (no cover); compound bg cannot use Span.surface
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-success-surface text-success dark:bg-success-surface dark:text-success"}`, rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: _jsx(Div, { layout: "flex", gap: "2", className: `.5 ${__O.xAuto}`, padding: "b-2xs", 
                         // audit-inline-style-ok: dynamic CSS
-                        style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
+                        style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", color: "muted", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
                             products: productCount,
                             auctions: auctionCount,
                             preOrders: preOrderCount,

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

@@ -54,7 +54,7 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
             default: return undefined;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `flex border-b border-zinc-200 dark:border-slate-700 mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "flex", border: "default", className: `border-b mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
                         ? "border-primary text-primary"
                         : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: tabLabel(t.label, countFor(t.id)) }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

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

@@ -38,11 +38,11 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
     return (_jsxs(Div, { className: stackClassName, children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs(Div, { className: "appkit-form-field", children: [_jsx(Label, { className: "appkit-form-field__label", children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description" }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
                     type: "category-image",
                     name: category.name || "category",
-                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs(Div, { children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: L.categoryImage }), _jsx(Div, { className: `relative h-32 w-40 ${__O.hidden} rounded`, children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
+                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs(Div, { children: [_jsx(Label, { className: "block mb-2", size: "sm", weight: "medium", children: L.categoryImage }), _jsx(Div, { className: `relative h-32 w-40 ${__O.hidden}`, rounded: "default", children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
                     { value: "", label: L.noneRoot },
                     ...flattenCategories(allCategories).map((cat) => ({
                         value: cat.id,
-                        label: `${"  ".repeat(cat.tier)}${cat.name}`,
+                        label: `${" ".repeat(cat.tier)}${cat.name}`,
                         disabled: cat.id === category.id,
                     })),
                 ] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { checked: category.isActive || false, onChange: (e) => update({ isActive: e.target.checked }), disabled: isReadonly, label: L.enabled }), _jsx(Checkbox, { checked: category.showOnHomepage || false, onChange: (e) => update({ showOnHomepage: e.target.checked }), disabled: isReadonly, label: L.showOnHomepage }), _jsx(Checkbox, { checked: category.isBrand || false, onChange: (e) => {

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

@@ -1,22 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
-import { Div, Span, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Div, Row, Span, Stack, Text } from "../../../ui";
 const __P = {
     p3: "p-3",
 };
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-amber-400 p-1 leading-none";
+const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-warning-surface p-1 leading-none";
 export function CategoryCard({ category, href, onClick, className = "", }) {
     const productCount = category.metrics?.productCount ?? category.productCount ?? 0;
-    const inner = (_jsxs(Div, { className: "flex h-full flex-col", children: [_jsxs(Div, { className: `relative aspect-[4/3] w-full ${__O.hidden} bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700 flex-shrink-0`, children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", 
+    const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", 
                         // audit-inline-style-ok: dynamic image URL
                         style: { backgroundImage: `url(${category.display.coverImage})` } })) : category.display?.color ? (_jsx(Div, { className: "h-full w-full opacity-80", 
                         // audit-inline-style-ok: runtime theme color
-                        style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center text-4xl", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p3}.5`, children: [_jsx(Text, { className: `font-semibold text-sm leading-snug ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-900 dark:text-white`, children: category.name }), category.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400 flex-1`, children: category.description })), _jsxs(Div, { className: "mt-2 flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-1 rounded-md border border-zinc-200 dark:border-zinc-700 px-2.5 py-1 text-zinc-600 dark:text-zinc-300 group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+                        style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-neutral-900 dark:text-neutral-100 dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
     const cardClass = `group relative flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));
@@ -27,7 +26,7 @@ export function CategoryCard({ category, href, onClick, className = "", }) {
 }
 export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
     if (categories.length === 0) {
-        return (_jsx(Text, { className: "py-12 text-center text-sm text-neutral-500 dark:text-zinc-500", children: emptyLabel }));
+        return (_jsx(Text, { paddingY: "3xl", className: "text-neutral-500 dark:text-neutral-400", size: "sm", align: "center", children: emptyLabel }));
     }
-    return (_jsx(Div, { className: `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
+    return (_jsx(Div, { layout: "grid", gap: "4", className: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
 }