@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.91

package/dist/kernel/components/blocks/nav-breadcrumb.js

@@ -1,6 +1,6 @@
-// src/components/block/navigation/nav-breadcrumb.tsx
-import { CollapsibleBreadcrumbTrail } from "@publish.os/nextjs/kernel/components/ui/breadcrumb-trail";
-import { jsx } from "react/jsx-runtime";
+// src/components/block/navbar/nav-breadcrumb.tsx
+import { CollapsibleBreadcrumbTrail } from "@components/ui/breadcrumb-trail";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function titleFor(node) {
   return node.title;
 }
@@ -15,7 +15,14 @@ function rankFor(node) {
 function findCrumbs(nodes, pathname, parents = []) {
   let matches = [];
   for (let node of nodes) {
-    let path = pathFor(node), nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
+    let path = pathFor(node), nextParents = path ? [
+      ...parents,
+      {
+        title: titleFor(node),
+        path,
+        href: "href" in node && typeof node.href == "string" ? node.href : path
+      }
+    ] : parents;
     if (path === pathname && matches.push({
       crumbs: nextParents.map((crumb, index) => ({
         ...crumb,
@@ -38,13 +45,20 @@ function groupFallback(tree, pathname) {
   ).sort((a, b) => b.path.length - a.path.length);
   for (let { group, path } of groups)
     if (pathname.startsWith(`${path}/`))
-      return [{ title: titleFor(group), path }];
+      return [
+        {
+          title: titleFor(group),
+          path,
+          href: "href" in group && typeof group.href == "string" ? group.href : path
+        }
+      ];
   return [];
 }
 function buildCrumbs(site, tree, pathname) {
   let root = {
     title: site.name,
     path: "/",
+    href: "/",
     current: pathname === "/"
   };
   if (pathname === "/") return [root];
@@ -60,15 +74,16 @@ function buildCrumbs(site, tree, pathname) {
 function NavBreadcrumb({
   currentPath = "/",
   showRoot = !0,
+  size = "sm",
   site,
   tree
 }) {
   let crumbs = buildCrumbs(site, tree, currentPath), items = (showRoot ? crumbs : crumbs.slice(1)).map((crumb) => ({
     current: crumb.current,
-    href: crumb.path,
+    href: crumb.href,
     title: crumb.title
   }));
-  return items.length === 0 ? null : /* @__PURE__ */ jsx(CollapsibleBreadcrumbTrail, { items, size: "sm" });
+  return items.length === 0 ? null : /* @__PURE__ */ jsx(CollapsibleBreadcrumbTrail, { items, size });
 }
 export {
   NavBreadcrumb

package/dist/kernel/components/blocks/navbar.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LogoBlockLogo, LogoBlockAsset } from './logo-block.js';
-import { S as SiteData, T as TreeNode } from '../../../types-B_b3C0U6.js';
+import { S as SiteData, T as TreeNode } from '../../../types-CUtrppxt.js';
 
 type NavbarProps = {
     logo?: NavbarLogo;
@@ -11,6 +11,6 @@ type NavbarProps = {
 };
 type NavbarLogoAsset = LogoBlockAsset;
 type NavbarLogo = LogoBlockLogo;
-declare function Navbar({ logo, site, siteTitle, showThemeToggle, tree, }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Navbar({ logo, showThemeToggle, site, siteTitle, tree, }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 export { Navbar, type NavbarLogo, type NavbarLogoAsset };

package/dist/kernel/components/blocks/navbar.js

@@ -1,95 +1,436 @@
 "use client";
 
-// src/components/block/navigation/navbar.tsx
+// src/components/block/navbar/navbar.tsx
 import {
   LogoBlock
-} from "@publish.os/nextjs/kernel/components/blocks/logo-block";
-import { NavBreadcrumb } from "@publish.os/nextjs/kernel/components/blocks/nav-breadcrumb";
-import { Search } from "@publish.os/nextjs/kernel/components/blocks/search";
-import { ThemeToggle } from "@publish.os/nextjs/kernel/components/blocks/theme-toggle";
-import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
-import { FrameworkArrowRightIcon as ArrowRight } from "@publish.os/nextjs/kernel/framework-icons";
-import { cn } from "@publish.os/nextjs/utils/cn";
-import NextLink from "next/link";
+} from "@components/blocks/logo-block";
+import { Search } from "@components/blocks/search";
+import { Sidebar } from "@components/blocks/sidebar";
+import { ThemeToggle } from "@components/blocks/theme-toggle";
+import { Button as Button2 } from "@components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerViewport
+} from "@components/ui/drawer";
+import { Link as Link3 } from "@components/ui/link";
+import { ScrollArea as ScrollArea2 } from "@components/ui/scroll-area";
+import {
+  ArrowRightIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+  ListIcon,
+  XIcon
+} from "@phosphor-icons/react/ssr";
+import NextLink2 from "next/link";
 import { usePathname } from "next/navigation";
-import { jsx, jsxs } from "react/jsx-runtime";
-function hasPath(node) {
-  return "path" in node && typeof node.path == "string";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/block/navbar/group-navigation.tsx
+import { Button } from "@components/ui/button";
+import { Link } from "@components/ui/link";
+import {
+  Menu,
+  MenuLinkItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger
+} from "@components/ui/menu";
+import { CaretDownIcon } from "@phosphor-icons/react/ssr";
+import NextLink from "next/link";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+function GroupNavigation({
+  currentPath,
+  tree
+}) {
+  let groups = tree.filter(
+    (node) => node.type === "section" && typeof node.path == "string" && typeof node.group == "string"
+  ), activeGroup = groups.filter(
+    ({ path }) => currentPath === path || currentPath.startsWith(path === "/" ? "/" : `${path}/`)
+  ).reduce(
+    (active, group) => !active || group.path.length > active.path.length ? group : active,
+    void 0
+  ), navRef = useRef(null), linksRef = useRef(null), [overflow, setOverflow] = useState(!1), hasGroups = groups.length > 1;
+  if (useLayoutEffect(() => {
+    if (!hasGroups) return;
+    let nav = navRef.current, links = linksRef.current, win = nav?.ownerDocument.defaultView;
+    if (!nav || !links || !win?.ResizeObserver) return;
+    let measure = () => {
+      nav.clientWidth > 0 && setOverflow(links.getBoundingClientRect().width > nav.clientWidth - 4);
+    }, observer = new win.ResizeObserver(measure);
+    return observer.observe(nav), observer.observe(links), measure(), () => observer.disconnect();
+  }, [hasGroups]), !hasGroups) return null;
+  let isActive = (path) => activeGroup?.path === path;
+  return /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 flex-1 items-center gap-4 md:flex", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-4 w-px shrink-0 bg-stroke-3" }),
+    /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "Site groups",
+        className: "relative -m-0.5 min-w-0 flex-1 overflow-hidden p-0.5",
+        ref: navRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              "aria-hidden": overflow || void 0,
+              className: `flex w-max items-center gap-1 ${overflow ? "pointer-events-none invisible absolute top-0" : ""}`,
+              inert: overflow || void 0,
+              ref: linksRef,
+              children: groups.map((group) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Link,
+                {
+                  active: isActive(group.path),
+                  "aria-current": isActive(group.path) ? "location" : void 0,
+                  className: "pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+                  href: group.href ?? group.path,
+                  size: "xs",
+                  target: "_self",
+                  variant: "button.ghost",
+                  children: group.title
+                }
+              ) }, group.id))
+            }
+          ),
+          overflow ? /* @__PURE__ */ jsxs(Menu, { children: [
+            /* @__PURE__ */ jsx(
+              MenuTrigger,
+              {
+                "aria-label": "Browse site groups",
+                render: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: "pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+                    rightIcon: /* @__PURE__ */ jsx(CaretDownIcon, { "aria-hidden": "true" }),
+                    size: "xs",
+                    variant: "ghost"
+                  }
+                ),
+                children: "Browse"
+              }
+            ),
+            /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { align: "start", children: /* @__PURE__ */ jsx(MenuPopup, { className: "max-w-[min(24rem,calc(100vw-2rem))]", children: groups.map((group) => /* @__PURE__ */ jsx(
+              MenuLinkItem,
+              {
+                "aria-current": isActive(group.path) ? "location" : void 0,
+                className: "whitespace-normal break-words pointer-coarse:min-h-11",
+                render: /* @__PURE__ */ jsx(NextLink, { href: group.href ?? group.path }),
+                children: group.title
+              },
+              group.id
+            )) }) }) })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/block/navbar/mobile-navigation-tree.tsx
+import { Link as Link2 } from "@components/ui/link";
+import { ScrollArea } from "@components/ui/scroll-area";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "@publish.os/nextjs/jsx-runtime";
+function MobileNavigationTree({
+  currentPath,
+  indexCurrentPath,
+  indexPath,
+  title,
+  tree
+}) {
+  return /* @__PURE__ */ jsx2(
+    ScrollArea,
+    {
+      className: "min-h-0 flex-1 rounded-none",
+      viewportClassName: "overscroll-contain",
+      children: /* @__PURE__ */ jsxs2("nav", { "aria-label": `${title} pages`, className: "px-4 py-5", children: [
+        /* @__PURE__ */ jsx2("p", { className: "mb-3 wrap-break-word px-3 text-base leading-6 text-foreground-3", children: title }),
+        tree.length > 0 ? /* @__PURE__ */ jsx2(PageList, { currentPath, tree }) : /* @__PURE__ */ jsx2(
+          PageLink,
+          {
+            currentPath,
+            href: indexPath,
+            activePath: indexCurrentPath,
+            sameTab: !0,
+            title: "Overview"
+          }
+        )
+      ] })
+    }
+  );
+}
+function PageList({
+  currentPath,
+  tree
+}) {
+  return /* @__PURE__ */ jsx2("ul", { className: "space-y-1", children: tree.map((node) => /* @__PURE__ */ jsx2(
+    "li",
+    {
+      className: node.type === "section" || node.type === "folder" ? "pt-5 first:pt-0" : void 0,
+      children: node.type === "page" || node.type === "link" ? /* @__PURE__ */ jsx2(
+        PageLink,
+        {
+          currentPath,
+          href: node.type === "page" ? node.href ?? node.path : node.href,
+          activePath: node.type === "page" ? node.path : void 0,
+          sameTab: node.type === "page",
+          title: node.title
+        }
+      ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("p", { className: "mb-2 wrap-break-word px-3 text-base leading-6 text-foreground-3", children: node.title }),
+        /* @__PURE__ */ jsx2(PageList, { currentPath, tree: node.children })
+      ] })
+    },
+    node.type === "page" ? node.fileID : node.id
+  )) });
 }
-function isTopLevelGroup(node) {
-  return node.type === "section" && typeof node.group == "string" && !node.group.includes("/");
+function PageLink({
+  currentPath,
+  href,
+  activePath,
+  sameTab = !1,
+  title
+}) {
+  return /* @__PURE__ */ jsx2(
+    Link2,
+    {
+      active: currentPath === (activePath ?? href),
+      className: "h-auto min-h-14 w-full min-w-0 justify-start whitespace-normal px-3 py-3 text-start text-lg font-medium leading-normal text-foreground-1",
+      href,
+      target: sameTab ? "_self" : void 0,
+      size: "lg",
+      variant: "button.ghost",
+      children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 wrap-break-word", children: title })
+    }
+  );
 }
+
+// src/components/block/navbar/navbar.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "@publish.os/nextjs/jsx-runtime";
 function Navbar({
   logo,
+  showThemeToggle = !0,
   site,
   siteTitle,
-  showThemeToggle = !0,
   tree
 }) {
-  let pathname = usePathname() || "/", headerSite = site ?? { name: siteTitle ?? "Site" }, groups = tree.filter(hasPath).filter(isTopLevelGroup), activeGroupPath = groups.map((group) => group.path).filter((path) => pathname === path || pathname.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
-  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-nav border-b border-stroke-3 bg-surface-2 [anchor-name:--global-navbar]", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-h-[var(--layout-global-nav-height)] w-full max-w-(--layout-site-max-width) flex-col gap-3 border-x border-stroke-3 px-5 py-3 md:flex-row md:items-center md:gap-4 md:py-2 lg:px-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-      /* @__PURE__ */ jsx(
-        NextLink,
-        {
-          "aria-label": `${headerSite.name} home`,
-          className: "inline-flex h-8 shrink-0 items-center text-sm font-semibold text-foreground-1 transition-colors hover:text-accent-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-1",
-          href: "/",
-          children: /* @__PURE__ */ jsx(LogoBlock, { logo, siteName: headerSite.name })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "hidden h-4 w-px shrink-0 bg-stroke-3 md:block" }),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
-        NavBreadcrumb,
-        {
-          currentPath: pathname,
-          showRoot: !1,
-          site: headerSite,
-          tree
-        }
-      ) })
+  let pathname = usePathname() || "/", headerSite = site ?? { name: siteTitle ?? "Site" };
+  return /* @__PURE__ */ jsx3("header", { className: "sticky top-0 z-nav border-b border-stroke-3 bg-surface-2 [anchor-name:--global-navbar]", children: /* @__PURE__ */ jsxs3(NavbarFrame, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+      /* @__PURE__ */ jsx3(HomeLink, { logo, siteName: headerSite.name }),
+      /* @__PURE__ */ jsx3(GroupNavigation, { currentPath: pathname, tree })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2", children: [
-      groups.length > 0 ? /* @__PURE__ */ jsx(
-        "nav",
+    /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1 md:gap-2", children: [
+      /* @__PURE__ */ jsxs3(Search.Root, { children: [
+        /* @__PURE__ */ jsx3(Search.Trigger, { className: "max-md:size-11 max-md:border-transparent max-md:p-0 max-md:[&_svg]:size-5 pointer-coarse:md:min-h-11" }),
+        /* @__PURE__ */ jsx3(Search.Dialog, {})
+      ] }),
+      showThemeToggle ? /* @__PURE__ */ jsx3(
+        ThemeToggle,
         {
-          "aria-label": "Groups",
-          className: "flex min-w-0 flex-wrap items-center gap-2 text-sm",
-          children: groups.map((group) => {
-            let path = group.path, active = path === activeGroupPath;
-            return /* @__PURE__ */ jsx(
-              Link,
-              {
-                active,
-                className: cn(
-                  "px-1 text-foreground-2",
-                  active && "text-foreground-1"
-                ),
-                href: path,
-                size: "sm",
-                variant: "link.standalone",
-                children: group.title
-              },
-              group.type === "page" ? group.fileID : group.id
-            );
-          })
+          className: "hidden md:inline-flex pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+          size: "sm",
+          variant: "ghost"
         }
       ) : null,
-      /* @__PURE__ */ jsx(Search.DefaultDesktop, {}),
-      /* @__PURE__ */ jsx(
-        Link,
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "mx-2 hidden h-4 w-px bg-stroke-3 md:block"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Link3,
         {
+          className: "hidden md:inline-flex pointer-coarse:min-h-11",
           href: "/",
-          rightIcon: /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", size: 14 }),
+          prefetch: !1,
+          rightIcon: /* @__PURE__ */ jsx3(ArrowRightIcon, { "aria-hidden": "true", size: 14 }),
           size: "sm",
           variant: "button.solid",
           children: "Start"
         }
       ),
-      showThemeToggle ? /* @__PURE__ */ jsx(ThemeToggle, {}) : null
+      /* @__PURE__ */ jsx3(
+        MobileNavigation,
+        {
+          currentPath: pathname,
+          logo,
+          showThemeToggle,
+          siteName: headerSite.name,
+          tree
+        },
+        pathname
+      )
     ] })
   ] }) });
 }
