@mohasinac/appkit 4.9.4 → 4.10.0

package/dist/features/auth/schemas/firestore.d.ts

@@ -122,6 +122,9 @@ export interface UserDocument extends BaseDocument {
          * stay unique). Absent/missing IDs default to collapsed for a section the
          * user has never interacted with. See useCollapsedSections. */
         collapsedSections?: string[];
+        /** Which side CTA panels/drawers/sidebars dock to and where close buttons
+         * sit. Absent/"right" = default (right-docked). "left" = left-hand mode. */
+        handMode?: "left" | "right";
     };
 }
 export interface UserSoftBan {

package/dist/features/cart/components/CartDrawer.js

@@ -1,8 +1,10 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Aside, Button, Div, Heading, Row, Span, Stack, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { useHandMode } from "../../../_internal/client/hand-mode";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -18,7 +20,8 @@ export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock =
                             .join(", ") })), _jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: formatCurrency(item.meta.price * item.quantity, item.meta.currency) }), onQtyChange && !isOutOfStock && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity - 1), disabled: item.quantity <= 1, variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)] disabled:opacity-40", children: "\u2212" }), _jsx(Span, { size: "sm", className: "min-w-[1.5rem]", align: "center", children: item.quantity }), _jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity + 1), variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)]", children: "+" })] })), isOutOfStock && (_jsxs(Span, { size: "xs", color: "muted", children: ["Qty: ", item.quantity] }))] })] }), onRemove && (_jsx(Button, { onClick: () => onRemove(item.id), variant: "ghost", size: "sm", "aria-label": ACTIONS.CART["remove-item"].ariaLabel, className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
 }
 export function CartDrawer({ isOpen, onClose, items, subtotal = 0, currency, isLoading, onQtyChange, onRemove, onCheckout, labels = {}, }) {
+    const { hand } = useHandMode();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", role: "presentation", className: "fixed inset-0 z-40", onClick: onClose }), _jsx(Aside, { surface: "sidePanel", shadow: "xl", className: "fixed inset-y-0 right-0 z-50 w-full max-w-sm", children: _jsxs(Stack, { className: "h-full", children: [_jsxs(Row, { justify: "between", border: "bottom", className: __P.p4, children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: labels.title ?? "Cart" }), _jsx(Button, { onClick: onClose, variant: "ghost", size: "sm", "aria-label": "Close cart", textColor: "faint", className: "hover:text-[var(--appkit-color-text)] dark:hover:text-[var(--appkit-color-text)]", children: "\u2715" })] }), _jsx(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "3", children: isLoading ? (_jsx(Row, { justify: "center", padding: "y-3xl", children: _jsx(Div, { className: "h-8 w-8 animate-spin border-2 border-neutral-300 border-t-neutral-800 dark:border-t-zinc-200", rounded: "full" }) })) : items.length === 0 ? (_jsx(Text, { paddingY: "3xl", className: "text-[var(--appkit-color-text-muted)]", size: "sm", align: "center", children: labels.empty ?? "Your cart is empty" })) : (items.map((item) => (_jsx(CartItemRow, { item: item, onQtyChange: onQtyChange, onRemove: onRemove }, item.id)))) }), items.length > 0 && (_jsxs(Stack, { border: "top", className: __P.p4, gap: "md", children: [_jsxs(Row, { textSize: "sm", justify: "between", children: [_jsx(Span, { className: "text-[var(--appkit-color-text-muted)]", children: labels.subtotal ?? "Subtotal" }), _jsx(Span, { weight: "semibold", children: formatCurrency(subtotal, currency) })] }), onCheckout && (_jsx(Button, { rounded: "xl", onClick: onCheckout, variant: "primary", textSize: "sm", className: "w-full bg-neutral-900 py-[0.75rem] font-[600] text-white transition hover:bg-neutral-800", children: labels.checkout ?? ACTIONS.CART["checkout"].label }))] }))] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", role: "presentation", className: "fixed inset-0 z-40", onClick: onClose }), _jsx(Aside, { surface: "sidePanel", shadow: "xl", className: `fixed inset-y-0 ${hand === "left" ? "left-0" : "right-0"} z-50 w-full max-w-sm`, children: _jsxs(Stack, { className: "h-full", children: [_jsxs(Row, { justify: "between", border: "bottom", className: __P.p4, reverse: hand === "left", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: labels.title ?? "Cart" }), _jsx(Button, { onClick: onClose, variant: "ghost", size: "sm", "aria-label": "Close cart", textColor: "faint", className: "hover:text-[var(--appkit-color-text)] dark:hover:text-[var(--appkit-color-text)]", children: "\u2715" })] }), _jsx(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "3", children: isLoading ? (_jsx(Row, { justify: "center", padding: "y-3xl", children: _jsx(Div, { className: "h-8 w-8 animate-spin border-2 border-neutral-300 border-t-neutral-800 dark:border-t-zinc-200", rounded: "full" }) })) : items.length === 0 ? (_jsx(Text, { paddingY: "3xl", className: "text-[var(--appkit-color-text-muted)]", size: "sm", align: "center", children: labels.empty ?? "Your cart is empty" })) : (items.map((item) => (_jsx(CartItemRow, { item: item, onQtyChange: onQtyChange, onRemove: onRemove }, item.id)))) }), items.length > 0 && (_jsxs(Stack, { border: "top", className: __P.p4, gap: "md", children: [_jsxs(Row, { textSize: "sm", justify: "between", children: [_jsx(Span, { className: "text-[var(--appkit-color-text-muted)]", children: labels.subtotal ?? "Subtotal" }), _jsx(Span, { weight: "semibold", children: formatCurrency(subtotal, currency) })] }), onCheckout && (_jsx(Button, { rounded: "xl", onClick: onCheckout, variant: "primary", textSize: "sm", className: "w-full bg-neutral-900 py-[0.75rem] font-[600] text-white transition hover:bg-neutral-800", children: labels.checkout ?? ACTIONS.CART["checkout"].label }))] }))] }) })] }));
 }

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/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)) })] }) }))] }));
 }

