@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/blocks/logo-block.cjs

@@ -0,0 +1,156 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/logo-block.tsx
+var logo_block_exports = {};
+__export(logo_block_exports, {
+  LogoBlock: () => LogoBlock
+});
+module.exports = __toCommonJS(logo_block_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/blocks/logo-block.tsx
+var import_jsx_runtime = (
+  // biome-ignore lint/performance/noImgElement: Tenant-provided logos are public SVG/raster files and need browser-native intrinsic sizing.
+  require("react/jsx-runtime")
+);
+var DEFAULT_LOGO_MAX_HEIGHT = 24;
+var DEFAULT_LOGO_MAX_WIDTH = 160;
+function isValidLogoAsset(asset) {
+  return typeof asset?.outputPath === "string" && asset.outputPath.trim() !== "";
+}
+function fitLogoDimensions({
+  asset,
+  maxHeight,
+  maxWidth
+}) {
+  if (!asset.width || !asset.height) return void 0;
+  const scale = Math.min(maxWidth / asset.width, maxHeight / asset.height, 1);
+  return {
+    height: Math.max(1, Math.round(asset.height * scale)),
+    width: Math.max(1, Math.round(asset.width * scale))
+  };
+}
+function getLogoStyle({
+  asset,
+  maxHeight,
+  maxWidth
+}) {
+  return {
+    "--logo-block-max-height": `${maxHeight}px`,
+    "--logo-block-max-width": `${maxWidth}px`,
+    ...fitLogoDimensions({ asset, maxHeight, maxWidth })
+  };
+}
+function LogoBlockImage({
+  asset,
+  className,
+  maxHeight,
+  maxWidth,
+  siteName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      alt: "",
+      "aria-hidden": "true",
+      className: cn(
+        "block max-h-(--logo-block-max-height) max-w-(--logo-block-max-width) object-contain",
+        className
+      ),
+      height: asset.height,
+      src: asset.outputPath,
+      style: getLogoStyle({ asset, maxHeight, maxWidth }),
+      title: siteName,
+      width: asset.width
+    }
+  );
+}
+function LogoBlock({
+  className,
+  logo,
+  maxHeight = DEFAULT_LOGO_MAX_HEIGHT,
+  maxWidth = DEFAULT_LOGO_MAX_WIDTH,
+  siteName
+}) {
+  const lightCandidate = logo?.light;
+  const darkCandidate = logo?.dark;
+  const lightLogo = isValidLogoAsset(lightCandidate) ? lightCandidate : darkCandidate;
+  const darkLogo = isValidLogoAsset(darkCandidate) ? darkCandidate : lightLogo;
+  if (!isValidLogoAsset(lightLogo)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: siteName });
+  if (!isValidLogoAsset(darkLogo) || darkLogo.outputPath === lightLogo.outputPath) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      LogoBlockImage,
+      {
+        asset: lightLogo,
+        className,
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block dark:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      LogoBlockImage,
+      {
+        asset: lightLogo,
+        className: cn(className),
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden dark:block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      LogoBlockImage,
+      {
+        asset: darkLogo,
+        className: cn(className),
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LogoBlock
+});

package/dist/kernel/components/blocks/logo-block.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LogoBlockAsset = {
+    readonly outputPath: string;
+    readonly width?: number;
+    readonly height?: number;
+};
+type LogoBlockLogo = {
+    readonly light?: LogoBlockAsset;
+    readonly dark?: LogoBlockAsset;
+};
+type LogoBlockProps = {
+    className?: string;
+    logo?: LogoBlockLogo;
+    maxHeight?: number;
+    maxWidth?: number;
+    siteName: string;
+};
+declare function LogoBlock({ className, logo, maxHeight, maxWidth, siteName, }: LogoBlockProps): react_jsx_runtime.JSX.Element;
+
+export { LogoBlock, type LogoBlockAsset, type LogoBlockLogo, type LogoBlockProps };

package/dist/kernel/components/blocks/logo-block.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LogoBlockAsset = {
+    readonly outputPath: string;
+    readonly width?: number;
+    readonly height?: number;
+};
+type LogoBlockLogo = {
+    readonly light?: LogoBlockAsset;
+    readonly dark?: LogoBlockAsset;
+};
+type LogoBlockProps = {
+    className?: string;
+    logo?: LogoBlockLogo;
+    maxHeight?: number;
+    maxWidth?: number;
+    siteName: string;
+};
+declare function LogoBlock({ className, logo, maxHeight, maxWidth, siteName, }: LogoBlockProps): react_jsx_runtime.JSX.Element;
+
+export { LogoBlock, type LogoBlockAsset, type LogoBlockLogo, type LogoBlockProps };

package/dist/kernel/components/blocks/logo-block.js

@@ -0,0 +1,129 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/logo-block.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LOGO_MAX_HEIGHT = 24;
+var DEFAULT_LOGO_MAX_WIDTH = 160;
+function isValidLogoAsset(asset) {
+  return typeof asset?.outputPath === "string" && asset.outputPath.trim() !== "";
+}
+function fitLogoDimensions({
+  asset,
+  maxHeight,
+  maxWidth
+}) {
+  if (!asset.width || !asset.height) return void 0;
+  const scale = Math.min(maxWidth / asset.width, maxHeight / asset.height, 1);
+  return {
+    height: Math.max(1, Math.round(asset.height * scale)),
+    width: Math.max(1, Math.round(asset.width * scale))
+  };
+}
+function getLogoStyle({
+  asset,
+  maxHeight,
+  maxWidth
+}) {
+  return {
+    "--logo-block-max-height": `${maxHeight}px`,
+    "--logo-block-max-width": `${maxWidth}px`,
+    ...fitLogoDimensions({ asset, maxHeight, maxWidth })
+  };
+}
+function LogoBlockImage({
+  asset,
+  className,
+  maxHeight,
+  maxWidth,
+  siteName
+}) {
+  return (
+    // biome-ignore lint/performance/noImgElement: Tenant-provided logos are public SVG/raster files and need browser-native intrinsic sizing.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: "",
+        "aria-hidden": "true",
+        className: cn(
+          "block max-h-(--logo-block-max-height) max-w-(--logo-block-max-width) object-contain",
+          className
+        ),
+        height: asset.height,
+        src: asset.outputPath,
+        style: getLogoStyle({ asset, maxHeight, maxWidth }),
+        title: siteName,
+        width: asset.width
+      }
+    )
+  );
+}
+function LogoBlock({
+  className,
+  logo,
+  maxHeight = DEFAULT_LOGO_MAX_HEIGHT,
+  maxWidth = DEFAULT_LOGO_MAX_WIDTH,
+  siteName
+}) {
+  const lightCandidate = logo?.light;
+  const darkCandidate = logo?.dark;
+  const lightLogo = isValidLogoAsset(lightCandidate) ? lightCandidate : darkCandidate;
+  const darkLogo = isValidLogoAsset(darkCandidate) ? darkCandidate : lightLogo;
+  if (!isValidLogoAsset(lightLogo)) return /* @__PURE__ */ jsx(Fragment, { children: siteName });
+  if (!isValidLogoAsset(darkLogo) || darkLogo.outputPath === lightLogo.outputPath) {
+    return /* @__PURE__ */ jsx(
+      LogoBlockImage,
+      {
+        asset: lightLogo,
+        className,
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "block dark:hidden", children: /* @__PURE__ */ jsx(
+      LogoBlockImage,
+      {
+        asset: lightLogo,
+        className: cn(className),
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { className: "hidden dark:block", children: /* @__PURE__ */ jsx(
+      LogoBlockImage,
+      {
+        asset: darkLogo,
+        className: cn(className),
+        maxHeight,
+        maxWidth,
+        siteName
+      }
+    ) })
+  ] });
+}
+export {
+  LogoBlock
+};

package/dist/{components → kernel/components/blocks}/nav-breadcrumb.cjs

@@ -1,10 +1,7 @@
 "use strict";
-"use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,24 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/nav-breadcrumb.tsx
+// src/kernel/components/blocks/nav-breadcrumb.tsx
 var nav_breadcrumb_exports = {};
 __export(nav_breadcrumb_exports, {
   NavBreadcrumb: () => NavBreadcrumb
 });
 module.exports = __toCommonJS(nav_breadcrumb_exports);
-var import_link = __toESM(require("next/link"), 1);
-var import_navigation = require("next/navigation");
+var import_breadcrumb = require("../ui/breadcrumb.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function titleFor(node) {
   return node.title;
@@ -43,6 +31,7 @@ function titleFor(node) {
 function pathFor(node) {
   if (node.type === "page") return node.path;
   if (node.type === "link") return node.href;
+  if (node.type === "folder") return node.path;
   if (node.type === "section") return node.path;
   return void 0;
 }
@@ -88,7 +77,7 @@ function groupFallback(tree, pathname) {
 }
 function buildCrumbs(site, tree, pathname) {
   const root = {
-    title: site.title,
+    title: site.name,
     path: "/",
     current: pathname === "/"
   };
@@ -104,34 +93,26 @@ function buildCrumbs(site, tree, pathname) {
   ];
 }
 function NavBreadcrumb({
+  currentPath = "/",
+  showRoot = true,
   site,
   tree
 }) {
-  const pathname = (0, import_navigation.usePathname)() || "/";
-  const crumbs = buildCrumbs(site, tree, pathname);
+  const crumbs = buildCrumbs(site, tree, currentPath);
+  const visibleCrumbs = showRoot ? crumbs : crumbs.slice(1);
+  const items = visibleCrumbs.map((crumb) => ({
+    current: crumb.current,
+    href: crumb.path,
+    title: crumb.title
+  }));
+  if (items.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "nav",
+    import_breadcrumb.BreadcrumbTrail,
     {
-      "aria-label": "Breadcrumb",
-      className: "flex min-w-0 items-center gap-1.5 text-sm",
-      children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "text-stroke-3", children: "/" }),
-        crumb.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            "aria-current": "page",
-            className: "truncate font-medium text-foreground-1",
-            children: crumb.title
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_link.default,
-          {
-            className: "truncate text-foreground-3 no-underline hover:text-accent-1",
-            href: crumb.path,
-            children: crumb.title
-          }
-        )
-      ] }, crumb.path))
+      collapseAfter: 1,
+      collapseBefore: 2,
+      items,
+      size: "sm"
     }
   );
 }

