@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/features/layout/BottomActionsContext.js

@@ -84,6 +84,9 @@ export function BottomActionsProvider({ children, }) {
     const setInfoLabel = useCallback((infoLabel) => {
         setState((prev) => ({ ...prev, infoLabel }));
     }, []);
+    const setSecondaryLabel = useCallback((secondaryLabel) => {
+        setState((prev) => ({ ...prev, secondaryLabel }));
+    }, []);
     const clearAll = useCallback(() => {
         actionCallbacksRef.current = new Map();
         bulkCallbacksRef.current = new Map();
@@ -98,8 +101,9 @@ export function BottomActionsProvider({ children, }) {
         bulkCallbacksRef,
         bulkClearRef,
         setInfoLabel,
+        setSecondaryLabel,
         clearAll,
-    }), [state, setActions, setBulkConfig, setInfoLabel, clearAll]);
+    }), [state, setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, clearAll]);
     return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
 }
 // --- Hook ---------------------------------------------------------------------

package/dist/features/layout/TitleBarLayout.d.ts

@@ -66,4 +66,4 @@ export interface TitleBarLayoutProps {
  *
  * Receives all domain data as props — zero domain imports.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot: _navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -14,7 +14,7 @@ const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-cente
  *
  * Receives all domain data as props — zero domain imports.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot: _navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
     // ── Element builders ────────────────────────────────────────────────────────
     const promotionsEl = promotionsHref ? (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "flex items-center gap-[var(--appkit-space-1)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full text-[length:var(--appkit-text-xs)] font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), _jsx(Span, { className: "hidden sm:inline", children: "Today's Deals" })] })) : null;
     const themeBtn = onToggleTheme ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: iconBtn, children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })) : null;
@@ -22,7 +22,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const hamburgerBtn = !hideSidebarToggle ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : hasDashboardNav ? "Open dashboard navigation" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: hasDashboardNav && onToggleDashboardNav ? onToggleDashboardNav : onToggleSidebar, className: iconBtn, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: sidebarOpen ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })) }) })) : null;
     // Compare is always lg+ (desktop-only feature, less critical on mobile)
     const compareEl = compareHref ? (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: `${iconBtn} hidden lg:flex`, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) })) : null;
-    const searchBtn = (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: iconBtn, "data-tour": "nav-search", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }));
+    const searchBtn = (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", "aria-pressed": searchOpen, onClick: onSearchToggle, className: iconBtn, "data-tour": "nav-search", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }));
     // Dedicated notification bell — rendered immediately before the wishlist
     // icon (per layout request). Falls back to invisible when no href is set;
     // the count badge mirrors the wishlist/cart pattern.
@@ -33,7 +33,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const authButtonsEl = !user && (loginHref || registerHref) ? (_jsxs(Row, { gap: "xs", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-50 dark:hover:bg-[var(--appkit-color-surface-elevated)]", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(notificationsEl || wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", children: [devSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
                                         : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, promotionsEl, tourBtn, themeBtn, hamburgerBtn] })] }), hasTb2 && (_jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, wishlistEl, cartEl, profileEl] }))] })] }));
 }

package/dist/features/layout/hooks/useBottomActions.d.ts

@@ -3,5 +3,7 @@ export interface UseBottomActionsOptions {
     actions?: BottomAction[];
     bulk?: BottomBulkConfig;
     infoLabel?: string;
+    /** Rendered as its own row above infoLabel. See BottomActionsState.secondaryLabel. */
+    secondaryLabel?: string;
 }
 export declare function useBottomActions(options?: UseBottomActionsOptions): void;

package/dist/features/layout/hooks/useBottomActions.js

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from "react";
 import { useBottomActionsContext, } from "../BottomActionsContext";
 export function useBottomActions(options = {}) {
-    const { setActions, setBulkConfig, setInfoLabel, clearAll } = useBottomActionsContext();
+    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, clearAll } = useBottomActionsContext();
     const actionsRef = useRef(options.actions ?? []);
     actionsRef.current = options.actions ?? [];
     const bulkRef = useRef(options.bulk);
