@mohasinac/appkit 4.10.0 → 4.11.1

package/dist/features/blog/schemas/index.d.ts

@@ -28,6 +28,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -35,6 +36,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -42,6 +44,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>>;
     contentImages: z.ZodOptional<z.ZodArray<z.ZodObject<{
         url: z.ZodString;
@@ -50,6 +53,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -57,6 +61,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -64,6 +69,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>;
     additionalImages: z.ZodOptional<z.ZodArray<z.ZodObject<{
         url: z.ZodString;
@@ -72,6 +78,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -79,6 +86,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -86,6 +94,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>;
     category: z.ZodString;
     tags: z.ZodArray<z.ZodString, "many">;
@@ -135,6 +144,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | undefined;
     additionalImages?: {
         type: "video" | "image" | "file";
@@ -143,6 +153,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
@@ -153,6 +164,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     authorAvatar?: string | undefined;
 }, {
@@ -185,6 +197,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | undefined;
     additionalImages?: {
         type: "video" | "image" | "file";
@@ -193,6 +206,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
@@ -203,6 +217,7 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     authorAvatar?: string | undefined;
 }>;
@@ -235,6 +250,7 @@ export declare const blogPostSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -242,6 +258,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -249,6 +266,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, z.ZodEffects<z.ZodString, {
         url: string;
         type: "image";
@@ -259,6 +277,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | {
         url: string;
         type: "image";
@@ -269,6 +288,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | null | undefined>;
     contentImages: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodObject<{
         url: z.ZodString;
@@ -277,6 +297,7 @@ export declare const blogPostSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -284,6 +305,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -291,6 +313,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>>;
     additionalImages: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodObject<{
         url: z.ZodString;
@@ -299,6 +322,7 @@ export declare const blogPostSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -306,6 +330,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -313,6 +338,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>>;
     category: z.ZodEnum<["news", "tips", "guides", "updates", "community"]>;
     tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -341,6 +367,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | {
         url: string;
         type: "image";
@@ -352,6 +379,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[];
     contentImages: {
         type: "video" | "image" | "file";
@@ -360,6 +388,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[];
     content?: string | undefined;
     createdAt?: string | undefined;
@@ -395,6 +424,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     } | null | undefined;
     authorId?: string | undefined;
     authorName?: string | undefined;
@@ -407,6 +437,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
@@ -417,6 +448,7 @@ export declare const blogPostSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     authorAvatar?: string | undefined;
 }>;

package/dist/features/catalogue/components/AdminCatalogueApprovalsView.js

@@ -4,15 +4,24 @@ import React from "react";
 import { sortBy } from "@mohasinac/appkit/client";
 import { useQueryClient } from "@tanstack/react-query";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import { Button, Modal, Row, Stack, Text, Textarea } from "../../../ui";
+import { Button, Modal, RecordDetailModal, Row, Stack, Text, Textarea } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { apiClient } from "../../../http";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
+/** The submitted item's photos — the whole point of a visual approval. */
+function toPhotoEntries(raw) {
+    const images = Array.isArray(raw.images) ? raw.images : [];
+    return images
+        .filter((i) => typeof i === "string")
+        .map((url, i) => ({ image: url, title: `Photo ${i + 1}` }));
+}
 export function AdminCatalogueApprovalsView() {
     const queryClient = useQueryClient();
     const [rejectTarget, setRejectTarget] = React.useState(null);
     const [rejectReason, setRejectReason] = React.useState("");
+    const [selected, setSelected] = React.useState(null);
     const invalidate = () => queryClient.invalidateQueries({ queryKey: ["admin", "catalogue-approvals"] });
     const approveMutation = useApiMutation({
         successMessage: "Approved and listed",
@@ -44,10 +53,29 @@ export function AdminCatalogueApprovalsView() {
             secondary: toStringValue(item.ownerId, ""),
             status: toStringValue(item.listingStatus, "pending_admin_approval"),
             updatedAt: toRelativeDate(item.submittedForApprovalAt ?? item.createdAt),
+            _raw: item,
         })),
         getTotal: (response, mappedRows) => (typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length),
         buildFilters: () => undefined,
-        renderRowActions: (row) => (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { size: "sm", isLoading: approveMutation.isPending, onClick: () => approveMutation.mutate(row.id), children: "Approve" }), _jsx(Button, { size: "sm", variant: "danger", onClick: () => setRejectTarget(row.id), children: "Reject" })] })),
+        // Approve/Reject used to be the ONLY row affordance — an admin was asked
+        // to accept or refuse a submission whose photos, description and price
+        // were never rendered anywhere. "View" opens those first.
+        onRowClick: (row) => setSelected(row),
+        renderRowActions: (row) => (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => setSelected(row), children: "View" }), _jsx(Button, { size: "sm", isLoading: approveMutation.isPending, onClick: () => approveMutation.mutate(row.id), children: "Approve" }), _jsx(Button, { size: "sm", variant: "danger", onClick: () => setRejectTarget(row.id), children: "Reject" })] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(Modal, { isOpen: !!rejectTarget, onClose: () => setRejectTarget(null), title: "Reject this catalogue listing?", size: "sm", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", children: "The owner will see this reason." }), _jsx(Textarea, { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), rows: 3, placeholder: "Reason for rejection" }), _jsx(Button, { isLoading: rejectMutation.isPending, disabled: !rejectReason.trim(), variant: "danger", onClick: () => rejectMutation.mutate(), children: "Reject" })] }) })] }));
+    const raw = selected?._raw ?? {};
+    const price = typeof raw.price === "number" ? raw.price : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: Boolean(selected), onClose: () => setSelected(null), title: selected?.primary ?? "Catalogue Submission", badges: [{ label: selected?.status ?? "pending", variant: "warning" }], description: toStringValue(raw.description, "") || undefined, fields: [
+                    { label: "Submitted by", value: toStringValue(raw.ownerId, "—") },
+                    { label: "Estimated price", value: price !== undefined ? formatCurrency(price) : "—" },
+                    { label: "Quantity", value: String(raw.quantity ?? 1) },
+                    { label: "Condition", value: toStringValue(raw.condition, "—") },
+                    { label: "Submitted", value: selected?.updatedAt ?? "—" },
+                ], items: { heading: "Photos", entries: toPhotoEntries(raw) }, footer: selected ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "danger", onClick: () => {
+                                setRejectTarget(selected.id);
+                                setSelected(null);
+                            }, children: "Reject" }), _jsx(Button, { isLoading: approveMutation.isPending, onClick: () => {
+                                approveMutation.mutate(selected.id);
+                                setSelected(null);
+                            }, children: "Approve" })] })) : null }), _jsx(Modal, { isOpen: !!rejectTarget, onClose: () => setRejectTarget(null), title: "Reject this catalogue listing?", size: "sm", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", children: "The owner will see this reason." }), _jsx(Textarea, { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), rows: 3, placeholder: "Reason for rejection" }), _jsx(Button, { isLoading: rejectMutation.isPending, disabled: !rejectReason.trim(), variant: "danger", onClick: () => rejectMutation.mutate(), children: "Reject" })] }) })] }));
 }

package/dist/features/catalogue/components/CatalogueItemEditorView.js

@@ -4,6 +4,7 @@ import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { Alert, Button, FieldInput, FieldSelect, FieldTextarea, Form, Grid, Row, Span, Stack, Toggle } from "../../../ui";
+import { FormErrorSummary } from "../../../ui/forms";
 import { MediaUploadList } from "../../media/upload/MediaUploadList";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -61,7 +62,7 @@ export function CatalogueItemEditorView({ item, onSaved }) {
             onSaved?.(saved.id);
         },
     });
