@dreamlake/dockit 0.1.1 → 0.2.0

package/dist/components/CodeBlock.js

@@ -60,22 +60,36 @@ function CodeBlock({ children, filename, lang }) {
             },
             children: [
               /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, textTransform: "none", letterSpacing: 0 }, children: filename }),
-              lang && /* @__PURE__ */ jsx("span", { className: "uppercase", style: { fontWeight: 600, letterSpacing: "0.06em" }, children: lang }),
+              lang && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "uppercase opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
+                  style: { fontWeight: 600, letterSpacing: "0.06em" },
+                  children: lang
+                }
+              ),
               /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", style: { gap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-pressed": showLines,
-                    title: showLines ? ":set nonu" : ":set nu",
-                    onClick: () => setShowLines(!showLines),
-                    style: headerBtnStyle(showLines),
-                    children: /* @__PURE__ */ jsx(HashIcon, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
-              ] })
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "inline-flex items-center opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
+                  style: { gap: 6 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": showLines,
+                        title: showLines ? ":set nonu" : ":set nu",
+                        onClick: () => setShowLines(!showLines),
+                        style: headerBtnStyle(showLines),
+                        children: /* @__PURE__ */ jsx(HashIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+                  ]
+                }
+              )
             ]
           }
         ),

package/dist/components/Preview.js

@@ -112,6 +112,48 @@ function HashIcon() {
     }
   );
 }
+function MaximizeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 12, height: 12, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function MinimizeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 12, height: 12, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
 function Preview({
   children,
   source,
@@ -122,8 +164,17 @@ function Preview({
 }) {
   const [tab, setTab] = useState(defaultTab);
   const [copied, setCopied] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
   const visibleSource = tab === "data" ? dataSource ?? "" : source;
+  useEffect(() => {
+    if (!fullscreen) return;
+    function onKey(e) {
+      if (e.key === "Escape") setFullscreen(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [fullscreen]);
   function copy() {
     navigator.clipboard.writeText(visibleSource).then(
       () => {
@@ -139,7 +190,20 @@ function Preview({
     {
       "data-line-numbers": showLines ? "on" : "off",
       className: "border border-doc-template-faint bg-doc-template-panel",
-      style: { margin: "18px 0 22px", borderRadius: "var(--radius-doc-template)", overflow: "hidden" },
+      style: fullscreen ? {
+        // Full-viewport overlay. `--color-doc-template-bg` is the page
+        // surface token so the backdrop matches the site in both light
+        // and dark themes.
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        margin: 0,
+        borderRadius: 0,
+        background: "var(--color-doc-template-bg)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      } : { margin: "18px 0 22px", borderRadius: "var(--radius-doc-template)", overflow: "hidden" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -206,11 +270,54 @@ function Preview({
                     children: copied ? "Copied" : "Copy"
                   }
                 )
-              ] })
+              ] }),
+              tab === "preview" && /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" } }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": fullscreen,
+                  "aria-label": fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                  title: fullscreen ? "Exit fullscreen (Esc)" : "Enter fullscreen",
+                  onClick: () => setFullscreen((f) => !f),
+                  style: headerBtnStyle(fullscreen),
+                  children: fullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(MaximizeIcon, {})
+                }
+              )
             ]
           }
         ),
-        tab === "preview" ? /* @__PURE__ */ jsx("div", { style: { padding: 24, minHeight: 80, ...height ? { height } : null }, children }) : /* @__PURE__ */ jsx("div", { style: { background: "var(--color-doc-template-code)" }, children: /* @__PURE__ */ jsx(HighlightedSource, { code: visibleSource, filename }) })
+        tab === "preview" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...fullscreen ? { "data-preview-fill": "" } : null,
+            style: fullscreen ? {
+              // Full-bleed: drop the padding so a wide demo reaches every
+              // edge of the overlay. The `[data-preview-fill]` rule below
+              // then stretches the demo's own wrapper to this pane's
+              // height, so a specimen with a fixed height grows to fill
+              // the viewport instead of leaving dead space below it.
+              padding: 0,
+              flex: 1,
+              minHeight: 0,
+              width: "100%",
+              overflow: "auto"
+            } : { padding: 24, minHeight: 80, ...height ? { height } : null },
+            children: [
+              fullscreen && /* @__PURE__ */ jsx("style", { children: "[data-preview-fill]>:not(style){height:100%!important}" }),
+              children
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              background: "var(--color-doc-template-code)",
+              ...fullscreen ? { flex: 1, minHeight: 0, overflow: "auto" } : null
+            },
+            children: /* @__PURE__ */ jsx(HighlightedSource, { code: visibleSource, filename })
+          }
+        )
       ]
     }
   );