+function NavbarFrame({ children }) {
+  return /* @__PURE__ */ jsx3("div", { className: "mx-auto flex min-h-(--layout-global-nav-height) w-full max-w-(--layout-site-max-width) items-center gap-3 border-x border-stroke-3 px-4 py-2 md:gap-4 md:px-5 lg:px-6", children });
+}
+function HomeLink({ logo, siteName }) {
+  return /* @__PURE__ */ jsx3(
+    NextLink2,
+    {
+      "aria-label": `${siteName} home`,
+      className: "inline-flex min-w-0 items-center py-1.5 text-sm font-semibold leading-5 text-foreground-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke md:max-w-32 md:shrink-0 lg:max-w-48 pointer-coarse:min-h-11",
+      href: "/",
+      prefetch: !1,
+      title: siteName,
+      children: /* @__PURE__ */ jsx3("span", { className: "block min-w-0 truncate", children: /* @__PURE__ */ jsx3(LogoBlock, { logo, maxHeight: 20, siteName }) })
+    }
+  );
+}
+function MobileNavigation({
+  currentPath,
+  logo,
+  showThemeToggle,
+  siteName,
+  tree
+}) {
+  let [open, setOpen] = useState2(!1), [selectedGroupId, setSelectedGroupId] = useState2(null), triggerRef = useRef2(null), closeRef = useRef2(null), backRef = useRef2(null), returnGroupIdRef = useRef2(null), groupButtonRefs = useRef2(/* @__PURE__ */ new Map()), groups = tree.filter(
+    (node) => node.type === "section" && typeof node.path == "string" && typeof node.group == "string"
+  ), selectedGroup = groups.find((group) => group.id === selectedGroupId), changeOpen = (nextOpen) => {
+    setOpen(nextOpen), nextOpen || (setSelectedGroupId(null), returnGroupIdRef.current = null);
+  };
+  return useEffect(() => {
+    if (!open) return;
+    (selectedGroupId ? backRef.current : groupButtonRefs.current.get(returnGroupIdRef.current ?? ""))?.focus({ preventScroll: !0 });
+  }, [open, selectedGroupId]), useEffect(() => {
+    let win = triggerRef.current?.ownerDocument.defaultView;
+    if (!win) return;
+    let desktop = win.matchMedia("(min-width: 768px)"), closeOnDesktop = () => {
+      desktop.matches && (setOpen(!1), setSelectedGroupId(null), returnGroupIdRef.current = null);
+    };
+    return desktop.addEventListener("change", closeOnDesktop), () => desktop.removeEventListener("change", closeOnDesktop);
+  }, []), /* @__PURE__ */ jsxs3(Drawer, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx3(
+      DrawerTrigger,
+      {
+        "aria-label": "Open navigation",
+        className: "md:hidden",
+        ref: triggerRef,
+        render: /* @__PURE__ */ jsx3(Button2, { iconOnly: !0, size: "lg", variant: "ghost" }),
+        children: /* @__PURE__ */ jsx3(ListIcon, { "aria-hidden": "true", className: "size-5!" })
+      }
+    ),
+    /* @__PURE__ */ jsx3(DrawerPortal, { children: /* @__PURE__ */ jsx3(DrawerViewport, { children: /* @__PURE__ */ jsxs3(
+      DrawerPopup,
+      {
+        className: "animate-mobile-navigation inset-0 flex w-full max-w-none flex-col overflow-hidden border-0 bg-surface-2 p-0 pb-[env(safe-area-inset-bottom)] shadow-none",
+        initialFocus: closeRef,
+        finalFocus: triggerRef,
+        onClick: (event) => {
+          let link = event.target.closest("a[href]");
+          link && link.getAttribute("target") !== "_blank" && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && changeOpen(!1);
+        },
+        children: [
+          /* @__PURE__ */ jsxs3(DrawerTitle, { className: "sr-only", children: [
+            selectedGroup ? selectedGroup.title : siteName,
+            " navigation"
+          ] }),
+          /* @__PURE__ */ jsx3(DrawerDescription, { className: "sr-only", children: "Browse pages and site controls." }),
+          /* @__PURE__ */ jsx3("header", { className: "shrink-0 border-b border-stroke-3", children: /* @__PURE__ */ jsxs3(NavbarFrame, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center", children: /* @__PURE__ */ jsx3(HomeLink, { logo, siteName }) }),
+            /* @__PURE__ */ jsx3(
+              DrawerClose,
+              {
+                "aria-label": "Close navigation",
+                className: "size-11",
+                ref: closeRef,
+                render: /* @__PURE__ */ jsx3(Button2, { iconOnly: !0, size: "lg", variant: "ghost" }),
+                children: /* @__PURE__ */ jsx3(XIcon, { "aria-hidden": "true", className: "size-5!" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx3("div", { className: "flex min-h-0 flex-1 flex-col", children: selectedGroup ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 items-center justify-between gap-4 border-b border-stroke-3 px-4 py-2", children: /* @__PURE__ */ jsx3(
+              Button2,
+              {
+                className: "h-auto min-h-11 px-2 py-2 text-base text-accent-1 hover:not-data-disabled:text-accent-1",
+                leftIcon: /* @__PURE__ */ jsx3(
+                  CaretLeftIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: "rtl:rotate-180"
+                  }
+                ),
+                onClick: () => setSelectedGroupId(null),
+                ref: backRef,
+                size: "lg",
+                variant: "ghost",
+                children: "Back"
+              }
+            ) }),
+            /* @__PURE__ */ jsx3(
+              MobileNavigationTree,
+              {
+                currentPath,
+                indexPath: selectedGroup.href ?? selectedGroup.path,
+                indexCurrentPath: selectedGroup.path,
+                title: selectedGroup.title,
+                tree: selectedGroup.children
+              }
+            )
+          ] }) : groups.length > 0 ? /* @__PURE__ */ jsx3(
+            ScrollArea2,
+            {
+              className: "min-h-0 flex-1",
+              viewportClassName: "overscroll-contain",
+              children: /* @__PURE__ */ jsx3("nav", { "aria-label": "Navigation groups", className: "px-4 py-4", children: /* @__PURE__ */ jsx3("ul", { className: "space-y-1", children: groups.map((group) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+                Button2,
+                {
+                  className: "h-auto min-h-12 w-full justify-between whitespace-normal px-3 py-3 text-start text-lg",
+                  onClick: () => {
+                    returnGroupIdRef.current = group.id, setSelectedGroupId(group.id);
+                  },
+                  ref: (button) => {
+                    button ? groupButtonRefs.current.set(group.id, button) : groupButtonRefs.current.delete(group.id);
+                  },
+                  rightIcon: /* @__PURE__ */ jsx3(CaretRightIcon, { "aria-hidden": "true" }),
+                  size: "lg",
+                  variant: "ghost",
+                  children: /* @__PURE__ */ jsx3("span", { className: "min-w-0 wrap-break-word", children: group.title })
+                }
+              ) }, group.id)) }) })
+            }
+          ) : /* @__PURE__ */ jsx3(
+            Sidebar,
+            {
+              className: "w-full min-w-0 max-w-none",
+              currentPath,
+              tree
+            }
+          ) }),
+          selectedGroup ? null : /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 flex-col gap-4 border-t border-stroke-3 px-4 py-4", children: [
+            showThemeToggle ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-3 text-sm text-foreground-2", children: [
+              /* @__PURE__ */ jsx3("span", { children: "Theme" }),
+              /* @__PURE__ */ jsx3(ThemeToggle, { size: "lg", variant: "ghost" })
+            ] }) : null,
+            /* @__PURE__ */ jsx3(
+              Link3,
+              {
+                href: "/",
+                prefetch: !1,
+                rightIcon: /* @__PURE__ */ jsx3(ArrowRightIcon, { "aria-hidden": "true", size: 16 }),
+                size: "lg",
+                variant: "button.solid",
+                children: "Start"
+              }
+            )
+          ] })
+        ]
+      }
+    ) }) })
+  ] });
+}
 export {
   Navbar
 };

