@publish.os/nextjs 0.0.1-alpha.8 → 0.0.1-alpha.90

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 { Sidebar } from "@publish.os/nextjs/kernel/components/blocks/sidebar";
 import { ThemeToggle } from "@publish.os/nextjs/kernel/components/blocks/theme-toggle";
+import { Button as Button2 } from "@publish.os/nextjs/kernel/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerViewport
+} from "@publish.os/nextjs/kernel/components/ui/drawer";
+import { Link as Link3 } from "@publish.os/nextjs/kernel/components/ui/link";
+import { ScrollArea as ScrollArea2 } from "@publish.os/nextjs/kernel/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 { useEffect, useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/block/navbar/group-navigation.tsx
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
 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 {
+  Menu,
+  MenuLinkItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger
+} from "@publish.os/nextjs/kernel/components/ui/menu";
+import { CaretDownIcon } from "@phosphor-icons/react/ssr";
 import NextLink from "next/link";
-import { usePathname } from "next/navigation";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function hasPath(node) {
-  return "path" in node && typeof node.path == "string";
+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: "data-[state=path-active]:text-foreground-1 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 "@publish.os/nextjs/kernel/components/ui/link";
+import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/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 "react/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-playground.js

@@ -234,7 +234,7 @@ function OriginControl({
       "button",
       {
         className: cn(
-          "h-7 rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
+          "h-7 rounded-[max(calc(var(--radius-button)-0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
           origin === value && "bg-surface-1 text-foreground-1 shadow-sm"
         ),
         onClick: () => onChange(origin),
@@ -346,7 +346,7 @@ function NavigationProgressPlayground() {
   return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-surface-page text-foreground-1", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-screen lg:grid-cols-[1fr_23rem]", children: [
     /* @__PURE__ */ jsxs("main", { className: "relative min-h-screen overflow-hidden", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute left-5 top-5 text-sm font-medium text-foreground-4", children: "Inline" }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center px-8 py-20", children: /* @__PURE__ */ jsxs("section", { className: "border-shadow-3 relative flex h-[15rem] w-full max-w-4xl flex-col items-center justify-center overflow-hidden bg-surface-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center px-8 py-20", children: /* @__PURE__ */ jsxs("section", { className: "border-shadow-3 relative flex h-60 w-full max-w-4xl flex-col items-center justify-center overflow-hidden bg-surface-1", children: [
         /* @__PURE__ */ jsx(
           ProgressPreview,
           {
@@ -378,7 +378,7 @@ function NavigationProgressPlayground() {
           "button",
           {
             className: cn(
-              "h-8 rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
+              "h-8 rounded-[max(calc(var(--radius-button)-0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
               activePreset === preset && "bg-surface-1 text-foreground-1 shadow-sm"
             ),
             onClick: () => applyPreset(preset),
@@ -612,7 +612,7 @@ function NavigationProgressPlayground() {
             /* @__PURE__ */ jsx(
               "textarea",
               {
-                className: "min-h-[26rem] resize-none rounded-panel border border-stroke-2 bg-surface-2 p-3 font-mono text-xs leading-5 text-foreground-1 outline-none focus:border-accent-1",
+                className: "min-h-104 resize-none rounded-panel border border-stroke-2 bg-surface-2 p-3 font-mono text-xs leading-5 text-foreground-1 outline-none focus:border-accent-1",
                 readOnly: !0,
                 value: output
               }

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

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/block/navigation/navigation-progress.tsx
+// src/components/block/navigation-progress.tsx
 import {
   Progress,
   ProgressIndicator,
@@ -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;

package/dist/kernel/components/blocks/next-prev.js

@@ -1,20 +1,17 @@
-// src/components/block/navigation/next-prev.tsx
-import {
-  FrameworkChevronLeftIcon as ChevronLeft,
-  FrameworkChevronRightIcon as ChevronRight
-} from "@publish.os/nextjs/kernel/framework-icons";
+// src/components/block/page-navigation/next-prev.tsx
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import NextLink from "next/link";
 
-// src/components/block/navigation/page-nodes.ts
+// src/components/block/page-navigation/page-nodes.ts
 function pageNodes(nodes) {
   return nodes.flatMap((node) => node.type === "page" ? [node] : node.type === "section" || node.type === "folder" ? pageNodes(node.children) : []);
 }
 
-// src/components/block/navigation/next-prev.tsx
+// src/components/block/page-navigation/next-prev.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function DirectionIcon({ direction }) {
-  return /* @__PURE__ */ jsx("span", { className: "shrink-0 text-foreground-3 transition-colors duration-200 group-hover/next-prev:text-foreground-2", children: direction === "previous" ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", size: 14 }) });
+  return /* @__PURE__ */ jsx("span", { className: "shrink-0 text-foreground-3 transition-colors duration-200 group-hover/next-prev:text-foreground-2", children: direction === "previous" ? /* @__PURE__ */ jsx(CaretLeftIcon, { "aria-hidden": "true", size: 14 }) : /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", size: 14 }) });
 }
 function NavigationCard({
   direction,
@@ -25,10 +22,10 @@ function NavigationCard({
     NextLink,
     {
       className: cn(
-        "group/next-prev grid min-h-24 w-full min-w-0 overflow-hidden rounded-card border border-stroke-3 bg-surface-1 p-px text-left text-foreground-1 no-underline shadow-xs transition-[border-color,box-shadow] duration-200 hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke [&_*]:!no-underline",
+        "group/next-prev grid min-h-24 w-full min-w-0 overflow-hidden rounded-card border border-stroke-3 bg-surface-1 p-px text-left text-foreground-1 no-underline shadow-xs transition-[border-color,box-shadow] duration-200 hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke **:no-underline!",
         isNext && "md:text-right"
       ),
-      href: page.path,
+      href: page.href ?? page.path,
       children: /* @__PURE__ */ jsxs(
         "span",
         {
@@ -60,19 +57,10 @@ function NavigationCard({
 }
 function NextPrev({ className, currentPath, tree }) {
   let pages = pageNodes(tree), index = pages.findIndex((page) => page.path === currentPath), previous = index > 0 ? pages[index - 1] : null, next = index >= 0 ? pages[index + 1] : null, hasBoth = !!(previous && next);
-  return !previous && !next ? null : /* @__PURE__ */ jsx("nav", { "aria-label": "Previous and next pages", className, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "grid gap-4 border-t border-stroke-3 pt-6",
-        hasBoth && "md:grid-cols-2"
-      ),
-      children: [
-        previous ? /* @__PURE__ */ jsx(NavigationCard, { direction: "previous", page: previous }) : null,
-        next ? /* @__PURE__ */ jsx(NavigationCard, { direction: "next", page: next }) : null
-      ]
-    }
-  ) });
+  return !previous && !next ? null : /* @__PURE__ */ jsx("nav", { "aria-label": "Previous and next pages", className, children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 pt-6", hasBoth && "md:grid-cols-2"), children: [
+    previous ? /* @__PURE__ */ jsx(NavigationCard, { direction: "previous", page: previous }) : null,
+    next ? /* @__PURE__ */ jsx(NavigationCard, { direction: "next", page: next }) : null
+  ] }) });
 }
 export {
   NextPrev

package/dist/kernel/components/blocks/page-list.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 PageListProps = {
     tree: TreeNode[];