@dreamlake/dockit 0.1.1

package/dist/components/Topbar.js

@@ -0,0 +1,818 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { pages } from "../lib/navigation.js";
+import { siteConfig } from "../site-config.js";
+import { useMediaQuery } from "../lib/use-media-query.js";
+import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+import { ThemeToggle } from "./ThemeToggle.js";
+import { useMerge } from "../renderer/Layout.js";
+import { TabStrip } from "./TabStrip.js";
+function HiddenRevealChip() {
+  const [show, setShow] = useHiddenToggle();
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShow(false),
+      "aria-label": "Dev mode on — hidden pages are visible. Click to hide again.",
+      title: "Dev mode on — hidden pages are visible (Cmd+Shift+D to toggle)",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 16,
+        height: 16,
+        padding: 0,
+        border: 0,
+        background: "transparent",
+        cursor: "pointer"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: 999,
+            background: "var(--color-doc-template-warn)",
+            boxShadow: "0 0 0 3px var(--color-doc-template-warn-soft)"
+          }
+        }
+      )
+    }
+  );
+}
+function VersionBadge({
+  label,
+  version,
+  collapsed,
+  dropdown = false
+}) {
+  const transition = `opacity 0.4s ease, transform 0.4s ${SPRING}, width 0.4s ${SPRING}, margin 0.4s ${SPRING}, padding 0.4s ${SPRING}`;
+  const [open, setOpen] = useState(false);
+  const [manifest, setManifest] = useState(null);
+  const [displayVersion, setDisplayVersion] = useState(version);
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (!dropdown) return;
+    let cancelled = false;
+    fetch("/versions.json").then((r) => r.ok ? r.json() : null).then((m) => {
+      if (!cancelled && m) setManifest(m);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dropdown]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const host = window.location.hostname;
+    const m = host.match(/^v(\d+(?:-\d+)+(?:[a-z]+\d+)?)\./i);
+    if (m) {
+      setDisplayVersion(m[1].replace(/-/g, "."));
+    } else if (host.startsWith("stable.") && manifest?.stable) {
+      setDisplayVersion(manifest.stable);
+    } else if (manifest?.current) {
+      setDisplayVersion(manifest.current);
+    }
+  }, [manifest]);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const labelSegStyle = {
+    padding: "2px 6px",
+    fontWeight: 600,
+    borderTopLeftRadius: 3,
+    borderBottomLeftRadius: 3
+  };
+  const versionSegStyle = {
+    padding: "2px 6px",
+    background: "color-mix(in srgb, var(--color-doc-template-ink) 5%, var(--color-doc-template-bg))",
+    fontWeight: 600,
+    borderTopRightRadius: 3,
+    borderBottomRightRadius: 3,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: dropdown ? 4 : 0,
+    border: 0,
+    borderLeft: "1px solid var(--color-doc-template-faint)",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    letterSpacing: "inherit",
+    cursor: dropdown ? "pointer" : "default"
+  };
+  const wrapperBase = {
+    fontFamily: "var(--font-doc-template-mono)",
+    fontSize: 10,
+    fontWeight: 500,
+    letterSpacing: "0.02em",
+    marginLeft: 6,
+    borderRadius: 4,
+    transition,
+    ...collapsed ? {
+      opacity: 0,
+      transform: "translateX(-4px)",
+      pointerEvents: "none",
+      width: 0,
+      margin: 0,
+      padding: 0,
+      overflow: "hidden"
+    } : {}
+  };
+  const chevron = dropdown ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "8",
+      height: "8",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: {
+        opacity: 0.65,
+        transform: open ? "scaleY(-1)" : "none",
+        transition: "transform 0.22s ease"
+      },
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: wrapperRef,
+      className: "hidden md:inline-flex items-stretch relative border border-doc-template-faint",
+      style: { ...wrapperBase, borderRadius: 4 },
+      title: dropdown ? void 0 : `${label} ${version}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex items-center text-doc-template-muted",
+            style: labelSegStyle,
+            children: label
+          }
+        ),
+        dropdown ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((o) => !o),
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            title: `Switch ${label} version (current v${displayVersion})`,
+            className: "text-doc-template-ink hover:bg-doc-template-search",
+            style: versionSegStyle,
+            children: [
+              "v",
+              displayVersion,
+              chevron
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center text-doc-template-ink",
+            style: versionSegStyle,
+            children: [
+              "v",
+              displayVersion
+            ]
+          }
+        ),
+        dropdown && open && manifest && (() => {
+          const aliasEntries = manifest.aliases ? Object.entries(manifest.aliases) : [];
+          const versionEntries = manifest.versions ?? [];
+          const ENTRY_STEP = 0.03;
+          const ENTRY_BASE = 0.13;
+          let idx = 0;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "11",
+                viewBox: "0 0 14 11",
+                "aria-hidden": true,
+                style: {
+                  position: "absolute",
+                  top: "calc(100% + 4.5px)",
+                  right: 4,
+                  zIndex: 81,
+                  display: "block",
+                  pointerEvents: "none",
+                  animation: "popover-wedge-in 0.24s ease both"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M0 11 L7 1 L14 11", stroke: "var(--color-doc-template-faint)", strokeWidth: "1", fill: "none" }),
+                  /* @__PURE__ */ jsx("path", { d: "M1 11 L7 2 L13 11 Z", fill: "var(--color-doc-template-bg)" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "listbox",
+                "aria-label": `Past ${label} versions`,
+                className: "absolute border border-doc-template-faint bg-doc-template-bg",
+                style: {
+                  top: "calc(100% + 14px)",
+                  left: 0,
+                  minWidth: 220,
+                  maxHeight: "min(360px, 60vh)",
+                  overflowY: "auto",
+                  borderRadius: 12,
+                  // Drop shadow + a "negative" 0-blur shadow above using the page bg
+                  // color: it paints a bg-colored band into the strip between the
+                  // popover top and the navbar's bottom border, masking the navbar's
+                  // 1px box-shadow in the popover's column so the two don't visually
+                  // collide.
+                  boxShadow: "0 6px 24px rgb(0 0 0 / 0.10), 0 -5px 3px 0 var(--color-doc-template-bg)",
+                  padding: 4,
+                  zIndex: 80,
+                  fontFamily: "var(--font-doc-template-mono)",
+                  fontSize: 11,
+                  animation: "popover-in 0.28s ease both",
+                  animationDelay: "0.04s",
+                  transformOrigin: "top right"
+                },
+                children: [
+                  aliasEntries.length > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "4px 6px 2px",
+                        opacity: 0.55,
+                        fontSize: 9,
+                        letterSpacing: "0.08em",
+                        textTransform: "uppercase",
+                        animation: "popover-entry-in 0.28s ease both",
+                        animationDelay: `${ENTRY_BASE + idx++ * ENTRY_STEP}s`
+                      },
+                      children: "Aliases"
+                    }
+                  ),
+                  aliasEntries.map(([name, url]) => /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: url,
+                      className: "block text-doc-template-ink no-underline hover:bg-doc-template-search",
+                      style: {
+                        padding: "5px 8px",
+                        borderRadius: 8,
+                        animation: "popover-entry-in 0.28s ease both",
+                        animationDelay: `${ENTRY_BASE + idx++ * ENTRY_STEP}s`
+                      },
+                      children: [
+                        name,
+                        name === "stable" && manifest.stable && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, marginLeft: 6 }, children: [
+                          "v",
+                          manifest.stable
+                        ] })
+                      ]
+                    },
+                    `alias-${name}`
+                  )),
+                  versionEntries.length > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "6px 6px 2px",
+                        opacity: 0.55,
+                        fontSize: 9,
+                        letterSpacing: "0.08em",
+                        textTransform: "uppercase",
+                        animation: "popover-entry-in 0.28s ease both",
+                        animationDelay: `${ENTRY_BASE + idx++ * ENTRY_STEP}s`
+                      },
+                      children: "Versions"
+                    }
+                  ),
+                  versionEntries.map((v) => {
+                    const isCurrent = v.version === manifest.current;
+                    return /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: v.url,
+                        className: "text-doc-template-ink no-underline hover:bg-doc-template-search flex items-baseline justify-between gap-3",
+                        style: {
+                          padding: "5px 8px",
+                          borderRadius: 8,
+                          fontWeight: isCurrent ? 700 : 400,
+                          background: isCurrent ? "color-mix(in srgb, var(--color-doc-template-accent) 12%, transparent)" : void 0,
+                          animation: "popover-entry-in 0.28s ease both",
+                          animationDelay: `${ENTRY_BASE + idx++ * ENTRY_STEP}s`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            "v",
+                            v.version,
+                            isCurrent && /* @__PURE__ */ jsx("span", { style: { opacity: 0.55, marginLeft: 6 }, children: "current" })
+                          ] }),
+                          v.date && /* @__PURE__ */ jsx("span", { style: { opacity: 0.5, fontVariantNumeric: "tabular-nums", fontSize: 10 }, children: v.date })
+                        ]
+                      },
+                      v.version
+                    );
+                  })
+                ]
+              }
+            )
+          ] });
+        })()
+      ]
+    }
+  );
+}
+const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
+const EXPAND_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+const EXPAND_MS = 320;
+const CLOSED_WIDTH_XL = 320;
+const CLOSED_WIDTH_LG = 260;
+const CLOSED_WIDTH_MD = 180;
+const ICON_BUTTON_SIZE = 28;
+const SEARCH_MAX_W = 860;
+const SEARCH_GUTTER = 24;
+const SEARCH_INSET = `max(${SEARCH_GUTTER}px, calc((100vw - ${SEARCH_MAX_W}px) / 2))`;
+function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
+  const { urlPathname } = usePageContext();
+  const current = pages.find((p) => p.path === urlPathname);
+  const inputRef = useRef(null);
+  const labelRef = useRef(null);
+  const focusTimerRef = useRef(null);
+  const closedRectRef = useRef(null);
+  const [isMac, setIsMac] = useState(false);
+  const merged = useMerge();
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const isBelowLg = useMediaQuery("(max-width: 1023px)");
+  const isLgUp = useMediaQuery("(min-width: 1024px)");
+  const isXlUp = useMediaQuery("(min-width: 1280px)");
+  useEffect(() => {
+    setIsMac(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
+  }, []);
+  useEffect(() => {
+    function onKey(e) {
+      const mod = isMac ? e.metaKey : e.ctrlKey;
+      if (mod && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+        onOpenSearch();
+      } else if (e.key === "/" && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        inputRef.current?.focus();
+        onOpenSearch();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isMac, onOpenSearch]);
+  function clearFocusTimer() {
+    if (focusTimerRef.current !== null) {
+      window.clearTimeout(focusTimerRef.current);
+      focusTimerRef.current = null;
+    }
+  }
+  function onInputFocus() {
+    if (searchOpen) return;
+    clearFocusTimer();
+    focusTimerRef.current = window.setTimeout(() => {
+      if (document.activeElement === inputRef.current) onOpenSearch();
+      focusTimerRef.current = null;
+    }, 1e3);
+  }
+  function onInputBlur() {
+    clearFocusTimer();
+  }
+  function onInputChange(e) {
+    setQuery(e.target.value);
+    if (!searchOpen) {
+      clearFocusTimer();
+      onOpenSearch();
+    }
+  }
+  function onInputKeyDown(e) {
+    if (e.key === "Escape" && searchOpen) {
+      e.preventDefault();
+      onCloseSearch();
+      inputRef.current?.blur();
+    }
+  }
+  useEffect(() => {
+    if (!searchOpen && labelRef.current) {
+      closedRectRef.current = labelRef.current.getBoundingClientRect();
+    }
+  });
+  useLayoutEffect(() => {
+    if (!searchOpen) return;
+    const el = labelRef.current;
+    const first = closedRectRef.current;
+    if (!el || !first) return;
+    const last = el.getBoundingClientRect();
+    el.style.transition = "none";
+    el.style.left = `${first.left}px`;
+    el.style.width = `${first.width}px`;
+    el.style.right = "auto";
+    void el.offsetWidth;
+    el.style.transition = [
+      `left ${EXPAND_MS}ms ${EXPAND_EASE}`,
+      `width ${EXPAND_MS}ms ${EXPAND_EASE}`,
+      "background 0.2s ease",
+      "border-color 0.2s ease",
+      "box-shadow 0.2s ease"
+    ].join(", ");
+    el.style.left = `${last.left}px`;
+    el.style.width = `${last.width}px`;
+    const openInset = isMobile ? "12px" : SEARCH_INSET;
+    const tid = setTimeout(() => {
+      el.style.left = openInset;
+      el.style.right = openInset;
+      el.style.width = "";
+      el.style.transition = `left ${EXPAND_MS}ms ${EXPAND_EASE}, right ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`;
+    }, EXPAND_MS + 20);
+    return () => clearTimeout(tid);
+  }, [searchOpen, isMobile]);
+  const collapsedStyle = (collapsed) => ({
+    transition: `opacity 0.25s ease, transform 0.25s ${SPRING}, width 0.25s ${SPRING}, margin 0.25s ${SPRING}, padding 0.25s ${SPRING}`,
+    ...collapsed ? {
+      opacity: 0,
+      transform: "translateX(-4px)",
+      pointerEvents: "none",
+      width: 0,
+      margin: 0,
+      padding: 0,
+      overflow: "hidden"
+    } : {}
+  });
+  const palFade = (hidden) => ({
+    opacity: hidden ? 0 : 1,
+    pointerEvents: hidden ? "none" : "auto",
+    transition: "opacity 0.25s ease"
+  });
+  const iconButtonMode = isBelowLg && !searchOpen;
+  const closedWidth = isXlUp ? CLOSED_WIDTH_XL : isLgUp ? CLOSED_WIDTH_LG : CLOSED_WIDTH_MD;
+  const searchStyle = iconButtonMode ? {
+    // In-flow grid item — sits at the end of column 2 next to TabStrip.
+    // Square footprint, icon-only, click opens the palette directly.
+    gridColumn: 2,
+    gridRow: 1,
+    justifySelf: "end",
+    width: ICON_BUTTON_SIZE,
+    maxWidth: ICON_BUTTON_SIZE,
+    flexShrink: 0,
+    height: ICON_BUTTON_SIZE,
+    padding: 0,
+    borderRadius: 8,
+    marginRight: 4,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 0,
+    transition: `width ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
+  } : isMobile && searchOpen ? {
+    position: "fixed",
+    top: 6,
+    left: 12,
+    right: 12,
+    height: 28,
+    padding: "6px 10px",
+    borderRadius: 12,
+    zIndex: 71,
+    gridArea: "auto",
+    placeSelf: "stretch",
+    boxShadow: "0 4px 14px rgb(0 0 0 / 0.06)",
+    transition: `left ${EXPAND_MS}ms ${EXPAND_EASE}, right ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
+  } : searchOpen ? {
+    position: "fixed",
+    top: 6,
+    left: SEARCH_INSET,
+    right: SEARCH_INSET,
+    height: 28,
+    padding: "6px 10px",
+    borderRadius: 12,
+    zIndex: 71,
+    gridArea: "auto",
+    placeSelf: "stretch",
+    boxShadow: "0 4px 14px rgb(0 0 0 / 0.06)",
+    transition: `left ${EXPAND_MS}ms ${EXPAND_EASE}, right ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
+  } : {
+    gridColumn: 2,
+    gridRow: 1,
+    justifySelf: "end",
+    width: closedWidth,
+    maxWidth: closedWidth,
+    flexShrink: 0,
+    height: 28,
+    padding: "6px 10px",
+    borderRadius: 12,
+    marginRight: 8,
+    transition: `width ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
+  };
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: "sticky top-0 z-50 grid grid-cols-[auto_minmax(0,1fr)_auto] items-center w-full m-0 py-1",
+      style: {
+        height: 40,
+        // Backdrop blur creates a stacking context; we keep it ON when
+        // closed (frosted topbar look) and turn it OFF while the palette
+        // is open so the now-transparent topbar doesn't blur the
+        // dropdown sitting just below it.
+        backdropFilter: searchOpen ? "none" : "saturate(140%) blur(8px)",
+        WebkitBackdropFilter: searchOpen ? "none" : "saturate(140%) blur(8px)",
+        background: searchOpen ? "transparent" : "var(--color-doc-template-bg)",
+        boxShadow: searchOpen ? "none" : "0 1px 0 var(--color-doc-template-faint)",
+        transition: "background 0.25s ease, box-shadow 0.25s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: "/",
+            className: "flex items-center gap-2.5 pl-[14px] md:pl-[18px] no-underline text-doc-template-ink hover:opacity-80 min-w-[72px] shrink-0",
+            style: {
+              fontFamily: "var(--font-doc-template-ui)",
+              fontSize: 14,
+              fontWeight: 700,
+              letterSpacing: "-0.04em",
+              transition: "opacity 0.15s ease, color 0.25s ease",
+              ...palFade(searchOpen)
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                siteConfig.brand,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "text-doc-template-accent",
+                    style: { fontWeight: 700, fontSize: "1.4em", lineHeight: 0, marginLeft: 1, verticalAlign: "baseline" },
+                    children: "."
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "hidden md:inline text-doc-template-muted",
+                  style: { fontWeight: 400, opacity: 0.55, marginLeft: -4, marginRight: -4, ...collapsedStyle(merged) },
+                  children: "/"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "hidden md:inline text-doc-template-muted",
+                  style: { fontWeight: 500, letterSpacing: "-0.01em", ...collapsedStyle(merged) },
+                  children: siteConfig.subtitle
+                }
+              ),
+              (siteConfig.versionChips ?? []).map((chip) => /* @__PURE__ */ jsx(
+                VersionBadge,
+                {
+                  label: chip.label,
+                  version: chip.version,
+                  collapsed: merged,
+                  dropdown: chip.dropdown
+                },
+                chip.label
+              )),
+              siteConfig.gitHash && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "hidden md:inline-flex items-center text-doc-template-muted border border-doc-template-faint",
+                  style: {
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 500,
+                    letterSpacing: "0.02em",
+                    marginLeft: 6,
+                    gap: 5,
+                    padding: "2px 7px",
+                    borderRadius: 4,
+                    ...collapsedStyle(merged)
+                  },
+                  title: `git ${siteConfig.gitHash}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": true,
+                        style: { width: 9, height: 9, opacity: 0.8, flexShrink: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "3" }),
+                          /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3" }),
+                          /* @__PURE__ */ jsx("path", { d: "M6 9v6" }),
+                          /* @__PURE__ */ jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
+                        ]
+                      }
+                    ),
+                    siteConfig.gitHash
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        current && /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Breadcrumb",
+            className: "hidden md:flex items-center gap-1.5 text-doc-template-muted uppercase pointer-events-none overflow-hidden",
+            style: {
+              gridColumn: 2,
+              gridRow: 1,
+              justifySelf: "start",
+              marginLeft: 8,
+              fontFamily: "var(--font-doc-template-mono)",
+              fontSize: 10,
+              fontWeight: 500,
+              letterSpacing: "0.04em",
+              whiteSpace: "nowrap",
+              opacity: searchOpen ? 0 : merged ? 1 : 0,
+              transform: merged && !searchOpen ? "translateY(0)" : "translateY(6px)",
+              transition: `opacity 0.25s ease, transform 0.25s ${SPRING}`
+            },
+            children: [
+              siteConfig.breadcrumbRoot && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { children: siteConfig.breadcrumbRoot }),
+                /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "/" })
+              ] }),
+              current.section && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { children: current.section }),
+                /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "/" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-doc-template-ink", children: current.title })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              gridColumn: 2,
+              gridRow: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: isMobile ? 8 : 14,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-stretch", style: palFade(searchOpen), children: /* @__PURE__ */ jsx(TabStrip, {}) }),
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  ref: labelRef,
+                  htmlFor: "doc-search-input",
+                  onClick: iconButtonMode ? (e) => {
+                    if (e.target instanceof HTMLInputElement) return;
+                    e.preventDefault();
+                    onOpenSearch();
+                    requestAnimationFrame(() => inputRef.current?.focus());
+                  } : void 0,
+                  "aria-label": iconButtonMode ? "Open search" : void 0,
+                  role: iconButtonMode ? "button" : void 0,
+                  className: searchOpen ? "flex items-center gap-2 max-w-full bg-doc-template-search border border-doc-template-faint cursor-text" : iconButtonMode ? "flex items-center justify-center max-w-full bg-transparent border border-transparent text-doc-template-muted hover:bg-doc-template-search hover:text-doc-template-ink cursor-pointer" : "flex items-center gap-2 max-w-full bg-doc-template-search border border-transparent focus-within:border-doc-template-accent/50 cursor-text",
+                  style: searchStyle,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": true,
+                        className: iconButtonMode ? "shrink-0" : "text-doc-template-muted shrink-0",
+                        style: { width: 14, height: 14, transition: "color 0.15s ease" },
+                        children: [
+                          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+                          /* @__PURE__ */ jsx("path", { d: "M21 21l-4.3-4.3" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: "doc-search-input",
+                        type: "text",
+                        placeholder: "Search docs…",
+                        autoComplete: "off",
+                        value: query,
+                        onChange: onInputChange,
+                        onFocus: onInputFocus,
+                        onBlur: onInputBlur,
+                        onKeyDown: onInputKeyDown,
+                        className: "flex-1 appearance-none border-0 outline-0 bg-transparent text-doc-template-ink min-w-0 placeholder:text-doc-template-muted placeholder:opacity-70",
+                        style: {
+                          fontFamily: "var(--font-doc-template-ui)",
+                          fontSize: 13,
+                          letterSpacing: "-0.005em",
+                          ...iconButtonMode ? {
+                            width: 0,
+                            minWidth: 0,
+                            flex: "0 0 0",
+                            padding: 0,
+                            margin: 0,
+                            opacity: 0,
+                            pointerEvents: "none"
+                          } : {}
+                        },
+                        tabIndex: iconButtonMode ? -1 : 0
+                      }
+                    ),
+                    !iconButtonMode && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "hidden md:inline-flex font-medium text-doc-template-muted border border-doc-template-faint bg-doc-template-bg items-center",
+                        style: {
+                          fontFamily: "var(--font-doc-template-mono)",
+                          fontSize: 10,
+                          opacity: 0.8,
+                          padding: "1px 5px",
+                          borderRadius: 4
+                        },
+                        children: isMac ? "⌘K" : "Ctrl K"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-stretch gap-2.5 md:gap-3.5 pr-[14px] md:pr-[22px]",
+            style: { gridColumn: 3, gridRow: 1, justifySelf: "end", ...palFade(searchOpen) },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [
+              siteConfig.repoUrl && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: siteConfig.repoUrl,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  "aria-label": "GitHub",
+                  title: "GitHub",
+                  className: "hidden lg:inline-flex font-medium text-doc-template-muted no-underline items-center justify-center hover:text-doc-template-ink",
+                  style: {
+                    fontFamily: "var(--font-doc-template-ui)",
+                    fontSize: 12.5,
+                    lineHeight: 1,
+                    letterSpacing: "-0.005em",
+                    transition: "color 0.15s ease"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      "aria-hidden": true,
+                      style: { display: "block" },
+                      children: /* @__PURE__ */ jsx("path", { d: "M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.05 11.05 0 015.78 0c2.2-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(HiddenRevealChip, {}),
+              /* @__PURE__ */ jsx(ThemeToggle, {})
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Topbar
+};