camelmind 0.1.0

package/template/components/Nav/MobileDrawer.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useRouter } from "next/navigation"
+import { X, ChevronDown } from "lucide-react"
+import { isNavGroup } from "@/lib/nav-types"
+import type { NavEntry, NavGroup } from "@/lib/nav-types"
+import type { Version } from "@/lib/versions"
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  nav: (NavEntry | NavGroup)[]
+  userRoles: string[]
+  userName: string | null
+  authEnabled?: boolean
+  versions: Version[]
+  currentVersionId: string | null
+  currentSlug: string
+  versionSlugs: Record<string, string[]>
+}
+
+export function MobileDrawer({
+  open,
+  onClose,
+  nav,
+  userRoles,
+  userName,
+  authEnabled = false,
+  versions,
+  currentVersionId,
+  currentSlug,
+  versionSlugs,
+}: Props) {
+  const pathname = usePathname()
+  const router = useRouter()
+
+  // Find which group contains the current page and expand it by default
+  const defaultExpanded = nav.find((item) => {
+    if (!isNavGroup(item) || !item.items) return false
+    return item.items.some((child) => {
+      if (currentSlug === child.slug) return true
+      if (child.section) return child.section.some((s) => currentSlug === s.slug || (s.children ?? []).some((d) => currentSlug === d.slug))
+      return false
+    })
+  })?.label ?? null
+
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(defaultExpanded)
+
+  // Close on navigation
+  useEffect(() => { onClose() }, [pathname]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Lock body scroll when open
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : ""
+    return () => { document.body.style.overflow = "" }
+  }, [open])
+
+  const canSee = (roles: string[]) =>
+    !authEnabled || roles.length === 0 || roles.some((r) => userRoles.includes(r))
+
+  async function signOut() {
+    await fetch("/api/auth/logout", { method: "POST" })
+    window.location.href = authEnabled ? "/login" : "/home"
+  }
+
+  function navigateToVersion(targetId: string) {
+    const bare = currentVersionId
+      ? currentSlug.replace(new RegExp(`^/${currentVersionId}`), "") || "/"
+      : currentSlug
+    const targetSlug = `/${targetId}${bare}`
+    const available = versionSlugs[targetId] ?? []
+    router.push(available.includes(targetSlug) ? targetSlug : (available[0] ?? `/${targetId}`))
+  }
+
+  if (!open) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 z-40 md:hidden"
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div className="fixed inset-y-0 left-0 w-80 max-w-[85vw] bg-gray-900 text-white z-50 flex flex-col md:hidden overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-4 border-b border-gray-700">
+          <Link href="/home" className="flex items-center gap-2" onClick={onClose}>
+            <span className="text-[var(--cm-oasis-teal)] font-mono font-bold">&lt;🐪&gt;</span>
+            <span className="font-bold text-base">CamelMind</span>
+          </Link>
+          <button onClick={onClose} className="p-1 text-gray-400 hover:text-white">
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Nav items */}
+        <nav className="flex-1 px-3 py-4 space-y-1">
+          {nav.map((item) => {
+            if (isNavGroup(item)) {
+              if ((item.noDropdown || !item.items) && item.slug) {
+                return (
+                  <Link
+                    key={item.label}
+                    href={item.slug}
+                    className="block px-3 py-2.5 text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800 rounded-lg"
+                  >
+                    {item.label}
+                  </Link>
+                )
+              }
+
+              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
+              if (visibleItems.length === 0) return null
+              const isExpanded = expandedGroup === item.label
+
+              return (
+                <div key={item.label}>
+                  <button
+                    onClick={() => setExpandedGroup(isExpanded ? null : item.label)}
+                    className="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800 rounded-lg"
+                  >
+                    {item.label}
+                    <ChevronDown
+                      size={16}
+                      className={`text-gray-400 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+                    />
+                  </button>
+                  {isExpanded && (
+                    <div className="mt-1 ml-3 border-l border-gray-700 pl-3 space-y-0.5">
+                      {visibleItems.map((child) => {
+                        const isActive = currentSlug === child.slug ||
+                          (child.section ?? []).some((s) => currentSlug === s.slug || (s.children ?? []).some((d) => currentSlug === d.slug))
+                        return (
+                          <Link
+                            key={child.slug}
+                            href={child.slug}
+                            className={`block px-2 py-2 text-sm rounded-lg transition-colors ${
+                              isActive
+                                ? "bg-gray-700 text-white font-medium"
+                                : "text-gray-400 hover:text-white hover:bg-gray-800"
+                            }`}
+                          >
+                            {child.label}
+                          </Link>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              )
+            }
+
+            const entry = item as NavEntry
+            if (!canSee(entry.roles)) return null
+            return (
+              <Link
+                key={entry.slug}
+                href={entry.slug}
+                className="block px-3 py-2.5 text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800 rounded-lg"
+              >
+                {entry.label}
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* Footer: version + user */}
+        <div className="border-t border-gray-700 px-4 py-4 space-y-3">
+          {/* Version selector */}
+          <div>
+            <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Version</p>
+            <div className="space-y-1">
+              {versions.map((v) => (
+                <button
+                  key={v.id}
+                  onClick={() => navigateToVersion(v.id)}
+                  className={`w-full text-left flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${
+                    v.id === currentVersionId
+                      ? "bg-gray-700 text-white"
+                      : "text-gray-300 hover:bg-gray-800 hover:text-white"
+                  }`}
+                >
+                  <span>{v.label}</span>
+                  {v.badge && (
+                    <span className="text-xs bg-gray-600 text-gray-300 px-1.5 py-0.5 rounded-full">{v.badge}</span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* User — only when auth is enabled */}
+          {authEnabled && (
+            <div className="border-t border-gray-700 pt-3">
+              {userName ? (
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-400">{userName}</span>
+                  <button
+                    onClick={signOut}
+                    className="text-xs text-gray-400 hover:text-white border border-gray-700 px-2 py-1 rounded"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              ) : (
+                <Link href="/login" className="block text-sm text-gray-400 hover:text-white">
+                  Sign in →
+                </Link>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

package/template/components/Nav/ThemeToggle.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { useEffect, useState, useRef } from "react"
+import { Sun, Moon, Monitor } from "lucide-react"
+
+const OPTIONS = [
+  { value: "light", label: "Light", Icon: Sun },
+  { value: "dark", label: "Dark", Icon: Moon },
+  { value: "system", label: "System", Icon: Monitor },
+]
+
+export function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => { setMounted(true) }, [])
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener("mousedown", onClick)
+    return () => document.removeEventListener("mousedown", onClick)
+  }, [])
+
+  if (!mounted) return <div className="w-8 h-8" />
+
+  const Icon = resolvedTheme === "dark" ? Moon : Sun
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center justify-center w-8 h-8 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+        aria-label="Toggle theme"
+      >
+        <Icon size={16} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 w-36 bg-white dark:bg-gray-800 rounded shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
+          {OPTIONS.map(({ value, label, Icon: ItemIcon }) => (
+            <button
+              key={value}
+              onClick={() => { setTheme(value); setOpen(false) }}
+              className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
+                theme === value
+                  ? "text-gray-900 dark:text-white font-medium bg-gray-100 dark:bg-gray-700"
+                  : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+              }`}
+            >
+              <ItemIcon size={13} />
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/template/components/Nav/TopNav.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import Link from "next/link"
+import { Menu } from "lucide-react"
+import { NavEntry, NavGroup, isNavGroup } from "@/lib/nav-types"
+import { VersionSelector } from "./VersionSelector"
+import { MobileDrawer } from "./MobileDrawer"
+import { SearchTrigger } from "@/components/Search/SearchModal"
+import { ThemeToggle } from "./ThemeToggle"
+import type { Version } from "@/lib/versions"
+
+type Props = {
+  nav: (NavEntry | NavGroup)[]
+  userRoles: string[]
+  userName?: string | null
+  authEnabled?: boolean
+  versions: Version[]
+  currentVersionId: string | null
+  currentSlug: string
+  versionSlugs: Record<string, string[]>
+}
+
+export function TopNav({ nav, userRoles, userName, authEnabled = false, versions, currentVersionId, currentSlug, versionSlugs }: Props) {
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const navRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (navRef.current && !navRef.current.contains(e.target as Node)) {
+        setOpenDropdown(null)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
+
+  async function signOut() {
+    await fetch("/api/auth/logout", { method: "POST" })
+    window.location.href = authEnabled ? "/login" : "/home"
+  }
+
+  const canSee = (roles: string[]) =>
+    !authEnabled || roles.length === 0 || roles.some((r) => userRoles.includes(r))
+
+  return (
+    <>
+      <nav ref={navRef} className="bg-[var(--cm-night-dune)] text-[var(--cm-parchment)] px-4 md:px-6 py-3 flex items-center gap-4 md:gap-6 border-b border-[var(--cm-border)]">
+        {/* Logo */}
+        <Link href="/home" className="flex items-center gap-2 mr-0 md:mr-4 shrink-0">
+          <span className="text-[var(--cm-oasis-teal)] font-mono text-lg font-bold">&lt;</span>
+          <span className="text-[var(--cm-camel-gold)] text-xl" aria-hidden="true">🐪</span>
+          <span className="text-[var(--cm-oasis-teal)] font-mono text-lg font-bold">&gt;</span>
+          <span className="font-bold text-lg text-[var(--cm-parchment)] ml-1">CamelMind</span>
+        </Link>
+
+        {/* Desktop nav items */}
+        <div className="hidden md:flex items-center gap-6 flex-1">
+          {nav.map((item) => {
+            if (isNavGroup(item)) {
+              if ((item.noDropdown || !item.items) && item.slug) {
+                return (
+                  <Link key={item.label} href={item.slug} className="text-sm font-medium hover:text-gray-300">
+                    {item.label}
+                  </Link>
+                )
+              }
+
+              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
+              if (visibleItems.length === 0) return null
+
+              return (
+                <div key={item.label} className="relative">
+                  <button
+                    className="flex items-center gap-1 hover:text-gray-300 text-sm font-medium"
+                    onClick={() => setOpenDropdown(openDropdown === item.label ? null : item.label)}
+                  >
+                    {item.label}
+                    <span className="text-xs">▾</span>
+                  </button>
+
+                  {openDropdown === item.label && (
+                    <div className="absolute top-full left-0 mt-1 w-56 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded shadow-lg z-50 py-1 border border-gray-200 dark:border-gray-700">
+                      {visibleItems.map((child) => (
+                        <Link
+                          key={child.slug}
+                          href={child.slug}
+                          className="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                          onClick={() => setOpenDropdown(null)}
+                        >
+                          {child.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )
+            }
+
+            const entry = item as NavEntry
+            if (!canSee(entry.roles)) return null
+            return (
+              <Link key={entry.slug} href={entry.slug} className="text-sm font-medium hover:text-gray-300">
+                {entry.label}
+              </Link>
+            )
+          })}
+        </div>
+
+        {/* Right side */}
+        <div className="ml-auto flex items-center gap-3">
+          <SearchTrigger />
+
+          {/* Desktop: version selector + user + theme toggle */}
+          <div className="hidden md:flex items-center gap-4">
+            <VersionSelector
+              versions={versions}
+              currentVersionId={currentVersionId}
+              currentSlug={currentSlug}
+              versionSlugs={versionSlugs}
+              isLoggedIn={!!userName}
+            />
+            {authEnabled && (
+              userName ? (
+                <div className="flex items-center gap-2 border-l border-[var(--cm-border)] pl-4">
+                  <span className="text-xs text-[var(--cm-text-muted)]">{userName}</span>
+                  <button
+                    onClick={signOut}
+                    className="text-xs text-[var(--cm-text-muted)] hover:text-[var(--cm-parchment)] border border-[var(--cm-border)] hover:border-[var(--cm-oasis-teal)] px-2 py-1 rounded transition-colors"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              ) : (
+                <a href="/login" className="text-xs text-[var(--cm-text-muted)] hover:text-[var(--cm-parchment)] border border-[var(--cm-border)] hover:border-[var(--cm-oasis-teal)] px-2 py-1 rounded transition-colors ml-2">
+                  Sign in
+                </a>
+              )
+            )}
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile: theme toggle + hamburger */}
+          <div className="md:hidden flex items-center gap-1">
+            <ThemeToggle />
+            <button
+              className="p-2 text-gray-300 hover:text-white"
+              onClick={() => setDrawerOpen(true)}
+              aria-label="Open menu"
+            >
+              <Menu size={22} />
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile drawer */}
+      <MobileDrawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        nav={nav}
+        userRoles={userRoles}
+        userName={userName ?? null}
+        authEnabled={authEnabled}
+        versions={versions}
+        currentVersionId={currentVersionId}
+        currentSlug={currentSlug}
+        versionSlugs={versionSlugs}
+      />
+    </>
+  )
+}

package/template/components/Nav/VersionSelector.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Download, FileText } from "lucide-react"
+import type { Version } from "@/lib/versions"
+
+type Props = {
+  versions: Version[]
+  currentVersionId: string | null
+  currentSlug: string
+  versionSlugs: Record<string, string[]>
+  isLoggedIn?: boolean
+}
+
+export function VersionSelector({ versions, currentVersionId, currentSlug, versionSlugs, isLoggedIn }: Props) {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  const current = versions.find((v) => v.id === currentVersionId) ?? versions[0]
+
+  function navigateToVersion(targetId: string) {
+    setOpen(false)
+    const bare = currentVersionId
+      ? currentSlug.replace(new RegExp(`^/${currentVersionId}`), "") || "/"
+      : currentSlug
+    const targetSlug = `/${targetId}${bare}`
+    const available = versionSlugs[targetId] ?? []
+    if (available.includes(targetSlug)) {
+      router.push(targetSlug)
+    } else {
+      router.push(available[0] ?? `/${targetId}`)
+    }
+  }
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded border border-gray-600 text-sm text-white hover:border-gray-400 transition-colors"
+      >
+        <span>{current?.label ?? "version"}</span>
+        {current?.badge && (
+          <span className="text-xs bg-blue-500 text-white px-1.5 py-0.5 rounded-full">
+            {current.badge}
+          </span>
+        )}
+        <span className="text-xs text-gray-400">▾</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full right-0 mt-1 w-52 bg-white text-gray-900 rounded shadow-lg z-50 py-1 border border-gray-200">
+          {versions.map((v) => (
+            <div key={v.id} className="flex items-center group">
+              <button
+                onClick={() => navigateToVersion(v.id)}
+                className={`flex-1 text-left flex items-center justify-between px-4 py-2 text-sm hover:bg-gray-100 ${
+                  v.id === currentVersionId ? "font-semibold text-gray-900" : ""
+                }`}
+              >
+                <span>{v.label}</span>
+                <span className="flex items-center gap-1.5">
+                  {v.badge && (
+                    <span className="text-xs bg-gray-100 text-gray-700 px-1.5 py-0.5 rounded-full">
+                      {v.badge}
+                    </span>
+                  )}
+                  {!v.stable && !v.badge && (
+                    <span className="text-xs bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded-full">
+                      Unstable
+                    </span>
+                  )}
+                  {v.stable && (
+                    <span className="text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full">
+                      Stable
+                    </span>
+                  )}
+                  {v.id === currentVersionId && <span className="text-gray-700">✓</span>}
+                </span>
+              </button>
+              {isLoggedIn && v.stable && (
+                <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
+                  <a
+                    href={`/api/download?version=${v.id}&type=pdf`}
+                    title={`Download ${v.label} as PDF`}
+                    className="px-1.5 py-2 text-gray-400 hover:text-gray-700 transition-colors"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <FileText size={14} />
+                  </a>
+                  <a
+                    href={`/api/download?version=${v.id}`}
+                    title={`Download ${v.label} for offline use`}
+                    className="pr-2 pl-1 py-2 text-gray-400 hover:text-gray-700 transition-colors"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Download size={14} />
+                  </a>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/template/components/PageNav/PageNav.tsx

@@ -0,0 +1,68 @@
+import Link from "next/link"
+import type { NavGroup, NavChild } from "@/lib/nav-types"
+
+type PageEntry = { label: string; slug: string }
+
+function flattenGroup(group: NavGroup): PageEntry[] {
+  const pages: PageEntry[] = []
+  for (const entry of group.items) {
+    pages.push({ label: entry.label, slug: entry.slug })
+    if (entry.section) {
+      for (const child of entry.section) {
+        pages.push({ label: child.label, slug: child.slug })
+        if (child.children) {
+          for (const grandchild of child.children) {
+            pages.push({ label: grandchild.label, slug: grandchild.slug })
+          }
+        }
+      }
+    }
+  }
+  return pages
+}
+
+type Props = {
+  activeGroup?: NavGroup | null
+  currentSlug: string
+}
+
+export function PageNav({ activeGroup, currentSlug }: Props) {
+  if (!activeGroup) return null
+
+  const pages = flattenGroup(activeGroup)
+  const idx = pages.findIndex((p) => p.slug === currentSlug)
+  if (idx === -1) return null
+
+  const prev = idx > 0 ? pages[idx - 1] : null
+  const next = idx < pages.length - 1 ? pages[idx + 1] : null
+
+  if (!prev && !next) return null
+
+  return (
+    <div className="flex justify-between items-center mt-12 pt-6 border-t border-gray-200 dark:border-gray-800">
+      {prev ? (
+        <Link
+          href={prev.slug}
+          className="flex flex-col items-start group max-w-[45%]"
+        >
+          <span className="text-xs text-gray-400 dark:text-gray-500 mb-1 group-hover:text-gray-600 dark:group-hover:text-gray-300">← Previous</span>
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
+            {prev.label}
+          </span>
+        </Link>
+      ) : <div />}
+
+      {next && (
+        <Link
+          href={next.slug}
+          className="flex flex-col items-end group max-w-[45%]"
+        >
+          <span className="text-xs text-gray-400 dark:text-gray-500 mb-1 group-hover:text-gray-600 dark:group-hover:text-gray-300">Next →</span>
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
+            {next.label}
+          </span>
+        </Link>
+      )}
+    </div>
+  )
+}