@mohasinac/appkit 4.13.0 → 4.14.0

package/dist/features/homepage/components/MarketplaceHomepageView.js

@@ -6,10 +6,12 @@ import { carouselRepository, faqsRepository, siteSettingsRepository } from "../.
 import { fetchLiveStats } from "../lib/live-stats";
 import { renderSection, AnnouncementBar } from "../lib/section-renderer";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
+import { filterSectionsByFeatureFlags } from "../../../_internal/shared/features/homepage/section-gate";
 import { getFeaturedProducts, getFeaturedAuctions, getFeaturedPreOrders } from "../../products/actions/product-actions";
 import { listTopLevelCategories, listBrandCategories } from "../../categories/actions/category-actions";
 import { listFeaturedBundles } from "../../../_internal/server/features/bundles/data";
 import { listStores } from "../../stores/actions/store-query-actions";
+import { toStoreListItem } from "../../../_internal/server/features/stores/adapters";
 import { getFeaturedBlogPosts } from "../../blog/actions/blog-actions";
 import { listPublicEvents } from "../../events/actions/event-actions";
 /**
@@ -31,10 +33,14 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
     const announcementMessage = siteSettings?.announcementBar?.message?.trim() ||
         "🎉 Up to 15% Off on Pokémon TCG this week — Use code SAVE15";
     const showAnnouncement = siteSettings?.announcementBar?.enabled ?? true;
-    const [enabledSections, rawFaqItems] = await Promise.all([
+    const [allSections, rawFaqItems] = await Promise.all([
         homepageSectionsRepository.getEnabledSections().catch(() => []),
         faqsRepository.getHomepageFAQs().catch(() => []),
     ]);
+    // Respect the feature flags. This gate existed but lived inside a function
+    // with no call sites, so until 2026-08-24 turning off `auctions` hid auctions
+    // everywhere EXCEPT the homepage, which went on advertising them.
+    const enabledSections = filterSectionsByFeatureFlags(allSections, siteSettings?.featureFlags);
     // Collect live metric requests from all enabled stats sections
     const liveStatRequests = [];
     for (const section of enabledSections) {
@@ -74,9 +80,13 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
     // Determine which data-driven section types are active so we only fetch what's needed
     const activeTypes = new Set(orderedSections.map((s) => s.type));
     const [productsResult, auctionsResult, preOrdersResult, categoriesResult, brandsResult, bundlesResult, storesResult, blogResult, eventsResult,] = await Promise.all([
-        activeTypes.has("products") ? getFeaturedProducts(12).catch(() => null) : null,
-        activeTypes.has("auctions") ? getFeaturedAuctions(12).catch(() => null) : null,
-        activeTypes.has("pre-orders") ? getFeaturedPreOrders(12).catch(() => null) : null,
+        // No `.catch(() => null)` on these three: they go through
+        // `listPublicProducts`, which already logs a failed query loudly and
+        // returns an empty result. Swallowing here would make a broken query
+        // indistinguishable from an empty catalogue (Root Cause #59).
+        activeTypes.has("products") ? getFeaturedProducts(12) : null,
+        activeTypes.has("auctions") ? getFeaturedAuctions(12) : null,
+        activeTypes.has("pre-orders") ? getFeaturedPreOrders(12) : null,
         activeTypes.has("categories") ? listTopLevelCategories(12).catch(() => null) : null,
         activeTypes.has("brands") ? listBrandCategories(12).catch(() => null) : null,
         activeTypes.has("featured-bundles") ? listFeaturedBundles(8).catch(() => null) : null,
@@ -104,8 +114,12 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             ? brandsResult
             : undefined,
         bundles: bundlesResult?.length ? bundlesResult : undefined,
+        // Projected, NOT cast. FeaturedStoresSection is a Client Component and this
+        // value becomes its `initialItems`, so a raw StoreDocument here would be
+        // serialised into the homepage's public HTML — secrets included. Every
+        // other cast in this object maps a document that carries no secrets.
         stores: storesResult?.items?.length
-            ? storesResult.items
+            ? storesResult.items.map((s) => toStoreListItem(s))
             : undefined,
         blog: blogResult?.length
             ? blogResult
@@ -115,5 +129,5 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             : undefined,
     };
     const carouselSlides = toCarouselSlides(slides);
-    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData))] }) }));
+    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData))] }) }));
 }

package/dist/features/homepage/hooks/homepage-query.d.ts

@@ -0,0 +1,16 @@
+/** How many cards a homepage carousel wants before it stops back-filling. */
+export declare const MIN_HOMEPAGE_COUNT = 12;
+export interface HomepageListingQuery {
+    listingType?: string;
+    brand?: string;
+    featured?: boolean;
+    isPromoted?: boolean;
+    sorts?: string;
+    pageSize: number;
+}
+/**
+ * Always sends `availability=available`. The API treats an ABSENT value as
+ * "all" so that non-browse callers are unaffected — which means omitting it
+ * here is precisely how a homepage strip starts showing dead listings again.
+ */
+export declare function buildHomepageListingQuery(input: HomepageListingQuery): string;

