12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /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.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ], 7 | "compilerOptions": { 8 | "baseUrl": ".", 9 | "paths": { 10 | "@/*": ["./src/*"] 11 | }, 12 | "noImplicitAny": false, 13 | "noUnusedParameters": false, 14 | "skipLibCheck": true, 15 | "allowJs": true, 16 | "noUnusedLocals": false, 17 | "strictNullChecks": false 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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.ts", 8 | "css": "src/index.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | import path from "path"; 4 | import { componentTagger } from "lovable-tagger"; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => ({ 8 | server: { 9 | host: "::", 10 | port: 8080, 11 | }, 12 | plugins: [ 13 | react(), 14 | mode === 'development' && 15 | componentTagger(), 16 | ].filter(Boolean), 17 | resolve: { 18 | alias: { 19 | "@": path.resolve(__dirname, "./src"), 20 | }, 21 | }, 22 | })); 23 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": false, 18 | "noUnusedParameters": false, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CyberKeyGen", 3 | "short_name": "CyberKeyGen", 4 | "description": "A secure password generator that works offline", 5 | "start_url": "/", 6 | "display": "standalone", 7 | "background_color": "#ffffff", 8 | "theme_color": "transparent", 9 | "icons": [ 10 | { 11 | "src": "icon-192x192-dark.png", 12 | "sizes": "192x192", 13 | "type": "image/png", 14 | "purpose": "any maskable" 15 | }, 16 | { 17 | "src": "icon-512x512-dark.png", 18 | "sizes": "512x512", 19 | "type": "image/png" 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import App from './App.tsx' 3 | import './index.css' 4 | 5 | // Register service worker for PWA support 6 | if ('serviceWorker' in navigator) { 7 | window.addEventListener('load', () => { 8 | navigator.serviceWorker.register('/public/serviceWorker.js') 9 | .then(registration => { 10 | console.log('Service Worker registered with scope:', registration.scope); 11 | }) 12 | .catch(error => { 13 | console.error('Service Worker registration failed:', error); 14 | }); 15 | }); 16 | } 17 | 18 | createRoot(document.getElementById("root")!).render(); -------------------------------------------------------------------------------- /src/hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": false, 19 | "noUnusedLocals": false, 20 | "noUnusedParameters": false, 21 | "noImplicitAny": false, 22 | "noFallthroughCasesInSwitch": false, 23 | 24 | "baseUrl": ".", 25 | "paths": { 26 | "@/*": ["./src/*"] 27 | } 28 | }, 29 | "include": ["src"] 30 | } 31 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /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 "@/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 | -------------------------------------------------------------------------------- /src/pages/NotFound.tsx: -------------------------------------------------------------------------------- 1 | import { useLocation } from "react-router-dom"; 2 | import { useEffect } from "react"; 3 | 4 | const NotFound = () => { 5 | const location = useLocation(); 6 | 7 | useEffect(() => { 8 | console.error( 9 | "404 Error: User attempted to access non-existent route:", 10 | location.pathname 11 | ); 12 | }, [location.pathname]); 13 | 14 | return ( 15 |

16 |

17 |

404

18 |

Oops! Page not found

19 | 20 | Return to Home 21 | 22 |

23 |

24 | ); 25 | }; 26 | 27 | export default NotFound; 28 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |

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

--------------------------------------------------------------------------------
/src/components/Preloader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | 
 3 | const Preloader = () => {
 4 |   const [isLoading, setIsLoading] = useState(true);
 5 | 
 6 |   useEffect(() => {
 7 |     const timer = setTimeout(() => {
 8 |       setIsLoading(false);
 9 |     }, 800);
10 | 
11 |     return () => clearTimeout(timer);
12 |   }, []);
13 | 
14 |   if (!isLoading) return null;
15 | 
16 |   return (
17 |     <div className="fixed inset-0 bg-background flex items-center justify-center z-50">
18 |       <div className="flex space-x-2">
19 |         <div className="w-3 h-3 rounded-full bg-primary animate-pulse"></div>
20 |         <div className="w-3 h-3 rounded-full bg-primary animate-pulse delay-100"></div>
21 |         <div className="w-3 h-3 rounded-full bg-primary animate-pulse delay-200"></div>
22 |       </div>
23 |     </div>
24 |   );
25 | };
26 | 
27 | export default Preloader;
28 |

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 |

--------------------------------------------------------------------------------
/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 "@/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 "@/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 |

--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "react-refresh/only-export-components": [
23 |         "warn",
24 |         { allowConstantExport: true },
25 |       ],
26 |       "@typescript-eslint/no-unused-vars": "off",
27 |     },
28 |   }
29 | );
30 |

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

--------------------------------------------------------------------------------
/src/components/ResponsiveIconButton.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { useIsMobile } from "@/hooks/use-mobile";
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | interface ResponsiveIconButtonProps extends React.ComponentProps<typeof Button> {
 8 |   icon: React.ReactNode;
 9 |   text: string;
10 |   className?: string;
11 | }
12 | 
13 | const ResponsiveIconButton: React.FC<ResponsiveIconButtonProps> = ({
14 |   icon,
15 |   text,
16 |   className,
17 |   ...props
18 | }) => {
19 |   const isMobile = useIsMobile();
20 |   
21 |   return (
22 |     <Button
23 |       className={cn(
24 |         "transition-all",
25 |         isMobile ? "w-9 h-9 p-0" : "h-9",
26 |         className
27 |       )}
28 |       {...props}
29 |     >
30 |       {icon}
31 |       {!isMobile && <span className="ml-2">{text}</span>}
32 |     </Button>
33 |   );
34 | };
35 | 
36 | export default ResponsiveIconButton;
37 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 KARTHIK LAL
 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 "@/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 "@/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/App.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Toaster as SonnerToaster } from "sonner";
 3 | import { TooltipProvider } from "@/components/ui/tooltip";
 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 5 | import { BrowserRouter, Routes, Route } from "react-router-dom";
 6 | import Index from "./pages/Index";
 7 | import NotFound from "./pages/NotFound";
 8 | 
 9 | const queryClient = new QueryClient();
10 | 
11 | const App = () => (
12 |   <QueryClientProvider client={queryClient}>
13 |     <TooltipProvider>
14 |       <SonnerToaster 
15 |         position="top-right" 
16 |         closeButton 
17 |         theme="system"
18 |         toastOptions={{
19 |           classNames: {
20 |             closeButton: "text-foreground hover:text-foreground/80",
21 |             toast: "bg-background border-border text-foreground",
22 |           },
23 |         }}
24 |       />
25 |       <BrowserRouter>
26 |         <Routes>
27 |           <Route path="/" element={<Index />} />
28 |           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
29 |           <Route path="*" element={<NotFound />} />
30 |         </Routes>
31 |       </BrowserRouter>
32 |     </TooltipProvider>
33 |   </QueryClientProvider>
34 | );
35 | 
36 | export default App;
37 |

--------------------------------------------------------------------------------
/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Moon, Sun } from "lucide-react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { useTheme } from "@/components/ThemeProvider";
 5 | import { useEffect } from "react";
 6 | 
 7 | interface ThemeToggleProps {
 8 |   onThemeChange?: (isDarkMode: boolean) => void;
 9 | }
10 | 
11 | export function ThemeToggle({ onThemeChange }: ThemeToggleProps) {
12 |   const { theme, resolvedTheme, setTheme } = useTheme();
13 |   
14 |   useEffect(() => {
15 |     if (onThemeChange) {
16 |       onThemeChange(resolvedTheme === "dark");
17 |     }
18 |   }, [resolvedTheme, onThemeChange]);
19 | 
20 |   return (
21 |     <Button
22 |       variant="ghost"
23 |       size="icon"
24 |       aria-label="Toggle theme"
25 |       onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
26 |       className="rounded-full bg-secondary hover:bg-secondary/80 transition-all duration-300"
27 |     >
28 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
29 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
30 |       <span className="sr-only">Toggle theme</span>
31 |     </Button>
32 |   );
33 | }
34 |

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

--------------------------------------------------------------------------------
/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 "@/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 |

--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "CyberKeyGen",
 4 |   "description": "Quickly generate secure passwords with customizable options",
 5 |   "version": "2.1.0",
 6 |   "action": {
 7 |     "default_popup": "popup/popup.html",
 8 |     "default_icon": {
 9 |       "16": "icons/favicon.png",
10 |       "48": "icons/favicon.png",
11 |       "128": "icons/favicon.png"
12 |     }
13 |   },
14 |   "icons": {
15 |     "16": "icons/favicon.png",
16 |     "48": "icons/favicon.png",
17 |     "128": "icons/favicon.png"
18 |   },
19 |   "permissions": [
20 |     "storage",
21 |     "clipboardWrite",
22 |     "activeTab",
23 |     "contextMenus"
24 |   ],
25 |   "background": {
26 |     "service_worker": "background/background.js"
27 |   },
28 |   "content_scripts": [
29 |     {
30 |       "matches": ["<all_urls>"],
31 |       "js": ["content/content.js"],
32 |       "run_at": "document_idle"
33 |     }
34 |   ],
35 |   "options_page": "options/options.html",
36 |   "commands": {
37 |     "generate_password": {
38 |       "suggested_key": {
39 |         "default": "Alt+Shift+G",
40 |         "mac": "Alt+Shift+G"
41 |       },
42 |       "description": "Generate and fill a password"
43 |     },
44 |     "_execute_action": {
45 |       "suggested_key": {
46 |         "default": "Alt+P",
47 |         "mac": "Alt+P"
48 |       },
49 |       "description": "Open the password generator popup"
50 |     }
51 |   }
52 | }
53 |

--------------------------------------------------------------------------------
/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 "@/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 "@/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 "@/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/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
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/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 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/resizable.tsx:
--------------------------------------------------------------------------------
 1 | import { GripVertical } from "lucide-react"
 2 | import * as ResizablePrimitive from "react-resizable-panels"
 3 | 
 4 | import { cn } from "@/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 |

--------------------------------------------------------------------------------
/public/serviceWorker.js:
--------------------------------------------------------------------------------
 1 | const CACHE_NAME = 'cybershield-password-generator-v1';
 2 | const urlsToCache = [
 3 |   '/',
 4 |   '/index.html',
 5 |   '/manifest.json',
 6 |   '/assets/index.css',
 7 |   '/assets/index.js'
 8 | ];
 9 | 
10 | // Install a service worker
11 | self.addEventListener('install', event => {
12 |   event.waitUntil(
13 |     caches.open(CACHE_NAME)
14 |       .then(cache => {
15 |         console.log('Opened cache');
16 |         return cache.addAll(urlsToCache);
17 |       })
18 |   );
19 | });
20 | 
21 | // Cache and return requests
22 | self.addEventListener('fetch', event => {
23 |   event.respondWith(
24 |     caches.match(event.request)
25 |       .then(response => {
26 |         // Return the cached response if we have it
27 |         if (response) {
28 |           return response;
29 |         }
30 |         // Otherwise try to fetch it from the network
31 |         return fetch(event.request)
32 |           .then(response => {
33 |             // Don't cache responses that aren't successful
34 |             if (!response || response.status !== 200 || response.type !== 'basic') {
35 |               return response;
36 |             }
37 | 
38 |             // Clone the response since it's a stream that can only be consumed once
39 |             const responseToCache = response.clone();
40 | 
41 |             caches.open(CACHE_NAME)
42 |               .then(cache => {
43 |                 cache.put(event.request, responseToCache);
44 |               });
45 | 
46 |             return response;
47 |           });
48 |       })
49 |   );
50 | });
51 | 
52 | // Update service worker
53 | self.addEventListener('activate', event => {
54 |   const cacheWhitelist = [CACHE_NAME];
55 |   event.waitUntil(
56 |     caches.keys().then(cacheNames => {
57 |       return Promise.all(
58 |         cacheNames.map(cacheName => {
59 |           if (cacheWhitelist.indexOf(cacheName) === -1) {
60 |             return caches.delete(cacheName);
61 |           }
62 |         })
63 |       );
64 |     })
65 |   );
66 | });

