@carlonicora/nextjs-jsonapi 1.134.0 → 1.135.1

package/dist/features/help/index.js

@@ -22,7 +22,7 @@ var _chunkYBZVWLPHjs = require('../../chunk-YBZVWLPH.js');
 
 
 
-var _chunkLBXHYRZHjs = require('../../chunk-LBXHYRZH.js');
+var _chunkDNWYHP4Vjs = require('../../chunk-DNWYHP4V.js');
 
 
 var _chunkC2LEIBUKjs = require('../../chunk-C2LEIBUK.js');
@@ -74,29 +74,29 @@ var _lucidereact = require('lucide-react');
 
 
 function HelpAssistantSheet({ open, onOpenChange }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkLBXHYRZHjs.SheetContent,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDNWYHP4Vjs.SheetContent,
     {
       side: "right",
       className: "flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
     }
   ) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheet, "HelpAssistantSheet");
 function HelpAssistantSheetBody() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const ctx = _chunkLBXHYRZHjs.useAssistantContext.call(void 0, );
+  const ctx = _chunkDNWYHP4Vjs.useAssistantContext.call(void 0, );
   const showThread = !!ctx.assistant || ctx.sending || ctx.messages.length > 0;
   const send = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (content) => ctx.sendMessage(content, { howToMode: true }), "send");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.SheetHeader, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.SheetHeader, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
     ] }),
-    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkLBXHYRZHjs.AssistantThread,
+        _chunkDNWYHP4Vjs.AssistantThread,
         {
           messages: ctx.messages,
           sending: ctx.sending,
@@ -106,7 +106,7 @@ function HelpAssistantSheetBody() {
           onRetry: ctx.retrySend
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
     ] })
   ] });
 }
@@ -116,20 +116,20 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheetBody, "HelpAssistantSheet
 
 function HelpAskAi() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkLBXHYRZHjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkDNWYHP4Vjs.useCurrentUserContext.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const disabled = !currentUser;
   if (disabled) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.Tooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
         t("help.askAi.button")
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
       t("help.askAi.button")
     ] }),
@@ -142,7 +142,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAskAi, "HelpAskAi");
 
 function HelpHeader() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkLBXHYRZHjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkDNWYHP4Vjs.useCurrentUserContext.call(void 0, );
   const { brand } = useHelp();
   const logo = _optionalChain([brand, 'optionalAccess', _ => _.logo]);
   const label = _nullishCoalesce(_optionalChain([brand, 'optionalAccess', _2 => _2.label]), () => ( "Help"));
@@ -158,7 +158,7 @@ function HelpHeader() {
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAskAi, {}),
-      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
+      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
     ] })
   ] });
 }
