Artifact Viewer

12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/index.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "src/components", 15 | "utils": "src/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artifact Viewer 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /npx/docker/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:23.11.0-alpine 2 | 3 | # Install git (required by run-claude-artifact to clone the template) 4 | RUN apk add --no-cache git 5 | 6 | # Set working directory 7 | WORKDIR /app 8 | 9 | # Clear npm cache and install the run-claude-artifact package globally 10 | # Using --force ensures we get the latest version even if cached 11 | RUN npm cache clean --force && \ 12 | npm install -g run-claude-artifact@latest --force 13 | 14 | # Create entrypoint script that forwards arguments to npx 15 | RUN echo '#!/bin/sh' > /entrypoint.sh && \ 16 | echo 'exec npx run-claude-artifact --no-open --public "$@"' >> /entrypoint.sh && \ 17 | chmod +x /entrypoint.sh 18 | 19 | # Set entrypoint 20 | ENTRYPOINT ["/entrypoint.sh"] 21 | 22 | # Default command (can be overridden) 23 | CMD ["--help"] 24 | 25 | -------------------------------------------------------------------------------- /npx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "run-claude-artifact", 3 | "version": "2.2.1", 4 | "description": "Run Claude AI Artifacts locally - quick preview, or create projects, build, deploy, and push to a Git repository.", 5 | "bin": { 6 | "run-claude-artifact": "./run-claude-artifact.js" 7 | }, 8 | "scripts": { 9 | "build": "echo \"nothing to build\"", 10 | "test": "node run-claude-artifact.js --help", 11 | "publish:package": "node publish.js" 12 | }, 13 | "author": "Cláudio Silva", 14 | "license": "MIT", 15 | "keywords": [ 16 | "claude", 17 | "artifact", 18 | "react", 19 | "vite", 20 | "typescript", 21 | "tailwindcss", 22 | "shadcn-ui" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/claudio-silva/claude-artifact-runner" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as LabelPrimitive from "@radix-ui/react-label" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "src/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< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef & 14 | VariantProps 15 | >(({ className, ...props }, ref) => ( 16 | 21 | )) 22 | Label.displayName = LabelPrimitive.Root.displayName 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | '@typescript-eslint/no-unused-vars': ['error', { 18 | argsIgnorePattern: '^_', 19 | varsIgnorePattern: '^_', 20 | }], 21 | }, 22 | overrides: [ 23 | { 24 | files: ['**/components/ui/**/*.tsx'], 25 | rules: { 26 | 'react-refresh/only-export-components': 'off' 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "src/lib/utils" 4 | 5 | export type TextareaProps = React.TextareaHTMLAttributes 6 | 7 | const Textarea = React.forwardRef( 8 | ({ className, ...props }, ref) => { 9 | return ( 10 |

18 |     )
19 |   }
20 | )
21 | Textarea.displayName = "Textarea"
22 | 
23 | export { Textarea }
24 |

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

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

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |   ({ className, type, ...props }, ref) => {
 9 |     return (
10 |       <input
11 |         type={type}
12 |         className={cn(
13 |           "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",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Input.displayName = "Input"
23 | 
24 | export { Input }
25 |

--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Toast,
 3 |   ToastClose,
 4 |   ToastDescription,
 5 |   ToastProvider,
 6 |   ToastTitle,
 7 |   ToastViewport,
 8 | } from "src/components/ui/toast"
 9 | import { useToast } from "src/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 |

--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         node-version: [20.19.5, 23.x]
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v4
19 |     
20 |     - name: Use Node.js ${{ matrix.node-version }}
21 |       uses: actions/setup-node@v4
22 |       with:
23 |         node-version: ${{ matrix.node-version }}
24 |         cache: 'npm'
25 |     
26 |     - name: Install dependencies
27 |       run: npm ci
28 |       
29 |     - name: Run linting
30 |       run: npm run lint
31 |       
32 |     - name: Build
33 |       run: npm run build
34 |       
35 |     - name: Upload build artifacts
36 |       uses: actions/upload-artifact@v4
37 |       with:
38 |         name: dist-node-${{ matrix.node-version }}
39 |         path: dist/
40 |         if-no-files-found: error

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/*": ["src/*"],
 6 |       "virtual:generated-pages": ["./node_modules/vite-plugin-pages/client"]
 7 |     },
 8 |     "composite": true,
 9 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
10 |     "target": "ES2020",
11 |     "useDefineForClassFields": true,
12 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
13 |     "module": "ESNext",
14 |     "skipLibCheck": true,
15 | 
16 |     /* Bundler mode */
17 |     "moduleResolution": "bundler",
18 |     "allowImportingTsExtensions": true,
19 |     "resolveJsonModule": true,
20 |     "isolatedModules": true,
21 |     "moduleDetection": "force",
22 |     "noEmit": true,
23 |     "jsx": "react-jsx",
24 | 
25 |     /* Linting */
26 |     "strict": true,
27 |     "noUnusedLocals": true,
28 |     "noUnusedParameters": true,
29 |     "noFallthroughCasesInSwitch": true
30 |   },
31 |   "include": ["src/**/*"]
32 | }
33 |

--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes"
 2 | import { Toaster as Sonner } from "sonner"
 3 | 
 4 | type ToasterProps = React.ComponentProps<typeof Sonner>
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = "system" } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps["theme"]}
12 |       className="toaster group"
13 |       toastOptions={{
14 |         classNames: {
15 |           toast:
16 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17 |           description: "group-[.toast]:text-muted-foreground",
18 |           actionButton:
19 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
20 |           cancelButton:
21 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
22 |         },
23 |       }}
24 |       {...props}
25 |     />
26 |   )
27 | }
28 | 
29 | export { Toaster }
30 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Cláudio Silva
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 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 "src/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "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",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }
29 |

--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SliderPrimitive from "@radix-ui/react-slider"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const Slider = React.forwardRef<
 7 |   React.ElementRef<typeof SliderPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SliderPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex w-full touch-none select-none items-center",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
19 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
20 |     </SliderPrimitive.Track>
21 |     <SliderPrimitive.Thumb 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" />
22 |   </SliderPrimitive.Root>
23 | ))
24 | Slider.displayName = SliderPrimitive.Root.displayName
25 | 
26 | export { Slider }
27 |

--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-6 w-11 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",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "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"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ))
25 | Switch.displayName = SwitchPrimitives.Root.displayName
26 | 
27 | export { Switch }
28 |

--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "src/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<
13 |   React.ElementRef<typeof TooltipPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |   <TooltipPrimitive.Content
17 |     ref={ref}
18 |     sideOffset={sideOffset}
19 |     className={cn(
20 |       "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",
21 |       className
22 |     )}
23 |     {...props}
24 |   />
25 | ))
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
27 | 
28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
29 |

--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "src/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 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 |

--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const HoverCard = HoverCardPrimitive.Root
 7 | 
 8 | const HoverCardTrigger = HoverCardPrimitive.Trigger
 9 | 
10 | const HoverCardContent = React.forwardRef<
11 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <HoverCardPrimitive.Content
15 |     ref={ref}
16 |     align={align}
17 |     sideOffset={sideOffset}
18 |     className={cn(
19 |       "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",
20 |       className
21 |     )}
22 |     {...props}
23 |   />
24 | ))
25 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
26 | 
27 | export { HoverCard, HoverCardTrigger, HoverCardContent }
28 |

--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef<
11 |   React.ElementRef<typeof PopoverPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <PopoverPrimitive.Portal>
15 |     <PopoverPrimitive.Content
16 |       ref={ref}
17 |       align={align}
18 |       sideOffset={sideOffset}
19 |       className={cn(
20 |         "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",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   </PopoverPrimitive.Portal>
26 | ))
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
28 | 
29 | export { Popover, PopoverTrigger, PopoverContent }
30 |

--------------------------------------------------------------------------------
/README.default.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 | export default {
18 |   // other rules...
19 |   parserOptions: {
20 |     ecmaVersion: 'latest',
21 |     sourceType: 'module',
22 |     project: ['./tsconfig.json', './tsconfig.node.json'],
23 |     tsconfigRootDir: __dirname,
24 |   },
25 | }
26 | ```
27 | 
28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
31 |

--------------------------------------------------------------------------------
/vite.single.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, mergeConfig, type UserConfig } from 'vite';
 2 | import baseConfig from './vite.config';
 3 | import { viteSingleFile } from 'vite-plugin-singlefile';
 4 | import fs from 'node:fs';
 5 | import path from 'node:path';
 6 | 
 7 | const inlineFaviconPost = {
 8 |   name: 'inline-favicon-post',
 9 |   transformIndexHtml: {
10 |     order: 'post' as const,
11 |     handler(html: string) {
12 |       const icoPath = path.resolve(__dirname, 'public/favicon.ico');
13 |       if (!fs.existsSync(icoPath)) return html;
14 |       const icoBase64 = fs.readFileSync(icoPath).toString('base64');
15 |       const tag = `<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,${icoBase64}">`;
16 |       return html.includes('rel="icon"')
17 |         ? html.replace(/<link[^>]*rel=["'](?:icon|shortcut icon)["'][^>]*>/, tag)
18 |         : html.replace('</head>', `${tag}\n</head>`);
19 |     }
20 |   }
21 | };
22 | 
23 | export default defineConfig((env) => {
24 |   const base: UserConfig = typeof baseConfig === 'function' 
25 |     ? (baseConfig as (env: typeof env) => UserConfig)(env) 
26 |     : (baseConfig as UserConfig);
27 |   return mergeConfig(base, {
28 |     plugins: [...(base.plugins || []), viteSingleFile(), inlineFaviconPost],
29 |     build: {
30 |       // For single-file builds, prevent copying files from public/ (like favicon.ico)
31 |       copyPublicDir: false
32 |     }
33 |   });
34 | });
35 | 
36 | 
37 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import path from 'path'
 4 | import fs from 'node:fs';
 5 | import Pages from 'vite-plugin-pages';
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig(() => {
 9 | 
10 |   // For multi-file builds, do not inline the favicon. Ensure a standard link exists (optional safeguard).
11 |   const ensureFaviconLinkPlugin = {
12 |     name: 'ensure-favicon-link',
13 |     apply(_config: unknown, { command }: { command: string }) {
14 |       return command === 'build';
15 |     },
16 |     transformIndexHtml: {
17 |       order: 'pre' as const,
18 |       handler(html: string) {
19 |         const icoPath = path.resolve(__dirname, 'public/favicon.ico');
20 |         if (!fs.existsSync(icoPath)) return html;
21 |         const tag = `<link rel="icon" type="image/x-icon" href="/favicon.ico">`;
22 |         return html.includes('rel="icon"')
23 |           ? html
24 |           : html.replace('</head>', `${tag}\n</head>`);
25 |       }
26 |     }
27 |   };
28 | 
29 |   // No cleanup for multi-file builds; keep favicon.ico in output
30 | 
31 |   return {
32 |     plugins: [
33 |       react(),
34 |       Pages({
35 |         dirs: [{ dir: 'src/artifacts', baseRoute: '' }],
36 |         extensions: ['jsx', 'tsx'],
37 |       }),
38 |       ensureFaviconLinkPlugin,
39 |     ].filter(Boolean),
40 |     resolve: {
41 |       alias: {
42 |         '@': path.resolve(__dirname, './src'),
43 |         'src': path.resolve(__dirname, './src'),
44 |       },
45 |     }
46 |   }
47 | })
48 |

--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const Avatar = React.forwardRef<
 7 |   React.ElementRef<typeof AvatarPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <AvatarPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14 |       className
15 |     )}
16 |     {...props}
17 |   />
18 | ))
19 | Avatar.displayName = AvatarPrimitive.Root.displayName
20 | 
21 | const AvatarImage = React.forwardRef<
22 |   React.ElementRef<typeof AvatarPrimitive.Image>,
23 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24 | >(({ className, ...props }, ref) => (
25 |   <AvatarPrimitive.Image
26 |     ref={ref}
27 |     className={cn("aspect-square h-full w-full", className)}
28 |     {...props}
29 |   />
30 | ))
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
32 | 
33 | const AvatarFallback = React.forwardRef<
34 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
35 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36 | >(({ className, ...props }, ref) => (
37 |   <AvatarPrimitive.Fallback
38 |     ref={ref}
39 |     className={cn(
40 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
41 |       className
42 |     )}
43 |     {...props}
44 |   />
45 | ))
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
47 | 
48 | export { Avatar, AvatarImage, AvatarFallback }
49 |

--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "src/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<
30 |   React.ElementRef<typeof TogglePrimitive.Root>,
31 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
32 |     VariantProps<typeof toggleVariants>
33 | >(({ className, variant, size, ...props }, ref) => (
34 |   <TogglePrimitive.Root
35 |     ref={ref}
36 |     className={cn(toggleVariants({ variant, size, className }))}
37 |     {...props}
38 |   />
39 | ))
40 | 
41 | Toggle.displayName = TogglePrimitive.Root.displayName
42 | 
43 | export { Toggle, toggleVariants }
44 |

--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 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 "src/lib/utils"
 6 | 
 7 | const RadioGroup = React.forwardRef<
 8 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