package/dist/components/Sidebar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
 import { usePageContext } from "vike-react/usePageContext";
-import { groupedPages, groupedVisiblePages } from "../lib/navigation.js";
+import { normalizePath, groupedPages, groupedVisiblePages } from "../lib/navigation.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 import { tabForUrl, urlInTab } from "../lib/tabs.js";
 const SIDEBAR_KEY = "sidebar-collapsed";
@@ -15,6 +15,7 @@ function loadCollapsed() {
 }
 function Sidebar() {
   const { urlPathname } = usePageContext();
+  const currentPath = normalizePath(urlPathname);
   const [showHidden] = useHiddenToggle();
   const allGroups = showHidden ? groupedPages : groupedVisiblePages;
   const activeTab = tabForUrl(urlPathname);
@@ -36,7 +37,7 @@ function Sidebar() {
     });
   }
   useEffect(() => {
-    const g = groups.find((g2) => g2.items.some((i) => i.path === urlPathname));
+    const g = groups.find((g2) => g2.items.some((i) => i.path === currentPath));
     if (g?.label && collapsed.has(g.label)) {
       setCollapsed((prev) => {
         const next = new Set(prev);
@@ -84,7 +85,7 @@ function Sidebar() {
             "a",
             {
               href: item.path,
-              "aria-current": item.path === urlPathname ? "page" : void 0,
+              "aria-current": item.path === currentPath ? "page" : void 0,
               className: "sidebar-link",
               children: [
                 /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: item.title }),

package/dist/components/TOC.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { usePageContext } from "vike-react/usePageContext";
-import { pages } from "../lib/navigation.js";
+import { normalizePath, findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 const TOC_KEY_PREFIX = "toc-collapsed:";
 const X0 = 4;
@@ -51,15 +51,16 @@ function scrollToHeading(e, id) {
 }
 function TOC() {
   const { urlPathname } = usePageContext();
+  const currentPath = normalizePath(urlPathname);
   const mdHref = (() => {
-    const meta = pages.find((p) => p.path === urlPathname);
+    const meta = findPage(urlPathname);
     if (!meta || meta.noindex) return null;
-    return urlPathname === "/" ? "/index.md" : `${urlPathname}.md`;
+    return currentPath === "/" ? "/index.md" : `${currentPath}.md`;
   })();
   const editHref = (() => {
-    const meta = pages.find((p) => p.path === urlPathname);
+    const meta = findPage(urlPathname);
     if (!meta) return null;
-    const slug = urlPathname === "/" ? "index" : urlPathname.replace(/^\//, "");
+    const slug = currentPath === "/" ? "index" : currentPath.replace(/^\//, "");
     const pagesPath = siteConfig.docsPagesPath ?? "docs/pages";
     return `${siteConfig.docsRepoUrl}/edit/${siteConfig.docsBranch}/${pagesPath}/${slug}/+Page.mdx`;
   })();
@@ -138,7 +139,7 @@ function TOC() {
       setHeadings([]);
       return;
     }
-    const current = pages.find((p) => p.path === urlPathname);
+    const current = findPage(urlPathname);
     const tocLevel = current?.tocLevel ?? 3;
     const selector = tocLevel >= 3 ? "[data-toc-anchor], h3[id]" : "[data-toc-anchor]";
     function collect() {

package/dist/components/ThemeToggle.d.ts

@@ -1,2 +1,5 @@
 import { JSX } from 'react';
+/** Topbar theme control. The variant comes from `siteConfig.themeToggle`:
+ *  `'cycle'` (default) renders the single cycling button, `'segmented'`
+ *  the three-button slider. Both share ThemeProvider state. */
 export declare function ThemeToggle(): JSX.Element;

package/dist/components/ThemeToggle.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "./ThemeProvider.js";
 import { ClientOnly } from "./ClientOnly.js";
+import { siteConfig } from "../site-config.js";
 const SIZE = 24;
 const PAD = 2;
 const SPRING = "cubic-bezier(0.34, 1.45, 0.55, 1)";
@@ -61,11 +62,11 @@ const DarkIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const SEGMENTS = [
-  { value: "light", label: "Light", Icon: LightIcon },
+  { value: "light", label: "Light", Icon: LightIcon, inactiveRotate: -18 },
   { value: "system", label: "System", Icon: SystemIcon },
-  { value: "dark", label: "Dark", Icon: DarkIcon }
+  { value: "dark", label: "Dark", Icon: DarkIcon, inactiveRotate: 18 }
 ];
-function ToggleInner() {
+function CycleToggle() {
   const { theme, setTheme } = useTheme();
   const idx = Math.max(0, SEGMENTS.findIndex((s) => s.value === theme));
   const current = SEGMENTS[idx];
@@ -101,8 +102,80 @@ function ToggleInner() {
     }
   );
 }
+function SegmentedToggle() {
+  const { theme, setTheme } = useTheme();
+  const idx = Math.max(0, SEGMENTS.findIndex((s) => s.value === theme));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Theme",
+      className: "relative inline-flex items-center bg-doc-template-panel",
+      style: { padding: PAD, borderRadius: 999, isolation: "isolate" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "bg-doc-template-chip",
+            style: {
+              position: "absolute",
+              top: PAD,
+              left: PAD,
+              width: SIZE,
+              height: SIZE,
+              borderRadius: 999,
+              transform: `translateX(${idx * SIZE}px)`,
+              transition: `transform 0.42s ${SPRING}`,
+              zIndex: 0,
+              willChange: "transform"
+            }
+          }
+        ),
+        SEGMENTS.map((seg) => {
+          const pressed = seg.value === theme;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": seg.label,
+              title: seg.label,
+              "aria-pressed": pressed,
+              onClick: () => setTheme(seg.value),
+              className: pressed ? "inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-doc-template-ink" : "inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-doc-template-muted hover:text-doc-template-ink",
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: SIZE,
+                height: SIZE,
+                borderRadius: 999,
+                padding: 0,
+                margin: 0,
+                transition: "color 0.25s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    transform: pressed ? "scale(1) rotate(0deg)" : `scale(0.85)${seg.inactiveRotate ? ` rotate(${seg.inactiveRotate}deg)` : ""}`,
+                    opacity: pressed ? 1 : 0.65,
+                    transition: `transform 0.42s ${SPRING}, opacity 0.25s ease`
+                  },
+                  children: /* @__PURE__ */ jsx(seg.Icon, {})
+                }
+              )
+            },
+            seg.value
+          );
+        })
+      ]
+    }
+  );
+}
 function ThemeToggle() {
-  return /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(ToggleInner, {}) });
+  const segmented = siteConfig.themeToggle === "segmented";
+  return /* @__PURE__ */ jsx(ClientOnly, { children: segmented ? /* @__PURE__ */ jsx(SegmentedToggle, {}) : /* @__PURE__ */ jsx(CycleToggle, {}) });
 }
 export {
   ThemeToggle

package/dist/components/Topbar.js

@@ -1,11 +1,12 @@
 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 { findPage } 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 { VersionBadge } from "./VersionBadge.js";
 import { useMerge } from "../renderer/Layout.js";
 import { TabStrip } from "./TabStrip.js";
 function HiddenRevealChip() {
@@ -45,303 +46,6 @@ function HiddenRevealChip() {
     }
   );
 }