@@ -200,7 +200,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, useHelpFilter, "useHelpFilter");
 
 function HelpSideNav() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkLBXHYRZHjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkDNWYHP4Vjs.usePageUrlGenerator.call(void 0, );
   const pathname = _navigation.usePathname.call(void 0, );
   const [articles, setArticles] = _react.useState.call(void 0, []);
   _react.useEffect.call(void 0, () => {
@@ -281,7 +281,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpSideNav, "HelpSideNav");
 function HelpArticleBody(props) {
   const t = _nextintl.useTranslations.call(void 0, );
   const format = _nextintl.useFormatter.call(void 0, );
-  const generateUrl = _chunkLBXHYRZHjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkDNWYHP4Vjs.usePageUrlGenerator.call(void 0, );
   const { howToType, title, summary, updatedAt, prev, next, children } = props;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: "prose dark:prose-invert max-w-none", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "text-muted-foreground mb-2 text-xs", children: [
@@ -338,7 +338,7 @@ function HelpTOC({ headings }) {
   }, [headings]);
   if (headings.length === 0) return null;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": t("help.toc.title"), className: "hidden lg:block", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.MicroLabel, { className: "mb-2", children: t("help.toc.title") }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.MicroLabel, { className: "mb-2", children: t("help.toc.title") }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "space-y-1 text-sm", children: headings.map((h) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { style: { paddingLeft: `${(h.depth - 2) * 0.75}rem` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "a",
       {
@@ -359,7 +359,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpTOC, "HelpTOC");
 
 function HelpHint({ contextKey }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkLBXHYRZHjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkDNWYHP4Vjs.usePageUrlGenerator.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const [picked, setPicked] = _react.useState.call(void 0, null);
   const [articles, setArticles] = _react.useState.call(void 0, []);
@@ -377,7 +377,7 @@ function HelpHint({ contextKey }) {
   if (matches.length === 0) return null;
   const active = _nullishCoalesce(picked, () => ( (matches.length === 1 ? matches[0] : null)));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkLBXHYRZHjs.Sheet,
+    _chunkDNWYHP4Vjs.Sheet,
     {
       open,
       onOpenChange: (o) => {
@@ -385,11 +385,11 @@ function HelpHint({ contextKey }) {
         if (!o) setPicked(null);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLBXHYRZHjs.SheetHeader, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDNWYHP4Vjs.SheetHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
           ] }),
           active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4 space-y-3", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-muted-foreground text-sm", children: active.summary }),
@@ -421,7 +421,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpHint, "HelpHint");
 
 function HelpSearchResultRow({ result, onSelect }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkLBXHYRZHjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkDNWYHP4Vjs.usePageUrlGenerator.call(void 0, );
   const [article, setArticle] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     let active = true;
@@ -432,7 +432,7 @@ function HelpSearchResultRow({ result, onSelect }) {
   }, [result.id]);
   if (!article) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLBXHYRZHjs.CommandItem,
+      _chunkDNWYHP4Vjs.CommandItem,
       {
         value: result.id,
         disabled: true,
@@ -441,7 +441,7 @@ function HelpSearchResultRow({ result, onSelect }) {
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLBXHYRZHjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDNWYHP4Vjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _link2.default,
     {
       href: generateUrl({ page: `/help/${article.howToType}/${article.slug}` }),

package/dist/features/help/index.mjs

@@ -22,7 +22,7 @@ import {
   useAssistantContext,
   useCurrentUserContext,
   usePageUrlGenerator
-} from "../../chunk-DV5YYI3G.mjs";
+} from "../../chunk-EF2HVXOV.mjs";
 import {
   _getStaticHelpContent
 } from "../../chunk-M5IAN7IR.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.134.0",
+  "version": "1.135.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/containers/RoundPageContainer.tsx

@@ -19,7 +19,7 @@ import {
 } from "@/components";
 import { partitionTabs, Tab } from "@/components/containers";
 import { RoundPageContainerTitle } from "@/components/containers/RoundPageContainerTitle";
-import { Header } from "@/components/navigations";
+import { Header, MobileNavigationBar } from "@/components/navigations";
 import { useHeaderChildren, useHeaderLeftContent, useHeaderLogo, useHeaderMobileChildren } from "@/contexts";
 import { useUrlRewriter } from "@/hooks";
 import { cn, useIsMobile } from "@/index";
@@ -163,10 +163,15 @@ export function RoundPageContainer({
         >
           {headerChildren}
         </Header>
-        <div className={cn("flex h-[calc(100vh-3rem)] w-full flex-col", isMobile ? "" : "p-2 pt-0 pl-0")}>
-          <div className={cn("bg-background flex h-full w-full", isMobile ? "" : "rounded-lg border p-0")}>
+        <div className={cn("flex h-[calc(100vh-3rem)] w-full flex-col", isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0")}>
+          {/* `min-h-0 flex-1`, NOT `h-full`: the bar below is an in-flow sibling in
+              this fixed-height flex column. `h-full` would resolve to 100% of the
+              wrapper, leaving no room and pushing the bar below the fold (visible
+              only after scrolling to the end of the page). */}
+          <div className={cn("bg-background flex min-h-0 w-full flex-1", isMobile ? "" : "rounded-lg border p-0")}>
             <div className="flex w-full flex-col" />
           </div>
+          <MobileNavigationBar />
         </div>
       </>
     );
@@ -182,8 +187,12 @@ export function RoundPageContainer({
       >
         {headerChildren}
       </Header>
-      <div className={cn(`flex h-[calc(100vh-3rem)] w-full flex-col`, isMobile ? "p-1 pt-0" : "p-2 pt-0 pl-0")}>
-        <div className="bg-background flex h-full w-full rounded-lg border p-0">
+      <div className={cn(`flex h-[calc(100vh-3rem)] w-full flex-col`, isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0")}>
+        {/* `min-h-0 flex-1`, NOT `h-full`: MobileNavigationBar below is an in-flow
+            sibling in this fixed-height flex column. `h-full` resolves to 100% of
+            the wrapper, leaving the bar no room and pushing it below the fold —
+            it then appears only after scrolling to the very end of the page. */}
+        <div className="bg-background flex min-h-0 w-full flex-1 rounded-lg border p-0">
           <div className="flex w-full flex-col">
             {(!fullWidth || forceHeader) && (
               <RoundPageContainerTitle
@@ -409,6 +418,7 @@ export function RoundPageContainer({
               </div>
             ))}
         </div>
+        <MobileNavigationBar />
       </div>
     </>
   );

package/src/components/navigations/MobileNavigationBar.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useMobileNavigationItems, type MobileNavigationItem } from "../../contexts/MobileNavigationContext";
+import { Link } from "../../shadcnui";
+import { cn } from "../../utils/cn";
+import { useIsMobile } from "../../utils/use-mobile";
+
+/**
+ * Active only for navigational slots.
+ *
+ * Exact-or-prefix, NOT a bare `startsWith`: the prefix arm keeps a detail route
+ * (/accounts/123) highlighting its section (/accounts).
+ *
+ * "/" is special-cased to EXACT match. Without that, its prefix arm degenerates
+ * to `pathname.startsWith("/")`, which is true for every route, and the Home
+ * slot highlights everywhere. This is pinned by a unit test in Task C.
+ */
+function isActiveHref(pathname: string, href: string): boolean {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+const slotClass = cn(
+  // min-h-12/min-w-12 = 48px touch target (Material/HIG guidance).
+  "relative flex min-h-12 min-w-12 flex-1 items-center justify-center",
+  "transition-colors",
+);
+
+function SlotContent({ item }: { item: MobileNavigationItem }) {
+  if (item.render) return <>{item.render}</>;
+  const Icon = item.icon;
+  return Icon ? <Icon className="size-6" /> : null;
+}
+
+/**
+ * The mobile bottom navigation bar.
+ *
+ * Renders nothing on desktop, and nothing when the application supplied no
+ * items — so page containers can render it unconditionally.
+ *
+ * Rendered as an in-flow flex sibling of the page content (NOT position:fixed),
+ * so the content column shrinks to fit and can never be hidden behind the bar.
+ */
+export function MobileNavigationBar() {
+  const items = useMobileNavigationItems();
+  const isMobile = useIsMobile();
+  const pathname = usePathname();
+
+  if (!isMobile || items.length === 0) return null;
+
+  // A detached surface sitting BELOW the page card with a gap, so it carries a
+  // rounded border rather than a `border-t`, which would read as if the bar were
+  // welded to the card's bottom edge. `bg-sidebar` deliberately matches the
+  // Header's own background so the two chrome edges of the viewport agree.
+  return (
+    <nav
+      aria-label="Primary"
+      data-testid="mobile-navigation-bar"
+      className="bg-sidebar flex w-full shrink-0 flex-row items-stretch rounded-lg border pb-[env(safe-area-inset-bottom)]"
+    >
+      {items.map((item) => {
+        const active = item.href ? isActiveHref(pathname, item.href) : false;
+        const tone = active ? "text-primary" : "text-muted-foreground";
+
+        const body = (
+          <>
+            {active && <span aria-hidden className="bg-primary absolute inset-x-0 top-0 h-0.5" />}
+            <SlotContent item={item} />
+          </>
+        );
+
+        return item.href ? (
+          <Link
+            key={item.key}
+            href={item.href}
+            aria-label={item.label}
+            aria-current={active ? "page" : undefined}
+            data-testid={`mobile-nav-${item.key}`}
+            className={cn(slotClass, tone)}
+          >
+            {body}
+          </Link>
+        ) : (
+          <button
+            key={item.key}
+            type="button"
+            onClick={item.onClick}
+            aria-label={item.label}
+            data-testid={`mobile-nav-${item.key}`}
+            className={cn(slotClass, tone)}
+          >
+            {body}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/navigations/__tests__/MobileNavigationBar.spec.tsx

@@ -0,0 +1,131 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { HomeIcon, SearchIcon } from "lucide-react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { MobileNavigationProvider, type MobileNavigationItem } from "../../../contexts/MobileNavigationContext";
+import { ViewportProvider } from "../../../contexts/ViewportContext";
+import { configureI18n } from "../../../i18n";
+import { MobileNavigationBar } from "../MobileNavigationBar";
+
+// usePathname is globally mocked to "/" in vitest.setup.ts. Override it here so
+// the active-state rule can be exercised against a real route. A spec-level
+// vi.mock takes precedence over the setup-file mock for this module.
+const pathnameRef = { current: "/" };
+vi.mock("next/navigation", () => ({
+  usePathname: () => pathnameRef.current,
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  useParams: () => ({}),
+  redirect: vi.fn(),
+  notFound: vi.fn(),
+}));
+
+beforeAll(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts:53-58).
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => pathnameRef.current,
+    Link: ({ href, children, ...rest }: { href: string; children: React.ReactNode; [key: string]: any }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+beforeEach(() => {
+  pathnameRef.current = "/";
+  // jsdom defaults to 1024; ViewportProvider's effect measures immediately and
+  // would otherwise overwrite the mobile seed with "desktop".
+  Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 375 });
+});
+
+function renderBar(items: MobileNavigationItem[], { mobile = true }: { mobile?: boolean } = {}) {
+  if (!mobile) {
+    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1024 });
+  }
+  return render(
+    <ViewportProvider initialIsMobile={mobile}>
+      <MobileNavigationProvider items={items}>
+        <MobileNavigationBar />
+      </MobileNavigationProvider>
+    </ViewportProvider>,
+  );
+}
+
+const searchItem: MobileNavigationItem = { key: "search", label: "Cerca", icon: SearchIcon, onClick: vi.fn() };
+const homeItem: MobileNavigationItem = { key: "home", label: "Dashboard", icon: HomeIcon, href: "/" };
+
+describe("MobileNavigationBar", () => {
+  it("renders nothing when the application supplied no items", () => {
+    renderBar([]);
+    expect(screen.queryByTestId("mobile-navigation-bar")).not.toBeInTheDocument();
+  });
+
+  it("renders nothing on desktop even when items exist", () => {
+    renderBar([searchItem], { mobile: false });
+    expect(screen.queryByTestId("mobile-navigation-bar")).not.toBeInTheDocument();
+  });
+
+  it("renders one slot per item, labelled by its accessible name", () => {
+    renderBar([searchItem, homeItem]);
+    expect(screen.getByTestId("mobile-navigation-bar")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cerca" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Dashboard" })).toBeInTheDocument();
+  });
+
+  it("does not render the label as visible text (icons-only bar)", () => {
+    renderBar([searchItem]);
+    expect(screen.queryByText("Cerca")).not.toBeInTheDocument();
+  });
+
+  it("fires onClick for action slots", async () => {
+    const onClick = vi.fn();
+    renderBar([{ ...searchItem, onClick }]);
+    await userEvent.click(screen.getByRole("button", { name: "Cerca" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("renders the `render` escape hatch instead of an icon", () => {
+    renderBar([
+      { key: "profile", label: "Impostazioni", render: <span data-testid="avatar-stub" />, href: "/settings" },
+    ]);
+    expect(screen.getByTestId("avatar-stub")).toBeInTheDocument();
+  });
+
+  // The load-bearing case: a bare startsWith would make href="/" match everything.
+  it("marks only the exactly-matching slot active when one href is '/'", () => {
+    pathnameRef.current = "/conversations";
+    renderBar([homeItem, { key: "ai", label: "Chiedi all'AI", icon: SearchIcon, href: "/conversations" }]);
+    expect(screen.getByRole("link", { name: "Dashboard" })).not.toHaveAttribute("aria-current");
+    expect(screen.getByRole("link", { name: "Chiedi all'AI" })).toHaveAttribute("aria-current", "page");
+  });
+
+  it("keeps a section active on its detail route", () => {
+    pathnameRef.current = "/conversations/abc-123";
+    renderBar([{ key: "ai", label: "Chiedi all'AI", icon: SearchIcon, href: "/conversations" }]);
+    expect(screen.getByRole("link", { name: "Chiedi all'AI" })).toHaveAttribute("aria-current", "page");
+  });
+
+  it("never marks an action slot active", () => {
+    pathnameRef.current = "/";
+    renderBar([searchItem]);
+    expect(screen.getByRole("button", { name: "Cerca" })).not.toHaveAttribute("aria-current");
+  });
+});

package/src/components/navigations/index.ts

@@ -1,6 +1,7 @@
 export * from "./Breadcrumb";
 export * from "./ContentTitle";
 export * from "./Header";
+export * from "./MobileNavigationBar";
 export * from "./ModeToggleSwitch";
 export * from "./PageSection";
 export * from "./RecentPagesNavigator";

package/src/contexts/MobileNavigationContext.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+
+/**
+ * One slot in the mobile bottom navigation bar.
+ *
+ * Supply exactly one of `icon` / `render`, and exactly one of `href` / `onClick`.
+ * This is a review-time contract, not a runtime-validated one — the mistake is
+ * immediately visible in dev, and validation code would ship to every consumer.
+ *
+ * `render` content MUST NOT contain an interactive element: an `href` slot is
+ * already wrapped in a <Link>, so a nested <a>/<button> is invalid HTML and
+ * triggers a hydration error.
+ */
+export type MobileNavigationItem = {
+  /** Stable unique key. Used as the React key and the `data-testid` suffix. */
+  key: string;
+  /** Accessible name. The bar is icons-only, so this is never rendered as text. */
+  label: string;
+  /** Rendered at 24px. Mutually exclusive with `render`. */
+  icon?: LucideIcon;
+  /** Escape hatch for slots an icon cannot express (logo mark, user avatar). */
+  render?: ReactNode;
+  /** Navigational slot — receives the active highlight. */
+  href?: string;
+  /** Action slot — never highlighted. */
+  onClick?: () => void;
+};
+
+/**
+ * A plain module-scope context, mirroring the sibling `HeaderChildrenContext`.
+ *
+ * The `globalThis`-Symbol lazy-creation dance in `utils/use-mobile.tsx` is NOT
+ * needed here: that exists for the `core` entry, which is deliberately excluded
+ * from tsup's `clientEntries` and is reachable from server code. Provider (the
+ * `contexts` entry) and consumer (the `components` entry) share one context
+ * object, exactly as `HeaderChildrenContext` already does in production.
+ */
+const MobileNavigationContext = React.createContext<MobileNavigationItem[]>([]);
+
+/**
+ * Supplies the items rendered by `MobileNavigationBar`.
+ *
+ * Unlike `useSharedContext`, the hook below does NOT throw without a provider —
+ * it returns `[]` and the bar renders nothing. Apps that never install this
+ * provider are completely unaffected.
+ *
+ * MUST be rendered inside `ViewportProvider` so the bar's `useIsMobile()` reads
+ * the server-seeded viewport rather than flashing.
+ */
+export function MobileNavigationProvider({ children, items }: { children: ReactNode; items: MobileNavigationItem[] }) {
+  // Items are rebuilt on every render of the app-side provider (it depends on
+  // hooks); memoising on the array identity keeps consumers from re-rendering
+  // more than the parent already does.
+  const value = React.useMemo(() => items, [items]);
+
+  return <MobileNavigationContext.Provider value={value}>{children}</MobileNavigationContext.Provider>;
+}
+
+/** Returns the application-supplied bottom-navigation items, or `[]` when none. */
+export function useMobileNavigationItems(): MobileNavigationItem[] {
+  return React.useContext(MobileNavigationContext);
+}

package/src/contexts/index.ts

@@ -10,6 +10,7 @@ export * from "./CommonContext";
 export * from "./HeaderChildrenContext";
 export * from "./HeaderLeftContentContext";
 export * from "./HeaderLogoContext";
+export * from "./MobileNavigationContext";
 export * from "./SharedContext";
 export * from "./SocketContext";
 export * from "./ViewportContext";

package/src/features/assistant/components/parts/AssistantEmptyState.tsx

@@ -43,7 +43,7 @@ export function AssistantEmptyState({ onSend, operatorMode = false, onOperatorMo
               checked={operatorMode}
               onCheckedChange={(checked) => onOperatorModeChange(checked === true)}
             />
-            <Label htmlFor="assistant-operator-mode" className="text-muted-foreground text-xs">
+            <Label htmlFor="assistant-operator-mode" className="text-muted-foreground cursor-pointer text-xs">
               {t("features.assistant.operator_mode")}
             </Label>
           </div>

package/src/features/billing/stripe-customer/components/forms/PaymentMethodForm.tsx

@@ -132,7 +132,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       {/* Set as Default Checkbox */}
       <div className="flex items-center gap-x-2">
         <Checkbox id="setAsDefault" checked={setAsDefault} onCheckedChange={(checked) => setSetAsDefault(!!checked)} />
-        <Label htmlFor="setAsDefault" className="font-normal">
+        <Label htmlFor="setAsDefault" className="cursor-pointer font-normal">
           Set as default payment method
         </Label>
       </div>