camelmind 0.1.1 → 0.2.0

package/template/components/ApiReference/SchemaViewer.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import { useState } from "react"
+import { resolveRef } from "@/lib/api-utils"
+import type { SchemaObject } from "@/lib/api-types"
+
+// Correctly merges allOf items: shallow-merges scalar fields but additively merges
+// `properties` and `required` so no allOf item's fields are lost.
+function mergeAllOf(allOf: SchemaObject[], schemas: Record<string, SchemaObject>): SchemaObject {
+  const items = allOf.map((s) => (s.$ref ? (resolveRef(s.$ref, schemas) ?? s) : s))
+  const merged = Object.assign({} as SchemaObject, ...items)
+  const mergedProps: Record<string, SchemaObject> = {}
+  const mergedRequired: string[] = []
+  for (const item of items) {
+    if (item.properties) Object.assign(mergedProps, item.properties)
+    if (item.required) mergedRequired.push(...item.required)
+  }
+  if (Object.keys(mergedProps).length) merged.properties = mergedProps
+  if (mergedRequired.length) merged.required = [...new Set(mergedRequired)]
+  return merged
+}
+
+type Props = {
+  schema: SchemaObject
+  schemas: Record<string, SchemaObject>
+  required?: boolean
+  name?: string
+  depth?: number
+}
+
+function TypeLabel({ schema }: { schema: SchemaObject }) {
+  if (schema.$ref) {
+    const refName = schema.$ref.replace("#/components/schemas/", "")
+    return <span className="text-xs font-mono text-purple-600 dark:text-purple-400">{refName}</span>
+  }
+
+  if (schema.allOf?.length) {
+    return <span className="text-xs font-mono text-gray-500">object</span>
+  }
+
+  if (schema.type === "array") {
+    const items = schema.items
+    if (items?.$ref) {
+      const refName = items.$ref.replace("#/components/schemas/", "")
+      return <span className="text-xs font-mono text-gray-500">array of <span className="text-purple-600 dark:text-purple-400">{refName}</span></span>
+    }
+    return <span className="text-xs font-mono text-gray-500">array{items?.type ? ` of ${items.type}` : ""}</span>
+  }
+
+  if (schema.enum) {
+    return (
+      <span className="text-xs font-mono text-gray-500">
+        {schema.type ?? "string"}{" "}
+        <span className="text-gray-400">({schema.enum.map((v) => JSON.stringify(v)).join(" | ")})</span>
+      </span>
+    )
+  }
+
+  if (schema.format) {
+    return <span className="text-xs font-mono text-gray-500">{schema.type} <span className="text-gray-400">({schema.format})</span></span>
+  }
+
+  return <span className="text-xs font-mono text-gray-500">{schema.type ?? "any"}</span>
+}
+
+function PropertyRow({
+  name,
+  schema,
+  required,
+  schemas,
+  depth,
+}: {
+  name: string
+  schema: SchemaObject
+  required: boolean
+  schemas: Record<string, SchemaObject>
+  depth: number
+}) {
+  const [expanded, setExpanded] = useState(depth < 1)
+
+  const resolved: SchemaObject = schema.$ref ? (resolveRef(schema.$ref, schemas) ?? schema) : schema
+  const mergedSchema: SchemaObject = resolved.allOf?.length
+    ? mergeAllOf(resolved.allOf, schemas)
+    : resolved
+
+  const itemSchema = mergedSchema.type === "array" && mergedSchema.items
+    ? (mergedSchema.items.$ref ? (resolveRef(mergedSchema.items.$ref, schemas) ?? mergedSchema.items) : mergedSchema.items)
+    : null
+
+  const childProperties =
+    mergedSchema.type === "object" || mergedSchema.properties
+      ? mergedSchema.properties
+      : itemSchema?.type === "object" || itemSchema?.properties
+        ? itemSchema.properties
+        : null
+
+  const hasChildren = depth < 4 && !!childProperties && Object.keys(childProperties).length > 0
+
+  return (
+    <div className="border-b border-gray-100 dark:border-gray-800 last:border-0">
+      <div className="flex items-start gap-3 py-3 px-0">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <code className="text-sm font-mono font-medium text-gray-900 dark:text-gray-100">{name}</code>
+            <TypeLabel schema={schema} />
+            {required && (
+              <span className="text-[10px] font-medium text-red-500 uppercase tracking-wide">required</span>
+            )}
+            {(resolved.readOnly || mergedSchema.readOnly) && (
+              <span className="text-[10px] font-medium text-gray-400 uppercase tracking-wide">read-only</span>
+            )}
+            {(schema.deprecated || resolved.deprecated) && (
+              <span className="text-[10px] font-medium text-amber-500 uppercase tracking-wide">deprecated</span>
+            )}
+          </div>
+          {(resolved.description || mergedSchema.description) && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+              {resolved.description ?? mergedSchema.description}
+            </p>
+          )}
+          {resolved.default !== undefined && (
+            <p className="text-xs text-gray-400 mt-0.5">
+              Default: <code className="font-mono">{JSON.stringify(resolved.default)}</code>
+            </p>
+          )}
+        </div>
+
+        {hasChildren && (
+          <button
+            onClick={() => setExpanded((e) => !e)}
+            className="shrink-0 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex items-center gap-1 mt-0.5"
+          >
+            {expanded ? "Hide" : "Show"} fields
+            <svg
+              className={`w-3 h-3 transition-transform ${expanded ? "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>
+        )}
+      </div>
+
+      {hasChildren && expanded && (
+        <div className="ml-4 border-l-2 border-gray-100 dark:border-gray-800 pl-4 mb-3">
+          {(Object.entries(childProperties!) as [string, SchemaObject][]).map(([childName, childSchema]) => (
+            <PropertyRow
+              key={childName}
+              name={childName}
+              schema={childSchema}
+              required={(mergedSchema.required ?? itemSchema?.required ?? []).includes(childName)}
+              schemas={schemas}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function SchemaViewer({ schema, schemas, required, name, depth = 0 }: Props) {
+  const resolved: SchemaObject = schema.$ref ? (resolveRef(schema.$ref, schemas) ?? schema) : schema
+  const mergedSchema: SchemaObject = resolved.allOf?.length
+    ? mergeAllOf(resolved.allOf, schemas)
+    : resolved
+
+  const properties = mergedSchema.properties
+  const requiredFields = mergedSchema.required ?? []
+
+  if (name !== undefined) {
+    return (
+      <PropertyRow
+        name={name}
+        schema={schema}
+        required={required ?? false}
+        schemas={schemas}
+        depth={depth}
+      />
+    )
+  }
+
+  if (!properties || Object.keys(properties).length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400 py-2">
+        <TypeLabel schema={schema} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="divide-y divide-gray-100 dark:divide-gray-800">
+      {(Object.entries(properties) as [string, SchemaObject][]).map(([propName, propSchema]) => (
+        <PropertyRow
+          key={propName}
+          name={propName}
+          schema={propSchema}
+          required={requiredFields.includes(propName)}
+          schemas={schemas}
+          depth={depth}
+        />
+      ))}
+    </div>
+  )
+}

package/template/components/DocFeedback/DocFeedback.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import { useState } from "react"
+import { ThumbsUp, ThumbsDown } from "lucide-react"
+
+type Step = "idle" | "yes" | "no" | "yes-done" | "no-done"
+
+const YES_REASONS = [
+  { value: "accurate", label: "Accurate", description: "Accurately describes the product or feature." },
+  { value: "solved", label: "Solved my issue", description: "Helped me resolve an issue." },
+  { value: "clear", label: "Easy to understand", description: "Easy to follow and comprehend." },
+  { value: "decided", label: "Helped me decide to use the product", description: "Convinced me to adopt the product or feature." },
+  { value: "other", label: "Another reason", description: "" },
+]
+
+const NO_REASONS = [
+  { value: "inaccurate", label: "Inaccurate", description: "Doesn't accurately describe the product or feature." },
+  { value: "missing", label: "Couldn't find what I was looking for", description: "Missing important information." },
+  { value: "unclear", label: "Hard to understand", description: "Too complicated or unclear." },
+  { value: "code", label: "Code sample errors", description: "One or more code samples are incorrect." },
+  { value: "other", label: "Another reason", description: "" },
+]
+
+type Props = {
+  pageTitle: string
+  pageSlug: string
+}
+
+export function DocFeedback({ pageTitle, pageSlug }: Props) {
+  const [step, setStep] = useState<Step>("idle")
+  const [reason, setReason] = useState("")
+  const [allowFollowUp, setAllowFollowUp] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+
+  function handleYes() {
+    if (step === "yes") { setStep("idle"); setReason(""); return }
+    setStep("yes")
+    setReason("")
+  }
+
+  function handleNo() {
+    if (step === "no") { setStep("idle"); setReason(""); return }
+    setStep("no")
+    setReason("")
+  }
+
+  async function handleSubmit() {
+    setSubmitting(true)
+    try {
+      await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          rating: step === "yes" ? "positive" : "negative",
+          reason,
+          allowFollowUp,
+          pageTitle,
+          pageSlug,
+        }),
+      })
+    } finally {
+      setStep(step === "yes" ? "yes-done" : "no-done")
+      setSubmitting(false)
+    }
+  }
+
+  const showPanel = step === "yes" || step === "no"
+  const reasons = step === "yes" ? YES_REASONS : NO_REASONS
+  const panelTitle = step === "yes" ? "What did you like?" : "What went wrong?"
+
+  const yesActive = step === "yes" || step === "yes-done"
+  const noActive = step === "no" || step === "no-done"
+  const done = step === "yes-done" || step === "no-done"
+
+  return (
+    <div className="relative flex flex-col items-end gap-3">
+      {showPanel && (
+        <div className="absolute bottom-full right-0 mb-2 w-80 bg-white border border-gray-200 dark:bg-[#1a1d23] dark:border-gray-700 rounded-lg p-5 shadow-lg z-50">
+          <p className="text-sm font-semibold text-gray-900 dark:text-white mb-4">{panelTitle}</p>
+          <div className="flex flex-col gap-3">
+            {reasons.map((r) => (
+              <label key={r.value} className="flex items-start gap-3 cursor-pointer">
+                <input
+                  type="radio"
+                  name="feedback-reason"
+                  value={r.value}
+                  checked={reason === r.value}
+                  onChange={() => setReason(r.value)}
+                  className="mt-0.5 accent-blue-500"
+                />
+                <div>
+                  <span className="text-sm font-medium text-gray-800 dark:text-white">{r.label}</span>
+                  {r.description && (
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{r.description}</p>
+                  )}
+                </div>
+              </label>
+            ))}
+          </div>
+          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <label className="flex items-start gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={allowFollowUp}
+                onChange={(e) => setAllowFollowUp(e.target.checked)}
+                className="mt-0.5 accent-blue-500"
+              />
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                Yes, it&apos;s okay to follow up by email.
+              </span>
+            </label>
+          </div>
+          <button
+            onClick={handleSubmit}
+            disabled={!reason || submitting}
+            className="mt-4 w-full py-2 text-sm text-gray-600 bg-gray-100 rounded-md disabled:opacity-40 disabled:cursor-not-allowed hover:enabled:bg-gray-200 hover:enabled:text-gray-900 dark:text-gray-400 dark:bg-gray-800 dark:hover:enabled:bg-gray-700 dark:hover:enabled:text-white transition-colors"
+          >
+            {submitting ? "Sending…" : "Feedback"}
+          </button>
+        </div>
+      )}
+
+      <div className="flex items-center gap-3">
+        {done && (
+          <span className="text-sm text-gray-500 dark:text-gray-400">Thanks for your feedback!</span>
+        )}
+        {!done && <span className="text-sm text-gray-500 dark:text-gray-400">Was this page helpful?</span>}
+        <button
+          onClick={handleYes}
+          disabled={done}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm border transition-colors disabled:cursor-default ${
+            yesActive
+              ? "bg-green-50 border-green-400 text-green-600 dark:bg-green-900/40 dark:border-green-700 dark:text-green-400"
+              : "border-gray-300 text-gray-500 hover:border-gray-500 hover:text-gray-700 dark:border-gray-600 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-200"
+          }`}
+        >
+          <ThumbsUp size={14} strokeWidth={1.75} />
+          Yes
+        </button>
+        <button
+          onClick={handleNo}
+          disabled={done}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm border transition-colors disabled:cursor-default ${
+            noActive
+              ? "bg-red-50 border-red-400 text-red-600 dark:bg-red-900/40 dark:border-red-700 dark:text-red-400"
+              : "border-gray-300 text-gray-500 hover:border-gray-500 hover:text-gray-700 dark:border-gray-600 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-200"
+          }`}
+        >
+          <ThumbsDown size={14} strokeWidth={1.75} />
+          No
+        </button>
+      </div>
+    </div>
+  )
+}

package/template/components/LastUpdated/LastUpdated.tsx

@@ -0,0 +1,23 @@
+import { Clock } from "lucide-react"
+
+type Props = {
+  date: Date
+  author?: string | null
+}
+
+export function LastUpdated({ date, author }: Props) {
+  const formatted = date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  })
+
+  return (
+    <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+      <Clock size={14} strokeWidth={1.75} />
+      <span>
+        {author ? `Last updated by ${author} on ${formatted}` : formatted}
+      </span>
+    </div>
+  )
+}

package/template/components/Nav/TopNav.tsx

@@ -19,9 +19,10 @@ type Props = {
   currentVersionId: string | null
   currentSlug: string
   versionSlugs: Record<string, string[]>
+  apiRef?: { label: string; href: string; roles: string[] } | null
 }
 
-export function TopNav({ nav, userRoles, userName, authEnabled = false, versions, currentVersionId, currentSlug, versionSlugs }: Props) {
+export function TopNav({ nav, userRoles, userName, authEnabled = false, versions, currentVersionId, currentSlug, versionSlugs, apiRef }: Props) {
   const [openDropdown, setOpenDropdown] = useState<string | null>(null)
   const [drawerOpen, setDrawerOpen] = useState(false)
   const navRef = useRef<HTMLElement>(null)
@@ -108,6 +109,18 @@ export function TopNav({ nav, userRoles, userName, authEnabled = false, versions
           })}
         </div>
 
+        {/* API Reference link */}
+        {apiRef && (apiRef.roles.length === 0 || apiRef.roles.some((r) => userRoles.includes(r))) && (
+          <Link
+            href={apiRef.href}
+            className={`hidden md:block text-sm font-medium transition-colors ${
+              currentSlug.startsWith("/api-reference") ? "text-[var(--cm-oasis-teal)]" : "text-[var(--cm-parchment)] hover:text-[var(--cm-oasis-teal)]"
+            }`}
+          >
+            {apiRef.label}
+          </Link>
+        )}
+
         {/* Right side */}
         <div className="ml-auto flex items-center gap-3">
           <SearchTrigger />

package/template/components/PageNav/PageNav.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import type { NavGroup, NavChild } from "@/lib/nav-types"
+import type { NavGroup } from "@/lib/nav-types"
 
 type PageEntry = { label: string; slug: string }
 
@@ -39,7 +39,7 @@ export function PageNav({ activeGroup, currentSlug }: Props) {
   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">
+    <div className="flex justify-between items-center pt-6 border-t border-gray-200 dark:border-gray-800">
       {prev ? (
         <Link
           href={prev.slug}