@dreamlake/dockit 0.1.1

package/dist/renderer/Layout.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useContext, createContext, useEffect } from "react";
+import { MDXProvider } from "@mdx-js/react";
+import { usePageContext } from "vike-react/usePageContext";
+import { ThemeProvider } from "../components/ThemeProvider.js";
+import { Topbar } from "../components/Topbar.js";
+import { Sidebar } from "../components/Sidebar.js";
+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 { 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 merged = useMerge();
+  if (!current) return null;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "data-pagefind-ignore": true,
+      "aria-label": "Breadcrumb",
+      className: "flex items-center text-doc-template-muted uppercase",
+      style: {
+        gap: 6,
+        fontFamily: "var(--font-doc-template-mono)",
+        fontSize: 10,
+        fontWeight: 500,
+        letterSpacing: "0.04em",
+        height: 36,
+        margin: "8px 0 0",
+        opacity: merged ? 0 : 1,
+        transform: merged ? "translateY(-6px)" : "translateY(0)",
+        pointerEvents: merged ? "none" : "auto",
+        transition: `opacity 0.25s ease, transform 0.25s ${SPRING}`
+      },
+      children: [
+        current.section && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { children: current.section }),
+          /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "/" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-doc-template-ink", children: current.title })
+      ]
+    }
+  );
+}
+function H1MergeWatcher({ onChange }) {
+  useEffect(() => {
+    const TOPBAR_H = 40;
+    let scheduled = false;
+    let merged = false;
+    function check() {
+      scheduled = false;
+      const h1 = document.querySelector("main.doc-content h1");
+      const next = h1 ? h1.getBoundingClientRect().bottom < TOPBAR_H + 8 : false;
+      if (next !== merged) {
+        merged = next;
+        onChange(merged);
+      }
+    }
+    function onScroll() {
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(check);
+    }
+    check();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [onChange]);
+  return null;
+}
+function HeadSync() {
+  const { urlPathname } = usePageContext();
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const current = pages.find((p) => p.path === urlPathname);
+    document.title = current ? `${current.title} — ${siteConfig.brand}` : siteConfig.brand;
+    const desc = current?.description ?? "";
+    let tag = document.querySelector('meta[name="description"]');
+    if (desc) {
+      if (!tag) {
+        tag = document.createElement("meta");
+        tag.name = "description";
+        document.head.appendChild(tag);
+      }
+      tag.content = desc;
+    } else if (tag) {
+      tag.remove();
+    }
+    let robotsTag = document.querySelector('meta[name="robots"]');
+    if (current?.noindex) {
+      if (!robotsTag) {
+        robotsTag = document.createElement("meta");
+        robotsTag.name = "robots";
+        document.head.appendChild(robotsTag);
+      }
+      robotsTag.content = "noindex, nofollow";
+    } else if (robotsTag) {
+      robotsTag.remove();
+    }
+  }, [urlPathname]);
+  return null;
+}
+function Layout({ children }) {
+  const { urlPathname } = usePageContext();
+  const current = pages.find((p) => p.path === urlPathname);
+  const isFullscreen = current?.fullscreen === true;
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [merged, setMerged] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(MDXProvider, { components: mdxComponents, children: /* @__PURE__ */ jsxs(MergeContext.Provider, { value: merged, children: [
+    /* @__PURE__ */ jsx(
+      Topbar,
+      {
+        searchOpen,
+        onOpenSearch: () => setSearchOpen(true),
+        onCloseSearch: () => setSearchOpen(false),
+        query: searchQuery,
+        setQuery: setSearchQuery
+      }
+    ),
+    /* @__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]",
+        style: isFullscreen ? { height: "calc(100vh - 40px)" } : { maxWidth: 1320 },
+        children: [
+          /* @__PURE__ */ jsx(Sidebar, {}),
+          /* @__PURE__ */ jsxs(
+            "main",
+            {
+              ...current?.noindex ? {} : { "data-pagefind-body": true },
+              ...current?.hidden ? { "data-pagefind-meta": "hidden:true" } : {},
+              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,
+                !isFullscreen && /* @__PURE__ */ jsx("div", { "data-pagefind-ignore": true, children: /* @__PURE__ */ jsx(DocFooter, {}) })
+              ]
+            }
+          ),
+          !isFullscreen && /* @__PURE__ */ jsx(TOC, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SearchPalette,
+      {
+        open: searchOpen,
+        onClose: () => setSearchOpen(false),
+        query: searchQuery
+      }
+    ),
+    !isFullscreen && /* @__PURE__ */ jsx(H1MergeWatcher, { onChange: setMerged }),
+    /* @__PURE__ */ jsx(HeadSync, {})
+  ] }) }) });
+}
+export {
+  Layout,
+  useMerge
+};