-    return (_jsx(Form, { schema: createCatalogueItemSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(Stack, { gap: "md", children: [item?.listingStatus && item.listingStatus !== "not_listed" && (_jsxs(Alert, { variant: "info", children: ["This item is ", item.listingStatus.replace(/_/g, " "), item.listingStatus === "rejected" && item.rejectionReason ? `: ${item.rejectionReason}` : "."] })), _jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "title", label: "Title", required: true, value: title, onChange: setTitle }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: condition, onChange: setCondition, options: CONDITION_OPTIONS }), _jsx(FieldInput, { name: "price", label: "Estimated resale price (\u20B9)", type: "number", min: "0", value: price, onChange: setPrice }), _jsx(FieldInput, { name: "quantity", label: "Quantity", type: "number", min: "1", value: quantity, onChange: setQuantity })] }), _jsx(FieldTextarea, { name: "description", label: "Description", value: description, onChange: setDescription, rows: 3 }), _jsx(MediaUploadList, { label: "Photos", value: galleryFields, onChange: (fields) => setImages(fields.map((f) => f.url)), onUpload: handleUpload, accept: "image/*", maxItems: 8, helperText: "Photos older than 30 days must be refreshed before this item can be listed." }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Toggle, { checked: visibility === "public", onChange: (checked) => setVisibility(checked ? "public" : "private"), size: "sm" }), _jsx(Span, { children: visibility === "public" ? "Public — visible on your profile" : "Private — only you can see it" })] }), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
+    return (_jsx(Form, { schema: createCatalogueItemSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(Stack, { gap: "md", children: [item?.listingStatus && item.listingStatus !== "not_listed" && (_jsxs(Alert, { variant: "info", children: ["This item is ", item.listingStatus.replace(/_/g, " "), item.listingStatus === "rejected" && item.rejectionReason ? `: ${item.rejectionReason}` : "."] })), _jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "title", label: "Title", required: true, value: title, onChange: setTitle }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: condition, onChange: setCondition, options: CONDITION_OPTIONS }), _jsx(FieldInput, { name: "price", label: "Estimated resale price (\u20B9)", type: "number", min: "0", value: price, onChange: setPrice }), _jsx(FieldInput, { name: "quantity", label: "Quantity", type: "number", min: "1", value: quantity, onChange: setQuantity })] }), _jsx(FieldTextarea, { name: "description", label: "Description", value: description, onChange: setDescription, rows: 3 }), _jsx(MediaUploadList, { label: "Photos", value: galleryFields, onChange: (fields) => setImages(fields.map((f) => f.url)), onUpload: handleUpload, accept: "image/*", maxItems: 8, helperText: "Photos older than 30 days must be refreshed before this item can be listed." }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Toggle, { checked: visibility === "public", onChange: (checked) => setVisibility(checked ? "public" : "private"), size: "sm" }), _jsx(Span, { children: visibility === "public" ? "Public — visible on your profile" : "Private — only you can see it" })] }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
                         const parsed = createCatalogueItemSchema.safeParse({
                             title,
                             images,

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

@@ -4,11 +4,14 @@ import { sortBy } from "@mohasinac/appkit";
 import Link from "next/link";
 import { categoriesRepository, productRepository, } from "../../../repositories";
 import { ROUTES } from "../../../next";
-import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../../ui";
+import { Anchor, Container, Div, Dl, Dt, Dd, Heading, Main, Nav, Section, Span, Stack, Text } from "../../../ui";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 import { MediaImage } from "../../media/MediaImage";
 import { BrandDetailTabs } from "./BrandDetailTabs";
 import { CategoryGrid } from "./CategoryGrid";
+import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsForBrand } from "../../../_internal/server/features/grouped/data";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -17,7 +20,7 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         .getCategoryBySlug(slug)
         .catch(() => undefined)));
     const brandName = brand?.name;
