├── .env
├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components.json
├── components
    ├── Playground.tsx
    └── ui
    │   ├── button.tsx
    │   └── input.tsx
├── e2b-playground
    ├── agent
    │   ├── agent.js
    │   ├── functions.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── system_prompt.txt
    ├── dbk-og.toml
    ├── dbk.toml
    └── template
    │   ├── .eslintrc.json
    │   ├── .gitignore
    │   ├── README.md
    │   ├── components.json
    │   ├── components
    │       ├── Component.jsx
    │       └── ui
    │       │   ├── accordion.jsx
    │       │   ├── alert-dialog.jsx
    │       │   ├── alert.jsx
    │       │   ├── aspect-ratio.jsx
    │       │   ├── avatar.jsx
    │       │   ├── badge.jsx
    │       │   ├── button.jsx
    │       │   ├── calendar.jsx
    │       │   ├── card.jsx
    │       │   ├── checkbox.jsx
    │       │   ├── collapsible.jsx
    │       │   ├── command.jsx
    │       │   ├── context-menu.jsx
    │       │   ├── dialog.jsx
    │       │   ├── dropdown-menu.jsx
    │       │   ├── form.jsx
    │       │   ├── hover-card.jsx
    │       │   ├── input.jsx
    │       │   ├── label.jsx
    │       │   ├── menubar.jsx
    │       │   ├── navigation-menu.jsx
    │       │   ├── popover.jsx
    │       │   ├── progress.jsx
    │       │   ├── radio-group.jsx
    │       │   ├── scroll-area.jsx
    │       │   ├── select.jsx
    │       │   ├── separator.jsx
    │       │   ├── sheet.jsx
    │       │   ├── skeleton.jsx
    │       │   ├── slider.jsx
    │       │   ├── switch.jsx
    │       │   ├── table.jsx
    │       │   ├── tabs.jsx
    │       │   ├── textarea.jsx
    │       │   ├── toast.jsx
    │       │   ├── toaster.jsx
    │       │   ├── toggle.jsx
    │       │   ├── tooltip.jsx
    │       │   └── use-toast.ts
    │   ├── jsconfig.json
    │   ├── lib
    │       └── utils.js
    │   ├── next.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── pages
    │       ├── _app.js
    │       ├── _document.js
    │       ├── api
    │       │   └── hello.js
    │       └── index.js
    │   ├── postcss.config.js
    │   ├── public
    │       ├── favicon.ico
    │       ├── next.svg
    │       └── vercel.svg
    │   ├── styles
    │       └── globals.css
    │   └── tailwind.config.js
├── lib
    └── utils.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── next.svg
    └── vercel.svg
├── tailwind.config.js
├── tailwind.config.ts
└── tsconfig.json


/.env:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_E2B_API_KEY=e2b_d5db0b24b13f426a698503143a06f53e51302059


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 | 
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mlejva/oss-v0/41dc112aac01b27b45d531a2046745cca875aff4/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 | 
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 | 
35 |     --radius: 0.5rem;
36 |   }
37 | 
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 | 
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 | 
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 | 
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 | 
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 | 
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 | 
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 | 
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     /* @apply bg-background text-foreground; */
75 |   }
76 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import type { Metadata } from 'next'
 3 | import { Inter } from 'next/font/google'
 4 | 
 5 | const inter = Inter({ subsets: ['latin'] })
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: 'Create Next App',
 9 |   description: 'Generated by create next app',
10 | }
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: {
15 |   children: React.ReactNode
16 | }) {
17 |   return (
18 |     <html lang="en">
19 |       <body className={`font-sans antialiased ${inter.className}`}>
20 |         <div className="flex flex-col min-h-screen bg-white">
21 |           <header className="sticky top-0 z-20 flex items-center justify-between w-full px-4 py-3 h-14 bg-background">
22 |             <span className="font-mono text-xl font-bold">v0S</span>
23 |           </header>
24 |           {children}
25 |         </div>
26 |       </body>
27 |     </html>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useState } from 'react'
 3 | import { Input } from '@/components/ui/input'
 4 | import { CornerDownLeft } from 'lucide-react'
 5 | import { Button } from '@/components/ui/button'
 6 | 
 7 | import Playground from '@/components/Playground'
 8 | 
 9 | export default function Home() {
10 |   const [task, setTask] = useState('')
11 | 
12 |   function sendRequest() {
13 |     fetch('http://localhost:3002', {
14 |       method: 'POST',
15 |       headers: {
16 |         'Content-type': 'application/json',
17 |       },
18 |       body: JSON.stringify({ task }),
19 |     })
20 |   }
21 | 
22 |   return (
23 |     <main className="flex-1 overflow-auto">
24 |       <div className="flex flex-col py-[26vh] px-6 justify-center items-center gap-6">
25 | 
26 |         <div className="flex items-center justify-center gap-2">
27 |           <Input
28 |             className="w-[380px] max-w-full shadow shadow-xl focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-zinc-400"
29 |             placeholder="A birthday registration form with a date picker"
30 |             value={task}
31 |             onChange={e => setTask(e.target.value)}
32 |             />
33 |           <Button
34 |             className="gap-1 px-4 border shadow shadow-xl bg-transparent hover:bg-zinc-100 hover:border-zinc-400"
35 |             onClick={sendRequest}
36 |           >
37 |             <CornerDownLeft size={14} strokeWidth={2.5} className="text-zinc-500"/>
38 |           </Button>
39 |         </div>
40 | 
41 |         <Playground/>
42 | 
43 |       </div>
44 |     </main>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/Playground.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useEffect, useState } from 'react'
 4 | 
 5 | import { Session } from '@e2b/sdk'
 6 | const logger = {
 7 |   debug: console.debug, // log debug messages, in default logger this is noop
 8 |   info: console.info, // log info messages, in default logger this is noop
 9 |   // don't forget to also specify warn & error handlers, otherwise they won't be logged when overriding the logger
10 |   warn: console.warn,
11 |   error: console.error,
12 | }
13 | 
14 | // function fetchCode() {
15 | //   fetch('http://localhost:3002', {
16 | //     method: 'POST',
17 | //     headers: {
18 | //       'Content-type': 'application/json',
19 | //     },
20 | //     body: JSON.stringify({ task }),
21 | //   })
22 | // }
23 | 
24 | 
25 | function Playground() {
26 |   const [playground, setPlayground] = useState<Session | null>(null)
27 |   const [url, setURL] = useState<string>('')
28 | 
29 |   async function initPlayground() {
30 |     const session = await Session.create({
31 |       id: 'pTqrJ3prLCDI', // Custom env made for generating react/nextjs code
32 |       apiKey: process.env.NEXT_PUBLIC_E2B_API_KEY!,
33 |       logger,
34 |     })
35 | 
36 |     console.log('WRITING FILES')
37 |     setTimeout(async () => {
38 |       await session.filesystem.write('/code/template/components/Component.jsx', `
39 |       import { Alert } from "@/components/ui/alert";
40 |       import { Button } from "@/components/ui/button";
41 | 
42 |   export default function CookieConsentBanner() {
43 |     return (
44 |       <Alert type="info" className="flex items-center justify-between bg-white">
45 |         <div className="flex items-center">
46 |           <svg
47 |             xmlns="http://www.w3.org/2000/svg"
48 |             className="h-6 w-6 mr-2"
49 |             fill="none"
50 |             viewBox="0 0 24 24"
51 |             stroke="currentColor"
52 |           >
53 |             <path
54 |               strokeLinecap="round"
55 |               strokeLinejoin="round"
56 |               strokeWidth={2}
57 |               d="M12 9v2m0 4h.01M19 10a7 7 0 11-14 0 7 7 0 0114 0z"
58 |             />
59 |           </svg>
60 |           <span className="text-sm">
61 |             This website uses cookies to ensure you get the best experience on our website.
62 |           </span>
63 |         </div>
64 |         <Button className="ml-4">Accept</Button>
65 |       </Alert>
66 |     );
67 |   }
68 |   `)
69 |   console.log('DONE')
70 |     }, 2000)
71 | 
72 |     setURL('https://' + session.getHostname(3000))
73 |     setPlayground(session)
74 |   }
75 | 
76 |   useEffect(function init() {
77 |     // initPlayground()
78 |   }, [])
79 | 
80 |   return (
81 |     <div className="w-full h-[400px] bg-red-500 rounded-md bg-zinc-100 p-4">
82 |         {/* <iframe
83 |           className="w-full h-full rounded-md"
84 |           src="http://localhost:3000"
85 |         /> */}
86 |       {url && (
87 |         <iframe
88 |           className="w-full h-full rounded-md"
89 |           src={url}
90 |         />
91 |       )}
92 |     </div>
93 |   )
94 | }
95 | 
96 | export default Playground


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/e2b-playground/agent/agent.js:
--------------------------------------------------------------------------------
  1 | import OpenAI from 'openai';
  2 | import fs from 'fs';
  3 | import { spawn } from 'child_process';
  4 | import { functions } from './functions.js';
  5 | import readline from 'readline';
  6 | import express from 'express'
  7 | import bodyParser from 'body-parser'
  8 | import cors from 'cors'
  9 | const app = express()
 10 | 
 11 | const model = 'gpt-4';
 12 | // const model = 'gpt-3.5-turbo-16k';
 13 | const wait = ms => new Promise(res => setTimeout(res, ms));
 14 | 
 15 | 
 16 | const systemPrompt = fs.readFileSync('./system_prompt.txt', 'utf8');
 17 | const history = [
 18 |   {
 19 |     role: 'system',
 20 |     content: systemPrompt
 21 |   },
 22 |   {
 23 |     role: 'user',
 24 |     content: 'Give me a set of 12 buttons. Use a different color for each button. Put them in a grid.',
 25 |   },
 26 |   {
 27 |     role: 'assistant',
 28 |     content: '{"code":"<div className=\"grid grid-cols-3 gap-4\">\n<Button className=\"bg-red-500\">Button 1</Button>\n<Button className=\"bg-yellow-500\">Button 2</Button>\n<Button className=\"bg-green-500\">Button 3</Button>\n<Button className=\"bg-blue-500\">Button 4</Button>\n<Button className=\"bg-purple-500\">Button 5</Button>\n<Button className=\"bg-pink-500\">Button 6</Button>\n<Button className=\"bg-gray-500\">Button 7</Button>\n<Button className=\"bg-red-600\">Button 8</Button>\n<Button className=\"bg-yellow-600\">Button 9</Button>\n<Button className=\"bg-green-600\">Button 10</Button>\n<Button className=\"bg-blue-600\">Button 11</Button>\n<Button className=\"bg-purple-600\">Button 12</Button>\n</div>"}',
 29 |     name: 'write_jsx',
 30 |   },
 31 |   {
 32 |     role: 'assistant',
 33 |     content: "{ \"component\": \"Button\" }",
 34 |     name: 'import_component',
 35 |   },
 36 | ];
 37 | const openai = new OpenAI({
 38 |   apiKey: process.env.OPENAI_API_KEY,
 39 | });
 40 | let errors = '';
 41 | let imports = new Set();
 42 | 
 43 | function componentCode({ importedComponents, code }) {
 44 |   let importsCode = '';
 45 | 
 46 |   importedComponents.forEach(component => {
 47 |     const exportedName = component.split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
 48 |     console.log('exportedName', exportedName);
 49 |     importsCode += `import { ${exportedName} } from '@/components/ui/${component}';\n`;
 50 |   })
 51 | 
 52 |   return `${importsCode}
 53 |   export default function Component() {
 54 |     return (
 55 |       ${code || '<div></div>'}
 56 |     );
 57 |   }
 58 |   `
 59 | }
 60 | 
 61 | async function run(userTask) {
 62 |   history.push(
 63 |     {
 64 |       role: 'user',
 65 |       content: userTask,
 66 |     },
 67 |   )
 68 | 
 69 |   let stream = await openai.chat.completions.create({
 70 |     model,
 71 |     messages: history,
 72 |     // stream: true,
 73 |     functions,
 74 |   });
 75 |   let choice = stream.choices[0];
 76 |   console.log('finish reason', choice.finish_reason);
 77 | 
 78 |   if (choice.finish_reason === 'stop') {
 79 |     console.log('GPT IS DONE')
 80 |   }
 81 | 
 82 |   while (choice.finish_reason !== 'stop') {
 83 |     console.log(choice)
 84 | 
 85 |     if (choice.finish_reason === 'function_call') {
 86 |       const functionName = choice.message.function_call.name;
 87 |       let functionsArgsStr = choice.message.function_call.arguments;
 88 |       console.log('=== JSON STRING ===')
 89 |       console.log(functionsArgsStr)
 90 |       console.log('=====')
 91 |       // Remove newlines
 92 |       functionsArgsStr = functionsArgsStr.trim().replace(/\n|\r/g, '');
 93 |       console.log('=== JSON STRING (no newlines)===')
 94 |       console.log(functionsArgsStr)
 95 |       console.log('=====')
 96 | 
 97 |       const functionArgs = JSON.parse(functionsArgsStr);
 98 | 
 99 |       switch (functionName) {
100 |         case 'write_jsx':
101 | 
102 | 
103 |           // console.log('WRITING JSX')
104 | 
105 |           // Go into the self-healing loop -> save the code -> get more context about errors
106 |           const component = componentCode({ importedComponents: imports, code: functionArgs.code })
107 |           // console.log('COMPONENT')
108 |           // console.log(component)
109 |           fs.writeFileSync('/Users/mlejva/Developer/oss-v0/e2b-playground/template/components/Component.jsx', component);
110 |           console.log('Waiting after file write...')
111 |           await wait(3_000)
112 |           console.log('errors:\n', errors)
113 | 
114 |           break;
115 |         case 'import_components':
116 | 
117 |           // `component_imports` is a string with space separated names of components
118 |           // we need to convert it to an array and make sure there aren't any duplicatesj
119 |           const componentImports = functionArgs.components.split(' ');
120 |           componentImports.forEach(component => imports.add(component));
121 | 
122 |           break;
123 |       }
124 |       console.log(functionName);
125 |       console.log(functionArgs);
126 | 
127 |       // Append to `history`
128 |       history.push({
129 |         role: 'assistant',
130 |         name: functionName,
131 |         content: functionsArgsStr,
132 |       })
133 |       if (errors) {
134 |         console.log('HAVE ERRORS', errors)
135 |         history.push({
136 |           role: 'user',
137 |           content: `I got a following error, please fix it for me:\n\`\`\`${errors}\`\`\``,
138 |         })
139 |       }
140 | 
141 |       if (errors || functionName === 'import_components') {
142 |         console.log('Waiting for GPT...')
143 |         errors = ''
144 |         stream = await openai.chat.completions.create({
145 |           model,
146 |           messages: history,
147 |           // stream: true,
148 |           functions,
149 |         });
150 |         choice = stream.choices[0];
151 |       } else {
152 |         console.log('Waiting on user...')
153 |         break;
154 |       }
155 |     } else {
156 |       console.log('Non function finish reason', choice.finish_reason)
157 |     }
158 |   }
159 | 
160 |   // for await (const part of stream) {
161 |   //   console.log('part');
162 |   //   console.log(part.choices[0].delta);
163 |   //   // process.stdout.write(part.choices[0]?.delta?.content || '');
164 |   // }
165 | }
166 | 
167 | 
168 | const child = spawn('npm', ['run', 'dev'], {
169 |   cwd: '/Users/mlejva/Developer/oss-v0/e2b-playground/template',
170 | });
171 | // child.stdout.on('data', (chunk) => {
172 | //   console.log(chunk.toString());
173 | // });
174 | child.stderr.on('data', (chunk) => {
175 |   const err = chunk.toString();
176 |   if (err.startsWith('- error')) {
177 |     errors += chunk.toString();
178 |   }
179 | });
180 | 
181 | 
182 | function askQuestion(query) {
183 |     const rl = readline.createInterface({
184 |         input: process.stdin,
185 |         output: process.stdout,
186 |     });
187 | 
188 |     return new Promise(resolve => rl.question(query, ans => {
189 |         rl.close();
190 |         resolve(ans);
191 |     }))
192 | }
193 | 
194 | console.log('Loading...')
195 | await wait(3000)
196 | 
197 | // setTimeout(async () => {
198 | //   while (true) {
199 | //     const task = await askQuestion('What do you want to build?\n> ')
200 | //     await run(task)
201 | //   }
202 | // }, 3_000)
203 | 
204 | // We're going to call the `run` function on user input. Then we're going to get into the self-healing improving loop with max retries.
205 | 
206 | 
207 | 
208 | app.use(cors())
209 | app.use(bodyParser.json())
210 | app.use(bodyParser.urlencoded({ extended: false }))
211 | 
212 | 
213 | app.post('/', async (req, res) => {
214 |     const data = req.body;
215 |     console.log('data\n', data)
216 |     const task = data.task;
217 |     await run(task);
218 |     res.send('');
219 | })
220 | 
221 | app.get('/', async (req, res) => {
222 |   const code = fs.readFileSync('/Users/mlejva/Developer/oss-v0/e2b-playground/template/components/Component.jsx', 'utf8');
223 | 
224 |   rest.json({ code });
225 | })
226 | 
227 | 
228 | app.listen(3002, () => {
229 |   console.log('Server listening on port 3002!')
230 | })


--------------------------------------------------------------------------------
/e2b-playground/agent/functions.js:
--------------------------------------------------------------------------------
 1 | export const functions = [
 2 |   {
 3 |     name: 'import_components',
 4 |     description: 'Imports all listed React components from `@/components/ui`',
 5 |     parameters: {
 6 |       type: 'object',
 7 |       properties: {
 8 |         components: {
 9 |           type: 'string',
10 |           description: 'Names of React components separated by spaces to import, for example `navigation-menu alert button`',
11 |           enum: [
12 |             `alert`,
13 |             `alert-dialog`,
14 |             `aspect-ratio`,
15 |             `avatar`,
16 |             `badge`,
17 |             `button`,
18 |             `calendar`,
19 |             `card`,
20 |             `checkbox`,
21 |             `collapsible`,
22 |             `combobox`,
23 |             `command`,
24 |             `context-menu`,
25 |             `data-table`,
26 |             `date-picker`,
27 |             `dialog`,
28 |             `dropdown-menu`,
29 |             `form`,
30 |             `hover-card`,
31 |             `input`,
32 |             `label`,
33 |             `menubar`,
34 |             `navigation-menu`,
35 |             `popover`,
36 |             `progress`,
37 |             `radio-group`,
38 |             `scroll-area`,
39 |             `select`,
40 |             `separator`,
41 |             `sheet`,
42 |             `skeleton`,
43 |             `slider`,
44 |             `switch`,
45 |             `table`,
46 |             `tabs`,
47 |             `textarea`,
48 |             `toast`,
49 |             `toggle`,
50 |             `tooltip`,
51 |           ]
52 |         },
53 |       },
54 |       required: ['component'],
55 |     },
56 |   },
57 |   {
58 |     name: 'write_jsx',
59 |     description: 'Inserts the JSX code into the `return` statement of the React component',
60 |     parameters: {
61 |       type: 'object',
62 |       properties: {
63 |         code: {
64 |           type: 'string',
65 |           description: 'The JSX code without any JavaScript logic',
66 |         },
67 |       },
68 |     },
69 |     required: ['code'],
70 |   },
71 | ];
72 | 


--------------------------------------------------------------------------------
/e2b-playground/agent/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "agent",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 3,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "agent",
  9 |       "version": "1.0.0",
 10 |       "license": "ISC",
 11 |       "dependencies": {
 12 |         "body-parser": "^1.20.2",
 13 |         "cors": "^2.8.5",
 14 |         "express": "^4.18.2",
 15 |         "openai": "^4.7.1"
 16 |       }
 17 |     },
 18 |     "node_modules/@types/node": {
 19 |       "version": "18.17.17",
 20 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.17.tgz",
 21 |       "integrity": "sha512-cOxcXsQ2sxiwkykdJqvyFS+MLQPLvIdwh5l6gNg8qF6s+C7XSkEWOZjK+XhUZd+mYvHV/180g2cnCcIl4l06Pw=="
 22 |     },
 23 |     "node_modules/@types/node-fetch": {
 24 |       "version": "2.6.5",
 25 |       "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.5.tgz",
 26 |       "integrity": "sha512-OZsUlr2nxvkqUFLSaY2ZbA+P1q22q+KrlxWOn/38RX+u5kTkYL2mTujEpzUhGkS+K/QCYp9oagfXG39XOzyySg==",
 27 |       "dependencies": {
 28 |         "@types/node": "*",
 29 |         "form-data": "^4.0.0"
 30 |       }
 31 |     },
 32 |     "node_modules/abort-controller": {
 33 |       "version": "3.0.0",
 34 |       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
 35 |       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
 36 |       "dependencies": {
 37 |         "event-target-shim": "^5.0.0"
 38 |       },
 39 |       "engines": {
 40 |         "node": ">=6.5"
 41 |       }
 42 |     },
 43 |     "node_modules/accepts": {
 44 |       "version": "1.3.8",
 45 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
 46 |       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
 47 |       "dependencies": {
 48 |         "mime-types": "~2.1.34",
 49 |         "negotiator": "0.6.3"
 50 |       },
 51 |       "engines": {
 52 |         "node": ">= 0.6"
 53 |       }
 54 |     },
 55 |     "node_modules/agentkeepalive": {
 56 |       "version": "4.5.0",
 57 |       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
 58 |       "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
 59 |       "dependencies": {
 60 |         "humanize-ms": "^1.2.1"
 61 |       },
 62 |       "engines": {
 63 |         "node": ">= 8.0.0"
 64 |       }
 65 |     },
 66 |     "node_modules/array-flatten": {
 67 |       "version": "1.1.1",
 68 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 69 |       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
 70 |     },
 71 |     "node_modules/asynckit": {
 72 |       "version": "0.4.0",
 73 |       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
 74 |       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 75 |     },
 76 |     "node_modules/base-64": {
 77 |       "version": "0.1.0",
 78 |       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
 79 |       "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
 80 |     },
 81 |     "node_modules/body-parser": {
 82 |       "version": "1.20.2",
 83 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
 84 |       "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
 85 |       "dependencies": {
 86 |         "bytes": "3.1.2",
 87 |         "content-type": "~1.0.5",
 88 |         "debug": "2.6.9",
 89 |         "depd": "2.0.0",
 90 |         "destroy": "1.2.0",
 91 |         "http-errors": "2.0.0",
 92 |         "iconv-lite": "0.4.24",
 93 |         "on-finished": "2.4.1",
 94 |         "qs": "6.11.0",
 95 |         "raw-body": "2.5.2",
 96 |         "type-is": "~1.6.18",
 97 |         "unpipe": "1.0.0"
 98 |       },
 99 |       "engines": {
100 |         "node": ">= 0.8",
101 |         "npm": "1.2.8000 || >= 1.4.16"
102 |       }
103 |     },
104 |     "node_modules/bytes": {
105 |       "version": "3.1.2",
106 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
107 |       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
108 |       "engines": {
109 |         "node": ">= 0.8"
110 |       }
111 |     },
112 |     "node_modules/call-bind": {
113 |       "version": "1.0.2",
114 |       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
115 |       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
116 |       "dependencies": {
117 |         "function-bind": "^1.1.1",
118 |         "get-intrinsic": "^1.0.2"
119 |       },
120 |       "funding": {
121 |         "url": "https://github.com/sponsors/ljharb"
122 |       }
123 |     },
124 |     "node_modules/charenc": {
125 |       "version": "0.0.2",
126 |       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
127 |       "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
128 |       "engines": {
129 |         "node": "*"
130 |       }
131 |     },
132 |     "node_modules/combined-stream": {
133 |       "version": "1.0.8",
134 |       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
135 |       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
136 |       "dependencies": {
137 |         "delayed-stream": "~1.0.0"
138 |       },
139 |       "engines": {
140 |         "node": ">= 0.8"
141 |       }
142 |     },
143 |     "node_modules/content-disposition": {
144 |       "version": "0.5.4",
145 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
146 |       "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
147 |       "dependencies": {
148 |         "safe-buffer": "5.2.1"
149 |       },
150 |       "engines": {
151 |         "node": ">= 0.6"
152 |       }
153 |     },
154 |     "node_modules/content-type": {
155 |       "version": "1.0.5",
156 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
157 |       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
158 |       "engines": {
159 |         "node": ">= 0.6"
160 |       }
161 |     },
162 |     "node_modules/cookie": {
163 |       "version": "0.5.0",
164 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
165 |       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
166 |       "engines": {
167 |         "node": ">= 0.6"
168 |       }
169 |     },
170 |     "node_modules/cookie-signature": {
171 |       "version": "1.0.6",
172 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
173 |       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
174 |     },
175 |     "node_modules/cors": {
176 |       "version": "2.8.5",
177 |       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
178 |       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
179 |       "dependencies": {
180 |         "object-assign": "^4",
181 |         "vary": "^1"
182 |       },
183 |       "engines": {
184 |         "node": ">= 0.10"
185 |       }
186 |     },
187 |     "node_modules/crypt": {
188 |       "version": "0.0.2",
189 |       "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
190 |       "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
191 |       "engines": {
192 |         "node": "*"
193 |       }
194 |     },
195 |     "node_modules/debug": {
196 |       "version": "2.6.9",
197 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
198 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
199 |       "dependencies": {
200 |         "ms": "2.0.0"
201 |       }
202 |     },
203 |     "node_modules/debug/node_modules/ms": {
204 |       "version": "2.0.0",
205 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
206 |       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
207 |     },
208 |     "node_modules/delayed-stream": {
209 |       "version": "1.0.0",
210 |       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
211 |       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
212 |       "engines": {
213 |         "node": ">=0.4.0"
214 |       }
215 |     },
216 |     "node_modules/depd": {
217 |       "version": "2.0.0",
218 |       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
219 |       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
220 |       "engines": {
221 |         "node": ">= 0.8"
222 |       }
223 |     },
224 |     "node_modules/destroy": {
225 |       "version": "1.2.0",
226 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
227 |       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
228 |       "engines": {
229 |         "node": ">= 0.8",
230 |         "npm": "1.2.8000 || >= 1.4.16"
231 |       }
232 |     },
233 |     "node_modules/digest-fetch": {
234 |       "version": "1.3.0",
235 |       "resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",
236 |       "integrity": "sha512-CGJuv6iKNM7QyZlM2T3sPAdZWd/p9zQiRNS9G+9COUCwzWFTs0Xp8NF5iePx7wtvhDykReiRRrSeNb4oMmB8lA==",
237 |       "dependencies": {
238 |         "base-64": "^0.1.0",
239 |         "md5": "^2.3.0"
240 |       }
241 |     },
242 |     "node_modules/ee-first": {
243 |       "version": "1.1.1",
244 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
245 |       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
246 |     },
247 |     "node_modules/encodeurl": {
248 |       "version": "1.0.2",
249 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
250 |       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
251 |       "engines": {
252 |         "node": ">= 0.8"
253 |       }
254 |     },
255 |     "node_modules/escape-html": {
256 |       "version": "1.0.3",
257 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
258 |       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
259 |     },
260 |     "node_modules/etag": {
261 |       "version": "1.8.1",
262 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
263 |       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
264 |       "engines": {
265 |         "node": ">= 0.6"
266 |       }
267 |     },
268 |     "node_modules/event-target-shim": {
269 |       "version": "5.0.1",
270 |       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
271 |       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
272 |       "engines": {
273 |         "node": ">=6"
274 |       }
275 |     },
276 |     "node_modules/express": {
277 |       "version": "4.18.2",
278 |       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
279 |       "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
280 |       "dependencies": {
281 |         "accepts": "~1.3.8",
282 |         "array-flatten": "1.1.1",
283 |         "body-parser": "1.20.1",
284 |         "content-disposition": "0.5.4",
285 |         "content-type": "~1.0.4",
286 |         "cookie": "0.5.0",
287 |         "cookie-signature": "1.0.6",
288 |         "debug": "2.6.9",
289 |         "depd": "2.0.0",
290 |         "encodeurl": "~1.0.2",
291 |         "escape-html": "~1.0.3",
292 |         "etag": "~1.8.1",
293 |         "finalhandler": "1.2.0",
294 |         "fresh": "0.5.2",
295 |         "http-errors": "2.0.0",
296 |         "merge-descriptors": "1.0.1",
297 |         "methods": "~1.1.2",
298 |         "on-finished": "2.4.1",
299 |         "parseurl": "~1.3.3",
300 |         "path-to-regexp": "0.1.7",
301 |         "proxy-addr": "~2.0.7",
302 |         "qs": "6.11.0",
303 |         "range-parser": "~1.2.1",
304 |         "safe-buffer": "5.2.1",
305 |         "send": "0.18.0",
306 |         "serve-static": "1.15.0",
307 |         "setprototypeof": "1.2.0",
308 |         "statuses": "2.0.1",
309 |         "type-is": "~1.6.18",
310 |         "utils-merge": "1.0.1",
311 |         "vary": "~1.1.2"
312 |       },
313 |       "engines": {
314 |         "node": ">= 0.10.0"
315 |       }
316 |     },
317 |     "node_modules/express/node_modules/body-parser": {
318 |       "version": "1.20.1",
319 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
320 |       "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
321 |       "dependencies": {
322 |         "bytes": "3.1.2",
323 |         "content-type": "~1.0.4",
324 |         "debug": "2.6.9",
325 |         "depd": "2.0.0",
326 |         "destroy": "1.2.0",
327 |         "http-errors": "2.0.0",
328 |         "iconv-lite": "0.4.24",
329 |         "on-finished": "2.4.1",
330 |         "qs": "6.11.0",
331 |         "raw-body": "2.5.1",
332 |         "type-is": "~1.6.18",
333 |         "unpipe": "1.0.0"
334 |       },
335 |       "engines": {
336 |         "node": ">= 0.8",
337 |         "npm": "1.2.8000 || >= 1.4.16"
338 |       }
339 |     },
340 |     "node_modules/express/node_modules/raw-body": {
341 |       "version": "2.5.1",
342 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
343 |       "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
344 |       "dependencies": {
345 |         "bytes": "3.1.2",
346 |         "http-errors": "2.0.0",
347 |         "iconv-lite": "0.4.24",
348 |         "unpipe": "1.0.0"
349 |       },
350 |       "engines": {
351 |         "node": ">= 0.8"
352 |       }
353 |     },
354 |     "node_modules/finalhandler": {
355 |       "version": "1.2.0",
356 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
357 |       "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
358 |       "dependencies": {
359 |         "debug": "2.6.9",
360 |         "encodeurl": "~1.0.2",
361 |         "escape-html": "~1.0.3",
362 |         "on-finished": "2.4.1",
363 |         "parseurl": "~1.3.3",
364 |         "statuses": "2.0.1",
365 |         "unpipe": "~1.0.0"
366 |       },
367 |       "engines": {
368 |         "node": ">= 0.8"
369 |       }
370 |     },
371 |     "node_modules/form-data": {
372 |       "version": "4.0.0",
373 |       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
374 |       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
375 |       "dependencies": {
376 |         "asynckit": "^0.4.0",
377 |         "combined-stream": "^1.0.8",
378 |         "mime-types": "^2.1.12"
379 |       },
380 |       "engines": {
381 |         "node": ">= 6"
382 |       }
383 |     },
384 |     "node_modules/form-data-encoder": {
385 |       "version": "1.7.2",
386 |       "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
387 |       "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A=="
388 |     },
389 |     "node_modules/formdata-node": {
390 |       "version": "4.4.1",
391 |       "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
392 |       "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
393 |       "dependencies": {
394 |         "node-domexception": "1.0.0",
395 |         "web-streams-polyfill": "4.0.0-beta.3"
396 |       },
397 |       "engines": {
398 |         "node": ">= 12.20"
399 |       }
400 |     },
401 |     "node_modules/forwarded": {
402 |       "version": "0.2.0",
403 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
404 |       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
405 |       "engines": {
406 |         "node": ">= 0.6"
407 |       }
408 |     },
409 |     "node_modules/fresh": {
410 |       "version": "0.5.2",
411 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
412 |       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
413 |       "engines": {
414 |         "node": ">= 0.6"
415 |       }
416 |     },
417 |     "node_modules/function-bind": {
418 |       "version": "1.1.1",
419 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
420 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
421 |     },
422 |     "node_modules/get-intrinsic": {
423 |       "version": "1.2.1",
424 |       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
425 |       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
426 |       "dependencies": {
427 |         "function-bind": "^1.1.1",
428 |         "has": "^1.0.3",
429 |         "has-proto": "^1.0.1",
430 |         "has-symbols": "^1.0.3"
431 |       },
432 |       "funding": {
433 |         "url": "https://github.com/sponsors/ljharb"
434 |       }
435 |     },
436 |     "node_modules/has": {
437 |       "version": "1.0.3",
438 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
439 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
440 |       "dependencies": {
441 |         "function-bind": "^1.1.1"
442 |       },
443 |       "engines": {
444 |         "node": ">= 0.4.0"
445 |       }
446 |     },
447 |     "node_modules/has-proto": {
448 |       "version": "1.0.1",
449 |       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
450 |       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
451 |       "engines": {
452 |         "node": ">= 0.4"
453 |       },
454 |       "funding": {
455 |         "url": "https://github.com/sponsors/ljharb"
456 |       }
457 |     },
458 |     "node_modules/has-symbols": {
459 |       "version": "1.0.3",
460 |       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
461 |       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
462 |       "engines": {
463 |         "node": ">= 0.4"
464 |       },
465 |       "funding": {
466 |         "url": "https://github.com/sponsors/ljharb"
467 |       }
468 |     },
469 |     "node_modules/http-errors": {
470 |       "version": "2.0.0",
471 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
472 |       "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
473 |       "dependencies": {
474 |         "depd": "2.0.0",
475 |         "inherits": "2.0.4",
476 |         "setprototypeof": "1.2.0",
477 |         "statuses": "2.0.1",
478 |         "toidentifier": "1.0.1"
479 |       },
480 |       "engines": {
481 |         "node": ">= 0.8"
482 |       }
483 |     },
484 |     "node_modules/humanize-ms": {
485 |       "version": "1.2.1",
486 |       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
487 |       "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
488 |       "dependencies": {
489 |         "ms": "^2.0.0"
490 |       }
491 |     },
492 |     "node_modules/iconv-lite": {
493 |       "version": "0.4.24",
494 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
495 |       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
496 |       "dependencies": {
497 |         "safer-buffer": ">= 2.1.2 < 3"
498 |       },
499 |       "engines": {
500 |         "node": ">=0.10.0"
501 |       }
502 |     },
503 |     "node_modules/inherits": {
504 |       "version": "2.0.4",
505 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
506 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
507 |     },
508 |     "node_modules/ipaddr.js": {
509 |       "version": "1.9.1",
510 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
511 |       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
512 |       "engines": {
513 |         "node": ">= 0.10"
514 |       }
515 |     },
516 |     "node_modules/is-buffer": {
517 |       "version": "1.1.6",
518 |       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
519 |       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
520 |     },
521 |     "node_modules/md5": {
522 |       "version": "2.3.0",
523 |       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
524 |       "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
525 |       "dependencies": {
526 |         "charenc": "0.0.2",
527 |         "crypt": "0.0.2",
528 |         "is-buffer": "~1.1.6"
529 |       }
530 |     },
531 |     "node_modules/media-typer": {
532 |       "version": "0.3.0",
533 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
534 |       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
535 |       "engines": {
536 |         "node": ">= 0.6"
537 |       }
538 |     },
539 |     "node_modules/merge-descriptors": {
540 |       "version": "1.0.1",
541 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
542 |       "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
543 |     },
544 |     "node_modules/methods": {
545 |       "version": "1.1.2",
546 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
547 |       "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
548 |       "engines": {
549 |         "node": ">= 0.6"
550 |       }
551 |     },
552 |     "node_modules/mime": {
553 |       "version": "1.6.0",
554 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
555 |       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
556 |       "bin": {
557 |         "mime": "cli.js"
558 |       },
559 |       "engines": {
560 |         "node": ">=4"
561 |       }
562 |     },
563 |     "node_modules/mime-db": {
564 |       "version": "1.52.0",
565 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
566 |       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
567 |       "engines": {
568 |         "node": ">= 0.6"
569 |       }
570 |     },
571 |     "node_modules/mime-types": {
572 |       "version": "2.1.35",
573 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
574 |       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
575 |       "dependencies": {
576 |         "mime-db": "1.52.0"
577 |       },
578 |       "engines": {
579 |         "node": ">= 0.6"
580 |       }
581 |     },
582 |     "node_modules/ms": {
583 |       "version": "2.1.3",
584 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
585 |       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
586 |     },
587 |     "node_modules/negotiator": {
588 |       "version": "0.6.3",
589 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
590 |       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
591 |       "engines": {
592 |         "node": ">= 0.6"
593 |       }
594 |     },
595 |     "node_modules/node-domexception": {
596 |       "version": "1.0.0",
597 |       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
598 |       "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
599 |       "funding": [
600 |         {
601 |           "type": "github",
602 |           "url": "https://github.com/sponsors/jimmywarting"
603 |         },
604 |         {
605 |           "type": "github",
606 |           "url": "https://paypal.me/jimmywarting"
607 |         }
608 |       ],
609 |       "engines": {
610 |         "node": ">=10.5.0"
611 |       }
612 |     },
613 |     "node_modules/node-fetch": {
614 |       "version": "2.7.0",
615 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
616 |       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
617 |       "dependencies": {
618 |         "whatwg-url": "^5.0.0"
619 |       },
620 |       "engines": {
621 |         "node": "4.x || >=6.0.0"
622 |       },
623 |       "peerDependencies": {
624 |         "encoding": "^0.1.0"
625 |       },
626 |       "peerDependenciesMeta": {
627 |         "encoding": {
628 |           "optional": true
629 |         }
630 |       }
631 |     },
632 |     "node_modules/object-assign": {
633 |       "version": "4.1.1",
634 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
635 |       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
636 |       "engines": {
637 |         "node": ">=0.10.0"
638 |       }
639 |     },
640 |     "node_modules/object-inspect": {
641 |       "version": "1.12.3",
642 |       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
643 |       "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
644 |       "funding": {
645 |         "url": "https://github.com/sponsors/ljharb"
646 |       }
647 |     },
648 |     "node_modules/on-finished": {
649 |       "version": "2.4.1",
650 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
651 |       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
652 |       "dependencies": {
653 |         "ee-first": "1.1.1"
654 |       },
655 |       "engines": {
656 |         "node": ">= 0.8"
657 |       }
658 |     },
659 |     "node_modules/openai": {
660 |       "version": "4.7.1",
661 |       "resolved": "https://registry.npmjs.org/openai/-/openai-4.7.1.tgz",
662 |       "integrity": "sha512-4Um9A4aLGzZxyENyway0zVgi69BOxaqXmjOCKp3PUteOvSn9TeVf6IjkaNY8k/LXYG5l2e7PpacOl2sxsrTc/w==",
663 |       "dependencies": {
664 |         "@types/node": "^18.11.18",
665 |         "@types/node-fetch": "^2.6.4",
666 |         "abort-controller": "^3.0.0",
667 |         "agentkeepalive": "^4.2.1",
668 |         "digest-fetch": "^1.3.0",
669 |         "form-data-encoder": "1.7.2",
670 |         "formdata-node": "^4.3.2",
671 |         "node-fetch": "^2.6.7"
672 |       },
673 |       "bin": {
674 |         "openai": "bin/cli"
675 |       }
676 |     },
677 |     "node_modules/parseurl": {
678 |       "version": "1.3.3",
679 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
680 |       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
681 |       "engines": {
682 |         "node": ">= 0.8"
683 |       }
684 |     },
685 |     "node_modules/path-to-regexp": {
686 |       "version": "0.1.7",
687 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
688 |       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
689 |     },
690 |     "node_modules/proxy-addr": {
691 |       "version": "2.0.7",
692 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
693 |       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
694 |       "dependencies": {
695 |         "forwarded": "0.2.0",
696 |         "ipaddr.js": "1.9.1"
697 |       },
698 |       "engines": {
699 |         "node": ">= 0.10"
700 |       }
701 |     },
702 |     "node_modules/qs": {
703 |       "version": "6.11.0",
704 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
705 |       "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
706 |       "dependencies": {
707 |         "side-channel": "^1.0.4"
708 |       },
709 |       "engines": {
710 |         "node": ">=0.6"
711 |       },
712 |       "funding": {
713 |         "url": "https://github.com/sponsors/ljharb"
714 |       }
715 |     },
716 |     "node_modules/range-parser": {
717 |       "version": "1.2.1",
718 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
719 |       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
720 |       "engines": {
721 |         "node": ">= 0.6"
722 |       }
723 |     },
724 |     "node_modules/raw-body": {
725 |       "version": "2.5.2",
726 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
727 |       "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
728 |       "dependencies": {
729 |         "bytes": "3.1.2",
730 |         "http-errors": "2.0.0",
731 |         "iconv-lite": "0.4.24",
732 |         "unpipe": "1.0.0"
733 |       },
734 |       "engines": {
735 |         "node": ">= 0.8"
736 |       }
737 |     },
738 |     "node_modules/safe-buffer": {
739 |       "version": "5.2.1",
740 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
741 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
742 |       "funding": [
743 |         {
744 |           "type": "github",
745 |           "url": "https://github.com/sponsors/feross"
746 |         },
747 |         {
748 |           "type": "patreon",
749 |           "url": "https://www.patreon.com/feross"
750 |         },
751 |         {
752 |           "type": "consulting",
753 |           "url": "https://feross.org/support"
754 |         }
755 |       ]
756 |     },
757 |     "node_modules/safer-buffer": {
758 |       "version": "2.1.2",
759 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
760 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
761 |     },
762 |     "node_modules/send": {
763 |       "version": "0.18.0",
764 |       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
765 |       "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
766 |       "dependencies": {
767 |         "debug": "2.6.9",
768 |         "depd": "2.0.0",
769 |         "destroy": "1.2.0",
770 |         "encodeurl": "~1.0.2",
771 |         "escape-html": "~1.0.3",
772 |         "etag": "~1.8.1",
773 |         "fresh": "0.5.2",
774 |         "http-errors": "2.0.0",
775 |         "mime": "1.6.0",
776 |         "ms": "2.1.3",
777 |         "on-finished": "2.4.1",
778 |         "range-parser": "~1.2.1",
779 |         "statuses": "2.0.1"
780 |       },
781 |       "engines": {
782 |         "node": ">= 0.8.0"
783 |       }
784 |     },
785 |     "node_modules/serve-static": {
786 |       "version": "1.15.0",
787 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
788 |       "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
789 |       "dependencies": {
790 |         "encodeurl": "~1.0.2",
791 |         "escape-html": "~1.0.3",
792 |         "parseurl": "~1.3.3",
793 |         "send": "0.18.0"
794 |       },
795 |       "engines": {
796 |         "node": ">= 0.8.0"
797 |       }
798 |     },
799 |     "node_modules/setprototypeof": {
800 |       "version": "1.2.0",
801 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
802 |       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
803 |     },
804 |     "node_modules/side-channel": {
805 |       "version": "1.0.4",
806 |       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
807 |       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
808 |       "dependencies": {
809 |         "call-bind": "^1.0.0",
810 |         "get-intrinsic": "^1.0.2",
811 |         "object-inspect": "^1.9.0"
812 |       },
813 |       "funding": {
814 |         "url": "https://github.com/sponsors/ljharb"
815 |       }
816 |     },
817 |     "node_modules/statuses": {
818 |       "version": "2.0.1",
819 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
820 |       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
821 |       "engines": {
822 |         "node": ">= 0.8"
823 |       }
824 |     },
825 |     "node_modules/toidentifier": {
826 |       "version": "1.0.1",
827 |       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
828 |       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
829 |       "engines": {
830 |         "node": ">=0.6"
831 |       }
832 |     },
833 |     "node_modules/tr46": {
834 |       "version": "0.0.3",
835 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
836 |       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
837 |     },
838 |     "node_modules/type-is": {
839 |       "version": "1.6.18",
840 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
841 |       "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
842 |       "dependencies": {
843 |         "media-typer": "0.3.0",
844 |         "mime-types": "~2.1.24"
845 |       },
846 |       "engines": {
847 |         "node": ">= 0.6"
848 |       }
849 |     },
850 |     "node_modules/unpipe": {
851 |       "version": "1.0.0",
852 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
853 |       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
854 |       "engines": {
855 |         "node": ">= 0.8"
856 |       }
857 |     },
858 |     "node_modules/utils-merge": {
859 |       "version": "1.0.1",
860 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
861 |       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
862 |       "engines": {
863 |         "node": ">= 0.4.0"
864 |       }
865 |     },
866 |     "node_modules/vary": {
867 |       "version": "1.1.2",
868 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
869 |       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
870 |       "engines": {
871 |         "node": ">= 0.8"
872 |       }
873 |     },
874 |     "node_modules/web-streams-polyfill": {
875 |       "version": "4.0.0-beta.3",
876 |       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
877 |       "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
878 |       "engines": {
879 |         "node": ">= 14"
880 |       }
881 |     },
882 |     "node_modules/webidl-conversions": {
883 |       "version": "3.0.1",
884 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
885 |       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
886 |     },
887 |     "node_modules/whatwg-url": {
888 |       "version": "5.0.0",
889 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
890 |       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
891 |       "dependencies": {
892 |         "tr46": "~0.0.3",
893 |         "webidl-conversions": "^3.0.0"
894 |       }
895 |     }
896 |   }
897 | }
898 | 


