@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/features/auth/permissions/constants.d.ts

@@ -11,7 +11,7 @@
  * Permission naming: admin:resource:action
  * Ban action naming: plain verb phrase — write_reviews, place_bids, etc.
  */
-export type Permission = "admin:dashboard:view" | "admin:users:read" | "admin:users:write" | "admin:users:delete" | "admin:user-bans:read" | "admin:user-bans:write" | "admin:products:read" | "admin:products:write" | "admin:products:delete" | "admin:orders:read" | "admin:orders:write" | "admin:returns:read" | "admin:returns:write" | "admin:stores:read" | "admin:stores:write" | "admin:store-addresses:read" | "admin:addresses:read" | "admin:addresses:write" | "admin:analytics:view" | "admin:payouts:read" | "admin:payouts:write" | "admin:categories:read" | "admin:categories:write" | "admin:categories:delete" | "admin:brands:read" | "admin:brands:write" | "admin:brands:delete" | "admin:coupons:read" | "admin:coupons:write" | "admin:coupons:delete" | "admin:deals:read" | "admin:deals:write" | "admin:featured:read" | "admin:featured:write" | "admin:reviews:read" | "admin:reviews:write" | "admin:reviews:delete" | "admin:blog:read" | "admin:blog:write" | "admin:blog:delete" | "admin:blog:publish" | "admin:bids:read" | "admin:bids:write" | "admin:media:read" | "admin:media:write" | "admin:media:delete" | "admin:site:read" | "admin:site:write" | "admin:settings:write" | "admin:navigation:read" | "admin:navigation:write" | "admin:sections:read" | "admin:sections:write" | "admin:carousel:read" | "admin:carousel:write" | "admin:carousel:delete" | "admin:ads:read" | "admin:ads:write" | "admin:ads:delete" | "admin:faqs:read" | "admin:faqs:write" | "admin:faqs:delete" | "admin:tester-checklist:read" | "admin:tester-checklist:write" | "admin:tester-checklist:delete" | "admin:tester-feedback:read" | "admin:tester-feedback:write" | "admin:newsletter:read" | "admin:newsletter:write" | "admin:contact:read" | "admin:events:read" | "admin:events:write" | "admin:events:delete" | "admin:event-entries:read" | "admin:event-entries:write" | "admin:support-tickets:read" | "admin:support-tickets:write" | "admin:shipments:read" | "admin:shipments:write" | "admin:catalogue:read" | "admin:catalogue:write" | "admin:support-tickets:assign" | "admin:support-tickets:close" | "admin:scammers:read" | "admin:scammers:write" | "admin:scammers:verify" | "admin:scammers:delete" | "admin:sessions:read" | "admin:sessions:delete" | "admin:notifications:read" | "admin:notifications:write" | "admin:carts:read" | "admin:wishlists:read" | "admin:feature-flags:read" | "admin:feature-flags:write" | "admin:copilot:view" | "admin:team:read" | "admin:team:write" | "admin:maintenance:view-server-errors" | "admin:maintenance:view-client-errors" | "admin:maintenance:view-function-errors" | "admin:maintenance:view-cloud-logs" | "admin:maintenance:view-payment-rollbacks" | "admin:maintenance:run-analysis" | "admin:maintenance:purge-errors";
+export type Permission = "admin:dashboard:view" | "admin:users:read" | "admin:users:write" | "admin:users:delete" | "admin:user-bans:read" | "admin:user-bans:write" | "admin:products:read" | "admin:products:write" | "admin:products:delete" | "admin:orders:read" | "admin:orders:write" | "admin:returns:read" | "admin:returns:write" | "admin:stores:read" | "admin:stores:write" | "admin:store-addresses:read" | "admin:addresses:read" | "admin:addresses:write" | "admin:analytics:view" | "admin:payouts:read" | "admin:payouts:write" | "admin:audit-log:read" | "admin:categories:read" | "admin:categories:write" | "admin:categories:delete" | "admin:brands:read" | "admin:brands:write" | "admin:brands:delete" | "admin:coupons:read" | "admin:coupons:write" | "admin:coupons:delete" | "admin:deals:read" | "admin:deals:write" | "admin:featured:read" | "admin:featured:write" | "admin:reviews:read" | "admin:reviews:write" | "admin:reviews:delete" | "admin:blog:read" | "admin:blog:write" | "admin:blog:delete" | "admin:blog:publish" | "admin:bids:read" | "admin:bids:write" | "admin:media:read" | "admin:media:write" | "admin:media:delete" | "admin:site:read" | "admin:site:write" | "admin:settings:write" | "admin:navigation:read" | "admin:navigation:write" | "admin:sections:read" | "admin:sections:write" | "admin:carousel:read" | "admin:carousel:write" | "admin:carousel:delete" | "admin:ads:read" | "admin:ads:write" | "admin:ads:delete" | "admin:faqs:read" | "admin:faqs:write" | "admin:faqs:delete" | "admin:tester-checklist:read" | "admin:tester-checklist:write" | "admin:tester-checklist:delete" | "admin:tester-feedback:read" | "admin:tester-feedback:write" | "admin:newsletter:read" | "admin:newsletter:write" | "admin:contact:read" | "admin:events:read" | "admin:events:write" | "admin:events:delete" | "admin:event-entries:read" | "admin:event-entries:write" | "admin:support-tickets:read" | "admin:support-tickets:write" | "admin:shipments:read" | "admin:shipments:write" | "admin:catalogue:read" | "admin:catalogue:write" | "admin:support-tickets:assign" | "admin:support-tickets:close" | "admin:scammers:read" | "admin:scammers:write" | "admin:scammers:verify" | "admin:scammers:delete" | "admin:sessions:read" | "admin:sessions:delete" | "admin:notifications:read" | "admin:notifications:write" | "admin:carts:read" | "admin:wishlists:read" | "admin:feature-flags:read" | "admin:feature-flags:write" | "admin:copilot:view" | "admin:team:read" | "admin:team:write" | "admin:maintenance:view-server-errors" | "admin:maintenance:view-client-errors" | "admin:maintenance:view-function-errors" | "admin:maintenance:view-cloud-logs" | "admin:maintenance:view-payment-rollbacks" | "admin:maintenance:run-analysis" | "admin:maintenance:purge-errors";
 /**
  * Granular user actions that can be soft-banned individually.
  * A user may have multiple simultaneous soft bans of different types.

package/dist/features/auth/permissions/constants.js

@@ -148,6 +148,7 @@ export const PERMISSION_GROUPS = {
         "admin:payouts:write",
         "admin:orders:read",
         "admin:returns:read",
+        "admin:audit-log:read",
     ],
     data_analyst: [
         "admin:dashboard:view",
@@ -268,6 +269,7 @@ export const ROUTE_PERMISSION_MAP = {
     "/admin/store-addresses": "admin:store-addresses:read",
     "/admin/analytics": "admin:analytics:view",
     "/admin/payouts": "admin:payouts:read",
+    "/admin/audit-log": "admin:audit-log:read",
     "/admin/shipments": "admin:shipments:read",
     "/admin/catalogue-approvals": "admin:catalogue:read",
     "/admin/categories": "admin:categories:read",

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/catalogue/components/PublicCatalogueItemDetailView.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface PublicCatalogueItemDetailViewProps {
+    ownerSlug: string;
+    itemId: string;
+}
+/**
+ * Public detail page for a single personal-catalogue item — previously had
+ * no route or view at all; the public catalogue grid rendered bare, unlinked
+ * cards (see Recurrent Root Cause sweep, 2026-08-20 session).
+ */
+export declare function PublicCatalogueItemDetailView({ ownerSlug, itemId }: PublicCatalogueItemDetailViewProps): React.JSX.Element;

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

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { Container, Div, Grid, Heading, Main, Row, Section, Skeleton, Span, Stack, Text } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
+import { apiClient } from "../../../http";
+import { ACCOUNT_ENDPOINTS } from "../../../constants/api-endpoints";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { ROUTES } from "../../../next/routing/route-map";
+const __O = {
+    hidden: "overflow-hidden",
+};
+/**
+ * Public detail page for a single personal-catalogue item — previously had
+ * no route or view at all; the public catalogue grid rendered bare, unlinked
+ * cards (see Recurrent Root Cause sweep, 2026-08-20 session).
+ */
+export function PublicCatalogueItemDetailView({ ownerSlug, itemId }) {
+    const { data, isLoading, isError } = useQuery({
+        queryKey: ["catalogue", "public-item", ownerSlug, itemId],
+        queryFn: () => apiClient.get(ACCOUNT_ENDPOINTS.PUBLIC_CATALOGUE_ITEM(ownerSlug, itemId)),
+    });
+    if (isLoading) {
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-xl", children: _jsx(Container, { size: "md", children: _jsx(Skeleton, { variant: "rectangular", height: 400 }) }) }) }));
+    }
+    if (isError || !data?.item) {
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "start", gap: "md", className: "text-left", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: "Item Not Found" }), _jsx(Text, { color: "muted", children: "This catalogue item may have been made private or removed." }), _jsx(Link, { href: `${ROUTES.PUBLIC.PROFILE(ownerSlug)}/catalogue`, className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Back to catalogue" })] }) }) }) }));
+    }
+    const { owner, item, linkedProductHref } = data;
+    const images = item.images.length > 0 ? item.images : item.mainImage ? [item.mainImage] : [];
+    return (_jsx(Main, { children: _jsxs(Container, { size: "lg", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", gap: "xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: "/", className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: `${ROUTES.PUBLIC.PROFILE(ownerSlug)}/catalogue`, className: "hover:text-primary-600 transition-colors", children: owner.displayName ?? "Catalogue" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: item.title })] }), _jsxs(Grid, { cols: 2, gap: "lg", children: [images.length > 0 ? (_jsx(Div, { className: `relative aspect-square w-full ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: images[0], alt: item.title, size: "hero", objectFit: "contain" }) })) : (_jsx(Div, { className: "relative aspect-square w-full", rounded: "xl", surface: "muted" })), images.length > 1 && (_jsx(Row, { gap: "sm", wrap: true, className: "col-span-2", children: images.slice(1).map((src, i) => (_jsx(Div, { className: `relative h-20 w-20 ${__O.hidden}`, rounded: "lg", surface: "muted", children: _jsx(MediaImage, { src: src, alt: `${item.title} photo ${i + 2}`, size: "thumbnail", objectFit: "cover" }) }, i))) })), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "bold", color: "primary", children: item.title }), typeof item.price === "number" && item.price > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(item.price) }), _jsx(Text, { size: "xs", color: "muted", children: "Estimated value \u2014 not for direct sale from this page." })] })), _jsxs(Row, { gap: "sm", wrap: true, children: [item.condition && (_jsx(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: item.condition })), typeof item.quantity === "number" && (_jsxs(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Qty: ", item.quantity] }))] }), item.description && (_jsx(Text, { color: "muted", className: "whitespace-pre-line", children: item.description })), owner.displayName && (_jsxs(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Owned by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: owner.displayName })] })), linkedProductHref && (_jsx(Link, { href: linkedProductHref, className: "inline-flex w-fit items-center rounded-lg bg-primary px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-colors hover:opacity-90", children: "View live listing \u2192" }))] })] })] }) }));
+}

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import { Div, Grid, Heading, Skeleton, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
@@ -18,5 +19,5 @@ export function PublicCatalogueView({ ownerSlug }) {
     if (items.length === 0) {
         return _jsx(Text, { variant: "secondary", children: "Nothing public here yet." });
     }
-    return (_jsx(Grid, { cols: 4, gap: "md", children: items.map((item) => (_jsxs(Div, { rounded: "xl", border: "default", padding: "md", surface: "card", children: [_jsx(MediaImage, { src: item.mainImage || item.images[0] || "", alt: item.title, size: "card" }), _jsx(Div, { padding: "t-sm", children: _jsx(Heading, { level: 4, size: "sm", children: item.title }) }), typeof item.price === "number" && item.price > 0 && (_jsx(Text, { size: "sm", color: "muted", children: formatCurrency(item.price) }))] }, item.id))) }));
+    return (_jsx(Grid, { cols: 4, gap: "md", children: items.map((item) => (_jsx(Link, { href: `/catalogue/${ownerSlug}/${item.id}`, className: "block transition-opacity hover:opacity-90", children: _jsxs(Div, { rounded: "xl", border: "default", padding: "md", surface: "card", children: [_jsx(MediaImage, { src: item.mainImage || item.images[0] || "", alt: item.title, size: "card" }), _jsx(Div, { padding: "t-sm", children: _jsx(Heading, { level: 4, size: "sm", children: item.title }) }), typeof item.price === "number" && item.price > 0 && (_jsx(Text, { size: "sm", color: "muted", children: formatCurrency(item.price) }))] }) }, item.id))) }));
 }

package/dist/features/catalogue/index.d.ts

@@ -9,4 +9,6 @@ export { CatalogueItemEditorView } from "./components/CatalogueItemEditorView";
 export type { CatalogueItemEditorViewProps } from "./components/CatalogueItemEditorView";
 export { PublicCatalogueView } from "./components/PublicCatalogueView";
 export type { PublicCatalogueViewProps } from "./components/PublicCatalogueView";
+export { PublicCatalogueItemDetailView } from "./components/PublicCatalogueItemDetailView";
+export type { PublicCatalogueItemDetailViewProps } from "./components/PublicCatalogueItemDetailView";
 export { AdminCatalogueApprovalsView } from "./components/AdminCatalogueApprovalsView";

package/dist/features/catalogue/index.js

@@ -6,4 +6,5 @@ export { approveCatalogueListingAction, rejectCatalogueListingAction, } from "./
 export { UserCatalogueView } from "./components/UserCatalogueView";
 export { CatalogueItemEditorView } from "./components/CatalogueItemEditorView";
 export { PublicCatalogueView } from "./components/PublicCatalogueView";
+export { PublicCatalogueItemDetailView } from "./components/PublicCatalogueItemDetailView";
 export { AdminCatalogueApprovalsView } from "./components/AdminCatalogueApprovalsView";

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/BundleDetailView.d.ts

@@ -18,5 +18,7 @@ export interface BundleDetailViewProps {
     onBuyNow?: (input: {
         bundleSlug: string;
     }) => Promise<unknown>;
+    /** Other active bundles, excluding this one — renders a "Related Bundles" section when non-empty. */
+    relatedBundles?: CategoryDocument[];
 }
-export declare function BundleDetailView({ bundle, members, onBuyNow, }: BundleDetailViewProps): React.JSX.Element;
+export declare function BundleDetailView({ bundle, members, onBuyNow, relatedBundles, }: BundleDetailViewProps): React.JSX.Element;

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

@@ -8,6 +8,7 @@ import { BundleCollage } from "./BundleCollage";
 import { MediaImage } from "../../media/MediaImage";
 import { ROUTES } from "../../../next/routing/route-map";
 import { computeBundleDiscount } from "../../../_internal/shared/features/categories/bundle-pricing";
+import { CategoryGrid } from "./CategoryGrid";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -16,7 +17,7 @@ const STOCK_BADGE_TEXT = {
     out_of_stock: BUNDLE_COPY.stockBadge.out_of_stock,
 };
 const PLACEHOLDER_EMOJI = "📦";
-export function BundleDetailView({ bundle, members = [], onBuyNow, }) {
+export function BundleDetailView({ bundle, members = [], onBuyNow, relatedBundles = [], }) {
     const memberCount = members.length || bundle.bundleProductIds?.length || 0;
     const stock = bundle.bundleStockStatus ?? "in_stock";
     const cover = bundle.display?.coverImage;
@@ -24,5 +25,5 @@ export function BundleDetailView({ bundle, members = [], onBuyNow, }) {
         ? formatCurrency(bundle.bundlePrice, "INR")
         : BUNDLE_COPY.detail.priceFallback;
     const discount = computeBundleDiscount(bundle.bundlePrice, bundle.bundleOriginalTotal);
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "lg", direction: "md-row", align: "start", 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", wrap: true, children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), discount && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "muted", className: "line-through", children: formatCurrency(discount.originalTotal, "INR") }), _jsx(Badge, { variant: "success", children: BUNDLE_COPY.detail.discountBadge(discount.percent) })] })), _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] })] }), discount && (_jsx(Text, { size: "sm", color: "success", weight: "medium", children: BUNDLE_COPY.detail.savingsLabel(formatCurrency(discount.savings, "INR")) })), 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 })) : (_jsx(Ul, { gap: "2", className: "grid grid-cols-1 sm:grid-cols-2", children: members.map((p, i) => (_jsxs(Li, { layout: "flex-center", gap: "2", rounded: "lg", border: "subtle", padding: "inlineSm", textSize: "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 }), _jsx(Span, { size: "xs", color: "muted", children: formatCurrency(p.price ?? 0, p.currency ?? "INR") })] }, p.id))) }))] })] }) }) }) }));
+    return (_jsxs(Main, { children: [_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "lg", direction: "md-row", align: "start", 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", wrap: true, children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), discount && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "muted", className: "line-through", children: formatCurrency(discount.originalTotal, "INR") }), _jsx(Badge, { variant: "success", children: BUNDLE_COPY.detail.discountBadge(discount.percent) })] })), _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] })] }), discount && (_jsx(Text, { size: "sm", color: "success", weight: "medium", children: BUNDLE_COPY.detail.savingsLabel(formatCurrency(discount.savings, "INR")) })), 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 })) : (_jsx(Ul, { gap: "2", className: "grid grid-cols-1 sm:grid-cols-2", children: members.map((p, i) => (_jsxs(Li, { layout: "flex-center", gap: "2", rounded: "lg", border: "subtle", padding: "inlineSm", textSize: "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 }), _jsx(Span, { size: "xs", color: "muted", children: formatCurrency(p.price ?? 0, p.currency ?? "INR") })] }, p.id))) }))] })] }) }) }), relatedBundles.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 Bundles" }), _jsx(CategoryGrid, { categories: relatedBundles, getHref: (c) => String(ROUTES.PUBLIC.BUNDLE_DETAIL(c.slug)) })] }) }))] }));
 }