package/dist/kernel/components/blocks/nav-breadcrumb.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+
+declare function NavBreadcrumb({ currentPath, showRoot, site, tree, }: {
+    currentPath?: string;
+    showRoot?: boolean;
+    site: SiteData;
+    tree: TreeNode[];
+}): react_jsx_runtime.JSX.Element | null;
+
+export { NavBreadcrumb };

package/dist/kernel/components/blocks/nav-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+
+declare function NavBreadcrumb({ currentPath, showRoot, site, tree, }: {
+    currentPath?: string;
+    showRoot?: boolean;
+    site: SiteData;
+    tree: TreeNode[];
+}): react_jsx_runtime.JSX.Element | null;
+
+export { NavBreadcrumb };

package/dist/{components → kernel/components/blocks}/nav-breadcrumb.js

@@ -1,15 +1,15 @@
-"use client";
-
-// src/components/nav-breadcrumb.tsx
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/kernel/components/blocks/nav-breadcrumb.tsx
+import {
+  BreadcrumbTrail
+} from "../ui/breadcrumb.js";
+import { jsx } from "react/jsx-runtime";
 function titleFor(node) {
   return node.title;
 }
 function pathFor(node) {
   if (node.type === "page") return node.path;
   if (node.type === "link") return node.href;
+  if (node.type === "folder") return node.path;
   if (node.type === "section") return node.path;
   return void 0;
 }