--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 3 | import { type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { toggleVariants } from "@/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/sonner.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useTheme } from "next-themes"
 3 | import { Toaster as Sonner } from "sonner"
 4 | 
 5 | type ToasterProps = React.ComponentProps<typeof Sonner>
 6 | 
 7 | const Toaster = ({ ...props }: ToasterProps) => {
 8 |   const { theme = "system" } = useTheme()
 9 | 
10 |   return (
11 |     <Sonner
12 |       theme={theme as ToasterProps["theme"]}
13 |       className="toaster group"
14 |       toastOptions={{
15 |         classNames: {
16 |           toast:
17 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
18 |           description: "group-[.toast]:text-muted-foreground",
19 |           actionButton:
20 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
21 |           cancelButton:
22 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
23 |           closeButton:
24 |             "group-[.toast]:bg-transparent group-[.toast]:text-foreground/80 group-[.toast]:border-none group-[.toast]:hover:bg-secondary group-[.toast]:hover:text-foreground dark:group-[.toast]:text-foreground/90 dark:group-[.toast]:hover:text-foreground",
25 |           error: "group-[.toast]:bg-destructive/15 group-[.toast]:text-destructive group-[.toast]:border-destructive/20 group-[.toast]:dark:bg-destructive/15",
26 |           success: "group-[.toast]:bg-green-500/15 group-[.toast]:text-green-600 group-[.toast]:border-green-500/20 group-[.toast]:dark:bg-green-500/15 group-[.toast]:dark:text-green-400",
27 |           warning: "group-[.toast]:bg-yellow-500/15 group-[.toast]:text-yellow-600 group-[.toast]:border-yellow-500/20 group-[.toast]:dark:bg-yellow-500/15 group-[.toast]:dark:text-yellow-400",
28 |           info: "group-[.toast]:bg-blue-500/15 group-[.toast]:text-blue-600 group-[.toast]:border-blue-500/20 group-[.toast]:dark:bg-blue-500/15 group-[.toast]:dark:text-blue-400",
29 |         },
30 |       }}
31 |       {...props}
32 |     />
33 |   )
34 | }
35 | 
36 | export { Toaster }
37 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/png" href="/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>CyberKeyGen | Password Generator</title>
 8 |     <meta name="description" content="Generate cryptographically secure passwords with CyberKeyGen's advanced password generator. Featuring password strength analysis, custom requirements, and enhanced security options." />
 9 |     <meta name="keywords" content="password generator, secure password, cybersecurity, password strength, password manager, encryption"/>
10 |     <meta name="author" content="KARTHIK LAL" />
11 |     <meta property="og:title" content="CyberKeyGen | Password Generator" />
12 |     <meta property="og:description" content="Generate cryptographically secure passwords with CyberKeyGen's advanced password generator. Featuring password strength analysis, custom requirements, and enhanced security options." />
13 |     <meta property="og:image" content="/favicon.png" />
14 |     <meta property="og:url" content="https://password.karthiklal.in" />
15 | 
16 |     
17 |     <meta name="theme-color" content="transparent" />
18 |     <meta name="description" content="A secure password generator that works offline" />
19 |     <link rel="manifest" href="public/manifest.json" />
20 |     <link rel="apple-touch-icon" href="public/icon-192x192.png" />
21 |     <link rel="apple-touch-icon" sizes="192x192" href="public/icon-192x192-dark.png" />
22 |     <link rel="apple-touch-icon" sizes="512x512" href="public/icon-512x512-dark.png" />
23 |     <meta name="theme-color" content="transparent">
24 |     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8f9fa">
25 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="transparent">
26 |   </head>
27 | 
28 |   <body>
29 |     <div id="root"></div>
30 |     <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
31 |     <script type="module" src="/src/main.tsx"></script>
32 |   </body>
33 | </html>

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

--------------------------------------------------------------------------------
/src/hooks/use-keyboard-shortcuts.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useState, useEffect } from "react";
 3 | import { toast } from "sonner";
 4 | 
 5 | interface KeyboardShortcut {
 6 |   key: string;
 7 |   description: string;
 8 |   action: () => void;
 9 |   modifier?: "ctrl" | "alt" | "shift" | "meta";
10 | }
11 | 
12 | export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
13 |   const [isListening, setIsListening] = useState(true);
14 | 
15 |   useEffect(() => {
16 |     if (!isListening) return;
17 | 
18 |     const handleKeyDown = (e: KeyboardEvent) => {
19 |       // Don't trigger shortcuts when typing in input fields
20 |       if (
21 |         document.activeElement instanceof HTMLInputElement ||
22 |         document.activeElement instanceof HTMLTextAreaElement
23 |       ) {
24 |         return;
25 |       }
26 | 
27 |       const matchedShortcut = shortcuts.find((shortcut) => {
28 |         const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase();
29 |         const modifierMatch = 
30 |           (shortcut.modifier === "ctrl" && e.ctrlKey) ||
31 |           (shortcut.modifier === "alt" && e.altKey) ||
32 |           (shortcut.modifier === "shift" && e.shiftKey) ||
33 |           (shortcut.modifier === "meta" && e.metaKey) ||
34 |           (!shortcut.modifier && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey);
35 |         
36 |         return keyMatch && modifierMatch;
37 |       });
38 | 
39 |       if (matchedShortcut) {
40 |         e.preventDefault();
41 |         matchedShortcut.action();
42 |       }
43 |     };
44 | 
45 |     window.addEventListener("keydown", handleKeyDown);
46 | 
47 |     return () => {
48 |       window.removeEventListener("keydown", handleKeyDown);
49 |     };
50 |   }, [isListening, shortcuts]);
51 | 
52 |   const toggleListening = () => {
53 |     setIsListening(!isListening);
54 |     toast.info(isListening ? "Keyboard shortcuts disabled" : "Keyboard shortcuts enabled");
55 |   };
56 | 
57 |   return { isListening, toggleListening };
58 | }
59 | 
60 | export const getShortcutDisplay = (shortcut: KeyboardShortcut): string => {
61 |   const modifierSymbol = 
62 |     shortcut.modifier === "ctrl" ? "Ctrl + " :
63 |     shortcut.modifier === "alt" ? "Alt + " :
64 |     shortcut.modifier === "shift" ? "Shift + " :
65 |     shortcut.modifier === "meta" ? "⌘ + " : "";
66 |   
67 |   return `${modifierSymbol}${shortcut.key.toUpperCase()}`;
68 | };
69 |

--------------------------------------------------------------------------------
/src/components/PasswordQRCode.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { useState } from "react";
 3 | import { QRCodeSVG } from "qrcode.react";
 4 | import {
 5 |   Dialog,
 6 |   DialogContent,
 7 |   DialogDescription,
 8 |   DialogHeader,
 9 |   DialogTitle,
10 |   DialogTrigger,
11 |   DialogClose,
12 | } from "@/components/ui/dialog";
13 | import { Button } from "@/components/ui/button";
14 | import { QrCode } from "lucide-react";
15 | import { toast } from "sonner";
16 | 
17 | interface PasswordQRCodeProps {
18 |   password: string;
19 | }
20 | 
21 | const PasswordQRCode = ({ password }: PasswordQRCodeProps) => {
22 |   const [dialogOpen, setDialogOpen] = useState(false);
23 | 
24 |   const handleClick = () => {
25 |     if (!password) {
26 |       toast.error("Generate a password first!");
27 |       return;
28 |     }
29 |     setDialogOpen(true);
30 |   };
31 | 
32 |   return (
33 |     <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
34 |       <DialogTrigger asChild>
35 |         <Button
36 |           variant="outline"
37 |           size="icon"
38 |           title="Create QR Code"
39 |           onClick={handleClick}
40 |           className="h-9 w-9"
41 |         >
42 |           <QrCode className="h-4 w-4" />
43 |         </Button>
44 |       </DialogTrigger>
45 |       <DialogContent className="sm:max-w-md">
46 |         <DialogHeader>
47 |           <DialogTitle>Password QR Code</DialogTitle>
48 |           <DialogDescription>
49 |             Scan this QR code to easily transfer your password to another device
50 |           </DialogDescription>
51 |         </DialogHeader>
52 |         <div className="flex flex-col items-center justify-center py-4">
53 |           {password ? (
54 |             <div className="bg-white p-4 rounded-lg">
55 |               <QRCodeSVG
56 |                 value={password}
57 |                 size={200}
58 |                 level="H"
59 |                 includeMargin={true}
60 |               />
61 |             </div>
62 |           ) : (
63 |             <p className="text-muted-foreground">No password generated yet</p>
64 |           )}
65 |           <p className="text-xs text-muted-foreground mt-4 text-center">
66 |             Note: QR codes store data in plain text. Only share this QR code securely.
67 |           </p>
68 |         </div>
69 |         <DialogClose asChild>
70 |           <Button className="w-full">Close</Button>
71 |         </DialogClose>
72 |       </DialogContent>
73 |     </Dialog>
74 |   );
75 | };
76 | 
77 | export default PasswordQRCode;
78 |

--------------------------------------------------------------------------------
/.github/workflows/build-release-extension.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Release Extension
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     inputs:
 6 |       release_type:
 7 |         description: 'Type of release'
 8 |         required: true
 9 |         default: 'patch'
10 |         type: 'choice'
11 |         options:
12 |           - patch
13 |           - minor
14 |           - major
15 | 
16 | jobs:
17 |   build-and-release:
18 |     runs-on: ubuntu-latest
19 |     steps:
20 |       - name: Checkout code
21 |         uses: actions/checkout@v4
22 | 
23 |       - name: Setup Node.js
24 |         uses: actions/setup-node@v4
25 |         with:
26 |           node-version: '20'
27 |           cache: 'npm'
28 | 
29 |       - name: Install dependencies
30 |         run: npm ci
31 | 
32 |       - name: Extract version from manifest
33 |         id: get_version
34 |         run: |
35 |           VERSION=$(grep '"version"' extension/manifest.json | sed -E 's/.*"version"[^"]*"([^"]*)",.*/\1/')
36 |           echo "extension_version=$VERSION" >> $GITHUB_OUTPUT
37 | 
38 |       - name: Build extension
39 |         run: |
40 |           mkdir -p dist
41 |           cd extension
42 |           zip -r ../dist/CyberKeyGen_${{ steps.get_version.outputs.extension_version }}.zip *
43 | 
44 |       - name: Check if tag exists
45 |         id: check_tag
46 |         run: |
47 |           git fetch --tags
48 |           if git tag -l "v${{ steps.get_version.outputs.extension_version }}" | grep -q .; then
49 |             echo "tag_exists=true" >> $GITHUB_OUTPUT
50 |           else
51 |             echo "tag_exists=false" >> $GITHUB_OUTPUT
52 |           fi
53 | 
54 |       - name: Create GitHub release
55 |         if: steps.check_tag.outputs.tag_exists == 'false'
56 |         id: create_release
57 |         uses: softprops/action-gh-release@v1
58 |         with:
59 |           tag_name: v${{ steps.get_version.outputs.extension_version }}
60 |           name: CyberKeyGen v${{ steps.get_version.outputs.extension_version }}
61 |           draft: false
62 |           prerelease: false
63 |           files: |
64 |             dist/CyberKeyGen_${{ steps.get_version.outputs.extension_version }}.zip
65 |           generate_release_notes: true
66 |         env:
67 |           GITHUB_TOKEN: ${{ secrets.CYBER_RELEASE }}
68 |       
69 |       - name: Output message if tag exists
70 |         if: steps.check_tag.outputs.tag_exists == 'true'
71 |         run: |
72 |           echo "::error::Tag v${{ steps.get_version.outputs.extension_version }} already exists. Please update the version in extension/manifest.json before creating a new release."
73 |           exit 1
74 |

--------------------------------------------------------------------------------
/src/components/KeyboardShortcuts.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import {
 4 |   Dialog,
 5 |   DialogContent,
 6 |   DialogDescription,
 7 |   DialogHeader,
 8 |   DialogTitle,
 9 |   DialogTrigger,
10 | } from "@/components/ui/dialog";
11 | import { Button } from "@/components/ui/button";
12 | import { Keyboard } from "lucide-react";
13 | import { Switch } from "@/components/ui/switch";
14 | import { Label } from "@/components/ui/label";
15 | import { getShortcutDisplay } from "@/hooks/use-keyboard-shortcuts";
16 | 
17 | interface KeyboardShortcutsProps {
18 |   shortcuts: Array<{
19 |     key: string;
20 |     description: string;
21 |     action: () => void;
22 |     modifier?: "ctrl" | "alt" | "shift" | "meta";
23 |   }>;
24 |   isEnabled: boolean;
25 |   onToggle: () => void;
26 | }
27 | 
28 | const KeyboardShortcuts = ({ 
29 |   shortcuts,
30 |   isEnabled,
31 |   onToggle
32 | }: KeyboardShortcutsProps) => {
33 |   return (
34 |     <Dialog>
35 |       <DialogTrigger asChild>
36 |         <Button
37 |           variant="outline"
38 |           size="icon"
39 |           title="Keyboard Shortcuts"
40 |           className="h-9 w-9"
41 |         >
42 |           <Keyboard className="h-4 w-4" />
43 |         </Button>
44 |       </DialogTrigger>
45 |       <DialogContent className="sm:max-w-md">
46 |         <DialogHeader>
47 |           <DialogTitle>Keyboard Shortcuts</DialogTitle>
48 |           <DialogDescription>
49 |             Use keyboard shortcuts to quickly generate and manage passwords
50 |           </DialogDescription>
51 |         </DialogHeader>
52 |         
53 |         <div className="flex items-center space-x-2 my-4">
54 |           <Switch id="shortcuts-enabled" checked={isEnabled} onCheckedChange={onToggle} />
55 |           <Label htmlFor="shortcuts-enabled">Enable keyboard shortcuts</Label>
56 |         </div>
57 |         
58 |         <div className="space-y-4">
59 |           <div className="rounded-md border">
60 |             <div className="bg-muted px-4 py-2 rounded-t-md">
61 |               <h3 className="text-sm font-medium">Available Shortcuts</h3>
62 |             </div>
63 |             <div className="p-4 space-y-2">
64 |               {shortcuts.map((shortcut, index) => (
65 |                 <div key={index} className="flex justify-between text-sm">
66 |                   <span>{shortcut.description}</span>
67 |                   <kbd className="px-2 py-1 text-xs bg-muted border rounded-md font-mono">
68 |                     {getShortcutDisplay(shortcut)}
69 |                   </kbd>
70 |                 </div>
71 |               ))}
72 |             </div>
73 |           </div>
74 |         </div>
75 |       </DialogContent>
76 |     </Dialog>
77 |   );
78 | };
79 | 
80 | export default KeyboardShortcuts;
81 |

--------------------------------------------------------------------------------
/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import * as React from "react"
 3 | import { OTPInput, OTPInputContext } from "input-otp"
 4 | import { Dot } from "lucide-react"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const InputOTP = React.forwardRef<
 9 |   React.ElementRef<typeof OTPInput>,
