feat(docs): update docs ui and examples

.github/workflows/cloudflare-deploy.yml

@@ -47,9 +47,9 @@ jobs:
             - name: Build Package
               run: pnpm run build
 
-            - name: Generate sitemap manifest
-              working-directory: docs
-              run: pnpm run sitemap:manifest
+            # The sitemap manifest now emits from docs-kit's
+            # `sitemapManifestPlugin` in `docs/vite.config.ts`, which runs
+            # automatically during the Vite build inside `pnpm run deploy`.
 
             - name: Deploy Docs
               working-directory: docs

.gitignore

@@ -30,3 +30,7 @@ docs/static/llms-full.txt
 docs/static/llms.txt
 mprocs.log
 docs/src/lib/github-stats.json
+docs/src/lib/demo-manifest.json
+docs/src/lib/demo-loaders.ts
+docs/src/lib/demo-virtual.d.ts
+docs/src/lib/sitemap-manifest.json

docs/.gitignore

@@ -1 +1,3 @@
-.wrangler/
+.wrangler/
+src/lib/demo-loaders.ts
+src/lib/demo-virtual.d.ts

docs/package.json

@@ -4,23 +4,21 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "build": "tsx ./scripts/fetch-github-stats.ts && node ./scripts/generate-sitemap-manifest.mjs && tsx ./scripts/generate-social-cards.ts && vite build",
+        "build": "tsx ./scripts/fetch-github-stats.ts && tsx ./scripts/generate-social-cards.ts && vite build",
         "cf-typegen": "wrangler types && mv worker-configuration.d.ts src/",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "deploy": "npm run build && wrangler deploy",
         "dev": "vite dev",
         "generate-social": "tsx ./scripts/generate-social-cards.ts",