package/dist/features/classified/components/ClassifiedContactSellerPanel.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { startClassifiedConversationAction } from "../../../_internal/server/features/classified/actions";
+export interface ClassifiedContactSellerPanelProps {
+    productId: string;
+    onContactSeller: typeof startClassifiedConversationAction;
+}
+/**
+ * The only purchase-path CTA on a classified listing — no cart, no checkout.
+ * Extracted from the old ClassifiedDetailView so the richer, full-parity
+ * ClassifiedDetailPageView can slot this into a `renderBuyBar` prop.
+ */
+export declare function ClassifiedContactSellerPanel({ productId, onContactSeller }: ClassifiedContactSellerPanelProps): React.JSX.Element;

package/dist/features/classified/components/ClassifiedContactSellerPanel.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
+import { useState } from "react";
+import Link from "next/link";
+import { Button, Div, Stack, Text } from "../../../ui";
+import { ROUTES } from "../../../next/routing/route-map";
+const __P = {
+    p4: "p-[var(--appkit-space-4)]",
+};
+/**
+ * The only purchase-path CTA on a classified listing — no cart, no checkout.
+ * Extracted from the old ClassifiedDetailView so the richer, full-parity
+ * ClassifiedDetailPageView can slot this into a `renderBuyBar` prop.
+ */
+export function ClassifiedContactSellerPanel({ productId, onContactSeller }) {
+    const [pending, setPending] = useState(false);
+    const [conversation, setConversation] = useState(null);
+    const [error, setError] = useState(null);
+    async function handleContactSeller() {
+        setPending(true);
+        setError(null);
+        try {
+            const result = await onContactSeller({ productId });
+            if (result && typeof result === "object" && "ok" in result) {
+                if (result.ok) {
+                    setConversation(result.data);
+                }
+                else {
+                    setError(result.error);
+                }
+            }
+            else {
+                setConversation(result);
+            }
+        }
+        catch (e) {
+            void normalizeError(e);
+            setError(e instanceof Error ? e.message : "Something went wrong");
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    if (conversation) {
+        return (_jsxs(Div, { className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { className: "mb-2", weight: "medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] }));
+    }
+    return (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-destructive", size: "sm", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }));
+}

package/dist/features/classified/components/ClassifiedDetailPageView.d.ts

@@ -0,0 +1,7 @@
+import type { ProductDocument } from "../../products/schemas/firestore";
+export interface ClassifiedDetailPageViewProps {
+    slug: string;
+    /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
+    initialProduct?: ProductDocument | null;
+}
+export declare function ClassifiedDetailPageView({ slug, initialProduct }: ClassifiedDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/classified/components/ClassifiedDetailPageView.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { getClassifiedForDetail } from "../../../_internal/server/features/classified/data";
+import { startClassifiedConversationAction } from "../../../_internal/server/features/classified/actions";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_CLASSIFIED_BADGE = "inline-block rounded-full bg-cyan-100 dark:bg-cyan-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-cyan-700 dark:text-cyan-300";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Container, Div, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, Dl, Dt, Dd, } from "../../../ui";
+import { PreOrderDetailView } from "../../products/components/PreOrderDetailView";
+import { ProductGalleryClient } from "../../products/components/ProductGalleryClient";
+import { ProductTabsShell } from "../../products/components/ProductTabsShell";
+import { CustomSectionTabContent } from "../../products/components/CustomSectionTabContent";
+import { ShareButton } from "../../products/components/ShareButton";
+import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
+import { computeRelatedItems } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
+import { ClassifiedContactSellerPanel } from "./ClassifiedContactSellerPanel";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+export async function ClassifiedDetailPageView({ slug, initialProduct }) {
+    const product = initialProduct !== undefined
+        ? (initialProduct ?? undefined)
+        : await getClassifiedForDetail(slug).catch(() => undefined);
+    if (!product) {
+        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: "Classified Listing Not Found" }), _jsx(Text, { color: "muted", children: "The classified listing you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Classifieds" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Classified Listing");
+    const price = typeof p.price === "number" ? p.price : null;
+    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    const meta = product.classified;
+    const location = meta?.meetupArea ? [meta.meetupArea.locality, meta.meetupArea.city].filter(Boolean).join(", ") : null;
+    const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
+    const categoryName = Array.isArray(p.categoryNames) && p.categoryNames.length > 0 ? String(p.categoryNames[0]) : (typeof p.categoryName === "string" ? p.categoryName : null);
+    const brand = typeof p.brand === "string" ? p.brand : undefined;
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const safeSeller = storeName ? safeDisplayName(storeName, "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
+    const specs = Array.isArray(p.specifications) ? p.specifications : [];
+    const customSections = Array.isArray(p.customSections) ? p.customSections : [];
+    const descriptionHtml = toDescriptionHtml(p.description);
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups] = await Promise.all([
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
+    ]);
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+                    title,
+                    thumb: images[0],
+                    price: price ?? undefined,
+                    storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                    storeName: storeName ?? undefined,
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: CLS_BREADCRUMB_LINK, children: "Classifieds" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_CLASSIFIED_BADGE, children: "Classified" }), meta?.negotiable && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Negotiable" })), meta?.acceptsShipping && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Shipping available" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), location && (_jsxs(Row, { color: "muted", textSize: "sm", align: "center", gap: "xs", children: [_jsx(Span, { children: "\uD83D\uDCCD" }), _jsx(Span, { children: location }), meta?.meetupArea?.pincode && _jsxs(Span, { children: ["\u00B7 ", meta.meetupArea.pincode] })] })), meta?.contactMethod && (_jsxs(Text, { size: "xs", color: "muted", children: ["Contact via: ", meta.contactMethod === "both" ? "chat or phone" : meta.contactMethod] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, customTabs: customSections.map((s) => ({
+                                id: s.id,
+                                label: s.title,
+                                content: _jsx(CustomSectionTabContent, { section: s }),
+                            })) })), renderBuyBar: () => (_jsx(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: _jsx(ClassifiedContactSellerPanel, { productId: String(product.id), onContactSeller: startClassifiedConversationAction }) })), 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, storeLabel: storeName ?? undefined })] })) })] })] }));
+}

