@dreamlake/dockit 0.2.31 → 0.2.33

package/dist/components/ContinuousReading.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/** Only the entry page is rendered on the server and indexed by Pagefind.
+ * Appended MDX modules retain their React components and interactions. */
+export declare function ContinuousReading({ children, path, onActive, }: {
+    children: ReactNode;
+    path: string;
+    onActive: (path: string) => void;
+}): import("react").JSX.Element;

package/dist/components/ContinuousReading.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, Component } from "react";
+import { usePageContext, PageContextProvider } from "vike-react/usePageContext";
+import { nextReadingPage, pageLoader, ReadingPageContext } from "../lib/reading.js";
+class ArticleBoundary extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
+      "This page could not be displayed here. ",
+      /* @__PURE__ */ jsx("a", { href: this.props.path, children: "Open the page" }),
+      "."
+    ] }) : this.props.children;
+  }
+}
+function ContinuousReading({
+  children,
+  path,
+  onActive
+}) {
+  const context = usePageContext();
+  const [enabled, setEnabled] = useState(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => setReady(true), []);
+  const [articles, setArticles] = useState([]);
+  const [error, setError] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  const sentinel = useRef(null);
+  const root = useRef(null);
+  const lastPath = articles.at(-1)?.path ?? path;
+  const next = nextReadingPage(lastPath);
+  useEffect(() => {
+    if (!enabled || !next || error) return;
+    const target = sentinel.current;
+    if (!target || typeof IntersectionObserver === "undefined") return;
+    let cancelled = false;
+    let started = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (started || !entries.some((e) => e.isIntersecting)) return;
+        started = true;
+        setBusy(true);
+        pageLoader(next.path)().then((module) => {
+          if (!cancelled)
+            setArticles((items) => [...items, { path: next.path, Page: module.default }]);
+        }).catch(() => {
+          if (!cancelled) setError(true);
+        }).finally(() => {
+          if (!cancelled) setBusy(false);
+        });
+      },
+      { rootMargin: "0px 0px 240px 0px" }
+    );
+    observer.observe(target);
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [enabled, next?.path, error, attempt]);
+  useEffect(() => {
+    if (!enabled) {
+      onActive(path);
+      return;
+    }
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const sections = Array.from(
+        root.current?.querySelectorAll("[data-doc-page]") ?? []
+      );
+      const active = sections.filter((s) => s.getBoundingClientRect().top <= 130).at(-1) ?? sections[0];
+      if (active?.dataset.docPage) onActive(active.dataset.docPage);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [enabled, articles, onActive, path]);
+  return /* @__PURE__ */ jsxs("div", { ref: root, children: [
+    /* @__PURE__ */ jsxs("label", { className: "doc-reading-toggle", "data-pagefind-ignore": true, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          disabled: !ready,
+          checked: enabled,
+          onChange: (e) => {
+            setEnabled(e.target.checked);
+            if (!e.target.checked) {
+              setArticles([]);
+              setBusy(false);
+              setError(false);
+              onActive(path);
+            }
+          }
+        }
+      ),
+      " ",
+      "Keep scrolling"
+    ] }),
+    /* @__PURE__ */ jsx("section", { "data-doc-page": path, children: /* @__PURE__ */ jsx(ReadingPageContext.Provider, { value: { path, prefix: "" }, children }) }),
+    articles.map(({ path: articlePath, Page }) => /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-doc-page": articlePath,
+        className: "doc-reading-page",
+        "data-pagefind-ignore": true,
+        children: [
+          /* @__PURE__ */ jsx("a", { className: "doc-reading-permalink", href: articlePath, children: "Open this page ↗" }),
+          /* @__PURE__ */ jsx(ArticleBoundary, { path: articlePath, children: /* @__PURE__ */ jsx(PageContextProvider, { pageContext: { ...context, urlPathname: articlePath }, children: /* @__PURE__ */ jsx(
+            ReadingPageContext.Provider,
+            {
+              value: {
+                path: articlePath,
+                prefix: `doc-${encodeURIComponent(articlePath)}--`
+              },
+              children: /* @__PURE__ */ jsx(Page, {})
+            }
+          ) }) })
+        ]
+      },
+      articlePath
+    )),
+    enabled && next && /* @__PURE__ */ jsx("div", { ref: sentinel, className: "doc-reading-next", "data-pagefind-ignore": true, children: error ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
+      "Could not load ",
+      next.title,
+      ".",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setError(false);
+            setAttempt((n) => n + 1);
+          },
+          children: "Retry"
+        }
+      ),
+      " ",
+      "or ",
+      /* @__PURE__ */ jsx("a", { href: next.path, children: "open the page" }),
+      "."
+    ] }) : /* @__PURE__ */ jsxs("p", { role: busy ? "status" : void 0, children: [
+      busy ? "Loading " : "Up next: ",
+      /* @__PURE__ */ jsx("a", { href: next.path, children: next.title })
+    ] }) })
+  ] });
+}
+export {
+  ContinuousReading
+};