@@ -22,6 +22,9 @@ export function useBottomActions(options = {}) {
     useEffect(() => {
         setInfoLabel(options.infoLabel);
     }, [setInfoLabel, options.infoLabel]);
+    useEffect(() => {
+        setSecondaryLabel(options.secondaryLabel);
+    }, [setSecondaryLabel, options.secondaryLabel]);
     useEffect(() => {
         return () => clearAll();
     }, [clearAll]);

package/dist/features/live/components/LiveItemDetailPageView.d.ts

@@ -0,0 +1,9 @@
+import type { ProductDocument } from "../../products/schemas/firestore";
+export interface LiveItemDetailPageViewProps {
+    slug: string;
+    /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
+    initialProduct?: ProductDocument | null;
+    /** Render-prop for the add-to-cart CTA — wired by the page shim (carries the vendor-verification gate). */
+    renderActions?: (product: ProductDocument) => React.ReactNode;
+}
+export declare function LiveItemDetailPageView({ slug, initialProduct, renderActions }: LiveItemDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { getLiveItemForDetail } from "../../../_internal/server/features/live/data";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_LIVE_ITEM_BADGE = "inline-block rounded-full bg-lime-100 dark:bg-lime-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-lime-700 dark:text-lime-300";
+const CLS_WARN_BOX = "rounded-lg border border-warning bg-warning-surface p-[var(--appkit-space-4)] text-[length:var(--appkit-text-sm)]";
+const CLS_WARN_TITLE = "font-medium text-warning";
+const CLS_WARN_BODY = "mt-1 text-warning";
+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 LiveItemDetailPageView({ slug, initialProduct, renderActions }) {
+    const product = initialProduct !== undefined
+        ? (initialProduct ?? undefined)
+        : await getLiveItemForDetail(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: "Live Listing Not Found" }), _jsx(Text, { color: "muted", children: "The live listing you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Live Listings" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Live 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 productVideo = p.video;
+    const meta = product.liveItem;
+    const jurisdictions = meta?.jurisdictionAllowed ?? [];
+    const transport = meta?.transport;
+    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.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), 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, video: productVideo, 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_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFee !== undefined && ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), 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: () => renderActions?.(product), 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/media/MediaImage.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Div, Row, Span } from "../../ui";
 import { ROUNDED_MAP, SHADOW_MAP } from "../../ui/components/surface-tokens";
 import { resolveMediaUrl } from "../../utils/media-url";
@@ -25,6 +25,13 @@ const FALLBACK_ICONS = {
     gallery: "📦",
     avatar: "👤",
 };
+// A freshly-uploaded media slug can legitimately 404 for a brief window
+// right after upload — the Firestore doc write and the Storage object write
+// don't land atomically (see src/app/api/media/[...slug]/route.ts's own
+// comment on this race). Retry with backoff before latching the fallback
+// icon, instead of failing permanently on the very first request.
+const MAX_LOAD_RETRIES = 3;
+const RETRY_BACKOFF_MS = [600, 1200, 2400];
 /** Resolve every URL in a comma-separated srcset string through the media proxy. */
 function resolveSrcSet(input) {
     return input
@@ -44,15 +51,39 @@ function resolveSrcSet(input) {
 export function MediaImage({ src, alt, size = "card", priority = false, loading, objectFit = "cover", fallback, className, rounded, shadow, style, sources, onError, }) {
     const [hasError, setHasError] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
+    const [retryCount, setRetryCount] = useState(0);
+    const retryTimeoutRef = useRef(null);
     const icon = fallback ?? FALLBACK_ICONS[size];
     const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
     const resolvedSrc = resolveMediaUrl(src);
+    // Reset error/load/retry state whenever the resolved src actually changes.
+    // Without this, a component instance that hit a load failure once (e.g.
+    // lost the post-upload propagation race above) latches hasError forever,
+    // even across a later prop change to a src that would now succeed.
+    useEffect(() => {
+        setHasError(false);
+        setIsLoaded(false);
+        setRetryCount(0);
+        return () => {
+            if (retryTimeoutRef.current) {
+                clearTimeout(retryTimeoutRef.current);
+                retryTimeoutRef.current = null;
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resolvedSrc]);
     const wrapperExtra = [
         rounded ? ROUNDED_MAP[rounded] : "",
         shadow ? SHADOW_MAP[shadow] : "",
         className ?? "",
     ].filter(Boolean).join(" ");
     const handleError = () => {
+        if (retryCount < MAX_LOAD_RETRIES) {
+            retryTimeoutRef.current = setTimeout(() => {
+                setRetryCount((count) => count + 1);
+            }, RETRY_BACKOFF_MS[retryCount]);
+            return;
+        }
         setHasError(true);
         onError?.();
     };
@@ -62,15 +93,20 @@ export function MediaImage({ src, alt, size = "card", priority = false, loading,
     const isSvg = resolvedSrc.toLowerCase().endsWith(".svg") ||
         resolvedSrc.includes("image/svg") ||
         /[./]svg(\?|$)/i.test(resolvedSrc);
+    // Cache-bust the retried request so a browser-cached 404 response isn't
+    // silently re-served — the underlying URL is otherwise byte-identical.
+    const requestSrc = retryCount > 0
+        ? `${resolvedSrc}${resolvedSrc.includes("?") ? "&" : "?"}retry=${retryCount}`
+        : resolvedSrc;
     // Art-directed `<picture>` path — bypasses Next.js `<Image>` because the
     // browser must pick the matching `<source>` itself. Loading + decoding hints
     // come from the consumer's preset.
     if (sources && sources.length > 0) {
-        return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: resolvedSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), decoding: "async", 
+        return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: requestSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), decoding: "async", 
                             // catalogued primitive for media (variant catalogue allows the inner
                             // <img> here). Object-fit + className come from typed props.
                             className: `absolute inset-0 w-full h-full ${fitClass}`, onLoad: () => setIsLoaded(true), onError: handleError })] })] }));
     }