10 | >(({ className, ...props }, ref) => {
11 |   return (
12 |     <RadioGroupPrimitive.Root
13 |       className={cn("grid gap-2", className)}
14 |       {...props}
15 |       ref={ref}
16 |     />
17 |   )
18 | })
19 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
20 | 
21 | const RadioGroupItem = React.forwardRef<
22 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
23 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
24 | >(({ className, ...props }, ref) => {
25 |   return (
26 |     <RadioGroupPrimitive.Item
27 |       ref={ref}
28 |       className={cn(
29 |         "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",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
35 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
36 |       </RadioGroupPrimitive.Indicator>
37 |     </RadioGroupPrimitive.Item>
38 |   )
39 | })
40 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
41 | 
42 | export { RadioGroup, RadioGroupItem }
43 |

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

--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "src/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<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 |

--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | import { GripVertical } from "lucide-react"
 2 | import * as ResizablePrimitive from "react-resizable-panels"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const ResizablePanelGroup = ({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
10 |   <ResizablePrimitive.PanelGroup
11 |     className={cn(
12 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | )
18 | 
19 | const ResizablePanel = ResizablePrimitive.Panel
20 | 
21 | const ResizableHandle = ({
22 |   withHandle,
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
26 |   withHandle?: boolean
27 | }) => (
28 |   <ResizablePrimitive.PanelResizeHandle
29 |     className={cn(
30 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
31 |       className
32 |     )}
33 |     {...props}
34 |   >
35 |     {withHandle && (
36 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
37 |         <GripVertical className="h-2.5 w-2.5" />
38 |       </div>
39 |     )}
40 |   </ResizablePrimitive.PanelResizeHandle>
41 | )
42 | 
43 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
44 |

--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 3 | import { VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "src/lib/utils"
 6 | import { toggleVariants } from "src/components/ui/toggle"
 7 | 
 8 | const ToggleGroupContext = React.createContext<
 9 |   VariantProps<typeof toggleVariants>
10 | >({
11 |   size: "default",
12 |   variant: "default",
13 | })
14 | 
15 | const ToggleGroup = React.forwardRef<
16 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
17 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
18 |     VariantProps<typeof toggleVariants>
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |   <ToggleGroupPrimitive.Root
21 |     ref={ref}
22 |     className={cn("flex items-center justify-center gap-1", className)}
23 |     {...props}
24 |   >
25 |     <ToggleGroupContext.Provider value={{ variant, size }}>
26 |       {children}
27 |     </ToggleGroupContext.Provider>
28 |   </ToggleGroupPrimitive.Root>
29 | ))
30 | 
31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
32 | 
33 | const ToggleGroupItem = React.forwardRef<
34 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
35 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
36 |     VariantProps<typeof toggleVariants>
37 | >(({ className, children, variant, size, ...props }, ref) => {
38 |   const context = React.useContext(ToggleGroupContext)
39 | 
40 |   return (
41 |     <ToggleGroupPrimitive.Item
42 |       ref={ref}
43 |       className={cn(
44 |         toggleVariants({
45 |           variant: context.variant || variant,
46 |           size: context.size || size,
47 |         }),
48 |         className
49 |       )}
50 |       {...props}
51 |     >
52 |       {children}
53 |     </ToggleGroupPrimitive.Item>
54 |   )
55 | })
56 | 
57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
58 | 
59 | export { ToggleGroup, ToggleGroupItem }
60 |

--------------------------------------------------------------------------------
/src/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 whitespace-nowrap 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 |

--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "src/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "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",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     {...props}
49 |   />
50 | ))
51 | TabsContent.displayName = TabsPrimitive.Content.displayName
52 | 
53 | export { Tabs, TabsList, TabsTrigger, TabsContent }
54 |

--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 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 "src/lib/utils"
 6 | 
 7 | const Accordion = AccordionPrimitive.Root
 8 | 
 9 | const AccordionItem = React.forwardRef<
10 |   React.ElementRef<typeof AccordionPrimitive.Item>,
11 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12 | >(({ className, ...props }, ref) => (
13 |   <AccordionPrimitive.Item
14 |     ref={ref}
15 |     className={cn("border-b", className)}
16 |     {...props}
17 |   />
18 | ))
19 | AccordionItem.displayName = "AccordionItem"
20 | 
21 | const AccordionTrigger = React.forwardRef<
22 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
23 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
24 | >(({ className, children, ...props }, ref) => (
25 |   <AccordionPrimitive.Header className="flex">
26 |     <AccordionPrimitive.Trigger
27 |       ref={ref}
28 |       className={cn(
29 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       {children}
35 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
36 |     </AccordionPrimitive.Trigger>
37 |   </AccordionPrimitive.Header>
38 | ))
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
40 | 
41 | const AccordionContent = React.forwardRef<
42 |   React.ElementRef<typeof AccordionPrimitive.Content>,
43 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
44 | >(({ className, children, ...props }, ref) => (
45 |   <AccordionPrimitive.Content
46 |     ref={ref}
47 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
48 |     {...props}
49 |   >
50 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
51 |   </AccordionPrimitive.Content>
52 | ))
53 | 
54 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
55 | 
56 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
57 |

--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 |

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

--------------------------------------------------------------------------------
/npx/docker/build:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # Docker Hub image name
 4 | IMAGE_NAME="claudiombsilva/claude-artifact-runner"
 5 | 
 6 | # Navigate to docker directory first
 7 | cd "$(dirname "$0")"
 8 | 
 9 | # Get version from npx/package.json (one level up from docker/)
10 | VERSION=$(node -p "require('../package.json').version" 2>/dev/null || echo "latest")
11 | 
12 | # Colors for output
13 | GREEN='\033[0;32m'
14 | BLUE='\033[0;34m'
15 | YELLOW='\033[1;33m'
16 | NC='\033[0m' # No Color
17 | 
18 | echo -e "${BLUE}🐳 Building Docker image for claude-artifact-runner${NC}"
19 | echo -e "${BLUE}Image: ${IMAGE_NAME}${NC}"
20 | echo -e "${BLUE}Version: ${VERSION}${NC}"
21 | echo ""
22 | 
23 | # Check if Docker is running
24 | if ! docker info > /dev/null 2>&1; then
25 |     echo -e "${YELLOW}❌ Docker is not running. Please start Docker and try again.${NC}"
26 |     exit 1
27 | fi
28 | 
29 | # Check if buildx is available
30 | if ! docker buildx version > /dev/null 2>&1; then
31 |     echo -e "${YELLOW}⚠️  Docker buildx not available. Building for current platform only.${NC}"
32 |     echo -e "${BLUE}📦 Building Docker image...${NC}"
33 |     docker build -t "${IMAGE_NAME}:${VERSION}" -t "${IMAGE_NAME}:latest" .
34 | else
35 |     # Create builder instance if it doesn't exist
36 |     if ! docker buildx ls | grep -q "claude-artifact-builder"; then
37 |         echo -e "${BLUE}🔧 Creating buildx builder instance...${NC}"
38 |         docker buildx create --name claude-artifact-builder --use
39 |     else
40 |         docker buildx use claude-artifact-builder
41 |     fi
42 |     
43 |     # Build for multiple architectures
44 |     echo -e "${BLUE}📦 Building Docker image for amd64 and arm64...${NC}"
45 |     docker buildx build \
46 |         --platform linux/amd64,linux/arm64 \
47 |         --tag "${IMAGE_NAME}:${VERSION}" \
48 |         --tag "${IMAGE_NAME}:latest" \
49 |         --load \
50 |         .
51 | fi
52 | 
53 | if [ $? -eq 0 ]; then
54 |     echo -e "${GREEN}✅ Docker image built successfully!${NC}"
55 |     echo ""
56 |     echo -e "${BLUE}Tags created:${NC}"
57 |     echo -e "  - ${IMAGE_NAME}:${VERSION}"
58 |     echo -e "  - ${IMAGE_NAME}:latest"
59 |     echo ""
60 |     echo -e "${BLUE}To publish, run:${NC}"
61 |     echo -e "  ./publish"
62 | else
63 |     echo -e "${YELLOW}❌ Docker build failed.${NC}"
64 |     exit 1
65 | fi

--------------------------------------------------------------------------------
/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { OTPInput, OTPInputContext } from "input-otp"
 3 | import { Dot } from "lucide-react"
 4 | 
 5 | import { cn } from "src/lib/utils"
 6 | 
 7 | const InputOTP = React.forwardRef<
 8 |   React.ElementRef<typeof OTPInput>,
 9 |   React.ComponentPropsWithoutRef<typeof OTPInput>
10 | >(({ className, containerClassName, ...props }, ref) => (
11 |   <OTPInput
12 |     ref={ref}
13 |     containerClassName={cn(
14 |       "flex items-center gap-2 has-[:disabled]:opacity-50",
15 |       containerClassName
16 |     )}
17 |     className={cn("disabled:cursor-not-allowed", className)}
18 |     {...props}
19 |   />
20 | ))
21 | InputOTP.displayName = "InputOTP"
22 | 
23 | const InputOTPGroup = React.forwardRef<
24 |   React.ElementRef<"div">,
25 |   React.ComponentPropsWithoutRef<"div">
26 | >(({ className, ...props }, ref) => (
27 |   <div ref={ref} className={cn("flex items-center", className)} {...props} />
28 | ))
29 | InputOTPGroup.displayName = "InputOTPGroup"
30 | 
31 | const InputOTPSlot = React.forwardRef<
32 |   React.ElementRef<"div">,
33 |   React.ComponentPropsWithoutRef<"div"> & { index: number }
34 | >(({ index, className, ...props }, ref) => {
35 |   const inputOTPContext = React.useContext(OTPInputContext)
36 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
37 | 
38 |   return (
39 |     <div
40 |       ref={ref}
41 |       className={cn(
42 |         "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
43 |         isActive && "z-10 ring-2 ring-ring ring-offset-background",
44 |         className
45 |       )}
46 |       {...props}
47 |     >
48 |       {char}
49 |       {hasFakeCaret && (
50 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
51 |           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
52 |         </div>
53 |       )}
54 |     </div>
55 |   )
56 | })
57 | InputOTPSlot.displayName = "InputOTPSlot"
58 | 
59 | const InputOTPSeparator = React.forwardRef<
60 |   React.ElementRef<"div">,
61 |   React.ComponentPropsWithoutRef<"div">
62 | >(({ ...props }, ref) => (
63 |   <div ref={ref} role="separator" {...props}>
64 |     <Dot />
65 |   </div>
66 | ))
67 | InputOTPSeparator.displayName = "InputOTPSeparator"
68 | 
69 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
70 |

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

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

--------------------------------------------------------------------------------
/npx/docker/README.md:
--------------------------------------------------------------------------------
 1 | ## Docker image for the claude-artifact-runner tool
 2 | 
 3 | The project includes a Docker image that can be used as an alternative to `npx run-claude-artifact`. This is useful for CI/CD pipelines or environments where you don't want to install Node.js locally.
 4 | 
 5 | ### Building the Docker Image
 6 | 
 7 | Run the build script for **local testing**:
 8 | 
 9 | ```bash
10 | npx/docker/build
11 | ```
12 | 
13 | The script will:
14 | - Build the Docker image with both version and `latest` tags
15 | - Read the version from `npx/package.json`
16 | - Display the created tags
17 | - Build for your current platform (useful for local testing)
18 | 
19 | **Note:** The build script is for local testing only. When publishing, the publish script will rebuild the image anyway, so you don't need to run build first.
20 | 
21 | The Dockerfile installs Node.js v23.11.0 (which includes npx) and the `run-claude-artifact` npm package globally.
22 | 
23 | ### Publishing to Docker Hub
24 | 
25 | Use the provided publish script to publish the image:
26 | 
27 | ```bash
28 | npx/docker/publish
29 | ```
30 | 
31 | The script will:
32 | - **Always rebuild** the image using Docker buildx (even if a local image exists)
33 | - Build for both `linux/amd64` and `linux/arm64` architectures
34 | - Verify Docker Hub login
35 | - Push both version and `latest` tags to Docker Hub
36 | 
37 | **Note:** The publish script always rebuilds the image to ensure both architectures are built and pushed. Running the build script first is not necessary and won't speed up the publishing process.
38 | 
39 | **Prerequisites:** Make sure to run `docker login` before publishing.
40 | 
41 | ### Using the Docker Image
42 | 
43 | The Docker image works exactly like `npx run-claude-artifact`, but you need to mount your workspace directory:
44 | 
45 | ```bash
46 | # Run an artifact (with port mapping for dev server)
47 | docker run --rm -p 5173:5173 -v $(pwd):/w -w /w claudiombsilva/claude-artifact-runner my-app.tsx
48 | 
49 | # Build an artifact
50 | docker run --rm -v $(pwd):/w -w /w claudiombsilva/claude-artifact-runner build my-app.tsx
51 | 
52 | # Create a project
53 | docker run --rm -v $(pwd):/w -w /w claudiombsilva/claude-artifact-runner create my-app.tsx
54 | ```
55 | 
56 | **Important:** The `-v $(pwd):/w -w /w` flags mount your current directory into the container, allowing the tool to:
57 | - Read your artifact files (`.tsx`/`.jsx`) from the host
58 | - Write output files back to your host machine (built HTML files, created projects)
59 | 
60 | For the `run` subcommand, use `-p 5173:5173` to map the Vite dev server port to your host, so you can access it at `http://localhost:5173/`.
61 | 
62 | The tool clones the template repository to a temporary directory inside the container, so git operations happen entirely within the container and don't require host filesystem access.
63 | 
64 | The container automatically passes `--no-open --public` flags to prevent browser opening attempts and bind to 0.0.0.0 (making it accessible from outside the container). When the server starts, you'll see a message with the URL to open in your browser.

--------------------------------------------------------------------------------
/npx/docker/publish:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # Docker Hub image name
 4 | IMAGE_NAME="claudiombsilva/claude-artifact-runner"
 5 | 
 6 | # Navigate to docker directory first
 7 | cd "$(dirname "$0")"
 8 | 
 9 | # Get version from npx/package.json (one level up from docker/)
10 | VERSION=$(node -p "require('../package.json').version" 2>/dev/null || echo "latest")
11 | 
12 | # Colors for output
13 | GREEN='\033[0;32m'
14 | BLUE='\033[0;34m'
15 | YELLOW='\033[1;33m'
16 | NC='\033[0m' # No Color
17 | 
18 | echo -e "${BLUE}🐳 Publishing Docker image to Docker Hub${NC}"
19 | echo -e "${BLUE}Image: ${IMAGE_NAME}${NC}"
20 | echo -e "${BLUE}Version: ${VERSION}${NC}"
21 | echo ""
22 | 
23 | # Check if Docker is running
24 | if ! docker info > /dev/null 2>&1; then
25 |     echo -e "${YELLOW}❌ Docker is not running. Please start Docker and try again.${NC}"
26 |     exit 1
27 | fi
28 | 
29 | # Check if Docker Hub credentials exist in config
30 | # Docker Hub can be stored as "https://index.docker.io/v1/" or "docker.io"
31 | DOCKER_CONFIG="${HOME}/.docker/config.json"
32 | 
33 | if [ ! -f "$DOCKER_CONFIG" ]; then
34 |     echo -e "${YELLOW}⚠️  Not logged in to Docker Hub. Please login first:${NC}"
35 |     echo -e "  docker login"
36 |     exit 1
37 | fi
38 | 
39 | if ! grep -qE "(https://index\.docker\.io/v1/|docker\.io)" "$DOCKER_CONFIG" 2>/dev/null; then
40 |     echo -e "${YELLOW}⚠️  Not logged in to Docker Hub. Please login first:${NC}"
41 |     echo -e "  docker login"
42 |     exit 1
43 | fi
44 | 
45 | # Prompt for confirmation
46 | echo -e "${BLUE}✓ Docker Hub login detected${NC}"
47 | read -p "Make sure you are logged in as claudiombsilva and press Enter to continue: "
48 | echo ""
49 | 
50 | # Check if buildx is available (required for multi-architecture builds)
51 | if ! docker buildx version > /dev/null 2>&1; then
52 |     echo -e "${YELLOW}⚠️  Docker buildx not available. Cannot build multi-architecture images.${NC}"
53 |     echo -e "${YELLOW}   Please install Docker buildx or use Docker Desktop.${NC}"
54 |     exit 1
55 | fi
56 | 
57 | # Set up buildx builder for multi-architecture builds
58 | echo -e "${BLUE}🔧 Setting up buildx builder...${NC}"
59 | if ! docker buildx ls | grep -q "claude-artifact-builder"; then
60 |     docker buildx create --name claude-artifact-builder --use
61 | else
62 |     docker buildx use claude-artifact-builder
63 | fi
64 | 
65 | # Build and push multi-architecture images
66 | # Note: We always rebuild here to ensure both architectures are built and pushed
67 | echo -e "${BLUE}📦 Building and pushing Docker images for amd64 and arm64...${NC}"
68 | docker buildx build \
69 |     --platform linux/amd64,linux/arm64 \
70 |     --tag "${IMAGE_NAME}:${VERSION}" \
71 |     --tag "${IMAGE_NAME}:latest" \
72 |     --push \
73 |     .
74 | 
75 | if [ $? -eq 0 ]; then
76 |     echo ""
77 |     echo -e "${GREEN}✅ Successfully published multi-architecture images to Docker Hub!${NC}"
78 |     echo -e "${GREEN}   Platforms: linux/amd64, linux/arm64${NC}"
79 |     echo ""
80 |     echo -e "${BLUE}Usage:${NC}"
81 |     echo -e "  docker run --rm -p 5173:5173 -v \$(pwd):/w -w /w ${IMAGE_NAME} <artifact-file.tsx>"
82 | else
83 |     echo -e "${YELLOW}❌ Build and push failed.${NC}"
84 |     exit 1
85 | fi
86 | 
87 |

--------------------------------------------------------------------------------
/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
  4 | 
  5 | import { cn } from "src/lib/utils"
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 13 | Breadcrumb.displayName = "Breadcrumb"
 14 | 
 15 | const BreadcrumbList = React.forwardRef<
 16 |   HTMLOListElement,
 17 |   React.ComponentPropsWithoutRef<"ol">
 18 | >(({ className, ...props }, ref) => (
 19 |   <ol
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | BreadcrumbList.displayName = "BreadcrumbList"
 29 | 
 30 | const BreadcrumbItem = React.forwardRef<
 31 |   HTMLLIElement,
 32 |   React.ComponentPropsWithoutRef<"li">
 33 | >(({ className, ...props }, ref) => (
 34 |   <li
 35 |     ref={ref}
 36 |     className={cn("inline-flex items-center gap-1.5", className)}
 37 |     {...props}
 38 |   />
 39 | ))
 40 | BreadcrumbItem.displayName = "BreadcrumbItem"
 41 | 
 42 | const BreadcrumbLink = React.forwardRef<
 43 |   HTMLAnchorElement,
 44 |   React.ComponentPropsWithoutRef<"a"> & {
 45 |     asChild?: boolean
 46 |   }
 47 | >(({ asChild, className, ...props }, ref) => {
 48 |   const Comp = asChild ? Slot : "a"
 49 | 
 50 |   return (
 51 |     <Comp
 52 |       ref={ref}
 53 |       className={cn("transition-colors hover:text-foreground", className)}
 54 |       {...props}
 55 |     />
 56 |   )
 57 | })
 58 | BreadcrumbLink.displayName = "BreadcrumbLink"
 59 | 
 60 | const BreadcrumbPage = React.forwardRef<
 61 |   HTMLSpanElement,
 62 |   React.ComponentPropsWithoutRef<"span">
 63 | >(({ className, ...props }, ref) => (
 64 |   <span
 65 |     ref={ref}
 66 |     role="link"
 67 |     aria-disabled="true"
 68 |     aria-current="page"
 69 |     className={cn("font-normal text-foreground", className)}
 70 |     {...props}
 71 |   />
 72 | ))
 73 | BreadcrumbPage.displayName = "BreadcrumbPage"
 74 | 
 75 | const BreadcrumbSeparator = ({
 76 |   children,
 77 |   className,
 78 |   ...props
 79 | }: React.ComponentProps<"li">) => (
 80 |   <li
 81 |     role="presentation"
 82 |     aria-hidden="true"
 83 |     className={cn("[&>svg]:size-3.5", className)}
 84 |     {...props}
 85 |   >
 86 |     {children ?? <ChevronRight />}
 87 |   </li>
 88 | )
 89 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 90 | 
 91 | const BreadcrumbEllipsis = ({
 92 |   className,
 93 |   ...props
 94 | }: React.ComponentProps<"span">) => (
 95 |   <span
 96 |     role="presentation"
 97 |     aria-hidden="true"
 98 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
 99 |     {...props}
100 |   >
101 |     <MoreHorizontal className="h-4 w-4" />
102 |     <span className="sr-only">More</span>
103 |   </span>
104 | )
105 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106 | 
107 | export {
108 |   Breadcrumb,
109 |   BreadcrumbList,
110 |   BreadcrumbItem,
111 |   BreadcrumbLink,
112 |   BreadcrumbPage,
113 |   BreadcrumbSeparator,
114 |   BreadcrumbEllipsis,
115 | }
116 |

--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
  3 | 
  4 | import { cn } from "src/lib/utils"
  5 | import { ButtonProps, buttonVariants } from "src/components/ui/button"
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Pagination.displayName = "Pagination"
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ))
 27 | PaginationContent.displayName = "PaginationContent"
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("", className)} {...props} />
 34 | ))
 35 | PaginationItem.displayName = "PaginationItem"
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | PaginationLink.displayName = "PaginationLink"
 61 | 
 62 | const PaginationPrevious = ({
 63 |   className,
 64 |   ...props
 65 | }: React.ComponentProps<typeof PaginationLink>) => (
 66 |   <PaginationLink
 67 |     aria-label="Go to previous page"
 68 |     size="default"
 69 |     className={cn("gap-1 pl-2.5", className)}
 70 |     {...props}
 71 |   >
 72 |     <ChevronLeft className="h-4 w-4" />
 73 |     <span>Previous</span>
 74 |   </PaginationLink>
 75 | )
 76 | PaginationPrevious.displayName = "PaginationPrevious"
 77 | 
 78 | const PaginationNext = ({
 79 |   className,
 80 |   ...props
 81 | }: React.ComponentProps<typeof PaginationLink>) => (
 82 |   <PaginationLink
 83 |     aria-label="Go to next page"
 84 |     size="default"
 85 |     className={cn("gap-1 pr-2.5", className)}
 86 |     {...props}
 87 |   >
 88 |     <span>Next</span>
 89 |     <ChevronRight className="h-4 w-4" />
 90 |   </PaginationLink>
 91 | )
 92 | PaginationNext.displayName = "PaginationNext"
 93 | 
 94 | const PaginationEllipsis = ({
 95 |   className,
 96 |   ...props
 97 | }: React.ComponentProps<"span">) => (
 98 |   <span
 99 |     aria-hidden
100 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
101 |     {...props}
102 |   >
103 |     <MoreHorizontal className="h-4 w-4" />
104 |     <span className="sr-only">More pages</span>
105 |   </span>
106 | )
107 | PaginationEllipsis.displayName = "PaginationEllipsis"
108 | 
109 | export {
110 |   Pagination,
111 |   PaginationContent,
112 |   PaginationEllipsis,
113 |   PaginationItem,
114 |   PaginationLink,
115 |   PaginationNext,
116 |   PaginationPrevious,
117 | }
118 |

--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "src/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 |

--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Drawer as DrawerPrimitive } from "vaul"
  3 | 
  4 | import { cn } from "src/lib/utils"
  5 | 
  6 | const Drawer = ({
  7 |   shouldScaleBackground = true,
  8 |   ...props
  9 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 10 |   <DrawerPrimitive.Root
 11 |     shouldScaleBackground={shouldScaleBackground}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Drawer.displayName = "Drawer"
 16 | 
 17 | const DrawerTrigger = DrawerPrimitive.Trigger
 18 | 
 19 | const DrawerPortal = DrawerPrimitive.Portal
 20 | 
 21 | const DrawerClose = DrawerPrimitive.Close
 22 | 
 23 | const DrawerOverlay = React.forwardRef<
 24 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 25 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 26 | >(({ className, ...props }, ref) => (
 27 |   <DrawerPrimitive.Overlay
 28 |     ref={ref}
 29 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 30 |     {...props}
 31 |   />
 32 | ))
 33 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 34 | 
 35 | const DrawerContent = React.forwardRef<
 36 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 38 | >(({ className, children, ...props }, ref) => (
 39 |   <DrawerPortal>
 40 |     <DrawerOverlay />
 41 |     <DrawerPrimitive.Content
 42 |       ref={ref}
 43 |       className={cn(
 44 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 45 |         className
 46 |       )}
 47 |       {...props}
 48 |     >
 49 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 50 |       {children}
 51 |     </DrawerPrimitive.Content>
 52 |   </DrawerPortal>
 53 | ))
 54 | DrawerContent.displayName = "DrawerContent"
 55 | 
 56 | const DrawerHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 62 |     {...props}
 63 |   />
 64 | )
 65 | DrawerHeader.displayName = "DrawerHeader"
 66 | 
 67 | const DrawerFooter = ({
 68 |   className,
 69 |   ...props
 70 | }: React.HTMLAttributes<HTMLDivElement>) => (
 71 |   <div
 72 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 73 |     {...props}
 74 |   />
 75 | )
 76 | DrawerFooter.displayName = "DrawerFooter"
 77 | 
 78 | const DrawerTitle = React.forwardRef<
 79 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 80 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 81 | >(({ className, ...props }, ref) => (
 82 |   <DrawerPrimitive.Title
 83 |     ref={ref}
 84 |     className={cn(
 85 |       "text-lg font-semibold leading-none tracking-tight",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 92 | 
 93 | const DrawerDescription = React.forwardRef<
 94 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 95 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 96 | >(({ className, ...props }, ref) => (
 97 |   <DrawerPrimitive.Description
 98 |     ref={ref}
 99 |     className={cn("text-sm text-muted-foreground", className)}
100 |     {...props}
101 |   />
102 | ))
103 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104 | 
105 | export {
106 |   Drawer,
107 |   DrawerPortal,
108 |   DrawerOverlay,
109 |   DrawerTrigger,
110 |   DrawerClose,
111 |   DrawerContent,
112 |   DrawerHeader,
113 |   DrawerFooter,
114 |   DrawerTitle,
115 |   DrawerDescription,
116 | }
117 |

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { RouterProvider, createBrowserRouter, createHashRouter } from 'react-router-dom';
 4 | import routes from 'virtual:generated-pages-react';
 5 | import Layout from './components/layout';
 6 | import './index.css';
 7 | 
 8 | const useHash = typeof window !== 'undefined' && window.location?.protocol === 'file:';
 9 | 
10 | // Get base path from Vite config, or auto-detect from current location
11 | function getBasePath(): string {
12 |   // Use Vite's BASE_URL if configured (from vite.config.ts base option)
13 |   const viteBase = import.meta.env.BASE_URL;
14 |   
15 |   // If BASE_URL is set to something other than '/', use it
16 |   if (viteBase && viteBase !== '/') {
17 |     // Normalize: ensure it starts with / and remove trailing slash (React Router prefers no trailing slash)
18 |     let normalized = viteBase.startsWith('/') ? viteBase : `/${viteBase}`;
19 |     normalized = normalized.endsWith('/') ? normalized.slice(0, -1) : normalized;
20 |     // Ensure we don't return empty string or weird values
21 |     if (normalized && normalized !== '/' && normalized !== '/.') {
22 |       return normalized;
23 |     }
24 |   }
25 |   
26 |   // Auto-detect base path from current location (fallback for cases where
27 |   // base wasn't configured but app is deployed to subdirectory)
28 |   if (typeof window !== 'undefined') {
29 |     // First, try to get from <base> tag if present (Vite injects this when base is configured)
30 |     const baseTag = document.querySelector('base');
31 |     if (baseTag?.href) {
32 |       try {
33 |         const baseUrl = new URL(baseTag.href, window.location.origin);
34 |         if (baseUrl.pathname && baseUrl.pathname !== '/') {
35 |           const path = baseUrl.pathname.endsWith('/') 
36 |             ? baseUrl.pathname.slice(0, -1) 
37 |             : baseUrl.pathname;
38 |           if (path && path !== '/' && path !== '/.') {
39 |             return path;
40 |           }
41 |         }
42 |       } catch {
43 |         // Invalid base URL, fall through to pathname detection
44 |       }
45 |     }
46 |     
47 |     // Fallback: detect from pathname structure
48 |     const pathname = window.location.pathname;
49 |     
50 |     // Check if we're at a root-like path (ends with / or index.html)
51 |     const rootMatch = pathname.match(/^(.+\/)(?:index\.html)?$/);
52 |     if (rootMatch && rootMatch[1] && rootMatch[1] !== '/') {
53 |       // Remove trailing slash for React Router basename
54 |       const detected = rootMatch[1].slice(0, -1);
55 |       if (detected && detected !== '/' && detected !== '/.') {
56 |         return detected;
57 |       }
58 |     }
59 |     
60 |     // If not at root, try to detect base by looking for path segments
61 |     // This is a best-effort fallback - users should configure base in vite.config.ts
62 |     const pathSegments = pathname.split('/').filter(Boolean);
63 |     if (pathSegments.length > 1) {
64 |       // Assume the base might be everything except the last segment
65 |       const possibleBase = '/' + pathSegments.slice(0, -1).join('/');
66 |       if (possibleBase && possibleBase !== '/' && possibleBase !== '/.') {
67 |         return possibleBase;
68 |       }
69 |     }
70 |   }
71 |   
72 |   return '/';
73 | }
74 | 
75 | const basePath = getBasePath();
76 | const mkRoutes = routes.map((route) => ({
77 |   ...route,
78 |   element: <Layout>{route.element}</Layout>,
79 | }));
80 | const router = useHash 
81 |   ? createHashRouter(mkRoutes, { basename: basePath !== '/' ? basePath : undefined })
82 |   : createBrowserRouter(mkRoutes, { basename: basePath !== '/' ? basePath : undefined });
83 | 
84 | ReactDOM.createRoot(document.getElementById('root')!).render(
85 |   <React.StrictMode>
86 |     <RouterProvider router={router} />
87 |   </React.StrictMode>,
88 | );

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "claude-artifact-runner",
  3 |   "private": true,
  4 |   "version": "2.0.0",
  5 |   "type": "module",
  6 |   "engines": {
  7 |     "node": ">=20.0.0"
  8 |   },
  9 |   "author": "Cláudio Silva",
 10 |   "license": "MIT",
 11 |   "repository": {
 12 |     "type": "git",
 13 |     "url": "git+https://github.com/claudio-silva/claude-artifact-runner.git"
 14 |   },
 15 |   "keywords": [
 16 |     "claude",
 17 |     "artifact",
 18 |     "react",
 19 |     "vite",
 20 |     "typescript",
 21 |     "tailwindcss",
 22 |     "shadcn-ui"
 23 |   ],
 24 |   "bin": {
 25 |     "claude-artifact-runner": "./npx/run-claude-artifact.js"
 26 |   },
 27 |   "scripts": {
 28 |     "dev": "vite",
 29 |     "build": "vite build",
 30 |     "build:single": "vite build -c vite.single.config.ts",
 31 |     "build:strict": "tsc -b && vite build",
 32 |     "build:single:strict": "tsc -b && vite build -c vite.single.config.ts",
 33 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 34 |     "preview": "vite preview",
 35 |     "publish:npx": "node npx/publish.js"
 36 |   },
 37 |   "dependencies": {
 38 |     "@babel/runtime": "^7.27.0",
 39 |     "@hookform/resolvers": "^3.9.0",
 40 |     "@radix-ui/react-accordion": "^1.2.0",
 41 |     "@radix-ui/react-alert-dialog": "^1.1.1",
 42 |     "@radix-ui/react-aspect-ratio": "^1.1.0",
 43 |     "@radix-ui/react-avatar": "^1.1.0",
 44 |     "@radix-ui/react-checkbox": "^1.1.1",
 45 |     "@radix-ui/react-collapsible": "^1.1.0",
 46 |     "@radix-ui/react-context-menu": "^2.2.1",
 47 |     "@radix-ui/react-dialog": "^1.1.1",
 48 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
 49 |     "@radix-ui/react-hover-card": "^1.1.1",
 50 |     "@radix-ui/react-label": "^2.1.0",
 51 |     "@radix-ui/react-menubar": "^1.1.1",
 52 |     "@radix-ui/react-navigation-menu": "^1.2.0",
 53 |     "@radix-ui/react-popover": "^1.1.1",
 54 |     "@radix-ui/react-progress": "^1.1.0",
 55 |     "@radix-ui/react-radio-group": "^1.2.0",
 56 |     "@radix-ui/react-scroll-area": "^1.1.0",
 57 |     "@radix-ui/react-select": "^2.1.1",
 58 |     "@radix-ui/react-separator": "^1.1.0",
 59 |     "@radix-ui/react-slider": "^1.2.0",
 60 |     "@radix-ui/react-slot": "^1.1.0",
 61 |     "@radix-ui/react-switch": "^1.1.0",
 62 |     "@radix-ui/react-tabs": "^1.1.0",
 63 |     "@radix-ui/react-toast": "^1.2.1",
 64 |     "@radix-ui/react-toggle": "^1.1.0",
 65 |     "@radix-ui/react-toggle-group": "^1.1.0",
 66 |     "@radix-ui/react-tooltip": "^1.1.2",
 67 |     "class-variance-authority": "^0.7.0",
 68 |     "clsx": "^2.1.1",
 69 |     "cmdk": "^1.0.0",
 70 |     "date-fns": "^3.6.0",
 71 |     "embla-carousel-react": "^8.1.6",
 72 |     "input-otp": "^1.2.4",
 73 |     "lucide-react": "^0.408.0",
 74 |     "next-themes": "^0.3.0",
 75 |     "react": "^18.3.1",
 76 |     "react-day-picker": "^8.10.1",
 77 |     "react-dom": "^18.3.1",
 78 |     "react-hook-form": "^7.52.1",
 79 |     "react-resizable-panels": "^2.0.20",
 80 |     "react-router-dom": "^7.5.2",
 81 |     "recharts": "^2.15.0",
 82 |     "sonner": "^1.5.0",
 83 |     "tailwind-merge": "^2.4.0",
 84 |     "tailwindcss-animate": "^1.0.7",
 85 |     "three": "^0.128.0",
 86 |     "vaul": "^0.9.1",
 87 |     "zod": "^3.23.8"
 88 |   },
 89 |   "devDependencies": {
 90 |     "@types/node": "^20.14.10",
 91 |     "@types/react": "^18.3.3",
 92 |     "@types/react-dom": "^18.3.0",
 93 |     "@typescript-eslint/eslint-plugin": "^8.46.3",
 94 |     "@typescript-eslint/parser": "^8.46.3",
 95 |     "@vitejs/plugin-react": "^5.0.2",
 96 |     "autoprefixer": "^10.4.19",
 97 |     "eslint": "^8.57.0",
 98 |     "eslint-plugin-react-hooks": "^4.6.2",
 99 |     "eslint-plugin-react-refresh": "^0.4.7",
100 |     "glob": "^10.4.5",
101 |     "postcss": "^8.4.39",
102 |     "rimraf": "^5.0.5",
103 |     "tailwindcss": "^3.4.4",
104 |     "typescript": "^5.9.2",
105 |     "vite": "^7.1.11",
106 |     "vite-plugin-pages": "^0.33.1",
107 |     "vite-plugin-singlefile": "^2.3.0"
108 |   },
109 |   "overrides": {
110 |     "glob": "^10.4.5",
111 |     "rimraf": "^5.0.5",
112 |     "@humanwhocodes/config-array": "npm:@eslint/config-array@latest",
113 |     "@humanwhocodes/object-schema": "npm:@eslint/object-schema@latest",
114 |     "inflight": "^2.0.1"
115 |   }
116 | }
117 |

--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  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 "src/lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  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 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "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",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close 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">
 46 |         <X className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogClose,
114 |   DialogTrigger,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 |

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

--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "src/lib/utils"
  7 | 
  8 | const Sheet = SheetPrimitive.Root
  9 | 
 10 | const SheetTrigger = SheetPrimitive.Trigger
 11 | 
 12 | const SheetClose = SheetPrimitive.Close
 13 | 
 14 | const SheetPortal = SheetPrimitive.Portal
 15 | 
 16 | const SheetOverlay = React.forwardRef<
 17 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 18 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 19 | >(({ className, ...props }, ref) => (
 20 |   <SheetPrimitive.Overlay
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  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 | ))
 29 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 30 | 
 31 | const sheetVariants = cva(
 32 |   "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",
 33 |   {
 34 |     variants: {
 35 |       side: {
 36 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 37 |         bottom:
 38 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 39 |         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",
 40 |         right:
 41 |           "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",
 42 |       },
 43 |     },
 44 |     defaultVariants: {
 45 |       side: "right",
 46 |     },
 47 |   }
 48 | )
 49 | 
 50 | interface SheetContentProps
 51 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 52 |     VariantProps<typeof sheetVariants> {}
 53 | 
 54 | const SheetContent = React.forwardRef<
 55 |   React.ElementRef<typeof SheetPrimitive.Content>,
 56 |   SheetContentProps
 57 | >(({ side = "right", className, children, ...props }, ref) => (
 58 |   <SheetPortal>
 59 |     <SheetOverlay />
 60 |     <SheetPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(sheetVariants({ side }), className)}
 63 |       {...props}
 64 |     >
 65 |       {children}
 66 |       <SheetPrimitive.Close 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">
 67 |         <X className="h-4 w-4" />
 68 |         <span className="sr-only">Close</span>
 69 |       </SheetPrimitive.Close>
 70 |     </SheetPrimitive.Content>
 71 |   </SheetPortal>
 72 | ))
 73 | SheetContent.displayName = SheetPrimitive.Content.displayName
 74 | 
 75 | const SheetHeader = ({
 76 |   className,
 77 |   ...props
 78 | }: React.HTMLAttributes<HTMLDivElement>) => (
 79 |   <div
 80 |     className={cn(
 81 |       "flex flex-col space-y-2 text-center sm:text-left",
 82 |       className
 83 |     )}
 84 |     {...props}
 85 |   />
 86 | )
 87 | SheetHeader.displayName = "SheetHeader"
 88 | 
 89 | const SheetFooter = ({
 90 |   className,
 91 |   ...props
 92 | }: React.HTMLAttributes<HTMLDivElement>) => (
 93 |   <div
 94 |     className={cn(
 95 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 96 |       className
 97 |     )}
 98 |     {...props}
 99 |   />
100 | )
101 | SheetFooter.displayName = "SheetFooter"
102 | 
103 | const SheetTitle = React.forwardRef<
104 |   React.ElementRef<typeof SheetPrimitive.Title>,
105 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
106 | >(({ className, ...props }, ref) => (
107 |   <SheetPrimitive.Title
108 |     ref={ref}
109 |     className={cn("text-lg font-semibold text-foreground", className)}
110 |     {...props}
111 |   />
112 | ))
113 | SheetTitle.displayName = SheetPrimitive.Title.displayName
114 | 
115 | const SheetDescription = React.forwardRef<
116 |   React.ElementRef<typeof SheetPrimitive.Description>,
117 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
118 | >(({ className, ...props }, ref) => (
119 |   <SheetPrimitive.Description
120 |     ref={ref}
121 |     className={cn("text-sm text-muted-foreground", className)}
122 |     {...props}
123 |   />
124 | ))
125 | SheetDescription.displayName = SheetPrimitive.Description.displayName
126 | 
127 | export {
128 |   Sheet,
129 |   SheetPortal,
130 |   SheetOverlay,
131 |   SheetTrigger,
132 |   SheetClose,
133 |   SheetContent,
134 |   SheetHeader,
135 |   SheetFooter,
136 |   SheetTitle,
137 |   SheetDescription,
138 | }
139 |

--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "src/lib/utils"
 14 | import { Label } from "src/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 |

--------------------------------------------------------------------------------
/src/artifacts/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import { AlertCircle, Mail, Lock, Github, Facebook, Twitter } from 'lucide-react';
  3 | import { Alert, AlertDescription } from '@/components/ui/alert';
  4 | import { Button } from '@/components/ui/button';
  5 | import { Input } from '@/components/ui/input';
  6 | import { Label } from '@/components/ui/label';
  7 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
  8 | import { Link } from "react-router-dom";
  9 | 
 10 | const LoginForm = () => {
 11 |   const [email, setEmail] = useState('');
 12 |   const [password, setPassword] = useState('');
 13 |   const [error, setError] = useState('');
 14 | 
 15 |   const handleLogin = (e: React.FormEvent) => {
 16 |     e.preventDefault();
 17 |     if (!email || !password) {
 18 |       setError('Please fill in all fields');
 19 |     } else {
 20 |       setError('');
 21 |       console.log('Login attempted:', { email, password });
 22 |       // Here you would typically handle the login logic
 23 |       alert(`Login attempted: ${email}, ${password}`);
 24 |     }
 25 |   };
 26 | 
 27 |   const handleSocialLogin = (platform: string) => {
 28 |     console.log(`${platform} login attempted`);
 29 |     // Here you would typically handle the social login logic
 30 |     alert(`${platform} login attempted`);
 31 |   };
 32 | 
 33 |   return (
 34 |     <div className="flex items-center justify-center min-h-screen bg-gray-100">
 35 |       <Card className="w-full max-w-md">
 36 |         <CardHeader>
 37 |           <CardTitle className="text-2xl font-bold text-center">Demo Login Component</CardTitle>
 38 |         </CardHeader>
 39 |         <CardContent>
 40 |           <form onSubmit={handleLogin} className="space-y-4">
 41 |             <div className="space-y-2">
 42 |               <Label htmlFor="email">Email</Label>
 43 |               <div className="relative">
 44 |                 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
 45 |                 <Input
 46 |                   id="email"
 47 |                   type="email"
 48 |                   placeholder="Enter your email"
 49 |                   value={email}
 50 |                   onChange={(e) => setEmail(e.target.value)}
 51 |                   className="pl-10"
 52 |                 />
 53 |               </div>
 54 |             </div>
 55 |             <div className="space-y-2">
 56 |               <Label htmlFor="password">Password</Label>
 57 |               <div className="relative">
 58 |                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
 59 |                 <Input
 60 |                   id="password"
 61 |                   type="password"
 62 |                   placeholder="Enter your password"
 63 |                   value={password}
 64 |                   onChange={(e) => setPassword(e.target.value)}
 65 |                   className="pl-10"
 66 |                 />
 67 |               </div>
 68 |             </div>
 69 |             <Button type="submit" className="w-full">Log In</Button>
 70 |           </form>
 71 | 
 72 |           {error && (
 73 |             <Alert variant="destructive" className="mt-4">
 74 |               <AlertCircle className="h-4 w-4" />
 75 |               <AlertDescription>{error}</AlertDescription>
 76 |             </Alert>
 77 |           )}
 78 | 
 79 |           <div className="relative mt-6">
 80 |             <div className="absolute inset-0 flex items-center">
 81 |               <span className="w-full border-t" />
 82 |             </div>
 83 |             <div className="relative flex justify-center text-xs uppercase">
 84 |               <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
 85 |             </div>
 86 |           </div>
 87 | 
 88 |           <div className="grid grid-cols-3 gap-3 mt-6">
 89 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Github')}>
 90 |               <Github className="h-5 w-5" />
 91 |               GitHub
 92 |             </Button>
 93 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Facebook')}>
 94 |               <Facebook className="h-5 w-5" />
 95 |               Facebook
 96 |             </Button>
 97 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Twitter')}>
 98 |               <Twitter className="h-5 w-5" />
 99 |               Twitter
100 |             </Button>
101 |           </div>
102 | 
103 |           <div className="text-center text-sm mt-6">
104 |             Don't have an account?{' '}
105 |             <Link to="signup" className="text-primary hover:underline font-bold">
106 |               Sign up
107 |             </Link>
108 |           </div>
109 |         </CardContent>
110 |       </Card>
111 |     </div>
112 |   );
113 | };
114 | 
115 | export default LoginForm;

--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  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 = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "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",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 |

--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "src/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "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]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "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",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "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",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "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",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 |

--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "src/lib/utils"
  7 | import { Dialog, DialogContent } from "src/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | type CommandDialogProps = DialogProps
 25 | 
 26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 30 |         <Command 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">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "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",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "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",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "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",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 |

--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  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 "src/lib/utils"
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn(
 15 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 16 |       className
 17 |     )}
 18 |     {...props}
 19 |   >
 20 |     {children}
 21 |     <NavigationMenuViewport />
 22 |   </NavigationMenuPrimitive.Root>
 23 | ))
 24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 25 | 
 26 | const NavigationMenuList = React.forwardRef<
 27 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 28 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 29 | >(({ className, ...props }, ref) => (
 30 |   <NavigationMenuPrimitive.List
 31 |     ref={ref}
 32 |     className={cn(
 33 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 34 |       className
 35 |     )}
 36 |     {...props}
 37 |   />
 38 | ))
 39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 40 | 
 41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 42 | 
 43 | const navigationMenuTriggerStyle = cva(
 44 |   "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"
 45 | )
 46 | 
 47 | const NavigationMenuTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 49 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 50 | >(({ className, children, ...props }, ref) => (
 51 |   <NavigationMenuPrimitive.Trigger
 52 |     ref={ref}
 53 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 54 |     {...props}
 55 |   >
 56 |     {children}{" "}
 57 |     <ChevronDown
 58 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
 59 |       aria-hidden="true"
 60 |     />
 61 |   </NavigationMenuPrimitive.Trigger>
 62 | ))
 63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 64 | 
 65 | const NavigationMenuContent = React.forwardRef<
 66 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 67 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 68 | >(({ className, ...props }, ref) => (
 69 |   <NavigationMenuPrimitive.Content
 70 |     ref={ref}
 71 |     className={cn(
 72 |       "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 ",
 73 |       className
 74 |     )}
 75 |     {...props}
 76 |   />
 77 | ))
 78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 79 | 
 80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 81 | 
 82 | const NavigationMenuViewport = React.forwardRef<
 83 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 84 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 85 | >(({ className, ...props }, ref) => (
 86 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 87 |     <NavigationMenuPrimitive.Viewport
 88 |       className={cn(
 89 |         "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)]",
 90 |         className
 91 |       )}
 92 |       ref={ref}
 93 |       {...props}
 94 |     />
 95 |   </div>
 96 | ))
 97 | NavigationMenuViewport.displayName =
 98 |   NavigationMenuPrimitive.Viewport.displayName
 99 | 
