create-unmint 1.0.0

package/template/app/components/docs/mdx/index.tsx

@@ -0,0 +1,167 @@
+import type { MDXComponents } from 'mdx/types'
+import Link from 'next/link'
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+
+// Component imports
+import { Card, CardGroup } from './card'
+import { Info, Tip, Warning, Note, Check } from './callout'
+import { Steps, Step } from './steps'
+import { Tabs, Tab } from './tabs'
+import { Accordion, AccordionGroup } from './accordion'
+import { CodeBlock } from './code-block'
+import { Frame } from './frame'
+import { YouTube } from './youtube'
+import { Pre } from './pre'
+
+// Re-export for direct imports
+export { Card, CardGroup } from './card'
+export { Info, Tip, Warning, Note, Check } from './callout'
+export { Steps, Step } from './steps'
+export { Tabs, Tab } from './tabs'
+export { Accordion, AccordionGroup } from './accordion'
+export { CodeBlock } from './code-block'
+export { Frame } from './frame'
+export { YouTube } from './youtube'
+export { Pre } from './pre'
+
+export function getMDXComponents(): MDXComponents {
+  return {
+    // Custom components
+    Card,
+    CardGroup,
+    Info,
+    Tip,
+    Warning,
+    Note,
+    Check,
+    Steps,
+    Step,
+    Tabs,
+    Tab,
+    Accordion,
+    AccordionGroup,
+    CodeBlock,
+    Frame,
+    YouTube,
+
+    // HTML element overrides
+    h1: ({ children, id }) => (
+      <h1 id={id} className="scroll-m-20 text-4xl font-bold tracking-tight mt-8 mb-4 first:mt-0">
+        {children}
+      </h1>
+    ),
+    h2: ({ children, id }) => (
+      <h2 id={id} className="scroll-m-20 text-2xl font-semibold tracking-tight mt-10 mb-4 pb-2 border-b border-border">
+        <a href={`#${id}`} className="hover:underline">
+          {children}
+        </a>
+      </h2>
+    ),
+    h3: ({ children, id }) => (
+      <h3 id={id} className="scroll-m-20 text-xl font-semibold tracking-tight mt-8 mb-4">
+        <a href={`#${id}`} className="hover:underline">
+          {children}
+        </a>
+      </h3>
+    ),
+    h4: ({ children, id }) => (
+      <h4 id={id} className="scroll-m-20 text-lg font-semibold tracking-tight mt-6 mb-4">
+        {children}
+      </h4>
+    ),
+    p: ({ children }) => (
+      <p className="leading-7 text-muted-foreground [&:not(:first-child)]:mt-4">
+        {children}
+      </p>
+    ),
+    a: ({ href, children }) => {
+      const isExternal = href?.startsWith('http')
+      if (isExternal) {
+        return (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[var(--accent)] hover:underline"
+          >
+            {children}
+          </a>
+        )
+      }
+      return (
+        <Link href={href || ''} className="text-[var(--accent)] hover:underline">
+          {children}
+        </Link>
+      )
+    },
+    ul: ({ children }) => (
+      <ul className="my-4 ml-6 list-disc text-muted-foreground [&>li]:mt-2">
+        {children}
+      </ul>
+    ),
+    ol: ({ children }) => (
+      <ol className="my-4 ml-6 list-decimal text-muted-foreground [&>li]:mt-2">
+        {children}
+      </ol>
+    ),
+    li: ({ children }) => <li className="leading-7">{children}</li>,
+    blockquote: ({ children }) => (
+      <blockquote className="mt-6 border-l-4 border-border pl-4 italic text-muted-foreground">
+        {children}
+      </blockquote>
+    ),
+    hr: () => <hr className="my-8 border-border" />,
+    table: ({ children }) => (
+      <div className="my-6 w-full overflow-x-auto">
+        <table className="w-full border-collapse text-sm">
+          {children}
+        </table>
+      </div>
+    ),
+    thead: ({ children }) => (
+      <thead className="bg-gray-50 dark:bg-gray-800">{children}</thead>
+    ),
+    tbody: ({ children }) => (
+      <tbody className="divide-y divide-border">{children}</tbody>
+    ),
+    tr: ({ children }) => <tr>{children}</tr>,
+    th: ({ children }) => (
+      <th className="px-4 py-3 text-left font-semibold text-foreground border-b border-border">
+        {children}
+      </th>
+    ),
+    td: ({ children }) => (
+      <td className="px-4 py-3 text-muted-foreground">{children}</td>
+    ),
+    pre: Pre,
+    code: ({ children, className }) => {
+      // Inline code (no className from syntax highlighter)
+      if (!className) {
+        return (
+          <code className="px-1.5 py-0.5 mx-0.5 rounded-md bg-muted border border-border/50 text-sm font-mono text-foreground">
+            {children}
+          </code>
+        )
+      }
+      // Code block (has className from syntax highlighter)
+      return <code className={className}>{children}</code>
+    },
+    img: ({ src, alt, ...props }) => (
+      <span className="block my-6">
+        <Image
+          src={src || ''}
+          alt={alt || ''}
+          width={800}
+          height={400}
+          className="rounded-lg max-w-full h-auto"
+          {...props}
+        />
+      </span>
+    ),
+    strong: ({ children }) => (
+      <strong className="font-semibold text-foreground">{children}</strong>
+    ),
+    em: ({ children }) => <em className="italic">{children}</em>,
+  }
+}