10 |   React.ComponentPropsWithoutRef<typeof OTPInput>
11 | >(({ className, containerClassName, ...props }, ref) => (
12 |   <OTPInput
13 |     ref={ref}
14 |     containerClassName={cn(
15 |       "flex items-center gap-2 has-[:disabled]:opacity-50",
16 |       containerClassName
17 |     )}
18 |     className={cn("disabled:cursor-not-allowed", className)}
19 |     {...props}
20 |   />
21 | ))
22 | InputOTP.displayName = "InputOTP"
23 | 
24 | const InputOTPGroup = React.forwardRef<
25 |   React.ElementRef<"div">,
26 |   React.ComponentPropsWithoutRef<"div">
27 | >(({ className, ...props }, ref) => (
28 |   <div ref={ref} className={cn("flex items-center", className)} {...props} />
29 | ))
30 | InputOTPGroup.displayName = "InputOTPGroup"
31 | 
32 | const InputOTPSlot = React.forwardRef<
33 |   React.ElementRef<"div">,
34 |   React.ComponentPropsWithoutRef<"div"> & { index: number }
35 | >(({ index, className, ...props }, ref) => {
36 |   const inputOTPContext = React.useContext(OTPInputContext)
37 |   
38 |   // Add null check to prevent accessing properties of undefined
39 |   const slot = inputOTPContext?.slots?.[index]
40 |   
41 |   // If slot doesn't exist, return an empty div to avoid errors
42 |   if (!slot) {
43 |     return <div ref={ref} className={cn("h-10 w-10", className)} {...props} />
44 |   }
45 |   
46 |   const { char, hasFakeCaret, isActive } = slot
47 | 
48 |   return (
49 |     <div
50 |       ref={ref}
51 |       className={cn(
52 |         "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",
53 |         isActive && "z-10 ring-2 ring-ring ring-offset-background",
54 |         className
55 |       )}
56 |       {...props}
57 |     >
58 |       {char}
59 |       {hasFakeCaret && (
60 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
61 |           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
62 |         </div>
63 |       )}
64 |     </div>
65 |   )
66 | })
67 | InputOTPSlot.displayName = "InputOTPSlot"
68 | 
69 | const InputOTPSeparator = React.forwardRef<
70 |   React.ElementRef<"div">,
71 |   React.ComponentPropsWithoutRef<"div">
72 | >(({ ...props }, ref) => (
73 |   <div ref={ref} role="separator" {...props}>
74 |     <Dot />
75 |   </div>
76 | ))
77 | InputOTPSeparator.displayName = "InputOTPSeparator"
78 | 
79 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
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 "@/lib/utils";
 6 | import { buttonVariants } from "@/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: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
56 |         IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
57 |       }}
58 |       {...props}
59 |     />
60 |   );
61 | }
62 | Calendar.displayName = "Calendar";
63 | 
64 | export { Calendar };
65 |

--------------------------------------------------------------------------------
/src/pages/Index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { ThemeProvider } from "@/components/ThemeProvider";
 3 | import { ThemeToggle } from "@/components/ThemeToggle";
 4 | import PasswordGenerator from "@/components/PasswordGenerator";
 5 | import Preloader from "@/components/Preloader";
 6 | import ExtensionPromotion from "@/components/ExtensionPromotion";
 7 | import { useIsMobile } from "@/hooks/use-mobile";
 8 | 
 9 | const Index = () => {
10 |   const [isDark, setIsDark] = useState(true);
11 |   const isMobile = useIsMobile();
12 |   
13 |   useEffect(() => {
14 |     // Initialize the isDark state based on document class on first render
15 |     const isDarkMode = document.documentElement.classList.contains("dark");
16 |     setIsDark(isDarkMode);
17 |   }, []);
18 | 
19 |   const handleThemeChange = (isDarkMode: boolean) => {
20 |     setIsDark(isDarkMode);
21 |   };
22 | 
23 |   return (
24 |     <ThemeProvider defaultTheme="dark">
25 |       <Preloader />
26 |       <div className="min-h-screen flex flex-col bg-background text-foreground transition-colors duration-300">
27 |         <header className="border-b border-border sticky top-0 backdrop-blur-sm bg-background/80 z-10">
28 |           <div className="container mx-auto py-2 px-3 sm:py-4 sm:px-4 flex justify-between items-center">
29 |             <div className="flex items-center gap-1 sm:gap-2">
30 |               <img 
31 |                 src={isDark ? "/favicon.png" : "/favicon-dark.png"} 
32 |                 alt="CyberKeyGen Logo" 
33 |                 className="w-5 h-5 sm:w-6 sm:h-6" 
34 |               />
35 |               <h1 className="text-xl sm:text-2xl font-bold tracking-tight">
36 |                 CyberKeyGen
37 |               </h1>
38 |             </div>
39 |             <ThemeToggle onThemeChange={handleThemeChange} />
40 |           </div>
41 |         </header>
42 | 
43 |         <main className="container mx-auto pt-3 pb-6 px-3 sm:py-8 sm:px-4 flex-grow">
44 |           <PasswordGenerator />
45 |         </main>
46 |         
47 |         {/* Extension promotion for desktop users */}
48 |         {!isMobile && <ExtensionPromotion isDark={isDark} />}
49 | 
50 |         <footer className="py-3 sm:py-6 border-t border-border mt-4 sm:mt-8 sticky bottom-0 bg-background/80 backdrop-blur-sm z-10">
51 |           <div className="container mx-auto px-3 sm:px-4 text-center text-xs sm:text-sm text-muted-foreground">
52 |           <p className="whitespace-normal">
53 |           © 2025 CyberKeyGen • ./run —by{" "}
54 |               <a 
55 |                 href="https://karthiklal.in" 
56 |                 target="_blank" 
57 |                 rel="noopener noreferrer"
58 |                 className="font-medium transition-colors hover:text-primary"
59 |               >
60 |                 KARTHIK LAL
61 |               </a>
62 |             </p>
63 |           </div>
64 |         </footer>
65 |       </div>
66 |     </ThemeProvider>
67 |   );
68 | };
69 | 
70 | export default Index;
71 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | 
  2 | @tailwind base;
  3 | @tailwind components;
  4 | @tailwind utilities;
  5 | 
  6 | @layer base {
  7 |   :root {
  8 |     --background: 0 0% 100%;
  9 |     --foreground: 0 0% 0%;
 10 | 
 11 |     --card: 0 0% 100%;
 12 |     --card-foreground: 0 0% 0%;
 13 | 
 14 |     --popover: 0 0% 100%;
 15 |     --popover-foreground: 0 0% 0%;
 16 | 
 17 |     --primary: 0 0% 0%;
 18 |     --primary-foreground: 0 0% 100%;
 19 | 
 20 |     --secondary: 0 0% 95%;
 21 |     --secondary-foreground: 0 0% 7%;
 22 | 
 23 |     --muted: 0 0% 95%;
 24 |     --muted-foreground: 0 0% 45%;
 25 | 
 26 |     --accent: 0 0% 95%;
 27 |     --accent-foreground: 0 0% 7%;
 28 | 
 29 |     --destructive: 0 85% 45%;
 30 |     --destructive-foreground: 0 0% 100%;
 31 | 
 32 |     --border: 0 0% 90%;
 33 |     --input: 0 0% 90%;
 34 |     --ring: 0 0% 0%;
 35 | 
 36 |     --radius: 0.5rem;
 37 |   }
 38 | 
 39 |   .dark {
 40 |     --background: 0 0% 13%;
 41 |     --foreground: 0 0% 100%;
 42 | 
 43 |     --card: 0 0% 11%;
 44 |     --card-foreground: 0 0% 100%;
 45 | 
 46 |     --popover: 0 0% 11%;
 47 |     --popover-foreground: 0 0% 100%;
 48 | 
 49 |     --primary: 0 0% 100%;
 50 |     --primary-foreground: 0 0% 0%;
 51 | 
 52 |     --secondary: 0 0% 17%;
 53 |     --secondary-foreground: 0 0% 98%;
 54 | 
 55 |     --muted: 0 0% 15%;
 56 |     --muted-foreground: 0 0% 65%;
 57 | 
 58 |     --accent: 0 0% 17%;
 59 |     --accent-foreground: 0 0% 98%;
 60 | 
 61 |     --destructive: 0 62% 30%;
 62 |     --destructive-foreground: 0 0% 100%;
 63 | 
 64 |     --border: 0 0% 20%;
 65 |     --input: 0 0% 20%;
 66 |     --ring: 0 0% 100%;
 67 |   }
 68 | }
 69 | 
 70 | @layer base {
 71 |   * {
 72 |     @apply border-border;
 73 |   }
 74 |   body {
 75 |     @apply bg-background text-foreground;
 76 |     font-feature-settings: "rlig" 1, "calt" 1;
 77 |   }
 78 |   
 79 |   /* Apple-style preloader animation */
 80 |   .apple-loader {
 81 |     position: fixed;
 82 |     top: 0;
 83 |     left: 0;
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     background-color: var(--background);
 90 |     z-index: 9999;
 91 |     transition: opacity 0.5s ease-out;
 92 |   }
 93 |   
 94 |   .apple-loader.hidden {
 95 |     opacity: 0;
 96 |     pointer-events: none;
 97 |   }
 98 |   
 99 |   .loader-dot {
100 |     width: 10px;
101 |     height: 10px;
102 |     margin: 0 5px;
103 |     border-radius: 50%;
104 |     background-color: var(--primary);
105 |     animation: loader-bounce 1.5s infinite ease-in-out;
106 |   }
107 |   
108 |   .loader-dot:nth-child(1) {
109 |     animation-delay: 0s;
110 |   }
111 |   
112 |   .loader-dot:nth-child(2) {
113 |     animation-delay: 0.2s;
114 |   }
115 |   
116 |   .loader-dot:nth-child(3) {
117 |     animation-delay: 0.4s;
118 |   }
119 |   
120 |   @keyframes loader-bounce {
121 |     0%, 80%, 100% {
122 |       transform: scale(0.6);
123 |       opacity: 0.6;
124 |     }
125 |     40% {
126 |       transform: scale(1);
127 |       opacity: 1;
128 |     }
129 |   }
130 | }
131 |

--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   darkMode: ["class"],
 3 |   content: [
 4 |     "./pages/**/*.{ts,tsx}",
 5 |     "./components/**/*.{ts,tsx}",
 6 |     "./app/**/*.{ts,tsx}",
 7 |     "./src/**/*.{ts,tsx}",
 8 |   ],
 9 |   prefix: "",
10 |   theme: {
11 |     extend: {
12 |       colors: {
13 |         border: 'hsl(var(--border))',
14 |         input: 'hsl(var(--input))',
15 |         ring: 'hsl(var(--ring))',
16 |         background: 'hsl(var(--background))',
17 |         foreground: 'hsl(var(--foreground))',
18 |         primary: {
19 |           DEFAULT: 'hsl(var(--primary))',
20 |           foreground: 'hsl(var(--primary-foreground))'
21 |         },
22 |         secondary: {
23 |           DEFAULT: 'hsl(var(--secondary))',
24 |           foreground: 'hsl(var(--secondary-foreground))'
25 |         },
26 |         destructive: {
27 |           DEFAULT: 'hsl(var(--destructive))',
28 |           foreground: 'hsl(var(--destructive-foreground))'
29 |         },
30 |         muted: {
31 |           DEFAULT: 'hsl(var(--muted))',
32 |           foreground: 'hsl(var(--muted-foreground))'
33 |         },
34 |         accent: {
35 |           DEFAULT: 'hsl(var(--accent))',
36 |           foreground: 'hsl(var(--accent-foreground))'
37 |         },
38 |         popover: {
39 |           DEFAULT: 'hsl(var(--popover))',
40 |           foreground: 'hsl(var(--popover-foreground))'
41 |         },
42 |         card: {
43 |           DEFAULT: 'hsl(var(--card))',
44 |           foreground: 'hsl(var(--card-foreground))'
45 |         },
46 |         sidebar: {
47 |           DEFAULT: 'hsl(var(--sidebar-background))',
48 |           foreground: 'hsl(var(--sidebar-foreground))',
49 |           primary: 'hsl(var(--sidebar-primary))',
50 |           'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
51 |           accent: 'hsl(var(--sidebar-accent))',
52 |           'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
53 |           border: 'hsl(var(--sidebar-border))',
54 |           ring: 'hsl(var(--sidebar-ring))'
55 |         },
56 |         dark: '#1a1a1a',
57 |         'dark-hover': '#2a2a2a',
58 |         'cyberkeygen': {
59 |           accent: '#4F46E5',
60 |           'accent-hover': '#4338CA',
61 |         },
62 |       },
63 |       animation: {
64 |         'pulse': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
65 |       },
66 |       keyframes: {
67 |         pulse: {
68 |           '0%, 100%': { opacity: 0.5, transform: 'scale(0.75)' },
69 |           '50%': { opacity: 1, transform: 'scale(1)' },
70 |         },
71 |       },
72 |       // Add custom animation delays
73 |       transitionDelay: {
74 |         '100': '100ms',
75 |         '200': '200ms',
76 |       },
77 |     },
78 |   },
79 |   variants: {
80 |     extend: {
81 |       // ...
82 |     },
83 |   },
84 |   plugins: [
85 |     // ...existing plugins
86 |     function ({ addUtilities }) {
87 |       const newUtilities = {
88 |         '.delay-100': {
89 |           'animation-delay': '0.1s',
90 |         },
91 |         '.delay-200': {
92 |           'animation-delay': '0.2s',
93 |         },
94 |       }
95 |       addUtilities(newUtilities)
96 |     }
97 |   ],
98 | }
99 |