--------------------------------------------------------------------------------
/e2b-playground/agent/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "agent",
 3 |   "version": "1.0.0",
 4 |   "type": "module",
 5 |   "description": "",
 6 |   "main": "agent.js",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "body-parser": "^1.20.2",
15 |     "cors": "^2.8.5",
16 |     "express": "^4.18.2",
17 |     "openai": "^4.7.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/e2b-playground/agent/system_prompt.txt:
--------------------------------------------------------------------------------
 1 | You're a creator of the popular shadcn UI library, TailwindCSS, and you're a master React developer. You always follow the instructions you were given.
 2 | Your frontend skills of building React components are unmatched.
 3 | You can build any component just by using JSX, Tailwind css classes, and the shadcn UI library.
 4 | Your task is to generate a code for React component that is styled using the Tailwind css classes.
 5 | 
 6 | Your job IS NOT to add any logic, you only generate the JSX code for UI. NEVER add ANY LOGIC. Just generate the UI.
 7 | 
 8 | MAKE SURE TO PROPERLY ESCAPE JSON
 9 | 
10 | Here's a description of the UI React component that you need to create:


--------------------------------------------------------------------------------
/e2b-playground/dbk-og.toml:
--------------------------------------------------------------------------------
1 | # This is a config for a Devbook environment
2 | 
3 | title = "v0s"
4 | template = "Nodejs"
5 | id = "pTqrJ3prLCDI"
6 | 
7 | [filesystem]
8 | local_root = "."
9 | 


