camelmind 0.1.0

package/template/components/Search/SearchModal.tsx

@@ -0,0 +1,278 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { useRouter } from "next/navigation"
+
+type SearchResult = {
+  slug: string
+  title: string
+  description?: string
+  excerpt: string
+  group?: string
+  section?: string
+  roles: string[]
+}
+
+const ROLE_FILTERS = [
+  { label: "Editor", value: "editor" },
+  { label: "Admin", value: "admin" },
+]
+
+const DocIcon = () => (
+  <svg className="w-4 h-4 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </svg>
+)
+
+export function SearchModal() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [groups, setGroups] = useState<string[]>([])
+  const [activeGroup, setActiveGroup] = useState<string>("")
+  const [activeRole, setActiveRole] = useState<string>("")
+  const [selected, setSelected] = useState(0)
+  const router = useRouter()
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        setOpen((o) => !o)
+      }
+      if (e.key === "Escape") setOpen(false)
+    }
+    window.addEventListener("keydown", handler)
+    return () => window.removeEventListener("keydown", handler)
+  }, [])
+
+  const search = useCallback(async (q: string, group: string, role: string) => {
+    let data: { results: SearchResult[]; groups: string[] }
+
+    // Try the live API; fall back to the pre-built static index (offline builds)
+    try {
+      const params = new URLSearchParams()
+      if (q) params.set("q", q)
+      if (group) params.set("group", group)
+      if (role) params.set("role", role)
+      const res = await fetch(`/api/search?${params}`)
+      if (!res.ok) throw new Error("api unavailable")
+      data = await res.json()
+    } catch {
+      const allDocs: (SearchResult & { body: string })[] = await fetch("/search-index.json").then((r) => r.json())
+      const terms = q.toLowerCase().trim().split(/\s+/).filter(Boolean)
+      const uniqueGroups = [...new Set(allDocs.map((d) => d.group).filter((g): g is string => Boolean(g)))]
+
+      if (!terms.length) {
+        data = { results: [], groups: uniqueGroups }
+      } else {
+        const scored = allDocs
+          .filter((doc) => {
+            if (group && doc.group !== group) return false
+            if (role && !doc.roles.includes(role) && doc.roles.length > 0) return false
+            return true
+          })
+          .map((doc) => {
+            let score = 0
+            for (const term of terms) {
+              if (doc.title.toLowerCase().includes(term)) score += 10
+              if ((doc.description ?? "").toLowerCase().includes(term)) score += 5
+              if (doc.body.toLowerCase().includes(term)) score += 1
+            }
+            const idx = doc.body.toLowerCase().indexOf(terms[0])
+            const excerpt = doc.description || (idx >= 0 ? doc.body.slice(Math.max(0, idx - 30), idx + 100).trim() : "")
+            return { ...doc, score, excerpt }
+          })
+          .filter((d) => d.score > 0)
+          .sort((a, b) => b.score - a.score)
+          .slice(0, 10)
+        data = { results: scored, groups: uniqueGroups }
+      }
+    }
+
+    setResults(data.results ?? [])
+    if (data.groups) setGroups(data.groups)
+    setSelected(0)
+  }, [])
+
+  useEffect(() => {
+    const t = setTimeout(() => search(query, activeGroup, activeRole), 150)
+    return () => clearTimeout(t)
+  }, [query, activeGroup, activeRole, search])
+
+  // Load groups on open
+  useEffect(() => {
+    if (open) search("", "", "")
+  }, [open, search])
+
+  const navigate = (slug: string) => {
+    router.push(slug)
+    setOpen(false)
+    setQuery("")
+    setActiveGroup("")
+    setActiveRole("")
+  }
+
+  const toggleGroup = (g: string) => setActiveGroup((prev) => prev === g ? "" : g)
+  const toggleRole = (r: string) => setActiveRole((prev) => prev === r ? "" : r)
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[12vh]"
+      style={{ backgroundColor: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
+      onClick={() => setOpen(false)}
+    >
+      <div
+        className="w-full max-w-2xl rounded-xl overflow-hidden shadow-2xl"
+        style={{ backgroundColor: "#1a1d23", border: "1px solid #2e3340" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3" style={{ borderBottom: "1px solid #2e3340" }}>
+          <button
+            onClick={() => setOpen(false)}
+            className="text-gray-500 hover:text-gray-300 transition-colors p-1 rounded"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+          </button>
+          <input
+            autoFocus
+            className="flex-1 text-sm outline-none bg-transparent text-gray-100 placeholder-gray-500"
+            placeholder="Search documentation..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") setSelected((s) => Math.min(s + 1, results.length - 1))
+              if (e.key === "ArrowUp") setSelected((s) => Math.max(s - 1, 0))
+              if (e.key === "Enter" && results[selected]) navigate(results[selected].slug)
+            }}
+          />
+          <kbd className="text-xs text-gray-500 border border-gray-600 rounded px-1.5 py-0.5">esc</kbd>
+        </div>
+
+        {/* Filter chips */}
+        <div className="flex items-center gap-2 px-4 py-2.5 flex-wrap" style={{ borderBottom: "1px solid #2e3340" }}>
+          {/* Section filters */}
+          {groups.map((g) => (
+            <button
+              key={g}
+              onClick={() => toggleGroup(g)}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors"
+              style={{
+                backgroundColor: activeGroup === g ? "#2d5a4e" : "#252830",
+                color: activeGroup === g ? "#6ee7b7" : "#9ca3af",
+                border: activeGroup === g ? "1px solid #34d399" : "1px solid #374151",
+              }}
+            >
+              {g}
+              {activeGroup === g && <span className="text-xs opacity-70">×</span>}
+            </button>
+          ))}
+
+          {/* Divider */}
+          {groups.length > 0 && (
+            <span className="text-gray-700 text-xs">|</span>
+          )}
+
+          {/* Role filters */}
+          {ROLE_FILTERS.map((r) => (
+            <button
+              key={r.value}
+              onClick={() => toggleRole(r.value)}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors"
+              style={{
+                backgroundColor: activeRole === r.value ? "#1e3a5f" : "#252830",
+                color: activeRole === r.value ? "#93c5fd" : "#9ca3af",
+                border: activeRole === r.value ? "1px solid #3b82f6" : "1px solid #374151",
+              }}
+            >
+              {r.label}
+              {activeRole === r.value && <span className="text-xs opacity-70">×</span>}
+            </button>
+          ))}
+        </div>
+
+        {/* Results */}
+        <div className="max-h-96 overflow-y-auto">
+          {results.length > 0 ? (
+            <>
+              <p className="px-4 pt-3 pb-1 text-xs font-semibold uppercase tracking-widest text-gray-500">
+                Results
+              </p>
+              <ul>
+                {results.map((r, i) => (
+                  <li key={r.slug}>
+                    <button
+                      className="w-full text-left px-4 py-3 flex items-center gap-3 transition-colors"
+                      style={{ backgroundColor: i === selected ? "#252830" : "transparent" }}
+                      onClick={() => navigate(r.slug)}
+                      onMouseEnter={() => setSelected(i)}
+                    >
+                      <DocIcon />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-gray-100 truncate">{r.title}</p>
+                        {(r.group || r.section) && (
+                          <p className="text-xs text-gray-500 mt-0.5 flex items-center gap-1">
+                            {r.group && <span>{r.group}</span>}
+                            {r.group && r.section && r.section !== r.title && (
+                              <>
+                                <span className="text-gray-700">›</span>
+                                <span>{r.section}</span>
+                              </>
+                            )}
+                          </p>
+                        )}
+                      </div>
+                      <span
+                        className="shrink-0 text-xs px-2 py-0.5 rounded"
+                        style={{ backgroundColor: "#252830", color: "#6b7280", border: "1px solid #374151" }}
+                      >
+                        Guide
+                      </span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : query ? (
+            <p className="px-4 py-8 text-sm text-gray-500 text-center">
+              No results for &ldquo;{query}&rdquo;
+            </p>
+          ) : (
+            <p className="px-4 py-8 text-xs text-gray-600 text-center">
+              Type to search, or use filters to browse by section or role
+            </p>
+          )}
+        </div>
+
+        {/* Footer hints */}
+        <div className="px-4 py-2 flex gap-4 text-xs text-gray-600" style={{ borderTop: "1px solid #2e3340" }}>
+          <span><kbd className="border border-gray-700 rounded px-1 text-gray-500">↑↓</kbd> navigate</span>
+          <span><kbd className="border border-gray-700 rounded px-1 text-gray-500">↵</kbd> select</span>
+          <span><kbd className="border border-gray-700 rounded px-1 text-gray-500">esc</kbd> close</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function SearchTrigger() {
+  return (
+    <button
+      onClick={() => {
+        window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true, bubbles: true }))
+      }}
+      className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:border-gray-500 transition-colors"
+    >
+      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+      <span>Search</span>
+      <kbd className="text-xs border border-gray-600 rounded px-1">⌘K</kbd>
+    </button>
+  )
+}

package/template/components/SectionCards/SectionCards.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link"
+import type { NavEntry } from "@/lib/nav-types"
+
+export function SectionCards({ entry }: { entry: NavEntry }) {
+  if (!entry.section || entry.section.length === 0) return null
+
+  return (
+    <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
+      <h2 className="text-base font-semibold text-gray-700 dark:text-gray-300 mb-4 uppercase tracking-wide text-xs">In this section</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      {entry.section.map((child) => (
+        <Link
+          key={child.slug}
+          href={child.slug}
+          className="group flex flex-col gap-1 p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 transition-all"
+        >
+          <span className="text-sm font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
+            {child.label}
+          </span>
+          {child.children && child.children.length > 0 && (
+            <span className="text-xs text-gray-400 dark:text-gray-500">
+              {child.children.length} article{child.children.length !== 1 ? "s" : ""}
+            </span>
+          )}
+          <span className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            View →
+          </span>
+        </Link>
+      ))}
+      </div>
+    </div>
+  )
+}

package/template/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { NavEntry, NavGroup, NavChild } from "@/lib/nav-types"
+
+type Props = {
+  activeGroup?: NavGroup | null
+  currentSlug: string
+  userRoles: string[]
+  authEnabled?: boolean
+}
+
+function canSee(roles: string[], userRoles: string[], authEnabled: boolean) {
+  if (!authEnabled) return true
+  return roles.length === 0 || roles.some((r) => userRoles.includes(r))
+}
+
+// Doc page link (leaf node inside a section)
+function DocLink({ item, currentSlug }: { item: NavChild; currentSlug: string }) {
+  const isActive = currentSlug === item.slug
+  return (
+    <li>
+      <Link
+        href={item.slug}
+        style={isActive ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
+        className={`block py-1.5 pl-4 pr-3 text-sm border-l-2 transition-colors ${
+          isActive
+            ? "font-medium bg-black/5 dark:bg-white/10"
+            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+        }`}
+      >
+        {item.label}
+      </Link>
+    </li>
+  )
+}
+
+// Collapsible section row (e.g. "DoW Deployment") — collapsed by default
+function SectionRow({
+  section,
+  currentSlug,
+  userRoles,
+  authEnabled = false,
+}: {
+  section: NavChild
+  currentSlug: string
+  userRoles: string[]
+  authEnabled?: boolean
+}) {
+  const docs = (section.children ?? []).filter((c) => canSee(c.roles, userRoles, authEnabled))
+  const hasChildren = docs.length > 0
+
+  // Open only if the current page lives inside this section
+  const containsCurrent =
+    currentSlug === section.slug ||
+    docs.some((d) => currentSlug === d.slug)
+
+  const [open, setOpen] = useState(containsCurrent)
+
+  // No children — render as a plain link, no arrow
+  if (!hasChildren) {
+    return (
+      <div className="mb-0.5">
+        <Link
+          href={section.slug}
+          style={currentSlug === section.slug ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
+        className={`block py-1.5 pl-4 pr-2 text-sm border-l-2 transition-colors ${
+            currentSlug === section.slug
+              ? "font-medium bg-black/5 dark:bg-white/10"
+              : "border-transparent text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+          }`}
+        >
+          {section.label}
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mb-0.5">
+      {/* Section header — full-width click area toggles collapse */}
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center justify-between py-1.5 px-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors rounded"
+      >
+        <span>{section.label}</span>
+        <svg
+          className={`w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform ${open ? "rotate-0" : "rotate-180"}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+        </svg>
+      </button>
+
+      {open && (
+        <ul className="mt-0.5 mb-1">
+          {docs.map((doc) => (
+            <DocLink key={doc.slug} item={doc} currentSlug={currentSlug} />
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+// Category block (e.g. "AUTHORIZATION PATH") — label only, no arrow
+function CategoryBlock({
+  entry,
+  currentSlug,
+  userRoles,
+  authEnabled = false,
+}: {
+  entry: NavEntry
+  currentSlug: string
+  userRoles: string[]
+  authEnabled?: boolean
+}) {
+  const sections = (entry.section ?? []).filter((s) => canSee(s.roles, userRoles, authEnabled))
+  const isCategoryActive = currentSlug === entry.slug
+
+  return (
+    <div className="mb-4">
+      {/* Category label — ALL CAPS, highlighted when on the category landing page */}
+      <Link
+        href={entry.slug}
+        style={isCategoryActive ? { color: "var(--cm-active)" } : {}}
+        className={`block px-2 pb-1 text-xs font-semibold uppercase tracking-widest transition-colors select-none ${
+          isCategoryActive ? "" : "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+        }`}
+      >
+        {entry.label}
+      </Link>
+
+      {sections.map((section) => (
+        <SectionRow
+          key={section.slug}
+          section={section}
+          currentSlug={currentSlug}
+          userRoles={userRoles}
+          authEnabled={authEnabled}
+        />
+      ))}
+    </div>
+  )
+}
+
+function GroupSidebar({
+  group,
+  currentSlug,
+  userRoles,
+  authEnabled = false,
+}: {
+  group: NavGroup
+  currentSlug: string
+  userRoles: string[]
+  authEnabled?: boolean
+}) {
+  const visibleItems = group.items.filter((i) => canSee(i.roles, userRoles, authEnabled))
+
+  return (
+    <aside className="hidden md:block w-72 shrink-0 border-r border-gray-200 dark:border-gray-800 overflow-y-auto bg-white dark:bg-gray-950">
+      <div className="px-4 py-4">
+        {visibleItems.map((entry) => (
+          <CategoryBlock
+            key={entry.slug}
+            entry={entry}
+            currentSlug={currentSlug}
+            userRoles={userRoles}
+            authEnabled={authEnabled}
+          />
+        ))}
+      </div>
+    </aside>
+  )
+}
+
+export function Sidebar({ activeGroup, currentSlug, userRoles, authEnabled = false }: Props) {
+  if (activeGroup) {
+    return (
+      <GroupSidebar
+        group={activeGroup}
+        currentSlug={currentSlug}
+        userRoles={userRoles}
+        authEnabled={authEnabled}
+      />
+    )
+  }
+
+  return (
+    <aside className="hidden md:block w-72 shrink-0 border-r border-gray-200 dark:border-gray-800 p-4 overflow-y-auto bg-white dark:bg-gray-950" />
+  )
+}

package/template/components/Toc/Toc.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import type { TocEntry } from "@/lib/mdx"
+
+export function Toc({ entries }: { entries: TocEntry[] }) {
+  const [activeId, setActiveId] = useState<string>("")
+
+  useEffect(() => {
+    if (entries.length === 0) return
+
+    const observer = new IntersectionObserver(
+      (obs) => {
+        const visible = obs.filter((e) => e.isIntersecting)
+        if (visible.length > 0) setActiveId(visible[0].target.id)
+      },
+      { rootMargin: "0px 0px -60% 0px", threshold: 0 }
+    )
+
+    entries.forEach(({ id }) => {
+      const el = document.getElementById(id)
+      if (el) observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [entries])
+
+  if (entries.length === 0) return null
+
+  return (
+    <aside className="hidden xl:block w-56 shrink-0 pl-6 py-8 self-start sticky top-8">
+      <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        On this page
+      </p>
+      <ul className="border-l border-gray-200 dark:border-gray-700">
+        {entries.map((entry) => (
+          <li key={entry.id}>
+            <a
+              href={`#${entry.id}`}
+              onClick={() => setActiveId(entry.id)}
+              style={activeId === entry.id ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
+              className={`block text-sm leading-snug py-1 transition-colors border-l-2 -ml-px ${
+                entry.level === 3 ? "pl-5" : "pl-3"
+              } ${
+                activeId === entry.id
+                  ? "font-semibold"
+                  : "border-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              }`}
+            >
+              {entry.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  )
+}

package/template/components/ZoomImages/ZoomImages.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { useEffect } from "react"
+import { usePathname } from "next/navigation"
+
+export function ZoomImages() {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const article = document.querySelector("article")
+    if (!article) return
+
+    const imgs = Array.from(article.querySelectorAll<HTMLImageElement>("img"))
+
+    function toggle(this: HTMLImageElement) {
+      this.classList.toggle("zoomed")
+    }
+
+    imgs.forEach((img) => img.addEventListener("click", toggle))
+    return () => imgs.forEach((img) => img.removeEventListener("click", toggle))
+  }, [pathname])
+
+  return null
+}

package/template/components/mdx/Callout.tsx

@@ -0,0 +1,43 @@
+import { Icon } from "./Icon"
+
+type CalloutType = "tip" | "warning" | "important" | "note" | "danger" | "success"
+
+const labels: Record<CalloutType, string> = {
+  tip:       "Tip",
+  warning:   "Warning",
+  important: "Important",
+  note:      "Note",
+  danger:    "Danger",
+  success:   "Success",
+}
+
+const defaultIcons: Record<CalloutType, string> = {
+  tip:       "lightbulb",
+  warning:   "triangle-alert",
+  important: "info",
+  note:      "notebook-pen",
+  danger:    "circle-x",
+  success:   "circle-check",
+}
+
+export function Callout({
+  type = "note",
+  icon,
+  children,
+}: {
+  type?: CalloutType
+  icon?: string
+  children: React.ReactNode
+}) {
+  const iconName = icon ?? defaultIcons[type]
+
+  return (
+    <div className={`callout ${type} my-4`}>
+      <div className="callout-header flex items-center gap-1.5">
+        <Icon name={iconName} size={13} />
+        {labels[type]}
+      </div>
+      <div className="callout-body">{children}</div>
+    </div>
+  )
+}