@geenius/docs 0.1.0

package/packages/solidjs/src/RouterDocsLayout.tsx

@@ -0,0 +1,161 @@
+// src/components/docs/DocsLayout.tsx
+
+import { createSignal, type JSX } from 'solid-js'
+import { Link, useLocation } from '@tanstack/solid-router'
+import { Book, Menu, X, Search, ChevronRight } from 'lucide-solid'
+
+export interface DocItem {
+  slug: string
+  title: string
+  description: string
+  category: string
+  order: number
+}
+
+interface DocsLayoutProps {
+  children: JSX.Element
+  docs: DocItem[]
+  currentSlug?: string
+}
+
+export const DocsLayout: Component<DocsLayoutProps> = ({
+  children,
+  docs,
+  currentSlug,
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = createSignal(false)
+  const location = useLocation()
+
+  // Group docs by category
+  const groupedDocs = docs.reduce(
+    (acc, doc) => {
+      if (!acc[doc.category]) {
+        acc[doc.category] = []
+      }
+      acc[doc.category].push(doc)
+      return acc
+    },
+    {} as Record<string, DocItem[]>,
+  )
+
+  // Sort categories and docs within each category
+  const sortedCategories = Object.entries(groupedDocs).sort(([a], [b]) => {
+    const categoryOrder = [
+      'Introduction',
+      'Getting Started',
+      'Guides',
+      'API',
+      'Advanced',
+    ]
+    return categoryOrder.indexOf(a) - categoryOrder.indexOf(b)
+  })
+
+  return (
+    <div class="min-h-screen bg-bg">
+      {/* Mobile Header */}
+      <div class="lg:hidden sticky top-0 z-40 flex items-center justify-between px-4 py-3 bg-card border-b border-border">
+        <Link to="/" class="flex items-center gap-2 text-primary">
+          <Book class="w-5 h-5" />
+          <span class="font-bold">Documentation</span>
+        </Link>
+        <button
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          class="p-2 rounded-lg hover:bg-bg-muted transition-colors"
+        >
+          {isSidebarOpen ? (
+            <X class="w-5 h-5" />
+          ) : (
+            <Menu class="w-5 h-5" />
+          )}
+        </button>
+      </div>
+
+      <div class="flex">
+        {/* Sidebar */}
+        <aside
+          class={`
+            fixed lg:sticky top-16 left-0 z-30 w-72 h-[calc(100vh-4rem)] overflow-y-auto
+            bg-card border-r border-border transition-transform duration-300
+            lg:translate-x-0
+            ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+          `}
+        >
+          <div class="p-6">
+            {/* Logo */}
+            <Link
+              to="/"
+              class="hidden lg:flex items-center gap-2 text-primary mb-8"
+            >
+              <Book class="w-6 h-6" />
+              <span class="font-bold text-lg">Documentation</span>
+            </Link>
+
+            {/* Search */}
+            <div class="relative mb-6">
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+              <input
+                type="text"
+                placeholder="Search docs..."
+                class="w-full pl-10 pr-4 py-2.5 bg-bg-muted border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+              />
+            </div>
+
+            {/* Navigation */}
+            <nav class="space-y-6">
+              {sortedCategories.map(([category, categoryDocs]) => (
+                <div>
+                  <h3 class="text-xs font-bold text-text-muted uppercase tracking-wider mb-3">
+                    {category}
+                  </h3>
+                  <ul class="space-y-1">
+                    {categoryDocs
+                      .sort((a, b) => a.order - b.order)
+                      .map((doc) => {
+                        const isActive = currentSlug === doc.slug
+                        return (
+                          <li>
+                            <Link
+                              to="/docs/$slug"
+                              params={{ slug: doc.slug }}
+                              activeOptions={{ exact: true }}
+                              onClick={() => setIsSidebarOpen(false)}
+                              class={`
+                                flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all
+                                ${
+                                  isActive
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'text-text-muted hover:bg-bg-muted hover:text-text-main'
+                                }
+                              `}
+                            >
+                              <ChevronRight
+                                class={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`}
+                              />
+                              {doc.title}
+                            </Link>
+                          </li>
+                        )
+                      })}
+                  </ul>
+                </div>
+              ))}
+            </nav>
+          </div>
+        </aside>
+
+        {/* Overlay for mobile */}
+        {isSidebarOpen && (
+          <div
+            class="fixed inset-0 bg-black/50 z-20 lg:hidden"
+            onClick={() => setIsSidebarOpen(false)}
+          />
+        )}
+
+        {/* Main Content */}
+        <main class="flex-1 min-w-0">
+          <div class="max-w-4xl mx-auto px-6 py-12">{children}</div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs/src/components/Breadcrumbs.tsx

@@ -0,0 +1,27 @@
+import { For, Show } from 'solid-js'
+import type { BreadcrumbItem } from '@geenius-docs/shared'
+
+export function Breadcrumbs(props: { items: BreadcrumbItem[] }) {
+  return (
+    <Show when={props.items.length > 0}>
+      <nav class="flex items-center gap-1.5 text-sm" aria-label="Breadcrumb">
+        <For each={props.items}>
+          {(item, idx) => (
+            <>
+              <Show when={idx() > 0}>
+                <svg class="h-3.5 w-3.5 shrink-0 text-white/20" viewBox="0 0 16 16" fill="none">
+                  <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" />
+                </svg>
+              </Show>
+              <Show when={idx() === props.items.length - 1} fallback={
+                <a href={item.href} class="truncate text-white/40 transition-colors hover:text-white/70">{item.title}</a>
+              }>
+                <span class="truncate text-white/60">{item.title}</span>
+              </Show>
+            </>
+          )}
+        </For>
+      </nav>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/DocPage.tsx

@@ -0,0 +1,110 @@
+import type { DocPage as DocPageType } from '@geenius-docs/shared'
+import { slugify } from '@geenius-docs/shared'
+
+interface DocPageProps {
+  page: DocPageType
+}
+
+export function DocPage(props: DocPageProps) {
+  const renderContent = () => {
+    const lines = props.page.content.split('\n')
+    const elements: string[] = []
+    let i = 0
+    let inCode = false
+    let codeLang = ''
+    let codeLines: string[] = []
+
+    while (i < lines.length) {
+      const line = lines[i]
+
+      if (line.startsWith('```')) {
+        if (!inCode) {
+          inCode = true
+          codeLang = line.slice(3).trim()
+          codeLines = []
+        } else {
+          elements.push(
+            `<div class="group relative my-4"><div class="flex items-center justify-between rounded-t-lg bg-white/5 px-4 py-2 text-xs text-white/50"><span>${codeLang || 'code'}</span></div><pre class="overflow-x-auto rounded-b-lg bg-black/30 p-4 text-sm leading-relaxed"><code>${escapeHtml(codeLines.join('\n'))}</code></pre></div>`
+          )
+          inCode = false
+          codeLang = ''
+        }
+        i++
+        continue
+      }
+
+      if (inCode) { codeLines.push(line); i++; continue }
+
+      const calloutMatch = line.match(/^>\s*\[!(NOTE|WARNING|TIP|IMPORTANT|CAUTION)\]/)
+      if (calloutMatch) {
+        const type = calloutMatch[1]
+        const contentLines: string[] = []
+        i++
+        while (i < lines.length && lines[i].startsWith('>')) {
+          contentLines.push(lines[i].replace(/^>\s?/, ''))
+          i++
+        }
+        const styles: Record<string, { bg: string; border: string; icon: string; label: string }> = {
+          NOTE: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', icon: 'ℹ️', label: 'Note' },
+          WARNING: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', icon: '⚠️', label: 'Warning' },
+          TIP: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', icon: '💡', label: 'Tip' },
+          IMPORTANT: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', icon: '❗', label: 'Important' },
+          CAUTION: { bg: 'bg-red-500/10', border: 'border-red-500/30', icon: '🔴', label: 'Caution' },
+        }
+        const s = styles[type] ?? styles.NOTE
+        elements.push(
+          `<div class="${s.bg} ${s.border} my-4 rounded-lg border-l-4 p-4"><p class="mb-1 text-sm font-semibold">${s.icon} ${s.label}</p><p class="text-sm leading-relaxed text-white/80">${escapeHtml(contentLines.join(' '))}</p></div>`
+        )
+        continue
+      }
+
+      const headingMatch = line.match(/^(#{1,4})\s+(.+)$/)
+      if (headingMatch) {
+        const level = headingMatch[1].length
+        const text = headingMatch[2]
+        const id = slugify(text)
+        const classes: Record<number, string> = {
+          1: 'text-3xl font-bold mt-8 mb-4',
+          2: 'text-2xl font-bold mt-8 mb-3 pb-2 border-b border-white/10',
+          3: 'text-xl font-semibold mt-6 mb-2',
+          4: 'text-lg font-medium mt-4 mb-2',
+        }
+        elements.push(`<h${level} id="${id}" class="${classes[level]} scroll-mt-20"><a href="#${id}" class="hover:text-indigo-400 transition-colors">${escapeHtml(text)}</a></h${level}>`)
+        i++
+        continue
+      }
+
+      if (line.startsWith('>')) {
+        const quoteLines: string[] = []
+        while (i < lines.length && lines[i].startsWith('>')) {
+          quoteLines.push(lines[i].replace(/^>\s?/, ''))
+          i++
+        }
+        elements.push(`<blockquote class="my-4 border-l-4 border-indigo-500/40 bg-white/5 py-3 pl-4 pr-4 text-white/70 italic rounded-r-lg">${escapeHtml(quoteLines.join(' '))}</blockquote>`)
+        continue
+      }
+
+      if (!line.trim()) { i++; continue }
+
+      const formatted = escapeHtml(line)
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.+?)\*/g, '<em>$1</em>')
+        .replace(/`(.+?)`/g, '<code class="rounded bg-white/10 px-1.5 py-0.5 text-sm text-indigo-300">$1</code>')
+        .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" class="text-indigo-400 hover:text-indigo-300 underline underline-offset-2">$1</a>')
+
+      elements.push(`<p class="my-3 leading-relaxed text-white/80">${formatted}</p>`)
+      i++
+    }
+
+    return elements.join('')
+  }
+
+  return <article class="prose-custom max-w-none" innerHTML={renderContent()} />
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}

package/packages/solidjs/src/components/DocSearch.tsx

@@ -0,0 +1,81 @@
+import { createSignal, createEffect, For, Show, onCleanup } from 'solid-js'
+import type { SearchResult } from '@geenius-docs/shared'
+import { highlightMatch } from '@geenius-docs/shared'
+
+interface DocSearchProps {
+  results: SearchResult[]; query: string; onQuery: (q: string) => void
+  onSelect: (result: SearchResult) => void; isOpen: boolean; onClose: () => void
+}
+
+export function DocSearch(props: DocSearchProps) {
+  const [activeIndex, setActiveIndex] = createSignal(0)
+  let inputRef: HTMLInputElement | undefined
+
+  createEffect(() => {
+    if (props.isOpen) { inputRef?.focus(); setActiveIndex(0) }
+  })
+
+  createEffect(() => { props.results; setActiveIndex(0) })
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIndex((i) => Math.min(i + 1, props.results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIndex((i) => Math.max(i - 1, 0)) }
+    else if (e.key === 'Enter' && props.results[activeIndex()]) { e.preventDefault(); props.onSelect(props.results[activeIndex()]) }
+    else if (e.key === 'Escape') { e.preventDefault(); props.onClose() }
+  }
+
+  return (
+    <Show when={props.isOpen}>
+      <div class="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]" onClick={() => props.onClose()}>
+        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" />
+        <div class="relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-white/10 bg-[#0d0e14] shadow-2xl" onClick={(e) => e.stopPropagation()}>
+          <div class="flex items-center gap-3 border-b border-white/10 px-5 py-4">
+            <svg class="h-5 w-5 shrink-0 text-white/30" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              value={props.query}
+              onInput={(e) => props.onQuery(e.currentTarget.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search documentation…"
+              class="flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none"
+            />
+            <kbd class="rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-[11px] text-white/30">ESC</kbd>
+          </div>
+          <div class="max-h-80 overflow-y-auto p-2">
+            <Show when={props.results.length === 0 && props.query.trim()}>
+              <div class="flex flex-col items-center py-10 text-center text-white/30">
+                <p class="text-sm">No results for "{props.query}"</p>
+              </div>
+            </Show>
+            <Show when={props.results.length === 0 && !props.query.trim()}>
+              <div class="py-8 text-center text-sm text-white/30">Start typing to search…</div>
+            </Show>
+            <For each={props.results}>
+              {(result, idx) => (
+                <button
+                  type="button"
+                  onClick={() => props.onSelect(result)}
+                  class={`flex w-full flex-col gap-1 rounded-xl px-4 py-3 text-left transition-colors ${
+                    idx() === activeIndex() ? 'bg-indigo-500/15 text-white' : 'text-white/70 hover:bg-white/5'
+                  }`}
+                >
+                  <div class="flex items-center gap-2">
+                    <span class="rounded bg-indigo-500/20 px-1.5 py-0.5 text-[10px] font-medium text-indigo-300">{result.sectionTitle}</span>
+                    <span class="text-sm font-medium">{result.pageTitle}</span>
+                  </div>
+                  <p class="truncate text-xs text-white/40">{highlightMatch(result.highlight, props.query)}</p>
+                </button>
+              )}
+            </For>
+          </div>
+          <div class="flex items-center gap-4 border-t border-white/5 px-5 py-2.5 text-[11px] text-white/20">
+            <span>↑↓ navigate</span><span>↵ select</span><span>esc close</span>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/DocSidebar.tsx

@@ -0,0 +1,92 @@
+import { createSignal, For, Show } from 'solid-js'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+
+interface DocSidebarProps {
+  sections: (DocSection & { pages?: DocPage[]; pageCount?: number })[]
+  currentPageId?: string
+  onNavigate: (page: DocPage, section: DocSection) => void
+}
+
+export function DocSidebar(props: DocSidebarProps) {
+  const [expandedIds, setExpandedIds] = createSignal<Set<string>>(new Set())
+
+  const toggle = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const topLevel = () => props.sections.filter((s) => !s.parentId)
+  const childrenOf = (parentId: string) => props.sections.filter((s) => s.parentId === parentId)
+
+  const renderSection = (section: DocSection & { pages?: DocPage[]; pageCount?: number }, depth: number) => {
+    const children = () => childrenOf(section.id)
+    const isExpanded = () => expandedIds().has(section.id)
+    const pages = () => section.pages ?? []
+    const hasContent = () => children().length > 0 || pages().length > 0
+
+    return (
+      <div style={{ "padding-left": `${depth * 12}px` }} class="mb-1">
+        <button
+          type="button"
+          onClick={() => toggle(section.id)}
+          class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-white/5"
+        >
+          <Show when={section.icon}>
+            <span class="text-base">{section.icon}</span>
+          </Show>
+          <span class="flex-1 truncate">{section.title}</span>
+          <Show when={section.pageCount != null}>
+            <span class="text-xs tabular-nums opacity-50">{section.pageCount}</span>
+          </Show>
+          <Show when={hasContent()}>
+            <svg
+              class={`h-3.5 w-3.5 shrink-0 transition-transform ${isExpanded() ? 'rotate-90' : ''}`}
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+          </Show>
+        </button>
+
+        <Show when={isExpanded()}>
+          <div class="ml-2 border-l border-white/10 pl-2">
+            <For each={pages()}>
+              {(page) => (
+                <button
+                  type="button"
+                  onClick={() => props.onNavigate(page, section)}
+                  class={`flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+                    props.currentPageId === page.id
+                      ? 'bg-indigo-500/20 text-indigo-300 font-medium'
+                      : 'text-white/60 hover:text-white/90 hover:bg-white/5'
+                  }`}
+                >
+                  <span class="truncate">{page.title}</span>
+                </button>
+              )}
+            </For>
+            <For each={children()}>
+              {(child) => renderSection(child, depth + 1)}
+            </For>
+          </div>
+        </Show>
+      </div>
+    )
+  }
+
+  return (
+    <nav class="flex flex-col gap-0.5 py-4">
+      <div class="px-4 pb-3 text-xs font-semibold uppercase tracking-widest text-white/40">
+        Documentation
+      </div>
+      <For each={topLevel()}>
+        {(s) => renderSection(s, 0)}
+      </For>
+    </nav>
+  )
+}

package/packages/solidjs/src/components/DocsLayout.tsx

@@ -0,0 +1,38 @@
+import { Show } from 'solid-js'
+import type { DocPage, DocSection, TocItem, BreadcrumbItem } from '@geenius-docs/shared'
+import { DocSidebar } from './DocSidebar'
+import { TableOfContents } from './TableOfContents'
+import { Breadcrumbs } from './Breadcrumbs'
+import type { JSX } from 'solid-js'
+
+interface DocsLayoutProps {
+  sections: (DocSection & { pages?: DocPage[] })[]
+  toc?: TocItem[]; activeHeadingId?: string; breadcrumbs?: BreadcrumbItem[]
+  currentPageId?: string; onNavigate: (page: DocPage, section: DocSection) => void
+  children: JSX.Element
+}
+
+export function DocsLayout(props: DocsLayoutProps) {
+  return (
+    <div class="flex min-h-screen bg-[#090a0f] text-white">
+      <aside class="sticky top-0 hidden h-screen w-[260px] shrink-0 overflow-y-auto border-r border-white/5 bg-[#0b0c12] lg:block">
+        <DocSidebar sections={props.sections} currentPageId={props.currentPageId} onNavigate={props.onNavigate} />
+      </aside>
+      <main class="flex-1 overflow-hidden">
+        <div class="mx-auto flex max-w-6xl gap-8 px-6 py-8 lg:px-10">
+          <div class="min-w-0 flex-1">
+            <Show when={props.breadcrumbs && props.breadcrumbs.length > 0}>
+              <div class="mb-6"><Breadcrumbs items={props.breadcrumbs!} /></div>
+            </Show>
+            {props.children}
+          </div>
+          <Show when={props.toc && props.toc.length > 0}>
+            <aside class="hidden w-[220px] shrink-0 xl:block">
+              <TableOfContents toc={props.toc!} activeId={props.activeHeadingId} />
+            </aside>
+          </Show>
+        </div>
+      </main>
+    </div>
+  )
+}

package/packages/solidjs/src/components/EditButton.tsx

@@ -0,0 +1,15 @@
+import { Show } from 'solid-js'
+
+export function EditButton(props: { pageSlug: string; editUrl?: string }) {
+  return (
+    <Show when={props.editUrl}>
+      <a href={`${props.editUrl!.replace(/\/$/, '')}/${props.pageSlug}.mdx`} target="_blank" rel="noopener noreferrer"
+        class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-white/40 transition-colors hover:border-white/20 hover:text-white/60">
+        <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor">
+          <path d="M11.5 1.5l3 3-9 9H2.5v-3l9-9z" stroke-width="1.5" stroke-linejoin="round" />
+        </svg>
+        Edit this page
+      </a>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/PageNavigation.tsx

@@ -0,0 +1,31 @@
+import { Show } from 'solid-js'
+
+interface PageNavigationProps {
+  prev?: { title: string; href: string }
+  next?: { title: string; href: string }
+}
+
+export function PageNavigation(props: PageNavigationProps) {
+  return (
+    <Show when={props.prev || props.next}>
+      <div class="mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8">
+        <Show when={props.prev} fallback={<div class="flex-1" />}>
+          {(prev) => (
+            <a href={prev().href} class="group flex flex-1 flex-col rounded-xl border border-white/10 p-4 transition-all hover:border-indigo-500/40 hover:bg-white/5">
+              <span class="text-xs text-white/40 group-hover:text-indigo-400 transition-colors">← Previous</span>
+              <span class="mt-1 text-sm font-medium text-white/80 group-hover:text-white transition-colors truncate">{prev().title}</span>
+            </a>
+          )}
+        </Show>
+        <Show when={props.next} fallback={<div class="flex-1" />}>
+          {(next) => (
+            <a href={next().href} class="group flex flex-1 flex-col items-end rounded-xl border border-white/10 p-4 text-right transition-all hover:border-indigo-500/40 hover:bg-white/5">
+              <span class="text-xs text-white/40 group-hover:text-indigo-400 transition-colors">Next →</span>
+              <span class="mt-1 text-sm font-medium text-white/80 group-hover:text-white transition-colors truncate">{next().title}</span>
+            </a>
+          )}
+        </Show>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/TableOfContents.tsx

@@ -0,0 +1,41 @@
+import { For, Show } from 'solid-js'
+import type { TocItem } from '@geenius-docs/shared'
+
+interface TableOfContentsProps { toc: TocItem[]; activeId?: string }
+
+function TocLink(props: { item: TocItem; activeId?: string; depth?: number }) {
+  const depth = () => props.depth ?? 0
+  return (
+    <>
+      <a
+        href={`#${props.item.id}`}
+        class={`block truncate border-l-2 py-1 text-[13px] transition-all duration-200 ${
+          props.activeId === props.item.id
+            ? 'border-indigo-500 text-indigo-300 font-medium'
+            : 'border-transparent text-white/40 hover:text-white/70 hover:border-white/20'
+        }`}
+        style={{ "padding-left": `${12 + depth() * 12}px` }}
+      >
+        {props.item.text}
+      </a>
+      <For each={props.item.children}>
+        {(child) => <TocLink item={child} activeId={props.activeId} depth={depth() + 1} />}
+      </For>
+    </>
+  )
+}
+
+export function TableOfContents(props: TableOfContentsProps) {
+  return (
+    <Show when={props.toc.length > 0}>
+      <nav class="sticky top-24">
+        <h4 class="mb-3 text-xs font-semibold uppercase tracking-widest text-white/40">On this page</h4>
+        <div class="flex flex-col">
+          <For each={props.toc}>
+            {(item) => <TocLink item={item} activeId={props.activeId} />}
+          </For>
+        </div>
+      </nav>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/VersionSelector.tsx

@@ -0,0 +1,30 @@
+import { createSignal, Show, For } from 'solid-js'
+
+interface VersionSelectorProps { versions: string[]; current: string; onSelect: (v: string) => void }
+
+export function VersionSelector(props: VersionSelectorProps) {
+  const [isOpen, setIsOpen] = createSignal(false)
+
+  return (
+    <Show when={props.versions.length > 1}>
+      <div class="relative">
+        <button type="button" onClick={() => setIsOpen(!isOpen())} class="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/60 transition-colors hover:border-indigo-500/30">
+          <span>v{props.current}</span>
+          <svg class={`h-3 w-3 transition-transform ${isOpen() ? 'rotate-180' : ''}`} viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" /></svg>
+        </button>
+        <Show when={isOpen()}>
+          <div class="absolute right-0 top-full z-20 mt-1 min-w-[120px] overflow-hidden rounded-lg border border-white/10 bg-[#111218] shadow-xl">
+            <For each={props.versions}>
+              {(v) => (
+                <button type="button" onClick={() => { props.onSelect(v); setIsOpen(false) }}
+                  class={`flex w-full items-center px-3 py-2 text-xs transition-colors ${v === props.current ? 'bg-indigo-500/15 text-indigo-300' : 'text-white/60 hover:bg-white/5'}`}>
+                  v{v}{v === props.current && <span class="ml-auto text-[10px]">✓</span>}
+                </button>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/index.ts

@@ -0,0 +1,9 @@
+export { DocSidebar } from './DocSidebar'
+export { DocPage } from './DocPage'
+export { TableOfContents } from './TableOfContents'
+export { Breadcrumbs } from './Breadcrumbs'
+export { PageNavigation } from './PageNavigation'
+export { DocSearch } from './DocSearch'
+export { VersionSelector } from './VersionSelector'
+export { EditButton } from './EditButton'
+export { DocsLayout } from './DocsLayout'