@geenius/docs 0.1.0 → 0.4.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/packages/solidjs/src/createDocs.ts

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

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

@@ -1,72 +0,0 @@
-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>
-  )
-}