package/dist/features/contact/components/ContactPageView.js

@@ -27,8 +27,14 @@ export function ContactPageView() {
                                             {
                                                 icon: "💬",
                                                 label: "WhatsApp",
-                                                value: "+91 70000 00000",
-                                                href: "https://wa.me/917000000000",
+                                                value: "+91 89196 65811",
+                                                href: "https://wa.me/918919665811",
+                                            },
+                                            {
+                                                icon: "👥",
+                                                label: "WhatsApp Community",
+                                                value: "Join the group",
+                                                href: "https://chat.whatsapp.com/JOlbdSwhVWYDKujolcBZDr",
                                             },
                                         ], labels: {
                                             title: "Support",

package/dist/features/digital-codes/components/DigitalCodeDetailPageView.d.ts

@@ -0,0 +1,19 @@
+import type { ProductDocument } from "../../products/schemas/firestore";
+export interface DigitalCodeDetailPageViewProps {
+    slug: string;
+    /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
+    initialProduct?: ProductDocument | null;
+    /** Render-prop for the buy bar (Add to Cart / Buy Now / Wishlist) — wired by the page shim, same component standard products use. */
+    renderPrimaryActions?: (ctx: {
+        productId: string;
+        productSlug: string;
+        productTitle: string;
+        productImage?: string;
+        price: number | null;
+        currency: string;
+        storeId?: string;
+        storeName?: string;
+        inStock: boolean;
+    }) => React.ReactNode;
+}
+export declare function DigitalCodeDetailPageView({ slug, initialProduct, renderPrimaryActions }: DigitalCodeDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/digital-codes/components/DigitalCodeDetailPageView.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { getDigitalCodeForDetail } from "../../../_internal/server/features/digital-code/data";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_DIGITALCODE_BADGE = "inline-block rounded-full bg-violet-100 dark:bg-violet-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-violet-700 dark:text-violet-300";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Div, Container, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, Dl, Dt, Dd, } from "../../../ui";
+import { PreOrderDetailView } from "../../products/components/PreOrderDetailView";
+import { ProductGalleryClient } from "../../products/components/ProductGalleryClient";
+import { ProductTabsShell } from "../../products/components/ProductTabsShell";
+import { CustomSectionTabContent } from "../../products/components/CustomSectionTabContent";
+import { ShareButton } from "../../products/components/ShareButton";
+import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
+import { computeRelatedItems, getReviewItemsForProduct } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
+import { ReviewsList } from "../../reviews/components/ReviewsList";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPrimaryActions }) {
+    const product = initialProduct !== undefined
+        ? (initialProduct ?? undefined)
+        : await getDigitalCodeForDetail(slug).catch(() => undefined);
+    if (!product) {
+        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: "Digital Code Listing Not Found" }), _jsx(Text, { color: "muted", children: "The digital code listing you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Digital Codes" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Digital Code");
+    const price = typeof p.price === "number" ? p.price : null;
+    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    const meta = product.digitalCode;
+    const codesLeft = meta?.codesAvailable ?? 0;
+    const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
+    const categoryName = Array.isArray(p.categoryNames) && p.categoryNames.length > 0 ? String(p.categoryNames[0]) : (typeof p.categoryName === "string" ? p.categoryName : null);
+    const brand = typeof p.brand === "string" ? p.brand : undefined;
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const safeSeller = storeName ? safeDisplayName(storeName, "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
+    const specs = Array.isArray(p.specifications) ? p.specifications : [];
+    const customSections = Array.isArray(p.customSections) ? p.customSections : [];
+    const descriptionHtml = toDescriptionHtml(p.description);
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, reviews] = await Promise.all([
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
+        getReviewItemsForProduct(product.id),
+    ]);
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+                    title,
+                    thumb: images[0],
+                    price: price ?? undefined,
+                    storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                    storeName: storeName ?? undefined,
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                                id: s.id,
+                                label: s.title,
+                                content: _jsx(CustomSectionTabContent, { section: s }),
+                            })) })), renderBuyBar: () => renderPrimaryActions?.({
+                            productId: String(product.id),
+                            productSlug: String(p.slug ?? product.id),
+                            productTitle: title,
+                            productImage: images[0],
+                            price,
+                            currency,
+                            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                            storeName: storeName ?? undefined,
+                            inStock: codesLeft > 0,
+                        }), 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, storeLabel: storeName ?? undefined })] })) })] })] }));
+}

