@mohasinac/appkit 4.42.0 → 4.42.1

package/dist/_internal/client/features/layout/DashboardLayoutClient.js

@@ -34,8 +34,7 @@ import { filterNavItems } from "./filterNavItems";
 import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
 import { useTheme } from "../../theme";
 import { useHandMode } from "../../hand-mode";
-import { BackgroundRenderer, Div, Li, Nav, Span } from "../../../../ui";
-import { BottomNavLayout } from "../../../../features/layout/BottomNavLayout";
+import { BackgroundRenderer, Div, Nav } from "../../../../ui";
 import { useToast } from "../../../../ui/components/Toast";
 import { useSession } from "../../../../react/contexts/SessionContext";
 import { ROUTES } from "../../../../next/routing/route-map";
@@ -147,33 +146,6 @@ function filterGroups(groups, navConfig, permissions) {
     }))
         .filter((group) => group.items.length > 0);
 }
-const MAX_BOTTOM_NAV_ITEMS = 5;
-/**
- * Mobile bottom tab bar (<lg) for the dashboard shells. Admin/store/user
- * previously had no bottom-nav — this was the source of "hard to navigate
- * on mobile" (the sidebar's only mobile affordance was an off-canvas drawer
- * behind a hamburger toggle). Pattern lifted from the unused
- * `DashboardScaffold` scaffold, which has since been retired in favour of
- * wiring it directly here where the sidebars already live.
- *
- * Renders through the shared `<BottomNavLayout>` rather than hand-rolling its
- * own `fixed bottom-0` chrome. That is not cosmetic: `BottomNavLayout` is what
- * publishes `--bottom-nav-height`, which every bottom-anchored surface above it
- * (the CTA tier, the pagination bar, BackToTop, the footer's clearance) offsets
- * against. The hand-rolled version published nothing, so on dashboard routes
- * that whole stack was positioned against the PUBLIC nav's height instead —
- * which was itself a bug, since both bars were rendering on the same pixels.
- * `AppLayoutShell` is now told to suppress the public one here via
- * `showBottomNav={!isDashboard}`; exactly one nav must be mounted at a time.
- */
-function DashboardBottomNav({ items, activeHref }) {
-    if (items.length === 0)
-        return null;
-    return (_jsx(BottomNavLayout, { id: "dashboard-bottom-navbar", ariaLabel: "Dashboard bottom navigation", children: items.slice(0, MAX_BOTTOM_NAV_ITEMS).map((item) => {
-            const isActive = activeHref === item.href || activeHref.startsWith(`${item.href}/`);
-            return (_jsx(Li, { className: "flex-1", children: _jsxs(Link, { href: item.href, className: `flex h-full flex-col items-center justify-center gap-[var(--appkit-space-0-5)] py-[var(--appkit-space-2)] ${isActive ? "text-[var(--appkit-color-primary)]" : "text-[var(--appkit-color-text-muted)]"}`, "aria-current": isActive ? "page" : undefined, children: [item.icon && _jsx(Span, { size: "base", children: item.icon }), _jsx(Span, { size: "xs", className: "max-w-full truncate", children: item.label })] }) }, item.href));
-        }) }));
-}
 // Asymmetric padding clears the persistent sidebar rail — right-heavy by
 // default (rail docks left), left-heavy in left-hand mode (rail docks right).
 const DEFAULT_CONTENT_PADDING_RIGHT = "px-[var(--appkit-space-5)] py-[var(--appkit-space-8)] lg:pl-14 lg:pr-6 xl:pl-16 xl:pr-10";
@@ -227,5 +199,5 @@ responsive: _responsive, crossNav, className, contentPadding, contentSurface, co
                     "pb-[var(--appkit-space-16)] lg:pb-[0]", // clears the fixed mobile bottom-nav
                     contentPadding ?? (hand === "left" ? DEFAULT_CONTENT_PADDING_LEFT : DEFAULT_CONTENT_PADDING_RIGHT),
                     contentSurface,
-                ].filter(Boolean).join(" "), children: _jsx(Div, { className: ["w-full flex-1 mx-auto", contentMaxWidth ?? DEFAULT_CONTENT_MAX_WIDTH].filter(Boolean).join(" "), children: children }) }), _jsx(DashboardBottomNav, { items: filteredGroups.flatMap((g) => g.items), activeHref: activeHref })] }));
+                ].filter(Boolean).join(" "), children: _jsx(Div, { className: ["w-full flex-1 mx-auto", contentMaxWidth ?? DEFAULT_CONTENT_MAX_WIDTH].filter(Boolean).join(" "), children: children }) })] }));
 }

package/dist/features/layout/AppLayoutShell.js