@@ -55,7 +55,7 @@ function groupFallback(tree, pathname) {
 }
 function buildCrumbs(site, tree, pathname) {
   const root = {
-    title: site.title,
+    title: site.name,
     path: "/",
     current: pathname === "/"
   };
@@ -71,34 +71,26 @@ function buildCrumbs(site, tree, pathname) {
   ];
 }
 function NavBreadcrumb({
+  currentPath = "/",
+  showRoot = true,
   site,
   tree
 }) {
-  const pathname = usePathname() || "/";
-  const crumbs = buildCrumbs(site, tree, pathname);
+  const crumbs = buildCrumbs(site, tree, currentPath);
+  const visibleCrumbs = showRoot ? crumbs : crumbs.slice(1);
+  const items = visibleCrumbs.map((crumb) => ({
+    current: crumb.current,
+    href: crumb.path,
+    title: crumb.title
+  }));
+  if (items.length === 0) return null;
   return /* @__PURE__ */ jsx(
-    "nav",
+    BreadcrumbTrail,
     {
-      "aria-label": "Breadcrumb",
-      className: "flex min-w-0 items-center gap-1.5 text-sm",
-      children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-stroke-3", children: "/" }),
-        crumb.current ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-current": "page",
-            className: "truncate font-medium text-foreground-1",
-            children: crumb.title
-          }
-        ) : /* @__PURE__ */ jsx(
-          Link,
-          {
-            className: "truncate text-foreground-3 no-underline hover:text-accent-1",
-            href: crumb.path,
-            children: crumb.title
-          }
-        )
-      ] }, crumb.path))
+      collapseAfter: 1,
+      collapseBefore: 2,
+      items,
+      size: "sm"
     }
   );
 }

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

