{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "password-generator-widget", "title": "Password Generator Widget", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/password-generator-widget/PasswordGeneratorWidget.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n Clock,\n Copy,\n Dice5,\n Eye,\n EyeOff,\n Hash,\n History,\n KeyRound,\n Lock,\n RefreshCw,\n Shield,\n ShieldCheck,\n Sliders,\n Trash2,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\n// --- WORD LIST & CONSTANTS ---\nconst WORD_LIST = [\n 'anchor',\n 'apple',\n 'apron',\n 'arctic',\n 'arrow',\n 'atlas',\n 'autumn',\n 'bacon',\n 'badge',\n 'banner',\n 'beacon',\n 'blanket',\n 'breeze',\n 'bridge',\n 'cabin',\n 'cactus',\n 'camera',\n 'candle',\n 'canyon',\n 'carpet',\n 'castle',\n 'cedar',\n 'celestial',\n 'channel',\n 'cherry',\n 'chimney',\n 'cipher',\n 'circle',\n 'clay',\n 'cliff',\n 'clock',\n 'cloud',\n 'clover',\n 'cobalt',\n 'coffee',\n 'comet',\n 'compass',\n 'copper',\n 'coral',\n 'cosmos',\n 'crater',\n 'creek',\n 'crystal',\n 'curtain',\n 'delta',\n 'desert',\n 'diamond',\n 'dolphin',\n 'dragon',\n 'drift',\n 'eagle',\n 'earth',\n 'echo',\n 'eclipse',\n 'ember',\n 'emerald',\n 'engine',\n 'falcon',\n 'feather',\n 'fender',\n 'filter',\n 'flame',\n 'flask',\n 'forest',\n 'fossil',\n 'galaxy',\n 'garden',\n 'garlic',\n 'garnet',\n 'gem',\n 'glacier',\n 'glass',\n 'globe',\n 'granite',\n 'gravel',\n 'grove',\n 'harbor',\n 'haven',\n 'hawk',\n 'hazel',\n 'horizon',\n 'island',\n 'ivory',\n 'jungle',\n 'jupiter',\n 'kettle',\n 'lagoon',\n 'lantern',\n 'laser',\n 'lava',\n 'leaf',\n 'lemon',\n 'leopard',\n 'lighthouse',\n 'lightning',\n 'lotus',\n 'lunar',\n 'magnet',\n 'mango',\n 'maple',\n 'marble',\n 'matrix',\n 'meadow',\n 'meteor',\n 'mineral',\n 'mirror',\n 'monarch',\n 'moon',\n 'mosaic',\n 'mountain',\n 'nebula',\n 'nickel',\n 'oasis',\n 'ocean',\n 'olive',\n 'onyx',\n 'opal',\n 'orbit',\n 'orchid',\n 'oxygen',\n 'palace',\n 'panther',\n 'paradise',\n 'pebble',\n 'pelican',\n 'peacock',\n 'phoenix',\n 'pillar',\n 'planet',\n 'plasma',\n 'platinum',\n 'polar',\n 'prism',\n 'pulse',\n 'pyramid',\n 'quartz',\n 'quiver',\n 'radar',\n 'rainbow',\n 'raven',\n 'reef',\n 'ridge',\n 'ripple',\n 'river',\n 'rocket',\n 'ruby',\n 'safari',\n 'sail',\n 'sapphire',\n 'saturn',\n 'shadow',\n 'shield',\n 'sierra',\n 'silver',\n 'solstice',\n 'spark',\n 'sphere',\n 'spiral',\n 'spring',\n 'spruce',\n 'star',\n 'stone',\n 'summit',\n 'sunset',\n 'surge',\n 'timber',\n 'topaz',\n 'torch',\n 'trail',\n 'treasure',\n 'tundra',\n 'valley',\n 'vector',\n 'velvet',\n 'vessel',\n 'vintage',\n 'violet',\n 'vortex',\n 'voyage',\n 'vulcan',\n 'walnut',\n 'willow',\n 'wind',\n 'winter',\n 'zenith',\n 'zephyr',\n]\n\nconst UPPERCASE_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\nconst LOWERCASE_CHARS = 'abcdefghijklmnopqrstuvwxyz'\nconst NUMBER_CHARS = '0123456789'\nconst SYMBOL_CHARS = '!@#$%^&*()_+-=[]{}|;:,.<>?'\nconst AMBIGUOUS_CHARS = new Set(['l', '1', 'I', 'O', '0', 'o', '|', '`', \"'\", '\"', ',', ';'])\n\nexport interface HistoryItem {\n id: string\n secret: string\n mode: 'password' | 'passphrase' | 'pin'\n entropy: number\n strengthLabel: string\n createdAt: string\n}\n\nfunction getRandomInt(max: number): number {\n if (typeof window !== 'undefined' && window.crypto && window.crypto.getRandomValues) {\n const array = new Uint32Array(1)\n window.crypto.getRandomValues(array)\n return array[0] % max\n }\n return Math.floor(Math.random() * max)\n}\n\nexport function PasswordGeneratorWidget({ className }: { className?: string }) {\n // --- STATE ---\n const [mode, setMode] = React.useState<'password' | 'passphrase' | 'pin'>('password')\n const [passwordLength, setPasswordLength] = React.useState(20)\n const [includeUpper, setIncludeUpper] = React.useState(true)\n const [includeLower, setIncludeLower] = React.useState(true)\n const [includeNumbers, setIncludeNumbers] = React.useState(true)\n const [includeSymbols, setIncludeSymbols] = React.useState(true)\n const [avoidAmbiguous, setAvoidAmbiguous] = React.useState(true)\n\n // Passphrase state\n const [wordCount, setWordCount] = React.useState(5)\n const [separator, setSeparator] = React.useState('-')\n const [capitalizeWords, setCapitalizeWords] = React.useState(true)\n const [includeNumberInPassphrase, setIncludeNumberInPassphrase] = React.useState(true)\n\n // PIN state\n const [pinLength, setPinLength] = React.useState(6)\n const [avoidPinRepeats, setAvoidPinRepeats] = React.useState(true)\n\n // Output & UI state\n const [currentSecret, setCurrentSecret] = React.useState('')\n const [copied, setCopied] = React.useState(false)\n const [isSpinning, setIsSpinning] = React.useState(false)\n const [copiedHistoryId, setCopiedHistoryId] = React.useState(null)\n const [revealedHistoryIds, setRevealedHistoryIds] = React.useState>(new Set())\n\n // History state\n const [history, setHistory] = React.useState([\n {\n id: 'hist-1',\n secret: 'kX9#mQ4$vL2!pW8*jT7^',\n mode: 'password',\n entropy: 114,\n strengthLabel: 'Very Strong',\n createdAt: 'Just now',\n },\n {\n id: 'hist-2',\n secret: 'Celestial-Falcon-Lagoon-Timber-83',\n mode: 'passphrase',\n entropy: 48,\n strengthLabel: 'Fair',\n createdAt: '4m ago',\n },\n {\n id: 'hist-3',\n secret: '928401',\n mode: 'pin',\n entropy: 20,\n strengthLabel: 'Very Weak',\n createdAt: '12m ago',\n },\n ])\n\n // --- ENTROPY & STRENGTH METRICS ---\n const currentStrength = React.useMemo(() => {\n let entropy = 0\n if (mode === 'password') {\n let poolSize = 0\n if (includeUpper) poolSize += avoidAmbiguous ? 24 : 26\n if (includeLower) poolSize += avoidAmbiguous ? 24 : 26\n if (includeNumbers) poolSize += avoidAmbiguous ? 8 : 10\n if (includeSymbols) poolSize += avoidAmbiguous ? 26 : 28\n entropy = poolSize > 1 ? Math.round(passwordLength * Math.log2(poolSize)) : 0\n } else if (mode === 'passphrase') {\n entropy = wordCount * Math.log2(WORD_LIST.length)\n if (capitalizeWords) entropy += wordCount * 1\n if (includeNumberInPassphrase) entropy += Math.log2(90)\n entropy = Math.round(entropy)\n } else {\n entropy = Math.round(pinLength * Math.log2(10))\n }\n\n if (entropy < 30) {\n return {\n entropy,\n score: 1,\n label: 'Very Weak',\n crackTime: 'Instant (< 1 ms)',\n color: 'text-destructive',\n barClass: 'bg-destructive',\n }\n }\n if (entropy < 50) {\n return {\n entropy,\n score: 2,\n label: 'Weak',\n crackTime: 'A few minutes',\n color: 'text-orange-500',\n barClass: 'bg-orange-500',\n }\n }\n if (entropy < 70) {\n return {\n entropy,\n score: 3,\n label: 'Fair',\n crackTime: 'Several months',\n color: 'text-warning',\n barClass: 'bg-warning',\n }\n }\n if (entropy < 95) {\n return {\n entropy,\n score: 4,\n label: 'Strong',\n crackTime: 'Hundreds of years',\n color: 'text-success',\n barClass: 'bg-success',\n }\n }\n return {\n entropy,\n score: 4,\n label: 'Very Strong',\n crackTime: '100+ billion years',\n color: 'text-success',\n barClass: 'bg-success',\n }\n }, [\n mode,\n passwordLength,\n includeUpper,\n includeLower,\n includeNumbers,\n includeSymbols,\n avoidAmbiguous,\n wordCount,\n capitalizeWords,\n includeNumberInPassphrase,\n pinLength,\n ])\n\n // --- GENERATION FUNCTIONS ---\n const generatePassword = React.useCallback((): string => {\n let pool = ''\n const requiredChars: string[] = []\n\n const filterPool = (chars: string) => {\n if (!avoidAmbiguous) return chars\n return chars\n .split('')\n .filter((c) => !AMBIGUOUS_CHARS.has(c))\n .join('')\n }\n\n const uppers = filterPool(UPPERCASE_CHARS)\n const lowers = filterPool(LOWERCASE_CHARS)\n const numbers = filterPool(NUMBER_CHARS)\n const symbols = filterPool(SYMBOL_CHARS)\n\n if (includeUpper && uppers.length > 0) {\n pool += uppers\n requiredChars.push(uppers[getRandomInt(uppers.length)])\n }\n if (includeLower && lowers.length > 0) {\n pool += lowers\n requiredChars.push(lowers[getRandomInt(lowers.length)])\n }\n if (includeNumbers && numbers.length > 0) {\n pool += numbers\n requiredChars.push(numbers[getRandomInt(numbers.length)])\n }\n if (includeSymbols && symbols.length > 0) {\n pool += symbols\n requiredChars.push(symbols[getRandomInt(symbols.length)])\n }\n\n if (pool.length === 0) {\n pool = lowers.length > 0 ? lowers : 'abcdefghjkmnpqrstuvwxyz'\n requiredChars.push(pool[getRandomInt(pool.length)])\n }\n\n const result: string[] = [...requiredChars]\n for (let i = result.length; i < passwordLength; i++) {\n result.push(pool[getRandomInt(pool.length)])\n }\n\n // Fisher-Yates shuffle\n for (let i = result.length - 1; i > 0; i--) {\n const j = getRandomInt(i + 1)\n const temp = result[i]\n result[i] = result[j]\n result[j] = temp\n }\n\n return result.join('')\n }, [avoidAmbiguous, includeLower, includeNumbers, includeSymbols, includeUpper, passwordLength])\n\n const generatePassphrase = React.useCallback((): string => {\n const chosenWords: string[] = []\n for (let i = 0; i < wordCount; i++) {\n let word = WORD_LIST[getRandomInt(WORD_LIST.length)]\n if (capitalizeWords) {\n word = word.charAt(0).toUpperCase() + word.slice(1)\n }\n chosenWords.push(word)\n }\n\n if (includeNumberInPassphrase) {\n const num = getRandomInt(90) + 10 // 2-digit number (10-99)\n chosenWords.push(num.toString())\n }\n\n return chosenWords.join(separator)\n }, [capitalizeWords, includeNumberInPassphrase, separator, wordCount])\n\n const generatePin = React.useCallback((): string => {\n const digits: string[] = []\n for (let i = 0; i < pinLength; i++) {\n let nextDigit = getRandomInt(10).toString()\n if (avoidPinRepeats && digits.length > 0 && nextDigit === digits[digits.length - 1]) {\n nextDigit = ((parseInt(nextDigit, 10) + 1 + getRandomInt(8)) % 10).toString()\n }\n digits.push(nextDigit)\n }\n return digits.join('')\n }, [avoidPinRepeats, pinLength])\n\n const regenerateSecret = React.useCallback(\n (recordHistory = false) => {\n let secret = ''\n if (mode === 'password') {\n secret = generatePassword()\n } else if (mode === 'passphrase') {\n secret = generatePassphrase()\n } else {\n secret = generatePin()\n }\n\n setCurrentSecret(secret)\n\n if (recordHistory && secret) {\n const ent = currentStrength.entropy\n const item: HistoryItem = {\n id: `hist-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,\n secret,\n mode,\n entropy: ent,\n strengthLabel: currentStrength.label,\n createdAt: 'Just now',\n }\n setHistory((prev) => [item, ...prev.slice(0, 7)])\n }\n },\n [currentStrength.entropy, currentStrength.label, generatePassphrase, generatePassword, generatePin, mode],\n )\n\n const handleManualRegenerate = React.useCallback(() => {\n setIsSpinning(true)\n regenerateSecret(true)\n setTimeout(() => {\n setIsSpinning(false)\n }, 400)\n }, [regenerateSecret])\n\n // Ensure at least one character type stays active in password mode\n const handleUpperChange = (val: boolean) => {\n if (!val && !includeLower && !includeNumbers && !includeSymbols) return\n setIncludeUpper(val)\n }\n\n const handleLowerChange = (val: boolean) => {\n if (!val && !includeUpper && !includeNumbers && !includeSymbols) return\n setIncludeLower(val)\n }\n\n const handleNumbersChange = (val: boolean) => {\n if (!val && !includeUpper && !includeLower && !includeSymbols) return\n setIncludeNumbers(val)\n }\n\n const handleSymbolsChange = (val: boolean) => {\n if (!val && !includeUpper && !includeLower && !includeNumbers) return\n setIncludeSymbols(val)\n }\n\n // Reactive regeneration on parameter change\n React.useEffect(() => {\n regenerateSecret(false)\n }, [\n mode,\n passwordLength,\n includeUpper,\n includeLower,\n includeNumbers,\n includeSymbols,\n avoidAmbiguous,\n wordCount,\n separator,\n capitalizeWords,\n includeNumberInPassphrase,\n pinLength,\n avoidPinRepeats,\n ])\n\n // --- CHARACTER FORMATTING FOR SYNTAX HIGHLIGHTING ---\n const formattedCharacters = React.useMemo(() => {\n if (!currentSecret) return []\n return currentSecret.split('').map((char) => {\n let type: 'number' | 'symbol' | 'letter' | 'separator' = 'letter'\n if (/[0-9]/.test(char)) {\n type = 'number'\n } else if (/[-_. /]/.test(char)) {\n type = 'separator'\n } else if (/[^a-zA-Z0-9]/.test(char)) {\n type = 'symbol'\n }\n return { char, type }\n })\n }, [currentSecret])\n\n const formatItemCharacters = (text: string) => {\n return text.split('').map((char) => {\n let type: 'number' | 'symbol' | 'letter' | 'separator' = 'letter'\n if (/[0-9]/.test(char)) {\n type = 'number'\n } else if (/[-_. /]/.test(char)) {\n type = 'separator'\n } else if (/[^a-zA-Z0-9]/.test(char)) {\n type = 'symbol'\n }\n return { char, type }\n })\n }\n\n // --- CLIPBOARD ---\n const copySecret = async (text: string, isHistory = false, historyId = '') => {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(text)\n } else {\n const textarea = document.createElement('textarea')\n textarea.value = text\n document.body.appendChild(textarea)\n textarea.select()\n document.execCommand('copy')\n document.body.removeChild(textarea)\n }\n\n if (isHistory && historyId) {\n setCopiedHistoryId(historyId)\n setTimeout(() => {\n setCopiedHistoryId((prev) => (prev === historyId ? null : prev))\n }, 2000)\n } else {\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 2000)\n }\n } catch (err) {\n console.error('Failed to copy to clipboard', err)\n }\n }\n\n const toggleHistoryReveal = (id: string) => {\n setRevealedHistoryIds((prev) => {\n const next = new Set(prev)\n if (next.has(id)) {\n next.delete(id)\n } else {\n next.add(id)\n }\n return next\n })\n }\n\n const clearHistory = () => {\n setHistory([])\n }\n\n return (\n
\n {/* HERO: GENERATOR OUTPUT CARD */}\n \n \n
\n
\n
\n \n
\n
\n Generated Secret\n \n Client-side cryptographic output & entropy estimation\n \n
\n
\n
\n \n \n 100% Client-Side\n \n
\n
\n \n\n \n {/* Monospace Output Box */}\n
\n
\n {formattedCharacters.length > 0 ? (\n formattedCharacters.map((item, idx) => (\n \n {item.char}\n \n ))\n ) : (\n Generating secret...\n )}\n
\n\n {/* Quick Action Buttons */}\n
\n \n \n Regenerate\n \n\n copySecret(currentSecret)}\n >\n {copied ? : }\n {copied ? 'Copied!' : 'Copy'}\n \n
\n
\n\n {/* Entropy & Strength Meter */}\n
\n
\n
\n \n {currentStrength.label}\n {currentStrength.entropy}-bit entropy\n
\n
\n \n Crack time:\n {currentStrength.crackTime}\n
\n
\n\n {/* 4-Segment Strength Bar */}\n
\n = 1 ? currentStrength.barClass : 'bg-muted/80 dark:bg-muted',\n )}\n />\n = 2 ? currentStrength.barClass : 'bg-muted/80 dark:bg-muted',\n )}\n />\n = 3 ? currentStrength.barClass : 'bg-muted/80 dark:bg-muted',\n )}\n />\n = 4 ? currentStrength.barClass : 'bg-muted/80 dark:bg-muted',\n )}\n />\n
\n\n {/* Monospace Character Type Legend */}\n
\n \n \n Letters\n \n \n \n Numbers (0-9)\n \n \n \n Symbols (!@#$)\n \n
\n
\n \n \n\n {/* GENERATOR CONFIGURATION CARD */}\n \n \n
\n
\n \n
\n
\n Generator Configuration\n \n Customize character pools, length constraints, and format patterns\n \n
\n
\n \n\n \n setMode(val as 'password' | 'passphrase' | 'pin')}\n className=\"w-full\"\n >\n \n \n \n Random Password\n \n \n \n Passphrase\n \n \n \n PIN Code\n \n \n\n {/* TAB 1: RANDOM PASSWORD */}\n \n {/* Length Control */}\n
\n
\n \n \n {passwordLength} characters\n \n
\n\n setPasswordLength(val)}\n />\n\n {/* Preset length buttons */}\n
\n Presets:\n {[12, 16, 20, 24, 32, 48, 64].map((preset) => (\n setPasswordLength(preset)}\n >\n {preset}\n \n ))}\n
\n
\n\n \n\n {/* Character Type Switches */}\n
\n \n\n
\n {/* Uppercase */}\n
\n
\n
\n Uppercase Letters\n (A-Z)\n
\n

