@mohasinac/appkit 2.3.2 → 2.4.0

package/dist/features/homepage/schemas/firestore.d.ts

@@ -2,45 +2,77 @@
  * Homepage Feature Firestore Document Types & Constants
  * Covers: carousel slides, homepage sections
  */
-export interface GridCard {
-    id: string;
-    gridRow: 1 | 2;
-    gridCol: 1 | 2 | 3;
-    background: {
-        type: "color" | "gradient" | "image" | "video";
-        value: string;
-        overlay?: {
-            enabled: boolean;
-            color: string;
-            opacity: number;
-        };
+/** Unified background for a slide or card — supports image, video, solid color, or gradient. */
+export interface CarouselBackground {
+    type: "image" | "video" | "color" | "gradient";
+    /** URL for image/video backgrounds */
+    url?: string;
+    /** Mobile-optimised URL (image/video) */
+    mobileUrl?: string;
+    /** Poster frame URL for video backgrounds */
+    thumbnail?: string;
+    /** Hex/token value for solid-color backgrounds */
+    color?: string;
+    /** Gradient start color (token or hex) */
+    gradientFrom?: string;
+    /** Gradient end color (token or hex) */
+    gradientTo?: string;
+    /** Gradient angle in degrees (0–360) */
+    gradientAngle?: number;
+    /** Dim overlay drawn on top of image/video */
+    dimOverlay?: {
+        enabled: boolean;
+        opacity: number;
     };
+}
+export type CarouselSlideHeight = "viewport" | "tall" | "medium";
+export type CarouselHoverEffect = "scale" | "color" | "glow" | "none";
+/** A content card placed in one of 6 grid zones (2 rows × 3 cols). */
+export interface CarouselCard {
+    id: string;
+    /** Zone 1–6: row 1 = zones 1–3, row 2 = zones 4–6 */
+    zone: 1 | 2 | 3 | 4 | 5 | 6;
+    /** On mobile, collapse to row-1 centre (zone 2) or row-2 centre (zone 5) */
+    mobileZone?: 2 | 5;
+    background: CarouselBackground;
     content?: {
+        eyebrow?: string;
         title?: string;
         subtitle?: string;
         description?: string;
         textColor?: string;
+        textAlign?: "left" | "center" | "right";
     };
     buttons?: Array<{
         id?: string;
         text: string;
-        link: string;
-        variant: "primary" | "secondary" | "outline";
-        openInNewTab: boolean;
+        href: string;
+        variant: "primary" | "secondary" | "outline" | "ghost" | "link";
+        openInNewTab?: boolean;
     }>;
-    isButtonOnly: boolean;
-    sizing?: {
-        width?: "auto" | "full" | "1/2" | "1/3" | "2/3";
-        height?: "auto" | "full" | "sm" | "md" | "lg";
+    hover?: {
+        effect: CarouselHoverEffect;
+        scaleValue?: number;
+        colorValue?: string;
     };
+    isButtonOnly?: boolean;
+    /** Legacy — kept for backward compat; use `zone` instead */
+    gridRow?: 1 | 2;
+    /** Legacy — kept for backward compat; use `zone` instead */
+    gridCol?: 1 | 2 | 3;
 }
-export type GridCardCreateInput = Omit<GridCard, "id">;
+/** @deprecated Use CarouselCard. This alias is kept for backward compatibility. */
+export type GridCard = CarouselCard;
+export type GridCardCreateInput = Omit<CarouselCard, "id">;
 export interface CarouselSlideDocument {
     id: string;
     title: string;
     order: number;
     active: boolean;
-    media: {
+    /** New unified background field (CF1). */
+    background?: CarouselBackground;
+    /** @deprecated Use `background`. Kept for backward compat — component falls back gracefully. */
+    media?: {
         type: "image" | "video";
         url: string;
         alt?: string;
@@ -50,18 +82,17 @@ export interface CarouselSlideDocument {
         url: string;
         openInNewTab: boolean;
     };
+    /** @deprecated Use `background.mobileUrl`. Kept for backward compat. */
     mobileMedia?: {
         type: "image" | "video";
         url: string;
         alt?: string;
     };
-    cards: GridCard[];
+    cards: CarouselCard[];
     overlay?: {
-        /** Visual overlay — dims the background image */
         enabled?: boolean;
         color?: string;
         opacity?: number;
-        /** Content overlay — text and CTA layered over the slide */
         title?: string;
         subtitle?: string;
         description?: string;
@@ -73,6 +104,10 @@ export interface CarouselSlideDocument {
             openInNewTab: boolean;
         };
     };
+    settings?: {
+        autoplayDelayMs?: number;
+        height?: CarouselSlideHeight;
+    };
     analytics?: {
         views: number;
         lastViewed?: Date;
@@ -89,9 +124,9 @@ export declare const GRID_CONFIG: {
     readonly cols: 3;
 };
 export declare const DEFAULT_CAROUSEL_SLIDE_DATA: Partial<CarouselSlideDocument>;
-export declare const CAROUSEL_SLIDES_PUBLIC_FIELDS: readonly ["id", "title", "order", "active", "media", "link", "mobileMedia", "cards", "overlay"];
+export declare const CAROUSEL_SLIDES_PUBLIC_FIELDS: readonly ["id", "title", "order", "active", "background", "media", "link", "mobileMedia", "cards", "overlay", "settings"];
 export type CarouselSlideCreateInput = Omit<CarouselSlideDocument, "id" | "createdAt" | "updatedAt">;
-export type CarouselSlideUpdateInput = Partial<Pick<CarouselSlideDocument, "title" | "order" | "active" | "media" | "link" | "mobileMedia" | "cards">>;
+export type CarouselSlideUpdateInput = Partial<Pick<CarouselSlideDocument, "title" | "order" | "active" | "background" | "media" | "link" | "mobileMedia" | "cards" | "overlay" | "settings">>;
 export declare const carouselSlideQueryHelpers: {
     readonly active: () => readonly ["active", "==", true];
     readonly inactive: () => readonly ["active", "==", false];
@@ -100,6 +135,15 @@ export declare const carouselSlideQueryHelpers: {
 export declare function createCarouselId(title: string): string;
 export declare function isValidGridPosition(gridRow: number, gridCol: number): boolean;
 export declare function canActivateSlide(currentActiveCount: number): boolean;
+/** Config for the hero carousel section — references the carouselSlides collection. */
+export interface CarouselSectionConfig {
+    title?: string;
+    height?: CarouselSlideHeight;
+    defaultAutoplayDelayMs?: number;
+    pauseOnHover?: boolean;
+    showDots?: boolean;
+    showArrows?: boolean;
+}
 export interface WelcomeSectionConfig {
     h1: string;
     subtitle: string;
@@ -139,13 +183,31 @@ export interface ProductsSectionConfig {
     mobileItemsPerRow: 1;
     autoScroll: boolean;
     scrollInterval: number;
+    filterByBrand?: string;
+    sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
+    filterByCategory?: string;
+    maxCount?: 5 | 10 | 20;
+    loop?: boolean;
 }
+/**
+ * Metrics that the homepage stats section can resolve live from Firestore.
+ * When a stat has source "live" and a matching metric, the value field is
+ * used only as a fallback (shown if the live fetch fails or is still loading).
+ */
+export type LiveStatMetric = "total_listings" | "verified_sellers" | "total_buyers" | "platform_rating" | "total_orders" | "total_reviews";
 export interface StatsSectionConfig {
     title?: string;
     stats: Array<{
         key: string;
         label: string;
+        /** Fallback value shown when source is "static" or when a live fetch fails. */
         value: string;
+        /** "live" resolves the value from Firestore at render time; "static" uses value as-is. */
+        source?: "static" | "live";
+        /** Which Firestore metric to fetch when source is "live". */
+        metric?: LiveStatMetric;
+        /** Optional suffix appended after the live value (e.g. "★", "+"). */
+        suffix?: string;
     }>;
 }
 export interface AuctionsSectionConfig {
@@ -157,6 +219,11 @@ export interface AuctionsSectionConfig {
     mobileItemsPerRow: 1;
     autoScroll: boolean;
     scrollInterval: number;
+    filterByBrand?: string;
+    sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
+    filterByCategory?: string;
+    maxCount?: 5 | 10 | 20;
+    loop?: boolean;
 }
 export interface ReviewsSectionConfig {
     title: string;
@@ -165,6 +232,8 @@ export interface ReviewsSectionConfig {
     mobileItemsPerView: 1;
     autoScroll: boolean;
     scrollInterval: number;
+    source?: "platform" | "google";
+    placeId?: string;
 }
 export interface WhatsAppCommunitySectionConfig {
     title: string;
@@ -186,7 +255,7 @@ export interface FAQSectionConfig {
     displayCount: number;
     expandedByDefault: boolean;
     linkToFullPage: boolean;
-    categories: Array<"general" | "shipping" | "returns" | "payment" | "account" | "products" | "sellers">;
+    categories: Array<"general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support">;
 }
 export interface BlogArticlesSectionConfig {
     title: string;
@@ -209,6 +278,10 @@ export interface StoresSectionConfig {
     maxStores: number;
     autoScroll: boolean;
     scrollInterval: number;
+    sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
+    filterByCategory?: string;
+    maxCount?: 5 | 10 | 20;
+    loop?: boolean;
 }
 export interface EventsSectionConfig {
     title: string;
@@ -216,6 +289,42 @@ export interface EventsSectionConfig {
     maxEvents: number;
     autoScroll: boolean;
     scrollInterval: number;
+    sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
+    filterByCategory?: string;
+    maxCount?: 5 | 10 | 20;
+    loop?: boolean;
+}
+export type SocialPlatform = "instagram" | "facebook" | "tiktok" | "deviantart";
+export type SocialPostType = "all" | "images" | "videos" | "reels";
+export type SocialFeedLayout = "grid" | "masonry" | "carousel";
+export interface SocialFeedSectionConfig {
+    title: string;
+    subtitle?: string;
+    platform: SocialPlatform;
+    /** Username, page ID, or handle for the platform account */
+    handle: string;
+    postType: SocialPostType;
+    /** Number of posts to display (4–12) */
+    count: number;
+    layout: SocialFeedLayout;
+    showCaption: boolean;
+    showStats: boolean;
+}
+/** Normalised social post returned by /api/social-feed */
+export interface SocialPost {
+    id: string;
+    platform: SocialPlatform;
+    imageUrl: string;
+    videoThumbnailUrl?: string;
+    caption?: string;
+    permalink: string;
+    mediaType: "image" | "video" | "carousel";
+    stats: {
+        likes?: number;
+        views?: number;
+        comments?: number;
+    };
+    publishedAt: string;
 }
 export interface PreOrdersSectionConfig {
     title: string;
@@ -226,6 +335,11 @@ export interface PreOrdersSectionConfig {
     mobileItemsPerRow: 1;
     autoScroll: boolean;
     scrollInterval: number;
+    filterByBrand?: string;
+    sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
+    filterByCategory?: string;
+    maxCount?: 5 | 10 | 20;
+    loop?: boolean;
 }
 export interface BannerSectionConfig {
     height: "sm" | "md" | "lg" | "xl";
@@ -245,8 +359,45 @@ export interface BannerSectionConfig {
     clickable: boolean;
     clickLink?: string;
 }
-export type SectionType = "welcome" | "carousel" | "stats" | "trust-indicators" | "categories" | "brands" | "products" | "pre-orders" | "auctions" | "banner" | "features" | "reviews" | "whatsapp-community" | "faq" | "blog-articles" | "newsletter" | "stores" | "events";
-export type SectionConfig = WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig;
+export interface CustomCardsCard {
+    id: string;
+    image?: string;
+    imageAlt?: string;
+    eyebrow?: string;
+    title?: string;
+    body?: string;
+    buttons?: Array<{
+        label: string;
+        href: string;
+        variant: "primary" | "secondary" | "outline" | "ghost";
+        target?: "_blank" | "_self";
+    }>;
+    formEmbed?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    shadowLevel?: "none" | "sm" | "md" | "lg";
+}
+export interface CustomCardsSectionConfig {
+    title?: string;
+    layout: "grid" | "row" | "masonry";
+    columns?: 1 | 2 | 3 | 4;
+    cards: CustomCardsCard[];
+    autoScroll?: boolean;
+    scrollIntervalMs?: number;
+}
+export interface GoogleReviewsSectionConfig {
+    placeId: string;
+    maxReviews?: number;
+    minRating?: number;
+    layout?: "grid" | "carousel";
+    showRating?: boolean;
+    showDate?: boolean;
+    linkToGoogleMaps?: boolean;
+    googleMapsUrl?: string;
+}
+export type SectionType = "welcome" | "carousel" | "stats" | "trust-indicators" | "categories" | "brands" | "products" | "pre-orders" | "auctions" | "banner" | "features" | "reviews" | "whatsapp-community" | "faq" | "blog-articles" | "newsletter" | "stores" | "events" | "social-feed" | "custom-cards" | "google-reviews";
+export type SectionConfig = CarouselSectionConfig | WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig | SocialFeedSectionConfig | CustomCardsSectionConfig | GoogleReviewsSectionConfig;
 export interface HomepageSectionDocument {
     id: string;
     type: SectionType;

package/dist/features/homepage/schemas/firestore.js

@@ -22,11 +22,13 @@ export const CAROUSEL_SLIDES_PUBLIC_FIELDS = [
     "title",
     "order",
     "active",
+    "background",
     "media",
     "link",
     "mobileMedia",
     "cards",
     "overlay",
+    "settings",
 ];
 export const carouselSlideQueryHelpers = {
     active: () => ["active", "==", true],
@@ -70,6 +72,9 @@ export const DEFAULT_SECTION_ORDER = {
     newsletter: 9,
     stores: 10,
     events: 11,
+    "social-feed": 12,
+    "custom-cards": 13,
+    "google-reviews": 14,
 };
 export const BANNER_HEIGHTS = {
     sm: "200px",

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

@@ -98,52 +98,77 @@ export interface BeforeAfterItem {
     caption: string;
     sortOrder: number;
 }
+export type CarouselSlideHeight = "viewport" | "tall" | "medium";
+export type CarouselHoverEffect = "scale" | "color" | "glow" | "none";
+/** Unified background for a slide or a card. */
+export interface CarouselBackground {
+    type: "image" | "video" | "color" | "gradient";
+    url?: string;
+    mobileUrl?: string;
+    thumbnail?: string;
+    color?: string;
+    gradientFrom?: string;
+    gradientTo?: string;
+    gradientAngle?: number;
+    dimOverlay?: {
+        enabled: boolean;
+        opacity: number;
+    };
+}
 export interface CarouselSlideCard {
     id: string;
-    gridRow: 1 | 2;
-    gridCol: 1 | 2 | 3;
-    background: {
-        type: "color" | "gradient" | "image" | "transparent";
-        value: string;
-    };
+    /** Zone 1–6: row 1 = zones 1–3, row 2 = zones 4–6. */
+    zone: 1 | 2 | 3 | 4 | 5 | 6;
+    mobileZone?: 2 | 5;
+    background: CarouselBackground;
     content?: {
+        eyebrow?: string;
         title?: string;
         subtitle?: string;
         description?: string;
+        textColor?: string;
+        textAlign?: "left" | "center" | "right";
     };
     buttons?: Array<{
-        id: string;
+        id?: string;
         text: string;
-        link: string;
-        variant: "primary" | "secondary" | "outline";
-        openInNewTab: boolean;
+        href: string;
+        variant: "primary" | "secondary" | "outline" | "ghost" | "link";
+        openInNewTab?: boolean;
     }>;
-    isButtonOnly: boolean;
-    sizing?: {
-        widthPct?: 25 | 50 | 75 | 100;
-        heightPct?: 25 | 50 | 75 | 100;
-        padding?: "none" | "sm" | "md" | "lg";
+    hover?: {
+        effect: CarouselHoverEffect;
+        scaleValue?: number;
+        colorValue?: string;
     };
+    isButtonOnly?: boolean;
+    /** @deprecated Use zone. */
+    gridRow?: 1 | 2;
+    /** @deprecated Use zone. */
+    gridCol?: 1 | 2 | 3;
 }
 export interface CarouselSlide {
     id: string;
     title: string;
     order: number;
     active: boolean;
-    media: {
+    background?: CarouselBackground;
+    /** @deprecated Use background. Kept for backward compat. */
+    media?: {
         type: "image" | "video";
         url: string;
-        alt: string;
+        alt?: string;
         thumbnail?: string;
     };
     link?: {
         url: string;
         openInNewTab: boolean;
     };
+    /** @deprecated Use background.mobileUrl. Kept for backward compat. */
     mobileMedia?: {
         type: "image" | "video";
         url: string;
-        alt: string;
+        alt?: string;
     };
     cards: CarouselSlideCard[];
     overlay?: {
@@ -151,13 +176,17 @@ export interface CarouselSlide {
         subtitle?: string;
         description?: string;
         button?: {
-            id: string;
+            id?: string;
             text: string;
             link: string;
             variant: "primary" | "secondary" | "outline";
             openInNewTab: boolean;
         };
     };
+    settings?: {
+        autoplayDelayMs?: number;
+        height?: CarouselSlideHeight;
+    };
     createdAt?: string;
     updatedAt?: string;
 }

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

@@ -12,6 +12,8 @@ export interface AppLayoutShellSidebarLink {
 export interface AppLayoutShellSidebarSection {
     title?: string;
     items: AppLayoutShellSidebarLink[];
+    /** When true, this section is expanded by default. */
+    defaultOpen?: boolean;
 }
 export interface AppLayoutShellSidebarAction {
     href: string;
@@ -32,6 +34,9 @@ export interface AppLayoutShellProps {
     logoHref: string;
     promotionsHref?: string;
     cartHref: string;
+    wishlistHref?: string;
+    /** Auth UID passed through to TitleBar for wishlist merge-on-login and sync. */
+    userId?: string | null;
     profileHref: string;
     loginHref: string;
     homeHref: string;
@@ -99,4 +104,4 @@ export interface AppLayoutShellProps {
         };
     };
 }
-export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/AppLayoutShell.js

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

package/dist/features/layout/BottomActions.js

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