package/dist/renderer/onRenderClient.d.ts

@@ -0,0 +1 @@
+export declare function onRenderClient(pageContext: any): Promise<void>;

package/dist/renderer/onRenderClient.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import ReactDOM from "react-dom/client";
+import { Layout } from "./Layout.js";
+import { PageContextProvider } from "vike-react/usePageContext";
+let root = null;
+async function onRenderClient(pageContext) {
+  const { Page, pageProps } = 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 !== "") {
+      root = ReactDOM.hydrateRoot(container, tree);
+    } else {
+      root = ReactDOM.createRoot(container);
+      root.render(tree);
+    }
+  } else {
+    root.render(tree);
+  }
+}
+export {
+  onRenderClient
+};

package/dist/renderer/onRenderHtml.d.ts

@@ -0,0 +1,5 @@
+import { escapeInject } from 'vike/server';
+export declare function onRenderHtml(pageContext: any): Promise<{
+    documentHtml: ReturnType<typeof escapeInject>;
+    pageContext: Record<string, unknown>;
+}>;

package/dist/renderer/onRenderHtml.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+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 { 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 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;
+  const themeScript = dangerouslySkipEscape(
+    `<script>(function(){try{var raw=localStorage.getItem('doc:theme');var t=raw;try{t=JSON.parse(raw);}catch(_){}var d=document.documentElement;if(t==='light'){d.setAttribute('data-theme','light');}else if(t==='dark'){d.setAttribute('data-theme','dark');}else{d.setAttribute('data-theme',window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}catch(e){}})()<\/script>`
+  );
+  return {
+    documentHtml: escapeInject`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    ${themeScript}
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet" />
+    <title>${title}</title>
+    ${description ? escapeInject`<meta name="description" content="${description}" />` : ""}
+    ${current?.noindex ? escapeInject`<meta name="robots" content="noindex, nofollow" />` : ""}
+    ${mdHref ? escapeInject`<link rel="alternate" type="text/markdown" href="${mdHref}" />` : ""}
+  </head>
+  <body>
+    <div id="root">${dangerouslySkipEscape(html)}</div>
+  </body>
+</html>`,
+    pageContext: {}
+  };
+}
+export {
+  onRenderHtml
+};

package/dist/site-config.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Site-level configuration singleton.
+ *
+ * The library ships neutral defaults; the consuming site overrides them by
+ * calling `defineSiteConfig()` (usually via `initDocs()`) from its
+ * `site.config.ts` — imported for its side effect *before* the renderer
+ * entries run, so every component sees the final values.
+ *
+ * The object is mutated in place (never reassigned) so components that did
+ * `import { siteConfig }` keep a live reference.
+ */
+/** One version chip in the topbar's brand cluster: `[ label | v<version> ]`.
+ *  With `dropdown: true` the version segment opens a popover listing the
+ *  deploys from `/versions.json`. */
+export interface VersionChip {
+    label: string;
+    version: string;
+    dropdown?: boolean;
+}
+export interface SiteConfig {
+    /** Brand name in the top-left of the shell (e.g. "DreamLake"). */
+    brand: string;
+    /** Muted secondary label after the brand (e.g. "Dockit"). */
+    subtitle: string;
+    /** Drives the GitHub link in the top-right of the header. Set to an
+     *  empty string to hide the icon. */
+    repoUrl: string;
+    /** Repo + branch that actually hosts the docs pages (the workspace repo,
+     *  not the product `repoUrl` above). Drives the rail's "Edit this page" /
+     *  "Report an issue" links. */
+    docsRepoUrl: string;
+    docsBranch: string;
+    /** Leftmost crumb in both the page-top and merged-topbar breadcrumbs.
+     *  Set to an empty string to omit the root crumb entirely. */
+    breadcrumbRoot: string;
+    /** Public origin the site is deployed at. Used to build absolute URLs in
+     *  the LLM-readable artifacts (llms.txt, llms-full.txt, the skill). */
+    url: string;
+    /** Importable agent-skill name. Drives `skills/<skill>/` at the repo root
+     *  and the downloadable `<skill>.zip`. */
+    skill: string;
+    /** One-line product summary. Becomes the blockquote in llms.txt and the
+     *  skill description. Keep it tight — it's what an LLM reads first. */
+    summary: string;
+    /** Curated task phrases for the generated agent-skill's "Use when:" trigger
+     *  list in `gen-llms.mjs` (e.g. "theming the docs shell", "wiring Netlify
+     *  deploys"). When unset, the generator falls back to the site's section
+     *  names. */
+    skillTriggers?: string[];
+    /** Version chips rendered next to the brand in the topbar. */
+    versionChips?: VersionChip[];
+    /** Short git hash chip in the topbar. Omit to hide the chip. */
+    gitHash?: string;
+    /** Repo-relative directory holding `pages/` — used to build the TOC's
+     *  "Edit this page" link (`<docsRepoUrl>/edit/<docsBranch>/<docsPagesPath>/…`).
+     *  Defaults to 'docs/pages'. */
+    docsPagesPath?: string;
+}
+export declare const siteConfig: SiteConfig;
+/** Merge site-provided values into the singleton (mutates in place). */
+export declare function defineSiteConfig(cfg: Partial<SiteConfig>): void;