package/dist/features/grouped/components/GroupedListingsCarousel.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { GroupedListingWithItems } from "../../../_internal/server/features/grouped/data";
+export interface GroupedListingsCarouselProps {
+    groups: GroupedListingWithItems[];
+}
+/**
+ * Public renderer for the admin/seller-authored groupedListings "theme
+ * scroller" collection — one carousel per group the current product
+ * belongs to. Previously fully built (schema, repository, CRUD UI) with
+ * zero public consumers; this is the first place it renders on a
+ * storefront page.
+ */
+export declare function GroupedListingsCarousel({ groups }: GroupedListingsCarouselProps): React.JSX.Element | null;

package/dist/features/grouped/components/GroupedListingsCarousel.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+import { SectionCarousel } from "../../homepage/components/SectionCarousel";
+import { ProductCard } from "../../products/components/ProductGrid";
+import { toProductItem } from "../../../_internal/server/features/products/data";
+import { CAROUSEL_PER_VIEW } from "../../homepage/constants/carousel-per-view";
+import { Stack } from "../../../ui";
+const GROUP_THEME_TITLE = {
+    related: "Other listings you might like",
+    character: "Same character",
+    lineage: "Same lineage",
+    set: "From the same set",
+    generic: "You might also like",
+};
+/**
+ * Public renderer for the admin/seller-authored groupedListings "theme
+ * scroller" collection — one carousel per group the current product
+ * belongs to. Previously fully built (schema, repository, CRUD UI) with
+ * zero public consumers; this is the first place it renders on a
+ * storefront page.
+ */
+export function GroupedListingsCarousel({ groups }) {
+    const visibleGroups = groups.filter((g) => g.items.length > 0);
+    if (visibleGroups.length === 0)
+        return null;
+    return (_jsx(Stack, { gap: "xl", children: visibleGroups.map((group) => {
+            const items = group.items.map((p) => toProductItem(p));
+            return (_jsx(SectionCarousel, { title: group.title || GROUP_THEME_TITLE[group.groupTheme], pillLabel: "Grouped Listings", headingVariant: "editorial", items: items, isLoading: false, perView: CAROUSEL_PER_VIEW.standard, keyExtractor: (item) => item.id, renderItem: (item) => (_jsx(ProductCard, { product: item, href: item.slug || item.id ? pluginFor(item.listingType ?? "standard").detailRoute(item.slug || item.id) : undefined })) }, group.id));
+        }) }));
+}