--------------------------------------------------------------------------------
/src/utils/leetSpeakConverter.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | export const convertToLeetSpeak = (text: string): string => {
  3 |   if (!text) return "";
  4 |   
  5 |   const leetMap: Record<string, string> = {
  6 |     a: "@",
  7 |     b: "8",
  8 |     c: "(",
  9 |     d: "D",
 10 |     e: "3",
 11 |     f: "F",
 12 |     g: "6",
 13 |     h: "H",
 14 |     i: "1",
 15 |     j: "J",
 16 |     k: "K",
 17 |     l: "L",
 18 |     m: "M",
 19 |     n: "N",
 20 |     o: "0",
 21 |     p: "P",
 22 |     q: "Q",
 23 |     r: "R",
 24 |     s: "5",
 25 |     t: "7",
 26 |     u: "U",
 27 |     v: "V",
 28 |     w: "W",
 29 |     x: "X",
 30 |     y: "Y",
 31 |     z: "Z"
 32 |   };
 33 | 
 34 |   return text
 35 |     .split("")
 36 |     .map(char => {
 37 |       // Randomly decide whether to convert this character (70% chance)
 38 |       const shouldConvert = Math.random() < 0.7;
 39 |       if (!shouldConvert) return char;
 40 |       
 41 |       const lowerChar = char.toLowerCase();
 42 |       return leetMap[lowerChar] || char;
 43 |     })
 44 |     .join("");
 45 | };
 46 | 
 47 | // Function to create a mixed password with text + random characters
 48 | export const createMixedPassword = (
 49 |   baseText: string, 
 50 |   length: number, 
 51 |   includeLowercase: boolean, 
 52 |   includeUppercase: boolean, 
 53 |   includeNumbers: boolean, 
 54 |   includeSymbols: boolean,
 55 |   excludeAmbiguous: boolean
 56 | ): string => {
 57 |   if (!baseText) return "";
 58 |   
 59 |   // Convert base text to leet speak
 60 |   const leetText = convertToLeetSpeak(baseText);
 61 |   
 62 |   // If the leet text is already long enough, return it truncated
 63 |   if (leetText.length >= length) {
 64 |     return leetText.substring(0, length);
 65 |   }
 66 |   
 67 |   // We need to add some random characters
 68 |   const charsToAdd = length - leetText.length;
 69 |   
 70 |   // Build character set for random part
 71 |   const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
 72 |   const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 73 |   const numberChars = "0123456789";
 74 |   const symbolChars = "!@#$%^&*()-_=+";
 75 |   const ambiguousChars = "iIl1Lo0O";
 76 |   
 77 |   let availableChars = "";
 78 |   
 79 |   if (includeLowercase) availableChars += lowercaseChars;
 80 |   if (includeUppercase) availableChars += uppercaseChars;
 81 |   if (includeNumbers) availableChars += numberChars;
 82 |   if (includeSymbols) availableChars += symbolChars;
 83 |   
 84 |   // Remove ambiguous characters if option is selected
 85 |   if (excludeAmbiguous) {
 86 |     for (const char of ambiguousChars) {
 87 |       availableChars = availableChars.replace(char, "");
 88 |     }
 89 |   }
 90 |   
 91 |   // Default to alphanumeric if nothing is selected
 92 |   if (!availableChars) {
 93 |     availableChars = lowercaseChars + uppercaseChars + numberChars;
 94 |   }
 95 |   
 96 |   // Generate random part
 97 |   let randomPart = "";
 98 |   for (let i = 0; i < charsToAdd; i++) {
 99 |     const randomIndex = Math.floor(Math.random() * availableChars.length);
100 |     randomPart += availableChars[randomIndex];
101 |   }
102 |   
103 |   // Return combined password
104 |   return leetText + randomPart;
105 | };
106 |

--------------------------------------------------------------------------------
/public/placeholder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

--------------------------------------------------------------------------------
/src/components/ThemeProvider.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import { createContext, useContext, useEffect, useState } from "react";
  3 | 
  4 | type Theme = "dark" | "light" | "system";
  5 | 
  6 | type ThemeProviderProps = {
  7 |   children: React.ReactNode;
  8 |   defaultTheme?: Theme;
  9 |   storageKey?: string;
 10 | };
 11 | 
 12 | type ThemeProviderState = {
 13 |   theme: Theme;
 14 |   setTheme: (theme: Theme) => void;
 15 |   resolvedTheme: "dark" | "light";
 16 | };
 17 | 
 18 | const initialState: ThemeProviderState = {
 19 |   theme: "system",
 20 |   setTheme: () => null,
 21 |   resolvedTheme: "dark",
 22 | };
 23 | 
 24 | const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 25 | 
 26 | export function ThemeProvider({
 27 |   children,
 28 |   defaultTheme = "system",
 29 |   storageKey = "cyberkeygen-ui-theme",
 30 |   ...props
 31 | }: ThemeProviderProps) {
 32 |   const [theme, setTheme] = useState<Theme>(
 33 |     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
 34 |   );
 35 |   const [resolvedTheme, setResolvedTheme] = useState<"dark" | "light">("dark");
 36 | 
 37 |   // Apply the theme class to the document element
 38 |   useEffect(() => {
 39 |     const root = window.document.documentElement;
 40 |     root.classList.remove("light", "dark");
 41 | 
 42 |     let resolvedTheme: "light" | "dark";
 43 |     
 44 |     if (theme === "system") {
 45 |       resolvedTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
 46 |         ? "dark"
 47 |         : "light";
 48 |     } else {
 49 |       resolvedTheme = theme as "light" | "dark";
 50 |     }
 51 |     
 52 |     root.classList.add(resolvedTheme);
 53 |     setResolvedTheme(resolvedTheme);
 54 | 
 55 |     // Also set data-theme attribute for components that use it
 56 |     root.setAttribute("data-theme", resolvedTheme);
 57 |   }, [theme]);
 58 | 
 59 |   // Listen for system theme changes
 60 |   useEffect(() => {
 61 |     if (theme === "system") {
 62 |       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 63 |       
 64 |       const handleChange = () => {
 65 |         const root = window.document.documentElement;
 66 |         const systemTheme = mediaQuery.matches ? "dark" : "light";
 67 |         
 68 |         root.classList.remove("light", "dark");
 69 |         root.classList.add(systemTheme);
 70 |         setResolvedTheme(systemTheme);
 71 |         root.setAttribute("data-theme", systemTheme);
 72 |       };
 73 |       
 74 |       mediaQuery.addEventListener("change", handleChange);
 75 |       return () => mediaQuery.removeEventListener("change", handleChange);
 76 |     }
 77 |   }, [theme]);
 78 | 
 79 |   const value = {
 80 |     theme,
 81 |     resolvedTheme,
 82 |     setTheme: (theme: Theme) => {
 83 |       localStorage.setItem(storageKey, theme);
 84 |       setTheme(theme);
 85 |     },
 86 |   };
 87 | 
 88 |   return (
 89 |     <ThemeProviderContext.Provider {...props} value={value}>
 90 |       {children}
 91 |     </ThemeProviderContext.Provider>
 92 |   );
 93 | }
 94 | 
 95 | export const useTheme = () => {
 96 |   const context = useContext(ThemeProviderContext);
 97 |   if (context === undefined)
 98 |     throw new Error("useTheme must be used within a ThemeProvider");
 99 |   return context;
100 | };
101 |

--------------------------------------------------------------------------------
/update-extension-version.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | # Script to update the extension version in manifest.json
  3 | 
  4 | # Ensure we have a version type argument
  5 | if [ $# -ne 1 ]; then
  6 |   echo "Usage: $0 <patch|minor|major>"
  7 |   exit 1
  8 | fi
  9 | 
 10 | # Check if the argument is valid
 11 | VERSION_TYPE=$1
 12 | if [[ ! "$VERSION_TYPE" =~ ^(patch|minor|major)$ ]]; then
 13 |   echo "Error: Version type must be 'patch', 'minor', or 'major'"
 14 |   exit 1
 15 | fi
 16 | 
 17 | # Path to manifest file
 18 | MANIFEST_FILE="./extension/manifest.json"
 19 | 
 20 | # Check if manifest file exists
 21 | if [ ! -f "$MANIFEST_FILE" ]; then
 22 |   echo "Error: Manifest file not found at $MANIFEST_FILE"
 23 |   exit 1
 24 | fi
 25 | 
 26 | # Read current version from manifest.json
 27 | if [[ "$OSTYPE" == "darwin"* ]]; then
 28 |   # macOS version
 29 |   CURRENT_VERSION=$(grep '"version"' "$MANIFEST_FILE" | sed -E 's/.*"version"[^"]*"([^"]*)",.*/\1/')
 30 | else
 31 |   # Linux/Unix version with GNU grep
 32 |   CURRENT_VERSION=$(grep -oP '"version": "\K[^"]+' "$MANIFEST_FILE")
 33 | fi
 34 | 
 35 | if [ -z "$CURRENT_VERSION" ]; then
 36 |   echo "Error: Could not find version in manifest file"
 37 |   exit 1
 38 | fi
 39 | 
 40 | echo "Current version: $CURRENT_VERSION"
 41 | 
 42 | # Split version into components
 43 | IFS='.' read -ra VERSION_PARTS <<< "$CURRENT_VERSION"
 44 | MAJOR=${VERSION_PARTS[0]}
 45 | MINOR=${VERSION_PARTS[1]}
 46 | PATCH=${VERSION_PARTS[2]}
 47 | 
 48 | # Update version based on version type
 49 | case $VERSION_TYPE in
 50 |   major)
 51 |     MAJOR=$((MAJOR + 1))
 52 |     MINOR=0
 53 |     PATCH=0
 54 |     ;;
 55 |   minor)
 56 |     MINOR=$((MINOR + 1))
 57 |     PATCH=0
 58 |     ;;
 59 |   patch)
 60 |     PATCH=$((PATCH + 1))
 61 |     ;;
 62 | esac
 63 | 
 64 | # Construct new version
 65 | NEW_VERSION="$MAJOR.$MINOR.$PATCH"
 66 | echo "New version: $NEW_VERSION"
 67 | 
 68 | # Update version in manifest.json
 69 | if [[ "$OSTYPE" == "darwin"* ]]; then
 70 |   # macOS version
 71 |   sed -i '' -e "s/\"version\": \"$CURRENT_VERSION\"/\"version\": \"$NEW_VERSION\"/" "$MANIFEST_FILE"
 72 | else
 73 |   # Linux/Unix version
 74 |   sed -i -e "s/\"version\": \"$CURRENT_VERSION\"/\"version\": \"$NEW_VERSION\"/" "$MANIFEST_FILE"
 75 | fi
 76 | 
 77 | echo "✅ Updated manifest.json to version $NEW_VERSION"
 78 | 
 79 | # Check if the version was updated successfully
 80 | if [[ "$OSTYPE" == "darwin"* ]]; then
 81 |   # macOS version
 82 |   UPDATED_VERSION=$(grep '"version"' "$MANIFEST_FILE" | sed -E 's/.*"version"[^"]*"([^"]*)",.*/\1/')
 83 | else
 84 |   # Linux/Unix version with GNU grep
 85 |   UPDATED_VERSION=$(grep -oP '"version": "\K[^"]+' "$MANIFEST_FILE")
 86 | fi
 87 | 
 88 | if [ "$UPDATED_VERSION" != "$NEW_VERSION" ]; then
 89 |   echo "Error: Version update failed"
 90 |   exit 1
 91 | fi
 92 | echo "✅ Version updated successfully to $UPDATED_VERSION"
 93 | 
 94 | # Ask user to commit the changes
 95 | echo "Do you want to commit the changes? (y/n)"
 96 | read -r COMMIT_CHANGES
 97 | if [[ "$COMMIT_CHANGES" =~ ^[Yy]$ ]]; then
 98 |   echo "Committing changes..."
 99 |   git add "$MANIFEST_FILE"
100 |   git commit -s -m "passGen: Bump version to $NEW_VERSION"
101 |   git push
102 |   echo "Changes committed and pushed."
103 | else
104 |   echo "Changes not committed. Remember to commit them later."
105 | fi

--------------------------------------------------------------------------------
/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 "@/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 "@/lib/utils"
  5 | import { ButtonProps, buttonVariants } from "@/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 "@/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/ExtensionPromotion.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { X, Download } from "lucide-react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { Card } from "@/components/ui/card";
 5 | 
 6 | interface ExtensionPromotionProps {
 7 |   isDark: boolean;
 8 | }
 9 | 
