@mohasinac/appkit 4.52.4 → 4.53.0

package/dist/features/layout/AppLayoutShell.js

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 // owns the singleton; nesting another would risk Turbopack chunk-splitting.
 // The actual 2.8.8 SSR crash was a peer-dep duplicate fixed by the
 // scripts/dedupe-peer-deps.mjs postinstall hook (see scripts/ and CLAUDE.md #19).
+import { ChevronDown } from "lucide-react";
 import { AvatarDisplay, BackgroundRenderer, Div, Li, Main, Row, Span, Stack, Text, TextLink, Ul, UnsavedChangesModal } from "../../ui/index.js";
 // Role indicator dots — distinct hues per role tier.
 const ROLE_DOT_BG_CLASS = {
@@ -18,7 +19,7 @@ import { useAuth } from "../../react/contexts/SessionContext.js";
 import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset.js";
 import { isBuyerUser } from "../auth/role-predicates.js";
 import { NavbarWithSettings } from "./NavbarWithSettings.js";
-import BottomActions from "./BottomActions.js";
+import SideActionDock from "./SideActionDock.js";
 import { BottomChrome } from "./BottomChrome.js";
 import { AutoBreadcrumbs } from "./AutoBreadcrumbs.js";
 import { BottomNavbar } from "./BottomNavbar.js";
@@ -27,6 +28,7 @@ import { SidebarLayout } from "./SidebarLayout.js";
 import { TitleBar } from "./TitleBar.js";
 import { BackToTop } from "./BackToTop.js";
 import { useDashboardNav } from "./DashboardNavContext.js";
+import { TOP_BANNER_SLOT_ID } from "../../ui/components/top-banner-slot.js";
 import { usePathname } from "next/navigation.js";
 import { findActiveNavItem } from "../../_internal/client/features/layout/navActive.js";
 import { OVERLAY_FALLBACK_COLOR, SEED_DARK_BG as DEFAULT_DARK_BG, SEED_LIGHT_BG as DEFAULT_LIGHT_BG } from "./background-seed-defaults.js";
@@ -44,8 +46,64 @@ function CollapsibleNavGroup({ title, hasActive = false, children, }) {
     }, [hasActive]);
     return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, 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(Stack, { gap: "none", className: "", children: children })] }));
 }
