@geenius/docs 0.1.0

package/packages/solidjs/src/createDocs.ts

@@ -0,0 +1,62 @@
+// @geenius-docs/solidjs — src/createDocs.ts
+
+import { createSignal, createMemo, onMount } from 'solid-js'
+import type { DocsPage, DocsSidebar, DocsSearchResult, DocsProvider } from '@geenius-docs/shared'
+
+/**
+ * createDocs — SolidJS primitive wrapping a DocsProvider for docs rendering.
+ * SolidJS equivalent of useDocs hook.
+ */
+export function createDocs(provider: DocsProvider) {
+  const [sidebar, setSidebar] = createSignal<DocsSidebar | null>(null)
+  const [currentPage, setCurrentPage] = createSignal<DocsPage | null>(null)
+  const [searchResults, setSearchResults] = createSignal<DocsSearchResult[]>([])
+  const [isLoading, setIsLoading] = createSignal(false)
+  const [searchQuery, setSearchQuery] = createSignal('')
+
+  // Load sidebar on mount
+  onMount(async () => {
+    const sb = await provider.getSidebar()
+    setSidebar(sb)
+  })
+
+  const loadPage = async (slug: string) => {
+    setIsLoading(true)
+    try {
+      const page = await provider.getPage(slug)
+      setCurrentPage(page)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const search = async (query: string) => {
+    setSearchQuery(query)
+    if (!query.trim()) {
+      setSearchResults([])
+      return
+    }
+    const results = await provider.search(query)
+    setSearchResults(results)
+  }
+
+  const navigation = createMemo(() => {
+    const page = currentPage()
+    if (!page) return { prev: null, next: null }
+    return {
+      prev: page.prev ?? null,
+      next: page.next ?? null,
+    }
+  })
+
+  return {
+    sidebar,
+    currentPage,
+    navigation,
+    isLoading,
+    searchResults,
+    searchQuery,
+    loadPage,
+    search,
+  }
+}

package/packages/solidjs/src/index.ts

@@ -0,0 +1,28 @@
+// Primitives
+export { createDocs } from './primitives/createDocs'
+export { createDocSearch } from './primitives/createDocSearch'
+export { createDocsAdmin } from './primitives/createDocsAdmin'
+export { createTableOfContents } from './primitives/createTableOfContents'
+
+// Components
+export { DocSidebar } from './components/DocSidebar'
+export { DocPage } from './components/DocPage'
+export { TableOfContents } from './components/TableOfContents'
+export { Breadcrumbs } from './components/Breadcrumbs'
+export { PageNavigation } from './components/PageNavigation'
+export { DocSearch } from './components/DocSearch'
+export { VersionSelector } from './components/VersionSelector'
+export { EditButton } from './components/EditButton'
+export { DocsLayout } from './components/DocsLayout'
+
+// Pages
+export { DocsIndexPage } from './pages/DocsIndexPage'
+export { DocViewPage } from './pages/DocViewPage'
+export { DocSearchPage } from './pages/DocSearchPage'
+export { DocsAdminPage } from './pages/DocsAdminPage'
+
+// Re-export shared types
+export type {
+  DocPage as DocPageType, DocSection, SearchResult, TocItem,
+  BreadcrumbItem, DocsConfig, DocAccess, DocStatus,
+} from '@geenius-docs/shared'

package/packages/solidjs/src/pages/DocSearchPage.tsx

@@ -0,0 +1,72 @@
+import { createMemo, Show, For } from 'solid-js'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs, highlightMatch } from '@geenius-docs/shared'
+import { createDocSearch } from '../primitives/createDocSearch'
+
+interface DocSearchPageProps {
+  tree: () => (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocSearchPage(props: DocSearchPageProps) {
+  const sections = createMemo(() => props.tree() ?? [])
+  const flatPages = createMemo(() => sections().flatMap(s => s.pages ?? []))
+
+  const searchFn = (q: string): SearchResult[] => {
+    const index = buildDocsIndex(flatPages(), sections())
+    return searchDocs(q, index)
+  }
+
+  const { results, isSearching, query, setQuery } = createDocSearch(searchFn)
+
+  return (
+    <Show when={props.tree() !== undefined} fallback={
+      <div class="min-h-screen bg-[#090a0f] px-6 py-16"><div class="mx-auto max-w-2xl"><div class="mb-8 h-12 animate-pulse rounded-xl bg-white/5" /></div></div>
+    }>
+      <div class="min-h-screen bg-[#090a0f] text-white">
+        <div class="mx-auto max-w-2xl px-6 py-16">
+          <h1 class="mb-8 text-2xl font-bold">Search Documentation</h1>
+          <div class="relative mb-8">
+            <input type="text" value={query()} onInput={e => setQuery(e.currentTarget.value)} placeholder="Type to search…" autofocus
+              class="w-full rounded-xl border border-white/10 bg-white/5 py-3.5 pl-12 pr-4 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" />
+            <Show when={isSearching()}>
+              <div class="absolute right-4 top-1/2 -translate-y-1/2"><div class="h-4 w-4 animate-spin rounded-full border-2 border-white/10 border-t-indigo-400" /></div>
+            </Show>
+          </div>
+          <Show when={results().length > 0}>
+            <div class="space-y-2">
+              <For each={results()}>
+                {(result) => {
+                  const section = () => sections().find(s => s.slug === result.sectionSlug)
+                  const page = () => flatPages().find(p => p.id === result.pageId)
+                  return (
+                    <button type="button" onClick={() => { const p = page(); const s = section(); if (p && s && props.onSelectPage) props.onSelectPage(p, s) }}
+                      class="flex w-full flex-col gap-1.5 rounded-xl border border-white/5 bg-white/[0.02] p-4 text-left transition-all hover:border-indigo-500/20 hover:bg-white/[0.05]">
+                      <div class="flex items-center gap-2">
+                        <span class="rounded bg-indigo-500/20 px-2 py-0.5 text-[10px] font-medium text-indigo-300">{result.sectionTitle}</span>
+                        <span class="text-sm font-medium text-white/90">{result.pageTitle}</span>
+                      </div>
+                      <p class="text-xs leading-relaxed text-white/40">{highlightMatch(result.highlight, query())}</p>
+                    </button>
+                  )
+                }}
+              </For>
+            </div>
+          </Show>
+          <Show when={query().trim() && results().length === 0 && !isSearching()}>
+            <div class="flex flex-col items-center py-16 text-center">
+              <div class="mb-4 text-5xl opacity-30">🔍</div>
+              <h3 class="text-lg font-medium text-white/60">No results found</h3>
+            </div>
+          </Show>
+          <Show when={!query().trim()}>
+            <div class="flex flex-col items-center py-16 text-center">
+              <div class="mb-4 text-5xl opacity-20">📖</div>
+              <p class="text-sm text-white/30">Start typing to search across all documentation</p>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/pages/DocViewPage.tsx

@@ -0,0 +1,80 @@
+import { createEffect, createMemo, Show } from 'solid-js'
+import type { DocPage as DocPageType, DocSection } from '@geenius-docs/shared'
+import { buildBreadcrumbs } from '@geenius-docs/shared'
+import { createDocs } from '../primitives/createDocs'
+import { createTableOfContents } from '../primitives/createTableOfContents'
+import { DocsLayout } from '../components/DocsLayout'
+import { DocPage } from '../components/DocPage'
+import { EditButton } from '../components/EditButton'
+import { PageNavigation } from '../components/PageNavigation'
+
+interface DocViewPageProps {
+  tree: () => (DocSection & { pages: DocPageType[]; pageCount: number })[] | undefined
+  page: () => DocPageType | null | undefined
+  editPageUrl?: string
+  onNavigate: (page: DocPageType, section: DocSection) => void
+  onIncrementView?: (pageId: string) => void
+}
+
+export function DocViewPage(props: DocViewPageProps) {
+  const docs = createDocs(props.tree)
+  const { toc, activeId } = createTableOfContents(() => props.page()?.content)
+
+  createEffect(() => {
+    const p = props.page()
+    if (p?.id && props.onIncrementView) props.onIncrementView(p.id)
+  })
+
+  const breadcrumbs = createMemo(() => {
+    const p = props.page()
+    if (!p) return []
+    return buildBreadcrumbs(docs.sections(), p.sectionId, p.slug)
+  })
+
+  const nav = createMemo(() => {
+    const p = props.page()
+    if (!p) return { prev: undefined, next: undefined }
+    const all = docs.flatPages()
+    const idx = all.findIndex(pg => pg.id === p.id)
+    const section = docs.sections().find(s => s.id === p.sectionId)
+    return {
+      prev: idx > 0 ? { title: all[idx - 1].title, href: `/docs/${section?.slug ?? ''}/${all[idx - 1].slug}` } : undefined,
+      next: idx < all.length - 1 ? { title: all[idx + 1].title, href: `/docs/${section?.slug ?? ''}/${all[idx + 1].slug}` } : undefined,
+    }
+  })
+
+  return (
+    <Show when={!docs.isLoading() && props.page() !== undefined} fallback={
+      <div class="flex min-h-screen bg-[#090a0f]">
+        <div class="hidden w-[260px] shrink-0 border-r border-white/5 bg-[#0b0c12] lg:block"><div class="space-y-3 p-4">{Array.from({ length: 8 }).map(() => <div class="h-8 animate-pulse rounded-lg bg-white/5" />)}</div></div>
+        <div class="flex-1 px-10 py-8"><div class="mx-auto max-w-3xl space-y-4"><div class="h-10 w-96 animate-pulse rounded bg-white/5" /></div></div>
+      </div>
+    }>
+      <Show when={props.page()} fallback={
+        <div class="flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center">
+          <div class="mb-4 text-6xl opacity-30">🔍</div>
+          <h2 class="mb-2 text-xl font-semibold text-white/80">Page not found</h2>
+        </div>
+      }>
+        {(page) => (
+          <DocsLayout sections={docs.sections()} toc={toc()} activeHeadingId={activeId()} breadcrumbs={breadcrumbs()}
+            currentPageId={page().id} onNavigate={props.onNavigate}>
+            <div class="mb-8">
+              <h1 class="mb-3 text-3xl font-bold tracking-tight">{page().title}</h1>
+              <div class="flex flex-wrap items-center gap-4 text-sm text-white/40">
+                <span>{page().author.name}</span>
+                <Show when={page().readingTime > 0}><span>{page().readingTime} min read</span></Show>
+                <Show when={page().viewCount > 0}><span>{page().viewCount.toLocaleString()} views</span></Show>
+              </div>
+            </div>
+            <DocPage page={page()} />
+            <div class="mt-10 flex items-center justify-between border-t border-white/5 pt-6">
+              <EditButton pageSlug={page().slug} editUrl={props.editPageUrl} />
+            </div>
+            <PageNavigation prev={nav().prev} next={nav().next} />
+          </DocsLayout>
+        )}
+      </Show>
+    </Show>
+  )
+}

package/packages/solidjs/src/pages/DocsAdminPage.tsx

@@ -0,0 +1,123 @@
+import { createSignal, createMemo, Show, For } from 'solid-js'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+
+interface DocsAdminPageProps {
+  tree: () => (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  allPages?: DocPage[]
+  admin: {
+    createSection: (d: Record<string, unknown>) => Promise<void>
+    deleteSection: (id: string) => Promise<void>
+    createPage: (d: Record<string, unknown>) => Promise<void>
+    publishPage: (id: string) => Promise<void>
+    archivePage: (id: string) => Promise<void>
+    deletePage: (id: string) => Promise<void>
+  }
+}
+
+export function DocsAdminPage(props: DocsAdminPageProps) {
+  const sections = createMemo(() => props.tree?.() ?? [])
+  const [selectedId, setSelectedId] = createSignal<string | null>(null)
+  const [showSF, setShowSF] = createSignal(false)
+  const [showPF, setShowPF] = createSignal(false)
+  const [sf, setSf] = createSignal({ title: '', slug: '', description: '', icon: '', access: 'team' })
+  const [pf, setPf] = createSignal({ title: '', slug: '', content: '', access: 'team', tags: '' })
+
+  const selectedSection = createMemo(() => sections().find(s => s.id === selectedId()))
+  const sectionPages = createMemo(() => {
+    const sec = selectedSection()
+    if (!sec) return []
+    if (props.allPages) return props.allPages.filter(p => p.sectionId === selectedId())
+    return sec.pages ?? []
+  })
+
+  return (
+    <Show when={props.tree?.() !== undefined} fallback={
+      <div class="min-h-screen bg-[#090a0f] px-6 py-12"><div class="mx-auto max-w-6xl"><div class="mb-8 h-10 w-48 animate-pulse rounded bg-white/5" /></div></div>
+    }>
+      <div class="min-h-screen bg-[#090a0f] text-white">
+        <div class="mx-auto max-w-6xl px-6 py-12">
+          <h1 class="mb-8 text-2xl font-bold">Docs Admin</h1>
+          <div class="grid gap-6 md:grid-cols-2">
+            {/* Sections */}
+            <div class="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+              <div class="mb-4 flex items-center justify-between">
+                <h2 class="text-lg font-semibold text-white/80">Sections</h2>
+                <button type="button" onClick={() => setShowSF(!showSF())} class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium hover:bg-indigo-500">+ Add</button>
+              </div>
+              <Show when={showSF()}>
+                <div class="mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4">
+                  <input type="text" placeholder="Title" value={sf().title} onInput={e => setSf({...sf(), title: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <input type="text" placeholder="Slug" value={sf().slug} onInput={e => setSf({...sf(), slug: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <input type="text" placeholder="Icon" value={sf().icon} onInput={e => setSf({...sf(), icon: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <input type="text" placeholder="Description" value={sf().description} onInput={e => setSf({...sf(), description: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <div class="flex gap-2">
+                    <button type="button" onClick={async () => { await props.admin.createSection({...sf(), order: sections().length}); setSf({title:'',slug:'',description:'',icon:'',access:'team'}); setShowSF(false) }} class="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium hover:bg-indigo-500">Create</button>
+                    <button type="button" onClick={() => setShowSF(false)} class="rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5">Cancel</button>
+                  </div>
+                </div>
+              </Show>
+              <div class="space-y-1">
+                <Show when={sections().length === 0}><p class="py-8 text-center text-sm text-white/30">No sections</p></Show>
+                <For each={sections()}>
+                  {(section) => (
+                    <div class={`group flex items-center gap-2 rounded-lg px-3 py-2.5 cursor-pointer ${selectedId() === section.id ? 'bg-indigo-500/15 text-indigo-300' : 'hover:bg-white/5 text-white/70'}`}
+                      onClick={() => setSelectedId(section.id)}>
+                      <Show when={section.icon}><span>{section.icon}</span></Show>
+                      <span class="flex-1 text-sm font-medium truncate">{section.title}</span>
+                      <span class="text-[11px] tabular-nums opacity-40">{section.pageCount ?? 0}</span>
+                      <button type="button" onClick={(e) => { e.stopPropagation(); if (confirm(`Delete "${section.title}"?`)) props.admin.deleteSection(section.id) }}
+                        class="rounded p-1 text-white/20 opacity-0 group-hover:opacity-100 hover:text-red-400">✕</button>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+            {/* Pages */}
+            <div class="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+              <div class="mb-4 flex items-center justify-between">
+                <h2 class="text-lg font-semibold text-white/80">{selectedSection() ? `Pages — ${selectedSection()!.title}` : 'Pages'}</h2>
+                <Show when={selectedSection()}><button type="button" onClick={() => setShowPF(!showPF())} class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium hover:bg-indigo-500">+ Add</button></Show>
+              </div>
+              <Show when={!selectedSection()}><p class="py-16 text-center text-sm text-white/30">Select a section</p></Show>
+              <Show when={showPF() && selectedSection()}>
+                <div class="mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4">
+                  <input type="text" placeholder="Title" value={pf().title} onInput={e => setPf({...pf(), title: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <input type="text" placeholder="Slug" value={pf().slug} onInput={e => setPf({...pf(), slug: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <textarea placeholder="Content (MDX)" value={pf().content} onInput={e => setPf({...pf(), content: e.currentTarget.value})} rows={4} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40 resize-y" />
+                  <input type="text" placeholder="Tags (comma)" value={pf().tags} onInput={e => setPf({...pf(), tags: e.currentTarget.value})} class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40" />
+                  <div class="flex gap-2">
+                    <button type="button" onClick={async () => { await props.admin.createPage({title:pf().title,slug:pf().slug,content:pf().content,sectionId:selectedId()!,access:pf().access as 'public'|'team'|'admin',tags:pf().tags?pf().tags.split(',').map(t=>t.trim()):[],order:sectionPages().length}); setPf({title:'',slug:'',content:'',access:'team',tags:''}); setShowPF(false) }} class="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium hover:bg-indigo-500">Create</button>
+                    <button type="button" onClick={() => setShowPF(false)} class="rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5">Cancel</button>
+                  </div>
+                </div>
+              </Show>
+              <Show when={selectedSection() && sectionPages().length > 0}>
+                <div class="space-y-1">
+                  <For each={sectionPages()}>
+                    {(page) => (
+                      <div class="group flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/5">
+                        <div class="flex-1 min-w-0">
+                          <p class="text-sm font-medium text-white/80 truncate">{page.title}</p>
+                          <p class="text-[11px] text-white/30">/{page.slug}</p>
+                        </div>
+                        <span class={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${page.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : page.status === 'archived' ? 'bg-white/5 text-white/30' : 'bg-amber-500/15 text-amber-400'}`}>{page.status}</span>
+                        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+                          <Show when={page.status === 'draft'}><button type="button" onClick={() => props.admin.publishPage(page.id)} class="rounded px-2 py-1 text-[11px] text-emerald-400 hover:bg-emerald-500/10">Publish</button></Show>
+                          <Show when={page.status === 'published'}><button type="button" onClick={() => props.admin.archivePage(page.id)} class="rounded px-2 py-1 text-[11px] text-amber-400 hover:bg-amber-500/10">Archive</button></Show>
+                          <button type="button" onClick={() => { if (confirm(`Delete "${page.title}"?`)) props.admin.deletePage(page.id) }} class="rounded p-1 text-white/20 hover:text-red-400">✕</button>
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <Show when={selectedSection() && sectionPages().length === 0 && !showPF()}>
+                <p class="py-12 text-center text-sm text-white/30">No pages in this section</p>
+              </Show>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/pages/DocsIndexPage.tsx

@@ -0,0 +1,85 @@
+import { createSignal, createEffect, createMemo, For, Show, onCleanup } from 'solid-js'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs } from '@geenius-docs/shared'
+import { createDocs } from '../primitives/createDocs'
+import { createDocSearch } from '../primitives/createDocSearch'
+import { DocSearch } from '../components/DocSearch'
+
+interface DocsIndexPageProps {
+  tree: () => (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocsIndexPage(props: DocsIndexPageProps) {
+  const docs = createDocs(props.tree)
+  const [isSearchOpen, setIsSearchOpen] = createSignal(false)
+
+  const searchFn = (q: string): SearchResult[] => {
+    const index = buildDocsIndex(docs.flatPages(), docs.sections())
+    return searchDocs(q, index)
+  }
+
+  const search = createDocSearch(searchFn)
+
+  createEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setIsSearchOpen(true) }
+    }
+    document.addEventListener('keydown', handler)
+    onCleanup(() => document.removeEventListener('keydown', handler))
+  })
+
+  return (
+    <Show when={!docs.isLoading()} fallback={
+      <div class="min-h-screen bg-[#090a0f] px-6 py-16">
+        <div class="mx-auto max-w-5xl">
+          <div class="mb-10 h-10 w-64 animate-pulse rounded-lg bg-white/5" />
+          <div class="mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-white/5" />
+          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <For each={Array(6)}>{() => <div class="h-36 animate-pulse rounded-xl bg-white/5" />}</For>
+          </div>
+        </div>
+      </div>
+    }>
+      <Show when={docs.sections().length > 0} fallback={
+        <div class="flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center">
+          <div class="mb-4 text-6xl opacity-30">📚</div>
+          <h2 class="mb-2 text-xl font-semibold text-white/80">No documentation yet</h2>
+          <p class="max-w-sm text-sm text-white/40">Create your first section and pages to get started.</p>
+        </div>
+      }>
+        <div class="min-h-screen bg-[#090a0f] text-white">
+          <div class="mx-auto max-w-5xl px-6 py-16">
+            <h1 class="mb-2 text-4xl font-bold tracking-tight">Documentation</h1>
+            <p class="mb-10 text-lg text-white/50">Browse guides, API references, and tutorials.</p>
+            <button type="button" onClick={() => setIsSearchOpen(true)}
+              class="mb-12 flex w-full max-w-xl items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-5 py-3.5 text-left text-sm text-white/30 transition-colors hover:border-white/20">
+              <svg class="h-4.5 w-4.5 shrink-0" 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>
+              <span class="flex-1">Search documentation…</span>
+              <kbd class="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-[11px]">⌘K</kbd>
+            </button>
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <For each={docs.sections().filter(s => !s.parentId)}>
+                {(section) => (
+                  <button type="button" onClick={() => { const fp = section.pages?.[0]; if (fp && props.onSelectPage) props.onSelectPage(fp, section) }}
+                    class="group flex flex-col rounded-xl border border-white/8 bg-white/[0.03] p-5 text-left transition-all hover:border-indigo-500/30 hover:bg-white/[0.06]">
+                    <Show when={section.icon}><span class="mb-3 text-2xl">{section.icon}</span></Show>
+                    <h3 class="mb-1.5 text-base font-semibold text-white/90 group-hover:text-white">{section.title}</h3>
+                    <Show when={section.description}><p class="mb-3 flex-1 text-sm leading-relaxed text-white/40">{section.description}</p></Show>
+                    <div class="text-xs text-white/25"><span>{section.pageCount ?? 0} pages</span></div>
+                  </button>
+                )}
+              </For>
+            </div>
+          </div>
+          <DocSearch results={search.results()} query={search.query()} onQuery={search.setQuery}
+            onSelect={(result) => { setIsSearchOpen(false); search.clearSearch();
+              const section = docs.sections().find(s => s.slug === result.sectionSlug)
+              const page = docs.flatPages().find(p => p.id === result.pageId)
+              if (page && section && props.onSelectPage) props.onSelectPage(page, section)
+            }} isOpen={isSearchOpen()} onClose={() => setIsSearchOpen(false)} />
+        </div>
+      </Show>
+    </Show>
+  )
+}

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

@@ -0,0 +1,4 @@
+export { DocsIndexPage } from './DocsIndexPage'
+export { DocViewPage } from './DocViewPage'
+export { DocSearchPage } from './DocSearchPage'
+export { DocsAdminPage } from './DocsAdminPage'

package/packages/solidjs/src/primitives/createDocSearch.ts

@@ -0,0 +1,42 @@
+import { createSignal, createEffect, onCleanup } from 'solid-js'
+import type { SearchResult } from '@geenius-docs/shared'
+
+export function createDocSearch(
+  searchFn: (query: string) => SearchResult[] | Promise<SearchResult[]>,
+  debounceMs = 250
+) {
+  const [query, setQuery] = createSignal('')
+  const [results, setResults] = createSignal<SearchResult[]>([])
+  const [isSearching, setIsSearching] = createSignal(false)
+
+  createEffect(() => {
+    const q = query()
+    if (!q.trim()) {
+      setResults([])
+      setIsSearching(false)
+      return
+    }
+
+    setIsSearching(true)
+    const timer = setTimeout(async () => {
+      try {
+        const r = await searchFn(q)
+        setResults(r)
+      } catch {
+        setResults([])
+      } finally {
+        setIsSearching(false)
+      }
+    }, debounceMs)
+
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  const clearSearch = () => {
+    setQuery('')
+    setResults([])
+    setIsSearching(false)
+  }
+
+  return { results, isSearching, query, setQuery, clearSearch }
+}

package/packages/solidjs/src/primitives/createDocs.ts

@@ -0,0 +1,35 @@
+import { createSignal, createMemo } from 'solid-js'
+import type { DocPage, DocSection, DocsConfig } from '@geenius-docs/shared'
+import { defaultDocsConfig } from '@geenius-docs/shared'
+
+export function createDocs(
+  tree: () => (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined,
+  config?: Partial<DocsConfig>
+) {
+  const [currentSection, setSection] = createSignal<DocSection | null>(null)
+  const [currentPage, setPage] = createSignal<DocPage | null>(null)
+  const [searchQuery, setSearchQuery] = createSignal('')
+
+  const mergedConfig = createMemo(() => ({ ...defaultDocsConfig, ...config }))
+  const sections = createMemo(() => tree() ?? [])
+  const flatPages = createMemo(() => sections().flatMap((s) => s.pages ?? []))
+  const isLoading = createMemo(() => tree() === undefined)
+
+  const handleSetSection = (section: DocSection | null) => {
+    setSection(section)
+    setPage(null)
+  }
+
+  return {
+    sections,
+    currentSection,
+    setSection: handleSetSection,
+    currentPage,
+    setPage,
+    searchQuery,
+    setSearchQuery,
+    isLoading,
+    config: mergedConfig,
+    flatPages,
+  }
+}

package/packages/solidjs/src/primitives/createDocsAdmin.ts

@@ -0,0 +1,63 @@
+export function createDocsAdmin(mutations: {
+  createSection: (args: Record<string, unknown>) => Promise<unknown>
+  updateSection: (args: Record<string, unknown>) => Promise<unknown>
+  deleteSection: (args: Record<string, unknown>) => Promise<unknown>
+  reorderSections: (args: Record<string, unknown>) => Promise<unknown>
+  createPage: (args: Record<string, unknown>) => Promise<unknown>
+  updatePage: (args: Record<string, unknown>) => Promise<unknown>
+  publishPage: (args: Record<string, unknown>) => Promise<unknown>
+  archivePage: (args: Record<string, unknown>) => Promise<unknown>
+  deletePage: (args: Record<string, unknown>) => Promise<unknown>
+  reorderPages: (args: Record<string, unknown>) => Promise<unknown>
+  movePage: (args: Record<string, unknown>) => Promise<unknown>
+}) {
+  return {
+    createSection: async (data: {
+      title: string; slug: string; parentId?: string; order: number
+      icon?: string; description?: string; access: 'public' | 'team' | 'admin'
+    }) => { await mutations.createSection(data) },
+
+    updateSection: async (sectionId: string, data: Record<string, unknown>) => {
+      await mutations.updateSection({ sectionId, ...data })
+    },
+
+    deleteSection: async (sectionId: string) => {
+      await mutations.deleteSection({ sectionId })
+    },
+
+    reorderSections: async (sectionIds: string[]) => {
+      await mutations.reorderSections({ sectionIds })
+    },
+
+    createPage: async (data: {
+      title: string; slug: string; content: string; sectionId: string
+      access: 'public' | 'team' | 'admin'; tags?: string[]; version?: string
+      status?: 'draft' | 'published' | 'archived'; author?: { name: string; avatar?: string }
+      excerpt?: string; order?: number
+    }) => { await mutations.createPage(data) },
+
+    updatePage: async (pageId: string, data: Record<string, unknown>) => {
+      await mutations.updatePage({ pageId, ...data })
+    },
+
+    publishPage: async (pageId: string) => {
+      await mutations.publishPage({ pageId })
+    },
+
+    archivePage: async (pageId: string) => {
+      await mutations.archivePage({ pageId })
+    },
+
+    deletePage: async (pageId: string) => {
+      await mutations.deletePage({ pageId })
+    },
+
+    reorderPages: async (pageIds: string[]) => {
+      await mutations.reorderPages({ pageIds })
+    },
+
+    movePage: async (pageId: string, newSectionId: string, newOrder: number) => {
+      await mutations.movePage({ pageId, newSectionId, newOrder })
+    },
+  }
+}

package/packages/solidjs/src/primitives/createTableOfContents.ts

@@ -0,0 +1,51 @@
+import { createSignal, createEffect, createMemo, onCleanup } from 'solid-js'
+import type { TocItem } from '@geenius-docs/shared'
+import { extractToc } from '@geenius-docs/shared'
+
+export function createTableOfContents(mdxContent: () => string | undefined) {
+  const [activeId, setActiveId] = createSignal('')
+
+  const toc = createMemo<TocItem[]>(() => {
+    const content = mdxContent()
+    if (!content) return []
+    return extractToc(content)
+  })
+
+  const flatIds = createMemo(() => {
+    const ids: string[] = []
+    const collect = (items: TocItem[]) => {
+      for (const item of items) {
+        ids.push(item.id)
+        collect(item.children)
+      }
+    }
+    collect(toc())
+    return ids
+  })
+
+  createEffect(() => {
+    const ids = flatIds()
+    if (ids.length === 0) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+            break
+          }
+        }
+      },
+      { rootMargin: '-80px 0px -70% 0px', threshold: 0 }
+    )
+
+    for (const id of ids) {
+      const el = document.getElementById(id)
+      if (el) observer.observe(el)
+    }
+
+    onCleanup(() => observer.disconnect())
+  })
+
+  return { toc, activeId, setActiveId }
+}