10 | const ExtensionPromotion: React.FC<ExtensionPromotionProps> = ({ isDark }) => {
11 |   // Ensure it's always visible for now by setting a default of true
12 |   const [isVisible, setIsVisible] = useState(true);
13 |   const [initialized, setInitialized] = useState(true); // Start as initialized
14 |   
15 |   useEffect(() => {
16 |     // For testing purposes, we'll force the banner to be visible
17 |     // by clearing any previous dismissal
18 |     try {
19 |       localStorage.removeItem("extensionBannerDismissed");
20 |       setIsVisible(true);
21 |       setInitialized(true);
22 |     } catch (error) {
23 |       // If there's any error with localStorage, keep the banner visible
24 |       console.error("Error accessing localStorage:", error);
25 |     }
26 |   }, []);
27 |   
28 |   const handleDismiss = () => {
29 |     setIsVisible(false);
30 |     try {
31 |       // Save the dismissal in localStorage
32 |       localStorage.setItem("extensionBannerDismissed", "true");
33 |     } catch (error) {
34 |       console.error("Error saving to localStorage:", error);
35 |     }
36 |   };
37 |   
38 |   const handleInstall = () => {
39 |     window.open("https://github.com/karthik558/CyberKeyGen/releases", "_blank", "noopener,noreferrer");
40 |   };
41 |   
42 |   // Don't render anything until we've checked localStorage
43 |   // This prevents the flash of content before hiding
44 |   if (!initialized || !isVisible) return null;
45 |   
46 |   return (
47 |     <div className="fixed bottom-6 right-6 z-50">
48 |       <Card className="p-4 shadow-md border border-primary/70 bg-background/95 backdrop-blur-sm max-w-[300px] animate-in slide-in-from-right duration-300">
49 |         <div className="flex justify-end">
50 |           <button 
51 |             onClick={handleDismiss}
52 |             className="text-muted-foreground hover:text-foreground transition-colors"
53 |             aria-label="Close promotion"
54 |           >
55 |             <X size={16} />
56 |           </button>
57 |         </div>
58 |         
59 |         <div className="flex items-center gap-2 mb-3 mt-1">
60 |           <div className="bg-primary/20 p-2 rounded-full">
61 |             <img 
62 |               src={isDark ? "/favicon.png" : "/favicon-dark.png"} 
63 |               alt="CyberKeyGen Extension" 
64 |               className="w-6 h-6" 
65 |             />
66 |           </div>
67 |           <h3 className="font-semibold text-base">Browser Extension</h3>
68 |         </div>
69 |         
70 |         <p className="text-sm text-foreground mb-2">
71 |           Generate secure passwords directly from your browser's toolbar!
72 |         </p>
73 |         
74 |         <p className="text-xs text-muted-foreground mb-4">
75 |           Never leave your current page to create strong passwords
76 |         </p>
77 |         
78 |         <Button 
79 |           variant="default" 
80 |           onClick={handleInstall} 
81 |           className="w-full py-2 h-9 font-medium"
82 |         >
83 |           <Download size={16} className="mr-2" /> Install Now
84 |         </Button>
85 |       </Card>
86 |     </div>
87 |   );
88 | };
89 | 
90 | export default ExtensionPromotion;
91 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite_react_shadcn_ts",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "build:dev": "vite build --mode development",
10 |     "build:extension": "mkdir -p dist && cd extension && zip -r ../dist/CyberKeyGen_extension.zip *",
11 |     "build:extension:versioned": "VERSION=$(grep '\"version\"' extension/manifest.json | sed -E 's/.*\"version\"[^\"]*\"([^\"]*)\",.*/\\1/') && mkdir -p dist && cd extension && zip -r ../dist/CyberKeyGen_${VERSION}.zip *",
12 |     "version:patch": "./update-extension-version.sh patch",
13 |     "version:minor": "./update-extension-version.sh minor",
14 |     "version:major": "./update-extension-version.sh major",
15 |     "lint": "eslint .",
16 |     "preview": "vite preview"
17 |   },
18 |   "dependencies": {
19 |     "@hookform/resolvers": "^3.9.0",
20 |     "@radix-ui/react-accordion": "^1.2.0",
21 |     "@radix-ui/react-alert-dialog": "^1.1.1",
22 |     "@radix-ui/react-aspect-ratio": "^1.1.0",
23 |     "@radix-ui/react-avatar": "^1.1.0",
24 |     "@radix-ui/react-checkbox": "^1.1.1",
25 |     "@radix-ui/react-collapsible": "^1.1.0",
26 |     "@radix-ui/react-context-menu": "^2.2.1",
27 |     "@radix-ui/react-dialog": "^1.1.2",
28 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
29 |     "@radix-ui/react-hover-card": "^1.1.1",
30 |     "@radix-ui/react-label": "^2.1.0",
31 |     "@radix-ui/react-menubar": "^1.1.1",
32 |     "@radix-ui/react-navigation-menu": "^1.2.0",
33 |     "@radix-ui/react-popover": "^1.1.1",
34 |     "@radix-ui/react-progress": "^1.1.0",
35 |     "@radix-ui/react-radio-group": "^1.2.0",
36 |     "@radix-ui/react-scroll-area": "^1.1.0",
37 |     "@radix-ui/react-select": "^2.1.1",
38 |     "@radix-ui/react-separator": "^1.1.0",
39 |     "@radix-ui/react-slider": "^1.2.0",
40 |     "@radix-ui/react-slot": "^1.1.0",
41 |     "@radix-ui/react-switch": "^1.1.0",
42 |     "@radix-ui/react-tabs": "^1.1.0",
43 |     "@radix-ui/react-toast": "^1.2.1",
44 |     "@radix-ui/react-toggle": "^1.1.0",
45 |     "@radix-ui/react-toggle-group": "^1.1.0",
46 |     "@radix-ui/react-tooltip": "^1.1.4",
47 |     "@tanstack/react-query": "^5.56.2",
48 |     "class-variance-authority": "^0.7.1",
49 |     "clsx": "^2.1.1",
50 |     "cmdk": "^1.0.0",
51 |     "date-fns": "^3.6.0",
52 |     "embla-carousel-react": "^8.3.0",
53 |     "input-otp": "^1.2.4",
54 |     "lucide-react": "^0.462.0",
55 |     "next-themes": "^0.3.0",
56 |     "qrcode.react": "^3.1.0",
57 |     "react": "^18.3.1",
58 |     "react-day-picker": "^8.10.1",
59 |     "react-dom": "^18.3.1",
60 |     "react-hook-form": "^7.53.0",
61 |     "react-resizable-panels": "^2.1.3",
62 |     "react-router-dom": "^6.26.2",
63 |     "recharts": "^2.12.7",
64 |     "sonner": "^1.5.0",
65 |     "tailwind-merge": "^2.5.2",
66 |     "tailwindcss-animate": "^1.0.7",
67 |     "vaul": "^0.9.3",
68 |     "zod": "^3.23.8"
69 |   },
70 |   "devDependencies": {
71 |     "@eslint/js": "^9.9.0",
72 |     "@tailwindcss/typography": "^0.5.15",
73 |     "@types/node": "^22.5.5",
74 |     "@types/react": "^18.3.3",
75 |     "@types/react-dom": "^18.3.0",
76 |     "@vitejs/plugin-react-swc": "^3.5.0",
77 |     "autoprefixer": "^10.4.20",
78 |     "eslint": "^9.9.0",
79 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
80 |     "eslint-plugin-react-refresh": "^0.4.9",
81 |     "globals": "^15.9.0",
82 |     "lovable-tagger": "^1.1.7",
83 |     "postcss": "^8.4.47",
84 |     "tailwindcss": "^3.4.11",
85 |     "typescript": "^5.5.3",
86 |     "typescript-eslint": "^8.0.1",
87 |     "vite": "^5.4.1"
88 |   }
89 | }
90 |

--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Drawer as DrawerPrimitive } from "vaul"
  3 | 
  4 | import { cn } from "@/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/utils/pronounceableGenerator.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | // Common consonant and vowel patterns
  3 | const consonants = ['b', 'c', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'];
  4 | const vowels = ['a', 'e', 'i', 'o', 'u'];
  5 | const consonantPairs = ['bl', 'br', 'ch', 'cl', 'cr', 'dr', 'fl', 'fr', 'gl', 'gr', 'ph', 'pl', 'pr', 'sc', 'sh', 'sk', 'sl', 'sm', 'sn', 'sp', 'st', 'sw', 'th', 'tr', 'tw', 'wh', 'wr'];
  6 | const vowelPairs = ['ai', 'ay', 'ea', 'ee', 'ei', 'ie', 'oa', 'oo', 'ou', 'ui'];
  7 | 
  8 | // Get a random item from an array
  9 | const getRandomItem = <T>(items: T[]): T => {
 10 |   return items[Math.floor(Math.random() * items.length)];
 11 | };
 12 | 
 13 | // Capitalize the first letter of a string
 14 | const capitalize = (str: string): string => {
 15 |   return str.charAt(0).toUpperCase() + str.slice(1);
 16 | };
 17 | 
 18 | // Generate a pronounceable syllable
 19 | const generateSyllable = (): string => {
 20 |   // Various syllable patterns
 21 |   const patterns = [
 22 |     // CV (consonant-vowel)
 23 |     () => getRandomItem(consonants) + getRandomItem(vowels),
 24 |     // CVC (consonant-vowel-consonant)
 25 |     () => getRandomItem(consonants) + getRandomItem(vowels) + getRandomItem(consonants),
 26 |     // VC (vowel-consonant)
 27 |     () => getRandomItem(vowels) + getRandomItem(consonants),
 28 |     // CCV (consonant pair-vowel)
 29 |     () => getRandomItem(consonantPairs) + getRandomItem(vowels),
 30 |     // VCC (vowel-consonant pair)
 31 |     () => getRandomItem(vowels) + getRandomItem(consonantPairs),
 32 |     // CVCC (consonant-vowel-consonant pair)
 33 |     () => getRandomItem(consonants) + getRandomItem(vowels) + getRandomItem(consonantPairs),
 34 |     // CCVC (consonant pair-vowel-consonant)
 35 |     () => getRandomItem(consonantPairs) + getRandomItem(vowels) + getRandomItem(consonants),
 36 |     // VV (vowel pair)
 37 |     () => getRandomItem(vowelPairs),
 38 |   ];
 39 | 
 40 |   return getRandomItem(patterns)();
 41 | };
 42 | 
 43 | // Add numbers and special characters to make the password more secure
 44 | const addComplexity = (
 45 |   word: string, 
 46 |   length: number,
 47 |   includeNumbers: boolean,
 48 |   includeSymbols: boolean,
 49 |   includeUppercase: boolean
 50 | ): string => {
 51 |   let result = word;
 52 |   
 53 |   // Add uppercase if needed
 54 |   if (includeUppercase) {
 55 |     result = capitalize(result);
 56 |   }
 57 |   
 58 |   // Add numbers and symbols until we reach the desired length
 59 |   const numbersSet = '0123456789';
 60 |   const symbolsSet = '!@#$%^&*()-_=+';
 61 |   
 62 |   while (result.length < length) {
 63 |     if (includeNumbers && includeSymbols) {
 64 |       // Alternate between numbers and symbols
 65 |       if (Math.random() > 0.5) {
 66 |         result += numbersSet.charAt(Math.floor(Math.random() * numbersSet.length));
 67 |       } else {
 68 |         result += symbolsSet.charAt(Math.floor(Math.random() * symbolsSet.length));
 69 |       }
 70 |     } else if (includeNumbers) {
 71 |       result += numbersSet.charAt(Math.floor(Math.random() * numbersSet.length));
 72 |     } else if (includeSymbols) {
 73 |       result += symbolsSet.charAt(Math.floor(Math.random() * symbolsSet.length));
 74 |     } else {
 75 |       // If no numbers or symbols are allowed, add another syllable
 76 |       result += generateSyllable();
 77 |     }
 78 |   }
 79 |   
 80 |   // Trim to exact length if it's longer
 81 |   if (result.length > length) {
 82 |     result = result.slice(0, length);
 83 |   }
 84 |   
 85 |   return result;
 86 | };
 87 | 
 88 | // Main function to generate a pronounceable password
 89 | export const generatePronounceablePassword = (
 90 |   length: number,
 91 |   includeUppercase: boolean = true,
 92 |   includeNumbers: boolean = true,
 93 |   includeSymbols: boolean = true
 94 | ): string => {
 95 |   // Start with an empty password
 96 |   let password = '';
 97 |   
 98 |   // Generate syllables until we reach at least 2/3 of the desired length
 99 |   while (password.length < Math.ceil(length * 0.66)) {
100 |     password += generateSyllable();
101 |   }
102 |   
103 |   // Add complexity to reach the exact length
104 |   return addComplexity(
105 |     password,
106 |     length,
107 |     includeNumbers,
108 |     includeSymbols,
109 |     includeUppercase
110 |   );
111 | };
112 |

--------------------------------------------------------------------------------
/extension/content/content.js:
--------------------------------------------------------------------------------
  1 | // Content script for CyberShield Password Generator
  2 | // This script handles filling passwords into form fields
  3 | 
  4 | // Listen for messages from the popup or background script
  5 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  6 |   if (message.action === 'fillPassword') {
  7 |     fillPasswordIntoActiveElement(message.password);
  8 |     sendResponse({ success: true });
  9 |   }
 10 |   return true;
 11 | });
 12 | 
 13 | // Function to fill the password into the currently focused element
 14 | function fillPasswordIntoActiveElement(password) {
 15 |   // Get the active element
 16 |   const activeElement = document.activeElement;
 17 |   
 18 |   // Check if the active element is an input field
 19 |   if (activeElement && (
 20 |       activeElement.tagName === 'INPUT' || 
 21 |       activeElement.tagName === 'TEXTAREA' || 
 22 |       activeElement.isContentEditable
 23 |     )) {
 24 |     
 25 |     // Check if it's a password field, text field, or other input
 26 |     if (activeElement.tagName === 'INPUT' && 
 27 |         (activeElement.type === 'password' || activeElement.type === 'text' || 
 28 |          activeElement.type === 'email' || activeElement.type === '')) {
 29 |       // Set the value
 30 |       activeElement.value = password;
 31 |       
 32 |       // Dispatch input event to trigger any listeners on the page
 33 |       const inputEvent = new Event('input', { bubbles: true });
 34 |       activeElement.dispatchEvent(inputEvent);
 35 |       
 36 |       // Dispatch change event
 37 |       const changeEvent = new Event('change', { bubbles: true });
 38 |       activeElement.dispatchEvent(changeEvent);
 39 |     } 
 40 |     // Handle content editable elements
 41 |     else if (activeElement.isContentEditable) {
 42 |       // Insert the password as text
 43 |       activeElement.textContent = password;
 44 |       
 45 |       // Dispatch input event
 46 |       const inputEvent = new InputEvent('input', {
 47 |         bubbles: true,
 48 |         cancelable: true
 49 |       });
 50 |       activeElement.dispatchEvent(inputEvent);
 51 |     }
 52 |     // Handle textareas
 53 |     else if (activeElement.tagName === 'TEXTAREA') {
 54 |       activeElement.value = password;
 55 |       
 56 |       // Dispatch events
 57 |       const inputEvent = new Event('input', { bubbles: true });
 58 |       activeElement.dispatchEvent(inputEvent);
 59 |       
 60 |       const changeEvent = new Event('change', { bubbles: true });
 61 |       activeElement.dispatchEvent(changeEvent);
 62 |     }
 63 |   } 
 64 |   // If no active element is focused, find password fields on the page
 65 |   else {
 66 |     // Find password fields first
 67 |     const passwordFields = document.querySelectorAll('input[type="password"]');
 68 |     
 69 |     if (passwordFields.length > 0) {
 70 |       // Fill the first password field
 71 |       const field = passwordFields[0];
 72 |       field.value = password;
 73 |       
 74 |       // Dispatch events
 75 |       const inputEvent = new Event('input', { bubbles: true });
 76 |       field.dispatchEvent(inputEvent);
 77 |       
 78 |       const changeEvent = new Event('change', { bubbles: true });
 79 |       field.dispatchEvent(changeEvent);
 80 |       
 81 |       // Focus the field
 82 |       field.focus();
 83 |     } else {
 84 |       // If no password field, look for any text input that might be a password field
 85 |       const possiblePasswordFields = Array.from(document.querySelectorAll('input[type="text"]'))
 86 |         .filter(field => {
 87 |           const name = field.name.toLowerCase();
 88 |           const id = field.id.toLowerCase();
 89 |           const placeholder = field.placeholder.toLowerCase();
 90 |           
 91 |           return name.includes('pass') || id.includes('pass') || placeholder.includes('pass');
 92 |         });
 93 |       
 94 |       if (possiblePasswordFields.length > 0) {
 95 |         const field = possiblePasswordFields[0];
 96 |         field.value = password;
 97 |         
 98 |         // Dispatch events
 99 |         const inputEvent = new Event('input', { bubbles: true });
100 |         field.dispatchEvent(inputEvent);
101 |         
102 |         const changeEvent = new Event('change', { bubbles: true });
103 |         field.dispatchEvent(changeEvent);
104 |         
105 |         // Focus the field
106 |         field.focus();
107 |       }
108 |     }
109 |   }
110 | }
111 |