--------------------------------------------------------------------------------
/e2b-playground/dbk.toml:
--------------------------------------------------------------------------------
1 | # This is a config for a Devbook environment
2 | 
3 | title = "e2b-v0s-demo"
4 | template = "Nodejs"
5 | id = "TePaMNZBUWNr"
6 | 
7 | [filesystem]
8 | local_root = "."
9 | 


--------------------------------------------------------------------------------
/e2b-playground/template/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/e2b-playground/template/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/e2b-playground/template/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
18 | 
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
20 | 
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 | 
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 | 
25 | ## Learn More
26 | 
27 | To learn more about Next.js, take a look at the following resources:
28 | 
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 | 
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 | 
34 | ## Deploy on Vercel
35 | 
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 | 
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": false,
 5 |   "tsx": false,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "pages/styles/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/e2b-playground/template/components/Component.jsx:
--------------------------------------------------------------------------------
1 |   export default function Component() {
2 |     return (
3 |       <div></div>
4 |     );
5 |   }
6 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/accordion.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 3 | import { ChevronDown } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Accordion = AccordionPrimitive.Root
 8 | 
 9 | const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
10 |   <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
11 | ))
12 | AccordionItem.displayName = "AccordionItem"
13 | 
14 | const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
15 |   <AccordionPrimitive.Header className="flex">
16 |     <AccordionPrimitive.Trigger
17 |       ref={ref}
18 |       className={cn(
19 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
20 |         className
21 |       )}
22 |       {...props}>
23 |       {children}
24 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
25 |     </AccordionPrimitive.Trigger>
26 |   </AccordionPrimitive.Header>
27 | ))
28 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
29 | 
30 | const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
31 |   <AccordionPrimitive.Content
32 |     ref={ref}
33 |     className={cn(
34 |       "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
35 |       className
36 |     )}
37 |     {...props}>
38 |     <div className="pb-4 pt-0">{children}</div>
39 |   </AccordionPrimitive.Content>
40 | ))
41 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
42 | 
43 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
44 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/alert-dialog.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = ({
 12 |   className,
 13 |   ...props
 14 | }) => (
 15 |   <AlertDialogPrimitive.Portal className={cn(className)} {...props} />
 16 | )
 17 | AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
 18 | 
 19 | const AlertDialogOverlay = React.forwardRef(({ className, children, ...props }, ref) => (
 20 |   <AlertDialogPrimitive.Overlay
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |     ref={ref} />
 27 | ))
 28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 29 | 
 30 | const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
 31 |   <AlertDialogPortal>
 32 |     <AlertDialogOverlay />
 33 |     <AlertDialogPrimitive.Content
 34 |       ref={ref}
 35 |       className={cn(
 36 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
 37 |         className
 38 |       )}
 39 |       {...props} />
 40 |   </AlertDialogPortal>
 41 | ))
 42 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 43 | 
 44 | const AlertDialogHeader = ({
 45 |   className,
 46 |   ...props
 47 | }) => (
 48 |   <div
 49 |     className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
 50 |     {...props} />
 51 | )
 52 | AlertDialogHeader.displayName = "AlertDialogHeader"
 53 | 
 54 | const AlertDialogFooter = ({
 55 |   className,
 56 |   ...props
 57 | }) => (
 58 |   <div
 59 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 60 |     {...props} />
 61 | )
 62 | AlertDialogFooter.displayName = "AlertDialogFooter"
 63 | 
 64 | const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
 65 |   <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
 66 | ))
 67 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 68 | 
 69 | const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
 70 |   <AlertDialogPrimitive.Description
 71 |     ref={ref}
 72 |     className={cn("text-sm text-muted-foreground", className)}
 73 |     {...props} />
 74 | ))
 75 | AlertDialogDescription.displayName =
 76 |   AlertDialogPrimitive.Description.displayName
 77 | 
 78 | const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
 79 |   <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
 80 | ))
 81 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 82 | 
 83 | const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
 84 |   <AlertDialogPrimitive.Cancel
 85 |     ref={ref}
 86 |     className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
 87 |     {...props} />
 88 | ))
 89 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 90 | 
 91 | export {
 92 |   AlertDialog,
 93 |   AlertDialogTrigger,
 94 |   AlertDialogContent,
 95 |   AlertDialogHeader,
 96 |   AlertDialogFooter,
 97 |   AlertDialogTitle,
 98 |   AlertDialogDescription,
 99 |   AlertDialogAction,
100 |   AlertDialogCancel,
101 | }
102 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/alert.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
23 |   <div
24 |     ref={ref}
25 |     role="alert"
26 |     className={cn(alertVariants({ variant }), className)}
27 |     {...props} />
28 | ))
29 | Alert.displayName = "Alert"
30 | 
31 | const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
32 |   <h5
33 |     ref={ref}
34 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
35 |     {...props} />
36 | ))
37 | AlertTitle.displayName = "AlertTitle"
38 | 
39 | const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
40 |   <div
41 |     ref={ref}
42 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
43 |     {...props} />
44 | ))
45 | AlertDescription.displayName = "AlertDescription"
46 | 
47 | export { Alert, AlertTitle, AlertDescription }
48 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/aspect-ratio.jsx:
--------------------------------------------------------------------------------
1 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
2 | 
3 | const AspectRatio = AspectRatioPrimitive.Root
4 | 
5 | export { AspectRatio }
6 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/avatar.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Avatar = React.forwardRef(({ className, ...props }, ref) => (
 7 |   <AvatarPrimitive.Root
 8 |     ref={ref}
 9 |     className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
10 |     {...props} />
11 | ))
12 | Avatar.displayName = AvatarPrimitive.Root.displayName
13 | 
14 | const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
15 |   <AvatarPrimitive.Image
16 |     ref={ref}
17 |     className={cn("aspect-square h-full w-full", className)}
18 |     {...props} />
19 | ))
20 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
21 | 
22 | const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
23 |   <AvatarPrimitive.Fallback
24 |     ref={ref}
25 |     className={cn(
26 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
27 |       className
28 |     )}
29 |     {...props} />
30 | ))
31 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
32 | 
33 | export { Avatar, AvatarImage, AvatarFallback }
34 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/badge.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | function Badge({
27 |   className,
28 |   variant,
29 |   ...props
30 | }) {
31 |   return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
32 | }
33 | 
34 | export { Badge, badgeVariants }
35 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/button.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
37 |   const Comp = asChild ? Slot : "button"
38 |   return (
39 |     (<Comp
40 |       className={cn(buttonVariants({ variant, size, className }))}
41 |       ref={ref}
42 |       {...props} />)
43 |   );
44 | })
45 | Button.displayName = "Button"
46 | 
47 | export { Button, buttonVariants }
48 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/calendar.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { ChevronLeft, ChevronRight } from "lucide-react"
 3 | import { DayPicker } from "react-day-picker"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { buttonVariants } from "@/components/ui/button"
 7 | 
 8 | function Calendar({
 9 |   className,
10 |   classNames,
11 |   showOutsideDays = true,
12 |   ...props
13 | }) {
14 |   return (
15 |     (<DayPicker
16 |       showOutsideDays={showOutsideDays}
17 |       className={cn("p-3", className)}
18 |       classNames={{
19 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
20 |         month: "space-y-4",
21 |         caption: "flex justify-center pt-1 relative items-center",
22 |         caption_label: "text-sm font-medium",
23 |         nav: "space-x-1 flex items-center",
24 |         nav_button: cn(
25 |           buttonVariants({ variant: "outline" }),
26 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
27 |         ),
28 |         nav_button_previous: "absolute left-1",
29 |         nav_button_next: "absolute right-1",
30 |         table: "w-full border-collapse space-y-1",
31 |         head_row: "flex",
32 |         head_cell:
33 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
34 |         row: "flex w-full mt-2",
35 |         cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
36 |         day: cn(
37 |           buttonVariants({ variant: "ghost" }),
38 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
39 |         ),
40 |         day_selected:
41 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
42 |         day_today: "bg-accent text-accent-foreground",
43 |         day_outside: "text-muted-foreground opacity-50",
44 |         day_disabled: "text-muted-foreground opacity-50",
45 |         day_range_middle:
46 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
47 |         day_hidden: "invisible",
48 |         ...classNames,
49 |       }}
50 |       components={{
51 |         IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
52 |         IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
53 |       }}
54 |       {...props} />)
55 |   );
56 | }
57 | Calendar.displayName = "Calendar"
58 | 
59 | export { Calendar }
60 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/card.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef(({ className, ...props }, ref) => (
 6 |   <div
 7 |     ref={ref}
 8 |     className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
 9 |     {...props} />
10 | ))
11 | Card.displayName = "Card"
12 | 
13 | const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
14 |   <div
15 |     ref={ref}
16 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
17 |     {...props} />
18 | ))
19 | CardHeader.displayName = "CardHeader"
20 | 
21 | const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
22 |   <h3
23 |     ref={ref}
24 |     className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
25 |     {...props} />
26 | ))
27 | CardTitle.displayName = "CardTitle"
28 | 
29 | const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
30 |   <p
31 |     ref={ref}
32 |     className={cn("text-sm text-muted-foreground", className)}
33 |     {...props} />
34 | ))
35 | CardDescription.displayName = "CardDescription"
36 | 
37 | const CardContent = React.forwardRef(({ className, ...props }, ref) => (
38 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
39 | ))
40 | CardContent.displayName = "CardContent"
41 | 
42 | const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
43 |   <div
44 |     ref={ref}
45 |     className={cn("flex items-center p-6 pt-0", className)}
46 |     {...props} />
47 | ))
48 | CardFooter.displayName = "CardFooter"
49 | 
50 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
51 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/checkbox.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
 8 |   <CheckboxPrimitive.Root
 9 |     ref={ref}
