@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/docs/callout.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { cn } from '../utils'
+import {
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  Lightbulb,
+  Rocket,
+  Sparkles,
+  Terminal,
+} from 'lucide-react'
+import React from 'react'
+
+type CalloutType =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'example'
+  | 'terminal'
+
+interface CalloutProps {
+  type?: CalloutType
+  title?: string
+  children: React.ReactNode
+  className?: string
+}
+
+const calloutConfig: Record<
+  CalloutType,
+  {
+    icon: React.ComponentType<{ className?: string }>
+    bgClass: string
+    borderClass: string
+    iconClass: string
+    titleClass: string
+    defaultTitle: string
+  }
+> = {
+  note: {
+    icon: Info,
+    bgClass: 'bg-blue-500/5',
+    borderClass: 'border-l-blue-500',
+    iconClass: 'text-blue-500',
+    titleClass: 'text-blue-600 dark:text-blue-400',
+    defaultTitle: 'Note',
+  },
+  tip: {
+    icon: Lightbulb,
+    bgClass: 'bg-emerald-500/5',
+    borderClass: 'border-l-emerald-500',
+    iconClass: 'text-emerald-500',
+    titleClass: 'text-emerald-600 dark:text-emerald-400',
+    defaultTitle: 'Tip',
+  },
+  info: {
+    icon: Sparkles,
+    bgClass: 'bg-brand-purple/5',
+    borderClass: 'border-l-brand-purple',
+    iconClass: 'text-brand-purple',
+    titleClass: 'text-brand-purple',
+    defaultTitle: 'Info',
+  },
+  warning: {
+    icon: AlertTriangle,
+    bgClass: 'bg-amber-500/5',
+    borderClass: 'border-l-amber-500',
+    iconClass: 'text-amber-500',
+    titleClass: 'text-amber-600 dark:text-amber-400',
+    defaultTitle: 'Warning',
+  },
+  danger: {
+    icon: AlertCircle,
+    bgClass: 'bg-red-500/5',
+    borderClass: 'border-l-red-500',
+    iconClass: 'text-red-500',
+    titleClass: 'text-red-600 dark:text-red-400',
+    defaultTitle: 'Danger',
+  },
+  example: {
+    icon: Rocket,
+    bgClass: 'bg-brand-pink/5',
+    borderClass: 'border-l-brand-pink',
+    iconClass: 'text-brand-pink',
+    titleClass: 'text-brand-pink',
+    defaultTitle: 'Example',
+  },
+  terminal: {
+    icon: Terminal,
+    bgClass: 'bg-zinc-500/5',
+    borderClass: 'border-l-zinc-500',
+    iconClass: 'text-zinc-500',
+    titleClass: 'text-zinc-600 dark:text-zinc-400',
+    defaultTitle: 'Terminal',
+  },
+}
+
+export function Callout({
+  type = 'note',
+  title,
+  children,
+  className,
+}: CalloutProps) {
+  const config = calloutConfig[type]
+  const Icon = config.icon
+  const displayTitle = title || config.defaultTitle
+
+  return (
+    <div
+      className={cn(
+        'my-6 rounded-lg border-l-4 p-4',
+        config.bgClass,
+        config.borderClass,
+        className
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <Icon className={cn('h-5 w-5 mt-0.5 shrink-0', config.iconClass)} />
+        <div className="flex-1 min-w-0">
+          <p className={cn('font-semibold text-sm mb-1', config.titleClass)}>
+            {displayTitle}
+          </p>
+          <div className="text-sm text-muted-foreground [&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Inline badge variant for smaller callouts
+export function CalloutBadge({
+  type = 'note',
+  children,
+}: {
+  type?: CalloutType
+  children: React.ReactNode
+}) {
+  const config = calloutConfig[type]
+  const Icon = config.icon
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium',
+        config.bgClass,
+        config.titleClass
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      {children}
+    </span>
+  )
+}
+
+export type { CalloutType, CalloutProps }
+

package/src/docs/code-group.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { cn } from "cn"
+import { localStore } from "../lib/storage"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../shadcn/tabs"
+import React, { createContext, useContext, useEffect, useState, useMemo } from 'react'
+import { CodeBlock as MarkdownCodeBlock } from '../components/code-block/code-block'
+
+// =============================================================================
+// Language Sync Context
+// =============================================================================
+
+const STORAGE_KEY = 'docs-preferred-language'
+
+type LanguageSyncContextValue = {
+    language: string
+    setLanguage: (lang: string) => void
+}
+
+const LanguageSyncContext = createContext<LanguageSyncContextValue | null>(null)
+
+export function LanguageSyncProvider({ children }: { children: React.ReactNode }) {
+    const [language, setLanguageState] = useState('python')
+
+    useEffect(() => {
+        const stored = localStore.getItem(STORAGE_KEY)
+        if (stored) setLanguageState(stored)
+    }, [])
+
+    const setLanguage = (lang: string) => {
+        setLanguageState(lang)
+        localStore.setItem(STORAGE_KEY, lang)
+    }
+
+    return (
+        <LanguageSyncContext.Provider value={{ language, setLanguage }}>
+            {children}
+        </LanguageSyncContext.Provider>
+    )
+}
+
+export function useLanguageSync() {
+    return useContext(LanguageSyncContext)
+}
+
+// =============================================================================
+// CodeGroup Component
+// =============================================================================
+
+interface CodeBlockInfo {
+    id: string
+    language: string
+    title: string
+    code: string
+}
+
+function extractCodeBlocks(children: React.ReactNode): CodeBlockInfo[] {
+    const blocks: CodeBlockInfo[] = []
+
+    // Helper to get text content from any node
+    const getTextContent = (node: React.ReactNode): string => {
+        if (typeof node === 'string') return node
+        if (typeof node === 'number') return String(node)
+        if (!node) return ''
+        if (Array.isArray(node)) return node.map(getTextContent).join('')
+        if (React.isValidElement(node)) {
+            return getTextContent((node.props as { children?: React.ReactNode }).children)
+        }
+        return ''
+    }
+
+    const processElement = (child: React.ReactNode) => {
+        if (!React.isValidElement(child)) return
+
+        // Get element type name (works for both string tags and components)
+        const typeName = typeof child.type === 'string'
+            ? child.type
+            : (child.type as React.ComponentType)?.displayName ||
+            (child.type as React.FC)?.name ||
+            ''
+
+        const props = child.props as Record<string, unknown>
+
+        // Handle MarkdownCodeBlock components (from react-markdown's pre handler)
+        if (typeName === 'MarkdownCodeBlock' || typeName.includes('CodeBlock')) {
+            const language = (props.language as string) || 'text'
+            const meta = props['data-meta'] as string | undefined
+            const code = getTextContent(props.children as React.ReactNode)
+            const title = meta || (language.charAt(0).toUpperCase() + language.slice(1))
+            const id = `block-${blocks.length}`
+            blocks.push({ id, language, title, code: code.trim() })
+            return
+        }
+
+        // Handle <pre> elements with <code> children
+        if (typeName === 'pre' || child.type === 'pre') {
+            const preChildren = React.Children.toArray(props.children as React.ReactNode)
+
+            for (const codeChild of preChildren) {
+                if (React.isValidElement(codeChild)) {
+                    const codeTypeName = typeof codeChild.type === 'string'
+                        ? codeChild.type
+                        : (codeChild.type as React.ComponentType)?.displayName ||
+                        (codeChild.type as React.FC)?.name ||
+                        ''
+
+                    if (codeTypeName === 'code' || codeChild.type === 'code') {
+                        const codeProps = codeChild.props as { className?: string; children?: React.ReactNode; 'data-meta'?: string }
+                        const className = codeProps.className || ''
+                        const langMatch = /language-(\w+)/.exec(className)
+                        const language = langMatch?.[1] || 'text'
+                        const meta = codeProps['data-meta']
+                        const code = getTextContent(codeProps.children)
+                        const title = meta || (language.charAt(0).toUpperCase() + language.slice(1))
+                        const id = `block-${blocks.length}`
+                        blocks.push({ id, language, title, code: code.trim() })
+                    }
+                }
+            }
+            return // Don't recurse into pre
+        }
+
+        // Handle divs that contain language info in className (common wrapper pattern)
+        if ((typeName === 'div' || child.type === 'div') && props.className) {
+            const className = String(props.className)
+            // Look for code blocks within this div
+        }
+
+        // Recurse into divs and other containers
+        if (props.children) {
+            React.Children.forEach(props.children as React.ReactNode, processElement)
+        }
+    }
+
+    React.Children.forEach(children, processElement)
+    return blocks
+}
+
+// Map common language names to canonical form
+function normalizeLanguageName(lang: string): string {
+    const normalized = lang.toLowerCase()
+    if (normalized === 'typescript' || normalized === 'ts' || normalized === 'javascript' || normalized === 'js') {
+        return 'javascript'
+    }
+    if (normalized === 'py') return 'python'
+    if (normalized === 'sh' || normalized === 'shell') return 'bash'
+    return normalized
+}
+
+export interface CodeGroupProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CodeGroup({ children, className }: CodeGroupProps) {
+    const languageSync = useLanguageSync()
+    const blocks = useMemo(() => extractCodeBlocks(children), [children])
+
+    // Determine which tab should be active
+    const [localValue, setLocalValue] = useState<string | undefined>()
+
+    // Find matching tab from synced language preference
+    const syncedValue = useMemo(() => {
+        if (!languageSync?.language) return undefined
+        const normalizedPref = normalizeLanguageName(languageSync.language)
+        const match = blocks.find(b => normalizeLanguageName(b.language) === normalizedPref)
+        return match?.id
+    }, [languageSync?.language, blocks])
+
+    const activeValue = localValue || syncedValue || blocks[0]?.id
+
+    const handleValueChange = (value: string) => {
+        setLocalValue(value)
+        // Sync the language (not the id) so other code groups on the page follow
+        const block = blocks.find(b => b.id === value)
+        if (block && languageSync) {
+            languageSync.setLanguage(block.language)
+        }
+    }
+
+    if (blocks.length === 0) {
+        return <div className={className}><span>{children}</span></div>
+    }
+
+    if (blocks.length === 1) {
+        return (
+            <MarkdownCodeBlock language={blocks[0].language} className={className} textSize="text-xs">
+                {blocks[0].code}
+            </MarkdownCodeBlock>
+        )
+    }
+
+    return (
+        <Tabs value={activeValue} onValueChange={handleValueChange} className={cn('my-6 gap-0', className)}>
+            <TabsList className="mb-0 rounded-b-none border-b-0">
+                {blocks.map((block) => (
+                    <TabsTrigger key={block.id} value={block.id} className="text-xs">
+                        {block.title}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {blocks.map((block) => (
+                <TabsContent key={block.id} value={block.id} className="mt-0">
+                    <MarkdownCodeBlock
+                        language={block.language}
+                        showHeader={false}
+                        className="rounded-t-none border-t-0 my-0"
+                    >
+                        <code>{block.code}</code>
+                    </MarkdownCodeBlock>
+                </TabsContent>
+            ))}
+        </Tabs>
+    )
+}

package/src/docs/copy-menu.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import { Button } from "../components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../shadcn/dropdown-menu"
+import { cn } from "cn"
+import { Check, ChevronDown, Copy, FileText, MessageSquare, Type } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+interface CopyMenuProps {
+  title: string
+  content: string
+  url?: string
+  className?: string
+}
+
+// Convert markdown to plain text
+function markdownToPlainText(markdown: string): string {
+  return markdown
+    // Remove code blocks
+    .replace(/```[\s\S]*?```/g, (match) => {
+      const code = match.replace(/```\w*\n?/g, '').replace(/```/g, '')
+      return code.trim()
+    })
+    // Remove inline code
+    .replace(/`([^`]+)`/g, '$1')
+    // Remove images
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1')
+    // Convert links to text
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    // Remove bold/italic
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    .replace(/_([^_]+)_/g, '$1')
+    // Remove headers but keep text
+    .replace(/^#{1,6}\s+/gm, '')
+    // Remove blockquotes
+    .replace(/^>\s+/gm, '')
+    // Remove horizontal rules
+    .replace(/^---+$/gm, '')
+    // Remove list markers
+    .replace(/^[\s]*[-*+]\s+/gm, '• ')
+    .replace(/^[\s]*\d+\.\s+/gm, '')
+    // Clean up extra whitespace
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+// Format content for LLMs (structured markdown with metadata)
+function formatForLLM(title: string, content: string, url?: string): string {
+  const header = `# ${title}\n`
+  const urlLine = url ? `Source: ${url}\n\n` : '\n'
+  return header + urlLine + content
+}
+
+export function CopyMenu({ title, content, url, className }: CopyMenuProps) {
+  const [copied, setCopied] = useState<string | null>(null)
+
+  const handleCopy = async (type: 'page' | 'markdown' | 'plaintext') => {
+    let textToCopy: string
+
+    switch (type) {
+      case 'page':
+        textToCopy = formatForLLM(title, content, url)
+        break
+      case 'markdown':
+        textToCopy = content
+        break
+      case 'plaintext':
+        textToCopy = markdownToPlainText(content)
+        break
+    }
+
+    try {
+      await navigator.clipboard.writeText(textToCopy)
+      setCopied(type)
+      toast.success('copied to clipboard', {
+        description: type === 'page'
+          ? 'page copied with title and url'
+          : type === 'markdown'
+            ? 'markdown content copied'
+            : 'plain text copied',
+      })
+      setTimeout(() => setCopied(null), 2000)
+    } catch {
+      toast.error('failed to copy')
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" size="sm" className={cn('gap-2 text-xs text-muted-foreground hover:text-foreground cursor-pointer', className)} />}>
+          <Copy className="h-4 w-4" />
+          copy page
+          <ChevronDown className="h-3 w-3 opacity-50" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuItem onClick={() => handleCopy('page')} className="gap-3 cursor-pointer">
+          <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          <div className="flex flex-col gap-0.5">
+            <span className="font-medium">copy page</span>
+            <span className="text-xs text-muted-foreground">
+              copy as markdown for llms
+            </span>
+          </div>
+          {copied === 'page' && <Check className="h-4 w-4 ml-auto text-brand-green" />}
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem onClick={() => handleCopy('markdown')} className="gap-3 cursor-pointer">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <div className="flex flex-col gap-0.5">
+            <span>copy as markdown</span>
+            <span className="text-xs text-muted-foreground">
+              raw markdown content
+            </span>
+          </div>
+          {copied === 'markdown' && <Check className="h-4 w-4 ml-auto text-brand-green" />}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={() => handleCopy('plaintext')} className="gap-3 cursor-pointer">
+          <Type className="h-4 w-4 text-muted-foreground" />
+          <div className="flex flex-col gap-0.5">
+            <span>copy as plain text</span>
+            <span className="text-xs text-muted-foreground">
+              no formatting
+            </span>
+          </div>
+          {copied === 'plaintext' && <Check className="h-4 w-4 ml-auto text-brand-green" />}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+

package/src/docs/doc-tabs.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { cn } from "cn"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../shadcn/tabs"
+import React, { useMemo, useState } from 'react'
+
+// =============================================================================
+// DocsTabs Component
+// =============================================================================
+
+interface TabInfo {
+    title: string
+    children: React.ReactNode
+}
+
+function extractTabs(children: React.ReactNode): TabInfo[] {
+    const tabs: TabInfo[] = []
+
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) return
+
+        // Check for <tab> or <Tab> elements
+        const type = child.type
+        const typeName = typeof type === 'string' ? type.toLowerCase() : ''
+
+        if (typeName === 'tab' || (typeof type === 'function' && (type as React.FC).displayName === 'DocsTab')) {
+            const props = child.props as { title?: string; children?: React.ReactNode }
+            const title = props.title || 'Tab'
+            tabs.push({ title, children: props.children })
+        }
+    })
+
+    return tabs
+}
+
+export interface DocsTabsProps {
+    children: React.ReactNode
+    className?: string
+    defaultValue?: string
+}
+
+export function DocsTabs({ children, className, defaultValue }: DocsTabsProps) {
+    const tabs = useMemo(() => extractTabs(children), [children])
+    const [value, setValue] = useState(defaultValue || tabs[0]?.title || '')
+
+    if (tabs.length === 0) {
+        return <div className={className}><span>{children}</span></div>
+    }
+
+    return (
+        <Tabs value={value} onValueChange={setValue} className={cn('my-6', className)}>
+            <TabsList>
+                {tabs.map((tab, i) => (
+                    <TabsTrigger key={i} value={tab.title} className="text-sm">
+                        {tab.title}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {tabs.map((tab, i) => (
+                <TabsContent key={i} value={tab.title} className="mt-4">
+                    <div className="prose prose-sm dark:prose-invert max-w-none">
+                        {tab.children}
+                    </div>
+                </TabsContent>
+            ))}
+        </Tabs>
+    )
+}
+
+// =============================================================================
+// DocsTab Component (individual tab)
+// =============================================================================
+
+export interface DocsTabProps {
+    title: string
+    children: React.ReactNode
+}
+
+export function DocsTab({ children }: DocsTabProps) {
+    // This component is just a marker - actual rendering happens in DocsTabs
+    return <>{children}</>
+}
+
+DocsTab.displayName = 'DocsTab'

package/src/docs/index.ts

@@ -0,0 +1,16 @@
+// Documentation rendering components
+// Shared between app and web
+
+export { TableOfContents } from './table-of-contents'
+export type { TocItem } from './table-of-contents'
+
+export { ApiDocs, DEFAULT_LANGUAGE, useApiDocsLanguage } from './api-docs'
+export type { ApiDocsProps, ApiDocsApp, ApiDocsVersion, ApiDocsFormData, Language } from './api-docs'
+export { Callout, CalloutBadge } from './callout'
+export { CopyMenu } from './copy-menu'
+export type { CalloutType, CalloutProps } from './callout'
+
+// New docs components
+export { CodeGroup, LanguageSyncProvider, useLanguageSync } from './code-group'
+export { DocsTabs, DocsTab } from './doc-tabs'
+export { Steps, Step } from './steps'