@mohasinac/appkit 4.9.4 → 4.10.0

package/dist/features/products/components/ProductDetailPageView.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link";
-import { SIEVE_OP, sieveAnd, sieveFilter, sortBy } from "@mohasinac/appkit";
 import { productRepository, reviewRepository } from "../../../repositories";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -32,59 +31,18 @@ import { ProductGalleryClient } from "./ProductGalleryClient";
 import { ProductTabsShell } from "./ProductTabsShell";
 import { ProductFeatureBadges } from "./ProductFeatureBadges";
 import { FeatureBadgeList } from "./FeatureBadge";
-import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
 import { ShareButton } from "./ShareButton";
 import { CustomSectionTabContent } from "./CustomSectionTabContent";
 import { SublistingCarouselSection } from "./SublistingCarouselSection";
 import { ShowGroupSection } from "./ShowGroupSection";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "./RelatedItemsSection";
+import { computeRelatedItems, toReview } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
-function toProductItem(doc) {
-    return {
-        id: String(doc.id ?? ""),
-        title: String(doc.title ?? doc.name ?? ""),
-        price: typeof doc.price === "number" ? doc.price : 0,
-        originalPrice: typeof doc.originalPrice === "number" ? doc.originalPrice : undefined,
-        mainImage: Array.isArray(doc.images)
-            ? doc.images[0]
-            : typeof doc.mainImage === "string"
-                ? doc.mainImage
-                : undefined,
-        status: doc.status ?? "published",
-        slug: typeof doc.slug === "string" ? doc.slug : undefined,
-        storeName: typeof doc.storeName === "string" ? doc.storeName : undefined,
-        rating: typeof doc.rating === "number" ? doc.rating : undefined,
-        reviewCount: typeof doc.reviewCount === "number" ? doc.reviewCount : undefined,
-    };
-}
-function toReview(doc) {
-    const images = Array.isArray(doc.images) ? doc.images : undefined;
-    const createdAt = doc.createdAt instanceof Date
-        ? doc.createdAt.toISOString()
-        : typeof doc.createdAt === "string"
-            ? doc.createdAt
-            : undefined;
-    const rawRating = typeof doc.rating === "number" ? doc.rating : 3;
-    const rating = Math.min(5, Math.max(1, Math.round(rawRating)));
-    return {
-        id: String(doc.id ?? ""),
-        productId: String(doc.productId ?? ""),
-        userId: String(doc.userId ?? ""),
-        userName: String(doc.userName ?? "Anonymous"),
-        userAvatar: typeof doc.userAvatar === "string" ? doc.userAvatar : undefined,
-        rating,
-        title: typeof doc.title === "string" ? doc.title : undefined,
-        comment: typeof doc.comment === "string" ? doc.comment : undefined,
-        images,
-        status: doc.status ?? "approved",
-        helpfulCount: typeof doc.helpfulCount === "number" ? doc.helpfulCount : undefined,
-        verified: doc.verified === true,
-        featured: doc.featured === true,
-        createdAt,
-    };
-}
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -206,74 +164,14 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const isGroupParent = p.isGroupParent === true;
     const groupTitle = typeof p.groupTitle === "string" ? p.groupTitle : undefined;
     const storeId = typeof p.storeId === "string" ? p.storeId : null;
-    // -- Fetch reviews + 4 related-listing signals in parallel ------------------
-    const [reviewDocs, sameCategoryDocs, sameBrandDocs, tagOverlapDocs, sameStoreDocs] = await Promise.all([
-        reviewRepository
-            .findApprovedByProduct(product.id)
-            .catch(() => []),
-        primaryCategorySlug
-            ? productRepository.findByCategory(primaryCategorySlug).catch(() => [])
-            : Promise.resolve([]),
-        brand
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brand)),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 9,
-            })
-                .then((r) => r.items)
-                .catch(() => [])
-            : Promise.resolve([]),
-        tags.length > 0
-            ? productRepository.findByTagsOverlap(tags, 9).catch(() => [])
-            : Promise.resolve([]),
-        storeId
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("storeId", SIEVE_OP.EQ, storeId)),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 9,
-            })
-                .then((r) => r.items)
-                .catch(() => [])
-            : Promise.resolve([]),
+    // -- Fetch reviews + the shared 4-signal related-items computation + grouped listings in parallel --
+    const [reviewDocs, related, groups] = await Promise.all([
+        reviewRepository.findApprovedByProduct(product.id).catch(() => []),
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
     ]);
     const reviews = reviewDocs.map(toReview);