10 |     className={cn(
11 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
12 |       className
13 |     )}
14 |     {...props}>
15 |     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
16 |       <Check className="h-4 w-4" />
17 |     </CheckboxPrimitive.Indicator>
18 |   </CheckboxPrimitive.Root>
19 | ))
20 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
21 | 
22 | export { Checkbox }
23 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/collapsible.jsx:
--------------------------------------------------------------------------------
 1 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 2 | 
 3 | const Collapsible = CollapsiblePrimitive.Root
 4 | 
 5 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 6 | 
 7 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 8 | 
 9 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
10 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/command.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Command as CommandPrimitive } from "cmdk"
  3 | import { Search } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  7 | 
  8 | const Command = React.forwardRef(({ className, ...props }, ref) => (
  9 |   <CommandPrimitive
 10 |     ref={ref}
 11 |     className={cn(
 12 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 13 |       className
 14 |     )}
 15 |     {...props} />
 16 | ))
 17 | Command.displayName = CommandPrimitive.displayName
 18 | 
 19 | const CommandDialog = ({
 20 |   children,
 21 |   ...props
 22 | }) => {
 23 |   return (
 24 |     (<Dialog {...props}>
 25 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 26 |         <Command
 27 |           className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 28 |           {children}
 29 |         </Command>
 30 |       </DialogContent>
 31 |     </Dialog>)
 32 |   );
 33 | }
 34 | 
 35 | const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
 36 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 37 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 38 |     <CommandPrimitive.Input
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 42 |         className
 43 |       )}
 44 |       {...props} />
 45 |   </div>
 46 | ))
 47 | 
 48 | CommandInput.displayName = CommandPrimitive.Input.displayName
 49 | 
 50 | const CommandList = React.forwardRef(({ className, ...props }, ref) => (
 51 |   <CommandPrimitive.List
 52 |     ref={ref}
 53 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 54 |     {...props} />
 55 | ))
 56 | 
 57 | CommandList.displayName = CommandPrimitive.List.displayName
 58 | 
 59 | const CommandEmpty = React.forwardRef((props, ref) => (
 60 |   <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 61 | ))
 62 | 
 63 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 64 | 
 65 | const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
 66 |   <CommandPrimitive.Group
 67 |     ref={ref}
 68 |     className={cn(
 69 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 70 |       className
 71 |     )}
 72 |     {...props} />
 73 | ))
 74 | 
 75 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 76 | 
 77 | const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
 78 |   <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
 79 | ))
 80 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 81 | 
 82 | const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
 83 |   <CommandPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 87 |       className
 88 |     )}
 89 |     {...props} />
 90 | ))
 91 | 
 92 | CommandItem.displayName = CommandPrimitive.Item.displayName
 93 | 
 94 | const CommandShortcut = ({
 95 |   className,
 96 |   ...props
 97 | }) => {
 98 |   return (
 99 |     (<span
100 |       className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
101 |       {...props} />)
102 |   );
103 | }
104 | CommandShortcut.displayName = "CommandShortcut"
105 | 
106 | export {
107 |   Command,
108 |   CommandDialog,
109 |   CommandInput,
110 |   CommandList,
111 |   CommandEmpty,
112 |   CommandGroup,
113 |   CommandItem,
114 |   CommandShortcut,
115 |   CommandSeparator,
116 | }
117 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/context-menu.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const ContextMenu = ContextMenuPrimitive.Root
  8 | 
  9 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 10 | 
 11 | const ContextMenuGroup = ContextMenuPrimitive.Group
 12 | 
 13 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 14 | 
 15 | const ContextMenuSub = ContextMenuPrimitive.Sub
 16 | 
 17 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 18 | 
 19 | const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
 20 |   <ContextMenuPrimitive.SubTrigger
 21 |     ref={ref}
 22 |     className={cn(
 23 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 24 |       inset && "pl-8",
 25 |       className
 26 |     )}
 27 |     {...props}>
 28 |     {children}
 29 |     <ChevronRight className="ml-auto h-4 w-4" />
 30 |   </ContextMenuPrimitive.SubTrigger>
 31 | ))
 32 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 33 | 
 34 | const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
 35 |   <ContextMenuPrimitive.SubContent
 36 |     ref={ref}
 37 |     className={cn(
 38 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
 39 |       className
 40 |     )}
 41 |     {...props} />
 42 | ))
 43 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 44 | 
 45 | const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
 46 |   <ContextMenuPrimitive.Portal>
 47 |     <ContextMenuPrimitive.Content
 48 |       ref={ref}
 49 |       className={cn(
 50 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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",
 51 |         className
 52 |       )}
 53 |       {...props} />
 54 |   </ContextMenuPrimitive.Portal>
 55 | ))
 56 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 57 | 
 58 | const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
 59 |   <ContextMenuPrimitive.Item
 60 |     ref={ref}
 61 |     className={cn(
 62 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 63 |       inset && "pl-8",
 64 |       className
 65 |     )}
 66 |     {...props} />
 67 | ))
 68 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 69 | 
 70 | const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
 71 |   <ContextMenuPrimitive.CheckboxItem
 72 |     ref={ref}
 73 |     className={cn(
 74 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 75 |       className
 76 |     )}
 77 |     checked={checked}
 78 |     {...props}>
 79 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 80 |       <ContextMenuPrimitive.ItemIndicator>
 81 |         <Check className="h-4 w-4" />
 82 |       </ContextMenuPrimitive.ItemIndicator>
 83 |     </span>
 84 |     {children}
 85 |   </ContextMenuPrimitive.CheckboxItem>
 86 | ))
 87 | ContextMenuCheckboxItem.displayName =
 88 |   ContextMenuPrimitive.CheckboxItem.displayName
 89 | 
 90 | const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
 91 |   <ContextMenuPrimitive.RadioItem
 92 |     ref={ref}
 93 |     className={cn(
 94 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 95 |       className
 96 |     )}
 97 |     {...props}>
 98 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 99 |       <ContextMenuPrimitive.ItemIndicator>
100 |         <Circle className="h-2 w-2 fill-current" />
101 |       </ContextMenuPrimitive.ItemIndicator>
102 |     </span>
103 |     {children}
104 |   </ContextMenuPrimitive.RadioItem>
105 | ))
106 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
107 | 
108 | const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
109 |   <ContextMenuPrimitive.Label
110 |     ref={ref}
111 |     className={cn(
112 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
113 |       inset && "pl-8",
114 |       className
115 |     )}
116 |     {...props} />
117 | ))
118 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
119 | 
120 | const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
121 |   <ContextMenuPrimitive.Separator
122 |     ref={ref}
123 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
124 |     {...props} />
125 | ))
126 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
127 | 
128 | const ContextMenuShortcut = ({
129 |   className,
130 |   ...props
131 | }) => {
132 |   return (
133 |     (<span
134 |       className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
135 |       {...props} />)
136 |   );
137 | }
138 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
139 | 
140 | export {
141 |   ContextMenu,
142 |   ContextMenuTrigger,
143 |   ContextMenuContent,
144 |   ContextMenuItem,
145 |   ContextMenuCheckboxItem,
146 |   ContextMenuRadioItem,
147 |   ContextMenuLabel,
148 |   ContextMenuSeparator,
149 |   ContextMenuShortcut,
150 |   ContextMenuGroup,
151 |   ContextMenuPortal,
152 |   ContextMenuSub,
153 |   ContextMenuSubContent,
154 |   ContextMenuSubTrigger,
155 |   ContextMenuRadioGroup,
156 | }
157 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/dialog.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
 3 | import { X } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Dialog = DialogPrimitive.Root
 8 | 
 9 | const DialogTrigger = DialogPrimitive.Trigger
10 | 
11 | const DialogPortal = ({
12 |   className,
13 |   ...props
14 | }) => (
15 |   <DialogPrimitive.Portal className={cn(className)} {...props} />
16 | )
17 | DialogPortal.displayName = DialogPrimitive.Portal.displayName
18 | 
19 | const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
20 |   <DialogPrimitive.Overlay
21 |     ref={ref}
22 |     className={cn(
23 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
24 |       className
25 |     )}
26 |     {...props} />
27 | ))
28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29 | 
30 | const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
31 |   <DialogPortal>
32 |     <DialogOverlay />
33 |     <DialogPrimitive.Content
34 |       ref={ref}
35 |       className={cn(
36 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
37 |         className
38 |       )}
39 |       {...props}>
40 |       {children}
41 |       <DialogPrimitive.Close
42 |         className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
43 |         <X className="h-4 w-4" />
44 |         <span className="sr-only">Close</span>
45 |       </DialogPrimitive.Close>
46 |     </DialogPrimitive.Content>
47 |   </DialogPortal>
48 | ))
49 | DialogContent.displayName = DialogPrimitive.Content.displayName
50 | 
51 | const DialogHeader = ({
52 |   className,
53 |   ...props
54 | }) => (
55 |   <div
56 |     className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
57 |     {...props} />
58 | )
59 | DialogHeader.displayName = "DialogHeader"
60 | 
61 | const DialogFooter = ({
62 |   className,
63 |   ...props
64 | }) => (
65 |   <div
66 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
67 |     {...props} />
68 | )
69 | DialogFooter.displayName = "DialogFooter"
70 | 
71 | const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
72 |   <DialogPrimitive.Title
73 |     ref={ref}
74 |     className={cn("text-lg font-semibold leading-none tracking-tight", className)}
75 |     {...props} />
76 | ))
77 | DialogTitle.displayName = DialogPrimitive.Title.displayName
78 | 
79 | const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
80 |   <DialogPrimitive.Description
81 |     ref={ref}
82 |     className={cn("text-sm text-muted-foreground", className)}
83 |     {...props} />
84 | ))
85 | DialogDescription.displayName = DialogPrimitive.Description.displayName
86 | 
87 | export {
88 |   Dialog,
89 |   DialogTrigger,
90 |   DialogContent,
91 |   DialogHeader,
92 |   DialogFooter,
93 |   DialogTitle,
94 |   DialogDescription,
95 | }
96 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/dropdown-menu.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
 20 |   <DropdownMenuPrimitive.SubTrigger
 21 |     ref={ref}
 22 |     className={cn(
 23 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 24 |       inset && "pl-8",
 25 |       className
 26 |     )}
 27 |     {...props}>
 28 |     {children}
 29 |     <ChevronRight className="ml-auto h-4 w-4" />
 30 |   </DropdownMenuPrimitive.SubTrigger>
 31 | ))
 32 | DropdownMenuSubTrigger.displayName =
 33 |   DropdownMenuPrimitive.SubTrigger.displayName
 34 | 
 35 | const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
 36 |   <DropdownMenuPrimitive.SubContent
 37 |     ref={ref}
 38 |     className={cn(
 39 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
 40 |       className
 41 |     )}
 42 |     {...props} />
 43 | ))
 44 | DropdownMenuSubContent.displayName =
 45 |   DropdownMenuPrimitive.SubContent.displayName
 46 | 
 47 | const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
 48 |   <DropdownMenuPrimitive.Portal>
 49 |     <DropdownMenuPrimitive.Content
 50 |       ref={ref}
 51 |       sideOffset={sideOffset}
 52 |       className={cn(
 53 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
 54 |         className
 55 |       )}
 56 |       {...props} />
 57 |   </DropdownMenuPrimitive.Portal>
 58 | ))
 59 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 60 | 
 61 | const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
 62 |   <DropdownMenuPrimitive.Item
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 66 |       inset && "pl-8",
 67 |       className
 68 |     )}
 69 |     {...props} />
 70 | ))
 71 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 72 | 
 73 | const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
 74 |   <DropdownMenuPrimitive.CheckboxItem
 75 |     ref={ref}
 76 |     className={cn(
 77 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 78 |       className
 79 |     )}
 80 |     checked={checked}
 81 |     {...props}>
 82 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 83 |       <DropdownMenuPrimitive.ItemIndicator>
 84 |         <Check className="h-4 w-4" />
 85 |       </DropdownMenuPrimitive.ItemIndicator>
 86 |     </span>
 87 |     {children}
 88 |   </DropdownMenuPrimitive.CheckboxItem>
 89 | ))
 90 | DropdownMenuCheckboxItem.displayName =
 91 |   DropdownMenuPrimitive.CheckboxItem.displayName
 92 | 
 93 | const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
 94 |   <DropdownMenuPrimitive.RadioItem
 95 |     ref={ref}
 96 |     className={cn(
 97 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 98 |       className
 99 |     )}