+/**
+ * Flatten a sidebar section's links for active-item resolution.
+ *
+ * 🛑 Children MUST be in here. `findActiveNavItem` picks the longest prefix
+ * match, so leaving them out means a page that is only reachable as a child —
+ * /auctions under "Products" — marks nothing at all, the same lost-your-place
+ * bug the navbar's own comment documents.
+ */
+function flattenSidebarLinks(items) {
+    return items.flatMap((item) => [item, ...(item.children ?? [])]);
+}
+/**
+ * A sidebar link that owns sub-links: FIRST tap expands, SECOND tap follows.
+ *
+ * 🛑 The second tap is what keeps this a link rather than a folder. A parent
+ * that only ever toggles makes its own page unreachable from the sidebar — the
+ * catalogue index would be the one shop page you could not open from the menu
+ * that lists the shop. So the destination is the parent's own href, falling
+ * back to its first child when the parent is a grouping with no page of its
+ * own, and `preventDefault` applies only on the expanding tap.
+ *
+ * It differs from the navbar on purpose: there, hover already reveals the menu,
+ * so a click can navigate immediately. A sidebar has no hover, and a thumb has
+ * no caret small enough to aim at reliably — the tap has to do both jobs, in
+ * order.
+ */
+function SidebarParentLink({ item, activeItem, activeHref, navItemClass, navItemActiveClass, }) {
+    const children = item.children ?? [];
+    const containsActive = !!activeItem && children.some((child) => child.href === activeItem.href);
+    const [expanded, setExpanded] = useState(containsActive);
+    // The sidebar stays mounted across client-side navigation, so the lazy
+    // initial state above only ever fires once — re-open when the route moves
+    // into this group.
+    useEffect(() => {
+        if (containsActive)
+            setExpanded(true);
+    }, [containsActive]);
+    const isActive = activeItem?.href === item.href;
+    const target = item.href || children[0]?.href || "#";
+    return (_jsxs(Li, { children: [_jsxs(TextLink, { href: target, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, "aria-expanded": expanded, onClick: (e) => {
+                    if (expanded)
+                        return;
+                    e.preventDefault();
+                    setExpanded(true);
+                }, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label, _jsx(ChevronDown, { className: `ms-auto w-3.5 h-3.5 shrink-0 opacity-70 transition-transform duration-200 ${expanded ? "rotate-180" : ""}`, "aria-hidden": "true" })] }), expanded && (_jsx(SidebarSectionLinks, { items: children, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass, nested: true }))] }));
+}
+/** One sidebar link plus its indented sub-links. */
+function SidebarSectionLinks({ items, activeHref, activeItem, navItemClass, navItemActiveClass, nested = false, }) {
+    return (_jsx(Ul, { spacing: "2xs", className: nested ? "ps-[var(--appkit-space-6)]" : undefined, children: items.map((item) => {
+            const isActive = activeItem?.href === item.href;
+            if (item.children && item.children.length > 0) {
+                return (_jsx(SidebarParentLink, { item: item, activeItem: activeItem, activeHref: activeHref, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }, `${item.href}-${item.label}`));
+            }
+            return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, 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}`));
+        }) }));
+}
 function CollapsibleSidebarSection({ section, navItemClass, navItemActiveClass, activeHref, }) {
-    const activeItem = findActiveNavItem(section.items, activeHref);
+    const activeItem = findActiveNavItem(flattenSidebarLinks(section.items), activeHref);
     const hasActive = !!activeItem;
     const [open, setOpen] = useState((section.defaultOpen ?? false) || hasActive);
     // Re-sync whenever the route changes — the sidebar stays mounted across
@@ -56,15 +114,9 @@ function CollapsibleSidebarSection({ section, navItemClass, navItemActiveClass,
     }, [hasActive]);
     const hasTitle = !!section.title;
     if (!hasTitle) {
-        return (_jsx(Ul, { spacing: "2xs", children: section.items.map((item) => {
-                const isActive = activeItem?.href === item.href;
-                return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, 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 (_jsx(SidebarSectionLinks, { items: section.items, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }));
     }
-    return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, 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, { spacing: "2xs", children: section.items.map((item) => {
-                    const isActive = activeItem?.href === item.href;
-                    return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, 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(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, 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(SidebarSectionLinks, { items: section.items, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }))] }));
 }
 /** Sidebar header when a user is logged in — avatar + display name + close button. */
 function SidebarUserHeader({ user, onClose, }) {
@@ -127,7 +179,7 @@ function SidebarContent({ sidebarItems, sidebarSections, sidebarPrimaryActions,
                     ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, hasActive: !!activeProfileLink, children: _jsxs(Ul, { spacing: "2xs", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: activeProfileLink?.href === profileHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === profileHref ? "page" : undefined, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: activeProfileLink?.href === userOrdersHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userOrdersHref ? "page" : undefined, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: activeProfileLink?.href === userWishlistHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userWishlistHref ? "page" : undefined, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: activeProfileLink?.href === userSettingsHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userSettingsHref ? "page" : undefined, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { layout: "grid", gap: "2", className: "grid-cols-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, hasActive: !!activeDashboardLink, children: _jsxs(Ul, { spacing: "2xs", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: activeDashboardLink?.href === adminHref ? navItemActiveClass : navItemClass, "aria-current": activeDashboardLink?.href === adminHref ? "page" : undefined, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: activeDashboardLink?.href === resolvedStoreHref ? navItemActiveClass : navItemClass, "aria-current": activeDashboardLink?.href === resolvedStoreHref ? "page" : undefined, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass, activeHref: activeHref }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Stack, { border: "default", className: "border-t border-[var(--appkit-color-border-subtle)]", padding: "t-md", gap: "3", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center justify-end gap-[var(--appkit-space-3)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] transition-colors hover:bg-primary-surface hover:text-primary-800", children: [_jsx(Span, { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), activeThemeName] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: CLS_LOGOUT_BTN, children: labels.logout }))] }))] }));
 }
 // ─── Main component ────────────────────────────────────────────────────────────
-export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, messagesHref, unreadMessageCount, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, showBottomNav = true, onTourStart, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
+export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, messagesHref, unreadMessageCount, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, showBottomNav = true, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
     // QueryClientProvider used to be created here so AppLayoutShell could stand
     // alone. The real cause of the 2026-06-10/11 "No QueryClient set" prod crash
     // turned out to be a peer-dep duplicate of @tanstack/query-core under
@@ -194,7 +246,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, messagesHref: messagesHref, unreadMessageCount: unreadMessageCount, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onTourStart: onTourStart, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsx(Div, { id: TOP_BANNER_SLOT_ID, className: "w-full" }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, messagesHref: messagesHref, unreadMessageCount: unreadMessageCount, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
                             // No bottom-chrome clearance here on purpose. FooterLayout is a
                             // SIBLING rendered after <Main>, so a margin here only gaps
                             // main-to-footer — it never clears the bottom of the page, which is
@@ -207,5 +259,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             // is 0 below `lg` and 0 whenever no bar is published, so this
                             // reserves exactly nothing until there is something to reserve —
                             // which is why it can be unconditional rather than route-gated.
-                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: _jsx(BottomActions, {}) }), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
+                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: null }), _jsx(SideActionDock, {}), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
 }

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

@@ -117,6 +117,20 @@ export interface BottomActionsState {
      * tap, and stay dismissible afterwards.
      */
     infoOpenSignal?: number;
+    /**
+     * `id` of this page's INLINE primary CTA. `SideActionDock` reveals itself
+     * only once that element has been seen and scrolled out of view.
+     *
+     * The alternative — the `data-cta-anchor` attribute — is for a page that
+     * renders its CTA block directly. This exists because the shared listing
+     * registrars already take an `anchorId` (the element their CTA scrolls to),
+     * which is the same element, so they can declare the gate without touching
+     * the view that owns the markup.
+     *
+     * Unset means "reveal immediately", which is correct for every bulk bar: an
+     * admin listing has no Buy button to scroll past.
+     */
+    ctaAnchorId?: string;
 }
 interface BottomActionsContextValue {
     state: BottomActionsState;
@@ -143,6 +157,8 @@ interface BottomActionsContextValue {
     setInfoOpenSignal: (signal: number | undefined) => void;
     /** Set the desktop visibility policy. */
     setDesktopMode: (mode: BottomActionsDesktopMode | undefined) => void;
+    /** Set or clear the inline-CTA anchor id. See BottomActionsState.ctaAnchorId. */
+    setCtaAnchorId: (id: string | undefined) => void;
     /** Clear all state (called on feature unmount). */
     clearAll: () => void;
     claim: (id: string) => void;

package/dist/features/layout/BottomActionsContext.js

@@ -122,6 +122,9 @@ export function BottomActionsProvider({ children, }) {
     const setDesktopMode = useCallback((desktop) => {
         setState((prev) => (prev.desktop === desktop ? prev : { ...prev, desktop }));
     }, []);
+    const setCtaAnchorId = useCallback((ctaAnchorId) => {
+        setState((prev) => (prev.ctaAnchorId === ctaAnchorId ? prev : { ...prev, ctaAnchorId }));
+    }, []);
     const clearAll = useCallback(() => {
         actionCallbacksRef.current = new Map();
         bulkCallbacksRef.current = new Map();
@@ -140,6 +143,7 @@ export function BottomActionsProvider({ children, }) {
         setInfoPanel,
         setInfoOpenSignal,
         setDesktopMode,
+        setCtaAnchorId,
         clearAll,
         claim,
         release,
@@ -153,6 +157,7 @@ export function BottomActionsProvider({ children, }) {
         setInfoPanel,
         setInfoOpenSignal,
         setDesktopMode,
+        setCtaAnchorId,
         clearAll,
         claim,
         release,

package/dist/features/layout/BottomChrome.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
 import { Div } from "../../ui/index.js";
 import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot.js";
 /**
@@ -97,7 +97,7 @@ export function BottomChrome({ children }) {
             root.style.setProperty("--top-chrome-height", "0px");
         };
     }, [isDesktop]);
-    return (_jsxs(Div, { ref: ref, layout: "flex-col", 
+    return (_jsx(Div, { ref: ref, layout: "flex-col", 
         // `pointer-events-none` so an empty tier never eats clicks meant for the
         // page underneath; every child re-enables with `pointer-events-auto`.
         //
@@ -109,12 +109,51 @@ export function BottomChrome({ children }) {
         // published by AppLayoutShell and already accounts for the announcement
         // banner, so this needs no second measurement.
         //
-        // 🛑 The child's `flex-col` ORDER is reversed on desktop: at the bottom
-        // edge the portalled slot must stack above the CTA row, and once the tier
-        // hangs from the top the same visual ordering is the other way round.
+        // The portalled slot and the CTA row stack in opposite visual orders at
+        // the two ends. That reversal is done by swapping the CHILDREN below, not
+        // with `flex-col-reverse` — see the 🛑 above the JSX.
+        //
+        // ── 🛑 WHY THIS BRANCHES IN JS AND NOT ON `lg:` ────────────────────────
+        //
+        // It used to be one class string carrying both states:
+        //
+        //   bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))]
+        //   lg:bottom-auto lg:top-[var(--header-height,0px)] lg:flex-col-reverse
+        //
+        // On a 1440px viewport `lg:top-[…]` applied and **`lg:bottom-auto` and
+        // `lg:flex-col-reverse` did not**. The element was therefore anchored to
+        // BOTH edges at once, and a `position: fixed` box with `left/right/top/
+        // bottom` all set stretches: measured on production it was **801px tall
+        // with both of its children 0px tall** (900 viewport − 99 header − 0 nav).
+        // `BottomChrome` publishes its own `offsetHeight`, so it reported 801px as
+        // `--top-chrome-height`, and `<Main>` reserved all of it — an 801px blank
+        // band under the navbar on every desktop page. Verified by removing the
+        // `bottom-[calc…]` class in the live DOM: height 801 → 0.
+        //
+        // The mechanism is Root Cause #79's. Both configs set `important: true`,
+        // so an arbitrary-value utility and a named one tie on specificity AND on
+        // `!important`, a media query adds no specificity, and the winner is
+        // decided by EMISSION ORDER in the built CSS — which no one can see from
+        // the call site. All four classes are present in `dist/tailwind-utilities.css`;
+        // this was never a purge problem, so no `@source inline(...)` fixes it.
+        //
+        // So: never express this as a `lg:` override of an arbitrary-value base.
+        // The component already computes `isDesktop` (the measurement has to know
+        // which variable to publish), so the conflicting class is simply never
+        // emitted — exactly one anchor exists in the DOM at any time, and the
+        // cascade has nothing to arbitrate.
         className: [
             "fixed left-0 right-0 z-[var(--appkit-z-bottom-nav)] pointer-events-none",
-            "bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))]",
-            "lg:bottom-auto lg:top-[var(--header-height,0px)] lg:flex-col-reverse",
-        ].join(" "), children: [_jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }), children] }));
+            isDesktop
+                ? "top-[var(--header-height,0px)]"
+                : "bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))]",
+        ].join(" "), children: isDesktop
+            ? [
+                _jsx(React.Fragment, { children: children }, "children"),
+                _jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }, "slot"),
+            ]
+            : [
+                _jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }, "slot"),
+                _jsx(React.Fragment, { children: children }, "children"),
+            ] }));
 }

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

