@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/layout/AppLayoutShell.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Main, Div, Text, TextLink, Ul, Li, AvatarDisplay, RoleBadge, BackgroundRenderer, UnsavedChangesModal, } from "../../ui";
 import { useTheme } from "../../react";
@@ -25,21 +25,37 @@ const DEFAULT_DARK_BG = {
     overlay: { enabled: false, color: "#000000", opacity: 0 },
 };
 /** Collapsible accordion section for the public sidebar. */
+function CollapsibleNavGroup({ title, children, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Div, { className: "space-y-0.5", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx("span", { children: title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && _jsx(Div, { className: "space-y-0.5", children: children })] }));
+}
 function CollapsibleSidebarSection({ section, navItemClass, }) {
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(section.defaultOpen ?? false);
     const hasTitle = !!section.title;
     if (!hasTitle) {
         return (_jsx(Ul, { className: "space-y-0.5", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx("span", { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }));
     }
     return (_jsxs(Div, { className: "space-y-0.5", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx("span", { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Ul, { className: "space-y-0.5", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx("span", { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }))] }));
 }
-export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
+export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
     const [queryClient] = useState(() => new QueryClient());
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [searchOpen, setSearchOpen] = useState(false);
     const { theme, toggleTheme } = useTheme();
-    const { closeNav: closeDashboardNav } = useDashboardNav();
+    const { closeNav: closeDashboardNav, hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
     const { state: bottomActionsState } = useBottomActionsContext();
+    const headerRef = useRef(null);
+    useEffect(() => {
+        const el = headerRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(() => {
+            document.documentElement.style.setProperty("--header-height", `${el.offsetHeight}px`);
+        });
+        observer.observe(el);
+        document.documentElement.style.setProperty("--header-height", `${el.offsetHeight}px`);
+        return () => observer.disconnect();
+    }, []);
     const handleTogglePublicSidebar = useCallback(() => {
         setSidebarOpen((prev) => {
             const next = !prev;
@@ -60,6 +76,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
         const isAuthenticated = !!user;
         const role = user?.role ?? "user";
         const isAdminOrSeller = role === "admin" || role === "seller";
+        const resolvedStoreHref = storeHref ?? sellerHref;
         // Labels with defaults
         const labels = {
             sectionTitle: sidebarProfileLabels?.sectionTitle ?? "Profile",
@@ -69,11 +86,13 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             settings: sidebarProfileLabels?.settings ?? "Settings",
             dashboardSectionTitle: sidebarProfileLabels?.dashboardSectionTitle ?? "Dashboard",
             adminDashboard: sidebarProfileLabels?.adminDashboard ?? "Admin Dashboard",
-            sellerDashboard: sidebarProfileLabels?.sellerDashboard ?? "Seller Dashboard",
+            storeDashboard: sidebarProfileLabels?.storeDashboard ??
+                sidebarProfileLabels?.sellerDashboard ??
+                "Store Dashboard",
             logout: sidebarProfileLabels?.logout ?? "Logout",
         };
         const sectionLabelClass = "px-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400";
-        const navItemClass = "block rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300";
+        const navItemClass = "flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300";
         const normalizedSections = hasSections
             ? sidebarSections
             : hasLegacyItems
@@ -85,8 +104,8 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             "block w-full rounded-lg px-3 py-2.5 text-center text-sm font-semibold transition-all duration-200 hover:scale-[1.02] shadow-sm",
                             action.variant === "outline"
                                 ? "border border-zinc-300 text-zinc-700 hover:bg-zinc-50 dark:border-slate-700 dark:text-zinc-100 dark:hover:bg-slate-800"
-                                : "bg-primary !text-zinc-900 hover:bg-primary-500 dark:bg-secondary dark:!text-white dark:hover:bg-secondary-600 shadow-lg shadow-primary/20 dark:shadow-secondary/20",
-                        ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: sectionLabelClass, children: labels.sectionTitle }), _jsxs(Ul, { className: "space-y-0.5", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] })] })), isAuthenticated && user?.stats && (_jsxs(Div, { className: "grid grid-cols-2 gap-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.totalOrders }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.reviewsCount }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.auctionsWon }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.itemsSold }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || sellerHref) && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: sectionLabelClass, children: labels.dashboardSectionTitle }), _jsxs(Ul, { className: "space-y-0.5", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), sellerHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: sellerHref, variant: "none", className: navItemClass, children: labels.sellerDashboard }) }))] })] })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot ||
+                                : "bg-primary text-white hover:bg-primary-600 dark:bg-primary dark:hover:bg-primary-600 btn-glow",
+                        ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { className: "grid grid-cols-2 gap-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.totalOrders }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.reviewsCount }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.auctionsWon }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: "rounded-lg bg-zinc-100 dark:bg-slate-800 px-3 py-2.5 text-center", children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.itemsSold }), _jsx(Text, { className: "mt-0.5 text-[11px] text-zinc-500 dark:text-zinc-400", children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: navItemClass, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot ||
                     showThemeToggleInSidebar ||
                     (isAuthenticated && onLogout)) && (_jsxs(Div, { className: "border-t border-zinc-200 pt-4 space-y-3 dark:border-slate-800", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300", children: [_jsx("span", { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), theme === "dark" ? "Light mode" : "Dark mode"] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => {
                                 onLogout();
@@ -102,6 +121,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
         userWishlistHref,
         userSettingsHref,
         adminHref,
+        storeHref,
         sellerHref,
         sidebarLocaleSlot,
         showThemeToggleInSidebar,
@@ -128,7 +148,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Div, { className: "flex min-h-screen w-full flex-col overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, profileHref: profileHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: navItems, hiddenNavItems: hiddenNavItems }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { className: "relative flex w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsxs(Div, { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Div, { className: "flex min-h-screen w-full flex-col overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: navItems, hiddenNavItems: hiddenNavItems }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { className: "relative flex w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsxs(Div, { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
                                                             ? {
                                                                 url: user.avatarMetadata.url,
                                                                 position: user.avatarMetadata.position ?? {
@@ -143,5 +163,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                                                                     position: { x: 50, y: 50 },
                                                                     zoom: 1,
                                                                 }
-                                                                : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Div, { className: "absolute -bottom-1 -right-1", children: _jsx(RoleBadge, { role: user.role }) }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: user.displayName || "User" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: () => setSidebarOpen(false), className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", 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: "M6 18L18 6M6 6l12 12" }) }) })] })) : (_jsxs(Div, { className: "flex items-center justify-between", children: [_jsx(Div, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: sidebarTitle }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: () => setSidebarOpen(false), className: "rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", 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: "M6 18L18 6M6 6l12 12" }) }) })] })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 ${hasBottomActions ? "mb-28" : "mb-16"} md:mb-0`, children: _jsx(Div, { className: "container mx-auto w-full max-w-screen-2xl px-4 py-6 md:px-6 lg:px-8", children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev) }), _jsx(UnsavedChangesModal, {})] }) }));
+                                                                : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Div, { className: "absolute -bottom-1 -right-1", children: _jsx(RoleBadge, { role: user.role }) }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: user.displayName || "User" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: () => setSidebarOpen(false), className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", 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: "M6 18L18 6M6 6l12 12" }) }) })] })) : (_jsxs(Div, { className: "flex items-center justify-between", children: [_jsx(Div, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: sidebarTitle }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: () => setSidebarOpen(false), className: "rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", 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: "M6 18L18 6M6 6l12 12" }) }) })] })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 ${hasBottomActions ? "mb-28" : "mb-16"} md:mb-0`, children: _jsx(Div, { className: "container mx-auto w-full max-w-screen-2xl px-4 py-6 md:px-6 lg:px-8", children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
 }

package/dist/features/layout/BottomActions.js

@@ -116,7 +116,7 @@ export default function BottomActions() {
                         ]
                             .filter(Boolean)
                             .join(" "), children: [action.icon && (_jsx(Span, { className: `flex-shrink-0 w-5 h-5 ${FLEX_CENTER}`, "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "flex-1 truncate", children: action.label }), isSelected && (_jsx(Check, { className: "w-4 h-4 flex-shrink-0 text-primary-600 dark:text-primary-400", "aria-hidden": "true" }))] }, action.id));
-                }) })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-primary-400 to-primary-600 dark:from-secondary-600 dark:via-secondary-400 dark:to-secondary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+                }) })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                 "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",

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

@@ -1,3 +1,10 @@
+import React from "react";
+export interface BottomNavItem {
+    key: string;
+    href: string;
+    label: string;
+    icon?: React.ReactNode;
+}
 export interface BottomNavbarUser {
     displayName: string | null;
     email: string | null;
@@ -34,6 +41,13 @@ export interface BottomNavbarProps {
     loginHref: string;
     /** Called when the Search slot is tapped */
     onSearchToggle?: () => void;
+    /**
+     * When provided, renders these items in the bottom nav (first 4 shown, 5th slot = "More" button).
+     * Overrides the hardcoded Home/Shop/Search/Cart/Profile layout.
+     */
+    navItems?: BottomNavItem[];
+    /** Called when the "More" slot is tapped (typically opens the sidebar drawer). */
+    onMoreToggle?: () => void;
     /** CSS class applied to the active nav item. Default: "text-primary-600 dark:text-primary-400" */
     activeClassName?: string;
     /** CSS class applied to inactive nav items. Default: "text-zinc-500 dark:text-slate-400" */
@@ -50,4 +64,4 @@ export interface BottomNavbarProps {
  *
  * Pass `user` from your auth context to render the profile slot with avatar.
  */
-export declare function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, activeClassName, inactiveClassName, iconClassName, labelClassName, getRoleBadgeClass, }: BottomNavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, navItems, onMoreToggle, activeClassName, inactiveClassName, iconClassName, labelClassName, getRoleBadgeClass, }: BottomNavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/BottomNavbar.js

@@ -9,7 +9,7 @@ import { NavItem } from "./NavItem";
  *
  * Pass `user` from your auth context to render the profile slot with avatar.
  */
-export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, activeClassName = "text-primary-600 dark:text-primary-400", inactiveClassName = "text-zinc-500 dark:text-slate-400", iconClassName, labelClassName = "text-[11px] leading-tight font-medium", getRoleBadgeClass, }) {
+export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, navItems, onMoreToggle, activeClassName = "text-primary-600 dark:text-primary-400", inactiveClassName = "text-zinc-500 dark:text-slate-400", iconClassName, labelClassName = "text-[11px] leading-tight font-medium", getRoleBadgeClass, }) {
     const pathname = usePathname();
     const labels = {
         mobileNav: "Mobile navigation",
@@ -18,9 +18,15 @@ export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref,
         search: "Search",
         cart: "Cart",
         profile: "Profile",
+        more: "More",
     };
-    const itemStyle = { width: "20%" };
     const slotClassName = "relative flex h-full w-full flex-col items-center justify-center gap-1 transition-colors duration-200";
+    const defaultIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }));
+    if (navItems && navItems.length > 0) {
+        const visibleItems = navItems.slice(0, 4);
+        return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: item.href, label: item.label, icon: item.icon ?? defaultIcon, isActive: pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/")), variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }, item.key))), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onMoreToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.more, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx(Span, { className: labelClassName, children: labels.more })] }) })] }));
+    }
+    const itemStyle = { width: "20%" };
     return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.cart, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
                                 (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] font-semibold uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-zinc-500 dark:text-slate-400"}`, children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
 }

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

@@ -21,6 +21,10 @@ export interface TrustBarItem {
     subtitle?: string;
     visible?: boolean;
 }
+export interface FooterBottomLink {
+    label: string;
+    href: string;
+}
 export interface FooterLayoutProps {
     brandName: string;
     brandDescription: string;
@@ -34,6 +38,8 @@ export interface FooterLayoutProps {
     /** When true, renders the trust bar above the main footer content. */
     showTrustBar?: boolean;
     trustBarItems?: TrustBarItem[];
+    /** SEO/utility links shown in the bottom bar (sitemap, robots, etc.) */
+    bottomLinks?: FooterBottomLink[];
     id?: string;
 }
-export declare function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled, showTrustBar, trustBarItems, id, }: FooterLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled, showTrustBar, trustBarItems, bottomLinks, id, }: FooterLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/FooterLayout.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
-import { BlockFooter, Div, Heading, Li, Row, Span, Text, Ul, } from "../../ui";
-export function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled = true, showTrustBar = false, trustBarItems = [], id = "footer", }) {
+import { BlockFooter, Button, Div, Heading, Li, Row, Span, Text, Ul, } from "../../ui";
+export function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled = true, showTrustBar = false, trustBarItems = [], bottomLinks = [], id = "footer", }) {
     const [openGroups, setOpenGroups] = useState({});
     const toggleGroup = (idx) => setOpenGroups((prev) => ({ ...prev, [idx]: !prev[idx] }));
     const visibleTrustItems = trustBarItems.filter((item) => item.visible !== false);
     return (_jsxs(BlockFooter, { id: id, className: "bg-zinc-50 dark:bg-slate-950 border-t border-zinc-200 dark:border-slate-800", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { className: "border-b border-zinc-100 dark:border-slate-800 py-8", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-10", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { gap: "sm", className: "text-sm min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400 w-5 h-5", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100 block text-sm", children: item.label }), item.subtitle && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400 text-xs block", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] py-10 lg:py-14", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16", children: [_jsxs(Div, { className: "lg:col-span-2 space-y-4", children: [_jsx(Heading, { level: 5, className: "text-zinc-900 dark:text-zinc-50 font-bold text-xl", children: brandName }), _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-zinc-200 dark:border-slate-700 text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary hover:border-primary/40 dark:hover:border-secondary/40 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { className: "pt-2", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-0 lg:gap-8 ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
                                     linkGroups.length === 4 ? "lg:grid-cols-4" :
-                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs("button", { type: "button", onClick: () => toggleGroup(idx), className: "flex w-full items-center justify-between border-b border-zinc-200 py-3 text-left text-sm font-semibold text-zinc-800 transition-colors hover:text-zinc-950 dark:border-slate-800 dark:text-zinc-100 dark:hover:text-white lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Div, { className: "mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400", children: [_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: copyrightText }), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
+                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => toggleGroup(idx), className: "flex w-full items-center justify-between border-b border-zinc-200 py-3 text-left text-sm font-semibold text-zinc-800 transition-colors hover:text-zinc-950 dark:border-slate-800 dark:text-zinc-100 dark:hover:text-white lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Div, { className: "mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400", children: [_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: copyrightText }), bottomLinks.length > 0 && (_jsx("nav", { "aria-label": "Site utilities", children: _jsx(Ul, { className: "flex flex-wrap items-center gap-x-4 gap-y-1 justify-center", children: bottomLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors underline-offset-2 hover:underline", children: link.label }) }, link.href))) }) })), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
 }

