@geenius/docs 0.1.0 → 0.4.1

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

@@ -1,21 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,3 +0,0 @@
-// @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

@@ -1,78 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-import { useState, useCallback, useMemo, useEffect } from 'react'
-import type { DocsPage, DocsSidebar, DocsSearchResult, DocsProvider } from '@geenius-docs/shared'
-
-/**
- * React hook for documentation rendering and navigation.
- * Wraps a DocsProvider with React state management.
- */
-export function useDocs(provider: DocsProvider) {
-  const [sidebar, setSidebar] = useState<DocsSidebar | null>(null)
-  const [currentPage, setCurrentPage] = useState<DocsPage | null>(null)
-  const [searchResults, setSearchResults] = useState<DocsSearchResult[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-
-  // Load sidebar on mount
-  useEffect(() => {
-    provider.getSidebar().then(setSidebar)
-  }, [provider])
-
-  const loadPage = useCallback(async (slug: string) => {
-    setIsLoading(true)
-    try {
-      const page = await provider.getPage(slug)
-      setCurrentPage(page)
-    } finally {
-      setIsLoading(false)
-    }
-  }, [provider])
-
-  const search = useCallback(async (query: string) => {
-    setSearchQuery(query)
-    if (!query.trim()) {
-      setSearchResults([])
-      return
-    }
-    const results = await provider.search(query)
-    setSearchResults(results)
-  }, [provider])
-
-  const navigation = useMemo(() => {
-    if (!currentPage) return { prev: null, next: null }
-    return {
-      prev: currentPage.prev ?? null,
-      next: currentPage.next ?? null,
-    }
-  }, [currentPage])
-
-  return {
-    sidebar,
-    currentPage,
-    navigation,
-    isLoading,
-    searchResults,
-    searchQuery,
-    loadPage,
-    search,
-  }
-}

package/packages/react-css/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  },
-  "include": [
-    "src"
-  ]
-}

package/packages/react-css/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
-  dts: true,
-  clean: true,
-  sourcemap: true,
-  external: ['react', '@tanstack/react-router'],
-})

package/packages/shared/README.md

@@ -1 +0,0 @@
-# ✦ @geenius-docs/shared\n\n> Framework-agnostic docs types, providers, and utilities\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-docs/shared\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-docs/shared';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n