-    const _now = new Date();
-    const currentProductId = product.id;
-    function toRelatedItems(docs) {
-        return docs
-            .filter((r) => {
-            if (r.id === currentProductId)
-                return false;
-            const s = r.status;
-            if (s && ["sold", "out_of_stock", "archived", "discontinued", "draft"].includes(s))
-                return false;
-            if (r.isSold === true)
-                return false;
-            if (r.availableQuantity === 0)
-                return false;
-            if (r.listingType === "auction" && r.auctionEndDate) {
-                const end = r.auctionEndDate;
-                const endDate = typeof end.toDate === "function"
-                    ? end.toDate()
-                    : end instanceof Date ? end : new Date(String(end));
-                if (endDate <= _now)
-                    return false;
-            }
-            if (r.listingType === "prize-draw" && r.prizeRevealStatus === "closed")
-                return false;
-            return true;
-        })
-            .slice(0, 8)
-            .map(toProductItem);
-    }
-    const relatedItems = toRelatedItems(sameCategoryDocs);
-    const relatedByBrand = toRelatedItems(sameBrandDocs);
-    const relatedByTags = toRelatedItems(tagOverlapDocs);
-    const relatedByStore = toRelatedItems(sameStoreDocs);
+    const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: product.id, productType: "product", snapshot: {
                     title: product.title,
                     thumb: product.mainImage ?? product.images?.[0],
@@ -339,10 +237,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                 content: _jsx(CustomSectionTabContent, { section: s }),
                             })) })), renderBundleSection: bundleMemberships.length > 0
                             ? () => (_jsxs(Div, { className: CLS_BUNDLE_BOX, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "sm", children: [_jsx(Span, { size: "base", className: CLS_BUNDLE_ICON, "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsxs(Text, { className: CLS_BUNDLE_TITLE, children: ["Part of ", bundleMemberships.length === 1 ? "a bundle" : `${bundleMemberships.length} bundles`] })] }), _jsx(Stack, { gap: "3", children: bundleMemberships.map((b) => (_jsxs(Div, { className: CLS_BUNDLE_ROW, children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_BUNDLE_LABEL, children: "Included in bundle" }), _jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: b.title })] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_CTA, children: "View Bundle \u2192" })] }, b.id))) })] }))
-                            : undefined, renderRelated: () => relatedItems.length > 0 ||
-                            relatedByBrand.length > 0 ||
-                            relatedByTags.length > 0 ||
-                            relatedByStore.length > 0 ? (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryName || category ? `More in ${categoryName || category}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brand ? `More by ${brand}` : "More by this brand" })), relatedByTags.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" })), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeName ? `More from ${storeName}` : "More from this seller" }))] })) : null }), renderPrimaryActions
+                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] })) }), renderPrimaryActions
                         ? renderPrimaryActions({
                             productId: product.id,
                             productSlug: product.slug ?? slug,

package/dist/features/products/components/RelatedItemsSection.d.ts

@@ -0,0 +1,16 @@
+import type { ProductItem } from "../types";
+export interface RelatedItemsSectionProps {
+    relatedItems: ProductItem[];
+    relatedByBrand: ProductItem[];
+    relatedByTags: ProductItem[];
+    relatedByStore: ProductItem[];
+    categoryLabel?: string;
+    brandLabel?: string;
+    storeLabel?: string;
+}
+/**
+ * The same-shape "More in category / More by brand / You might also like /
+ * More from store" carousel stack, shared by every listing-type detail page
+ * that surfaces computeRelatedItems() results.
+ */
+export declare function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }: RelatedItemsSectionProps): import("react").JSX.Element | null;

package/dist/features/products/components/RelatedItemsSection.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from "../../../ui";
+import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
+/**
+ * The same-shape "More in category / More by brand / You might also like /
+ * More from store" carousel stack, shared by every listing-type detail page
+ * that surfaces computeRelatedItems() results.
+ */
+export function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }) {
+    if (relatedItems.length === 0 &&
+        relatedByBrand.length === 0 &&
+        relatedByTags.length === 0 &&
+        relatedByStore.length === 0) {
+        return null;
+    }
+    return (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryLabel ? `More in ${categoryLabel}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brandLabel ? `More by ${brandLabel}` : "More by this brand" })), relatedByTags.length > 0 && _jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" }), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeLabel ? `More from ${storeLabel}` : "More from this seller" }))] }));
+}

package/dist/features/seller/components/SellerProductShell.js

@@ -87,7 +87,7 @@ function StepMedia({ values, onChange, storeSlug = "store", }) {
 }
 // ── Step 3: Auction Settings ───────────────────────────────────────────────
 function StepAuctionSettings({ values, onChange, }) {
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "Prices are in Indian Rupees (\u20B9). Enter the rupee value \u2014 no paise." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: "Starting Bid (\u20B9)", type: "number", value: toRupeesString(values.startingBid), onChange: (v) => onChange({ startingBid: fromRupeesString(v) }), placeholder: "100" }), _jsx(FormField, { name: "auctionEndDate", label: "Auction End Date & Time", type: "datetime-local", value: values.auctionEndDate ?? "", onChange: (v) => onChange({ auctionEndDate: v }) })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: "Reserve Price (\u20B9, optional)", type: "number", value: toRupeesString(values.reservePrice), onChange: (v) => onChange({ reservePrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Minimum price below which you won't sell" }), _jsx(FormField, { name: "buyNowPrice", label: "Buy Now Price (\u20B9, optional)", type: "number", value: toRupeesString(values.buyNowPrice), onChange: (v) => onChange({ buyNowPrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Allows instant purchase before auction ends" })] }), _jsx(FormField, { name: "minBidIncrement", label: "Minimum Bid Increment (\u20B9)", type: "number", value: toRupeesString(values.minBidIncrement), onChange: (v) => onChange({ minBidIncrement: fromRupeesString(v) }), placeholder: "50" }), _jsx(FormField, { name: "auctionShippingPaidBy", label: "Shipping paid by", type: "select", value: values.auctionShippingPaidBy ?? "winner", onChange: (v) => onChange({ auctionShippingPaidBy: v }), options: [
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "Prices are in Indian Rupees (\u20B9). Enter the rupee value \u2014 no paise." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: "Starting Bid (\u20B9)", type: "number", value: toRupeesString(values.startingBid), onChange: (v) => onChange({ startingBid: fromRupeesString(v) }), placeholder: "100" }), _jsx(FormField, { name: "auctionEndDate", label: "Auction End Date & Time", type: "datetime-local", value: values.auctionEndDate ?? "", onChange: (v) => onChange({ auctionEndDate: v }) })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: "Reserve Price (\u20B9, optional)", type: "number", value: toRupeesString(values.reservePrice), onChange: (v) => onChange({ reservePrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Minimum price below which you won't sell" }), _jsx(FormField, { name: "buyNowPrice", label: "Buy Now Price (\u20B9, optional)", type: "number", value: toRupeesString(values.buyNowPrice), onChange: (v) => onChange({ buyNowPrice: v ? fromRupeesString(v) : undefined }), placeholder: "0", helpText: "Allows instant purchase before auction ends" })] }), _jsx(FormField, { name: "minBidIncrement", label: "Minimum Bid Increment (\u20B9)", type: "number", value: toRupeesString(values.minBidIncrement), onChange: (v) => onChange({ minBidIncrement: fromRupeesString(v) }), placeholder: "50", helpText: "Optional \u2014 can only raise the platform's tiered minimum for this listing, never lower it. Leave blank to use the tier as-is." }), _jsx(FormField, { name: "auctionShippingPaidBy", label: "Shipping paid by", type: "select", value: values.auctionShippingPaidBy ?? "winner", onChange: (v) => onChange({ auctionShippingPaidBy: v }), options: [
                     { value: "winner", label: "Winner pays shipping" },
                     { value: "seller", label: "Seller includes shipping" },
                 ] }), _jsx(Toggle, { checked: !!values.autoExtendable, onChange: (checked) => onChange({ autoExtendable: checked }), label: "Auto-extend auction if bid placed in final minutes" }), values.autoExtendable && (_jsx(FormField, { name: "auctionExtensionMinutes", label: "Extension period (minutes)", type: "number", value: String(values.auctionExtensionMinutes ?? 5), onChange: (v) => onChange({ auctionExtensionMinutes: Number(v) || 5 }), placeholder: "5" }))] }));