package/dist/components/DocFooter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { usePageContext } from "vike-react/usePageContext";
+import { useDocPath } from "../lib/reading.js";
 import { getAdjacentPages } from "../lib/navigation.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 const LINK = {
@@ -21,7 +21,7 @@ const LABEL = {
   color: "var(--color-doc-template-muted)"
 };
 function DocFooter() {
-  const { urlPathname } = usePageContext();
+  const urlPathname = useDocPath();
   const [showHidden] = useHiddenToggle();
   const { prev, next } = getAdjacentPages(urlPathname, { includeHidden: showHidden });
   if (!prev && !next) return null;

package/dist/components/Preview.d.ts

@@ -12,5 +12,10 @@ export interface PreviewProps {
     defaultTab?: 'preview' | 'source' | 'data';
     /** Force a height for the preview pane. */
     height?: number | string;
+    /** `split` shows the source and the live render side by side (source on
+     *  the left), stacking source above preview when the frame is narrower
+     *  than 560px. The preview pane is then a size container, so a demo's
+     *  container queries follow the pane's width. Default `tabs`. */
+    layout?: 'tabs' | 'split';
 }
-export declare function Preview({ children, source, dataSource, filename, defaultTab, height, }: PreviewProps): import("react").JSX.Element;
+export declare function Preview({ children, source, dataSource, filename, defaultTab, height, layout, }: PreviewProps): import("react").JSX.Element;

package/dist/components/Preview.js

@@ -161,9 +161,12 @@ function Preview({
   dataSource,
   filename,
   defaultTab = "preview",
-  height
+  height,
+  layout = "tabs"
 }) {
-  const [tab, setTab] = useState(defaultTab);
+  const split = layout === "split";
+  const [selectedTab, setTab] = useState(defaultTab);
+  const tab = split ? "source" : selectedTab;
   const [copied, setCopied] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
@@ -187,7 +190,8 @@ function Preview({
     "div",
     {
       "data-line-numbers": showLines ? "on" : "off",
-      className: "border border-doc-template-faint bg-doc-template-panel",
+      ...split ? { "data-preview-layout": "split" } : null,
+      className: "dockit-preview border border-doc-template-faint bg-doc-template-panel",
       style: fullscreen ? {
         // Full-viewport overlay. `--color-doc-template-bg` is the page
         // surface token so the backdrop matches the site in both light
@@ -213,7 +217,7 @@ function Preview({
               background: "color-mix(in srgb, var(--color-doc-template-ink) 3%, transparent)"
             },
             children: [
-              /* @__PURE__ */ jsx("div", { style: { display: "inline-flex", gap: 2 }, role: "tablist", children: ["preview", "source", ...dataSource ? ["data"] : []].map((t) => {
+              split ? /* @__PURE__ */ jsx("span", { style: { ...TAB, color: "var(--color-doc-template-muted)", cursor: "default", display: "inline-flex", alignItems: "center" }, children: "Source · Preview" }) : /* @__PURE__ */ jsx("div", { style: { display: "inline-flex", gap: 2 }, role: "tablist", children: ["preview", "source", ...dataSource ? ["data"] : []].map((t) => {
                 const active = t === tab;
                 return /* @__PURE__ */ jsx(
                   "button",
@@ -285,7 +289,31 @@ function Preview({
             ]
           }
         ),
-        tab === "preview" ? /* @__PURE__ */ jsxs(
+        split ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "dockit-preview-split",
+            style: fullscreen ? { flex: 1, minHeight: 0, overflow: "auto" } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dockit-preview-split-source",
+                  style: { background: "var(--color-doc-template-code)", minWidth: 0 },
+                  children: /* @__PURE__ */ jsx(HighlightedSource, { code: source, filename })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dockit-preview-split-render",
+                  style: { padding: 24, minHeight: 80, minWidth: 0, ...height ? { height } : null },
+                  children
+                }
+              )
+            ]
+          }
+        ) : tab === "preview" ? /* @__PURE__ */ jsxs(
           "div",
           {
             ...fullscreen ? { "data-preview-fill": "" } : null,

package/dist/components/Sidebar.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
-import { usePageContext } from "vike-react/usePageContext";
+import { useDocPath } from "../lib/reading.js";
 import { normalizePath, groupedPages, groupedVisiblePages } from "../lib/navigation.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 import { tabForUrl, urlInTab } from "../lib/tabs.js";
@@ -14,7 +14,7 @@ function loadCollapsed() {
   }
 }
 function Sidebar() {
-  const { urlPathname } = usePageContext();
+  const urlPathname = useDocPath();
   const currentPath = normalizePath(urlPathname);
   const [showHidden] = useHiddenToggle();
   const allGroups = showHidden ? groupedPages : groupedVisiblePages;

package/dist/components/TOC.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from "react";
-import { usePageContext } from "vike-react/usePageContext";
+import { useDocPath } from "../lib/reading.js";
 import { normalizePath, findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
@@ -48,10 +48,10 @@ function scrollToHeading(e, id) {
   const marginTop = parseFloat(cs.scrollMarginTop) || 0;
   const targetY = target.getBoundingClientRect().top + window.scrollY - marginTop;
   animateScrollTo(targetY);
-  history.replaceState(null, "", `#${id}`);
+  if (!target.closest("[data-doc-page]")) history.replaceState(history.state, "", `#${id}`);
 }
 function TOC() {
-  const { urlPathname } = usePageContext();
+  const urlPathname = useDocPath();
   const currentPath = normalizePath(urlPathname);
   const [showDeveloperLinks] = useHiddenToggle();
   const mdHref = (() => {
@@ -137,7 +137,7 @@ function TOC() {
     return result;
   }, [headings, collapsedH2s]);
   useEffect(() => {
-    const main = document.querySelector("main.doc-content");
+    const main = document.querySelector(`[data-doc-page="${CSS.escape(urlPathname)}"]`) ?? document.querySelector("main.doc-content");
     if (!main) {
       setHeadings([]);
       return;
@@ -315,7 +315,7 @@ function TOC() {
         const prev = body.querySelector('a[aria-current="location"]');
         if (prev) prev.removeAttribute("aria-current");
         if (id) {
-          const next = body.querySelector(`a[href="#${CSS.escape(id)}"]`);
+          const next = body.querySelector(`a[data-toc-target="${CSS.escape(id)}"]`);
           if (next) next.setAttribute("aria-current", "location");
         }
       }
@@ -339,7 +339,7 @@ function TOC() {
   }, [headings, collapsedH2s]);
   useEffect(() => {
     if (!foldVersion || !activeIdRef.current || !bodyRef.current) return;
-    const link = bodyRef.current.querySelector(`a[href="#${CSS.escape(activeIdRef.current)}"]`);
+    const link = bodyRef.current.querySelector(`a[data-toc-target="${CSS.escape(activeIdRef.current)}"]`);
     if (link) link.scrollIntoView({ block: "nearest", behavior: "auto" });
   }, [foldVersion]);
   function applyRailDOM(start, len) {
@@ -550,7 +550,8 @@ function TOC() {
                     children: /* @__PURE__ */ jsxs(
                       "a",
                       {
-                        href: `#${h.id}`,
+                        href: h.el.closest("[data-doc-page]") ? `${urlPathname}#${h.el.dataset.docAnchor ?? h.id}` : `#${h.id}`,
+                        "data-toc-target": h.id,
                         onClick: (e) => scrollToHeading(e, h.id),
                         "data-level": h.level,
                         className: "toc-link",

package/dist/components/Topbar.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useLayoutEffect } from "react";
-import { usePageContext } from "vike-react/usePageContext";
+import { useDocPath } from "../lib/reading.js";
 import { findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
@@ -36,7 +36,7 @@ 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 urlPathname = useDocPath();
   const current = findPage(urlPathname);
   const [showDeveloperLinks] = useHiddenToggle();
   const hasTabs = TABS.length > 0;

package/dist/components/mdx-components.d.ts

@@ -14,6 +14,9 @@ export declare const mdxComponents: {
     h1: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
     h2: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
     h3: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
+    h4: ({ id, ...props }: ComponentPropsWithoutRef<"h4">) => import("react").JSX.Element;
+    h5: ({ id, ...props }: ComponentPropsWithoutRef<"h4">) => import("react").JSX.Element;
+    h6: ({ id, ...props }: ComponentPropsWithoutRef<"h4">) => import("react").JSX.Element;
     p: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
     ul: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">>;
     ol: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref">>;

package/dist/components/mdx-components.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useReadingPage, readingHref } from "../lib/reading.js";
 import { useContext, createContext, useState } from "react";
 import { CodeBlock } from "./CodeBlock.js";
 import { Table } from "./Table.js";
@@ -39,12 +40,23 @@ const CheckIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-function HeadingAnchor({ id, label }) {
+function HeadingAnchor({
+  id,
+  label,
+  originalId
+}) {
+  const page = useReadingPage();
   const [copied, setCopied] = useState(false);
   if (!id) return null;
-  const onClick = () => {
+  const onClick = (event) => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+      return;
+    if (page) {
+      event.preventDefault();
+      document.getElementById(id)?.scrollIntoView();
+    }
     if (typeof window === "undefined") return;
-    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    const url = `${window.location.origin}${page?.path ?? window.location.pathname}#${originalId ?? id}`;
     navigator.clipboard?.writeText(url).catch(() => {
     });
     setCopied(true);
@@ -56,7 +68,7 @@ function HeadingAnchor({ id, label }) {
   return /* @__PURE__ */ jsx(
     "a",
     {
-      href: `#${id}`,
+      href: page ? `${page.path}#${originalId ?? id}` : `#${id}`,
       onClick,
       "aria-label": copied ? "Link copied to clipboard" : label ? `Copy link to ${label}` : "Copy link to this section",
       title: copied ? "Copied!" : "Copy link to this section",
@@ -102,98 +114,125 @@ function PreWrapper(props) {
     }
   );
 }
-const H2 = ({ id, children, style, ...rest }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  id && /* @__PURE__ */ jsx(
-    "span",
+const H2 = ({ id, children, style, ...rest }) => {
+  const page = useReadingPage();
+  const originalId = id;
+  if (id && page?.prefix) id = page.prefix + id;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    id && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id,
+        "data-doc-anchor": originalId,
+        "aria-hidden": true,
+        "data-toc-anchor": true,
+        "data-toc-level": "2",
+        style: {
+          display: "block",
+          height: 0,
+          marginTop: 16,
+          scrollMarginTop: 56
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "h2",
+      {
+        ...rest,
+        className: "flex items-center text-doc-template-ink group -mx-[18px] px-[18px] lg:-mx-[56px] lg:px-[56px]",
+        style: {
+          position: "sticky",
+          top: 40,
+          zIndex: 3,
+          fontFamily: "var(--font-doc-template-ui)",
+          fontSize: 22,
+          fontWeight: 600,
+          letterSpacing: "-0.018em",
+          marginBottom: 12,
+          paddingTop: 12,
+          paddingBottom: 8,
+          gap: 8,
+          lineHeight: 1.2,
+          // Let the actual page surface show through, including custom themes.
+          backgroundColor: "transparent",
+          backdropFilter: "saturate(140%) blur(8px)",
+          WebkitBackdropFilter: "saturate(140%) blur(8px)",
+          ...style
+        },
+        children: [
+          children,
+          /* @__PURE__ */ jsx(HeadingAnchor, { originalId, id, label: flatten(children) })
+        ]
+      }
+    )
+  ] });
+};
+const H3 = ({ id, children, style, ...rest }) => {
+  const page = useReadingPage();
+  const originalId = id;
+  if (id && page?.prefix) id = page.prefix + id;
+  return /* @__PURE__ */ jsxs(
+    "h3",
     {
       id,
-      "aria-hidden": true,
-      "data-toc-anchor": true,
-      "data-toc-level": "2",
+      "data-doc-anchor": originalId,
+      ...rest,
+      className: "flex items-center text-doc-template-ink group",
       style: {
-        display: "block",
-        height: 0,
-        marginTop: 16,
-        scrollMarginTop: 56
-      }
+        fontFamily: "var(--font-doc-template-ui)",
+        fontSize: 15,
+        fontWeight: 600,
+        letterSpacing: "-0.005em",
+        margin: "18px 0 6px",
+        gap: 8,
+        scrollMarginTop: 96,
+        ...style
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(HeadingAnchor, { originalId, id, label: flatten(children) })
+      ]
     }
-  ),
-  /* @__PURE__ */ jsxs(
-    "h2",
+  );
+};
+const H1 = ({ id, children, style, ...rest }) => {
+  const page = useReadingPage();
+  const originalId = id;
+  if (id && page?.prefix) id = page.prefix + id;
+  return /* @__PURE__ */ jsxs(
+    "h1",
     {
+      id,
+      "data-doc-anchor": originalId,
       ...rest,
-      className: "flex items-center text-doc-template-ink group -mx-[18px] px-[18px] lg:-mx-[56px] lg:px-[56px]",
+      className: "flex items-center text-doc-template-ink group",
       style: {
-        position: "sticky",
-        top: 40,
-        zIndex: 3,
         fontFamily: "var(--font-doc-template-ui)",
-        fontSize: 22,
-        fontWeight: 600,
-        letterSpacing: "-0.018em",
-        marginBottom: 12,
-        paddingTop: 12,
-        paddingBottom: 8,
+        fontSize: 32,
+        fontWeight: 700,
+        letterSpacing: "-0.025em",
+        margin: "18px 0 10px",
+        paddingBottom: 24,
+        lineHeight: 1.1,
         gap: 8,
-        lineHeight: 1.2,
-        // Let the actual page surface show through, including custom themes.
-        backgroundColor: "transparent",
-        backdropFilter: "saturate(140%) blur(8px)",
-        WebkitBackdropFilter: "saturate(140%) blur(8px)",
         ...style
       },
       children: [
         children,
-        /* @__PURE__ */ jsx(HeadingAnchor, { id, label: flatten(children) })
+        /* @__PURE__ */ jsx(HeadingAnchor, { originalId, id, label: flatten(children) })
       ]
     }
-  )
-] });
-const H3 = ({ id, children, style, ...rest }) => /* @__PURE__ */ jsxs(
-  "h3",
-  {
-    id,
-    ...rest,
-    className: "flex items-center text-doc-template-ink group",
-    style: {
-      fontFamily: "var(--font-doc-template-ui)",
-      fontSize: 15,
-      fontWeight: 600,
-      letterSpacing: "-0.005em",
-      margin: "18px 0 6px",
-      gap: 8,
-      scrollMarginTop: 96,
-      ...style
-    },
-    children: [
-      children,
-      /* @__PURE__ */ jsx(HeadingAnchor, { id, label: flatten(children) })
-    ]
-  }
-);
-const H1 = ({ id, children, style, ...rest }) => /* @__PURE__ */ jsxs(
-  "h1",
-  {
-    id,
-    ...rest,
-    className: "flex items-center text-doc-template-ink group",
-    style: {
-      fontFamily: "var(--font-doc-template-ui)",
-      fontSize: 32,
-      fontWeight: 700,
-      letterSpacing: "-0.025em",
-      margin: "18px 0 10px",
-      paddingBottom: 24,
-      lineHeight: 1.1,
-      gap: 8,
-      ...style
-    },
-    children: [
-      children,
-      /* @__PURE__ */ jsx(HeadingAnchor, { id, label: flatten(children) })
-    ]
-  }
-);
+  );
+};
+function scopedHeading(Tag) {
+  return function Heading({ id, ...props }) {
+    const page = useReadingPage();
+    return /* @__PURE__ */ jsx(Tag, { ...props, id: id && page?.prefix ? page.prefix + id : id, "data-doc-anchor": id });
+  };
+}
+const H4 = scopedHeading("h4");
+const H5 = scopedHeading("h5");
+const H6 = scopedHeading("h6");
 const BODY_FONT_SIZE = 14.5;
 const BODY_LINE_HEIGHT = 1.65;
 const P = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
@@ -246,7 +285,11 @@ const OL = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
   }
 );
 const LI = ({ children, style, ...rest }) => /* @__PURE__ */ jsx("li", { ...rest, style: { marginBottom: 4, ...style }, children });
-const Blockquote = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
+const Blockquote = ({
+  children,
+  style,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "blockquote",
   {
     ...rest,
@@ -260,19 +303,40 @@ const Blockquote = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
     children
   }
 );
-const A = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
-  "a",
-  {
-    ...rest,
-    className: "text-doc-template-accent hover:[border-bottom-color:var(--color-doc-template-accent)]",
-    style: {
-      borderBottom: "1px solid color-mix(in srgb, var(--color-doc-template-accent) 35%, transparent)",
-      textDecoration: "none",
-      ...style
-    },
-    children
-  }
-);
+const A = ({
+  children,
+  style,
+  href,
+  onClick,
+  ...rest
+}) => {
+  const page = useReadingPage();
+  const local = page && href?.startsWith("#");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href: page ? readingHref(href, page.path) : href,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!local || event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+          return;
+        const target = document.getElementById(page.prefix + decodeURIComponent(href.slice(1)));
+        if (target) {
+          event.preventDefault();
+          target.scrollIntoView();
+        }
+      },
+      className: "text-doc-template-accent hover:[border-bottom-color:var(--color-doc-template-accent)]",
+      style: {
+        borderBottom: "1px solid color-mix(in srgb, var(--color-doc-template-accent) 35%, transparent)",
+        textDecoration: "none",
+        ...style
+      },
+      children
+    }
+  );
+};
 const Th = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
   "th",
   {
@@ -299,7 +363,12 @@ const Td = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
     children
   }
 );
-const Code = ({ className, children, style, ...rest }) => {
+const Code = ({
+  className,
+  children,
+  style,
+  ...rest
+}) => {
   const insidePre = useContext(InsidePreContext);
   const isBlock = insidePre || !!className && /(?:shiki|language-|hljs)/.test(className);
   if (isBlock) {
@@ -328,6 +397,9 @@ const mdxComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
   p: P,
   ul: UL,
   ol: OL,

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { DocPageLoader } from './lib/reading';
 import { SiteConfig as _SiteConfig, SearchConfig as _SearchConfig } from './site-config';
 import { PageFrontmatter as _PageFrontmatter } from './lib/navigation';
 import { TabEntry as _TabEntry } from './lib/tabs';
@@ -47,6 +48,8 @@ export { Topbar } from './components/Topbar';
 export { VersionBadge, type VersionBadgeProps } from './components/VersionBadge';
 export { Layout, useMerge } from './renderer/Layout';
 export interface InitDocsOptions {
+    /** Lazy MDX bodies for opt-in continuous reading. */
+    pageLoaders?: Record<string, DocPageLoader>;
     /** Site branding, URLs, version chips, git hash. */
     site: Partial<_SiteConfig>;
     /** Metadata-only glob: `{ eager: true, query: '?frontmatter', import: 'default' }`.
@@ -75,3 +78,4 @@ export interface InitDocsOptions {
 /** One call wires the whole shell: site config, navigation, search, tabs. */
 export declare function initDocs(opts: InitDocsOptions): void;
 export { ContentRow, type ContentRowProps } from './components/ContentRow';
+export { nextReadingPage, pageLoader, type DocPageLoader } from './lib/reading';

package/dist/index.js

@@ -1,3 +1,5 @@
+import { initPageLoaders } from "./lib/reading.js";
+import { nextReadingPage, pageLoader } from "./lib/reading.js";
 import { defineSiteConfig } from "./site-config.js";
 import { siteConfig } from "./site-config.js";
 import { initNavigation } from "./lib/navigation.js";
@@ -42,6 +44,7 @@ function initDocs(opts) {
   initNavigation(modules, opts.sectionOrder ?? []);
   initSearchIndex(opts.rawPages ?? {});
   initTabs(opts.tabs ?? []);
+  initPageLoaders(opts.pageLoaders);
 }
 export {
   Callout,
@@ -84,7 +87,9 @@ export {
   internalTabs,
   isExternalTab,
   mdxComponents,
+  nextReadingPage,
   normalizePath,
+  pageLoader,
   pages,
   rawMarkdown,
   search,

package/dist/lib/reading.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+export type DocPageLoader = () => Promise<{
+    default: ComponentType;
+}>;
+export declare function initPageLoaders(modules?: Record<string, DocPageLoader>): void;
+export declare function pageLoader(path: string): DocPageLoader | undefined;
+/** Reading follows visible sidebar order, stays in the current tab, and never
+ * enters hidden, noindex, fullscreen, or non-MDX/server-data pages. */
+export declare function nextReadingPage(path: string): import('./navigation').PageMeta | undefined;
+export declare const ReadingPathContext: import('react').Context<string | null>;
+export declare function useDocPath(): string;
+export declare const ReadingPageContext: import('react').Context<{
+    path: string;
+    prefix: string;
+} | null>;
+export declare function useReadingPage(): {
+    path: string;
+    prefix: string;
+} | null;
+/** Resolve authored relative links as if this article were opened on its own. */
+export declare function readingHref(href: string | undefined, path: string): string | undefined;

package/dist/lib/reading.js

@@ -0,0 +1,46 @@
+import { useContext, createContext } from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { groupedVisiblePages, normalizePath } from "./navigation.js";
+import { tabForUrl } from "./tabs.js";
+const loaders = /* @__PURE__ */ new Map();
+function initPageLoaders(modules = {}) {
+  loaders.clear();
+  for (const [file, load] of Object.entries(modules)) {
+    const slug = file.replace(/^.*?\bpages\//, "").replace(/\/\+Page\.mdx$/, "");
+    loaders.set(slug === "index" ? "/" : `/${slug}`, load);
+  }
+}
+function pageLoader(path) {
+  return loaders.get(normalizePath(path));
+}
+function nextReadingPage(path) {
+  const list = groupedVisiblePages.flatMap((g) => g.items).filter((p) => !p.noindex && !p.fullscreen && tabForUrl(p.path) === tabForUrl(path));
+  const index = list.findIndex((p) => p.path === normalizePath(path));
+  const next = index >= 0 ? list[index + 1] : void 0;
+  return next && pageLoader(next.path) ? next : void 0;
+}
+const ReadingPathContext = createContext(null);
+function useDocPath() {
+  const active = useContext(ReadingPathContext);
+  const page = usePageContext();
+  return active ?? page.urlPathname;
+}
+const ReadingPageContext = createContext(null);
+function useReadingPage() {
+  return useContext(ReadingPageContext);
+}
+function readingHref(href, path) {
+  if (!href || /^(?:[a-z][a-z\d+.-]*:|\/)/i.test(href)) return href;
+  const url = new URL(href, `https://docs.invalid${path}`);
+  return url.pathname + url.search + url.hash;
+}
+export {
+  ReadingPageContext,
+  ReadingPathContext,
+  initPageLoaders,
+  nextReadingPage,
+  pageLoader,
+  readingHref,
+  useDocPath,
+  useReadingPage
+};

package/dist/renderer/Layout.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useMemo, useContext, createContext, useEffect } from "react";
+import { ContinuousReading } from "../components/ContinuousReading.js";
+import { pageLoader, ReadingPathContext, useDocPath } from "../lib/reading.js";
+import { useState, useEffect, useMemo, useContext, createContext } from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { usePageContext } from "vike-react/usePageContext";
 import { ThemeProvider } from "../components/ThemeProvider.js";
@@ -15,7 +17,7 @@ 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 urlPathname = useDocPath();
   const current = findPage(urlPathname);
   const merged = useMerge();
   if (!current) return null;
@@ -78,7 +80,7 @@ function H1MergeWatcher({ onChange }) {
   return null;
 }
 function HeadSync() {
-  const { urlPathname } = usePageContext();
+  const urlPathname = useDocPath();
   useEffect(() => {
     if (typeof document === "undefined") return;
     const current = findPage(urlPathname);
@@ -111,7 +113,10 @@ function HeadSync() {
 }
 function Layout({ children }) {
   const { urlPathname } = usePageContext();
+  const [activePath, setActivePath] = useState(urlPathname);
+  useEffect(() => setActivePath(urlPathname), [urlPathname]);
   const current = findPage(urlPathname);
+  const continuous = siteConfig.continuousReading && !!pageLoader(urlPathname) && !current?.noindex && !current?.hidden;
   const isFullscreen = current?.fullscreen === true;
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -124,7 +129,7 @@ function Layout({ children }) {
     }),
     []
   );
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(MDXProvider, { components: mergedMdxComponents, children: /* @__PURE__ */ jsxs(MergeContext.Provider, { value: merged, children: [
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(MDXProvider, { components: mergedMdxComponents, children: /* @__PURE__ */ jsx(ReadingPathContext.Provider, { value: continuous ? activePath : null, children: /* @__PURE__ */ jsxs(MergeContext.Provider, { value: merged, children: [
     /* @__PURE__ */ jsx(
       Topbar,
       {
@@ -151,7 +156,7 @@ function Layout({ children }) {
               className: isFullscreen ? "doc-content w-full min-w-0 h-full overflow-auto p-4" : "doc-content w-full min-w-0 px-[18px] pb-20 lg:px-[56px] lg:pb-[120px] lg:max-w-[760px]",
               children: [
                 !isFullscreen && /* @__PURE__ */ jsx(PageBreadcrumb, {}),
-                children,
+                continuous && !isFullscreen ? /* @__PURE__ */ jsx(ContinuousReading, { path: urlPathname, onActive: setActivePath, children }, urlPathname) : children,
                 !isFullscreen && /* @__PURE__ */ jsx("div", { "data-pagefind-ignore": true, children: /* @__PURE__ */ jsx(DocFooter, {}) })
               ]
             }
@@ -170,7 +175,7 @@ function Layout({ children }) {
     ),
     !isFullscreen && /* @__PURE__ */ jsx(H1MergeWatcher, { onChange: setMerged }),
     /* @__PURE__ */ jsx(HeadSync, {})
-  ] }) }) });
+  ] }) }) }) });
 }
 export {
   Layout,

package/dist/site-config.d.ts

@@ -40,6 +40,8 @@ export interface SearchConfig {
     mergeIndexes?: MergeIndexDef[];
 }
 export interface SiteConfig {
+    /** Offer a Keep scrolling control. Requires initDocs.pageLoaders. Default false. */
+    continuousReading?: boolean;
     /** Brand name in the top-left of the shell (e.g. "DreamLake"). */
     brand: string;
     /** Muted secondary label after the brand (e.g. "Dockit"). */

package/dist/styles.css

@@ -468,3 +468,20 @@
   /* Touch has no hover-away state: leave room so actions never mask code. */
   [data-code-block]:has(> .dockit-code-controls) > div:last-child { padding-top: 30px; }
 }
+
+/* Preview layout="split": source left, live render right; stacked when the
+   frame is narrower than 560px. The render pane is a size container so a
+   demo's container queries follow the pane, not the page. */
+.dockit-preview[data-preview-layout='split'] { container: dockit-preview / inline-size; }
+.dockit-preview-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.dockit-preview-split-source { border-right: 1px solid var(--color-doc-template-faint); overflow-x: auto; }
+.dockit-preview-split-render { container-type: inline-size; }
+@container dockit-preview (max-width: 560px) {
+  .dockit-preview-split { grid-template-columns: minmax(0, 1fr); }
+  .dockit-preview-split-source { border-right: 0; border-bottom: 1px solid var(--color-doc-template-faint); }
+}
+
+.doc-reading-toggle { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--color-doc-template-muted); margin:12px 0; }
+.doc-reading-page { border-top:1px solid var(--color-doc-template-faint); margin-top:64px; padding-top:24px; }
+.doc-reading-permalink, .doc-reading-next { font-size:12px; color:var(--color-doc-template-muted); }
+.doc-reading-next { min-height:56px; margin-top:32px; }

package/package.json

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