package/dist/site-config.js

@@ -0,0 +1,21 @@
+const siteConfig = {
+  brand: "Docs",
+  subtitle: "",
+  repoUrl: "",
+  docsRepoUrl: "",
+  docsBranch: "main",
+  breadcrumbRoot: "",
+  url: "",
+  skill: "",
+  summary: "",
+  versionChips: [],
+  gitHash: "",
+  docsPagesPath: "docs/pages"
+};
+function defineSiteConfig(cfg) {
+  Object.assign(siteConfig, cfg);
+}
+export {
+  defineSiteConfig,
+  siteConfig
+};

package/dist/styles.css

@@ -0,0 +1,310 @@
+/* ─────────────────────────────────────────────────────────────────
+   @dreamlake/dockit — shell styles. Import from the consuming site's
+   app.css AFTER tailwindcss:
+
+     @import "tailwindcss";
+     @import "@dreamlake/dockit/styles.css";
+
+   The @source below is resolved relative to this file. It is copied to
+   dist/styles.css at build time, where it makes Tailwind scan the
+   package's compiled JS (dist/) for utility-class usage, so classes
+   used only inside dockit components are always generated.
+   ───────────────────────────────────────────────────────────────── */
+@source "./";
+
+/* ─────────────────────────────────────────────────────────────────
+   Prefixed theme tokens — one-to-one with the dreamlake palette so
+   utility classes (bg-doc-template-bg, text-doc-template-ink, etc.)
+   produce pixel-identical output. The --doc-template- prefix isolates
+   us from any consuming library or app's tokens.
+   ───────────────────────────────────────────────────────────────── */
+@theme {
+  --color-doc-template-bg:           #fffefa;
+  --color-doc-template-panel:        #fcfbf7;
+  --color-doc-template-rail:         #fcfbf7;
+  --color-doc-template-code:         #faf8f1;
+  --color-doc-template-ink:          #1a1a1a;
+  --color-doc-template-muted:        #6b6b6b;
+  --color-doc-template-faint:        rgb(0 0 0 / 0.08);
+  --color-doc-template-faint-strong: rgb(0 0 0 / 0.16);
+  --color-doc-template-chip:         rgb(0 0 0 / 0.04);
+  --color-doc-template-search:       #f5f4f0;
+  --color-doc-template-selected:     #d9e6f7;
+  --color-doc-template-accent:       #23aaff;
+  --color-doc-template-accent-soft:  rgb(35 170 255 / 0.09);
+  --color-doc-template-warn:         #d68b3a;
+  --color-doc-template-warn-soft:    rgb(214 139 58 / 0.10);
+  --color-doc-template-rail-stroke:  #d8d4c8;
+
+  --font-doc-template-ui:   "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-doc-template-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --radius-doc-template:    10px;
+  --radius-doc-template-sm: 6px;
+}
+
+/* Dark-mode overrides — same custom property names get re-declared so
+   every utility instantly swaps without us touching JSX. Tailwind v4 emits
+   @theme tokens as plain CSS vars, so attribute-selector overrides work. */
+[data-theme='dark'] {
+  --color-doc-template-bg:           #2e2e35;
+  --color-doc-template-panel:        #2e2e35;
+  --color-doc-template-rail:         #2b2b31;
+  --color-doc-template-code:         #2c2c33;
+  --color-doc-template-ink:          #ececec;
+  --color-doc-template-muted:        #8a8a8a;
+  --color-doc-template-faint:        rgb(255 255 255 / 0.09);
+  --color-doc-template-faint-strong: rgb(255 255 255 / 0.20);
+  --color-doc-template-chip:         rgb(255 255 255 / 0.05);
+  --color-doc-template-search:       #36363c;
+  --color-doc-template-selected:     #3d4856;
+  --color-doc-template-accent-soft:  rgb(35 170 255 / 0.18);
+  --color-doc-template-warn-soft:    rgb(214 139 58 / 0.18);
+  --color-doc-template-rail-stroke:  #45454d;
+}
+
+/* `dark:*` Tailwind variants hook the same [data-theme="dark"] attribute
+   the FOUC script in +onRenderHtml.tsx sets. */
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+@layer base {
+  /* Tailwind's default font-sans is ui-sans-serif. We want Inter Tight
+     without minting a Tailwind font token, so set on body once. */
+  body {
+    font-family: var(--font-doc-template-ui);
+    background: var(--color-doc-template-bg);
+    color: var(--color-doc-template-ink);
+    /* Match the dreamlake design's text rendering — without these, Inter
+       Tight defaults to subpixel AA which reads chunkier than the design. */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    /* Inter stylistic sets used by the design:
+       - ss01: open digit alternates (cleaner 4 / 6 / 9)
+       - cv11: single-storey g
+       These slim the look noticeably. */
+    font-feature-settings: 'ss01', 'cv11';
+  }
+  code, pre, kbd, .font-mono {
+    font-family: var(--font-doc-template-mono);
+  }
+}
+
+/* Shiki dual-theme bridge — the only mandatory non-utility rule, since
+   shiki authors its own <pre><code>…</code></pre> markup we don't
+   render directly. Per-token color only — never paint backgrounds, so
+   the cream wrapper (`.codeblock` border + bg) is the lone visible
+   surface. Setting bg on every span produces white token rectangles
+   on top of the cream surface, which reads as a second border. */
+.shiki, .shiki span { color: var(--shiki-light); }
+[data-theme='dark'] .shiki,
+[data-theme='dark'] .shiki span { color: var(--shiki-dark); }
+.shiki {
+  background: transparent !important;
+  margin: 0;
+  padding: 14px 16px;
+  font-family: var(--font-doc-template-mono);
+  font-size: 12.5px;
+  line-height: 1.3;
+  overflow-x: auto;
+}
+
+/* Pagefind excerpt highlights — matches the inline highlight style
+   used by the SearchPalette's custom `highlight()` function. */
+.pagefind-excerpt mark {
+  background: color-mix(in srgb, var(--color-doc-template-accent) 18%, transparent);
+  color: var(--color-doc-template-ink);
+  font-weight: 600;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+
+/* Preview body in the search palette — scale the full rendered page
+   content to fit the narrow preview pane. */
+.preview-body {
+  font-size: 100%;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--color-doc-template-ink) 80%, transparent);
+}
+.preview-body h1::before { content: '# '; }
+.preview-body h2::before { content: '## '; }
+.preview-body h3::before { content: '### '; }
+.preview-body h1, .preview-body h2, .preview-body h3 {
+  all: unset;
+  display: block;
+  font-size: inherit;
+  font-weight: 600;
+  margin: 8px 0 4px;
+}
+.preview-body p { margin: 0 0 8px; }
+.preview-body ul, .preview-body ol { margin: 0 0 8px; padding-left: 18px; }
+.preview-body pre {
+  font-size: 10.5px;
+  line-height: 1.3;
+  padding: 8px 10px;
+  margin: 0 0 8px;
+  border-radius: 6px;
+  overflow-x: auto;
+  background: var(--color-doc-template-code);
+}
+.preview-body code { font-size: 0.92em; }
+.preview-body img { max-width: 100%; border-radius: 4px; }
+.preview-body table { font-size: 11px; border-collapse: collapse; width: 100%; margin: 0 0 8px; }
+.preview-body th, .preview-body td { padding: 4px 8px; border: 1px solid var(--color-doc-template-faint); }
+.preview-body a { color: var(--color-doc-template-accent); text-decoration: none; pointer-events: none; }
+
+/* Trim the last child's bottom margin so the callout's / blockquote's
+   own padding doesn't stack on top of a paragraph's `margin-bottom: 14px`.
+   The MDX <P> wrapper sets that margin as an inline style, so we need
+   !important to win the specificity battle. */
+.doc-callout-body > *:last-child,
+.doc-content blockquote > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Mute the list-marker color to match dreamlake (default markers
+   inherit `color` which would be the ink color — too prominent). */
+.doc-content li::marker {
+  color: var(--color-doc-template-muted);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Optional line numbers — toggled by the `:set nu` button in the
+   CodeBlock / Preview header. The toggle flips `data-line-numbers`
+   on the wrapper; an inline-block `::before` on each Shiki `.line`
+   prepends the counter. Keeping `.line` inline (the default) means
+   we don't disturb the natural `\n`-driven line breaks Shiki emits
+   between line spans — so the no-numbers state stays correct. */
+[data-line-numbers='on'] .shiki code { counter-reset: cl-ln; }
+/* ─────────────────────────────────────────────────────────────────
+   Sidebar nav links — pure CSS highlights, no inline style objects.
+   ───────────────────────────────────────────────────────────────── */
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  font-family: var(--font-doc-template-ui);
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  line-height: 1.25;
+  color: var(--color-doc-template-ink);
+  text-decoration: none;
+  border-radius: var(--radius-doc-template);
+  transition: background 0.1s ease;
+}
+.sidebar-link:hover {
+  background: color-mix(in srgb, var(--color-doc-template-ink) 5%, transparent);
+}
+.sidebar-link[aria-current='page'] {
+  font-weight: 600;
+  background: var(--color-doc-template-selected);
+}
+
+/* Section header button */
+.sidebar-section {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 10px 4px;
+  font-family: var(--font-doc-template-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-doc-template-muted);
+  opacity: 0.7;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: opacity 0.1s ease, color 0.1s ease;
+}
+.sidebar-section:hover { opacity: 0.85; }
+.sidebar-section[data-folded]:hover {
+  opacity: 0.9;
+  color: var(--color-doc-template-ink);
+}
+
+/* TOC link — CSS-only active/hover */
+.toc-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-doc-template-muted);
+  font-family: var(--font-doc-template-ui);
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: -0.005em;
+  padding: 5px 10px 5px 8px;
+  transition: color 0.12s ease;
+}
+.toc-link:hover { color: var(--color-doc-template-ink); }
+.toc-link[aria-current='location'] {
+  color: var(--color-doc-template-accent);
+  font-weight: 600;
+}
+.toc-link[aria-current='location']:hover {
+  color: var(--color-doc-template-accent);
+}
+.toc-link[data-level='3'] {
+  font-family: var(--font-doc-template-mono);
+  font-size: 10.5px;
+  text-transform: lowercase;
+  letter-spacing: 0.005em;
+}
+
+.toc-fold-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.1s ease;
+}
+.toc-fold-toggle:hover { opacity: 1; }
+
+[data-line-numbers='on'] .shiki .line::before {
+  counter-increment: cl-ln;
+  content: counter(cl-ln);
+  display: inline-block;
+  /* number column + gap-to-border + 1px rule + gap-to-code */
+  width: 2em;
+  padding-right: 0.6em;
+  margin-right: 0.9em;
+  border-right: 1px solid var(--color-doc-template-faint);
+  text-align: right;
+  color: color-mix(in srgb, var(--color-doc-template-ink) 28%, transparent);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Version-switcher popover: container fades+slides in, then each row
+   cascades in with a small per-index stagger via inline animation-delay. */
+@keyframes popover-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+@keyframes popover-entry-in {
+  from { opacity: 0; transform: translateY(-3px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes popover-wedge-in {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* Theme toggle (single-button): the current-theme icon springs in when
+   the theme changes — a quick rotate+scale settle. */
+@keyframes theme-icon-pop {
+  from { opacity: 0; transform: scale(0.6) rotate(-90deg); }
+  to   { opacity: 1; transform: scale(1)   rotate(0deg); }
+}

package/dist/vike.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Vike page config for a dockit site. The consuming site re-exports this
+ * from its own `renderer/+config.ts`:
+ *
+ *   export { default } from '@dreamlake/dockit/vike'
+ */
+declare const _default: {
+    passToClient: string[];
+    clientRouting: boolean;
+    prerender: boolean;
+};
+export default _default;

package/dist/vike.js

@@ -0,0 +1,8 @@
+const vike = {
+  passToClient: ["pageProps", "urlPathname"],
+  clientRouting: true,
+  prerender: true
+};
+export {
+  vike as default
+};

package/dist/vite.d.ts

@@ -0,0 +1,2 @@
+import { PluginOption } from 'vite';
+export declare function dockit(): PluginOption[];