package/dist/kernel/components/blocks/navigation-progress.js

@@ -1,15 +1,15 @@
 "use client";
 
-// src/components/block/navigation/navigation-progress.tsx
+// src/components/block/navigation-progress.tsx
 import {
   Progress,
   ProgressIndicator,
   ProgressTrack
-} from "@publish.os/nextjs/kernel/components/ui/progress";
+} from "@components/ui/progress";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 var navigationProgressConfig = {
   initialProgress: 0,
   targetProgress: 98,
@@ -111,6 +111,7 @@ function NavigationProgressContent() {
     Progress,
     {
       "aria-label": "Page navigation",
+      "aria-hidden": !isVisible,
       className: cn(
         "pointer-events-none fixed left-0 right-0 top-0 z-progress overflow-hidden transition-opacity duration-300",
         isVisible ? "opacity-100" : "opacity-0"
@@ -127,6 +128,8 @@ function NavigationProgressContent() {
             progress === 0 && "scale-x-0"
           ),
           style: {
+            // Keep Base UI's percentage width from multiplying the animated scale.
+            width: "100%",
             transform: isExiting ? "scaleX(0)" : `scaleX(${Math.max(0, Math.min(100, progress)) / 100})`,
             transformOrigin: isExiting ? "right" : "left",
             transition: isExiting ? `transform ${navigationProgressConfig.exitDuration}ms var(--animation-ease-progress-exit)` : `transform ${navigationProgressConfig.completeDuration}ms var(--animation-ease-progress)`

package/dist/kernel/components/blocks/next-prev.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TreeNode } from '../../../types-DHBm7-j6.js';
+import { T as TreeNode } from '../../../types-CUtrppxt.js';
 
 type NextPrevProps = {
     className?: string;