@@ -4,6 +4,20 @@ export interface BottomNavItem {
     href: string;
     label: string;
     icon?: React.ReactNode;
+    /**
+     * Sub-items, reached by holding the slot or tapping its caret — the same
+     * contract as the navbar dropdown and the sidebar's nested links.
+     *
+     * 🛑 A tap still FOLLOWS the link. The bottom bar has five slots for a whole
+     * site, so an item that stands for six pages has to surface them somewhere;
+     * without this they exist on desktop and vanish on the surface phones use.
+     */
+    children?: Array<{
+        href: string;
+        label: string;
+        description?: string;
+        icon?: React.ReactNode;
+    }>;
 }
 export interface BottomNavbarUser {
     displayName: string | null;

package/dist/features/layout/BottomNavbar.js

@@ -1,9 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation.js";
-import { AvatarDisplay, Li, Span, TextLink } from "../../ui/index.js";
+import { ChevronUp } from "lucide-react";
+import { AvatarDisplay, Div, Drawer, IconButton, Li, Span, TextLink, Ul } from "../../ui/index.js";
 import { BottomNavLayout } from "./BottomNavLayout.js";
 import { NavItem } from "./NavItem.js";
+import { useHoldToOpen } from "./useHoldToOpen.js";
 import { useWishlistCount } from "../wishlist/hooks/useWishlistCount.js";
 import { useCartCount } from "../cart/hooks/useCartCount.js";
 /** Badge counter class for the cart/wishlist slots.
@@ -20,6 +23,23 @@ import { useCartCount } from "../cart/hooks/useCartCount.js";
  * token as a fill, which audit-status-color-pairs can't see through arbitrary
  * -value syntax. */
 const CLS_COUNT_BADGE = "appkit-hand-badge appkit-hand-badge--lg absolute -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-solid px-[var(--appkit-space-1)] leading-none text-error-on-solid";
+/**
+ * One bottom-nav slot. A plain item renders exactly as it always did; an item
+ * with children gains the hold gesture and a caret, both of which open the
+ * shared sheet rather than navigating.
+ *
+ * 🛑 The caret is `absolute` and the link fills the slot, so the tap target for
+ * "go to this page" does not shrink — the caret overlays its top corner rather
+ * than taking a column from it.
+ */
+function BottomNavSlot({ item, isActive, onOpenChildren, activeClassName, inactiveClassName, iconClassName, labelClassName, fallbackIcon, }) {
+    const hasChildren = Boolean(item.children && item.children.length > 0);
+    const holdHandlers = useHoldToOpen(() => onOpenChildren(item), hasChildren);
+    const link = (_jsx(NavItem, { href: item.href, label: item.label, icon: item.icon ?? fallbackIcon, isActive: isActive, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }));
+    if (!hasChildren)
+        return link;
+    return (_jsxs(Div, { className: "relative h-full w-full select-none touch-manipulation", ...holdHandlers, children: [link, _jsx(IconButton, { size: "sm", variant: "ghost", rounded: "full", onClick: () => onOpenChildren(item), "aria-haspopup": "dialog", "aria-label": `${item.label} menu`, className: "absolute top-0 end-0 text-[var(--appkit-color-text-muted)]", icon: _jsx(ChevronUp, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": "true" }) })] }));
+}
 /**
  * BottomNavbar � mobile bottom navigation bar (5 slots: home, shop, search, cart, profile).
  *
@@ -29,6 +49,19 @@ export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishl
     const pathname = usePathname();
     const wishlistCount = useWishlistCount(userId);
     const cartCount = useCartCount(!!userId);
+    /*
+     * One sheet for the whole bar, keyed by which item opened it — not one
+     * <Drawer> per slot. Each Drawer portals a fixed overlay, so a sheet per slot
+     * is four overlays stacked on every page for a menu at most one of them is
+     * ever showing.
+     */
+    const [openKey, setOpenKey] = useState(null);
+    const openItem = navItems?.find((i) => i.key === openKey) ?? null;
+    // Close on navigation: the sheet's own links are what navigate, and without
+    // this it stays open over the page it just took you to.
+    useEffect(() => {
+        setOpenKey(null);
+    }, [pathname]);
     const labels = {
         mobileNav: "Mobile navigation",
         home: "Home",
@@ -47,7 +80,14 @@ export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishl
         // slot was Wishlist — Wishlist remains reachable from the header/app
         // bar, it's just no longer duplicated in the bottom tab bar).
         const visibleItems = navItems.slice(0, cartHref ? 3 : 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))), cartHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", 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" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) })), _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 shrink-0", 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 isSlotActive = (item) => {
+            // 🛑 A child's page counts. "Products" stands for /auctions and /bundles
+            // too now, so matching its own href alone would leave the bar marking
+            // nothing on most of the pages that slot represents.
+            const hrefs = [item.href, ...(item.children ?? []).map((c) => c.href)];
+            return hrefs.some((href) => pathname === href || (href !== "/" && pathname.startsWith(`${href}/`)));
+        };
+        return (_jsxs(_Fragment, { children: [_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(BottomNavSlot, { item: item, isActive: isSlotActive(item), onOpenChildren: (it) => setOpenKey(it.key), activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName, fallbackIcon: defaultIcon }) }, item.key))), cartHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", 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" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) })), _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 shrink-0", 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 })] }) })] }), _jsx(Drawer, { isOpen: !!openItem, onClose: () => setOpenKey(null), title: openItem?.label, side: "bottom", children: _jsxs(Ul, { className: "list-none", children: [openItem && (_jsx(Li, { children: _jsx(TextLink, { href: openItem.href, variant: "none", className: "block rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text)]", children: openItem.label }) })), (openItem?.children ?? []).map((child) => (_jsx(Li, { children: _jsxs(TextLink, { href: child.href, variant: "none", className: "flex items-start gap-[var(--appkit-space-2)] rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)]", children: [child.icon && (_jsx(Span, { className: "flex-shrink-0 mt-[var(--appkit-space-0-5)]", "aria-hidden": "true", children: child.icon })), _jsxs(Span, { className: "block", children: [_jsx(Span, { weight: "medium", className: "block", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] })] }) }, child.href)))] }) })] }));
     }
     return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", 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", 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", 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 shrink-0", 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", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", 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" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), wishlistHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: wishlistHref, variant: "none", className: `${slotClassName} ${pathname === wishlistHref ? activeClassName : inactiveClassName}`, "aria-label": wishlistCount > 0 ? `${labels.wishlist}, ${wishlistCount} items` : labels.wishlist, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", 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, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: wishlistCount > 9 ? "9+" : wishlistCount }))] }), _jsx(Span, { className: labelClassName, children: labels.wishlist })] }) })), _jsx(Li, { className: "flex-1", 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] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]"}`, weight: "semibold", 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/MainNavbar.d.ts

