@publish.os/nextjs 0.0.1-alpha.1

package/dist/components/color-palette.js

@@ -0,0 +1,388 @@
+"use client";
+
+// src/components/color-palette.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GLOBALS_CSS = `
+:root {
+  --foreground-1: #100f0f;
+  --foreground-2: #403e3c;
+  --foreground-3: #6f6e69;
+  --foreground-4: #878580;
+  --surface-background: #fffcf0;
+  --surface-1: #fffcf0;
+  --surface-2: #fff8e3;
+  --surface-3: #f2ecd8;
+  --surface-4: #e6ddc8;
+  --surface-hover: var(--surface-3);
+  --surface-active: var(--surface-4);
+  --surface-overlay: var(--surface-3);
+  --surface-menu: #100f0f;
+  --surface-menu-foreground: #fffcf0;
+  --accent-1: #d84200;
+  --accent-2: #ff6b35;
+  --accent-3: #ff9f40;
+  --accent-4: #ffe7d6;
+  --stroke-1: #878580;
+  --stroke-2: #b7ad99;
+  --stroke-3: #d9cfba;
+  --stroke-4: #e6ddc8;
+  --focus-ring: var(--accent-2);
+  --typography-links: var(--accent-1);
+  --typography-variable: var(--accent-1);
+  --typography-pre-bg: #f2ecd8;
+  --typography-pre-border: #d9cfba;
+  --my-custom-variable: rgb(102, 128, 11);
+  /*--my-custom-variable: oklch(
+        from var(--accent-1) calc(l + 0.5) calc(c + 0.15) h / calc(alpha - 0.1)
+    );*/
+  --my-custom-extended-variable: oklch(
+    from var(--my-custom-variable) l c h /
+    calc(alpha - 0.1)
+  );
+}
+.dark {
+  --foreground-1: #fffcf0;
+  --foreground-2: #cecdc3;
+  --foreground-3: #878580;
+  --foreground-4: #6f6e69;
+  --surface-background: #100f0f;
+  --surface-1: #100f0f;
+  --surface-2: #1c1b1a;
+  --surface-3: #282726;
+  --surface-4: #343331;
+  --surface-hover: var(--surface-3);
+  --surface-active: var(--surface-4);
+  --surface-overlay: var(--surface-3);
+  --surface-menu: #fffcf0;
+  --surface-menu-foreground: #100f0f;
+  --accent-1: #ff9f40;
+  --accent-2: #ff8c1a;
+  --accent-3: #b54d00;
+  --accent-4: #3d1e00;
+  --stroke-1: #878580;
+  --stroke-2: #575653;
+  --stroke-3: #403e3c;
+  --stroke-4: #343331;
+  --focus-ring: var(--accent-1);
+  --typography-links: var(--accent-1);
+  --typography-variable: var(--accent-1);
+  --typography-pre-bg: #1c1b1a;
+  --typography-pre-border: #403e3c;
+}
+`;
+function parseTokenNames(css) {
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const seen = /* @__PURE__ */ new Set();
+  const names = [];
+  for (const m of stripped.matchAll(/--([a-zA-Z0-9_-]+)\s*:/g)) {
+    const name = m[1];
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      names.push(name);
+    }
+  }
+  return names;
+}
+var TOKEN_NAMES = parseTokenNames(GLOBALS_CSS);
+function deriveGroup(name) {
+  const p = name.split("-");
+  if (p.length === 1) return "base";
+  const last = p[p.length - 1];
+  if (last && /^\d+$/.test(last)) return p.slice(0, -1).join("-");
+  return p[0] ?? "base";
+}
+function parseRgbString(s) {
+  const m = s.match(/rgba?\(\s*([\d.]+)[,\s]\s*([\d.]+)[,\s]\s*([\d.]+)/);
+  if (!m) return null;
+  const [, r, g, b] = m;
+  if (!r || !g || !b) return null;
+  return [Math.round(+r), Math.round(+g), Math.round(+b)];
+}
+function toHex(r, g, b) {
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function toHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const mx = Math.max(r, g, b), mn = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (mx + mn) / 2;
+  if (mx !== mn) {
+    const d = mx - mn;
+    s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn);
+    if (mx === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (mx === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+}
+function toOklch(r, g, b) {
+  const tl = (c) => {
+    c /= 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const [lr, lg, lb] = [tl(r), tl(g), tl(b)];
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const [l_, m_, s_] = [Math.cbrt(l), Math.cbrt(m), Math.cbrt(s)];
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 4072047e-9 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bv = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(a * a + bv * bv);
+  let H = Math.atan2(bv, a) * (180 / Math.PI);
+  if (H < 0) H += 360;
+  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
+}
+function formatColor(r, g, b, fmt) {
+  switch (fmt) {
+    case "hex":
+      return toHex(r, g, b);
+    case "rgb":
+      return `rgb(${r}, ${g}, ${b})`;
+    case "hsl":
+      return toHsl(r, g, b);
+    case "oklch":
+      return toOklch(r, g, b);
+  }
+}
+function isLight(r, g, b) {
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.52;
+}
+function readToken(name, container) {
+  const probe = document.createElement("div");
+  probe.style.cssText = `position:absolute;width:1px;height:1px;pointer-events:none;background:var(--${name})`;
+  container.appendChild(probe);
+  const computed = getComputedStyle(probe).backgroundColor;
+  container.removeChild(probe);
+  return parseRgbString(computed);
+}
+var FORMAT_OPTIONS = [
+  { label: "HEX", value: "hex" },
+  { label: "RGB", value: "rgb" },
+  { label: "HSL", value: "hsl" },
+  { label: "OKLCH", value: "oklch" }
+];
+function Swatch({
+  name,
+  rgb,
+  format,
+  onFormatChange,
+  onCopy
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!menuOpen) return;
+    const h = (e) => {
+      if (!menuRef.current?.contains(e.target)) setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [menuOpen]);
+  const displayVal = rgb ? formatColor(...rgb, format) : null;
+  const light = rgb ? isLight(...rgb) : true;
+  const bg = rgb ? toHex(...rgb) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col shrink-0 w-24", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !rgb,
+        onClick: () => displayVal && onCopy(displayVal),
+        title: displayVal ?? "Unresolvable",
+        className: "relative overflow-hidden shrink-0 rounded-xl group transition-transform duration-150 hover:scale-105 active:scale-95 disabled:cursor-default disabled:hover:scale-100",
+        style: {
+          width: 96,
+          height: 80,
+          border: "0.5px solid rgba(128,128,128,0.2)",
+          background: bg ?? "color-mix(in srgb, currentColor 8%, transparent)"
+        },
+        children: rgb ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute inset-0 flex items-center justify-center text-[10px] font-bold tracking-widest uppercase opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none",
+            style: {
+              color: light ? "rgba(0,0,0,0.45)" : "rgba(255,255,255,0.65)"
+            },
+            children: "copy"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute inset-0 rounded-xl pointer-events-none",
+            style: {
+              backgroundImage: "repeating-conic-gradient(#aaa 0% 25%, transparent 0% 50%)",
+              backgroundSize: "12px 12px",
+              opacity: 0.2
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-1.5 truncate font-bold leading-tight text-[10px]",
+        title: name,
+        children: name
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "relative w-24", children: [
+      rgb ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMenuOpen((o) => !o),
+          className: "truncate text-left leading-normal mt-0.5 text-[9px] text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors w-24",
+          style: {
+            fontFamily: "inherit",
+            background: "none",
+            border: "none",
+            padding: 0,
+            cursor: "pointer"
+          },
+          children: displayVal
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "block mt-0.5 text-[9px] italic text-gray-400 dark:text-gray-600", children: "unresolved" }),
+      menuOpen && rgb && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 z-50 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-xl",
+          style: { top: "100%", marginTop: 4, minWidth: 176 },
+          children: FORMAT_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onFormatChange(opt.value);
+                setMenuOpen(false);
+              },
+              className: `flex items-center gap-2 w-full text-left px-3 py-1.5 text-[10px] transition-colors ${format === opt.value ? "bg-gray-900 text-white dark:bg-white dark:text-gray-900" : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"}`,
+              style: {
+                fontFamily: "inherit",
+                border: "none",
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-bold w-11 shrink-0", children: opt.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-55 truncate", children: formatColor(...rgb, opt.value) })
+              ]
+            },
+            opt.value
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function ColorPalette() {
+  const [format, setFormat] = useState("hex");
+  const [notice, setNotice] = useState("");
+  const [resolved, setResolved] = useState({});
+  const probeRef = useRef(null);
+  const noticeTimer = useRef(null);
+  const readAll = useCallback(() => {
+    const container = probeRef.current;
+    if (!container) return;
+    const next = {};
+    TOKEN_NAMES.forEach((name) => {
+      next[name] = readToken(name, container);
+    });
+    setResolved(next);
+  }, []);
+  useEffect(() => {
+    readAll();
+    const obs = new MutationObserver(readAll);
+    obs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => obs.disconnect();
+  }, [readAll]);
+  useEffect(() => {
+    return () => {
+      if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    };
+  }, []);
+  const handleCopy = useCallback((txt) => {
+    navigator.clipboard.writeText(txt).catch(() => {
+    });
+    setNotice(`Copied ${txt}`);
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    noticeTimer.current = setTimeout(() => setNotice(""), 1800);
+  }, []);
+  const groups = {};
+  const groupOrder = [];
+  TOKEN_NAMES.forEach((name) => {
+    const g = deriveGroup(name);
+    if (!groups[g]) {
+      groups[g] = [];
+      groupOrder.push(g);
+    }
+    groups[g].push(name);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: probeRef,
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          fontFamily: "var(--font-mono, ui-monospace, 'Fira Code', monospace)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-5 flex-wrap", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex gap-1 rounded-lg p-0.5 bg-gray-100 dark:bg-gray-800", children: FORMAT_OPTIONS.map((f) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setFormat(f.value),
+                className: `px-3 py-1 rounded-md text-[11px] font-bold transition-all ${format === f.value ? "bg-gray-900 text-white dark:bg-white dark:text-gray-900" : "text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"}`,
+                style: {
+                  fontFamily: "inherit",
+                  border: "none",
+                  cursor: "pointer"
+                },
+                children: f.label
+              },
+              f.value
+            )) }),
+            notice && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-400", children: notice })
+          ] }),
+          groupOrder.map((g) => /* @__PURE__ */ jsxs("section", { className: "mb-7", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-bold uppercase tracking-[.18em] text-gray-400 dark:text-gray-600 pb-2 border-b border-gray-100 dark:border-gray-800 mb-3", children: g }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: (groups[g] ?? []).map((name) => /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name,
+                rgb: resolved[name] ?? null,
+                format,
+                onFormatChange: setFormat,
+                onCopy: handleCopy
+              },
+              name
+            )) })
+          ] }, g))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ColorPalette as default
+};