100 | const NavigationMenuIndicator = React.forwardRef<
101 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103 | >(({ className, ...props }, ref) => (
104 |   <NavigationMenuPrimitive.Indicator
105 |     ref={ref}
106 |     className={cn(
107 |       "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",
108 |       className
109 |     )}
110 |     {...props}
111 |   >
112 |     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
113 |   </NavigationMenuPrimitive.Indicator>
114 | ))
115 | NavigationMenuIndicator.displayName =
116 |   NavigationMenuPrimitive.Indicator.displayName
117 | 
118 | export {
119 |   navigationMenuTriggerStyle,
120 |   NavigationMenu,
121 |   NavigationMenuList,
122 |   NavigationMenuItem,
123 |   NavigationMenuContent,
124 |   NavigationMenuTrigger,
125 |   NavigationMenuLink,
126 |   NavigationMenuIndicator,
127 |   NavigationMenuViewport,
128 | }
129 |

--------------------------------------------------------------------------------
/src/artifacts/signup.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import { AlertCircle, Mail, Lock, Github, Facebook, Twitter } from 'lucide-react';
  3 | import { Alert, AlertDescription } from '@/components/ui/alert';
  4 | import { Button } from '@/components/ui/button';
  5 | import { Input } from '@/components/ui/input';
  6 | import { Label } from '@/components/ui/label';
  7 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
  8 | import { Link } from "react-router-dom";
  9 | 
 10 | const SignupForm = () => {
 11 |   const [email, setEmail] = useState('');
 12 |   const [password, setPassword] = useState('');
 13 |   const [confirmPassword, setConfirmPassword] = useState('');
 14 |   const [error, setError] = useState('');
 15 | 
 16 |   const handleSignup = (e: React.FormEvent) => {
 17 |     e.preventDefault();
 18 |     if (!email || !password || !confirmPassword) {
 19 |       setError('Please fill in all fields');
 20 |     } else if (password !== confirmPassword) {
 21 |       setError('Passwords do not match');
 22 |     } else {
 23 |       setError('');
 24 |       console.log('Signup attempted:', { email, password });
 25 |       // Here you would typically handle the signup logic
 26 |       alert(`Signup attempted: ${email}, ${password}`);
 27 |     }
 28 |   };
 29 | 
 30 |   const handleSocialLogin = (platform: string) => {
 31 |     console.log(`${platform} signup attempted`);
 32 |     // Here you would typically handle the social signup logic
 33 |     alert(`${platform} signup attempted`);
 34 |   };
 35 | 
 36 |   return (
 37 |     <div className="flex items-center justify-center min-h-screen bg-gray-100">
 38 |       <Card className="w-full max-w-md">
 39 |         <CardHeader>
 40 |           <CardTitle className="text-2xl font-bold text-center">Create an Account</CardTitle>
 41 |         </CardHeader>
 42 |         <CardContent>
 43 |           <form onSubmit={handleSignup} className="space-y-4">
 44 |             <div className="space-y-2">
 45 |               <Label htmlFor="email">Email</Label>
 46 |               <div className="relative">
 47 |                 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
 48 |                 <Input
 49 |                   id="email"
 50 |                   type="email"
 51 |                   placeholder="Enter your email"
 52 |                   value={email}
 53 |                   onChange={(e) => setEmail(e.target.value)}
 54 |                   className="pl-10"
 55 |                 />
 56 |               </div>
 57 |             </div>
 58 |             <div className="space-y-2">
 59 |               <Label htmlFor="password">Password</Label>
 60 |               <div className="relative">
 61 |                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
 62 |                 <Input
 63 |                   id="password"
 64 |                   type="password"
 65 |                   placeholder="Enter your password"
 66 |                   value={password}
 67 |                   onChange={(e) => setPassword(e.target.value)}
 68 |                   className="pl-10"
 69 |                 />
 70 |               </div>
 71 |             </div>
 72 |             <div className="space-y-2">
 73 |               <Label htmlFor="confirmPassword">Confirm Password</Label>
 74 |               <div className="relative">
 75 |                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
 76 |                 <Input
 77 |                   id="confirmPassword"
 78 |                   type="password"
 79 |                   placeholder="Confirm your password"
 80 |                   value={confirmPassword}
 81 |                   onChange={(e) => setConfirmPassword(e.target.value)}
 82 |                   className="pl-10"
 83 |                 />
 84 |               </div>
 85 |             </div>
 86 |             <Button type="submit" className="w-full">Sign Up</Button>
 87 |           </form>
 88 | 
 89 |           {error && (
 90 |             <Alert variant="destructive" className="mt-4">
 91 |               <AlertCircle className="h-4 w-4" />
 92 |               <AlertDescription>{error}</AlertDescription>
 93 |             </Alert>
 94 |           )}
 95 | 
 96 |           <div className="relative mt-6">
 97 |             <div className="absolute inset-0 flex items-center">
 98 |               <span className="w-full border-t" />
 99 |             </div>
100 |             <div className="relative flex justify-center text-xs uppercase">
101 |               <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
102 |             </div>
103 |           </div>
104 | 
105 |           <div className="grid grid-cols-3 gap-3 mt-6">
106 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Github')}>
107 |               <Github className="h-5 w-5" />
108 |               GitHub
109 |             </Button>
110 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Facebook')}>
111 |               <Facebook className="h-5 w-5" />
112 |               Facebook
113 |             </Button>
114 |             <Button variant="outline" className="w-full flex items-center justify-center gap-2" onClick={() => handleSocialLogin('Twitter')}>
115 |               <Twitter className="h-5 w-5" />
116 |               Twitter
117 |             </Button>
118 |           </div>
119 | 
120 |           <div className="text-center text-sm mt-6">
121 |             Already have an account?{' '}
122 |             <Link to="/" className="text-primary hover:underline font-bold">
123 |               Log in
124 |             </Link>
125 |           </div>
126 |         </CardContent>
127 |       </Card>
128 |     </div>
129 |   );
130 | };
131 | 
132 | export default SignupForm;
133 |