package/dist/features/grouped/repository/grouped-listings.repository.d.ts

@@ -5,5 +5,13 @@ export declare class GroupedListingsRepository extends BaseRepository<GroupedLis
     listByStore(storeId: string): Promise<{
         items: GroupedListingDocument[];
     }>;
+    /**
+     * Groups a product belongs to, restricted to groups that are actually
+     * eligible to render publicly (`isActive` + `visibilityStatus:"visible"` —
+     * the latter is recomputed by `onProductStockChange` whenever membership
+     * drops below `minActiveMembers`, so this is a read-side trust of that
+     * precomputed field, not a fresh recompute).
+     */
+    findByProductId(productId: string): Promise<GroupedListingDocument[]>;
 }
 export declare const groupedListingsRepository: GroupedListingsRepository;

package/dist/features/grouped/repository/grouped-listings.repository.js

@@ -1,4 +1,5 @@
 import { BaseRepository } from "../../../providers/db-firebase";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { GROUPED_LISTINGS_COLLECTION, } from "../schemas/firestore";
 export class GroupedListingsRepository extends BaseRepository {
     constructor() {
@@ -8,5 +9,20 @@ export class GroupedListingsRepository extends BaseRepository {
         const items = await this.findBy("storeId", storeId);
         return { items };
     }
+    /**
+     * Groups a product belongs to, restricted to groups that are actually
+     * eligible to render publicly (`isActive` + `visibilityStatus:"visible"` —
+     * the latter is recomputed by `onProductStockChange` whenever membership
+     * drops below `minActiveMembers`, so this is a read-side trust of that
+     * precomputed field, not a fresh recompute).
+     */
+    async findByProductId(productId) {
+        const snap = await this.getCollection()
+            .where("productIds", "array-contains", productId)
+            .where(PRODUCT_FIELDS.IS_ACTIVE, "==", true)
+            .where("visibilityStatus", "==", "visible")
+            .get();
+        return snap.docs.map((doc) => this.mapDoc(doc));
+    }
 }
 export const groupedListingsRepository = new GroupedListingsRepository();

package/dist/features/homepage/components/BrandsSection.js

@@ -8,6 +8,7 @@ import { Button, Div, Heading, HorizontalScroller, Row, Section, Text } from "..
 import { ROUTES } from "../../../next";
 import { resolveMediaUrl } from "../../../utils/media-url";
 import { useTopBrands } from "../hooks/useTopBrands";
+import { useHandMode } from "../../../_internal/client/hand-mode";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -32,6 +33,7 @@ function BrandLogo({ brand }) {
 }
 export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, autoScroll = true, scrollInterval = 4000, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };
+    const { hand } = useHandMode();
     const { data: allBrands = [], isLoading } = useTopBrands(limit, { initialData: initialItems });
     const [activeFilter, setActiveFilter] = useState("all");
     // Available filter chips: "All" + "Featured" when featuredOnly filter is configured
@@ -43,5 +45,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, loop: loop })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", reverse: hand === "left", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, loop: loop })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }