[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Text manipulation web app *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/isaac-dcsares-projects/v0-text-manipulation-web-app) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/goLpqcK60zG) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/isaac-dcsares-projects/v0-text-manipulation-web-app](https://vercel.com/isaac-dcsares-projects/v0-text-manipulation-web-app)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/goLpqcK60zG](https://v0.app/chat/projects/goLpqcK60zG)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/chain/page.tsx" isMerged="true" "use client" import * as React from "react" import { SidebarProvider } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" import { AppHeader } from "@/components/app-header" import { TextInput } from "@/components/text-input" import { TextOutput } from "@/components/text-output" import { ChainBuilder } from "@/components/chain-builder" import { SavedChains } from "@/components/saved-chains" import { Card, CardContent } from "@/components/ui/card" import { Toaster } from "@/components/ui/toaster" import { useToast } from "@/hooks/use-toast" import { useLocalStorage } from "@/hooks/use-local-storage" import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts" import type { ChainStep, Chain } from "@/lib/chain/types" import { executeChain } from "@/lib/chain/engine" export default function ChainPage() { const { toast } = useToast() const [favorites, setFavorites] = useLocalStorage("texttools-favorites", []) const [recent, setRecent] = useLocalStorage("texttools-recent", []) const [savedChains, setSavedChains] = useLocalStorage("texttools-chains", []) const [searchQuery, setSearchQuery] = React.useState("") const [inputValue, setInputValue] = React.useState("") const [outputValue, setOutputValue] = React.useState("") const [chainSteps, setChainSteps] = React.useState([]) const handleExecuteChain = () => { if (!inputValue || chainSteps.length === 0) { toast({ title: "Cannot execute", description: "Please provide input text and add at least one step", variant: "destructive", }) return } try { const result = executeChain(inputValue, chainSteps) setOutputValue(result) toast({ title: "Chain executed", description: `Successfully processed through ${chainSteps.length} steps`, }) } catch (error) { toast({ title: "Execution failed", description: error instanceof Error ? error.message : "Unknown error", variant: "destructive", }) } } const handleSaveChain = (name: string) => { const newChain: Chain = { id: crypto.randomUUID(), name, steps: chainSteps, createdAt: Date.now(), } setSavedChains((prev) => [...prev, newChain]) toast({ title: "Chain saved", description: `"${name}" has been saved`, }) } const handleLoadChain = (chain: Chain) => { setChainSteps(chain.steps) toast({ title: "Chain loaded", description: `"${chain.name}" loaded with ${chain.steps.length} steps`, }) } const handleDeleteChain = (id: string) => { setSavedChains((prev) => prev.filter((chain) => chain.id !== id)) toast({ title: "Chain deleted", }) } const handleToolSelect = () => { // Placeholder for sidebar compatibility } useKeyboardShortcuts({ "ctrl+enter": handleExecuteChain, "meta+enter": handleExecuteChain, "ctrl+k": () => { const searchInput = document.querySelector('input[placeholder="Search tools..."]') as HTMLInputElement searchInput?.focus() }, "meta+k": () => { const searchInput = document.querySelector('input[placeholder="Search tools..."]') as HTMLInputElement searchInput?.focus() }, }) return (

Tool Chaining

Create pipelines by combining multiple tools in sequence. Each tool processes the output of the previous one.

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match dark developer tool aesthetic */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.55 0.18 250); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.94 0 0); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.55 0.18 250); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0 0); --input: oklch(0.9 0 0); --ring: oklch(0.55 0.18 250); --chart-1: oklch(0.55 0.18 250); --chart-2: oklch(0.6 0.15 200); --chart-3: oklch(0.65 0.12 150); --chart-4: oklch(0.7 0.1 100); --chart-5: oklch(0.75 0.08 50); --radius: 0.5rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.15 0 0); --sidebar-primary: oklch(0.55 0.18 250); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.94 0 0); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0.55 0.18 250); } .dark { /* Dark theme matching Vercel/developer tool aesthetic */ --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.13 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.13 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.6 0.2 250); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.6 0.2 250); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.6 0.2 250); --chart-1: oklch(0.6 0.2 250); --chart-2: oklch(0.65 0.18 200); --chart-3: oklch(0.7 0.15 150); --chart-4: oklch(0.75 0.12 100); --chart-5: oklch(0.8 0.1 50); --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.6 0.2 250); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.18 0 0); --sidebar-ring: oklch(0.6 0.2 250); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Adding smooth animations and transitions */ @layer utilities { .animate-in { animation: animate-in 0.2s ease-out; } .animate-out { animation: animate-out 0.15s ease-in; } @keyframes animate-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes animate-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .transition-smooth { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .transition-colors-smooth { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } } [V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import * as React from "react" import { useSearchParams } from "next/navigation" import { SidebarProvider } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" import { AppHeader } from "@/components/app-header" import { ToolWorkspace } from "@/components/tool-workspace" import { ToolOptions } from "@/components/tool-options" import { BatchProcessor } from "@/components/batch-processor" import { ShareDialog } from "@/components/share-dialog" import { Toaster } from "@/components/ui/toaster" import { getToolById } from "@/lib/tools" import { useLocalStorage } from "@/hooks/use-local-storage" import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function HomePage() { const searchParams = useSearchParams() const [selectedTool, setSelectedTool] = React.useState(null) const [favorites, setFavorites] = useLocalStorage("texttools-favorites", []) const [recent, setRecent] = useLocalStorage("texttools-recent", []) const [searchQuery, setSearchQuery] = React.useState("") const [inputValue, setInputValue] = React.useState("") const [outputValue, setOutputValue] = React.useState("") const [toolOptions, setToolOptions] = React.useState>({}) const currentTool = selectedTool ? getToolById(selectedTool) : null React.useEffect(() => { const sharedTool = searchParams.get("tool") const sharedInput = searchParams.get("input") const sharedOptions = searchParams.get("options") if (sharedTool) { setSelectedTool(sharedTool) if (sharedInput) setInputValue(sharedInput) if (sharedOptions) { try { setToolOptions(JSON.parse(sharedOptions)) } catch (e) { console.error("Failed to parse shared options", e) } } } }, [searchParams]) React.useEffect(() => { if (currentTool?.options) { const defaults: Record = {} currentTool.options.forEach((opt) => { defaults[opt.id] = opt.defaultValue }) setToolOptions(defaults) } else { setToolOptions({}) } }, [currentTool]) const handleToolSelect = (tool: string) => { setSelectedTool(tool) setInputValue("") setOutputValue("") // Add to recent (avoid duplicates) setRecent((prev) => { const filtered = prev.filter((t) => t !== tool) return [tool, ...filtered].slice(0, 10) }) } const handleToggleFavorite = () => { if (!selectedTool) return setFavorites((prev) => { if (prev.includes(selectedTool)) { return prev.filter((t) => t !== selectedTool) } else { return [...prev, selectedTool] } }) } const handleExecute = () => { if (!currentTool) return try { const result = currentTool.execute(inputValue, toolOptions) setOutputValue(result) } catch (error) { setOutputValue(`Error: ${error instanceof Error ? error.message : "Unknown error"}`) } } useKeyboardShortcuts({ "ctrl+k": () => { const searchInput = document.querySelector('input[placeholder="Search tools..."]') as HTMLInputElement searchInput?.focus() }, "meta+k": () => { const searchInput = document.querySelector('input[placeholder="Search tools..."]') as HTMLInputElement searchInput?.focus() }, "ctrl+enter": () => { if (currentTool && !currentTool.autoExecute) { handleExecute() } }, "meta+enter": () => { if (currentTool && !currentTool.autoExecute) { handleExecute() } }, }) return (

{currentTool ? (

{currentTool.name}

{currentTool.description}

Single Batch {currentTool.options && currentTool.options.length > 0 && ( )} {currentTool.options && currentTool.options.length > 0 && (

Tool Options

)}

) : (

Welcome to TextTools

Select a tool from the sidebar to get started

Privacy First

All processing happens in your browser

Tool Chaining

Combine multiple tools in sequence

Batch Processing

Process multiple files at once

)}

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/app-footer.tsx" isMerged="true" import Link from "next/link" export function AppFooter() { return ( ) } [V0_FILE]typescriptreact:file="components/app-header.tsx" isMerged="true" "use client" import { Moon, Sun, Menu, Github, Link2 } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { SidebarTrigger } from "@/components/ui/sidebar" import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog" import NextLink from "next/link" import { usePathname } from "next/navigation" export function AppHeader() { const { theme, setTheme } = useTheme() const pathname = usePathname() return (

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true" "use client" import * as React from "react" import { Search, Star, Clock, Type, Code, Hash, Shuffle, ArrowUpDown, Sparkles, ChevronDown } from "lucide-react" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarHeader, SidebarFooter, } from "@/components/ui/sidebar" import { Input } from "@/components/ui/input" export type ToolCategory = { name: string icon: React.ComponentType<{ className?: string }> tools: string[] } export const toolCategories: ToolCategory[] = [ { name: "Case & Format", icon: Type, tools: ["uppercase", "lowercase", "titlecase", "camelcase", "snakecase", "kebabcase"], }, { name: "Transform", icon: Shuffle, tools: ["trim", "reverse", "sort", "unique", "shuffle"], }, { name: "Encode & Decode", icon: Code, tools: ["base64-encode", "base64-decode", "url-encode", "url-decode", "html-encode", "html-decode"], }, { name: "Analysis", icon: Hash, tools: ["word-count", "char-count", "line-count", "frequency"], }, { name: "Modify", icon: ArrowUpDown, tools: ["prefix", "suffix", "find-replace", "remove-lines"], }, { name: "Generate", icon: Sparkles, tools: ["lorem-ipsum", "random-string", "uuid"], }, ] interface AppSidebarProps { selectedTool: string | null onToolSelect: (tool: string) => void favorites: string[] recent: string[] searchQuery: string onSearchChange: (query: string) => void } export function AppSidebar({ selectedTool, onToolSelect, favorites, recent, searchQuery, onSearchChange, }: AppSidebarProps) { const [expandedCategories, setExpandedCategories] = React.useState(toolCategories.map((cat) => cat.name)) const toggleCategory = (categoryName: string) => { setExpandedCategories((prev) => prev.includes(categoryName) ? prev.filter((name) => name !== categoryName) : [...prev, categoryName], ) } const filteredCategories = React.useMemo(() => { if (!searchQuery) return toolCategories return toolCategories .map((category) => ({ ...category, tools: category.tools.filter((tool) => tool.toLowerCase().includes(searchQuery.toLowerCase())), })) .filter((category) => category.tools.length > 0) }, [searchQuery]) return (

TextTools

Modern text utilities

onSearchChange(e.target.value)} />

{favorites.length > 0 && ( Favorites {favorites.map((tool) => ( onToolSelect(tool)} isActive={selectedTool === tool} className="transition-smooth hover:translate-x-1 text-xs sm:text-sm" > {tool} ))} )} {recent.length > 0 && ( Recent {recent.slice(0, 5).map((tool) => ( onToolSelect(tool)} isActive={selectedTool === tool} className="transition-smooth hover:translate-x-1 text-xs sm:text-sm" > {tool} ))} )} {filteredCategories.map((category) => { const Icon = category.icon const isExpanded = expandedCategories.includes(category.name) return ( toggleCategory(category.name)} > {category.name} {isExpanded && ( {category.tools.map((tool) => ( onToolSelect(tool)} isActive={selectedTool === tool} className="transition-smooth hover:translate-x-1 text-xs sm:text-sm" > {tool} ))} )} ) })}