@@ -17,6 +17,17 @@ export interface MainNavbarItem {
         href: string;
         label: string;
         description?: string;
+        adminOnly?: boolean;
+        /**
+         * Optional stable key, mirroring the parent's. Consumers filter children on
+         * it — a listing type an admin has switched off has to disappear from the
+         * dropdown it moved into, and matching on a translated `label` would break
+         * the moment a second locale ships.
+         */
+        key?: string;
+        /** Same icon the child carried as a top-level item — a merged entry keeps
+         *  its visual in the dropdown, the sidebar and the mobile sheet. */
+        icon?: React.ReactNode;
     }>;
 }
 export interface MainNavbarProps {

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

@@ -22,6 +22,9 @@ export interface NavbarLayoutItem {
         href: string;
         label: string;
         description?: string;
+        /** Same icon the child carried as a top-level item, so merging an entry
+         *  into a dropdown does not strip the only visual it had. */
+        icon?: React.ReactNode;
     }>;
 }
 export interface NavbarLayoutProps {

package/dist/features/layout/NavbarLayout.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import Link from "next/link.js";
 import { ChevronDown } from "lucide-react";
-import { Div, Li, Nav, Row, Span, Ul } from "../../ui/index.js";
+import { Div, IconButton, Li, Nav, Row, Span, Ul } from "../../ui/index.js";
 import { NavbarChevron } from "../../ui/components/NavbarChevron.js";
 import { findActiveNavItem } from "../../_internal/client/features/layout/navActive.js";
+import { useHoldToOpen } from "./useHoldToOpen.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -15,8 +16,64 @@ function DefaultNavItem({ item, isActive, }) {
         : isActive
             ? "bg-primary-50 dark:bg-[var(--appkit-color-surface-elevated)] text-primary-800 dark:text-white font-semibold px-[var(--appkit-space-3)] border-b-2 border-primary-500 dark:border-secondary-400 rounded-none pb-[6px] transition-colors duration-150"
             : "text-[var(--appkit-color-text-muted)] hover:bg-surface-hover hover:text-zinc-950 dark:hover:text-white transition-colors duration-150 px-[var(--appkit-space-3)]";
-    const trigger = (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-[var(--appkit-space-1-5)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] rounded-lg font-medium transition-colors duration-150 whitespace-nowrap ${activeClasses}`, children: [item.icon, _jsx(Span, { children: item.label }), item.children && item.children.length > 0 && (_jsx(ChevronDown, { className: "w-3.5 h-3.5 shrink-0 opacity-70", "aria-hidden": "true" }))] }));
-    if (!item.children || item.children.length === 0)
+    const hasChildren = Boolean(item.children && item.children.length > 0);
+    /*
+     * Click-to-open state, which exists ONLY for the caret.
+     *
+     * 🛑 Hover and focus stay pure CSS below, and this does not replace them. The
+     * panel opens on `group-hover` / `group-focus-within` with no JS at all, which
+     * is what keeps it usable for a keyboard user on Tab and before hydration.
+     * This adds the third affordance that was genuinely missing: a pointer user
+     * who CLICKS the caret expecting a menu got a navigation instead, because the
+     * caret was inside the parent `<Link>`.
+     */
+    const [open, setOpen] = useState(false);
+    const wrapRef = useRef(null);
+    const panelId = `nav-panel-${item.href.replace(/[^a-z0-9]+/gi, "-")}`;
+    /*
+     * Close on outside click, on Escape, and whenever the route changes.
+     *
+     * The route-change close is the one that is easy to miss and the most
+     * annoying to live with: the panel's own links navigate, and without this the
+     * menu stays open over the page it just took you to. `isActive` is derived
+     * from `pathname` upstream, so the effect re-runs on every navigation.
+     */
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!wrapRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    useEffect(() => {
+        setOpen(false);
+    }, [item.href, isActive]);
+    /*
+     * Hold-to-open — the touch affordance, shared with the mobile bottom nav so
+     * one gesture is defined once. See `useHoldToOpen` for why the "did we hold"
+     * flag has to be a ref.
+     */
+    const holdHandlers = useHoldToOpen(() => setOpen(true), hasChildren);
+    const trigger = (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-[var(--appkit-space-1-5)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] rounded-lg font-medium transition-colors duration-150 whitespace-nowrap ${activeClasses}${hasChildren ? " select-none touch-manipulation" : ""}`, ...holdHandlers, children: [item.icon, _jsx(Span, { children: item.label })] }));
+    /*
+     * The explicit narrow, not just `hasChildren`. A boolean derived from
+     * `item.children` does not narrow the field itself, so the `.map` below
+     * cannot see that it is defined — this keeps both the readable guard above
+     * and a non-optional array to iterate.
+     */
+    const children = item.children ?? [];
+    if (!hasChildren || children.length === 0)
         return trigger;
     /*
      * 🛑 Hover/focus-within CSS, not React state, and the trigger is still a real
@@ -24,16 +81,24 @@ function DefaultNavItem({ item, isActive, }) {
      *
      * Two things this buys. The group stays usable without JS and without a
      * pointer — `focus-within` opens it on Tab, so a keyboard user reaches the
-     * children; and `aria-haspopup`/`aria-expanded` are deliberately NOT faked,
-     * because nothing here manages expanded state and announcing a state we do
-     * not track is worse than announcing none. The parent is a link whose
-     * children are also reachable from the page it leads to, which is the
-     * progressive-enhancement shape rather than a menu that traps people.
+     * children. And the parent is a real link whose children are also reachable
+     * from the page it leads to, which is the progressive-enhancement shape
+     * rather than a menu that traps people.
+     *
+     * 🛑 The CARET is now a separate button, and `aria-expanded` is real rather
+     * than faked. It used to live INSIDE the parent `<Link>`, so clicking the one
+     * control that looks like a disclosure navigated away instead of disclosing —
+     * the caret was announcing an affordance the markup did not have. It is the
+     * button that owns `aria-expanded`/`aria-controls`, because it is the only
+     * part that tracks state; the hover and focus paths still open the panel
+     * without touching it, which is why the attribute can be false while the
+     * panel is visible. That asymmetry is honest: the button reports what the
+     * BUTTON did, and a hover is not a disclosure a screen reader user performed.
      *
      * The `pt` on the panel is a hover bridge: without it the gap between the
      * trigger and the panel closes the menu as the pointer crosses it.
      */