package/template/app/components/docs/mdx/pre.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
+  children: React.ReactNode
+  'data-language'?: string
+}
+
+export function Pre({ children, className, 'data-language': language, ...props }: PreProps) {
+  const [copied, setCopied] = useState(false)
+  const preRef = useRef<HTMLPreElement>(null)
+
+  const handleCopy = async () => {
+    const code = preRef.current?.textContent
+    if (code) {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  return (
+    <div className="group relative my-6">
+      {/* Container with border and rounded corners */}
+      <div className="relative rounded-lg border border-border bg-muted/30 dark:bg-[#0d0d0f] overflow-hidden">
+        {/* Code content */}
+        <pre
+          ref={preRef}
+          className={cn(
+            'overflow-x-auto p-4 text-sm leading-relaxed',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </pre>
+
+        {/* Copy button - positioned in top right */}
+        <button
+          onClick={handleCopy}
+          className={cn(
+            'absolute top-2 right-2 flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all',
+            'text-muted-foreground hover:text-foreground',
+            'bg-background/80 hover:bg-background border border-border/50',
+            'opacity-0 group-hover:opacity-100',
+            copied && 'opacity-100 text-green-600 dark:text-green-400'
+          )}
+        >
+          {copied ? (
+            <>
+              <CheckIcon className="w-3.5 h-3.5" />
+              Copied
+            </>
+          ) : (
+            <>
+              <CopyIcon className="w-3.5 h-3.5" />
+              Copy
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} 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>
+  )
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  )
+}

package/template/app/components/docs/mdx/steps.tsx

@@ -0,0 +1,59 @@
+import { cn } from '@/lib/utils'
+
+interface StepsProps {
+  children: React.ReactNode
+}
+
+export function Steps({ children }: StepsProps) {
+  return (
+    <div className="my-8 space-y-0 [counter-reset:step]">
+      {children}
+    </div>
+  )
+}
+
+interface StepProps {
+  title: string
+  children: React.ReactNode
+}
+
+export function Step({ title, children }: StepProps) {
+  return (
+    <div className="relative [counter-increment:step] group">
+      {/* Connecting line */}
+      <div className="absolute left-[19px] top-12 bottom-0 w-px bg-gradient-to-b from-border to-transparent group-last:hidden" />
+
+      {/* Step container */}
+      <div className="flex gap-4 pb-8 group-last:pb-0">
+        {/* Step number badge */}
+        <div className="relative flex-shrink-0">
+          <div
+            className={cn(
+              'w-10 h-10 rounded-xl',
+              'flex items-center justify-center',
+              'bg-gradient-to-br from-[var(--accent)] to-[color-mix(in_oklch,var(--accent),black_20%)]',
+              'text-[var(--accent-foreground)] font-semibold text-sm',
+              'shadow-sm shadow-[var(--accent)]/20',
+              'before:content-[counter(step)]'
+            )}
+          />
+        </div>
+
+        {/* Step content */}
+        <div className="flex-1 pt-1.5 min-w-0">
+          <h4 className="font-semibold text-lg text-foreground mb-3 leading-tight">
+            {title}
+          </h4>
+          <div className={cn(
+            'text-muted-foreground leading-relaxed',
+            '[&>p]:mb-4 [&>p:last-child]:mb-0',
+            '[&>pre]:my-4 [&>pre]:rounded-lg [&>pre]:border [&>pre]:border-border/50',
+            '[&>ul]:my-3 [&>ol]:my-3'
+          )}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/app/components/docs/mdx/tabs.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useState, createContext, useContext } from 'react'
+import { cn } from '@/lib/utils'
+
+interface TabsContextValue {
+  activeTab: string
+  setActiveTab: (tab: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null)
+
+interface TabsProps {
+  children: React.ReactNode
+  defaultValue?: string
+}
+
+export function Tabs({ children, defaultValue }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultValue || '')
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className="my-6">{children}</div>
+    </TabsContext.Provider>
+  )
+}
+
+interface TabProps {
+  title: string
+  children: React.ReactNode
+}
+
+export function Tab({ title, children }: TabProps) {
+  const context = useContext(TabsContext)
+  if (!context) return null
+
+  const { activeTab, setActiveTab } = context
+  const isActive = activeTab === title || (!activeTab && title)
+
+  return (
+    <>
+      <button
+        onClick={() => setActiveTab(title)}
+        className={cn(
+          'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+          isActive
+            ? 'border-[var(--accent)] text-[var(--accent)]'
+            : 'border-transparent text-muted-foreground hover:text-foreground'
+        )}
+      >
+        {title}
+      </button>
+      {isActive && (
+        <div className="pt-4 [&>pre]:mt-0">
+          {children}
+        </div>
+      )}
+    </>
+  )
+}

package/template/app/components/docs/mdx/youtube.tsx

@@ -0,0 +1,18 @@
+interface YouTubeProps {
+  id: string
+  title?: string
+}
+
+export function YouTube({ id, title = 'YouTube video' }: YouTubeProps) {
+  return (
+    <div className="my-6 aspect-video rounded-lg overflow-hidden">
+      <iframe
+        src={`https://www.youtube.com/embed/${id}`}
+        title={title}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        className="w-full h-full"
+      />
+    </div>
+  )
+}

package/template/app/components/docs/search-dialog.tsx

@@ -0,0 +1,281 @@
+'use client'
+
+import { useDocsSearch } from 'fumadocs-core/search/client'
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useRouter } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+export function SearchTrigger() {
+  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen(true)
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={cn(
+          'flex items-center gap-3 px-4 py-2.5 rounded-lg w-full max-w-md',
+          'bg-muted/50 border border-border/50',
+          'text-sm text-muted-foreground hover:text-foreground hover:bg-muted hover:border-border',
+          'transition-all'
+        )}
+      >
+        <SearchIcon className="w-4 h-4 shrink-0" />
+        <span className="flex-1 text-left">Search documentation...</span>
+        <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 rounded bg-background/80 text-xs font-mono text-muted-foreground/60 border border-border/40">
+          <span>⌘</span>K
+        </kbd>
+      </button>
+
+      {mounted && open && createPortal(
+        <SearchDialog onClose={() => setOpen(false)} />,
+        document.body
+      )}
+    </>
+  )
+}
+
+interface SearchDialogProps {
+  onClose: () => void
+}
+
+// Highlight matching text in a string
+function HighlightedText({ text, query }: { text: string; query: string }) {
+  if (!query.trim()) {
+    return <>{text}</>
+  }
+
+  const parts = text.split(new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'))
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === query.toLowerCase() ? (
+          <mark key={i} className="bg-yellow-200 dark:bg-yellow-800/50 text-inherit rounded-sm px-0.5">
+            {part}
+          </mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  )
+}
+
+function SearchDialog({ onClose }: SearchDialogProps) {
+  const router = useRouter()
+  const { search, setSearch, query } = useDocsSearch({ type: 'fetch' })
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const resultsRef = useRef<HTMLUListElement>(null)
+
+  const results = query.data && query.data !== 'empty' ? query.data : []
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [results])
+
+  const handleSelect = useCallback(
+    (url: string) => {
+      router.push(url)
+      onClose()
+    },
+    [router, onClose]
+  )
+
+  // Keyboard navigation
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+        return
+      }
+
+      if (results.length === 0) return
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSelectedIndex((prev) => (prev + 1) % results.length)
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSelectedIndex((prev) => (prev - 1 + results.length) % results.length)
+      } else if (e.key === 'Enter') {
+        e.preventDefault()
+        if (results[selectedIndex]) {
+          handleSelect(results[selectedIndex].url)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [onClose, results, selectedIndex, handleSelect])
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (resultsRef.current) {
+      const selectedItem = resultsRef.current.children[selectedIndex] as HTMLElement
+      if (selectedItem) {
+        selectedItem.scrollIntoView({ block: 'nearest' })
+      }
+    }
+  }, [selectedIndex])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [])
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-start justify-center"
+      style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, paddingTop: '10%' }}
+    >
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 dark:bg-black/70"
+        style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div
+        className="relative w-full max-w-2xl mx-4"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="search-dialog-title"
+      >
+        <div className="bg-background border border-border rounded-xl shadow-2xl overflow-hidden">
+          <h2 id="search-dialog-title" className="sr-only">Search documentation</h2>
+          {/* Search input */}
+          <div className="flex items-center gap-3 px-4 border-b border-border">
+            <SearchIcon className="w-5 h-5 text-muted-foreground shrink-0" aria-hidden="true" />
+            <input
+              type="text"
+              aria-label="Search documentation"
+              placeholder="Search..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex-1 py-4 bg-transparent text-foreground placeholder:text-muted-foreground text-base border-none outline-none focus:outline-none focus:ring-0 focus:border-none"
+              style={{ outline: 'none', boxShadow: 'none' }}
+              autoFocus
+            />
+            <kbd className="px-2 py-1 rounded bg-muted text-xs text-muted-foreground font-mono border border-border">
+              ESC
+            </kbd>
+          </div>
+
+          {/* Results */}
+          <div className="max-h-[60vh] overflow-y-auto">
+            {search.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                <p>Start typing to search...</p>
+              </div>
+            ) : query.isLoading ? (
+              <div className="p-8 text-center text-muted-foreground">
+                <p>Searching...</p>
+              </div>
+            ) : results.length > 0 ? (
+              <ul ref={resultsRef} className="py-2">
+                {results.map((result, index) => {
+                  // Build breadcrumb path
+                  const breadcrumbPath = result.breadcrumbs && result.breadcrumbs.length > 0
+                    ? `Documentation > ${result.breadcrumbs.join(' > ')}`
+                    : 'Documentation'
+
+                  return (
+                    <li key={result.id}>
+                      <button
+                        type="button"
+                        onClick={() => handleSelect(result.url)}
+                        onMouseEnter={() => setSelectedIndex(index)}
+                        className={cn(
+                          'w-full px-4 py-3 text-left transition-colors focus:outline-none',
+                          selectedIndex === index
+                            ? 'bg-gray-100 dark:bg-gray-800'
+                            : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+                        )}
+                      >
+                        {/* Title */}
+                        <div className="font-semibold text-foreground">
+                          <HighlightedText text={result.content} query={search} />
+                        </div>
+                        {/* Breadcrumb path */}
+                        <div className="text-sm text-muted-foreground mt-0.5">
+                          {breadcrumbPath}
+                        </div>
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+            ) : (
+              <div className="p-8 text-center text-muted-foreground">
+                <p>No results found for &quot;{search}&quot;</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer with keyboard hints */}
+          {results.length > 0 && (
+            <div className="flex items-center gap-4 px-4 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border font-mono">↑</kbd>
+                <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border font-mono">↓</kbd>
+                <span className="ml-1">to navigate</span>
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border font-mono">↵</kbd>
+                <span className="ml-1">to select</span>
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border font-mono">esc</kbd>
+                <span className="ml-1">to close</span>
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  )
+}