Privacy-first • Client-side processing

) } [V0_FILE]typescriptreact:file="components/batch-processor.tsx" isMerged="true" "use client" import * as React from "react" import { Upload, Download, Trash2, Play } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" import type { ToolConfig } from "@/lib/tools" interface BatchFile { id: string name: string content: string output?: string status: "pending" | "processing" | "complete" | "error" error?: string } interface BatchProcessorProps { tool: ToolConfig options: Record } export function BatchProcessor({ tool, options }: BatchProcessorProps) { const { toast } = useToast() const [files, setFiles] = React.useState([]) const fileInputRef = React.useRef(null) const handleFileUpload = (event: React.ChangeEvent) => { const uploadedFiles = Array.from(event.target.files || []) if (uploadedFiles.length === 0) { return } const maxSize = 10 * 1024 * 1024 // 10MB const oversizedFiles = uploadedFiles.filter((f) => f.size > maxSize) if (oversizedFiles.length > 0) { toast({ title: "Files too large", description: `${oversizedFiles.length} file(s) exceed 10MB limit`, variant: "destructive", }) return } uploadedFiles.forEach((file) => { const reader = new FileReader() reader.onerror = () => { toast({ title: "Error reading file", description: `Failed to read ${file.name}`, variant: "destructive", }) } reader.onload = (e) => { try { const content = e.target?.result as string const newFile: BatchFile = { id: crypto.randomUUID(), name: file.name, content, status: "pending", } setFiles((prev) => [...prev, newFile]) } catch (error) { toast({ title: "Error processing file", description: `Failed to process ${file.name}`, variant: "destructive", }) } } reader.readAsText(file) }) toast({ title: "Files loaded", description: `${uploadedFiles.length} file(s) ready for processing`, }) } const processBatch = async () => { if (files.length === 0) return toast({ title: "Processing batch", description: `Processing ${files.length} file(s)...`, }) for (const file of files) { setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...f, status: "processing" as const } : f))) try { if (!tool.execute || typeof tool.execute !== "function") { throw new Error("Invalid tool configuration") } const output = tool.execute(file.content, options || {}) setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...f, output, status: "complete" as const } : f))) } catch (error) { setFiles((prev) => prev.map((f) => f.id === file.id ? { ...f, status: "error" as const, error: error instanceof Error ? error.message : "Unknown error", } : f, ), ) } await new Promise((resolve) => setTimeout(resolve, 100)) } toast({ title: "Batch complete", description: "All files have been processed", }) } const downloadAll = () => { const completedFiles = files.filter((f) => f.status === "complete" && f.output) if (completedFiles.length === 0) { toast({ title: "No files to download", variant: "destructive", }) return } try { completedFiles.forEach((file) => { const blob = new Blob([file.output!], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `processed-${file.name}` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) }) toast({ title: "Downloaded", description: `${completedFiles.length} file(s) downloaded`, }) } catch (error) { toast({ title: "Download failed", description: "Failed to download files", variant: "destructive", }) } } const clearAll = () => { setFiles([]) } return (

Batch Processing

