+
+ )
+}
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorFallbackProps }
\ No newline at end of file
diff --git a/client-new/components/Features.tsx b/client-new/components/Features.tsx
new file mode 100644
index 0000000..2bad845
--- /dev/null
+++ b/client-new/components/Features.tsx
@@ -0,0 +1,133 @@
+import { ReactNode } from 'react'
+
+interface Feature {
+ icon: string | ReactNode
+ title: string
+ description: string
+ href?: string
+}
+
+interface FeaturesProps {
+ title?: string
+ subtitle?: string
+ features: Feature[]
+ columns?: 2 | 3 | 4
+}
+
+export function Features({ title, subtitle, features, columns = 3 }: FeaturesProps) {
+ const gridCols = {
+ 2: 'grid-cols-1 md:grid-cols-2',
+ 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+ 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+ }
+
+ return (
+
+
+ ⚠️
+ + Something went wrong +
++ We encountered an unexpected error. This has been logged and we'll look into it. +
+ + {error && ( +
+
+ )}
+
+ + Error details +
+
+ {error.message}
+
+
+ {resetError && (
+
+ )}
+
+
+
+ {(title || subtitle) && (
+
+
+ {subtitle && (
+
+ )}
+
+ + {subtitle} +
+ )} + {title && ( ++ {title} +
+ )} +
+ {features.map((feature, index) => (
+
+
+ {icon}
+
+ + {title} +
++ {description} +
+ {href && ( +
+ Learn more →
+
+ )}
+
+ )
+
+ if (href) {
+ return (
+
+ {content}
+
+ )
+ }
+
+ return (
+
+ {content}
+
+ )
+}
+
+interface FeatureHighlightProps {
+ icon: string | ReactNode
+ title: string
+ description: string
+ image?: string
+ reverse?: boolean
+ children?: ReactNode
+}
+
+export function FeatureHighlight({ icon, title, description, image, reverse = false, children }: FeatureHighlightProps) {
+ return (
+
+
+
+
+
+
+
+
+ {icon}
+
+ + {title} +
++ {description} +
+ {children} +
+ {image ? (
+ 
+ ) : (
+
+
+
+ )}
+ {icon}
+
+
+
+ {/* Gradient background effect */}
+
+ {subtitle && (
+
+ + {subtitle} +
+ )} + ++ {title} +
+ + {description && ( ++ {description} +
+ )} + + {children && ( +
+ {children}
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+interface LoadingDotsProps {
+ className?: string
+}
+
+export function LoadingDots({ className = '' }: LoadingDotsProps) {
+ return (
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ )
+}
+
+interface LoadingSkeletonProps {
+ className?: string
+ lines?: number
+}
+
+export function LoadingSkeleton({ className = '', lines = 3 }: LoadingSkeletonProps) {
+ return (
+
+ {Array.from({ length: lines }).map((_, i) => (
+
+ ))}
+
+ )
+}
+
+interface FullPageLoadingProps {
+ message?: string
+}
+
+export function FullPageLoading({ message = 'Loading...' }: FullPageLoadingProps) {
+ return (
+
+
+ )
+}
+
+interface ContentLoadingProps {
+ children: React.ReactNode
+ loading: boolean
+ error?: Error | null
+ fallback?: React.ReactNode
+}
+
+export function ContentLoading({ children, loading, error, fallback }: ContentLoadingProps) {
+ if (error) {
+ return (
+ {message}
+
+
+ )
+ }
+
+ if (loading) {
+ return (
+ + {error.message || 'An error occurred while loading content'} +
+
+ {fallback ||
+ )
+ }
+
+ return <>{children}
+}
\ No newline at end of file
diff --git a/client-new/components/Navigation.tsx b/client-new/components/Navigation.tsx
new file mode 100644
index 0000000..6dea73a
--- /dev/null
+++ b/client-new/components/Navigation.tsx
@@ -0,0 +1,137 @@
+import { ReactNode } from 'react'
+
+interface NavigationCardProps {
+ title: string
+ description: string
+ href: string
+ icon?: string
+ children?: ReactNode
+}
+
+export function NavigationCard({ title, description, href, icon, children }: NavigationCardProps) {
+ return (
+
+
+ {icon && (
+
+
+ )
+}
+
+interface NavigationGridProps {
+ children: ReactNode
+ columns?: 1 | 2 | 3
+}
+
+export function NavigationGrid({ children, columns = 2 }: NavigationGridProps) {
+ const gridCols = {
+ 1: 'grid-cols-1',
+ 2: 'grid-cols-1 md:grid-cols-2',
+ 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+ }
+
+ return (
+
+ {icon}
+
+ )}
+
+
+ + {title} +
++ {description} +
+ {children && ( +
+ {children}
+
+ )}
+
+ →
+
+
+ {children}
+
+ )
+}
+
+interface BreadcrumbProps {
+ items: Array<{
+ label: string
+ href?: string
+ }>
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+ return (
+
+ )
+}
+
+interface NextPrevProps {
+ prev?: {
+ label: string
+ href: string
+ }
+ next?: {
+ label: string
+ href: string
+ }
+}
+
+export function NextPrev({ prev, next }: NextPrevProps) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/client-new/components/Stats.tsx b/client-new/components/Stats.tsx
new file mode 100644
index 0000000..dd5c706
--- /dev/null
+++ b/client-new/components/Stats.tsx
@@ -0,0 +1,108 @@
+interface Stat {
+ label: string
+ value: string | number
+ suffix?: string
+}
+
+interface StatsProps {
+ title?: string
+ subtitle?: string
+ stats: Stat[]
+}
+
+export function Stats({ title, subtitle, stats }: StatsProps) {
+ return (
+
+ {prev && (
+
+ ←
+
+
+
+
+
+ )}
+ Previous
+ {prev.label}
+
+ {next && (
+
+
+
+
+ →
+
+ )}
+ Next
+ {next.label}
+
+ {(title || subtitle) && (
+
+
+ {subtitle && (
+
+ )}
+
+ + {subtitle} +
+ )} + {title && ( ++ {title} +
+ )} +
+ {stats.map((stat, index) => (
+
+
+
+ ))}
+
+ {stat.value}{stat.suffix}
+
+
+ {stat.label}
+
+
+ {(title || subtitle) && (
+
+
+ {subtitle && (
+
+ )}
+
+ + {subtitle} +
+ )} + {title && ( ++ {title} +
+ )} +
+ {/* Vertical line */}
+
+
+ {items.map((item, index) => (
+
+
+ {/* Dot */}
+
+ ))}
+
+ {item.icon && (
+
+
+ {/* Content */}
+
+ {item.icon}
+
+ )}
+
+
+ {item.date}
+ {item.title}
+{item.description}
+
+
+ )
+}
+
+// Alias components for convenience
+export function Info({ children, title }: Omit
+
+
+ {style.icon}
+
+
+ {title && (
+
+ + {title} +
+ )} +
+ {children}
+
+
+ {(filename || title) && (
+
+ )
+}
\ No newline at end of file
diff --git a/client-new/components/mdx/Demo.tsx b/client-new/components/mdx/Demo.tsx
new file mode 100644
index 0000000..3f86ecb
--- /dev/null
+++ b/client-new/components/mdx/Demo.tsx
@@ -0,0 +1,158 @@
+import { useState, ReactNode } from 'react'
+
+interface DemoProps {
+ children: ReactNode
+ title?: string
+ description?: string
+ showCode?: boolean
+ code?: string
+}
+
+export function Demo({ children, title, description, showCode = true, code }: DemoProps) {
+ const [isCodeVisible, setIsCodeVisible] = useState(false)
+
+ return (
+
+
+ {filename || title}
+
+ {language}
+
+ )}
+
+
+
+
+
+
+
+ {showLineNumbers ? (
+
+
+ {lines.map((_, i) => (
+
+ {i + 1}
+
+ ))}
+
+
+ {lines.map((line, i) => (
+
+ {line}
+
+ ))}
+
+
+ ) : (
+ children
+ )}
+
+
+
+ {(title || description) && (
+
+ )
+}
+
+interface PlaygroundProps {
+ children: ReactNode
+ title?: string
+ controls?: ReactNode
+}
+
+export function Playground({ children, title, controls }: PlaygroundProps) {
+ return (
+
+ {title && (
+
+ )}
+
+ + + {title} +
+ )} + {description && ( ++ {description} +
+ )} +
+ {children}
+
+
+ {showCode && code && (
+ <>
+
+
+
+
+ {isCodeVisible && (
+
+
+ )}
+
+ )}
+
+ {code}
+
+
+ {title && (
+
+ )
+}
+
+interface InteractiveExampleProps {
+ initialCode: string
+ onRun: (code: string) => void
+ output?: string
+ language?: string
+}
+
+export function InteractiveExample({
+ initialCode,
+ onRun,
+ output
+}: InteractiveExampleProps) {
+ const [code, setCode] = useState(initialCode)
+ const [isRunning, setIsRunning] = useState(false)
+
+ const handleRun = () => {
+ setIsRunning(true)
+ onRun(code)
+ setIsRunning(false)
+ }
+
+ return (
+
+
+ )}
+
+ {controls && (
+ + + {title} + Interactive +
+
+
+ )}
+
+
+ {controls}
+
+
+ {children}
+
+
+
+
+ Code Editor
+
+
+