-        "sitemap:manifest": "node ./scripts/generate-sitemap-manifest.mjs",
-        "sitemap:watch": "chokidar 'src/routes/**/*.svelte' 'src/routes/**/*.svx' 'src/routes/**/*.md' --ignore 'src/routes/examples/+page.ts' -c 'node ./scripts/generate-sitemap-manifest.mjs' --initial --silent",
         "social:watch": "chokidar 'src/lib/components/OG.svelte' 'scripts/generate-social-cards.ts' -c 'tsx ./scripts/generate-social-cards.ts' --initial --silent",
         "format": "prettier --write .",
         "lint": "prettier --check . && eslint .",
         "lint:fix": "npm run format && eslint . --fix",
         "preview": "vite preview"
     },
     "dependencies": {
-        "@humanspeak/docs-kit": "github:humanspeak/docs-kit#2026.6.4",
+        "@humanspeak/docs-kit": "github:humanspeak/docs-kit#2026.6.9",
         "@humanspeak/memory-cache": "workspace:*",
         "@humanspeak/svelte-markdown": "^1.5.4",
         "github-slugger": "^2.0.0",

docs/src/app.css

@@ -1,8 +1,34 @@
 @import 'tailwindcss';
 @source '../node_modules/@humanspeak/docs-kit/dist';
 @import '@humanspeak/docs-kit/styles/base.css';
+@import '@humanspeak/docs-kit/styles/brutalist.css';
+@import '@humanspeak/docs-kit/styles/prose-v2.css';
 @plugin '@tailwindcss/typography';
 
+/* Project-specific tokens */
+:root {
+    --color-success: #22c55e;
+}
+
+.dark {
+    --color-success: #4ade80;
+}
+
+@theme inline {
+    --color-success: var(--color-success);
+}
+
+/* Shiki theme switching outside .prose */
+@layer base {
+    html:not(.dark) .shiki-dark {
+        display: none;
+    }
+
+    html.dark .shiki-light {
+        display: none;
+    }
+}
+
 /* Project-specific: landing page decorative styles */
 .orb-a-bg {
     background: radial-gradient(
@@ -34,3 +60,33 @@
     background-size: 200% 100%;
     animation: sheen 6s ease-in-out infinite;
 }
+
+.shiny-button {
+    --radial-gradient-background: 250, 250, 250;
+    --solid-color-background: 15, 15, 15;
+    --overlay-color: 255, 255, 255;
+}
+
+/* Project-specific: ComponentSource dialog */
+.component-source-dialog {
+    @apply border-border bg-background fixed inset-4 z-50 flex flex-col overflow-hidden rounded-xl border shadow-2xl;
+    max-width: 1100px;
+    max-height: 80vh;
+    margin: auto;
+}
+
+.component-source-code pre.shiki {
+    @apply m-0 rounded-none bg-transparent! p-4;
+    counter-reset: line;
+}
+
+.component-source-code pre.shiki code {
+    @apply bg-transparent!;
+    counter-reset: line;
+}
+
+.component-source-code pre.shiki code .line::before {
+    counter-increment: line;
+    content: counter(line);
+    @apply text-muted-foreground/50 mr-6 inline-block w-4 text-right;
+}

docs/src/app.html

@@ -2,18 +2,34 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/logo.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#54dbbc" />
+        <script nonce="%sveltekit.nonce%">
+            ;(() => {
+                try {
+                    const root = document.documentElement
+                    const mode = localStorage.getItem('mode-watcher-mode') ?? 'system'
+                    const light =
+                        mode === 'light' ||
+                        (mode === 'system' &&
+                            window.matchMedia('(prefers-color-scheme: light)').matches)
+
+                    root.classList.toggle('dark', !light)
+                    root.style.colorScheme = light ? 'light' : 'dark'
+                } catch {
+                    /* ModeWatcher will resolve the theme after hydration. */
+                }
+            })()
+        </script>
         <link rel="preconnect" href="https://analytics.ahrefs.com" />
+        %sveltekit.head%
         <script
             src="https://analytics.ahrefs.com/analytics.js"
             data-key="Vfe1gM5v1Ss/cND8zjTWEg"
             async
         ></script>
-        %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
-        <div style="display: contents" class="w-full">%sveltekit.body%</div>
+        <div style="display: contents">%sveltekit.body%</div>
     </body>
 </html>

docs/src/lib/components/general/Footer.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-    import { Footer } from '@humanspeak/docs-kit'
+    import { FooterV2 } from '@humanspeak/docs-kit'
+    import rootPkg from '../../../../../package.json'
+
+    const PKG_VERSION = rootPkg.version
 </script>
 
-<Footer />
+<FooterV2 version={PKG_VERSION} />

docs/src/lib/components/general/Header.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
-    import { Header } from '@humanspeak/docs-kit'
+    import { HeaderV2 } from '@humanspeak/docs-kit'
     import { docsConfig } from '$lib/docs-config'
+    import favicon from '$lib/assets/logo.svg'
+    import rootPkg from '../../../../../package.json'
+
+    const PKG_VERSION = rootPkg.version
 </script>
 
-<Header config={docsConfig} favicon="/logo.svg" />
+<HeaderV2
+    config={docsConfig}
+    {favicon}
+    version={PKG_VERSION}
+    nav={[
+        { label: 'docs', href: '/docs' },
+        { label: 'examples', href: '/examples' }
+    ]}
+/>

docs/src/lib/docsNav.ts

@@ -20,6 +20,7 @@ import Timer from '@lucide/svelte/icons/timer'
 export const docsSections: NavSection[] = [
     {
         title: 'Get Started',
+        icon: Rocket,
         items: [
             {
                 title: 'Getting Started',
@@ -30,6 +31,7 @@ export const docsSections: NavSection[] = [
     },
     {
         title: 'Interactive Demos',
+        icon: Play,
         items: [
             { title: 'All Examples', href: '/examples', icon: Play, exact: true },
             { title: 'Basic Cache', href: '/examples/basic-cache', icon: Box },
@@ -40,13 +42,15 @@ export const docsSections: NavSection[] = [
     },
     {
         title: 'API Reference',
+        icon: Database,
         items: [
             { title: 'MemoryCache', href: '/docs/api/memory-cache', icon: Database },
             { title: '@cached Decorator', href: '/docs/api/cached-decorator', icon: AtSign }
         ]
     },
     {
         title: 'Examples',
+        icon: Code,
         items: [
             { title: 'Overview', href: '/docs/examples', icon: Code, exact: true },
             { title: 'Configuration', href: '/docs/examples/configuration', icon: Sliders },