100 |     {...props}>
101 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
102 |       <DropdownMenuPrimitive.ItemIndicator>
103 |         <Circle className="h-2 w-2 fill-current" />
104 |       </DropdownMenuPrimitive.ItemIndicator>
105 |     </span>
106 |     {children}
107 |   </DropdownMenuPrimitive.RadioItem>
108 | ))
109 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
110 | 
111 | const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
112 |   <DropdownMenuPrimitive.Label
113 |     ref={ref}
114 |     className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
115 |     {...props} />
116 | ))
117 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
118 | 
119 | const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
120 |   <DropdownMenuPrimitive.Separator
121 |     ref={ref}
122 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
123 |     {...props} />
124 | ))
125 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
126 | 
127 | const DropdownMenuShortcut = ({
128 |   className,
129 |   ...props
130 | }) => {
131 |   return (
132 |     (<span
133 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
134 |       {...props} />)
135 |   );
136 | }
137 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
138 | 
139 | export {
140 |   DropdownMenu,
141 |   DropdownMenuTrigger,
142 |   DropdownMenuContent,
143 |   DropdownMenuItem,
144 |   DropdownMenuCheckboxItem,
145 |   DropdownMenuRadioItem,
146 |   DropdownMenuLabel,
147 |   DropdownMenuSeparator,
148 |   DropdownMenuShortcut,
149 |   DropdownMenuGroup,
150 |   DropdownMenuPortal,
151 |   DropdownMenuSub,
152 |   DropdownMenuSubContent,
153 |   DropdownMenuSubTrigger,
154 |   DropdownMenuRadioGroup,
155 | }
156 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/form.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { Controller, FormProvider, useFormContext } from "react-hook-form";
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | import { Label } from "@/components/ui/label"
  7 | 
  8 | const Form = FormProvider
  9 | 
 10 | const FormFieldContext = React.createContext({})
 11 | 
 12 | const FormField = (
 13 |   {
 14 |     ...props
 15 |   }
 16 | ) => {
 17 |   return (
 18 |     (<FormFieldContext.Provider value={{ name: props.name }}>
 19 |       <Controller {...props} />
 20 |     </FormFieldContext.Provider>)
 21 |   );
 22 | }
 23 | 
 24 | const useFormField = () => {
 25 |   const fieldContext = React.useContext(FormFieldContext)
 26 |   const itemContext = React.useContext(FormItemContext)
 27 |   const { getFieldState, formState } = useFormContext()
 28 | 
 29 |   const fieldState = getFieldState(fieldContext.name, formState)
 30 | 
 31 |   if (!fieldContext) {
 32 |     throw new Error("useFormField should be used within <FormField>")
 33 |   }
 34 | 
 35 |   const { id } = itemContext
 36 | 
 37 |   return {
 38 |     id,
 39 |     name: fieldContext.name,
 40 |     formItemId: `${id}-form-item`,
 41 |     formDescriptionId: `${id}-form-item-description`,
 42 |     formMessageId: `${id}-form-item-message`,
 43 |     ...fieldState,
 44 |   }
 45 | }
 46 | 
 47 | const FormItemContext = React.createContext({})
 48 | 
 49 | const FormItem = React.forwardRef(({ className, ...props }, ref) => {
 50 |   const id = React.useId()
 51 | 
 52 |   return (
 53 |     (<FormItemContext.Provider value={{ id }}>
 54 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 55 |     </FormItemContext.Provider>)
 56 |   );
 57 | })
 58 | FormItem.displayName = "FormItem"
 59 | 
 60 | const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
 61 |   const { error, formItemId } = useFormField()
 62 | 
 63 |   return (
 64 |     (<Label
 65 |       ref={ref}
 66 |       className={cn(error && "text-destructive", className)}
 67 |       htmlFor={formItemId}
 68 |       {...props} />)
 69 |   );
 70 | })
 71 | FormLabel.displayName = "FormLabel"
 72 | 
 73 | const FormControl = React.forwardRef(({ ...props }, ref) => {
 74 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 75 | 
 76 |   return (
 77 |     (<Slot
 78 |       ref={ref}
 79 |       id={formItemId}
 80 |       aria-describedby={
 81 |         !error
 82 |           ? `${formDescriptionId}`
 83 |           : `${formDescriptionId} ${formMessageId}`
 84 |       }
 85 |       aria-invalid={!!error}
 86 |       {...props} />)
 87 |   );
 88 | })
 89 | FormControl.displayName = "FormControl"
 90 | 
 91 | const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
 92 |   const { formDescriptionId } = useFormField()
 93 | 
 94 |   return (
 95 |     (<p
 96 |       ref={ref}
 97 |       id={formDescriptionId}
 98 |       className={cn("text-sm text-muted-foreground", className)}
 99 |       {...props} />)
100 |   );
101 | })
102 | FormDescription.displayName = "FormDescription"
103 | 
104 | const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
105 |   const { error, formMessageId } = useFormField()
106 |   const body = error ? String(error?.message) : children
107 | 
108 |   if (!body) {
109 |     return null
110 |   }
111 | 
112 |   return (
113 |     (<p
114 |       ref={ref}
115 |       id={formMessageId}
116 |       className={cn("text-sm font-medium text-destructive", className)}
117 |       {...props}>
118 |       {body}
119 |     </p>)
120 |   );
121 | })
122 | FormMessage.displayName = "FormMessage"
123 | 
124 | export {
125 |   useFormField,
126 |   Form,
127 |   FormItem,
128 |   FormLabel,
129 |   FormControl,
130 |   FormDescription,
131 |   FormMessage,
132 |   FormField,
133 | }
134 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/hover-card.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const HoverCard = HoverCardPrimitive.Root
 7 | 
 8 | const HoverCardTrigger = HoverCardPrimitive.Trigger
 9 | 
10 | const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
11 |   <HoverCardPrimitive.Content
12 |     ref={ref}
13 |     align={align}
14 |     sideOffset={sideOffset}
15 |     className={cn(
16 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
17 |       className
18 |     )}
19 |     {...props} />
20 | ))
21 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
22 | 
23 | export { HoverCard, HoverCardTrigger, HoverCardContent }
24 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/input.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef(({ className, type, ...props }, ref) => {
 6 |   return (
 7 |     (<input
 8 |       type={type}
 9 |       className={cn(
10 |         "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
11 |         className
12 |       )}
13 |       ref={ref}
14 |       {...props} />)
15 |   );
16 | })
17 | Input.displayName = "Input"
18 | 
19 | export { Input }
20 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/label.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef(({ className, ...props }, ref) => (
12 |   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
13 | ))
14 | Label.displayName = LabelPrimitive.Root.displayName
15 | 
16 | export { Label }
17 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/menubar.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const MenubarMenu = MenubarPrimitive.Menu
  8 | 
  9 | const MenubarGroup = MenubarPrimitive.Group
 10 | 
 11 | const MenubarPortal = MenubarPrimitive.Portal
 12 | 
 13 | const MenubarSub = MenubarPrimitive.Sub
 14 | 
 15 | const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 16 | 
 17 | const Menubar = React.forwardRef(({ className, ...props }, ref) => (
 18 |   <MenubarPrimitive.Root
 19 |     ref={ref}
 20 |     className={cn(
 21 |       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
 22 |       className
 23 |     )}
 24 |     {...props} />
 25 | ))
 26 | Menubar.displayName = MenubarPrimitive.Root.displayName
 27 | 
 28 | const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => (
 29 |   <MenubarPrimitive.Trigger
 30 |     ref={ref}
 31 |     className={cn(
 32 |       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 33 |       className
 34 |     )}
 35 |     {...props} />
 36 | ))
 37 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 38 | 
 39 | const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
 40 |   <MenubarPrimitive.SubTrigger
 41 |     ref={ref}
 42 |     className={cn(
 43 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 44 |       inset && "pl-8",
 45 |       className
 46 |     )}
 47 |     {...props}>
 48 |     {children}
 49 |     <ChevronRight className="ml-auto h-4 w-4" />
 50 |   </MenubarPrimitive.SubTrigger>
 51 | ))
 52 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 53 | 
 54 | const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => (
 55 |   <MenubarPrimitive.SubContent
 56 |     ref={ref}
 57 |     className={cn(
 58 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
 59 |       className
 60 |     )}
 61 |     {...props} />
 62 | ))
 63 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 64 | 
 65 | const MenubarContent = React.forwardRef((
 66 |   { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
 67 |   ref
 68 | ) => (
 69 |   <MenubarPrimitive.Portal>
 70 |     <MenubarPrimitive.Content
 71 |       ref={ref}
 72 |       align={align}
 73 |       alignOffset={alignOffset}
 74 |       sideOffset={sideOffset}
 75 |       className={cn(
 76 |         "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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",
 77 |         className
 78 |       )}
 79 |       {...props} />
 80 |   </MenubarPrimitive.Portal>
 81 | ))
 82 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
 83 | 
 84 | const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => (
 85 |   <MenubarPrimitive.Item
 86 |     ref={ref}
 87 |     className={cn(
 88 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 89 |       inset && "pl-8",
 90 |       className
 91 |     )}
 92 |     {...props} />
 93 | ))
 94 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
 95 | 
 96 | const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
 97 |   <MenubarPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}>
105 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
106 |       <MenubarPrimitive.ItemIndicator>
107 |         <Check className="h-4 w-4" />
108 |       </MenubarPrimitive.ItemIndicator>
109 |     </span>
110 |     {children}
111 |   </MenubarPrimitive.CheckboxItem>
112 | ))
113 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
114 | 
115 | const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
116 |   <MenubarPrimitive.RadioItem
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       className
121 |     )}
122 |     {...props}>
123 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
124 |       <MenubarPrimitive.ItemIndicator>
125 |         <Circle className="h-2 w-2 fill-current" />
126 |       </MenubarPrimitive.ItemIndicator>
127 |     </span>
128 |     {children}
129 |   </MenubarPrimitive.RadioItem>
130 | ))
131 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
132 | 
133 | const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
134 |   <MenubarPrimitive.Label
135 |     ref={ref}
136 |     className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
137 |     {...props} />
138 | ))
139 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
140 | 
141 | const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (
142 |   <MenubarPrimitive.Separator
143 |     ref={ref}
144 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
145 |     {...props} />
146 | ))
147 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
148 | 
149 | const MenubarShortcut = ({
150 |   className,
151 |   ...props
152 | }) => {
153 |   return (
154 |     (<span
155 |       className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
156 |       {...props} />)
157 |   );
158 | }
159 | MenubarShortcut.displayname = "MenubarShortcut"
160 | 
161 | export {
162 |   Menubar,
163 |   MenubarMenu,
164 |   MenubarTrigger,
165 |   MenubarContent,
166 |   MenubarItem,
167 |   MenubarSeparator,
168 |   MenubarLabel,
169 |   MenubarCheckboxItem,
170 |   MenubarRadioGroup,
171 |   MenubarRadioItem,
172 |   MenubarPortal,
173 |   MenubarSubContent,
174 |   MenubarSubTrigger,
175 |   MenubarGroup,
176 |   MenubarSub,
177 |   MenubarShortcut,
178 | }
179 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/navigation-menu.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  3 | import { cva } from "class-variance-authority"
  4 | import { ChevronDown } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
  9 |   <NavigationMenuPrimitive.Root
 10 |     ref={ref}
 11 |     className={cn(
 12 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 13 |       className
 14 |     )}
 15 |     {...props}>
 16 |     {children}
 17 |     <NavigationMenuViewport />
 18 |   </NavigationMenuPrimitive.Root>
 19 | ))
 20 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 21 | 
 22 | const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
 23 |   <NavigationMenuPrimitive.List
 24 |     ref={ref}
 25 |     className={cn(
 26 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 27 |       className
 28 |     )}
 29 |     {...props} />
 30 | ))
 31 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 32 | 
 33 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 34 | 
 35 | const navigationMenuTriggerStyle = cva(
 36 |   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 37 | )
 38 | 
 39 | const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
 40 |   <NavigationMenuPrimitive.Trigger
 41 |     ref={ref}
 42 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 43 |     {...props}>
 44 |     {children}{" "}
 45 |     <ChevronDown
 46 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
 47 |       aria-hidden="true" />
 48 |   </NavigationMenuPrimitive.Trigger>
 49 | ))
 50 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 51 | 
 52 | const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
 53 |   <NavigationMenuPrimitive.Content
 54 |     ref={ref}
 55 |     className={cn(
 56 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 57 |       className
 58 |     )}
 59 |     {...props} />
 60 | ))
 61 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 62 | 
 63 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 64 | 
 65 | const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
 66 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 67 |     <NavigationMenuPrimitive.Viewport
 68 |       className={cn(
 69 |         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 70 |         className
 71 |       )}
 72 |       ref={ref}
 73 |       {...props} />
 74 |   </div>
 75 | ))
 76 | NavigationMenuViewport.displayName =
 77 |   NavigationMenuPrimitive.Viewport.displayName
 78 | 
 79 | const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
 80 |   <NavigationMenuPrimitive.Indicator
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
 84 |       className
 85 |     )}
 86 |     {...props}>
 87 |     <div
 88 |       className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
 89 |   </NavigationMenuPrimitive.Indicator>
 90 | ))
 91 | NavigationMenuIndicator.displayName =
 92 |   NavigationMenuPrimitive.Indicator.displayName
 93 | 
 94 | export {
 95 |   navigationMenuTriggerStyle,
 96 |   NavigationMenu,
 97 |   NavigationMenuList,
 98 |   NavigationMenuItem,
 99 |   NavigationMenuContent,
100 |   NavigationMenuTrigger,
101 |   NavigationMenuLink,
102 |   NavigationMenuIndicator,
103 |   NavigationMenuViewport,
104 | }
105 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/popover.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
11 |   <PopoverPrimitive.Portal>
12 |     <PopoverPrimitive.Content
13 |       ref={ref}
14 |       align={align}
15 |       sideOffset={sideOffset}
16 |       className={cn(
17 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
18 |         className
19 |       )}
20 |       {...props} />
21 |   </PopoverPrimitive.Portal>
22 | ))
23 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
24 | 
25 | export { Popover, PopoverTrigger, PopoverContent }
26 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/progress.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
 7 |   <ProgressPrimitive.Root
 8 |     ref={ref}
 9 |     className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
10 |     {...props}>
11 |     <ProgressPrimitive.Indicator
12 |       className="h-full w-full flex-1 bg-primary transition-all"
13 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
14 |   </ProgressPrimitive.Root>
15 | ))
16 | Progress.displayName = ProgressPrimitive.Root.displayName
17 | 
18 | export { Progress }
19 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/radio-group.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 3 | import { Circle } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
 8 |   return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />);
 9 | })
