@mohasinac/appkit 2.3.2 → 2.4.0

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;

package/dist/features/media/MediaPickerModal.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Modal } from "../../ui/components/Modal";
+import { Button, Input, Label, Row, Stack, Text, Alert } from "../../ui";
+import { MediaUploadField } from "./upload/MediaUploadField";
+import { useMediaUpload, useMediaCleanup } from "./index";
+/**
+ * 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 function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*", maxSizeMB = 10, uploadPath = "media", title = "Pick Media", }) {
+    const [tab, setTab] = useState("upload");
+    const [uploadedUrl, setUploadedUrl] = useState("");
+    const [externalUrl, setExternalUrl] = useState("");
+    const [urlError, setUrlError] = useState("");
+    const { upload } = useMediaUpload();
+    const { cleanup } = useMediaCleanup();
+    const handleUpload = useCallback((file) => upload(file, uploadPath, true), [upload, uploadPath]);
+    const handleAbort = useCallback((urls) => { void cleanup(urls); }, [cleanup]);
+    function handleUseUpload() {
+        if (!uploadedUrl)
+            return;
+        onSelect(uploadedUrl);
+        resetAndClose();
+    }
+    function handleUseExternal() {
+        const trimmed = externalUrl.trim();
+        if (!trimmed) {
+            setUrlError("Please enter a URL.");
+            return;
+        }
+        try {
+            new URL(trimmed);
+        }
+        catch {
+            setUrlError("Enter a valid URL starting with https://");
+            return;
+        }
+        onSelect(trimmed);
+        resetAndClose();
+    }
+    function resetAndClose() {
+        setUploadedUrl("");
+        setExternalUrl("");
+        setUrlError("");
+        setTab("upload");
+        onClose();
+    }
+    const tabBtnClass = (active) => [
+        "appkit-media-picker__tab-btn",
+        active ? "appkit-media-picker__tab-btn--active" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(Modal, { isOpen: isOpen, onClose: resetAndClose, title: title, size: "lg", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: resetAndClose, children: "Cancel" }), tab === "upload" ? (_jsx(Button, { variant: "primary", onClick: handleUseUpload, disabled: !uploadedUrl, children: "Use this file" })) : (_jsx(Button, { variant: "primary", onClick: handleUseExternal, disabled: !externalUrl.trim(), children: "Use this URL" }))] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "none", className: "appkit-media-picker__tabs", children: [_jsx("button", { type: "button", className: tabBtnClass(tab === "upload"), onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "url"), onClick: () => setTab("url"), children: "External URL" })] }), tab === "upload" && (_jsx(MediaUploadField, { label: "File", value: uploadedUrl, onChange: setUploadedUrl, onUpload: handleUpload, accept: accept, maxSizeMB: maxSizeMB, onAbort: handleAbort })), tab === "url" && (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { htmlFor: "media-picker-url", children: "Image or video URL" }), _jsx(Input, { id: "media-picker-url", value: externalUrl, onChange: (e) => {
+                                setExternalUrl(e.target.value);
+                                setUrlError("");
+                            }, placeholder: "https://example.com/image.jpg" }), urlError && _jsx(Alert, { variant: "error", children: urlError }), _jsx(Text, { size: "sm", color: "muted", children: "External URLs are stored as-is and are not watermarked." })] }))] }) }));
+}

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

@@ -10,6 +10,8 @@ export { MediaSlider } from "./components/MediaSlider";
 export type { MediaSliderProps } from "./components/MediaSlider";
 export { useMediaUpload, useMediaAbort, useMediaCrop, useMediaTrim, useMediaCleanup, } from "./hooks/useMedia";
 export type { MediaUploadResult, MediaCropInput, MediaTrimInput, } from "./hooks/useMedia";
+export { MediaPickerModal } from "./MediaPickerModal";
+export type { MediaPickerModalProps } from "./MediaPickerModal";
 export { ImageCropModal } from "./modals/ImageCropModal";
 export type { ImageCropData, ImageCropModalProps, } from "./modals/ImageCropModal";
 export { VideoTrimModal } from "./modals/VideoTrimModal";
@@ -23,7 +25,7 @@ export type { MediaUploadFieldProps } from "./upload/MediaUploadField";
 export { MediaUploadList } from "./upload/MediaUploadList";
 export type { MediaUploadListProps } from "./upload/MediaUploadList";
 export { coerceMediaField, coerceMediaFieldArray, getMediaUrl, inferMediaTypeFromMime, mediaFieldSchema, } from "./types/index";
-export type { MediaField, MediaFieldInput, MediaFieldType, } from "./types/index";
+export type { MediaField, MediaFieldInput, MediaFieldType, MediaSource, } from "./types/index";
 export { default as CameraCapture } from "./upload/CameraCapture";
 export type { CameraCaptureProps } from "./upload/CameraCapture";
 export { AvatarUpload } from "./AvatarUpload";

package/dist/features/media/index.js

@@ -9,6 +9,7 @@ export { MediaSlider } from "./components/MediaSlider";
 // Hooks
 export { useMediaUpload, useMediaAbort, useMediaCrop, useMediaTrim, useMediaCleanup, } from "./hooks/useMedia";
 // Modals
+export { MediaPickerModal } from "./MediaPickerModal";
 export { ImageCropModal } from "./modals/ImageCropModal";
 export { VideoTrimModal } from "./modals/VideoTrimModal";
 export { VideoThumbnailSelector } from "./modals/VideoThumbnailSelector";

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

@@ -1,27 +1,39 @@
 import { z } from "zod";
 export type MediaFieldType = "image" | "video" | "file";
+/** Where the media originates: Firebase Storage upload, YouTube embed, or external URL. */
+export type MediaSource = "upload" | "youtube" | "external";
 export type MediaFieldInput = MediaField | string | null | undefined;
 export interface MediaField {
     url: string;
     type: MediaFieldType;
     alt?: string;
     thumbnailUrl?: string;
+    /** Media origin. Omitted / "upload" = Firebase Storage proxy URL. */
+    source?: MediaSource;
+    /** YouTube video ID. Only set when source === "youtube". */
+    youtubeId?: string;
 }
 export declare const mediaFieldSchema: z.ZodObject<{
     url: z.ZodString;
     type: z.ZodEnum<["image", "video", "file"]>;
     alt: z.ZodOptional<z.ZodString>;
     thumbnailUrl: z.ZodOptional<z.ZodString>;
+    source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
+    youtubeId: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     url: string;
     type: "video" | "image" | "file";
+    source?: "external" | "upload" | "youtube" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
+    youtubeId?: string | undefined;
 }, {
     url: string;
     type: "video" | "image" | "file";
+    source?: "external" | "upload" | "youtube" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
+    youtubeId?: string | undefined;
 }>;
 export declare function coerceMediaField(value: MediaFieldInput, fallbackType?: MediaFieldType): MediaField | null;
 export declare function coerceMediaFieldArray(values: Array<MediaField | string> | null | undefined, fallbackType?: MediaFieldType): MediaField[];

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