-    return (_jsxs(Div, { className: "relative group", children: [trigger, _jsx(Div, { className: "absolute left-0 top-full z-20 hidden pt-[var(--appkit-space-1)] group-hover:block group-focus-within:block", children: _jsx(Div, { surface: "elevated", border: "default", rounded: "lg", shadow: "lg", padding: "xs", children: _jsx(Ul, { className: "min-w-[15rem] list-none", children: item.children.map((child) => (_jsx(Li, { children: _jsxs(Link, { href: child.href, className: "block rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)] hover:bg-surface-hover transition-colors duration-150", children: [_jsx(Span, { weight: "medium", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] }) }, child.href))) }) }) })] }));
+    return (_jsxs(Div, { ref: wrapRef, className: "relative group", children: [_jsxs(Row, { align: "center", gap: "none", children: [trigger, _jsx(IconButton, { type: "button", size: "sm", variant: "ghost", rounded: "md", "aria-expanded": open, "aria-haspopup": "true", "aria-controls": panelId, "aria-label": `${item.label} menu`, onClick: () => setOpen((v) => !v), icon: _jsx(ChevronDown, { className: `w-3.5 h-3.5 shrink-0 opacity-70 transition-transform duration-150 ${open ? "rotate-180" : ""}`, "aria-hidden": "true" }) })] }), _jsx(Div, { id: panelId, className: `absolute left-0 top-full z-20 pt-[var(--appkit-space-1)] group-hover:block group-focus-within:block ${open ? "block" : "hidden"}`, children: _jsx(Div, { surface: "elevated", border: "default", rounded: "lg", shadow: "lg", padding: "xs", children: _jsx(Ul, { className: "min-w-[15rem] list-none", children: children.map((child) => (_jsx(Li, { children: _jsxs(Link, { href: child.href, className: "flex items-start gap-[var(--appkit-space-2)] rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)] hover:bg-surface-hover transition-colors duration-150", children: [child.icon && (_jsx(Span, { className: "flex-shrink-0 mt-[var(--appkit-space-0-5)]", "aria-hidden": "true", children: child.icon })), _jsxs(Span, { className: "block", children: [_jsx(Span, { weight: "medium", className: "block", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] })] }) }, child.href))) }) }) })] }));
 }
 /**
  * NavbarLayout — generic horizontal navigation bar shell.
@@ -86,8 +151,20 @@ export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel
     // `findActiveNavItem` prefix-matches (`activeHref.startsWith(`${href}/`)`) and
     // resolves ties by LONGEST href, so a root entry like "/" cannot light up on
     // every page and a more specific entry always beats a shorter one.
-    const activeItem = findActiveNavItem(items, activeHref);
-    const isItemActive = (item) => activeItem?.href === item.href;
+    //
+    // 🛑 CHILDREN COUNT. A dropdown parent links to one page and stands for
+    // several — "Products" owns /auctions, /bundles and the rest — so resolving
+    // against top-level hrefs alone would mark NOTHING on four of the six pages
+    // the parent represents, which is the same lost-your-place bug described
+    // above, just one level down. Each child is resolved as a candidate carrying
+    // its parent's href, so the longest-match rule still decides and a child
+    // always beats its own shorter parent.
+    const candidates = items.flatMap((item) => [
+        { href: item.href, ownerHref: item.href },
+        ...(item.children ?? []).map((child) => ({ href: child.href, ownerHref: item.href })),
+    ]);
+    const activeItem = findActiveNavItem(candidates, activeHref);
+    const isItemActive = (item) => activeItem?.ownerHref === item.href;
     if (inline) {
         return (_jsx(Ul, { "aria-label": ariaLabel, className: "hidden xl:flex items-center justify-center gap-[var(--appkit-space-0-5)] xl:gap-[var(--appkit-space-1)] w-full", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, isItemActive(item))) : (_jsx(DefaultNavItem, { item: item, isActive: isItemActive(item) })) }, item.href))) }));
     }

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

@@ -0,0 +1 @@
+export default function SideActionDock(): import("react").JSX.Element | null;