camelmind 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camelmind",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Create and manage CamelMind documentation sites",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "build:cli": "tsup",
     "dev": "tsup --watch",
     "sync-template": "node scripts/sync-template.mjs",
     "prepublishOnly": "npm run sync-template && npm run build"

package/template/app/[...slug]/page.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/lib/nav"
 import { loadMdxFile } from "@/lib/mdx"
 import { getSession, hasAccess, pageRequiresAuth, shouldRedirectToLogin } from "@/lib/auth"
-import { isAuthEnabled } from "@/lib/config"
+import { getConfig, isAuthEnabled, showLastUpdated, showLastUpdateAuthor, showFeedbackWidget } from "@/lib/config"
 import { loadVersions, getVersionFromSlug, getNavForVersion } from "@/lib/versions"
 import { TopNav } from "@/components/Nav/TopNav"
 import { Sidebar } from "@/components/Sidebar/Sidebar"
@@ -21,6 +21,8 @@ import { Breadcrumbs } from "@/components/Breadcrumbs/Breadcrumbs"
 import { PageNav } from "@/components/PageNav/PageNav"
 import { SectionCards } from "@/components/SectionCards/SectionCards"
 import { DocActions } from "@/components/DocActions/DocActions"
+import { LastUpdated } from "@/components/LastUpdated/LastUpdated"
+import { DocFeedback } from "@/components/DocFeedback/DocFeedback"
 import { ZoomImages } from "@/components/ZoomImages/ZoomImages"
 import { mdxComponents } from "@/components/mdx"
 import type { NavGroup, NavEntry } from "@/lib/nav-types"