package/dist/components/nav-breadcrumb.cjs

@@ -0,0 +1,141 @@
+"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/components/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_jsx_runtime = require("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 === "section") return node.path;
+  return void 0;
+}
+function rankFor(node) {
+  if (node.type === "page" || node.type === "section") return 2;
+  if (node.type === "folder") return 1;
+  return 0;
+}
+function findCrumbs(nodes, pathname, parents = []) {
+  const matches = [];
+  for (const node of nodes) {
+    const path = pathFor(node);
+    const nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
+    if (path === pathname) {
+      matches.push({
+        crumbs: nextParents.map((crumb, index) => ({
+          ...crumb,
+          current: index === nextParents.length - 1
+        })),
+        pathLength: path.length,
+        rank: rankFor(node)
+      });
+    }
+    if (node.type === "section" || node.type === "folder") {
+      const childMatch = findCrumbs(node.children, pathname, nextParents);
+      if (childMatch) matches.push(childMatch);
+    }
+  }
+  return matches.sort(
+    (a, b) => b.rank - a.rank || b.pathLength - a.pathLength || b.crumbs.length - a.crumbs.length
+  )[0] ?? null;
+}
+function groupFallback(tree, pathname) {
+  const groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
+    (entry) => typeof entry.path === "string"
+  ).sort((a, b) => b.path.length - a.path.length);
+  for (const { group, path } of groups) {
+    if (pathname.startsWith(`${path}/`)) {
+      return [{ title: titleFor(group), path }];
+    }
+  }
+  return [];
+}
+function buildCrumbs(site, tree, pathname) {
+  const root = {
+    title: site.title,
+    path: "/",
+    current: pathname === "/"
+  };
+  if (pathname === "/") return [root];
+  const treeMatch = findCrumbs(tree, pathname);
+  if (treeMatch) return [root, ...treeMatch.crumbs];
+  return [
+    root,
+    ...groupFallback(tree, pathname).map((crumb) => ({
+      ...crumb,
+      current: false
+    }))
+  ];
+}
+function NavBreadcrumb({
+  site,
+  tree
+}) {
+  const pathname = (0, import_navigation.usePathname)() || "/";
+  const crumbs = buildCrumbs(site, tree, pathname);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      "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))
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavBreadcrumb
+});

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteData, TreeNode } from '../types.cjs';
+
+declare function NavBreadcrumb({ site, tree, }: {
+    site: SiteData;
+    tree: TreeNode[];
+}): react_jsx_runtime.JSX.Element;
+
+export { NavBreadcrumb };

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteData, TreeNode } from '../types.js';
+
+declare function NavBreadcrumb({ site, tree, }: {
+    site: SiteData;
+    tree: TreeNode[];
+}): react_jsx_runtime.JSX.Element;
+
+export { NavBreadcrumb };

