@geenius/docs 0.1.0

package/packages/react-css/src/components/DocPage.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { DocPage as DocPageType } from '@geenius-docs/shared'
+import { slugify } from '@geenius-docs/shared'
+
+export function DocPage({ page }: { page: DocPageType }) {
+  const lines = page.content.split('\n'); const parts: string[] = []; let i = 0, inCode = false, codeLang = '', codeLines: string[] = []
+  const esc = (t: string) => t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+
+  while (i < lines.length) {
+    const line = lines[i]
+    if (line.startsWith('```')) { if (!inCode) { inCode=true; codeLang=line.slice(3).trim(); codeLines=[] } else { parts.push(`<div style="margin:1rem 0"><div style="display:flex;justify-content:space-between;background:oklch(1 0 0/0.05);padding:0.5rem 1rem;border-radius:var(--docs-radius) var(--docs-radius) 0 0;font-size:0.75rem;color:oklch(1 0 0/0.5)">${codeLang||'code'}</div><pre style="overflow-x:auto;background:var(--docs-code-bg);padding:1rem;border-radius:0 0 var(--docs-radius) var(--docs-radius);font-size:0.875rem;line-height:1.65"><code>${esc(codeLines.join('\n'))}</code></pre></div>`); inCode=false }; i++; continue }
+    if (inCode) { codeLines.push(line); i++; continue }
+    const hm = line.match(/^(#{1,4})\s+(.+)$/); if (hm) { const lvl=hm[1].length,text=hm[2],id=slugify(text); parts.push(`<h${lvl} id="${id}" style="scroll-margin-top:5rem"><a href="#${id}">${esc(text)}</a></h${lvl}>`); i++; continue }
+    if (line.startsWith('>')) { const ql:string[]=[]; while(i<lines.length&&lines[i].startsWith('>')){ql.push(lines[i].replace(/^>\s?/,'')); i++}; parts.push(`<blockquote>${esc(ql.join(' '))}</blockquote>`); continue }
+    if (!line.trim()) { i++; continue }
+    const fmt=esc(line).replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\*(.+?)\*/g,'<em>$1</em>').replace(/`(.+?)`/g,'<code>$1</code>').replace(/\[(.+?)\]\((.+?)\)/g,'<a href="$2">$1</a>')
+    parts.push(`<p>${fmt}</p>`); i++
+  }
+
+  return <article className="docs__content-main" dangerouslySetInnerHTML={{ __html: parts.join('') }} />
+}

package/packages/react-css/src/components/DocSearch.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+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({ results, query, onQuery, onSelect, isOpen, onClose }: DocSearchProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => { if (isOpen) { inputRef.current?.focus(); setActiveIndex(0) } }, [isOpen])
+  useEffect(() => { setActiveIndex(0) }, [results])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIndex(i => Math.min(i + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIndex(i => Math.max(i - 1, 0)) }
+    else if (e.key === 'Enter' && results[activeIndex]) { e.preventDefault(); onSelect(results[activeIndex]) }
+    else if (e.key === 'Escape') { e.preventDefault(); onClose() }
+  }, [results, activeIndex, onSelect, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="docs__search-modal" onClick={onClose}>
+      <div className="docs__search-backdrop" />
+      <div className="docs__search-panel" onClick={e => e.stopPropagation()}>
+        <div className="docs__search-input-wrapper">
+          <svg style={{ width: 20, height: 20, flexShrink: 0, color: 'oklch(1 0 0/0.3)' }} viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="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" clipRule="evenodd" />
+          </svg>
+          <input ref={inputRef} type="text" value={query} onChange={e => onQuery(e.target.value)} onKeyDown={handleKeyDown}
+            placeholder="Search documentation…" className="docs__search-input" />
+          <kbd style={{ padding: '2px 6px', border: '1px solid oklch(1 0 0/0.1)', borderRadius: 4, background: 'oklch(1 0 0/0.03)', fontSize: 11, color: 'oklch(1 0 0/0.3)' }}>ESC</kbd>
+        </div>
+        <div className="docs__search-results">
+          {results.length === 0 && query.trim() && <div className="docs__search-empty">No results for "{query}"</div>}
+          {results.length === 0 && !query.trim() && <div className="docs__search-empty">Start typing to search…</div>}
+          {results.map((result, idx) => (
+            <button key={result.pageId} type="button" onClick={() => onSelect(result)}
+              className={`docs__search-result ${idx === activeIndex ? 'docs__search-result--active' : ''}`}>
+              <div className="docs__search-result-header">
+                <span className="docs__search-result-badge">{result.sectionTitle}</span>
+                <span className="docs__search-result-title">{result.pageTitle}</span>
+              </div>
+              <p className="docs__search-result-snippet">{highlightMatch(result.highlight, query)}</p>
+            </button>
+          ))}
+        </div>
+        <div className="docs__search-footer"><span>↑↓ navigate</span><span>↵ select</span><span>esc close</span></div>
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/components/DocSidebar.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from 'react'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+import './styles.css'
+
+interface DocSidebarProps {
+  sections: (DocSection & { pages?: DocPage[]; pageCount?: number })[]
+  currentPageId?: string
+  onNavigate: (page: DocPage, section: DocSection) => void
+}
+
+export function DocSidebar({ sections, currentPageId, onNavigate }: DocSidebarProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const toggle = useCallback((id: string) => {
+    setExpandedIds(prev => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n })
+  }, [])
+
+  const topLevel = sections.filter(s => !s.parentId)
+  const childrenOf = (parentId: string) => 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 ?? []
+
+    return (
+      <div key={section.id} className={`docs__sidebar-section ${isExpanded ? 'docs__sidebar-section--active' : ''}`} style={{ paddingLeft: depth * 12 }}>
+        <button type="button" className="docs__sidebar-section-btn" onClick={() => toggle(section.id)}>
+          {section.icon && <span className="docs__sidebar-section-icon">{section.icon}</span>}
+          <span className="docs__sidebar-section-title">{section.title}</span>
+          {section.pageCount != null && <span className="docs__sidebar-section-count">{section.pageCount}</span>}
+          <svg className={`docs__sidebar-section-chevron ${isExpanded ? 'docs__sidebar-section-chevron--open' : ''}`} viewBox="0 0 16 16">
+            <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="2" fill="none" />
+          </svg>
+        </button>
+        {isExpanded && (
+          <div className="docs__sidebar-pages">
+            {pages.map(page => (
+              <button key={page.id} type="button" onClick={() => onNavigate(page, section)}
+                className={`docs__sidebar-page ${currentPageId === page.id ? 'docs__sidebar-page--active' : ''}`}>
+                {page.title}
+              </button>
+            ))}
+            {children.map(child => renderSection(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <nav className="docs__sidebar">
+      <div className="docs__sidebar-header">Documentation</div>
+      {topLevel.map(s => renderSection(s, 0))}
+    </nav>
+  )
+}

package/packages/react-css/src/components/DocsLayout.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { DocPage, DocSection, TocItem, BreadcrumbItem } from '@geenius-docs/shared'
+import { DocSidebar } from './DocSidebar'
+import { TableOfContents, Breadcrumbs } from './common'
+
+interface DocsLayoutProps {
+  sections: (DocSection & { pages?: DocPage[] })[]
+  toc?: TocItem[]; activeHeadingId?: string; breadcrumbs?: BreadcrumbItem[]
+  currentPageId?: string; onNavigate: (page: DocPage, section: DocSection) => void
+  children: React.ReactNode
+}
+
+export function DocsLayout({ sections, toc, activeHeadingId, breadcrumbs, currentPageId, onNavigate, children }: DocsLayoutProps) {
+  return (
+    <div className="docs__layout">
+      <DocSidebar sections={sections} currentPageId={currentPageId} onNavigate={onNavigate} />
+      <div className="docs__content">
+        <div className="docs__content-inner">
+          <div className="docs__content-main">
+            {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+            {children}
+          </div>
+          {toc && toc.length > 0 && <TableOfContents toc={toc} activeId={activeHeadingId} />}
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/components/common.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import type { TocItem, BreadcrumbItem } from '@geenius-docs/shared'
+
+export function TableOfContents({ toc, activeId }: { toc: TocItem[]; activeId?: string }) {
+  if (toc.length === 0) return null
+  return (
+    <nav className="docs__toc">
+      <h4 className="docs__toc-heading">On this page</h4>
+      <div className="docs__toc-list">
+        {toc.map(item => (
+          <React.Fragment key={item.id}>
+            <a href={`#${item.id}`} className={`docs__toc-item ${activeId === item.id ? 'docs__toc-item--active' : ''}`}>{item.text}</a>
+            {item.children.map(child => (
+              <a key={child.id} href={`#${child.id}`} className={`docs__toc-item docs__toc-item--h3 ${activeId === child.id ? 'docs__toc-item--active' : ''}`}>{child.text}</a>
+            ))}
+          </React.Fragment>
+        ))}
+      </div>
+    </nav>
+  )
+}
+
+export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
+  if (items.length === 0) return null
+  return (
+    <nav className="docs__breadcrumbs" aria-label="Breadcrumb">
+      {items.map((item, idx) => (
+        <React.Fragment key={idx}>
+          {idx > 0 && (
+            <svg className="docs__breadcrumb-separator" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" /></svg>
+          )}
+          {idx === items.length - 1
+            ? <span className="docs__breadcrumb-item docs__breadcrumb-item--current">{item.title}</span>
+            : <a href={item.href} className="docs__breadcrumb-item">{item.title}</a>
+          }
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}
+
+export function PageNavigation({ prev, next }: { prev?: { title: string; href: string }; next?: { title: string; href: string } }) {
+  if (!prev && !next) return null
+  return (
+    <div className="docs__page-nav">
+      {prev ? (
+        <a href={prev.href} className="docs__page-nav-prev">
+          <span className="docs__page-nav-label">← Previous</span>
+          <span className="docs__page-nav-title">{prev.title}</span>
+        </a>
+      ) : <div style={{ flex: 1 }} />}
+      {next ? (
+        <a href={next.href} className="docs__page-nav-next">
+          <span className="docs__page-nav-label">Next →</span>
+          <span className="docs__page-nav-title">{next.title}</span>
+        </a>
+      ) : <div style={{ flex: 1 }} />}
+    </div>
+  )
+}
+
+export function EditButton({ pageSlug, editUrl }: { pageSlug: string; editUrl?: string }) {
+  if (!editUrl) return null
+  return (
+    <a href={`${editUrl.replace(/\/$/, '')}/${pageSlug}.mdx`} target="_blank" rel="noopener noreferrer" className="docs__edit-btn">
+      <svg className="docs__edit-btn-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M11.5 1.5l3 3-9 9H2.5v-3l9-9z" strokeWidth="1.5" strokeLinejoin="round" /></svg>
+      Edit this page
+    </a>
+  )
+}
+
+export function VersionSelector({ versions, current, onSelect }: { versions: string[]; current: string; onSelect: (v: string) => void }) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  if (versions.length <= 1) return null
+  return (
+    <div className="docs__version-selector">
+      <button type="button" className="docs__version-btn" onClick={() => setIsOpen(!isOpen)}>
+        v{current}
+        <svg style={{ width: 12, height: 12, transform: isOpen ? 'rotate(180deg)' : '', transition: 'transform 0.2s' }} viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="2" fill="none" /></svg>
+      </button>
+      {isOpen && (
+        <div className="docs__version-dropdown">
+          {versions.map(v => (
+            <button key={v} type="button" className={`docs__version-option ${v === current ? 'docs__version-option--active' : ''}`}
+              onClick={() => { onSelect(v); setIsOpen(false) }}>
+              v{v}{v === current && <span style={{ marginLeft: 'auto', fontSize: 10 }}>✓</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/packages/react-css/src/components/index.ts

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

package/packages/react-css/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useDocs, useDocSearch, useDocsAdmin, useTableOfContents } from '@geenius-docs/react'
+export type { DocsState, DocSearchState, DocsAdminActions, TableOfContentsState } from '@geenius-docs/react'

package/packages/react-css/src/index.ts

@@ -0,0 +1,6 @@
+export { DocsProvider, useDocs } from './DocsProvider'
+export type { DocsProviderProps } from './DocsProvider'
+
+export { DocsLayout } from './DocsLayout'
+export { RouterDocsLayout, type DocItem } from './RouterDocsLayout'
+export { RouterDocsContent } from './RouterDocsContent'

package/packages/react-css/src/index.tsx

@@ -0,0 +1,3 @@
+// @geenius-docs/react-css — src/index.tsx
+// This file is intentionally empty.
+// The canonical package entry point is src/index.ts (tsup entry).

package/packages/react-css/src/pages/DocViewPage.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo } from 'react'
+import type { DocPage as DocPageType, DocSection } from '@geenius-docs/shared'
+import { buildBreadcrumbs } from '@geenius-docs/shared'
+import { useDocs, useTableOfContents } from '../hooks'
+import { DocsLayout } from '../components/DocsLayout'
+import { DocPage } from '../components/DocPage'
+import { EditButton, PageNavigation } from '../components/common'
+import '../styles.css'
+
+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({ tree, page, editPageUrl, onNavigate, onIncrementView }: DocViewPageProps) {
+  const docs = useDocs(tree)
+  const { toc, activeId } = useTableOfContents(page?.content)
+
+  useEffect(() => { if (page?.id && onIncrementView) onIncrementView(page.id) }, [page?.id, onIncrementView])
+
+  const breadcrumbs = useMemo(() => page ? buildBreadcrumbs(docs.sections, page.sectionId, page.slug) : [], [docs.sections, page])
+
+  const { prev, next } = useMemo(() => {
+    if (!page) return { prev: undefined, next: undefined }
+    const all = docs.flatPages; const idx = all.findIndex(p => p.id === page.id); const sec = docs.sections.find(s => s.id === page.sectionId)
+    return {
+      prev: idx > 0 ? { title: all[idx - 1].title, href: `/docs/${sec?.slug ?? ''}/${all[idx - 1].slug}` } : undefined,
+      next: idx < all.length - 1 ? { title: all[idx + 1].title, href: `/docs/${sec?.slug ?? ''}/${all[idx + 1].slug}` } : undefined,
+    }
+  }, [page, docs.flatPages, docs.sections])
+
+  if (docs.isLoading || page === undefined) return (
+    <div className="docs__layout">
+      <div className="docs__sidebar" style={{ padding: '1rem' }}>
+        {Array.from({ length: 8 }).map((_, i) => <div key={i} className="docs__skeleton" style={{ height: 32, marginBottom: 8 }} />)}
+      </div>
+      <div className="docs__content" style={{ padding: '2rem' }}>
+        <div className="docs__skeleton" style={{ width: 384, height: 40, marginBottom: 16 }} />
+        {Array.from({ length: 10 }).map((_, i) => <div key={i} className="docs__skeleton" style={{ height: 16, marginBottom: 12, width: `${60 + Math.random() * 40}%` }} />)}
+      </div>
+    </div>
+  )
+
+  if (!page) return (
+    <div className="docs__empty" style={{ minHeight: '100vh', background: 'var(--docs-bg)' }}>
+      <div className="docs__empty-icon">🔍</div>
+      <h2 className="docs__empty-title">Page not found</h2>
+    </div>
+  )
+
+  return (
+    <DocsLayout sections={docs.sections} toc={toc} activeHeadingId={activeId} breadcrumbs={breadcrumbs} currentPageId={page.id} onNavigate={onNavigate}>
+      <div className="docs__page-header">
+        <h1 className="docs__page-title">{page.title}</h1>
+        <div className="docs__reading-meta">
+          <span className="docs__reading-meta-author">
+            {page.author.avatar
+              ? <img src={page.author.avatar} alt="" className="docs__reading-meta-avatar" />
+              : <span className="docs__reading-meta-avatar-placeholder">{page.author.name[0]}</span>}
+            {page.author.name}
+          </span>
+          {page.readingTime > 0 && <span>{page.readingTime} min read</span>}
+          {page.viewCount > 0 && <span>{page.viewCount.toLocaleString()} views</span>}
+        </div>
+        {page.tags.length > 0 && <div className="docs__tags">{page.tags.map(t => <span key={t} className="docs__tag">{t}</span>)}</div>}
+      </div>
+      <DocPage page={page} />
+      <div style={{ marginTop: '2.5rem', paddingTop: '1.5rem', borderTop: '1px solid var(--docs-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <EditButton pageSlug={page.slug} editUrl={editPageUrl} />
+        {page.version && <span style={{ fontSize: '0.6875rem', color: 'oklch(1 0 0/0.25)' }}>v{page.version}</span>}
+      </div>
+      <PageNavigation prev={prev} next={next} />
+    </DocsLayout>
+  )
+}

package/packages/react-css/src/pages/DocsAdminPage.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useMemo } from 'react'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+import type { DocsAdminActions } from '@geenius-docs/react'
+import '../styles.css'
+
+interface DocsAdminPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  allPages?: DocPage[]
+  admin: DocsAdminActions
+}
+
+export function DocsAdminPage({ tree, allPages, admin }: DocsAdminPageProps) {
+  const sections = useMemo(() => tree ?? [], [tree])
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [showSF, setShowSF] = useState(false)
+  const [showPF, setShowPF] = useState(false)
+  const [sf, setSf] = useState({ title: '', slug: '', description: '', icon: '', access: 'team' as const })
+  const [pf, setPf] = useState({ title: '', slug: '', content: '', access: 'team' as const, tags: '' })
+  const selected = sections.find(s => s.id === selectedId)
+  const pages = useMemo(() => { if (!selected) return []; if (allPages) return allPages.filter(p => p.sectionId === selectedId); return selected.pages ?? [] }, [selected, allPages, selectedId])
+
+  if (tree === undefined) return (
+    <div style={{ minHeight: '100vh', background: 'var(--docs-bg)', padding: '3rem 1.5rem' }}>
+      <div style={{ maxWidth: '72rem', margin: '0 auto' }}>
+        <div className="docs__skeleton" style={{ width: 192, height: 40, marginBottom: 32 }} />
+        <div className="docs__admin-grid"><div className="docs__skeleton" style={{ height: 384 }} /><div className="docs__skeleton" style={{ height: 384 }} /></div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--docs-bg)', color: 'var(--docs-text)' }}>
+      <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        <h1 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '2rem' }}>Docs Admin</h1>
+        <div className="docs__admin-grid">
+          <div className="docs__admin-panel">
+            <div className="docs__admin-panel-header">
+              <h2 className="docs__admin-panel-title">Sections</h2>
+              <button type="button" className="docs__admin-add-btn" onClick={() => setShowSF(!showSF)}>+ Add</button>
+            </div>
+            {showSF && (
+              <div className="docs__admin-form">
+                <input className="docs__admin-input" placeholder="Title" value={sf.title} onChange={e => setSf({...sf, title: e.target.value})} />
+                <input className="docs__admin-input" placeholder="Slug" value={sf.slug} onChange={e => setSf({...sf, slug: e.target.value})} />
+                <input className="docs__admin-input" placeholder="Icon" value={sf.icon} onChange={e => setSf({...sf, icon: e.target.value})} />
+                <input className="docs__admin-input" placeholder="Description" value={sf.description} onChange={e => setSf({...sf, description: e.target.value})} />
+                <div className="docs__admin-form-actions">
+                  <button type="button" className="docs__admin-add-btn" onClick={async () => { await admin.createSection({...sf, order: sections.length, icon: sf.icon||undefined, description: sf.description||undefined}); setSf({title:'',slug:'',description:'',icon:'',access:'team'}); setShowSF(false) }}>Create</button>
+                  <button type="button" style={{padding:'0.375rem 0.75rem',border:'1px solid var(--docs-border)',borderRadius:'var(--docs-radius)',background:'transparent',color:'var(--docs-text)',fontSize:'0.6875rem',cursor:'pointer'}} onClick={() => setShowSF(false)}>Cancel</button>
+                </div>
+              </div>
+            )}
+            {sections.length === 0 && <p style={{padding:'2rem',textAlign:'center',fontSize:'0.875rem',color:'var(--docs-text-muted)'}}>No sections</p>}
+            {sections.map(s => (
+              <div key={s.id} className={`docs__admin-section-item ${selectedId === s.id ? 'docs__admin-section-item--selected' : ''}`} onClick={() => setSelectedId(s.id)}>
+                {s.icon && <span>{s.icon}</span>}
+                <span style={{flex:1,fontSize:'0.875rem',fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{s.title}</span>
+                <span style={{fontSize:'0.6875rem',opacity:0.4}}>{s.pageCount ?? 0}</span>
+                <button type="button" style={{background:'transparent',border:'none',color:'oklch(1 0 0/0.2)',cursor:'pointer',padding:4}} onClick={e => { e.stopPropagation(); if (confirm(`Delete "${s.title}"?`)) admin.deleteSection(s.id) }}>✕</button>
+              </div>
+            ))}
+          </div>
+          <div className="docs__admin-panel">
+            <div className="docs__admin-panel-header">
+              <h2 className="docs__admin-panel-title">{selected ? `Pages — ${selected.title}` : 'Pages'}</h2>
+              {selected && <button type="button" className="docs__admin-add-btn" onClick={() => setShowPF(!showPF)}>+ Add</button>}
+            </div>
+            {!selected && <p style={{padding:'4rem',textAlign:'center',fontSize:'0.875rem',color:'var(--docs-text-muted)'}}>Select a section</p>}
+            {showPF && selected && (
+              <div className="docs__admin-form">
+                <input className="docs__admin-input" placeholder="Title" value={pf.title} onChange={e => setPf({...pf, title: e.target.value})} />
+                <input className="docs__admin-input" placeholder="Slug" value={pf.slug} onChange={e => setPf({...pf, slug: e.target.value})} />
+                <textarea className="docs__admin-input docs__admin-textarea" placeholder="Content (MDX)" value={pf.content} onChange={e => setPf({...pf, content: e.target.value})} />
+                <input className="docs__admin-input" placeholder="Tags (comma)" value={pf.tags} onChange={e => setPf({...pf, tags: e.target.value})} />
+                <div className="docs__admin-form-actions">
+                  <button type="button" className="docs__admin-add-btn" onClick={async () => { await admin.createPage({title:pf.title,slug:pf.slug,content:pf.content,sectionId:selectedId!,access:pf.access,tags:pf.tags?pf.tags.split(',').map(t=>t.trim()):[],order:pages.length}); setPf({title:'',slug:'',content:'',access:'team',tags:''}); setShowPF(false) }}>Create</button>
+                  <button type="button" style={{padding:'0.375rem 0.75rem',border:'1px solid var(--docs-border)',borderRadius:'var(--docs-radius)',background:'transparent',color:'var(--docs-text)',fontSize:'0.6875rem',cursor:'pointer'}} onClick={() => setShowPF(false)}>Cancel</button>
+                </div>
+              </div>
+            )}
+            {selected && pages.map(page => (
+              <div key={page.id} className="docs__admin-page-item">
+                <div className="docs__admin-page-info">
+                  <p className="docs__admin-page-title">{page.title}</p>
+                  <p className="docs__admin-page-slug">/{page.slug}</p>
+                </div>
+                <span className={`docs__status-badge docs__status-badge--${page.status}`}>{page.status}</span>
+                <div className="docs__admin-actions">
+                  {page.status === 'draft' && <button type="button" className="docs__admin-action-btn docs__admin-action-btn--publish" onClick={() => admin.publishPage(page.id)}>Publish</button>}
+                  {page.status === 'published' && <button type="button" className="docs__admin-action-btn docs__admin-action-btn--archive" onClick={() => admin.archivePage(page.id)}>Archive</button>}
+                  <button type="button" className="docs__admin-action-btn docs__admin-action-btn--delete" onClick={() => { if (confirm(`Delete "${page.title}"?`)) admin.deletePage(page.id) }}>✕</button>
+                </div>
+              </div>
+            ))}
+            {selected && pages.length === 0 && !showPF && <p style={{padding:'3rem',textAlign:'center',fontSize:'0.875rem',color:'var(--docs-text-muted)'}}>No pages</p>}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/pages/DocsIndexPage.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs } from '@geenius-docs/shared'
+import { useDocs, useDocSearch } from '../hooks'
+import { DocSearch } from '../components/DocSearch'
+import '../styles.css'
+
+interface DocsIndexPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocsIndexPage({ tree, onSelectPage }: DocsIndexPageProps) {
+  const docs = useDocs(tree)
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const searchFn = useCallback((q: string): SearchResult[] => { const idx = buildDocsIndex(docs.flatPages, docs.sections); return searchDocs(q, idx) }, [docs.flatPages, docs.sections])
+  const search = useDocSearch(searchFn)
+
+  useEffect(() => { const h = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setIsSearchOpen(true) } }; document.addEventListener('keydown', h); return () => document.removeEventListener('keydown', h) }, [])
+
+  if (docs.isLoading) return (
+    <div style={{ minHeight: '100vh', background: 'var(--docs-bg)', padding: '4rem 1.5rem' }}>
+      <div style={{ maxWidth: '64rem', margin: '0 auto' }}>
+        <div className="docs__skeleton" style={{ width: 256, height: 40, marginBottom: 40 }} />
+        <div className="docs__skeleton" style={{ maxWidth: 560, height: 48, marginBottom: 32 }} />
+        <div className="docs__section-grid">{Array.from({length: 6}).map((_,i) => <div key={i} className="docs__skeleton" style={{ height: 144 }} />)}</div>
+      </div>
+    </div>
+  )
+
+  if (docs.sections.length === 0) return (
+    <div className="docs__empty" style={{ minHeight: '100vh', background: 'var(--docs-bg)' }}>
+      <div className="docs__empty-icon">📚</div>
+      <h2 className="docs__empty-title">No documentation yet</h2>
+      <p className="docs__empty-desc">Create your first section and pages to get started.</p>
+    </div>
+  )
+
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--docs-bg)', color: 'var(--docs-text)' }}>
+      <div style={{ maxWidth: '64rem', margin: '0 auto', padding: '4rem 1.5rem' }}>
+        <h1 style={{ fontSize: '2.25rem', fontWeight: 700, letterSpacing: '-0.02em', marginBottom: '0.5rem' }}>Documentation</h1>
+        <p style={{ fontSize: '1.125rem', color: 'var(--docs-text-muted)', marginBottom: '2.5rem' }}>Browse guides, API references, and tutorials.</p>
+
+        <button type="button" className="docs__search-trigger" onClick={() => setIsSearchOpen(true)}>
+          <svg className="docs__search-trigger-icon" viewBox="0 0 20 20" fill="currentColor"><path fillRule="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" clipRule="evenodd" /></svg>
+          <span className="docs__search-trigger-text">Search documentation…</span>
+          <kbd className="docs__search-trigger-kbd">⌘K</kbd>
+        </button>
+
+        <div className="docs__section-grid">
+          {docs.sections.filter(s => !s.parentId).map(section => (
+            <button key={section.id} type="button" className="docs__section-card"
+              onClick={() => { const fp = section.pages?.[0]; if (fp && onSelectPage) onSelectPage(fp, section) }}>
+              {section.icon && <div className="docs__section-card-icon">{section.icon}</div>}
+              <h3 className="docs__section-card-title">{section.title}</h3>
+              {section.description && <p className="docs__section-card-desc">{section.description}</p>}
+              <div className="docs__section-card-meta">{section.pageCount ?? 0} pages</div>
+            </button>
+          ))}
+        </div>
+      </div>
+      <DocSearch results={search.results} query={search.query} onQuery={search.setQuery}
+        onSelect={r => { setIsSearchOpen(false); search.clearSearch(); const sec = docs.sections.find(s => s.slug === r.sectionSlug); const pg = docs.flatPages.find(p => p.id === r.pageId); if (pg && sec && onSelectPage) onSelectPage(pg, sec) }}
+        isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
+    </div>
+  )
+}

package/packages/react-css/src/pages/index.ts

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