--------------------------------------------------------------------------------
/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 "@/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/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  2 | import { cva, type VariantProps } from "class-variance-authority"
  3 | import { X } from "lucide-react"
  4 | import * as React from "react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const Sheet = SheetPrimitive.Root
  9 | 
 10 | const SheetTrigger = SheetPrimitive.Trigger
 11 | 
 12 | const SheetClose = SheetPrimitive.Close
 13 | 
 14 | const SheetPortal = 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, SheetClose,
129 |   SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger
130 | }
131 | 
132 |

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

--------------------------------------------------------------------------------
/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 "@/lib/utils"
 14 | import { Label } from "@/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/components/PasswordCategories.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState } from "react";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Input } from "@/components/ui/input";
  5 | import {
  6 |   Popover,
  7 |   PopoverContent,
  8 |   PopoverTrigger,
  9 | } from "@/components/ui/popover";
 10 | import { 
 11 |   FolderIcon, 
 12 |   BriefcaseIcon, 
 13 |   UserIcon, 
 14 |   CreditCardIcon, 
 15 |   LockIcon,
 16 |   HomeIcon,
 17 |   GlobeIcon,
 18 |   HeartIcon,
 19 |   ServerIcon,
 20 |   PlusIcon
 21 | } from "lucide-react";
 22 | import { toast } from "sonner";
 23 | 
 24 | interface PasswordCategoryProps {
 25 |   onSelectCategory: (category: string) => void;
 26 |   selectedCategory: string;
 27 | }
 28 | 
 29 | const categories = [
 30 |   { id: "social", name: "Social Media", icon: <GlobeIcon className="h-4 w-4" /> },
 31 |   { id: "financial", name: "Financial", icon: <CreditCardIcon className="h-4 w-4" /> },
 32 |   { id: "work", name: "Work", icon: <BriefcaseIcon className="h-4 w-4" /> },
 33 |   { id: "personal", name: "Personal", icon: <UserIcon className="h-4 w-4" /> },
 34 |   { id: "home", name: "Home", icon: <HomeIcon className="h-4 w-4" /> },
 35 |   { id: "entertainment", name: "Entertainment", icon: <HeartIcon className="h-4 w-4" /> },
 36 |   { id: "servers", name: "Servers", icon: <ServerIcon className="h-4 w-4" /> },
 37 |   { id: "secure", name: "Secure", icon: <LockIcon className="h-4 w-4" /> },
 38 | ];
 39 | 
 40 | const PasswordCategories: React.FC<PasswordCategoryProps> = ({
 41 |   onSelectCategory,
 42 |   selectedCategory,
 43 | }) => {
 44 |   const [isCustomOpen, setIsCustomOpen] = useState(false);
 45 |   const [customCategory, setCustomCategory] = useState("");
 46 |   const [popoverOpen, setPopoverOpen] = useState(false);
 47 | 
 48 |   const handleCustomCategory = () => {
 49 |     if (customCategory.trim()) {
 50 |       onSelectCategory(customCategory.trim());
 51 |       setCustomCategory("");
 52 |       setIsCustomOpen(false);
 53 |       setPopoverOpen(false);
 54 |       toast.success(`Custom category "${customCategory}" set`);
 55 |     } else {
 56 |       toast.error("Please enter a category name");
 57 |     }
 58 |   };
 59 | 
 60 |   const getCategoryName = (id: string) => {
 61 |     const category = categories.find(c => c.id === id);
 62 |     return category ? category.name : id;
 63 |   };
 64 | 
 65 |   const handleCategorySelect = (categoryId: string) => {
 66 |     onSelectCategory(categoryId);
 67 |     setPopoverOpen(false);
 68 |   };
 69 | 
 70 |   return (
 71 |     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
 72 |       <PopoverTrigger asChild>
 73 |         <Button variant="outline" size="sm" className="h-9 truncate max-w-[180px]">
 74 |           <FolderIcon className="h-4 w-4 mr-2 flex-shrink-0" />
 75 |           <span className="truncate">
 76 |             {selectedCategory 
 77 |               ? getCategoryName(selectedCategory)
 78 |               : "Category"}
 79 |           </span>
 80 |         </Button>
 81 |       </PopoverTrigger>
 82 |       <PopoverContent className="w-64 p-2" side="top">
 83 |         <div className="grid grid-cols-2 gap-1">
 84 |           {categories.map((category) => (
 85 |             <Button
 86 |               key={category.id}
 87 |               variant={selectedCategory === category.id ? "default" : "ghost"}
 88 |               size="sm"
 89 |               className="justify-start h-9 px-2"
 90 |               onClick={() => handleCategorySelect(category.id)}
 91 |             >
 92 |               <span className="mr-2 flex-shrink-0">{category.icon}</span>
 93 |               <span className="text-xs truncate">{category.name}</span>
 94 |             </Button>
 95 |           ))}
 96 |           <Button
 97 |             variant="ghost"
 98 |             size="sm"
 99 |             className="justify-start h-9 px-2 col-span-2"
100 |             onClick={() => setIsCustomOpen(!isCustomOpen)}
101 |           >
102 |             <PlusIcon className="h-4 w-4 mr-2 flex-shrink-0" />
103 |             <span className="text-xs">Custom Category</span>
104 |           </Button>
105 |           {isCustomOpen && (
106 |             <div className="col-span-2 flex gap-1 mt-1">
107 |               <div className="flex-1">
108 |                 <Input
109 |                   type="text"
110 |                   placeholder="Enter category name"
111 |                   value={customCategory}
112 |                   onChange={(e) => setCustomCategory(e.target.value)}
113 |                   className="h-9 text-xs"
114 |                   onKeyDown={(e) => e.key === 'Enter' && handleCustomCategory()}
115 |                 />
116 |               </div>
117 |               <Button
118 |                 size="sm"
119 |                 className="h-9 flex-shrink-0"
120 |                 onClick={handleCustomCategory}
121 |               >
122 |                 Add
123 |               </Button>
124 |             </div>
125 |           )}
126 |         </div>
127 |       </PopoverContent>
128 |     </Popover>
129 |   );
130 | };
131 | 
132 | export default PasswordCategories;
133 |

--------------------------------------------------------------------------------
/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/TwoFactorGenerator.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Button } from "@/components/ui/button";
  3 | import { Input } from "@/components/ui/input";
  4 | import { Label } from "@/components/ui/label";
  5 | import {
  6 |   Dialog,
  7 |   DialogContent,
  8 |   DialogHeader,
  9 |   DialogTitle,
 10 |   DialogTrigger,
 11 | } from "@/components/ui/dialog";
 12 | import {
 13 |   InputOTP,
 14 |   InputOTPGroup,
 15 |   InputOTPSlot,
 16 | } from "@/components/ui/input-otp";
 17 | import { Shield, Clock3 } from "lucide-react";
 18 | import { toast } from "sonner";
 19 | 
 20 | const TwoFactorGenerator = () => {
 21 |   const [code, setCode] = useState("000000");
 22 |   const [timeLeft, setTimeLeft] = useState(30);
 23 |   const [secretKey, setSecretKey] = useState("");
 24 |   const [isOpen, setIsOpen] = useState(false);
 25 | 
 26 |   useEffect(() => {
 27 |     if (!isOpen) return;
 28 |     
 29 |     // Generate a new code initially
 30 |     generateNewCode();
 31 |     
 32 |     // Set a timer to count down
 33 |     const timer = setInterval(() => {
 34 |       setTimeLeft((prev) => {
 35 |         if (prev <= 1) {
 36 |           generateNewCode();
 37 |           return 30;
 38 |         }
 39 |         return prev - 1;
 40 |       });
 41 |     }, 1000);
 42 |     
 43 |     return () => clearInterval(timer);
 44 |   }, [isOpen]);
 45 |   
 46 |   const generateNewCode = () => {
 47 |     // In a real app, this would use a proper TOTP algorithm with the secret key
 48 |     // This is just a simple example that generates a random 6-digit code
 49 |     const newCode = Math.floor(100000 + Math.random() * 900000).toString();
 50 |     setCode(newCode);
 51 |   };
 52 |   
 53 |   const handleCreateKey = () => {
 54 |     // In a real app, this would generate a proper secret key for TOTP
 55 |     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
 56 |     let key = "";
 57 |     for (let i = 0; i < 16; i++) {
 58 |       key += chars.charAt(Math.floor(Math.random() * chars.length));
 59 |     }
 60 |     setSecretKey(key);
 61 |     toast.success("New 2FA key generated");
 62 |   };
 63 |   
 64 |   return (
 65 |     <Dialog open={isOpen} onOpenChange={setIsOpen}>
 66 |       <DialogTrigger asChild>
 67 |         <Button variant="outline" size="sm" className="h-9">
 68 |           <Shield className="h-4 w-4 mr-2" />
 69 |           2FA Code
 70 |         </Button>
 71 |       </DialogTrigger>
 72 |       <DialogContent className="sm:max-w-md">
 73 |         <DialogHeader>
 74 |           <DialogTitle className="flex items-center gap-2">
 75 |             <Shield className="h-5 w-5" />
 76 |             Two-Factor Authentication
 77 |           </DialogTitle>
 78 |         </DialogHeader>
 79 |         
 80 |         <div className="space-y-6 py-4">
 81 |           <div className="space-y-2">
 82 |             <Label htmlFor="secret-key">Secret Key</Label>
 83 |             <div className="flex gap-2">
 84 |               <Input
 85 |                 id="secret-key"
 86 |                 value={secretKey}
 87 |                 onChange={(e) => setSecretKey(e.target.value)}
 88 |                 placeholder="Enter or generate a secret key"
 89 |                 className="font-mono"
 90 |               />
 91 |               <Button onClick={handleCreateKey} type="button" size="sm">
 92 |                 Generate
 93 |               </Button>
 94 |             </div>
 95 |             <p className="text-xs text-muted-foreground mt-1">
 96 |               In a real 2FA app, you would scan a QR code or enter this key
 97 |             </p>
 98 |           </div>
 99 |           
100 |           {secretKey && (
101 |             <>
102 |               <div className="space-y-2">
103 |                 <div className="flex justify-between items-center">
104 |                   <Label>Current Code</Label>
105 |                   <div className="flex items-center text-xs text-muted-foreground">
106 |                     <Clock3 className="h-3 w-3 mr-1" />
107 |                     <span>{timeLeft}s</span>
108 |                   </div>
109 |                 </div>
110 |                 
111 |                 <div className="flex justify-center py-4">
112 |                   <InputOTP maxLength={6} value={code} readOnly>
113 |                     <InputOTPGroup>
114 |                       {code.split('').map((_, index) => (
115 |                         <InputOTPSlot key={index} index={index} />
116 |                       ))}
117 |                     </InputOTPGroup>
118 |                   </InputOTP>
119 |                 </div>
120 |                 
121 |                 <div className="w-full bg-secondary h-1 rounded-full overflow-hidden">
122 |                   <div 
123 |                     className="bg-primary h-1 transition-all duration-1000 ease-linear"
124 |                     style={{ width: `${(timeLeft / 30) * 100}%` }}
125 |                   ></div>
126 |                 </div>
127 |               </div>
128 |               
129 |               <p className="text-xs text-muted-foreground">
130 |                 This is a simplified demonstration. In a real application, the code would be generated using the TOTP algorithm.
131 |               </p>
132 |             </>
133 |           )}
134 |         </div>
135 |       </DialogContent>
136 |     </Dialog>
137 |   );
138 | };
139 | 
140 | export default TwoFactorGenerator;
141 |

