@dreamlake/dockit 0.2.14 → 0.2.15

package/dist/components/SearchPalette.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { loadSearchPreview } from "../lib/search-preview.js";
 import { useState, useRef, useEffect } from "react";
 import { defaultResults, searchPages } from "../lib/pagefind-search.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
@@ -76,20 +77,13 @@ function SearchPalette({ open, onClose, query }) {
   const [pageHtml, setPageHtml] = useState("");
   const pageCacheRef = useRef(/* @__PURE__ */ new Map());
   const activePath = hits[active]?.path;
-  useEffect(() => {
-    if (!activePath || isSingleCol || /^https?:\/\//.test(activePath)) {
-      setPageHtml("");
-      return;
-    }
-    const cached = pageCacheRef.current.get(activePath);
-    if (cached !== void 0) {
-      setPageHtml(cached);
-      return;
-    }
-    setPageHtml("");
-    let cancelled = false;
-    fetch(activePath).then((r) => r.ok ? r.text() : "").then((html) => {
-      if (cancelled) return;
+  useEffect(() => loadSearchPreview({
+    open,
+    path: activePath,
+    singleColumn: isSingleCol,
+    cache: pageCacheRef.current,
+    onPreview: setPageHtml,
+    extract: (html) => {
       const doc = new DOMParser().parseFromString(html, "text/html");
       const main = doc.querySelector("[data-pagefind-body]");
       main?.querySelectorAll("[data-pagefind-ignore], script, style").forEach((el) => el.remove());
@@ -99,16 +93,9 @@ function SearchPalette({ open, onClose, query }) {
         el.removeAttribute("style");
         el.removeAttribute("class");
       });
-      const content = main?.innerHTML ?? "";
-      pageCacheRef.current.set(activePath, content);
-      setPageHtml(content);
-    }).catch(() => {
-      if (!cancelled) setPageHtml("");
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [active, activePath, isSingleCol]);
+      return main?.innerHTML ?? "";
+    }
+  }), [open, activePath, isSingleCol]);
   useEffect(() => {
     if (!open) return;
     setActive(0);

package/dist/components/Sidebar.js

@@ -51,7 +51,7 @@ function Sidebar() {
     "aside",
     {
       "aria-label": "Sections",
-      className: "hidden md:flex sticky overflow-y-auto flex-col",
+      className: "doc-sidebar hidden md:flex sticky overflow-y-auto flex-col",
       style: { top: 40, height: "calc(100vh - 40px)", padding: "22px 12px 32px 18px", gap: 2 },
       children: groups.map((group) => {
         const soleSection = groups.length === 1;
@@ -65,7 +65,7 @@ function Sidebar() {
               className: "group sidebar-section",
               "data-folded": isFolded || void 0,
               children: [
-                /* @__PURE__ */ jsx("span", { children: group.label }),
+                /* @__PURE__ */ jsx("span", { title: group.label, children: group.label }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {

package/dist/components/Topbar.js

@@ -342,7 +342,9 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
                   label: chip.label,
                   version: chip.version,
                   collapsed: merged,
-                  dropdown: chip.dropdown
+                  dropdown: chip.dropdown,
+                  prefix: chip.prefix,
+                  manifestUrl: chip.manifestUrl
                 },
                 chip.label
               )),

package/dist/components/VersionBadge.d.ts

@@ -1,7 +1,7 @@
 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
+    /** Build-time version shown in the right segment (with dropdown enabled, 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).
@@ -10,6 +10,10 @@ export interface VersionBadgeProps {
     /** Turn the version segment into a popover listing the deploys from
      *  `/versions.json`. */
     dropdown?: boolean;
+    /** Text before versions; defaults to 'v'. Use '' for commit previews. */
+    prefix?: string;
+    /** Manifest path or absolute URL; defaults to '/versions.json'. */
+    manifestUrl?: string;
 }
 /**
  * Two-segment version chip: `[ label | v<version> ]`.
@@ -33,4 +37,4 @@ export interface VersionBadgeProps {
  * radius, hairline border. The two-segment (label | version) layout is
  * bespoke, so this component does not compose `Chip` internally.
  */
-export declare function VersionBadge({ label, version, collapsed, dropdown, }: VersionBadgeProps): import("react").JSX.Element;
+export declare function VersionBadge({ label, version, collapsed, dropdown, prefix, manifestUrl, }: VersionBadgeProps): import("react").JSX.Element;

package/dist/components/VersionBadge.js

@@ -1,46 +1,39 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { siteConfig } from "../site-config.js";
+import { badgeScope, manifestForScope, resolveBadgeVersion, loadVersionManifest } from "../lib/version-badge.js";
 const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
 function VersionBadge({
   label,
   version,
   collapsed = false,
-  dropdown = false
+  dropdown = false,
+  prefix = "v",
+  manifestUrl = "/versions.json"
 }) {
   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 [manifestState, setManifestState] = useState(null);
+  const [hostname, setHostname] = useState("");
+  const scope = badgeScope(label, version, dropdown, manifestUrl);
+  const manifest = manifestForScope(manifestState, scope);
+  const displayVersion = resolveBadgeVersion(version, dropdown, hostname, manifest, manifestUrl);
   const wrapperRef = useRef(null);
   useEffect(() => {
+    setHostname(window.location.hostname);
+  }, []);
+  useEffect(() => {
+    setOpen(false);
+    setManifestState(null);
     if (!dropdown) return;
     let cancelled = false;
-    const origin = (siteConfig.url || "").replace(/\/+$/, "");
-    const isLocal = typeof window !== "undefined" && /^(localhost|127\.|0\.0\.0\.0)/.test(window.location.hostname);
-    const sameOrigin = () => fetch("/versions.json").then((r) => r.ok ? r.json() : null);
-    const fromOrigin = () => fetch(`${origin}/versions.json`).then((r) => r.ok ? r.json() : Promise.reject(new Error(String(r.status))));
-    const load = !origin ? sameOrigin() : isLocal ? sameOrigin().then((m) => m ?? fromOrigin().catch(() => null)) : fromOrigin().catch(sameOrigin);
-    load.then((m) => {
-      if (!cancelled && m) setManifest(m);
-    }).catch(() => {
+    loadVersionManifest(manifestUrl, siteConfig.url || "", window.location.hostname).then((manifest2) => {
+      if (!cancelled && manifest2) setManifestState({ scope, manifest: manifest2 });
     });
     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]);
+  }, [scope, dropdown, manifestUrl]);
   useEffect(() => {
     if (!open) return;
     function onDown(e) {
@@ -144,11 +137,11 @@ function VersionBadge({
             },
             "aria-haspopup": "listbox",
             "aria-expanded": open,
-            title: `Switch ${label} version (current v${displayVersion})`,
+            title: `Switch ${label} version (current ${prefix}${displayVersion})`,
             className: "text-doc-template-ink hover:bg-doc-template-search",
             style: versionSegStyle,
             children: [
-              "v",
+              prefix,
               displayVersion,
               chevron
             ]
@@ -159,7 +152,7 @@ function VersionBadge({
             className: "inline-flex items-center text-doc-template-ink",
             style: versionSegStyle,
             children: [
-              "v",
+              prefix,
               displayVersion
             ]
           }
@@ -250,11 +243,11 @@ function VersionBadge({
                       children: [
                         name,
                         name === "stable" && manifest.stable && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, marginLeft: 6 }, children: [
-                          "v",
+                          prefix,
                           manifest.stable
                         ] }),
                         name === "latest" && manifest.current && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, marginLeft: 6 }, children: [
-                          "v",
+                          prefix,
                           manifest.current
                         ] })
                       ]
@@ -293,7 +286,7 @@ function VersionBadge({
                         },
                         children: [
                           /* @__PURE__ */ jsxs("span", { children: [
-                            "v",
+                            prefix,
                             v.version,
                             isCurrent && /* @__PURE__ */ jsx("span", { style: { opacity: 0.55, marginLeft: 6 }, children: "current" })
                           ] }),

package/dist/index.d.ts

@@ -11,8 +11,8 @@ import { TabEntry as _TabEntry } from './lib/tabs';
  *
  *   initDocs({
  *     site: { brand: 'DreamLake', subtitle: 'Dockit', … },
- *     pages: import.meta.glob('./pages/** /+Page.mdx', { eager: true }),
- *     rawPages: import.meta.glob('./pages/** /+Page.mdx', { eager: true, query: '?raw', import: 'default' }),
+ *     pageMetadata: import.meta.glob('./pages/** /+Page.mdx', { eager: true, query: '?frontmatter', import: 'default' }),
+ *     rawPages: import.meta.env.DEV ? import.meta.glob('./pages/** /+Page.mdx', { eager: true, query: '?raw', import: 'default' }) : undefined,
  *     sectionOrder: ['Getting started', 'Reference'],
  *     tabs: [{ id: 'overview', label: 'Get Started', numeral: 'I', landing: '/', urlPrefix: '/get-started' }],
  *   })
@@ -47,12 +47,17 @@ export { Layout, useMerge } from './renderer/Layout';
 export interface InitDocsOptions {
     /** Site branding, URLs, version chips, git hash. */
     site: Partial<_SiteConfig>;
-    /** Eager glob of every `+Page.mdx` module (frontmatter drives nav). */
-    pages: Record<string, {
+    /** Metadata-only glob: `{ eager: true, query: '?frontmatter', import: 'default' }`.
+     *  Keeps compiled page bodies out of the shared startup bundle.
+     *  Use this or `pages`, not both. */
+    pageMetadata?: Record<string, _PageFrontmatter>;
+    /** Backward-compatible module map. Prefer `pageMetadata` for large sites. */
+    pages?: Record<string, {
         frontmatter?: _PageFrontmatter;
     }>;
-    /** Eager `?raw` glob of the same pages — feeds the dev search index and
-     *  the palette's markdown preview. Optional but recommended. */
+    /** Raw sources for fallback/dev search. Usually pass a `?raw` glob only
+     *  when `import.meta.env.DEV`; production Pagefind searches built HTML.
+     *  Omitting this retains title/description search if Pagefind is unavailable. */
     rawPages?: Record<string, string>;
     /** Authored sidebar section order; unknown sections fall to the end. */
     sectionOrder?: string[];

package/dist/index.js

@@ -30,8 +30,13 @@ import { Topbar } from "./components/Topbar.js";
 import { VersionBadge } from "./components/VersionBadge.js";
 import { Layout, useMerge } from "./renderer/Layout.js";
 function initDocs(opts) {
+  if (opts.pages && opts.pageMetadata) {
+    throw new Error("initDocs: provide pageMetadata or pages, not both");
+  }
+  const modules = opts.pageMetadata ? Object.fromEntries(Object.entries(opts.pageMetadata).map(([file, frontmatter]) => [file, { frontmatter }])) : opts.pages;
+  if (!modules) throw new Error("initDocs: pageMetadata or pages is required");
   defineSiteConfig(opts.search ? { ...opts.site, search: opts.search } : opts.site);
-  initNavigation(opts.pages, opts.sectionOrder ?? []);
+  initNavigation(modules, opts.sectionOrder ?? []);
   initSearchIndex(opts.rawPages ?? {});
   initTabs(opts.tabs ?? []);
 }

package/dist/lib/mdx-frontmatter-loader.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+/** Load only YAML metadata, without importing or compiling the MDX body. */
+export declare function mdxFrontmatterLoader(): Plugin;

package/dist/lib/mdx-frontmatter-loader.js

@@ -0,0 +1,29 @@
+import { readFile } from "node:fs/promises";
+import { parse } from "yaml";
+function mdxFrontmatterLoader() {
+  const prefix = "\0dockit-frontmatter:";
+  return {
+    name: "dockit-frontmatter",
+    enforce: "pre",
+    async resolveId(id, importer) {
+      if (!id.endsWith(".mdx?frontmatter")) return null;
+      const resolved = await this.resolve(id.slice(0, -"?frontmatter".length), importer, { skipSelf: true });
+      return resolved ? prefix + resolved.id : null;
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return null;
+      const file = id.slice(prefix.length);
+      this.addWatchFile(file);
+      const source = await readFile(file, "utf8");
+      const match = source.match(/^\uFEFF?---\r?\n([\s\S]*?)\r?\n(?:---|\.\.\.)(?:\r?\n|$)/);
+      const metadata = match ? parse(match[1]) ?? {} : {};
+      if (typeof metadata !== "object" || Array.isArray(metadata)) {
+        throw new Error(`Expected a YAML frontmatter mapping in ${file}`);
+      }
+      return `export default ${JSON.stringify(metadata)};`;
+    }
+  };
+}
+export {
+  mdxFrontmatterLoader
+};

package/dist/lib/search-preview.d.ts

@@ -0,0 +1,10 @@
+/** Start one visible search preview; return the React effect cleanup. */
+export declare function loadSearchPreview({ open, path, singleColumn, cache, onPreview, extract, request, }: {
+    open: boolean;
+    path?: string;
+    singleColumn: boolean;
+    cache: Map<string, string>;
+    onPreview: (html: string) => void;
+    extract: (html: string) => string;
+    request?: typeof fetch;
+}): (() => void) | undefined;

package/dist/lib/search-preview.js

@@ -0,0 +1,33 @@
+function loadSearchPreview({
+  open,
+  path,
+  singleColumn,
+  cache,
+  onPreview,
+  extract,
+  request = fetch
+}) {
+  if (!open || !path || singleColumn || /^https?:\/\//.test(path)) {
+    onPreview("");
+    return;
+  }
+  const cached = cache.get(path);
+  if (cached !== void 0) {
+    onPreview(cached);
+    return;
+  }
+  onPreview("");
+  const controller = new AbortController();
+  request(path, { signal: controller.signal }).then((response) => response.ok ? response.text() : "").then((html) => {
+    if (controller.signal.aborted) return;
+    const content = extract(html);
+    cache.set(path, content);
+    onPreview(content);
+  }).catch(() => {
+    if (!controller.signal.aborted) onPreview("");
+  });
+  return () => controller.abort();
+}
+export {
+  loadSearchPreview
+};

package/dist/lib/version-badge.d.ts

@@ -0,0 +1,22 @@
+/** State and resolution helpers shared by independently scoped version badges. */
+export interface VersionEntry {
+    version: string;
+    url: string;
+    date?: string;
+}
+export interface VersionManifest {
+    current?: string;
+    stable?: string;
+    aliases?: Record<string, string>;
+    versions?: VersionEntry[];
+}
+export interface BadgeManifestState {
+    scope: string;
+    manifest: VersionManifest;
+}
+export declare function badgeScope(label: string, version: string, dropdown: boolean, manifestUrl: string): string;
+/** Never render a previous tab's manifest, even before effects have run. */
+export declare function manifestForScope(state: BadgeManifestState | null, scope: string): VersionManifest | null;
+export declare function resolveBadgeVersion(version: string, dropdown: boolean, hostname: string, manifest: VersionManifest | null, manifestUrl?: string): string;
+/** Production first, with a same-origin fallback; local development reverses it. */
+export declare function loadVersionManifest(manifestUrl: string, origin: string, hostname: string, request?: typeof fetch): Promise<VersionManifest | null>;

package/dist/lib/version-badge.js

@@ -0,0 +1,44 @@
+function badgeScope(label, version, dropdown, manifestUrl) {
+  return JSON.stringify([label, version, dropdown, manifestUrl]);
+}
+function manifestForScope(state, scope) {
+  return state?.scope === scope ? state.manifest : null;
+}
+function resolveBadgeVersion(version, dropdown, hostname, manifest, manifestUrl = "/versions.json") {
+  if (!dropdown) return version;
+  const match = hostname.match(/^v(\d+(?:-\d+)+(?:[a-z]+\d+)?)\./i);
+  if (match) {
+    const fromHost = match[1].replace(/-/g, ".");
+    if (manifestUrl === "/versions.json" || manifest?.versions?.some((entry) => entry.version === fromHost)) {
+      return fromHost;
+    }
+  }
+  if (hostname.startsWith("stable.") && manifest?.stable) return manifest.stable;
+  return manifest?.current || version;
+}
+async function loadVersionManifest(manifestUrl, origin, hostname, request = fetch) {
+  const read = async (url) => {
+    try {
+      const response = await request(url);
+      return response.ok ? await response.json() : null;
+    } catch {
+      return null;
+    }
+  };
+  if (/^(?:https?:)?\/\//.test(manifestUrl)) return read(manifestUrl);
+  const localUrl = `/${manifestUrl.replace(/^\/+/, "")}`;
+  const productionUrl = origin ? `${origin.replace(/\/+$/, "")}${localUrl}` : localUrl;
+  const local = /^(localhost|127\.|0\.0\.0\.0)/.test(hostname);
+  const urls = [...new Set(local ? [localUrl, productionUrl] : [productionUrl, localUrl])];
+  for (const url of urls) {
+    const manifest = await read(url);
+    if (manifest) return manifest;
+  }
+  return null;
+}
+export {
+  badgeScope,
+  loadVersionManifest,
+  manifestForScope,
+  resolveBadgeVersion
+};

package/dist/renderer/Layout.js

@@ -138,7 +138,7 @@ function Layout({ children }) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: isFullscreen ? "grid items-start mx-auto grid-cols-[minmax(0,1fr)] md:grid-cols-[240px_minmax(0,1fr)]" : "grid items-start mx-auto min-h-screen grid-cols-[minmax(0,1fr)] md:grid-cols-[240px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)_240px]",
+        className: isFullscreen ? "grid items-start mx-auto grid-cols-[minmax(0,1fr)] md:grid-cols-[var(--doc-sidebar-width,280px)_minmax(0,1fr)]" : "grid items-start mx-auto min-h-screen grid-cols-[minmax(0,1fr)] md:grid-cols-[var(--doc-sidebar-width,280px)_minmax(0,1fr)] lg:grid-cols-[var(--doc-sidebar-width,280px)_minmax(0,1fr)_var(--doc-toc-width,280px)]",
         style: isFullscreen ? { height: "calc(100vh - 40px)" } : { maxWidth: 1320 },
         children: [
           /* @__PURE__ */ jsx(Sidebar, {}),

package/dist/renderer/onRenderClient.js

@@ -8,7 +8,7 @@ async function onRenderClient(pageContext) {
   const container = document.getElementById("root");
   const tree = /* @__PURE__ */ jsx(PageContextProvider, { pageContext, children: /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Page, { ...pageProps }) }) });
   if (!root) {
-    if (container.innerHTML !== "") {
+    if (pageContext.isHydration && container.innerHTML !== "") {
       root = ReactDOM.hydrateRoot(container, tree);
     } else {
       root = ReactDOM.createRoot(container);

package/dist/site-config.d.ts

@@ -16,6 +16,10 @@ export interface VersionChip {
     label: string;
     version: string;
     dropdown?: boolean;
+    /** Version prefix; defaults to 'v'. Use '' for commit previews. */
+    prefix?: string;
+    /** Product-specific manifest path or URL; defaults to '/versions.json'. */
+    manifestUrl?: string;
 }
 /** One remote Pagefind index merged into the site's own search via
  *  `pagefind.mergeIndex()` — Pagefind's first-class multisite API. The

package/dist/styles.css

@@ -308,3 +308,10 @@
   from { opacity: 0; transform: scale(0.6) rotate(-90deg); }
   to   { opacity: 1; transform: scale(1)   rotate(0deg); }
 }
+
+/* Stable, narrow scrollbar space keeps section labels from reflowing on overflow. */
+.doc-sidebar { min-width: 0; scrollbar-width: thin; scrollbar-gutter: stable; }
+.doc-sidebar::-webkit-scrollbar { width: 6px; }
+.doc-sidebar::-webkit-scrollbar-thumb { background: var(--color-doc-template-faint-strong); border-radius: 3px; }
+.doc-sidebar .sidebar-section > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.doc-sidebar .sidebar-section > span:last-child { flex-shrink: 0; white-space: nowrap; }

package/dist/vike.d.ts

@@ -7,6 +7,7 @@
 declare const _default: {
     passToClient: string[];
     clientRouting: boolean;
+    hydrationCanBeAborted: boolean;
     prerender: boolean;
 };
 export default _default;

package/dist/vike.js

@@ -1,6 +1,8 @@
 const vike = {
   passToClient: ["pageProps", "urlPathname"],
   clientRouting: true,
+  // React can supersede hydration when a reader follows a link immediately.
+  hydrationCanBeAborted: true,
   prerender: true
 };
 export {

package/dist/vite.js

@@ -1,3 +1,4 @@
+import { mdxFrontmatterLoader } from "./lib/mdx-frontmatter-loader.js";
 import { readFile } from "node:fs/promises";
 import react from "@vitejs/plugin-react";
 import vike from "vike/plugin";
@@ -31,6 +32,7 @@ function dockit() {
   return [
     tailwindcss(),
     mdxRawLoader(),
+    mdxFrontmatterLoader(),
     {
       enforce: "pre",
       ...mdx({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",
@@ -60,7 +60,8 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
-    "shiki": "^1.24.0"
+    "shiki": "^1.24.0",
+    "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@mdx-js/react": "^3.1.0",
@@ -78,6 +79,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs"
   }
 }