@mohasinac/appkit 2.6.2 → 2.6.4

package/dist/features/layout/NavbarLayout.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { Div, Li, Nav, Span, Ul } from "../../ui";
 function DefaultNavItem({ item, isActive, }) {
@@ -7,17 +9,44 @@ function DefaultNavItem({ item, isActive, }) {
         : isActive
             ? "bg-primary-50 dark:bg-secondary-900/30 text-primary-800 dark:text-secondary-200 font-semibold px-3 border-b-2 border-primary-500 dark:border-secondary-400 rounded-none pb-[6px] transition-colors duration-150"
             : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-950 dark:hover:text-white transition-colors duration-150 px-3";
-    return (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-1.5 py-2 text-sm rounded-lg font-medium transition-colors duration-150 ${activeClasses}`, children: [item.icon, _jsx(Span, { children: item.label })] }));
+    return (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-1.5 py-2 text-sm rounded-lg font-medium transition-colors duration-150 whitespace-nowrap ${activeClasses}`, children: [item.icon, _jsx(Span, { children: item.label })] }));
 }
+const chevronBtn = "absolute top-0 bottom-0 z-10 flex items-center justify-center w-8 bg-gradient-to-r from-white/95 dark:from-slate-950/95 to-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors";
 /**
  * NavbarLayout — generic horizontal navigation bar shell.
  *
  * Zero domain imports. Receives all navigation items and the current
- * active href as props. Hidden on mobile (visible md+).
+ * active href as props. Hidden on mobile (visible lg+).
+ *
+ * When items overflow the container, left/right scroll arrows appear automatically.
  */
 export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel = "Main navigation", inline = false, renderItem, rightSlot, }) {
+    const scrollRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const updateArrows = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setCanScrollLeft(el.scrollLeft > 4);
+        setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
+    }, []);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        updateArrows();
+        el.addEventListener("scroll", updateArrows, { passive: true });
+        const ro = new ResizeObserver(updateArrows);
+        ro.observe(el);
+        return () => {
+            el.removeEventListener("scroll", updateArrows);
+            ro.disconnect();
+        };
+    }, [updateArrows, items]);
+    const scroll = (dir) => scrollRef.current?.scrollBy({ left: dir === "left" ? -240 : 240, behavior: "smooth" });
     if (inline) {
         return (_jsx(Ul, { "aria-label": ariaLabel, className: "hidden xl:flex items-center gap-0.5 xl:gap-1", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }));
     }