-    const [productsResult, auctionsResult, preOrdersResult, prizeDrawsResult, allBundles, activeBrands] = await Promise.all([
+    const [productsResult, auctionsResult, preOrdersResult, prizeDrawsResult, allBundles, activeBrands, groupedListings] = await Promise.all([
         brandName
             ? productRepository
                 .list({
@@ -59,22 +62,21 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
                 .catch(() => null)
             : Promise.resolve(null),
         // SB-UNI-D — bundles are categoryType:"bundle" rows on the categories
-        // collection. We pull all bundle categories and filter client-side by
-        // brand affinity until the bundle storage carries an explicit brandSlug.
-        brandName
+        // collection, tagged to a brand via the real brandSlug field (added
+        // 2026-08-21 — previously a fragile seo.keywords string-match heuristic).
+        // We pull all bundle categories and filter client-side by brandSlug —
+        // no dedicated repository query needed at this catalog's bundle volume.
+        brand?.slug
             ? categoriesRepository
                 .listByType("bundle", { activeOnly: true, limit: 50 })
                 .catch(() => [])
             : Promise.resolve([]),
         // Related brands — every other active brand row, excluding this one.
         categoriesRepository.findActiveBrands().catch(() => []),
+        brand?.slug ? getGroupsForBrand(brand.slug).catch(() => []) : Promise.resolve([]),
     ]);
-    const brandLower = brandName?.toLowerCase();
-    const brandBundles = brandLower
-        ? allBundles.filter((b) => {
-            const seo = b.seo?.keywords?.map((k) => k.toLowerCase()) ?? [];
-            return seo.includes(brandLower);
-        })
+    const brandBundles = brand?.slug
+        ? allBundles.filter((b) => b.brandSlug === brand.slug)
         : [];
     const relatedBrands = activeBrands.filter((b) => b.id !== brand?.id);
     const coverImage = brand?.display?.coverImage;
@@ -95,5 +97,5 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         counts.preOrders +
         counts.prizeDraws +
         counts.bundles;
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] 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-[var(--appkit-color-text)]", 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-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [counts.products > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [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: "start", children: "Brand not found." })) }) }), relatedBrands.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] 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-[var(--appkit-color-text)]", 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-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [counts.products > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [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" }))] })] })] }), (brand?.brandWebsite || brand?.brandCountry || brand?.brandFounded) && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "sm", weight: "semibold", color: "muted", transform: "uppercase", children: "About this brand" }), _jsxs(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden max-w-lg", children: [brand?.brandWebsite && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Website" }), _jsx(Dd, { className: "flex-1", children: _jsx(Anchor, { href: brand.brandWebsite, tone: "brand", underline: "hover", children: brand.brandWebsite }) })] })), brand?.brandCountry && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Country" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandCountry })] })), brand?.brandFounded && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Founded" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandFounded })] }))] })] }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: brand?.highlights, faqs: brand?.faqs }), _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: "start", children: "Brand not found." })) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedBrands.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
 }

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