package/dist/features/layout/ListingLayout.js

@@ -57,7 +57,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
             .filter(Boolean)
             .join(" "), children: [headerSlot, statusTabsSlot && (_jsx(Div, { className: "overflow-x-auto touch-pan-x -mx-4 px-4 md:-mx-6 md:px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: statusTabsSlot })), _jsxs(Div, { className: [
                     "sticky z-20 -mx-4 px-4 md:-mx-6 md:px-6",
-                    isDashboard ? "top-0" : "top-14 md:top-[120px]",
+                    "top-[var(--header-height,0px)]",
                     "bg-white/80 dark:bg-slate-950/80 backdrop-blur-md",
                     "border-b border-zinc-200/70 dark:border-slate-800/70",
                     "shadow-[0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
@@ -80,7 +80,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                                                 : "",
                                         ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot })] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx(Div, { className: "flex items-stretch min-h-[44px] gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsxs(Row, { className: "gap-2 flex-shrink-0 pb-px", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && bulkActionBarSlot && (_jsx(Div, { className: "hidden md:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800", children: bulkActionBarSlot }))] }), _jsxs(Div, { className: "flex gap-4 lg:gap-6 items-start", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
                             "hidden lg:block flex-shrink-0 self-start",
-                            isDashboard ? "sticky top-16" : "sticky top-[176px]",
+                            "sticky top-[var(--header-height,0px)]",
                             "transition-all duration-200 ease-in-out overflow-hidden",
                             sidebarOpen
                                 ? "w-60 xl:w-64 2xl:w-72 opacity-100"

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

@@ -1,3 +1,4 @@
+import React from "react";
 export interface MainNavbarItem {
     /** Unique key used for filtering */
     key: string;
@@ -15,18 +16,9 @@ export interface MainNavbarProps {
     hiddenNavItems?: string[];
     /** When true, renders the navbar inline instead of sticky */
     inline?: boolean;
+    /** Whether a dashboard section has registered a secondary nav drawer. */
+    hasDashboardNav?: boolean;
+    /** Callback to toggle the dashboard nav drawer (already closes the public sidebar first). */
+    onToggleDashboardNav?: () => void;
 }
-/**
- * MainNavbar — horizontal desktop navigation bar.
- *
- * Accepts pre-translated nav items from the consumer config and delegates
- * rendering to the generic NavbarLayout primitive.
- *
- * @example
- * ```tsx
- * const t = useTranslations("nav");
- * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
- * <MainNavbar navItems={items} />
- * ```
- */
-export declare function MainNavbar({ navItems, hiddenNavItems, inline, }: MainNavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainNavbar({ navItems, hiddenNavItems, inline, hasDashboardNav, onToggleDashboardNav, }: MainNavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/MainNavbar.js

@@ -1,21 +1,8 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from "next/navigation";
 import { NavbarLayout } from "./NavbarLayout";
-/**
- * MainNavbar — horizontal desktop navigation bar.
- *
- * Accepts pre-translated nav items from the consumer config and delegates
- * rendering to the generic NavbarLayout primitive.
- *
- * @example
- * ```tsx
- * const t = useTranslations("nav");
- * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
- * <MainNavbar navItems={items} />
- * ```
- */
-export function MainNavbar({ navItems, hiddenNavItems = [], inline = false, }) {
+export function MainNavbar({ navItems, hiddenNavItems = [], inline = false, hasDashboardNav = false, onToggleDashboardNav, }) {
     const pathname = usePathname();
     const items = navItems
         .filter((item) => !hiddenNavItems.includes(item.key))
@@ -25,5 +12,6 @@ export function MainNavbar({ navItems, hiddenNavItems = [], inline = false, }) {
         icon: item.icon,
         highlighted: item.highlighted,
     }));
-    return _jsx(NavbarLayout, { items: items, activeHref: pathname, inline: inline });
+    const dashboardToggle = hasDashboardNav && onToggleDashboardNav ? (_jsx("button", { type: "button", onClick: onToggleDashboardNav, "aria-label": "Toggle dashboard navigation", className: "flex items-center justify-center w-8 h-8 rounded-lg text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-800 dark:hover:text-zinc-100 transition-colors", children: _jsxs("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: "M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 3v18" })] }) })) : undefined;
+    return (_jsx(NavbarLayout, { items: items, activeHref: pathname, inline: inline, rightSlot: dashboardToggle }));
 }

package/dist/features/layout/NavItem.js

@@ -14,7 +14,7 @@ export function NavItem({ href, label, icon, isActive = false, variant = "horizo
                 className,
             ]
                 .filter(Boolean)
-                .join(" "), children: [isActive && (_jsx(Span, { className: "absolute inset-0 rounded-t-xl bg-gradient-to-b from-primary/10 to-transparent pointer-events-none", "aria-hidden": true })), _jsx(Row, { className: ["relative", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["relative whitespace-nowrap", labelClassName].join(" "), children: label })] }));
+                .join(" "), children: [isActive && (_jsx(Span, { className: "absolute inset-0 rounded-t-xl bg-gradient-to-b from-primary/20 dark:from-secondary/25 to-transparent pointer-events-none", "aria-hidden": true })), _jsx(Row, { className: ["relative", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["relative whitespace-nowrap", labelClassName].join(" "), children: label })] }));
     }
     if (highlighted) {
         return (_jsxs(Link, { href: href, className: [

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

@@ -17,6 +17,8 @@ export interface NavbarLayoutProps {
     inline?: boolean;
     /** Render a custom nav item — defaults to an <a> anchor link. */
     renderItem?: (item: NavbarLayoutItem, isActive: boolean) => React.ReactNode;
+    /** Optional slot rendered at the far right of the navbar row. */
+    rightSlot?: React.ReactNode;
 }
 /**
  * NavbarLayout — generic horizontal navigation bar shell.
@@ -24,4 +26,4 @@ export interface NavbarLayoutProps {
  * Zero domain imports. Receives all navigation items and the current
  * active href as props. Hidden on mobile (visible md+).
  */
-export declare function NavbarLayout({ items, activeHref, id, ariaLabel, inline, renderItem, }: NavbarLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarLayout({ items, activeHref, id, ariaLabel, inline, renderItem, rightSlot, }: NavbarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/NavbarLayout.js

@@ -3,10 +3,10 @@ import Link from "next/link";
 import { Div, Li, Nav, Span, Ul } from "../../ui";
 function DefaultNavItem({ item, isActive, }) {
     const activeClasses = item.highlighted
-        ? "border border-primary-400/40 dark:border-secondary-400/30 text-primary-700 dark:text-secondary-400 bg-primary-50/80 dark:bg-secondary-900/30 px-3"
+        ? "border border-primary-400/40 dark:border-secondary-400/30 text-primary-700 dark:text-secondary-400 bg-primary-50/80 dark:bg-secondary-900/30 px-3 transition-colors duration-150"
         : isActive
-            ? "bg-primary-50 dark:bg-secondary-900/20 text-primary-800 dark:text-secondary-300 font-semibold px-3 border-b-2 border-primary dark:border-secondary rounded-none pb-[6px]"
-            : "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 px-3";
+            ? "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 })] }));
 }
 /**
@@ -15,9 +15,9 @@ function DefaultNavItem({ item, isActive, }) {
  * Zero domain imports. Receives all navigation items and the current
  * active href as props. Hidden on mobile (visible md+).
  */
-export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel = "Main navigation", inline = false, renderItem, }) {
+export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel = "Main navigation", inline = false, renderItem, rightSlot, }) {
     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: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Ul, { className: "flex items-center gap-0.5 lg:gap-1 h-10", 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 })] }) }));
 }

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

@@ -1,5 +1,7 @@
 import type { TitleBarLayoutProps } from "./TitleBarLayout";
-export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
+export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "wishlistCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
+    /** Auth UID of the current user — used for wishlist merge-on-login and sync. */
+    userId?: string | null;
     /**
      * When true, hides the dashboard nav PanelLeft button so that nested
      * admin/seller/user layouts can own their sidebar controls exclusively.
@@ -17,4 +19,4 @@ export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "
  * Wrap with `DashboardNavProvider` at the app root to enable the
  * dashboard nav button in nested admin/seller/user routes.
  */
-export declare function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, ...rest }: TitleBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, userId, ...rest }: TitleBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCartCount } from "../cart/hooks/useCartCount";
+import { useWishlistCount } from "../wishlist/hooks/useWishlistCount";
 import { useDashboardNav } from "./DashboardNavContext";
 import { TitleBarLayout } from "./TitleBarLayout";
 /**
@@ -11,10 +12,11 @@ import { TitleBarLayout } from "./TitleBarLayout";
  * Wrap with `DashboardNavProvider` at the app root to enable the
  * dashboard nav button in nested admin/seller/user routes.
  */