--------------------------------------------------------------------------------
/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 "@/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/PasswordExpiryTimer.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState, useEffect } from "react";
  3 | import {
  4 |   Popover,
  5 |   PopoverContent,
  6 |   PopoverTrigger,
  7 | } from "@/components/ui/popover";
  8 | import { Button } from "@/components/ui/button";
  9 | import { Clock } from "lucide-react";
 10 | import { Label } from "@/components/ui/label";
 11 | import { Input } from "@/components/ui/input";
 12 | import { Slider } from "@/components/ui/slider";
 13 | import { Separator } from "@/components/ui/separator";
 14 | import { Badge } from "@/components/ui/badge";
 15 | import { toast } from "sonner";
 16 | 
 17 | interface PasswordExpiryTimerProps {
 18 |   password: string;
 19 |   onPasswordExpiry: () => void;
 20 | }
 21 | 
 22 | const PasswordExpiryTimer = ({ password, onPasswordExpiry }: PasswordExpiryTimerProps) => {
 23 |   const [expiryMinutes, setExpiryMinutes] = useState(5);
 24 |   const [isTimerActive, setIsTimerActive] = useState(false);
 25 |   const [remainingTime, setRemainingTime] = useState(0);
 26 |   const [popoverOpen, setPopoverOpen] = useState(false);
 27 | 
 28 |   useEffect(() => {
 29 |     let timer: NodeJS.Timeout;
 30 | 
 31 |     if (isTimerActive && remainingTime > 0) {
 32 |       timer = setInterval(() => {
 33 |         setRemainingTime((prev) => {
 34 |           const newTime = prev - 1;
 35 |           if (newTime <= 0) {
 36 |             clearInterval(timer);
 37 |             setIsTimerActive(false);
 38 |             onPasswordExpiry();
 39 |             toast.info("Password has expired and been cleared");
 40 |           }
 41 |           return newTime;
 42 |         });
 43 |       }, 1000);
 44 |     }
 45 | 
 46 |     return () => {
 47 |       if (timer) clearInterval(timer);
 48 |     };
 49 |   }, [isTimerActive, remainingTime, onPasswordExpiry]);
 50 | 
 51 |   const formatTime = (seconds: number): string => {
 52 |     const mins = Math.floor(seconds / 60);
 53 |     const secs = seconds % 60;
 54 |     return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 55 |   };
 56 | 
 57 |   const startTimer = () => {
 58 |     if (!password) {
 59 |       toast.error("Generate a password first!");
 60 |       return;
 61 |     }
 62 |     
 63 |     setRemainingTime(expiryMinutes * 60);
 64 |     setIsTimerActive(true);
 65 |     setPopoverOpen(false);
 66 |     toast.success(`Password will expire in ${expiryMinutes} ${expiryMinutes === 1 ? 'minute' : 'minutes'}`);
 67 |   };
 68 | 
 69 |   const stopTimer = () => {
 70 |     setIsTimerActive(false);
 71 |     setRemainingTime(0);
 72 |     toast.info("Password expiry timer cancelled");
 73 |   };
 74 | 
 75 |   return (
 76 |     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
 77 |       <PopoverTrigger asChild>
 78 |         <Button 
 79 |           variant="outline" 
 80 |           size="icon" 
 81 |           title="Set Expiry Timer"
 82 |           className="h-9 w-9 relative"
 83 |         >
 84 |           <Clock className="h-4 w-4" />
 85 |           {isTimerActive && (
 86 |             <Badge className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-[10px]">
 87 |               {formatTime(remainingTime).split(":")[0]}
 88 |             </Badge>
 89 |           )}
 90 |         </Button>
 91 |       </PopoverTrigger>
 92 |       <PopoverContent className="w-80" align="end">
 93 |         <div className="space-y-4">
 94 |           <h4 className="font-medium text-sm">Password Expiry Timer</h4>
 95 |           <p className="text-xs text-muted-foreground">
 96 |             Set a timer for this password to be automatically cleared
 97 |           </p>
 98 |           
 99 |           {isTimerActive ? (
100 |             <div className="space-y-4">
101 |               <div className="text-center">
102 |                 <p className="text-xs text-muted-foreground">Time remaining:</p>
103 |                 <p className="text-2xl font-mono font-bold">{formatTime(remainingTime)}</p>
104 |               </div>
105 |               <Button 
106 |                 variant="destructive" 
107 |                 size="sm" 
108 |                 className="w-full" 
109 |                 onClick={stopTimer}
110 |               >
111 |                 Cancel Timer
112 |               </Button>
113 |             </div>
114 |           ) : (
115 |             <div className="space-y-4">
116 |               <div className="space-y-2">
117 |                 <div className="flex justify-between">
118 |                   <Label htmlFor="expiry-minutes">Minutes until expiry</Label>
119 |                   <span className="text-xs font-mono">{expiryMinutes} min</span>
120 |                 </div>
121 |                 <Slider
122 |                   id="expiry-minutes"
123 |                   min={1}
124 |                   max={60}
125 |                   step={1}
126 |                   value={[expiryMinutes]}
127 |                   onValueChange={(value) => setExpiryMinutes(value[0])}
128 |                 />
129 |               </div>
130 |               
131 |               <Separator />
132 |               
133 |               <div className="flex flex-col gap-2">
134 |                 <Button 
135 |                   variant="default" 
136 |                   size="sm" 
137 |                   onClick={startTimer}
138 |                 >
139 |                   Start Timer
140 |                 </Button>
141 |               </div>
142 |             </div>
143 |           )}
144 |         </div>
145 |       </PopoverContent>
146 |     </Popover>
147 |   );
148 | };
149 | 
150 | export default PasswordExpiryTimer;
151 |

--------------------------------------------------------------------------------
/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 "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/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 | interface CommandDialogProps extends 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 data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]: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 "@/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 |

--------------------------------------------------------------------------------
/test-extension.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | # Script to help test the CyberKeyGen browser extension
  3 | # This script will build the extension and provide instructions for loading it in different browsers
  4 | 
  5 | echo "🔒 CyberKeyGen Extension Testing Helper 🔒"
  6 | echo "=========================================="
  7 | echo ""
  8 | 
  9 | # Check if we're in the right directory
 10 | if [ ! -d "extension" ]; then
 11 |   echo "❌ Error: Please run this script from the root directory of the CyberShield-Password-Generator repository."
 12 |   exit 1
 13 | fi
 14 | 
 15 | # Function to check if a command is available
 16 | check_command() {
 17 |   if ! command -v $1 &> /dev/null; then
 18 |     echo "❌ $1 not found. Please install it to continue."
 19 |     return 1
 20 |   fi
 21 |   return 0
 22 | }
 23 | 
 24 | # Build the extension
 25 | echo "📦 Building extension..."
 26 | npm run build:extension
 27 | 
 28 | if [ $? -ne 0 ]; then
 29 |   echo "❌ Build failed. Please check for errors and try again."
 30 |   exit 1
 31 | fi
 32 | 
 33 | echo "✅ Extension built successfully!"
 34 | echo "📁 Extension package available at: $(pwd)/dist/CyberKeyGen_extension.zip"
 35 | echo ""
 36 | 
 37 | # Detect available browsers
 38 | echo "🔍 Detecting available browsers..."
 39 | browsers=()
 40 | 
 41 | if check_command "open"; then
 42 |   echo "🍎 macOS detected"
 43 |   
 44 |   # Check for Chrome
 45 |   if [ -d "/Applications/Google Chrome.app" ]; then
 46 |     echo "✅ Google Chrome detected"
 47 |     browsers+=("chrome")
 48 |   fi
 49 |   
 50 |   # Check for Edge
 51 |   if [ -d "/Applications/Microsoft Edge.app" ]; then
 52 |     echo "✅ Microsoft Edge detected"
 53 |     browsers+=("edge")
 54 |   fi
 55 |   
 56 |   # Check for Firefox
 57 |   if [ -d "/Applications/Firefox.app" ]; then
 58 |     echo "✅ Firefox detected"
 59 |     browsers+=("firefox")
 60 |   fi
 61 |   
 62 |   # Check for Safari
 63 |   if [ -d "/Applications/Safari.app" ]; then
 64 |     echo "⚠️ Safari detected, but requires additional setup for extension development"
 65 |     browsers+=("safari")
 66 |   fi
 67 |   
 68 | elif check_command "xdg-open"; then
 69 |   echo "🐧 Linux detected"
 70 |   
 71 |   # Check for Chrome
 72 |   if check_command "google-chrome"; then
 73 |     echo "✅ Google Chrome detected"
 74 |     browsers+=("chrome")
 75 |   fi
 76 |   
 77 |   # Check for Edge
 78 |   if check_command "microsoft-edge"; then
 79 |     echo "✅ Microsoft Edge detected"
 80 |     browsers+=("edge")
 81 |   fi
 82 |   
 83 |   # Check for Firefox
 84 |   if check_command "firefox"; then
 85 |     echo "✅ Firefox detected"
 86 |     browsers+=("firefox")
 87 |   fi
 88 |   
 89 | elif command -v "start" &> /dev/null; then
 90 |   echo "🪟 Windows detected"
 91 |   
 92 |   # Note: On Windows, we can't easily check for installed browsers
 93 |   # So we'll just provide instructions for all browsers
 94 |   echo "Assuming Chrome, Edge, and Firefox are available"
 95 |   browsers+=("chrome" "edge" "firefox")
 96 | fi
 97 | 
 98 | echo ""
 99 | echo "📋 Testing Instructions"
100 | echo "======================="
101 | 
102 | if [[ " ${browsers[*]} " =~ " chrome " ]]; then
103 |   echo ""
104 |   echo "🌐 Google Chrome:"
105 |   echo "1. Open Chrome"
106 |   echo "2. Navigate to chrome://extensions/"
107 |   echo "3. Enable Developer mode (toggle in top-right corner)"
108 |   echo "4. Click 'Load unpacked'"
109 |   echo "5. Select the 'extension' folder in this repository"
110 |   
111 |   if [[ "$OSTYPE" == "darwin"* ]]; then
112 |     echo ""
113 |     echo "To open Chrome extensions page directly:"
114 |     echo "open -a 'Google Chrome' 'chrome://extensions/'"
115 |   elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
116 |     echo ""
117 |     echo "To open Chrome extensions page directly:"
118 |     echo "google-chrome 'chrome://extensions/'"
119 |   fi
120 | fi
121 | 
122 | if [[ " ${browsers[*]} " =~ " edge " ]]; then
123 |   echo ""
124 |   echo "🌐 Microsoft Edge:"
125 |   echo "1. Open Edge"
126 |   echo "2. Navigate to edge://extensions/"
127 |   echo "3. Enable Developer mode (toggle in left sidebar)"
128 |   echo "4. Click 'Load unpacked'"
129 |   echo "5. Select the 'extension' folder in this repository"
130 |   
131 |   if [[ "$OSTYPE" == "darwin"* ]]; then
132 |     echo ""
133 |     echo "To open Edge extensions page directly:"
134 |     echo "open -a 'Microsoft Edge' 'edge://extensions/'"
135 |   elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
136 |     echo ""
137 |     echo "To open Edge extensions page directly:"
138 |     echo "microsoft-edge 'edge://extensions/'"
139 |   fi
140 | fi
141 | 
142 | if [[ " ${browsers[*]} " =~ " firefox " ]]; then
143 |   echo ""
144 |   echo "🌐 Firefox:"
145 |   echo "1. Open Firefox"
146 |   echo "2. Navigate to about:debugging#/runtime/this-firefox"
147 |   echo "3. Click 'Load Temporary Add-on...'"
148 |   echo "4. Select the manifest.json file in the 'extension' folder"
149 |   
150 |   if [[ "$OSTYPE" == "darwin"* ]]; then
151 |     echo ""
152 |     echo "To open Firefox debugging page directly:"
153 |     echo "open -a Firefox 'about:debugging#/runtime/this-firefox'"
154 |   elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
155 |     echo ""
156 |     echo "To open Firefox debugging page directly:"
157 |     echo "firefox 'about:debugging#/runtime/this-firefox'"
158 |   fi
159 | fi
160 | 
161 | if [[ " ${browsers[*]} " =~ " safari " ]]; then
162 |   echo ""
163 |   echo "🌐 Safari:"
164 |   echo "Safari requires additional setup for extension development:"
165 |   echo "1. Enable Developer menu in Safari preferences"
166 |   echo "2. Use 'Develop > Show Extension Builder'"
167 |   echo "3. Click the '+' button and select 'Add Extension...'"
168 |   echo "4. Navigate to the 'extension' folder"
169 |   echo "Note: Safari may require additional packaging to work correctly"
170 | fi
171 | 
172 | echo ""
173 | echo "📝 Testing Checklist:"
174 | echo "- Verify that all password generation methods work"
175 | echo "- Test form filling functionality on sample login pages"
176 | echo "- Verify keyboard shortcuts (Alt+Shift+G, Alt+P)"
177 | echo "- Test context menu integration"
178 | echo "- Check both light and dark themes"
179 | 
180 | echo ""
181 | echo "🧪 Happy testing! 🧪"
182 |