Include capital Latin characters

\n
\n \n
\n\n \n\n {/* Lowercase */}\n
\n
\n
\n Lowercase Letters\n (a-z)\n
\n

Include small Latin characters

\n
\n \n
\n\n \n\n {/* Numbers */}\n
\n
\n
\n Numbers\n (0-9)\n
\n

Include numeric digits 0 through 9

\n
\n \n
\n\n \n\n {/* Symbols */}\n
\n
\n
\n Special Symbols\n (!@#$%^&*)\n
\n

Include non-alphanumeric punctuation marks

\n
\n \n
\n\n \n\n {/* Avoid Ambiguous */}\n
\n
\n
\n Avoid Ambiguous Characters\n (l, 1, I, O, 0)\n
\n

Exclude confusing lookalike letters and digits

\n
\n \n
\n
\n
\n \n\n {/* TAB 2: MEMORABLE PASSPHRASE */}\n \n {/* Word Count Control */}\n
\n
\n \n \n {wordCount} words\n \n
\n\n setWordCount(val)}\n />\n\n {/* Preset word count buttons */}\n
\n Presets:\n {[3, 4, 5, 6, 8].map((preset) => (\n setWordCount(preset)}\n >\n {preset} words\n \n ))}\n
\n
\n\n \n\n {/* Separator Selector */}\n
\n \n\n
\n {[\n { id: '-', label: 'Hyphen (-)' },\n { id: '_', label: 'Under (_)' },\n { id: '.', label: 'Period (.)' },\n { id: ' ', label: 'Space ( )' },\n { id: '/', label: 'Slash (/)' },\n ].map((sep) => (\n setSeparator(sep.id)}\n >\n {sep.id === ' ' ? '␣' : sep.id}\n {sep.label.split(' ')[0]}\n \n ))}\n
\n
\n\n \n\n {/* Passphrase Switches */}\n
\n
\n
\n
Capitalize Words
\n