-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;
@@ -354,7 +58,7 @@ 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 current = findPage(urlPathname);
   const inputRef = useRef(null);
   const labelRef = useRef(null);
   const focusTimerRef = useRef(null);

package/dist/components/VersionBadge.d.ts

@@ -0,0 +1,31 @@
+export interface VersionBadgeProps {
+    /** Left segment text (e.g. the package name). */
+    label: string;
+    /** Build-time version shown in the right segment (may be overridden on
+     *  the client from the hostname / manifest — see below). */
+    version: string;
+    /** Collapse to width 0 (the Topbar drives this from its merged state).
+     *  Standalone placements can omit it. */
+    collapsed?: boolean;
+    /** Turn the version segment into a popover listing the deploys from
+     *  `/versions.json`. */
+    dropdown?: boolean;
+}
+/**
+ * Two-segment version chip: `[ label | v<version> ]`.
+ *
+ * With `dropdown: true` the right segment opens a popover listing alias
+ * and past-version doc URLs sourced from a `versions.json` manifest
+ * (schema: `{ current, stable, aliases, versions: [{version, url, date}] }`).
+ *
+ * The manifest is fetched from the production origin (`siteConfig.url`)
+ * first, so the dropdown on old, immutable version-branch deploys still
+ * lists releases published after they were built; the same-origin copy is
+ * the fallback (local dev, or when no `url` is configured). Cross-origin
+ * fetching needs a CORS header on `/versions.json` — see the
+ * `netlify.example.toml` template.
+ *
+ * Rendered by the Topbar for each `siteConfig.versionChips` entry, and
+ * exported from the library index for standalone placement.
+ */
+export declare function VersionBadge({ label, version, collapsed, dropdown, }: VersionBadgeProps): import("react").JSX.Element;