--------------------------------------------------------------------------------
/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 "@/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/PasswordSharing.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState } from "react";
  3 | import {
  4 |   Dialog,
  5 |   DialogContent,
  6 |   DialogHeader,
  7 |   DialogTitle,
  8 |   DialogTrigger,
  9 | } from "@/components/ui/dialog";
 10 | import { Button } from "@/components/ui/button";
 11 | import { Input } from "@/components/ui/input";
 12 | import { Textarea } from "@/components/ui/textarea";
 13 | import { Label } from "@/components/ui/label";
 14 | import { Share2, Copy, CheckIcon } from "lucide-react";
 15 | import { toast } from "sonner";
 16 | import { Switch } from "@/components/ui/switch";
 17 | 
 18 | interface PasswordSharingProps {
 19 |   password: string;
 20 |   strength: "weak" | "moderate" | "strong" | "very-strong";
 21 | }
 22 | 
 23 | const PasswordSharing: React.FC<PasswordSharingProps> = ({ password, strength }) => {
 24 |   const [includePassword, setIncludePassword] = useState(true);
 25 |   const [includeStrength, setIncludeStrength] = useState(true);
 26 |   const [expirationHours, setExpirationHours] = useState(24);
 27 |   const [copied, setCopied] = useState(false);
 28 |   const [shareLink, setShareLink] = useState("");
 29 |   
 30 |   const generateShareLink = () => {
 31 |     if (!password) {
 32 |       toast.error("Generate a password first!");
 33 |       return;
 34 |     }
 35 |     
 36 |     // In a real app, this would create a secure link on a backend
 37 |     // Here we'll create a mock link with encoded data in the fragment
 38 |     const data = {
 39 |       p: includePassword ? password : undefined,
 40 |       s: includeStrength ? strength : undefined,
 41 |       e: new Date(Date.now() + expirationHours * 60 * 60 * 1000).toISOString(),
 42 |     };
 43 |     
 44 |     const encodedData = btoa(JSON.stringify(data));
 45 |     const link = `${window.location.origin}/shared#${encodedData}`;
 46 |     
 47 |     setShareLink(link);
 48 |     toast.success("Share link generated!");
 49 |   };
 50 |   
 51 |   const copyShareLink = () => {
 52 |     if (!shareLink) {
 53 |       generateShareLink();
 54 |       setTimeout(() => {
 55 |         navigator.clipboard.writeText(shareLink);
 56 |         setCopied(true);
 57 |         toast.success("Link copied to clipboard!");
 58 |         setTimeout(() => setCopied(false), 3000);
 59 |       }, 100);
 60 |     } else {
 61 |       navigator.clipboard.writeText(shareLink);
 62 |       setCopied(true);
 63 |       toast.success("Link copied to clipboard!");
 64 |       setTimeout(() => setCopied(false), 3000);
 65 |     }
 66 |   };
 67 |   
 68 |   return (
 69 |     <Dialog>
 70 |       <DialogTrigger asChild>
 71 |         <Button variant="outline" size="sm" className="h-9">
 72 |           <Share2 className="h-4 w-4 mr-2" />
 73 |           Share Password
 74 |         </Button>
 75 |       </DialogTrigger>
 76 |       <DialogContent className="sm:max-w-md">
 77 |         <DialogHeader>
 78 |           <DialogTitle className="flex items-center gap-2">
 79 |             <Share2 className="h-5 w-5" />
 80 |             Share Password Securely
 81 |           </DialogTitle>
 82 |         </DialogHeader>
 83 |         
 84 |         <div className="space-y-6 py-4">
 85 |           <p className="text-sm text-muted-foreground">
 86 |             Generate a secure link to share your password with someone. The link will expire after the specified time.
 87 |           </p>
 88 |           
 89 |           <div className="space-y-4">
 90 |             <div className="flex items-center justify-between">
 91 |               <Label htmlFor="include-password" className="text-sm cursor-pointer">
 92 |                 Include password in share
 93 |               </Label>
 94 |               <Switch
 95 |                 id="include-password"
 96 |                 checked={includePassword}
 97 |                 onCheckedChange={setIncludePassword}
 98 |               />
 99 |             </div>
100 |             
101 |             <div className="flex items-center justify-between">
102 |               <Label htmlFor="include-strength" className="text-sm cursor-pointer">
103 |                 Include strength analysis
104 |               </Label>
105 |               <Switch
106 |                 id="include-strength"
107 |                 checked={includeStrength}
108 |                 onCheckedChange={setIncludeStrength}
109 |               />
110 |             </div>
111 |             
112 |             <div className="space-y-2">
113 |               <Label htmlFor="expiration" className="text-sm">
114 |                 Link expires after (hours)
115 |               </Label>
116 |               <Input
117 |                 id="expiration"
118 |                 type="number"
119 |                 min="1"
120 |                 max="720"
121 |                 value={expirationHours}
122 |                 onChange={(e) => setExpirationHours(parseInt(e.target.value) || 24)}
123 |               />
124 |             </div>
125 |             
126 |             {shareLink && (
127 |               <div className="space-y-2">
128 |                 <Label htmlFor="share-link" className="text-sm">
129 |                   Share Link
130 |                 </Label>
131 |                 <div className="flex gap-2">
132 |                   <Textarea
133 |                     id="share-link"
134 |                     readOnly
135 |                     value={shareLink}
136 |                     className="font-mono text-xs h-20"
137 |                   />
138 |                   <Button
139 |                     type="button"
140 |                     size="icon"
141 |                     variant="outline"
142 |                     onClick={copyShareLink}
143 |                     className="h-20"
144 |                   >
145 |                     {copied ? (
146 |                       <CheckIcon className="h-4 w-4 text-green-500" />
147 |                     ) : (
148 |                       <Copy className="h-4 w-4" />
149 |                     )}
150 |                   </Button>
151 |                 </div>
152 |                 <p className="text-xs text-muted-foreground">
153 |                   This link will expire on {new Date(Date.now() + expirationHours * 60 * 60 * 1000).toLocaleString()}
154 |                 </p>
155 |               </div>
156 |             )}
157 |             
158 |             <div className="flex justify-end space-x-2">
159 |               <Button onClick={generateShareLink}>
160 |                 Generate Share Link
161 |               </Button>
162 |             </div>
163 |           </div>
164 |           
165 |           <p className="text-xs text-muted-foreground">
166 |             Note: In a real application, the sharing would be handled via a secure server. This is a demo implementation.
167 |           </p>
168 |         </div>
169 |       </DialogContent>
170 |     </Dialog>
171 |   );
172 | };
173 | 
174 | export default PasswordSharing;
175 |

--------------------------------------------------------------------------------
/src/components/PasswordExportImport.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState } from "react";
  3 | import { Button } from "@/components/ui/button";
  4 | import ResponsiveIconButton from "@/components/ResponsiveIconButton";
  5 | import {
  6 |   Dialog,
  7 |   DialogContent,
  8 |   DialogDescription,
  9 |   DialogFooter,
 10 |   DialogHeader,
 11 |   DialogTitle,
 12 |   DialogTrigger,
 13 | } from "@/components/ui/dialog";
 14 | import { 
 15 |   Download, 
 16 |   Upload, 
 17 |   FileJson,
 18 |   CheckIcon
 19 | } from "lucide-react";
 20 | import { toast } from "sonner";
 21 | import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 22 | import { Label } from "@/components/ui/label";
 23 | import { Textarea } from "@/components/ui/textarea";
 24 | import { useIsMobile } from "@/hooks/use-mobile";
 25 | 
 26 | interface PasswordExportImportProps {
 27 |   passwordHistory: Array<{
 28 |     password: string;
 29 |     timestamp: Date;
 30 |     strength: "weak" | "moderate" | "strong" | "very-strong";
 31 |     type: "random" | "leet" | "pin";
 32 |     category?: string;
 33 |   }>;
 34 |   onImport: (passwords: Array<{
 35 |     password: string;
 36 |     timestamp: Date;
 37 |     strength: "weak" | "moderate" | "strong" | "very-strong";
 38 |     type: "random" | "leet" | "pin";
 39 |     category?: string;
 40 |   }>) => void;
 41 | }
 42 | 
 43 | const PasswordExportImport: React.FC<PasswordExportImportProps> = ({
 44 |   passwordHistory,
 45 |   onImport,
 46 | }) => {
 47 |   const [importData, setImportData] = useState("");
 48 |   const [downloadUrl, setDownloadUrl] = useState("");
 49 |   const [activeTab, setActiveTab] = useState("export");
 50 |   const isMobile = useIsMobile();
 51 |   
 52 |   const handleExport = () => {
 53 |     if (passwordHistory.length === 0) {
 54 |       toast.error("No passwords to export");
 55 |       return;
 56 |     }
 57 |     
 58 |     const exportData = JSON.stringify(passwordHistory, null, 2);
 59 |     const blob = new Blob([exportData], { type: "application/json" });
 60 |     const url = URL.createObjectURL(blob);
 61 |     
 62 |     setDownloadUrl(url);
 63 |     
 64 |     const a = document.createElement("a");
 65 |     a.href = url;
 66 |     a.download = `password-export-${new Date().toISOString().slice(0, 10)}.json`;
 67 |     document.body.appendChild(a);
 68 |     a.click();
 69 |     document.body.removeChild(a);
 70 |     
 71 |     toast.success("Passwords exported successfully");
 72 |   };
 73 |   
 74 |   const handleImport = () => {
 75 |     if (!importData.trim()) {
 76 |       toast.error("Please paste exported password data");
 77 |       return;
 78 |     }
 79 |     
 80 |     try {
 81 |       const parsedData = JSON.parse(importData);
 82 |       
 83 |       if (!Array.isArray(parsedData)) {
 84 |         toast.error("Invalid import format. Expected an array.");
 85 |         return;
 86 |       }
 87 |       
 88 |       const validatedData = parsedData.map(item => ({
 89 |         password: item.password || "",
 90 |         timestamp: new Date(item.timestamp || Date.now()),
 91 |         strength: item.strength || "moderate",
 92 |         type: item.type || "random",
 93 |       }));
 94 |       
 95 |       onImport(validatedData);
 96 |       setImportData("");
 97 |       toast.success(`${validatedData.length} passwords imported successfully`);
 98 |     } catch (error) {
 99 |       console.error("Import error:", error);
100 |       toast.error("Invalid JSON format. Please check your data.");
101 |     }
102 |   };
103 |   
104 |   return (
105 |     <Dialog>
106 |       <DialogTrigger asChild>
107 |         <ResponsiveIconButton 
108 |           variant="outline" 
109 |           size="sm" 
110 |           icon={<FileJson className="h-4 w-4" />}
111 |           text="Export/Import" 
112 |           className="h-9"
113 |         />
114 |       </DialogTrigger>
115 |       <DialogContent className="sm:max-w-md">
116 |         <DialogHeader>
117 |           <DialogTitle className="flex items-center gap-2">
118 |             <FileJson className="h-5 w-5" />
119 |             Export/Import Passwords
120 |           </DialogTitle>
121 |         </DialogHeader>
122 |         
123 |         <Tabs defaultValue="export" value={activeTab} onValueChange={setActiveTab}>
124 |           <TabsList className="grid w-full grid-cols-2">
125 |             <TabsTrigger value="export">Export</TabsTrigger>
126 |             <TabsTrigger value="import">Import</TabsTrigger>
127 |           </TabsList>
128 |           
129 |           <TabsContent value="export" className="space-y-4 py-4">
130 |             <p className="text-sm text-muted-foreground">
131 |               Export your password history as a JSON file that you can save securely or import later.
132 |             </p>
133 |             
134 |             {passwordHistory.length > 0 ? (
135 |               <div className="space-y-4">
136 |                 <div className="p-3 border rounded-md bg-secondary/20">
137 |                   <p className="text-sm">
138 |                     {passwordHistory.length} passwords available for export
139 |                   </p>
140 |                 </div>
141 |                 
142 |                 <div className="flex justify-end">
143 |                   <Button onClick={handleExport}>
144 |                     <Download className="h-4 w-4 mr-2" />
145 |                     Export Passwords
146 |                   </Button>
147 |                 </div>
148 |               </div>
149 |             ) : (
150 |               <div className="p-6 text-center">
151 |                 <p className="text-muted-foreground">
152 |                   No passwords in history to export
153 |                 </p>
154 |               </div>
155 |             )}
156 |           </TabsContent>
157 |           
158 |           <TabsContent value="import" className="space-y-4 py-4">
159 |             <p className="text-sm text-muted-foreground">
160 |               Import passwords from a previously exported JSON file.
161 |             </p>
162 |             
163 |             <div className="space-y-2">
164 |               <Label htmlFor="import-data">Paste exported JSON data</Label>
165 |               <Textarea
166 |                 id="import-data"
167 |                 value={importData}
168 |                 onChange={(e) => setImportData(e.target.value)}
169 |                 placeholder='[{"password": "example", "timestamp": "2023-01-01T00:00:00.000Z", "strength": "strong", "type": "random"}]'
170 |                 className="font-mono h-32 text-xs"
171 |               />
172 |             </div>
173 |             
174 |             <div className="flex justify-end">
175 |               <Button onClick={handleImport}>
176 |                 <Upload className="h-4 w-4 mr-2" />
177 |                 Import Passwords
178 |               </Button>
179 |             </div>
180 |             
181 |             <p className="text-xs text-muted-foreground">
182 |               Note: Importing will add the passwords to your existing history without duplicating.
183 |             </p>
184 |           </TabsContent>
185 |         </Tabs>
186 |       </DialogContent>
187 |     </Dialog>
188 |   );
189 | };
190 | 
191 | export default PasswordExportImport;
192 |

--------------------------------------------------------------------------------
/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 "@/lib/utils"
  8 | import { Button } from "@/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 |

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