package/dist/features/seller/components/SellerSidebar.js

@@ -9,6 +9,8 @@ import { BottomSheet } from "../../layout/BottomSheet";
 import { SidebarCollapseToggle } from "../../../_internal/client/features/layout/SidebarCollapseToggle";
 import { useSidebarSearch } from "../../../_internal/client/features/layout/useSidebarSearch";
 import { findActiveNavGroup, findActiveNavItem } from "../../../_internal/client/features/layout/navActive";
+import { getSidebarRailClasses, getSidebarOverlayClasses } from "../../../_internal/client/features/layout/sidebarPositionClasses";
+import { useHandMode } from "../../../_internal/client/hand-mode";
 const __O = {
     hidden: "overflow-hidden",
     yAuto: "overflow-y-auto",
@@ -64,10 +66,14 @@ function GroupsContent({ groups, activeHref, storeName, storeLogoURL, onItemClic
                     })] })] }));
 }
 function DrawerPanel({ title, onClose, children }) {
-    return (_jsxs(Div, { className: "hidden lg:block", children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 z-40 backdrop-blur-sm", onClick: onClose, "aria-hidden": "true" }), _jsxs(Stack, { border: "default", shadow: "2xl", role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 right-0 z-50 h-full w-64 border-l", surface: "default", children: [_jsxs(Row, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", align: "center", justify: "between", children: [_jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }), _jsx(IconButton, { "aria-label": "Close", variant: "ghost", size: "sm", onClick: onClose, icon: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: children })] })] }));
+    const { hand } = useHandMode();
+    const { edgeClass, borderClass } = getSidebarOverlayClasses(hand);
+    return (_jsxs(Div, { className: "hidden lg:block", children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 z-40 backdrop-blur-sm", onClick: onClose, "aria-hidden": "true" }), _jsxs(Stack, { border: "default", shadow: "2xl", role: "dialog", "aria-modal": "true", "aria-label": title, className: `fixed top-0 ${edgeClass} z-50 h-full w-64 ${borderClass}`, surface: "default", children: [_jsxs(Row, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", align: "center", justify: "between", children: [_jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }), _jsx(IconButton, { "aria-label": "Close", variant: "ghost", size: "sm", onClick: onClose, icon: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: children })] })] }));
 }
 export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoURL, mobileOpen = false, desktopOpen = false, variant = "overlay", onCloseMobile, onToggle, renderFooter, }) {
     const close = onCloseMobile ?? (() => { });
+    const { hand } = useHandMode();
+    const rail = getSidebarRailClasses(hand);
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
     useEffect(() => {
@@ -78,7 +84,7 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
     const navContent = groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close }));
     if (variant === "sidebar") {
         const handleToggle = onToggle ?? close;
-        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx(Div, { surface: "overlay-xs", className: "hidden lg:block fixed inset-0 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs(Div, { className: `hidden lg:flex fixed left-0 z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[18rem] ${desktopOpen ? "translate-x-0" : "-translate-x-[calc(100%-1.25rem)]"}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 border-r ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: navContent }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
+        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx(Div, { surface: "overlay-xs", className: "hidden lg:block fixed inset-0 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[18rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 ${rail.borderClass} ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: navContent }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
     }
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));

package/dist/features/shell/QuickFormDrawer.js

@@ -7,6 +7,7 @@ import { IconButton } from "../../ui/components/IconButton";
 import { FormField } from "../../ui/components/FormField";
 import { Toggle } from "../../ui/components/Toggle";
 import { Div, Form, Row, Stack, Text } from "../../ui";
+import { useHandMode } from "../../_internal/client/hand-mode";
 function initValues(fields, defaults = {}) {
     const out = {};
     for (const f of fields) {
@@ -19,6 +20,7 @@ function initValues(fields, defaults = {}) {
 }
 const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
 export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues, onSubmit, submitLabel = "Save", cancelLabel = "Cancel", isLoading = false, schema, renderExtra, }) {
+    const { hand } = useHandMode();
     const drawerRef = useRef(null);
     const [values, setValues] = useState(() => initValues(fields, defaultValues));
     const [errors, setErrors] = useState({});
@@ -122,7 +124,7 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: "fixed inset-y-0 right-0 bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx(IconButton, { type: "button", onClick: handleClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs(Form, { className: "flex-1", overflow: "y-auto", paddingX: "x-md", paddingY: "y-md-lg", spacing: "md", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: `fixed inset-y-0 ${hand === "left" ? "left-0" : "right-0"} bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]`, children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", reverse: hand === "left", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx(IconButton, { type: "button", onClick: handleClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs(Form, { className: "flex-1", overflow: "y-auto", paddingX: "x-md", paddingY: "y-md-lg", spacing: "md", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
                                     return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -55,7 +55,29 @@ const rawTesterChecklistItems = [
             cases: [
                 { key: "email-signup", label: "Sign up with email works", href: "/auth/register" },
                 { key: "google-oauth", label: "Sign up / log in with Google works", href: "/auth/login" },
-                { key: "google-link-existing", label: "Linking Google sign-in to an existing email/password account works" },
+                {
+                    key: "google-link-existing",
+                    label: "Signing in with Google using the SAME email as an existing password account logs into that same account automatically — no duplicate account, no explicit linking needed",
+                    description: "This is the auto-merge path: register with email/password (email A), log out, then \"Sign in with Google\" using a Google account whose email is also A. You should land back in the same account (same orders/wishlist/etc.), and Settings > Account tab should now show Google as Connected.",
+                    href: "/auth/login",
+                },
+                {
+                    key: "google-link-different-email",
+                    label: "Linking a Google account whose email differs from your original signup email requires the explicit \"Connect Google\" button (My Account dashboard or Settings > Account tab) — it does not happen automatically just by signing in with Google",
+                    description: "Sign up/log in normally with email A (password). While logged in as A, use the \"Connect Google\" button and complete the popup with a Google account using a DIFFERENT email B. Afterward, Settings > Account tab should show Google as Connected with email B, while your account's primary login email is still A — the account now has two associated emails, not a second account.",
+                    href: "/user/settings",
+                },
+                {
+                    key: "google-link-confirmation-shown",
+                    label: "After Google is connected, the My Account dashboard shows a \"Google account connected\" confirmation with a Connected badge and your linked email — it does not just silently stop showing the \"Connect Google\" prompt",
+                    description: "Fixed 2026-08-20 — the /user dashboard only ever handled the unlinked case; once linked, the whole alert block disappeared with no confirmation, unlike Settings > Account tab which already showed a Connected badge. Link a Google account (or use an already-linked test account) and confirm the green confirmation alert appears on /user, not just an absence of the blue prompt.",
+                    href: "/user",
+                },
+                {
+                    key: "google-link-conflict-rejected",
+                    label: "Trying to link a Google account whose email is already used by a DIFFERENT existing account is rejected with a clear error — it does not silently merge the two accounts or move the email over",
+                    href: "/user/settings",
+                },
                 { key: "google-popup-blocked-fallback", label: "If the Google sign-in popup is blocked, the fallback (RTDB signal + postMessage) still completes sign-in" },
                 { key: "login", label: "Log in with email + password works", href: "/auth/login" },
                 { key: "logout", label: "Log out works and clears the session" },
@@ -83,6 +105,16 @@ const rawTesterChecklistItems = [
                     description: "Each of the three links should open your own public-facing profile page (/profile/[your uid]) — not the edit-profile page. If your profile visibility is set to Private, confirm the page still loads for you (the owner) even though other users would get a 404.",
                     href: "/user",
                 },
+                {
+                    key: "hand-mode-toggle-exists",
+                    label: "A \"Left-hand mode\" toggle is visible on the Appearance tab of Settings, and also on the /user/profile page, and switching it saves without a page reload",
+                    href: "/user/settings",
+                },
+                {
+                    key: "hand-mode-persists-reload",
+                    label: "After turning on Left-hand mode, reloading the page (and logging out/back in) keeps the setting on",
+                    href: "/user/settings",
+                },
             ],
         },
         {
@@ -156,6 +188,11 @@ const rawTesterChecklistItems = [
                     label: "Applying multiple filters together (price range + brand + category + condition) narrows results correctly, and clearing filters restores the full list — on Products, Auctions, and Pre-Orders",
                     href: "/products",
                 },
+                {
+                    key: "filter-drawer-flips-hand-mode",
+                    label: "With Left-hand mode ON, the product/auction filter drawer opens from the left instead of the right",
+                    href: "/products",
+                },
                 {
                     key: "search-filter-sort-combo",
                     label: "Typing a search query, then applying a filter, then changing sort — all three stay applied together and pagination reflects the combined result count (not just the last action applied)",
@@ -173,7 +210,11 @@ const rawTesterChecklistItems = [
             pageLabel: "Product / Auction / Pre-order Detail",
             cases: [
                 { key: "standard-detail", label: "Standard product detail page loads correctly" },
-                { key: "auction-detail", label: "Auction detail page shows current bid + countdown correctly" },
+                {
+                    key: "auction-detail",
+                    label: "Auction detail page shows current bid + a live, ticking countdown correctly",
+                    description: "The countdown (\"Ends in 2d 5h 30m\", ticking every second — not a static date) must appear directly above every \"Place a bid\" button: the info panel, the desktop and mobile compact bid-summary cards, inside the \"Place your bid\" modal above the submit button, and in the mobile sticky bottom bar (as a row above the current-bid/bid-count line). It should switch to \"Ended\" once the end time passes.",
+                },
                 { key: "preorder-detail", label: "Pre-order detail page shows expected ship date correctly" },
                 {
                     key: "image-gallery",
@@ -252,6 +293,24 @@ const rawTesterChecklistItems = [
                     label: "Choosing manual payment (UPI/Cash) at checkout shows a how-it-works guide (payment steps, refund summary, what happens if an item sells out) and requires a consent checkbox before the \"Pay via UPI / Cash\" button becomes clickable",
                     href: "/checkout",
                 },
+                {
+                    key: "checkout-cash-payment-no-validation-error",
+                    label: "Checking the consent box and clicking \"Pay via UPI / Cash\" places the order successfully — no red \"Validation failed\" error appears",
+                    description: "Fixed 2026-08-20 — the checkout API's schema only accepted paymentMethod \"cod\"/\"online\"/\"upi_manual\"/\"emi\"; the manual-payment button has always sent \"cash\", which was never in that list, so every attempt was rejected with a generic \"Validation failed\" message even with the out-of-stock policy and consent checkbox correctly filled in. Add items to cart, reach the payment step, check the consent box, and click \"Pay via UPI / Cash\" — confirm it succeeds and lands on the order confirmation / payment-proof page.",
+                    href: "/checkout",
+                },
+                {
+                    key: "checkout-order-summary-full-breakdown",
+                    label: "The checkout Order Summary panel shows Shipping, COD handling fee (when COD is the likely method), the selected add-on fees (WhatsApp updates / gift wrap / shipment protection — only the ones checked), GST (when enabled), and Coupon discount as separate line items with icons before you pay — not just Subtotal and Total",
+                    description: "Fixed 2026-08-20 — the Order Summary previously showed Total = Subtotal − coupon discount only; shipping and every fee were computed and charged server-side but never shown to the buyer beforehand. Reach the payment step with an address selected, toggle an add-on checkbox, and confirm the matching line appears in the summary a moment later and the Total updates to match — then confirm the same Total appears on the order confirmation page afterward.",
+                    href: "/checkout",
+                },
+                {
+                    key: "checkout-razorpay-charge-includes-shipping",
+                    label: "When Razorpay online payment is enabled, the amount charged in the Razorpay checkout modal matches the order's recorded Total exactly, including shipping fee",
+                    description: "Fixed 2026-08-20 — the Razorpay pre-charge amount (computed before opening the payment modal) omitted the seller's shipping fee entirely, while the order created afterward recorded a higher total that included it, so the buyer was silently charged less via the gateway than what got recorded as owed. Only testable when Site Settings → Payments → Razorpay is enabled and the seller has a configured shipping fee. Compare the amount shown in the Razorpay modal against the order's Total on the confirmation page — they should match exactly.",
+                    href: "/checkout",
+                },
             ],
         },
         {
@@ -293,6 +352,20 @@ const rawTesterChecklistItems = [
                 { key: "win-auction", label: "Winning an auction creates a payable order correctly" },
                 { key: "bid-history", label: "My Bids page shows accurate bid history, paginated with the most recent bid first", href: "/user/bids" },
                 { key: "bid-history-auction-detail-pagination", label: "An auction detail page's Bid History section shows the most recent bid first and paginates once there are more bids than fit on one page (try the L-Drago auction — 13 seeded bids)" },
+                {
+                    key: "bid-increment-tiered",
+                    label: "The \"min increment\" shown on an auction matches the admin-configured tier for the current bid amount, not a flat ₹1 — and a bid below that increment is rejected",
+                    description: "Default tiers: current bid ≤₹100 → ₹10 increment, ≤₹1,000 → ₹100, ≤₹5,000 → ₹200, ≤₹10,000 → ₹500, above that → ₹1,000. On an auction with no per-listing \"Minimum Bid Increment\" set, confirm the displayed \"min increment\" matches the tier for its current bid, and that trying to bid only current+1 (below the tier) is rejected with a minimum-increment error, while current+tier (or more) is accepted.",
+                },
+                {
+                    key: "bid-increment-override-floor-raising",
+                    label: "A seller's per-listing \"Minimum Bid Increment\" can require MORE than the admin tier, but can never let a bid undercut the tier",
+                    description: "Set a listing's \"Minimum Bid Increment\" below the current tier's value (e.g. 1) and confirm the effective minimum bid still enforces the tier, not the smaller override. Then set it above the tier (e.g. 500 when the tier is 100) and confirm the higher override is now enforced instead.",
+                },
+                {
+                    key: "bid-increment-live-tier-change",
+                    label: "The displayed \"min increment\" on an open auction updates live (without a page refresh) if another bidder's bid pushes the current bid across a tier boundary",
+                },
             ],
         },
         {
@@ -447,6 +520,7 @@ const rawTesterChecklistItems = [
                 { key: "list-preorder", label: "Listing a pre-order works" },
                 { key: "edit-listing", label: "Editing an existing listing works" },
                 { key: "media-upload", label: "Uploading product images/video during listing works" },
+                { key: "seller-quick-add-drawer-flips", label: "With Left-hand mode ON, the seller's quick-add-listing side drawer opens from the left instead of the right" },
             ],
         },
         {
@@ -734,11 +808,32 @@ const rawTesterChecklistItems = [
                 },
             ],
         },
+        {
+            pageKey: "hand-mode-layout",
+            pageLabel: "Left-Hand Mode",
+            cases: [
+                { key: "sidebar-flips", label: "With Left-hand mode ON, the admin/store/user dashboard's persistent left navigation sidebar (and its collapse handle) moves to the right side of the screen; with it OFF (default), the sidebar stays on the left", href: "/admin/dashboard" },
+                { key: "drawers-flip", label: "With Left-hand mode ON, side drawers/panels (filters, quick-add forms, cart, edit/create panels) that normally slide in from the right now slide in from the left", href: "/products" },
+                { key: "close-buttons-flip", label: "With Left-hand mode ON, the X close button on drawers/panels/modals sits on the left edge of its header; with it OFF (default), it sits on the right edge" },
+                { key: "back-to-top-cta-flips", label: "With Left-hand mode ON, the floating \"back to top\" button appears in the bottom-left corner instead of bottom-right after scrolling down a long listing page", href: "/products" },
+                { key: "quick-links-unaffected", label: "Turning on Left-hand mode does not reorder or mirror the My Account / Admin dashboard quick-links tile grid — only its surrounding column shifts with the sidebar", href: "/user" },
+                { key: "hero-carousel-arrows-flip", label: "With Left-hand mode ON, the homepage hero carousel's Prev/Next arrow pair appears in the bottom-left corner instead of bottom-right; the dots stay centered either way", href: "/" },
+                { key: "gallery-arrows-unaffected", label: "Left-hand mode does NOT change a product image gallery/lightbox's Prev/Next arrows — Prev stays on the left edge and Next stays on the right edge in both modes" },
+                { key: "homepage-section-buttons-mirror", label: "With Left-hand mode ON, homepage section header rows (e.g. Brands, Featured Bundles, Google Reviews) have their \"View All\" button on the opposite side from default — title and button swap sides", href: "/" },
+                { key: "hand-mode-no-fouc", label: "On a hard page reload with Left-hand mode already ON, panels/sidebars render on the left immediately — there is no visible flash of them briefly appearing on the right before snapping left" },
+            ],
+        },
         {
             pageKey: "footer-theme",
             pageLabel: "Footer & Dark Mode",
             cases: [
                 { key: "footer-dark-mode", label: "Footer background and all link/text colors switch correctly between light and dark mode", href: "/" },
+                {
+                    key: "footer-github-icon",
+                    label: "The footer's social icon row (brand column, bottom-left) shows a GitHub icon alongside Instagram/Twitter/WhatsApp, and clicking it opens the developer's real GitHub profile in a new tab",
+                    description: "Added 2026-08-20 — GITHUB was a new socialUrls key with no footer icon before this. Confirm the icon renders (not a broken/missing glyph) and the link target is a real, working github.com profile, not a placeholder or dead link.",
+                    href: "/",
+                },
             ],
         },
         {
@@ -776,7 +871,17 @@ const rawTesterChecklistItems = [
             cases: [
                 { key: "homepage-loads", label: "The homepage loads without errors on both desktop and mobile", href: "/" },
                 { key: "about-us-in-main-nav", label: "\"About Us\" appears as an item in the main public top navigation, not just the footer", href: "/about" },
-                { key: "developer-page-loads", label: "The Developer page loads correctly and is linked from the footer's Support column next to About Us", href: "/developer" },
+                {
+                    key: "about-team-real-founder",
+                    label: "The About page's \"Who's Behind LetItRip\" team section shows the real founder's name (not a placeholder persona) and a working \"GitHub ↗\" link on their card",
+                    description: "Updated 2026-08-20 — the founder card previously used a fictional placeholder name with no GitHub link. Confirm the founder card's name matches the real developer and the GitHub link opens their actual profile.",
+                    href: "/about",
+                },
+                {
+                    key: "developer-page-loads",
+                    label: "The Developer page loads correctly, is linked from the footer's Support column next to About Us, shows the real developer's name, and its \"GitHub ↗\" link opens their actual GitHub profile",
+                    href: "/developer",
+                },
                 { key: "products-listing-page", label: "The products listing page loads and paginates correctly", href: "/products" },
                 { key: "auctions-listing-page", label: "The auctions listing page loads correctly", href: "/auctions" },
                 { key: "preorders-listing-page", label: "The pre-orders listing page loads correctly", href: "/pre-orders" },
@@ -1017,6 +1122,12 @@ const rawTesterChecklistItems = [
             pageLabel: "Site & System",
             cases: [
                 { key: "site-settings-admin", label: "Admin site settings page saves correctly", href: "/admin/site" },
+                {
+                    key: "auction-bid-tiers-admin",
+                    label: "Admin can add, edit, and remove bid-increment tiers in Site Settings → Auction Config, and the changes persist after saving and reloading the page",
+                    description: "Each tier row has an editable \"up to (₹)\" amount and \"increment (₹)\" amount; the last row is fixed as \"and above\" (open-ended) and can't have its threshold edited. Add a new tier, edit an existing increment, remove a tier, save, then reload the Site Settings page and confirm the tier list matches what was saved — not reverted to the old defaults.",
+                    href: "/admin/site",
+                },
                 { key: "admin-dashboard-widgets", label: "Admin dashboard widgets show accurate data", href: "/admin/dashboard" },
                 { key: "analytics-admin", label: "Admin analytics dashboard shows accurate data", href: "/admin/analytics" },
                 { key: "maintenance-pages-admin", label: "The maintenance pages (analysis, client-errors, cloud-logs, function-errors, payment-rollbacks, server-errors + detail) all load correctly", href: "/admin/maintenance" },

package/dist/hand-mode/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Public re-export of the appkit hand-mode primitives.
+ *
+ * `HandModeProvider`, `useHandMode`, and the related types live in
+ * `_internal/client/hand-mode/` because they are consumed by both the public
+ * `client.ts` barrel and other internal modules (drawers, sidebars). This
+ * file is the canonical public surface — `client.ts` re-exports through
+ * here so the `audit-appkit-reexports` rule (no `_internal/` in public
+ * barrels) stays green. Mirrors `theme/index.ts`.
+ */
+export { HandModeProvider, useHandMode } from "../_internal/client/hand-mode";
+export type { HandMode, HandModeContextValue, HandModeProviderProps, } from "../_internal/client/hand-mode";

package/dist/hand-mode/index.js

@@ -0,0 +1,11 @@
+/**
+ * Public re-export of the appkit hand-mode primitives.
+ *
+ * `HandModeProvider`, `useHandMode`, and the related types live in
+ * `_internal/client/hand-mode/` because they are consumed by both the public
+ * `client.ts` barrel and other internal modules (drawers, sidebars). This
+ * file is the canonical public surface — `client.ts` re-exports through
+ * here so the `audit-appkit-reexports` rule (no `_internal/` in public
+ * barrels) stays green. Mirrors `theme/index.ts`.
+ */
+export { HandModeProvider, useHandMode } from "../_internal/client/hand-mode";

package/dist/index.d.ts

@@ -2321,6 +2321,8 @@ export { CatalogueItemEditorView } from "./features/catalogue/index";
 export type { CatalogueItemEditorViewProps } from "./features/catalogue/index";
 export { PublicCatalogueView } from "./features/catalogue/index";
 export type { PublicCatalogueViewProps } from "./features/catalogue/index";
+export { PublicCatalogueItemDetailView } from "./features/catalogue/index";
+export type { PublicCatalogueItemDetailViewProps } from "./features/catalogue/index";
 export { AdminCatalogueApprovalsView } from "./features/catalogue/index";
 export { PAYOUT_FIELDS } from "./features/payments/index";
 export { PAYOUT_INDEXED_FIELDS } from "./features/payments/index";

package/dist/index.js

@@ -4215,6 +4215,7 @@ export { approveCatalogueListingAction, rejectCatalogueListingAction, } from "./
 export { UserCatalogueView } from "./features/catalogue/index";
 export { CatalogueItemEditorView } from "./features/catalogue/index";
 export { PublicCatalogueView } from "./features/catalogue/index";
+export { PublicCatalogueItemDetailView } from "./features/catalogue/index";
 export { AdminCatalogueApprovalsView } from "./features/catalogue/index";
 // [SCHEMA]-Schema / data-shape constant â€" Zod validator, default-value object, or Firestore collection/field name constant.
 // PAYOUT_FIELDS - Constant used across modules.

package/dist/next/routing/route-map.d.ts

@@ -105,6 +105,7 @@ export declare const DEFAULT_ROUTE_MAP: {
         readonly LIVE: "/live";
         readonly LIVE_DETAIL: (slug: string) => string;
         readonly ART: "/art";
+        readonly CATALOGUE_ITEM_DETAIL: (ownerSlug: string, itemId: string) => string;
     };
     readonly ERRORS: {
         readonly UNAUTHORIZED: "/unauthorized";
@@ -470,6 +471,7 @@ export declare const ROUTES: {
         readonly LIVE: "/live";
         readonly LIVE_DETAIL: (slug: string) => string;
         readonly ART: "/art";
+        readonly CATALOGUE_ITEM_DETAIL: (ownerSlug: string, itemId: string) => string;
     };
     readonly ERRORS: {
         readonly UNAUTHORIZED: "/unauthorized";

package/dist/next/routing/route-map.js

@@ -99,6 +99,13 @@ export const DEFAULT_ROUTE_MAP = {
         // detail page stays PRODUCT_DETAIL (`/products/{slug}`), already wired in
         // `_internal/shared/listing-types/{art,stickers}/config.ts`.
         ART: "/art",
+        // Personal catalogue (Feature B) — a user's own photo inventory of owned
+        // items, distinct from marketplace listings. Public when the owner sets
+        // an item's visibility to "public". The owner's full catalogue listing
+        // already exists at PROFILE(userId)/catalogue (PublicProfileView's
+        // "Catalogue" tab) — this is only the per-item detail route, which had
+        // no page at all before this.
+        CATALOGUE_ITEM_DETAIL: (ownerSlug, itemId) => `/catalogue/${ownerSlug}/${itemId}`,
     },
     ERRORS: {
         UNAUTHORIZED: "/unauthorized",

package/dist/react/contexts/SessionContext.d.ts

@@ -41,6 +41,11 @@ export interface SessionUser {
     permissions?: string[];
     /** Hash of the last dismissed announcement banner. */
     dismissedBannerHash?: string;
+    /** Persisted UI layout preferences (collapsed sections, left-hand mode, ...). */
+    uiPreferences?: {
+        collapsedSections?: string[];
+        handMode?: "left" | "right";
+    };
 }
 export interface SessionContextValue {
     user: SessionUser | null;

package/dist/react/contexts/SessionContext.js

@@ -79,6 +79,7 @@ function buildSessionUser(authUser, serverData) {
             ? new Date(serverData.scamAwarenessAcknowledgedAt)
             : null,
         dismissedBannerHash: serverData.dismissedBannerHash,
+        uiPreferences: serverData.uiPreferences,
     };
 }
 // ---------------------------------------------------------------------------
@@ -150,6 +151,7 @@ export function SessionProvider({ children, initialUser, endpoints: endpointOver
                     ? new Date(data.scamAwarenessAcknowledgedAt)
                     : null,
                 dismissedBannerHash: data.dismissedBannerHash,
+                uiPreferences: data.uiPreferences,
             };
         }
         catch (_err) {