@@ -8,6 +8,9 @@ import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../.
 import { MediaImage } from "../../media/MediaImage";
 import { CategoryDetailTabs } from "./CategoryDetailTabs";
 import { CategoryGrid } from "./CategoryGrid";
+import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
@@ -25,7 +28,7 @@ export async function CategoryDetailPageView({ slug }) {
         ? await categoriesRepository.getDescendantIds(category.id).catch(() => [])
         : [];
     const categoriesIn = category?.id ? [category.id, ...descendantIds] : null;
-    const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories] = await Promise.all([
+    const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories, groupedListings] = await Promise.all([
         categoriesIn
             ? productRepository
                 .list({
@@ -82,6 +85,7 @@ export async function CategoryDetailPageView({ slug }) {
         category?.rootId
             ? categoriesRepository.getCategoriesByRootId(category.rootId).catch(() => [])
             : Promise.resolve([]),
+        category?.slug ? getGroupsForCategory(category.slug).catch(() => []) : Promise.resolve([]),
     ]);
     const relatedCategories = rootSiblingCategories.filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"));
     // Stores tab — query stores whose storeCategory matches this category or any child
@@ -126,7 +130,7 @@ export async function CategoryDetailPageView({ slug }) {
     const storeCount = categoryStores.length;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), 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} [scrollbar-width:none]`, padding: "b-2xs", children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: _jsx(Div, { layout: "flex", gap: "2", className: `.5 ${__O.xAuto} [scrollbar-width:none]`, padding: "b-2xs", children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
                             // audit-responsive-wrap-ok: deliberate horizontal-scroll chip row (parent has overflow-x-auto) — each chip staying single-line is the intended design, not hidden content
                             className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] px-[var(--appkit-space-4)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] 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,
@@ -135,5 +139,5 @@ export async function CategoryDetailPageView({ slug }) {
                             prizeDraws: prizeDrawCount,
                             bundles: bundleCount,
                             stores: storeCount,
-                        } }) }) }), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
+                        } }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
 }

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

@@ -0,0 +1,14 @@
+export interface CategoryHighlightsAndFaqSectionProps {
+    highlights?: string[];
+    faqs?: {
+        question: string;
+        answer: string;
+    }[];
+}
+/**
+ * Shared "why shop here" highlights + FAQ accordion, rendered on both
+ * category and brand detail pages — the only editorial content either page
+ * has beyond a one-line description (see CategoryDisplay's field list).
+ * Renders nothing when both arrays are empty/absent.
+ */
+export declare function CategoryHighlightsAndFaqSection({ highlights, faqs }: CategoryHighlightsAndFaqSectionProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Heading, Li, Section, Span, Stack, Ul } from "../../../ui";
+import { FAQAccordion } from "../../faq/components/FAQAccordion";
+/**
+ * Shared "why shop here" highlights + FAQ accordion, rendered on both
+ * category and brand detail pages — the only editorial content either page
+ * has beyond a one-line description (see CategoryDisplay's field list).
+ * Renders nothing when both arrays are empty/absent.
+ */
+export function CategoryHighlightsAndFaqSection({ highlights, faqs }) {
+    const hasHighlights = Boolean(highlights && highlights.length > 0);
+    const hasFaqs = Boolean(faqs && faqs.length > 0);
+    if (!hasHighlights && !hasFaqs)
+        return null;
+    const faqItems = (faqs ?? []).map((f, i) => ({
+        id: `faq-${i}`,
+        question: f.question,
+        answer: { text: f.answer, format: "plain" },
+        category: "general",
+    }));
+    return (_jsx(Section, { padding: "y-lg", border: "subtle", className: "border-t", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "xl", children: [hasHighlights && (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: "Why shop here" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: highlights.map((h, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), h] }, i))) })] })), hasFaqs && (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: "Frequently Asked Questions" }), _jsx(FAQAccordion, { faqs: faqItems })] }))] }) }) }));
+}

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

@@ -9,10 +9,6 @@ export interface CategoryProductsViewProps {
     initialCategory?: CategoryItem;
     /** Initial SSR child categories */
     initialChildren?: CategoryItem[];
-    labels?: {
-        emptyTitle?: string;
-        emptyDescription?: string;
-    };
     /** Optional UrlTable-compatible state source for shared filter/sort controls */
     table?: UrlTable;
     /** Filter/sort preset for admin/seller/public listing behavior */
@@ -46,4 +42,4 @@ export interface CategoryProductsViewProps {
     isLoading?: boolean;
     className?: string;
 }
-export declare function CategoryProductsView({ labels: _labels, table, filterVariant, sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category, children: childCategories, total, isLoading, className, }: CategoryProductsViewProps): React.JSX.Element;
+export declare function CategoryProductsView({ table, filterVariant, sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category, children: childCategories, total, isLoading, className, }: CategoryProductsViewProps): React.JSX.Element;

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

@@ -4,7 +4,7 @@ import React from "react";
 import { Div, Heading, Input, SlottedListingView, Stack, Text } from "../../../ui";
 import { CategoryFilters } from "./CategoryFilters";
 import { CategorySortSelect } from "./CategorySortSelect";
-export function CategoryProductsView({ labels: _labels = {}, table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
+export function CategoryProductsView({ table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
     const [search, setSearch] = React.useState("");
     const [sort, setSort] = React.useState("-createdAt");
     const [viewMode, setViewMode] = React.useState("grid");

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

@@ -1,12 +1,21 @@
 "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";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
+import { z } from "zod";
 import { useCategories, useCreateCategory } from "../hooks/useCategorySelector";
 import { useMessage } from "../../../react";
 import { flattenCategories } from "../types";
 import { DrawerFormFooter } from "../../admin/components/DrawerFormFooter";
 import { CategoryForm } from "./CategoryForm";
+import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
+// Form-input subset — `categoryFirestoreSchema` (categories schemas) models
+// the full stored document (id, timestamps, computed metrics) which this
+// create-draft never has.
+const categoryDraftSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    slug: z.string().optional(),
+});
 const DEFAULT_LABELS = {
     selectPlaceholder: "Select category…",
     addCategory: "+ Add category",
@@ -21,6 +30,11 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
         parentId: null,
         order: 0,
     });
+    const { shellCtx, validate } = useFormShellState(categoryDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     const { mutate, isPending: isLoading } = useCreateCategory({
         onSuccess: (res) => {
             showSuccess(labels.successCreated);
@@ -33,7 +47,7 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
             return;
         mutate(draft);
     }, [draft, mutate]);
-    return (_jsxs(Div, { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Div, { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(FormErrorSummary, {}), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }) }));
 }
 export function CategorySelectorCreate({ value, onChange, disabled = false, label, labels = {}, stackClassName = "space-y-4", }) {
     const [drawerOpen, setDrawerOpen] = useState(false);