--------------------------------------------------------------------------------
/npx/publish.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | const fs = require('fs');
  3 | const path = require('path');
  4 | const { execSync } = require('child_process');
  5 | const readline = require('readline');
  6 | 
  7 | const rl = readline.createInterface({
  8 |   input: process.stdin,
  9 |   output: process.stdout
 10 | });
 11 | 
 12 | function question(prompt) {
 13 |   return new Promise((resolve) => {
 14 |     rl.question(prompt, resolve);
 15 |   });
 16 | }
 17 | 
 18 | function getCurrentVersion() {
 19 |   const packageJsonPath = path.join(__dirname, 'package.json');
 20 |   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 21 |   return packageJson.version;
 22 | }
 23 | 
 24 | function updatePackageJson(version) {
 25 |   const packageJsonPath = path.join(__dirname, 'package.json');
 26 |   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 27 |   packageJson.version = version;
 28 |   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8');
 29 |   console.log(`✅ Updated package.json to version ${version}`);
 30 | }
 31 | 
 32 | function getReadmeVersion() {
 33 |   const readmePath = path.join(__dirname, 'README.md');
 34 |   const readmeContent = fs.readFileSync(readmePath, 'utf8');
 35 |   const match = readmeContent.match(/^# run-claude-artifact v(\d+\.\d+\.\d+)/m);
 36 |   return match ? match[1] : null;
 37 | }
 38 | 
 39 | function updateReadme(version) {
 40 |   const readmePath = path.join(__dirname, 'README.md');
 41 |   let readmeContent = fs.readFileSync(readmePath, 'utf8');
 42 |   readmeContent = readmeContent.replace(/^# run-claude-artifact v\d+\.\d+\.\d+/m, `# run-claude-artifact v${version}`);
 43 |   fs.writeFileSync(readmePath, readmeContent, 'utf8');
 44 |   console.log(`✅ Updated README.md to version ${version}`);
 45 | }
 46 | 
 47 | function hasGitChanges() {
 48 |   try {
 49 |     const status = execSync('git status --porcelain', { encoding: 'utf8', cwd: path.join(__dirname, '..') });
 50 |     return status.trim().length > 0;
 51 |   } catch (err) {
 52 |     return false;
 53 |   }
 54 | }
 55 | 
 56 | function getChangedFiles() {
 57 |   try {
 58 |     const status = execSync('git status --porcelain', { encoding: 'utf8', cwd: path.join(__dirname, '..') });
 59 |     return status.trim().split('\n').filter(line => line.trim().length > 0);
 60 |   } catch (err) {
 61 |     return [];
 62 |   }
 63 | }
 64 | 
 65 | async function main() {
 66 |   try {
 67 |     // Step 1: Get current version
 68 |     const currentVersion = getCurrentVersion();
 69 |     console.log(`📦 Current version: ${currentVersion}`);
 70 | 
 71 |     // Step 2: Ask user to confirm or change version
 72 |     const userInput = await question(`\nEnter new version (press Enter to keep ${currentVersion}): `);
 73 |     const newVersion = userInput.trim() || currentVersion;
 74 | 
 75 |     if (newVersion !== currentVersion) {
 76 |       // Step 3: Update package.json
 77 |       updatePackageJson(newVersion);
 78 |     }
 79 | 
 80 |     // Step 4: Check and update README.md if needed
 81 |     const readmeVersion = getReadmeVersion();
 82 |     if (readmeVersion && readmeVersion !== newVersion) {
 83 |       updateReadme(newVersion);
 84 |     }
 85 | 
 86 |     // Step 5: Check for git changes
 87 |     const repoRoot = path.join(__dirname, '..');
 88 |     process.chdir(repoRoot);
 89 |     
 90 |     if (hasGitChanges()) {
 91 |       const changedFiles = getChangedFiles();
 92 |       console.log('\n📝 Changed files:');
 93 |       changedFiles.forEach(file => {
 94 |         console.log(`   ${file}`);
 95 |       });
 96 | 
 97 |       const commitAnswer = await question('\nDo you want to commit these changes? (y/n): ');
 98 |       if (commitAnswer.toLowerCase() === 'y' || commitAnswer.toLowerCase() === 'yes') {
 99 |         const suggestedMessage = `npx package updated to v${newVersion}`;
100 |         const commitMessage = await question(`\nCommit message (press Enter for "${suggestedMessage}"): `);
101 |         const finalMessage = commitMessage.trim() || suggestedMessage;
102 | 
103 |         // Stage all changes
104 |         execSync('git add .', { stdio: 'inherit' });
105 |         
106 |         // Commit
107 |         execSync(`git commit -m "${finalMessage}"`, { stdio: 'inherit' });
108 |         console.log(`✅ Committed with message: "${finalMessage}"`);
109 | 
110 |         // Push
111 |         const pushAnswer = await question('\nDo you want to push to remote? (y/n): ');
112 |         if (pushAnswer.toLowerCase() === 'y' || pushAnswer.toLowerCase() === 'yes') {
113 |           execSync('git push', { stdio: 'inherit' });
114 |           console.log('✅ Pushed to remote');
115 |         }
116 |       }
117 |     }
118 | 
119 |     // Step 6: Check if version already exists on npm
120 |     console.log('\n🔍 Checking if version already exists on npm...');
121 |     try {
122 |       const npmViewOutput = execSync(`npm view ${require('./package.json').name}@${newVersion} version`, { 
123 |         encoding: 'utf8', 
124 |         stdio: 'pipe',
125 |         cwd: __dirname 
126 |       });
127 |       if (npmViewOutput.trim() === newVersion) {
128 |         console.log(`⚠️  Version ${newVersion} already exists on npm.`);
129 |         const continueAnswer = await question('Do you want to publish anyway? (y/n): ');
130 |         if (continueAnswer.toLowerCase() !== 'y' && continueAnswer.toLowerCase() !== 'yes') {
131 |           console.log('❌ Publishing cancelled.');
132 |           process.exit(0);
133 |         }
134 |       }
135 |     } catch (err) {
136 |       // Version doesn't exist, which is fine - we can proceed
137 |       console.log(`✅ Version ${newVersion} is available for publishing.`);
138 |     }
139 | 
140 |     // Step 7: Run npm publish
141 |     console.log('\n🚀 Publishing to npm...');
142 |     process.chdir(__dirname);
143 |     // Use --ignore-scripts to prevent npm from running lifecycle hooks that might cause loops
144 |     execSync('npm publish --access public --ignore-scripts', { stdio: 'inherit' });
145 |     console.log('\n✅ Published successfully!');
146 | 
147 |   } catch (error) {
148 |     console.error('\n❌ Error:', error.message);
149 |     process.exit(1);
150 |   } finally {
151 |     rl.close();
152 |   }
153 | }
154 | 
155 | main();
156 | 
157 |

--------------------------------------------------------------------------------
/npx/README.md:
--------------------------------------------------------------------------------
  1 | # run-claude-artifact v2.2.0
  2 | 
  3 | This npm package exposes the `run-claude-artifact` command for use with `npx`.
  4 | 
  5 | It clones the [claude-artifact-runner](https://github.com/claudio-silva/claude-artifact-runner) project, injects your artifact and launches Vite for building it or previewing it, and optionally creates a permanent project.
  6 | 
  7 | For detailed usage instructions, workflow explanation, and complete examples, please see the [main project README](https://github.com/claudio-silva/claude-artifact-runner#readme) in the Git repository.
  8 | 
  9 | ## Quick Usage
 10 | 
 11 | ```bash
 12 | npx run-claude-artifact [run|view|build|create] <src-file> [options]
 13 | ```
 14 | 
 15 | - `<src-file>`: Path to a `.tsx`/`.jsx` file (for `run`/`build`/`create`) or `.html` file/directory (for `view`)
 16 | 
 17 | ## Subcommands
 18 | 
 19 | | Subcommand | Description |
 20 | |------------|-------------|
 21 | | `run` (default) | Run artifact in development server |
 22 | | `view` | Serve a built HTML file or directory |
 23 | | `build` | Build and output files |
 24 | | `create` | Create full editable project |
 25 | 
 26 | ## Options by Subcommand
 27 | 
 28 | ### Run Subcommand Options
 29 | - `--build`: Build project and run preview server instead of dev server
 30 | - `--strict`: Enable strict TypeScript checking during build (requires --build)
 31 | - `-e, --expanded`: Create multi-file build instead of single-file (requires --build)
 32 | 
 33 | ### Build Subcommand Options
 34 | - `-e, --expanded`: Create multi-file deployment instead of single HTML
 35 | - `--deploy-dir <path>`: Output directory for built files
 36 | - `--strict`: Enable strict TypeScript checking during build
 37 | 
 38 | ### Create Subcommand Options
 39 | - `--project-dir <path>`: Target directory for the project
 40 | - `--remote <url>`: Git remote repository URL
 41 | - `--push`: Push to remote repository after creation
 42 | 
 43 | ### Global Options
 44 | - `-h, --help`: Show this help message
 45 | 
 46 | ## Examples
 47 | 
 48 | ```bash
 49 | # Run Artifact (Default)
 50 | npx run-claude-artifact my-app.tsx          # Run dev server (default)
 51 | npx run-claude-artifact run my-app.tsx      # Same as above
 52 | npx run-claude-artifact run my-app.tsx --build  # Build single-file and run preview
 53 | npx run-claude-artifact run my-app.tsx --build --expanded  # Build multi-file and run preview
 54 | npx run-claude-artifact run my-app.tsx --build --strict  # Build with strict checking
 55 | 
 56 | # Build Artifact
 57 | npx run-claude-artifact build my-app.tsx                        # Single HTML file (no strict checking)
 58 | npx run-claude-artifact build my-app.tsx --strict               # Single HTML file (with strict checking)
 59 | npx run-claude-artifact build my-app.tsx --expanded             # Multi-file deployment
 60 | npx run-claude-artifact build my-app.tsx --deploy-dir /var/www  # Custom output location
 61 | 
 62 | # Viewing Built Artifacts
 63 | 
 64 | # Single-file builds (default):
 65 | # - open the resulting HTML file directly (double-click or use navigate to file://path/to/file.html)
 66 | 
 67 | # Multi-file builds (-e, --expanded):
 68 | npx run-claude-artifact view my-app  # Serve directory of multi-file app via a local web server
 69 | 
 70 | # Create Project
 71 | npx run-claude-artifact create my-app.tsx                        # Create editable project
 72 | npx run-claude-artifact create my-app.tsx --remote <url> --push  # Create + git + push
 73 | ```
 74 | 
 75 | ## Execution Workflow
 76 | 
 77 | - **`run` (default)**: Clone Template → Setup → Run Development Server (blocks until Ctrl+C)
 78 | - **`build`**: Clone Template → Setup → Build → Deploy → Cleanup
 79 | - **`view`**: Start Preview Server (blocks until Ctrl+C)
 80 | - **`create`**: Clone Template → Setup → Git Setup → Move to target directory
 81 | 
 82 | ## CI/CD Usage
 83 | 
 84 | This `npx` command is suitable for CI/CD and other automated workflows.
 85 | 
 86 | > **Note:** The `run` and `view` subcommands block execution while running the server, so they're not suitable for automated workflows.
 87 | 
 88 | ## Developing this package locally
 89 | 
 90 | To experiment with the CLI before publishing, link it globally:
 91 |    ```bash
 92 |    npm link
 93 |    run-claude-artifact path/to/file.tsx
 94 |    ```
 95 |    Or execute it directly with Node:
 96 |    ```bash
 97 |    node run-claude-artifact.js path/to/file.tsx
 98 |    ```
 99 | 
100 | ## Publishing
101 | 
102 | The package includes an automated publish script that handles version management, git commits, and npm publishing.
103 | 
104 | ### Prerequisites
105 | 
106 | 1. Sign in to npm if needed:
107 |    ```bash
108 |    npm login
109 |    ```
110 | 
111 | ### Publishing Workflow
112 | 
113 | Run the publish script from either the project root or the `npx/` directory:
114 | 
115 | **From project root:**
116 | ```bash
117 | npm run publish:npx
118 | ```
119 | 
120 | **From npx directory:**
121 | ```bash
122 | cd npx
123 | npm run publish:package
124 | ```
125 | 
126 | Or run directly:
127 | ```bash
128 | node npx/publish.js
129 | ```
130 | 
131 | ### What the publish script does:
132 | 
133 | 1. **Version Management**: 
134 |    - Displays current version from `package.json`
135 |    - Prompts you to confirm or change the version
136 |    - Updates `package.json` if version changed
137 |    - Updates `README.md` version if it differs
138 | 
139 | 2. **Git Integration**:
140 |    - Checks for uncommitted changes
141 |    - Shows changed files
142 |    - Prompts to commit changes
143 |    - Suggests commit message: `"npx package updated to vX.Y.Z"`
144 |    - Commits and optionally pushes to remote
145 | 
146 | 3. **npm Publishing**:
147 |    - Runs `npm publish --access public` from the `npx/` directory
148 | 
149 | ### Manual Publishing
150 | 
151 | If you prefer to publish manually:
152 | 
153 | 1. Update version in `npx/package.json`
154 | 2. Update version in `npx/README.md` (first line)
155 | 3. Commit and push changes
156 | 4. From `npx/` directory, run:
157 |    ```bash
158 |    npm publish --access public
159 |    ```
160 | 
161 | After publishing, anyone can run an artifact with:
162 | 
163 | ```bash
164 | npx run-claude-artifact my-artifact.tsx
165 | ```
166 | 
167 | > Of course the name `run-claude-artifact` is already taken by the author of this project, so you'll need to change the package name on your fork if you want to publish your own version.

--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  4 | 
  5 | import { cn } from "src/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<
 14 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 15 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 16 | >(({ className, children, ...props }, ref) => (
 17 |   <SelectPrimitive.Trigger
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "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 [&>span]:line-clamp-1",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   >
 25 |     {children}
 26 |     <SelectPrimitive.Icon asChild>
 27 |       <ChevronDown className="h-4 w-4 opacity-50" />
 28 |     </SelectPrimitive.Icon>
 29 |   </SelectPrimitive.Trigger>
 30 | ))
 31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 32 | 
 33 | const SelectScrollUpButton = React.forwardRef<
 34 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 35 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 36 | >(({ className, ...props }, ref) => (
 37 |   <SelectPrimitive.ScrollUpButton
 38 |     ref={ref}
 39 |     className={cn(
 40 |       "flex cursor-default items-center justify-center py-1",
 41 |       className
 42 |     )}
 43 |     {...props}
 44 |   >
 45 |     <ChevronUp className="h-4 w-4" />
 46 |   </SelectPrimitive.ScrollUpButton>
 47 | ))
 48 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 49 | 
 50 | const SelectScrollDownButton = React.forwardRef<
 51 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 52 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 53 | >(({ className, ...props }, ref) => (
 54 |   <SelectPrimitive.ScrollDownButton
 55 |     ref={ref}
 56 |     className={cn(
 57 |       "flex cursor-default items-center justify-center py-1",
 58 |       className
 59 |     )}
 60 |     {...props}
 61 |   >
 62 |     <ChevronDown className="h-4 w-4" />
 63 |   </SelectPrimitive.ScrollDownButton>
 64 | ))
 65 | SelectScrollDownButton.displayName =
 66 |   SelectPrimitive.ScrollDownButton.displayName
 67 | 
 68 | const SelectContent = React.forwardRef<
 69 |   React.ElementRef<typeof SelectPrimitive.Content>,
 70 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 71 | >(({ className, children, position = "popper", ...props }, ref) => (
 72 |   <SelectPrimitive.Portal>
 73 |     <SelectPrimitive.Content
 74 |       ref={ref}
 75 |       className={cn(
 76 |         "relative z-50 max-h-96 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",
 77 |         position === "popper" &&
 78 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 79 |         className
 80 |       )}
 81 |       position={position}
 82 |       {...props}
 83 |     >
 84 |       <SelectScrollUpButton />
 85 |       <SelectPrimitive.Viewport
 86 |         className={cn(
 87 |           "p-1",
 88 |           position === "popper" &&
 89 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 90 |         )}
 91 |       >
 92 |         {children}
 93 |       </SelectPrimitive.Viewport>
 94 |       <SelectScrollDownButton />
 95 |     </SelectPrimitive.Content>
 96 |   </SelectPrimitive.Portal>
 97 | ))
 98 | SelectContent.displayName = SelectPrimitive.Content.displayName
 99 | 
100 | const SelectLabel = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Label>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Label
105 |     ref={ref}
106 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectLabel.displayName = SelectPrimitive.Label.displayName
111 | 
112 | const SelectItem = React.forwardRef<
113 |   React.ElementRef<typeof SelectPrimitive.Item>,
114 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115 | >(({ className, children, ...props }, ref) => (
116 |   <SelectPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "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",
120 |       className
121 |     )}
122 |     {...props}
123 |   >
124 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
125 |       <SelectPrimitive.ItemIndicator>
126 |         <Check className="h-4 w-4" />
127 |       </SelectPrimitive.ItemIndicator>
128 |     </span>
129 | 
130 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
131 |   </SelectPrimitive.Item>
132 | ))
133 | SelectItem.displayName = SelectPrimitive.Item.displayName
134 | 
135 | const SelectSeparator = React.forwardRef<
136 |   React.ElementRef<typeof SelectPrimitive.Separator>,
137 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
138 | >(({ className, ...props }, ref) => (
139 |   <SelectPrimitive.Separator
140 |     ref={ref}
141 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
142 |     {...props}
143 |   />
144 | ))
145 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
146 | 
147 | export {
148 |   Select,
149 |   SelectGroup,
150 |   SelectValue,
151 |   SelectTrigger,
152 |   SelectContent,
153 |   SelectLabel,
154 |   SelectItem,
155 |   SelectSeparator,
156 |   SelectScrollUpButton,
157 |   SelectScrollDownButton,
158 | }
159 |

--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import useEmblaCarousel, {
  3 |   type UseEmblaCarouselType,
  4 | } from "embla-carousel-react"
  5 | import { ArrowLeft, ArrowRight } from "lucide-react"
  6 | 
  7 | import { cn } from "src/lib/utils"
  8 | import { Button } from "src/components/ui/button"
  9 | 
 10 | type CarouselApi = UseEmblaCarouselType[1]
 11 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 12 | type CarouselOptions = UseCarouselParameters[0]
 13 | type CarouselPlugin = UseCarouselParameters[1]
 14 | 
 15 | type CarouselProps = {
 16 |   opts?: CarouselOptions
 17 |   plugins?: CarouselPlugin
 18 |   orientation?: "horizontal" | "vertical"
 19 |   setApi?: (api: CarouselApi) => void
 20 | }
 21 | 
 22 | type CarouselContextProps = {
 23 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
 24 |   api: ReturnType<typeof useEmblaCarousel>[1]
 25 |   scrollPrev: () => void
 26 |   scrollNext: () => void
 27 |   canScrollPrev: boolean
 28 |   canScrollNext: boolean
 29 | } & CarouselProps
 30 | 
 31 | const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 32 | 
 33 | function useCarousel() {
 34 |   const context = React.useContext(CarouselContext)
 35 | 
 36 |   if (!context) {
 37 |     throw new Error("useCarousel must be used within a <Carousel />")
 38 |   }
 39 | 
 40 |   return context
 41 | }
 42 | 
 43 | const Carousel = React.forwardRef<
 44 |   HTMLDivElement,
 45 |   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 46 | >(
 47 |   (
 48 |     {
 49 |       orientation = "horizontal",
 50 |       opts,
 51 |       setApi,
 52 |       plugins,
 53 |       className,
 54 |       children,
 55 |       ...props
 56 |     },
 57 |     ref
 58 |   ) => {
 59 |     const [carouselRef, api] = useEmblaCarousel(
 60 |       {
 61 |         ...opts,
 62 |         axis: orientation === "horizontal" ? "x" : "y",
 63 |       },
 64 |       plugins
 65 |     )
 66 |     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
 67 |     const [canScrollNext, setCanScrollNext] = React.useState(false)
 68 | 
 69 |     const onSelect = React.useCallback((api: CarouselApi) => {
 70 |       if (!api) {
 71 |         return
 72 |       }
 73 | 
 74 |       setCanScrollPrev(api.canScrollPrev())
 75 |       setCanScrollNext(api.canScrollNext())
 76 |     }, [])
 77 | 
 78 |     const scrollPrev = React.useCallback(() => {
 79 |       api?.scrollPrev()
 80 |     }, [api])
 81 | 
 82 |     const scrollNext = React.useCallback(() => {
 83 |       api?.scrollNext()
 84 |     }, [api])
 85 | 
 86 |     const handleKeyDown = React.useCallback(
 87 |       (event: React.KeyboardEvent<HTMLDivElement>) => {
 88 |         if (event.key === "ArrowLeft") {
 89 |           event.preventDefault()
 90 |           scrollPrev()
 91 |         } else if (event.key === "ArrowRight") {
 92 |           event.preventDefault()
 93 |           scrollNext()
 94 |         }
 95 |       },
 96 |       [scrollPrev, scrollNext]
 97 |     )
 98 | 
 99 |     React.useEffect(() => {
100 |       if (!api || !setApi) {
101 |         return
102 |       }
103 | 
104 |       setApi(api)
105 |     }, [api, setApi])
106 | 
107 |     React.useEffect(() => {
108 |       if (!api) {
109 |         return
110 |       }
111 | 
112 |       onSelect(api)
113 |       api.on("reInit", onSelect)
114 |       api.on("select", onSelect)
115 | 
116 |       return () => {
117 |         api?.off("select", onSelect)
118 |       }
119 |     }, [api, onSelect])
120 | 
121 |     return (
122 |       <CarouselContext.Provider
123 |         value={{
124 |           carouselRef,
125 |           api: api,
126 |           opts,
127 |           orientation:
128 |             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
129 |           scrollPrev,
130 |           scrollNext,
131 |           canScrollPrev,
132 |           canScrollNext,
133 |         }}
134 |       >
135 |         <div
136 |           ref={ref}
137 |           onKeyDownCapture={handleKeyDown}
138 |           className={cn("relative", className)}
139 |           role="region"
140 |           aria-roledescription="carousel"
141 |           {...props}
142 |         >
143 |           {children}
144 |         </div>
145 |       </CarouselContext.Provider>
146 |     )
147 |   }
148 | )
149 | Carousel.displayName = "Carousel"
150 | 
151 | const CarouselContent = React.forwardRef<
152 |   HTMLDivElement,
153 |   React.HTMLAttributes<HTMLDivElement>
154 | >(({ className, ...props }, ref) => {
155 |   const { carouselRef, orientation } = useCarousel()
156 | 
157 |   return (
158 |     <div ref={carouselRef} className="overflow-hidden">
159 |       <div
160 |         ref={ref}
161 |         className={cn(
162 |           "flex",
163 |           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
164 |           className
165 |         )}
166 |         {...props}
167 |       />
168 |     </div>
169 |   )
170 | })
171 | CarouselContent.displayName = "CarouselContent"
172 | 
173 | const CarouselItem = React.forwardRef<
174 |   HTMLDivElement,
175 |   React.HTMLAttributes<HTMLDivElement>
176 | >(({ className, ...props }, ref) => {
177 |   const { orientation } = useCarousel()
178 | 
179 |   return (
180 |     <div
181 |       ref={ref}
182 |       role="group"
183 |       aria-roledescription="slide"
184 |       className={cn(
185 |         "min-w-0 shrink-0 grow-0 basis-full",
186 |         orientation === "horizontal" ? "pl-4" : "pt-4",
187 |         className
188 |       )}
189 |       {...props}
190 |     />
191 |   )
192 | })
193 | CarouselItem.displayName = "CarouselItem"
194 | 
195 | const CarouselPrevious = React.forwardRef<
196 |   HTMLButtonElement,
197 |   React.ComponentProps<typeof Button>
198 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
199 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
200 | 
201 |   return (
202 |     <Button
203 |       ref={ref}
204 |       variant={variant}
205 |       size={size}
206 |       className={cn(
207 |         "absolute  h-8 w-8 rounded-full",
208 |         orientation === "horizontal"
209 |           ? "-left-12 top-1/2 -translate-y-1/2"
210 |           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
211 |         className
212 |       )}
213 |       disabled={!canScrollPrev}
214 |       onClick={scrollPrev}
215 |       {...props}
216 |     >
217 |       <ArrowLeft className="h-4 w-4" />
218 |       <span className="sr-only">Previous slide</span>
219 |     </Button>
220 |   )
221 | })
222 | CarouselPrevious.displayName = "CarouselPrevious"
223 | 
224 | const CarouselNext = React.forwardRef<
225 |   HTMLButtonElement,
226 |   React.ComponentProps<typeof Button>
227 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
228 |   const { orientation, scrollNext, canScrollNext } = useCarousel()
229 | 
230 |   return (
231 |     <Button
232 |       ref={ref}
233 |       variant={variant}
234 |       size={size}
235 |       className={cn(
236 |         "absolute h-8 w-8 rounded-full",
237 |         orientation === "horizontal"
238 |           ? "-right-12 top-1/2 -translate-y-1/2"
239 |           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
240 |         className
241 |       )}
242 |       disabled={!canScrollNext}
243 |       onClick={scrollNext}
244 |       {...props}
245 |     >
246 |       <ArrowRight className="h-4 w-4" />
247 |       <span className="sr-only">Next slide</span>
248 |     </Button>
249 |   )
250 | })
251 | CarouselNext.displayName = "CarouselNext"
252 | 
253 | export {
254 |   type CarouselApi,
255 |   Carousel,
256 |   CarouselContent,
257 |   CarouselItem,
258 |   CarouselPrevious,
259 |   CarouselNext,
260 | }
261 |