package/dist/features/homepage/hooks/homepage-query.js

@@ -0,0 +1,45 @@
+/*
+ * WHY: The three homepage listing hooks each hand-wrote a pre-URL-encoded
+ *      `filters=` Sieve string — `listingType%3D%3Dauction%2Cstatus%3D%3D…`.
+ *      Unreadable, unreviewable, and each one silently omitted any liveness
+ *      bound, so all three showed sold-out / ended / closed rows. Worse, they
+ *      run AFTER the SSR paint and replace it, so a fix to the server half
+ *      alone would have been undone 30 seconds later (Root Cause #30).
+ *
+ * WHAT: Build the query string from the same TYPED params
+ *       `parsePublicProductParams` reads on the other side, so a homepage
+ *       strip asks precisely what its SSR counterpart asked.
+ *
+ * EXPORTS: buildHomepageListingQuery, HomepageListingQuery, MIN_HOMEPAGE_COUNT
+ *
+ * @tag domain:homepage
+ * @tag layer:hook
+ * @tag pattern:none
+ * @tag access:client
+ * @tag consumers:useFeaturedAuctions,useFeaturedPreOrders,useFeaturedProducts
+ * @tag sideEffects:none
+ */
+import { AVAILABILITY_VALUES } from "../../../constants/field-names";
+/** How many cards a homepage carousel wants before it stops back-filling. */
+export const MIN_HOMEPAGE_COUNT = 12;
+/**
+ * Always sends `availability=available`. The API treats an ABSENT value as
+ * "all" so that non-browse callers are unaffected — which means omitting it
+ * here is precisely how a homepage strip starts showing dead listings again.
+ */
+export function buildHomepageListingQuery(input) {
+    const sp = new URLSearchParams();
+    sp.set("availability", AVAILABILITY_VALUES.AVAILABLE);
+    if (input.listingType)
+        sp.set("listingType", input.listingType);
+    if (input.brand)
+        sp.set("brand", input.brand);
+    if (input.featured)
+        sp.set("featured", "true");
+    if (input.isPromoted)
+        sp.set("isPromoted", "true");
+    if (input.sorts)
+        sp.set("sorts", input.sorts);
+    sp.set("pageSize", String(input.pageSize));
+    return sp.toString();
+}

package/dist/features/homepage/hooks/useFeaturedAuctions.d.ts

@@ -1,4 +1,14 @@
 import type { ProductItem } from "../../products/types";