@@ -65,6 +67,12 @@ export default async function DocPage({ params }: Props) {
 
   const session = await getSession()
   const authEnabled = isAuthEnabled()
+  const apiRefConfig = getConfig().apiReference
+  const currentVersion = versions.find((v) => v.id === versionId)
+  const versionShowsApiRef = currentVersion ? (currentVersion.api_reference !== false) : true
+  const apiRef = apiRefConfig?.enabled && versionShowsApiRef
+    ? { label: apiRefConfig.navLabel ?? "API Reference", href: "/api-reference", roles: apiRefConfig.roles ?? [] }
+    : null
 
   if (shouldRedirectToLogin(navEntry.roles, session)) {
     redirect(`/login?returnTo=${encodeURIComponent(fullSlug)}`)
@@ -73,7 +81,7 @@ export default async function DocPage({ params }: Props) {
   if (pageRequiresAuth(navEntry.roles) && session && !hasAccess(navEntry.roles, session.roles)) {
     return (
       <div className="flex flex-col h-screen">
-        <TopNav nav={nav.nav} userRoles={session.roles} userName={session.name} authEnabled={authEnabled} versions={versions} currentVersionId={versionId} currentSlug={fullSlug} versionSlugs={versionSlugs} />
+        <TopNav nav={nav.nav} userRoles={session.roles} userName={session.name} authEnabled={authEnabled} versions={versions} currentVersionId={versionId} currentSlug={fullSlug} versionSlugs={versionSlugs} apiRef={apiRef} />
         <div className="flex flex-1 items-center justify-center bg-[var(--cm-bg-primary)]">
           <div className="text-center">
             <h1 className="text-2xl font-bold text-[var(--cm-text-primary)] mb-2">Access Restricted</h1>
@@ -89,12 +97,12 @@ export default async function DocPage({ params }: Props) {
 
   const activeGroup = getGroupForSlugFromConfig(nav, fullSlug) as NavGroup | null
   const sectionEntry = getSectionForSlugFromConfig(nav, fullSlug) as NavEntry | null
-  const { frontmatter, source, toc } = loadMdxFile(navEntry.file)
+  const { frontmatter, source, toc, lastUpdated, lastUpdatedAuthor } = loadMdxFile(navEntry.file)
   const isSectionRoot = sectionEntry?.slug === fullSlug
 
   return (
     <div className="flex flex-col h-screen">
-      <TopNav nav={nav.nav} userRoles={session?.roles ?? []} userName={session?.name ?? null} authEnabled={authEnabled} versions={versions} currentVersionId={versionId} currentSlug={fullSlug} versionSlugs={versionSlugs} />
+      <TopNav nav={nav.nav} userRoles={session?.roles ?? []} userName={session?.name ?? null} authEnabled={authEnabled} versions={versions} currentVersionId={versionId} currentSlug={fullSlug} versionSlugs={versionSlugs} apiRef={apiRef} />
       <div className="flex flex-1 overflow-hidden">
         <Sidebar activeGroup={activeGroup} currentSlug={fullSlug} userRoles={session?.roles ?? []} authEnabled={authEnabled} />
         <main className="flex-1 overflow-y-auto bg-white dark:bg-gray-950">
@@ -137,7 +145,21 @@ export default async function DocPage({ params }: Props) {
                   <SectionCards entry={sectionEntry} />
                 </div>
               )}
-              <div data-print="hide">
+              <div data-print="hide" className="mt-12">
+                <div className="flex items-center justify-between mb-6">
+                  {showLastUpdated() && lastUpdated ? (
+                    <LastUpdated
+                      date={lastUpdated}
+                      author={showLastUpdateAuthor() ? lastUpdatedAuthor : null}
+                    />
+                  ) : <div />}
+                  {showFeedbackWidget() && (
+                    <DocFeedback
+                      pageTitle={frontmatter.title}
+                      pageSlug={fullSlug}
+                    />
+                  )}
+                </div>
                 <PageNav activeGroup={activeGroup} currentSlug={fullSlug} />
               </div>
             </article>

package/template/app/api/feedback/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+  const webhookUrl = process.env.SLACK_WEBHOOK_URL
+  if (!webhookUrl) {
+    return NextResponse.json({ error: "Webhook not configured" }, { status: 503 })
+  }
+
+  const { rating, reason, allowFollowUp, pageTitle, pageSlug } = await req.json()
+
+  const emoji = rating === "positive" ? "👍" : "👎"
+  const ratingLabel = rating === "positive" ? "Helpful" : "Not helpful"
+
+  await fetch(webhookUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      blocks: [
+        {
+          type: "section",
+          text: {
+            type: "mrkdwn",
+            text: `${emoji} *Doc Feedback — ${ratingLabel}*`,
+          },
+        },
+        {
+          type: "section",
+          fields: [
+            { type: "mrkdwn", text: `*Page:*\n${pageTitle}` },
+            { type: "mrkdwn", text: `*Path:*\n\`${pageSlug}\`` },
+            { type: "mrkdwn", text: `*Reason:*\n${reason || "—"}` },
+            { type: "mrkdwn", text: `*Follow-up OK:*\n${allowFollowUp ? "Yes" : "No"}` },
+          ],
+        },
+      ],
+    }),
+  })
+
+  return NextResponse.json({ ok: true })
+}

package/template/app/api-reference/[[...slug]]/page.tsx

@@ -0,0 +1,165 @@
+import { notFound, redirect } from "next/navigation"
+import { getConfig, isAuthEnabled } from "@/lib/config"
+import { loadApiSpec } from "@/lib/api-reference"
+import { getSession, hasAccess } from "@/lib/auth"
+import { loadVersions, getNavForVersion, getApiSpecForVersion } from "@/lib/versions"
+import { getSlugsFromConfig } from "@/lib/nav"
+import { TopNav } from "@/components/Nav/TopNav"
+import { ApiSidebar } from "@/components/ApiReference/ApiSidebar"
+import { EndpointPage } from "@/components/ApiReference/EndpointPage"
+import { ApiOverview } from "@/components/ApiReference/ApiOverview"
+
+type Props = {
+  params: Promise<{ slug?: string[] }>
+}
+
+// Detect if the first slug segment is a known version ID.
+// /api-reference/v2.0/applications/create → versionId="v2.0", rest=["applications","create"]
+// /api-reference/applications/create      → versionId=null,   rest=["applications","create"]
+function parseVersionFromSlug(
+  slug: string[] | undefined,
+  versionIds: string[]
+): { versionId: string | null; rest: string[] } {
+  if (!slug?.length) return { versionId: null, rest: [] }
+  if (versionIds.includes(slug[0])) return { versionId: slug[0], rest: slug.slice(1) }
+  return { versionId: null, rest: slug }
+}
+
+export async function generateStaticParams() {
+  let config
+  try { config = getConfig() } catch { return [] }
+
+  const apiRef = config.apiReference
+  if (!apiRef?.enabled) return []
+
+  const { versions } = loadVersions()
+  const params: Array<{ slug: string[] | undefined }> = [{ slug: undefined }]
+
+  for (const version of versions) {
+    const resolved = getApiSpecForVersion(version.id, apiRef.spec, apiRef.languages)
+    if (!resolved) continue
+
+    let spec
+    try { spec = loadApiSpec(resolved.spec, resolved.languages) } catch { continue }
+
+    params.push({ slug: [version.id] })
+
+    for (const op of spec.allOperations) {
+      params.push({ slug: [version.id, op.tagSlug, op.operationId] })
+    }
+  }
+
+  // Also enumerate no-version-prefix routes using the default spec
+  let defaultSpec
+  try { defaultSpec = loadApiSpec(apiRef.spec, apiRef.languages) } catch { return params }
+  for (const op of defaultSpec.allOperations) {
+    params.push({ slug: [op.tagSlug, op.operationId] })
+  }
+
+  return params
+}
+
+export default async function ApiReferencePage({ params }: Props) {
+  const config = getConfig()
+  const apiRef = config.apiReference
+  if (!apiRef?.enabled) return notFound()
+
+  const { slug: rawSlug } = await params
+  const { versions } = loadVersions()
+  const versionIds = versions.map((v) => v.id)
+
+  const { versionId, rest: slug } = parseVersionFromSlug(rawSlug, versionIds)
+  const base = versionId ? `/api-reference/${versionId}` : "/api-reference"
+
+  const resolved = getApiSpecForVersion(versionId, apiRef.spec, apiRef.languages)
+  if (!resolved) return notFound()
+
+  let spec
+  try { spec = loadApiSpec(resolved.spec, resolved.languages) } catch { return notFound() }
+
+  const session = await getSession()
+  const authEnabled = isAuthEnabled()
+  const roles = apiRef.roles ?? []
+
+  if (!hasAccess(roles, session?.roles ?? [])) {
+    if (!session) redirect(`/login?returnTo=${base}`)
+    return (
+      <div className="flex flex-col h-screen">
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">Access Restricted</h1>
+            <p className="text-gray-500">You don&apos;t have permission to view the API reference.</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const versionSlugs: Record<string, string[]> = Object.fromEntries(
+    versions.map((v) => {
+      const nav = getNavForVersion(v.id)
+      return [v.id, getSlugsFromConfig(nav)]
+    })
+  )
+  const nav = getNavForVersion(versionId)
+  const apiRefProp = { label: apiRef.navLabel ?? "API Reference", href: "/api-reference", roles }
+  const currentSlug = slug.length ? `${base}/${slug.join("/")}` : base
+
+  if (!slug.length) {
+    return (
+      <div className="flex flex-col h-screen">
+        <TopNav
+          nav={nav.nav}
+          userRoles={session?.roles ?? []}
+          userName={session?.name ?? null}
+          authEnabled={authEnabled}
+          versions={versions}
+          currentVersionId={versionId}
+          currentSlug={base}
+          versionSlugs={versionSlugs}
+          apiRef={apiRefProp}
+        />
+        <div className="flex flex-1 overflow-hidden">
+          <ApiSidebar spec={spec} currentSlug={base} base={base} />
+          <main className="flex-1 overflow-y-auto bg-white dark:bg-gray-950">
+            <ApiOverview spec={spec} base={base} />
+          </main>
+        </div>
+      </div>
+    )
+  }
+
+  if (slug.length === 1) {
+    const tag = spec.tags.find((t) => t.slug === slug[0])
+    if (!tag || !tag.operations.length) return notFound()
+    redirect(`${base}/${tag.slug}/${tag.operations[0].operationId}`)
+  }
+
+  const [tagSlug, operationId] = slug
+  const op = spec.allOperations.find(
+    (o) => o.tagSlug === tagSlug && o.operationId === operationId
+  )
+  if (!op) return notFound()
+
+  return (
+    <div className="flex flex-col h-screen">
+      <TopNav
+        nav={nav.nav}
+        userRoles={session?.roles ?? []}
+        userName={session?.name ?? null}
+        authEnabled={authEnabled}
+        versions={versions}
+        currentVersionId={versionId}
+        currentSlug={currentSlug}
+        versionSlugs={versionSlugs}
+        apiRef={apiRefProp}
+      />
+      <div className="flex flex-1 overflow-hidden">
+        <ApiSidebar spec={spec} currentSlug={currentSlug} base={base} />
+        <main className="flex-1 overflow-hidden bg-white dark:bg-gray-950 flex">
+          <EndpointPage operation={op} spec={spec} />
+        </main>
+      </div>
+    </div>
+  )
+}

package/template/app/home/page.tsx

@@ -61,6 +61,11 @@ export default async function HomePage() {
     versions.map((v) => [v.id, getSlugsFromConfig(getNavForVersion(v.id))])
   )
 
+  const apiRefConfig = config.apiReference
+  const apiRef = apiRefConfig?.enabled
+    ? { label: apiRefConfig.navLabel ?? "API Reference", href: "/api-reference", roles: apiRefConfig.roles ?? [] }
+    : null
+
   return (
     <div className="flex flex-col min-h-screen">
       <TopNav
@@ -72,6 +77,7 @@ export default async function HomePage() {
         currentVersionId={null}
         currentSlug="/home"
         versionSlugs={versionSlugs}
+        apiRef={apiRef}
       />
 
       <main className="flex-1 bg-[var(--cm-bg-primary)]">

package/template/components/ApiReference/ApiOverview.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link"
+import type { ParsedSpec } from "@/lib/api-types"
+import { MethodBadge } from "./MethodBadge"
+
+type Props = {
+  spec: ParsedSpec
+  base?: string
+}
+
+export function ApiOverview({ spec, base = "/api-reference" }: Props) {
+  return (
+    <div className="flex-1 px-8 py-8 max-w-4xl overflow-y-auto">
+      <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">{spec.info.title}</h1>
+      <div className="flex items-center gap-2 mb-6">
+        <span className="text-xs font-mono text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">
+          {spec.info.version}
+        </span>
+        {spec.baseUrl && (
+          <code className="text-xs text-gray-500 dark:text-gray-400">{spec.baseUrl}</code>
+        )}
+      </div>
+
+      {spec.info.description && (
+        <p className="text-gray-600 dark:text-gray-400 mb-10 leading-relaxed whitespace-pre-line max-w-2xl">
+          {spec.info.description}
+        </p>
+      )}
+
+      {/* Tag groups */}
+      <div className="space-y-8">
+        {spec.tags.map((tag) => (
+          <section key={tag.slug}>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">{tag.name}</h2>
+            {tag.description && (
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">{tag.description}</p>
+            )}
+
+            <div className="rounded-lg border border-gray-200 dark:border-gray-800 divide-y divide-gray-100 dark:divide-gray-800">
+              {tag.operations.map((op) => (
+                <Link
+                  key={op.operationId}
+                  href={`${base}/${tag.slug}/${op.operationId}`}
+                  className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors group"
+                >
+                  <MethodBadge method={op.method} size="sm" />
+                  <code className="text-sm font-mono text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 flex-1">
+                    {op.path}
+                  </code>
+                  <span className="text-sm text-gray-500 dark:text-gray-400 hidden sm:block">
+                    {op.summary}
+                  </span>
+                  {op.deprecated && (
+                    <span className="text-[10px] font-medium text-amber-500 uppercase tracking-wide">deprecated</span>
+                  )}
+                </Link>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  )
+}

package/template/components/ApiReference/ApiSidebar.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import Link from "next/link"
+import type { ParsedSpec } from "@/lib/api-types"
+import { MethodBadge } from "./MethodBadge"
+
+type Props = {
+  spec: ParsedSpec
+  currentSlug: string
+  base?: string
+}
+
+export function ApiSidebar({ spec, currentSlug, base = "/api-reference" }: Props) {
+  return (
+    <aside className="hidden md:block w-64 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">
+        {/* Overview link */}
+        <div className="mb-4">
+          <Link
+            href={base}
+            style={currentSlug === base ? { color: "var(--sf-active)" } : {}}
+            className={`block px-2 py-1.5 text-sm rounded transition-colors ${
+              currentSlug === base
+                ? "font-medium bg-black/5 dark:bg-white/10"
+                : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+            }`}
+          >
+            Overview
+          </Link>
+        </div>
+
+        {/* Tags */}
+        {spec.tags.map((tag) => (
+          <div key={tag.slug} className="mb-4">
+            {/* Tag header — ALL CAPS */}
+            <p className="px-2 pb-1 text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 select-none">
+              {tag.name}
+            </p>
+
+            {/* Operations */}
+            <ul className="space-y-0.5">
+              {tag.operations.map((op) => {
+                const href = `${base}/${tag.slug}/${op.operationId}`
+                const isActive = currentSlug === href
+
+                return (
+                  <li key={op.operationId}>
+                    <Link
+                      href={href}
+                      style={isActive ? { borderColor: "var(--sf-active-border)", color: "var(--sf-active)" } : {}}
+                      className={`flex items-center gap-2 py-1.5 pl-2 pr-2 text-xs border-l-2 rounded-r 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"
+                      }`}
+                    >
+                      <MethodBadge method={op.method} size="sm" />
+                      <span className="truncate text-[12px]">{op.summary}</span>
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </aside>
+  )
+}

package/template/components/ApiReference/CodeSamples.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { CodeSample } from "@/lib/api-types"
+
+const LANG_LABELS: Record<string, string> = {
+  curl:       "cURL",
+  python:     "Python",
+  javascript: "JavaScript",
+  go:         "Go",
+  ruby:       "Ruby",
+  java:       "Java",
+  csharp:     "C#",
+  php:        "PHP",
+}
+
+const CopyIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+)
+
+const ExpandIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+  </svg>
+)
+
+const CloseIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+)
+
+type TabsProps = {
+  samples: CodeSample[]
+  active: number
+  onSelect: (i: number) => void
+}
+
+function LangTabs({ samples, active, onSelect }: TabsProps) {
+  return (
+    <>
+      {samples.map((sample, i) => (
+        <button
+          key={`${sample.lang}-${i}`}
+          onClick={() => onSelect(i)}
+          className={`px-3 py-2 text-xs font-medium shrink-0 transition-colors ${
+            active === i
+              ? "text-white border-b-2 border-white"
+              : "text-gray-400 hover:text-gray-200"
+          }`}
+        >
+          {sample.label ?? LANG_LABELS[sample.lang.toLowerCase()] ?? sample.lang}
+        </button>
+      ))}
+    </>
+  )
+}
+
+type Props = {
+  samples: CodeSample[]
+}
+
+export function CodeSamples({ samples }: Props) {
+  const [active, setActive] = useState(0)
+  const [copied, setCopied] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const [modalCopied, setModalCopied] = useState(false)
+
+  const current = samples[active]
+
+  useEffect(() => {
+    if (!expanded) return
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setExpanded(false)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [expanded])
+
+  if (!samples.length) return null
+
+  function copy(setFlag: (v: boolean) => void) {
+    navigator.clipboard.writeText(current.source).then(() => {
+      setFlag(true)
+      setTimeout(() => setFlag(false), 1500)
+    })
+  }
+
+  const lines = current.source.split("\n")
+
+  return (
+    <>
+      {/* Inline code block */}
+      <div className="rounded-lg overflow-hidden border border-gray-700 bg-[#1a1d23]">
+        {/* Tabs + actions */}
+        <div className="flex items-center border-b border-gray-700 overflow-x-auto">
+          <LangTabs samples={samples} active={active} onSelect={setActive} />
+          <div className="ml-auto flex items-center gap-0.5 pr-2 shrink-0">
+            <button
+              onClick={() => copy(setCopied)}
+              className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+              title="Copy"
+            >
+              {copied ? <CheckIcon /> : <CopyIcon />}
+            </button>
+            <button
+              onClick={() => setExpanded(true)}
+              className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+              title="Expand"
+            >
+              <ExpandIcon />
+            </button>
+          </div>
+        </div>
+
+        {/* Code */}
+        <pre className="p-4 text-[13px] leading-relaxed text-gray-200 overflow-x-auto font-mono whitespace-pre">
+          <code>{current.source}</code>
+        </pre>
+      </div>
+
+      {/* Expanded modal */}
+      {expanded && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-6"
+          onClick={(e) => { if (e.target === e.currentTarget) setExpanded(false) }}
+        >
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/70" />
+
+          {/* Modal */}
+          <div className="relative w-full max-w-4xl max-h-[85vh] flex flex-col rounded-xl overflow-hidden border border-gray-700 bg-[#1a1d23] shadow-2xl">
+            {/* Modal header */}
+            <div className="flex items-center border-b border-gray-700 shrink-0">
+              <div className="flex items-center overflow-x-auto">
+                <LangTabs samples={samples} active={active} onSelect={setActive} />
+              </div>
+              <div className="ml-auto flex items-center gap-0.5 pr-3 shrink-0">
+                <button
+                  onClick={() => copy(setModalCopied)}
+                  className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+                  title="Copy"
+                >
+                  {modalCopied ? <CheckIcon /> : <CopyIcon />}
+                </button>
+                <button
+                  onClick={() => setExpanded(false)}
+                  className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+                  title="Close"
+                >
+                  <CloseIcon />
+                </button>
+              </div>
+            </div>
+
+            {/* Code with line numbers */}
+            <div className="overflow-auto flex-1">
+              <table className="w-full border-collapse">
+                <tbody>
+                  {lines.map((line, i) => (
+                    <tr key={i} className="hover:bg-white/5">
+                      <td className="select-none text-right text-gray-600 text-[13px] font-mono px-4 py-0 leading-6 w-10 shrink-0">
+                        {i + 1}
+                      </td>
+                      <td className="text-gray-200 text-[13px] font-mono pl-4 pr-8 py-0 leading-6 whitespace-pre">
+                        {line || " "}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}