{files.length === 0 ? (

No files uploaded. Click "Upload Files" to get started.

) : ( <>

{files.map((file) => (

{file.name}

{file.status === "pending" && "Pending"} {file.status === "processing" && "Processing..."} {file.status === "complete" && "Complete"} {file.status === "error" && `Error: ${file.error}`}

))}

)} ) } [V0_FILE]typescriptreact:file="components/chain-builder.tsx" isMerged="true" "use client" import * as React from "react" import { Plus, X, GripVertical, Play, Save, AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { chainableTools, getToolById } from "@/lib/tools" import type { ChainStep } from "@/lib/chain/types" import { ToolOptions } from "@/components/tool-options" import { useToast } from "@/hooks/use-toast" interface ChainBuilderProps { steps: ChainStep[] onChange: (steps: ChainStep[]) => void onExecute: () => void onSave?: (name: string) => void } export function ChainBuilder({ steps, onChange, onExecute, onSave }: ChainBuilderProps) { const { toast } = useToast() const [chainName, setChainName] = React.useState("") const [showSaveDialog, setShowSaveDialog] = React.useState(false) const [error, setError] = React.useState(null) const addStep = () => { if (chainableTools.length === 0) { toast({ title: "No tools available", description: "Cannot add step without available tools", variant: "destructive", }) return } const newStep: ChainStep = { id: crypto.randomUUID(), toolId: chainableTools[0].id, options: {}, } onChange([...steps, newStep]) setError(null) } const removeStep = (id: string) => { onChange(steps.filter((step) => step.id !== id)) setError(null) } const updateStep = (id: string, updates: Partial) => { onChange(steps.map((step) => (step.id === id ? { ...step, ...updates } : step))) } const moveStep = (index: number, direction: "up" | "down") => { const newSteps = [...steps] const targetIndex = direction === "up" ? index - 1 : index + 1 if (targetIndex < 0 || targetIndex >= steps.length) return ;[newSteps[index], newSteps[targetIndex]] = [newSteps[targetIndex], newSteps[index]] onChange(newSteps) } const handleSave = () => { if (!chainName.trim()) { toast({ title: "Name required", description: "Please enter a name for this chain", variant: "destructive", }) return } if (steps.length === 0) { toast({ title: "Cannot save empty chain", description: "Add at least one step before saving", variant: "destructive", }) return } try { onSave?.(chainName) setChainName("") setShowSaveDialog(false) setError(null) } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to save chain" setError(errorMessage) toast({ title: "Save failed", description: errorMessage, variant: "destructive", }) } } const handleExecute = () => { try { setError(null) onExecute() } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to execute chain" setError(errorMessage) toast({ title: "Execution failed", description: errorMessage, variant: "destructive", }) } } return (

Tool Chain

{onSave && ( )}

{error && (

Chain Error

{error}

)} {showSaveDialog && (

Chain Name

setChainName(e.target.value)} placeholder="Enter chain name..." onKeyDown={(e) => e.key === "Enter" && handleSave()} />

)} {steps.length === 0 ? (

No steps in chain. Add tools to create a pipeline.

) : (

{steps.map((step, index) => { const tool = getToolById(step.toolId) if (!tool) { return (

Tool not found

) } return (

Step {index + 1}

{tool?.options && tool.options.length > 0 && (

updateStep(step.id, { options })} />

)}

) })}

)} ) } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" "use client" import * as React from "react" import { AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface ErrorBoundaryProps { children: React.ReactNode fallback?: React.ReactNode } interface ErrorBoundaryState { hasError: boolean error?: Error } export class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error("[v0] Error caught by boundary:", error, errorInfo) } render() { if (this.state.hasError) { if (this.props.fallback) { return this.props.fallback } return ( Something went wrong

{this.state.error?.message || "An unexpected error occurred"}

) } return this.props.children } } [V0_FILE]typescriptreact:file="components/keyboard-shortcuts-dialog.tsx" isMerged="true" "use client" import React from "react" import { Keyboard } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" const shortcuts = [ { keys: ["Ctrl", "K"], description: "Focus search" }, { keys: ["Ctrl", "Z"], description: "Undo" }, { keys: ["Ctrl", "Y"], description: "Redo" }, { keys: ["Ctrl", "C"], description: "Copy output" }, { keys: ["Ctrl", "V"], description: "Paste to input" }, { keys: ["Ctrl", "Enter"], description: "Execute tool/chain" }, { keys: ["Ctrl", "S"], description: "Save chain" }, { keys: ["Ctrl", "/"], description: "Show shortcuts" }, ] export function KeyboardShortcutsDialog() { return ( ) } [V0_FILE]typescriptreact:file="components/saved-chains.tsx" isMerged="true" "use client" import { Play, Trash2, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { Chain } from "@/lib/chain/types" import { getToolById } from "@/lib/tools" interface SavedChainsProps { chains: Chain[] onLoad: (chain: Chain) => void onDelete: (id: string) => void } export function SavedChains({ chains, onLoad, onDelete }: SavedChainsProps) { if (chains.length === 0) { return ( Saved Chains

No saved chains yet

) } return ( Saved Chains {chains.map((chain) => (

{chain.name}

{chain.steps.length} steps:{" "} {chain.steps .map((step) => getToolById(step.toolId)?.name) .filter(Boolean) .join(" → ")}

{new Date(chain.createdAt).toLocaleDateString()}

))} ) } [V0_FILE]typescriptreact:file="components/share-dialog.tsx" isMerged="true" "use client" import * as React from "react" import { Share2, Copy, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" interface ShareDialogProps { toolId: string options: Record inputValue: string } export function ShareDialog({ toolId, options, inputValue }: ShareDialogProps) { const { toast } = useToast() const [copied, setCopied] = React.useState(false) const generateShareUrl = () => { const params = new URLSearchParams() params.set("tool", toolId) params.set("input", inputValue) params.set("options", JSON.stringify(options)) return `${window.location.origin}/?${params.toString()}` } const handleCopy = async () => { try { await navigator.clipboard.writeText(generateShareUrl()) setCopied(true) setTimeout(() => setCopied(false), 2000) toast({ title: "Link copied", description: "Share link copied to clipboard", }) } catch (err) { toast({ title: "Failed to copy", variant: "destructive", }) } } return ( ) } [V0_FILE]typescriptreact:file="components/text-input.tsx" isMerged="true" "use client" import * as React from "react" import { Copy, Trash2, Upload, Undo, Redo, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" interface TextInputProps { value: string onChange: (value: string) => void placeholder?: string label?: string } export function TextInput({ value, onChange, placeholder = "Enter your text here...", label = "Input", }: TextInputProps) { const { toast } = useToast() const [history, setHistory] = React.useState([value]) const [historyIndex, setHistoryIndex] = React.useState(0) const [copied, setCopied] = React.useState(false) const fileInputRef = React.useRef(null) React.useEffect(() => { if (value !== history[historyIndex]) { const newHistory = history.slice(0, historyIndex + 1) newHistory.push(value) setHistory(newHistory) setHistoryIndex(newHistory.length - 1) } }, [value]) const handleChange = (newValue: string) => { onChange(newValue) } const handleCopy = async () => { try { await navigator.clipboard.writeText(value) setCopied(true) setTimeout(() => setCopied(false), 2000) toast({ title: "Copied to clipboard", duration: 2000, }) } catch (err) { toast({ title: "Failed to copy", variant: "destructive", duration: 2000, }) } } const handleClear = () => { onChange("") } const handleUndo = () => { if (historyIndex > 0) { const newIndex = historyIndex - 1 setHistoryIndex(newIndex) onChange(history[newIndex]) } } const handleRedo = () => { if (historyIndex < history.length - 1) { const newIndex = historyIndex + 1 setHistoryIndex(newIndex) onChange(history[newIndex]) } } const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { const text = e.target?.result as string onChange(text) toast({ title: "File loaded", description: `${file.name} (${(file.size / 1024).toFixed(2)} KB)`, duration: 3000, }) } reader.readAsText(file) } } return (

{label}

handleChange(e.target.value)}
        placeholder={placeholder}
        className="min-h-[200px] sm:min-h-[300px] font-mono text-xs sm:text-sm resize-y transition-smooth focus:ring-2"
      />