@@ -1,9 +1,11 @@
 import { z } from "zod";
 export const mediaFieldSchema = z.object({
-    url: z.string().url(),
+    url: z.string(),
     type: z.enum(["image", "video", "file"]),
     alt: z.string().optional(),
-    thumbnailUrl: z.string().url().optional(),
+    thumbnailUrl: z.string().optional(),
+    source: z.enum(["upload", "youtube", "external"]).optional(),
+    youtubeId: z.string().optional(),
 });
 export function coerceMediaField(value, fallbackType = "image") {
     if (!value) {

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

@@ -14,6 +14,10 @@ export interface MediaUploadFieldProps {
     enableTrim?: boolean;
     enableThumbnail?: boolean;
     onThumbnailChange?: (url: string) => void;
+    /** Show a "YouTube URL" tab to embed a YouTube video by ID or URL. */
+    showYoutube?: boolean;
+    /** Show an "External URL" tab to link a third-party image/video URL. */
+    showExternal?: boolean;
     /**
      * Called with every URL that was staged (uploaded) but never persisted.
      * The parent form should call `DELETE /api/media?url=…` for each entry.
@@ -28,4 +32,4 @@ export interface MediaUploadFieldProps {
      */
     isPersisted?: boolean;
 }
-export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept, maxSizeMB, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept, maxSizeMB, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;