package/dist/components/nav-breadcrumb.js

@@ -0,0 +1,107 @@
+"use client";
+
+// src/components/nav-breadcrumb.tsx
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { jsx, jsxs } 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 === "section") return node.path;
+  return void 0;
+}
+function rankFor(node) {
+  if (node.type === "page" || node.type === "section") return 2;
+  if (node.type === "folder") return 1;
+  return 0;
+}
+function findCrumbs(nodes, pathname, parents = []) {
+  const matches = [];
+  for (const node of nodes) {
+    const path = pathFor(node);
+    const nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
+    if (path === pathname) {
+      matches.push({
+        crumbs: nextParents.map((crumb, index) => ({
+          ...crumb,
+          current: index === nextParents.length - 1
+        })),
+        pathLength: path.length,
+        rank: rankFor(node)
+      });
+    }
+    if (node.type === "section" || node.type === "folder") {
+      const childMatch = findCrumbs(node.children, pathname, nextParents);
+      if (childMatch) matches.push(childMatch);
+    }
+  }
+  return matches.sort(
+    (a, b) => b.rank - a.rank || b.pathLength - a.pathLength || b.crumbs.length - a.crumbs.length
+  )[0] ?? null;
+}
+function groupFallback(tree, pathname) {
+  const groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
+    (entry) => typeof entry.path === "string"
+  ).sort((a, b) => b.path.length - a.path.length);
+  for (const { group, path } of groups) {
+    if (pathname.startsWith(`${path}/`)) {
+      return [{ title: titleFor(group), path }];
+    }
+  }
+  return [];
+}
+function buildCrumbs(site, tree, pathname) {
+  const root = {
+    title: site.title,
+    path: "/",
+    current: pathname === "/"
+  };
+  if (pathname === "/") return [root];
+  const treeMatch = findCrumbs(tree, pathname);
+  if (treeMatch) return [root, ...treeMatch.crumbs];
+  return [
+    root,
+    ...groupFallback(tree, pathname).map((crumb) => ({
+      ...crumb,
+      current: false
+    }))
+  ];
+}
+function NavBreadcrumb({
+  site,
+  tree
+}) {
+  const pathname = usePathname() || "/";
+  const crumbs = buildCrumbs(site, tree, pathname);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "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))
+    }
+  );
+}
+export {
+  NavBreadcrumb
+};