@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -0,0 +1,98 @@
+import React from "react";
+import { type BottomNavbarUser } from "./BottomNavbar";
+import { type FooterLayoutProps } from "./FooterLayout";
+import { type MainNavbarItem } from "./MainNavbar";
+/** A single sidebar link. */
+export interface AppLayoutShellSidebarLink {
+    href: string;
+    label: string;
+    /** Optional icon rendered before the label (emoji string or ReactNode). */
+    icon?: React.ReactNode;
+}
+export interface AppLayoutShellSidebarSection {
+    title?: string;
+    items: AppLayoutShellSidebarLink[];
+}
+export interface AppLayoutShellSidebarAction {
+    href: string;
+    label: string;
+    variant?: "solid" | "outline";
+}
+export interface AppLayoutShellProps {
+    children: React.ReactNode;
+    navItems: MainNavbarItem[];
+    sidebarItems?: AppLayoutShellSidebarLink[];
+    sidebarSections?: AppLayoutShellSidebarSection[];
+    sidebarPrimaryActions?: AppLayoutShellSidebarAction[];
+    sidebarTitle?: string;
+    hiddenNavItems?: string[];
+    user?: BottomNavbarUser | null;
+    brandName: string;
+    brandShortName?: string;
+    logoHref: string;
+    promotionsHref?: string;
+    cartHref: string;
+    profileHref: string;
+    loginHref: string;
+    homeHref: string;
+    shopHref: string;
+    footer: FooterLayoutProps;
+    searchSlot?: React.ReactNode;
+    /** Render-prop alternative to searchSlot — receives onClose so the slot can close the overlay. */
+    searchSlotRenderer?: (onClose: () => void) => React.ReactNode;
+    titleBarNavSlot?: React.ReactNode;
+    titleBarNotificationSlot?: React.ReactNode;
+    titleBarDevSlot?: React.ReactNode;
+    titleBarPromoStripText?: string;
+    showThemeToggle?: boolean;
+    suppressDashboardNav?: boolean;
+    hideSidebarToggle?: boolean;
+    /** Callback invoked when user clicks logout in the sidebar. */
+    onLogout?: () => void;
+    /** Href for the admin dashboard — shown in sidebar Dashboard section when user.role is admin. */
+    adminHref?: string;
+    /** Href for the seller dashboard — shown in sidebar Dashboard section when user.role is admin or seller. */
+    sellerHref?: string;
+    /** Href for the user orders page — auto-generates PROFILE section in sidebar. */
+    userOrdersHref?: string;
+    /** Href for the user wishlist page — auto-generates PROFILE section in sidebar. */
+    userWishlistHref?: string;
+    /** Href for the user settings page — auto-generates PROFILE section in sidebar. */
+    userSettingsHref?: string;
+    /** Locale switcher node rendered at the bottom of the sidebar. */
+    sidebarLocaleSlot?: React.ReactNode;
+    /** When true, shows theme toggle button in the sidebar footer. */
+    showThemeToggleInSidebar?: boolean;
+    /** Override labels for the auto-generated profile section in the sidebar. */
+    sidebarProfileLabels?: {
+        sectionTitle?: string;
+        profile?: string;
+        orders?: string;
+        wishlist?: string;
+        settings?: string;
+        dashboardSectionTitle?: string;
+        adminDashboard?: string;
+        sellerDashboard?: string;
+        logout?: string;
+    };
+    eventBannerSlot?: React.ReactNode;
+    lightBackground?: {
+        type: "color" | "image" | "gradient" | "video";
+        value: string;
+        overlay?: {
+            enabled?: boolean;
+            color?: string;
+            opacity?: number;
+        };
+    };
+    darkBackground?: {
+        type: "color" | "image" | "gradient" | "video";
+        value: string;
+        overlay?: {
+            enabled?: boolean;
+            color?: string;
+            opacity?: number;
+        };
+    };
+}
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/AppLayoutShell.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, 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";
+import { useBottomActionsContext } from "./BottomActionsContext";
+import BottomActions from "./BottomActions";
+import { AutoBreadcrumbs } from "./AutoBreadcrumbs";
+import { BottomNavbar } from "./BottomNavbar";
+import { FooterLayout } from "./FooterLayout";
+import { MainNavbar } from "./MainNavbar";
+import { SidebarLayout } from "./SidebarLayout";
+import { TitleBar } from "./TitleBar";
+import { BackToTop } from "./BackToTop";
+import { useDashboardNav } from "./DashboardNavContext";
+const DEFAULT_LIGHT_BG = {
+    type: "color",
+    value: "#f9fafb",
+    overlay: { enabled: false, color: "#000000", opacity: 0 },
+};
+const DEFAULT_DARK_BG = {
+    type: "color",
+    value: "#030712",
+    overlay: { enabled: false, color: "#000000", opacity: 0 },
+};
+/** Collapsible accordion section for the public sidebar. */
+function CollapsibleSidebarSection({ section, navItemClass, }) {
+    const [open, setOpen] = useState(true);
+    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, }) {
+    const [queryClient] = useState(() => new QueryClient());
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const { theme, toggleTheme } = useTheme();
+    const { closeNav: closeDashboardNav } = useDashboardNav();
+    const { state: bottomActionsState } = useBottomActionsContext();
+    const handleTogglePublicSidebar = useCallback(() => {
+        setSidebarOpen((prev) => {
+            const next = !prev;
+            if (next)
+                closeDashboardNav();
+            return next;
+        });
+    }, [closeDashboardNav]);
+    const handleBeforeDashboardNavToggle = useCallback(() => {
+        setSidebarOpen(false);
+    }, []);
+    const hasBottomActions = bottomActionsState.actions.length > 0 ||
+        !!(bottomActionsState.bulk && bottomActionsState.bulk.selectedCount > 0) ||
+        !!bottomActionsState.infoLabel;
+    const sidebarContent = useMemo(() => {
+        const hasLegacyItems = sidebarItems.length > 0;
+        const hasSections = !!(sidebarSections && sidebarSections.length > 0);
+        const isAuthenticated = !!user;
+        const role = user?.role ?? "user";
+        const isAdminOrSeller = role === "admin" || role === "seller";
+        // Labels with defaults
+        const labels = {
+            sectionTitle: sidebarProfileLabels?.sectionTitle ?? "Profile",
+            profile: sidebarProfileLabels?.profile ?? "My Profile",
+            orders: sidebarProfileLabels?.orders ?? "My Orders",
+            wishlist: sidebarProfileLabels?.wishlist ?? "My Wishlist",
+            settings: sidebarProfileLabels?.settings ?? "Settings",
+            dashboardSectionTitle: sidebarProfileLabels?.dashboardSectionTitle ?? "Dashboard",
+            adminDashboard: sidebarProfileLabels?.adminDashboard ?? "Admin Dashboard",
+            sellerDashboard: sidebarProfileLabels?.sellerDashboard ?? "Seller 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 normalizedSections = hasSections
+            ? sidebarSections
+            : hasLegacyItems
+                ? [{ items: sidebarItems }]
+                : [];
+        return (_jsxs(Div, { className: "space-y-6", children: [!isAuthenticated &&
+                    sidebarPrimaryActions &&
+                    sidebarPrimaryActions.length > 0 && (_jsx(Div, { className: "space-y-2", children: sidebarPrimaryActions.map((action) => (_jsx(TextLink, { href: action.href, variant: "none", className: [
+                            "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 ||
+                    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();
+                                setSidebarOpen(false);
+                            }, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:text-red-300", children: labels.logout }))] }))] }));
+    }, [
+        sidebarItems,
+        sidebarSections,
+        sidebarPrimaryActions,
+        user,
+        profileHref,
+        userOrdersHref,
+        userWishlistHref,
+        userSettingsHref,
+        adminHref,
+        sellerHref,
+        sidebarLocaleSlot,
+        showThemeToggleInSidebar,
+        onLogout,
+        sidebarProfileLabels,
+        theme,
+        toggleTheme,
+    ]);
+    const normalizedLightBackground = {
+        type: lightBackground.type,
+        value: lightBackground.value,
+        overlay: {
+            enabled: lightBackground.overlay?.enabled ?? false,
+            color: lightBackground.overlay?.color ?? "#000000",
+            opacity: lightBackground.overlay?.opacity ?? 0,
+        },
+    };
+    const normalizedDarkBackground = {
+        type: darkBackground.type,
+        value: darkBackground.value,
+        overlay: {
+            enabled: darkBackground.overlay?.enabled ?? false,
+            color: darkBackground.overlay?.color ?? "#000000",
+            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
+                                                            ? {
+                                                                url: user.avatarMetadata.url,
+                                                                position: user.avatarMetadata.position ?? {
+                                                                    x: 50,
+                                                                    y: 50,
+                                                                },
+                                                                zoom: user.avatarMetadata.zoom ?? 1,
+                                                            }
+                                                            : user.photoURL
+                                                                ? {
+                                                                    url: user.photoURL,
+                                                                    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, {})] }) }));
+}

package/dist/features/layout/AutoBreadcrumbs.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Li, Nav, Ol, Span } from "../../ui";
+import { Div, Li, Nav, Ol, Span } from "../../ui";
 /** Map of path segments → human-readable labels. */
 const DEFAULT_PATH_LABELS = {
     auth: "Authentication",
@@ -77,8 +77,8 @@ export function AutoBreadcrumbs({ pathLabels, separator = "/", className = "", r
         href: `${localePrefix}/${segments.slice(0, i + 1).join("/")}`,
     }));
     const allCrumbs = [{ label: "Home", href: localePrefix || "/" }, ...crumbs];
-    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: allCrumbs.map((crumb, index) => {
-                const isLast = index === allCrumbs.length - 1;
-                return (_jsxs(Li, { className: "flex items-center gap-2", children: [isLast ? (_jsx(Span, { "aria-current": "page", className: "text-zinc-500 dark:text-zinc-400", children: crumb.label })) : renderLink ? (renderLink(crumb.href, crumb.label)) : (_jsx(Link, { href: crumb.href, className: "text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors", children: crumb.label })), !isLast && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-500 select-none", "aria-hidden": "true", children: separator }))] }, crumb.href));
-            }) }) }));
+    return (_jsx(Div, { className: "border-y border-zinc-200/80 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800 dark:bg-slate-950/95 dark:supports-[backdrop-filter]:bg-slate-950/85", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-4 py-2 sm:px-6 lg:px-8", children: _jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: allCrumbs.map((crumb, index) => {
+                        const isLast = index === allCrumbs.length - 1;
+                        return (_jsxs(Li, { className: "flex items-center gap-2", children: [isLast ? (_jsx(Span, { "aria-current": "page", className: "text-zinc-700 dark:text-zinc-200", children: crumb.label })) : renderLink ? (renderLink(crumb.href, crumb.label)) : (_jsx(Link, { href: crumb.href, className: "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors", children: crumb.label })), !isLast && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400/90 select-none", "aria-hidden": "true", children: separator }))] }, crumb.href));
+                    }) }) }) }) }));
 }

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

@@ -1,4 +1,3 @@
-import "client-only";
 export interface BackToTopProps {
     /** Scroll distance (px) before the button appears. Defaults to 400. */
     threshold?: number;

package/dist/features/layout/BackToTop.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import "client-only";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { ChevronUp } from "lucide-react";

package/dist/features/layout/BottomActions.js

@@ -28,7 +28,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * // Features use `useBottomActions` to register their actions.
  */
 import { useState, useRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
 import { X, ChevronUp, ChevronDown, Check } from "lucide-react";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import { useClickOutside } from "../../react";
@@ -39,8 +38,6 @@ const Z_BOTTOM_ACTIONS = "z-40";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
 export default function BottomActions() {
-    const tActions = useTranslations("actions");
-    const tBottom = useTranslations("bottomActions");
     const { state, actionCallbacksRef, bulkCallbacksRef, bulkClearRef } = useBottomActionsContext();
     const [pickerOpen, setPickerOpen] = useState(false);
     const [selectedActionId, setSelectedActionId] = useState(null);
@@ -79,7 +76,7 @@ export default function BottomActions() {
         bulkCallbacksRef.current.get(selectedActionId)?.();
         setPickerOpen(false);
     };
-    return (_jsxs("div", { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? tBottom("bulkActionsLabel") : tBottom("pageActionsLabel"), "aria-hidden": !isVisible, className: [
+    return (_jsxs("div", { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? "Bulk actions" : "Page actions", "aria-hidden": !isVisible, className: [
             "fixed bottom-14 left-0 right-0 lg:hidden",
             Z_BOTTOM_ACTIONS,
             BOTTOM_NAV_BG,
@@ -88,7 +85,7 @@ export default function BottomActions() {
             isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), children: [isBulkMode && (_jsx("div", { role: "listbox", "aria-label": tBottom("bulkActionsLabel"), className: [
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
                     "absolute bottom-full left-0 right-0 overflow-hidden",
                     BOTTOM_NAV_BG,
                     "border-t border-zinc-200/80 dark:border-slate-700/80",
@@ -99,7 +96,7 @@ export default function BottomActions() {
                         : "max-h-0 opacity-0 pointer-events-none",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: bulkActions.map((action, i) => {
+                    .join(" "), "data-section": "bottomactions-div-402", children: bulkActions.map((action, i) => {
                     const isSelected = action.id === selectedActionId;
                     return (_jsxs(Button, { role: "option", "aria-selected": isSelected, type: "button", variant: "ghost", disabled: action.disabled || action.loading, onClick: () => {
                             setSelectedActionId(action.id);
@@ -119,9 +116,9 @@ 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", 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": tActions("clearSelection"), 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-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
                                         ? `${bulk.selectedCount} ${bulk.noun}`
-                                        : tBottom("selectedCount", { count: bulk.selectedCount }) })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
+                                        : `${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",
                                 "bg-zinc-50 hover:bg-zinc-100 active:bg-zinc-200 dark:bg-slate-800/60 dark:hover:bg-slate-700/60",
                                 "border-zinc-200 dark:border-slate-700",
@@ -130,10 +127,10 @@ export default function BottomActions() {
                                     : "text-zinc-800 dark:text-zinc-100",
                             ]
                                 .filter(Boolean)
-                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate text-left leading-none", children: selectedAction?.label ?? tBottom("bulkActionsLabel") }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
+                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate text-left leading-none", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
                                 selectedAction?.disabled ||
-                                selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: tBottom("apply") }) }))] })) : (
-                /* Page mode — action buttons inline ────────────────────────────── */
+                                selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
+                /* Page mode — action buttons inline ------------------------------ */
                 pageActions.map((action) => {
                     const isIconOnly = !action.label;
                     const growClass = isIconOnly || action.grow === false

package/dist/features/layout/BottomActionsContext.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
 const EMPTY = { actions: [] };
 const BottomActionsContext = createContext(null);
-// ─── Provider ─────────────────────────────────────────────────────────────────
+// --- Provider -----------------------------------------------------------------
 export function BottomActionsProvider({ children, }) {
     const [state, setState] = useState(EMPTY);
     // Callback refs — updated on every setActions call, so the component always
@@ -104,7 +104,7 @@ export function BottomActionsProvider({ children, }) {
     [state, setActions, setBulkConfig, setInfoLabel, clearAll]);
     return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
 }
-// ─── Hook ─────────────────────────────────────────────────────────────────────
+// --- Hook ---------------------------------------------------------------------
 export function useBottomActionsContext() {
     const ctx = useContext(BottomActionsContext);
     if (!ctx) {

package/dist/features/layout/BottomNavItem.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Li, Span } from "../../ui";
 /**

package/dist/features/layout/BottomNavLayout.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Nav, Ul } from "../../ui";
 /**
@@ -8,5 +7,5 @@ import { Nav, Ul } from "../../ui";
  * and safe-area inset. Pass `li`-wrapped items as children.
  */
 export function BottomNavLayout({ ariaLabel, children, id = "bottom-navbar", className, }) {
-    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: `fixed bottom-0 left-0 right-0 md:hidden z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80 shadow-2xl pb-safe${className ? ` ${className}` : ""}`, children: _jsx(Ul, { className: "flex items-stretch h-14", children: children }) }));
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: `fixed bottom-0 left-0 right-0 lg:hidden z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80 shadow-2xl pb-safe${className ? ` ${className}` : ""}`, children: _jsx(Ul, { className: "flex items-stretch h-16", children: children }) }));
 }

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

@@ -11,6 +11,13 @@ export interface BottomNavbarUser {
         };
         zoom: number;
     } | null;
+    stats?: {
+        totalOrders?: number;
+        auctionsWon?: number;
+        itemsSold?: number;
+        reviewsCount?: number;
+        rating?: number;
+    } | null;
 }
 export interface BottomNavbarProps {
     /** Authenticated user � if provided, shows profile slot with avatar */

package/dist/features/layout/BottomNavbar.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { AvatarDisplay, Button, Li, Span, TextLink } from "../../ui";
+import { AvatarDisplay, Li, Span, TextLink } from "../../ui";
 import { BottomNavLayout } from "./BottomNavLayout";
 import { NavItem } from "./NavItem";
 /**
@@ -10,10 +9,18 @@ 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-[10px] leading-none", getRoleBadgeClass, }) {
+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, }) {
     const pathname = usePathname();
-    const t = useTranslations("nav");
+    const labels = {
+        mobileNav: "Mobile navigation",
+        home: "Home",
+        products: "Products",
+        search: "Search",
+        cart: "Cart",
+        profile: "Profile",
+    };
     const itemStyle = { width: "20%" };
-    return (_jsxs(BottomNavLayout, { ariaLabel: t("mobileNav"), children: [_jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: t("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: t("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, { variant: "ghost", onClick: onSearchToggle, className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 ${inactiveClassName}`, "aria-label": t("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: t("search") })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 relative ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": t("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: t("cart") })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": t("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: t("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 })) })] }));
+    const slotClassName = "relative flex h-full w-full flex-col items-center justify-center gap-1 transition-colors duration-200";
+    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/BottomSheet.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export interface BottomSheetProps {
     open: boolean;

package/dist/features/layout/BottomSheet.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useEffect, useCallback } from "react";
 import { Button, Div, Row, Span } from "../../ui";
 /**

package/dist/features/layout/Breadcrumbs.js

@@ -15,11 +15,11 @@ import { Li, Nav, Ol, Span } from "../../ui";
  */
 export function Breadcrumbs({ children, separator = "/", className = "", }) {
     const items = React.Children.toArray(children);
-    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: items.map((item, index) => (_jsxs(Li, { className: "flex items-center gap-2", children: [item, index < items.length - 1 && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-500 select-none", "aria-hidden": "true", children: separator }))] }, index))) }) }));
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: items.map((item, index) => (_jsxs(Li, { className: "flex items-center gap-2", children: [item, index < items.length - 1 && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400/90 select-none", "aria-hidden": "true", children: separator }))] }, index))) }) }));
 }
 export function BreadcrumbItem({ href, children, current = false, className = "", }) {
     if (current || !href) {
-        return (_jsx(Span, { "aria-current": current ? "page" : undefined, className: `text-zinc-500 dark:text-zinc-400 ${className}`, children: children }));
+        return (_jsx(Span, { "aria-current": current ? "page" : undefined, className: `text-zinc-700 dark:text-zinc-200 ${className}`, children: children }));
     }
-    return (_jsx(Link, { href: href, className: `text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors ${className}`, children: children }));
+    return (_jsx(Link, { href: href, className: `text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors ${className}`, children: children }));
 }

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

@@ -4,8 +4,16 @@ export interface DashboardNavState {
     hasNav: boolean;
     /** Open the registered dashboard navigation drawer. */
     openNav: () => void;
-    /** Register a callback that opens the dashboard nav drawer. */
-    registerNav: (opener: () => void) => void;
+    /** Close the registered dashboard navigation drawer. */
+    closeNav: () => void;
+    /** Toggle the registered dashboard navigation drawer. */
+    toggleNav: () => void;
+    /** Register dashboard navigation handlers. */
+    registerNav: (handlers: (() => void) | {
+        open: () => void;
+        close?: () => void;
+        toggle?: () => void;
+    }) => void;
     /** Unregister the dashboard nav (on unmount). */
     unregisterNav: () => void;
 }

package/dist/features/layout/DashboardNavContext.js

@@ -4,19 +4,49 @@ import { createContext, useCallback, useContext, useRef, useState, } from "react
 const DashboardNavContext = createContext(null);
 export function DashboardNavProvider({ children }) {
     const openerRef = useRef(null);
+    const closerRef = useRef(null);
+    const togglerRef = useRef(null);
     const [hasNav, setHasNav] = useState(false);
-    const registerNav = useCallback((opener) => {
-        openerRef.current = opener;
+    const registerNav = useCallback((handlers) => {
+        if (typeof handlers === "function") {
+            openerRef.current = handlers;
+            closerRef.current = null;
+            togglerRef.current = null;
+            setHasNav(true);
+            return;
+        }
+        openerRef.current = handlers.open;
+        closerRef.current = handlers.close ?? null;
+        togglerRef.current = handlers.toggle ?? null;
         setHasNav(true);
     }, []);
     const unregisterNav = useCallback(() => {
         openerRef.current = null;
+        closerRef.current = null;
+        togglerRef.current = null;
         setHasNav(false);
     }, []);
     const openNav = useCallback(() => {
         openerRef.current?.();
     }, []);
-    return (_jsx(DashboardNavContext.Provider, { value: { hasNav, openNav, registerNav, unregisterNav }, children: children }));
+    const closeNav = useCallback(() => {
+        closerRef.current?.();
+    }, []);
+    const toggleNav = useCallback(() => {
+        if (togglerRef.current) {
+            togglerRef.current();
+            return;
+        }
+        openerRef.current?.();
+    }, []);
+    return (_jsx(DashboardNavContext.Provider, { value: {
+            hasNav,
+            openNav,
+            closeNav,
+            toggleNav,
+            registerNav,
+            unregisterNav,
+        }, children: children }));
 }
 /**
  * useDashboardNav — read the dashboard navigation context.
@@ -28,6 +58,8 @@ export function useDashboardNav() {
         return {
             hasNav: false,
             openNav: () => { },
+            closeNav: () => { },
+            toggleNav: () => { },
             registerNav: () => { },
             unregisterNav: () => { },
         };