-    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800", children: _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] flex items-center h-10", children: [_jsx(Ul, { className: "flex items-center gap-0.5 lg:gap-1 flex-1", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }), rightSlot && _jsx(Div, { className: "shrink-0 ml-2", children: rightSlot })] }) }));
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800", children: _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] flex items-center h-10", children: [_jsxs(Div, { className: "relative flex-1 overflow-hidden", children: [canScrollLeft && (_jsx("button", { type: "button", onClick: () => scroll("left"), "aria-label": "Scroll navigation left", className: `${chevronBtn} left-0 bg-gradient-to-r`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) })), _jsx("ul", { ref: scrollRef, className: "flex items-center gap-0.5 lg:gap-1 overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: items.map((item) => (_jsx("li", { className: "shrink-0", children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }), canScrollRight && (_jsx("button", { type: "button", onClick: () => scroll("right"), "aria-label": "Scroll navigation right", className: `${chevronBtn} right-0 bg-gradient-to-l`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) }))] }), rightSlot && _jsx(Div, { className: "shrink-0 ml-2", children: rightSlot })] }) }));
 }

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

@@ -26,7 +26,7 @@ export interface TitleBarLayoutProps {
     cartCount?: number;
     profileHref?: string;
     user?: TitleBarUser | null;
-    /** Slot rendered between the search button and profile link (e.g. NotificationBell). */
+    /** Slot rendered beside the profile link (e.g. NotificationBell). */
     notificationSlot?: React.ReactNode;
     /** Optional dev-only action slot rendered in the right-side action group. */
     devSlot?: React.ReactNode;
@@ -48,7 +48,10 @@ export interface TitleBarLayoutProps {
 /**
  * TitleBarLayout — generic top sticky title-bar shell.
  *
+ * Layout:
+ *  TB1 (h-14, all screens): logo | navSlot? | [secondary actions lg+] | search | deals | theme | hamburger
+ *  TB2 (h-10, below lg only): wishlist | cart | profile  — mirrors what TB1 hides below lg
+ *
  * Receives all domain data as props — zero domain imports.
- * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -2,16 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import Link from "next/link";
 import { BlockHeader, Button, Div, Row, SiteLogo, Span } from "../../ui";
+/** Shared icon-button class for all action buttons in the title bar. */
+const iconBtn = "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors";
+/** Badge counter class for wishlist/cart counts. */
+const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none";
 /**
  * TitleBarLayout — generic top sticky title-bar shell.
  *
+ * Layout:
+ *  TB1 (h-14, all screens): logo | navSlot? | [secondary actions lg+] | search | deals | theme | hamburger
+ *  TB2 (h-10, below lg only): wishlist | cart | profile  — mirrors what TB1 hides below lg
+ *
  * Receives all domain data as props — zero domain imports.
- * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
-    void searchOpen;
-    void brandShortName;
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800 shadow-sm ${className}`, children: [promoStripText && (_jsx(Div, { className: "bg-gradient-to-r from-primary-700 to-secondary-600 dark:from-primary-700 dark:to-cobalt-700 text-white text-xs py-1 text-center font-medium", children: promoStripText })), _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsxs(Row, { justify: "between", gap: "none", className: "h-14", children: [_jsx(Row, { gap: "3", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, src: siteLogoUrl, className: "h-7 md:h-9 lg:h-10" }) }) }), navSlot && _jsx(Div, { className: "hidden md:flex", children: navSlot }), _jsxs(Row, { gap: "xs", children: [promotionsHref && (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "hidden lg:flex items-center gap-1 px-3 py-1 rounded-full 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" }) }), "Today's Deals"] })), compareHref && (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: "hidden lg:flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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" }) }) }), notificationSlot, devSlot, onToggleTheme && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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" }) })) })), wishlistHref && (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: wishlistCount > 9 ? "9+" : wishlistCount }))] })), cartHref && (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: cartCount > 9 ? "9+" : cartCount }))] })), !hideSidebarToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: onToggleSidebar, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", 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" })) }) })), profileHref && (_jsx(Link, { href: profileHref, "aria-label": user
-                                        ? `Profile — ${user.displayName ?? user.email}`
-                                        : "Sign in", className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: user?.photoURL ? (_jsx(Image, { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, className: "w-7 h-7 rounded-full object-cover" })) : (_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: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })) }))] })] }) })] }));
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _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-1 px-3 py-1 rounded-full 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;
+    const hamburgerBtn = !hideSidebarToggle ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: 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, 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 wishlistEl = wishlistHref ? (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: `relative ${iconBtn}`, 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: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: countBadge, children: wishlistCount > 9 ? "9+" : wishlistCount }))] })) : null;
+    const cartEl = cartHref ? (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: `relative ${iconBtn}`, 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: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: countBadge, children: cartCount > 9 ? "9+" : cartCount }))] })) : null;
+    const profileEl = profileHref ? (_jsx(Link, { href: profileHref, "aria-label": user ? `Profile — ${user.displayName ?? user.email}` : "Sign in", className: iconBtn, children: user?.photoURL ? (_jsx(Image, { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, className: "w-7 h-7 rounded-full object-cover" })) : (_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: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })) })) : null;
+    const hasTb2 = !!(wishlistEl || cartEl || profileEl);
+    // ── Render ───────────────────────────────────────────────────────────────────
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800 shadow-sm ${className}`, children: [promoStripText && (_jsx(Div, { className: "bg-gradient-to-r from-primary-700 to-secondary-600 dark:from-primary-700 dark:to-cobalt-700 text-white text-xs py-1 text-center font-medium", children: promoStripText })), _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "h-14", children: [_jsx(Row, { gap: "3", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, src: siteLogoUrl, className: "h-7 md:h-9 lg:h-10" }) }) }), navSlot && _jsx(Div, { className: "hidden md:flex", children: navSlot }), _jsxs(Row, { gap: "xs", children: [devSlot, compareEl, notificationSlot, wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl }), searchBtn, promotionsEl, themeBtn, hamburgerBtn] })] }), hasTb2 && (_jsxs(Row, { as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", className: "flex lg:hidden h-10 border-t border-zinc-100 dark:border-slate-800 px-1", children: [wishlistEl, cartEl, profileEl] }))] })] }));
 }

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

@@ -1,4 +1,11 @@
 import { type MediaField } from "../types/index";
+/**
+ * SB-UNI-Z5 2026-05-13 — `kind` prop UX sugar. When set, the component
+ * auto-derives `accept` + `maxSizeMB` from the canonical media-limits
+ * registry so callers don't have to remember the MIME list per type.
+ * Explicit `accept` / `maxSizeMB` props still win when provided.
+ */
+export type MediaUploadFieldKind = "image" | "video" | "pdf" | "auto";
 export interface MediaUploadFieldProps {
     label: string;
     value: string;
@@ -7,6 +14,13 @@ export interface MediaUploadFieldProps {
     onUpload: (file: File) => Promise<string>;
     accept?: string;
     maxSizeMB?: number;
+    /**
+     * SB-UNI-Z5 2026-05-13 — derives `accept` + `maxSizeMB` defaults when
+     * those props aren't explicitly set. Useful so per-context fields
+     * (avatar = "image", product video = "video", etc.) don't have to
+     * duplicate the MIME list. Explicit `accept` / `maxSizeMB` override.
+     */
+    kind?: MediaUploadFieldKind;
     disabled?: boolean;
     helperText?: string;
     captureSource?: "file-only" | "camera-only" | "both";
@@ -32,4 +46,4 @@ export interface MediaUploadFieldProps {
      */
     isPersisted?: boolean;
 }
-export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept, maxSizeMB, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+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, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,6 +16,15 @@ import { VideoTrimModal } from "../modals/VideoTrimModal";
 import { VideoThumbnailSelector } from "../modals/VideoThumbnailSelector";
 import CameraCapture from "./CameraCapture";
 import { inferMediaTypeFromMime } from "../types/index";
+const KIND_DEFAULTS = {
+    image: { accept: "image/*", maxSizeMB: 25 },
+    video: { accept: "video/*", maxSizeMB: 200 },
+    pdf: { accept: "application/pdf", maxSizeMB: 10 },
+};
+const AUTO_KIND_DEFAULTS = {
+    accept: "image/*,video/*,application/pdf",
+    maxSizeMB: 200,
+};
 function isVideo(url) {
     return /\.(mp4|webm|ogg|mov|avi)(\?|$)/i.test(url);
 }
@@ -55,7 +64,11 @@ function extractYouTubeId(input) {
         return null;
     }
 }
-export function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept = "*", maxSizeMB = 50, disabled = false, helperText, captureSource = "both", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, showYoutube = false, showExternal = false, onAbort, onStagedUrlsChange, isPersisted = false, }) {
+export function MediaUploadField({ label, value, onChange, onChangeField, onUpload, 
+// 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 = false, showExternal = false, onAbort, onStagedUrlsChange, isPersisted = false, }) {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [pendingVideoUrl, setPendingVideoUrl] = useState(null);
@@ -71,6 +84,14 @@ export function MediaUploadField({ label, value, onChange, onChangeField, onUplo
     // PDF mode: derived from the `accept` prop. Hides camera capture + alternate
     // URL tabs (YouTube/External never make sense for invoice/payout-doc fields)
     // and trim/thumbnail flow.
+    // SB-UNI-Z5 2026-05-13 — fold `kind` defaults under explicit props.
+    const kindDefaults = kind === "auto"
+        ? AUTO_KIND_DEFAULTS
+        : kind
+            ? KIND_DEFAULTS[kind]
+            : null;
+    const accept = acceptProp ?? kindDefaults?.accept ?? "*";
+    const maxSizeMB = maxSizeMBProp ?? kindDefaults?.maxSizeMB ?? 50;
     const pdfMode = isPdfAccept(accept);
     function handleYtApply() {
         const id = extractYouTubeId(ytInput);

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

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { Package } from "lucide-react";
-import { Button, Caption, Span, StatusBadge, Text, TextLink, } from "../../../ui";
+import { BaseListingCard, Caption, Span, StatusBadge, Text, TextLink, Button, } from "../../../ui";
 import { formatCurrency, formatDate } from "../../../utils";
 import { OrderStatusValues } from "../schemas";
+import { useLongPress } from "../../../react/hooks/useLongPress";
 const STATUS_MAP = {
     pending: "pending",
     confirmed: "info",
@@ -43,9 +44,10 @@ export function MarketplaceOrderCard({ order, links, labels, className = "", var
         event.stopPropagation();
         onSelect?.(orderId, !isSelected);
     }, [orderId, isSelected, onSelect]);
+    const longPress = useLongPress(() => onSelect?.(orderId, !isSelected));
     const isListVariant = variant === "list";
     const itemCount = order.items?.length ?? 0;
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all duration-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 ${isSelected ? "ring-2 ring-primary-500 dark:ring-primary-400" : ""} ${className}`, "data-section": "marketplaceordercard-div-411", children: [selectable && (_jsx(Button, { variant: "ghost", "aria-label": isSelected ? "Deselect order" : "Select order", "aria-pressed": isSelected, onClick: handleSelect, className: `absolute top-3 left-3 z-10 h-6 w-6 cursor-pointer rounded-md border-2 p-0 shadow-md transition-colors ${isSelected ? "border-primary bg-primary" : "border-zinc-400 bg-white/95 hover:border-primary dark:border-slate-500 dark:bg-slate-800/95"}`, children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })) })), _jsxs("div", { className: `flex gap-4 p-4 ${isListVariant ? "flex-row items-center justify-between" : "flex-col"}`, "data-section": "marketplaceordercard-div-412", children: [_jsxs("div", { className: `flex items-start gap-3 ${selectable ? "pl-8" : ""} ${isListVariant ? "min-w-0 flex-1" : ""}`, "data-section": "marketplaceordercard-div-413", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-slate-800", "data-section": "marketplaceordercard-div-414", children: _jsx(Package, { className: "h-5 w-5 text-zinc-500 dark:text-slate-400" }) }), _jsxs("div", { className: "min-w-0 space-y-1", "data-section": "marketplaceordercard-div-415", children: [_jsx(TextLink, { href: detailHref, className: "leading-tight", children: _jsx(Text, { weight: "semibold", className: "truncate", children: order.productTitle ?? shortId }) }), _jsxs(Caption, { className: "font-mono text-xs", children: [mergedLabels.orderNumber, " ", shortId] }), _jsxs(Caption, { className: "text-xs", children: [mergedLabels.placedOn, " ", formatDate(order.orderDate)] }), itemCount > 1 && (_jsxs(Caption, { className: "text-xs", children: [mergedLabels.items, ": ", _jsx(Span, { weight: "medium", children: itemCount })] }))] })] }), _jsxs("div", { className: `flex ${isListVariant ? "flex-shrink-0 items-center gap-4" : "flex-col gap-3"}`, "data-section": "marketplaceordercard-div-416", children: [_jsxs("div", { className: `flex ${isListVariant ? "items-center gap-4" : "flex-wrap items-center justify-between gap-3"}`, "data-section": "marketplaceordercard-div-417", children: [_jsx(StatusBadge, { status: status, label: statusLabel }), _jsx(Text, { weight: "semibold", className: "tabular-nums", children: formatCurrency(order.totalPrice, order.currency) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-section": "marketplaceordercard-div-418", children: [(isShipped || isDelivered) &&
+    return (_jsxs("div", { className: `group relative overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all duration-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 ${isSelected ? "ring-2 ring-primary-500 dark:ring-primary-400" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, "data-section": "marketplaceordercard-div-411", children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: handleSelect, label: isSelected ? "Deselect order" : "Select order", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs("div", { className: `flex gap-4 p-4 ${isListVariant ? "flex-row items-center justify-between" : "flex-col"}`, "data-section": "marketplaceordercard-div-412", children: [_jsxs("div", { className: `flex items-start gap-3 ${selectable ? "pl-8" : ""} ${isListVariant ? "min-w-0 flex-1" : ""}`, "data-section": "marketplaceordercard-div-413", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-slate-800", "data-section": "marketplaceordercard-div-414", children: _jsx(Package, { className: "h-5 w-5 text-zinc-500 dark:text-slate-400" }) }), _jsxs("div", { className: "min-w-0 space-y-1", "data-section": "marketplaceordercard-div-415", children: [_jsx(TextLink, { href: detailHref, className: "leading-tight", children: _jsx(Text, { weight: "semibold", className: "truncate", children: order.productTitle ?? shortId }) }), _jsxs(Caption, { className: "font-mono text-xs", children: [mergedLabels.orderNumber, " ", shortId] }), _jsxs(Caption, { className: "text-xs", children: [mergedLabels.placedOn, " ", formatDate(order.orderDate)] }), itemCount > 1 && (_jsxs(Caption, { className: "text-xs", children: [mergedLabels.items, ": ", _jsx(Span, { weight: "medium", children: itemCount })] }))] })] }), _jsxs("div", { className: `flex ${isListVariant ? "flex-shrink-0 items-center gap-4" : "flex-col gap-3"}`, "data-section": "marketplaceordercard-div-416", children: [_jsxs("div", { className: `flex ${isListVariant ? "items-center gap-4" : "flex-wrap items-center justify-between gap-3"}`, "data-section": "marketplaceordercard-div-417", children: [_jsx(StatusBadge, { status: status, label: statusLabel }), _jsx(Text, { weight: "semibold", className: "tabular-nums", children: formatCurrency(order.totalPrice, order.currency) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-section": "marketplaceordercard-div-418", children: [(isShipped || isDelivered) &&
                                         trackHref &&
                                         order.trackingNumber && (_jsx(Button, { variant: "ghost", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(trackHref), children: mergedLabels.trackOrder })), isDelivered && reviewHref && (_jsx(Button, { variant: "outline", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(reviewHref), children: mergedLabels.writeReview })), _jsx(Button, { variant: "secondary", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(detailHref), children: mergedLabels.viewOrder })] })] })] })] }));
 }

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

@@ -0,0 +1,8 @@
+import type { OrderDocument } from "../schemas";
+export interface OrderSiblingPaymentsProps {
+    siblings: OrderDocument[];
+    /** The current order's id — excluded from the sibling list. */
+    currentOrderId: string;
+    className?: string;
+}
+export declare function OrderSiblingPayments({ siblings, currentOrderId, className, }: OrderSiblingPaymentsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Div, Heading, Row, Stack, Text } from "../../../ui";
+import { ROUTES } from "../../../next/routing/route-map";
+import { REFUND_COPY } from "../../../_internal/shared/features/orders/refund-copy";
+import { formatCurrency } from "../../../utils/number.formatter";
+export function OrderSiblingPayments({ siblings, currentOrderId, className = "", }) {
+    const others = siblings.filter((o) => o.id !== currentOrderId);
+    if (others.length === 0)
+        return null;
+    return (_jsxs(Div, { className: `rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900 ${className}`, children: [_jsx(Heading, { level: 3, className: "mb-3 text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: REFUND_COPY.siblingPayments.heading(others.length) }), _jsx(Stack, { gap: "xs", children: others.map((o) => {
+                    const href = String(ROUTES.USER.ORDER_DETAIL(o.id));
+                    return (_jsxs(Row, { justify: "between", align: "center", gap: "sm", children: [_jsx(Link, { href: href, className: "text-sm font-medium text-[color:var(--appkit-color-primary)] hover:underline", children: o.id }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "xs", color: "muted", className: "capitalize", children: o.status }), _jsx(Text, { size: "xs", weight: "semibold", children: formatCurrency(o.totalPrice / 100, o.currency ?? "INR") })] })] }, o.id));
+                }) })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { OrderDocument } from "../schemas";
+export interface RefundHistoryTableProps {
+    order: Pick<OrderDocument, "refunds" | "contestable" | "totalPrice" | "currency">;
+    className?: string;
+}
+export declare function RefundHistoryTable({ order, className }: RefundHistoryTableProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { REFUND_COPY } from "../../../_internal/shared/features/orders/refund-copy";
+function formatDate(d) {
+    const dt = d instanceof Date ? d : new Date(d);
+    return dt.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
+}
+function RefundRow({ event, currency }) {
+    return (_jsxs(Row, { justify: "between", align: "start", gap: "sm", className: "border-b border-zinc-100 py-3 last:border-0 dark:border-zinc-800", children: [_jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Badge, { variant: event.type === "full" ? "danger" : "warning", children: event.type === "full" ? REFUND_COPY.history.badgeFull : REFUND_COPY.history.badgePartial }), _jsx(Text, { size: "xs", color: "muted", children: formatDate(event.refundedAt) })] }), _jsx(Text, { size: "sm", children: event.reason }), event.manualTransactionId && (_jsxs(Text, { size: "xs", color: "muted", children: [REFUND_COPY.history.labelTxn, " ", event.manualTransactionId] })), event.razorpayRefundId && (_jsxs(Text, { size: "xs", color: "muted", children: [REFUND_COPY.history.labelRazorpay, " ", event.razorpayRefundId] }))] }), _jsx(Text, { size: "sm", weight: "semibold", className: "shrink-0", children: formatCurrency(event.amount / 100, currency) })] }));
+}
+/** Warning triangle icon — inline SVG kept here since it's a single-use decorative element. */
+function WarningIcon() {
+    return (_jsx("svg", { className: "h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z", clipRule: "evenodd" }) }));
+}
+export function RefundHistoryTable({ order, className = "" }) {
+    const events = order.refunds ?? [];
+    const currency = order.currency ?? "INR";
+    if (events.length === 0 && order.contestable !== false)
+        return null;
+    return (_jsxs(Div, { className: `rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 ${className}`, children: [order.contestable === false && (_jsx(Div, { className: "rounded-t-xl bg-amber-50 px-4 py-3 dark:bg-amber-950/30", children: _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(WarningIcon, {}), _jsx(Text, { size: "sm", weight: "semibold", className: "text-amber-700 dark:text-amber-400", children: REFUND_COPY.history.nonContestableBanner })] }) })), events.length > 0 && (_jsxs(Div, { className: "p-4", children: [_jsx(Heading, { level: 4, className: "mb-3 text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: REFUND_COPY.history.heading }), _jsx(Stack, { gap: "none", children: events.map((e) => (_jsx(RefundRow, { event: e, currency: currency }, e.refundId))) })] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { OrderDocument } from "../schemas";
+export interface RefundRequestViewProps {
+    order: Pick<OrderDocument, "id" | "totalPrice" | "currency" | "isNonRefundable" | "refunds" | "contestable">;
+    onSubmitRequest: (reason: string) => Promise<void>;
+    isLoading?: boolean;
+    className?: string;
+}
+export declare function RefundRequestView({ order, onSubmitRequest, isLoading, className, }: RefundRequestViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RefundRequestView — buyer-facing refund submission form.
+ *
+ * Shows 3 acknowledgment checkboxes (via the appkit Checkbox primitive) that
+ * the buyer must tick before the submit button becomes active. On submit the
+ * parent's `onSubmitRequest` is called with the reason string; the parent
+ * (page or modal) is responsible for calling the API.
+ *
+ * This component is presentational: it has no server-action imports and
+ * does not talk to the API directly.
+ */
+import { useState } from "react";
+import { Button, Checkbox, Div, Stack, Text, Textarea } from "../../../ui";
+import { REFUND_COPY } from "../../../_internal/shared/features/orders/refund-copy";
+import { formatCurrency } from "../../../utils/number.formatter";
+const ACK_COUNT = REFUND_COPY.request.acknowledgments.length;
+export function RefundRequestView({ order, onSubmitRequest, isLoading = false, className = "", }) {
+    const [acknowledged, setAcknowledged] = useState(Array(ACK_COUNT).fill(false));
+    const [reason, setReason] = useState("");
+    const [error, setError] = useState(null);
+    const allChecked = acknowledged.every(Boolean);
+    const canSubmit = allChecked && reason.trim().length >= 10 && !isLoading;
+    if (order.isNonRefundable) {
+        return (_jsx(Div, { className: `rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900 ${className}`, children: _jsx(Text, { size: "sm", color: "muted", children: REFUND_COPY.request.nonRefundableMessage }) }));
+    }
+    if (order.contestable === false) {
+        return (_jsx(Div, { className: `rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-950/30 ${className}`, children: _jsx(Text, { size: "sm", className: "text-amber-700 dark:text-amber-400", children: REFUND_COPY.request.alreadyRefundedMessage }) }));
+    }
+    const handleToggle = (i) => setAcknowledged((prev) => prev.map((v, idx) => (idx === i ? !v : v)));
+    const handleSubmit = async () => {
+        setError(null);
+        try {
+            await onSubmitRequest(reason.trim());
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : REFUND_COPY.request.errorFallback);
+        }
+    };
+    return (_jsxs(Stack, { gap: "md", className: className, children: [_jsxs(Text, { size: "sm", color: "muted", children: [REFUND_COPY.request.orderTotalLabel, " ", _jsx("strong", { children: formatCurrency(order.totalPrice / 100, order.currency ?? "INR") })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [REFUND_COPY.request.reasonLabel, " ", _jsx("span", { "aria-hidden": true, children: "*" })] }), _jsx(Textarea, { value: reason, onChange: (e) => setReason(e.target.value), placeholder: REFUND_COPY.request.reasonPlaceholder, rows: 3, "aria-required": "true", "aria-label": REFUND_COPY.request.reasonLabel })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", children: REFUND_COPY.request.acknowledgeHeading }), REFUND_COPY.request.acknowledgments.map((text, i) => (_jsx(Checkbox, { checked: acknowledged[i], onChange: () => handleToggle(i), label: _jsx(Text, { size: "sm", className: "leading-snug", children: text }), "aria-label": `Acknowledgment ${i + 1}` }, i)))] }), error && (_jsx(Text, { size: "sm", color: "danger", role: "alert", children: error })), _jsx(Button, { variant: "danger", onClick: handleSubmit, disabled: !canSubmit, "aria-busy": isLoading, children: isLoading ? REFUND_COPY.request.submittingLabel : REFUND_COPY.request.submitLabel })] }));
+}

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

@@ -2,3 +2,9 @@ export { OrderCard, OrdersList } from "./OrdersList";
 export { MarketplaceOrderCard, type MarketplaceOrderCardLabels, type MarketplaceOrderCardLinks, type MarketplaceOrderCardOrder, type MarketplaceOrderCardProps, } from "./MarketplaceOrderCard";
 export { OrderFilters, ORDER_FILTER_KEYS, ORDER_ADMIN_SORT_OPTIONS, ORDER_SELLER_SORT_OPTIONS, ORDER_USER_SORT_OPTIONS, getOrderFilterKeys, getOrderSortOptions, } from "./OrderFilters";
 export type { OrderFiltersProps, OrderFilterVariant } from "./OrderFilters";
+export { OrderSiblingPayments } from "./OrderSiblingPayments";
+export type { OrderSiblingPaymentsProps } from "./OrderSiblingPayments";
+export { RefundHistoryTable } from "./RefundHistoryTable";
+export type { RefundHistoryTableProps } from "./RefundHistoryTable";
+export { RefundRequestView } from "./RefundRequestView";
+export type { RefundRequestViewProps } from "./RefundRequestView";

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

@@ -1,3 +1,6 @@
 export { OrderCard, OrdersList } from "./OrdersList";
 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 { RefundHistoryTable } from "./RefundHistoryTable";
+export { RefundRequestView } from "./RefundRequestView";

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

@@ -4,4 +4,5 @@ export * from "./components";
 export * from "./schemas";
 export * from "./columns";
 export * from "./utils/order-splitter";
+export { groupOrderItemsByBundle, type BundleOrderGroup, type OrderItemForBundleGrouping, } from "./utils/bundle-grouping";
 export { manifest } from "./manifest";

package/dist/features/orders/index.js

@@ -4,4 +4,6 @@ export * from "./components";
 export * from "./schemas";
 export * from "./columns";
 export * from "./utils/order-splitter";
+// S-SBUNI-5 2026-05-13 — bundle-aware order item grouping.
+export { groupOrderItemsByBundle, } from "./utils/bundle-grouping";
 export { manifest } from "./manifest";

package/dist/features/orders/repository/orders.repository.d.ts

@@ -1,7 +1,7 @@
 import type { DocumentReference, WriteBatch } from "firebase-admin/firestore";
 import type { FirebaseSieveResult, SieveModel } from "../../../providers/db-firebase";
 import { BaseRepository } from "../../../providers/db-firebase";
-import { type OrderCreateInput, type OrderDocument } from "../schemas";
+import { type OrderCreateInput, type OrderDocument, type OrderRefundEvent } from "../schemas";
 import type { OrderStatus, PaymentStatus } from "../types";
 declare class OrderRepository extends BaseRepository<OrderDocument> {
     constructor();
@@ -81,6 +81,10 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        contestable: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     listForSeller(productIds: string[], model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
     listForUser(userId: string, model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
@@ -145,8 +149,23 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        paymentBatchId: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        contestable: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     listAll(model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
+    /**
+     * Append one refund event to the order and mark it non-contestable.
+     * If `becomeRefunded` is true, also transitions the order status to "refunded".
+     */
+    postRefundEvent(orderId: string, event: OrderRefundEvent, becomeRefunded?: boolean): Promise<OrderDocument>;
+    /** Fetch all orders sharing a paymentBatchId (for sibling-orders display). */
+    findByPaymentBatchId(batchId: string): Promise<OrderDocument[]>;
     /**
      * Cloud Functions: find pending orders created before a timeout threshold.
      * Used by the payment-timeout cleanup job to cancel stale unconfirmed orders.

package/dist/features/orders/repository/orders.repository.js

@@ -1,4 +1,4 @@
-import { DatabaseError } from "../../../errors";
+import { DatabaseError, NotFoundError } from "../../../errors";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";
 import { decryptPiiFields, encryptPiiFields, ORDER_PII_FIELDS, } from "../../../security";
 import { serverTimestamp } from "../../../contracts/field-ops";
@@ -208,6 +208,31 @@ class OrderRepository extends BaseRepository {
             maxPageSize: 200,
         });
     }
+    /**
+     * Append one refund event to the order and mark it non-contestable.
+     * If `becomeRefunded` is true, also transitions the order status to "refunded".
+     */
+    async postRefundEvent(orderId, event, becomeRefunded = false) {
+        const order = await this.findById(orderId);
+        if (!order)
+            throw new NotFoundError(`Order ${orderId} not found`);
+        const existing = order.refunds ?? [];
+        return this.update(orderId, {
+            refunds: [...existing, event],
+            contestable: false,
+            ...(becomeRefunded ? { status: "refunded" } : {}),
+            updatedAt: new Date(),
+        });
+    }
+    /** Fetch all orders sharing a paymentBatchId (for sibling-orders display). */
+    async findByPaymentBatchId(batchId) {
+        const snap = await this.db
+            .collection(this.collection)
+            .where("paymentBatchId", "==", batchId)
+            .limit(20)
+            .get();
+        return snap.docs.map((d) => this.decryptOrder({ id: d.id, ...d.data() }));
+    }
     /**
      * Cloud Functions: find pending orders created before a timeout threshold.
      * Used by the payment-timeout cleanup job to cancel stale unconfirmed orders.
@@ -325,6 +350,7 @@ OrderRepository.SELLER_SIEVE_FIELDS = {
     totalPrice: { canFilter: true, canSort: true },
     orderDate: { canFilter: true, canSort: true },
     createdAt: { canFilter: true, canSort: true },
+    contestable: { canFilter: true, canSort: false },
 };
 OrderRepository.ADMIN_SIEVE_FIELDS = {
     id: { canFilter: true, canSort: false },
@@ -342,6 +368,9 @@ OrderRepository.ADMIN_SIEVE_FIELDS = {
     totalPrice: { canFilter: true, canSort: true },
     orderDate: { canFilter: true, canSort: true },
     createdAt: { canFilter: true, canSort: true },
+    // S-SBUNI-RULES 2026-05-13 — refund + batch fields
+    paymentBatchId: { canFilter: true, canSort: false },
+    contestable: { canFilter: true, canSort: false },
 };
 const orderRepository = new OrderRepository();
 export { OrderRepository, orderRepository };