+/**
+ * The soonest-ending LIVE auctions, for the homepage strip.
+ *
+ * This runs 30s after the SSR paint and REPLACES it, so it has to ask the
+ * server exactly what `getFeaturedAuctions` asked. It did not: both queries
+ * here were `listingType==auction,status==published` with no end-date bound,
+ * hand-written as a raw pre-encoded `filters=` string. So even once the SSR
+ * half was fixed, the strip would have reverted to showing expired auctions
+ * half a minute later (Root Cause #30).
+ */
 export declare function useFeaturedAuctions(options?: {
     filterByBrand?: string;
     initialData?: ProductItem[];

package/dist/features/homepage/hooks/useFeaturedAuctions.js

@@ -1,21 +1,41 @@
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";
-const MIN_COUNT = 12;
+import { buildHomepageListingQuery, MIN_HOMEPAGE_COUNT } from "./homepage-query";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+/**
+ * The soonest-ending LIVE auctions, for the homepage strip.
+ *
+ * This runs 30s after the SSR paint and REPLACES it, so it has to ask the
+ * server exactly what `getFeaturedAuctions` asked. It did not: both queries
+ * here were `listingType==auction,status==published` with no end-date bound,
+ * hand-written as a raw pre-encoded `filters=` string. So even once the SSR
+ * half was fixed, the strip would have reverted to showing expired auctions
+ * half a minute later (Root Cause #30).
+ */
 export function useFeaturedAuctions(options) {
-    const brandFilter = options?.filterByBrand
-        ? `%2Cbrand%3D%3D${encodeURIComponent(options.filterByBrand)}`
-        : "";
     return useQuery({
         queryKey: ["auctions", "featured", options?.filterByBrand ?? "all"],
         initialData: options?.initialData,
         queryFn: async () => {
-            const promotedRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=listingType%3D%3Dauction%2Cstatus%3D%3Dpublished%2CisPromoted%3D%3Dtrue${brandFilter}&pageSize=18`);
+            const promotedRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                listingType: "auction",
+                brand: options?.filterByBrand,
+                isPromoted: true,
+                sorts: sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC"),
+                pageSize: 18,
+            })}`);
             const promoted = promotedRes?.items ?? [];
-            if (promoted.length >= MIN_COUNT)
+            if (promoted.length >= MIN_HOMEPAGE_COUNT)
                 return promoted;
-            const remaining = MIN_COUNT - promoted.length;
-            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=listingType%3D%3Dauction%2Cstatus%3D%3Dpublished${brandFilter}&sorts=-createdAt&pageSize=${remaining + promoted.length}`);
+            const remaining = MIN_HOMEPAGE_COUNT - promoted.length;
+            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                listingType: "auction",
+                brand: options?.filterByBrand,
+                sorts: sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC"),
+                pageSize: remaining + promoted.length,
+            })}`);
             const latest = latestRes?.items ?? [];
             const existingIds = new Set(promoted.map((a) => a.id));
             const filler = latest

package/dist/features/homepage/hooks/useFeaturedPreOrders.js

@@ -1,21 +1,30 @@
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";
-const MIN_COUNT = 12;
+import { buildHomepageListingQuery, MIN_HOMEPAGE_COUNT } from "./homepage-query";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
 export function useFeaturedPreOrders(options) {
-    const brandFilter = options?.filterByBrand
-        ? `%2Cbrand%3D%3D${encodeURIComponent(options.filterByBrand)}`
-        : "";
     return useQuery({
         queryKey: ["pre-orders", "featured", options?.filterByBrand ?? "all"],
         initialData: options?.initialData,
         queryFn: async () => {
-            const featuredRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=listingType%3D%3Dpre-order%2Cstatus%3D%3Dpublished${brandFilter}&sorts=preOrderDeliveryDate&pageSize=6`);
+            const featuredRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                listingType: "pre-order",
+                brand: options?.filterByBrand,
+                sorts: sortBy(PRODUCT_FIELDS.PRE_ORDER_DELIVERY_DATE, "ASC"),
+                pageSize: 6,
+            })}`);
             const featured = featuredRes?.items ?? [];
-            if (featured.length >= MIN_COUNT)
+            if (featured.length >= MIN_HOMEPAGE_COUNT)
                 return featured;
-            const remaining = MIN_COUNT - featured.length;
-            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=listingType%3D%3Dpre-order%2Cstatus%3D%3Dpublished${brandFilter}&sorts=-createdAt&pageSize=${remaining + featured.length}`);
+            const remaining = MIN_HOMEPAGE_COUNT - featured.length;
+            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                listingType: "pre-order",
+                brand: options?.filterByBrand,
+                sorts: sortBy(PRODUCT_FIELDS.CREATED_AT, "DESC"),
+                pageSize: remaining + featured.length,
+            })}`);
             const latest = latestRes?.items ?? [];
             const existingIds = new Set(featured.map((p) => p.id));
             const filler = latest

package/dist/features/homepage/hooks/useFeaturedProducts.js

@@ -1,20 +1,27 @@
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";
-const MIN_COUNT = 12;
+import { buildHomepageListingQuery, MIN_HOMEPAGE_COUNT } from "./homepage-query";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
 export function useFeaturedProducts(options) {
-    const brandFilter = options?.filterByBrand
-        ? `%2Cbrand%3D%3D${encodeURIComponent(options.filterByBrand)}`
-        : "";
     return useQuery({
         queryKey: ["products", "featured", options?.filterByBrand ?? "all"],
         queryFn: async () => {
-            const promotedRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=isPromoted%3D%3Dtrue%2Cstatus%3D%3Dpublished${brandFilter}&pageSize=18`);
+            const promotedRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                brand: options?.filterByBrand,
+                isPromoted: true,
+                pageSize: 18,
+            })}`);
             const promoted = promotedRes?.items ?? [];
-            if (promoted.length >= MIN_COUNT)
+            if (promoted.length >= MIN_HOMEPAGE_COUNT)
                 return promotedRes;
-            const remaining = MIN_COUNT - promoted.length;
-            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?filters=status%3D%3Dpublished${brandFilter}&sorts=-createdAt&pageSize=${remaining + promoted.length}`);
+            const remaining = MIN_HOMEPAGE_COUNT - promoted.length;
+            const latestRes = await apiClient.get(`${PRODUCT_ENDPOINTS.LIST}?${buildHomepageListingQuery({
+                brand: options?.filterByBrand,
+                sorts: sortBy(PRODUCT_FIELDS.CREATED_AT, "DESC"),
+                pageSize: remaining + promoted.length,
+            })}`);
             const latest = latestRes?.items ?? [];
             const existingIds = new Set(promoted.map((p) => p.id));
             const filler = latest

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

@@ -720,6 +720,7 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
     }, z.ZodTypeAny, "passthrough">;
     active: boolean;
     order: number;
+    createdBy: string;
     cards: {
         id: string;
         background: {
@@ -762,7 +763,6 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         isButtonOnly?: boolean | undefined;
         gridCol?: 3 | 1 | 2 | undefined;
     }[];
-    createdBy: string;
     link?: {
         url: string;
         openInNewTab: boolean;
@@ -829,6 +829,7 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
     }, z.ZodTypeAny, "passthrough">;
     active: boolean;
     order: number;
+    createdBy: string;
     cards: {
         id: string;
         background: {
@@ -871,7 +872,6 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         isButtonOnly?: boolean | undefined;
         gridCol?: 3 | 1 | 2 | undefined;
     }[];
-    createdBy: string;
     link?: {
         url: string;
         openInNewTab: boolean;

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

@@ -88,6 +88,16 @@ export interface AppLayoutShellProps {
         logout?: string;
     };
     eventBannerSlot?: React.ReactNode;
+    /**
+     * Render the public mobile tab bar. Defaults to `true`.
+     *
+     * Set `false` on routes that mount their own bottom nav — `DashboardLayoutClient`
+     * renders a section-scoped one for /admin, /store and /user. Only ONE bottom nav
+     * may be mounted at a time: both are `fixed bottom-0` at the same z-index, so two
+     * stack on the identical pixels, and both publish `--bottom-nav-height`, which
+     * every offset above them reads.
+     */
+    showBottomNav?: boolean;
     /** When provided, renders a tour-start icon button in the title bar. Null in Patch 1. */
     onTourStart?: () => void;
     /**
@@ -115,4 +125,4 @@ export interface AppLayoutShellProps {
         };
     };
 }
-export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, onTourStart, contentClassName, lightBackground, darkBackground, }: AppLayoutShellProps): React.JSX.Element;
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, showBottomNav, onTourStart, contentClassName, lightBackground, darkBackground, }: AppLayoutShellProps): React.JSX.Element;

package/dist/features/layout/AppLayoutShell.js

@@ -18,8 +18,8 @@ import { useAuth } from "../../react/contexts/SessionContext";
 import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset";
 import { isBuyerUser } from "../auth/role-predicates";
 import { NavbarWithSettings } from "./NavbarWithSettings";
-import { useBottomActionsContext } from "./BottomActionsContext";
 import BottomActions from "./BottomActions";
+import { BottomChrome } from "./BottomChrome";
 import { AutoBreadcrumbs } from "./AutoBreadcrumbs";
 import { BottomNavbar } from "./BottomNavbar";
 import { FooterLayout } from "./FooterLayout";
@@ -127,7 +127,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-50 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, 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, 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, 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, }) {
     // 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
@@ -140,7 +140,6 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
     useEffect(() => { setSidebarOpen(false); }, [pathname]);
     const { theme, toggleTheme, activeTheme } = useTheme();
     const { closeNav: closeDashboardNav, hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
-    const { state: bottomActionsState } = useBottomActionsContext();
     const { user: authUser } = useAuth();
     const headerRef = useRef(null);
     useEffect(() => {
@@ -170,16 +169,12 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
     const handleBeforeDashboardNavToggle = useCallback(() => {
         setSidebarOpen(false);
     }, []);
-    // Must stay in sync with BottomActions' own `isVisible` — `secondaryLabel` was missing
-    // here, so an auction bar shown by its countdown alone got no bottom clearance.
-    const hasBottomActions = bottomActionsState.actions.length > 0 ||
-        !!(bottomActionsState.bulk && bottomActionsState.bulk.selectedCount > 0) ||
-        !!bottomActionsState.infoLabel ||
-        !!bottomActionsState.secondaryLabel;
-    /** The bar overlays desktop content too once a page opts in, so reserve space there. */
-    const hasDesktopBottomActions = hasBottomActions &&
-        (bottomActionsState.desktop === "always" ||
-            bottomActionsState.desktop === "after-scroll");
+    // The shell used to mirror BottomActions' `isVisible` here to pick a margin
+    // for <Main>, and a comment warned it had to be kept in sync by hand (it had
+    // already drifted once — `secondaryLabel` was missing, so an auction bar shown
+    // by its countdown alone got no clearance). That mirror is gone: BottomChrome
+    // measures the real tier and publishes --bottom-chrome-height, and the footer
+    // reserves space from that. Nothing needs to guess any more.
     const sidebarContent = (_jsx(SidebarContent, { sidebarItems: sidebarItems, sidebarSections: sidebarSections, sidebarPrimaryActions: sidebarPrimaryActions, user: user, activeHref: pathname ?? "", profileHref: profileHref, userOrdersHref: userOrdersHref, userWishlistHref: userWishlistHref, userSettingsHref: userSettingsHref, adminHref: adminHref, storeHref: storeHref, sellerHref: sellerHref, sidebarLocaleSlot: sidebarLocaleSlot, showThemeToggleInSidebar: showThemeToggleInSidebar, sidebarProfileLabels: sidebarProfileLabels, theme: theme, activeThemeName: activeTheme.name, toggleTheme: toggleTheme, onLogout: onLogout, onAfterLogout: () => setSidebarOpen(false) }));
     const normalizedLightBackground = {
         type: lightBackground.type,
@@ -199,5 +194,11 @@ 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, 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", className: `w-full flex-1 flex flex-col ${hasBottomActions ? "mb-28" : "mb-16"} ${hasDesktopBottomActions ? "lg:mb-24" : "lg:mb-0"}`, 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(BottomActions, {}), _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: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
+    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, 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", 
+                            // 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
+                            // what the fixed nav + tier actually overlap. That reservation now
+                            // lives on the footer's own padding-bottom.
+                            className: "w-full flex-1 flex flex-col", 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: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
 }

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

@@ -6,6 +6,15 @@ export interface BackToTopProps {
 }
 /**
  * BackToTop — floating scroll-to-top button.
+ *
+ * Sits at the top of the three-tier bottom edge: the nav bar is the floor
+ * (`--bottom-nav-height`), everything non-nav is one measured tier in between
+ * (`--bottom-chrome-height`, published by `<BottomChrome>`), and this floats a
+ * gutter above the sum. The offset is deliberately expressed against the tier
+ * rather than against any individual bar, so a CTA row changing height, a bar
+ * revealing on desktop scroll, or a new bottom bar added later all just work —
+ * this `calc()` never has to grow again.
+ *
  * Appears after the page has scrolled past `threshold` pixels. A small
  * dismiss control hides it for the current page view only — dismissal is
  * plain in-memory component state, reset on every route change (via

package/dist/features/layout/BackToTop.js

@@ -8,6 +8,15 @@ import { Button, Div } from "../../ui";
 import { useHandMode } from "../../_internal/client/hand-mode";
 /**
  * BackToTop — floating scroll-to-top button.
+ *
+ * Sits at the top of the three-tier bottom edge: the nav bar is the floor
+ * (`--bottom-nav-height`), everything non-nav is one measured tier in between
+ * (`--bottom-chrome-height`, published by `<BottomChrome>`), and this floats a
+ * gutter above the sum. The offset is deliberately expressed against the tier
+ * rather than against any individual bar, so a CTA row changing height, a bar
+ * revealing on desktop scroll, or a new bottom bar added later all just work —
+ * this `calc()` never has to grow again.
+ *
  * Appears after the page has scrolled past `threshold` pixels. A small
  * dismiss control hides it for the current page view only — dismissal is
  * plain in-memory component state, reset on every route change (via
@@ -40,7 +49,7 @@ export function BackToTop({ threshold = 400, ariaLabel = "Back to top", classNam
     const handleDismiss = () => {
         setDismissed(true);
     };
-    return (_jsxs(Div, { layout: "flex", align: "center", gap: "1", className: `fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem)+var(--appkit-space-4))] ${hand === "left" ? "left-4" : "right-4"} z-[var(--appkit-z-back-to-top)] ${className}`, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": ariaLabel, onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), className: "flex items-center justify-center w-10 h-10 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] dark:hover:bg-slate-700 transition-colors", children: _jsx(ChevronUp, { className: "w-5 h-5", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": "Hide back-to-top button", onClick: handleDismiss, className: "flex items-center justify-center w-6 h-6 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text)] transition-colors", children: _jsx(X, { className: "w-3 h-3", "aria-hidden": "true" }) })] }));
+    return (_jsxs(Div, { layout: "flex", align: "center", gap: "1", className: `fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem)+var(--bottom-chrome-height,0px)+var(--appkit-space-4))] transition-[bottom] duration-300 ease-out ${hand === "left" ? "left-4" : "right-4"} z-[var(--appkit-z-back-to-top)] ${className}`, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": ariaLabel, onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), className: "flex items-center justify-center w-10 h-10 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] dark:hover:bg-slate-700 transition-colors", children: _jsx(ChevronUp, { className: "w-5 h-5", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": "Hide back-to-top button", onClick: handleDismiss, className: "flex items-center justify-center w-6 h-6 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text)] transition-colors", children: _jsx(X, { className: "w-3 h-3", "aria-hidden": "true" }) })] }));
 }
 /** SkipToMain — visually hidden link that becomes visible on focus for keyboard users. */
 export function SkipToMain({ mainId = "main-content" }) {

package/dist/features/layout/BottomActions.js

@@ -36,7 +36,6 @@ import { useClickOutside } from "../../react";
 import { Div, Row, Span, Text, Button } from "../../ui";
 // Token values inlined from @mohasinac/appkit/tokens
 const BOTTOM_NAV_BG = "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]";
-const Z_BOTTOM_ACTIONS = "z-[var(--appkit-z-bottom-nav)]";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
 const CLS_COUNT_BADGE = "bg-error-solid text-error-on-solid";
@@ -173,31 +172,35 @@ export default function BottomActions() {
         setPickerOpen(false);
     };
     return (_jsxs(Div, { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? "Bulk actions" : "Page actions", "aria-hidden": !isVisible, className: [
-            "fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))] left-0 right-0",
-            // `--bottom-nav-height` resolves to 0px above lg, so the same offset lands the
-            // bar on the viewport bottom on desktop with no extra positioning.
+            // Position, z-index and the offset above the nav all belong to
+            // <BottomChrome>, the tier container this renders inside. `relative` is
+            // kept because the two panels below are `absolute bottom-full` against it.
+            "relative pointer-events-auto",
+            // Desktop opt-in stays per-bar. `lg:hidden` is display:none, so a bar the
+            // page hasn't opted into contributes nothing to the tier's height.
             showOnDesktop ? "" : "lg:hidden",
-            Z_BOTTOM_ACTIONS,
-            BOTTOM_NAV_BG,
-            "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",
-            "will-change-transform transition-transform duration-300 ease-out",
-            isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), hasInfoPanel && !isBulkMode && (_jsx(InfoPanel, { id: infoPanelId, open: infoOpen, children: infoPanel })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- 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 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, { size: "xs", weight: "semibold", className: "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-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",
-                                "bg-zinc-50 hover:bg-[var(--appkit-color-surface)] active:bg-zinc-200 bg-[var(--appkit-color-surface-input)] dark:hover:bg-slate-700/60",
-                                "border-[var(--appkit-color-border)]",
-                                selectedAction?.variant === "danger"
-                                    ? "text-error"
-                                    : "text-[var(--appkit-color-text)]",
-                            ]
-                                .filter(Boolean)
-                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate leading-none", align: "start", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
-                                selectedAction?.disabled ||
-                                selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
-                /* Page mode — action buttons inline ------------------------------ */
-                _jsx(PageActionsRow, { pageActions: pageActions, dispatchAction: dispatchAction })) })] }));
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), hasInfoPanel && !isBulkMode && (_jsx(InfoPanel, { id: infoPanelId, open: infoOpen, children: infoPanel })), _jsx(Div, { className: `grid transition-[grid-template-rows] duration-300 ease-out ${isVisible ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`, children: _jsx(Div, { overflow: "hidden", className: "min-h-0", children: _jsxs(Div, { className: [
+                            BOTTOM_NAV_BG,
+                            "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",
+                            isVisible ? "" : "pointer-events-none",
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- 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 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, { size: "xs", weight: "semibold", className: "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-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",
+                                                "bg-zinc-50 hover:bg-[var(--appkit-color-surface)] active:bg-zinc-200 bg-[var(--appkit-color-surface-input)] dark:hover:bg-slate-700/60",
+                                                "border-[var(--appkit-color-border)]",
+                                                selectedAction?.variant === "danger"
+                                                    ? "text-error"
+                                                    : "text-[var(--appkit-color-text)]",
+                                            ]
+                                                .filter(Boolean)
+                                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate leading-none", align: "start", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
+                                                selectedAction?.disabled ||
+                                                selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
+                                /* Page mode — action buttons inline ------------------------------ */
+                                _jsx(PageActionsRow, { pageActions: pageActions, dispatchAction: dispatchAction })) })] }) }) })] }));
 }

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

@@ -0,0 +1,34 @@
+import React from "react";
+export interface BottomChromeProps {
+    children: React.ReactNode;
+}
+/**
+ * BottomChrome — the middle tier of the bottom edge.
+ *
+ * The bottom edge is three tiers: the nav bar is the floor, `BackToTop` is the
+ * ceiling, and *everything else* lives in here. This container is what makes
+ * that middle tier a single thing with a single height:
+ *
+ *   --keyboard-inset-height   useVisualViewportInset  (the on-screen keyboard)
+ *   --bottom-nav-height       BottomNavLayout         (the tab bar)
+ *   --bottom-chrome-height    THIS COMPONENT          (CTA row, pagination, …)
+ *      ↑ BackToTop floats above the sum of all three
+ *
+ * Because it is a flex column, its own `offsetHeight` IS the sum of whatever is
+ * inside it — a bar changing height, revealing on scroll, entering bulk mode,
+ * or being added years from now all just resize this box, and the one
+ * ResizeObserver below picks every case up. Consumers read one variable and
+ * never have to learn about individual bars. Publishing a separate var per bar
+ * was the alternative, and it fails the moment someone adds bar number three
+ * without also editing every consumer's `calc()`.
+ *
+ * Two constraints this container places on its children:
+ *   - A child must hide by COLLAPSING, not by transforming. `translate-y-full`
+ *     leaves layout height behind, so a hidden bar would still be reserved here
+ *     on every page that has no CTA. See BottomActions' grid-rows collapse.
+ *   - No `overflow: hidden` here, ever. BottomActions' bulk-picker and info
+ *     panels are `absolute bottom-full` — deliberately outside the flow (they
+ *     are transient tap-to-open overlays, not persistent bands, so they are
+ *     excluded from the published height) — and clipping would erase them.
+ */
+export declare function BottomChrome({ children }: BottomChromeProps): React.JSX.Element;