@@ -0,0 +1,154 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/navbar.tsx
+var navbar_exports = {};
+__export(navbar_exports, {
+  Navbar: () => Navbar
+});
+module.exports = __toCommonJS(navbar_exports);
+var import_logo_block = require("./logo-block.js");
+var import_nav_breadcrumb = require("./nav-breadcrumb.js");
+var import_search = require("./search.js");
+var import_theme_toggle = require("./theme-toggle.js");
+var import_link = require("../ui/link.js");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/blocks/navbar.tsx
+var import_lucide_react = require("lucide-react");
+var import_link2 = __toESM(require("next/link"), 1);
+var import_navigation = require("next/navigation");
+var import_jsx_runtime = require("react/jsx-runtime");
+function hasPath(node) {
+  return "path" in node && typeof node.path === "string";
+}
+function isTopLevelGroup(node) {
+  return node.type === "section" && typeof node.group === "string" && !node.group.includes("/");
+}
+function Navbar({
+  logo,
+  site,
+  siteTitle,
+  showThemeToggle = true,
+  tree
+}) {
+  const pathname = (0, import_navigation.usePathname)() || "/";
+  const headerSite = site ?? { name: siteTitle ?? "Site" };
+  const groups = tree.filter(hasPath).filter(isTopLevelGroup);
+  const activeGroupPath = groups.map((group) => group.path).filter((path) => pathname === path || pathname.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "sticky top-0 z-nav border-b border-stroke-3 bg-surface-2 [anchor-name:--global-navbar]", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link2.default,
+        {
+          "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__ */ (0, import_jsx_runtime.jsx)(import_logo_block.LogoBlock, { logo, siteName: headerSite.name })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden h-4 w-px shrink-0 bg-stroke-3 md:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_nav_breadcrumb.NavBreadcrumb,
+        {
+          currentPath: pathname,
+          showRoot: false,
+          site: headerSite,
+          tree
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2", children: [
+      groups.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "nav",
+        {
+          "aria-label": "Groups",
+          className: "flex min-w-0 flex-wrap items-center gap-2 text-sm",
+          children: groups.map((group) => {
+            const path = group.path;
+            const active = path === activeGroupPath;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_link.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
+            );
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_search.Search.DefaultDesktop, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.Link,
+        {
+          href: "/",
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { "aria-hidden": "true", size: 14 }),
+          size: "sm",
+          variant: "button.primary",
+          children: "Start"
+        }
+      ),
+      showThemeToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_toggle.ThemeToggle, {}) : null
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Navbar
+});