<div className="flex items-center justify-between text-[10px] sm:text-xs text-muted-foreground">
        <span>
          {value.split("\n").length} lines • {value.length} characters • {value.split(/\s+/).filter(Boolean).length}{" "}
          words
        </span>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/text-output.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Copy, Download, Check, ArrowLeftRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface TextOutputProps {
  value: string
  originalValue?: string
  label?: string
  showDiff?: boolean
}

export function TextOutput({ value, originalValue, label = "Output", showDiff = false }: TextOutputProps) {
  const { toast } = useToast()
  const [copied, setCopied] = React.useState(false)

const handleCopy = async () => {
    try {
      if (!value) {
        toast({
          title: "Nothing to copy",
          description: "Output is empty",
          variant: "destructive",
        })
        return
      }

await navigator.clipboard.writeText(value)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
      toast({
        title: "Copied to clipboard",
        duration: 2000,
      })
    } catch (err) {
      toast({
        title: "Failed to copy",
        description: "Could not access clipboard",
        variant: "destructive",
        duration: 2000,
      })
    }
  }

const handleDownload = () => {
    try {
      if (!value) {
        toast({
          title: "Nothing to download",
          description: "Output is empty",
          variant: "destructive",
        })
        return
      }

const blob = new Blob([value], { type: "text/plain" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `texttools-output-${Date.now()}.txt`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
      toast({
        title: "Downloaded",
        description: "Output saved to file",
        duration: 2000,
      })
    } catch (err) {
      toast({
        title: "Download failed",
        description: "Could not download file",
        variant: "destructive",
        duration: 2000,
      })
    }
  }

const renderDiff = () => {
    if (!originalValue) return null

const originalLines = originalValue.split("\n")
    const newLines = value.split("\n")

return (
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h4 className="text-sm font-medium mb-2">Before</h4>
          <div className="rounded-md border border-border bg-muted/50 p-4 font-mono text-sm overflow-auto max-h-[300px]">
            {originalLines.map((line, i) => (
              <div key={i} className={`${newLines[i] !== line ? "bg-destructive/20 text-destructive-foreground" : ""}`}>
                {line || " "}
              </div>
            ))}
          </div>
        </div>
        <div>
          <h4 className="text-sm font-medium mb-2">After</h4>
          <div className="rounded-md border border-border bg-muted/50 p-4 font-mono text-sm overflow-auto max-h-[300px]">
            {newLines.map((line, i) => (
              <div key={i} className={`${originalLines[i] !== line ? "bg-primary/20 text-primary-foreground" : ""}`}>
                {line || " "}
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">{label}</label>
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" onClick={handleCopy} disabled={!value} title="Copy to clipboard">
            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
          </Button>
          <Button variant="ghost" size="icon" onClick={handleDownload} disabled={!value} title="Download">
            <Download className="h-4 w-4" />
          </Button>
        </div>
      </div>

{showDiff && originalValue ? (
        <Tabs defaultValue="output" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="output">Output</TabsTrigger>
            <TabsTrigger value="diff">
              <ArrowLeftRight className="h-4 w-4 mr-2" />
              Diff
            </TabsTrigger>
          </TabsList>
          <TabsContent value="output" className="mt-3">
            <Textarea value={value} readOnly className="min-h-[300px] font-mono text-sm resize-y" />
          </TabsContent>
          <TabsContent value="diff" className="mt-3">
            {renderDiff()}
          </TabsContent>
        </Tabs>
      ) : (
        <Textarea value={value} readOnly className="min-h-[300px] font-mono text-sm resize-y" />
      )}

<div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>
          {value.split("\n").length} lines • {value.length} characters • {value.split(/\s+/).filter(Boolean).length}{" "}
          words
        </span>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/tool-options.tsx" isMerged="true"
"use client"
import type { ToolOption } from "@/lib/tools"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface ToolOptionsProps {
  options: ToolOption[]
  values: Record<string, any>
  onChange: (values: Record<string, any>) => void
}

export function ToolOptions({ options, values, onChange }: ToolOptionsProps) {
  const handleChange = (id: string, value: any) => {
    onChange({ ...values, [id]: value })
  }

return (
    <div className="space-y-4">
      {options.map((option) => (
        <div key={option.id} className="space-y-2">
          {option.type === "boolean" ? (
            <div className="flex items-center space-x-2">
              <Checkbox
                id={option.id}
                checked={values[option.id] ?? option.defaultValue}
                onCheckedChange={(checked) => handleChange(option.id, checked)}
              />
              <Label htmlFor={option.id} className="text-sm font-normal cursor-pointer">
                {option.label}
              </Label>
            </div>
          ) : option.type === "select" ? (
            <div className="space-y-2">
              <Label htmlFor={option.id}>{option.label}</Label>
              <Select
                value={values[option.id] ?? option.defaultValue}
                onValueChange={(value) => handleChange(option.id, value)}
              >
                <SelectTrigger id={option.id}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {option.options?.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          ) : (
            <div className="space-y-2">
              <Label htmlFor={option.id}>{option.label}</Label>
              <Input
                id={option.id}
                type={option.type}
                value={values[option.id] ?? option.defaultValue}
                onChange={(e) =>
                  handleChange(option.id, option.type === "number" ? Number(e.target.value) : e.target.value)
                }
                placeholder={option.placeholder}
              />
            </div>
          )}
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tool-workspace.tsx" isMerged="true"
"use client"

import * as React from "react"
import { TextInput } from "@/components/text-input"
import { TextOutput } from "@/components/text-output"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Star, Play, AlertTriangle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface ToolWorkspaceProps {
  toolName: string
  toolDescription: string
  inputValue: string
  onInputChange: (value: string) => void
  outputValue: string
  onExecute: () => void
  isFavorite: boolean
  onToggleFavorite: () => void
  children?: React.ReactNode
  autoExecute?: boolean
  requiresInput?: boolean
}

export function ToolWorkspace({
  toolName,
  toolDescription,
  inputValue,
  onInputChange,
  outputValue,
  onExecute,
  isFavorite,
  onToggleFavorite,
  children,
  autoExecute = true,
  requiresInput = true,
}: ToolWorkspaceProps) {
  const [mounted, setMounted] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)
  const { toast } = useToast()

React.useEffect(() => {
    setMounted(true)
  }, [])

React.useEffect(() => {
    if (autoExecute) {
      if (!requiresInput || inputValue) {
        try {
          setError(null)
          onExecute()
        } catch (err) {
          const errorMessage = err instanceof Error ? err.message : "Failed to execute tool"
          setError(errorMessage)
          toast({
            title: "Execution error",
            description: errorMessage,
            variant: "destructive",
          })
        }
      }
    }
  }, [inputValue, autoExecute, requiresInput])

const handleManualExecute = () => {
    try {
      setError(null)
      onExecute()
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Failed to execute tool"
      setError(errorMessage)
      toast({
        title: "Execution error",
        description: errorMessage,
        variant: "destructive",
      })
    }
  }

return (
    <div className={`space-y-4 md:space-y-6 ${mounted ? "animate-in" : "opacity-0"}`}>
      <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
        <div className="flex-1 min-w-0">
          <h1 className="text-2xl sm:text-3xl font-bold mb-2 text-balance">{toolName}</h1>
          <p className="text-sm sm:text-base text-muted-foreground text-pretty">{toolDescription}</p>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={onToggleFavorite}
          title={isFavorite ? "Remove from favorites" : "Add to favorites"}
          className="transition-smooth shrink-0"
        >
          <Star
            className={`h-5 w-5 transition-all duration-200 ${isFavorite ? "fill-primary text-primary scale-110" : "scale-100"}`}
          />
        </Button>
      </div>

{error && (
        <Card className="border-destructive bg-destructive/10">
          <CardContent className="pt-6">
            <div className="flex items-start gap-3">
              <AlertTriangle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
              <div className="flex-1">
                <p className="font-medium text-destructive">Error</p>
                <p className="text-sm text-destructive/90 mt-1">{error}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{children && (
        <Card className="transition-smooth">
          <CardHeader className="pb-3">
            <CardTitle className="text-base sm:text-lg">Options</CardTitle>
          </CardHeader>
          <CardContent>{children}</CardContent>
        </Card>
      )}

{requiresInput ? (
        <div className="grid gap-4 md:gap-6 lg:grid-cols-2">
          <Card className="transition-smooth">
            <CardHeader className="pb-3">
              <CardTitle className="text-base sm:text-lg">Input</CardTitle>
            </CardHeader>
            <CardContent>
              <TextInput value={inputValue} onChange={onInputChange} />
            </CardContent>
          </Card>

<Card className="transition-smooth">
            <CardHeader className="pb-3">
              <CardTitle className="text-base sm:text-lg">Output</CardTitle>
            </CardHeader>
            <CardContent>
              <TextOutput value={outputValue} originalValue={inputValue} showDiff={true} />
            </CardContent>
          </Card>
        </div>
      ) : (
        <Card className="transition-smooth">
          <CardHeader className="pb-3">
            <CardTitle className="text-base sm:text-lg">Generated Output</CardTitle>
          </CardHeader>
          <CardContent>
            <TextOutput value={outputValue} originalValue="" showDiff={false} />
          </CardContent>
        </Card>
      )}

{!autoExecute && (
        <div className="flex justify-center">
          <Button onClick={handleManualExecute} size="lg" className="transition-smooth hover:scale-105">
            <Play className="h-4 w-4 mr-2" />
            {requiresInput ? "Execute" : "Generate"}
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

import { cn } from '@/lib/utils'

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className,
      )}
      {...props}
    />
  )
}

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === 'function' ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? 'expanded' : 'collapsed'

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = 'left',
  variant = 'sidebar',
  collapsible = 'offcanvas',
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('size-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        'bg-background relative flex w-full flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn('bg-background h-8 w-full shadow-none', className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn('bg-sidebar-border mx-2 w-auto', className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = 'default',
  size = 'default',
  tooltip,
  className,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : 'button'
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === 'string') {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== 'collapsed' || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<'div'> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = 'md',
  isActive = false,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
  size?: 'sm' | 'md'
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

import { cn } from '@/lib/utils'

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescript:file="hooks/use-keyboard-shortcuts.ts" isMerged="true"
"use client"

import * as React from "react"

export function useKeyboardShortcuts(shortcuts: Record<string, () => void>) {
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const key = [
        event.ctrlKey && "ctrl",
        event.metaKey && "meta",
        event.shiftKey && "shift",
        event.altKey && "alt",
        event.key.toLowerCase(),
      ]
        .filter(Boolean)
        .join("+")

if (shortcuts[key]) {
        event.preventDefault()
        shortcuts[key]()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [shortcuts])
}
[V0_FILE]typescript:file="hooks/use-local-storage.ts" isMerged="true"
"use client"

import * as React from "react"

export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
  const [storedValue, setStoredValue] = React.useState<T>(() => {
    if (typeof window === "undefined") {
      return initialValue
    }
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      console.error(error)
      return initialValue
    }
  })

const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore))
      }
    } catch (error) {
      console.error(error)
    }
  }

return [storedValue, setValue]
}
[V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/chain/engine.ts" isMerged="true"
import { getToolById } from "@/lib/tools"
import type { ChainStep } from "./types"

export function executeChain(input: string, steps: ChainStep[]): string {
  if (!input && input !== "") {
    throw new Error("Input is required for chain execution")
  }

if (!steps || steps.length === 0) {
    throw new Error("At least one step is required in the chain")
  }

let result = input

for (const step of steps) {
    const tool = getToolById(step.toolId)
    if (!tool) {
      throw new Error(`Tool not found: ${step.toolId}`)
    }

try {
      if (typeof tool.execute !== "function") {
        throw new Error(`Tool ${tool.name} does not have a valid execute function`)
      }
      result = tool.execute(result, step.options || {})
    } catch (error) {
      throw new Error(`Error in step "${tool.name}": ${error instanceof Error ? error.message : "Unknown error"}`)
    }
  }

return result
}
[V0_FILE]typescript:file="lib/chain/types.ts" isMerged="true"
export interface ChainStep {
  id: string
  toolId: string
  options: Record<string, any>
}

export interface Chain {
  id: string
  name: string
  steps: ChainStep[]
  createdAt: number
}
[V0_FILE]typescript:file="lib/seo-config.ts" isMerged="true"
import type { Metadata } from "next"

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://texttools.app"

export const seoConfig = {
  title: "TextTools - Modern Text Manipulation Suite",
  description:
    "Privacy-first text manipulation tools with 50+ utilities for case conversion, encoding, formatting, and more. Chain tools together, batch process files, all in your browser.",
  keywords: [
    "text tools",
    "text manipulation",
    "case converter",
    "base64 encoder",
    "url encoder",
    "text formatter",
    "batch processing",
    "privacy-first",
    "browser-based tools",
    "text utilities",
    "string manipulation",
    "developer tools",
  ],
  authors: [{ name: "dcesares", url: "https://dcesares.dev" }],
  creator: "dcesares",
  publisher: "dcesares",
  siteUrl,
  ogImage: `${siteUrl}/og-image.png`,
}

export function generateMetadata(): Metadata {
  return {
    metadataBase: new URL(seoConfig.siteUrl),
    title: {
      default: seoConfig.title,
      template: `%s | TextTools`,
    },
    description: seoConfig.description,
    keywords: seoConfig.keywords,
    authors: seoConfig.authors,
    creator: seoConfig.creator,
    publisher: seoConfig.publisher,
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
    openGraph: {
      type: "website",
      locale: "en_US",
      url: seoConfig.siteUrl,
      title: seoConfig.title,
      description: seoConfig.description,
      siteName: "TextTools",
      images: [
        {
          url: seoConfig.ogImage,
          width: 1200,
          height: 630,
          alt: "TextTools - Modern Text Manipulation Suite",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: seoConfig.title,
      description: seoConfig.description,
      images: [seoConfig.ogImage],
      creator: "@dcesares",
    },
    icons: {
      icon: [
        { url: "/favicon.ico", sizes: "any" },
        { url: "/icon.svg", type: "image/svg+xml" },
      ],
      apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
    },
    manifest: "/manifest.json",
    themeColor: [
      { media: "(prefers-color-scheme: light)", color: "#ffffff" },
      { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
    ],
    alternates: {
      canonical: seoConfig.siteUrl,
    },
  }
}
[V0_FILE]typescript:file="lib/tools/analysis.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const wordCountTool: ToolConfig = {
  id: "word-count",
  name: "Word Count",
  description: "Count words, characters, lines, and paragraphs",
  category: "Analysis",
  execute: (input: string) => {
    const words = input.split(/\s+/).filter(Boolean)
    const lines = input.split("\n")
    const paragraphs = input.split(/\n\n+/).filter(Boolean)
    const chars = input.length
    const charsNoSpaces = input.replace(/\s/g, "").length

return `Words: ${words.length}
Characters: ${chars}
Characters (no spaces): ${charsNoSpaces}
Lines: ${lines.length}
Paragraphs: ${paragraphs.length}

Average word length: ${words.length > 0 ? (charsNoSpaces / words.length).toFixed(2) : 0}
Average words per line: ${lines.length > 0 ? (words.length / lines.length).toFixed(2) : 0}`
  },
  autoExecute: true,
}

export const charCountTool: ToolConfig = {
  id: "char-count",
  name: "Character Count",
  description: "Count total characters",
  category: "Analysis",
  execute: (input: string) => {
    return `Total characters: ${input.length}`
  },
  autoExecute: true,
}

export const lineCountTool: ToolConfig = {
  id: "line-count",
  name: "Line Count",
  description: "Count total lines",
  category: "Analysis",
  execute: (input: string) => {
    const lines = input.split("\n")
    return `Total lines: ${lines.length}`
  },
  autoExecute: true,
}

export const frequencyTool: ToolConfig = {
  id: "frequency",
  name: "Word Frequency",
  description: "Analyze word frequency in text",
  category: "Analysis",
  execute: (input: string, options?: { limit?: number }) => {
    const words = input.toLowerCase().split(/\s+/).filter(Boolean)
    const frequency = new Map<string, number>()

words.forEach((word) => {
      frequency.set(word, (frequency.get(word) || 0) + 1)
    })

const sorted = Array.from(frequency.entries())
      .sort((a, b) => b[1] - a[1])
      .slice(0, options?.limit || 20)

return sorted.map(([word, count]) => `${word}: ${count}`).join("\n")
  },
  autoExecute: true,
  options: [
    {
      id: "limit",
      label: "Number of words to show",
      type: "number",
      defaultValue: 20,
    },
  ],
}
[V0_FILE]typescript:file="lib/tools/case-format.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const uppercaseTool: ToolConfig = {
  id: "uppercase",
  name: "UPPERCASE",
  description: "Convert all text to uppercase letters",
  category: "Case & Format",
  execute: (input: string) => input.toUpperCase(),
  autoExecute: true,
}

export const lowercaseTool: ToolConfig = {
  id: "lowercase",
  name: "lowercase",
  description: "Convert all text to lowercase letters",
  category: "Case & Format",
  execute: (input: string) => input.toLowerCase(),
  autoExecute: true,
}

export const titlecaseTool: ToolConfig = {
  id: "titlecase",
  name: "Title Case",
  description: "Convert text to title case (capitalize first letter of each word)",
  category: "Case & Format",
  execute: (input: string) => {
    return input.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase())
  },
  autoExecute: true,
}

export const camelcaseTool: ToolConfig = {
  id: "camelcase",
  name: "camelCase",
  description: "Convert text to camelCase",
  category: "Case & Format",
  execute: (input: string) => {
    return input
      .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
        return index === 0 ? letter.toLowerCase() : letter.toUpperCase()
      })
      .replace(/\s+/g, "")
  },
  autoExecute: true,
}

export const snakecaseTool: ToolConfig = {
  id: "snakecase",
  name: "snake_case",
  description: "Convert text to snake_case",
  category: "Case & Format",
  execute: (input: string) => {
    return input
      .replace(/\W+/g, " ")
      .split(/ |\B(?=[A-Z])/)
      .map((word) => word.toLowerCase())
      .join("_")
  },
  autoExecute: true,
}

export const kebabcaseTool: ToolConfig = {
  id: "kebabcase",
  name: "kebab-case",
  description: "Convert text to kebab-case",
  category: "Case & Format",
  execute: (input: string) => {
    return input
      .replace(/\W+/g, " ")
      .split(/ |\B(?=[A-Z])/)
      .map((word) => word.toLowerCase())
      .join("-")
  },
  autoExecute: true,
}
[V0_FILE]typescript:file="lib/tools/encode-decode.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const base64EncodeTool: ToolConfig = {
  id: "base64-encode",
  name: "Base64 Encode",
  description: "Encode text to Base64",
  category: "Encode & Decode",
  execute: (input: string) => {
    try {
      return btoa(unescape(encodeURIComponent(input)))
    } catch (e) {
      return "Error: Invalid input for Base64 encoding"
    }
  },
  autoExecute: true,
}

export const base64DecodeTool: ToolConfig = {
  id: "base64-decode",
  name: "Base64 Decode",
  description: "Decode Base64 to text",
  category: "Encode & Decode",
  execute: (input: string) => {
    try {
      return decodeURIComponent(escape(atob(input)))
    } catch (e) {
      return "Error: Invalid Base64 input"
    }
  },
  autoExecute: true,
}

export const urlEncodeTool: ToolConfig = {
  id: "url-encode",
  name: "URL Encode",
  description: "Encode text for use in URLs",
  category: "Encode & Decode",
  execute: (input: string) => {
    return encodeURIComponent(input)
  },
  autoExecute: true,
}

export const urlDecodeTool: ToolConfig = {
  id: "url-decode",
  name: "URL Decode",
  description: "Decode URL-encoded text",
  category: "Encode & Decode",
  execute: (input: string) => {
    try {
      return decodeURIComponent(input)
    } catch (e) {
      return "Error: Invalid URL-encoded input"
    }
  },
  autoExecute: true,
}

export const htmlEncodeTool: ToolConfig = {
  id: "html-encode",
  name: "HTML Encode",
  description: "Encode special HTML characters",
  category: "Encode & Decode",
  execute: (input: string) => {
    const div = document.createElement("div")
    div.textContent = input
    return div.innerHTML
  },
  autoExecute: true,
}

export const htmlDecodeTool: ToolConfig = {
  id: "html-decode",
  name: "HTML Decode",
  description: "Decode HTML entities",
  category: "Encode & Decode",
  execute: (input: string) => {
    const div = document.createElement("div")
    div.innerHTML = input
    return div.textContent || ""
  },
  autoExecute: true,
}
[V0_FILE]typescript:file="lib/tools/generate.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const loremIpsumTool: ToolConfig = {
  id: "lorem-ipsum",
  name: "Lorem Ipsum Generator",
  description: "Generate placeholder Lorem Ipsum text",
  category: "Generate",
  requiresInput: false,
  execute: (_input: string, options?: { paragraphs?: number }) => {
    const paragraphs = options?.paragraphs || 3
    const lorem = [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
      "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
    ]

const result = []
    for (let i = 0; i < paragraphs; i++) {
      result.push(lorem[i % lorem.length])
    }
    return result.join("\n\n")
  },
  autoExecute: false,
  options: [
    {
      id: "paragraphs",
      label: "Number of paragraphs",
      type: "number",
      defaultValue: 3,
    },
  ],
}

export const randomStringTool: ToolConfig = {
  id: "random-string",
  name: "Random String Generator",
  description: "Generate random strings",
  category: "Generate",
  requiresInput: false,
  execute: (_input: string, options?: { length?: number; count?: number; charset?: string }) => {
    const length = options?.length || 16
    const count = options?.count || 1
    const charset = options?.charset || "alphanumeric"

let chars = ""
    switch (charset) {
      case "alphanumeric":
        chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
        break
      case "alpha":
        chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
        break
      case "numeric":
        chars = "0123456789"
        break
      case "hex":
        chars = "0123456789abcdef"
        break
      default:
        chars = charset
    }

const results = []
    for (let i = 0; i < count; i++) {
      let result = ""
      for (let j = 0; j < length; j++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      results.push(result)
    }

return results.join("\n")
  },
  autoExecute: false,
  options: [
    {
      id: "length",
      label: "String length",
      type: "number",
      defaultValue: 16,
    },
    {
      id: "count",
      label: "Number of strings",
      type: "number",
      defaultValue: 1,
    },
    {
      id: "charset",
      label: "Character set",
      type: "select",
      defaultValue: "alphanumeric",
      options: [
        { label: "Alphanumeric", value: "alphanumeric" },
        { label: "Alphabetic", value: "alpha" },
        { label: "Numeric", value: "numeric" },
        { label: "Hexadecimal", value: "hex" },
      ],
    },
  ],
}

export const uuidTool: ToolConfig = {
  id: "uuid",
  name: "UUID Generator",
  description: "Generate UUIDs (v4)",
  category: "Generate",
  requiresInput: false,
  execute: (_input: string, options?: { count?: number }) => {
    const count = options?.count || 1
    const results = []

for (let i = 0; i < count; i++) {
      results.push(crypto.randomUUID())
    }

return results.join("\n")
  },
  autoExecute: false,
  options: [
    {
      id: "count",
      label: "Number of UUIDs",
      type: "number",
      defaultValue: 1,
    },
  ],
}
[V0_FILE]typescript:file="lib/tools/index.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"
import * as caseFormat from "@/lib/tools/case-format"
import * as transform from "@/lib/tools/transform"
import * as encodeDecode from "@/lib/tools/encode-decode"
import * as analysis from "@/lib/tools/analysis"
import * as modify from "@/lib/tools/modify"
import * as generate from "@/lib/tools/generate"

export const allTools: ToolConfig[] = [
  // Case & Format
  caseFormat.uppercaseTool,
  caseFormat.lowercaseTool,
  caseFormat.titlecaseTool,
  caseFormat.camelcaseTool,
  caseFormat.snakecaseTool,
  caseFormat.kebabcaseTool,

// Transform
  transform.trimTool,
  transform.reverseTool,
  transform.sortTool,
  transform.uniqueTool,
  transform.shuffleTool,

// Encode & Decode
  encodeDecode.base64EncodeTool,
  encodeDecode.base64DecodeTool,
  encodeDecode.urlEncodeTool,
  encodeDecode.urlDecodeTool,
  encodeDecode.htmlEncodeTool,
  encodeDecode.htmlDecodeTool,

// Analysis
  analysis.wordCountTool,
  analysis.charCountTool,
  analysis.lineCountTool,
  analysis.frequencyTool,

// Modify
  modify.prefixTool,
  modify.suffixTool,
  modify.findReplaceTool,
  modify.removeLinesTool,

// Generate
  generate.loremIpsumTool,
  generate.randomStringTool,
  generate.uuidTool,
]

export const chainableTools = allTools.filter((tool) => tool.requiresInput !== false && tool.category !== "Analysis")

export function getToolById(id: string): ToolConfig | undefined {
  return allTools.find((tool) => tool.id === id)
}

export type { ToolConfig, ToolOption } from "@/lib/tools/types"
[V0_FILE]typescript:file="lib/tools/modify.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const prefixTool: ToolConfig = {
  id: "prefix",
  name: "Add Prefix",
  description: "Add text to the beginning of each line",
  category: "Modify",
  execute: (input: string, options?: { prefix?: string }) => {
    const prefix = options?.prefix || ""
    return input
      .split("\n")
      .map((line) => prefix + line)
      .join("\n")
  },
  autoExecute: true,
  options: [
    {
      id: "prefix",
      label: "Prefix text",
      type: "text",
      defaultValue: "",
      placeholder: "Enter prefix...",
    },
  ],
}

export const suffixTool: ToolConfig = {
  id: "suffix",
  name: "Add Suffix",
  description: "Add text to the end of each line",
  category: "Modify",
  execute: (input: string, options?: { suffix?: string }) => {
    const suffix = options?.suffix || ""
    return input
      .split("\n")
      .map((line) => line + suffix)
      .join("\n")
  },
  autoExecute: true,
  options: [
    {
      id: "suffix",
      label: "Suffix text",
      type: "text",
      defaultValue: "",
      placeholder: "Enter suffix...",
    },
  ],
}

export const findReplaceTool: ToolConfig = {
  id: "find-replace",
  name: "Find & Replace",
  description: "Find and replace text with support for regex",
  category: "Modify",
  execute: (input: string, options?: { find?: string; replace?: string; regex?: boolean; caseSensitive?: boolean }) => {
    const find = options?.find || ""
    const replace = options?.replace || ""

if (!find) return input

try {
      if (options?.regex) {
        const flags = options?.caseSensitive ? "g" : "gi"
        const regex = new RegExp(find, flags)
        return input.replace(regex, replace)
      } else {
        const flags = options?.caseSensitive ? "g" : "gi"
        const regex = new RegExp(find.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), flags)
        return input.replace(regex, replace)
      }
    } catch (e) {
      return "Error: Invalid regex pattern"
    }
  },
  autoExecute: true,
  options: [
    {
      id: "find",
      label: "Find",
      type: "text",
      defaultValue: "",
      placeholder: "Text to find...",
    },
    {
      id: "replace",
      label: "Replace with",
      type: "text",
      defaultValue: "",
      placeholder: "Replacement text...",
    },
    {
      id: "regex",
      label: "Use regex",
      type: "boolean",
      defaultValue: false,
    },
    {
      id: "caseSensitive",
      label: "Case sensitive",
      type: "boolean",
      defaultValue: false,
    },
  ],
}

export const removeLinesTool: ToolConfig = {
  id: "remove-lines",
  name: "Remove Lines",
  description: "Remove empty lines or lines matching a pattern",
  category: "Modify",
  execute: (input: string, options?: { empty?: boolean; pattern?: string }) => {
    const lines = input.split("\n")

if (options?.empty) {
      return lines.filter((line) => line.trim() !== "").join("\n")
    }

if (options?.pattern) {
      try {
        const regex = new RegExp(options.pattern)
        return lines.filter((line) => !regex.test(line)).join("\n")
      } catch (e) {
        return "Error: Invalid regex pattern"
      }
    }

return input
  },
  autoExecute: true,
  options: [
    {
      id: "empty",
      label: "Remove empty lines",
      type: "boolean",
      defaultValue: true,
    },
    {
      id: "pattern",
      label: "Remove lines matching pattern (regex)",
      type: "text",
      defaultValue: "",
      placeholder: "Regex pattern...",
    },
  ],
}
[V0_FILE]typescript:file="lib/tools/transform.ts" isMerged="true"
import type { ToolConfig } from "@/lib/tools/types"

export const trimTool: ToolConfig = {
  id: "trim",
  name: "Trim Whitespace",
  description: "Remove leading and trailing whitespace from each line",
  category: "Transform",
  execute: (input: string) => {
    return input
      .split("\n")
      .map((line) => line.trim())
      .join("\n")
  },
  autoExecute: true,
}

export const reverseTool: ToolConfig = {
  id: "reverse",
  name: "Reverse Text",
  description: "Reverse the order of characters in the text",
  category: "Transform",
  execute: (input: string, options?: { byLine?: boolean }) => {
    if (options?.byLine) {
      return input
        .split("\n")
        .map((line) => line.split("").reverse().join(""))
        .join("\n")
    }
    return input.split("").reverse().join("")
  },
  autoExecute: true,
  options: [
    {
      id: "byLine",
      label: "Reverse each line separately",
      type: "boolean",
      defaultValue: false,
    },
  ],
}

export const sortTool: ToolConfig = {
  id: "sort",
  name: "Sort Lines",
  description: "Sort lines alphabetically",
  category: "Transform",
  execute: (input: string, options?: { reverse?: boolean; caseSensitive?: boolean }) => {
    const lines = input.split("\n")
    const sorted = lines.sort((a, b) => {
      const aVal = options?.caseSensitive ? a : a.toLowerCase()
      const bVal = options?.caseSensitive ? b : b.toLowerCase()
      return aVal.localeCompare(bVal)
    })
    return options?.reverse ? sorted.reverse().join("\n") : sorted.join("\n")
  },
  autoExecute: true,
  options: [
    {
      id: "reverse",
      label: "Reverse order (Z to A)",
      type: "boolean",
      defaultValue: false,
    },
    {
      id: "caseSensitive",
      label: "Case sensitive",
      type: "boolean",
      defaultValue: false,
    },
  ],
}

export const uniqueTool: ToolConfig = {
  id: "unique",
  name: "Remove Duplicates",
  description: "Remove duplicate lines",
  category: "Transform",
  execute: (input: string, options?: { caseSensitive?: boolean }) => {
    const lines = input.split("\n")
    const seen = new Set<string>()
    const unique = lines.filter((line) => {
      const key = options?.caseSensitive ? line : line.toLowerCase()
      if (seen.has(key)) return false
      seen.add(key)
      return true
    })
    return unique.join("\n")
  },
  autoExecute: true,
  options: [
    {
      id: "caseSensitive",
      label: "Case sensitive",
      type: "boolean",
      defaultValue: false,
    },
  ],
}

export const shuffleTool: ToolConfig = {
  id: "shuffle",
  name: "Shuffle Lines",
  description: "Randomly shuffle the order of lines",
  category: "Transform",
  execute: (input: string) => {
    const lines = input.split("\n")
    for (let i = lines.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[lines[i], lines[j]] = [lines[j], lines[i]]
    }
    return lines.join("\n")
  },
  autoExecute: false,
}
[V0_FILE]typescript:file="lib/tools/types.ts" isMerged="true"
export interface ToolConfig {
  id: string
  name: string
  description: string
  category: string
  execute: (input: string, options?: any) => string
  options?: ToolOption[]
  autoExecute?: boolean
  requiresInput?: boolean // If false, tool generates output without input
}

export interface ToolOption {
  id: string
  label: string
  type: "text" | "number" | "boolean" | "select"
  defaultValue: any
  options?: { label: string; value: any }[]
  placeholder?: string
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "@vercel/speed-insights": "1.2.0",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  },
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]plaintext:file="public/robots.txt" isMerged="true"
# Allow all crawlers
User-agent: *
Allow: /

# Sitemap location
Sitemap: ${process.env.NEXT_PUBLIC_SITE_URL || 'https://texttools.app'}/sitemap.xml
[V0_FILE]xml:file="public/sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://texttools.app</loc>
    <lastmod>2025-02-10</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Iowmxyhzh7JqpRmYKEV7TeKQcIlZ/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Iowmxyhzh7JqpRmYKEV7TeKQcIlZ/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Iowmxyhzh7JqpRmYKEV7TeKQcIlZ/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Iowmxyhzh7JqpRmYKEV7TeKQcIlZ/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Iowmxyhzh7JqpRmYKEV7TeKQcIlZ/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]json:file="public/manifest.json" isEdit="true"
{
  "name": "TextTools - Modern Text Manipulation Suite",
  "short_name": "TextTools",
  "description": "Privacy-first text manipulation tools with chaining, batch processing, and more",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0a0a0a",
  "theme_color": "#0a0a0a",
  "icons": [
    {
      "src": "/icon-192.jpg",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.jpg",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Suspense } from "react"
import { AppFooter } from "@/components/app-footer"
import { generateMetadata } from "@/lib/seo-config"
import { ErrorBoundary } from "@/components/error-boundary"

export const metadata = generateMetadata()

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebApplication",
              name: "TextTools",
              description:
                "Privacy-first text manipulation tools with 50+ utilities for case conversion, encoding, formatting, and more.",
              url: process.env.NEXT_PUBLIC_SITE_URL || "https://texttools.app",
              applicationCategory: "UtilitiesApplication",
              operatingSystem: "Any",
              offers: {
                "@type": "Offer",
                price: "0",
                priceCurrency: "USD",
              },
              author: {
                "@type": "Person",
                name: "dcesares",
                url: "https://dcesares.dev",
              },
              browserRequirements: "Requires JavaScript. Requires HTML5.",
              softwareVersion: "1.0",
              aggregateRating: {
                "@type": "AggregateRating",
                ratingValue: "5",
                ratingCount: "1",
              },
            }),
          }}
        />
      </head>
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <ErrorBoundary>
          <Suspense fallback={null}>
            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
              <div className="flex flex-col min-h-screen">
                <div className="flex-1">{children}</div>
                <AppFooter />
              </div>
            </ThemeProvider>
          </Suspense>
        </ErrorBoundary>
      </body>
    </html>
  )
}
[V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/favicon-icon-16x16-Ry0qlXqvVLqJqJqJqJqJqJqJqJqJqJ.ico"
[V0_FILE]jpg:file="public/icon-192.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-192-ueby3SdLpOKHE5hjus889NbGjiLA1i.jpg"
[V0_FILE]jpg:file="public/icon-512.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-512-kOgbvOWks2iN0zBcDtG37B2H942IcH.jpg"
[V0_FILE]jpg:file="public/icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-AzdcviqWCyUghnusiWM5m0AVVbljam.png"
[V0_FILE]jpg:file="public/apple-touch-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-touch-icon-y5geAOm1xsAQoBft8hvATLhrwMXf7R.jpg"
[V0_FILE]jpg:file="public/og-image.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/og-image-YH1b2yeYs2aozg6H5KTtY4B0gqtn19.jpg"</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This