-    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: resolvedSrc, alt: alt, fill: true, priority: priority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: () => setHasError(true), unoptimized: isSvg })] }));
+    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: requestSrc, alt: alt, fill: true, priority: priority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: handleError, unoptimized: isSvg })] }));
 }
 export default MediaImage;

package/dist/features/media/MediaVideo.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { Div, Row, Span } from "../../ui";
-import { resolveMediaUrl } from "../../utils/media-url";
+import { resolveMediaUrl, getYouTubeVideoId } from "../../utils/media-url";
 import { useSiteSettings } from "../../core/hooks/useSiteSettings";
 export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true, autoPlayMuted = false, loop = false, trimStart, trimEnd, objectFit = "cover", watermark, }) {
     const videoRef = useRef(null);
     const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
     const resolvedSrc = resolveMediaUrl(src);
     const resolvedPoster = resolveMediaUrl(thumbnailUrl);
+    const youtubeId = getYouTubeVideoId(src);
     // Apply trimStart on load
     useEffect(() => {
         const el = videoRef.current;
@@ -46,6 +47,21 @@ export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true,
             // audit-color-pair-function-ok: deliberate faded placeholder-icon shade, not a readability regression
             className: "absolute inset-0 text-zinc-400 text-[length:var(--appkit-text-4xl)]", surface: "subtle", align: "center", justify: "center", role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: "\uD83C\uDFAC" }) }));
     }
+    // A YouTube watch/share URL (MediaUploadField's "YouTube" tab writes one)
+    // is never a raw playable file — <video src> fails with "no supported
+    // format" for it. Render the iframe embed instead of the native player.
+    if (youtubeId) {
+        const embedParams = new URLSearchParams({ playsinline: "1", rel: "0" });
+        if (autoPlayMuted) {
+            embedParams.set("autoplay", "1");
+            embedParams.set("mute", "1");
+        }
+        if (loop) {
+            embedParams.set("loop", "1");
+            embedParams.set("playlist", youtubeId);
+        }
+        return (_jsx("iframe", { src: `https://www.youtube-nocookie.com/embed/${youtubeId}?${embedParams.toString()}`, title: alt, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, className: "absolute inset-0 w-full h-full border-0" }));
+    }
     return (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, src: resolvedSrc, poster: resolvedPoster, controls: controls, autoPlay: autoPlayMuted, muted: autoPlayMuted, loop: loop, playsInline: true, "aria-label": alt, className: `absolute inset-0 w-full h-full ${fitClass}` }), effectiveWatermark ? _jsx(MediaVideoWatermarkLayer, { config: effectiveWatermark }) : null] }));
 }
 /**

package/dist/features/media/types/index.d.ts

@@ -12,6 +12,13 @@ export interface MediaField {
     source?: MediaSource;
     /** YouTube video ID. Only set when source === "youtube". */
     youtubeId?: string;