package/dist/components/VersionBadge.js

@@ -0,0 +1,315 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { siteConfig } from "../site-config.js";
+const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
+function VersionBadge({
+  label,
+  version,
+  collapsed = false,
+  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;
+    const origin = (siteConfig.url || "").replace(/\/+$/, "");
+    const sameOrigin = () => fetch("/versions.json").then((r) => r.ok ? r.json() : null);
+    const load = origin ? fetch(`${origin}/versions.json`).then((r) => r.ok ? r.json() : Promise.reject(new Error(String(r.status)))).catch(sameOrigin) : sameOrigin();
+    load.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: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              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
+                        ] }),
+                        name === "latest" && manifest.current && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, marginLeft: 6 }, children: [
+                          "v",
+                          manifest.current
+                        ] })
+                      ]
+                    },
+                    `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
+                    );
+                  })
+                ]
+              }
+            )
+          ] });
+        })()
+      ]
+    }
+  );
+}
+export {
+  VersionBadge
+};

package/dist/index.d.ts

@@ -18,7 +18,7 @@ import { TabDef as _TabDef } from './lib/tabs';
  *   })
  */
 export { siteConfig, defineSiteConfig, type SiteConfig, type VersionChip, } from './site-config';
-export { pages, groupedPages, groupedVisiblePages, initNavigation, getAdjacentPages, type PageMeta, type PageFrontmatter, type PageModule, type NavGroup, } from './lib/navigation';
+export { pages, groupedPages, groupedVisiblePages, initNavigation, getAdjacentPages, normalizePath, findPage, type PageMeta, type PageFrontmatter, type PageModule, type NavGroup, } from './lib/navigation';
 export { searchIndex, rawMarkdown, initSearchIndex, search, type SearchEntry, type SearchHit, } from './lib/search-index';
 export { searchPages, defaultResults, type SearchResult, type SubResult, } from './lib/pagefind-search';
 export { TABS, initTabs, tabForUrl, urlInTab, type TabDef } from './lib/tabs';
@@ -41,6 +41,7 @@ export { ThemeProvider, useTheme, type Theme } from './components/ThemeProvider'
 export { ThemeToggle } from './components/ThemeToggle';
 export { TOC } from './components/TOC';
 export { Topbar } from './components/Topbar';
+export { VersionBadge, type VersionBadgeProps } from './components/VersionBadge';
 export { Layout, useMerge } from './renderer/Layout';
 export interface InitDocsOptions {
     /** Site branding, URLs, version chips, git hash. */

package/dist/index.js

@@ -1,7 +1,7 @@
 import { defineSiteConfig } from "./site-config.js";
 import { siteConfig } from "./site-config.js";
 import { initNavigation } from "./lib/navigation.js";
-import { getAdjacentPages, groupedPages, groupedVisiblePages, pages } from "./lib/navigation.js";
+import { findPage, getAdjacentPages, groupedPages, groupedVisiblePages, normalizePath, pages } from "./lib/navigation.js";
 import { initSearchIndex } from "./lib/search-index.js";
 import { rawMarkdown, search, searchIndex } from "./lib/search-index.js";
 import { defaultResults, searchPages } from "./lib/pagefind-search.js";
@@ -26,6 +26,7 @@ import { ThemeProvider, useTheme } from "./components/ThemeProvider.js";
 import { ThemeToggle } from "./components/ThemeToggle.js";
 import { TOC } from "./components/TOC.js";
 import { Topbar } from "./components/Topbar.js";
+import { VersionBadge } from "./components/VersionBadge.js";
 import { Layout, useMerge } from "./renderer/Layout.js";
 function initDocs(opts) {
   defineSiteConfig(opts.site);
@@ -52,9 +53,11 @@ export {
   ThemeProvider,
   ThemeToggle,
   Topbar,
+  VersionBadge,
   defaultResults,
   defineSiteConfig,
   docKey,
+  findPage,
   getAdjacentPages,
   groupedPages,
   groupedVisiblePages,
@@ -63,6 +66,7 @@ export {
   initSearchIndex,
   initTabs,
   mdxComponents,
+  normalizePath,
   pages,
   rawMarkdown,
   search,

package/dist/lib/navigation.d.ts

@@ -29,6 +29,9 @@ export interface PageFrontmatter {
     draft?: boolean;
     hidden?: boolean;
     noindex?: boolean;
+    /** Shorthand for an internal developer note (studio's flag): implies
+     *  both `hidden: true` and `noindex: true`. */
+    dev?: boolean;
     tocLevel?: 2 | 3;
     fullscreen?: boolean;
 }
@@ -54,6 +57,18 @@ export declare const groupedPages: NavGroup[];
 /** Same shape, but filtered to only-visible pages. Equivalent to
  *  `groupedPages` when no page declares `hidden: true`. */
 export declare const groupedVisiblePages: NavGroup[];
+/** Normalize a pathname for comparison against `PageMeta.path`: strip any
+ *  query/hash and drop a trailing slash (except for root `/`). Vike's
+ *  prerender and client routing can disagree on the trailing slash — e.g.
+ *  a `/develop` prerender hydrating at `/develop/` — and a raw `===` match
+ *  then resolves the page on the server but not the client, which renders
+ *  *different* DOM (breadcrumb, `aria-current`) on each side and trips
+ *  React hydration. Normalizing both sides keeps SSR and hydration in step. */
+export declare function normalizePath(url: string): string;
+/** Resolve the `PageMeta` for a pathname, tolerant of a trailing slash.
+ *  Prefer this over `pages.find(p => p.path === urlPathname)` anywhere the
+ *  result drives rendered output, so server and client agree. */
+export declare function findPage(urlPathname: string): PageMeta | undefined;
 /**
  * Populate the navigation singletons from the site's eager page glob:
  *

package/dist/lib/navigation.js

@@ -2,6 +2,16 @@ const pages = [];
 const groupedPages = [];
 const groupedVisiblePages = [];
 let sectionOrderList = [];
+function normalizePath(url) {
+  if (!url) return "/";
+  const clean = url.split("?")[0].split("#")[0];
+  if (clean === "/") return "/";
+  return clean.replace(/\/+$/, "") || "/";
+}
+function findPage(urlPathname) {
+  const norm = normalizePath(urlPathname);
+  return pages.find((p) => p.path === norm);
+}
 function groupPages(items) {
   const map = /* @__PURE__ */ new Map();
   for (const p of items) {
@@ -18,6 +28,7 @@ function initNavigation(modules, sectionOrder = []) {
     const fm = mod.frontmatter ?? {};
     const dir = filePath.replace(/^.*?\bpages\//, "").replace(/\/\+Page\.mdx$/, "");
     const path = dir === "index" ? "/" : `/${dir}`;
+    const isDev = fm.dev === true;
     return {
       path,
       title: fm.title ?? dir,
@@ -25,8 +36,8 @@ function initNavigation(modules, sectionOrder = []) {
       order: fm.order ?? 99,
       description: fm.description,
       draft: fm.draft === true,
-      hidden: fm.hidden === true,
-      noindex: fm.noindex === true,
+      hidden: fm.hidden === true || isDev,
+      noindex: fm.noindex === true || isDev,
       tocLevel: fm.tocLevel,
       fullscreen: fm.fullscreen === true
     };
@@ -39,9 +50,10 @@ function initNavigation(modules, sectionOrder = []) {
   groupedVisiblePages.push(...groupPages(pages.filter((p) => !p.hidden)));
 }
 function getAdjacentPages(path, opts = {}) {
-  const here = pages.find((p) => p.path === path);
+  const norm = normalizePath(path);
+  const here = pages.find((p) => p.path === norm);
   const list = opts.includeHidden || here?.hidden ? pages : pages.filter((p) => !p.hidden);
-  const idx = list.findIndex((p) => p.path === path);
+  const idx = list.findIndex((p) => p.path === norm);
   return {
     current: idx >= 0 ? list[idx] : null,
     prev: idx > 0 ? list[idx - 1] : null,
@@ -49,9 +61,11 @@ function getAdjacentPages(path, opts = {}) {
   };
 }
 export {
+  findPage,
   getAdjacentPages,
   groupedPages,
   groupedVisiblePages,
   initNavigation,
+  normalizePath,
   pages
 };

package/dist/renderer/Layout.js

@@ -9,14 +9,14 @@ import { TOC } from "../components/TOC.js";
 import { DocFooter } from "../components/DocFooter.js";
 import { SearchPalette } from "../components/SearchPalette.js";
 import { mdxComponents } from "../components/mdx-components.js";
-import { pages } from "../lib/navigation.js";
+import { findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
 const MergeContext = createContext(false);
 const useMerge = () => useContext(MergeContext);
 function PageBreadcrumb() {
   const { urlPathname } = usePageContext();
-  const current = pages.find((p) => p.path === urlPathname);
+  const current = findPage(urlPathname);
   const merged = useMerge();
   if (!current) return null;
   return /* @__PURE__ */ jsxs(
@@ -81,7 +81,7 @@ function HeadSync() {
   const { urlPathname } = usePageContext();
   useEffect(() => {
     if (typeof document === "undefined") return;
-    const current = pages.find((p) => p.path === urlPathname);
+    const current = findPage(urlPathname);
     document.title = current ? `${current.title} — ${siteConfig.brand}` : siteConfig.brand;
     const desc = current?.description ?? "";
     let tag = document.querySelector('meta[name="description"]');
@@ -111,7 +111,7 @@ function HeadSync() {
 }
 function Layout({ children }) {
   const { urlPathname } = usePageContext();
-  const current = pages.find((p) => p.path === urlPathname);
+  const current = findPage(urlPathname);
   const isFullscreen = current?.fullscreen === true;
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");

package/dist/renderer/onRenderHtml.js

@@ -3,14 +3,14 @@ import ReactDOMServer from "react-dom/server";
 import { Layout } from "./Layout.js";
 import { PageContextProvider } from "vike-react/usePageContext";
 import { dangerouslySkipEscape, escapeInject } from "vike/server";
-import { pages } from "../lib/navigation.js";
+import { findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 async function onRenderHtml(pageContext) {
   const { Page, pageProps, urlPathname } = pageContext;
   const html = ReactDOMServer.renderToString(
     /* @__PURE__ */ jsx(PageContextProvider, { pageContext, children: /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Page, { ...pageProps }) }) })
   );
-  const current = pages.find((p) => p.path === urlPathname);
+  const current = findPage(urlPathname);
   const title = current ? `${current.title} — ${siteConfig.brand}` : siteConfig.brand;
   const description = current?.description ?? "";
   const mdHref = current && !current.noindex ? current.path === "/" ? "/index.md" : `${current.path}.md` : null;

package/dist/site-config.d.ts

@@ -55,6 +55,10 @@ export interface SiteConfig {
      *  "Edit this page" link (`<docsRepoUrl>/edit/<docsBranch>/<docsPagesPath>/…`).
      *  Defaults to 'docs/pages'. */
     docsPagesPath?: string;
+    /** Topbar theme control style. `'cycle'` (default) is a single button
+     *  that steps light → system → dark; `'segmented'` is the three-button
+     *  slider with a sliding indicator (the uikit/dreamlake docs style). */
+    themeToggle?: 'cycle' | 'segmented';
 }
 export declare const siteConfig: SiteConfig;
 /** Merge site-provided values into the singleton (mutates in place). */

package/dist/site-config.js

@@ -10,7 +10,8 @@ const siteConfig = {
   summary: "",
   versionChips: [],
   gitHash: "",
-  docsPagesPath: "docs/pages"
+  docsPagesPath: "docs/pages",
+  themeToggle: "cycle"
 };
 function defineSiteConfig(cfg) {
   Object.assign(siteConfig, cfg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",

package/templates/netlify.example.toml

@@ -31,3 +31,14 @@ COREPACK_INTEGRITY_KEYS = "0"
 
 [context.branch-deploy]
   # Applies to every non-production branch push.
+
+# ─── Version switcher (VersionBadge) ─────────────────────────────────
+# The version-switcher dropdown on old v/* branch deploys fetches the
+# production manifest cross-origin so its list never goes stale — that
+# needs a CORS header on /versions.json.
+
+[[headers]]
+for = "/versions.json"
+
+[headers.values]
+Access-Control-Allow-Origin = "*"