@@ -139,7 +139,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
     const pathname = usePathname();
     useEffect(() => { setSidebarOpen(false); }, [pathname]);
     const { theme, toggleTheme, activeTheme } = useTheme();
-    const { closeNav: closeDashboardNav, hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
+    const { closeNav: closeDashboardNav } = useDashboardNav();
     const { user: authUser } = useAuth();
     const headerRef = useRef(null);
     useEffect(() => {
@@ -200,5 +200,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             // 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, {})] }) }));
+                            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: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
 }

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

@@ -18,8 +18,14 @@ export interface BottomNavLayoutProps {
  *
  * Hand mode: the item strip carries `appkit-hand-mirror`, so slot order
  * reverses in left-hand mode (CSS-only via `[data-hand]` — applies on the
- * first paint, no flash). This deliberately covers BOTH bottom bars: the
- * public `BottomNavbar` and `DashboardLayoutClient`'s `dashboard-bottom-navbar`
- * both render through here, and they must behave identically.
+ * first paint, no flash).
+ *
+ * `BottomNavbar` (`./BottomNavbar.tsx`) is the sole consumer, and it renders
+ * unconditionally on every route including admin/store/user dashboards —
+ * there is deliberately no second, dashboard-specific bottom bar (removed
+ * 2026-09-28; dashboard section navigation lives on the header hamburger
+ * instead, via `DashboardNavContext`). Never add a second component that
+ * mounts through this shell — exactly one bottom nav may exist per route,
+ * since this is the sole publisher of `--bottom-nav-height`.
  */
 export declare function BottomNavLayout({ ariaLabel, children, id, className, }: BottomNavLayoutProps): React.JSX.Element;

package/dist/features/layout/BottomNavLayout.js

@@ -16,9 +16,15 @@ import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset
  *
  * Hand mode: the item strip carries `appkit-hand-mirror`, so slot order
  * reverses in left-hand mode (CSS-only via `[data-hand]` — applies on the
- * first paint, no flash). This deliberately covers BOTH bottom bars: the
- * public `BottomNavbar` and `DashboardLayoutClient`'s `dashboard-bottom-navbar`
- * both render through here, and they must behave identically.
+ * first paint, no flash).
+ *
+ * `BottomNavbar` (`./BottomNavbar.tsx`) is the sole consumer, and it renders
+ * unconditionally on every route including admin/store/user dashboards —
+ * there is deliberately no second, dashboard-specific bottom bar (removed
+ * 2026-09-28; dashboard section navigation lives on the header hamburger
+ * instead, via `DashboardNavContext`). Never add a second component that
+ * mounts through this shell — exactly one bottom nav may exist per route,
+ * since this is the sole publisher of `--bottom-nav-height`.
  */
 export function BottomNavLayout({ ariaLabel, children, id = "bottom-navbar", className, }) {
     const isKeyboardOpen = useVisualViewportInset();

package/dist/features/tester/seed-data/authored/buying__user-dashboard-navigation.js

@@ -58,15 +58,16 @@ export const authored = {
         steps: [
             "Sign in as rehan.sheikh@gmail.com / TempPass123!.",
             "Resize the browser window to 390 pixels wide and open /user.",
-            "Read how the sidebar is presented.",
-            "Open it, read its entries, and navigate somewhere.",
+            "Open the sidebar using the header's hamburger icon.",
+            "Read its entries, and navigate somewhere.",
             "Check whether it closed on navigation.",
-            "Count the fixed bars at the bottom of the screen.",
+            "Count the fixed bars at the bottom of the screen and read every one of its slots, including the last ('More').",
+            "Tap the bottom bar's 'More' slot and read what it opens.",
             "Try to scroll the page sideways.",
         ],
         inputs: { mobileWidth: 390 },
-        expectedBehaviour: "On a phone the sidebar collapses behind a control and closes after navigating. The dashboard renders its own bottom tab bar and the public one is suppressed on these routes, so exactly one is mounted — two would be two bars on the same pixels with a height nobody owns, and everything above them would be positioned against the wrong one.",
-        expectedUiState: "The sidebar is collapsed by default, opens on demand and closes after navigation. Exactly one bottom bar is present, carrying dashboard destinations rather than the public ones. The page does not scroll sideways.",
+        expectedBehaviour: "BEFORE (fixed 2026-09-28): /user rendered a dashboard-specific bottom bar — up to 5 flattened sidebar links, text-only, no icons — while the public bottom bar was suppressed on this route. AFTER: the dashboard sidebar opens from the header hamburger, exactly as on every dashboard route, and closes after navigating. The bottom tab bar itself is now the SAME shared bar every public page uses (same items, same order, same icons) — not a dashboard-specific one — and its own 'More' slot opens the public site menu, not this sidebar. Exactly one bottom bar is mounted either way, since it is the sole publisher of its own height.",
+        expectedUiState: "The header hamburger opens the dashboard sidebar, collapsed by default, closing after navigation. The bottom bar matches the public site's bar item-for-item, and tapping its 'More' slot opens the public menu rather than the dashboard sidebar. The page does not scroll sideways.",
         expectedData: { bottomNavCount: 1 },
         endResult: "Read-only; restore the window width afterwards.",
     },

package/dist/features/tester/seed-data/authored/design-ux__hand-mode-layout.js

@@ -227,12 +227,12 @@ export const authored = {
             "Resize the browser window to 390 pixels wide and open /user.",
             "Look at the bottom tab bar and write down its items in order.",
             "Count the bottom bars present.",
+            "Compare the item order against the public bar from the sibling case (checklist-design-ux-hand-mode-layout-bottom-nav-mirror, on /).",
             "Turn 'Left-hand mode' off and check both again.",
-            "Compare the dashboard's bar against the public one from the previous case.",
         ],
         inputs: { leftHandMode: true, mobileWidth: 390 },
-        expectedBehaviour: "The dashboard renders its own bottom bar and the public one is suppressed on those routes, so exactly one is mounted. Two would be two bars on the same pixels with a height nobody owns, and everything above would be positioned against the wrong one.",
-        expectedUiState: "Exactly one bottom bar on /user in both modes, carrying dashboard destinations rather than the public ones. Item order is unchanged between modes, matching the public bar's behaviour.",
+        expectedBehaviour: "BEFORE (fixed 2026-09-28): /user rendered its own dashboard-specific bottom bar, so this case was testing whether a second, separate implementation happened to mirror the same way as the public one. AFTER: /user renders the exact same shared bottom bar component as every public page — there is only one implementation, so hand-mode mirroring is inherited for free rather than needing its own logic. Exactly one bottom bar is mounted.",
+        expectedUiState: "The /user bottom bar's items and order match the public bar's from the sibling case, in both hand-mode states, because it is literally the same bar. Exactly one bottom bar is present throughout.",
         expectedData: { bottomNavCount: 1 },
         endResult: "The mode is off again by the last step; restore the window width.",
     },

package/dist/features/tester/seed-data/authored/selling__store-dashboard-navigation.js

@@ -56,15 +56,16 @@ export const authored = {
         steps: [
             "Sign in as tyson@beybladearena.in / TempPass123!.",
             "Resize the browser window to 390 pixels wide and open /store.",
-            "Read how the sidebar is presented.",
-            "Open it, read its entries, and navigate somewhere.",
+            "Open the sidebar using the header's hamburger icon.",
+            "Read its entries, and navigate somewhere.",
             "Check whether it closed on navigation.",
-            "Count the fixed bars at the bottom of the screen.",
+            "Count the fixed bars at the bottom of the screen and read every one of its slots, including the last ('More').",
+            "Tap the bottom bar's 'More' slot and read what it opens.",
             "Try to scroll the page sideways.",
         ],
         inputs: { mobileWidth: 390 },
-        expectedBehaviour: "On a phone the sidebar collapses behind a control and closes after navigating. The dashboard renders its own bottom tab bar and the public one is suppressed on these routes, so exactly one is mounted — two would be two bars on the same pixels with a height nobody owns.",
-        expectedUiState: "The sidebar is collapsed by default, opens on demand, and closes after a navigation. Exactly one bottom bar is present, carrying dashboard destinations. The page does not scroll sideways.",
+        expectedBehaviour: "BEFORE (fixed 2026-09-28): /store rendered a dashboard-specific bottom bar — up to 5 flattened sidebar links, text-only, no icons — while the public bottom bar was suppressed on this route. AFTER: the dashboard sidebar opens from the header hamburger, exactly as on every dashboard route, and closes after navigating. The bottom tab bar itself is now the SAME shared bar every public page uses (same items, same order, same icons) — not a dashboard-specific one — and its own 'More' slot opens the public site menu, not this sidebar. Exactly one bottom bar is mounted either way.",
+        expectedUiState: "The header hamburger opens the dashboard sidebar, collapsed by default, closing after navigation. The bottom bar matches the public site's bar item-for-item, and tapping its 'More' slot opens the public menu rather than the dashboard sidebar. The page does not scroll sideways.",
         expectedData: { bottomNavCount: 1 },
         endResult: "Read-only; restore the window width afterwards.",
     },

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -2054,7 +2054,7 @@ const rawTesterChecklistItems = [
             cases: [
                 { key: "sidebar-all-links-work", label: "Every item in the user dashboard sidebar navigates to its page without a 404 or broken layout", href: "/user" },
                 { key: "sidebar-active-highlight", label: "The sidebar correctly highlights the currently active section as you navigate between pages" },
-                { key: "sidebar-mobile-collapse", label: "The user dashboard sidebar collapses into a mobile-friendly menu/bottom bar on small screens" },
+                { key: "sidebar-mobile-collapse", label: "On small screens, the user dashboard sidebar opens from the header hamburger as a collapsible menu; the bottom tab bar is the exact same one shown on every other page, not a dashboard-specific bar" },
                 { key: "deep-link-direct-load", label: "Directly loading a deep user dashboard URL (e.g. /user/orders/view/[id]) works without first visiting the dashboard home" },
                 { key: "become-seller-crossnav", label: "\"Become a Seller\" (buyer) vs \"Go to my Store\" (seller) shows the correct one based on account state and navigates correctly" },
                 { key: "browser-back-forward", label: "Browser back/forward buttons move correctly between dashboard sub-pages without breaking the layout" },
@@ -2734,7 +2734,7 @@ const rawTesterChecklistItems = [
             cases: [
                 { key: "store-sidebar-all-links-work", label: "Every item in the store/seller dashboard sidebar navigates to its page without a 404 or broken layout", href: "/store" },
                 { key: "store-sidebar-active-highlight", label: "The store sidebar correctly highlights the currently active section as you navigate between pages" },
-                { key: "store-sidebar-mobile-collapse", label: "The store dashboard sidebar collapses into a mobile-friendly menu/bottom bar on small screens" },
+                { key: "store-sidebar-mobile-collapse", label: "On small screens, the store dashboard sidebar opens from the header hamburger as a collapsible menu; the bottom tab bar is the exact same one shown on every other page, not a dashboard-specific bar" },
                 { key: "store-deep-link-direct-load", label: "Directly loading a deep store dashboard URL (e.g. /store/products/[id]/edit) works without first visiting the dashboard home" },
                 { key: "store-user-crossnav", label: "The store dashboard's cross-nav link back to the buyer dashboard works and lands on the correct page" },
                 { key: "store-browser-back-forward", label: "Browser back/forward buttons move correctly between store dashboard sub-pages without breaking the layout" },
@@ -3890,7 +3890,7 @@ const rawTesterChecklistItems = [
                 { key: "titlebar-row2-mirror", label: "On a phone-width viewport with Left-hand mode ON, the top bar's SECOND row (notifications / wishlist / cart / profile icons) packs against the LEFT edge in mirrored order with profile leftmost; with it OFF it packs against the right edge with notifications leftmost", href: "/" },
                 { key: "titlebar-actions-no-overflow-narrow", label: "With Left-hand mode ON at the narrowest phone width (~320px), no top-bar icon is clipped or pushed off-screen — the mirrored row fits exactly as well as the default row does", href: "/" },
                 { key: "bottom-nav-mirror", label: "With Left-hand mode ON, the mobile bottom tab bar's slots appear in reverse order (Profile leftmost, Home rightmost); with it OFF, Home is leftmost. Slot widths stay equal in both modes.", href: "/" },
-                { key: "dashboard-bottom-nav-mirror", label: "With Left-hand mode ON, the dashboard's own mobile bottom tab bar (on admin/store/user routes) mirrors the same way the public one does — both bars behave identically", href: "/user" },
+                { key: "dashboard-bottom-nav-mirror", label: "On admin/store/user routes, the mobile bottom tab bar is the exact same shared bar the public site uses — with Left-hand mode ON it mirrors identically, because it is literally the same component", href: "/user" },
                 { key: "count-badges-mirror", label: "With Left-hand mode ON, the red count bubbles on the cart / wishlist / notification icons sit on the TOP-LEFT corner of their icon instead of top-right — in BOTH the top bar and the mobile bottom tab bar — and neither is clipped by the icon's edge", href: "/" },
                 { key: "nav-scroll-arrows-unaffected", label: "Left-hand mode does NOT flip the main navigation bar's overflow scroll chevrons — the left chevron still scrolls the nav left and the right chevron still scrolls it right, in both modes", href: "/" },
                 { key: "header-tab-order-sane", label: "With Left-hand mode ON, pressing Tab repeatedly from the top of the page still reaches every top-bar control with none skipped or trapped", description: "The visual left-to-right order will NOT match the tab order in left-hand mode — that is expected and accepted (the mirror is visual only, DOM order is deliberately unchanged so screen-reader reading order stays stable). What must not happen is a control becoming unreachable.", href: "/" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.42.0",
+  "version": "4.42.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"