-export function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, ...rest }) {
-    const cartCount = useCartCount();
+export function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, userId, ...rest }) {
+    const cartCount = useCartCount(!!rest.user);
+    const wishlistCount = useWishlistCount(userId);
     const { hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
-    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onToggleDashboardNav: suppressDashboardNav
+    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, wishlistCount: wishlistCount, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onToggleDashboardNav: suppressDashboardNav
             ? undefined
             : () => {
                 onBeforeToggleDashboardNav?.();

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

@@ -18,6 +18,8 @@ export interface TitleBarLayoutProps {
     promotionsHref?: string;
     /** Href for the compare page/drawer. When provided, renders a Compare icon button. */
     compareHref?: string;
+    wishlistHref?: string;
+    wishlistCount?: number;
     cartHref?: string;
     cartCount?: number;
     profileHref?: string;
@@ -47,4 +49,4 @@ export interface TitleBarLayoutProps {
  * 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, logoHref, promotionsHref, compareHref, 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, brandName, brandShortName, 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;

package/dist/features/layout/TitleBarLayout.js

@@ -8,9 +8,9 @@ import { BlockHeader, Button, Div, Row, Span } from "../../ui";
  * 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, logoHref, promotionsHref, compareHref, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, 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;
-    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-blue-700 dark:from-secondary-700 dark:to-blue-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: [_jsxs(Row, { gap: "3", children: [hasDashboardNav && onToggleDashboardNav && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Toggle dashboard navigation", onClick: onToggleDashboardNav, 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: "M4 6h16M4 12h16M4 18h16" }) }) })), _jsx(Link, { href: logoHref, className: "font-bold text-xl tracking-tight text-zinc-900 dark:text-zinc-50 hover:text-primary dark:hover:text-secondary transition-colors", children: brandShortName ? (_jsxs(_Fragment, { children: [_jsx(Span, { className: "md:hidden", children: brandShortName }), _jsx(Span, { className: "hidden md:inline", children: brandName })] })) : (brandName) })] }), 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" }) })) })), 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
+    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, className: "font-bold text-xl tracking-tight text-zinc-900 dark:text-zinc-50 hover:text-primary dark:hover:text-secondary transition-colors", children: brandShortName ? (_jsxs(_Fragment, { children: [_jsx(Span, { className: "md:hidden", children: brandShortName }), _jsx(Span, { className: "hidden md:inline", children: brandName })] })) : (brandName) }) }), 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" }) })) }))] })] }) })] }));
 }

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