+    /**
+     * Duration in seconds, for `type: "video"`. Captured automatically for
+     * direct uploads (off-DOM `<video>` element, see `video-poster.ts`) — not
+     * obtainable client-side for `source: "youtube" | "external"` without a
+     * server round-trip, so it stays undefined for those sources.
+     */
+    duration?: number;
 }
 export declare const mediaFieldSchema: z.ZodObject<{
     url: z.ZodString;
@@ -20,6 +27,7 @@ export declare const mediaFieldSchema: z.ZodObject<{
     thumbnailUrl: z.ZodOptional<z.ZodString>;
     source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
     youtubeId: z.ZodOptional<z.ZodString>;
+    duration: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     type: "video" | "image" | "file";
     url: string;
@@ -27,6 +35,7 @@ export declare const mediaFieldSchema: z.ZodObject<{
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
     youtubeId?: string | undefined;
+    duration?: number | undefined;
 }, {
     type: "video" | "image" | "file";
     url: string;
@@ -34,6 +43,7 @@ export declare const mediaFieldSchema: z.ZodObject<{
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
     youtubeId?: string | undefined;
+    duration?: number | undefined;
 }>;
 export declare function coerceMediaField(value: MediaFieldInput, fallbackType?: MediaFieldType): MediaField | null;
 export declare function coerceMediaFieldArray(values: Array<MediaField | string> | null | undefined, fallbackType?: MediaFieldType): MediaField[];

package/dist/features/media/types/index.js

@@ -7,6 +7,7 @@ export const mediaFieldSchema = z.object({
     thumbnailUrl: z.string().optional(),
     source: z.enum(["upload", "youtube", "external"]).optional(),
     youtubeId: z.string().optional(),
+    duration: z.number().optional(),
 });
 export function coerceMediaField(value, fallbackType = "image") {
     if (!value) {

package/dist/features/media/upload/MediaUploadField.d.ts

@@ -28,6 +28,12 @@ export interface MediaUploadFieldProps {
     enableTrim?: boolean;
     enableThumbnail?: boolean;
     onThumbnailChange?: (url: string) => void;
+    /**
+     * Fired with the captured duration (seconds) for a direct video upload —
+     * mirrors `onThumbnailChange`. Never fires for the YouTube/External-URL
+     * tabs (no client-side way to read those without a server round-trip).
+     */
+    onDurationChange?: (duration: number) => void;
     /** Show a "YouTube URL" tab to embed a YouTube video by ID or URL. */
     showYoutube?: boolean;
     /** Show an "External URL" tab to link a third-party image/video URL. */
@@ -63,4 +69,4 @@ export interface MediaUploadFieldProps {
      */
     autoCapturePoster?: boolean;
 }
-export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, multiple, onAddUrl, autoCapturePoster, }: MediaUploadFieldProps): import("react").JSX.Element;
+export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, onDurationChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, multiple, onAddUrl, autoCapturePoster, }: MediaUploadFieldProps): import("react").JSX.Element;

package/dist/features/media/upload/MediaUploadField.js

@@ -88,7 +88,7 @@ export function MediaUploadField({ label, value, onChange, onChangeField, onUplo
 // SB-UNI-Z5 2026-05-13 — `kind` derives accept/maxSizeMB when not set
 // explicitly; explicit props still win. "*" + 50 stay as the floor for
 // back-compat with callers that pass neither.
-kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText, captureSource = "both", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, showYoutube = true, showExternal = true, onAbort, onStagedUrlsChange, isPersisted = false, multiple = false, onAddUrl, autoCapturePoster = true, }) {
+kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText, captureSource = "both", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, onDurationChange, showYoutube = true, showExternal = true, onAbort, onStagedUrlsChange, isPersisted = false, multiple = false, onAddUrl, autoCapturePoster = true, }) {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [pendingVideoUrl, setPendingVideoUrl] = useState(null);
@@ -198,14 +198,18 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
         : captureMode === "both"
             ? "image/*,video/*"
             : "image/*";
-    const afterUpload = (url, fileType, autoPosterUrl) => {
+    const afterUpload = (url, fileType, autoPosterUrl, duration) => {
         onChangeField?.({
             url,
             type: inferMediaTypeFromMime(fileType, url),
+            source: "upload",
             ...(autoPosterUrl ? { thumbnailUrl: autoPosterUrl } : {}),
+            ...(duration ? { duration } : {}),
         });
         if (autoPosterUrl)
             onThumbnailChange?.(autoPosterUrl);
+        if (duration)
+            onDurationChange?.(duration);
         const isVideoFile = fileType.startsWith("video/");
         if (isVideoFile && enableTrim) {
             setPendingVideoUrl(url);
@@ -283,7 +287,7 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
             const posterFile = posterBlobAsFile(poster, file.name);
             const posterUrl = await onUpload(posterFile);
             stageUrl(posterUrl);
-            return posterUrl;
+            return { posterUrl, duration: poster.duration };
         }
         catch (err) {
             // The upload-poster step is best-effort. Log via normalizeError so any
@@ -309,8 +313,8 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
             else {
                 const result = await uploadSingleFile(files[0]);
                 if (result) {
-                    const posterUrl = (await maybeCaptureVideoPoster(files[0])) ?? undefined;
-                    afterUpload(result.url, result.type, posterUrl);
+                    const poster = await maybeCaptureVideoPoster(files[0]);
+                    afterUpload(result.url, result.type, poster?.posterUrl, poster?.duration);
                 }
             }
         }
@@ -353,8 +357,8 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
         try {
             const url = await onUpload(file);
             stageUrl(url);
-            const posterUrl = (await maybeCaptureVideoPoster(file)) ?? undefined;
-            afterUpload(url, blob.type || mimeType, posterUrl);
+            const poster = await maybeCaptureVideoPoster(file);
+            afterUpload(url, blob.type || mimeType, poster?.posterUrl, poster?.duration);
         }
         catch (err) {
             void normalizeError(err);

package/dist/features/media/upload/video-poster.d.ts

@@ -26,6 +26,8 @@ export interface ExtractedPoster {
     /** Frame dimensions in pixels (also the JPEG's pixel dimensions). */
     width: number;
     height: number;
+    /** Video duration in seconds, read from the same off-DOM element. */
+    duration: number;
 }
 /**
  * Build a deterministic filename for the captured poster. We mirror the

package/dist/features/media/upload/video-poster.js

@@ -25,6 +25,20 @@ const TARGET_FRAME_TIME_SECONDS = 0.5;
 const JPEG_QUALITY = 0.85;
 const LOAD_TIMEOUT_MS = 10000;
 const POSTER_MIME = "image/jpeg";
+/** Bounded wait for `video.duration` to become a finite, positive number. */
+async function readDuration(video) {
+    if (Number.isFinite(video.duration) && video.duration > 0)
+        return video.duration;
+    return new Promise((resolve) => {
+        const timer = window.setTimeout(() => resolve(0), 2000);
+        video.addEventListener("durationchange", () => {
+            if (Number.isFinite(video.duration) && video.duration > 0) {
+                window.clearTimeout(timer);
+                resolve(video.duration);
+            }
+        }, { once: true });
+    });
+}
 /**
  * Build a deterministic filename for the captured poster. We mirror the
  * source video's basename so downstream code can correlate the two assets
@@ -86,6 +100,7 @@ export async function extractVideoPosterFrame(file) {
         const height = video.videoHeight;
         if (!width || !height)
             return null;
+        const duration = await readDuration(video);
         const canvas = document.createElement("canvas");
         canvas.width = width;
         canvas.height = height;
@@ -96,7 +111,7 @@ export async function extractVideoPosterFrame(file) {
         const blob = await new Promise((resolve) => canvas.toBlob(resolve, POSTER_MIME, JPEG_QUALITY));
         if (!blob)
             return null;
-        return { blob, width, height };
+        return { blob, width, height, duration };
     }
     catch (_err) {
         void normalizeError(_err);

package/dist/features/media/upload/video-poster.test.js

@@ -19,7 +19,7 @@ describe("posterBlobAsFile", () => {
         const blob = new Blob([new Uint8Array([0xff, 0xd8, 0xff])], {
             type: "image/jpeg",
         });
-        const file = posterBlobAsFile({ blob, width: 320, height: 180 }, "promo-reel.mp4");
+        const file = posterBlobAsFile({ blob, width: 320, height: 180, duration: 12.5 }, "promo-reel.mp4");
         expect(file).toBeInstanceOf(File);
         expect(file.name).toBe("promo-reel.poster.jpg");
         expect(file.type).toBe("image/jpeg");

package/dist/features/orders/components/OrderStatusTimeline.d.ts

@@ -0,0 +1,12 @@
+export interface OrderStatusTimelineProps {
+    orderStatus: string;
+    orderDate?: string;
+    shippingDate?: string;
+    deliveryDate?: string;
+    cancellationDate?: string;
+    trackingNumber?: string;
+    shippingCarrier?: string;
+    trackingUrl?: string;
+    className?: string;
+}
+export declare function OrderStatusTimeline({ orderStatus, orderDate, shippingDate, deliveryDate, cancellationDate, trackingNumber, shippingCarrier, trackingUrl, className, }: OrderStatusTimelineProps): import("react").JSX.Element;

package/dist/features/orders/components/OrderStatusTimeline.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OrderStatusTimeline — a genuine (not fabricated/estimated) status timeline
+ * built from the real per-status timestamps already written by the
+ * order-status-update path (`orderDate`/`shippingDate`/`deliveryDate`/
+ * `cancellationDate`). No live courier-API integration — `trackingUrl` is
+ * just the passthrough link a seller/admin entered, rendered as an external
+ * link that opens in a new tab. Statuses with no dedicated date field
+ * (confirmed/processing/return_requested/returned/refunded) render as a step
+ * without a timestamp rather than showing a made-up date.
+ */
+import { Anchor, Badge, Div, Heading, Row, Stack, Text } from "../../../ui";
+const STAGE_SEQUENCE = ["pending", "confirmed", "processing", "shipped", "delivered"];
+const STAGE_LABELS = {
+    pending: "Order placed",
+    confirmed: "Confirmed",
+    processing: "Processing",
+    shipped: "Shipped",
+    delivered: "Delivered",
+    cancelled: "Cancelled",
+    return_requested: "Return requested",
+    returned: "Returned",
+    refunded: "Refunded",
+};
+function buildSteps(props) {
+    const status = (props.orderStatus ?? "").toLowerCase();
+    const currentIndex = STAGE_SEQUENCE.indexOf(status);
+    const steps = [{ key: "pending", label: STAGE_LABELS.pending, date: props.orderDate }];
+    if ((status === "confirmed" || status === "processing") && !props.shippingDate) {
+        steps.push({ key: status, label: STAGE_LABELS[status] });
+    }
+    if (props.shippingDate || currentIndex >= 3) {
+        steps.push({ key: "shipped", label: STAGE_LABELS.shipped, date: props.shippingDate });
+    }
+    if (props.deliveryDate || status === "delivered") {
+        steps.push({ key: "delivered", label: STAGE_LABELS.delivered, date: props.deliveryDate });
+    }
+    if (status === "cancelled" || props.cancellationDate) {
+        steps.push({ key: "cancelled", label: STAGE_LABELS.cancelled, date: props.cancellationDate });
+    }
+    else if (status === "return_requested" || status === "returned" || status === "refunded") {
+        steps.push({ key: status, label: STAGE_LABELS[status] ?? status });
+    }
+    return steps;
+}
+export function OrderStatusTimeline({ orderStatus, orderDate, shippingDate, deliveryDate, cancellationDate, trackingNumber, shippingCarrier, trackingUrl, className = "", }) {
+    const steps = buildSteps({ orderStatus, orderDate, shippingDate, deliveryDate, cancellationDate });
+    const isTerminalNegative = steps[steps.length - 1]?.key === "cancelled";
+    return (_jsxs(Div, { className: className, rounded: "xl", padding: "md", surface: "muted", border: "default", children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "muted", className: "mb-3", children: "Tracking" }), _jsx(Stack, { gap: "none", children: steps.map((step, i) => {
+                    const isLast = i === steps.length - 1;
+                    const isNegative = step.key === "cancelled";
+                    return (_jsxs(Row, { gap: "sm", padding: isLast ? "none" : "b-md", children: [_jsxs(Stack, { gap: "none", align: "center", className: "shrink-0", children: [_jsx(Div, { className: `h-2.5 w-2.5 ${isNegative ? "" : "bg-[var(--appkit-color-primary)]"}`, rounded: "full", surface: isNegative ? "danger-surface" : "none" }), !isLast && _jsx(Div, { className: "w-px flex-1 min-h-[24px]", surface: "subtle" })] }), _jsxs(Stack, { gap: "none", className: "min-w-0 flex-1", children: [_jsx(Text, { size: "sm", weight: "medium", className: isNegative ? "text-error" : undefined, children: step.label }), _jsx(Text, { size: "xs", color: "muted", children: step.date ? new Date(step.date).toLocaleString() : "—" })] })] }, step.key));
+                }) }), (trackingNumber || shippingCarrier || trackingUrl) && !isTerminalNegative && (_jsx(Div, { className: "mt-3 border-t border-[var(--appkit-color-border)]", padding: "t-sm", children: _jsxs(Stack, { gap: "xs", children: [shippingCarrier && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", color: "muted", children: "Carrier" }), _jsx(Text, { size: "sm", weight: "medium", children: shippingCarrier })] })), trackingNumber && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", color: "muted", children: "Tracking number" }), _jsx(Text, { size: "sm", weight: "medium", children: trackingNumber })] })), trackingUrl && (_jsx(Row, { justify: "end", children: _jsx(Anchor, { href: trackingUrl, tone: "brand", weight: "semibold", size: "sm", children: "Track with carrier \u2192" }) }))] }) })), !trackingNumber && !trackingUrl && !isTerminalNegative && (_jsx(Badge, { variant: "default", className: "mt-3", children: "No tracking details yet" }))] }));
+}