10 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
11 | 
12 | const RadioGroupItem = React.forwardRef(({ className, children, ...props }, ref) => {
13 |   return (
14 |     (<RadioGroupPrimitive.Item
15 |       ref={ref}
16 |       className={cn(
17 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18 |         className
19 |       )}
20 |       {...props}>
21 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
22 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
23 |       </RadioGroupPrimitive.Indicator>
24 |     </RadioGroupPrimitive.Item>)
25 |   );
26 | })
27 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
28 | 
29 | export { RadioGroup, RadioGroupItem }
30 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/scroll-area.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
 7 |   <ScrollAreaPrimitive.Root
 8 |     ref={ref}
 9 |     className={cn("relative overflow-hidden", className)}
10 |     {...props}>
11 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
12 |       {children}
13 |     </ScrollAreaPrimitive.Viewport>
14 |     <ScrollBar />
15 |     <ScrollAreaPrimitive.Corner />
16 |   </ScrollAreaPrimitive.Root>
17 | ))
18 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
19 | 
20 | const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
21 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
22 |     ref={ref}
23 |     orientation={orientation}
24 |     className={cn(
25 |       "flex touch-none select-none transition-colors",
26 |       orientation === "vertical" &&
27 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
28 |       orientation === "horizontal" &&
29 |         "h-2.5 border-t border-t-transparent p-[1px]",
30 |       className
31 |     )}
32 |     {...props}>
33 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
34 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
35 | ))
36 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
37 | 
38 | export { ScrollArea, ScrollBar }
39 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/select.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SelectPrimitive from "@radix-ui/react-select"
 3 | import { Check, ChevronDown } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Select = SelectPrimitive.Root
 8 | 
 9 | const SelectGroup = SelectPrimitive.Group
10 | 
11 | const SelectValue = SelectPrimitive.Value
12 | 
13 | const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
14 |   <SelectPrimitive.Trigger
15 |     ref={ref}
16 |     className={cn(
17 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18 |       className
19 |     )}
20 |     {...props}>
21 |     {children}
22 |     <SelectPrimitive.Icon asChild>
23 |       <ChevronDown className="h-4 w-4 opacity-50" />
24 |     </SelectPrimitive.Icon>
25 |   </SelectPrimitive.Trigger>
26 | ))
27 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
28 | 
29 | const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
30 |   <SelectPrimitive.Portal>
31 |     <SelectPrimitive.Content
32 |       ref={ref}
33 |       className={cn(
34 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
35 |         position === "popper" &&
36 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
37 |         className
38 |       )}
39 |       position={position}
40 |       {...props}>
41 |       <SelectPrimitive.Viewport
42 |         className={cn("p-1", position === "popper" &&
43 |           "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
44 |         {children}
45 |       </SelectPrimitive.Viewport>
46 |     </SelectPrimitive.Content>
47 |   </SelectPrimitive.Portal>
48 | ))
49 | SelectContent.displayName = SelectPrimitive.Content.displayName
50 | 
51 | const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
52 |   <SelectPrimitive.Label
53 |     ref={ref}
54 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
55 |     {...props} />
56 | ))
57 | SelectLabel.displayName = SelectPrimitive.Label.displayName
58 | 
59 | const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
60 |   <SelectPrimitive.Item
61 |     ref={ref}
62 |     className={cn(
63 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
64 |       className
65 |     )}
66 |     {...props}>
67 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
68 |       <SelectPrimitive.ItemIndicator>
69 |         <Check className="h-4 w-4" />
70 |       </SelectPrimitive.ItemIndicator>
71 |     </span>
72 | 
73 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
74 |   </SelectPrimitive.Item>
75 | ))
76 | SelectItem.displayName = SelectPrimitive.Item.displayName
77 | 
78 | const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
79 |   <SelectPrimitive.Separator
80 |     ref={ref}
81 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
82 |     {...props} />
83 | ))
84 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
85 | 
86 | export {
87 |   Select,
88 |   SelectGroup,
89 |   SelectValue,
90 |   SelectTrigger,
91 |   SelectContent,
92 |   SelectLabel,
93 |   SelectItem,
94 |   SelectSeparator,
95 | }
96 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/separator.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Separator = React.forwardRef((
 7 |   { className, orientation = "horizontal", decorative = true, ...props },
 8 |   ref
 9 | ) => (
10 |   <SeparatorPrimitive.Root
11 |     ref={ref}
12 |     decorative={decorative}
13 |     orientation={orientation}
14 |     className={cn(
15 |       "shrink-0 bg-border",
16 |       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
17 |       className
18 |     )}
19 |     {...props} />
20 | ))
21 | Separator.displayName = SeparatorPrimitive.Root.displayName
22 | 
23 | export { Separator }
24 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/sheet.jsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  3 | import { cva } from "class-variance-authority";
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const Sheet = SheetPrimitive.Root
  9 | 
 10 | const SheetTrigger = SheetPrimitive.Trigger
 11 | 
 12 | const SheetClose = SheetPrimitive.Close
 13 | 
 14 | const SheetPortal = ({
 15 |   className,
 16 |   ...props
 17 | }) => (
 18 |   <SheetPrimitive.Portal className={cn(className)} {...props} />
 19 | )
 20 | SheetPortal.displayName = SheetPrimitive.Portal.displayName
 21 | 
 22 | const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
 23 |   <SheetPrimitive.Overlay
 24 |     className={cn(
 25 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 26 |       className
 27 |     )}
 28 |     {...props}
 29 |     ref={ref} />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
 53 |   <SheetPortal>
 54 |     <SheetOverlay />
 55 |     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
 56 |       {children}
 57 |       <SheetPrimitive.Close
 58 |         className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 59 |         <X className="h-4 w-4" />
 60 |         <span className="sr-only">Close</span>
 61 |       </SheetPrimitive.Close>
 62 |     </SheetPrimitive.Content>
 63 |   </SheetPortal>
 64 | ))
 65 | SheetContent.displayName = SheetPrimitive.Content.displayName
 66 | 
 67 | const SheetHeader = ({
 68 |   className,
 69 |   ...props
 70 | }) => (
 71 |   <div
 72 |     className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
 73 |     {...props} />
 74 | )
 75 | SheetHeader.displayName = "SheetHeader"
 76 | 
 77 | const SheetFooter = ({
 78 |   className,
 79 |   ...props
 80 | }) => (
 81 |   <div
 82 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 83 |     {...props} />
 84 | )
 85 | SheetFooter.displayName = "SheetFooter"
 86 | 
 87 | const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
 88 |   <SheetPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn("text-lg font-semibold text-foreground", className)}
 91 |     {...props} />
 92 | ))
 93 | SheetTitle.displayName = SheetPrimitive.Title.displayName
 94 | 
 95 | const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
 96 |   <SheetPrimitive.Description
 97 |     ref={ref}
 98 |     className={cn("text-sm text-muted-foreground", className)}
 99 |     {...props} />
100 | ))
101 | SheetDescription.displayName = SheetPrimitive.Description.displayName
102 | 
103 | export {
104 |   Sheet,
105 |   SheetTrigger,
106 |   SheetClose,
107 |   SheetContent,
108 |   SheetHeader,
109 |   SheetFooter,
110 |   SheetTitle,
111 |   SheetDescription,
112 | }
113 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/skeleton.jsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }) {
 7 |   return (<div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />);
 8 | }
 9 | 
10 | export { Skeleton }
11 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/slider.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SliderPrimitive from "@radix-ui/react-slider"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Slider = React.forwardRef(({ className, ...props }, ref) => (
 7 |   <SliderPrimitive.Root
 8 |     ref={ref}
 9 |     className={cn("relative flex w-full touch-none select-none items-center", className)}
10 |     {...props}>
11 |     <SliderPrimitive.Track
12 |       className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
13 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
14 |     </SliderPrimitive.Track>
15 |     <SliderPrimitive.Thumb
16 |       className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
17 |   </SliderPrimitive.Root>
18 | ))
19 | Slider.displayName = SliderPrimitive.Root.displayName
20 | 
21 | export { Slider }
22 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/switch.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef(({ className, ...props }, ref) => (
 7 |   <SwitchPrimitives.Root
 8 |     className={cn(
 9 |       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
10 |       className
11 |     )}
12 |     {...props}
13 |     ref={ref}>
14 |     <SwitchPrimitives.Thumb
15 |       className={cn(
16 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
17 |       )} />
18 |   </SwitchPrimitives.Root>
19 | ))
20 | Switch.displayName = SwitchPrimitives.Root.displayName
21 | 
22 | export { Switch }
23 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/table.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Table = React.forwardRef(({ className, ...props }, ref) => (
 6 |   <div className="w-full overflow-auto">
 7 |     <table
 8 |       ref={ref}
 9 |       className={cn("w-full caption-bottom text-sm", className)}
10 |       {...props} />
11 |   </div>
12 | ))
13 | Table.displayName = "Table"
14 | 
15 | const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
16 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
17 | ))
18 | TableHeader.displayName = "TableHeader"
19 | 
20 | const TableBody = React.forwardRef(({ className, ...props }, ref) => (
21 |   <tbody
22 |     ref={ref}
23 |     className={cn("[&_tr:last-child]:border-0", className)}
24 |     {...props} />
25 | ))
26 | TableBody.displayName = "TableBody"
27 | 
28 | const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
29 |   <tfoot
30 |     ref={ref}
31 |     className={cn("bg-primary font-medium text-primary-foreground", className)}
32 |     {...props} />
33 | ))
34 | TableFooter.displayName = "TableFooter"
35 | 
36 | const TableRow = React.forwardRef(({ className, ...props }, ref) => (
37 |   <tr
38 |     ref={ref}
39 |     className={cn(
40 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
41 |       className
42 |     )}
43 |     {...props} />
44 | ))
45 | TableRow.displayName = "TableRow"
46 | 
47 | const TableHead = React.forwardRef(({ className, ...props }, ref) => (
48 |   <th
49 |     ref={ref}
50 |     className={cn(
51 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
52 |       className
53 |     )}
54 |     {...props} />
55 | ))
56 | TableHead.displayName = "TableHead"
57 | 
58 | const TableCell = React.forwardRef(({ className, ...props }, ref) => (
59 |   <td
60 |     ref={ref}
61 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
62 |     {...props} />
63 | ))
64 | TableCell.displayName = "TableCell"
65 | 
66 | const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
67 |   <caption
68 |     ref={ref}
69 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
70 |     {...props} />
71 | ))
72 | TableCaption.displayName = "TableCaption"
73 | 
74 | export {
75 |   Table,
76 |   TableHeader,
77 |   TableBody,
78 |   TableFooter,
79 |   TableHead,
80 |   TableRow,
81 |   TableCell,
82 |   TableCaption,
83 | }
84 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/tabs.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef(({ className, ...props }, ref) => (
 9 |   <TabsPrimitive.List
10 |     ref={ref}
11 |     className={cn(
12 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
13 |       className
14 |     )}
15 |     {...props} />
16 | ))
17 | TabsList.displayName = TabsPrimitive.List.displayName
18 | 
19 | const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
20 |   <TabsPrimitive.Trigger
21 |     ref={ref}
22 |     className={cn(
23 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
24 |       className
25 |     )}
26 |     {...props} />
27 | ))
28 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
29 | 
30 | const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
31 |   <TabsPrimitive.Content
32 |     ref={ref}
33 |     className={cn(
34 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
35 |       className
36 |     )}
37 |     {...props} />
38 | ))
39 | TabsContent.displayName = TabsPrimitive.Content.displayName
40 | 
41 | export { Tabs, TabsList, TabsTrigger, TabsContent }
42 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/textarea.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef(({ className, ...props }, ref) => {
 6 |   return (
 7 |     (<textarea
 8 |       className={cn(
 9 |         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
10 |         className
11 |       )}
12 |       ref={ref}
13 |       {...props} />)
14 |   );
15 | })
16 | Textarea.displayName = "Textarea"
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/toast.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ToastPrimitives from "@radix-ui/react-toast"
 3 | import { cva } from "class-variance-authority";
 4 | import { X } from "lucide-react"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ToastProvider = ToastPrimitives.Provider
 9 | 
10 | const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
11 |   <ToastPrimitives.Viewport
12 |     ref={ref}
13 |     className={cn(
14 |       "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]",
15 |       className
16 |     )}
17 |     {...props} />
18 | ))
19 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
20 | 
21 | const toastVariants = cva(
22 |   "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",
23 |   {
24 |     variants: {
25 |       variant: {
26 |         default: "border bg-background text-foreground",
27 |         destructive:
28 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
38 |   return (
39 |     (<ToastPrimitives.Root
40 |       ref={ref}
41 |       className={cn(toastVariants({ variant }), className)}
42 |       {...props} />)
43 |   );
44 | })
45 | Toast.displayName = ToastPrimitives.Root.displayName
46 | 
47 | const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
48 |   <ToastPrimitives.Action
49 |     ref={ref}
50 |     className={cn(
51 |       "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",
52 |       className
53 |     )}
54 |     {...props} />
55 | ))
56 | ToastAction.displayName = ToastPrimitives.Action.displayName
57 | 
58 | const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
59 |   <ToastPrimitives.Close
60 |     ref={ref}
61 |     className={cn(
62 |       "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",
63 |       className
64 |     )}
65 |     toast-close=""
66 |     {...props}>
67 |     <X className="h-4 w-4" />
68 |   </ToastPrimitives.Close>
69 | ))
70 | ToastClose.displayName = ToastPrimitives.Close.displayName
71 | 
72 | const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
73 |   <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
74 | ))
75 | ToastTitle.displayName = ToastPrimitives.Title.displayName
76 | 
77 | const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
78 |   <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
79 | ))
80 | ToastDescription.displayName = ToastPrimitives.Description.displayName
81 | 
82 | export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };
83 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/toaster.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Toast,
 3 |   ToastClose,
 4 |   ToastDescription,
 5 |   ToastProvider,
 6 |   ToastTitle,
 7 |   ToastViewport,
 8 | } from "@/components/ui/toast"
 9 | import { useToast } from "@/components/ui/use-toast"