Transform each word into TitleCase for easy reading

\n
\n \n
\n\n \n\n
\n
\n
Append Random Number
\n

\n Add a 2-digit number (10-99) for additional security\n

\n
\n \n
\n
\n \n\n {/* TAB 3: PIN CODE */}\n \n {/* Length Control */}\n
\n
\n \n \n {pinLength} digits\n \n
\n\n setPinLength(val)}\n />\n\n {/* Preset PIN length buttons */}\n
\n Presets:\n {[4, 6, 8, 10, 12, 16].map((preset) => (\n setPinLength(preset)}\n >\n {preset} digits\n \n ))}\n
\n
\n\n \n\n {/* PIN Rules */}\n
\n
\n
\n
Avoid Consecutive Repeated Digits
\n

\n Prevent obvious repetitive patterns like “1122” or “8888”\n

\n
\n \n
\n
\n \n \n \n \n\n {/* RECENT HISTORY CARD */}\n \n \n
\n
\n
\n \n
\n
\n Generated History\n \n Stored in volatile browser memory only • Cleared on page refresh\n \n
\n
\n {history.length > 0 && (\n \n \n Clear History\n \n )}\n
\n \n\n \n {history.length === 0 ? (\n
\n No recent secrets in session history. Regenerate or copy above to log items here.\n
\n ) : (\n
\n {history.map((item) => (\n \n
\n
\n {item.mode === 'password' && }\n {item.mode === 'passphrase' && }\n {item.mode === 'pin' && }\n
\n\n
\n
\n {/* Monospace secret or masked bullets */}\n
\n {revealedHistoryIds.has(item.id) ? (\n formatItemCharacters(item.secret).map((subChar, idx) => (\n \n {subChar.char}\n \n ))\n ) : (\n \n ••••••••••••••••\n \n )}\n
\n\n {/* Reveal Toggle */}\n toggleHistoryReveal(item.id)}\n >\n {revealedHistoryIds.has(item.id) ? (\n \n ) : (\n \n )}\n \n
\n\n
\n \n {item.mode}\n \n •\n \n {item.entropy}-bit ({item.strengthLabel})\n \n •\n {item.createdAt}\n
\n
\n
\n\n
\n copySecret(item.secret, true, item.id)}\n >\n {copiedHistoryId === item.id ? : }\n {copiedHistoryId === item.id ? 'Copied' : 'Copy'}\n \n
\n
\n ))}\n
\n )}\n \n \n \n \n Cryptographically random • Never transmitted over network\n \n {history.length} entries\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/PasswordGeneratorWidget.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/tabs.json" ], "description": "1Password and Bitwarden-style customizable password and passphrase generator with entropy strength meter, character type toggles, memorable Diceware passphrases, PIN codes, and volatile history drawer.", "categories": [ "security", "auth", "app" ] }