--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  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 "src/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<
 20 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <ContextMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "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",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </ContextMenuPrimitive.SubTrigger>
 37 | ))
 38 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 39 | 
 40 | const ContextMenuSubContent = React.forwardRef<
 41 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 42 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 43 | >(({ className, ...props }, ref) => (
 44 |   <ContextMenuPrimitive.SubContent
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "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",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   />
 52 | ))
 53 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 54 | 
 55 | const ContextMenuContent = React.forwardRef<
 56 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 57 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 58 | >(({ className, ...props }, ref) => (
 59 |   <ContextMenuPrimitive.Portal>
 60 |     <ContextMenuPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(
 63 |         "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",
 64 |         className
 65 |       )}
 66 |       {...props}
 67 |     />
 68 |   </ContextMenuPrimitive.Portal>
 69 | ))
 70 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 71 | 
 72 | const ContextMenuItem = React.forwardRef<
 73 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 74 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 75 |     inset?: boolean
 76 |   }
 77 | >(({ className, inset, ...props }, ref) => (
 78 |   <ContextMenuPrimitive.Item
 79 |     ref={ref}
 80 |     className={cn(
 81 |       "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",
 82 |       inset && "pl-8",
 83 |       className
 84 |     )}
 85 |     {...props}
 86 |   />
 87 | ))
 88 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 89 | 
 90 | const ContextMenuCheckboxItem = React.forwardRef<
 91 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 92 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 93 | >(({ className, children, checked, ...props }, ref) => (
 94 |   <ContextMenuPrimitive.CheckboxItem
 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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 98 |       className
 99 |     )}