10 | 
11 | export function Toaster() {
12 |   const { toasts } = useToast()
13 | 
14 |   return (
15 |     (<ToastProvider>
16 |       {toasts.map(function ({ id, title, description, action, ...props }) {
17 |         return (
18 |           (<Toast key={id} {...props}>
19 |             <div className="grid gap-1">
20 |               {title && <ToastTitle>{title}</ToastTitle>}
21 |               {description && (
22 |                 <ToastDescription>{description}</ToastDescription>
23 |               )}
24 |             </div>
25 |             {action}
26 |             <ToastClose />
27 |           </Toast>)
28 |         );
29 |       })}
30 |       <ToastViewport />
31 |     </ToastProvider>)
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/toggle.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 3 | import { cva } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const toggleVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-transparent",
13 |         outline:
14 |           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
15 |       },
16 |       size: {
17 |         default: "h-10 px-3",
18 |         sm: "h-9 px-2.5",
19 |         lg: "h-11 px-5",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |       size: "default",
25 |     },
26 |   }
27 | )
28 | 
29 | const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (
30 |   <TogglePrimitive.Root
31 |     ref={ref}
32 |     className={cn(toggleVariants({ variant, size, className }))}
33 |     {...props} />
34 | ))
35 | 
36 | Toggle.displayName = TogglePrimitive.Root.displayName
37 | 
38 | export { Toggle, toggleVariants }
39 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/tooltip.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const TooltipProvider = TooltipPrimitive.Provider
 7 | 
 8 | const Tooltip = TooltipPrimitive.Root
 9 | 
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 | 
12 | const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
13 |   <TooltipPrimitive.Content
14 |     ref={ref}
15 |     sideOffset={sideOffset}
16 |     className={cn(
17 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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",
18 |       className
19 |     )}
20 |     {...props} />
21 | ))
22 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
23 | 
24 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
25 | 


--------------------------------------------------------------------------------
/e2b-playground/template/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react"
  3 | 
  4 | const TOAST_LIMIT = 1
  5 | const TOAST_REMOVE_DELAY = 1000000
  6 | 
  7 | const actionTypes = {
  8 |   ADD_TOAST: "ADD_TOAST",
  9 |   UPDATE_TOAST: "UPDATE_TOAST",
 10 |   DISMISS_TOAST: "DISMISS_TOAST",
 11 |   REMOVE_TOAST: "REMOVE_TOAST"
 12 | }
 13 | 
 14 | let count = 0
 15 | 
 16 | function genId() {
 17 |   count = (count + 1) % Number.MAX_VALUE
 18 |   return count.toString();
 19 | }
 20 | 
 21 | const toastTimeouts = new Map()
 22 | 
 23 | const addToRemoveQueue = (toastId) => {
 24 |   if (toastTimeouts.has(toastId)) {
 25 |     return
 26 |   }
 27 | 
 28 |   const timeout = setTimeout(() => {
 29 |     toastTimeouts.delete(toastId)
 30 |     dispatch({
 31 |       type: "REMOVE_TOAST",
 32 |       toastId: toastId,
 33 |     })
 34 |   }, TOAST_REMOVE_DELAY)
 35 | 
 36 |   toastTimeouts.set(toastId, timeout)
 37 | }
 38 | 
 39 | export const reducer = (state, action) => {
 40 |   switch (action.type) {
 41 |     case "ADD_TOAST":
 42 |       return {
 43 |         ...state,
 44 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 45 |       };
 46 | 
 47 |     case "UPDATE_TOAST":
 48 |       return {
 49 |         ...state,
 50 |         toasts: state.toasts.map((t) =>
 51 |           t.id === action.toast.id ? { ...t, ...action.toast } : t),
 52 |       };
 53 | 
 54 |     case "DISMISS_TOAST": {
 55 |       const { toastId } = action
 56 | 
 57 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 58 |       // but I'll keep it here for simplicity
 59 |       if (toastId) {
 60 |         addToRemoveQueue(toastId)
 61 |       } else {
 62 |         state.toasts.forEach((toast) => {
 63 |           addToRemoveQueue(toast.id)
 64 |         })
 65 |       }
 66 | 
 67 |       return {
 68 |         ...state,
 69 |         toasts: state.toasts.map((t) =>
 70 |           t.id === toastId || toastId === undefined
 71 |             ? {
 72 |                 ...t,
 73 |                 open: false,
 74 |               }
 75 |             : t),
 76 |       };
 77 |     }
 78 |     case "REMOVE_TOAST":
 79 |       if (action.toastId === undefined) {
 80 |         return {
 81 |           ...state,
 82 |           toasts: [],
 83 |         }
 84 |       }
 85 |       return {
 86 |         ...state,
 87 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
 88 |       };
 89 |   }
 90 | }
 91 | 
 92 | const listeners = []
 93 | 
 94 | let memoryState = { toasts: [] }
 95 | 
 96 | function dispatch(action) {
 97 |   memoryState = reducer(memoryState, action)
 98 |   listeners.forEach((listener) => {
 99 |     listener(memoryState)
100 |   })
101 | }
102 | 
103 | function toast({
104 |   ...props
105 | }) {
106 |   const id = genId()
107 | 
108 |   const update = (props) =>
109 |     dispatch({
110 |       type: "UPDATE_TOAST",
111 |       toast: { ...props, id },
112 |     })
113 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
114 | 
115 |   dispatch({
116 |     type: "ADD_TOAST",
117 |     toast: {
118 |       ...props,
119 |       id,
120 |       open: true,
121 |       onOpenChange: (open) => {
122 |         if (!open) dismiss()
123 |       },
124 |     },
125 |   })
126 | 
127 |   return {
128 |     id: id,
129 |     dismiss,
130 |     update,
131 |   }
132 | }
133 | 
134 | function useToast() {
135 |   const [state, setState] = React.useState(memoryState)
136 | 
137 |   React.useEffect(() => {
138 |     listeners.push(setState)
139 |     return () => {
140 |       const index = listeners.indexOf(setState)
141 |       if (index > -1) {
142 |         listeners.splice(index, 1)
143 |       }
144 |     };
145 |   }, [state])
146 | 
147 |   return {
148 |     ...state,
149 |     toast,
150 |     dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
151 |   };
152 | }
153 | 
154 | export { useToast, toast }
155 | 


--------------------------------------------------------------------------------
/e2b-playground/template/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/e2b-playground/template/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/e2b-playground/template/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/e2b-playground/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "code",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.3.1",
13 |     "@radix-ui/react-accordion": "^1.1.2",
14 |     "@radix-ui/react-alert-dialog": "^1.0.4",
15 |     "@radix-ui/react-aspect-ratio": "^1.0.3",
16 |     "@radix-ui/react-avatar": "^1.0.3",
17 |     "@radix-ui/react-checkbox": "^1.0.4",
18 |     "@radix-ui/react-collapsible": "^1.0.3",
19 |     "@radix-ui/react-context-menu": "^2.1.4",
20 |     "@radix-ui/react-dialog": "^1.0.4",
21 |     "@radix-ui/react-dropdown-menu": "^2.0.5",
22 |     "@radix-ui/react-hover-card": "^1.0.6",
23 |     "@radix-ui/react-label": "^2.0.2",
24 |     "@radix-ui/react-menubar": "^1.0.3",
25 |     "@radix-ui/react-navigation-menu": "^1.1.3",
26 |     "@radix-ui/react-popover": "^1.0.6",
27 |     "@radix-ui/react-progress": "^1.0.3",
28 |     "@radix-ui/react-radio-group": "^1.1.3",
29 |     "@radix-ui/react-scroll-area": "^1.0.4",
30 |     "@radix-ui/react-select": "^1.2.2",
31 |     "@radix-ui/react-separator": "^1.0.3",
32 |     "@radix-ui/react-slider": "^1.1.2",
33 |     "@radix-ui/react-slot": "^1.0.2",
34 |     "@radix-ui/react-switch": "^1.0.3",
35 |     "@radix-ui/react-tabs": "^1.0.4",
36 |     "@radix-ui/react-toast": "^1.1.4",
37 |     "@radix-ui/react-toggle": "^1.0.3",
38 |     "@radix-ui/react-tooltip": "^1.0.6",
39 |     "autoprefixer": "10.4.15",
40 |     "class-variance-authority": "^0.7.0",
41 |     "clsx": "^2.0.0",
42 |     "cmdk": "^0.2.0",
43 |     "date-fns": "^2.30.0",
44 |     "eslint": "8.49.0",
45 |     "eslint-config-next": "13.4.19",
46 |     "lucide-react": "^0.279.0",
47 |     "next": "13.4.19",
48 |     "postcss": "8.4.29",
49 |     "react": "18.2.0",
50 |     "react-day-picker": "^8.8.2",
51 |     "react-dom": "18.2.0",
52 |     "react-hook-form": "^7.46.1",
53 |     "tailwind-merge": "^1.14.0",
54 |     "tailwindcss": "3.3.3",
55 |     "tailwindcss-animate": "^1.0.7",
56 |     "zod": "^3.22.2"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/e2b-playground/template/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css'
2 | 
3 | export default function App({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 


--------------------------------------------------------------------------------
/e2b-playground/template/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/e2b-playground/template/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/e2b-playground/template/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { Inter } from 'next/font/google'
 2 | import Component from '@/components/Component'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export default function Home() {
 7 |   return (
 8 |     <main
 9 |       className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
10 |     >
11 |       <Component/>
12 |     </main>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/e2b-playground/template/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/e2b-playground/template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mlejva/oss-v0/41dc112aac01b27b45d531a2046745cca875aff4/e2b-playground/template/public/favicon.ico


--------------------------------------------------------------------------------
/e2b-playground/template/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/e2b-playground/template/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/e2b-playground/template/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | 
 6 | @layer base {
 7 |   :root {
 8 |     --foreground-rgb: 0, 0, 0;
 9 |     --background-start-rgb: 214, 219, 220;
10 |     --background-end-rgb: 255, 255, 255;
11 | 
12 |     --background: 0 0% 100%;
13 |     --foreground: 222.2 84% 4.9%;
14 | 
15 |     --card: 0 0% 100%;
16 |     --card-foreground: 222.2 84% 4.9%;
17 | 
18 |     --popover: 0 0% 100%;
19 |     --popover-foreground: 222.2 84% 4.9%;
20 | 
21 |     --primary: 222.2 47.4% 11.2%;
22 |     --primary-foreground: 210 40% 98%;
23 | 
24 |     --secondary: 210 40% 96.1%;
25 |     --secondary-foreground: 222.2 47.4% 11.2%;
26 | 
27 |     --muted: 210 40% 96.1%;
28 |     --muted-foreground: 215.4 16.3% 46.9%;
29 | 
30 |     --accent: 210 40% 96.1%;
31 |     --accent-foreground: 222.2 47.4% 11.2%;
32 | 
33 |     --destructive: 0 84.2% 60.2%;
34 |     --destructive-foreground: 210 40% 98%;
35 | 
36 |     --border: 214.3 31.8% 91.4%;
37 |     --input: 214.3 31.8% 91.4%;
38 |     --ring: 222.2 84% 4.9%;
39 | 
40 |     --radius: 0.5rem;
41 |   }
42 | 
43 |   .dark {
44 |     --background: 222.2 84% 4.9%;
45 |     --foreground: 210 40% 98%;
46 | 
47 |     --card: 222.2 84% 4.9%;
48 |     --card-foreground: 210 40% 98%;
49 | 
50 |     --popover: 222.2 84% 4.9%;
51 |     --popover-foreground: 210 40% 98%;
52 | 
53 |     --primary: 210 40% 98%;
54 |     --primary-foreground: 222.2 47.4% 11.2%;
55 | 
56 |     --secondary: 217.2 32.6% 17.5%;
57 |     --secondary-foreground: 210 40% 98%;
58 | 
59 |     --muted: 217.2 32.6% 17.5%;
60 |     --muted-foreground: 215 20.2% 65.1%;
61 | 
62 |     --accent: 217.2 32.6% 17.5%;
63 |     --accent-foreground: 210 40% 98%;
64 | 
65 |     --destructive: 0 62.8% 30.6%;
66 |     --destructive-foreground: 210 40% 98%;
67 | 
68 |     --border: 217.2 32.6% 17.5%;
69 |     --input: 217.2 32.6% 17.5%;
70 |     --ring: 212.7 26.8% 83.9%;
71 |   }
72 | }
73 | 
74 | @layer base {
75 |   * {
76 |     @apply border-border;
77 |   }
78 |   body {
79 |     /* @apply bg-background text-foreground; */
80 |     @apply bg-zinc-100;
81 |   }
82 | }
83 | 
84 | 
85 | 
86 | 


--------------------------------------------------------------------------------
/e2b-playground/template/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{js,jsx}',
 6 |     './components/**/*.{js,jsx}',
 7 |     './app/**/*.{js,jsx}',
 8 |     './src/**/*.{js,jsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "oss-v0",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@e2b/sdk": "^0.2.5",
13 |     "@radix-ui/react-slot": "^1.0.2",
14 |     "@types/node": "20.6.2",
15 |     "@types/react": "18.2.21",
16 |     "@types/react-dom": "18.2.7",
17 |     "autoprefixer": "10.4.15",
18 |     "class-variance-authority": "^0.7.0",
19 |     "clsx": "^2.0.0",
20 |     "eslint": "8.49.0",
21 |     "eslint-config-next": "13.4.19",
22 |     "lucide-react": "^0.279.0",
23 |     "next": "13.4.19",
24 |     "postcss": "8.4.29",
25 |     "react": "18.2.0",
26 |     "react-dom": "18.2.0",
27 |     "tailwind-merge": "^1.14.0",
28 |     "tailwindcss": "3.3.3",
29 |     "tailwindcss-animate": "^1.0.7",
30 |     "typescript": "5.2.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       backgroundImage: {
12 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 |         'gradient-conic':
14 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------