@@ -1,7 +1,7 @@
 export { NavbarLayout } from "./NavbarLayout";
 export type { NavbarLayoutProps, NavbarLayoutItem } from "./NavbarLayout";
 export { FooterLayout } from "./FooterLayout";
-export type { FooterLayoutProps, FooterLinkGroup, FooterSocialLink, TrustBarItem, } from "./FooterLayout";
+export type { FooterLayoutProps, FooterLinkGroup, FooterSocialLink, FooterBottomLink, TrustBarItem, } from "./FooterLayout";
 export { SidebarLayout } from "./SidebarLayout";
 export type { SidebarLayoutProps } from "./SidebarLayout";
 export { BottomNavLayout } from "./BottomNavLayout";

package/dist/features/media/MediaPickerModal.d.ts

@@ -0,0 +1,30 @@
+export interface MediaPickerModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Called with the selected media URL (proxy path or external URL). */
+    onSelect: (url: string) => void;
+    /** Accepted MIME types for file upload. Defaults to image/*. */
+    accept?: string;
+    /** Max file size in MB for upload tab. Defaults to 10. */
+    maxSizeMB?: number;
+    /** Storage path prefix for uploaded files. Defaults to "media". */
+    uploadPath?: string;
+    title?: string;
+}
+/**
+ * MediaPickerModal — pick or upload a media file for use in a form field.
+ *
+ * Two tabs:
+ * - Upload: drag/drop or click to upload a new file → "Use this file" button
+ * - URL: paste an external image/video URL directly
+ *
+ * @example
+ * ```tsx
+ * <MediaPickerModal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   onSelect={(url) => form.setValue("imageUrl", url)}
+ * />
+ * ```
+ */
+export declare function MediaPickerModal({ isOpen, onClose, onSelect, accept, maxSizeMB, uploadPath, title, }: MediaPickerModalProps): import("react/jsx-runtime").JSX.Element;