package/dist/features/orders/components/index.d.ts

@@ -6,6 +6,8 @@ export { OrderSiblingPayments } from "./OrderSiblingPayments";
 export type { OrderSiblingPaymentsProps } from "./OrderSiblingPayments";
 export { OrderPaymentSummary } from "./OrderPaymentSummary";
 export type { OrderPaymentSummaryProps } from "./OrderPaymentSummary";
+export { OrderStatusTimeline } from "./OrderStatusTimeline";
+export type { OrderStatusTimelineProps } from "./OrderStatusTimeline";
 export { RefundHistoryTable } from "./RefundHistoryTable";
 export type { RefundHistoryTableProps } from "./RefundHistoryTable";
 export { RefundRequestView } from "./RefundRequestView";

package/dist/features/orders/components/index.js

@@ -3,5 +3,6 @@ export { MarketplaceOrderCard, } from "./MarketplaceOrderCard";
 export { OrderFilters, ORDER_FILTER_KEYS, ORDER_ADMIN_SORT_OPTIONS, ORDER_SELLER_SORT_OPTIONS, ORDER_USER_SORT_OPTIONS, getOrderFilterKeys, getOrderSortOptions, } from "./OrderFilters";
 export { OrderSiblingPayments } from "./OrderSiblingPayments";
 export { OrderPaymentSummary } from "./OrderPaymentSummary";
+export { OrderStatusTimeline } from "./OrderStatusTimeline";
 export { RefundHistoryTable } from "./RefundHistoryTable";
 export { RefundRequestView } from "./RefundRequestView";