100 |     checked={checked}
101 |     {...props}
102 |   >
103 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
104 |       <ContextMenuPrimitive.ItemIndicator>
105 |         <Check className="h-4 w-4" />
106 |       </ContextMenuPrimitive.ItemIndicator>
107 |     </span>
108 |     {children}
109 |   </ContextMenuPrimitive.CheckboxItem>
110 | ))
111 | ContextMenuCheckboxItem.displayName =
112 |   ContextMenuPrimitive.CheckboxItem.displayName
113 | 
114 | const ContextMenuRadioItem = React.forwardRef<
115 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
116 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
117 | >(({ className, children, ...props }, ref) => (
118 |   <ContextMenuPrimitive.RadioItem
119 |     ref={ref}
120 |     className={cn(
121 |       "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",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <ContextMenuPrimitive.ItemIndicator>
128 |         <Circle className="h-2 w-2 fill-current" />
129 |       </ContextMenuPrimitive.ItemIndicator>
130 |     </span>
131 |     {children}
132 |   </ContextMenuPrimitive.RadioItem>
133 | ))
134 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
135 | 
136 | const ContextMenuLabel = React.forwardRef<
137 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
138 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
139 |     inset?: boolean
140 |   }
141 | >(({ className, inset, ...props }, ref) => (
142 |   <ContextMenuPrimitive.Label
143 |     ref={ref}
144 |     className={cn(
145 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
146 |       inset && "pl-8",
147 |       className
148 |     )}
149 |     {...props}
150 |   />
151 | ))
152 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
153 | 
154 | const ContextMenuSeparator = React.forwardRef<
155 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
156 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
157 | >(({ className, ...props }, ref) => (
158 |   <ContextMenuPrimitive.Separator
159 |     ref={ref}
160 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
161 |     {...props}
162 |   />
163 | ))
164 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
165 | 
166 | const ContextMenuShortcut = ({
167 |   className,
168 |   ...props
169 | }: React.HTMLAttributes<HTMLSpanElement>) => {
170 |   return (
171 |     <span
172 |       className={cn(
173 |         "ml-auto text-xs tracking-widest text-muted-foreground",
174 |         className
175 |       )}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
181 | 
182 | export {
183 |   ContextMenu,
184 |   ContextMenuTrigger,
185 |   ContextMenuContent,
186 |   ContextMenuItem,
187 |   ContextMenuCheckboxItem,
188 |   ContextMenuRadioItem,
189 |   ContextMenuLabel,
190 |   ContextMenuSeparator,
191 |   ContextMenuShortcut,
192 |   ContextMenuGroup,
193 |   ContextMenuPortal,
194 |   ContextMenuSub,
195 |   ContextMenuSubContent,
196 |   ContextMenuSubTrigger,
197 |   ContextMenuRadioGroup,
198 | }
199 |

--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  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 "src/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<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "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",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "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",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "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",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "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",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.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 transition-colors 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 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "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",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 |

--------------------------------------------------------------------------------
/bin/test-pr.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | # Exit immediately if a command exits with a non-zero status.
  4 | set -e
  5 | 
  6 | # Colors for output
  7 | RED='\033[0;31m'
  8 | GREEN='\033[0;32m'
  9 | YELLOW='\033[1;33m'
 10 | BLUE='\033[0;34m'
 11 | NC='\033[0m' # No Color
 12 | 
 13 | # --- Helper Functions ---
 14 | 
 15 | print_status() {
 16 |     echo -e "${YELLOW}[$(date +'%Y-%m-%d %H:%M:%S')] $1${NC}"
 17 | }
 18 | 
 19 | print_success() {
 20 |     echo -e "${GREEN}[$(date +'%Y-%m-%d %H:%M:%S')] $1${NC}"
 21 | }
 22 | 
 23 | print_error() {
 24 |     echo -e "${RED}[$(date +'%Y-%m-%d %H:%M:%S')] $1${NC}"
 25 | }
 26 | 
 27 | print_info() {
 28 |     echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')] $1${NC}"
 29 | }
 30 | 
 31 | cleanup() {
 32 |     print_status "Running cleanup..."
 33 |     # Ensure we are back on the main branch if possible
 34 |     current_branch=$(git rev-parse --abbrev-ref HEAD || echo "unknown")
 35 |     if [[ "$current_branch" != "main" && "$current_branch" != "unknown" ]]; then
 36 |         print_status "Switching back to main branch..."
 37 |         git checkout main || print_error "Failed to checkout main branch during cleanup."
 38 |     fi
 39 |     
 40 |     # Restore package files if backups exist
 41 |     if [[ -f package.json.backup && -f package-lock.json.backup ]]; then
 42 |         print_status "Restoring package files..."
 43 |         mv package.json.backup package.json
 44 |         mv package-lock.json.backup package-lock.json
 45 |     else
 46 |         print_status "No backup files found to restore."
 47 |     fi
 48 |     print_status "Cleanup finished."
 49 | }
 50 | 
 51 | # Trap EXIT signal to ensure cleanup runs
 52 | trap cleanup EXIT
 53 | 
 54 | run_single_test() {
 55 |     local pr_number=$1
 56 |     local test_passed=true
 57 | 
 58 |     print_info "--- Testing PR #$pr_number ---"
 59 |     
 60 |     print_status "Checking out PR #$pr_number..."
 61 |     if ! gh pr checkout $pr_number; then
 62 |         print_error "Failed to checkout PR #$pr_number. Skipping."
 63 |         git checkout main # Attempt to return to main
 64 |         return 1
 65 |     fi
 66 | 
 67 |     print_status "Installing dependencies for PR #$pr_number..."
 68 |     if ! npm ci; then # Use npm ci for cleaner installs
 69 |         print_error "npm ci failed for PR #$pr_number."
 70 |         test_passed=false
 71 |     fi
 72 | 
 73 |     if $test_passed; then
 74 |         print_status "Running linting for PR #$pr_number..."
 75 |         if ! npm run lint; then
 76 |             print_error "Linting failed for PR #$pr_number."
 77 |             test_passed=false
 78 |         fi
 79 |     fi
 80 | 
 81 |     if $test_passed; then
 82 |         print_status "Running build for PR #$pr_number..."
 83 |         if ! npm run build; then
 84 |             print_error "Build failed for PR #$pr_number."
 85 |             test_passed=false
 86 |         fi
 87 |     fi
 88 | 
 89 |     if $test_passed; then
 90 |         print_success "PR #$pr_number passed tests!"
 91 |     else
 92 |         print_error "PR #$pr_number failed tests."
 93 |     fi
 94 |     
 95 |     print_status "Returning to main branch..."
 96 |     git checkout main
 97 |     
 98 |     # Decide return status (0 for success, 1 for failure)
 99 |     if $test_passed; then
100 |         return 0
101 |     else
102 |         return 1
103 |     fi
104 | }
105 | 
106 | # --- Main Execution ---
107 | 
108 | # Check prerequisites
109 | if ! command -v gh &> /dev/null; then
110 |     print_error "GitHub CLI ('gh') could not be found. Please install it."
111 |     exit 1
112 | fi
113 | 
114 | if ! gh auth status &> /dev/null; then
115 |     print_error "Not logged into GitHub CLI ('gh auth status' failed). Please log in."
116 |     exit 1
117 | fi
118 | 
119 | if [ ! -f "package.json" ]; then
120 |     print_error "Script must be run from the project root directory (where package.json exists)."
121 |     exit 1
122 | fi
123 | 
124 | print_status "Starting PR tester..."
125 | 
126 | # Stash any local changes to prevent conflicts
127 | print_status "Stashing any local changes..."
128 | if ! git stash push -m "Temporary stash for PR testing" > /dev/null; then
129 |     print_error "Failed to stash local changes. Please commit or stash your changes manually before running this script."
130 |     exit 1
131 | fi
132 | 
133 | # Ask user what type of PRs to test
134 | print_info "What type of PRs would you like to test?"
135 | echo "1) All open PRs"
136 | echo "2) Only Dependabot PRs"
137 | read -p "Enter your choice (1 or 2): " pr_type_choice
138 | 
139 | # Set the author filter based on user choice
140 | author_filter=""
141 | if [ "$pr_type_choice" = "2" ]; then
142 |     author_filter="--author app/dependabot"
143 |     print_status "Testing only Dependabot PRs..."
144 | else
145 |     print_status "Testing all open PRs..."
146 | fi
147 | 
148 | # Create backups *once*
149 | print_status "Creating backups of package files..."
150 | cp package.json package.json.backup
151 | cp package-lock.json package-lock.json.backup
152 | 
153 | # Fetch open PRs based on user choice
154 | print_status "Fetching open PRs..."
155 | # Get PRs into an array using standard array assignment
156 | pr_options=()
157 | while IFS= read -r line; do
158 |     pr_options+=("$line")
159 | done < <(gh pr list $author_filter --state open --json number,title --jq '.[] | "#\(.number): \(.title)"')
160 | 
161 | if [ ${#pr_options[@]} -eq 0 ]; then
162 |     print_error "No open PRs found."
163 |     # Restore stashed changes
164 |     git stash pop > /dev/null
165 |     # Cleanup will run automatically on exit
166 |     exit 1
167 | fi
168 | 
169 | # Store the number of PRs for later use
170 | num_prs=${#pr_options[@]}
171 | 
172 | # Add options for Test All and Quit
173 | pr_options+=("Test All" "Quit")
174 | 
175 | # Present the menu
176 | print_info "Please select a PR to test:"
177 | PS3="Enter your choice: "
178 | select opt in "${pr_options[@]}"; do
179 |     case $opt in
180 |         "Test All")
181 |             print_status "Selected: Test All"
182 |             all_passed=true
183 |             # Extract numbers using standard array assignment
184 |             pr_numbers=()
185 |             while IFS= read -r number; do
186 |                 pr_numbers+=("$number")
187 |             done < <(gh pr list $author_filter --state open --json number --jq '.[].number')
188 |             
189 |             for pr_num in "${pr_numbers[@]}"; do
190 |                 if ! run_single_test $pr_num; then
191 |                     all_passed=false
192 |                     print_error "Testing stopped due to failure in PR #$pr_num. You may need manual intervention."
193 |                     # You might want to change this to 'continue' if you want to test remaining PRs even if one fails
194 |                     break 
195 |                 fi
196 |             done
197 |             if $all_passed; then
198 |                 print_success "All tested PRs passed!"
199 |             else
200 |                 print_error "One or more PRs failed tests."
201 |                 # Restore stashed changes before exiting
202 |                 git stash pop > /dev/null
203 |                 exit 1 # Exit with error if any PR failed
204 |             fi
205 |             break
206 |             ;;
207 |         "Quit")
208 |             print_status "Exiting."
209 |             break
210 |             ;;
211 |         *) 
212 |             # Check if the choice is a valid PR option
213 |             if [[ "$REPLY" =~ ^[0-9]+$ ]] && [ "$REPLY" -le "$num_prs" ]; then
214 |                 # Extract PR number from the selected option (e.g., "#123: Title")
215 |                 pr_string=${pr_options[$(($REPLY-1))]}
216 |                 pr_number=$(echo "$pr_string" | sed -n 's/^#$[0-9]*$:.*/\1/p')
217 |                 print_status "Selected: Test PR #$pr_number"
218 |                 if run_single_test $pr_number; then
219 |                      print_success "Testing for PR #$pr_number completed successfully."
220 |                 else
221 |                      print_error "Testing for PR #$pr_number failed."
222 |                      # Restore stashed changes before exiting
223 |                      git stash pop > /dev/null
224 |                      exit 1 # Exit with error if the selected PR failed
225 |                 fi
226 |                 break
227 |             else
228 |                 print_error "Invalid option. Please try again."
229 |             fi
230 |             ;;
231 |     esac
232 | done
233 | 
234 | # Restore stashed changes
235 | print_status "Restoring local changes..."
236 | git stash pop > /dev/null
237 | 
238 | # Cleanup will run automatically via trap EXIT
239 | print_status "Script finished."
240 | exit 0 # Explicitly exit with success if we reached here

--------------------------------------------------------------------------------
/src/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  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 "src/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<
 18 |   React.ElementRef<typeof MenubarPrimitive.Root>,
 19 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 20 | >(({ className, ...props }, ref) => (
 21 |   <MenubarPrimitive.Root
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | Menubar.displayName = MenubarPrimitive.Root.displayName
 31 | 
 32 | const MenubarTrigger = React.forwardRef<
 33 |   React.ElementRef<typeof MenubarPrimitive.Trigger>,
 34 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 35 | >(({ className, ...props }, ref) => (
 36 |   <MenubarPrimitive.Trigger
 37 |     ref={ref}
 38 |     className={cn(
 39 |       "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",
 40 |       className
 41 |     )}
 42 |     {...props}
 43 |   />
 44 | ))
 45 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 46 | 
 47 | const MenubarSubTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 49 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
 50 |     inset?: boolean
 51 |   }
 52 | >(({ className, inset, children, ...props }, ref) => (
 53 |   <MenubarPrimitive.SubTrigger
 54 |     ref={ref}
 55 |     className={cn(
 56 |       "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",
 57 |       inset && "pl-8",
 58 |       className
 59 |     )}
 60 |     {...props}
 61 |   >
 62 |     {children}
 63 |     <ChevronRight className="ml-auto h-4 w-4" />
 64 |   </MenubarPrimitive.SubTrigger>
 65 | ))
 66 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 67 | 
 68 | const MenubarSubContent = React.forwardRef<
 69 |   React.ElementRef<typeof MenubarPrimitive.SubContent>,
 70 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 71 | >(({ className, ...props }, ref) => (
 72 |   <MenubarPrimitive.SubContent
 73 |     ref={ref}
 74 |     className={cn(
 75 |       "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",
 76 |       className
 77 |     )}
 78 |     {...props}
 79 |   />
 80 | ))
 81 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 82 | 
 83 | const MenubarContent = React.forwardRef<
 84 |   React.ElementRef<typeof MenubarPrimitive.Content>,
 85 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 86 | >(
 87 |   (
 88 |     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
 89 |     ref
 90 |   ) => (
 91 |     <MenubarPrimitive.Portal>
 92 |       <MenubarPrimitive.Content
 93 |         ref={ref}
 94 |         align={align}
 95 |         alignOffset={alignOffset}
 96 |         sideOffset={sideOffset}
 97 |         className={cn(
 98 |           "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",
 99 |           className
100 |         )}
101 |         {...props}
102 |       />
103 |     </MenubarPrimitive.Portal>
104 |   )
105 | )
106 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
107 | 
108 | const MenubarItem = React.forwardRef<
109 |   React.ElementRef<typeof MenubarPrimitive.Item>,
110 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
111 |     inset?: boolean
112 |   }
113 | >(({ className, inset, ...props }, ref) => (
114 |   <MenubarPrimitive.Item
115 |     ref={ref}
116 |     className={cn(
117 |       "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",
118 |       inset && "pl-8",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
125 | 
126 | const MenubarCheckboxItem = React.forwardRef<
127 |   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
128 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
129 | >(({ className, children, checked, ...props }, ref) => (
130 |   <MenubarPrimitive.CheckboxItem
131 |     ref={ref}
132 |     className={cn(
133 |       "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",
134 |       className
135 |     )}
136 |     checked={checked}
137 |     {...props}
138 |   >
139 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
140 |       <MenubarPrimitive.ItemIndicator>
141 |         <Check className="h-4 w-4" />
142 |       </MenubarPrimitive.ItemIndicator>
143 |     </span>
144 |     {children}
145 |   </MenubarPrimitive.CheckboxItem>
146 | ))
147 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
148 | 
149 | const MenubarRadioItem = React.forwardRef<
150 |   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
151 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
152 | >(({ className, children, ...props }, ref) => (
153 |   <MenubarPrimitive.RadioItem
154 |     ref={ref}
155 |     className={cn(
156 |       "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",
157 |       className
158 |     )}
159 |     {...props}
160 |   >
161 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
162 |       <MenubarPrimitive.ItemIndicator>
163 |         <Circle className="h-2 w-2 fill-current" />
164 |       </MenubarPrimitive.ItemIndicator>
165 |     </span>
166 |     {children}
167 |   </MenubarPrimitive.RadioItem>
168 | ))
169 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
170 | 
171 | const MenubarLabel = React.forwardRef<
172 |   React.ElementRef<typeof MenubarPrimitive.Label>,
173 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
174 |     inset?: boolean
175 |   }
176 | >(({ className, inset, ...props }, ref) => (
177 |   <MenubarPrimitive.Label
178 |     ref={ref}
179 |     className={cn(
180 |       "px-2 py-1.5 text-sm font-semibold",
181 |       inset && "pl-8",
182 |       className
183 |     )}
184 |     {...props}
185 |   />
186 | ))
187 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
188 | 
189 | const MenubarSeparator = React.forwardRef<
190 |   React.ElementRef<typeof MenubarPrimitive.Separator>,
191 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
192 | >(({ className, ...props }, ref) => (
193 |   <MenubarPrimitive.Separator
194 |     ref={ref}
195 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
196 |     {...props}
197 |   />
198 | ))
199 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
200 | 
201 | const MenubarShortcut = ({
202 |   className,
203 |   ...props
204 | }: React.HTMLAttributes<HTMLSpanElement>) => {
205 |   return (
206 |     <span
207 |       className={cn(
208 |         "ml-auto text-xs tracking-widest text-muted-foreground",
209 |         className
210 |       )}
211 |       {...props}
212 |     />
213 |   )
214 | }
215 | MenubarShortcut.displayname = "MenubarShortcut"
216 | 
217 | export {
218 |   Menubar,
219 |   MenubarMenu,
220 |   MenubarTrigger,
221 |   MenubarContent,
222 |   MenubarItem,
223 |   MenubarSeparator,
224 |   MenubarLabel,
225 |   MenubarCheckboxItem,
226 |   MenubarRadioGroup,
227 |   MenubarRadioItem,
228 |   MenubarPortal,
229 |   MenubarSubContent,
230 |   MenubarSubTrigger,
231 |   MenubarGroup,
232 |   MenubarSub,
233 |   MenubarShortcut,
234 | }
235 |

--------------------------------------------------------------------------------
/src/components/ui/chart.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as RechartsPrimitive from "recharts"
  3 | 
  4 | import { cn } from "src/lib/utils"
  5 | 
  6 | // Format: { THEME_NAME: CSS_SELECTOR }
  7 | const THEMES = { light: "", dark: ".dark" } as const
  8 | 
  9 | export type ChartConfig = {
 10 |   [k in string]: {
 11 |     label?: React.ReactNode
 12 |     icon?: React.ComponentType
 13 |   } & (
 14 |     | { color?: string; theme?: never }
 15 |     | { color?: never; theme: Record<keyof typeof THEMES, string> }
 16 |   )
 17 | }
 18 | 
 19 | type ChartContextProps = {
 20 |   config: ChartConfig
 21 | }
 22 | 
 23 | const ChartContext = React.createContext<ChartContextProps | null>(null)
 24 | 
 25 | function useChart() {
 26 |   const context = React.useContext(ChartContext)
 27 | 
 28 |   if (!context) {
 29 |     throw new Error("useChart must be used within a <ChartContainer />")
 30 |   }
 31 | 
 32 |   return context
 33 | }
 34 | 
 35 | const ChartContainer = React.forwardRef<
 36 |   HTMLDivElement,
 37 |   React.ComponentProps<"div"> & {
 38 |     config: ChartConfig
 39 |     children: React.ComponentProps<
 40 |       typeof RechartsPrimitive.ResponsiveContainer
 41 |     >["children"]
 42 |   }
 43 | >(({ id, className, children, config, ...props }, ref) => {
 44 |   const uniqueId = React.useId()
 45 |   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 46 | 
 47 |   return (
 48 |     <ChartContext.Provider value={{ config }}>
 49 |       <div
 50 |         data-chart={chartId}
 51 |         ref={ref}
 52 |         className={cn(
 53 |           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
 54 |           className
 55 |         )}
 56 |         {...props}
 57 |       >
 58 |         <ChartStyle id={chartId} config={config} />
 59 |         <RechartsPrimitive.ResponsiveContainer>
 60 |           {children}
 61 |         </RechartsPrimitive.ResponsiveContainer>
 62 |       </div>
 63 |     </ChartContext.Provider>
 64 |   )
 65 | })
 66 | ChartContainer.displayName = "Chart"
 67 | 
 68 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 69 |   const colorConfig = Object.entries(config).filter(
 70 |     ([_, config]) => config.theme || config.color
 71 |   )
 72 | 
 73 |   if (!colorConfig.length) {
 74 |     return null
 75 |   }
 76 | 
 77 |   return (
 78 |     <style
 79 |       dangerouslySetInnerHTML={{
 80 |         __html: Object.entries(THEMES).map(
 81 |           ([theme, prefix]) => `
 82 | ${prefix} [data-chart=${id}] {
 83 | ${colorConfig
 84 |   .map(([key, itemConfig]) => {
 85 |     const color =
 86 |       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
 87 |       itemConfig.color
 88 |     return color ? `  --color-${key}: ${color};` : null
 89 |   })
 90 |   .join("\n")}
 91 | }
 92 | `
 93 |         ),
 94 |       }}
 95 |     />
 96 |   )
 97 | }
 98 | 
 99 | const ChartTooltip = RechartsPrimitive.Tooltip
100 | 
101 | const ChartTooltipContent = React.forwardRef<
102 |   HTMLDivElement,
103 |   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
104 |     React.ComponentProps<"div"> & {
105 |       hideLabel?: boolean
106 |       hideIndicator?: boolean
107 |       indicator?: "line" | "dot" | "dashed"
108 |       nameKey?: string
109 |       labelKey?: string
110 |     }
111 | >(
112 |   (
113 |     {
114 |       active,
115 |       payload,
116 |       className,
117 |       indicator = "dot",
118 |       hideLabel = false,
119 |       hideIndicator = false,
120 |       label,
121 |       labelFormatter,
122 |       labelClassName,
123 |       formatter,
124 |       color,
125 |       nameKey,
126 |       labelKey,
127 |     },
128 |     ref
129 |   ) => {
130 |     const { config } = useChart()
131 | 
132 |     const tooltipLabel = React.useMemo(() => {
133 |       if (hideLabel || !payload?.length) {
134 |         return null
135 |       }
136 | 
137 |       const [item] = payload
138 |       const key = `${labelKey || item.dataKey || item.name || "value"}`
139 |       const itemConfig = getPayloadConfigFromPayload(config, item, key)
140 |       const value =
141 |         !labelKey && typeof label === "string"
142 |           ? config[label as keyof typeof config]?.label || label
143 |           : itemConfig?.label
144 | 
145 |       if (labelFormatter) {
146 |         return (
147 |           <div className={cn("font-medium", labelClassName)}>
148 |             {labelFormatter(value, payload)}
149 |           </div>
150 |         )
151 |       }
152 | 
153 |       if (!value) {
154 |         return null
155 |       }
156 | 
157 |       return <div className={cn("font-medium", labelClassName)}>{value}</div>
158 |     }, [
159 |       label,
160 |       labelFormatter,
161 |       payload,
162 |       hideLabel,
163 |       labelClassName,
164 |       config,
165 |       labelKey,
166 |     ])
167 | 
168 |     if (!active || !payload?.length) {
169 |       return null
170 |     }
171 | 
172 |     const nestLabel = payload.length === 1 && indicator !== "dot"
173 | 
174 |     return (
175 |       <div
176 |         ref={ref}
177 |         className={cn(
178 |           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
179 |           className
180 |         )}
181 |       >
182 |         {!nestLabel ? tooltipLabel : null}
183 |         <div className="grid gap-1.5">
184 |           {payload.map((item, index) => {
185 |             const key = `${nameKey || item.name || item.dataKey || "value"}`
186 |             const itemConfig = getPayloadConfigFromPayload(config, item, key)
187 |             const indicatorColor = color || item.payload.fill || item.color
188 | 
189 |             return (
190 |               <div
191 |                 key={item.dataKey}
192 |                 className={cn(
193 |                   "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
194 |                   indicator === "dot" && "items-center"
195 |                 )}
196 |               >
197 |                 {formatter && (item?.value !== undefined) && item.name ? (
198 |                   formatter(item.value, item.name, item, index, item.payload)
199 |                 ) : (
200 |                   <>
201 |                     {itemConfig?.icon ? (
202 |                       <itemConfig.icon />
203 |                     ) : (
204 |                       !hideIndicator && (
205 |                         <div
206 |                           className={cn(
207 |                             "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
208 |                             {
209 |                               "h-2.5 w-2.5": indicator === "dot",
210 |                               "w-1": indicator === "line",
211 |                               "w-0 border-[1.5px] border-dashed bg-transparent":
212 |                                 indicator === "dashed",
213 |                               "my-0.5": nestLabel && indicator === "dashed",
214 |                             }
215 |                           )}
216 |                           style={
217 |                             {
218 |                               "--color-bg": indicatorColor,
219 |                               "--color-border": indicatorColor,
220 |                             } as React.CSSProperties
221 |                           }
222 |                         />
223 |                       )
224 |                     )}
225 |                     <div
226 |                       className={cn(
227 |                         "flex flex-1 justify-between leading-none",
228 |                         nestLabel ? "items-end" : "items-center"
229 |                       )}
230 |                     >
231 |                       <div className="grid gap-1.5">
232 |                         {nestLabel ? tooltipLabel : null}
233 |                         <span className="text-muted-foreground">
234 |                           {itemConfig?.label || item.name}
235 |                         </span>
236 |                       </div>
237 |                       {item.value && (
238 |                         <span className="font-mono font-medium tabular-nums text-foreground">
239 |                           {item.value.toLocaleString()}
240 |                         </span>
241 |                       )}
242 |                     </div>
243 |                   </>
244 |                 )}
245 |               </div>
246 |             )
247 |           })}
248 |         </div>
249 |       </div>
250 |     )
251 |   }
252 | )
253 | ChartTooltipContent.displayName = "ChartTooltip"
254 | 
255 | const ChartLegend = RechartsPrimitive.Legend
256 | 
257 | const ChartLegendContent = React.forwardRef<
258 |   HTMLDivElement,
259 |   React.ComponentProps<"div"> &
260 |     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
261 |       hideIcon?: boolean
262 |       nameKey?: string
263 |     }
264 | >(
265 |   (
266 |     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
267 |     ref
268 |   ) => {
269 |     const { config } = useChart()
270 | 
271 |     if (!payload?.length) {
272 |       return null
273 |     }
274 | 
275 |     return (
276 |       <div
277 |         ref={ref}
278 |         className={cn(
279 |           "flex items-center justify-center gap-4",
280 |           verticalAlign === "top" ? "pb-3" : "pt-3",
281 |           className
282 |         )}
283 |       >
284 |         {payload.map((item) => {
285 |           const key = `${nameKey || item.dataKey || "value"}`
286 |           const itemConfig = getPayloadConfigFromPayload(config, item, key)
287 | 
288 |           return (
289 |             <div
290 |               key={item.value}
291 |               className={cn(
292 |                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
293 |               )}
294 |             >
295 |               {itemConfig?.icon && !hideIcon ? (
296 |                 <itemConfig.icon />
297 |               ) : (
298 |                 <div
299 |                   className="h-2 w-2 shrink-0 rounded-[2px]"
300 |                   style={{
301 |                     backgroundColor: item.color,
302 |                   }}
303 |                 />
304 |               )}
305 |               {itemConfig?.label}
306 |             </div>
307 |           )
308 |         })}
309 |       </div>
310 |     )
311 |   }
312 | )
313 | ChartLegendContent.displayName = "ChartLegend"
314 | 
315 | // Helper to extract item config from a payload.
316 | function getPayloadConfigFromPayload(
317 |   config: ChartConfig,
318 |   payload: unknown,
319 |   key: string
320 | ) {
321 |   if (typeof payload !== "object" || payload === null) {
322 |     return undefined
323 |   }
324 | 
325 |   const payloadPayload =
326 |     "payload" in payload &&
327 |     typeof payload.payload === "object" &&
328 |     payload.payload !== null
329 |       ? payload.payload
330 |       : undefined
331 | 
332 |   let configLabelKey: string = key
333 | 
334 |   if (
335 |     key in payload &&
336 |     typeof payload[key as keyof typeof payload] === "string"
337 |   ) {
338 |     configLabelKey = payload[key as keyof typeof payload] as string
339 |   } else if (
340 |     payloadPayload &&
341 |     key in payloadPayload &&
342 |     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
343 |   ) {
344 |     configLabelKey = payloadPayload[
345 |       key as keyof typeof payloadPayload
346 |     ] as string
347 |   }
348 | 
349 |   return configLabelKey in config
350 |     ? config[configLabelKey]
351 |     : config[key as keyof typeof config]
352 | }
353 | 
354 | export {
355 |   ChartContainer,
356 |   ChartTooltip,
357 |   ChartTooltipContent,
358 |   ChartLegend,
359 |   ChartLegendContent,
360 |   ChartStyle,
361 | }
362 |

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