@mohasinac/appkit 4.52.5 → 4.53.0

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;