npm - nexoreui-cli - Versions diffs - 1.7.3 → 1.8.0 - Mend

nexoreui-cli 1.7.3 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/commands/add.ts","../src/utils/detect.ts","../src/utils/copy.ts","../src/registry/button.ts","../src/registry/modal.ts","../src/registry/card.ts","../src/registry/alert.ts","../src/registry/badge.ts","../src/registry/morphing-geometry.ts","../src/registry/aurora-border-fx.ts","../src/registry/aurora-search-pill.ts","../src/registry/template-ai-startup.ts","../src/registry/template-modern-saas.ts","../src/registry/template-analytics-dashboard.ts","../src/registry/template-devtools-cli.ts","../src/registry/template-creative-portfolio.ts","../src/registry/template-fintech-app.ts","../src/registry/template-ecommerce-store.ts","../src/registry/template-agency-creative.ts","../src/registry/template-ai-chat.ts","../src/registry/template-project-management.ts","../src/registry/template-startup-waitlist.ts","../src/registry/template-docs-platform.ts","../src/registry/template-healthcare-portal.ts","../src/registry/template-web3-dex.ts","../src/registry/template-edtech-learning.ts","../src/registry/template-conference-event.ts","../src/registry/template-audio-podcast.ts","../src/registry/template-real-estate.ts","../src/registry/template-uptime-status.ts","../src/registry/template-agent-workflow.ts","../src/registry/template-restaurant-culinary.ts","../src/registry/template-help-center.ts","../src/registry/template-fitness-athletics.ts","../src/registry/template-wilderness-travel.ts","../src/registry/template-devops-kubernetes.ts","../src/registry/template-audio-daw.ts","../src/registry/template-gamified-habits.ts","../src/registry/template-global-logistics.ts","../src/registry/template-gaming-esports.ts","../src/registry/template-architecture-spatial.ts","../src/registry/template-cybersecurity-soc.ts","../src/registry/template-cleantech-agriculture.ts","../src/registry/template-juris-vault.ts","../src/registry/template-orbitalx-mission.ts","../src/registry/template-cineboard-studio.ts","../src/registry/template-domus-living.ts","../src/registry/template-hyperion-ev.ts","../src/registry/template-sovereign-auctions.ts","../src/registry/template-scholaris-archive.ts","../src/registry/template-talentorbit-hr.ts","../src/registry/template-miseenplace-kds.ts","../src/registry/template-aurasolace-sanctuary.ts","../src/registry/index.ts","../src/commands/list.ts","../src/commands/init.ts","../src/utils/config.ts","../src/commands/create.ts","../src/index.ts"],"sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\nimport * as readline from 'readline';\nimport { execSync } from 'child_process';\nimport { detectProject } from '../utils/detect.js';\nimport { ensureCnUtil, copyComponentFile, ensureDir } from '../utils/copy.js';\nimport { registry } from '../registry/index.js';\n\nfunction askQuestion(query: string): Promise<string> {\n const rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n return new Promise((resolve) =>\n rl.question(query, (ans) => {\n rl.close();\n resolve(ans);\n })\n );\n}\n\nexport interface AddOptions {\n yes?: boolean;\n all?: boolean;\n overwrite?: boolean;\n}\n\nexport async function addCommand(components: string[], options: AddOptions = {}) {\n const allRegistryKeys = Object.keys(registry);\n\n // If --all flag is passed, select all registered components\n let targetComponents = [...components];\n if (options.all \|\| targetComponents.includes('--all')) {\n targetComponents = allRegistryKeys;\n console.log(`\\n\\x1b[36m⚡ Adding all ${targetComponents.length} components from NexoreUI registry...\\x1b[0m`);\n }\n\n if (targetComponents.length === 0) {\n console.error('\\x1b[31mError: Please specify components to add or use --all.\\x1b[0m');\n console.log('Example: npx nexoreui add button modal table --all');\n return;\n }\n\n // 1. Detect project structure\n const project = detectProject(process.cwd());\n console.log(`\\n\\x1b[34mDetected project type:\\x1b[0m ${project.projectType.toUpperCase()}`);\n console.log(`\\x1b[34mDetected package manager:\\x1b[0m ${project.packageManager}\\n`);\n\n // Read nexore.json config if exists\n let customComponentsDir: string \| undefined;\n let customUtilsFile: string \| undefined;\n try {\n const configPath = path.join(project.baseDir, 'nexore.json');\n if (fs.existsSync(configPath)) {\n const cfg = JSON.parse(fs.readFileSync(configPath, 'utf8'));\n if (cfg.aliases?.components) {\n customComponentsDir = cfg.aliases.components.replace(/^@\\//, project.hasSrcDir ? 'src/' : '');\n }\n if (cfg.aliases?.utils) {\n const utilBase = cfg.aliases.utils.replace(/^@\\//, project.hasSrcDir ? 'src/' : '');\n customUtilsFile = utilBase.endsWith('.ts') \|\| utilBase.endsWith('.js') ? utilBase : `${utilBase}.ts`;\n }\n }\n } catch {\n // Fallback to default detection\n }\n\n // 2. Validate component names and determine all components to install\n const componentsToInstall = new Set<string>();\n const invalidComponents: string[] = [];\n\n const queue = [...targetComponents.filter((c) => c !== '--all')];\n while (queue.length > 0) {\n const compName = queue.shift()!;\n const registryItem = registry[compName];\n if (!registryItem) {\n invalidComponents.push(compName);\n continue;\n }\n\n if (!componentsToInstall.has(compName)) {\n componentsToInstall.add(compName);\n if (registryItem.componentsDependencies) {\n for (const dep of registryItem.componentsDependencies) {\n queue.push(dep);\n }\n }\n }\n }\n\n if (invalidComponents.length > 0) {\n console.error(`\\x1b[31mError: Component(s) not found in registry: ${invalidComponents.join(', ')}\\x1b[0m`);\n console.log('Run \\x1b[32mnpx nexoreui list\\x1b[0m to see all available components.');\n return;\n }\n\n // 3. Determine paths\n const defaultComponentsDir = customComponentsDir \|\| (project.hasSrcDir ? 'src/components/ui' : 'components/ui');\n const defaultUtilsFile = customUtilsFile \|\| (project.hasSrcDir ? 'src/lib/utils.ts' : 'lib/utils.ts');\n\n let componentsDirInput = defaultComponentsDir;\n let utilsFileInput = defaultUtilsFile;\n\n if (!options.yes && !customComponentsDir) {\n const compPrompt = await askQuestion(`Where would you like to install the components? (default: ${defaultComponentsDir}): `);\n componentsDirInput = compPrompt.trim() \|\| defaultComponentsDir;\n\n const utilsPrompt = await askQuestion(`Where should we create the utilities file (cn helper)? (default: ${defaultUtilsFile}): `);\n utilsFileInput = utilsPrompt.trim() \|\| defaultUtilsFile;\n }\n\n const absoluteComponentsDir = path.resolve(project.baseDir, componentsDirInput);\n const absoluteUtilsFile = path.resolve(project.baseDir, utilsFileInput);\n\n console.log(`\\x1b[33mInstalling components to:\\x1b[0m ${absoluteComponentsDir}`);\n console.log(`\\x1b[33mUsing cn helper from:\\x1b[0m ${absoluteUtilsFile}\\n`);\n\n ensureDir(absoluteComponentsDir);\n\n // 4. Ensure cn helper exists\n const didCreateCn = ensureCnUtil(absoluteUtilsFile);\n if (didCreateCn) {\n console.log(`\\x1b[32m✔ Created utilities file (cn helper) at:\\x1b[0m ${utilsFileInput}`);\n }\n\n // 5. Copy component files\n const npmDependencies = new Set<string>();\n npmDependencies.add('clsx');\n npmDependencies.add('tailwind-merge');\n npmDependencies.add('lucide-react');\n npmDependencies.add('framer-motion');\n\n for (const compName of componentsToInstall) {\n const registryItem = registry[compName];\n const targetPath = path.join(absoluteComponentsDir, registryItem.fileName);\n\n copyComponentFile(registryItem.content, targetPath, absoluteUtilsFile);\n console.log(`\\x1b[32m✔ Added component:\\x1b[0m ${compName} -> ${path.join(componentsDirInput, registryItem.fileName)}`);\n\n registryItem.dependencies.forEach((dep) => npmDependencies.add(dep));\n }\n\n // 6. Install collected npm dependencies\n const depsArray = Array.from(npmDependencies);\n let depsToInstall = [...depsArray];\n try {\n const packageJsonPath = path.join(project.baseDir, 'package.json');\n if (fs.existsSync(packageJsonPath)) {\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\n const existingDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };\n depsToInstall = depsArray.filter((dep) => !existingDeps[dep]);\n }\n } catch {\n // Ignore and proceed\n }\n\n if (depsToInstall.length > 0) {\n console.log(`\\n\\x1b[33mInstalling external dependencies:\\x1b[0m ${depsToInstall.join(', ')}...`);\n let installCmd = 'npm install';\n if (project.packageManager === 'pnpm') installCmd = 'pnpm add';\n else if (project.packageManager === 'yarn') installCmd = 'yarn add';\n else if (project.packageManager === 'bun') installCmd = 'bun add';\n\n try {\n execSync(`${installCmd} ${depsToInstall.join(' ')}`, {\n stdio: 'inherit',\n cwd: project.baseDir,\n });\n console.log('\\x1b[32m✔ Dependencies installed successfully!\\x1b[0m');\n } catch {\n console.error('\\x1b[31mFailed to install dependencies automatically. Please run:\\x1b[0m');\n console.log(` ${installCmd} ${depsToInstall.join(' ')}`);\n }\n }\n\n console.log(`\\n\\x1b[32m\\x1b[1m🎉 Done! ${componentsToInstall.size} NexoreUI component(s) ready to use.\\x1b[0m\\n`);\n}\n","import * as fs from 'fs';\r\nimport * as path from 'path';\r\n\r\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\r\nexport type ProjectType = 'next' \| 'vite' \| 'cra' \| 'unknown';\r\n\r\nexport interface ProjectInfo {\r\n packageManager: PackageManager;\r\n projectType: ProjectType;\r\n hasSrcDir: boolean;\r\n baseDir: string;\r\n}\r\n\r\nexport function detectProject(cwd: string = process.cwd()): ProjectInfo {\r\n let packageManager: PackageManager = 'npm';\r\n let projectType: ProjectType = 'unknown';\r\n let hasSrcDir = false;\r\n\r\n // Determine base project directory (walk up to find package.json)\r\n let currentDir = cwd;\r\n let baseDir = cwd;\r\n while (currentDir !== path.parse(currentDir).root) {\r\n if (fs.existsSync(path.join(currentDir, 'package.json'))) {\r\n baseDir = currentDir;\r\n break;\r\n }\r\n currentDir = path.dirname(currentDir);\r\n }\r\n\r\n // Detect Package Manager\r\n if (fs.existsSync(path.join(baseDir, 'pnpm-lock.yaml'))) {\r\n packageManager = 'pnpm';\r\n } else if (fs.existsSync(path.join(baseDir, 'yarn.lock'))) {\r\n packageManager = 'yarn';\r\n } else if (fs.existsSync(path.join(baseDir, 'bun.lockb')) \|\| fs.existsSync(path.join(baseDir, 'bun.lock'))) {\r\n packageManager = 'bun';\r\n }\r\n\r\n // Detect Source Directory\r\n if (fs.existsSync(path.join(baseDir, 'src'))) {\r\n hasSrcDir = true;\r\n }\r\n\r\n // Detect Project Type (Framework)\r\n try {\r\n const packageJsonPath = path.join(baseDir, 'package.json');\r\n if (fs.existsSync(packageJsonPath)) {\r\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\r\n const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };\r\n\r\n if (deps['next']) {\r\n projectType = 'next';\r\n } else if (deps['vite'] \|\| deps['@tailwindcss/vite']) {\r\n projectType = 'vite';\r\n } else if (deps['react-scripts']) {\r\n projectType = 'cra';\r\n }\r\n }\r\n } catch (err) {\r\n // Ignore and fallback to unknown\r\n }\r\n\r\n return {\r\n packageManager,\r\n projectType,\r\n hasSrcDir,\r\n baseDir,\r\n };\r\n}\r\n","import * as fs from 'fs';\r\nimport * as path from 'path';\r\n\r\nconst CN_TEMPLATE = `import { type ClassValue, clsx } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs))\r\n}\r\n`;\r\n\r\n/*\r\n Ensures a directory exists.\r\n /\r\nexport function ensureDir(dirPath: string) {\r\n if (!fs.existsSync(dirPath)) {\r\n fs.mkdirSync(dirPath, { recursive: true });\r\n }\r\n}\r\n\r\n/\r\n Normalizes relative path for imports (using forward slashes, stripping extension).\r\n /\r\nexport function getRelativeImportPath(fromDir: string, toFile: string): string {\r\n let relativePath = path.relative(fromDir, toFile);\r\n \r\n // Replace Windows backslashes with forward slashes\r\n relativePath = relativePath.replace(/\\\\/g, '/');\r\n \r\n // Remove file extension\r\n relativePath = relativePath.replace(/\\.(ts\|tsx\|js\|jsx)$/, '');\r\n \r\n // Ensure it starts with \"./\" or \"../\"\r\n if (!relativePath.startsWith('.')) {\r\n relativePath = './' + relativePath;\r\n }\r\n \r\n return relativePath;\r\n}\r\n\r\n/\r\n Checks if cn utility exists, writes it if it doesn't.\r\n /\r\nexport function ensureCnUtil(utilsPath: string): boolean {\r\n const dir = path.dirname(utilsPath);\r\n ensureDir(dir);\r\n \r\n if (!fs.existsSync(utilsPath)) {\r\n fs.writeFileSync(utilsPath, CN_TEMPLATE, 'utf8');\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\n/\r\n Copies a component template file to target directory, rewriting its cn import.\r\n /\r\nexport function copyComponentFile(\r\n content: string,\r\n targetFilePath: string,\r\n utilsFilePath: string\r\n) {\r\n const targetDir = path.dirname(targetFilePath);\r\n ensureDir(targetDir);\r\n \r\n // Compute relative path from target component to utils\r\n const relativeImport = getRelativeImportPath(targetDir, utilsFilePath);\r\n \r\n // Rewrite the import path in the template code\r\n // Handles import { cn } from \"../utils/cn\" or import { cn } from '../utils/cn'\r\n const rewrittenContent = content.replace(\r\n /['\"]\\.\\.\\/utils\\/cn['\"]/g,\r\n `\"${relativeImport}\"`\r\n );\r\n \r\n fs.writeFileSync(targetFilePath, rewrittenContent, 'utf8');\r\n}\r\n","export const button = {\n name: \"button\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"button.tsx\",\n content: `'use client';\r\n\r\nimport as React from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\nimport { motion, HTMLMotionProps } from 'framer-motion';\r\nimport { Loader2 } from 'lucide-react';\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl 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 active:scale-95\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\r\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border/50\",\r\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\r\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n link: \"text-primary underline-offset-4 hover:underline\",\r\n // Premium variants\r\n premium: \"bg-gradient-to-r from-violet-600 via-pink-600 to-orange-500 text-white shadow-lg shadow-purple-500/20 hover:shadow-xl hover:shadow-purple-500/30\",\r\n neon: \"bg-background border-2 border-primary text-foreground shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))] hover:shadow-[0_0_calc(var(--glow-radius)1.5)_rgba(var(--glow-color),calc(var(--glow-strength)1.5))]\",\r\n glass: \"backdrop-blur-md bg-zinc-900/10 dark:bg-zinc-100/10 border border-zinc-900/20 dark:border-zinc-100/20 text-zinc-900 dark:text-zinc-50 hover:bg-zinc-900/20 dark:hover:bg-zinc-100/20 shadow-md\",\r\n shimmer: \"relative overflow-hidden bg-slate-900 text-white dark:bg-white dark:text-black\",\r\n // New requested variants\r\n gradient: \"bg-gradient-to-r from-indigo-600 via-purple-600 to-violet-600 dark:from-indigo-500 dark:via-purple-500 dark:to-violet-500 text-white shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:shadow-indigo-500/30 hover:opacity-95\",\r\n glow: \"bg-primary text-primary-foreground shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))] hover:shadow-[0_0_calc(var(--glow-radius)1.5)_rgba(var(--glow-color),calc(var(--glow-strength)1.5))] border border-primary/20\",\r\n magnetic: \"bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-md hover:shadow-lg\",\r\n loading: \"bg-primary/80 text-primary-foreground/80 pointer-events-none cursor-wait\",\r\n },\r\n size: {\r\n default: \"h-10 px-5 py-2\",\r\n sm: \"h-9 rounded-lg px-3 text-xs\",\r\n lg: \"h-11 rounded-xl px-8 text-base\",\r\n icon: \"h-10 w-10 rounded-full\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n);\r\n\r\n/*\r\n Props for the Button component\r\n /\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof buttonVariants> {\r\n /* \r\n * Enable hover/tap spring motion animation\r\n * @default true \r\n /\r\n animate?: boolean;\r\n /* \r\n * Enable shimmer light animation effect\r\n * @default false\r\n /\r\n shimmer?: boolean;\r\n /* \r\n * Enable neon glow effect\r\n * @default false\r\n /\r\n glow?: boolean;\r\n /* \r\n * Display loading spinner icon and disable actions\r\n * @default false\r\n /\r\n isLoading?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n animate = true,\r\n shimmer = false,\r\n glow = false,\r\n isLoading = false,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const isShimmer = variant === 'shimmer' \|\| shimmer;\r\n const isMagnetic = variant === 'magnetic';\r\n const isGlow = variant === 'glow' \|\| glow;\r\n\r\n // Track mouse coords for magnetic hover movement\r\n const [magneticPos, setMagneticPos] = React.useState({ x: 0, y: 0 });\r\n\r\n const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n if (!isMagnetic) return;\r\n const { clientX, clientY, currentTarget } = e;\r\n const { left, top, width, height } = currentTarget.getBoundingClientRect();\r\n const x = clientX - (left + width / 2);\r\n const y = clientY - (top + height / 2);\r\n // spring weight multiplier\r\n setMagneticPos({ x: x 0.35, y: y * 0.35 });\r\n };\r\n\r\n const handleMouseLeave = () => {\r\n if (!isMagnetic) return;\r\n setMagneticPos({ x: 0, y: 0 });\r\n };\r\n\r\n const buttonContent = (\r\n <>\r\n {isShimmer && (\r\n <motion.div\r\n className=\"absolute inset-0 w-[200%] bg-gradient-to-r from-transparent via-white/20 to-transparent\"\r\n initial={{ x: '-100%' }}\r\n animate={{ x: '100%' }}\r\n transition={{\r\n repeat: Infinity,\r\n repeatType: 'loop',\r\n duration: 2,\r\n ease: 'linear',\r\n }}\r\n style={{ transform: 'skewX(-20deg)' }}\r\n />\r\n )}\r\n <span className=\"relative z-10 flex items-center justify-center gap-2\">\r\n {isLoading && <Loader2 className=\"animate-spin h-4 w-4 shrink-0\" />}\r\n {children}\r\n </span>\r\n </>\r\n );\r\n\r\n const activeVariant = isLoading ? \"loading\" : variant;\r\n\r\n // Disable button if loading\r\n const disabledState = props.disabled \|\| isLoading;\r\n\r\n // Destructure custom props to avoid passing invalid props down to HTML element\r\n const { ...htmlProps } = props;\r\n\r\n // Setup base styles\r\n const resolvedClassName = cn(\r\n buttonVariants({ variant: activeVariant, size, className }),\r\n isShimmer && \"relative overflow-hidden\",\r\n isGlow && \"shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))]\"\r\n );\r\n\r\n if (!animate) {\r\n return (\r\n <button\r\n ref={ref}\r\n disabled={disabledState}\r\n className={resolvedClassName}\r\n {...(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {buttonContent}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <motion.button\r\n ref={ref}\r\n disabled={disabledState}\r\n className={resolvedClassName}\r\n onMouseMove={handleMouseMove}\r\n onMouseLeave={handleMouseLeave}\r\n animate={isMagnetic ? { x: magneticPos.x, y: magneticPos.y } : undefined}\r\n whileHover={{\r\n scale: isMagnetic ? 1.02 : 1.03,\r\n y: isMagnetic ? 0 : -1.5,\r\n shadow: isGlow ? \"0 0 calc(var(--glow-radius)1.5) rgba(var(--glow-color), calc(var(--glow-strength)1.5))\" : undefined,\r\n }}\r\n whileTap={{ scale: 0.97 }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 350,\r\n damping: 20,\r\n }}\r\n {...(htmlProps as any)}\r\n >\r\n {buttonContent}\r\n </motion.button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n\r\n// ----------------------------------------------------\r\n// Deprecated button wrappers for backward compatibility\r\n// ----------------------------------------------------\r\n\r\n/*\r\n @deprecated Use the unified \\`<Button variant=\"neon\">\\` instead.\r\n /\r\nexport const NeonButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"neon\" glow={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nNeonButton.displayName = \"NeonButton\";\r\n\r\n/\r\n @deprecated Use custom styles or class variance utilities on the unified \\`<Button>\\` instead.\r\n /\r\nexport const ThreeDButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"shadow-[0_5px_0_hsl(var(--primary-dark,240_5.9%_30%))] hover:shadow-[0_2px_0_hsl(var(--primary-dark,240_5.9%_30%))] active:translate-y-[3px] active:shadow-[0_0px_0_transparent] transition-all\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n);\r\nThreeDButton.displayName = \"ThreeDButton\";\r\n\r\n/\r\n @deprecated Use custom ripple animations on the unified \\`<Button>\\` instead.\r\n /\r\nexport const RippleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"relative overflow-hidden group active:scale-95 transition-transform\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute inset-0 bg-white/20 scale-0 rounded-full group-active:scale-[2] transition-transform duration-500 origin-center\"></span>\r\n <span className=\"relative z-10\">{children}</span>\r\n </Button>\r\n )\r\n);\r\nRippleButton.displayName = \"RippleButton\";\r\n\r\n/\r\n @deprecated Use standard utility classes on the unified \\`<Button>\\` instead.\r\n /\r\nexport const CyberpunkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"bg-yellow-400 text-black font-extrabold uppercase tracking-widest border-2 border-black hover:bg-black hover:text-yellow-400 hover:border-yellow-400 transition-colors shadow-[4px_4px_0_0_#000] rounded-none hover:shadow-[4px_4px_0_0_#fff]\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n);\r\nCyberpunkButton.displayName = \"CyberpunkButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"magnetic\">\\` instead.\r\n /\r\nexport const MagneticButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"magnetic\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nMagneticButton.displayName = \"MagneticButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"shimmer\">\\` instead.\r\n /\r\nexport const ShimmerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"shimmer\" shimmer={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nShimmerButton.displayName = \"ShimmerButton\";\r\n\r\n/\r\n @deprecated Use a custom hover effect on the unified \\`<Button>\\` instead.\r\n /\r\nexport const BorderBeamButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n variant=\"outline\"\r\n className={cn(\r\n \"relative overflow-hidden border border-border group\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"absolute inset-0 bg-gradient-to-r from-primary to-transparent opacity-0 group-hover:opacity-20 transition-opacity\"></div>\r\n <div className=\"absolute top-0 left-0 w-full h-[2px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left\"></div>\r\n <span className=\"relative z-10\">{children}</span>\r\n </Button>\r\n )\r\n);\r\nBorderBeamButton.displayName = \"BorderBeamButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button isLoading={...}>\\` instead.\r\n /\r\nexport const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps & { isLoading?: boolean }>(\r\n ({ children, isLoading = true, ...props }, ref) => (\r\n <Button ref={ref} isLoading={isLoading} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nLoadingButton.displayName = \"LoadingButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"destructive\" glow>\\` instead.\r\n /\r\nexport const DestructiveGlowButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"destructive\" glow={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nDestructiveGlowButton.displayName = \"DestructiveGlowButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"outline\">\\` instead.\r\n /\r\nexport const GhostOutlineButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"outline\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGhostOutlineButton.displayName = \"GhostOutlineButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"glow\">\\` instead.\r\n /\r\nexport const GlowButton = React.forwardRef<HTMLButtonElement, ButtonProps & { glowColor?: string }>(\r\n ({ children, glowColor = \"rgba(139, 92, 246, 0.15)\", className, ...props }, ref) => (\r\n <div className=\"relative group inline-block\">\r\n <div\r\n className=\"absolute -inset-0.5 bg-gradient-to-r from-primary to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200\"\r\n style={{ backgroundColor: glowColor }}\r\n />\r\n <Button ref={ref} className={cn(\"relative bg-background\", className)} {...props}>\r\n {children}\r\n </Button>\r\n </div>\r\n )\r\n);\r\nGlowButton.displayName = \"GlowButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button shimmer>\\` instead.\r\n /\r\nexport const ShinyButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} shimmer={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nShinyButton.displayName = \"ShinyButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"gradient\">\\` instead.\r\n /\r\nexport const GradientButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"gradient\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGradientButton.displayName = \"GradientButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"glass\">\\` instead.\r\n /\r\nexport const GlassButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"glass\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGlassButton.displayName = \"GlassButton\";\r\n\r\n`\n};\n","export const modal = {\n name: \"modal\",\n dependencies: [\n \"@radix-ui/react-dialog\",\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"lucide-react\",\n \"framer-motion\"\n],\n componentsDependencies: [\n \"button\"\n],\n fileName: \"modal.tsx\",\n content: `\"use client\"\r\n\r\nimport as React from \"react\"\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\r\nimport { X, AlertTriangle, CheckCircle, Star } from \"lucide-react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"../utils/cn\"\r\n\r\nconst Dialog = DialogPrimitive.Root\r\n\r\nconst DialogTrigger = DialogPrimitive.Trigger\r\n\r\nconst DialogPortal = DialogPrimitive.Portal\r\n\r\nconst DialogClose = DialogPrimitive.Close\r\n\r\nconst DialogOverlay = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Overlay\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\r\n\r\nconst dialogContentVariants = cva(\r\n \"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/95 backdrop-blur-md p-6 shadow-2xl 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]:scale-95 data-[state=open]:scale-100 data-[state=closed]:translate-y-[-48%] data-[state=open]:translate-y-[-50%] rounded-2xl\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border-border/50\",\r\n glass: \"bg-white/10 backdrop-blur-xl border-white/20 shadow-2xl\",\r\n destructive: \"border-destructive/20\",\r\n success: \"border-green-500/20\",\r\n fullscreen: \"max-w-full h-screen rounded-none\",\r\n drawer: \"sm:max-w-full sm:h-[50vh] sm:rounded-b-none sm:rounded-t-[20px] fixed bottom-0 top-auto translate-y-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\r\n },\r\n size: {\r\n sm: \"max-w-sm\",\r\n md: \"max-w-md\",\r\n lg: \"max-w-lg\",\r\n xl: \"max-w-xl\",\r\n \"2xl\": \"max-w-2xl\",\r\n full: \"max-w-[95vw] md:max-w-[90vw]\",\r\n },\r\n scrollable: {\r\n true: \"max-h-[80vh] overflow-y-auto\",\r\n false: \"\",\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"lg\",\r\n scrollable: false,\r\n },\r\n }\r\n)\r\n\r\nexport interface DialogContentProps\r\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\r\n VariantProps<typeof dialogContentVariants> {}\r\n\r\nconst DialogContent = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Content>,\r\n DialogContentProps\r\n>(({ className, variant, size, scrollable, children, ...props }, ref) => (\r\n <DialogPortal>\r\n <DialogOverlay />\r\n <DialogPrimitive.Content\r\n ref={ref}\r\n className={cn(dialogContentVariants({ variant, size, scrollable, className }))}\r\n {...props}\r\n >\r\n {children}\r\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-full p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\">\r\n <X className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Close</span>\r\n </DialogPrimitive.Close>\r\n </DialogPrimitive.Content>\r\n </DialogPortal>\r\n))\r\nDialogContent.displayName = DialogPrimitive.Content.displayName\r\n\r\nconst DialogHeader = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nDialogHeader.displayName = \"DialogHeader\"\r\n\r\nconst DialogFooter = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nDialogFooter.displayName = \"DialogFooter\"\r\n\r\nconst DialogTitle = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Title>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Title\r\n ref={ref}\r\n className={cn(\r\n \"text-xl font-semibold leading-none tracking-tight bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogTitle.displayName = DialogPrimitive.Title.displayName\r\n\r\nconst DialogDescription = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Description>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Description\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nDialogDescription.displayName = DialogPrimitive.Description.displayName\r\n\r\nexport {\r\n Dialog,\r\n DialogPortal,\r\n DialogOverlay,\r\n DialogClose,\r\n DialogTrigger,\r\n DialogContent,\r\n DialogHeader,\r\n DialogFooter,\r\n DialogTitle,\r\n DialogDescription,\r\n}\r\n`\n};\n","export const card = {\n name: \"card\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"card.tsx\",\n content: `'use client';\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"../utils/cn\"\r\nimport { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from \"framer-motion\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { Heart, Share2, MapPin, Star } from \"lucide-react\"\r\n\r\nconst cardVariants = cva(\r\n \"rounded-2xl text-card-foreground transition-all duration-300 overflow-hidden\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border bg-card text-card-foreground shadow-sm hover:shadow-md\",\r\n glass: \"backdrop-blur-md bg-white/10 dark:bg-black/20 border border-white/20 dark:border-white/10 shadow-lg\",\r\n gradient: \"bg-gradient-to-br from-violet-500/10 via-pink-500/10 to-orange-500/10 border border-purple-500/20 shadow-lg shadow-purple-500/5\",\r\n glow: \"bg-card border-2 border-primary/20 shadow-[0_0_15px_rgba(var(--primary-rgb),0.1)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.2)]\",\r\n // New variants\r\n bento: \"border border-border/60 bg-gradient-to-br from-card to-muted/20 text-card-foreground shadow-md hover:shadow-lg hover:border-primary/30 relative\",\r\n spotlight: \"border bg-card text-card-foreground relative hover:border-primary/20\",\r\n flip: \"bg-transparent border-0 shadow-none overflow-visible relative\",\r\n tilt: \"border bg-card text-card-foreground shadow-md\",\r\n },\r\n hover: {\r\n none: \"\",\r\n lift: \"hover:-translate-y-1.5 hover:shadow-lg\",\r\n glow: \"hover:border-primary/50 hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.25)]\",\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n hover: \"lift\",\r\n }\r\n }\r\n)\r\n\r\n/*\r\n Props for the Card component\r\n /\r\nexport interface CardProps\r\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n VariantProps<typeof cardVariants> {\r\n /\r\n Whether to enable hover spring animations\r\n * @default true\r\n /\r\n animate?: boolean;\r\n /\r\n Back content displayed when using the \\`flip\\` variant on hover\r\n /\r\n backContent?: React.ReactNode;\r\n /\r\n Custom radial spotlight background color (e.g., rgba(168, 85, 247, 0.15))\r\n * @default \"rgba(139, 92, 246, 0.15)\"\r\n /\r\n spotlightColor?: string;\r\n}\r\n\r\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n hover,\r\n animate = true,\r\n backContent,\r\n spotlightColor = \"rgba(139, 92, 246, 0.15)\",\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Feature toggles based on variants\r\n const isSpotlight = variant === \"spotlight\";\r\n const isFlip = variant === \"flip\";\r\n const isTilt = variant === \"tilt\";\r\n\r\n // Spotlight mouse tracking state\r\n const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });\r\n const handleMouseMoveSpotlight = (e: React.MouseEvent<HTMLDivElement>) => {\r\n if (!isSpotlight) return;\r\n const { currentTarget, clientX, clientY } = e;\r\n const { left, top } = currentTarget.getBoundingClientRect();\r\n setMousePos({ x: clientX - left, y: clientY - top });\r\n };\r\n\r\n // Tilt mouse tracking state\r\n const [tiltPos, setTiltPos] = React.useState({ rotateX: 0, rotateY: 0 });\r\n const handleMouseMoveTilt = (e: React.MouseEvent<HTMLDivElement>) => {\r\n if (!isTilt) return;\r\n const { currentTarget, clientX, clientY } = e;\r\n const { left, top, width, height } = currentTarget.getBoundingClientRect();\r\n const x = clientX - left;\r\n const y = clientY - top;\r\n const maxTilt = 12; // degrees max rotation\r\n const rotateX = ((y - height / 2) / (height / 2)) -maxTilt;\r\n const rotateY = ((x - width / 2) / (width / 2)) * maxTilt;\r\n setTiltPos({ rotateX, rotateY });\r\n };\r\n\r\n const handleMouseLeaveTilt = () => {\r\n if (!isTilt) return;\r\n setTiltPos({ rotateX: 0, rotateY: 0 });\r\n };\r\n\r\n // Flip card hover state\r\n const [isFlipped, setIsFlipped] = React.useState(false);\r\n\r\n // Destructure custom props to avoid DOM validation warnings\r\n const { ...htmlProps } = props;\r\n\r\n // Flip Variant Render\r\n if (isFlip) {\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(cardVariants({ variant, hover, className }), \"perspective-1000 w-full h-full\")}\r\n onMouseEnter={() => setIsFlipped(true)}\r\n onMouseLeave={() => setIsFlipped(false)}\r\n {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n <motion.div\r\n className=\"relative w-full h-full transition-all duration-500 preserve-3d\"\r\n animate={{ rotateY: isFlipped ? 180 : 0 }}\r\n transition={{ type: \"spring\", stiffness: 300, damping: 22 }}\r\n >\r\n {/* Front Face /}\r\n <div className=\"absolute inset-0 backface-hidden border bg-card text-card-foreground rounded-2xl shadow-sm flex flex-col justify-between overflow-hidden\">\r\n {children}\r\n </div>\r\n\r\n {/ Back Face /}\r\n <div className=\"absolute inset-0 backface-hidden rotate-y-180 border bg-gradient-to-br from-primary/10 to-primary/5 text-card-foreground rounded-2xl shadow-sm flex flex-col p-6 items-center justify-center text-center overflow-hidden\">\r\n {backContent \|\| (\r\n <div className=\"text-sm font-medium text-muted-foreground\">\r\n Flip side content placeholder\r\n </div>\r\n )}\r\n </div>\r\n </motion.div>\r\n </div>\r\n );\r\n }\r\n\r\n // Spotlight Variant Render Extra Element\r\n const spotlightEffect = isSpotlight && (\r\n <div\r\n className=\"pointer-events-none absolute -inset-px rounded-2xl opacity-0 hover:opacity-100 group-hover:opacity-100 transition-opacity duration-300\"\r\n style={{\r\n background: \\`radial-gradient(400px circle at \\${mousePos.x}px \\${mousePos.y}px, \\${spotlightColor}, transparent 80%)\\`,\r\n }}\r\n />\r\n );\r\n\r\n // Build the resolved element attributes\r\n const cardClass = cn(cardVariants({ variant, hover: isFlip \|\| isTilt ? \"none\" : hover, className }), isSpotlight && \"group\");\r\n\r\n if (animate \|\| isTilt) {\r\n return (\r\n <motion.div\r\n ref={ref}\r\n className={cardClass}\r\n onMouseMove={(e) => {\r\n if (isSpotlight) handleMouseMoveSpotlight(e);\r\n if (isTilt) handleMouseMoveTilt(e);\r\n }}\r\n onMouseLeave={() => {\r\n if (isTilt) handleMouseLeaveTilt();\r\n }}\r\n animate={\r\n isTilt\r\n ? { rotateX: tiltPos.rotateX, rotateY: tiltPos.rotateY }\r\n : undefined\r\n }\r\n whileHover={isTilt ? undefined : { scale: 1.015 }}\r\n transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n {...(htmlProps as any)}\r\n >\r\n {spotlightEffect}\r\n {children}\r\n </motion.div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cardClass}\r\n {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n {children}\r\n </div>\r\n );\r\n }\r\n)\r\nCard.displayName = \"Card\"\r\n\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\r\n {...props}\r\n />\r\n))\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h3\r\n ref={ref}\r\n className={cn(\"font-semibold leading-none tracking-tight text-xl bg-gradient-to-br from-foreground to-foreground/75 bg-clip-text text-transparent\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed mt-1\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(\"p-6 pt-0 leading-relaxed text-sm text-foreground/90\", className)} {...props} />\r\n))\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center p-6 pt-0 border-t border-border/10 mt-auto\", className)}\r\n {...props}\r\n />\r\n))\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\n\r\nexport const GlassCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"glass\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGlassCard.displayName = \"GlassCard\";\r\n\r\nexport const GlowCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"glow\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGlowCard.displayName = \"GlowCard\";\r\n\r\nexport const GradientCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"gradient\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGradientCard.displayName = \"GradientCard\";\r\n\r\nexport const HoverCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} hover=\"lift\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nHoverCard.displayName = \"HoverCard\";\r\n\r\nexport const SpotlightCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"spotlight\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nSpotlightCard.displayName = \"SpotlightCard\";\r\n\r\n\r\n\r\n\r\n`\n};\n","export const alert = {\n name: \"alert\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"alert.tsx\",\n content: `\"use client\"\r\n\r\nimport as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"../utils/cn\"\r\nimport { motion, AnimatePresence } from \"framer-motion\"\r\nimport { AlertCircle, Info, CheckCircle2, XCircle, Cookie, BellRing, WifiOff, AlertTriangle, X } from \"lucide-react\"\r\n\r\nconst alertVariants = cva(\r\n \"relative w-full rounded-2xl border p-4 [&>svg~]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 transition-all duration-300 shadow-sm\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-background/50 border-border text-foreground\",\r\n destructive: \"border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400 [&>svg]:text-red-600 dark:[&>svg]:text-red-400\",\r\n success: \"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400\",\r\n warning: \"border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400\",\r\n info: \"border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400\",\r\n glass: \"backdrop-blur-md bg-white/5 dark:bg-black/20 border-white/10 dark:border-white/5 text-foreground\",\r\n floating: \"fixed bottom-5 right-5 z-50 max-w-sm bg-card/95 backdrop-blur-md border border-border/80 text-foreground shadow-[0_10px_30px_rgba(0,0,0,0.25)] animate-slide-up\",\r\n minimal: \"border-0 bg-muted/40 p-3 text-sm rounded-xl text-foreground hover:bg-muted/60 shadow-none [&>svg]:top-3.5\",\r\n neon: \"border-purple-500/50 bg-purple-500/10 text-purple-200 shadow-[0_0_15px_rgba(168,85,247,0.3)] [&>svg]:text-purple-400\",\r\n cyberpunk: \"border-l-4 border-yellow-400 bg-black text-yellow-400 shadow-[4px_4px_0_0_rgba(250,204,21,1)] rounded-none font-mono uppercase [&>svg]:text-yellow-400\",\r\n gradient: \"bg-gradient-to-r from-blue-500/10 to-indigo-500/10 border-blue-500/20 text-foreground [&>svg]:text-blue-500\",\r\n banner: \"w-full bg-indigo-600 text-white border-0 shadow-md rounded-none sm:rounded-xl [&>svg]:text-white\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nexport interface AlertProps\r\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n VariantProps<typeof alertVariants> {\r\n /\n Описание для animate\n * @default undefined\n /\n animate?: boolean;\r\n /\n Описание для title\n * @default undefined\n /\n title?: React.ReactNode;\r\n /\n Описание для description\n * @default undefined\n /\n description?: React.ReactNode;\r\n /\n Описание для icon\n * @default undefined\n /\n icon?: React.ReactNode;\r\n /\n Описание для dismissible\n * @default undefined\n /\n dismissible?: boolean;\r\n /\n Описание для onDismiss\n * @default undefined\n /\n onDismiss?: () => void;\r\n /\n Описание для actionText\n * @default undefined\n /\n actionText?: string;\r\n /\n Описание для onAction\n * @default undefined\n /\n onAction?: () => void;\r\n}\r\n\r\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n animate = true,\r\n title,\r\n description,\r\n icon,\r\n dismissible = false,\r\n onDismiss,\r\n actionText,\r\n onAction,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [isOpen, setIsOpen] = React.useState(true);\r\n\r\n if (!isOpen) return null;\r\n\r\n const isMinimal = variant === \"minimal\";\r\n const isBanner = variant === \"banner\";\r\n\r\n const defaultIcon = icon \|\| (\r\n variant === \"destructive\" ? <XCircle className=\"h-4 w-4\" /> :\r\n variant === \"success\" ? <CheckCircle2 className=\"h-4 w-4\" /> :\r\n variant === \"warning\" ? <AlertTriangle className=\"h-4 w-4\" /> :\r\n variant === \"info\" ? <Info className=\"h-4 w-4\" /> :\r\n variant === \"default\" ? <AlertCircle className=\"h-4 w-4\" /> :\r\n null\r\n );\r\n\r\n const content = (\r\n <>\r\n {defaultIcon && <div className={cn(\"absolute left-4\", isMinimal ? \"top-3\" : \"top-4\")}>{defaultIcon}</div>}\r\n <div className={cn(defaultIcon ? \"pl-7\" : \"\", \"pr-8\")}>\r\n {title && <AlertTitle>{title}</AlertTitle>}\r\n {description && <AlertDescription>{description}</AlertDescription>}\r\n {!title && !description && children}\r\n </div>\r\n {isBanner && actionText && (\r\n <button\r\n onClick={onAction}\r\n className=\"absolute right-12 top-1/2 -translate-y-1/2 text-xs font-bold bg-white text-indigo-600 px-3 py-1.5 rounded-md hover:bg-indigo-50 transition-colors\"\r\n >\r\n {actionText}\r\n </button>\r\n )}\r\n {dismissible && (\r\n <button\r\n onClick={() => {\r\n setIsOpen(false);\r\n onDismiss?.();\r\n }}\r\n className=\"absolute right-4 top-4 opacity-50 hover:opacity-100 transition-opacity p-0.5 rounded-md hover:bg-muted\"\r\n aria-label=\"Dismiss\"\r\n >\r\n <X className=\"h-4 w-4\" />\r\n </button>\r\n )}\r\n </>\r\n );\r\n\r\n const alertClass = cn(alertVariants({ variant }), className);\r\n\r\n if (animate) {\r\n return (\r\n <motion.div\r\n ref={ref}\r\n role=\"alert\"\r\n initial={{ opacity: 0, y: variant === \"floating\" ? 30 : 15, scale: variant === \"floating\" ? 0.95 : 1 }}\r\n animate={{ opacity: 1, y: 0, scale: 1 }}\r\n exit={{ opacity: 0, y: variant === \"floating\" ? 20 : 10, scale: 0.95 }}\r\n transition={{ type: \"spring\", stiffness: 350, damping: 24 }}\r\n className={alertClass}\r\n {...(props as any)}\r\n >\r\n {content}\r\n </motion.div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={alertClass}\r\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n {content}\r\n </div>\r\n );\r\n }\r\n)\r\nAlert.displayName = \"Alert\"\r\n\r\nconst AlertTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h5\r\n ref={ref}\r\n className={cn(\"mb-1 font-semibold leading-none tracking-tight text-base text-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nconst AlertDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed mt-1 opacity-90 [&_p]:leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\n// ----------------------------------------------------\r\n// Merged subcomponents and wrappers\r\n// ----------------------------------------------------\r\n\r\n// 1. ToastAlertWrapper\r\nexport const ToastAlertWrapper = ({ children, className, title, description, time }: any) => (\r\n <div className={cn(\"max-w-sm w-full bg-background border border-border/80 shadow-xl rounded-2xl p-4 flex gap-4 items-start relative\", className)}>\r\n <CheckCircle2 className=\"h-5 w-5 text-green-500 shrink-0 mt-0.5\" />\r\n <div className=\"flex-1\">\r\n {title && <h4 className=\"font-semibold text-sm\">{title}</h4>}\r\n {description && <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>}\r\n {children}\r\n </div>\r\n {time && <span className=\"text-xs text-muted-foreground/60\">{time}</span>}\r\n </div>\r\n)\r\n\r\n// 2. CookieAlert\r\nexport const CookieAlert = ({ onAccept, onDecline }: { onAccept?: () => void; onDecline?: () => void }) => {\r\n const [visible, setVisible] = React.useState(true)\r\n if (!visible) return null\r\n return (\r\n <div className=\"max-w-md bg-card border rounded-2xl p-6 shadow-2xl space-y-4\">\r\n <div className=\"flex items-center gap-3\">\r\n <Cookie className=\"h-6 w-6 text-orange-500 animate-bounce\" />\r\n <h4 className=\"font-bold text-lg\">Cookie Preferences</h4>\r\n </div>\r\n <p className=\"text-sm text-muted-foreground\">\r\n We use cookies to improve your experience. By continuing to visit this site you agree to our use of cookies.\r\n </p>\r\n <div className=\"flex gap-3 pt-2\">\r\n <button \r\n onClick={() => { setVisible(false); onAccept?.(); }}\r\n className=\"flex-1 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/95 transition-colors rounded-xl text-sm font-semibold shadow-md shadow-primary/10\"\r\n >\r\n Accept All\r\n </button>\r\n <button \r\n onClick={() => { setVisible(false); onDecline?.(); }}\r\n className=\"flex-1 px-4 py-2 border rounded-xl text-sm font-semibold hover:bg-muted transition-colors\"\r\n >\r\n Decline\r\n </button>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n// 3. OfflineBanner\r\nexport const OfflineBanner = () => (\r\n <div className=\"w-full bg-red-600 text-white p-3.5 flex justify-center items-center gap-2 text-sm font-semibold shadow-md sm:rounded-xl\">\r\n <WifiOff className=\"w-4 h-4 animate-pulse\" /> You are currently offline. Some features may be unavailable.\r\n </div>\r\n)\r\n\r\n// 4. RateLimitAlert\r\nexport const RateLimitAlert = () => (\r\n <div className=\"border border-orange-500/30 bg-orange-500/10 p-5 rounded-2xl flex gap-3 items-start max-w-md shadow-sm\">\r\n <AlertTriangle className=\"w-5 h-5 text-orange-500 shrink-0 mt-0.5 animate-pulse\" />\r\n <div className=\"flex-1\">\r\n <h4 className=\"font-bold text-orange-600 dark:text-orange-400\">Rate Limit Exceeded</h4>\r\n <p className=\"text-sm text-orange-600/80 dark:text-orange-400/80 mt-1 mb-4\">\r\n You have made too many requests. Please wait 45 seconds before trying again.\r\n </p>\r\n <div className=\"w-full h-1.5 bg-orange-500/20 rounded-full overflow-hidden\">\r\n <motion.div animate={{ width: [\"100%\", \"0%\"] }} transition={{ duration: 45, ease: \"linear\" }} className=\"h-full bg-orange-500\" />\r\n </div>\r\n </div>\r\n </div>\r\n)\r\n\r\n// Re-export original/merged components\r\nexport { Alert, AlertTitle, AlertDescription }\r\n/\r\n @deprecated Use the unified \\`<Alert variant=\"cyberpunk\">\\` instead.\r\n /\r\nexport const CyberAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"cyberpunk\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"success\">\\` or \\`<Alert variant=\"info\">\\` instead.\r\n /\r\nexport const SoftAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant={variant === \"success\" ? \"success\" : \"info\"} title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"minimal\">\\` instead.\r\n /\r\nexport const MinimalAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"minimal\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert className=\"border-l-4 ...\">\\` instead.\r\n /\r\nexport const LeftBorderAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant={variant === \"warning\" ? \"warning\" : \"default\"} className=\"border-l-4 border-l-primary\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use custom styled layouts or standard elements instead.\r\n /\r\nexport const IconTopAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <div className=\"flex flex-col items-center text-center p-6 bg-card border rounded-2xl\" {...props}>\r\n <div className=\"h-12 w-12 rounded-full bg-destructive/10 text-destructive flex items-center justify-center mb-4\">\r\n <AlertCircle className=\"h-6 w-6\" />\r\n </div>\r\n <h4 className=\"font-bold text-lg mb-2\">{title}</h4>\r\n <p className=\"text-sm text-muted-foreground\">{description}</p>\r\n </div>\r\n)\r\n\r\n/\r\n @deprecated Use standard tailwind background colors on unified \\`<Alert>\\` instead.\r\n /\r\nexport const SolidAlert = ({ title, description, variant = \"default\", ...props }: any) => {\r\n const bgClasses: Record<string, string> = {\r\n error: \"bg-red-600 text-white border-0\",\r\n success: \"bg-emerald-600 text-white border-0\",\r\n warning: \"bg-amber-500 text-black border-0\",\r\n default: \"bg-primary text-primary-foreground border-0\",\r\n }\r\n const bgClass = bgClasses[variant] \|\| bgClasses.default\r\n return (\r\n <div className={cn(\"p-4 rounded-xl shadow-lg flex gap-3 items-start\", bgClass)} {...props}>\r\n <Info className=\"h-5 w-5 shrink-0 mt-0.5\" />\r\n <div>\r\n <h4 className=\"font-bold\">{title}</h4>\r\n <p className=\"text-sm opacity-90 mt-1\">{description}</p>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"banner\">\\` instead.\r\n /\r\nexport const BannerAlert = ({ message, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"banner\" title={message} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"neon\">\\` instead.\r\n /\r\nexport const NeonAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"neon\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"glass\">\\` instead.\r\n /\r\nexport const GlassAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"glass\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert dismissible={true}>\\` instead.\r\n /\r\nexport const DismissibleAlert = ({ variant = \"default\", title, description, ...props }: any) => (\r\n <Alert variant={variant} title={title \|\| \"Attention\"} description={description \|\| \"Action required\"} dismissible={true} {...props} />\r\n)\r\n\r\n`\n};\n","export const badge = {\n name: \"badge\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"badge.tsx\",\n content: `'use client';\n\nimport as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../utils/cn\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center gap-1 rounded-full border font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-default\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground border-border hover:bg-accent\",\n gradient: \"border-transparent bg-gradient-to-r from-violet-600 to-pink-600 dark:from-violet-500 dark:to-pink-500 text-white shadow-sm\",\n neon: \"border-primary/50 bg-primary/10 text-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.3)]\",\n success: \"border-transparent bg-emerald-500/20 text-emerald-600 dark:text-emerald-400\",\n warning: \"border-transparent bg-amber-500/20 text-amber-600 dark:text-amber-400\",\n info: \"border-transparent bg-blue-500/20 text-blue-600 dark:text-blue-400\",\n },\n size: {\n default: \"px-2.5 py-0.5 text-xs\",\n sm: \"px-1.5 py-0.5 text-[10px]\",\n lg: \"px-3 py-1 text-sm\",\n }\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {\n /*\n Описание для pulse\n * @default undefined\n /\n pulse?: boolean;\n /\n Описание для dot\n * @default undefined\n /\n dot?: boolean;\n /\n Описание для text\n * @default undefined\n /\n text?: string;\n}\n\nfunction Badge({ className, variant, size, pulse = false, dot = false, children, text, ...props }: BadgeProps) {\n const showDot = dot \|\| pulse;\n \n return (\n <div className={cn(badgeVariants({ variant, size }), className)} {...props}>\n {showDot && (\n <span className=\"relative flex h-2 w-2 mr-1\">\n {pulse && (\n <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75\"></span>\n )}\n <span className=\"relative inline-flex rounded-full h-2 w-2 bg-current\"></span>\n </span>\n )}\n {children \|\| text}\n </div>\n )\n}\n\nexport { Badge, badgeVariants }\n`\n};\n","export const morphingGeometry = {\n name: \"morphing-geometry\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n ],\n fileName: \"morphing-geometry.tsx\",\n content: `'use client';\n\nimport as React from 'react';\nimport { motion, HTMLMotionProps } from 'framer-motion';\nimport { Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\nexport type MorphingShape = 'pill' \| 'circle' \| 'square' \| 'squircle' \| 'custom';\nexport type MorphingVariant = 'gradient' \| 'aurora' \| 'neon' \| 'glass' \| 'outline' \| 'subtle';\nexport type MorphingColor = 'violet' \| 'cyan' \| 'emerald' \| 'rose' \| 'amber' \| 'rainbow' \| 'mono';\nexport type MorphingSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'custom';\n\nexport interface MorphingGeometryProps extends Omit<HTMLMotionProps<'div'>, 'children'> {\n shape?: MorphingShape;\n radius?: number \| string;\n variant?: MorphingVariant;\n color?: MorphingColor;\n size?: MorphingSize;\n dimension?: number;\n spin?: boolean;\n spinDuration?: number;\n interactive?: boolean;\n glow?: boolean;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport const MorphingGeometry = React.forwardRef<HTMLDivElement, MorphingGeometryProps>(\n (\n {\n shape = 'squircle',\n radius,\n variant = 'gradient',\n color = 'violet',\n size = 'md',\n dimension,\n spin = false,\n spinDuration = 6,\n interactive = false,\n glow = true,\n icon,\n children,\n className,\n style,\n onClick,\n ...props\n },\n ref\n ) => {\n return (\n <motion.div\n ref={ref}\n animate={spin ? { rotate: [0, 90, 180, 270, 360] } : { rotate: 0 }}\n transition={{ rotate: { duration: spinDuration, repeat: Infinity, ease: 'linear' }, borderRadius: { duration: 0.4 } }}\n className={cn('relative flex items-center justify-center select-none overflow-hidden transition-all duration-300 w-24 h-24', className)}\n style={{ borderRadius: radius \|\| '24%', ...style }}\n {...props}\n >\n <div className=\"relative z-10 flex flex-col items-center justify-center p-2 text-center\">\n {icon \|\| children \|\| <Sparkles className=\"w-6 h-6 text-white\" />}\n </div>\n </motion.div>\n );\n }\n);\n\nMorphingGeometry.displayName = 'MorphingGeometry';\nexport default MorphingGeometry;\n`\n};\n","export const auroraBorderFX = {\n name: \"aurora-border-fx\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n ],\n fileName: \"aurora-border-fx.tsx\",\n content: `'use client';\n\nimport * as React from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\nexport type AuroraFXColor = 'violet' \| 'cyan' \| 'emerald' \| 'rose' \| 'amber' \| string;\nexport type AuroraFXGlow = 'none' \| 'subtle' \| 'medium' \| 'strong';\nexport type AuroraFXRadius = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\nexport interface AuroraColorOption {\n name: string;\n hex: string;\n}\n\nexport const defaultAuroraColors: AuroraColorOption[] = [\n { name: 'Violet', hex: '#8b5cf6' },\n { name: 'Cyan', hex: '#06b6d4' },\n { name: 'Emerald', hex: '#10b981' },\n { name: 'Rose', hex: '#f43f5e' },\n { name: 'Amber', hex: '#f59e0b' },\n];\n\nconst colorPresetMap: Record<string, string> = {\n violet: '#8b5cf6',\n cyan: '#06b6d4',\n emerald: '#10b981',\n rose: '#f43f5e',\n amber: '#f59e0b',\n};\n\nconst radiusMap: Record<AuroraFXRadius, { outer: string; inner: string }> = {\n sm: { outer: 'rounded-lg', inner: 'rounded-[calc(0.5rem-1px)]' },\n md: { outer: 'rounded-xl', inner: 'rounded-[calc(0.75rem-1px)]' },\n lg: { outer: 'rounded-2xl', inner: 'rounded-[calc(1rem-1px)]' },\n xl: { outer: 'rounded-3xl', inner: 'rounded-[calc(1.5rem-1.5px)]' },\n full: { outer: 'rounded-full', inner: 'rounded-full' },\n};\n\nconst glowOpacityMap: Record<AuroraFXGlow, number> = {\n none: 0,\n subtle: 0.25,\n medium: 0.45,\n strong: 0.75,\n};\n\nexport interface AuroraBorderFXProps extends React.HTMLAttributes<HTMLDivElement> {\n color?: AuroraFXColor;\n glow?: AuroraFXGlow;\n radius?: AuroraFXRadius;\n badgeText?: string;\n badgeIcon?: React.ReactNode;\n title?: string;\n description?: string;\n showColorPicker?: boolean;\n colors?: AuroraColorOption[];\n activeColor?: string;\n onColorChange?: (colorHex: string) => void;\n previewSlot?: React.ReactNode;\n footerSlot?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport const AuroraBorderFX = React.forwardRef<HTMLDivElement, AuroraBorderFXProps>(\n (\n {\n color = 'violet',\n glow = 'medium',\n radius = 'lg',\n badgeText = 'Aurora Border FX',\n badgeIcon = <Sparkles className=\"w-3 h-3\" />,\n title = 'Reactive Aurora Borders',\n description = 'Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.',\n showColorPicker = true,\n colors = defaultAuroraColors,\n activeColor: controlledColor,\n onColorChange,\n previewSlot,\n footerSlot,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const resolvedInitialColor = colorPresetMap[color] \|\| color \|\| '#8b5cf6';\n const [internalColor, setInternalColor] = React.useState<string>(resolvedInitialColor);\n\n React.useEffect(() => {\n if (colorPresetMap[color]) {\n setInternalColor(colorPresetMap[color]);\n } else if (color) {\n setInternalColor(color);\n }\n }, [color]);\n\n const currentColor = controlledColor !== undefined ? controlledColor : internalColor;\n const radiusConfig = radiusMap[radius] \|\| radiusMap.lg;\n const glowOpacity = glowOpacityMap[glow] ?? 0.45;\n\n const handleSelectColor = (hex: string) => {\n if (controlledColor === undefined) {\n setInternalColor(hex);\n }\n onColorChange?.(hex);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative isolate p-5 sm:p-6 overflow-hidden flex flex-col justify-between group transition-all duration-300',\n 'border border-border/80 bg-card/60 backdrop-blur-xl shadow-xl',\n radiusConfig.outer,\n className\n )}\n {...props}\n >\n {glow !== 'none' && (\n <div\n className=\"absolute -top-12 -right-12 w-48 h-48 rounded-full blur-[85px] pointer-events-none transition-colors duration-500 -z-10\"\n style={{\n backgroundColor: currentColor,\n opacity: glowOpacity,\n }}\n />\n )}\n\n {glow !== 'none' && glow !== 'subtle' && (\n <div\n className=\"absolute -bottom-10 -left-10 w-40 h-40 rounded-full blur-[90px] pointer-events-none transition-colors duration-700 -z-10\"\n style={{\n backgroundColor: currentColor,\n opacity: glowOpacity * 0.4,\n }}\n />\n )}\n\n {children ? (\n <div className=\"relative z-10 w-full h-full\">{children}</div>\n ) : (\n <div className=\"relative z-10 flex flex-col justify-between h-full space-y-5\">\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between gap-3\">\n {badgeText && (\n <div\n className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border transition-all duration-300 shadow-xs\"\n style={{\n backgroundColor: \\`\\${currentColor}18\\`,\n borderColor: \\`\\${currentColor}40\\`,\n color: currentColor,\n }}\n >\n {badgeIcon}\n <span>{badgeText}</span>\n </div>\n )}\n\n {showColorPicker && colors && colors.length > 0 && (\n <div className=\"flex items-center gap-1.5 bg-muted/60 dark:bg-muted/40 p-1 rounded-full border border-border/60 backdrop-blur-md\">\n {colors.map((c) => {\n const isActive = currentColor.toLowerCase() === c.hex.toLowerCase();\n return (\n <button\n key={c.name}\n type=\"button\"\n onClick={() => handleSelectColor(c.hex)}\n className={cn(\n 'w-3.5 h-3.5 rounded-full transition-all duration-200 cursor-pointer',\n isActive\n ? 'scale-125 ring-2 ring-foreground/40 shadow-xs'\n : 'hover:scale-110 opacity-70 hover:opacity-100'\n )}\n style={{ backgroundColor: c.hex }}\n title={\\`Switch to \\${c.name}\\`}\n aria-label={\\`Switch glow to \\${c.name}\\`}\n />\n );\n })}\n </div>\n )}\n </div>\n\n <div>\n {title && (\n <h3 className=\"text-base sm:text-lg font-bold tracking-tight text-foreground\">\n {title}\n </h3>\n )}\n {description && (\n <p className=\"text-xs sm:text-sm text-muted-foreground leading-relaxed mt-1\">\n {description}\n </p>\n )}\n </div>\n </div>\n\n <div className=\"pt-2 flex items-center justify-center\">\n {previewSlot ? (\n previewSlot\n ) : (\n <div\n className={cn(\n 'relative p-[1.5px] overflow-hidden transition-all duration-300 w-full max-w-[280px]',\n radiusConfig.inner\n )}\n style={{\n background: \\`linear-gradient(135deg, \\${currentColor}, transparent 60%, \\${currentColor}90)\\`,\n }}\n >\n <div\n className={cn(\n 'bg-card/90 dark:bg-card/80 px-4 py-3 flex items-center justify-between backdrop-blur-md shadow-inner',\n radiusConfig.inner\n )}\n >\n <div className=\"flex items-center gap-2.5\">\n <div\n className=\"w-2.5 h-2.5 rounded-full animate-pulse shrink-0\"\n style={{ backgroundColor: currentColor }}\n />\n <span className=\"text-xs font-mono font-semibold text-foreground\">\n Interactive Aurora Pill\n </span>\n </div>\n <span\n className=\"text-[10px] font-mono px-2 py-0.5 rounded-md font-medium border\"\n style={{\n backgroundColor: \\`\\${currentColor}12\\`,\n borderColor: \\`\\${currentColor}30\\`,\n color: currentColor,\n }}\n >\n {currentColor.toUpperCase()}\n </span>\n </div>\n </div>\n )}\n </div>\n\n {footerSlot && <div className=\"pt-2 border-t border-border/50\">{footerSlot}</div>}\n </div>\n )}\n </div>\n );\n }\n);\n\nAuroraBorderFX.displayName = 'AuroraBorderFX';\n`\n};\n","export const auroraSearchPill = {\n name: \"auroraSearchPill\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"aurora-search-pill.tsx\",\n content: `'use client';\n\nimport * as React from 'react';\nimport { Globe, Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\n// Register hardware angle property once for conic gradient rotation\nif (typeof window !== 'undefined' && typeof (window as any).CSS !== 'undefined' && 'registerProperty' in (window as any).CSS) {\n try {\n (window as any).CSS.registerProperty({\n name: '--aurora-deg',\n syntax: '<angle>',\n inherits: false,\n initialValue: '0deg',\n });\n } catch {}\n}\n\nexport interface AuroraSearchSource {\n /** Unique key for the source badge /\n id: string;\n /* Label or tooltip text for the source /\n label?: string;\n /* Direct avatar image URL (e.g. favicon, PNG, SVG) /\n avatarUrl?: string;\n /* Custom icon or element /\n icon?: React.ReactNode;\n /* Text initials to display inside badge /\n initials?: string;\n /* Built-in preset type or custom /\n type?: 'globe' \| 'gradient' \| 'github' \| 'claude' \| 'chatgpt' \| 'perplexity' \| 'custom';\n /* Custom background CSS string or hex /\n bg?: string;\n}\n\nexport type AuroraSearchPillSize = 'sm' \| 'md' \| 'lg';\nexport type AuroraSearchPillSpeed = 'slow' \| 'normal' \| 'fast';\nexport type AuroraSearchPillTheme = 'light' \| 'dark' \| 'auto';\nexport type AuroraSearchPillGlow = 'subtle' \| 'medium' \| 'strong' \| 'none';\nexport type AuroraSpinMode = 'always' \| 'searching' \| 'hover' \| 'never';\n\nexport interface AuroraSearchPillProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {\n /* Controlled searching state /\n isSearching?: boolean;\n /* Uncontrolled default searching state /\n defaultSearching?: boolean;\n /* Callback fired when searching state toggles /\n onToggle?: (searching: boolean) => void;\n /* Main search title text shown when active (default: \"Search...\") /\n searchLabel?: string;\n /* List of badge sources to render in the active state /\n sources?: AuroraSearchSource[];\n /* Shortcut array of avatar image URLs /\n sourceAvatars?: string[];\n /* Color theme for the pill body: light, dark, or auto (follows dark mode) /\n theme?: AuroraSearchPillTheme;\n /* Size scale of the pill /\n size?: AuroraSearchPillSize;\n /* Glow intensity of the surrounding ambient aurora /\n glowIntensity?: AuroraSearchPillGlow;\n /* Speed of the rotating aurora beam /\n speed?: AuroraSearchPillSpeed;\n /\n When the aurora beam should rotate:\n * - 'always' (default): continuously rotates the aurora light wave all the time\n * - 'searching': only spins while searching/active, remains calm when idle\n * - 'hover': spins on cursor hover / focus\n * - 'never': static gradient, no rotation\n /\n spinMode?: AuroraSpinMode;\n /* Manually override spinning state /\n isSpinning?: boolean;\n /* Automatically toggle searching state at a set interval (demo mode) /\n autoCycle?: boolean;\n /* Interval in ms for autoCycle (default: 2400) /\n cycleInterval?: number;\n}\n\nconst DEFAULT_SOURCES: AuroraSearchSource[] = [\n { id: 'web', type: 'globe', label: 'Web' },\n { id: 'gradient', type: 'gradient', label: 'Neural Index' },\n { id: 'github', type: 'github', label: 'GitHub' },\n];\n\nconst SPEED_MAP: Record<AuroraSearchPillSpeed, string> = {\n slow: '5s',\n normal: '3.2s',\n fast: '1.8s',\n};\n\nconst GLOW_OPACITY: Record<AuroraSearchPillGlow, number> = {\n none: 0,\n subtle: 0.45,\n medium: 0.75,\n strong: 0.95,\n};\n\nconst SIZE_CONFIG: Record<\n AuroraSearchPillSize,\n {\n height: string;\n paddingDots: string;\n paddingSearch: string;\n dotSize: string;\n dotGap: string;\n fontSize: string;\n badgeSize: string;\n badgeMargin: string;\n minWidthSearch: string;\n }\n> = {\n sm: {\n height: 'h-10',\n paddingDots: 'px-4',\n paddingSearch: 'px-4',\n dotSize: 'w-1.5 h-1.5',\n dotGap: 'gap-1.5',\n fontSize: 'text-xs',\n badgeSize: 'w-4 h-4',\n badgeMargin: '-ml-1',\n minWidthSearch: 'min-w-[160px]',\n },\n md: {\n height: 'h-12',\n paddingDots: 'px-5',\n paddingSearch: 'px-5',\n dotSize: 'w-[6.5px] h-[6.5px]',\n dotGap: 'gap-[7px]',\n fontSize: 'text-sm sm:text-base',\n badgeSize: 'w-[22px] h-[22px]',\n badgeMargin: '-ml-1.5',\n minWidthSearch: 'min-w-[190px]',\n },\n lg: {\n height: 'h-14',\n paddingDots: 'px-6',\n paddingSearch: 'px-6',\n dotSize: 'w-2 h-2',\n dotGap: 'gap-2',\n fontSize: 'text-base sm:text-lg',\n badgeSize: 'w-6 h-6',\n badgeMargin: '-ml-2',\n minWidthSearch: 'min-w-[220px]',\n },\n};\n\n/\n AuroraSearchPill Component\n \n An ultra-premium AI search pill with an ambient rotating aurora conic glow,\n * 1.5px illuminated border track, and smooth transition between pulsing dots and\n * active search query with source badges.\n /\nexport const AuroraSearchPill = React.forwardRef<HTMLDivElement, AuroraSearchPillProps>(\n (\n {\n isSearching: controlledSearching,\n defaultSearching = false,\n onToggle,\n searchLabel = 'Search...',\n sources = DEFAULT_SOURCES,\n sourceAvatars,\n theme = 'auto',\n size = 'md',\n glowIntensity = 'medium',\n speed = 'normal',\n spinMode = 'always',\n isSpinning: controlledSpinning,\n autoCycle = false,\n cycleInterval = 2400,\n className,\n onClick,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref\n ) => {\n const isControlled = controlledSearching !== undefined;\n const [uncontrolledSearching, setUncontrolledSearching] = React.useState(defaultSearching);\n const active = isControlled ? controlledSearching : uncontrolledSearching;\n\n const [isHovered, setIsHovered] = React.useState(false);\n\n // Unique style injection ID for CSS custom property and keyframes\n const instanceId = React.useId().replace(/:/g, '');\n\n // Resolve active sources list (support direct sourceAvatars list)\n const activeSources = React.useMemo<AuroraSearchSource[]>(() => {\n if (sourceAvatars && sourceAvatars.length > 0) {\n return sourceAvatars.map((url, i): AuroraSearchSource => ({\n id: \\`avatar-\\${i}\\`,\n avatarUrl: url,\n label: \\`Source \\${i + 1}\\`,\n type: 'custom',\n }));\n }\n return sources;\n }, [sourceAvatars, sources]);\n\n // Determine whether the aurora beam should actively rotate (default: always on)\n const shouldSpin = React.useMemo(() => {\n if (controlledSpinning !== undefined) return controlledSpinning;\n if (spinMode === 'never') return false;\n if (spinMode === 'searching') return active;\n if (spinMode === 'hover') return isHovered;\n // Default: 'always' -> continuously rotates in both idle (dots) and searching states\n return true;\n }, [controlledSpinning, spinMode, isHovered, active]);\n\n // Auto demo cycling\n React.useEffect(() => {\n if (!autoCycle) return;\n const interval = setInterval(() => {\n if (isControlled) {\n onToggle?.(!active);\n } else {\n setUncontrolledSearching((prev) => {\n const next = !prev;\n onToggle?.(next);\n return next;\n });\n }\n }, cycleInterval);\n\n return () => clearInterval(interval);\n }, [autoCycle, cycleInterval, active, isControlled, onToggle]);\n\n const handleToggle = (e: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(e);\n if (!isControlled) {\n setUncontrolledSearching(!active);\n }\n onToggle?.(!active);\n };\n\n const sizeStyle = SIZE_CONFIG[size] \|\| SIZE_CONFIG.md;\n const animationDuration = SPEED_MAP[speed] \|\| SPEED_MAP.normal;\n const glowAlpha = GLOW_OPACITY[glowIntensity] ?? GLOW_OPACITY.medium;\n\n // Theme resolution for pill body\n const bodyThemeClass =\n theme === 'light'\n ? 'bg-white text-slate-900 border-white/60 shadow-sm'\n : theme === 'dark'\n ? 'bg-[#090d16] text-white border-white/10 shadow-lg shadow-black/40'\n : 'bg-white text-slate-900 dark:bg-[#090d16] dark:text-white border-white/60 dark:border-white/10 shadow-sm dark:shadow-black/40';\n\n const dotsColorClass =\n theme === 'light'\n ? 'bg-slate-900'\n : theme === 'dark'\n ? 'bg-white'\n : 'bg-slate-900 dark:bg-white';\n\n return (\n <div\n ref={ref}\n onClick={handleToggle}\n onMouseEnter={(e) => {\n setIsHovered(true);\n onMouseEnter?.(e);\n }}\n onMouseLeave={(e) => {\n setIsHovered(false);\n onMouseLeave?.(e);\n }}\n role=\"button\"\n tabIndex={0}\n aria-pressed={active}\n aria-label={active ? \\`Searching: \\${searchLabel}\\` : 'Activate AI Search'}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleToggle(e as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }}\n className={cn(\n 'relative inline-flex items-center justify-center cursor-pointer select-none isolate outline-none group',\n 'transition-transform duration-200 ease-out active:scale-[0.96] focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',\n className\n )}\n {...props}\n >\n {/ Scoped CSS for hardware accelerated conic rotation and pulse /}\n <style dangerouslySetInnerHTML={{\n __html: \\`\n @property --aurora-deg {\n syntax: '<angle>';\n initial-value: 0deg;\n inherits: false;\n }\n @keyframes spinAurora {\n from {\n --aurora-deg: 0deg;\n }\n to {\n --aurora-deg: 360deg;\n }\n }\n @keyframes dotPulse {\n 0%, 80%, 100% {\n opacity: 0.35;\n transform: scale(0.75);\n }\n 40% {\n opacity: 1;\n transform: scale(1.15);\n }\n }\n \\`,\n }} />\n\n {/ 1. Ambient Volumetric Glow (Aurora Ambient Glow) /}\n {glowIntensity !== 'none' && (\n <div\n className=\"absolute -inset-1.5 rounded-full pointer-events-none blur-md z-0 transition-opacity duration-300\"\n style={{\n opacity: glowAlpha,\n background: \\`conic-gradient(\n from var(--aurora-deg, 0deg) at 50% 50%,\n transparent 0deg,\n rgba(59, 130, 246, 0.75) 60deg,\n rgba(139, 92, 246, 0.9) 110deg,\n rgba(236, 72, 153, 0.95) 160deg,\n rgba(244, 63, 94, 0.8) 200deg,\n transparent 250deg,\n transparent 360deg\n )\\`,\n animation: shouldSpin\n ? \\`spinAurora \\${animationDuration} linear infinite\\`\n : undefined,\n }}\n />\n )}\n\n {/ 2. Sharp 1.5px Conic Border Track /}\n <div\n className=\"relative z-10 p-[1.5px] rounded-full transition-shadow duration-300 shadow-sm\"\n style={{\n background: \\`conic-gradient(\n from var(--aurora-deg, 0deg) at 50% 50%,\n rgba(226, 232, 240, 0.8) 0deg,\n rgba(59, 130, 246, 0.85) 60deg,\n rgba(139, 92, 246, 1) 110deg,\n rgba(236, 72, 153, 1) 160deg,\n rgba(244, 63, 94, 0.85) 200deg,\n rgba(226, 232, 240, 0.6) 260deg,\n rgba(226, 232, 240, 0.8) 360deg\n )\\`,\n animation: shouldSpin\n ? \\`spinAurora \\${animationDuration} linear infinite\\`\n : undefined,\n }}\n >\n {/ 3. Center Pill Body /}\n <div\n className={cn(\n 'relative z-20 rounded-full flex items-center justify-center overflow-hidden border',\n sizeStyle.height,\n active ? cn(sizeStyle.paddingSearch, sizeStyle.minWidthSearch) : sizeStyle.paddingDots,\n bodyThemeClass,\n 'transition-all duration-500 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]'\n )}\n >\n {/ STATE 1: Pulsing Dots (Idle/Listening) /}\n <div\n className={cn(\n 'flex items-center',\n sizeStyle.dotGap,\n 'transition-all duration-400 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]',\n active\n ? 'opacity-0 scale-50 -translate-y-2 pointer-events-none absolute'\n : 'opacity-100 scale-100 translate-y-0'\n )}\n >\n {[0, 1, 2].map((idx) => (\n <span\n key={idx}\n className={cn('rounded-full inline-block', sizeStyle.dotSize, dotsColorClass)}\n style={{\n animation: \\`dotPulse 1.4s ease-in-out infinite both\\`,\n animationDelay: \\`\\${idx === 0 ? -0.32 : idx === 1 ? -0.16 : 0}s\\`,\n }}\n />\n ))}\n </div>\n\n {/ STATE 2: Active Search Label + Overlapping Sources /}\n <div\n className={cn(\n 'flex items-center gap-2.5 whitespace-nowrap',\n 'transition-all duration-400 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]',\n active\n ? 'opacity-100 scale-100 translate-y-0'\n : 'opacity-0 scale-90 translate-y-2 pointer-events-none absolute'\n )}\n >\n {/ Search Title /}\n <span className={cn('font-medium tracking-tight', sizeStyle.fontSize)}>\n {searchLabel}\n </span>\n\n {/ Overlapping Sources Row /}\n {activeSources && activeSources.length > 0 && (\n <div className=\"inline-flex items-center pl-0.5\">\n {activeSources.map((src, i) => {\n const isFirst = i === 0;\n\n return (\n <div\n key={src.id \|\| i}\n title={src.label \|\| src.id}\n className={cn(\n 'rounded-full border-[1.5px] border-white dark:border-zinc-900 flex items-center justify-center shrink-0 shadow-xs overflow-hidden',\n sizeStyle.badgeSize,\n !isFirst && sizeStyle.badgeMargin\n )}\n style={{\n backgroundColor:\n src.type === 'globe'\n ? '#0b1120'\n : src.type === 'github'\n ? '#ffffff'\n : src.type === 'claude'\n ? '#d97757'\n : src.type === 'chatgpt'\n ? '#10a37f'\n : src.type === 'perplexity'\n ? '#1fb8cd'\n : src.type === 'custom' && src.bg\n ? src.bg\n : undefined,\n background:\n src.type === 'gradient'\n ? 'linear-gradient(135deg, #06b6d4 45%, #3b82f6 55%)'\n : undefined,\n }}\n >\n {src.avatarUrl ? (\n <img\n src={src.avatarUrl}\n alt={src.label \|\| src.id}\n className=\"w-full h-full object-cover\"\n />\n ) : src.icon ? (\n src.icon\n ) : src.type === 'globe' ? (\n <Globe className=\"w-3 h-3 text-sky-400 stroke-[2.5]\" />\n ) : src.type === 'github' ? (\n <svg className=\"w-3.5 h-3.5 fill-[#181717]\" viewBox=\"0 0 24 24\">\n <path d=\"M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z\" />\n </svg>\n ) : src.type === 'claude' ? (\n <Sparkles className=\"w-2.5 h-2.5 text-white\" />\n ) : src.type === 'chatgpt' ? (\n <div className=\"w-2 h-2 rounded-full bg-white\" />\n ) : src.type === 'perplexity' ? (\n <Sparkles className=\"w-2.5 h-2.5 text-white\" />\n ) : src.initials ? (\n <span className=\"text-[8px] font-bold text-white uppercase\">\n {src.initials}\n </span>\n ) : null}\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n);\n\nAuroraSearchPill.displayName = 'AuroraSearchPill';\n`\n};\n","export const templateAiStartup = {\n name: \"template-ai-startup\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ai-startup.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sparkles,\n ArrowRight,\n Cpu,\n Zap,\n Shield,\n Check,\n ChevronRight,\n Send,\n Terminal,\n Activity,\n} from \"lucide-react\";\n\nexport default function AiStartupTemplate() {\n const [selectedModel, setSelectedModel] = useState<\"DeepSeek-R1\" \| \"Claude-3.5\" \| \"GPT-4o\">(\"DeepSeek-R1\");\n const [promptText, setPromptText] = useState(\"Synthesize an edge-routed vector indexing service\");\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedOutput, setGeneratedOutput] = useState<string \| null>(\n \"✓ Tensor graph compiled. 4 regions provisioned. TTFT: 14ms. Throughput: 142 tok/s.\"\n );\n const [billingCycle, setBillingCycle] = useState<\"monthly\" \| \"annual\">(\"annual\");\n\n const handleSynthesize = (e: React.FormEvent) => {\n e.preventDefault();\n if (!promptText.trim()) return;\n setIsGenerating(true);\n setGeneratedOutput(null);\n setTimeout(() => {\n setIsGenerating(false);\n setGeneratedOutput(\n \\`✓ [\\${selectedModel}] execution complete. 2,140 tokens streamed with zero-copy serialization. Latency: 1.1ms.\\`\n );\n }, 900);\n };\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans selection:bg-indigo-500/30\">\n <header className=\"sticky top-0 z-30 backdrop-blur-xl border-b border-white/10 bg-[#08090d]/80\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <div className=\"h-7 w-7 rounded-lg bg-indigo-600 flex items-center justify-center text-white\">\n <Sparkles className=\"h-4 w-4\" />\n </div>\n <span className=\"font-bold text-sm\">Synthetix AI</span>\n </div>\n <button className=\"text-xs font-semibold px-3.5 py-1.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500\">\n Get API Key\n </button>\n </div>\n </header>\n\n <section className=\"pt-20 pb-16 px-4 sm:px-6 max-w-5xl mx-auto text-center\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-indigo-500/30 bg-indigo-500/10 text-indigo-400 text-xs font-mono mb-6\">\n <Cpu className=\"h-3 w-3\" />\n <span>Next-Gen Autonomous Inference Engine</span>\n </div>\n\n <h1 className=\"text-4xl sm:text-6xl font-extrabold tracking-tight mb-5 leading-tight\">\n Zero Latency. Real Autonomous Intelligence.\n </h1>\n\n <p className=\"text-sm sm:text-base text-zinc-400 max-w-2xl mx-auto mb-10\">\n Stream deep reasoning tokens directly to edge clients. Synthesize complex backend architectures,\n fine-tune proprietary weights, and run microsecond telemetry without cold starts.\n </p>\n\n <form\n onSubmit={handleSynthesize}\n className=\"max-w-2xl mx-auto p-2 rounded-2xl bg-zinc-900 border border-white/10 flex flex-col sm:flex-row gap-2 shadow-2xl\"\n >\n <input\n type=\"text\"\n value={promptText}\n onChange={(e) => setPromptText(e.target.value)}\n className=\"flex-1 bg-transparent px-3 py-2 text-xs text-white focus:outline-none\"\n />\n <button\n type=\"submit\"\n disabled={isGenerating}\n className=\"px-4 py-2 rounded-xl bg-indigo-600 text-white text-xs font-semibold shrink-0\"\n >\n {isGenerating ? \"Synthesizing...\" : \"Execute\"}\n </button>\n </form>\n\n <AnimatePresence>\n {generatedOutput && (\n <motion.div\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n className=\"mt-4 p-3.5 rounded-xl border border-indigo-500/30 bg-indigo-950/20 text-xs font-mono text-indigo-300 max-w-2xl mx-auto text-left\"\n >\n {generatedOutput}\n </motion.div>\n )}\n </AnimatePresence>\n </section>\n </div>\n );\n}\n`,\n};\n","export const templateModernSaas = {\n name: \"template-modern-saas\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-modern-saas.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Command, Search, GitBranch, CheckCircle2, ArrowUpRight, ChevronRight, Zap } from \"lucide-react\";\n\nexport default function ModernSaasTemplate() {\n const [activeTab, setActiveTab] = useState<\"branch\" \| \"edge\" \| \"telemetry\">(\"branch\");\n\n return (\n <div className=\"min-h-screen bg-[#090b10] text-zinc-100 font-sans\">\n <header className=\"sticky top-0 z-30 border-b border-white/10 bg-[#090b10]/80 backdrop-blur-xl\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between\">\n <span className=\"font-bold text-sm\">Aura Cloud</span>\n <button className=\"text-xs px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-medium\">\n Console\n </button>\n </div>\n </header>\n\n <section className=\"pt-20 pb-16 px-4 sm:px-6 max-w-5xl mx-auto text-center\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-blue-500/30 bg-blue-500/10 text-blue-400 text-xs font-mono mb-5\">\n <GitBranch className=\"h-3 w-3\" />\n <span>Continuous Edge Infrastructure</span>\n </div>\n\n <h1 className=\"text-4xl sm:text-6xl font-extrabold tracking-tight mb-5 leading-tight\">\n The Developer Cloud for Ultra-Fast Teams.\n </h1>\n\n <p className=\"text-sm sm:text-base text-zinc-400 max-w-xl mx-auto mb-10\">\n Push code, spawn instant ephemeral preview environments, and deploy across 300 global edge locations\n with zero configuration.\n </p>\n </section>\n </div>\n );\n}\n`,\n};\n","export const templateAnalyticsDashboard = {\n name: \"template-analytics-dashboard\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-analytics-dashboard.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { BarChart3, TrendingUp, Users, CreditCard, ArrowUpRight, Download } from \"lucide-react\";\n\nexport default function AnalyticsDashboardTemplate() {\n const [dateRange, setDateRange] = useState(\"30D\");\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 flex flex-col md:flex-row font-sans\">\n <aside className=\"w-full md:w-56 border-r border-white/10 p-4 shrink-0 bg-[#08090d]\">\n <div className=\"font-bold text-sm mb-6\">Prism Analytics</div>\n <nav className=\"space-y-1 text-xs\">\n <button className=\"w-full text-left px-3 py-2 rounded-lg bg-emerald-600 text-white font-semibold\">\n Overview\n </button>\n <button className=\"w-full text-left px-3 py-2 rounded-lg text-zinc-400 hover:text-white\">\n Inflows\n </button>\n </nav>\n </aside>\n <main className=\"flex-1 p-6\">\n <h1 className=\"text-2xl font-bold mb-4\">Executive Telemetry</h1>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateDevtoolsCli = {\n name: \"template-devtools-cli\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-devtools-cli.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Terminal, Copy, Check, Star } from \"lucide-react\";\n\nexport default function DevtoolsCliTemplate() {\n const [copied, setCopied] = useState(false);\n\n return (\n <div className=\"min-h-screen bg-[#090a10] text-zinc-100 font-mono p-6\">\n <header className=\"flex justify-between items-center mb-12\">\n <span className=\"font-bold text-sm\">HyperTerminal</span>\n </header>\n </div>\n );\n}\n`,\n};\n","export const templateCreativePortfolio = {\n name: \"template-creative-portfolio\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-creative-portfolio.tsx\",\n content: `\"use client\";\n\nimport React from \"react\";\nimport { ArrowUpRight, Award, X } from \"lucide-react\";\n\nexport default function CreativePortfolioTemplate() {\n return (\n <div className=\"min-h-screen bg-[#09090b] text-zinc-100 font-serif p-8\">\n <header className=\"flex justify-between items-center mb-16 font-sans\">\n <span className=\"font-bold uppercase tracking-tight\">Studio Monolith</span>\n </header>\n <h1 className=\"text-5xl font-light leading-tight mb-12\">\n Sculpting singular digital experiences for luxury institutions.\n </h1>\n </div>\n );\n}\n`,\n};\n","export const templateFintechApp = {\n name: \"template-fintech-app\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-fintech-app.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { CreditCard, Send, Lock, Unlock, ShieldCheck } from \"lucide-react\";\n\nexport default function FintechAppTemplate() {\n const [frozen, setFrozen] = useState(false);\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6\">\n <h1 className=\"text-2xl font-bold mb-4\">Apex Treasury</h1>\n </div>\n );\n}\n`,\n};\n","export const templateEcommerceStore = {\n name: \"template-ecommerce-store\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ecommerce-store.tsx\",\n content: `\"use client\";\n\nimport React from \"react\";\nimport { ShoppingBag, Heart, Truck, RotateCcw } from \"lucide-react\";\n\nexport default function EcommerceStoreTemplate() {\n return (\n <div className=\"min-h-screen bg-[#0c0d12] text-zinc-100 p-8\">\n <h1 className=\"text-3xl font-bold\">Atelier Objects</h1>\n </div>\n );\n}\n`,\n};\n","export const templateAgencyCreative = {\n name: \"template-agency-creative\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-agency-creative.tsx\",\n content: `\"use client\";\n\nimport React from \"react\";\nimport { ArrowUpRight, Sparkles } from \"lucide-react\";\n\nexport default function AgencyCreativeTemplate() {\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 p-8 font-sans\">\n <h1 className=\"text-6xl font-black uppercase\">Vanguard Digital</h1>\n </div>\n );\n}\n`,\n};\n","export const templateAiChat = {\n name: \"template-ai-chat\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ai-chat.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Send, Cpu, Copy, Check } from \"lucide-react\";\n\nexport default function AiChatTemplate() {\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 flex p-4 font-sans\">\n <div className=\"flex-1\">Cortex AI Assistant</div>\n </div>\n );\n}\n`,\n};\n","export const templateProjectManagement = {\n name: \"template-project-management\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-project-management.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Plus, Kanban } from \"lucide-react\";\n\nexport default function ProjectManagementTemplate() {\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 p-6 font-sans\">\n <h1 className=\"text-xl font-bold\">Orbit Flow</h1>\n </div>\n );\n}\n`,\n};\n","export const templateStartupWaitlist = {\n name: \"template-startup-waitlist\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-startup-waitlist.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { ArrowRight, Clock, Users } from \"lucide-react\";\n\nexport default function StartupWaitlistTemplate() {\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 p-8 text-center flex flex-col justify-center\">\n <h1 className=\"text-5xl font-extrabold mb-4\">Genesis Stealth</h1>\n </div>\n );\n}\n`,\n};\n","export const templateDocsPlatform = {\n name: \"template-docs-platform\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-docs-platform.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Search, Code2, Send } from \"lucide-react\";\n\nexport default function DocsPlatformTemplate() {\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 p-6\">\n <h1 className=\"text-3xl font-bold\">Codex Documentation</h1>\n </div>\n );\n}\n`,\n};\n","export const templateHealthcarePortal = {\n name: \"template-healthcare-portal\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-healthcare-portal.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Activity, Heart, Calendar, Pill, CheckCircle2, Video, TrendingUp } from \"lucide-react\";\n\nexport default function HealthcarePortalTemplate() {\n const [checkedMeds, setCheckedMeds] = useState<string[]>([\"med-1\"]);\n\n const vitals = [\n { label: \"Resting Heart Rate\", value: \"64\", unit: \"BPM\", delta: \"-3 bpm vs avg\", status: \"Optimal\" },\n { label: \"Blood Oxygen (SpO2)\", value: \"98.8\", unit: \"%\", delta: \"+0.4% healthy\", status: \"Optimal\" },\n { label: \"Sleep Recovery\", value: \"88\", unit: \"/100\", delta: \"7h 42m deep sleep\", status: \"High\" },\n { label: \"Heart Rate Var.\", value: \"58\", unit: \"ms\", delta: \"+7ms resilience\", status: \"Normal\" },\n ];\n\n const medications = [\n { id: \"med-1\", name: \"Atorvastatin Calcium\", dose: \"20mg • Morning with meal\", days: \"24 days left\" },\n { id: \"med-2\", name: \"Omega-3 Pure EPA/DHA\", dose: \"1000mg • Midday with water\", days: \"18 days left\" },\n { id: \"med-3\", name: \"Magnesium Glycinate\", dose: \"400mg • Evening before sleep\", days: \"6 days left\" },\n ];\n\n return (\n <div className=\"min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-8\">\n <header className=\"max-w-6xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <div>\n <span className=\"text-xs uppercase font-mono tracking-widest text-teal-400\">PulseCare Telehealth</span>\n <h1 className=\"text-2xl font-bold\">Patient Health Telemetry</h1>\n </div>\n <button className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-teal-600 hover:bg-teal-500 text-white flex items-center gap-2\">\n <Video className=\"h-3.5 w-3.5\" />\n <span>Book Specialist</span>\n </button>\n </header>\n\n <main className=\"max-w-6xl mx-auto py-8 space-y-6\">\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n {vitals.map((v) => (\n <div key={v.label} className=\"p-4 rounded-2xl border border-white/10 bg-[#12141c]\">\n <span className=\"text-xs text-zinc-400\">{v.label}</span>\n <div className=\"text-2xl sm:text-3xl font-bold font-mono my-1\">\n {v.value} <span className=\"text-xs font-normal opacity-60\">{v.unit}</span>\n </div>\n <span className=\"text-xs text-teal-400 font-semibold flex items-center gap-1\">\n <TrendingUp className=\"h-3 w-3\" />\n {v.delta}\n </span>\n </div>\n ))}\n </div>\n\n <div className=\"p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-4\">\n <h2 className=\"font-bold text-base flex items-center gap-2\">\n <Pill className=\"h-4 w-4 text-teal-400\" />\n <span>Daily Prescriptions</span>\n </h2>\n <div className=\"space-y-2\">\n {medications.map((m) => {\n const isDone = checkedMeds.includes(m.id);\n return (\n <div\n key={m.id}\n onClick={() =>\n setCheckedMeds((prev) =>\n prev.includes(m.id) ? prev.filter((i) => i !== m.id) : [...prev, m.id]\n )\n }\n className=\"p-3.5 rounded-xl border border-white/5 bg-[#181a24] flex items-center justify-between cursor-pointer hover:border-white/20\"\n >\n <div className=\"flex items-center gap-3\">\n <div\n className={\\`w-5 h-5 rounded-lg border flex items-center justify-center \\${\n isDone ? \"bg-teal-600 border-teal-600 text-white\" : \"border-zinc-500\"\n }\\`}\n >\n {isDone && <CheckCircle2 className=\"h-3.5 w-3.5\" />}\n </div>\n <div>\n <div className={\\`text-xs font-semibold \\${isDone ? \"line-through opacity-50\" : \"\"}\\`}>\n {m.name}\n </div>\n <div className=\"text-[10px] text-zinc-400\">{m.dose}</div>\n </div>\n </div>\n <span className=\"text-xs font-mono text-zinc-400\">{m.days}</span>\n </div>\n );\n })}\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateWeb3Dex = {\n name: \"template-web3-dex\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-web3-dex.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { ArrowDownUp, Zap, Wallet, TrendingUp } from \"lucide-react\";\n\nexport default function Web3DexTemplate() {\n const [fromAmount, setFromAmount] = useState(\"1.5\");\n const [isSwapping, setIsSwapping] = useState(false);\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 flex flex-col items-center justify-center\">\n <div className=\"w-full max-w-md p-6 rounded-3xl border border-white/10 bg-[#12141c] space-y-4 shadow-2xl\">\n <div className=\"flex justify-between items-center\">\n <span className=\"font-bold text-base\">NovaSwap DEX</span>\n <span className=\"text-xs px-2.5 py-1 rounded-full bg-cyan-500/10 text-cyan-400 font-mono\">12 Gwei</span>\n </div>\n\n <div className=\"p-4 rounded-2xl border border-white/5 bg-[#181a24] space-y-1\">\n <div className=\"flex justify-between text-xs text-zinc-400\">\n <span>You Pay</span>\n <span>Balance: 4.82 ETH</span>\n </div>\n <div className=\"flex justify-between items-center\">\n <input\n type=\"text\"\n value={fromAmount}\n onChange={(e) => setFromAmount(e.target.value)}\n className=\"text-2xl font-mono font-bold bg-transparent outline-none w-1/2\"\n />\n <span className=\"px-3 py-1 rounded-xl bg-white/10 font-bold text-xs\">ETH</span>\n </div>\n </div>\n\n <div className=\"flex justify-center -my-2\">\n <div className=\"p-2 rounded-xl bg-[#12141c] border border-white/10\">\n <ArrowDownUp className=\"h-4 w-4 text-cyan-400\" />\n </div>\n </div>\n\n <div className=\"p-4 rounded-2xl border border-white/5 bg-[#181a24] space-y-1\">\n <div className=\"flex justify-between text-xs text-zinc-400\">\n <span>You Receive (Est.)</span>\n <span>Balance: 14,850 USDC</span>\n </div>\n <div className=\"flex justify-between items-center\">\n <div className=\"text-2xl font-mono font-bold\">\n {(parseFloat(fromAmount \|\| \"0\") 2640.5).toFixed(2)}\n </div>\n <span className=\"px-3 py-1 rounded-xl bg-white/10 font-bold text-xs\">USDC</span>\n </div>\n </div>\n\n <button\n onClick={() => {\n setIsSwapping(true);\n setTimeout(() => setIsSwapping(false), 1200);\n }}\n className=\"w-full py-3.5 rounded-xl font-bold text-xs text-white bg-cyan-600 hover:bg-cyan-500 shadow-lg flex items-center justify-center gap-2 transition-transform active:scale-95\"\n >\n <Zap className=\"h-4 w-4\" />\n <span>{isSwapping ? \"Routing via Smart Contract...\" : \"Swap Tokens\"}</span>\n </button>\n </div>\n </div>\n );\n}\n`,\n};\n","export const templateEdtechLearning = {\n name: \"template-edtech-learning\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-edtech-learning.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { BookOpen, CheckCircle2, Code2, Award, Flame, Play } from \"lucide-react\";\n\nexport default function EdtechLearningTemplate() {\n const [selectedIdx, setSelectedIdx] = useState<number \| null>(1);\n const [isDone, setIsDone] = useState(false);\n\n return (\n <div className=\"min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-8\">\n <header className=\"max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <div className=\"flex items-center gap-2\">\n <BookOpen className=\"h-5 w-5 text-emerald-400\" />\n <span className=\"font-bold text-base\">Polymath Academy</span>\n </div>\n <div className=\"flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-xs font-semibold\">\n <Flame className=\"h-3.5 w-3.5 fill-current\" />\n <span>14 Day Streak</span>\n </div>\n </header>\n\n <main className=\"max-w-5xl mx-auto py-8 grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-4\">\n <div className=\"text-xs font-mono text-zinc-400\">Module 2 • Lesson 2.2</div>\n <h1 className=\"text-2xl font-bold\">Raft Consensus & Majority Quorums</h1>\n <p className=\"text-xs text-zinc-300 leading-relaxed\">\n In Raft, a cluster of 5 nodes requires an affirmative vote from at least 3 nodes before committing any state machine transition.\n </p>\n\n <div className=\"space-y-2 pt-2\">\n {[\n \"Any follower can commit independently without Leader confirmation.\",\n \"A quorum majority (3 of 5 nodes) ensures overlapping sets and prevents split-brain.\",\n \"Logs are replicated only during leader step-down events.\",\n ].map((ans, i) => (\n <button\n key={i}\n onClick={() => setSelectedIdx(i)}\n className={\\`w-full p-3.5 rounded-xl border text-left text-xs transition-colors \\${\n selectedIdx === i\n ? \"border-emerald-500 bg-emerald-500/10 text-white font-semibold\"\n : \"border-white/10 bg-[#181a24] text-zinc-300\"\n }\\`}\n >\n {ans}\n </button>\n ))}\n </div>\n\n <button\n onClick={() => setIsDone(true)}\n className=\"px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-500 shadow-md flex items-center gap-2 mt-4\"\n >\n <Play className=\"h-3.5 w-3.5 fill-current\" />\n <span>{isDone ? \"Solution Verified ✓ (+150 XP)\" : \"Verify Solution\"}</span>\n </button>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateConferenceEvent = {\n name: \"template-conference-event\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-conference-event.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Calendar, MapPin, Ticket, Sparkles, Check } from \"lucide-react\";\n\nexport default function ConferenceEventTemplate() {\n const [selectedDay, setSelectedDay] = useState(\"day-1\");\n\n const schedule = [\n { time: \"09:00 AM\", title: \"Opening Keynote: Autonomous Inference at Edge\", speaker: \"Dr. Elena Vance\" },\n { time: \"11:00 AM\", title: \"Deterministic Design Systems for 100M+ Users\", speaker: \"Marcus Sterling\" },\n { time: \"02:00 PM\", title: \"Zero-Downtime eBPF State Replication\", speaker: \"Hiroshi Tanaka\" },\n ];\n\n return (\n <div className=\"min-h-screen bg-[#08090e] text-zinc-100 font-sans p-6 sm:p-12\">\n <header className=\"max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <span className=\"font-extrabold text-base tracking-tight\">Vertex Summit 2027</span>\n <button className=\"px-4 py-2 rounded-xl text-xs font-bold text-white bg-purple-600 hover:bg-purple-500 shadow-md\">\n Claim Pass\n </button>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-16 text-center space-y-6\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-mono\">\n <Calendar className=\"h-3.5 w-3.5\" />\n <span>October 14–16, 2027 • San Francisco, CA & Virtual</span>\n </div>\n\n <h1 className=\"text-4xl sm:text-6xl font-black tracking-tight leading-tight\">\n The Convergence of Autonomous Systems\n </h1>\n\n <p className=\"text-sm text-zinc-400 max-w-xl mx-auto\">\n Gathering 4,500+ systems engineers and AI leaders to build the future of software infrastructure.\n </p>\n\n <div className=\"p-6 rounded-2xl border border-white/10 bg-[#12141c] text-left space-y-3 mt-8\">\n <h2 className=\"font-bold text-sm\">Day 1 Schedule (Oct 14)</h2>\n <div className=\"space-y-2\">\n {schedule.map((item) => (\n <div key={item.time} className=\"p-3 rounded-xl border border-white/5 bg-[#181a24] flex items-center justify-between text-xs\">\n <div>\n <div className=\"font-bold\">{item.title}</div>\n <div className=\"text-[10px] text-zinc-400\">{item.speaker}</div>\n </div>\n <span className=\"font-mono text-purple-400 font-bold\">{item.time}</span>\n </div>\n ))}\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateAudioPodcast = {\n name: \"template-audio-podcast\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-audio-podcast.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Headphones, Play, Pause, RotateCcw, RotateCw, Download } from \"lucide-react\";\n\nexport default function AudioPodcastTemplate() {\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentSec, setCurrentSec] = useState(255); // 04:15\n\n const chapters = [\n { time: \"00:00\", title: \"Cold Open & Benchmarks\" },\n { time: \"04:15\", title: \"Lockless Ring Buffers vs Channels\" },\n { time: \"18:40\", title: \"Kernel-Bypass Networking with io_uring\" },\n ];\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 pb-24\">\n <header className=\"max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <div className=\"flex items-center gap-2\">\n <Headphones className=\"h-5 w-5 text-indigo-400\" />\n <span className=\"font-bold text-base\">EchoWave Studio</span>\n </div>\n <button className=\"px-3.5 py-1.5 rounded-xl border border-white/10 text-xs hover:bg-white/10\">\n Subscribe RSS\n </button>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-10 space-y-6\">\n <div className=\"p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-3\">\n <span className=\"text-xs font-mono text-indigo-400\">Episode 148 • 54m 20s</span>\n <h1 className=\"text-2xl sm:text-3xl font-bold\">Zero-Cost Abstractions & High-Throughput I/O</h1>\n <p className=\"text-xs text-zinc-400\">Featuring Linus M. Discussing memory barriers and lock-free concurrency queues.</p>\n </div>\n\n <div className=\"space-y-2\">\n <h2 className=\"font-bold text-xs uppercase tracking-wider text-zinc-400\">Chapters</h2>\n {chapters.map((ch) => (\n <div key={ch.time} className=\"p-3.5 rounded-xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs\">\n <span>{ch.title}</span>\n <span className=\"font-mono text-indigo-400\">{ch.time}</span>\n </div>\n ))}\n </div>\n </main>\n\n <footer className=\"fixed bottom-0 inset-x-0 p-4 border-t border-white/10 bg-[#08090d]/95 backdrop-blur-xl\">\n <div className=\"max-w-4xl mx-auto flex items-center justify-between gap-4\">\n <button\n onClick={() => setIsPlaying(!isPlaying)}\n className=\"p-3 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white shadow-md\"\n >\n {isPlaying ? <Pause className=\"h-5 w-5\" /> : <Play className=\"h-5 w-5 fill-current ml-0.5\" />}\n </button>\n <span className=\"text-xs font-mono text-zinc-400\">04:15 / 54:20</span>\n </div>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateRealEstate = {\n name: \"template-real-estate\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-real-estate.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Building2, MapPin, Calendar, Users, Check } from \"lucide-react\";\n\nexport default function RealEstateTemplate() {\n const [nights, setNights] = useState(4);\n const baseRate = 2450;\n\n return (\n <div className=\"min-h-screen bg-[#0c0d12] text-zinc-100 font-sans p-6 sm:p-12\">\n <header className=\"max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <span className=\"font-serif text-base uppercase tracking-widest font-light\">Haven Luxury Estates</span>\n <span className=\"text-xs uppercase tracking-widest font-mono text-zinc-400\">Aspen • Kyoto • Zurich</span>\n </header>\n\n <main className=\"max-w-5xl mx-auto py-12 space-y-8\">\n <div className=\"space-y-3\">\n <div className=\"text-xs font-mono text-zinc-400\">Aspen Valley, Colorado • Residence #04</div>\n <h1 className=\"text-3xl sm:text-5xl font-serif font-light\">The Obsidian Pavilion</h1>\n <p className=\"text-xs sm:text-sm text-zinc-400 max-w-2xl leading-relaxed\">\n A 9,400 sq.ft cantilevered cedar and blackened steel retreat with panoramic mountain views and private helipad.\n </p>\n </div>\n\n <div className=\"p-6 rounded-2xl border border-white/10 bg-[#14161f] flex flex-col sm:flex-row justify-between items-center gap-4\">\n <div>\n <div className=\"text-xs text-zinc-400\">Nightly Rate: $2,450 USD</div>\n <div className=\"text-2xl font-serif font-bold mt-0.5\">\n \\${(baseRate * nights).toLocaleString()} USD <span className=\"text-xs font-sans font-normal text-zinc-400\">({nights} nights)</span>\n </div>\n </div>\n <button className=\"px-6 py-3 rounded-xl text-xs font-serif uppercase tracking-wider font-bold bg-white text-black hover:bg-zinc-200 shadow-md\">\n Reserve Residence\n </button>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateUptimeStatus = {\n name: \"template-uptime-status\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-uptime-status.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { CheckCircle2, ShieldCheck, Server, Bell, Globe } from \"lucide-react\";\n\nexport default function UptimeStatusTemplate() {\n const services = [\n { name: \"Global Anycast Edge CDN\", uptime: \"100.0%\", ping: \"11ms\" },\n { name: \"Authentication Engine & SSO\", uptime: \"99.99%\", ping: \"24ms\" },\n { name: \"Distributed Vector Indexing\", uptime: \"99.97%\", ping: \"38ms\" },\n { name: \"PostgreSQL Database Clusters\", uptime: \"99.95%\", ping: \"14ms\" },\n ];\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 sm:p-12\">\n <header className=\"max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <div className=\"flex items-center gap-2 font-bold text-base\">\n <ShieldCheck className=\"h-5 w-5 text-emerald-500\" />\n <span>Beacon Status</span>\n </div>\n <button className=\"px-3.5 py-1.5 rounded-xl border border-white/10 text-xs hover:bg-white/10 flex items-center gap-1.5\">\n <Bell className=\"h-3.5 w-3.5\" />\n <span>Subscribe</span>\n </button>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-10 space-y-6\">\n <div className=\"p-5 rounded-2xl border border-emerald-500/30 bg-emerald-500/10 flex items-center justify-between text-xs text-emerald-400 font-semibold\">\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"h-5 w-5\" />\n <span>All Core Services Operational — 99.994% Availability</span>\n </div>\n <span className=\"font-mono\">Past 90 Days</span>\n </div>\n\n <div className=\"space-y-3\">\n {services.map((s) => (\n <div key={s.name} className=\"p-4 rounded-xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs\">\n <div>\n <div className=\"font-bold\">{s.name}</div>\n <div className=\"text-[10px] text-zinc-400 font-mono\">Latency: {s.ping}</div>\n </div>\n <span className=\"text-xs font-mono font-bold text-emerald-400\">{s.uptime}</span>\n </div>\n ))}\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateAgentWorkflow = {\n name: \"template-agent-workflow\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-agent-workflow.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Play, Zap, Database, Cpu, Send, CheckCircle2 } from \"lucide-react\";\n\nexport default function AgentWorkflowTemplate() {\n const [isRunning, setIsRunning] = useState(false);\n const [log, setLog] = useState<string \| null>(null);\n\n const handleRun = () => {\n setIsRunning(true);\n setLog(\"Trigger received. Querying vector database...\");\n setTimeout(() => {\n setLog(\"Claude 3.5 Sonnet generated solution. Dispatching webhook...\");\n setTimeout(() => {\n setIsRunning(false);\n setLog(\"✓ Execution completed in 680ms. Payload delivered.\");\n }, 700);\n }, 800);\n };\n\n return (\n <div className=\"min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 sm:p-12\">\n <header className=\"max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <span className=\"font-bold text-base\">Nexus Nodes Canvas</span>\n <button\n onClick={handleRun}\n disabled={isRunning}\n className=\"px-4 py-2 rounded-xl text-xs font-bold text-white bg-blue-600 hover:bg-blue-500 flex items-center gap-2 shadow-md\"\n >\n <Play className=\"h-3.5 w-3.5 fill-current\" />\n <span>{isRunning ? \"Running...\" : \"Test Workflow\"}</span>\n </button>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-12 space-y-6\">\n <div className=\"grid grid-cols-1 sm:grid-cols-4 gap-3\">\n {[\n { name: \"Webhook Ingress\", icon: Zap, color: \"text-amber-400\" },\n { name: \"Pinecone Retrieval\", icon: Database, color: \"text-cyan-400\" },\n { name: \"Claude 3.5 Reasoning\", icon: Cpu, color: \"text-blue-400\" },\n { name: \"Slack Dispatcher\", icon: Send, color: \"text-emerald-400\" },\n ].map((n) => {\n const Icon = n.icon;\n return (\n <div key={n.name} className=\"p-4 rounded-2xl border border-white/10 bg-[#12141c] space-y-2 text-xs\">\n <Icon className={\\`h-4 w-4 \\${n.color}\\`} />\n <div className=\"font-bold\">{n.name}</div>\n </div>\n );\n })}\n </div>\n\n {log && (\n <div className=\"p-4 rounded-xl border border-white/10 bg-[#06070a] font-mono text-xs text-blue-400\">\n {log}\n </div>\n )}\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateRestaurantCulinary = {\n name: \"template-restaurant-culinary\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-restaurant-culinary.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Utensils, Calendar, Users, Award, Wine } from \"lucide-react\";\n\nexport default function RestaurantCulinaryTemplate() {\n const [guests, setGuests] = useState(2);\n const [confirmed, setConfirmed] = useState(false);\n\n return (\n <div className=\"min-h-screen bg-[#0e0d0b] text-[#f5f2eb] font-sans p-6 sm:p-12\">\n <header className=\"max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-[#2e2b24]\">\n <div>\n <span className=\"text-[10px] uppercase font-mono tracking-widest text-amber-500\">Komorebi Gastronomy</span>\n <h1 className=\"text-xl font-serif\">Contemporary Seasonal Dining</h1>\n </div>\n <div className=\"flex items-center gap-1.5 text-xs text-amber-500 font-serif\">\n <Award className=\"h-4 w-4\" />\n <span>Two Michelin Stars</span>\n </div>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-12 space-y-8\">\n <div className=\"space-y-2 text-center\">\n <h2 className=\"text-3xl sm:text-4xl font-serif font-light\">Autumn Tasting Menu (8 Courses)</h2>\n <p className=\"text-xs text-[#b8b3a5] max-w-xl mx-auto\">\n Hokkaido sea urchin, wild matsutake, and binchotan-charred Miyazaki A5 wagyu tenderloin.\n </p>\n </div>\n\n <div className=\"p-6 rounded-3xl border border-[#2e2b24] bg-[#171512] max-w-md mx-auto space-y-4\">\n <div className=\"font-serif font-bold text-sm\">Table Reservation</div>\n <div className=\"flex gap-2\">\n {[2, 4, 6].map((g) => (\n <button\n key={g}\n onClick={() => setGuests(g)}\n className={\\`flex-1 py-2 rounded-xl border text-xs font-serif \\${\n guests === g ? \"bg-amber-700 text-white border-amber-700\" : \"border-[#2e2b24] text-[#b8b3a5]\"\n }\\`}\n >\n {g} Guests\n </button>\n ))}\n </div>\n\n <button\n onClick={() => setConfirmed(true)}\n className=\"w-full py-3 rounded-xl font-serif uppercase tracking-widest text-xs font-bold text-white bg-amber-700 hover:bg-amber-600 shadow-lg\"\n >\n {confirmed ? \"Table Reserved ✓\" : \"Reserve Table for \" + guests}\n </button>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateHelpCenter = {\n name: \"template-help-center\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-help-center.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Search, LifeBuoy, CreditCard, ShieldCheck, Code2, ChevronDown } from \"lucide-react\";\n\nexport default function HelpCenterTemplate() {\n const [query, setQuery] = useState(\"\");\n\n const categories = [\n { title: \"Getting Started\", icon: LifeBuoy, count: \"14 articles\" },\n { title: \"Billing & Invoicing\", icon: CreditCard, count: \"9 articles\" },\n { title: \"Security & 2FA\", icon: ShieldCheck, count: \"18 articles\" },\n { title: \"Developer API\", icon: Code2, count: \"22 articles\" },\n ];\n\n return (\n <div className=\"min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-12\">\n <header className=\"max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10\">\n <span className=\"font-bold text-base\">Resolv Support Desk</span>\n <button className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-md\">\n Submit Ticket\n </button>\n </header>\n\n <main className=\"max-w-4xl mx-auto py-12 space-y-8 text-center\">\n <h1 className=\"text-3xl sm:text-4xl font-extrabold\">How can our support team help you?</h1>\n\n <div className=\"max-w-md mx-auto relative\">\n <Search className=\"absolute left-3.5 top-3 h-4 w-4 opacity-50\" />\n <input\n type=\"text\"\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n placeholder=\"Search guides, 2FA, billing...\"\n className=\"w-full pl-10 pr-4 py-2.5 rounded-xl border border-white/10 bg-[#12141c] text-xs outline-none\"\n />\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-left\">\n {categories.map((c) => {\n const Icon = c.icon;\n return (\n <div key={c.title} className=\"p-4 rounded-2xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs\">\n <div className=\"flex items-center gap-3\">\n <div className=\"p-2 rounded-xl bg-indigo-500/10 text-indigo-400\">\n <Icon className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"font-bold\">{c.title}</div>\n <div className=\"text-[10px] text-zinc-400\">{c.count}</div>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateFitnessAthletics = {\n name: \"template-fitness-athletics\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-fitness-athletics.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Activity, Heart, Flame, Trophy, Timer, Plus, CheckCircle2 } from \"lucide-react\";\n\nexport default function FitnessAthleticsTemplate() {\n const [bpm, setBpm] = useState(158);\n const [intervals, setIntervals] = useState([\n { title: \"Dynamic Hip Mobility\", target: \"10 min • Zone 1\", done: true },\n { title: \"Progressive Aerobic Build\", target: \"15 min @ 140 BPM\", done: true },\n { title: \"4 x 1,000m Lactate Repeats\", target: \"4 reps @ 3:42/km\", done: false },\n ]);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Activity className=\"w-5 h-5 text-rose-500\" />\n <span className=\"font-bold text-base\">AeroPulse Athletics</span>\n </div>\n <div className=\"text-xs font-mono px-3 py-1.5 rounded-full border\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n Recovery: 88% Ready\n </div>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n <div className=\"p-4 rounded-xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <span className=\"text-xs opacity-70\">Daily Strain</span>\n <div className=\"text-2xl font-extrabold mt-1\">14.8 / 21.0</div>\n </div>\n <div className=\"p-4 rounded-xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <span className=\"text-xs opacity-70\">Current Target BPM</span>\n <div className=\"text-2xl font-extrabold text-indigo-600 mt-1\">{bpm} BPM</div>\n </div>\n <div className=\"p-4 rounded-xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <span className=\"text-xs opacity-70\">Resting Heart Rate</span>\n <div className=\"text-2xl font-extrabold text-emerald-600 mt-1\">48 bpm</div>\n </div>\n </div>\n\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h3 className=\"font-bold text-sm mb-2\">Cardio Zone Spectrum</h3>\n <input\n type=\"range\"\n min=\"100\"\n max=\"195\"\n value={bpm}\n onChange={(e) => setBpm(Number(e.target.value))}\n className=\"w-full accent-indigo-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateWildernessTravel = {\n name: \"template-wilderness-travel\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-wilderness-travel.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Compass, Mountain, Scale, Radio, Tent } from \"lucide-react\";\n\nexport default function WildernessTravelTemplate() {\n const [baseWeight, setBaseWeight] = useState(6.4);\n const [foodDays, setFoodDays] = useState(6);\n const totalWeight = (baseWeight + foodDays * 0.75 + 2.0).toFixed(1);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Compass className=\"w-5 h-5 text-emerald-600\" />\n <span className=\"font-bold text-base\">NomadRoute Expeditions</span>\n </div>\n <button className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white bg-emerald-600\">\n Reserve Permits\n </button>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h2 className=\"text-xl font-extrabold mb-1\">Patagonia High Icefield Crossing</h2>\n <p className=\"text-xs opacity-70\">148 km • +6,850m Cumulative Gain • 8 Days</p>\n </div>\n\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"font-bold text-sm\">Skin-Out Pack Weight: {totalWeight} kg</h3>\n <span className=\"text-xs px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-600 font-bold\">Ultralight Load</span>\n </div>\n <input\n type=\"range\"\n min=\"4.0\"\n max=\"12.0\"\n step=\"0.2\"\n value={baseWeight}\n onChange={(e) => setBaseWeight(parseFloat(e.target.value))}\n className=\"w-full accent-emerald-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateDevopsKubernetes = {\n name: \"template-devops-kubernetes\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-devops-kubernetes.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Server, Cpu, Database, Terminal, Search, SlidersHorizontal } from \"lucide-react\";\n\nexport default function DevopsKubernetesTemplate() {\n const [canary, setCanary] = useState(15);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b font-sans\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Server className=\"w-5 h-5 text-indigo-600\" />\n <span className=\"font-bold text-base\">KubeOrbit Cloud</span>\n </div>\n <span className=\"text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 font-mono\">\n 242/248 Pods Healthy\n </span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border font-sans\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h3 className=\"font-bold text-sm mb-2\">Canary Ingress Weight: {canary}%</h3>\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={canary}\n onChange={(e) => setCanary(Number(e.target.value))}\n className=\"w-full accent-indigo-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateAudioDaw = {\n name: \"template-audio-daw\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-audio-daw.tsx\",\n content: `\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { Play, Pause, Disc, Sliders, Volume2, ShoppingBag } from \"lucide-react\";\n\nexport default function AudioDawTemplate() {\n const [isPlaying, setIsPlaying] = useState(false);\n const [bpm, setBpm] = useState(140);\n const [step, setStep] = useState(0);\n\n useEffect(() => {\n let interval: NodeJS.Timeout;\n if (isPlaying) {\n interval = setInterval(() => setStep((s) => (s + 1) % 16), (60 / bpm / 4) * 1000);\n }\n return () => clearInterval(interval);\n }, [isPlaying, bpm]);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Disc className=\"w-5 h-5 text-purple-600\" />\n <span className=\"font-bold text-base\">SoundForge Studio</span>\n </div>\n <button onClick={() => setIsPlaying(!isPlaying)} className=\"px-4 py-2 rounded-xl text-xs font-semibold text-white bg-purple-600 flex items-center gap-1.5\">\n {isPlaying ? <Pause className=\"w-3.5 h-3.5\" /> : <Play className=\"w-3.5 h-3.5\" />}\n <span>{isPlaying ? \"Pause\" : \"Play Groove\"}</span>\n </button>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex justify-between items-center mb-4\">\n <h3 className=\"font-bold text-sm\">16-Step Beat Grid ({bpm} BPM)</h3>\n <span className=\"font-mono text-xs opacity-60\">Step {step + 1} / 16</span>\n </div>\n <div className=\"grid grid-cols-16 gap-1\">\n {Array.from({ length: 16 }).map((_, i) => (\n <div key={i} className={\\`h-10 rounded border \\${step === i && isPlaying ? \"bg-purple-600 text-white\" : \"bg-zinc-100 dark:bg-zinc-800\"}\\`} />\n ))}\n </div>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateGamifiedHabits = {\n name: \"template-gamified-habits\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-gamified-habits.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Shield, Sword, Sparkles, Coins, Flame, CheckCircle2 } from \"lucide-react\";\n\nexport default function GamifiedHabitsTemplate() {\n const [xp, setXp] = useState(2450);\n const [gold, setGold] = useState(1420);\n const [quests, setQuests] = useState([\n { id: 1, title: \"Slay 90m Deep Focus Work Block\", xp: 180, done: false },\n { id: 2, title: \"Drink 2.5L Water Elixir\", xp: 60, done: true },\n ]);\n\n const toggle = (id: number, questXp: number) => {\n setQuests((prev) =>\n prev.map((q) => {\n if (q.id === id && !q.done) {\n setXp((x) => x + questXp);\n setGold((g) => g + 40);\n return { ...q, done: true };\n }\n return q;\n })\n );\n };\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Shield className=\"w-5 h-5 text-amber-500\" />\n <span className=\"font-bold text-base\">QuestCraft RPG</span>\n </div>\n <div className=\"text-xs font-mono font-bold text-amber-500 flex items-center gap-1\">\n <Coins className=\"w-3.5 h-3.5\" />\n <span>{gold} Gold</span>\n </div>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h2 className=\"font-extrabold text-base mb-1\">Level 14 Paladin • {xp} / 3,000 XP</h2>\n <div className=\"w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden\">\n <div className=\"h-full bg-amber-500\" style={{ width: \\`\\${(xp / 3000) * 100}%\\` }} />\n </div>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateGlobalLogistics = {\n name: \"template-global-logistics\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-global-logistics.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Ship, Truck, Thermometer, Anchor, Navigation } from \"lucide-react\";\n\nexport default function GlobalLogisticsTemplate() {\n const [activeStage, setActiveStage] = useState(2);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Anchor className=\"w-5 h-5 text-cyan-600\" />\n <span className=\"font-bold text-base\">Vanguard Logistics</span>\n </div>\n <span className=\"text-xs font-mono text-emerald-600 font-bold\">14 Vessels Active</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <span className=\"text-xs font-mono opacity-60\">MASTER BILL OF LADING</span>\n <h2 className=\"text-xl font-extrabold font-mono mt-1\">BOL-849204-HKG</h2>\n <p className=\"text-xs opacity-70 mt-1\">Shenzhen (YTN) → Rotterdam Gateway (RTM)</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateGamingEsports = {\n name: \"template-gaming-esports\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-gaming-esports.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Trophy, Tv, Users, Target, Crown } from \"lucide-react\";\n\nexport default function GamingEsportsTemplate() {\n const [votes, setVotes] = useState(64);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Trophy className=\"w-5 h-5 text-rose-500\" />\n <span className=\"font-bold text-base\">Valkyrie Esports</span>\n </div>\n <span className=\"text-xs font-bold text-rose-500 font-mono\">LIVE • 284k Viewers</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border flex items-center justify-between\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"font-extrabold text-lg\">Sentinels (11)</div>\n <div className=\"font-mono text-xs opacity-60\">Map 5 Inferno</div>\n <div className=\"font-extrabold text-lg\">Cloud9 (9)</div>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateArchitectureSpatial = {\n name: \"template-architecture-spatial\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-architecture-spatial.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Layers, Sun, Building, FileText } from \"lucide-react\";\n\nexport default function ArchitectureSpatialTemplate() {\n const [hour, setHour] = useState(13);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Building className=\"w-5 h-5 text-amber-600\" />\n <span className=\"font-bold text-base\">Arcform Spatial</span>\n </div>\n <span className=\"text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 font-mono\">\n LEED Platinum • 620 m²\n </span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h3 className=\"font-bold text-sm mb-2\">Solar Daylight Azimuth ({hour}:00 JST)</h3>\n <input\n type=\"range\"\n min=\"8\"\n max=\"18\"\n value={hour}\n onChange={(e) => setHour(Number(e.target.value))}\n className=\"w-full accent-amber-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateCybersecuritySoc = {\n name: \"template-cybersecurity-soc\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-cybersecurity-soc.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { ShieldAlert, Terminal, Lock, CheckCircle2 } from \"lucide-react\";\n\nexport default function CybersecuritySocTemplate() {\n const [quarantined, setQuarantined] = useState(false);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b font-sans\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <ShieldAlert className=\"w-5 h-5 text-rose-600\" />\n <span className=\"font-bold text-base\">Aegis SOC</span>\n </div>\n <button\n onClick={() => setQuarantined(!quarantined)}\n className={\\`px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white \\${quarantined ? \"bg-gray-600\" : \"bg-rose-600\"}\\`}\n >\n {quarantined ? \"Host Air-Gapped\" : \"Isolate Host\"}\n </button>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs text-rose-600 font-bold mb-1\">CRITICAL • MITRE T1021.002</div>\n <h2 className=\"text-base font-extrabold font-sans\">Pass-the-Hash Lateral Movement via SMB</h2>\n <p className=\"text-xs opacity-70 mt-1\">Target Host: srv-dc-primary-01.internal (10.240.12.8)</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateCleantechAgriculture = {\n name: \"template-cleantech-agriculture\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-cleantech-agriculture.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Sprout, Droplets, Sun, Wind, Leaf } from \"lucide-react\";\n\nexport default function CleantechAgricultureTemplate() {\n const [ph, setPh] = useState(6.2);\n const [red, setRed] = useState(65);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Sprout className=\"w-5 h-5 text-emerald-600\" />\n <span className=\"font-bold text-base\">Verdant IoT</span>\n </div>\n <span className=\"text-xs font-mono text-emerald-600 font-bold\">98.4% Water Recycled</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h3 className=\"font-bold text-sm mb-2\">Hydroponic pH Level: {ph}</h3>\n <input\n type=\"range\"\n min=\"5.5\"\n max=\"7.0\"\n step=\"0.1\"\n value={ph}\n onChange={(e) => setPh(parseFloat(e.target.value))}\n className=\"w-full accent-emerald-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateJurisVault = {\n name: \"template-juris-vault\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-juris-vault.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Scale, FileText, CheckCircle2, AlertTriangle, PenTool } from \"lucide-react\";\n\nexport default function JurisVaultTemplate() {\n const [signed, setSigned] = useState(false);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Scale className=\"w-5 h-5 text-indigo-600\" />\n <span className=\"font-bold text-base\">JurisVault AI</span>\n </div>\n <button\n onClick={() => setSigned(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white bg-indigo-600 transition-opacity hover:opacity-90\"\n >\n {signed ? \"Executed & Signed\" : \"Approve & E-Sign\"}\n </button>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs text-rose-600 font-bold mb-1\">CRITICAL RISK • SEC-8.2</div>\n <h2 className=\"text-base font-bold\">Limitation of Liability & Consequential Damages</h2>\n <p className=\"text-xs opacity-70 mt-2\">Counterparty proposes uncapped liability. Recommended: Insert 2x ACV fallback clause.</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateOrbitalxMission = {\n name: \"template-orbitalx-mission\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-orbitalx-mission.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Satellite, Radio, Compass, Zap, Terminal } from \"lucide-react\";\n\nexport default function OrbitalXTemplate() {\n const [armed, setArmed] = useState(false);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b font-sans\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Satellite className=\"w-5 h-5 text-blue-600\" />\n <span className=\"font-bold text-base\">OrbitalX Operations</span>\n </div>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">AOS in 04m 12s</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs opacity-60\">ORBITAL VELOCITY: 7.58 km/s • LEO 545 km</div>\n <h2 className=\"text-base font-bold font-sans mt-1\">AstraConstellation-07 (NORAD 58210)</h2>\n <p className=\"text-xs opacity-75 mt-2\">Propellant: 78.4% Hydrazine • Solar: 1,420 W Nominal</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateCineboardStudio = {\n name: \"template-cineboard-studio\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-cineboard-studio.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Clapperboard, Film, Camera, Video } from \"lucide-react\";\n\nexport default function CineBoardTemplate() {\n const [ratio, setRatio] = useState(\"2.39:1\");\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Clapperboard className=\"w-5 h-5 text-rose-600\" />\n <span className=\"font-bold text-base\">CineBoard Studio</span>\n </div>\n <div className=\"text-xs font-mono font-bold bg-rose-600/10 text-rose-600 px-2 py-1 rounded\">\n Framing: {ratio}\n </div>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h2 className=\"text-base font-bold\">SCENE 14A • SHOT 01 (EXT. HIGHWAY DUSK)</h2>\n <p className=\"text-xs opacity-75 mt-1\">Cooke Anamorphic 40mm T2.3 • Drone Push-In (3.2m/s)</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateDomusLiving = {\n name: \"template-domus-living\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-domus-living.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Home, Thermometer, Sun, Zap, ShieldCheck } from \"lucide-react\";\n\nexport default function DomusLivingTemplate() {\n const [temp, setTemp] = useState(21.5);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Home className=\"w-5 h-5 text-emerald-600\" />\n <span className=\"font-bold text-base\">Domus Living</span>\n </div>\n <span className=\"text-xs font-semibold text-emerald-600\">Perimeter Armed</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h3 className=\"font-bold text-sm mb-2\">Living Pavilion Climate: {temp}°C</h3>\n <input\n type=\"range\"\n min=\"18.0\"\n max=\"26.0\"\n step=\"0.5\"\n value={temp}\n onChange={(e) => setTemp(parseFloat(e.target.value))}\n className=\"w-full accent-emerald-600\"\n />\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateHyperionEv = {\n name: \"template-hyperion-ev\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-hyperion-ev.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Car, BatteryCharging, Zap, Gauge } from \"lucide-react\";\n\nexport default function HyperionEvTemplate() {\n const [soc, setSoc] = useState(74);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Car className=\"w-5 h-5 text-cyan-600\" />\n <span className=\"font-bold text-base\">Hyperion Fleet EV</span>\n </div>\n <span className=\"text-xs font-mono font-bold text-cyan-600\">{soc}% SoC</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h2 className=\"text-base font-bold\">Hyperion Freight Hauler Max (CA-941-EV)</h2>\n <p className=\"text-xs opacity-75 mt-1\">Usable Capacity: 210 kWh / 280 kWh • 780V Architecture</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateSovereignAuctions = {\n name: \"template-sovereign-auctions\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-sovereign-auctions.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Gavel, ShieldCheck, DollarSign, Award } from \"lucide-react\";\n\nexport default function SovereignAuctionsTemplate() {\n const [bid, setBid] = useState(2450000);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Gavel className=\"w-5 h-5 text-amber-600\" />\n <span className=\"font-bold text-base\">Sovereign Auctions</span>\n </div>\n <span className=\"text-xs font-mono font-bold text-amber-600\">\\${bid.toLocaleString()}</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs opacity-60\">LOT 24 • EVENING SALE LONDON</div>\n <h2 className=\"text-base font-bold mt-1\">Composition in Cadmium & Cobalt Resonance, 1988</h2>\n <button\n onClick={() => setBid(bid + 50000)}\n className=\"mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white bg-amber-600 transition-opacity hover:opacity-90\"\n >\n Raise Bid +$50,000\n </button>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateScholarisArchive = {\n name: \"template-scholaris-archive\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-scholaris-archive.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { BookOpen, FileText, Download, Award } from \"lucide-react\";\n\nexport default function ScholarisArchiveTemplate() {\n const [copied, setCopied] = useState(false);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <BookOpen className=\"w-5 h-5 text-sky-600\" />\n <span className=\"font-bold text-base\">Scholaris Archive</span>\n </div>\n <span className=\"text-xs font-mono text-emerald-600 font-bold\">Reproducibility: 9.8/10</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs text-sky-600 font-mono font-bold mb-1\">DOI: 10.1038/s41586-026-09214-x</div>\n <h2 className=\"text-base font-bold\">Sub-Quadratic Attention via Orthogonal State Space Projections</h2>\n <p className=\"text-xs opacity-75 mt-2\">Dr. Evelyn Zhao (Stanford) • Prof. Kenneth Sterling (MIT)</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateTalentorbitHr = {\n name: \"template-talentorbit-hr\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-talentorbit-hr.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Users, Calendar, Award, MapPin } from \"lucide-react\";\n\nexport default function TalentOrbitTemplate() {\n const [ptoDays, setPtoDays] = useState(18);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Users className=\"w-5 h-5 text-violet-600\" />\n <span className=\"font-bold text-base\">TalentOrbit HR</span>\n </div>\n <span className=\"text-xs font-semibold text-violet-600\">{ptoDays} Days PTO Left</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <h2 className=\"text-base font-bold\">Sophia Lindqvist • VP of Engineering</h2>\n <p className=\"text-xs opacity-70 mt-1\">Stockholm (UTC+1) • 24 Direct Reports • Top Performer (9-Box 1A)</p>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateMiseenplaceKds = {\n name: \"template-miseenplace-kds\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-miseenplace-kds.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { UtensilsCrossed, Flame, Clock, Check } from \"lucide-react\";\n\nexport default function MiseEnPlaceTemplate() {\n const [bumped, setBumped] = useState(false);\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <UtensilsCrossed className=\"w-5 h-5 text-orange-600\" />\n <span className=\"font-bold text-base\">MiseEnPlace KDS</span>\n </div>\n <span className=\"text-xs font-mono font-bold text-orange-600\">3 ACTIVE ORDERS</span>\n </header>\n\n <main className=\"py-8 space-y-6\">\n <div className=\"p-6 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"text-xs font-mono font-bold text-rose-600 mb-1\">TABLE 12 • 04:15 ELAPSED</div>\n <h2 className=\"text-base font-bold\">2x 45-Day Dry Aged Ribeye (Med-Rare)</h2>\n <p className=\"text-xs opacity-75 mt-1\">Station: GRILL • Extra flaky Maldon salt</p>\n <button\n onClick={() => setBumped(true)}\n className=\"mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white bg-orange-600 transition-opacity hover:opacity-90\"\n >\n {bumped ? \"Order Bumped\" : \"Bump Order\"}\n </button>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","export const templateAurasolaceSanctuary = {\n name: \"template-aurasolace-sanctuary\",\n dependencies: [\"lucide-react\"],\n fileName: \"template-aurasolace-sanctuary.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Heart, Wind, Volume2, Sparkles } from \"lucide-react\";\n\nexport default function AuraSolaceTemplate() {\n const [phase, setPhase] = useState(\"Inhale (4s)\");\n\n return (\n <div\n className=\"min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto\"\n style={{\n backgroundColor: \"var(--template-bg, #ffffff)\",\n color: \"var(--template-fg, #0f172a)\",\n }}\n >\n <header className=\"flex justify-between items-center pb-6 border-b\" style={{ borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"flex items-center gap-2\">\n <Heart className=\"w-5 h-5 text-teal-600\" />\n <span className=\"font-bold text-base\">AuraSolace Sanctuary</span>\n </div>\n <span className=\"text-xs font-semibold text-teal-600\">Peaceful Grounded</span>\n </header>\n\n <main className=\"py-8 space-y-6 text-center\">\n <div className=\"p-8 rounded-2xl border\" style={{ backgroundColor: \"var(--template-surface, #f8f9fa)\", borderColor: \"var(--template-border, #e2e8f0)\" }}>\n <div className=\"w-32 h-32 rounded-full border-2 border-teal-500 mx-auto flex items-center justify-center font-bold text-xs text-teal-600\">\n {phase}\n </div>\n <h2 className=\"text-base font-bold mt-4\">Parasympathetic Nervous System Regulation</h2>\n </div>\n </main>\n </div>\n );\n}`,\n};\n","import { button } from './button';\nimport { modal } from './modal';\nimport { card } from './card';\nimport { alert } from './alert';\nimport { badge } from './badge';\nimport { morphingGeometry } from './morphing-geometry';\nimport { auroraBorderFX } from './aurora-border-fx';\nimport { auroraSearchPill } from './aurora-search-pill';\nimport { templateAiStartup } from './template-ai-startup';\nimport { templateModernSaas } from './template-modern-saas';\nimport { templateAnalyticsDashboard } from './template-analytics-dashboard';\nimport { templateDevtoolsCli } from './template-devtools-cli';\nimport { templateCreativePortfolio } from './template-creative-portfolio';\nimport { templateFintechApp } from './template-fintech-app';\nimport { templateEcommerceStore } from './template-ecommerce-store';\nimport { templateAgencyCreative } from './template-agency-creative';\nimport { templateAiChat } from './template-ai-chat';\nimport { templateProjectManagement } from './template-project-management';\nimport { templateStartupWaitlist } from './template-startup-waitlist';\nimport { templateDocsPlatform } from './template-docs-platform';\nimport { templateHealthcarePortal } from './template-healthcare-portal';\nimport { templateWeb3Dex } from './template-web3-dex';\nimport { templateEdtechLearning } from './template-edtech-learning';\nimport { templateConferenceEvent } from './template-conference-event';\nimport { templateAudioPodcast } from './template-audio-podcast';\nimport { templateRealEstate } from './template-real-estate';\nimport { templateUptimeStatus } from './template-uptime-status';\nimport { templateAgentWorkflow } from './template-agent-workflow';\nimport { templateRestaurantCulinary } from './template-restaurant-culinary';\nimport { templateHelpCenter } from './template-help-center';\nimport { templateFitnessAthletics } from './template-fitness-athletics';\nimport { templateWildernessTravel } from './template-wilderness-travel';\nimport { templateDevopsKubernetes } from './template-devops-kubernetes';\nimport { templateAudioDaw } from './template-audio-daw';\nimport { templateGamifiedHabits } from './template-gamified-habits';\nimport { templateGlobalLogistics } from './template-global-logistics';\nimport { templateGamingEsports } from './template-gaming-esports';\nimport { templateArchitectureSpatial } from './template-architecture-spatial';\nimport { templateCybersecuritySoc } from './template-cybersecurity-soc';\nimport { templateCleantechAgriculture } from './template-cleantech-agriculture';\nimport { templateJurisVault } from './template-juris-vault';\nimport { templateOrbitalxMission } from './template-orbitalx-mission';\nimport { templateCineboardStudio } from './template-cineboard-studio';\nimport { templateDomusLiving } from './template-domus-living';\nimport { templateHyperionEv } from './template-hyperion-ev';\nimport { templateSovereignAuctions } from './template-sovereign-auctions';\nimport { templateScholarisArchive } from './template-scholaris-archive';\nimport { templateTalentorbitHr } from './template-talentorbit-hr';\nimport { templateMiseenplaceKds } from './template-miseenplace-kds';\nimport { templateAurasolaceSanctuary } from './template-aurasolace-sanctuary';\n\nexport interface RegistryItem {\n name: string;\n dependencies: string[];\n componentsDependencies?: string[];\n fileName: string;\n content: string;\n}\n\nexport const registry: Record<string, RegistryItem> = {\n button,\n modal,\n card,\n alert,\n badge,\n 'morphing-geometry': morphingGeometry,\n 'aurora-border-fx': auroraBorderFX,\n 'aurora-search-pill': auroraSearchPill,\n 'template-ai-startup': templateAiStartup,\n 'template-modern-saas': templateModernSaas,\n 'template-analytics-dashboard': templateAnalyticsDashboard,\n 'template-devtools-cli': templateDevtoolsCli,\n 'template-creative-portfolio': templateCreativePortfolio,\n 'template-fintech-app': templateFintechApp,\n 'template-ecommerce-store': templateEcommerceStore,\n 'template-agency-creative': templateAgencyCreative,\n 'template-ai-chat': templateAiChat,\n 'template-project-management': templateProjectManagement,\n 'template-startup-waitlist': templateStartupWaitlist,\n 'template-docs-platform': templateDocsPlatform,\n 'template-healthcare-portal': templateHealthcarePortal,\n 'template-web3-dex': templateWeb3Dex,\n 'template-edtech-learning': templateEdtechLearning,\n 'template-conference-event': templateConferenceEvent,\n 'template-audio-podcast': templateAudioPodcast,\n 'template-real-estate': templateRealEstate,\n 'template-uptime-status': templateUptimeStatus,\n 'template-agent-workflow': templateAgentWorkflow,\n 'template-restaurant-culinary': templateRestaurantCulinary,\n 'template-help-center': templateHelpCenter,\n 'template-fitness-athletics': templateFitnessAthletics,\n 'template-wilderness-travel': templateWildernessTravel,\n 'template-devops-kubernetes': templateDevopsKubernetes,\n 'template-audio-daw': templateAudioDaw,\n 'template-gamified-habits': templateGamifiedHabits,\n 'template-global-logistics': templateGlobalLogistics,\n 'template-gaming-esports': templateGamingEsports,\n 'template-architecture-spatial': templateArchitectureSpatial,\n 'template-cybersecurity-soc': templateCybersecuritySoc,\n 'template-cleantech-agriculture': templateCleantechAgriculture,\n 'template-juris-vault': templateJurisVault,\n 'template-orbitalx-mission': templateOrbitalxMission,\n 'template-cineboard-studio': templateCineboardStudio,\n 'template-domus-living': templateDomusLiving,\n 'template-hyperion-ev': templateHyperionEv,\n 'template-sovereign-auctions': templateSovereignAuctions,\n 'template-scholaris-archive': templateScholarisArchive,\n 'template-talentorbit-hr': templateTalentorbitHr,\n 'template-miseenplace-kds': templateMiseenplaceKds,\n 'template-aurasolace-sanctuary': templateAurasolaceSanctuary,\n};\n\n\n\n","import { registry } from '../registry/index.js';\r\n\r\nexport function listCommand() {\r\n console.log('\\n\\x1b[34m\\x1b[1m=== Available NexoreUI Components ===\\x1b[0m\\n');\r\n \r\n Object.keys(registry).forEach((name) => {\r\n const item = registry[name];\r\n console.log(`- \\x1b[32m\\x1b[1m${name}\\x1b[0m (${item.fileName})`);\r\n if (item.dependencies.length > 0) {\r\n console.log(` \\x1b[90mDependencies: ${item.dependencies.join(', ')}\\x1b[0m`);\r\n }\r\n if (item.componentsDependencies && item.componentsDependencies.length > 0) {\r\n console.log(` \\x1b[33mRequires component: ${item.componentsDependencies.join(', ')}\\x1b[0m`);\r\n }\r\n console.log('');\r\n });\r\n}\r\n","import * as fs from 'fs';\nimport * as path from 'path';\nimport * as readline from 'readline';\nimport { detectProject } from '../utils/detect.js';\nimport { ensureCnUtil, ensureDir } from '../utils/copy.js';\nimport { ensurePathAlias, injectThemeCss, installPeerDependencies, THEME_PALETTES } from '../utils/config.js';\n\nfunction askQuestion(query: string): Promise<string> {\n const rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n return new Promise((resolve) =>\n rl.question(query, (ans) => {\n rl.close();\n resolve(ans);\n })\n );\n}\n\nexport interface InitOptions {\n yes?: boolean;\n theme?: string;\n radius?: string;\n install?: boolean;\n}\n\nexport async function initCommand(options: InitOptions = {}) {\n console.log(`\\n\\x1b[36m\\x1b[1m=== Initializing NexoreUI in your project ===\\x1b[0m\\n`);\n\n const project = detectProject(process.cwd());\n console.log(`\\x1b[32m✔ Detected Project:\\x1b[0m ${project.projectType.toUpperCase()} (${project.packageManager})`);\n\n let theme = options.theme \|\| 'cyan';\n let radius = options.radius \|\| '1.0';\n const defaultComponentsDir = project.hasSrcDir ? 'src/components/ui' : 'components/ui';\n const defaultUtilsFile = project.hasSrcDir ? 'src/lib/utils.ts' : 'lib/utils.ts';\n const defaultCssFile = project.projectType === 'next' \n ? (project.hasSrcDir ? 'src/app/globals.css' : 'app/globals.css') \n : (project.hasSrcDir ? 'src/index.css' : 'src/index.css');\n\n let componentsDir = defaultComponentsDir;\n let utilsFile = defaultUtilsFile;\n\n if (!options.yes) {\n if (!options.theme) {\n const themeAns = await askQuestion(`Which color theme would you like to use? (cyan, indigo, violet, emerald, rose, amber, slate, neon) [default: cyan]: `);\n if (themeAns.trim() && THEME_PALETTES[themeAns.trim().toLowerCase()]) {\n theme = themeAns.trim().toLowerCase();\n }\n }\n\n if (!options.radius) {\n const radiusAns = await askQuestion(`Which radius value would you like to use? (0, 0.3, 0.5, 0.75, 1.0) [default: 1.0]: `);\n if (radiusAns.trim()) {\n radius = radiusAns.trim();\n }\n }\n\n const compAns = await askQuestion(`Where should UI components be created? (default: ${defaultComponentsDir}): `);\n if (compAns.trim()) componentsDir = compAns.trim();\n\n const utilsAns = await askQuestion(`Where should utility functions (cn helper) be placed? (default: ${defaultUtilsFile}): `);\n if (utilsAns.trim()) utilsFile = utilsAns.trim();\n }\n\n const absoluteComponentsDir = path.resolve(project.baseDir, componentsDir);\n const absoluteUtilsFile = path.resolve(project.baseDir, utilsFile);\n\n // 1. Ensure directories & cn helper\n ensureDir(absoluteComponentsDir);\n ensureCnUtil(absoluteUtilsFile);\n\n // 2. Configure Path Aliases (@/) automatically\n const didUpdateAlias = ensurePathAlias(project.baseDir, project.projectType, project.hasSrcDir);\n if (didUpdateAlias) {\n console.log(`\\x1b[32m✔\\x1b[0m Configured path alias \\x1b[1m'@/'\\x1b[0m in project config`);\n }\n\n // 3. Inject Tailwind CSS v4 source & theme variables\n const didInjectCss = injectThemeCss(project.baseDir, defaultCssFile, theme, radius);\n if (didInjectCss) {\n console.log(`\\x1b[32m✔\\x1b[0m Injected Tailwind CSS v4 @theme tokens into \\x1b[1m${defaultCssFile}\\x1b[0m`);\n }\n\n // 4. Install peer dependencies automatically\n installPeerDependencies(project.baseDir, project.packageManager);\n\n // 5. Write nexore.json config\n const config = {\n $schema: \"https://nexoreui.site/schema.json\",\n style: \"default\",\n theme: theme,\n radius: Number(radius),\n framework: project.projectType,\n packageManager: project.packageManager,\n font: \"system\",\n density: \"default\",\n animation: \"energetic\",\n defaultMode: \"light\",\n tailwind: {\n config: \"tailwind.config.js\",\n css: defaultCssFile,\n baseColor: \"zinc\",\n cssVariables: true,\n },\n aliases: {\n components: `@/${componentsDir.replace(/^src\\//, '')}`,\n utils: `@/${utilsFile.replace(/^src\\//, '').replace(/\\.(ts\|js)$/, '')}`,\n },\n };\n\n const configPath = path.join(project.baseDir, 'nexore.json');\n fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');\n\n console.log(`\\x1b[32m✔\\x1b[0m Generated \\x1b[1mnexore.json\\x1b[0m (Theme: ${theme}, Radius: ${radius}rem)`);\n console.log(`\\x1b[32m✔\\x1b[0m Utilities ready at \\x1b[1m${utilsFile}\\x1b[0m`);\n console.log(`\\x1b[32m✔\\x1b[0m Components directory ready at \\x1b[1m${componentsDir}\\x1b[0m`);\n\n console.log(`\\n\\x1b[32m\\x1b[1m🎉 NexoreUI initialized successfully! You can now add components:\\x1b[0m`);\n console.log(` \\x1b[36mnpx nexoreui add button card modal table --all\\x1b[0m\\n`);\n}\n","import as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { PackageManager, ProjectType } from './detect.js';\n\nexport const THEME_PALETTES: Record<string, { light: string; dark: string; rgb: string }> = {\n indigo: { light: 'hsl(250 85% 50%)', dark: 'hsl(250 85% 65%)', rgb: '99 60 220' },\n violet: { light: 'hsl(262.1 83.3% 57.8%)', dark: 'hsl(263.4 70% 50.4%)', rgb: '139 92 246' },\n emerald: { light: 'hsl(142.1 76.2% 36.3%)', dark: 'hsl(142.1 70.6% 45.3%)', rgb: '16 185 129' },\n rose: { light: 'hsl(346.8 77.2% 49.8%)', dark: 'hsl(346.8 77.2% 55%)', rgb: '244 63 94' },\n amber: { light: 'hsl(37.7 92.1% 50.2%)', dark: 'hsl(37.7 92.1% 55%)', rgb: '245 158 11' },\n cyan: { light: 'hsl(190.4 95% 39%)', dark: 'hsl(188.7 94.5% 42.7%)', rgb: '6 182 212' },\n slate: { light: 'hsl(240 5.9% 10%)', dark: 'hsl(0 0% 98%)', rgb: '244 244 245' },\n neon: { light: 'hsl(173 80% 40%)', dark: 'hsl(173 100% 50%)', rgb: '0 255 220' },\n};\n\n/*\n Automatically configures `@` path alias in vite.config or tsconfig if missing.\n /\nexport function ensurePathAlias(baseDir: string, projectType: ProjectType, hasSrcDir: boolean): boolean {\n let updated = false;\n\n // 1. Check TypeScript / JavaScript config files\n const configsToCheck = [\n path.join(baseDir, 'tsconfig.app.json'),\n path.join(baseDir, 'tsconfig.json'),\n path.join(baseDir, 'jsconfig.json'),\n ];\n\n for (const targetConfig of configsToCheck) {\n if (fs.existsSync(targetConfig)) {\n try {\n const content = fs.readFileSync(targetConfig, 'utf8');\n const parsed = JSON.parse(content);\n parsed.compilerOptions = parsed.compilerOptions \|\| {};\n parsed.compilerOptions.baseUrl = parsed.compilerOptions.baseUrl \|\| '.';\n parsed.compilerOptions.paths = parsed.compilerOptions.paths \|\| {};\n\n const aliasTarget = hasSrcDir ? ['./src/'] : ['./'];\n if (!parsed.compilerOptions.paths['@/']) {\n parsed.compilerOptions.paths['@/'] = aliasTarget;\n fs.writeFileSync(targetConfig, JSON.stringify(parsed, null, 2), 'utf8');\n updated = true;\n }\n } catch {\n // If parsing fails due to comments in json, skip to avoid breaking custom configs\n }\n }\n }\n\n // 2. Check Vite Config\n if (projectType === 'vite') {\n const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];\n for (const fileName of viteConfigFiles) {\n const vitePath = path.join(baseDir, fileName);\n if (fs.existsSync(vitePath)) {\n let viteContent = fs.readFileSync(vitePath, 'utf8');\n if (!viteContent.includes(\"alias\") && !viteContent.includes(\"'@'\")) {\n // Check if path import exists\n const hasPathImport = viteContent.includes(\"from 'path'\") \|\| viteContent.includes('from \"path\"');\n let headerAdditions = '';\n if (!hasPathImport) {\n headerAdditions += `import path from 'path'\\nimport { fileURLToPath } from 'url'\\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\\n`;\n }\n\n if (viteContent.includes('defineConfig({')) {\n viteContent = headerAdditions + viteContent.replace(\n 'defineConfig({',\n `defineConfig({\\n resolve: {\\n alias: {\\n '@': path.resolve(__dirname, './${hasSrcDir ? 'src' : '.'}'),\\n },\\n },`\n );\n fs.writeFileSync(vitePath, viteContent, 'utf8');\n updated = true;\n }\n }\n\n // Configure @tailwindcss/vite if missing\n if (!viteContent.includes('@tailwindcss/vite')) {\n let updatedVite = `import tailwindcss from '@tailwindcss/vite'\\n` + viteContent;\n if (updatedVite.includes('plugins: [')) {\n updatedVite = updatedVite.replace(/plugins:\\s\\[/, 'plugins: [tailwindcss(), ');\n fs.writeFileSync(vitePath, updatedVite, 'utf8');\n updated = true;\n }\n }\n break;\n }\n }\n }\n\n return updated;\n}\n\n/*\n Injects Tailwind CSS v4 source directive and theme variables into the main CSS file.\n /\nexport function injectThemeCss(\n baseDir: string,\n cssRelativePath: string,\n themeName: string,\n radiusValue: string \| number\n): boolean {\n const cssAbsolutePath = path.join(baseDir, cssRelativePath);\n const palette = THEME_PALETTES[themeName] \|\| THEME_PALETTES.cyan;\n const radius = typeof radiusValue === 'number' ? radiusValue : parseFloat(radiusValue) \|\| 1.0;\n\n const themeBlock = `\n@source \"../node_modules/nexoreui/dist//.{js,mjs}\";\n\n@theme {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n:root {\n --background: hsl(0 0% 100%);\n --foreground: hsl(240 10% 3.9%);\n --card: hsl(0 0% 100%);\n --card-foreground: hsl(240 10% 3.9%);\n --popover: hsl(0 0% 100%);\n --popover-foreground: hsl(240 10% 3.9%);\n --primary: ${palette.light};\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(240 4.8% 95.9%);\n --secondary-foreground: hsl(240 5.9% 10%);\n --muted: hsl(240 4.8% 95.9%);\n --muted-foreground: hsl(240 3.8% 46.1%);\n --accent: hsl(240 4.8% 95.9%);\n --accent-foreground: hsl(240 5.9% 10%);\n --destructive: hsl(0 84.2% 60.2%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 5.9% 90%);\n --input: hsl(240 5.9% 90%);\n --ring: ${palette.light};\n --radius: ${radius}rem;\n --glow-radius: 12px;\n --glow-strength: 0.15;\n --glow-color: ${palette.rgb};\n}\n\n.dark {\n --background: hsl(240 10% 3.9%);\n --foreground: hsl(0 0% 98%);\n --card: hsl(240 10% 3.9%);\n --card-foreground: hsl(0 0% 98%);\n --popover: hsl(240 10% 3.9%);\n --popover-foreground: hsl(0 0% 98%);\n --primary: ${palette.dark};\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(240 3.7% 15.9%);\n --secondary-foreground: hsl(0 0% 98%);\n --muted: hsl(240 3.7% 15.9%);\n --muted-foreground: hsl(240 5% 64.9%);\n --accent: hsl(240 3.7% 15.9%);\n --accent-foreground: hsl(0 0% 98%);\n --destructive: hsl(0 62.8% 30.6%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 3.7% 15.9%);\n --input: hsl(240 3.7% 15.9%);\n --ring: ${palette.dark};\n --radius: ${radius}rem;\n --glow-radius: 20px;\n --glow-strength: 0.35;\n --glow-color: ${palette.rgb};\n}\n`;\n\n if (fs.existsSync(cssAbsolutePath)) {\n let existingContent = fs.readFileSync(cssAbsolutePath, 'utf8');\n // Remove Vite's default conflicting #root box constraint\n existingContent = existingContent.replace(/#root\\s\\{[^}]\\}/g, '');\n if (!existingContent.includes('--color-primary') && !existingContent.includes('nexoreui/dist')) {\n let finalContent = existingContent.trim() + '\\n' + themeBlock;\n if (!finalContent.includes('@import \"tailwindcss\"') && !finalContent.includes(\"@import 'tailwindcss'\")) {\n finalContent = '@import \"tailwindcss\";\\n' + finalContent;\n }\n fs.writeFileSync(cssAbsolutePath, finalContent, 'utf8');\n return true;\n }\n } else {\n const cssDir = path.dirname(cssAbsolutePath);\n if (!fs.existsSync(cssDir)) fs.mkdirSync(cssDir, { recursive: true });\n fs.writeFileSync(cssAbsolutePath, `@import \"tailwindcss\";\\n` + themeBlock, 'utf8');\n return true;\n }\n\n return false;\n}\n\n/*\n Automatically installs core peer dependencies if missing.\n /\nexport function installPeerDependencies(\n baseDir: string,\n packageManager: PackageManager,\n dependencies: string[] = ['clsx', 'tailwind-merge', 'lucide-react', 'framer-motion']\n): boolean {\n try {\n const packageJsonPath = path.join(baseDir, 'package.json');\n let missingDeps = [...dependencies];\n\n if (fs.existsSync(packageJsonPath)) {\n const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\n const installed = { ...pkg.dependencies, ...pkg.devDependencies };\n missingDeps = dependencies.filter((dep) => !installed[dep]);\n }\n\n if (missingDeps.length === 0) return true;\n\n let installCmd = 'npm install';\n if (packageManager === 'pnpm') installCmd = 'pnpm add';\n else if (packageManager === 'yarn') installCmd = 'yarn add';\n else if (packageManager === 'bun') installCmd = 'bun add';\n\n console.log(`\\n\\x1b[33m⚡ Installing peer dependencies:\\x1b[0m ${missingDeps.join(', ')}...`);\n execSync(`${installCmd} ${missingDeps.join(' ')}`, {\n stdio: 'inherit',\n cwd: baseDir,\n });\n return true;\n } catch (err) {\n console.warn('\\x1b[33mWarning: Automatic peer dependency installation skipped.\\x1b[0m');\n return false;\n }\n}\n","import as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport { initCommand } from './init.js';\nimport { addCommand } from './add.js';\n\nexport interface CreateOptions {\n theme?: string;\n radius?: string;\n template?: 'vite' \| 'next';\n}\n\nexport async function createCommand(projectName?: string, options: CreateOptions = {}) {\n const name = projectName \|\| 'my-nexore-app';\n const targetDir = path.resolve(process.cwd(), name);\n\n console.log(`\\n\\x1b[36m\\x1b[1m🚀 Creating a new NexoreUI Project:\\x1b[0m \\x1b[32m${name}\\x1b[0m\\n`);\n\n if (fs.existsSync(targetDir) && fs.readdirSync(targetDir).length > 0) {\n console.error(`\\x1b[31mError: Target directory ${name} already exists and is not empty.\\x1b[0m`);\n return;\n }\n\n // 1. Scaffold base Vite React TypeScript template\n console.log(`\\x1b[33m⚡ Step 1/4: Scaffolding React + Vite template...\\x1b[0m`);\n try {\n execSync(`npx -y create-vite@latest ${name} --template react-ts --no-immediate --no-interactive`, { stdio: 'inherit' });\n } catch (err) {\n console.error(`\\x1b[31mFailed to scaffold Vite project.\\x1b[0m`);\n return;\n }\n\n // 2. Change directory and install dependencies\n process.chdir(targetDir);\n console.log(`\\n\\x1b[33m📦 Step 2/4: Installing NexoreUI, Tailwind CSS, and core packages...\\x1b[0m`);\n execSync(`npm install nexoreui lucide-react clsx tailwind-merge framer-motion @tailwindcss/vite tailwindcss`, {\n stdio: 'inherit',\n });\n\n // 3. Run automated NexoreUI initialization\n console.log(`\\n\\x1b[33m⚙️ Step 3/4: Configuring theme and design tokens...\\x1b[0m`);\n await initCommand({\n yes: true,\n theme: options.theme \|\| 'emerald',\n radius: options.radius \|\| '0.75',\n });\n\n // 4. Add starter UI components (Button, Card)\n console.log(`\\n\\x1b[33m🧩 Step 4/4: Adding starter UI components (button, card)...\\x1b[0m`);\n try {\n await addCommand(['button', 'card'], { yes: true });\n } catch {\n // Non-blocking fallback\n }\n\n // 5. Replace default App.tsx with interactive NexoreUI demo showcase\n const appTsxPath = path.join(targetDir, 'src', 'App.tsx');\n const starterAppCode = `import { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';\nimport { Sparkles, Terminal, Layers } from 'lucide-react';\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n return (\n <main className=\"min-h-screen bg-background text-foreground flex flex-col items-center justify-center p-6 transition-colors selection:bg-primary/20\">\n <div className=\"max-w-xl w-full space-y-8 text-center\">\n {/* Status Badge /}\n <div className=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-xs font-semibold text-primary shadow-xs\">\n <Sparkles className=\"h-3.5 w-3.5\" />\n <span>NexoreUI + Tailwind CSS v4</span>\n </div>\n\n {/ Hero Title /}\n <div className=\"space-y-3\">\n <h1 className=\"text-4xl sm:text-5xl font-extrabold tracking-tight\">\n Welcome to <span className=\"text-primary\">NexoreUI</span>\n </h1>\n <p className=\"text-muted-foreground text-sm sm:text-base max-w-md mx-auto\">\n Your project is fully configured with design tokens, glow effects, and modern animated components.\n </p>\n </div>\n\n {/ Demo Interactive Card /}\n <Card className=\"max-w-md mx-auto text-left shadow-xl border-border/80\">\n <CardHeader>\n <CardTitle className=\"text-base flex items-center gap-2\">\n <Layers className=\"h-4 w-4 text-primary\" />\n Interactive Component Demo\n </CardTitle>\n <CardDescription className=\"text-xs\">\n Click the button to test component state and styling.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between p-3 rounded-xl bg-muted/50 border border-border/60\">\n <span className=\"text-xs font-medium\">Click Counter</span>\n <span className=\"text-xs font-mono font-bold px-2.5 py-0.5 rounded-md bg-primary/15 text-primary\">\n {count} clicks\n </span>\n </div>\n <div className=\"flex items-center gap-3\">\n <Button onClick={() => setCount((c) => c + 1)} className=\"flex-1\">\n Increment Count\n </Button>\n <Button variant=\"outline\" onClick={() => setCount(0)}>\n Reset\n </Button>\n </div>\n </CardContent>\n </Card>\n\n {/ CLI Hint /}\n <div className=\"p-3.5 rounded-xl bg-muted/40 border border-border text-xs text-muted-foreground font-mono inline-flex items-center gap-2\">\n <Terminal className=\"h-4 w-4 text-primary shrink-0\" />\n <span>npx nexoreui add --all</span>\n </div>\n </div>\n </main>\n );\n}\n`;\n\n try {\n fs.writeFileSync(appTsxPath, starterAppCode, 'utf8');\n } catch {}\n\n // 6. Clean up Vite's default conflicting App.css\n const appCssPath = path.join(targetDir, 'src', 'App.css');\n if (fs.existsSync(appCssPath)) {\n try {\n fs.writeFileSync(appCssPath, '/ NexoreUI styles are loaded from src/index.css */\\n', 'utf8');\n } catch {}\n }\n\n console.log(`\\n\\x1b[32m\\x1b[1m✨ Project ${name} is ready with NexoreUI!\\x1b[0m`);\n console.log(`\\nTo get started:\\n`);\n console.log(` \\x1b[36mcd ${name}\\x1b[0m`);\n console.log(` \\x1b[36mnpm run dev\\x1b[0m\\n`);\n console.log(`To add more components to your project:\\n`);\n console.log(` \\x1b[36mnpx nexoreui add modal table tabs --all\\x1b[0m\\n`);\n}\n\n","import { addCommand } from './commands/add.js';\nimport { listCommand } from './commands/list.js';\nimport { initCommand } from './commands/init.js';\nimport { createCommand } from './commands/create.js';\n\nasync function main() {\n const args = process.argv.slice(2);\n const command = args[0];\n\n if (!command \|\| command === '-h' \|\| command === '--help') {\n printHelp();\n return;\n }\n\n if (command === 'create') {\n const projectName = args[1] && !args[1].startsWith('-') ? args[1] : undefined;\n let theme: string \| undefined;\n let radius: string \| undefined;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '--theme' && args[i + 1]) {\n theme = args[++i];\n } else if (arg.startsWith('--theme=')) {\n theme = arg.split('=')[1];\n } else if (arg === '--radius' && args[i + 1]) {\n radius = args[++i];\n } else if (arg.startsWith('--radius=')) {\n radius = arg.split('=')[1];\n }\n }\n\n await createCommand(projectName, { theme, radius });\n } else if (command === 'init') {\n let yes = false;\n let theme: string \| undefined;\n let radius: string \| undefined;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '-y' \|\| arg === '--yes') {\n yes = true;\n } else if (arg === '--theme' && args[i + 1]) {\n theme = args[++i];\n } else if (arg.startsWith('--theme=')) {\n theme = arg.split('=')[1];\n } else if (arg === '--radius' && args[i + 1]) {\n radius = args[++i];\n } else if (arg.startsWith('--radius=')) {\n radius = arg.split('=')[1];\n }\n }\n\n await initCommand({ yes, theme, radius });\n } else if (command === 'list') {\n listCommand();\n } else if (command === 'add') {\n const components: string[] = [];\n let yes = false;\n let all = false;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '-y' \|\| arg === '--yes') {\n yes = true;\n } else if (arg === '--all' \|\| arg === '-a') {\n all = true;\n } else if (!arg.startsWith('-')) {\n components.push(arg);\n }\n }\n\n await addCommand(components, { yes, all });\n } else {\n console.error(`\\x1b[31mUnknown command: ${command}\\x1b[0m`);\n printHelp();\n }\n}\n\nfunction printHelp() {\n console.log(`\n\\x1b[36m\\x1b[1mNexoreUI CLI\\x1b[0m\n\\x1b[90mModern, animated, production-ready React components with Tailwind CSS v4\\x1b[0m\n\nUsage:\n npx nexoreui [command] [options]\n\nCommands:\n \\x1b[32mcreate [name]\\x1b[0m Create a new fully configured NexoreUI starter project\n \\x1b[32minit\\x1b[0m Initialize NexoreUI in your project (configure theme, aliases, and CSS)\n \\x1b[32madd [components...]\\x1b[0m Add components to your project (use --all to install all 40+ components)\n \\x1b[32mlist\\x1b[0m List all available components in registry\n\nOptions:\n \\x1b[33m--theme <name>\\x1b[0m Set color palette (cyan, indigo, violet, emerald, rose, amber, slate, neon)\n \\x1b[33m--radius <val>\\x1b[0m Set border radius (0, 0.3, 0.5, 0.75, 1.0)\n \\x1b[33m--all, -a\\x1b[0m Install all available components at once\n \\x1b[33m-y, --yes\\x1b[0m Skip prompts and use defaults automatically\n \\x1b[33m-h, --help\\x1b[0m Show help information\n `);\n}\n\nmain().catch((err) => {\n console.error('\\x1b[31mAn unexpected error occurred:\\x1b[0m', err);\n process.exit(1);\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAoB;AACpB,IAAAC,QAAsB;AACtB,eAA0B;AAC1B,2BAAyB;;;ACHzB,SAAoB;AACpB,WAAsB;AAYf,SAAS,cAAc,MAAc,QAAQ,IAAI,GAAgB;AACtE,MAAI,iBAAiC;AACrC,MAAI,cAA2B;AAC/B,MAAI,YAAY;AAGhB,MAAI,aAAa;AACjB,MAAI,UAAU;AACd,SAAO,eAAoB,WAAM,UAAU,EAAE,MAAM;AACjD,QAAO,cAAgB,UAAK,YAAY,cAAc,CAAC,GAAG;AACxD,gBAAU;AACV;AAAA,IACF;AACA,iBAAkB,aAAQ,UAAU;AAAA,EACtC;AAGA,MAAO,cAAgB,UAAK,SAAS,gBAAgB,CAAC,GAAG;AACvD,qBAAiB;AAAA,EACnB,WAAc,cAAgB,UAAK,SAAS,WAAW,CAAC,GAAG;AACzD,qBAAiB;AAAA,EACnB,WAAc,cAAgB,UAAK,SAAS,WAAW,CAAC,KAAQ,cAAgB,UAAK,SAAS,UAAU,CAAC,GAAG;AAC1G,qBAAiB;AAAA,EACnB;AAGA,MAAO,cAAgB,UAAK,SAAS,KAAK,CAAC,GAAG;AAC5C,gBAAY;AAAA,EACd;AAGA,MAAI;AACF,UAAM,kBAAuB,UAAK,SAAS,cAAc;AACzD,QAAO,cAAW,eAAe,GAAG;AAClC,YAAM,cAAc,KAAK,MAAS,gBAAa,iBAAiB,MAAM,CAAC;AACvE,YAAM,OAAO,EAAE,GAAG,YAAY,cAAc,GAAG,YAAY,gBAAgB;AAE3E,UAAI,KAAK,MAAM,GAAG;AAChB,sBAAc;AAAA,MAChB,WAAW,KAAK,MAAM,KAAK,KAAK,mBAAmB,GAAG;AACpD,sBAAc;AAAA,MAChB,WAAW,KAAK,eAAe,GAAG;AAChC,sBAAc;AAAA,MAChB;AAAA,IACF;AAAA,EACF,SAAS,KAAK;AAAA,EAEd;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACpEA,IAAAC,MAAoB;AACpB,IAAAC,QAAsB;AAEtB,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWb,SAAS,UAAU,SAAiB;AACzC,MAAI,CAAI,eAAW,OAAO,GAAG;AAC3B,IAAG,cAAU,SAAS,EAAE,WAAW,KAAK,CAAC;AAAA,EAC3C;AACF;AAKO,SAAS,sBAAsB,SAAiB,QAAwB;AAC7E,MAAI,eAAoB,eAAS,SAAS,MAAM;AAGhD,iBAAe,aAAa,QAAQ,OAAO,GAAG;AAG9C,iBAAe,aAAa,QAAQ,sBAAsB,EAAE;AAG5D,MAAI,CAAC,aAAa,WAAW,GAAG,GAAG;AACjC,mBAAe,OAAO;AAAA,EACxB;AAEA,SAAO;AACT;AAKO,SAAS,aAAa,WAA4B;AACvD,QAAM,MAAW,cAAQ,SAAS;AAClC,YAAU,GAAG;AAEb,MAAI,CAAI,eAAW,SAAS,GAAG;AAC7B,IAAG,kBAAc,WAAW,aAAa,MAAM;AAC/C,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAKO,SAAS,kBACd,SACA,gBACA,eACA;AACA,QAAM,YAAiB,cAAQ,cAAc;AAC7C,YAAU,SAAS;AAGnB,QAAM,iBAAiB,sBAAsB,WAAW,aAAa;AAIrE,QAAM,mBAAmB,QAAQ;AAAA,IAC/B;AAAA,IACA,IAAI,cAAc;AAAA,EACpB;AAEA,EAAG,kBAAc,gBAAgB,kBAAkB,MAAM;AAC3D;;;AC5EO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EAEE,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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","names":["fs","path","fs","path","resolve","fs","path","readline","fs","path","import_child_process","askQuestion","resolve","fs","path","import_child_process"]}
1	+ {"version":3,"sources":["../src/commands/add.ts","../src/utils/detect.ts","../src/utils/copy.ts","../src/registry/button.ts","../src/registry/modal.ts","../src/registry/card.ts","../src/registry/alert.ts","../src/registry/badge.ts","../src/registry/morphing-geometry.ts","../src/registry/aurora-border-fx.ts","../src/registry/aurora-search-pill.ts","../src/registry/template-ai-startup.ts","../src/registry/template-modern-saas.ts","../src/registry/template-analytics-dashboard.ts","../src/registry/template-devtools-cli.ts","../src/registry/template-creative-portfolio.ts","../src/registry/template-fintech-app.ts","../src/registry/template-ecommerce-store.ts","../src/registry/template-agency-creative.ts","../src/registry/template-ai-chat.ts","../src/registry/template-project-management.ts","../src/registry/template-startup-waitlist.ts","../src/registry/template-docs-platform.ts","../src/registry/template-healthcare-portal.ts","../src/registry/template-web3-dex.ts","../src/registry/template-edtech-learning.ts","../src/registry/template-conference-event.ts","../src/registry/template-audio-podcast.ts","../src/registry/template-real-estate.ts","../src/registry/template-uptime-status.ts","../src/registry/template-agent-workflow.ts","../src/registry/template-restaurant-culinary.ts","../src/registry/template-help-center.ts","../src/registry/template-fitness-athletics.ts","../src/registry/template-wilderness-travel.ts","../src/registry/template-devops-kubernetes.ts","../src/registry/template-audio-daw.ts","../src/registry/template-gamified-habits.ts","../src/registry/template-global-logistics.ts","../src/registry/template-gaming-esports.ts","../src/registry/template-architecture-spatial.ts","../src/registry/template-cybersecurity-soc.ts","../src/registry/template-cleantech-agriculture.ts","../src/registry/template-juris-vault.ts","../src/registry/template-orbitalx-mission.ts","../src/registry/template-cineboard-studio.ts","../src/registry/template-domus-living.ts","../src/registry/template-hyperion-ev.ts","../src/registry/template-sovereign-auctions.ts","../src/registry/template-scholaris-archive.ts","../src/registry/template-talentorbit-hr.ts","../src/registry/template-miseenplace-kds.ts","../src/registry/template-aurasolace-sanctuary.ts","../src/registry/index.ts","../src/commands/list.ts","../src/commands/init.ts","../src/utils/config.ts","../src/commands/create.ts","../src/index.ts"],"sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\nimport * as readline from 'readline';\nimport { execSync } from 'child_process';\nimport { detectProject } from '../utils/detect.js';\nimport { ensureCnUtil, copyComponentFile, ensureDir } from '../utils/copy.js';\nimport { registry } from '../registry/index.js';\n\nfunction askQuestion(query: string): Promise<string> {\n const rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n return new Promise((resolve) =>\n rl.question(query, (ans) => {\n rl.close();\n resolve(ans);\n })\n );\n}\n\nexport interface AddOptions {\n yes?: boolean;\n all?: boolean;\n overwrite?: boolean;\n}\n\nexport async function addCommand(components: string[], options: AddOptions = {}) {\n const allRegistryKeys = Object.keys(registry);\n\n // If --all flag is passed, select all registered components\n let targetComponents = [...components];\n if (options.all \|\| targetComponents.includes('--all')) {\n targetComponents = allRegistryKeys;\n console.log(`\\n\\x1b[36m⚡ Adding all ${targetComponents.length} components from NexoreUI registry...\\x1b[0m`);\n }\n\n if (targetComponents.length === 0) {\n console.error('\\x1b[31mError: Please specify components to add or use --all.\\x1b[0m');\n console.log('Example: npx nexoreui add button modal table --all');\n return;\n }\n\n // 1. Detect project structure\n const project = detectProject(process.cwd());\n console.log(`\\n\\x1b[34mDetected project type:\\x1b[0m ${project.projectType.toUpperCase()}`);\n console.log(`\\x1b[34mDetected package manager:\\x1b[0m ${project.packageManager}\\n`);\n\n // Read nexore.json config if exists\n let customComponentsDir: string \| undefined;\n let customUtilsFile: string \| undefined;\n try {\n const configPath = path.join(project.baseDir, 'nexore.json');\n if (fs.existsSync(configPath)) {\n const cfg = JSON.parse(fs.readFileSync(configPath, 'utf8'));\n if (cfg.aliases?.components) {\n customComponentsDir = cfg.aliases.components.replace(/^@\\//, project.hasSrcDir ? 'src/' : '');\n }\n if (cfg.aliases?.utils) {\n const utilBase = cfg.aliases.utils.replace(/^@\\//, project.hasSrcDir ? 'src/' : '');\n customUtilsFile = utilBase.endsWith('.ts') \|\| utilBase.endsWith('.js') ? utilBase : `${utilBase}.ts`;\n }\n }\n } catch {\n // Fallback to default detection\n }\n\n // 2. Validate component names and determine all components to install\n const componentsToInstall = new Set<string>();\n const invalidComponents: string[] = [];\n\n const queue = [...targetComponents.filter((c) => c !== '--all')];\n while (queue.length > 0) {\n const compName = queue.shift()!;\n const registryItem = registry[compName];\n if (!registryItem) {\n invalidComponents.push(compName);\n continue;\n }\n\n if (!componentsToInstall.has(compName)) {\n componentsToInstall.add(compName);\n if (registryItem.componentsDependencies) {\n for (const dep of registryItem.componentsDependencies) {\n queue.push(dep);\n }\n }\n }\n }\n\n if (invalidComponents.length > 0) {\n console.error(`\\x1b[31mError: Component(s) not found in registry: ${invalidComponents.join(', ')}\\x1b[0m`);\n console.log('Run \\x1b[32mnpx nexoreui list\\x1b[0m to see all available components.');\n return;\n }\n\n // 3. Determine paths\n const defaultComponentsDir = customComponentsDir \|\| (project.hasSrcDir ? 'src/components/ui' : 'components/ui');\n const defaultUtilsFile = customUtilsFile \|\| (project.hasSrcDir ? 'src/lib/utils.ts' : 'lib/utils.ts');\n\n let componentsDirInput = defaultComponentsDir;\n let utilsFileInput = defaultUtilsFile;\n\n if (!options.yes && !customComponentsDir) {\n const compPrompt = await askQuestion(`Where would you like to install the components? (default: ${defaultComponentsDir}): `);\n componentsDirInput = compPrompt.trim() \|\| defaultComponentsDir;\n\n const utilsPrompt = await askQuestion(`Where should we create the utilities file (cn helper)? (default: ${defaultUtilsFile}): `);\n utilsFileInput = utilsPrompt.trim() \|\| defaultUtilsFile;\n }\n\n const absoluteComponentsDir = path.resolve(project.baseDir, componentsDirInput);\n const absoluteUtilsFile = path.resolve(project.baseDir, utilsFileInput);\n\n console.log(`\\x1b[33mInstalling components to:\\x1b[0m ${absoluteComponentsDir}`);\n console.log(`\\x1b[33mUsing cn helper from:\\x1b[0m ${absoluteUtilsFile}\\n`);\n\n ensureDir(absoluteComponentsDir);\n\n // 4. Ensure cn helper exists\n const didCreateCn = ensureCnUtil(absoluteUtilsFile);\n if (didCreateCn) {\n console.log(`\\x1b[32m✔ Created utilities file (cn helper) at:\\x1b[0m ${utilsFileInput}`);\n }\n\n // 5. Copy component files\n const npmDependencies = new Set<string>();\n npmDependencies.add('clsx');\n npmDependencies.add('tailwind-merge');\n npmDependencies.add('lucide-react');\n npmDependencies.add('framer-motion');\n\n for (const compName of componentsToInstall) {\n const registryItem = registry[compName];\n const targetPath = path.join(absoluteComponentsDir, registryItem.fileName);\n\n copyComponentFile(registryItem.content, targetPath, absoluteUtilsFile);\n console.log(`\\x1b[32m✔ Added component:\\x1b[0m ${compName} -> ${path.join(componentsDirInput, registryItem.fileName)}`);\n\n registryItem.dependencies.forEach((dep) => npmDependencies.add(dep));\n }\n\n // 6. Install collected npm dependencies\n const depsArray = Array.from(npmDependencies);\n let depsToInstall = [...depsArray];\n try {\n const packageJsonPath = path.join(project.baseDir, 'package.json');\n if (fs.existsSync(packageJsonPath)) {\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\n const existingDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };\n depsToInstall = depsArray.filter((dep) => !existingDeps[dep]);\n }\n } catch {\n // Ignore and proceed\n }\n\n if (depsToInstall.length > 0) {\n console.log(`\\n\\x1b[33mInstalling external dependencies:\\x1b[0m ${depsToInstall.join(', ')}...`);\n let installCmd = 'npm install';\n if (project.packageManager === 'pnpm') installCmd = 'pnpm add';\n else if (project.packageManager === 'yarn') installCmd = 'yarn add';\n else if (project.packageManager === 'bun') installCmd = 'bun add';\n\n try {\n execSync(`${installCmd} ${depsToInstall.join(' ')}`, {\n stdio: 'inherit',\n cwd: project.baseDir,\n });\n console.log('\\x1b[32m✔ Dependencies installed successfully!\\x1b[0m');\n } catch {\n console.error('\\x1b[31mFailed to install dependencies automatically. Please run:\\x1b[0m');\n console.log(` ${installCmd} ${depsToInstall.join(' ')}`);\n }\n }\n\n console.log(`\\n\\x1b[32m\\x1b[1m🎉 Done! ${componentsToInstall.size} NexoreUI component(s) ready to use.\\x1b[0m\\n`);\n}\n","import * as fs from 'fs';\r\nimport * as path from 'path';\r\n\r\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\r\nexport type ProjectType = 'next' \| 'vite' \| 'cra' \| 'unknown';\r\n\r\nexport interface ProjectInfo {\r\n packageManager: PackageManager;\r\n projectType: ProjectType;\r\n hasSrcDir: boolean;\r\n baseDir: string;\r\n}\r\n\r\nexport function detectProject(cwd: string = process.cwd()): ProjectInfo {\r\n let packageManager: PackageManager = 'npm';\r\n let projectType: ProjectType = 'unknown';\r\n let hasSrcDir = false;\r\n\r\n // Determine base project directory (walk up to find package.json)\r\n let currentDir = cwd;\r\n let baseDir = cwd;\r\n while (currentDir !== path.parse(currentDir).root) {\r\n if (fs.existsSync(path.join(currentDir, 'package.json'))) {\r\n baseDir = currentDir;\r\n break;\r\n }\r\n currentDir = path.dirname(currentDir);\r\n }\r\n\r\n // Detect Package Manager\r\n if (fs.existsSync(path.join(baseDir, 'pnpm-lock.yaml'))) {\r\n packageManager = 'pnpm';\r\n } else if (fs.existsSync(path.join(baseDir, 'yarn.lock'))) {\r\n packageManager = 'yarn';\r\n } else if (fs.existsSync(path.join(baseDir, 'bun.lockb')) \|\| fs.existsSync(path.join(baseDir, 'bun.lock'))) {\r\n packageManager = 'bun';\r\n }\r\n\r\n // Detect Source Directory\r\n if (fs.existsSync(path.join(baseDir, 'src'))) {\r\n hasSrcDir = true;\r\n }\r\n\r\n // Detect Project Type (Framework)\r\n try {\r\n const packageJsonPath = path.join(baseDir, 'package.json');\r\n if (fs.existsSync(packageJsonPath)) {\r\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\r\n const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };\r\n\r\n if (deps['next']) {\r\n projectType = 'next';\r\n } else if (deps['vite'] \|\| deps['@tailwindcss/vite']) {\r\n projectType = 'vite';\r\n } else if (deps['react-scripts']) {\r\n projectType = 'cra';\r\n }\r\n }\r\n } catch (err) {\r\n // Ignore and fallback to unknown\r\n }\r\n\r\n return {\r\n packageManager,\r\n projectType,\r\n hasSrcDir,\r\n baseDir,\r\n };\r\n}\r\n","import * as fs from 'fs';\r\nimport * as path from 'path';\r\n\r\nconst CN_TEMPLATE = `import { type ClassValue, clsx } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs))\r\n}\r\n`;\r\n\r\n/*\r\n Ensures a directory exists.\r\n /\r\nexport function ensureDir(dirPath: string) {\r\n if (!fs.existsSync(dirPath)) {\r\n fs.mkdirSync(dirPath, { recursive: true });\r\n }\r\n}\r\n\r\n/\r\n Normalizes relative path for imports (using forward slashes, stripping extension).\r\n /\r\nexport function getRelativeImportPath(fromDir: string, toFile: string): string {\r\n let relativePath = path.relative(fromDir, toFile);\r\n \r\n // Replace Windows backslashes with forward slashes\r\n relativePath = relativePath.replace(/\\\\/g, '/');\r\n \r\n // Remove file extension\r\n relativePath = relativePath.replace(/\\.(ts\|tsx\|js\|jsx)$/, '');\r\n \r\n // Ensure it starts with \"./\" or \"../\"\r\n if (!relativePath.startsWith('.')) {\r\n relativePath = './' + relativePath;\r\n }\r\n \r\n return relativePath;\r\n}\r\n\r\n/\r\n Checks if cn utility exists, writes it if it doesn't.\r\n /\r\nexport function ensureCnUtil(utilsPath: string): boolean {\r\n const dir = path.dirname(utilsPath);\r\n ensureDir(dir);\r\n \r\n if (!fs.existsSync(utilsPath)) {\r\n fs.writeFileSync(utilsPath, CN_TEMPLATE, 'utf8');\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\n/\r\n Copies a component template file to target directory, rewriting its cn import.\r\n /\r\nexport function copyComponentFile(\r\n content: string,\r\n targetFilePath: string,\r\n utilsFilePath: string\r\n) {\r\n const targetDir = path.dirname(targetFilePath);\r\n ensureDir(targetDir);\r\n \r\n // Compute relative path from target component to utils\r\n const relativeImport = getRelativeImportPath(targetDir, utilsFilePath);\r\n \r\n // Rewrite the import path in the template code\r\n // Handles import { cn } from \"../utils/cn\" or import { cn } from '../utils/cn'\r\n const rewrittenContent = content.replace(\r\n /['\"]\\.\\.\\/utils\\/cn['\"]/g,\r\n `\"${relativeImport}\"`\r\n );\r\n \r\n fs.writeFileSync(targetFilePath, rewrittenContent, 'utf8');\r\n}\r\n","export const button = {\n name: \"button\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"button.tsx\",\n content: `'use client';\r\n\r\nimport as React from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\nimport { motion, HTMLMotionProps } from 'framer-motion';\r\nimport { Loader2 } from 'lucide-react';\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl 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 active:scale-95\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\r\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border/50\",\r\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\r\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n link: \"text-primary underline-offset-4 hover:underline\",\r\n // Premium variants\r\n premium: \"bg-gradient-to-r from-violet-600 via-pink-600 to-orange-500 text-white shadow-lg shadow-purple-500/20 hover:shadow-xl hover:shadow-purple-500/30\",\r\n neon: \"bg-background border-2 border-primary text-foreground shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))] hover:shadow-[0_0_calc(var(--glow-radius)1.5)_rgba(var(--glow-color),calc(var(--glow-strength)1.5))]\",\r\n glass: \"backdrop-blur-md bg-zinc-900/10 dark:bg-zinc-100/10 border border-zinc-900/20 dark:border-zinc-100/20 text-zinc-900 dark:text-zinc-50 hover:bg-zinc-900/20 dark:hover:bg-zinc-100/20 shadow-md\",\r\n shimmer: \"relative overflow-hidden bg-slate-900 text-white dark:bg-white dark:text-black\",\r\n // New requested variants\r\n gradient: \"bg-gradient-to-r from-indigo-600 via-purple-600 to-violet-600 dark:from-indigo-500 dark:via-purple-500 dark:to-violet-500 text-white shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:shadow-indigo-500/30 hover:opacity-95\",\r\n glow: \"bg-primary text-primary-foreground shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))] hover:shadow-[0_0_calc(var(--glow-radius)1.5)_rgba(var(--glow-color),calc(var(--glow-strength)1.5))] border border-primary/20\",\r\n magnetic: \"bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-md hover:shadow-lg\",\r\n loading: \"bg-primary/80 text-primary-foreground/80 pointer-events-none cursor-wait\",\r\n },\r\n size: {\r\n default: \"h-10 px-5 py-2\",\r\n sm: \"h-9 rounded-lg px-3 text-xs\",\r\n lg: \"h-11 rounded-xl px-8 text-base\",\r\n icon: \"h-10 w-10 rounded-full\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n);\r\n\r\n/*\r\n Props for the Button component\r\n /\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof buttonVariants> {\r\n /* \r\n * Enable hover/tap spring motion animation\r\n * @default true \r\n /\r\n animate?: boolean;\r\n /* \r\n * Enable shimmer light animation effect\r\n * @default false\r\n /\r\n shimmer?: boolean;\r\n /* \r\n * Enable neon glow effect\r\n * @default false\r\n /\r\n glow?: boolean;\r\n /* \r\n * Display loading spinner icon and disable actions\r\n * @default false\r\n /\r\n isLoading?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n animate = true,\r\n shimmer = false,\r\n glow = false,\r\n isLoading = false,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const isShimmer = variant === 'shimmer' \|\| shimmer;\r\n const isMagnetic = variant === 'magnetic';\r\n const isGlow = variant === 'glow' \|\| glow;\r\n\r\n // Track mouse coords for magnetic hover movement\r\n const [magneticPos, setMagneticPos] = React.useState({ x: 0, y: 0 });\r\n\r\n const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n if (!isMagnetic) return;\r\n const { clientX, clientY, currentTarget } = e;\r\n const { left, top, width, height } = currentTarget.getBoundingClientRect();\r\n const x = clientX - (left + width / 2);\r\n const y = clientY - (top + height / 2);\r\n // spring weight multiplier\r\n setMagneticPos({ x: x 0.35, y: y * 0.35 });\r\n };\r\n\r\n const handleMouseLeave = () => {\r\n if (!isMagnetic) return;\r\n setMagneticPos({ x: 0, y: 0 });\r\n };\r\n\r\n const buttonContent = (\r\n <>\r\n {isShimmer && (\r\n <motion.div\r\n className=\"absolute inset-0 w-[200%] bg-gradient-to-r from-transparent via-white/20 to-transparent\"\r\n initial={{ x: '-100%' }}\r\n animate={{ x: '100%' }}\r\n transition={{\r\n repeat: Infinity,\r\n repeatType: 'loop',\r\n duration: 2,\r\n ease: 'linear',\r\n }}\r\n style={{ transform: 'skewX(-20deg)' }}\r\n />\r\n )}\r\n <span className=\"relative z-10 flex items-center justify-center gap-2\">\r\n {isLoading && <Loader2 className=\"animate-spin h-4 w-4 shrink-0\" />}\r\n {children}\r\n </span>\r\n </>\r\n );\r\n\r\n const activeVariant = isLoading ? \"loading\" : variant;\r\n\r\n // Disable button if loading\r\n const disabledState = props.disabled \|\| isLoading;\r\n\r\n // Destructure custom props to avoid passing invalid props down to HTML element\r\n const { ...htmlProps } = props;\r\n\r\n // Setup base styles\r\n const resolvedClassName = cn(\r\n buttonVariants({ variant: activeVariant, size, className }),\r\n isShimmer && \"relative overflow-hidden\",\r\n isGlow && \"shadow-[0_0_var(--glow-radius)_rgba(var(--glow-color),var(--glow-strength))]\"\r\n );\r\n\r\n if (!animate) {\r\n return (\r\n <button\r\n ref={ref}\r\n disabled={disabledState}\r\n className={resolvedClassName}\r\n {...(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {buttonContent}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <motion.button\r\n ref={ref}\r\n disabled={disabledState}\r\n className={resolvedClassName}\r\n onMouseMove={handleMouseMove}\r\n onMouseLeave={handleMouseLeave}\r\n animate={isMagnetic ? { x: magneticPos.x, y: magneticPos.y } : undefined}\r\n whileHover={{\r\n scale: isMagnetic ? 1.02 : 1.03,\r\n y: isMagnetic ? 0 : -1.5,\r\n shadow: isGlow ? \"0 0 calc(var(--glow-radius)1.5) rgba(var(--glow-color), calc(var(--glow-strength)1.5))\" : undefined,\r\n }}\r\n whileTap={{ scale: 0.97 }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 350,\r\n damping: 20,\r\n }}\r\n {...(htmlProps as any)}\r\n >\r\n {buttonContent}\r\n </motion.button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n\r\n// ----------------------------------------------------\r\n// Deprecated button wrappers for backward compatibility\r\n// ----------------------------------------------------\r\n\r\n/*\r\n @deprecated Use the unified \\`<Button variant=\"neon\">\\` instead.\r\n /\r\nexport const NeonButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"neon\" glow={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nNeonButton.displayName = \"NeonButton\";\r\n\r\n/\r\n @deprecated Use custom styles or class variance utilities on the unified \\`<Button>\\` instead.\r\n /\r\nexport const ThreeDButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"shadow-[0_5px_0_hsl(var(--primary-dark,240_5.9%_30%))] hover:shadow-[0_2px_0_hsl(var(--primary-dark,240_5.9%_30%))] active:translate-y-[3px] active:shadow-[0_0px_0_transparent] transition-all\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n);\r\nThreeDButton.displayName = \"ThreeDButton\";\r\n\r\n/\r\n @deprecated Use custom ripple animations on the unified \\`<Button>\\` instead.\r\n /\r\nexport const RippleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"relative overflow-hidden group active:scale-95 transition-transform\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute inset-0 bg-white/20 scale-0 rounded-full group-active:scale-[2] transition-transform duration-500 origin-center\"></span>\r\n <span className=\"relative z-10\">{children}</span>\r\n </Button>\r\n )\r\n);\r\nRippleButton.displayName = \"RippleButton\";\r\n\r\n/\r\n @deprecated Use standard utility classes on the unified \\`<Button>\\` instead.\r\n /\r\nexport const CyberpunkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n className={cn(\r\n \"bg-yellow-400 text-black font-extrabold uppercase tracking-widest border-2 border-black hover:bg-black hover:text-yellow-400 hover:border-yellow-400 transition-colors shadow-[4px_4px_0_0_#000] rounded-none hover:shadow-[4px_4px_0_0_#fff]\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n);\r\nCyberpunkButton.displayName = \"CyberpunkButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"magnetic\">\\` instead.\r\n /\r\nexport const MagneticButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"magnetic\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nMagneticButton.displayName = \"MagneticButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"shimmer\">\\` instead.\r\n /\r\nexport const ShimmerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"shimmer\" shimmer={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nShimmerButton.displayName = \"ShimmerButton\";\r\n\r\n/\r\n @deprecated Use a custom hover effect on the unified \\`<Button>\\` instead.\r\n /\r\nexport const BorderBeamButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, className, ...props }, ref) => (\r\n <Button\r\n ref={ref}\r\n variant=\"outline\"\r\n className={cn(\r\n \"relative overflow-hidden border border-border group\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"absolute inset-0 bg-gradient-to-r from-primary to-transparent opacity-0 group-hover:opacity-20 transition-opacity\"></div>\r\n <div className=\"absolute top-0 left-0 w-full h-[2px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left\"></div>\r\n <span className=\"relative z-10\">{children}</span>\r\n </Button>\r\n )\r\n);\r\nBorderBeamButton.displayName = \"BorderBeamButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button isLoading={...}>\\` instead.\r\n /\r\nexport const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps & { isLoading?: boolean }>(\r\n ({ children, isLoading = true, ...props }, ref) => (\r\n <Button ref={ref} isLoading={isLoading} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nLoadingButton.displayName = \"LoadingButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"destructive\" glow>\\` instead.\r\n /\r\nexport const DestructiveGlowButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"destructive\" glow={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nDestructiveGlowButton.displayName = \"DestructiveGlowButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"outline\">\\` instead.\r\n /\r\nexport const GhostOutlineButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"outline\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGhostOutlineButton.displayName = \"GhostOutlineButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"glow\">\\` instead.\r\n /\r\nexport const GlowButton = React.forwardRef<HTMLButtonElement, ButtonProps & { glowColor?: string }>(\r\n ({ children, glowColor = \"rgba(139, 92, 246, 0.15)\", className, ...props }, ref) => (\r\n <div className=\"relative group inline-block\">\r\n <div\r\n className=\"absolute -inset-0.5 bg-gradient-to-r from-primary to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200\"\r\n style={{ backgroundColor: glowColor }}\r\n />\r\n <Button ref={ref} className={cn(\"relative bg-background\", className)} {...props}>\r\n {children}\r\n </Button>\r\n </div>\r\n )\r\n);\r\nGlowButton.displayName = \"GlowButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button shimmer>\\` instead.\r\n /\r\nexport const ShinyButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} shimmer={true} {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nShinyButton.displayName = \"ShinyButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"gradient\">\\` instead.\r\n /\r\nexport const GradientButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"gradient\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGradientButton.displayName = \"GradientButton\";\r\n\r\n/\r\n @deprecated Use the unified \\`<Button variant=\"glass\">\\` instead.\r\n /\r\nexport const GlassButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ children, ...props }, ref) => (\r\n <Button ref={ref} variant=\"glass\" {...props}>\r\n {children}\r\n </Button>\r\n )\r\n);\r\nGlassButton.displayName = \"GlassButton\";\r\n\r\n`\n};\n","export const modal = {\n name: \"modal\",\n dependencies: [\n \"@radix-ui/react-dialog\",\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"lucide-react\",\n \"framer-motion\"\n],\n componentsDependencies: [\n \"button\"\n],\n fileName: \"modal.tsx\",\n content: `\"use client\"\r\n\r\nimport as React from \"react\"\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\r\nimport { X, AlertTriangle, CheckCircle, Star } from \"lucide-react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"../utils/cn\"\r\n\r\nconst Dialog = DialogPrimitive.Root\r\n\r\nconst DialogTrigger = DialogPrimitive.Trigger\r\n\r\nconst DialogPortal = DialogPrimitive.Portal\r\n\r\nconst DialogClose = DialogPrimitive.Close\r\n\r\nconst DialogOverlay = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Overlay\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\r\n\r\nconst dialogContentVariants = cva(\r\n \"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/95 backdrop-blur-md p-6 shadow-2xl 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]:scale-95 data-[state=open]:scale-100 data-[state=closed]:translate-y-[-48%] data-[state=open]:translate-y-[-50%] rounded-2xl\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border-border/50\",\r\n glass: \"bg-white/10 backdrop-blur-xl border-white/20 shadow-2xl\",\r\n destructive: \"border-destructive/20\",\r\n success: \"border-green-500/20\",\r\n fullscreen: \"max-w-full h-screen rounded-none\",\r\n drawer: \"sm:max-w-full sm:h-[50vh] sm:rounded-b-none sm:rounded-t-[20px] fixed bottom-0 top-auto translate-y-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\r\n },\r\n size: {\r\n sm: \"max-w-sm\",\r\n md: \"max-w-md\",\r\n lg: \"max-w-lg\",\r\n xl: \"max-w-xl\",\r\n \"2xl\": \"max-w-2xl\",\r\n full: \"max-w-[95vw] md:max-w-[90vw]\",\r\n },\r\n scrollable: {\r\n true: \"max-h-[80vh] overflow-y-auto\",\r\n false: \"\",\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"lg\",\r\n scrollable: false,\r\n },\r\n }\r\n)\r\n\r\nexport interface DialogContentProps\r\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\r\n VariantProps<typeof dialogContentVariants> {}\r\n\r\nconst DialogContent = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Content>,\r\n DialogContentProps\r\n>(({ className, variant, size, scrollable, children, ...props }, ref) => (\r\n <DialogPortal>\r\n <DialogOverlay />\r\n <DialogPrimitive.Content\r\n ref={ref}\r\n className={cn(dialogContentVariants({ variant, size, scrollable, className }))}\r\n {...props}\r\n >\r\n {children}\r\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-full p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\">\r\n <X className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Close</span>\r\n </DialogPrimitive.Close>\r\n </DialogPrimitive.Content>\r\n </DialogPortal>\r\n))\r\nDialogContent.displayName = DialogPrimitive.Content.displayName\r\n\r\nconst DialogHeader = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nDialogHeader.displayName = \"DialogHeader\"\r\n\r\nconst DialogFooter = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nDialogFooter.displayName = \"DialogFooter\"\r\n\r\nconst DialogTitle = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Title>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Title\r\n ref={ref}\r\n className={cn(\r\n \"text-xl font-semibold leading-none tracking-tight bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogTitle.displayName = DialogPrimitive.Title.displayName\r\n\r\nconst DialogDescription = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Description>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Description\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nDialogDescription.displayName = DialogPrimitive.Description.displayName\r\n\r\nexport {\r\n Dialog,\r\n DialogPortal,\r\n DialogOverlay,\r\n DialogClose,\r\n DialogTrigger,\r\n DialogContent,\r\n DialogHeader,\r\n DialogFooter,\r\n DialogTitle,\r\n DialogDescription,\r\n}\r\n`\n};\n","export const card = {\n name: \"card\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"card.tsx\",\n content: `'use client';\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"../utils/cn\"\r\nimport { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from \"framer-motion\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { Heart, Share2, MapPin, Star } from \"lucide-react\"\r\n\r\nconst cardVariants = cva(\r\n \"rounded-2xl text-card-foreground transition-all duration-300 overflow-hidden\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border bg-card text-card-foreground shadow-sm hover:shadow-md\",\r\n glass: \"backdrop-blur-md bg-white/10 dark:bg-black/20 border border-white/20 dark:border-white/10 shadow-lg\",\r\n gradient: \"bg-gradient-to-br from-violet-500/10 via-pink-500/10 to-orange-500/10 border border-purple-500/20 shadow-lg shadow-purple-500/5\",\r\n glow: \"bg-card border-2 border-primary/20 shadow-[0_0_15px_rgba(var(--primary-rgb),0.1)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.2)]\",\r\n // New variants\r\n bento: \"border border-border/60 bg-gradient-to-br from-card to-muted/20 text-card-foreground shadow-md hover:shadow-lg hover:border-primary/30 relative\",\r\n spotlight: \"border bg-card text-card-foreground relative hover:border-primary/20\",\r\n flip: \"bg-transparent border-0 shadow-none overflow-visible relative\",\r\n tilt: \"border bg-card text-card-foreground shadow-md\",\r\n },\r\n hover: {\r\n none: \"\",\r\n lift: \"hover:-translate-y-1.5 hover:shadow-lg\",\r\n glow: \"hover:border-primary/50 hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.25)]\",\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n hover: \"lift\",\r\n }\r\n }\r\n)\r\n\r\n/*\r\n Props for the Card component\r\n /\r\nexport interface CardProps\r\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n VariantProps<typeof cardVariants> {\r\n /\r\n Whether to enable hover spring animations\r\n * @default true\r\n /\r\n animate?: boolean;\r\n /\r\n Back content displayed when using the \\`flip\\` variant on hover\r\n /\r\n backContent?: React.ReactNode;\r\n /\r\n Custom radial spotlight background color (e.g., rgba(168, 85, 247, 0.15))\r\n * @default \"rgba(139, 92, 246, 0.15)\"\r\n /\r\n spotlightColor?: string;\r\n}\r\n\r\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n hover,\r\n animate = true,\r\n backContent,\r\n spotlightColor = \"rgba(139, 92, 246, 0.15)\",\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Feature toggles based on variants\r\n const isSpotlight = variant === \"spotlight\";\r\n const isFlip = variant === \"flip\";\r\n const isTilt = variant === \"tilt\";\r\n\r\n // Spotlight mouse tracking state\r\n const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });\r\n const handleMouseMoveSpotlight = (e: React.MouseEvent<HTMLDivElement>) => {\r\n if (!isSpotlight) return;\r\n const { currentTarget, clientX, clientY } = e;\r\n const { left, top } = currentTarget.getBoundingClientRect();\r\n setMousePos({ x: clientX - left, y: clientY - top });\r\n };\r\n\r\n // Tilt mouse tracking state\r\n const [tiltPos, setTiltPos] = React.useState({ rotateX: 0, rotateY: 0 });\r\n const handleMouseMoveTilt = (e: React.MouseEvent<HTMLDivElement>) => {\r\n if (!isTilt) return;\r\n const { currentTarget, clientX, clientY } = e;\r\n const { left, top, width, height } = currentTarget.getBoundingClientRect();\r\n const x = clientX - left;\r\n const y = clientY - top;\r\n const maxTilt = 12; // degrees max rotation\r\n const rotateX = ((y - height / 2) / (height / 2)) -maxTilt;\r\n const rotateY = ((x - width / 2) / (width / 2)) * maxTilt;\r\n setTiltPos({ rotateX, rotateY });\r\n };\r\n\r\n const handleMouseLeaveTilt = () => {\r\n if (!isTilt) return;\r\n setTiltPos({ rotateX: 0, rotateY: 0 });\r\n };\r\n\r\n // Flip card hover state\r\n const [isFlipped, setIsFlipped] = React.useState(false);\r\n\r\n // Destructure custom props to avoid DOM validation warnings\r\n const { ...htmlProps } = props;\r\n\r\n // Flip Variant Render\r\n if (isFlip) {\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(cardVariants({ variant, hover, className }), \"perspective-1000 w-full h-full\")}\r\n onMouseEnter={() => setIsFlipped(true)}\r\n onMouseLeave={() => setIsFlipped(false)}\r\n {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n <motion.div\r\n className=\"relative w-full h-full transition-all duration-500 preserve-3d\"\r\n animate={{ rotateY: isFlipped ? 180 : 0 }}\r\n transition={{ type: \"spring\", stiffness: 300, damping: 22 }}\r\n >\r\n {/* Front Face /}\r\n <div className=\"absolute inset-0 backface-hidden border bg-card text-card-foreground rounded-2xl shadow-sm flex flex-col justify-between overflow-hidden\">\r\n {children}\r\n </div>\r\n\r\n {/ Back Face /}\r\n <div className=\"absolute inset-0 backface-hidden rotate-y-180 border bg-gradient-to-br from-primary/10 to-primary/5 text-card-foreground rounded-2xl shadow-sm flex flex-col p-6 items-center justify-center text-center overflow-hidden\">\r\n {backContent \|\| (\r\n <div className=\"text-sm font-medium text-muted-foreground\">\r\n Flip side content placeholder\r\n </div>\r\n )}\r\n </div>\r\n </motion.div>\r\n </div>\r\n );\r\n }\r\n\r\n // Spotlight Variant Render Extra Element\r\n const spotlightEffect = isSpotlight && (\r\n <div\r\n className=\"pointer-events-none absolute -inset-px rounded-2xl opacity-0 hover:opacity-100 group-hover:opacity-100 transition-opacity duration-300\"\r\n style={{\r\n background: \\`radial-gradient(400px circle at \\${mousePos.x}px \\${mousePos.y}px, \\${spotlightColor}, transparent 80%)\\`,\r\n }}\r\n />\r\n );\r\n\r\n // Build the resolved element attributes\r\n const cardClass = cn(cardVariants({ variant, hover: isFlip \|\| isTilt ? \"none\" : hover, className }), isSpotlight && \"group\");\r\n\r\n if (animate \|\| isTilt) {\r\n return (\r\n <motion.div\r\n ref={ref}\r\n className={cardClass}\r\n onMouseMove={(e) => {\r\n if (isSpotlight) handleMouseMoveSpotlight(e);\r\n if (isTilt) handleMouseMoveTilt(e);\r\n }}\r\n onMouseLeave={() => {\r\n if (isTilt) handleMouseLeaveTilt();\r\n }}\r\n animate={\r\n isTilt\r\n ? { rotateX: tiltPos.rotateX, rotateY: tiltPos.rotateY }\r\n : undefined\r\n }\r\n whileHover={isTilt ? undefined : { scale: 1.015 }}\r\n transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n {...(htmlProps as any)}\r\n >\r\n {spotlightEffect}\r\n {children}\r\n </motion.div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cardClass}\r\n {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n {children}\r\n </div>\r\n );\r\n }\r\n)\r\nCard.displayName = \"Card\"\r\n\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\r\n {...props}\r\n />\r\n))\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h3\r\n ref={ref}\r\n className={cn(\"font-semibold leading-none tracking-tight text-xl bg-gradient-to-br from-foreground to-foreground/75 bg-clip-text text-transparent\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed mt-1\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(\"p-6 pt-0 leading-relaxed text-sm text-foreground/90\", className)} {...props} />\r\n))\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center p-6 pt-0 border-t border-border/10 mt-auto\", className)}\r\n {...props}\r\n />\r\n))\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\n\r\nexport const GlassCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"glass\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGlassCard.displayName = \"GlassCard\";\r\n\r\nexport const GlowCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"glow\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGlowCard.displayName = \"GlowCard\";\r\n\r\nexport const GradientCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"gradient\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nGradientCard.displayName = \"GradientCard\";\r\n\r\nexport const HoverCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} hover=\"lift\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nHoverCard.displayName = \"HoverCard\";\r\n\r\nexport const SpotlightCard = React.forwardRef<HTMLDivElement, CardProps>(\r\n ({ children, ...props }, ref) => (\r\n <Card ref={ref} variant=\"spotlight\" {...props}>\r\n {children}\r\n </Card>\r\n )\r\n);\r\nSpotlightCard.displayName = \"SpotlightCard\";\r\n\r\n\r\n\r\n\r\n`\n};\n","export const alert = {\n name: \"alert\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"alert.tsx\",\n content: `\"use client\"\r\n\r\nimport as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"../utils/cn\"\r\nimport { motion, AnimatePresence } from \"framer-motion\"\r\nimport { AlertCircle, Info, CheckCircle2, XCircle, Cookie, BellRing, WifiOff, AlertTriangle, X } from \"lucide-react\"\r\n\r\nconst alertVariants = cva(\r\n \"relative w-full rounded-2xl border p-4 [&>svg~]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 transition-all duration-300 shadow-sm\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-background/50 border-border text-foreground\",\r\n destructive: \"border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400 [&>svg]:text-red-600 dark:[&>svg]:text-red-400\",\r\n success: \"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400\",\r\n warning: \"border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400\",\r\n info: \"border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400\",\r\n glass: \"backdrop-blur-md bg-white/5 dark:bg-black/20 border-white/10 dark:border-white/5 text-foreground\",\r\n floating: \"fixed bottom-5 right-5 z-50 max-w-sm bg-card/95 backdrop-blur-md border border-border/80 text-foreground shadow-[0_10px_30px_rgba(0,0,0,0.25)] animate-slide-up\",\r\n minimal: \"border-0 bg-muted/40 p-3 text-sm rounded-xl text-foreground hover:bg-muted/60 shadow-none [&>svg]:top-3.5\",\r\n neon: \"border-purple-500/50 bg-purple-500/10 text-purple-200 shadow-[0_0_15px_rgba(168,85,247,0.3)] [&>svg]:text-purple-400\",\r\n cyberpunk: \"border-l-4 border-yellow-400 bg-black text-yellow-400 shadow-[4px_4px_0_0_rgba(250,204,21,1)] rounded-none font-mono uppercase [&>svg]:text-yellow-400\",\r\n gradient: \"bg-gradient-to-r from-blue-500/10 to-indigo-500/10 border-blue-500/20 text-foreground [&>svg]:text-blue-500\",\r\n banner: \"w-full bg-indigo-600 text-white border-0 shadow-md rounded-none sm:rounded-xl [&>svg]:text-white\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nexport interface AlertProps\r\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n VariantProps<typeof alertVariants> {\r\n /\n Описание для animate\n * @default undefined\n /\n animate?: boolean;\r\n /\n Описание для title\n * @default undefined\n /\n title?: React.ReactNode;\r\n /\n Описание для description\n * @default undefined\n /\n description?: React.ReactNode;\r\n /\n Описание для icon\n * @default undefined\n /\n icon?: React.ReactNode;\r\n /\n Описание для dismissible\n * @default undefined\n /\n dismissible?: boolean;\r\n /\n Описание для onDismiss\n * @default undefined\n /\n onDismiss?: () => void;\r\n /\n Описание для actionText\n * @default undefined\n /\n actionText?: string;\r\n /\n Описание для onAction\n * @default undefined\n /\n onAction?: () => void;\r\n}\r\n\r\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n animate = true,\r\n title,\r\n description,\r\n icon,\r\n dismissible = false,\r\n onDismiss,\r\n actionText,\r\n onAction,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [isOpen, setIsOpen] = React.useState(true);\r\n\r\n if (!isOpen) return null;\r\n\r\n const isMinimal = variant === \"minimal\";\r\n const isBanner = variant === \"banner\";\r\n\r\n const defaultIcon = icon \|\| (\r\n variant === \"destructive\" ? <XCircle className=\"h-4 w-4\" /> :\r\n variant === \"success\" ? <CheckCircle2 className=\"h-4 w-4\" /> :\r\n variant === \"warning\" ? <AlertTriangle className=\"h-4 w-4\" /> :\r\n variant === \"info\" ? <Info className=\"h-4 w-4\" /> :\r\n variant === \"default\" ? <AlertCircle className=\"h-4 w-4\" /> :\r\n null\r\n );\r\n\r\n const content = (\r\n <>\r\n {defaultIcon && <div className={cn(\"absolute left-4\", isMinimal ? \"top-3\" : \"top-4\")}>{defaultIcon}</div>}\r\n <div className={cn(defaultIcon ? \"pl-7\" : \"\", \"pr-8\")}>\r\n {title && <AlertTitle>{title}</AlertTitle>}\r\n {description && <AlertDescription>{description}</AlertDescription>}\r\n {!title && !description && children}\r\n </div>\r\n {isBanner && actionText && (\r\n <button\r\n onClick={onAction}\r\n className=\"absolute right-12 top-1/2 -translate-y-1/2 text-xs font-bold bg-white text-indigo-600 px-3 py-1.5 rounded-md hover:bg-indigo-50 transition-colors\"\r\n >\r\n {actionText}\r\n </button>\r\n )}\r\n {dismissible && (\r\n <button\r\n onClick={() => {\r\n setIsOpen(false);\r\n onDismiss?.();\r\n }}\r\n className=\"absolute right-4 top-4 opacity-50 hover:opacity-100 transition-opacity p-0.5 rounded-md hover:bg-muted\"\r\n aria-label=\"Dismiss\"\r\n >\r\n <X className=\"h-4 w-4\" />\r\n </button>\r\n )}\r\n </>\r\n );\r\n\r\n const alertClass = cn(alertVariants({ variant }), className);\r\n\r\n if (animate) {\r\n return (\r\n <motion.div\r\n ref={ref}\r\n role=\"alert\"\r\n initial={{ opacity: 0, y: variant === \"floating\" ? 30 : 15, scale: variant === \"floating\" ? 0.95 : 1 }}\r\n animate={{ opacity: 1, y: 0, scale: 1 }}\r\n exit={{ opacity: 0, y: variant === \"floating\" ? 20 : 10, scale: 0.95 }}\r\n transition={{ type: \"spring\", stiffness: 350, damping: 24 }}\r\n className={alertClass}\r\n {...(props as any)}\r\n >\r\n {content}\r\n </motion.div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={alertClass}\r\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\r\n >\r\n {content}\r\n </div>\r\n );\r\n }\r\n)\r\nAlert.displayName = \"Alert\"\r\n\r\nconst AlertTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h5\r\n ref={ref}\r\n className={cn(\"mb-1 font-semibold leading-none tracking-tight text-base text-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nconst AlertDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-relaxed mt-1 opacity-90 [&_p]:leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\n// ----------------------------------------------------\r\n// Merged subcomponents and wrappers\r\n// ----------------------------------------------------\r\n\r\n// 1. ToastAlertWrapper\r\nexport const ToastAlertWrapper = ({ children, className, title, description, time }: any) => (\r\n <div className={cn(\"max-w-sm w-full bg-background border border-border/80 shadow-xl rounded-2xl p-4 flex gap-4 items-start relative\", className)}>\r\n <CheckCircle2 className=\"h-5 w-5 text-green-500 shrink-0 mt-0.5\" />\r\n <div className=\"flex-1\">\r\n {title && <h4 className=\"font-semibold text-sm\">{title}</h4>}\r\n {description && <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>}\r\n {children}\r\n </div>\r\n {time && <span className=\"text-xs text-muted-foreground/60\">{time}</span>}\r\n </div>\r\n)\r\n\r\n// 2. CookieAlert\r\nexport const CookieAlert = ({ onAccept, onDecline }: { onAccept?: () => void; onDecline?: () => void }) => {\r\n const [visible, setVisible] = React.useState(true)\r\n if (!visible) return null\r\n return (\r\n <div className=\"max-w-md bg-card border rounded-2xl p-6 shadow-2xl space-y-4\">\r\n <div className=\"flex items-center gap-3\">\r\n <Cookie className=\"h-6 w-6 text-orange-500 animate-bounce\" />\r\n <h4 className=\"font-bold text-lg\">Cookie Preferences</h4>\r\n </div>\r\n <p className=\"text-sm text-muted-foreground\">\r\n We use cookies to improve your experience. By continuing to visit this site you agree to our use of cookies.\r\n </p>\r\n <div className=\"flex gap-3 pt-2\">\r\n <button \r\n onClick={() => { setVisible(false); onAccept?.(); }}\r\n className=\"flex-1 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/95 transition-colors rounded-xl text-sm font-semibold shadow-md shadow-primary/10\"\r\n >\r\n Accept All\r\n </button>\r\n <button \r\n onClick={() => { setVisible(false); onDecline?.(); }}\r\n className=\"flex-1 px-4 py-2 border rounded-xl text-sm font-semibold hover:bg-muted transition-colors\"\r\n >\r\n Decline\r\n </button>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n// 3. OfflineBanner\r\nexport const OfflineBanner = () => (\r\n <div className=\"w-full bg-red-600 text-white p-3.5 flex justify-center items-center gap-2 text-sm font-semibold shadow-md sm:rounded-xl\">\r\n <WifiOff className=\"w-4 h-4 animate-pulse\" /> You are currently offline. Some features may be unavailable.\r\n </div>\r\n)\r\n\r\n// 4. RateLimitAlert\r\nexport const RateLimitAlert = () => (\r\n <div className=\"border border-orange-500/30 bg-orange-500/10 p-5 rounded-2xl flex gap-3 items-start max-w-md shadow-sm\">\r\n <AlertTriangle className=\"w-5 h-5 text-orange-500 shrink-0 mt-0.5 animate-pulse\" />\r\n <div className=\"flex-1\">\r\n <h4 className=\"font-bold text-orange-600 dark:text-orange-400\">Rate Limit Exceeded</h4>\r\n <p className=\"text-sm text-orange-600/80 dark:text-orange-400/80 mt-1 mb-4\">\r\n You have made too many requests. Please wait 45 seconds before trying again.\r\n </p>\r\n <div className=\"w-full h-1.5 bg-orange-500/20 rounded-full overflow-hidden\">\r\n <motion.div animate={{ width: [\"100%\", \"0%\"] }} transition={{ duration: 45, ease: \"linear\" }} className=\"h-full bg-orange-500\" />\r\n </div>\r\n </div>\r\n </div>\r\n)\r\n\r\n// Re-export original/merged components\r\nexport { Alert, AlertTitle, AlertDescription }\r\n/\r\n @deprecated Use the unified \\`<Alert variant=\"cyberpunk\">\\` instead.\r\n /\r\nexport const CyberAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"cyberpunk\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"success\">\\` or \\`<Alert variant=\"info\">\\` instead.\r\n /\r\nexport const SoftAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant={variant === \"success\" ? \"success\" : \"info\"} title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"minimal\">\\` instead.\r\n /\r\nexport const MinimalAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"minimal\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert className=\"border-l-4 ...\">\\` instead.\r\n /\r\nexport const LeftBorderAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant={variant === \"warning\" ? \"warning\" : \"default\"} className=\"border-l-4 border-l-primary\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use custom styled layouts or standard elements instead.\r\n /\r\nexport const IconTopAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <div className=\"flex flex-col items-center text-center p-6 bg-card border rounded-2xl\" {...props}>\r\n <div className=\"h-12 w-12 rounded-full bg-destructive/10 text-destructive flex items-center justify-center mb-4\">\r\n <AlertCircle className=\"h-6 w-6\" />\r\n </div>\r\n <h4 className=\"font-bold text-lg mb-2\">{title}</h4>\r\n <p className=\"text-sm text-muted-foreground\">{description}</p>\r\n </div>\r\n)\r\n\r\n/\r\n @deprecated Use standard tailwind background colors on unified \\`<Alert>\\` instead.\r\n /\r\nexport const SolidAlert = ({ title, description, variant = \"default\", ...props }: any) => {\r\n const bgClasses: Record<string, string> = {\r\n error: \"bg-red-600 text-white border-0\",\r\n success: \"bg-emerald-600 text-white border-0\",\r\n warning: \"bg-amber-500 text-black border-0\",\r\n default: \"bg-primary text-primary-foreground border-0\",\r\n }\r\n const bgClass = bgClasses[variant] \|\| bgClasses.default\r\n return (\r\n <div className={cn(\"p-4 rounded-xl shadow-lg flex gap-3 items-start\", bgClass)} {...props}>\r\n <Info className=\"h-5 w-5 shrink-0 mt-0.5\" />\r\n <div>\r\n <h4 className=\"font-bold\">{title}</h4>\r\n <p className=\"text-sm opacity-90 mt-1\">{description}</p>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"banner\">\\` instead.\r\n /\r\nexport const BannerAlert = ({ message, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"banner\" title={message} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"neon\">\\` instead.\r\n /\r\nexport const NeonAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"neon\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert variant=\"glass\">\\` instead.\r\n /\r\nexport const GlassAlert = ({ title, description, variant = \"default\", ...props }: any) => (\r\n <Alert variant=\"glass\" title={title} description={description} {...props} />\r\n)\r\n\r\n/\r\n @deprecated Use \\`<Alert dismissible={true}>\\` instead.\r\n /\r\nexport const DismissibleAlert = ({ variant = \"default\", title, description, ...props }: any) => (\r\n <Alert variant={variant} title={title \|\| \"Attention\"} description={description \|\| \"Action required\"} dismissible={true} {...props} />\r\n)\r\n\r\n`\n};\n","export const badge = {\n name: \"badge\",\n dependencies: [\n \"class-variance-authority\",\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"badge.tsx\",\n content: `'use client';\n\nimport as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../utils/cn\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center gap-1 rounded-full border font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-default\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground border-border hover:bg-accent\",\n gradient: \"border-transparent bg-gradient-to-r from-violet-600 to-pink-600 dark:from-violet-500 dark:to-pink-500 text-white shadow-sm\",\n neon: \"border-primary/50 bg-primary/10 text-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.3)]\",\n success: \"border-transparent bg-emerald-500/20 text-emerald-600 dark:text-emerald-400\",\n warning: \"border-transparent bg-amber-500/20 text-amber-600 dark:text-amber-400\",\n info: \"border-transparent bg-blue-500/20 text-blue-600 dark:text-blue-400\",\n },\n size: {\n default: \"px-2.5 py-0.5 text-xs\",\n sm: \"px-1.5 py-0.5 text-[10px]\",\n lg: \"px-3 py-1 text-sm\",\n }\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {\n /*\n Описание для pulse\n * @default undefined\n /\n pulse?: boolean;\n /\n Описание для dot\n * @default undefined\n /\n dot?: boolean;\n /\n Описание для text\n * @default undefined\n /\n text?: string;\n}\n\nfunction Badge({ className, variant, size, pulse = false, dot = false, children, text, ...props }: BadgeProps) {\n const showDot = dot \|\| pulse;\n \n return (\n <div className={cn(badgeVariants({ variant, size }), className)} {...props}>\n {showDot && (\n <span className=\"relative flex h-2 w-2 mr-1\">\n {pulse && (\n <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75\"></span>\n )}\n <span className=\"relative inline-flex rounded-full h-2 w-2 bg-current\"></span>\n </span>\n )}\n {children \|\| text}\n </div>\n )\n}\n\nexport { Badge, badgeVariants }\n`\n};\n","export const morphingGeometry = {\n name: \"morphing-geometry\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n ],\n fileName: \"morphing-geometry.tsx\",\n content: `'use client';\n\nimport as React from 'react';\nimport { motion, HTMLMotionProps } from 'framer-motion';\nimport { Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\nexport type MorphingShape = 'pill' \| 'circle' \| 'square' \| 'squircle' \| 'custom';\nexport type MorphingVariant = 'gradient' \| 'aurora' \| 'neon' \| 'glass' \| 'outline' \| 'subtle';\nexport type MorphingColor = 'violet' \| 'cyan' \| 'emerald' \| 'rose' \| 'amber' \| 'rainbow' \| 'mono';\nexport type MorphingSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'custom';\n\nexport interface MorphingGeometryProps extends Omit<HTMLMotionProps<'div'>, 'children'> {\n shape?: MorphingShape;\n radius?: number \| string;\n variant?: MorphingVariant;\n color?: MorphingColor;\n size?: MorphingSize;\n dimension?: number;\n spin?: boolean;\n spinDuration?: number;\n interactive?: boolean;\n glow?: boolean;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport const MorphingGeometry = React.forwardRef<HTMLDivElement, MorphingGeometryProps>(\n (\n {\n shape = 'squircle',\n radius,\n variant = 'gradient',\n color = 'violet',\n size = 'md',\n dimension,\n spin = false,\n spinDuration = 6,\n interactive = false,\n glow = true,\n icon,\n children,\n className,\n style,\n onClick,\n ...props\n },\n ref\n ) => {\n return (\n <motion.div\n ref={ref}\n animate={spin ? { rotate: [0, 90, 180, 270, 360] } : { rotate: 0 }}\n transition={{ rotate: { duration: spinDuration, repeat: Infinity, ease: 'linear' }, borderRadius: { duration: 0.4 } }}\n className={cn('relative flex items-center justify-center select-none overflow-hidden transition-all duration-300 w-24 h-24', className)}\n style={{ borderRadius: radius \|\| '24%', ...style }}\n {...props}\n >\n <div className=\"relative z-10 flex flex-col items-center justify-center p-2 text-center\">\n {icon \|\| children \|\| <Sparkles className=\"w-6 h-6 text-white\" />}\n </div>\n </motion.div>\n );\n }\n);\n\nMorphingGeometry.displayName = 'MorphingGeometry';\nexport default MorphingGeometry;\n`\n};\n","export const auroraBorderFX = {\n name: \"aurora-border-fx\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n ],\n fileName: \"aurora-border-fx.tsx\",\n content: `'use client';\n\nimport * as React from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\nexport type AuroraFXColor = 'violet' \| 'cyan' \| 'emerald' \| 'rose' \| 'amber' \| string;\nexport type AuroraFXGlow = 'none' \| 'subtle' \| 'medium' \| 'strong';\nexport type AuroraFXRadius = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\nexport interface AuroraColorOption {\n name: string;\n hex: string;\n}\n\nexport const defaultAuroraColors: AuroraColorOption[] = [\n { name: 'Violet', hex: '#8b5cf6' },\n { name: 'Cyan', hex: '#06b6d4' },\n { name: 'Emerald', hex: '#10b981' },\n { name: 'Rose', hex: '#f43f5e' },\n { name: 'Amber', hex: '#f59e0b' },\n];\n\nconst colorPresetMap: Record<string, string> = {\n violet: '#8b5cf6',\n cyan: '#06b6d4',\n emerald: '#10b981',\n rose: '#f43f5e',\n amber: '#f59e0b',\n};\n\nconst radiusMap: Record<AuroraFXRadius, { outer: string; inner: string }> = {\n sm: { outer: 'rounded-lg', inner: 'rounded-[calc(0.5rem-1px)]' },\n md: { outer: 'rounded-xl', inner: 'rounded-[calc(0.75rem-1px)]' },\n lg: { outer: 'rounded-2xl', inner: 'rounded-[calc(1rem-1px)]' },\n xl: { outer: 'rounded-3xl', inner: 'rounded-[calc(1.5rem-1.5px)]' },\n full: { outer: 'rounded-full', inner: 'rounded-full' },\n};\n\nconst glowOpacityMap: Record<AuroraFXGlow, number> = {\n none: 0,\n subtle: 0.25,\n medium: 0.45,\n strong: 0.75,\n};\n\nexport interface AuroraBorderFXProps extends React.HTMLAttributes<HTMLDivElement> {\n color?: AuroraFXColor;\n glow?: AuroraFXGlow;\n radius?: AuroraFXRadius;\n badgeText?: string;\n badgeIcon?: React.ReactNode;\n title?: string;\n description?: string;\n showColorPicker?: boolean;\n colors?: AuroraColorOption[];\n activeColor?: string;\n onColorChange?: (colorHex: string) => void;\n previewSlot?: React.ReactNode;\n footerSlot?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport const AuroraBorderFX = React.forwardRef<HTMLDivElement, AuroraBorderFXProps>(\n (\n {\n color = 'violet',\n glow = 'medium',\n radius = 'lg',\n badgeText = 'Aurora Border FX',\n badgeIcon = <Sparkles className=\"w-3 h-3\" />,\n title = 'Reactive Aurora Borders',\n description = 'Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.',\n showColorPicker = true,\n colors = defaultAuroraColors,\n activeColor: controlledColor,\n onColorChange,\n previewSlot,\n footerSlot,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const resolvedInitialColor = colorPresetMap[color] \|\| color \|\| '#8b5cf6';\n const [internalColor, setInternalColor] = React.useState<string>(resolvedInitialColor);\n\n React.useEffect(() => {\n if (colorPresetMap[color]) {\n setInternalColor(colorPresetMap[color]);\n } else if (color) {\n setInternalColor(color);\n }\n }, [color]);\n\n const currentColor = controlledColor !== undefined ? controlledColor : internalColor;\n const radiusConfig = radiusMap[radius] \|\| radiusMap.lg;\n const glowOpacity = glowOpacityMap[glow] ?? 0.45;\n\n const handleSelectColor = (hex: string) => {\n if (controlledColor === undefined) {\n setInternalColor(hex);\n }\n onColorChange?.(hex);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative isolate p-5 sm:p-6 overflow-hidden flex flex-col justify-between group transition-all duration-300',\n 'border border-border/80 bg-card/60 backdrop-blur-xl shadow-xl',\n radiusConfig.outer,\n className\n )}\n {...props}\n >\n {glow !== 'none' && (\n <div\n className=\"absolute -top-12 -right-12 w-48 h-48 rounded-full blur-[85px] pointer-events-none transition-colors duration-500 -z-10\"\n style={{\n backgroundColor: currentColor,\n opacity: glowOpacity,\n }}\n />\n )}\n\n {glow !== 'none' && glow !== 'subtle' && (\n <div\n className=\"absolute -bottom-10 -left-10 w-40 h-40 rounded-full blur-[90px] pointer-events-none transition-colors duration-700 -z-10\"\n style={{\n backgroundColor: currentColor,\n opacity: glowOpacity * 0.4,\n }}\n />\n )}\n\n {children ? (\n <div className=\"relative z-10 w-full h-full\">{children}</div>\n ) : (\n <div className=\"relative z-10 flex flex-col justify-between h-full space-y-5\">\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between gap-3\">\n {badgeText && (\n <div\n className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border transition-all duration-300 shadow-xs\"\n style={{\n backgroundColor: \\`\\${currentColor}18\\`,\n borderColor: \\`\\${currentColor}40\\`,\n color: currentColor,\n }}\n >\n {badgeIcon}\n <span>{badgeText}</span>\n </div>\n )}\n\n {showColorPicker && colors && colors.length > 0 && (\n <div className=\"flex items-center gap-1.5 bg-muted/60 dark:bg-muted/40 p-1 rounded-full border border-border/60 backdrop-blur-md\">\n {colors.map((c) => {\n const isActive = currentColor.toLowerCase() === c.hex.toLowerCase();\n return (\n <button\n key={c.name}\n type=\"button\"\n onClick={() => handleSelectColor(c.hex)}\n className={cn(\n 'w-3.5 h-3.5 rounded-full transition-all duration-200 cursor-pointer',\n isActive\n ? 'scale-125 ring-2 ring-foreground/40 shadow-xs'\n : 'hover:scale-110 opacity-70 hover:opacity-100'\n )}\n style={{ backgroundColor: c.hex }}\n title={\\`Switch to \\${c.name}\\`}\n aria-label={\\`Switch glow to \\${c.name}\\`}\n />\n );\n })}\n </div>\n )}\n </div>\n\n <div>\n {title && (\n <h3 className=\"text-base sm:text-lg font-bold tracking-tight text-foreground\">\n {title}\n </h3>\n )}\n {description && (\n <p className=\"text-xs sm:text-sm text-muted-foreground leading-relaxed mt-1\">\n {description}\n </p>\n )}\n </div>\n </div>\n\n <div className=\"pt-2 flex items-center justify-center\">\n {previewSlot ? (\n previewSlot\n ) : (\n <div\n className={cn(\n 'relative p-[1.5px] overflow-hidden transition-all duration-300 w-full max-w-[280px]',\n radiusConfig.inner\n )}\n style={{\n background: \\`linear-gradient(135deg, \\${currentColor}, transparent 60%, \\${currentColor}90)\\`,\n }}\n >\n <div\n className={cn(\n 'bg-card/90 dark:bg-card/80 px-4 py-3 flex items-center justify-between backdrop-blur-md shadow-inner',\n radiusConfig.inner\n )}\n >\n <div className=\"flex items-center gap-2.5\">\n <div\n className=\"w-2.5 h-2.5 rounded-full animate-pulse shrink-0\"\n style={{ backgroundColor: currentColor }}\n />\n <span className=\"text-xs font-mono font-semibold text-foreground\">\n Interactive Aurora Pill\n </span>\n </div>\n <span\n className=\"text-[10px] font-mono px-2 py-0.5 rounded-md font-medium border\"\n style={{\n backgroundColor: \\`\\${currentColor}12\\`,\n borderColor: \\`\\${currentColor}30\\`,\n color: currentColor,\n }}\n >\n {currentColor.toUpperCase()}\n </span>\n </div>\n </div>\n )}\n </div>\n\n {footerSlot && <div className=\"pt-2 border-t border-border/50\">{footerSlot}</div>}\n </div>\n )}\n </div>\n );\n }\n);\n\nAuroraBorderFX.displayName = 'AuroraBorderFX';\n`\n};\n","export const auroraSearchPill = {\n name: \"auroraSearchPill\",\n dependencies: [\n \"clsx\",\n \"tailwind-merge\",\n \"framer-motion\",\n \"lucide-react\"\n],\n \n fileName: \"aurora-search-pill.tsx\",\n content: `'use client';\n\nimport * as React from 'react';\nimport { Globe, Sparkles } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\n// Register hardware angle property once for conic gradient rotation\nif (typeof window !== 'undefined' && typeof (window as any).CSS !== 'undefined' && 'registerProperty' in (window as any).CSS) {\n try {\n (window as any).CSS.registerProperty({\n name: '--aurora-deg',\n syntax: '<angle>',\n inherits: false,\n initialValue: '0deg',\n });\n } catch {}\n}\n\nexport interface AuroraSearchSource {\n /** Unique key for the source badge /\n id: string;\n /* Label or tooltip text for the source /\n label?: string;\n /* Direct avatar image URL (e.g. favicon, PNG, SVG) /\n avatarUrl?: string;\n /* Custom icon or element /\n icon?: React.ReactNode;\n /* Text initials to display inside badge /\n initials?: string;\n /* Built-in preset type or custom /\n type?: 'globe' \| 'gradient' \| 'github' \| 'claude' \| 'chatgpt' \| 'perplexity' \| 'custom';\n /* Custom background CSS string or hex /\n bg?: string;\n}\n\nexport type AuroraSearchPillSize = 'sm' \| 'md' \| 'lg';\nexport type AuroraSearchPillSpeed = 'slow' \| 'normal' \| 'fast';\nexport type AuroraSearchPillTheme = 'light' \| 'dark' \| 'auto';\nexport type AuroraSearchPillGlow = 'subtle' \| 'medium' \| 'strong' \| 'none';\nexport type AuroraSpinMode = 'always' \| 'searching' \| 'hover' \| 'never';\n\nexport interface AuroraSearchPillProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {\n /* Controlled searching state /\n isSearching?: boolean;\n /* Uncontrolled default searching state /\n defaultSearching?: boolean;\n /* Callback fired when searching state toggles /\n onToggle?: (searching: boolean) => void;\n /* Main search title text shown when active (default: \"Search...\") /\n searchLabel?: string;\n /* List of badge sources to render in the active state /\n sources?: AuroraSearchSource[];\n /* Shortcut array of avatar image URLs /\n sourceAvatars?: string[];\n /* Color theme for the pill body: light, dark, or auto (follows dark mode) /\n theme?: AuroraSearchPillTheme;\n /* Size scale of the pill /\n size?: AuroraSearchPillSize;\n /* Glow intensity of the surrounding ambient aurora /\n glowIntensity?: AuroraSearchPillGlow;\n /* Speed of the rotating aurora beam /\n speed?: AuroraSearchPillSpeed;\n /\n When the aurora beam should rotate:\n * - 'always' (default): continuously rotates the aurora light wave all the time\n * - 'searching': only spins while searching/active, remains calm when idle\n * - 'hover': spins on cursor hover / focus\n * - 'never': static gradient, no rotation\n /\n spinMode?: AuroraSpinMode;\n /* Manually override spinning state /\n isSpinning?: boolean;\n /* Automatically toggle searching state at a set interval (demo mode) /\n autoCycle?: boolean;\n /* Interval in ms for autoCycle (default: 2400) /\n cycleInterval?: number;\n}\n\nconst DEFAULT_SOURCES: AuroraSearchSource[] = [\n { id: 'web', type: 'globe', label: 'Web' },\n { id: 'gradient', type: 'gradient', label: 'Neural Index' },\n { id: 'github', type: 'github', label: 'GitHub' },\n];\n\nconst SPEED_MAP: Record<AuroraSearchPillSpeed, string> = {\n slow: '5s',\n normal: '3.2s',\n fast: '1.8s',\n};\n\nconst GLOW_OPACITY: Record<AuroraSearchPillGlow, number> = {\n none: 0,\n subtle: 0.45,\n medium: 0.75,\n strong: 0.95,\n};\n\nconst SIZE_CONFIG: Record<\n AuroraSearchPillSize,\n {\n height: string;\n paddingDots: string;\n paddingSearch: string;\n dotSize: string;\n dotGap: string;\n fontSize: string;\n badgeSize: string;\n badgeMargin: string;\n minWidthSearch: string;\n }\n> = {\n sm: {\n height: 'h-10',\n paddingDots: 'px-4',\n paddingSearch: 'px-4',\n dotSize: 'w-1.5 h-1.5',\n dotGap: 'gap-1.5',\n fontSize: 'text-xs',\n badgeSize: 'w-4 h-4',\n badgeMargin: '-ml-1',\n minWidthSearch: 'min-w-[160px]',\n },\n md: {\n height: 'h-12',\n paddingDots: 'px-5',\n paddingSearch: 'px-5',\n dotSize: 'w-[6.5px] h-[6.5px]',\n dotGap: 'gap-[7px]',\n fontSize: 'text-sm sm:text-base',\n badgeSize: 'w-[22px] h-[22px]',\n badgeMargin: '-ml-1.5',\n minWidthSearch: 'min-w-[190px]',\n },\n lg: {\n height: 'h-14',\n paddingDots: 'px-6',\n paddingSearch: 'px-6',\n dotSize: 'w-2 h-2',\n dotGap: 'gap-2',\n fontSize: 'text-base sm:text-lg',\n badgeSize: 'w-6 h-6',\n badgeMargin: '-ml-2',\n minWidthSearch: 'min-w-[220px]',\n },\n};\n\n/\n AuroraSearchPill Component\n \n An ultra-premium AI search pill with an ambient rotating aurora conic glow,\n * 1.5px illuminated border track, and smooth transition between pulsing dots and\n * active search query with source badges.\n /\nexport const AuroraSearchPill = React.forwardRef<HTMLDivElement, AuroraSearchPillProps>(\n (\n {\n isSearching: controlledSearching,\n defaultSearching = false,\n onToggle,\n searchLabel = 'Search...',\n sources = DEFAULT_SOURCES,\n sourceAvatars,\n theme = 'auto',\n size = 'md',\n glowIntensity = 'medium',\n speed = 'normal',\n spinMode = 'always',\n isSpinning: controlledSpinning,\n autoCycle = false,\n cycleInterval = 2400,\n className,\n onClick,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref\n ) => {\n const isControlled = controlledSearching !== undefined;\n const [uncontrolledSearching, setUncontrolledSearching] = React.useState(defaultSearching);\n const active = isControlled ? controlledSearching : uncontrolledSearching;\n\n const [isHovered, setIsHovered] = React.useState(false);\n\n // Unique style injection ID for CSS custom property and keyframes\n const instanceId = React.useId().replace(/:/g, '');\n\n // Resolve active sources list (support direct sourceAvatars list)\n const activeSources = React.useMemo<AuroraSearchSource[]>(() => {\n if (sourceAvatars && sourceAvatars.length > 0) {\n return sourceAvatars.map((url, i): AuroraSearchSource => ({\n id: \\`avatar-\\${i}\\`,\n avatarUrl: url,\n label: \\`Source \\${i + 1}\\`,\n type: 'custom',\n }));\n }\n return sources;\n }, [sourceAvatars, sources]);\n\n // Determine whether the aurora beam should actively rotate (default: always on)\n const shouldSpin = React.useMemo(() => {\n if (controlledSpinning !== undefined) return controlledSpinning;\n if (spinMode === 'never') return false;\n if (spinMode === 'searching') return active;\n if (spinMode === 'hover') return isHovered;\n // Default: 'always' -> continuously rotates in both idle (dots) and searching states\n return true;\n }, [controlledSpinning, spinMode, isHovered, active]);\n\n // Auto demo cycling\n React.useEffect(() => {\n if (!autoCycle) return;\n const interval = setInterval(() => {\n if (isControlled) {\n onToggle?.(!active);\n } else {\n setUncontrolledSearching((prev) => {\n const next = !prev;\n onToggle?.(next);\n return next;\n });\n }\n }, cycleInterval);\n\n return () => clearInterval(interval);\n }, [autoCycle, cycleInterval, active, isControlled, onToggle]);\n\n const handleToggle = (e: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(e);\n if (!isControlled) {\n setUncontrolledSearching(!active);\n }\n onToggle?.(!active);\n };\n\n const sizeStyle = SIZE_CONFIG[size] \|\| SIZE_CONFIG.md;\n const animationDuration = SPEED_MAP[speed] \|\| SPEED_MAP.normal;\n const glowAlpha = GLOW_OPACITY[glowIntensity] ?? GLOW_OPACITY.medium;\n\n // Theme resolution for pill body\n const bodyThemeClass =\n theme === 'light'\n ? 'bg-white text-slate-900 border-white/60 shadow-sm'\n : theme === 'dark'\n ? 'bg-[#090d16] text-white border-white/10 shadow-lg shadow-black/40'\n : 'bg-white text-slate-900 dark:bg-[#090d16] dark:text-white border-white/60 dark:border-white/10 shadow-sm dark:shadow-black/40';\n\n const dotsColorClass =\n theme === 'light'\n ? 'bg-slate-900'\n : theme === 'dark'\n ? 'bg-white'\n : 'bg-slate-900 dark:bg-white';\n\n return (\n <div\n ref={ref}\n onClick={handleToggle}\n onMouseEnter={(e) => {\n setIsHovered(true);\n onMouseEnter?.(e);\n }}\n onMouseLeave={(e) => {\n setIsHovered(false);\n onMouseLeave?.(e);\n }}\n role=\"button\"\n tabIndex={0}\n aria-pressed={active}\n aria-label={active ? \\`Searching: \\${searchLabel}\\` : 'Activate AI Search'}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleToggle(e as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }}\n className={cn(\n 'relative inline-flex items-center justify-center cursor-pointer select-none isolate outline-none group',\n 'transition-transform duration-200 ease-out active:scale-[0.96] focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',\n className\n )}\n {...props}\n >\n {/ Scoped CSS for hardware accelerated conic rotation and pulse /}\n <style dangerouslySetInnerHTML={{\n __html: \\`\n @property --aurora-deg {\n syntax: '<angle>';\n initial-value: 0deg;\n inherits: false;\n }\n @keyframes spinAurora {\n from {\n --aurora-deg: 0deg;\n }\n to {\n --aurora-deg: 360deg;\n }\n }\n @keyframes dotPulse {\n 0%, 80%, 100% {\n opacity: 0.35;\n transform: scale(0.75);\n }\n 40% {\n opacity: 1;\n transform: scale(1.15);\n }\n }\n \\`,\n }} />\n\n {/ 1. Ambient Volumetric Glow (Aurora Ambient Glow) /}\n {glowIntensity !== 'none' && (\n <div\n className=\"absolute -inset-1.5 rounded-full pointer-events-none blur-md z-0 transition-opacity duration-300\"\n style={{\n opacity: glowAlpha,\n background: \\`conic-gradient(\n from var(--aurora-deg, 0deg) at 50% 50%,\n transparent 0deg,\n rgba(59, 130, 246, 0.75) 60deg,\n rgba(139, 92, 246, 0.9) 110deg,\n rgba(236, 72, 153, 0.95) 160deg,\n rgba(244, 63, 94, 0.8) 200deg,\n transparent 250deg,\n transparent 360deg\n )\\`,\n animation: shouldSpin\n ? \\`spinAurora \\${animationDuration} linear infinite\\`\n : undefined,\n }}\n />\n )}\n\n {/ 2. Sharp 1.5px Conic Border Track /}\n <div\n className=\"relative z-10 p-[1.5px] rounded-full transition-shadow duration-300 shadow-sm\"\n style={{\n background: \\`conic-gradient(\n from var(--aurora-deg, 0deg) at 50% 50%,\n rgba(226, 232, 240, 0.8) 0deg,\n rgba(59, 130, 246, 0.85) 60deg,\n rgba(139, 92, 246, 1) 110deg,\n rgba(236, 72, 153, 1) 160deg,\n rgba(244, 63, 94, 0.85) 200deg,\n rgba(226, 232, 240, 0.6) 260deg,\n rgba(226, 232, 240, 0.8) 360deg\n )\\`,\n animation: shouldSpin\n ? \\`spinAurora \\${animationDuration} linear infinite\\`\n : undefined,\n }}\n >\n {/ 3. Center Pill Body /}\n <div\n className={cn(\n 'relative z-20 rounded-full flex items-center justify-center overflow-hidden border',\n sizeStyle.height,\n active ? cn(sizeStyle.paddingSearch, sizeStyle.minWidthSearch) : sizeStyle.paddingDots,\n bodyThemeClass,\n 'transition-all duration-500 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]'\n )}\n >\n {/ STATE 1: Pulsing Dots (Idle/Listening) /}\n <div\n className={cn(\n 'flex items-center',\n sizeStyle.dotGap,\n 'transition-all duration-400 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]',\n active\n ? 'opacity-0 scale-50 -translate-y-2 pointer-events-none absolute'\n : 'opacity-100 scale-100 translate-y-0'\n )}\n >\n {[0, 1, 2].map((idx) => (\n <span\n key={idx}\n className={cn('rounded-full inline-block', sizeStyle.dotSize, dotsColorClass)}\n style={{\n animation: \\`dotPulse 1.4s ease-in-out infinite both\\`,\n animationDelay: \\`\\${idx === 0 ? -0.32 : idx === 1 ? -0.16 : 0}s\\`,\n }}\n />\n ))}\n </div>\n\n {/ STATE 2: Active Search Label + Overlapping Sources /}\n <div\n className={cn(\n 'flex items-center gap-2.5 whitespace-nowrap',\n 'transition-all duration-400 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]',\n active\n ? 'opacity-100 scale-100 translate-y-0'\n : 'opacity-0 scale-90 translate-y-2 pointer-events-none absolute'\n )}\n >\n {/ Search Title /}\n <span className={cn('font-medium tracking-tight', sizeStyle.fontSize)}>\n {searchLabel}\n </span>\n\n {/ Overlapping Sources Row /}\n {activeSources && activeSources.length > 0 && (\n <div className=\"inline-flex items-center pl-0.5\">\n {activeSources.map((src, i) => {\n const isFirst = i === 0;\n\n return (\n <div\n key={src.id \|\| i}\n title={src.label \|\| src.id}\n className={cn(\n 'rounded-full border-[1.5px] border-white dark:border-zinc-900 flex items-center justify-center shrink-0 shadow-xs overflow-hidden',\n sizeStyle.badgeSize,\n !isFirst && sizeStyle.badgeMargin\n )}\n style={{\n backgroundColor:\n src.type === 'globe'\n ? '#0b1120'\n : src.type === 'github'\n ? '#ffffff'\n : src.type === 'claude'\n ? '#d97757'\n : src.type === 'chatgpt'\n ? '#10a37f'\n : src.type === 'perplexity'\n ? '#1fb8cd'\n : src.type === 'custom' && src.bg\n ? src.bg\n : undefined,\n background:\n src.type === 'gradient'\n ? 'linear-gradient(135deg, #06b6d4 45%, #3b82f6 55%)'\n : undefined,\n }}\n >\n {src.avatarUrl ? (\n <img\n src={src.avatarUrl}\n alt={src.label \|\| src.id}\n className=\"w-full h-full object-cover\"\n />\n ) : src.icon ? (\n src.icon\n ) : src.type === 'globe' ? (\n <Globe className=\"w-3 h-3 text-sky-400 stroke-[2.5]\" />\n ) : src.type === 'github' ? (\n <svg className=\"w-3.5 h-3.5 fill-[#181717]\" viewBox=\"0 0 24 24\">\n <path d=\"M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z\" />\n </svg>\n ) : src.type === 'claude' ? (\n <Sparkles className=\"w-2.5 h-2.5 text-white\" />\n ) : src.type === 'chatgpt' ? (\n <div className=\"w-2 h-2 rounded-full bg-white\" />\n ) : src.type === 'perplexity' ? (\n <Sparkles className=\"w-2.5 h-2.5 text-white\" />\n ) : src.initials ? (\n <span className=\"text-[8px] font-bold text-white uppercase\">\n {src.initials}\n </span>\n ) : null}\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n);\n\nAuroraSearchPill.displayName = 'AuroraSearchPill';\n`\n};\n","export const templateAiStartup = {\n name: \"template-ai-startup\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ai-startup.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sparkles,\n ArrowRight,\n Cpu,\n Check,\n ChevronRight,\n Send,\n Terminal,\n Activity,\n Layers,\n Menu,\n X,\n Sliders,\n ShieldCheck,\n} from \"lucide-react\";\n\nexport interface AiStartupTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AiStartupTemplate({\n brandName = \"Synthetix AI\",\n theme = \"dark\",\n}: AiStartupTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [selectedModel, setSelectedModel] = useState<\"Synthetix-R1\" \| \"Claude-3.5\" \| \"GPT-4o\">(\"Synthetix-R1\");\n const [promptText, setPromptText] = useState(\"Generate an edge-routed vector indexing service\");\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedOutput, setGeneratedOutput] = useState<string \| null>(\n \"✓ Graph compiled. 4 regions provisioned. TTFT: 12ms. Throughput: 142 tok/s.\"\n );\n const [billingCycle, setBillingCycle] = useState<\"monthly\" \| \"annual\">(\"annual\");\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n const promptSuggestions = [\n \"Edge vector indexer\",\n \"Rust WebSocket gateway\",\n \"Zero-knowledge rollup audit\",\n ];\n\n const handleSynthesize = (e: React.FormEvent) => {\n e.preventDefault();\n if (!promptText.trim()) return;\n setIsGenerating(true);\n setGeneratedOutput(null);\n setTimeout(() => {\n setIsGenerating(false);\n setGeneratedOutput(\n \\`✓ [\\${selectedModel}] execution complete. 2,140 tokens streamed with zero-copy serialization. Global latency: 1.2ms.\\`\n );\n }, 850);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans selection:bg-indigo-500/20\"\n \n >\n {/ Subtle top indicator bar /}\n <div\n className=\"w-full py-2.5 px-4 text-center text-xs font-mono border-b transition-colors flex items-center justify-center gap-2\"\n \n >\n <span\n className=\"h-2 w-2 rounded-full\"\n \n />\n <span className=\"font-semibold\">Synthetix Core 3.4 Operational</span>\n <span className=\"opacity-40\">•</span>\n <span>Global TTFT: 4.2ms</span>\n </div>\n\n {/ Navigation /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors\"\n \n >\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm transition-all\"\n \n >\n <Sparkles className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-base tracking-tight\"\n \n >\n {brandName \|\| \"Synthetix AI\"}\n </span>\n </div>\n\n {/ Desktop Navigation Links /}\n <nav\n className=\"hidden md:flex items-center gap-7 text-sm font-medium\"\n \n >\n <a href=\"#playground\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Playground\n </a>\n <a href=\"#benchmarks\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Benchmarks\n </a>\n <a href=\"#architecture\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Architecture\n </a>\n <a href=\"#pricing\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Pricing\n </a>\n </nav>\n\n <div className=\"flex items-center gap-2.5\">\n <button\n className=\"hidden sm:inline-flex text-sm font-medium px-4 py-2 rounded-lg border transition-all hover:opacity-80\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#12141c\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n Sign In\n </button>\n <button\n className=\"text-sm font-semibold px-4 py-2 rounded-lg text-white shadow-sm transition-all flex items-center gap-1.5 hover:brightness-110\"\n \n >\n <span>Get API Key</span>\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n\n {/ Mobile menu toggle /}\n <button\n onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n className=\"md:hidden p-2 rounded-lg border transition-colors\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#12141c\",\n color: \"#f4f4f7\",\n }}\n aria-label=\"Toggle Navigation\"\n >\n {mobileMenuOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n </div>\n </div>\n\n {/ Mobile Dropdown Navigation /}\n <AnimatePresence>\n {mobileMenuOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"md:hidden border-b px-4 py-3 space-y-2 text-sm font-medium overflow-hidden\"\n \n >\n <a\n href=\"#playground\"\n onClick={() => setMobileMenuOpen(false)}\n className=\"block py-2 hover:text-[#f4f4f7]\"\n \n >\n Interactive Playground\n </a>\n <a\n href=\"#benchmarks\"\n onClick={() => setMobileMenuOpen(false)}\n className=\"block py-2 hover:text-[#f4f4f7]\"\n \n >\n Inference Benchmarks\n </a>\n <a\n href=\"#pricing\"\n onClick={() => setMobileMenuOpen(false)}\n className=\"block py-2 hover:text-[#f4f4f7]\"\n \n >\n Tiered Pricing\n </a>\n </motion.div>\n )}\n </AnimatePresence>\n </header>\n\n {/ Hero Section /}\n <section className=\"pt-10 sm:pt-16 md:pt-20 pb-12 md:pb-16 px-4 sm:px-6 max-w-4xl mx-auto text-center\">\n {/ Subtle pill tag /}\n <div\n className=\"inline-flex items-center gap-2 px-3.5 py-1 rounded-full border text-xs font-medium mb-6 transition-colors\"\n \n >\n <Cpu className=\"h-3.5 w-3.5\" />\n <span>Next-Generation Autonomous Inference Engine</span>\n </div>\n\n <h1\n className=\"text-2xl @xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-5 leading-[1.12]\"\n \n >\n Zero Latency. Real Autonomous Intelligence.\n </h1>\n\n <p\n className=\"text-sm sm:text-base max-w-2xl mx-auto mb-8 leading-relaxed\"\n \n >\n Stream deep reasoning tokens directly to edge clients. Synthesize complex backend architectures,\n fine-tune proprietary weights, and run telemetry without cold starts.\n </p>\n\n {/ Live Interactive Model Playground Card /}\n <div\n id=\"playground\"\n className=\"max-w-2xl mx-auto rounded-2xl border p-4 sm:p-6 text-left shadow-lg transition-all\"\n \n >\n {/ Header Controls /}\n <div\n className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 mb-3 border-b\"\n \n >\n <div\n className=\"inline-flex items-center gap-1 p-1 rounded-lg border text-xs\"\n \n >\n {([\"Synthetix-R1\", \"Claude-3.5\", \"GPT-4o\"] as const).map((m) => (\n <button\n key={m}\n onClick={() => setSelectedModel(m)}\n className={\\`px-3 py-1.5 rounded-md text-xs font-medium transition-all \\${\n selectedModel === m\n ? \"text-white font-semibold shadow-sm\"\n : \"opacity-75 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: selectedModel === m ? \"#6366f1\" : \"transparent\",\n color: selectedModel === m ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n {m}\n </button>\n ))}\n </div>\n\n <div\n className=\"flex items-center gap-2 text-xs font-mono\"\n \n >\n <span className=\"flex items-center gap-1.5\">\n <Activity className=\"h-3.5 w-3.5 text-emerald-500\" />\n <span>1,200 tok/s</span>\n </span>\n <span>•</span>\n <span>Sub-15ms TTFT</span>\n </div>\n </div>\n\n {/ Prompt Form /}\n <form onSubmit={handleSynthesize} className=\"space-y-3\">\n <div\n className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-2 p-2.5 rounded-xl border transition-all focus-within:ring-1\"\n \n >\n <div className=\"flex items-center gap-2.5 flex-1 px-1.5\">\n <Terminal className=\"h-4 w-4 shrink-0 opacity-40\" />\n <input\n type=\"text\"\n value={promptText}\n onChange={(e) => setPromptText(e.target.value)}\n placeholder=\"Type an inference prompt...\"\n className=\"w-full bg-transparent text-sm focus:outline-none py-1.5\"\n \n />\n </div>\n <button\n type=\"submit\"\n disabled={isGenerating}\n className=\"h-10 px-5 rounded-lg text-sm font-semibold text-white shrink-0 flex items-center justify-center gap-2 transition-all disabled:opacity-50 hover:brightness-110\"\n style={{\n backgroundColor: \"#6366f1\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n {isGenerating ? (\n <>\n <div className=\"h-3.5 w-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin\" />\n <span>Processing...</span>\n </>\n ) : (\n <>\n <Send className=\"h-3.5 w-3.5\" />\n <span>Synthesize</span>\n </>\n )}\n </button>\n </div>\n\n {/ Prompt suggestions /}\n <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n <span className=\"opacity-50\">Quick test:</span>\n {promptSuggestions.map((s, idx) => (\n <button\n key={idx}\n type=\"button\"\n onClick={() => setPromptText(s)}\n className=\"px-2.5 py-1 rounded-md border transition-colors truncate max-w-[200px]\"\n \n >\n {s}\n </button>\n ))}\n </div>\n\n {/ Generated Output Area /}\n <AnimatePresence>\n {generatedOutput && (\n <motion.div\n initial={{ opacity: 0, y: 6 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0 }}\n className=\"p-3.5 rounded-xl border text-xs leading-relaxed\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.03)\" : \"rgba(0, 0, 0, 0.02)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between mb-1.5 text-xs\" >\n <span className=\"flex items-center gap-1.5 font-medium\">\n <Sparkles className=\"h-3.5 w-3.5\" />\n <span>Inference Output</span>\n </span>\n <span className=\"text-emerald-500 font-mono font-semibold\">200 OK</span>\n </div>\n <p className=\"font-mono text-xs leading-normal\">{generatedOutput}</p>\n </motion.div>\n )}\n </AnimatePresence>\n </form>\n </div>\n </section>\n\n {/ Benchmarks Section /}\n <section\n id=\"benchmarks\"\n className=\"py-12 sm:py-16 px-4 sm:px-6 max-w-5xl mx-auto border-t\"\n \n >\n <div className=\"text-center max-w-xl mx-auto mb-8 sm:mb-10\">\n <p\n className=\"text-xs font-semibold uppercase tracking-wider mb-1\"\n \n >\n Precision Benchmarks\n </p>\n <h2\n className=\"text-xl sm:text-2xl md:text-3xl font-bold tracking-tight\"\n \n >\n Engineered for Microsecond Precision\n </h2>\n </div>\n\n {/ Responsive Table / Card View /}\n <div\n className=\"rounded-2xl border overflow-hidden\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#12141c\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"overflow-x-auto\">\n <table className=\"w-full text-xs sm:text-sm text-left min-w-[500px]\">\n <thead\n className=\"text-xs uppercase font-mono border-b\"\n \n >\n <tr>\n <th className=\"p-3.5 font-semibold\">Model Architecture</th>\n <th className=\"p-3.5 font-semibold\">TTFT</th>\n <th className=\"p-3.5 font-semibold\">Throughput</th>\n <th className=\"p-3.5 font-semibold\">Cold Start</th>\n <th className=\"p-3.5 font-semibold text-right\">Coverage</th>\n </tr>\n </thead>\n <tbody className=\"divide-y\" >\n <tr>\n <td className=\"p-3.5 font-semibold flex items-center gap-2\">\n <span\n className=\"h-2 w-2 rounded-full\"\n \n />\n <span>Synthetix R1 Ultra</span>\n </td>\n <td className=\"p-3.5 text-emerald-500 font-bold font-mono\">4.2ms</td>\n <td className=\"p-3.5 font-mono\">280 tok/s</td>\n <td className=\"p-3.5 font-mono\">0.0ms</td>\n <td className=\"p-3.5 text-right font-mono text-emerald-500 font-semibold\">180 Regions</td>\n </tr>\n <tr>\n <td className=\"p-3.5 font-medium flex items-center gap-2 opacity-75\">\n <span className=\"h-2 w-2 rounded-full bg-zinc-400\" />\n <span>Claude 3.5 Sonnet Standard</span>\n </td>\n <td className=\"p-3.5 opacity-75 font-mono\">28.4ms</td>\n <td className=\"p-3.5 opacity-75 font-mono\">82 tok/s</td>\n <td className=\"p-3.5 opacity-75 font-mono\">120ms</td>\n <td className=\"p-3.5 text-right opacity-75 font-mono\">Single Region</td>\n </tr>\n <tr>\n <td className=\"p-3.5 font-medium flex items-center gap-2 opacity-75\">\n <span className=\"h-2 w-2 rounded-full bg-zinc-400\" />\n <span>GPT-4o Baseline</span>\n </td>\n <td className=\"p-3.5 opacity-75 font-mono\">34.1ms</td>\n <td className=\"p-3.5 opacity-75 font-mono\">76 tok/s</td>\n <td className=\"p-3.5 opacity-75 font-mono\">95ms</td>\n <td className=\"p-3.5 text-right opacity-75 font-mono\">Dual Region</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </section>\n\n {/ Pricing Section /}\n <section\n id=\"pricing\"\n className=\"py-12 sm:py-16 px-4 sm:px-6 max-w-4xl mx-auto border-t\"\n \n >\n <div className=\"text-center max-w-xl mx-auto mb-8 sm:mb-10\">\n <h2\n className=\"text-xl sm:text-2xl md:text-3xl font-bold tracking-tight mb-2\"\n \n >\n Predictable Developer Pricing\n </h2>\n <p className=\"text-sm\" >\n Scale from initial prototype to production scale with clear usage terms.\n </p>\n\n {/ Billing Cycle Pill Toggle /}\n <div\n className=\"inline-flex items-center gap-1.5 p-1 mt-5 rounded-full border text-xs\"\n \n >\n <button\n onClick={() => setBillingCycle(\"monthly\")}\n className={\\`px-3.5 py-1.5 rounded-full font-medium transition-all \\${\n billingCycle === \"monthly\" ? \"shadow-sm font-semibold\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: billingCycle === \"monthly\" ? \"#181a24\" : \"transparent\",\n color: \"#f4f4f7\",\n }}\n >\n Monthly\n </button>\n <button\n onClick={() => setBillingCycle(\"annual\")}\n className={\\`px-3.5 py-1.5 rounded-full font-medium transition-all flex items-center gap-1.5 \\${\n billingCycle === \"annual\" ? \"shadow-sm font-semibold\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: billingCycle === \"annual\" ? \"#181a24\" : \"transparent\",\n color: \"#f4f4f7\",\n }}\n >\n <span>Annual</span>\n <span\n className=\"text-xs px-2 py-0.5 rounded-full font-bold\"\n style={{\n backgroundColor: \"rgba(16, 185, 129, 0.15)\",\n color: \"#10b981\",\n }}\n >\n Save 25%\n </span>\n </button>\n </div>\n </div>\n\n {/ Pricing Cards Grid /}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto\">\n {/ Starter Tier /}\n <div\n className=\"p-6 sm:p-7 rounded-2xl border flex flex-col justify-between transition-all\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div>\n <h3 className=\"font-bold text-lg mb-1\">Developer Starter</h3>\n <p className=\"text-sm mb-5\" >\n For engineers building prototypes and internal agents.\n </p>\n <div className=\"flex items-baseline gap-1.5 mb-6\">\n <span className=\"text-4xl font-bold font-mono\">$0</span>\n <span className=\"text-sm opacity-60\">/ forever free</span>\n </div>\n <ul className=\"space-y-3 text-sm\">\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>100,000 free tokens / month</span>\n </li>\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>3 edge regions access</span>\n </li>\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>Community Discord support</span>\n </li>\n </ul>\n </div>\n <button\n className=\"w-full mt-7 h-11 rounded-xl border text-sm font-semibold hover:opacity-80 transition-all flex items-center justify-center\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#181a24\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n Get Started Free\n </button>\n </div>\n\n {/ Production Tier /}\n <div\n className=\"p-6 sm:p-7 rounded-2xl border flex flex-col justify-between relative transition-all\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"#6366f1\",\n borderRadius: \"0.75rem\",\n }}\n >\n <span\n className=\"absolute -top-3 right-5 px-3 py-0.5 rounded-full text-xs font-bold text-white shadow-sm\"\n \n >\n RECOMMENDED\n </span>\n <div>\n <h3 className=\"font-bold text-lg mb-1\">Production Cluster</h3>\n <p className=\"text-sm mb-5\" >\n For high-throughput AI services with guaranteed latency.\n </p>\n <div className=\"flex items-baseline gap-1.5 mb-6\">\n <span className=\"text-4xl font-bold font-mono\">\n {billingCycle === \"annual\" ? \"$49\" : \"$65\"}\n </span>\n <span className=\"text-sm opacity-60\">/ month</span>\n </div>\n <ul className=\"space-y-3 text-sm\">\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>100M tokens + $0.20/M overage</span>\n </li>\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>180+ global edge locations</span>\n </li>\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>Zero data retention guarantee</span>\n </li>\n <li className=\"flex items-center gap-2.5\">\n <Check className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>Dedicated SLA & priority support</span>\n </li>\n </ul>\n </div>\n <button\n className=\"w-full mt-7 h-11 rounded-xl text-sm font-semibold text-white shadow-md transition-all hover:brightness-110 flex items-center justify-center\"\n \n >\n Start 14-Day Production Trial\n </button>\n </div>\n </div>\n </section>\n\n {/ Footer /}\n <footer\n className=\"py-8 px-4 sm:px-6 border-t text-center text-xs\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"Synthetix AI\"}. All rights reserved.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateModernSaas = {\n name: \"template-modern-saas\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-modern-saas.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sparkles,\n Command,\n Search,\n GitBranch,\n GitCommit,\n ArrowUpRight,\n CheckCircle2,\n Clock,\n Zap,\n Users,\n ShieldCheck,\n ChevronRight,\n Layers,\n Terminal,\n MousePointer2,\n Server,\n Activity,\n X,\n} from \"lucide-react\";\n\nexport interface ModernSaasTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function ModernSaasTemplate({\n brandName = \"Aura Cloud\",\n theme = \"dark\",\n}: ModernSaasTemplateProps) {\n const isDark = theme === \"dark\";\n\n const [activeTab, setActiveTab] = useState<\"branch\" \| \"edge\" \| \"telemetry\">(\"branch\");\n const [isCommandOpen, setIsCommandOpen] = useState(false);\n const [commandSearch, setCommandSearch] = useState(\"\");\n const [showCursors, setShowCursors] = useState(true);\n\n const commandItems = [\n { label: \"Deploy to Production\", category: \"Deployments\", icon: Zap },\n { label: \"Create Ephemeral Preview Branch\", category: \"Git\", icon: GitBranch },\n { label: \"Inspect Edge Latency Spikes\", category: \"Telemetry\", icon: Clock },\n { label: \"Manage Team Access & RBAC\", category: \"Security\", icon: ShieldCheck },\n ];\n\n const filteredCommands = commandItems.filter((item) =>\n item.label.toLowerCase().includes(commandSearch.toLowerCase())\n );\n\n return (\n <div className=\"w-full min-h-screen bg-background text-foreground transition-colors font-sans selection:bg-primary/20\">\n {/ Top Header /}\n <header className=\"sticky top-0 z-30 backdrop-blur-xl border-b border-border/80 bg-background/80 transition-colors\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div className=\"h-9 w-9 rounded-xl bg-primary flex items-center justify-center text-primary-foreground shadow-sm\">\n <Layers className=\"h-5 w-5\" />\n </div>\n <span className=\"font-bold text-base tracking-tight\">\n {brandName}\n </span>\n </div>\n\n {/ Quick command search trigger /}\n <button\n onClick={() => setIsCommandOpen(true)}\n className=\"hidden md:flex items-center gap-2.5 px-3.5 py-2 rounded-xl border border-border bg-card hover:bg-muted/60 text-muted-foreground text-sm transition-all shadow-xs\"\n >\n <Search className=\"h-4 w-4\" />\n <span>Search actions or deployments...</span>\n <kbd className=\"px-1.5 py-0.5 rounded text-xs font-mono border border-border bg-muted text-foreground\">\n ⌘K\n </kbd>\n </button>\n\n <div className=\"flex items-center gap-2.5\">\n {/ Mobile command trigger button /}\n <button\n onClick={() => setIsCommandOpen(true)}\n className=\"md:hidden p-2 rounded-lg border border-border bg-card text-foreground transition-colors\"\n title=\"Search commands (⌘K)\"\n aria-label=\"Open Command Menu\"\n >\n <Search className=\"h-4 w-4\" />\n </button>\n\n <button\n onClick={() => setShowCursors(!showCursors)}\n className=\"hidden lg:flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-border text-muted-foreground hover:text-foreground transition-colors\"\n >\n <Users className=\"h-3.5 w-3.5\" />\n <span>{showCursors ? \"Hide Cursors\" : \"Show Cursors\"}</span>\n </button>\n\n <button className=\"text-sm font-semibold px-4 py-2 rounded-lg bg-primary text-primary-foreground shadow-sm hover:opacity-90 transition-all flex items-center gap-1.5\">\n <span>Console</span>\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n </div>\n </header>\n\n {/ Hero Section /}\n <section className=\"pt-12 sm:pt-16 md:pt-20 pb-12 md:pb-16 px-4 sm:px-6 max-w-5xl mx-auto text-center relative\">\n {/ Collaborative cursor simulation /}\n {showCursors && (\n <>\n <motion.div\n animate={{ x: [0, 40, 20, 0], y: [0, -20, 15, 0] }}\n transition={{ repeat: Infinity, duration: 8, ease: \"easeInOut\" }}\n className=\"absolute top-28 left-8 hidden xl:flex items-center gap-1.5 pointer-events-none z-20\"\n >\n <MousePointer2 className=\"h-4 w-4 text-emerald-500 fill-emerald-500\" />\n <span className=\"px-2.5 py-0.5 rounded-full text-xs font-mono border border-emerald-500/30 bg-emerald-500/10 text-emerald-400 shadow-sm\">\n sarah.ts (editing)\n </span>\n </motion.div>\n\n <motion.div\n animate={{ x: [0, -30, -10, 0], y: [0, 25, -10, 0] }}\n transition={{ repeat: Infinity, duration: 10, ease: \"easeInOut\" }}\n className=\"absolute top-44 right-12 hidden xl:flex items-center gap-1.5 pointer-events-none z-20\"\n >\n <MousePointer2 className=\"h-4 w-4 text-primary fill-primary\" />\n <span className=\"px-2.5 py-0.5 rounded-full text-xs font-mono border border-primary/30 bg-primary/10 text-primary shadow-sm\">\n alex.dev (reviewing)\n </span>\n </motion.div>\n </>\n )}\n\n <div className=\"inline-flex items-center gap-2 px-3.5 py-1 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-mono mb-5 transition-colors\">\n <GitBranch className=\"h-3.5 w-3.5\" />\n <span>Continuous Edge Infrastructure</span>\n </div>\n\n <h1 className=\"text-3xl sm:text-5xl md:text-6xl font-extrabold tracking-tight mb-5 leading-[1.15]\">\n The Developer Cloud for <span className=\"text-primary\">High-Velocity Teams</span>.\n </h1>\n\n <p className=\"text-sm sm:text-base text-muted-foreground max-w-2xl mx-auto mb-8 leading-relaxed\">\n Push code, spawn instant ephemeral preview environments, and deploy across global edge nodes\n with zero configuration overhead.\n </p>\n\n {/ Live CI/CD Pipeline Card /}\n <div className=\"max-w-3xl mx-auto rounded-2xl border border-border bg-card p-4 sm:p-6 text-left shadow-xl transition-all\">\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2.5 pb-3.5 mb-4 border-b border-border text-sm\">\n <div className=\"flex items-center gap-2\">\n <span className=\"h-2 w-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span className=\"font-mono font-semibold\">prod-edge-gateway #8492</span>\n <span className=\"text-muted-foreground text-xs font-mono\">on main</span>\n </div>\n <span className=\"text-xs font-mono text-emerald-500 font-semibold\">Ready in 1.4s</span>\n </div>\n\n {/ 3 Pipeline Steps /}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4\">\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40 flex flex-col justify-between\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs font-mono text-muted-foreground\">1. Build & Tree Shake</span>\n <CheckCircle2 className=\"h-4 w-4 text-emerald-500\" />\n </div>\n <p className=\"text-sm font-mono font-semibold\">14 bundles (42kb)</p>\n </div>\n\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40 flex flex-col justify-between\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs font-mono text-muted-foreground\">2. Edge Replication</span>\n <CheckCircle2 className=\"h-4 w-4 text-emerald-500\" />\n </div>\n <p className=\"text-sm font-mono font-semibold\">312 nodes synced</p>\n </div>\n\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40 flex flex-col justify-between\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs font-mono text-muted-foreground\">3. TLS & SSL Routing</span>\n <CheckCircle2 className=\"h-4 w-4 text-emerald-500\" />\n </div>\n <p className=\"text-sm font-mono font-semibold\">Active & Encrypted</p>\n </div>\n </div>\n\n {/ Generated preview URL bar /}\n <div className=\"p-3.5 rounded-xl border border-primary/20 bg-primary/5 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs sm:text-sm font-mono\">\n <div className=\"flex items-center gap-2 truncate\">\n <span className=\"h-2 w-2 rounded-full bg-primary shrink-0\" />\n <span className=\"truncate\">https://aura-cloud-gateway-preview-q8x.edge.dev</span>\n </div>\n <a\n href=\"#visit\"\n className=\"flex items-center gap-1.5 font-semibold text-primary shrink-0 hover:underline\"\n >\n <span>Visit Preview</span>\n <ArrowUpRight className=\"h-3.5 w-3.5\" />\n </a>\n </div>\n </div>\n </section>\n\n {/ Feature Tabs Section /}\n <section className=\"py-12 sm:py-16 px-4 sm:px-6 max-w-5xl mx-auto border-t border-border\">\n <div className=\"flex flex-wrap items-center justify-center gap-2.5 mb-8\">\n {[\n { id: \"branch\", label: \"Instant Branch Previews\" },\n { id: \"edge\", label: \"Zero-Downtime Rollbacks\" },\n { id: \"telemetry\", label: \"Edge Telemetry & KV\" },\n ].map((tab) => (\n <button\n key={tab.id}\n onClick={() => setActiveTab(tab.id as any)}\n className={\\`px-4 py-2 rounded-xl text-sm font-medium border transition-all cursor-pointer \\${\n activeTab === tab.id\n ? \"bg-primary text-primary-foreground border-primary shadow-sm font-semibold\"\n : \"bg-card border-border text-muted-foreground hover:text-foreground\"\n }\\`}\n >\n {tab.label}\n </button>\n ))}\n </div>\n\n {/ Tab Detail View /}\n <div className=\"p-6 sm:p-8 rounded-2xl border border-border bg-card shadow-lg transition-all\">\n {activeTab === \"branch\" && (\n <div className=\"space-y-4 text-sm\">\n <h3 className=\"font-bold text-lg sm:text-xl\">\n Every Git commit gets a production replica.\n </h3>\n <p className=\"leading-relaxed text-muted-foreground\">\n Share live preview links with team members and clients. Comments left on the preview link are\n automatically linked back to your GitHub PR.\n </p>\n <div className=\"p-4 rounded-xl font-mono text-xs sm:text-sm border border-border bg-muted/60 overflow-x-auto leading-relaxed\">\n git checkout -b feat/redesign-checkout <br />\n git push origin feat/redesign-checkout <br />\n <span className=\"text-emerald-500 font-semibold\">\n → [{brandName}] Ephemeral environment deployed at https://pr-42.aura.run (2.1s)\n </span>\n </div>\n </div>\n )}\n\n {activeTab === \"edge\" && (\n <div className=\"space-y-4 text-sm\">\n <h3 className=\"font-bold text-lg sm:text-xl\">\n Instant atomic rollbacks with zero traffic drops.\n </h3>\n <p className=\"leading-relaxed text-muted-foreground\">\n If an unexpected error occurs, revert back to any historical checkpoint with a single click or CLI\n command in under 300 milliseconds.\n </p>\n <div className=\"p-4 rounded-xl font-mono text-xs sm:text-sm border border-border bg-muted/60 overflow-x-auto leading-relaxed\">\n $ aura rollback --target=v2.14.0 --atomic <br />\n <span className=\"text-emerald-500 font-semibold\">\n ✓ Reverted 312 edge locations to commit [d91a2] in 280ms. Error rate: 0.00%\n </span>\n </div>\n </div>\n )}\n\n {activeTab === \"telemetry\" && (\n <div className=\"space-y-4 text-sm\">\n <h3 className=\"font-bold text-lg sm:text-xl\">\n Built-in microsecond telemetry and distributed KV.\n </h3>\n <p className=\"leading-relaxed text-muted-foreground\">\n Inspect cold starts, invocation count, memory consumption, and cache hit ratios without configuring\n external log aggregators.\n </p>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3.5 font-mono\">\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40\">\n <p className=\"text-xs text-muted-foreground\">CACHE HIT RATE</p>\n <p className=\"text-xl font-bold text-emerald-500 mt-1\">99.82%</p>\n </div>\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40\">\n <p className=\"text-xs text-muted-foreground\">AVG LATENCY</p>\n <p className=\"text-xl font-bold text-foreground mt-1\">1.2ms</p>\n </div>\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40\">\n <p className=\"text-xs text-muted-foreground\">INVOCATIONS</p>\n <p className=\"text-xl font-bold text-foreground mt-1\">14.2M / day</p>\n </div>\n <div className=\"p-3.5 rounded-xl border border-border bg-muted/40\">\n <p className=\"text-xs text-muted-foreground\">COLD START</p>\n <p className=\"text-xl font-bold text-emerald-500 mt-1\">0ms</p>\n </div>\n </div>\n </div>\n )}\n </div>\n </section>\n\n {/ Interactive Command Modal Simulation /}\n <AnimatePresence>\n {isCommandOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-20 px-4\"\n onClick={() => setIsCommandOpen(false)}\n >\n <motion.div\n initial={{ scale: 0.95, y: -10 }}\n animate={{ scale: 1, y: 0 }}\n exit={{ scale: 0.95, y: -10 }}\n onClick={(e) => e.stopPropagation()}\n className=\"w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl overflow-hidden\"\n >\n <div className=\"p-3.5 border-b border-border flex items-center gap-2.5\">\n <Search className=\"h-4 w-4 opacity-50\" />\n <input\n type=\"text\"\n autoFocus\n value={commandSearch}\n onChange={(e) => setCommandSearch(e.target.value)}\n placeholder=\"Type a command or search deployments...\"\n className=\"w-full bg-transparent text-sm focus:outline-none py-1 text-foreground\"\n />\n <button\n onClick={() => setIsCommandOpen(false)}\n className=\"p-1 rounded hover:opacity-75 transition-opacity\"\n aria-label=\"Close Command Menu\"\n >\n <X className=\"h-4 w-4 opacity-60\" />\n </button>\n </div>\n\n <div className=\"p-2 max-h-60 overflow-y-auto space-y-1\">\n {filteredCommands.map((item, i) => (\n <button\n key={i}\n onClick={() => {\n alert(\\`Executed command: \"\\${item.label}\"\\`);\n setIsCommandOpen(false);\n }}\n className=\"w-full flex items-center justify-between p-3 rounded-xl text-sm hover:bg-muted/60 transition-colors text-left\"\n >\n <div className=\"flex items-center gap-2.5\">\n <item.icon className=\"h-4 w-4 text-primary\" />\n <span>{item.label}</span>\n </div>\n <span className=\"text-xs text-muted-foreground font-mono\">{item.category}</span>\n </button>\n ))}\n </div>\n </motion.div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Footer /}\n <footer className=\"py-8 px-4 sm:px-6 border-t border-border text-center text-xs text-muted-foreground\">\n <p>© {new Date().getFullYear()} {brandName}. Designed for high-velocity software engineering.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateAnalyticsDashboard = {\n name: \"template-analytics-dashboard\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-analytics-dashboard.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n BarChart3,\n TrendingUp,\n CreditCard,\n Users,\n Download,\n ArrowUpRight,\n Filter,\n CheckCircle2,\n AlertCircle,\n Activity,\n Layers,\n ChevronDown,\n RefreshCw,\n Search,\n Menu,\n X,\n} from \"lucide-react\";\n\nexport interface AnalyticsDashboardTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AnalyticsDashboardTemplate({\n brandName = \"Prism Analytics\",\n theme = \"dark\",\n}: AnalyticsDashboardTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [dateRange, setDateRange] = useState<\"Today\" \| \"7D\" \| \"30D\" \| \"90D\">(\"30D\");\n const [eventFilter, setEventFilter] = useState<\"all\" \| \"sub\" \| \"upgrade\">(\"all\");\n const [exportToast, setExportToast] = useState(false);\n const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n // Dynamic metrics based on date range\n const metricsData = {\n Today: { mrr: \"$6,240\", delta: \"+4.1%\", teams: \"31\", nrr: \"128.4%\", bars: [45, 60, 35, 70, 85, 90, 65, 80] },\n \"7D\": { mrr: \"$42,800\", delta: \"+8.9%\", teams: \"184\", nrr: \"125.1%\", bars: [30, 45, 60, 75, 55, 80, 95, 88] },\n \"30D\": { mrr: \"$148,920\", delta: \"+14.8%\", teams: \"642\", nrr: \"124.2%\", bars: [40, 55, 35, 70, 60, 85, 75, 100, 90, 95] },\n \"90D\": { mrr: \"$412,500\", delta: \"+22.4%\", teams: \"1,890\", nrr: \"121.8%\", bars: [25, 40, 60, 55, 70, 80, 65, 85, 95, 100] },\n }[dateRange];\n\n const activities = [\n { type: \"sub\", user: \"Sarah Jenkins\", plan: \"Enterprise Pro ($490/mo)\", time: \"2m ago\", amount: \"+$490\" },\n { type: \"upgrade\", user: \"Acme Corp Devs\", plan: \"Seat Expansion (+12 seats)\", time: \"14m ago\", amount: \"+$240\" },\n { type: \"sub\", user: \"HyperScale Ltd\", plan: \"Annual Developer Plan\", time: \"38m ago\", amount: \"+$1,200\" },\n { type: \"upgrade\", user: \"Nexus Studio\", plan: \"Storage Tier 4 Upgrade\", time: \"1h ago\", amount: \"+$85\" },\n ];\n\n const filteredActivities = activities.filter(\n (a) => eventFilter === \"all\" \|\| a.type === eventFilter\n );\n\n const handleExport = () => {\n setExportToast(true);\n setTimeout(() => setExportToast(false), 2500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors flex flex-col lg:flex-row font-sans\"\n \n >\n {/ Mobile Top Header /}\n <header\n className=\"lg:hidden flex items-center justify-between px-4 py-3 border-b shrink-0\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm\"\n \n >\n <BarChart3 className=\"h-4 w-4\" />\n </div>\n <div>\n <span className=\"font-bold text-sm leading-tight block\" >\n {brandName \|\| \"Prism HQ\"}\n </span>\n <span className=\"text-[11px] font-mono leading-none block\" >\n Analytics Suite\n </span>\n </div>\n </div>\n\n <button\n onClick={() => setMobileSidebarOpen(!mobileSidebarOpen)}\n className=\"p-2 rounded-lg border text-xs flex items-center gap-1.5 transition-colors\"\n \n aria-label=\"Toggle navigation\"\n >\n {mobileSidebarOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n </header>\n\n {/ Mobile Sidebar Dropdown /}\n <AnimatePresence>\n {mobileSidebarOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"lg:hidden border-b p-4 space-y-2 text-sm overflow-hidden\"\n \n >\n <button\n onClick={() => setMobileSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg font-medium text-white shadow-sm\"\n \n >\n <BarChart3 className=\"h-4 w-4\" />\n <span>Overview</span>\n </button>\n <button\n onClick={() => setMobileSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-80 hover:opacity-100 transition-opacity\"\n >\n <TrendingUp className=\"h-4 w-4\" />\n <span>Revenue Streams</span>\n </button>\n <button\n onClick={() => setMobileSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-80 hover:opacity-100 transition-opacity\"\n >\n <Users className=\"h-4 w-4\" />\n <span>Subscribers</span>\n </button>\n <button\n onClick={() => setMobileSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-80 hover:opacity-100 transition-opacity\"\n >\n <CreditCard className=\"h-4 w-4\" />\n <span>Payouts & Tax</span>\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Sidebar Navigation (Desktop / Tablet Expanded) /}\n <aside\n className=\"hidden lg:flex w-64 border-r p-5 shrink-0 flex-col justify-between transition-colors text-sm\"\n \n >\n <div>\n {/ Workspace Switcher /}\n <div\n className=\"flex items-center justify-between p-2.5 rounded-xl border mb-6 transition-all\"\n \n >\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <div\n className=\"h-7 w-7 rounded-lg flex items-center justify-center text-white shrink-0\"\n style={{ backgroundColor: \"#6366f1\", borderRadius: \"calc(0.75rem - 2px)\" }}\n >\n <BarChart3 className=\"h-4 w-4\" />\n </div>\n <div className=\"min-w-0\">\n <span className=\"font-bold text-sm truncate block\" >\n {brandName \|\| \"Prism HQ\"}\n </span>\n <span className=\"text-xs truncate block\" >\n Enterprise Suite\n </span>\n </div>\n </div>\n <ChevronDown className=\"h-4 w-4 opacity-50 shrink-0\" />\n </div>\n\n {/ Navigation Links /}\n <nav className=\"space-y-1.5\">\n <button\n className=\"w-full flex items-center justify-between px-3.5 py-2.5 rounded-lg font-medium text-white shadow-sm\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <BarChart3 className=\"h-4 w-4\" />\n <span>Overview</span>\n </div>\n <span className=\"text-xs px-2 py-0.5 rounded-full bg-white/20 font-mono font-medium\">Live</span>\n </button>\n <button\n className=\"w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\"\n >\n <TrendingUp className=\"h-4 w-4\" />\n <span>Revenue Streams</span>\n </button>\n <button\n className=\"w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\"\n >\n <Users className=\"h-4 w-4\" />\n <span>Subscribers</span>\n </button>\n <button\n className=\"w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\"\n >\n <CreditCard className=\"h-4 w-4\" />\n <span>Payouts & Tax</span>\n </button>\n </nav>\n </div>\n\n {/ User Card /}\n <div\n className=\"pt-4 border-t flex items-center gap-3 text-sm\"\n \n >\n <div\n className=\"h-9 w-9 rounded-full flex items-center justify-center font-bold text-white text-xs shrink-0\"\n \n >\n EX\n </div>\n <div className=\"truncate min-w-0\">\n <p className=\"font-semibold text-sm leading-tight truncate\">Executive Ops</p>\n <p className=\"text-xs truncate\" >Admin • Pro Plan</p>\n </div>\n </div>\n </aside>\n\n {/ Main Dashboard Canvas /}\n <main className=\"flex-1 p-4 sm:p-6 lg:p-8 overflow-y-auto min-w-0\">\n {/ Top Action Bar /}\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6\">\n <div>\n <h1\n className=\"text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight mb-1\"\n \n >\n Executive Command Overview\n </h1>\n <p className=\"text-xs sm:text-sm\" >\n Multi-currency financial telemetry & real-time inflow metrics.\n </p>\n </div>\n\n <div className=\"flex flex-wrap items-center gap-2.5\">\n {/ Date Range Selector /}\n <div\n className=\"flex items-center p-1 rounded-lg border text-xs\"\n \n >\n {([\"Today\", \"7D\", \"30D\", \"90D\"] as const).map((r) => (\n <button\n key={r}\n onClick={() => setDateRange(r)}\n className={\\`px-3 py-1.5 rounded text-xs font-mono transition-all \\${\n dateRange === r\n ? \"text-white font-semibold shadow-sm\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: dateRange === r ? \"#6366f1\" : \"transparent\",\n color: dateRange === r ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n {r}\n </button>\n ))}\n </div>\n\n <button\n onClick={handleExport}\n className=\"px-3.5 py-1.5 rounded-lg border text-xs font-medium flex items-center gap-2 transition-all hover:opacity-80 shadow-sm\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <Download className=\"h-3.5 w-3.5\" />\n <span>Export CSV</span>\n </button>\n </div>\n </div>\n\n {/ 4 KPI Cards /}\n <div className=\"grid grid-cols-1 @xs:grid-cols-2 xl:grid-cols-4 gap-4 mb-6\">\n {/ Card 1: MRR /}\n <div\n className=\"p-4 sm:p-5 rounded-xl border flex flex-col justify-between transition-all\"\n \n >\n <div>\n <div className=\"flex items-center justify-between text-xs sm:text-sm mb-1.5\" >\n <span className=\"font-medium\">Monthly Recurring</span>\n <span className=\"text-emerald-500 font-mono text-xs flex items-center font-bold\">\n <ArrowUpRight className=\"h-3.5 w-3.5 mr-0.5\" /> {metricsData.delta}\n </span>\n </div>\n <p className=\"text-2xl sm:text-3xl font-bold font-mono tracking-tight mb-1 truncate\">{metricsData.mrr}</p>\n <p className=\"text-xs\" >Trailing {dateRange} cycle</p>\n </div>\n {/ Sparkline mini bars /}\n <div className=\"h-8 flex items-end gap-1.5 mt-4\">\n {metricsData.bars.map((b, i) => (\n <div\n key={i}\n style={{\n height: \\`\\${b}%\\`,\n backgroundColor: \"#6366f1\",\n }}\n className=\"flex-1 rounded-t opacity-75 hover:opacity-100 transition-opacity\"\n />\n ))}\n </div>\n </div>\n\n {/ Card 2: NRR /}\n <div\n className=\"p-4 sm:p-5 rounded-xl border flex flex-col justify-between transition-all\"\n \n >\n <div>\n <div className=\"flex items-center justify-between text-xs sm:text-sm mb-1.5\" >\n <span className=\"font-medium\">Net Retention (NRR)</span>\n <span className=\"text-emerald-500 font-mono text-xs flex items-center font-bold\">\n <ArrowUpRight className=\"h-3.5 w-3.5 mr-0.5\" /> +2.4%\n </span>\n </div>\n <p className=\"text-2xl sm:text-3xl font-bold font-mono tracking-tight mb-1 truncate\">{metricsData.nrr}</p>\n <p className=\"text-xs\" >Negative revenue churn</p>\n </div>\n <div className=\"h-8 flex items-end gap-1.5 mt-4\">\n {[50, 60, 65, 70, 75, 85, 90, 95].map((b, i) => (\n <div\n key={i}\n style={{ height: \\`\\${b}%\\` }}\n className=\"flex-1 bg-emerald-500 rounded-t opacity-75 hover:opacity-100 transition-opacity\"\n />\n ))}\n </div>\n </div>\n\n {/ Card 3: Workspaces /}\n <div\n className=\"p-4 sm:p-5 rounded-xl border flex flex-col justify-between transition-all\"\n \n >\n <div>\n <div className=\"flex items-center justify-between text-xs sm:text-sm mb-1.5\" >\n <span className=\"font-medium\">Paid Workspaces</span>\n <span className=\"text-emerald-500 font-mono text-xs flex items-center font-bold\">\n <ArrowUpRight className=\"h-3.5 w-3.5 mr-0.5\" /> +12.1%\n </span>\n </div>\n <p className=\"text-2xl sm:text-3xl font-bold font-mono tracking-tight mb-1 truncate\">{metricsData.teams}</p>\n <p className=\"text-xs\" >Active enterprise seats</p>\n </div>\n <div className=\"h-8 flex items-end gap-1.5 mt-4\">\n {[30, 45, 55, 65, 70, 80, 85, 90].map((b, i) => (\n <div\n key={i}\n style={{ height: \\`\\${b}%\\`, backgroundColor: \"#6366f1\" }}\n className=\"flex-1 rounded-t opacity-75 hover:opacity-100 transition-opacity\"\n />\n ))}\n </div>\n </div>\n\n {/ Card 4: Gross Margin /}\n <div\n className=\"p-4 sm:p-5 rounded-xl border flex flex-col justify-between transition-all\"\n \n >\n <div>\n <div className=\"flex items-center justify-between text-xs sm:text-sm mb-1.5\" >\n <span className=\"font-medium\">Gross Margin</span>\n <span className=\"text-emerald-500 font-mono text-xs flex items-center font-bold\">\n 84.2%\n </span>\n </div>\n <p className=\"text-2xl sm:text-3xl font-bold font-mono tracking-tight mb-1 truncate\">84.2%</p>\n <p className=\"text-xs\" >Sub-16% COGS overhead</p>\n </div>\n <div className=\"h-8 flex items-end gap-1.5 mt-4\">\n {[70, 72, 75, 78, 80, 82, 83, 85].map((b, i) => (\n <div\n key={i}\n style={{ height: \\`\\${b}%\\` }}\n className=\"flex-1 bg-emerald-500 rounded-t opacity-75 hover:opacity-100 transition-opacity\"\n />\n ))}\n </div>\n </div>\n </div>\n\n {/ Live Customer Activity Stream /}\n <div\n className=\"rounded-xl border p-4 sm:p-6 transition-all\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 mb-4 border-b text-sm\" >\n <div className=\"flex items-center gap-2.5\">\n <Activity className=\"h-4 w-4\" />\n <span className=\"font-semibold text-sm sm:text-base\">Live Inflow Ledger</span>\n </div>\n\n {/ Filter pills /}\n <div className=\"flex items-center gap-1.5 font-mono text-xs\">\n {([\"all\", \"sub\", \"upgrade\"] as const).map((f) => (\n <button\n key={f}\n onClick={() => setEventFilter(f)}\n className={\\`px-3 py-1 rounded capitalize transition-all \\${\n eventFilter === f ? \"font-semibold text-white shadow-sm\" : \"opacity-60 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: eventFilter === f ? \"#6366f1\" : \"transparent\",\n color: eventFilter === f ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n {f}\n </button>\n ))}\n </div>\n </div>\n\n {/ Activity items list /}\n <div className=\"divide-y text-sm\" >\n {filteredActivities.map((act, i) => (\n <div key={i} className=\"py-3 flex items-center justify-between gap-3\">\n <div className=\"truncate min-w-0\">\n <p className=\"font-medium text-sm truncate\" >\n {act.user}\n </p>\n <p className=\"text-xs truncate mt-0.5\" >\n {act.plan} • {act.time}\n </p>\n </div>\n <span className=\"font-mono font-bold text-emerald-500 text-sm shrink-0\">\n {act.amount}\n </span>\n </div>\n ))}\n </div>\n </div>\n\n {/ Export Toast Notification /}\n <AnimatePresence>\n {exportToast && (\n <motion.div\n initial={{ opacity: 0, y: 15 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: 15 }}\n className=\"fixed bottom-6 right-6 p-3.5 rounded-xl border shadow-xl flex items-center gap-2.5 text-xs font-mono z-50\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <CheckCircle2 className=\"h-4 w-4 text-emerald-500\" />\n <span>Exported CSV ledger successfully.</span>\n </motion.div>\n )}\n </AnimatePresence>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateDevtoolsCli = {\n name: \"template-devtools-cli\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-devtools-cli.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n Terminal,\n Copy,\n Check,\n Zap,\n Code2,\n Cpu,\n Star,\n Github,\n ChevronRight,\n Sparkles,\n Command,\n Flame,\n Activity,\n} from \"lucide-react\";\n\nexport interface DevtoolsCliTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function DevtoolsCliTemplate({\n brandName = \"HyperTerminal\",\n theme = \"dark\",\n}: DevtoolsCliTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [copiedCurl, setCopiedCurl] = useState(false);\n const [terminalInput, setTerminalInput] = useState(\"\");\n const [terminalHistory, setTerminalHistory] = useState<string[]>([\n \"hyper init --template=edge-runtime\",\n \"✓ Initialized repository in 12ms\",\n \"hyper bench --concurrent=1000\",\n \"✓ P99 latency: 0.8ms across 1,000 parallel threads\",\n ]);\n\n const sampleCommands = [\"hyper bench --fast\", \"hyper deploy --prod\", \"hyper status\"];\n\n const handleCopyCurl = () => {\n navigator.clipboard.writeText(\"curl -fsSL https://get.hyperterminal.dev \| sh\");\n setCopiedCurl(true);\n setTimeout(() => setCopiedCurl(false), 2000);\n };\n\n const handleTerminalSubmit = (e?: React.FormEvent, manualCmd?: string) => {\n if (e) e.preventDefault();\n const cmd = (manualCmd \|\| terminalInput).trim();\n if (!cmd) return;\n let response = \\`Executed: \\${cmd}\\`;\n if (cmd.includes(\"bench\")) {\n response = \"✓ Bench: 4.8M ops/sec. Memory: 12.8MB RSS. Zero memory leaks.\";\n } else if (cmd.includes(\"deploy\")) {\n response = \"✓ Provisioned 35 edge clusters in 380ms. Routing active.\";\n } else if (cmd.includes(\"status\")) {\n response = \"✓ All 35 edge nodes healthy. CPU load: 1.4%. FPS: 120.\";\n } else {\n response = \\`✓ Command '\\${cmd}' executed successfully in 6ms.\\`;\n }\n setTerminalHistory((prev) => [...prev, cmd, response]);\n setTerminalInput(\"\");\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans\"\n \n >\n {/ Top Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm transition-all shrink-0\"\n \n >\n <Terminal className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"HyperTerminal\"}\n </span>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Star className=\"h-3.5 w-3.5 text-amber-500 fill-amber-500\" />\n <span>18.4k stars</span>\n </div>\n\n <button\n onClick={handleCopyCurl}\n className=\"px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-semibold text-white shadow-sm transition-all hover:brightness-110 flex items-center gap-2\"\n \n >\n {copiedCurl ? <Check className=\"h-4 w-4\" /> : <Copy className=\"h-4 w-4\" />}\n <span>{copiedCurl ? \"Copied!\" : \"Install CLI\"}</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Hero: Split Value Prop & Terminal View /}\n <section className=\"pt-8 sm:pt-14 lg:pt-20 pb-10 sm:pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto\">\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center\">\n {/ Left Column: Headline & Value Prop /}\n <div className=\"lg:col-span-6 space-y-5 text-left\">\n <div\n className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border text-xs font-mono\"\n style={{\n backgroundColor: \"#161822\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#6366f1\",\n }}\n >\n <Flame className=\"h-3.5 w-3.5\" />\n <span>Engineered in Rust • Zero C FFI</span>\n </div>\n\n <h1\n className=\"text-2xl @xs:text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.15]\"\n \n >\n The High-Performance Terminal for Systems Engineers.\n </h1>\n\n <p className=\"text-sm sm:text-base leading-relaxed\" >\n Sub-millisecond input rendering, native GPU acceleration, multiplexed shell sessions, and\n instant distributed telemetry out of the box.\n </p>\n\n {/ Quick Curl Box /}\n <div\n className=\"p-3 rounded-xl border flex items-center justify-between gap-3 text-xs sm:text-sm shadow-sm\"\n \n >\n <div className=\"flex items-center gap-2.5 truncate font-mono text-xs sm:text-sm min-w-0\">\n <span className=\"text-emerald-500 font-bold shrink-0\">$</span>\n <span className=\"truncate\" >\n curl -fsSL https://get.hyperterminal.dev \| sh\n </span>\n </div>\n <button\n onClick={handleCopyCurl}\n className=\"p-1.5 rounded hover:opacity-75 transition-opacity shrink-0\"\n aria-label=\"Copy install command\"\n >\n {copiedCurl ? <Check className=\"h-4 w-4 text-emerald-500\" /> : <Copy className=\"h-4 w-4 opacity-60\" />}\n </button>\n </div>\n </div>\n\n {/ Right Column: Interactive Terminal Sandbox /}\n <div className=\"lg:col-span-6 w-full\">\n <div\n className=\"rounded-2xl border shadow-xl overflow-hidden font-mono text-xs sm:text-sm transition-all\"\n style={{\n backgroundColor: isDark ? \"#08090d\" : \"#11131a\",\n color: \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n {/ Window Titlebar /}\n <div className=\"px-4 py-3 bg-black/40 border-b border-white/10 flex items-center justify-between\">\n <div className=\"flex items-center gap-1.5\">\n <div className=\"h-3 w-3 rounded-full bg-red-500/80\" />\n <div className=\"h-3 w-3 rounded-full bg-amber-500/80\" />\n <div className=\"h-3 w-3 rounded-full bg-emerald-500/80\" />\n </div>\n <span className=\"text-xs opacity-60 truncate max-w-[200px]\">\n hyper-session: ~/workspace/prod\n </span>\n <span className=\"text-xs text-emerald-400 font-bold\">120 FPS</span>\n </div>\n\n {/ Terminal Logs /}\n <div className=\"p-4 sm:p-5 space-y-2.5 max-h-64 sm:max-h-80 overflow-y-auto no-scrollbar\">\n {terminalHistory.map((line, idx) => (\n <div\n key={idx}\n className={line.startsWith(\"✓\") ? \"text-emerald-400 font-medium\" : \"text-zinc-200\"}\n >\n {!line.startsWith(\"✓\") && <span className=\"mr-2\" >$</span>}\n {line}\n </div>\n ))}\n\n {/ Active input prompt /}\n <form onSubmit={(e) => handleTerminalSubmit(e)} className=\"flex items-center gap-2 pt-1\">\n <span >$</span>\n <input\n type=\"text\"\n value={terminalInput}\n onChange={(e) => setTerminalInput(e.target.value)}\n placeholder=\"try: hyper bench --fast\"\n className=\"w-full bg-transparent focus:outline-none text-white placeholder:text-zinc-600 text-xs sm:text-sm\"\n />\n </form>\n </div>\n\n {/ Quick interactive chip buttons for mobile / touch /}\n <div className=\"px-4 py-2.5 bg-black/30 border-t border-white/10 flex flex-wrap items-center gap-2 text-xs\">\n <span className=\"opacity-40\">Tap run:</span>\n {sampleCommands.map((cmd, i) => (\n <button\n key={i}\n onClick={() => handleTerminalSubmit(undefined, cmd)}\n className=\"px-2.5 py-1 rounded border border-white/10 text-zinc-300 hover:text-white hover:border-white/30 transition-colors font-mono\"\n >\n {cmd}\n </button>\n ))}\n </div>\n </div>\n </div>\n </div>\n </section>\n\n {/ Benchmark Matrix /}\n <section\n className=\"py-12 sm:py-16 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto border-t\"\n \n >\n <div className=\"text-center max-w-xl mx-auto mb-10\">\n <h2\n className=\"text-2xl sm:text-3xl font-bold tracking-tight mb-2\"\n \n >\n Engineered For Pure Performance\n </h2>\n <p className=\"text-xs sm:text-sm\" >\n Verified on 64-core Linux kernel 6.8 environments with native GPU rasterization.\n </p>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-5\">\n <div\n className=\"p-6 rounded-xl border text-center transition-all\"\n \n >\n <p className=\"text-xs font-mono font-semibold uppercase tracking-wider mb-2\" >\n COLD START LATENCY\n </p>\n <p className=\"text-3xl sm:text-4xl font-bold font-mono text-emerald-500 mb-2\">0.4ms</p>\n <p className=\"text-xs sm:text-sm opacity-70\">18x faster than traditional shells</p>\n </div>\n\n <div\n className=\"p-6 rounded-xl border text-center transition-all\"\n \n >\n <p className=\"text-xs font-mono font-semibold uppercase tracking-wider mb-2\" >\n MEMORY FOOTPRINT\n </p>\n <p className=\"text-3xl sm:text-4xl font-bold font-mono mb-2\" >\n 12.8 MB\n </p>\n <p className=\"text-xs sm:text-sm opacity-70\">94% less memory than web wrappers</p>\n </div>\n\n <div\n className=\"p-6 rounded-xl border text-center transition-all\"\n \n >\n <p className=\"text-xs font-mono font-semibold uppercase tracking-wider mb-2\" >\n RENDER REFRESH RATE\n </p>\n <p className=\"text-3xl sm:text-4xl font-bold font-mono text-amber-500 mb-2\">120 FPS</p>\n <p className=\"text-xs sm:text-sm opacity-70\">Metal & Vulkan GPU acceleration</p>\n </div>\n </div>\n </section>\n\n {/ Footer /}\n <footer\n className=\"py-8 px-4 sm:px-6 border-t text-center text-xs sm:text-sm\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"HyperTerminal\"}. Open source MIT licensed.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateCreativePortfolio = {\n name: \"template-creative-portfolio\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-creative-portfolio.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n ArrowUpRight,\n Sparkles,\n Check,\n X,\n Send,\n Eye,\n Award,\n Layers,\n Globe,\n} from \"lucide-react\";\n\nexport interface CreativePortfolioTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function CreativePortfolioTemplate({\n brandName = \"Studio Monolith\",\n theme = \"dark\",\n}: CreativePortfolioTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [activeProject, setActiveProject] = useState<any \| null>(null);\n const [isInquiryOpen, setIsInquiryOpen] = useState(false);\n const [inquiryBudget, setInquiryBudget] = useState(\"$25k - $50k\");\n\n const projects = [\n {\n id: \"lumina\",\n title: \"Lumina Spatial Audio\",\n client: \"Bang & Olufsen Acoustic Lab\",\n category: \"Creative Direction & WebGL\",\n year: \"2025\",\n award: \"Awwwards SOTD\",\n summary: \"An interactive spatial audio visualizer engineered using custom GLSL shaders and real-time frequency mapping.\",\n metric: \"+180% Session Duration\",\n },\n {\n id: \"vortex\",\n title: \"Komorebi Timepieces\",\n client: \"Grand Seiko Haute Horlogerie\",\n category: \"Digital Flagship & E-commerce\",\n year: \"2024\",\n award: \"FWA of the Month\",\n summary: \"Editorial digital commerce architecture celebrating Japanese micro-artisan craftsmanship and mechanical movements.\",\n metric: \"$4.2M Launch Volume\",\n },\n {\n id: \"neural\",\n title: \"Monolith Architecture\",\n client: \"Zaha Hadid Foundation\",\n category: \"Exhibition Monograph\",\n year: \"2025\",\n award: \"Cannes Bronze Lion\",\n summary: \"Archive curation and interactive parametric building exploration for the global retrospective exhibition tour.\",\n metric: \"1.2M Virtual Visitors\",\n },\n {\n id: \"apex\",\n title: \"Hyperion Autonomous EV\",\n client: \"Hyperion Motors Sweden\",\n category: \"HMI & Telemetry Interface\",\n year: \"2024\",\n award: \"Red Dot Best of Best\",\n summary: \"In-cockpit digital instrument cluster and companion telemetry application engineered for electric hypercars.\",\n metric: \"Sub-16ms Framerate\",\n },\n ];\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans selection:bg-indigo-500/20\"\n \n >\n {/ Editorial Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <span\n className=\"text-base sm:text-lg font-bold tracking-tight uppercase\"\n \n >\n {brandName \|\| \"Studio Monolith\"}\n </span>\n <span className=\"hidden sm:inline text-xs sm:text-sm\" >\n / Zurich & Tokyo\n </span>\n </div>\n\n <div className=\"flex items-center gap-3 sm:gap-4\">\n <div\n className=\"hidden sm:flex items-center gap-2 text-xs\"\n \n >\n <span className=\"h-2 w-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span>Available for Commissions</span>\n </div>\n\n <button\n onClick={() => setIsInquiryOpen(true)}\n className=\"text-xs sm:text-sm font-semibold px-4 py-2 rounded-full text-white shadow-sm transition-all hover:brightness-110 flex items-center gap-2 shrink-0\"\n \n >\n <span>Initiate Project</span>\n <ArrowUpRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n </header>\n\n {/ Large Editorial Statement Hero /}\n <section className=\"pt-12 sm:pt-20 lg:pt-28 pb-12 sm:pb-16 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto text-left\">\n <p\n className=\"text-xs uppercase tracking-widest font-mono mb-4\"\n \n >\n Design Direction & Digital Architecture\n </p>\n\n <h1\n className=\"text-3xl @xs:text-4xl sm:text-5xl lg:text-6xl font-light tracking-tight leading-[1.12] mb-8\"\n \n >\n Sculpting singular digital experiences for cultural and luxury institutions.\n </h1>\n\n <div\n className=\"grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8 border-t text-xs sm:text-sm\"\n \n >\n <div>\n <p className=\"font-semibold mb-1 text-sm sm:text-base\" >\n Curation & Strategy\n </p>\n <p className=\"leading-relaxed\" >\n Transforming brand narratives into sensory digital monographs.\n </p>\n </div>\n <div>\n <p className=\"font-semibold mb-1 text-sm sm:text-base\" >\n Spatial & Real-Time\n </p>\n <p className=\"leading-relaxed\" >\n Custom interactive 3D environments engineered for silky 60FPS fluid motion.\n </p>\n </div>\n <div>\n <p className=\"font-semibold mb-1 text-sm sm:text-base\" >\n Accolades\n </p>\n <p className=\"leading-relaxed\" >\n 14x Awwwards SOTD, 8x FWA of the Day, Cannes Lions Bronze Winner.\n </p>\n </div>\n </div>\n </section>\n\n {/ Project Showcase Grid /}\n <section\n className=\"py-12 sm:py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto border-t\"\n \n >\n <div className=\"flex items-center justify-between mb-8\">\n <h2 className=\"text-xs sm:text-sm uppercase font-mono tracking-widest opacity-60\">\n Selected Monographs (2024 — 2025)\n </h2>\n <span className=\"text-xs sm:text-sm font-mono\" >\n 4 Featured Works\n </span>\n </div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8\">\n {projects.map((proj) => (\n <motion.div\n key={proj.id}\n whileHover={{ y: -4 }}\n onClick={() => setActiveProject(proj)}\n className=\"cursor-pointer rounded-2xl border p-6 sm:p-8 flex flex-col justify-between min-h-[320px] transition-all group\"\n \n >\n <div>\n <div\n className=\"flex items-center justify-between text-xs font-mono mb-4\"\n \n >\n <span className=\"flex items-center gap-1.5 font-medium\">\n <Award className=\"h-4 w-4 text-amber-500\" />\n <span>{proj.award}</span>\n </span>\n <span>{proj.year}</span>\n </div>\n\n <h3\n className=\"text-2xl sm:text-3xl font-bold tracking-tight mb-2 group-hover:opacity-90 transition-opacity\"\n style={{ color: \"#f4f4f7\" }}\n >\n {proj.title}\n </h3>\n <p className=\"text-xs sm:text-sm mb-4 font-medium\" >\n {proj.client}\n </p>\n <p className=\"text-xs sm:text-sm leading-relaxed line-clamp-2\" >\n {proj.summary}\n </p>\n </div>\n\n <div\n className=\"pt-4 border-t flex items-center justify-between text-xs sm:text-sm mt-4\"\n \n >\n <span >{proj.category}</span>\n <span\n className=\"flex items-center gap-1.5 font-semibold group-hover:underline\"\n \n >\n <span>Explore Monograph</span>\n <ArrowUpRight className=\"h-4 w-4\" />\n </span>\n </div>\n </motion.div>\n ))}\n </div>\n </section>\n\n {/ Project Detail Modal /}\n <AnimatePresence>\n {activeProject && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4\"\n onClick={() => setActiveProject(null)}\n >\n <motion.div\n initial={{ scale: 0.95, y: 10 }}\n animate={{ scale: 1, y: 0 }}\n exit={{ scale: 0.95, y: 10 }}\n onClick={(e) => e.stopPropagation()}\n className=\"w-full max-w-lg rounded-2xl border p-6 sm:p-8 shadow-2xl relative\"\n \n >\n <button\n onClick={() => setActiveProject(null)}\n className=\"absolute top-4 right-4 p-2 rounded-lg hover:opacity-75 transition-opacity\"\n aria-label=\"Close Project Modal\"\n >\n <X className=\"h-5 w-5\" />\n </button>\n\n <div\n className=\"inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono mb-4 border\"\n style={{\n backgroundColor: \"rgba(245, 158, 11, 0.1)\",\n borderColor: \"rgba(245, 158, 11, 0.3)\",\n color: \"#d97706\",\n }}\n >\n <Award className=\"h-3.5 w-3.5\" />\n <span>{activeProject.award}</span>\n </div>\n\n <h3\n className=\"text-2xl sm:text-3xl font-bold mb-1.5\"\n style={{ color: \"#f4f4f7\" }}\n >\n {activeProject.title}\n </h3>\n <p className=\"text-xs sm:text-sm mb-4\" >\n {activeProject.client} • {activeProject.year}\n </p>\n\n <p className=\"text-xs sm:text-sm leading-relaxed mb-6\" >\n {activeProject.summary}\n </p>\n\n <div\n className=\"p-4 rounded-xl border flex items-center justify-between text-xs sm:text-sm font-mono mb-6\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#161822\",\n }}\n >\n <span >Demonstrated Impact:</span>\n <span className=\"font-bold text-emerald-500\">{activeProject.metric}</span>\n </div>\n\n <button\n onClick={() => {\n alert(\\`Navigating to monograph: \\${activeProject.title}\\`);\n setActiveProject(null);\n }}\n className=\"w-full h-11 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-md transition-all hover:brightness-110 flex items-center justify-center gap-2\"\n \n >\n <span>View Complete Case Study</span>\n <ArrowUpRight className=\"h-4 w-4\" />\n </button>\n </motion.div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Initiate Project Modal /}\n <AnimatePresence>\n {isInquiryOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4\"\n onClick={() => setIsInquiryOpen(false)}\n >\n <motion.div\n initial={{ scale: 0.95, y: 10 }}\n animate={{ scale: 1, y: 0 }}\n exit={{ scale: 0.95, y: 10 }}\n onClick={(e) => e.stopPropagation()}\n className=\"w-full max-w-md rounded-2xl border p-6 shadow-2xl space-y-4\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <h3 className=\"font-bold text-base uppercase tracking-wider\" >\n Initiate Commission\n </h3>\n <button onClick={() => setIsInquiryOpen(false)} className=\"p-1 rounded hover:opacity-75\">\n <X className=\"h-5 w-5\" />\n </button>\n </div>\n\n <p className=\"text-xs sm:text-sm leading-relaxed\" >\n We accept a select number of architecture, luxury, and digital monograph commissions per quarter.\n </p>\n\n <div>\n <label className=\"block text-xs font-semibold mb-2\" >\n Target Investment Bracket\n </label>\n <div className=\"grid grid-cols-2 gap-2 text-xs\">\n {[\"$15k - $25k\", \"$25k - $50k\", \"$50k - $100k\", \"$100k+\"].map((b) => (\n <button\n key={b}\n onClick={() => setInquiryBudget(b)}\n className={\\`h-11 rounded-xl border text-xs sm:text-sm font-medium transition-all flex items-center justify-center \\${\n inquiryBudget === b ? \"font-semibold shadow-sm text-white\" : \"opacity-75\"\n }\\`}\n style={{\n backgroundColor: inquiryBudget === b ? \"#6366f1\" : \"#12141c\",\n borderColor: inquiryBudget === b ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n color: inquiryBudget === b ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n {b}\n </button>\n ))}\n </div>\n </div>\n\n <button\n onClick={() => {\n alert(\"Project inquiry transmitted to Zurich & Tokyo studio partners.\");\n setIsInquiryOpen(false);\n }}\n className=\"w-full h-11 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-md transition-all hover:brightness-110\"\n \n >\n Transmit Project Proposal\n </button>\n </motion.div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Footer /}\n <footer\n className=\"py-10 px-4 sm:px-6 border-t text-center text-xs sm:text-sm\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"Studio Monolith\"}. All rights reserved.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateFintechApp = {\n name: \"template-fintech-app\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-fintech-app.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n CreditCard,\n ArrowUpRight,\n ArrowDownLeft,\n ShieldCheck,\n Lock,\n Unlock,\n Send,\n Download,\n Search,\n CheckCircle2,\n RefreshCw,\n Globe,\n SlidersHorizontal,\n X,\n} from \"lucide-react\";\n\nexport interface FintechAppTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function FintechAppTemplate({\n brandName = \"Apex Capital\",\n theme = \"dark\",\n}: FintechAppTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [activeCurrency, setActiveCurrency] = useState<\"USD\" \| \"EUR\" \| \"GBP\">(\"USD\");\n const [isCardFrozen, setIsCardFrozen] = useState(false);\n const [showCardNumber, setShowCardNumber] = useState(false);\n const [isTransferOpen, setIsTransferOpen] = useState(false);\n const [transferAmount, setTransferAmount] = useState(\"4500\");\n const [transferToast, setTransferToast] = useState(false);\n\n const balances = {\n USD: { symbol: \"$\", total: \"2,841,920.40\", yield: \"+5.18% APY\", wireLimit: \"$500,000\" },\n EUR: { symbol: \"€\", total: \"1,940,210.00\", yield: \"+3.92% APY\", wireLimit: \"€450,000\" },\n GBP: { symbol: \"£\", total: \"820,450.15\", yield: \"+4.85% APY\", wireLimit: \"£300,000\" },\n }[activeCurrency];\n\n const transactions = [\n { name: \"AWS Cloud Infrastructure\", cat: \"Hosting & CDN\", date: \"Today, 14:22\", amount: \"-$12,420.00\", status: \"Cleared\" },\n { name: \"Stripe Settlement Inflow\", cat: \"Merchant Volume\", date: \"Today, 09:15\", amount: \"+$48,920.50\", status: \"Cleared\" },\n { name: \"Gartner Research Advisory\", cat: \"Subscriptions\", date: \"Yesterday\", amount: \"-$3,500.00\", status: \"Cleared\" },\n { name: \"Figma Enterprise Seats\", cat: \"Design Software\", date: \"Sep 04\", amount: \"-$1,840.00\", status: \"Cleared\" },\n ];\n\n const handleSendWire = (e: React.FormEvent) => {\n e.preventDefault();\n setIsTransferOpen(false);\n setTransferToast(true);\n setTimeout(() => setTransferToast(false), 3000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm transition-all shrink-0\"\n \n >\n <ShieldCheck className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Apex Capital\"}\n </span>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n {/ Currency Switcher /}\n <div\n className=\"flex items-center p-1 rounded-lg border text-xs\"\n \n >\n {([\"USD\", \"EUR\", \"GBP\"] as const).map((curr) => (\n <button\n key={curr}\n onClick={() => setActiveCurrency(curr)}\n className={\\`px-2.5 py-1 rounded text-xs font-mono transition-all \\${\n activeCurrency === curr ? \"text-white font-bold shadow-sm\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: activeCurrency === curr ? \"#6366f1\" : \"transparent\",\n color: activeCurrency === curr ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n {curr}\n </button>\n ))}\n </div>\n\n <button\n onClick={() => setIsTransferOpen(true)}\n className=\"text-xs sm:text-sm font-semibold px-3.5 py-2 rounded-lg text-white shadow-sm transition-all hover:brightness-110 flex items-center gap-2 shrink-0\"\n \n >\n <Send className=\"h-4 w-4\" />\n <span className=\"hidden sm:inline\">Send Wire</span>\n <span className=\"sm:hidden\">Wire</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Treasury Dashboard Section /}\n <section className=\"pt-8 sm:pt-12 lg:pt-16 pb-12 sm:pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto\">\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n {/ Virtual Titanium Debit Card /}\n <div className=\"lg:col-span-5 flex flex-col items-center w-full\">\n <div\n className={\\`w-full max-w-md h-56 sm:h-60 rounded-2xl p-6 border shadow-xl relative flex flex-col justify-between overflow-hidden transition-all duration-300 \\${\n isCardFrozen ? \"grayscale brightness-75\" : \"\"\n }\\`}\n style={{\n background: \"linear-gradient(135deg, #1e293b 0%, #0f172a 100%)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n color: \"#ffffff\",\n }}\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"font-mono text-xs tracking-widest text-zinc-300 font-semibold\">\n APEX TITANIUM\n </span>\n <span\n className=\"text-xs font-mono px-2.5 py-1 rounded-full border border-white/20 font-bold\"\n style={{\n backgroundColor: isCardFrozen ? \"rgba(239, 68, 68, 0.2)\" : \"rgba(16, 185, 129, 0.2)\",\n color: isCardFrozen ? \"#f87171\" : \"#6ee7b7\",\n }}\n >\n {isCardFrozen ? \"FROZEN\" : \"ACTIVE\"}\n </span>\n </div>\n\n {/ EMV Chip & Contactless /}\n <div className=\"flex items-center gap-2.5\">\n <div className=\"w-10 h-8 rounded bg-gradient-to-tr from-amber-400 to-amber-200 shadow-inner\" />\n <div className=\"h-5 w-5 border-2 border-white/30 rounded-full\" />\n </div>\n\n <div>\n <p className=\"font-mono text-lg sm:text-xl tracking-widest mb-1.5 text-white\">\n {showCardNumber ? \"4829 9102 3847 1092\" : \"•••• •••• •••• 1092\"}\n </p>\n <div className=\"flex items-center justify-between text-xs font-mono text-zinc-300\">\n <span>EXECUTIVE CORP</span>\n <span>EXP 08/29</span>\n </div>\n </div>\n </div>\n\n {/ Card Controls /}\n <div className=\"flex items-center gap-3 mt-4 w-full max-w-md justify-center\">\n <button\n onClick={() => setShowCardNumber(!showCardNumber)}\n className=\"flex-1 h-10 px-3 py-2 rounded-lg border text-xs sm:text-sm font-medium flex items-center justify-center gap-2 hover:opacity-80 transition-opacity shadow-sm\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n {showCardNumber ? <Lock className=\"h-4 w-4\" /> : <Unlock className=\"h-4 w-4\" />}\n <span>{showCardNumber ? \"Hide Number\" : \"Show Number\"}</span>\n </button>\n\n <button\n onClick={() => setIsCardFrozen(!isCardFrozen)}\n className=\"flex-1 h-10 px-3 py-2 rounded-lg border text-xs sm:text-sm font-medium flex items-center justify-center gap-2 transition-colors shadow-sm\"\n style={{\n backgroundColor: isCardFrozen ? \"rgba(239, 68, 68, 0.1)\" : \"#12141c\",\n borderColor: isCardFrozen ? \"#ef4444\" : \"rgba(255, 255, 255, 0.08)\",\n color: isCardFrozen ? \"#ef4444\" : \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <ShieldCheck className=\"h-4 w-4\" />\n <span>{isCardFrozen ? \"Unfreeze\" : \"Freeze\"}</span>\n </button>\n </div>\n </div>\n\n {/ Treasury Summary & Yield /}\n <div className=\"lg:col-span-7 space-y-6 w-full\">\n <div\n className=\"p-5 sm:p-7 rounded-2xl border transition-all\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs uppercase font-mono tracking-wider\" >\n Liquid Treasury Balance\n </span>\n <span className=\"text-xs font-mono font-bold text-emerald-500 bg-emerald-500/10 px-2.5 py-1 rounded-full\">\n {balances.yield}\n </span>\n </div>\n\n <div className=\"flex items-baseline gap-2 mb-5\">\n <span className=\"text-3xl @xs:text-4xl sm:text-5xl font-bold font-mono tracking-tight truncate\">\n {balances.symbol}{balances.total}\n </span>\n <span className=\"text-sm font-mono opacity-60 shrink-0\">{activeCurrency}</span>\n </div>\n\n <div\n className=\"grid grid-cols-1 @xs:grid-cols-3 gap-3 pt-5 border-t text-xs font-mono\"\n \n >\n <div className=\"p-2 rounded-lg\" >\n <p className=\"text-xs mb-0.5\" >WIRE LIMIT</p>\n <p className=\"font-semibold text-sm\">{balances.wireLimit}</p>\n </div>\n <div className=\"p-2 rounded-lg\" >\n <p className=\"text-xs mb-0.5\" >TRANSIT NETWORK</p>\n <p className=\"font-semibold text-sm text-emerald-500\">FedNow Instant</p>\n </div>\n <div className=\"p-2 rounded-lg\" >\n <p className=\"text-xs mb-0.5\" >INSURANCE</p>\n <p className=\"font-semibold text-sm\">$5M FDIC Pool</p>\n </div>\n </div>\n </div>\n\n {/ Recent Corporate Ledger /}\n <div\n className=\"p-5 sm:p-7 rounded-2xl border transition-all\"\n \n >\n <div className=\"flex items-center justify-between pb-3.5 mb-3 border-b text-sm\" >\n <span className=\"font-semibold text-sm sm:text-base\">Recent Treasury Transactions</span>\n <span className=\"text-xs font-mono\" >4 transactions</span>\n </div>\n\n <div className=\"divide-y text-sm\" >\n {transactions.map((tx, i) => (\n <div key={i} className=\"py-3.5 flex items-center justify-between gap-4\">\n <div className=\"truncate min-w-0\">\n <p className=\"font-medium truncate\" >\n {tx.name}\n </p>\n <p className=\"text-xs truncate mt-0.5\" >\n {tx.cat} • {tx.date}\n </p>\n </div>\n <span\n className={\\`font-mono font-bold text-sm shrink-0 \\${\n tx.amount.startsWith(\"+\") ? \"text-emerald-500\" : \"\"\n }\\`}\n style={{ color: tx.amount.startsWith(\"+\") ? undefined : \"#f4f4f7\" }}\n >\n {tx.amount}\n </span>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </section>\n\n {/ Send Wire Modal /}\n <AnimatePresence>\n {isTransferOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4\"\n onClick={() => setIsTransferOpen(false)}\n >\n <motion.form\n initial={{ scale: 0.95, y: 10 }}\n animate={{ scale: 1, y: 0 }}\n exit={{ scale: 0.95, y: 10 }}\n onClick={(e) => e.stopPropagation()}\n onSubmit={handleSendWire}\n className=\"w-full max-w-md rounded-2xl border p-6 shadow-2xl space-y-4\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <h3 className=\"font-bold text-base\" >\n Initiate FedNow Outbound Wire\n </h3>\n <button type=\"button\" onClick={() => setIsTransferOpen(false)} className=\"p-1 rounded hover:opacity-75\">\n <X className=\"h-5 w-5\" />\n </button>\n </div>\n\n <div>\n <label className=\"block text-xs font-semibold mb-1.5\" >\n Beneficiary Account Name\n </label>\n <input\n type=\"text\"\n required\n defaultValue=\"Anthropic PBC\"\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-sm bg-transparent focus:outline-none\"\n \n />\n </div>\n\n <div>\n <label className=\"block text-xs font-semibold mb-1.5\" >\n Transfer Amount ({activeCurrency})\n </label>\n <input\n type=\"number\"\n required\n value={transferAmount}\n onChange={(e) => setTransferAmount(e.target.value)}\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-base font-mono font-bold bg-transparent focus:outline-none\"\n \n />\n </div>\n\n <div className=\"pt-3 flex justify-end gap-3\">\n <button\n type=\"button\"\n onClick={() => setIsTransferOpen(false)}\n className=\"px-4 py-2.5 rounded-xl border text-xs sm:text-sm font-medium hover:opacity-80\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-sm hover:brightness-110\"\n \n >\n Authorize Wire\n </button>\n </div>\n </motion.form>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Wire Sent Toast Notification /}\n <AnimatePresence>\n {transferToast && (\n <motion.div\n initial={{ opacity: 0, y: 15 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: 15 }}\n className=\"fixed bottom-6 right-6 p-3.5 rounded-xl border shadow-xl flex items-center gap-2.5 text-xs font-mono z-50\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <CheckCircle2 className=\"h-4 w-4 text-emerald-500 shrink-0\" />\n <span>Wire authorized and submitted to FedNow rail.</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Footer /}\n <footer\n className=\"py-8 px-4 sm:px-6 border-t text-center text-xs sm:text-sm\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"Apex Capital\"}. Member FDIC insured.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateEcommerceStore = {\n name: \"template-ecommerce-store\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ecommerce-store.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n ShoppingBag,\n Sparkles,\n Check,\n ChevronDown,\n ChevronRight,\n X,\n Heart,\n Truck,\n RotateCcw,\n ShieldCheck,\n Plus,\n Minus,\n Menu,\n Eye,\n Layers,\n ArrowRight,\n Star,\n Compass,\n} from \"lucide-react\";\n\nexport interface EcommerceStoreTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function EcommerceStoreTemplate({\n brandName = \"Atelier Objects\",\n theme = \"dark\",\n}: EcommerceStoreTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [selectedColor, setSelectedColor] = useState<\"Obsidian\" \| \"Dune Sand\" \| \"Nordic Sage\" \| \"Terracotta\">(\"Obsidian\");\n const [selectedSize, setSelectedSize] = useState<\"S\" \| \"M\" \| \"L\" \| \"XL\">(\"M\");\n const [activeImageIndex, setActiveImageIndex] = useState(0);\n const [isBagOpen, setIsBagOpen] = useState(false);\n const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n const [isWishlisted, setIsWishlisted] = useState(false);\n const [bagItems, setBagItems] = useState([\n {\n id: \"parka-1\",\n name: \"The No. 04 Modular Field Parka\",\n color: \"Obsidian\",\n size: \"M\",\n price: 380,\n qty: 1,\n },\n ]);\n const [openAccordion, setOpenAccordion] = useState<string \| null>(\"materials\");\n\n const colors = [\n { name: \"Obsidian\", hex: \"#18181b\", label: \"01 / Carbon Black\" },\n { name: \"Dune Sand\", hex: \"#d4c5b9\", label: \"02 / Raw Mineral\" },\n { name: \"Nordic Sage\", hex: \"#7a8a7c\", label: \"03 / Glacial Moss\" },\n { name: \"Terracotta\", hex: \"#a45d4c\", label: \"04 / Baked Earth\" },\n ] as const;\n\n const productImages = [\n { label: \"Front Profile\", desc: \"Minimalist storm collar with covered storm flap\" },\n { label: \"Material Macro\", desc: \"320gsm high-density Japanese gabardine weave\" },\n { label: \"Internal Structure\", desc: \"Removable thermal lining with magnetic utility pockets\" },\n ];\n\n const bagSubtotal = bagItems.reduce((acc, item) => acc + item.price item.qty, 0);\n\n const handleAddToBag = () => {\n setBagItems((prev) => {\n const existing = prev.find((i) => i.color === selectedColor && i.size === selectedSize);\n if (existing) {\n return prev.map((i) =>\n i.color === selectedColor && i.size === selectedSize ? { ...i, qty: i.qty + 1 } : i\n );\n }\n return [\n ...prev,\n {\n id: \\`parka-\\${Date.now()}\\`,\n name: \"The No. 04 Modular Field Parka\",\n color: selectedColor,\n size: selectedSize,\n price: 380,\n qty: 1,\n },\n ];\n });\n setIsBagOpen(true);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors text-left font-sans\"\n \n >\n {/* Top Banner /}\n <div\n className=\"w-full py-2.5 px-4 text-center text-xs font-mono border-b flex items-center justify-center gap-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255,255,255,0.03)\" : \"rgba(0,0,0,0.03)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#9aa0aa\",\n }}\n >\n <span className=\"inline-block w-2 h-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span>Complimentary Climate-Neutral Delivery Worldwide On Orders Over $250</span>\n </div>\n\n {/ Atelier Navigation /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n {/ Mobile Menu Trigger & Brand /}\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n className=\"p-2 md:hidden rounded-lg border transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n \n aria-label=\"Toggle navigation menu\"\n >\n {isMobileMenuOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n <div className=\"flex items-center gap-2.5\">\n <ShoppingBag className=\"h-4 w-4\" />\n <span\n className=\"text-sm sm:text-base font-bold tracking-tight uppercase\"\n \n >\n {brandName \|\| \"Atelier Objects\"}\n </span>\n </div>\n </div>\n\n {/ Desktop Navigation /}\n <nav className=\"hidden md:flex items-center gap-7 text-xs font-medium tracking-wide uppercase\" >\n <a href=\"#outerwear\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Outerwear\n </a>\n <a href=\"#modular\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Modular Gear\n </a>\n <a href=\"#archive\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Archive\n </a>\n <a href=\"#provenance\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Provenance\n </a>\n </nav>\n\n {/ Actions: Wishlist & Bag /}\n <div className=\"flex items-center gap-2.5\">\n <button\n onClick={() => setIsWishlisted(!isWishlisted)}\n className=\"p-2.5 rounded-full border transition-colors hover:bg-black/5 dark:hover:bg-white/5 hidden sm:flex items-center justify-center\"\n \n aria-label=\"Wishlist\"\n >\n <Heart className={\\`h-4 w-4 transition-colors \\${isWishlisted ? \"fill-rose-500 text-rose-500\" : \"\"}\\`} />\n </button>\n\n <button\n onClick={() => setIsBagOpen(true)}\n className=\"flex items-center gap-2 px-4 py-2 rounded-full border text-xs sm:text-sm font-medium transition-all shadow-sm hover:scale-[1.02]\"\n \n >\n <ShoppingBag className=\"h-4 w-4 text-[#6366f1]\" />\n <span>Bag ({bagItems.reduce((acc, i) => acc + i.qty, 0)})</span>\n </button>\n </div>\n </div>\n\n {/ Mobile Navigation Drawer /}\n <AnimatePresence>\n {isMobileMenuOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"md:hidden border-b overflow-hidden\"\n \n >\n <div className=\"px-4 py-4 space-y-3 text-xs uppercase font-medium\">\n <a\n href=\"#outerwear\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Outerwear (Winter 2026)\n </a>\n <a\n href=\"#modular\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Modular Utility Systems\n </a>\n <a\n href=\"#archive\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Archive & Limited Runs\n </a>\n <a\n href=\"#provenance\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5\"\n >\n Fabric Provenance & Kyoto Mills\n </a>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n </header>\n\n {/ Main Product Stage /}\n <main className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12\">\n {/ Breadcrumbs /}\n <div className=\"flex items-center gap-2 text-xs font-mono mb-6\" >\n <span>Archive 2026</span>\n <ChevronRight className=\"h-3.5 w-3.5\" />\n <span>Technical Outerwear</span>\n <ChevronRight className=\"h-3.5 w-3.5\" />\n <span className=\"text-[#f4f4f7] font-medium\">No. 04 Modular Field Parka</span>\n </div>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start\">\n {/ Left Column: Tactile Product Visual Showcase /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"w-full aspect-[4/5] sm:aspect-[4/4] rounded-2xl border p-6 sm:p-8 flex flex-col justify-between relative overflow-hidden transition-all shadow-lg group\"\n style={{\n backgroundColor: isDark ? \"rgba(255,255,255,0.02)\" : \"#f4f3f0\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n {/ Product Badge Header /}\n <div className=\"flex justify-between items-start z-10\">\n <div className=\"flex flex-col gap-1.5\">\n <span\n className=\"text-xs font-mono uppercase tracking-widest px-3 py-1 rounded-full border shadow-sm\"\n \n >\n Edition 04 • 200 Handcrafted Units\n </span>\n <span className=\"text-xs font-mono text-emerald-600 dark:text-emerald-400 font-medium pl-1\">\n In Stock • Ready to Dispatch\n </span>\n </div>\n\n <button\n onClick={() => setIsWishlisted(!isWishlisted)}\n className=\"p-3 rounded-full border shadow-sm transition-transform active:scale-95 hover:scale-105\"\n \n aria-label=\"Save to wishlist\"\n >\n <Heart\n className={\\`h-4 w-4 transition-colors \\${\n isWishlisted ? \"fill-rose-500 text-rose-500\" : \"text-[#9aa0aa]\"\n }\\`}\n />\n </button>\n </div>\n\n {/ Product Visual Centerpiece /}\n <div className=\"w-full flex-1 flex flex-col items-center justify-center my-6\">\n <div\n className=\"w-52 sm:w-64 h-64 sm:h-80 rounded-2xl shadow-2xl transition-all duration-700 border flex flex-col justify-between p-6 relative overflow-hidden\"\n style={{\n backgroundColor: colors.find((c) => c.name === selectedColor)?.hex,\n borderColor: \"rgba(255,255,255,0.15)\",\n }}\n >\n {/ Subtle woven texture overlay /}\n <div\n className=\"absolute inset-0 opacity-15 pointer-events-none\"\n style={{\n backgroundImage: \"radial-gradient(circle at 1px 1px, rgba(255,255,255,0.4) 1px, transparent 0)\",\n backgroundSize: \"8px 8px\",\n }}\n />\n\n <div className=\"flex justify-between items-center text-xs font-mono text-white/80 tracking-widest uppercase z-10\">\n <span>ATELIER NO. 04</span>\n <span className=\"border border-white/20 px-2 py-0.5 rounded text-[11px]\">JAPAN</span>\n </div>\n\n <div className=\"text-center z-10 space-y-1\">\n <p className=\"text-white font-mono text-base tracking-wider font-semibold\">\n {selectedColor.toUpperCase()}\n </p>\n <p className=\"text-white/75 font-mono text-xs\">\n {productImages[activeImageIndex].label}\n </p>\n </div>\n\n <div className=\"flex justify-between items-end text-xs font-mono text-white/80 z-10\">\n <span>KYOTO MILL</span>\n <span>320 GSM GABARDINE</span>\n </div>\n </div>\n\n <p className=\"text-xs font-mono mt-4 text-center max-w-sm\" >\n {productImages[activeImageIndex].desc}\n </p>\n </div>\n\n {/ Bottom Technical Spec Bar /}\n <div\n className=\"flex items-center justify-between text-xs font-mono pt-3 border-t z-10\"\n \n >\n <span>Hand-stitched in Kyoto, JP</span>\n <span>Waterproof 20,000mm Rating</span>\n </div>\n </div>\n\n {/ Thumbnail View Switcher /}\n <div className=\"grid grid-cols-3 gap-2.5 sm:gap-3\">\n {productImages.map((img, idx) => (\n <button\n key={idx}\n onClick={() => setActiveImageIndex(idx)}\n className={\\`p-3 rounded-xl border text-left transition-all \\${\n activeImageIndex === idx\n ? \"ring-2 shadow-sm\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: \"#12141c\",\n borderColor: activeImageIndex === idx ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <p className=\"text-xs sm:text-sm font-semibold truncate\">{img.label}</p>\n <p className=\"text-xs font-mono truncate mt-0.5\" >\n View 0{idx + 1}\n </p>\n </button>\n ))}\n </div>\n </div>\n\n {/ Right Column: Specification & Purchase Engine /}\n <div className=\"lg:col-span-5 space-y-6\">\n <div>\n <div className=\"flex items-center gap-2 mb-2\">\n <span className=\"text-xs font-mono uppercase tracking-widest text-[#6366f1] font-semibold\">\n Modular System Series\n </span>\n <span className=\"text-xs font-mono opacity-40\">•</span>\n <div className=\"flex items-center text-amber-500 text-xs\">\n <Star className=\"h-3.5 w-3.5 fill-amber-500\" />\n <span className=\"text-xs font-mono ml-1 font-semibold\">4.9</span>\n <span className=\"text-xs font-mono opacity-60 ml-1\">(48 verified reviews)</span>\n </div>\n </div>\n\n <h1\n className=\"text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight mb-2\"\n \n >\n The No. 04 Modular Field Parka\n </h1>\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-2xl sm:text-3xl font-mono font-bold\">$380</span>\n <span className=\"text-xs font-mono\" >\n USD • VAT Included\n </span>\n </div>\n </div>\n\n <p className=\"text-xs sm:text-sm leading-relaxed\" >\n Engineered for extreme versatility across unpredictable climates. Crafted with double-faced Japanese gabardine cotton, detachable storm hood, and interior harness for thermal heat regulation.\n </p>\n\n {/ Color Selector /}\n <div className=\"space-y-2.5 pt-2\">\n <div className=\"flex items-center justify-between text-xs sm:text-sm\">\n <span className=\"font-medium\">Selected Colorway:</span>\n <span className=\"font-mono font-semibold text-[#6366f1]\">{selectedColor}</span>\n </div>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n {colors.map((c) => (\n <button\n key={c.name}\n onClick={() => setSelectedColor(c.name as any)}\n className={\\`flex items-center gap-2 p-2.5 rounded-xl border text-left transition-all \\${\n selectedColor === c.name\n ? \"ring-2 shadow-sm font-semibold\"\n : \"opacity-75 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: \"#12141c\",\n borderColor: selectedColor === c.name ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span\n className=\"w-4 h-4 rounded-full border shrink-0\"\n style={{ backgroundColor: c.hex, borderColor: \"rgba(0,0,0,0.15)\" }}\n />\n <span className=\"text-xs truncate\">{c.name}</span>\n </button>\n ))}\n </div>\n </div>\n\n {/ Size Selector /}\n <div className=\"space-y-2.5\">\n <div className=\"flex items-center justify-between text-xs sm:text-sm\">\n <span className=\"font-medium\">Select Size (EU/US):</span>\n <button className=\"text-xs font-mono underline hover:text-[#6366f1] transition-colors\">\n Size Guide & Fit Predictor\n </button>\n </div>\n <div className=\"grid grid-cols-4 gap-2\">\n {([\"S\", \"M\", \"L\", \"XL\"] as const).map((s) => (\n <button\n key={s}\n onClick={() => setSelectedSize(s)}\n className={\\`h-11 rounded-xl text-xs sm:text-sm font-mono font-medium border transition-all flex items-center justify-center \\${\n selectedSize === s\n ? \"shadow-sm font-bold\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: selectedSize === s ? \"#181a24\" : \"#12141c\",\n borderColor: selectedSize === s ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n color: selectedSize === s ? \"#6366f1\" : \"#f4f4f7\",\n }}\n >\n {s}\n </button>\n ))}\n </div>\n <p className=\"text-xs font-mono text-emerald-600 dark:text-emerald-400\">\n ● In stock in Size {selectedSize} — 2 units remain for immediate dispatch\n </p>\n </div>\n\n {/ Add to Bag CTA /}\n <div className=\"space-y-3.5 pt-2\">\n <button\n onClick={handleAddToBag}\n className=\"w-full h-12 px-6 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-xl transition-all hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-2.5\"\n \n >\n <ShoppingBag className=\"h-4 w-4\" />\n <span>Add to Shopping Bag — $380 USD</span>\n </button>\n\n <div\n className=\"grid grid-cols-3 gap-2 p-3.5 rounded-xl border text-center text-xs font-mono\"\n \n >\n <div className=\"flex flex-col items-center gap-1\">\n <Truck className=\"h-4 w-4 text-[#6366f1]\" />\n <span className=\"text-[11px]\">DHL Express (2-3d)</span>\n </div>\n <div className=\"flex flex-col items-center gap-1 border-x\" >\n <RotateCcw className=\"h-4 w-4 text-[#6366f1]\" />\n <span className=\"text-[11px]\">30-Day Atelier Trial</span>\n </div>\n <div className=\"flex flex-col items-center gap-1\">\n <ShieldCheck className=\"h-4 w-4 text-[#6366f1]\" />\n <span className=\"text-[11px]\">Lifetime Repair</span>\n </div>\n </div>\n </div>\n\n {/ Structured Technical Specifications /}\n <div\n className=\"border-t divide-y text-xs sm:text-sm\"\n \n >\n {[\n {\n id: \"materials\",\n title: \"Materials & Kyoto Provenance\",\n content:\n \"Crafted from 100% recycled organic Japanese gabardine cotton (320gsm) infused with an invisible micro-porous membrane. Horn buttons sustainably sourced from traditional Bavarian workshops.\",\n },\n {\n id: \"fit\",\n title: \"Architectural Cut & Proportions\",\n content:\n \"Designed with a relaxed contemporary drop-shoulder cut allowing effortless layering over heavy knitwear. Model is 186cm wearing size M.\",\n },\n {\n id: \"sustainability\",\n title: \"Circularity & Repair Guarantee\",\n content:\n \"Every Atelier No. 04 garment includes our free lifetime restitching and hardware replacement guarantee at our studios in Kyoto and Zurich.\",\n },\n ].map((item) => (\n <div key={item.id} className=\"py-3.5\">\n <button\n onClick={() => setOpenAccordion(openAccordion === item.id ? null : item.id)}\n className=\"w-full flex items-center justify-between font-medium text-left hover:text-[#6366f1] transition-colors text-xs sm:text-sm\"\n >\n <span>{item.title}</span>\n <span className=\"font-mono text-sm\">{openAccordion === item.id ? \"−\" : \"+\"}</span>\n </button>\n <AnimatePresence>\n {openAccordion === item.id && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n exit={{ opacity: 0, height: 0 }}\n className=\"pt-2 text-xs sm:text-sm leading-relaxed\"\n \n >\n {item.content}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n ))}\n </div>\n </div>\n </div>\n </main>\n\n {/ Slide-over Shopping Bag Drawer /}\n <AnimatePresence>\n {isBagOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex justify-end\"\n onClick={() => setIsBagOpen(false)}\n >\n <motion.div\n initial={{ x: \"100%\" }}\n animate={{ x: 0 }}\n exit={{ x: \"100%\" }}\n transition={{ type: \"spring\", damping: 26, stiffness: 220 }}\n onClick={(e) => e.stopPropagation()}\n className=\"w-full sm:max-w-md h-full border-l p-6 flex flex-col justify-between shadow-2xl\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div>\n <div\n className=\"flex items-center justify-between pb-4 border-b\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <ShoppingBag className=\"h-5 w-5 text-[#6366f1]\" />\n <span className=\"font-bold text-sm sm:text-base tracking-tight uppercase\">\n Shopping Bag ({bagItems.reduce((acc, i) => acc + i.qty, 0)})\n </span>\n </div>\n <button\n onClick={() => setIsBagOpen(false)}\n className=\"p-2 rounded-lg border transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n \n aria-label=\"Close bag\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"py-4 space-y-4 max-h-[50vh] overflow-y-auto\">\n {bagItems.map((item) => (\n <div\n key={item.id}\n className=\"p-4 rounded-xl border flex items-start justify-between gap-3\"\n \n >\n <div className=\"space-y-1\">\n <p className=\"font-semibold text-xs sm:text-sm leading-tight\">{item.name}</p>\n <p className=\"text-xs font-mono\" >\n {item.color} • Size {item.size}\n </p>\n <p className=\"font-mono text-sm font-bold text-[#6366f1]\">\n \\${item.price item.qty} USD\n </p>\n </div>\n\n <div\n className=\"flex items-center gap-2 border rounded-lg p-1 text-xs\"\n \n >\n <button\n onClick={() => {\n if (item.qty > 1) {\n setBagItems((prev) =>\n prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty - 1 } : i))\n );\n } else {\n setBagItems((prev) => prev.filter((i) => i.id !== item.id));\n }\n }}\n className=\"p-1 hover:bg-black/10 dark:hover:bg-white/10 rounded\"\n aria-label=\"Decrease quantity\"\n >\n <Minus className=\"h-3.5 w-3.5\" />\n </button>\n <span className=\"font-mono px-1 font-semibold\">{item.qty}</span>\n <button\n onClick={() => {\n setBagItems((prev) =>\n prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty + 1 } : i))\n );\n }}\n className=\"p-1 hover:bg-black/10 dark:hover:bg-white/10 rounded\"\n aria-label=\"Increase quantity\"\n >\n <Plus className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n </div>\n ))}\n {bagItems.length === 0 && (\n <div className=\"py-12 text-center text-xs sm:text-sm font-mono\" >\n Your shopping bag is currently empty.\n </div>\n )}\n </div>\n </div>\n\n {/* Checkout Summary Footer /}\n <div\n className=\"pt-4 border-t space-y-3\"\n \n >\n <div className=\"space-y-1.5 text-xs sm:text-sm font-mono\">\n <div className=\"flex justify-between\" >\n <span>Shipping (Climate-Neutral)</span>\n <span className=\"text-emerald-600 dark:text-emerald-400 font-semibold\">Complimentary</span>\n </div>\n <div className=\"flex justify-between font-bold text-base\">\n <span>Total</span>\n <span className=\"text-[#6366f1]\">\\${bagSubtotal} USD</span>\n </div>\n </div>\n\n <button\n disabled={bagItems.length === 0}\n onClick={() => alert(\\`Initiating secure encrypted checkout for $\\${bagSubtotal} USD...\\`)}\n className=\"w-full h-12 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-xl hover:scale-[1.01] active:scale-[0.99] transition-all flex items-center justify-center gap-2 disabled:opacity-50\"\n \n >\n <span>Proceed to Encrypted Checkout</span>\n <ArrowRight className=\"h-4 w-4\" />\n </button>\n </div>\n </motion.div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Atelier Footer /}\n <footer\n className=\"py-10 px-4 sm:px-6 lg:px-8 border-t text-xs sm:text-sm transition-colors\"\n \n >\n <div className=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p>© {new Date().getFullYear()} {brandName \|\| \"Atelier Objects\"}. Sustainable luxury garment architecture.</p>\n <div className=\"flex items-center gap-5 text-xs font-mono\">\n <a href=\"#circularity\" className=\"hover:underline\">Circularity Report</a>\n <a href=\"#privacy\" className=\"hover:underline\">Privacy Policy</a>\n <a href=\"#terms\" className=\"hover:underline\">Terms of Service</a>\n </div>\n </div>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateAgencyCreative = {\n name: \"template-agency-creative\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-agency-creative.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n ArrowUpRight,\n ArrowRight,\n Sparkles,\n Layers,\n Code2,\n Cpu,\n Clock,\n Send,\n CheckCircle2,\n ChevronDown,\n X,\n Menu,\n Sliders,\n Calendar,\n ShieldCheck,\n Check,\n ExternalLink,\n} from \"lucide-react\";\n\nexport interface AgencyCreativeTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AgencyCreativeTemplate({\n brandName = \"Vanguard Digital\",\n theme = \"dark\",\n}: AgencyCreativeTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [activeService, setActiveService] = useState<number>(0);\n const [budgetSlider, setBudgetSlider] = useState(45); // $45k\n const [isProposalModalOpen, setIsProposalModalOpen] = useState(false);\n const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n const [proposalSubmitted, setProposalSubmitted] = useState(false);\n\n const services = [\n {\n num: \"01\",\n title: \"Real-Time 3D & WebGL Systems\",\n desc: \"Custom GLSL fragment shaders, physics simulation, and 60FPS fluid canvas architectures built for enterprise hardware scales.\",\n deliverables: [\"Custom Shaders\", \"Asset Compression Pipeline\", \"Sub-200ms TTFB\", \"Spatial Interaction\"],\n leadTime: \"3-4 Weeks\",\n focus: \"Hardware Accelerated\",\n },\n {\n num: \"02\",\n title: \"Design Systems & Token Architecture\",\n desc: \"Multi-brand token architectures, accessible primitive engines, and automated NPM distribution pipelines for Fortune 500 engineering teams.\",\n deliverables: [\"WCAG AAA Compliant\", \"Figma Token Sync\", \"Automated Playwright Tests\", \"Zero-Runtime CSS\"],\n leadTime: \"4-6 Weeks\",\n focus: \"Design Ops & Code\",\n },\n {\n num: \"03\",\n title: \"Autonomous Agentic Interfaces\",\n desc: \"Generative UI workflows, streaming multimodal canvas surfaces, and natural language command systems engineered for high-trust workflows.\",\n deliverables: [\"Zero-Latency Streaming\", \"Edge Quantization\", \"State Machine Sync\", \"Sandboxed Evaluation\"],\n leadTime: \"6-8 Weeks\",\n focus: \"AI Reasoning UX\",\n },\n ];\n\n const recentPartners = [\n { name: \"Vercel Ecosystem\", category: \"Framework Infrastructure\" },\n { name: \"Monolith Robotics\", category: \"Autonomous Systems\" },\n { name: \"Kinetix Bio\", category: \"Computational Genomics\" },\n { name: \"Hyperion Capital\", category: \"Quantitative Treasury\" },\n ];\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors text-left font-sans\"\n \n >\n {/ Top Global Ticker /}\n <div\n className=\"w-full py-2.5 px-4 sm:px-6 text-xs font-mono border-b flex items-center justify-between transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(255,255,255,0.02)\" : \"rgba(0,0,0,0.02)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#9aa0aa\",\n }}\n >\n <div className=\"flex items-center gap-3 sm:gap-6\">\n <span className=\"flex items-center gap-2\">\n <span className=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span>NYC 09:42 EST</span>\n </span>\n <span className=\"hidden sm:inline\">LDN 14:42 GMT</span>\n <span className=\"hidden md:inline\">TYO 23:42 JST</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <span className=\"inline-block px-2.5 py-1 rounded border text-xs font-semibold\" >\n Q3 Bandwidth: 2 Sprints Open\n </span>\n </div>\n </div>\n\n {/ Studio Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n className=\"p-2 md:hidden rounded-lg border transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n \n aria-label=\"Toggle navigation menu\"\n >\n {isMobileMenuOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n <div className=\"flex items-center gap-2.5\">\n <Sparkles className=\"h-4 w-4\" />\n <span\n className=\"font-extrabold text-sm sm:text-base tracking-tight uppercase\"\n \n >\n {brandName \|\| \"Vanguard Digital\"}\n </span>\n </div>\n </div>\n\n <nav className=\"hidden md:flex items-center gap-8 text-xs font-medium uppercase tracking-wider\" >\n <a href=\"#capabilities\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Capabilities\n </a>\n <a href=\"#partners\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Selected Work\n </a>\n <a href=\"#estimator\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Investment Model\n </a>\n <a href=\"#studio\" className=\"hover:text-[#f4f4f7] transition-colors\">\n Studio Dossier\n </a>\n </nav>\n\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => setIsProposalModalOpen(true)}\n className=\"text-xs sm:text-sm font-semibold px-4 py-2 rounded-xl text-white shadow-md transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center gap-2 shrink-0\"\n \n >\n <span>Initiate Sprint</span>\n <ArrowUpRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n\n {/ Mobile Navigation Drawer /}\n <AnimatePresence>\n {isMobileMenuOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"md:hidden border-b overflow-hidden\"\n \n >\n <div className=\"px-4 py-4 space-y-3 text-xs uppercase font-medium\">\n <a\n href=\"#capabilities\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Studio Capabilities\n </a>\n <a\n href=\"#partners\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Selected Client Partners\n </a>\n <a\n href=\"#estimator\"\n onClick={() => setIsMobileMenuOpen(false)}\n className=\"block py-2.5 border-b\"\n \n >\n Scope & Investment Calculator\n </a>\n <button\n onClick={() => {\n setIsMobileMenuOpen(false);\n setIsProposalModalOpen(true);\n }}\n className=\"w-full text-left py-2.5 text-[#6366f1] font-bold flex items-center justify-between\"\n >\n <span>Request Studio Pitch</span>\n <ArrowRight className=\"h-4 w-4\" />\n </button>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n </header>\n\n {/ Hero Section /}\n <section className=\"pt-12 sm:pt-20 lg:pt-28 pb-14 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto\">\n <div className=\"max-w-4xl\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono uppercase tracking-wider mb-6\" >\n <span className=\"w-2 h-2 rounded-full bg-[#6366f1]\" />\n <span>Digital Product Engineering Studio • Global</span>\n </div>\n\n <h1\n className=\"text-2xl @xs:text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight uppercase leading-[1.08] mb-6\"\n \n >\n We engineer singular digital products that define categorical market leadership.\n </h1>\n\n <p className=\"text-sm sm:text-base lg:text-lg leading-relaxed max-w-2xl mb-8\" >\n Operating at the intersection of high-fidelity interface design, real-time graphics engineering, and autonomous agent orchestration for world-defining technology institutions.\n </p>\n </div>\n\n {/ Studio Impact Metric Ledger /}\n <div\n className=\"grid grid-cols-1 @xs:grid-cols-2 md:grid-cols-4 gap-4 p-6 rounded-2xl border shadow-sm mt-8\"\n \n >\n <div className=\"space-y-1\">\n <p className=\"font-mono text-2xl sm:text-3xl font-bold tracking-tight text-[#6366f1]\">$1.8B+</p>\n <p className=\"text-xs uppercase font-semibold\" >Valuation Created</p>\n <p className=\"text-xs font-mono\" >Across 18 enterprise exits</p>\n </div>\n <div className=\"space-y-1 @xs:border-l @xs:pl-4\" >\n <p className=\"font-mono text-2xl sm:text-3xl font-bold tracking-tight\">42</p>\n <p className=\"text-xs uppercase font-semibold\" >Design Systems</p>\n <p className=\"text-xs font-mono\" >Enterprise token pipelines</p>\n </div>\n <div className=\"space-y-1 md:border-l md:pl-4\" >\n <p className=\"font-mono text-2xl sm:text-3xl font-bold tracking-tight\">99.8%</p>\n <p className=\"text-xs uppercase font-semibold\" >Sprint Velocity SLA</p>\n <p className=\"text-xs font-mono\" >Weekly zero-defect releases</p>\n </div>\n <div className=\"space-y-1 @xs:border-l @xs:pl-4\" >\n <p className=\"font-mono text-2xl sm:text-3xl font-bold tracking-tight\">14x</p>\n <p className=\"text-xs uppercase font-semibold\" >Industry Honors</p>\n <p className=\"text-xs font-mono\" >Awwwards SOTD & Red Dot Best</p>\n </div>\n </div>\n </section>\n\n {/ Selected Client Partners Strip /}\n <section id=\"partners\" className=\"py-12 border-y transition-colors\" >\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6\">\n <span className=\"text-xs font-mono uppercase tracking-widest font-semibold\" >\n Selected Collaborative Engagements\n </span>\n <span className=\"text-xs font-mono\" >\n Deployments 2024–2026\n </span>\n </div>\n\n <div className=\"grid grid-cols-1 @xs:grid-cols-2 lg:grid-cols-4 gap-4\">\n {recentPartners.map((p, idx) => (\n <div\n key={idx}\n className=\"p-5 rounded-xl border flex flex-col justify-between transition-all hover:scale-[1.01]\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"font-bold text-sm sm:text-base tracking-tight\">{p.name}</span>\n <ArrowUpRight className=\"h-4 w-4 opacity-50\" />\n </div>\n <span className=\"text-xs font-mono\" >\n {p.category}\n </span>\n </div>\n ))}\n </div>\n </div>\n </section>\n\n {/ Interactive Capabilities Section /}\n <section id=\"capabilities\" className=\"py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto\">\n <div className=\"flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-4\">\n <div>\n <p className=\"text-xs font-mono uppercase tracking-widest mb-2 text-[#6366f1] font-semibold\">\n Studio Core Practices\n </p>\n <h2\n className=\"text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight\"\n \n >\n Architectural Capabilities\n </h2>\n </div>\n <p className=\"text-xs sm:text-sm font-mono max-w-xs\" >\n Select any capability domain to inspect engineering deliverables and typical turnaround cycles.\n </p>\n </div>\n\n <div className=\"space-y-4\">\n {services.map((svc, idx) => (\n <div\n key={idx}\n onClick={() => setActiveService(idx)}\n className={\\`p-6 sm:p-8 rounded-2xl border cursor-pointer transition-all shadow-sm \\${\n activeService === idx\n ? \"ring-2 shadow-md\"\n : \"hover:scale-[1.005] opacity-80 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: activeService === idx ? \"#181a24\" : \"#12141c\",\n borderColor: activeService === idx ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"flex flex-col sm:flex-row sm:items-start justify-between gap-4\">\n <div className=\"flex items-start gap-4\">\n <span className=\"font-mono text-sm sm:text-base font-bold text-[#6366f1]\">\n {svc.num}\n </span>\n <div className=\"space-y-2\">\n <div className=\"flex items-center gap-3\">\n <h3\n className=\"text-lg sm:text-xl font-bold tracking-tight\"\n \n >\n {svc.title}\n </h3>\n <span className=\"hidden sm:inline-block px-2.5 py-0.5 rounded text-xs font-mono border\" >\n {svc.focus}\n </span>\n </div>\n <p className=\"text-xs sm:text-sm leading-relaxed max-w-2xl\" >\n {svc.desc}\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between sm:justify-end gap-3 text-xs font-mono shrink-0\">\n <span className=\"text-xs\" >Lead: {svc.leadTime}</span>\n <div className=\"p-1.5 rounded-lg border\" >\n <ArrowUpRight\n className={\\`h-4 w-4 transition-transform duration-300 \\${\n activeService === idx ? \"rotate-45 text-[#6366f1]\" : \"\"\n }\\`}\n />\n </div>\n </div>\n </div>\n\n {activeService === idx && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n transition={{ duration: 0.25 }}\n className=\"mt-6 pt-5 border-t space-y-4\"\n \n >\n <p className=\"text-xs font-mono font-semibold uppercase tracking-wider\" >\n Guaranteed Architectural Deliverables:\n </p>\n <div className=\"flex flex-wrap gap-2 text-xs font-mono\">\n {svc.deliverables.map((del, dIdx) => (\n <span\n key={dIdx}\n className=\"px-3 py-1.5 rounded-lg border flex items-center gap-2 shadow-sm\"\n \n >\n <Check className=\"h-3.5 w-3.5 text-emerald-500\" />\n <span>{del}</span>\n </span>\n ))}\n </div>\n </motion.div>\n )}\n </div>\n ))}\n </div>\n </section>\n\n {/ Interactive Scope & Investment Estimator /}\n <section id=\"estimator\" className=\"py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto\">\n <div\n className=\"p-6 sm:p-10 rounded-2xl border shadow-xl transition-all\"\n \n >\n <div className=\"max-w-2xl mb-8\">\n <div className=\"flex items-center gap-2 text-xs font-mono uppercase tracking-widest text-[#6366f1] font-semibold mb-2\">\n <Sliders className=\"h-4 w-4\" />\n <span>Dedicated Sprint Calibration</span>\n </div>\n <h2\n className=\"text-2xl sm:text-3xl font-bold tracking-tight mb-2\"\n \n >\n Interactive Scope & Investment Estimator\n </h2>\n <p className=\"text-xs sm:text-sm leading-relaxed\" >\n Select your capital commitment to calibrate allocated engineering staff, weekly sprint volume, and time-to-production cadence.\n </p>\n </div>\n\n <div className=\"space-y-6\">\n <div className=\"p-5 rounded-xl border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3\" >\n <div>\n <span className=\"text-xs font-mono uppercase font-semibold\" >\n Target Sprint Allocation\n </span>\n <p className=\"text-xs\" >Fixed weekly retainers with zero scope-creep</p>\n </div>\n <span className=\"font-mono text-3xl font-bold text-[#6366f1]\">\n \\${budgetSlider},000 <span className=\"text-xs font-normal opacity-60\">USD</span>\n </span>\n </div>\n\n <div className=\"space-y-2\">\n <input\n type=\"range\"\n min={20}\n max={120}\n step={5}\n value={budgetSlider}\n onChange={(e) => setBudgetSlider(Number(e.target.value))}\n className=\"w-full cursor-pointer h-2.5 rounded-lg appearance-none bg-zinc-200 dark:bg-zinc-800 accent-[#6366f1]\"\n style={{ accentColor: \"#6366f1\" }}\n />\n <div className=\"flex justify-between text-xs font-mono\" >\n <span>$20k (Focused Sprint)</span>\n <span>$60k (Standard Multi-Team)</span>\n <span>$120k (Full Platform Build)</span>\n </div>\n </div>\n\n <div\n className=\"grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t text-xs font-mono\"\n \n >\n <div className=\"p-4 rounded-xl border\" >\n <p className=\"text-xs uppercase font-semibold mb-1\" >\n ESTIMATED RUNTIME\n </p>\n <p className=\"font-bold text-sm\">\n {Math.round(budgetSlider / 10)} to {Math.round(budgetSlider / 7)} Weeks\n </p>\n </div>\n <div className=\"p-4 rounded-xl border\" >\n <p className=\"text-xs uppercase font-semibold mb-1\" >\n ENGINEERING SQUAD\n </p>\n <p className=\"font-bold text-sm\">\n {budgetSlider > 60\n ? \"Principal Lead + 3 Senior Eng + 1 3D\"\n : \"Lead Designer + 2 Full-Stack Eng\"}\n </p>\n </div>\n <div className=\"p-4 rounded-xl border\" >\n <p className=\"text-xs uppercase font-semibold mb-1\" >\n DELIVERY CADENCE\n </p>\n <p className=\"font-bold text-sm text-emerald-600 dark:text-emerald-400\">\n Continuous Weekly Releases\n </p>\n </div>\n </div>\n\n <div className=\"pt-2 flex flex-col sm:flex-row items-center gap-3\">\n <button\n onClick={() => setIsProposalModalOpen(true)}\n className=\"w-full sm:w-auto px-6 py-3 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2\"\n \n >\n <span>Request Scope Pitch for \\${budgetSlider}k</span>\n <ArrowRight className=\"h-4 w-4\" />\n </button>\n <span className=\"text-xs font-mono\" >\n Guaranteed NDA on first contact • Response within 6 business hours\n </span>\n </div>\n </div>\n </div>\n </section>\n\n {/ RFP / Proposal Modal /}\n <AnimatePresence>\n {isProposalModalOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4\"\n onClick={() => setIsProposalModalOpen(false)}\n >\n <motion.div\n initial={{ scale: 0.95, opacity: 0 }}\n animate={{ scale: 1, opacity: 1 }}\n exit={{ scale: 0.95, opacity: 0 }}\n onClick={(e) => e.stopPropagation()}\n className=\"w-full max-w-lg rounded-2xl border p-6 sm:p-8 shadow-2xl relative\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <button\n onClick={() => setIsProposalModalOpen(false)}\n className=\"absolute top-4 right-4 p-2 rounded-lg border hover:bg-black/5 dark:hover:bg-white/5\"\n \n aria-label=\"Close modal\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n\n {proposalSubmitted ? (\n <div className=\"py-8 text-center space-y-3\">\n <div className=\"w-12 h-12 rounded-full bg-emerald-500/10 text-emerald-500 flex items-center justify-center mx-auto\">\n <CheckCircle2 className=\"h-6 w-6\" />\n </div>\n <h3 className=\"text-xl font-bold\">Scope Brief Received</h3>\n <p className=\"text-xs sm:text-sm max-w-sm mx-auto\" >\n Our partner engineering leads have queued your brief. We will dispatch the mutual NDA and scheduling link within 6 business hours.\n </p>\n <button\n onClick={() => {\n setProposalSubmitted(false);\n setIsProposalModalOpen(false);\n }}\n className=\"mt-4 px-6 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-white\"\n \n >\n Return to Studio\n </button>\n </div>\n ) : (\n <div className=\"space-y-4 text-left\">\n <div>\n <span className=\"text-xs font-mono text-[#6366f1] font-semibold uppercase\">\n Sprint RFP\n </span>\n <h3 className=\"text-xl font-bold tracking-tight\">Initiate Engineering Scope</h3>\n <p className=\"text-xs\" >\n Target allocation: \\${budgetSlider},000 USD\n </p>\n </div>\n\n <div className=\"space-y-3\">\n <div>\n <label className=\"block text-xs font-mono mb-1 font-medium\">Work Email</label>\n <input\n type=\"email\"\n placeholder=\"vp.eng@institution.com\"\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-sm bg-transparent outline-none focus:ring-2\"\n \n />\n </div>\n <div>\n <label className=\"block text-xs font-mono mb-1 font-medium\">Primary Focus</label>\n <select\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-sm bg-transparent outline-none\"\n \n >\n <option value=\"shaders\">Real-Time 3D & WebGL</option>\n <option value=\"tokens\">Design Systems & Token Architecture</option>\n <option value=\"agents\">Autonomous Agentic Interfaces</option>\n <option value=\"full\">Comprehensive Full-Stack Redesign</option>\n </select>\n </div>\n <div>\n <label className=\"block text-xs font-mono mb-1 font-medium\">Brief Description / Requirements</label>\n <textarea\n rows={3}\n placeholder=\"Brief summary of target outcomes, architectural constraints, and desired launch date...\"\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-sm bg-transparent outline-none resize-none\"\n \n />\n </div>\n </div>\n\n <button\n onClick={() => setProposalSubmitted(true)}\n className=\"w-full py-3 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-xl hover:scale-[1.01] active:scale-[0.99] transition-all flex items-center justify-center gap-2\"\n \n >\n <span>Submit RFP Under Mutual NDA</span>\n <Send className=\"h-4 w-4\" />\n </button>\n </div>\n )}\n </motion.div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Studio Footer /}\n <footer\n className=\"py-12 px-4 sm:px-6 lg:px-8 border-t text-xs transition-colors\"\n \n >\n <div className=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 font-mono text-xs\">\n <p>© {new Date().getFullYear()} {brandName \|\| \"Vanguard Digital\"}. High-velocity product engineering.</p>\n <div className=\"flex items-center gap-6\">\n <a href=\"#github\" className=\"hover:underline\">GitHub</a>\n <a href=\"#npm\" className=\"hover:underline\">NPM Packages</a>\n <a href=\"#careers\" className=\"hover:underline\">Careers (2)</a>\n <a href=\"#security\" className=\"hover:underline\">SOC2 Type II</a>\n </div>\n </div>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateAiChat = {\n name: \"template-ai-chat\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-ai-chat.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sparkles,\n Send,\n Plus,\n MessageSquare,\n Copy,\n Check,\n ChevronDown,\n Cpu,\n Terminal,\n Paperclip,\n Globe,\n CornerDownLeft,\n ChevronRight,\n Menu,\n X,\n BrainCircuit,\n} from \"lucide-react\";\n\nexport interface AiChatTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AiChatTemplate({\n brandName = \"Cortex Assistant\",\n theme = \"dark\",\n}: AiChatTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [activeModel, setActiveModel] = useState<\"Cortex Reasoning R1\" \| \"Cortex Fast 4o\" \| \"Vision Pro\">(\"Cortex Reasoning R1\");\n const [inputText, setInputText] = useState(\"\");\n const [isThinkingOpen, setIsThinkingOpen] = useState(true);\n const [copiedCode, setCopiedCode] = useState(false);\n const [sidebarOpen, setSidebarOpen] = useState(false);\n\n const [messages, setMessages] = useState([\n {\n role: \"user\",\n content: \"Write an edge-safe cache key generator in TypeScript with SHA-256 cryptographic fingerprinting.\",\n },\n {\n role: \"assistant\",\n thought: \"Using the Web Crypto API crypto.subtle.digest to guarantee edge runtime compatibility without Node.js crypto dependencies.\",\n content: \\`export async function createEdgeCacheKey(\n pathname: string,\n params: Record<string, string>\n): Promise<string> {\n const normalizedParams = Object.keys(params)\n .sort()\n .map((k) => \\\\\\`\\\\\\${k}=\\\\\\${encodeURIComponent(params[k])}\\\\\\`)\n .join(\"&\");\n const rawKey = \\\\\\`\\\\\\${pathname}?\\\\\\${normalizedParams}\\\\\\`;\n \n const msgBuffer = new TextEncoder().encode(rawKey);\n const hashBuffer = await crypto.subtle.digest(\"SHA-256\", msgBuffer);\n const hashArray = Array.from(new Uint8Array(hashBuffer));\n return hashArray.map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\\`,\n },\n ]);\n\n const handleCopyCode = (code: string) => {\n navigator.clipboard.writeText(code);\n setCopiedCode(true);\n setTimeout(() => setCopiedCode(false), 2000);\n };\n\n const handleSendMessage = (e: React.FormEvent) => {\n e.preventDefault();\n if (!inputText.trim()) return;\n const userMsg = inputText.trim();\n setMessages((prev) => [\n ...prev,\n { role: \"user\", content: userMsg },\n {\n role: \"assistant\",\n thought: \"Analyzing request against edge vector index and generating structured response...\",\n content: \\`Acknowledged: \"\\${userMsg}\". Edge telemetry active. Generated response stream in 1.4ms.\\`,\n },\n ]);\n setInputText(\"\");\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors flex flex-col md:flex-row font-sans\"\n \n >\n {/ Mobile Top Navigation Header /}\n <header\n className=\"md:hidden flex items-center justify-between px-4 py-3 border-b shrink-0\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <button\n onClick={() => setSidebarOpen(!sidebarOpen)}\n className=\"p-2 rounded-lg border text-xs\"\n \n aria-label=\"Toggle threads drawer\"\n >\n {sidebarOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n <div\n className=\"h-7 w-7 rounded-lg flex items-center justify-center text-white shrink-0\"\n \n >\n <Sparkles className=\"h-4 w-4\" />\n </div>\n <span className=\"font-bold text-sm\" >\n {brandName \|\| \"Cortex AI\"}\n </span>\n </div>\n\n <button\n onClick={() => {\n setMessages([]);\n setInputText(\"\");\n }}\n className=\"p-2 rounded-lg border text-xs flex items-center gap-1.5\"\n \n >\n <Plus className=\"h-3.5 w-3.5\" />\n <span>New Chat</span>\n </button>\n </header>\n\n {/ Mobile Sidebar Dropdown /}\n <AnimatePresence>\n {sidebarOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"md:hidden border-b p-4 space-y-3 text-sm overflow-hidden\"\n \n >\n <p className=\"text-xs font-mono uppercase tracking-wider opacity-60\">Recent Threads</p>\n <div className=\"space-y-1.5\">\n <button\n onClick={() => setSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg font-medium text-white text-left truncate\"\n \n >\n <MessageSquare className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">Edge Cache Key Generator</span>\n </button>\n <button\n onClick={() => setSidebarOpen(false)}\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-80 hover:opacity-100 text-left truncate\"\n >\n <MessageSquare className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">Postgres Vector Indexing</span>\n </button>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Desktop Sessions Sidebar /}\n <aside\n className=\"hidden md:flex w-64 border-r p-5 shrink-0 flex-col justify-between transition-colors text-sm\"\n \n >\n <div>\n {/ Header /}\n <div\n className=\"flex items-center justify-between pb-3.5 mb-4 border-b\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Sparkles className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm tracking-tight truncate\"\n \n >\n {brandName \|\| \"Cortex AI\"}\n </span>\n </div>\n\n <button\n onClick={() => {\n setMessages([]);\n setInputText(\"\");\n }}\n title=\"New Chat\"\n className=\"p-2 rounded-lg border hover:opacity-80 transition-opacity\"\n \n >\n <Plus className=\"h-4 w-4\" />\n </button>\n </div>\n\n {/ Session History /}\n <div className=\"space-y-3\">\n <p className=\"text-xs font-mono uppercase tracking-wider opacity-60\">Recent Threads</p>\n <div className=\"space-y-1.5\">\n <button\n className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg font-medium text-white text-left truncate shadow-sm\"\n \n >\n <MessageSquare className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">Edge Cache Key Generator</span>\n </button>\n <button className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-75 hover:opacity-100 text-left truncate transition-opacity\">\n <MessageSquare className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">Postgres Vector Indexing</span>\n </button>\n <button className=\"w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg opacity-75 hover:opacity-100 text-left truncate transition-opacity\">\n <MessageSquare className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">Rust WebSocket Gateway</span>\n </button>\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 border-t text-xs font-mono opacity-70\" >\n <span>1,420 / 10,000 Monthly Credits</span>\n </div>\n </aside>\n\n {/ Main Chat Workspace /}\n <main className=\"flex-1 flex flex-col justify-between min-h-[600px] overflow-hidden min-w-0\">\n {/ Model Bar /}\n <div\n className=\"px-4 sm:px-6 py-3 border-b flex items-center justify-between text-xs sm:text-sm transition-colors shrink-0\"\n \n >\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs opacity-60 uppercase font-mono\">Model:</span>\n <span className=\"font-semibold\" >\n {activeModel}\n </span>\n </div>\n\n <span className=\"text-xs font-mono text-emerald-500 font-medium\">● Connected</span>\n </div>\n\n {/ Message Thread /}\n <div className=\"flex-1 p-4 sm:p-6 overflow-y-auto space-y-4\">\n {messages.map((msg, idx) => (\n <div\n key={idx}\n className={\\`flex flex-col \\${msg.role === \"user\" ? \"items-end\" : \"items-start\"}\\`}\n >\n {msg.role === \"user\" ? (\n <div\n className=\"max-w-xl p-4 rounded-2xl text-xs sm:text-sm font-medium text-white shadow-sm\"\n \n >\n {msg.content}\n </div>\n ) : (\n <div\n className=\"w-full max-w-3xl p-4 sm:p-6 rounded-2xl border text-xs sm:text-sm space-y-3.5 transition-all\"\n \n >\n {/ Thought process indicator /}\n {msg.thought && (\n <div\n className=\"p-3.5 rounded-xl border text-xs sm:text-sm leading-relaxed transition-all\"\n style={{\n backgroundColor: \"#161822\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#9aa0aa\",\n borderRadius: \"0.75rem\",\n }}\n >\n <button\n onClick={() => setIsThinkingOpen(!isThinkingOpen)}\n className=\"w-full flex items-center justify-between font-medium mb-1\"\n >\n <span className=\"flex items-center gap-2\">\n <BrainCircuit className=\"h-4 w-4\" />\n <span >Reasoning Trace</span>\n </span>\n <ChevronDown className={\\`h-4 w-4 transition-transform \\${isThinkingOpen ? \"rotate-180\" : \"\"}\\`} />\n </button>\n\n {isThinkingOpen && (\n <p className=\"pt-1.5 opacity-90\">{msg.thought}</p>\n )}\n </div>\n )}\n\n {/ Code snippet block /}\n <div\n className=\"rounded-xl border font-mono text-xs sm:text-sm overflow-hidden\"\n style={{\n backgroundColor: isDark ? \"#08090d\" : \"#11131a\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#fafafa\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"flex items-center justify-between px-4 py-2 bg-black/30 border-b border-white/10 text-xs\">\n <span className=\"text-zinc-400\">TypeScript (Edge Runtime)</span>\n <button\n onClick={() => handleCopyCode(msg.content)}\n className=\"flex items-center gap-1.5 text-zinc-400 hover:text-white transition-colors\"\n >\n {copiedCode ? <Check className=\"h-3.5 w-3.5 text-emerald-400\" /> : <Copy className=\"h-3.5 w-3.5\" />}\n <span>{copiedCode ? \"Copied\" : \"Copy\"}</span>\n </button>\n </div>\n <pre className=\"p-4 overflow-x-auto text-zinc-200 text-xs sm:text-sm leading-relaxed\">\n <code>{msg.content}</code>\n </pre>\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n\n {/ Input Bar /}\n <div\n className=\"p-3 sm:p-5 border-t transition-colors shrink-0\"\n \n >\n <form\n onSubmit={handleSendMessage}\n className=\"flex items-center gap-2.5 p-2 rounded-xl border transition-all focus-within:ring-1\"\n \n >\n <button\n type=\"button\"\n className=\"p-2 rounded-lg opacity-60 hover:opacity-100 transition-opacity shrink-0\"\n aria-label=\"Attach File\"\n >\n <Paperclip className=\"h-4 w-4\" />\n </button>\n <input\n type=\"text\"\n value={inputText}\n onChange={(e) => setInputText(e.target.value)}\n placeholder=\"Ask a technical or architectural question...\"\n className=\"flex-1 bg-transparent text-xs sm:text-sm focus:outline-none min-w-0\"\n \n />\n <button\n type=\"submit\"\n disabled={!inputText.trim()}\n className=\"p-2.5 rounded-lg text-white transition-all disabled:opacity-40 hover:brightness-110 shrink-0\"\n style={{\n backgroundColor: \"#6366f1\",\n borderRadius: \"calc(0.75rem - 2px)\",\n }}\n aria-label=\"Send prompt\"\n >\n <Send className=\"h-4 w-4\" />\n </button>\n </form>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateProjectManagement = {\n name: \"template-project-management\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-project-management.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Kanban,\n ListFilter,\n Plus,\n Flame,\n AlertCircle,\n CheckCircle2,\n Clock,\n Layers,\n ChevronRight,\n Search,\n X,\n SlidersHorizontal,\n} from \"lucide-react\";\n\nexport interface ProjectManagementTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function ProjectManagementTemplate({\n brandName = \"Orbit Flow\",\n theme = \"dark\",\n}: ProjectManagementTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [viewMode, setViewMode] = useState<\"board\" \| \"list\">(\"board\");\n const [activeMobileCol, setActiveMobileCol] = useState(\"progress\");\n const [isCreateOpen, setIsCreateOpen] = useState(false);\n const [newTitle, setNewTitle] = useState(\"\");\n const [newPriority, setNewPriority] = useState<\"Urgent\" \| \"High\" \| \"Medium\">(\"High\");\n\n const [issues, setIssues] = useState([\n { id: \"ORB-101\", title: \"Migrate Postgres connections to PgBouncer connection pool\", col: \"progress\", priority: \"Urgent\", pts: \"5\", user: \"JD\" },\n { id: \"ORB-102\", title: \"Implement Web Crypto HMAC SHA-256 tokens\", col: \"review\", priority: \"High\", pts: \"3\", user: \"SK\" },\n { id: \"ORB-103\", title: \"Optimize CSS bundle tree-shaking with Tailwind v4\", col: \"done\", priority: \"Medium\", pts: \"2\", user: \"UR\" },\n { id: \"ORB-104\", title: \"Add multi-region edge failover circuit breaker\", col: \"backlog\", priority: \"High\", pts: \"8\", user: \"AL\" },\n { id: \"ORB-105\", title: \"Refactor global navigation sheet drawer for mobile\", col: \"done\", priority: \"Medium\", pts: \"3\", user: \"SK\" },\n ]);\n\n const handleCreateIssue = (e: React.FormEvent) => {\n e.preventDefault();\n if (!newTitle.trim()) return;\n const newId = \\`ORB-\\${100 + issues.length + 1}\\`;\n setIssues((prev) => [\n { id: newId, title: newTitle.trim(), col: \"backlog\", priority: newPriority, pts: \"3\", user: \"ME\" },\n ...prev,\n ]);\n setNewTitle(\"\");\n setIsCreateOpen(false);\n };\n\n const columns = [\n { id: \"backlog\", label: \"Backlog\", dotColor: \"#94a3b8\" },\n { id: \"progress\", label: \"In Progress\", dotColor: \"#f59e0b\" },\n { id: \"review\", label: \"In Review\", dotColor: \"#8b5cf6\" },\n { id: \"done\", label: \"Done\", dotColor: \"#10b981\" },\n ];\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm transition-all shrink-0\"\n \n >\n <Layers className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Orbit Flow\"}\n </span>\n\n {/ Sprint Velocity pill /}\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1 rounded-full border text-xs font-mono\"\n \n >\n <span>Sprint 28</span>\n <span className=\"opacity-40\">•</span>\n <span className=\"text-emerald-500 font-bold\">38/48 pts (79%)</span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n {/ View Switcher /}\n <div\n className=\"flex items-center p-1 rounded-lg border text-xs\"\n \n >\n <button\n onClick={() => setViewMode(\"board\")}\n className={\\`px-3 py-1.5 rounded font-medium transition-all \\${\n viewMode === \"board\" ? \"shadow-sm font-semibold text-white\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: viewMode === \"board\" ? \"#6366f1\" : \"transparent\",\n color: viewMode === \"board\" ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n Board\n </button>\n <button\n onClick={() => setViewMode(\"list\")}\n className={\\`px-3 py-1.5 rounded font-medium transition-all \\${\n viewMode === \"list\" ? \"shadow-sm font-semibold text-white\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: viewMode === \"list\" ? \"#6366f1\" : \"transparent\",\n color: viewMode === \"list\" ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"calc(0.75rem - 4px)\",\n }}\n >\n List\n </button>\n </div>\n\n <button\n onClick={() => setIsCreateOpen(true)}\n className=\"text-xs sm:text-sm font-semibold px-3.5 py-2 rounded-lg text-white shadow-sm transition-all hover:brightness-110 flex items-center gap-2 shrink-0\"\n \n >\n <Plus className=\"h-4 w-4\" />\n <span className=\"hidden sm:inline\">New Issue</span>\n <span className=\"sm:hidden\">New</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Kanban & Issue Content /}\n <main className=\"p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto\">\n {viewMode === \"board\" ? (\n <div>\n {/ Mobile Column Switcher (Visible on small containers < @md to prevent compressed vertical columns) /}\n <div className=\"md:hidden flex items-center gap-2 mb-4 overflow-x-auto no-scrollbar pb-1\">\n {columns.map((col) => {\n const count = issues.filter((i) => i.col === col.id).length;\n const isSelected = activeMobileCol === col.id;\n return (\n <button\n key={col.id}\n onClick={() => setActiveMobileCol(col.id)}\n className={\\`px-3.5 py-2 rounded-xl border text-xs font-medium flex items-center gap-2 shrink-0 transition-all \\${\n isSelected ? \"shadow-sm font-semibold ring-1\" : \"opacity-70\"\n }\\`}\n style={{\n backgroundColor: isSelected ? \"#181a24\" : \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <span className=\"h-2.5 w-2.5 rounded-full\" style={{ backgroundColor: col.dotColor }} />\n <span>{col.label}</span>\n <span className=\"text-xs opacity-75 font-mono\">({count})</span>\n </button>\n );\n })}\n </div>\n\n {/ Responsive Columns: 1-col on mobile, 2-col on tablet (md:), 4-col on desktop (xl:) /}\n <div className=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-5\">\n {columns.map((col) => {\n const colIssues = issues.filter((i) => i.col === col.id);\n const isHiddenOnMobile = activeMobileCol !== col.id;\n\n return (\n <div\n key={col.id}\n className={\\`rounded-2xl border p-4 flex flex-col justify-between min-h-[440px] sm:min-h-[500px] transition-all \\${\n isHiddenOnMobile ? \"hidden md:flex\" : \"flex\"\n }\\`}\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div>\n <div\n className=\"flex items-center justify-between pb-3.5 mb-3.5 border-b text-xs sm:text-sm font-mono\"\n \n >\n <div className=\"flex items-center gap-2\">\n <span className=\"h-2.5 w-2.5 rounded-full\" style={{ backgroundColor: col.dotColor }} />\n <span className=\"font-semibold\" >\n {col.label}\n </span>\n </div>\n <span\n className=\"px-2 py-0.5 rounded border text-xs font-mono font-medium\"\n \n >\n {colIssues.length}\n </span>\n </div>\n\n <div className=\"space-y-3\">\n {colIssues.map((issue) => (\n <div\n key={issue.id}\n className=\"p-3.5 rounded-xl border text-xs sm:text-sm shadow-sm transition-all cursor-pointer hover:border-zinc-400\"\n \n >\n <div className=\"flex items-center justify-between text-xs font-mono mb-2\">\n <span >{issue.id}</span>\n <span className=\"flex items-center gap-1 font-bold\">\n {issue.priority === \"Urgent\" && <Flame className=\"h-3.5 w-3.5 text-red-500\" />}\n <span style={{ color: issue.priority === \"Urgent\" ? \"#ef4444\" : \"#9aa0aa\" }}>\n {issue.priority}\n </span>\n </span>\n </div>\n\n <p\n className=\"font-medium mb-3 leading-snug text-xs sm:text-sm\"\n \n >\n {issue.title}\n </p>\n\n <div\n className=\"flex items-center justify-between pt-2.5 border-t text-xs font-mono\"\n \n >\n <span\n className=\"px-2 py-0.5 rounded border text-xs\"\n \n >\n {issue.pts} pts\n </span>\n <div\n className=\"h-6 w-6 rounded-full flex items-center justify-center font-bold text-xs text-white\"\n \n >\n {issue.user}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n\n <button\n onClick={() => setIsCreateOpen(true)}\n className=\"w-full mt-4 h-10 rounded-xl border border-dashed text-xs sm:text-sm opacity-70 hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 font-medium\"\n \n >\n <Plus className=\"h-3.5 w-3.5\" />\n <span>Add Issue</span>\n </button>\n </div>\n );\n })}\n </div>\n </div>\n ) : (\n / List View /\n <div\n className=\"rounded-2xl border divide-y text-xs sm:text-sm font-mono overflow-hidden\"\n \n >\n {issues.map((issue) => (\n <div\n key={issue.id}\n className=\"p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors\"\n \n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <span className=\"w-20 opacity-60 shrink-0 font-medium\">{issue.id}</span>\n <span className=\"font-sans font-medium truncate\" >\n {issue.title}\n </span>\n </div>\n\n <div className=\"flex items-center justify-between sm:justify-end gap-3 pt-2 sm:pt-0 shrink-0\">\n <span\n className=\"px-2.5 py-1 rounded border capitalize text-xs\"\n \n >\n {issue.col}\n </span>\n <span className=\"text-right opacity-80\" >\n {issue.pts} pts\n </span>\n <div\n className=\"h-7 w-7 rounded-full text-white flex items-center justify-center font-bold text-xs\"\n \n >\n {issue.user}\n </div>\n </div>\n </div>\n ))}\n </div>\n )}\n </main>\n\n {/ Quick Issue Creator Modal /}\n <AnimatePresence>\n {isCreateOpen && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4\"\n onClick={() => setIsCreateOpen(false)}\n >\n <motion.form\n initial={{ scale: 0.95, y: 10 }}\n animate={{ scale: 1, y: 0 }}\n exit={{ scale: 0.95, y: 10 }}\n onClick={(e) => e.stopPropagation()}\n onSubmit={handleCreateIssue}\n className=\"w-full max-w-md rounded-2xl border p-6 shadow-2xl space-y-4\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <h3 className=\"font-bold text-base\" >\n Create New Issue\n </h3>\n <button\n type=\"button\"\n onClick={() => setIsCreateOpen(false)}\n className=\"p-1 rounded hover:opacity-75 transition-opacity\"\n >\n <X className=\"h-5 w-5\" />\n </button>\n </div>\n\n <div>\n <label className=\"block text-xs font-semibold mb-1.5\" >\n Issue Title\n </label>\n <input\n type=\"text\"\n required\n autoFocus\n value={newTitle}\n onChange={(e) => setNewTitle(e.target.value)}\n placeholder=\"e.g. Implement Webhook retry backoff\"\n className=\"w-full px-3.5 py-2.5 rounded-xl border text-sm bg-transparent focus:outline-none\"\n \n />\n </div>\n\n <div>\n <label className=\"block text-xs font-semibold mb-1.5\" >\n Priority Level\n </label>\n <div className=\"grid grid-cols-3 gap-2 text-xs\">\n {([\"Urgent\", \"High\", \"Medium\"] as const).map((p) => (\n <button\n key={p}\n type=\"button\"\n onClick={() => setNewPriority(p)}\n className={\\`py-2 rounded-lg border font-medium transition-all \\${\n newPriority === p ? \"shadow-sm font-semibold\" : \"opacity-70\"\n }\\`}\n style={{\n backgroundColor: newPriority === p ? \"#6366f1\" : \"transparent\",\n borderColor: newPriority === p ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n color: newPriority === p ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n {p}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"pt-3 flex justify-end gap-3\">\n <button\n type=\"button\"\n onClick={() => setIsCreateOpen(false)}\n className=\"px-4 py-2.5 rounded-xl border text-xs sm:text-sm font-medium hover:opacity-80\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-sm transition-all hover:brightness-110\"\n \n >\n Create Issue\n </button>\n </div>\n </motion.form>\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateStartupWaitlist = {\n name: \"template-startup-waitlist\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-startup-waitlist.tsx\",\n content: `\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sparkles,\n ArrowRight,\n Shield,\n Copy,\n Check,\n Zap,\n Users,\n Clock,\n Share2,\n CheckCircle2,\n} from \"lucide-react\";\n\nexport interface StartupWaitlistTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function StartupWaitlistTemplate({\n brandName = \"Genesis Stealth\",\n theme = \"dark\",\n}: StartupWaitlistTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [email, setEmail] = useState(\"\");\n const [isSubmitted, setIsSubmitted] = useState(false);\n const [queueNumber, setQueueNumber] = useState(142);\n const [copiedLink, setCopiedLink] = useState(false);\n\n // Simulated countdown\n const [timeLeft, setTimeLeft] = useState({ days: 18, hours: 9, mins: 42, secs: 15 });\n\n useEffect(() => {\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev.secs > 0) return { ...prev, secs: prev.secs - 1 };\n if (prev.mins > 0) return { ...prev, mins: prev.mins - 1, secs: 59 };\n return prev;\n });\n }, 1000);\n return () => clearInterval(timer);\n }, []);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!email.trim()) return;\n setQueueNumber(Math.floor(Math.random() 80) + 110);\n setIsSubmitted(true);\n };\n\n const handleCopyLink = () => {\n navigator.clipboard.writeText(\\`https://genesis.stealth.dev/invite?ref=dev_\\${queueNumber}\\`);\n setCopiedLink(true);\n setTimeout(() => setCopiedLink(false), 2000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors relative flex flex-col justify-between font-sans text-center\"\n \n >\n {/* Header /}\n <header className=\"w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between shrink-0\">\n <div className=\"flex items-center gap-2.5\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm transition-all shrink-0\"\n \n >\n <Sparkles className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Genesis Stealth\"}\n </span>\n </div>\n\n <span\n className=\"text-xs font-mono px-3 py-1.5 rounded-full border transition-colors\"\n \n >\n ALLOCATION #GNX-09\n </span>\n </header>\n\n {/ Main Suspense Hero /}\n <main className=\"px-4 sm:px-6 max-w-3xl mx-auto my-auto py-10 sm:py-16 w-full\">\n <div\n className=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border text-xs font-mono mb-6 transition-colors\"\n style={{\n backgroundColor: \"#161822\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#6366f1\",\n }}\n >\n <Clock className=\"h-3.5 w-3.5\" />\n <span>Private Alpha Unlocks In:</span>\n </div>\n\n {/ Countdown Timer Block (Responsive single-row) /}\n <div className=\"flex items-center justify-center gap-2.5 sm:gap-4 mb-8 font-mono\">\n {[\n { label: \"DAYS\", val: timeLeft.days },\n { label: \"HOURS\", val: timeLeft.hours },\n { label: \"MINS\", val: timeLeft.mins },\n { label: \"SECS\", val: timeLeft.secs },\n ].map((t, idx) => (\n <div\n key={idx}\n className=\"p-3 sm:p-5 rounded-2xl border min-w-[64px] sm:min-w-[84px] transition-all\"\n \n >\n <span className=\"text-2xl sm:text-4xl font-bold tracking-tight\">\n {String(t.val).padStart(2, \"0\")}\n </span>\n <p className=\"text-xs mt-1 font-mono uppercase\" >\n {t.label}\n </p>\n </div>\n ))}\n </div>\n\n <h1\n className=\"text-2xl @xs:text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-4 leading-[1.15]\"\n \n >\n The Next Paradigm in Autonomous Compute.\n </h1>\n\n <p\n className=\"text-sm sm:text-base max-w-xl mx-auto mb-8 leading-relaxed\"\n \n >\n We are building the fundamental runtime substrate for hyper-scale autonomous agents. Request early access\n to secure your dedicated compute quota.\n </p>\n\n {/ Email Capture Form or Queue Position /}\n {!isSubmitted ? (\n <form\n onSubmit={handleSubmit}\n className=\"max-w-md mx-auto p-2 rounded-2xl border flex flex-col sm:flex-row gap-2 shadow-lg transition-all\"\n \n >\n <input\n type=\"email\"\n required\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n placeholder=\"Enter your work email...\"\n className=\"flex-1 bg-transparent px-4 py-2.5 text-xs sm:text-sm focus:outline-none\"\n \n />\n <button\n type=\"submit\"\n className=\"h-11 px-5 rounded-xl text-xs sm:text-sm font-semibold text-white shadow-sm transition-all hover:brightness-110 flex items-center justify-center gap-2 shrink-0\"\n style={{\n backgroundColor: \"#6366f1\",\n borderRadius: \"calc(0.75rem - 3px)\",\n }}\n >\n <span>Request Quota</span>\n <ArrowRight className=\"h-4 w-4\" />\n </button>\n </form>\n ) : (\n <motion.div\n initial={{ scale: 0.95, opacity: 0 }}\n animate={{ scale: 1, opacity: 1 }}\n className=\"max-w-md mx-auto p-6 rounded-2xl border space-y-4 shadow-xl transition-all\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"#6366f1\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"flex items-center justify-center gap-2 text-emerald-500 text-xs sm:text-sm font-medium\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>You are officially in the alpha queue</span>\n </div>\n\n <div>\n <p className=\"text-4xl sm:text-5xl font-bold font-mono\" >\n #{queueNumber}\n </p>\n <p className=\"text-xs sm:text-sm mt-1\" >\n Share your invite link to advance your priority\n </p>\n </div>\n\n <div\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-mono\"\n \n >\n <span className=\"truncate opacity-80 max-w-[240px]\">genesis.stealth.dev/ref={queueNumber}</span>\n <button\n type=\"button\"\n onClick={handleCopyLink}\n className=\"p-1.5 rounded hover:opacity-75 transition-opacity shrink-0\"\n aria-label=\"Copy invitation link\"\n >\n {copiedLink ? <Check className=\"h-4 w-4 text-emerald-500\" /> : <Copy className=\"h-4 w-4 opacity-70\" />}\n </button>\n </div>\n </motion.div>\n )}\n\n {/ Live Signups Ticker /}\n <div\n className=\"mt-8 flex items-center justify-center gap-2 text-xs sm:text-sm font-mono\"\n \n >\n <Users className=\"h-4 w-4\" />\n <span>4,892 verified engineers queued across 42 countries</span>\n </div>\n </main>\n\n {/ Footer /}\n <footer\n className=\"py-8 px-4 border-t text-center text-xs sm:text-sm shrink-0\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"Genesis Stealth\"}. Non-disclosure terms apply.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateDocsPlatform = {\n name: \"template-docs-platform\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-docs-platform.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Search,\n BookOpen,\n Code2,\n Copy,\n Check,\n Send,\n Terminal,\n ExternalLink,\n ChevronRight,\n Sparkles,\n AlertCircle,\n FileCode,\n Layers,\n Menu,\n X,\n Play,\n} from \"lucide-react\";\n\nexport interface DocsPlatformTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function DocsPlatformTemplate({\n brandName = \"Codex Docs\",\n theme = \"dark\",\n}: DocsPlatformTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n const [activeLang, setActiveLang] = useState<\"curl\" \| \"node\" \| \"python\" \| \"go\">(\"curl\");\n const [activeSection, setActiveSection] = useState(\"auth\");\n const [apiResponse, setApiResponse] = useState<string \| null>(null);\n const [isSending, setIsSending] = useState(false);\n const [copiedCode, setCopiedCode] = useState(false);\n const [mobileNavOpen, setMobileNavOpen] = useState(false);\n\n const codeSnippets = {\n curl: \\`curl -X POST https://api.codex.dev/v1/inference \\\\\\\\\n -H \"Authorization: Bearer sk_live_849204\" \\\\\\\\\n -H \"Content-Type: application/json\" \\\\\\\\\n -d '{\"model\": \"r1-ultra\", \"stream\": true, \"max_tokens\": 1024}'\\`,\n node: \\`import { Codex } from \"@codex/sdk\";\n\nconst client = new Codex({ apiKey: process.env.CODEX_API_KEY });\nconst stream = await client.inference.stream({\n model: \"r1-ultra\",\n maxTokens: 1024,\n});\\`,\n python: \\`from codex import CodexClient\n\nclient = CodexClient(api_key=\"sk_live_849204\")\nresponse = client.inference.stream(\n model=\"r1-ultra\",\n max_tokens=1024\n)\\`,\n go: \\`package main\n\nimport \"github.com/codex-dev/sdk-go\"\n\nfunc main() {\n client := codex.NewClient(\"sk_live_849204\")\n // stream tokens with zero heap allocs\n}\\`,\n };\n\n const handleTestApi = () => {\n setIsSending(true);\n setApiResponse(null);\n setTimeout(() => {\n setIsSending(false);\n setApiResponse(\n JSON.stringify(\n {\n status: \"success\",\n data: {\n id: \"inf_94829104\",\n model: \"r1-ultra\",\n ttft_ms: 3.8,\n tokens_streamed: 840,\n cached: true,\n },\n },\n null,\n 2\n )\n );\n }, 600);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans\"\n \n >\n {/ Global Docs Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => setMobileNavOpen(!mobileNavOpen)}\n className=\"lg:hidden p-2 rounded-lg border transition-colors\"\n \n aria-label=\"Toggle Docs Navigation\"\n >\n {mobileNavOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n </button>\n\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm transition-all shrink-0\"\n \n >\n <FileCode className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Codex Docs\"}\n </span>\n <span\n className=\"hidden sm:inline text-xs font-mono px-2 py-0.5 rounded border\"\n \n >\n v3.2 Edge\n </span>\n </div>\n\n {/ Search Bar /}\n <div\n className=\"hidden sm:flex items-center gap-2 px-3.5 py-2 rounded-lg border text-xs sm:text-sm w-64 lg:w-80\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: \"#12141c\",\n color: \"#9aa0aa\",\n borderRadius: \"0.75rem\",\n }}\n >\n <Search className=\"h-4 w-4\" />\n <span className=\"flex-1 truncate\">Search guides, SDKs, APIs...</span>\n <kbd\n className=\"px-1.5 py-0.5 rounded border text-xs font-mono\"\n \n >\n ⌘K\n </kbd>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n className=\"text-xs sm:text-sm font-semibold px-4 py-2 rounded-lg text-white shadow-sm hover:brightness-110 transition-all shrink-0\"\n \n >\n API Keys\n </button>\n </div>\n </div>\n\n {/ Mobile Navigation Drawer /}\n <AnimatePresence>\n {mobileNavOpen && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"lg:hidden border-b p-4 space-y-4 text-sm overflow-hidden\"\n \n >\n <div>\n <p className=\"text-xs font-mono uppercase tracking-wider mb-2 opacity-60\">\n Getting Started\n </p>\n <div className=\"space-y-1\">\n <button\n onClick={() => {\n setActiveSection(\"overview\");\n setMobileNavOpen(false);\n }}\n className={\\`w-full text-left px-3 py-2 rounded-lg transition-colors \\${\n activeSection === \"overview\" ? \"font-bold text-white shadow-sm\" : \"opacity-80\"\n }\\`}\n style={{\n backgroundColor: activeSection === \"overview\" ? \"#6366f1\" : \"transparent\",\n borderRadius: \"0.75rem\",\n }}\n >\n Quickstart & Concepts\n </button>\n <button\n onClick={() => {\n setActiveSection(\"auth\");\n setMobileNavOpen(false);\n }}\n className={\\`w-full text-left px-3 py-2 rounded-lg transition-colors \\${\n activeSection === \"auth\" ? \"font-bold text-white shadow-sm\" : \"opacity-80\"\n }\\`}\n style={{\n backgroundColor: activeSection === \"auth\" ? \"#6366f1\" : \"transparent\",\n borderRadius: \"0.75rem\",\n }}\n >\n Authentication & Keys\n </button>\n </div>\n </div>\n\n <div>\n <p className=\"text-xs font-mono uppercase tracking-wider mb-2 opacity-60\">\n Core API Reference\n </p>\n <div className=\"space-y-1 font-mono text-xs\">\n <button\n onClick={() => setMobileNavOpen(false)}\n className=\"w-full text-left px-3 py-1.5 rounded opacity-80 hover:opacity-100\"\n >\n POST /v1/inference\n </button>\n <button\n onClick={() => setMobileNavOpen(false)}\n className=\"w-full text-left px-3 py-1.5 rounded opacity-80 hover:opacity-100\"\n >\n GET /v1/models\n </button>\n </div>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n </header>\n\n {/ 3-Column Docs Layout (Desktop) / Reflowed (Mobile & Tablet) /}\n <div className=\"w-full max-w-7xl mx-auto flex flex-col lg:flex-row\">\n {/ Left Column: Navigation Sidebar (Desktop) /}\n <aside\n className=\"hidden lg:block w-64 border-r p-5 shrink-0 text-sm space-y-6\"\n \n >\n <div>\n <p className=\"text-xs font-mono uppercase tracking-wider opacity-60 mb-3\">\n Getting Started\n </p>\n <div className=\"space-y-1.5\">\n <button\n onClick={() => setActiveSection(\"overview\")}\n className={\\`w-full text-left px-3 py-2 rounded-lg transition-colors \\${\n activeSection === \"overview\" ? \"font-semibold text-white shadow-sm\" : \"opacity-75 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: activeSection === \"overview\" ? \"#6366f1\" : \"transparent\",\n color: activeSection === \"overview\" ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n Quickstart & Concepts\n </button>\n <button\n onClick={() => setActiveSection(\"auth\")}\n className={\\`w-full text-left px-3 py-2 rounded-lg transition-colors \\${\n activeSection === \"auth\" ? \"font-semibold text-white shadow-sm\" : \"opacity-75 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: activeSection === \"auth\" ? \"#6366f1\" : \"transparent\",\n color: activeSection === \"auth\" ? \"#ffffff\" : \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n Authentication & Keys\n </button>\n <button className=\"w-full text-left px-3 py-2 rounded-lg opacity-70 hover:opacity-100 transition-colors\">\n Rate Limits & Quotas\n </button>\n </div>\n </div>\n\n <div>\n <p className=\"text-xs font-mono uppercase tracking-wider opacity-60 mb-3\">\n Core API Reference\n </p>\n <div className=\"space-y-1.5 font-mono text-xs\">\n <button className=\"w-full text-left px-3 py-1.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\">\n POST /v1/inference\n </button>\n <button className=\"w-full text-left px-3 py-1.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\">\n GET /v1/models\n </button>\n <button className=\"w-full text-left px-3 py-1.5 rounded-lg opacity-75 hover:opacity-100 transition-colors\">\n POST /v1/embeddings\n </button>\n </div>\n </div>\n </aside>\n\n {/ Center Column: Documentation Content /}\n <main className=\"flex-1 p-5 sm:p-8 max-w-3xl min-w-0\">\n <div className=\"mb-8\">\n <div className=\"flex items-center gap-2 text-xs font-mono mb-2\" >\n <span>Docs</span>\n <ChevronRight className=\"h-3.5 w-3.5\" />\n <span>Authentication</span>\n </div>\n\n <h1\n className=\"text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight mb-3\"\n \n >\n Authentication & API Security\n </h1>\n\n <p className=\"text-sm sm:text-base leading-relaxed mb-6\" >\n All requests to the Codex API must authenticate using Bearer tokens in the HTTP Authorization header.\n Your secret keys grant complete administrative access to your cluster quota.\n </p>\n\n {/ Note Callout /}\n <div\n className=\"p-4 sm:p-5 rounded-xl border flex items-start gap-3.5 text-xs sm:text-sm leading-relaxed mb-8 transition-all\"\n \n >\n <AlertCircle className=\"h-5 w-5 shrink-0 mt-0.5\" />\n <div>\n <span className=\"font-semibold\" >\n Security Best Practice:\n </span>{\" \"}\n Never expose production keys in client-side code or public Git repositories.\n Always access Codex endpoints through server-side environment variables.\n </div>\n </div>\n\n {/ Multi-Language Code Snippet /}\n <div\n className=\"rounded-2xl border shadow-lg overflow-hidden font-mono text-xs sm:text-sm mb-8\"\n style={{\n backgroundColor: isDark ? \"#08090d\" : \"#11131a\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#fafafa\",\n borderRadius: \"0.75rem\",\n }}\n >\n {/ Language Tabs /}\n <div className=\"flex items-center justify-between border-b border-white/10 px-3.5 py-2.5 bg-black/30\">\n <div className=\"flex gap-1.5\">\n {([\"curl\", \"node\", \"python\", \"go\"] as const).map((lang) => (\n <button\n key={lang}\n onClick={() => setActiveLang(lang)}\n className={\\`px-3 py-1.5 rounded capitalize font-medium text-xs transition-colors \\${\n activeLang === lang\n ? \"bg-white/20 text-white font-bold\"\n : \"text-zinc-400 hover:text-white\"\n }\\`}\n >\n {lang}\n </button>\n ))}\n </div>\n\n <button\n onClick={() => {\n navigator.clipboard.writeText(codeSnippets[activeLang]);\n setCopiedCode(true);\n setTimeout(() => setCopiedCode(false), 2000);\n }}\n className=\"flex items-center gap-1.5 text-zinc-400 hover:text-white text-xs transition-colors\"\n >\n {copiedCode ? <Check className=\"h-4 w-4 text-emerald-400\" /> : <Copy className=\"h-4 w-4\" />}\n <span>{copiedCode ? \"Copied\" : \"Copy\"}</span>\n </button>\n </div>\n\n <pre className=\"p-4 sm:p-5 overflow-x-auto text-zinc-200 text-xs sm:text-sm leading-relaxed\">\n <code>{codeSnippets[activeLang]}</code>\n </pre>\n </div>\n </div>\n </main>\n\n {/ Right Column: Interactive API Playground Runner /}\n <aside\n className=\"w-full xl:w-84 border-t xl:border-t-0 xl:border-l p-5 shrink-0 text-sm\"\n \n >\n <div\n className=\"p-5 rounded-xl border space-y-3.5 transition-all\"\n \n >\n <div className=\"flex items-center justify-between\">\n <span className=\"font-semibold text-sm\">Live API Explorer</span>\n <span className=\"text-xs font-mono text-emerald-500 font-medium\">POST /v1/inference</span>\n </div>\n\n <button\n onClick={handleTestApi}\n disabled={isSending}\n className=\"w-full h-11 rounded-lg text-white font-semibold flex items-center justify-center gap-2 transition-all hover:brightness-110 disabled:opacity-50 shadow-sm text-xs sm:text-sm\"\n \n >\n {isSending ? (\n <span>Executing Request...</span>\n ) : (\n <>\n <Play className=\"h-4 w-4 fill-current\" />\n <span>Execute Test Request</span>\n </>\n )}\n </button>\n\n {apiResponse && (\n <div className=\"pt-3 border-t font-mono text-xs\" >\n <div className=\"flex justify-between items-center mb-1.5 text-xs text-emerald-500 font-semibold\">\n <span>HTTP 200 OK</span>\n <span>3.8ms</span>\n </div>\n <pre\n className=\"p-3 rounded-lg overflow-x-auto border text-xs\"\n style={{\n backgroundColor: \"#161822\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n borderRadius: \"0.75rem\",\n }}\n >\n <code>{apiResponse}</code>\n </pre>\n </div>\n )}\n </div>\n </aside>\n </div>\n\n {/ Footer /}\n <footer\n className=\"py-8 px-4 sm:px-6 border-t text-center text-xs sm:text-sm\"\n \n >\n <p>© {new Date().getFullYear()} {brandName \|\| \"Codex Docs\"}. Built for developer experience.</p>\n </footer>\n </div>\n );\n}\n`,\n};\n","export const templateHealthcarePortal = {\n name: \"template-healthcare-portal\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-healthcare-portal.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Activity,\n Heart,\n Calendar,\n Clock,\n Pill,\n CheckCircle2,\n AlertCircle,\n TrendingUp,\n TrendingDown,\n ChevronRight,\n User,\n ShieldCheck,\n Video,\n FileText,\n Plus,\n X,\n Stethoscope,\n Sparkles,\n RefreshCw,\n Droplet,\n Moon,\n Zap,\n} from \"lucide-react\";\n\nexport interface HealthcarePortalTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function HealthcarePortalTemplate({\n brandName = \"PulseCare Telehealth\",\n theme = \"dark\",\n}: HealthcarePortalTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // Interactive States\n const [activeTab, setActiveTab] = useState<\"telemetry\" \| \"regimen\" \| \"labs\">(\"telemetry\");\n const [selectedVital, setSelectedVital] = useState<\"bpm\" \| \"spo2\" \| \"sleep\" \| \"hrv\">(\"bpm\");\n const [checkedMeds, setCheckedMeds] = useState<string[]>([\"med-1\", \"med-2\"]);\n const [isBookingOpen, setIsBookingOpen] = useState(false);\n const [selectedSpecialty, setSelectedSpecialty] = useState(\"Cardiology\");\n const [selectedTimeSlot, setSelectedTimeSlot] = useState(\"Tomorrow, 10:30 AM\");\n const [bookingToast, setBookingToast] = useState(false);\n const [refillToast, setRefillToast] = useState<string \| null>(null);\n const [symptomSeverity, setSymptomSeverity] = useState<string \| null>(null);\n\n const vitalsData = {\n bpm: {\n label: \"Resting Heart Rate\",\n value: \"64\",\n unit: \"BPM\",\n delta: \"-3 bpm vs 30d avg\",\n status: \"Optimal\",\n icon: Heart,\n color: \"text-rose-500\",\n bgGlow: \"rgba(244, 63, 94, 0.12)\",\n trend: [62, 65, 68, 63, 61, 64, 66, 64],\n },\n spo2: {\n label: \"Blood Oxygen (SpO2)\",\n value: \"98.8\",\n unit: \"%\",\n delta: \"+0.4% healthy range\",\n status: \"Excellent\",\n icon: Droplet,\n color: \"text-sky-500\",\n bgGlow: \"rgba(14, 165, 233, 0.12)\",\n trend: [97, 98, 98.5, 99, 98.2, 98.6, 98.8, 98.8],\n },\n sleep: {\n label: \"Sleep Recovery Score\",\n value: \"88\",\n unit: \"/100\",\n delta: \"7h 42m deep restorative\",\n status: \"Restorative\",\n icon: Moon,\n color: \"text-indigo-500\",\n bgGlow: \"rgba(99, 102, 241, 0.12)\",\n trend: [72, 78, 81, 85, 82, 89, 84, 88],\n },\n hrv: {\n label: \"Heart Rate Variability\",\n value: \"58\",\n unit: \"ms\",\n delta: \"+7ms autonomic balance\",\n status: \"High Resilience\",\n icon: Activity,\n color: \"text-emerald-500\",\n bgGlow: \"rgba(16, 185, 129, 0.12)\",\n trend: [48, 52, 55, 51, 56, 54, 60, 58],\n },\n };\n\n const medications = [\n {\n id: \"med-1\",\n name: \"Atorvastatin Calcium\",\n dosage: \"20mg • Oral Tablet\",\n schedule: \"Morning with meal\",\n remaining: \"24 days supply\",\n prescribedBy: \"Dr. Aris Thorne\",\n },\n {\n id: \"med-2\",\n name: \"Omega-3 Pure EPA/DHA\",\n dosage: \"1000mg • Softgel\",\n schedule: \"Midday with water\",\n remaining: \"18 days supply\",\n prescribedBy: \"Dr. Sarah Lin\",\n },\n {\n id: \"med-3\",\n name: \"Magnesium Glycinate\",\n dosage: \"400mg • Bedtime\",\n schedule: \"Evening before rest\",\n remaining: \"6 days supply (Refill Soon)\",\n prescribedBy: \"Dr. Aris Thorne\",\n },\n ];\n\n const labPanels = [\n { test: \"ApoB Lipoprotein\", value: \"68 mg/dL\", target: \"< 80 mg/dL\", status: \"Optimal\", pct: 45 },\n { test: \"High-Sensitivity CRP\", value: \"0.6 mg/L\", target: \"< 1.0 mg/L\", status: \"Low Risk\", pct: 30 },\n { test: \"Fasting Blood Glucose\", value: \"86 mg/dL\", target: \"70-99 mg/dL\", status: \"Optimal\", pct: 50 },\n { test: \"Estimated GFR (Kidney)\", value: \"112 mL/min\", target: \"> 90 mL/min\", status: \"Healthy\", pct: 85 },\n ];\n\n const handleToggleMed = (id: string) => {\n setCheckedMeds((prev) =>\n prev.includes(id) ? prev.filter((m) => m !== id) : [...prev, id]\n );\n };\n\n const handleBookSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsBookingOpen(false);\n setBookingToast(true);\n setTimeout(() => setBookingToast(false), 3500);\n };\n\n const handleRefill = (medName: string) => {\n setRefillToast(\\`Refill request sent to pharmacy for \\${medName}.\\`);\n setTimeout(() => setRefillToast(null), 3000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Telehealth Navigation /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Activity className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"PulseCare Health\"}\n </span>\n <span className=\"hidden md:inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20\">\n <ShieldCheck className=\"h-3 w-3\" />\n HIPAA Certified\n </span>\n </div>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl border text-xs\"\n \n >\n <div className=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span className=\"font-mono text-[11px] opacity-80\">Sync: Dexcom G7 (Active)</span>\n </div>\n\n <button\n onClick={() => setIsBookingOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Video className=\"h-3.5 w-3.5\" />\n <span>Book Doctor</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Clinical Telemetry Body /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 space-y-6\">\n {/ Patient Profile Header Card /}\n <div\n className=\"p-4 sm:p-6 rounded-2xl border flex flex-col md:flex-row items-start md:items-center justify-between gap-4\"\n \n >\n <div className=\"flex items-center gap-4\">\n <div className=\"w-12 h-12 rounded-2xl bg-teal-500/10 border border-teal-500/20 text-teal-600 flex items-center justify-center font-bold text-base\">\n ER\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <h1 className=\"font-bold text-base sm:text-lg\">Elena Rostova</h1>\n <span className=\"text-xs px-2 py-0.5 rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-medium\">\n Active Patient #4892\n </span>\n </div>\n <p className=\"text-xs opacity-75 mt-0.5\">\n Primary Physician: Dr. Aris Thorne • Longevity & Preventive Cardiology\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3 w-full md:w-auto justify-between md:justify-end border-t md:border-t-0 pt-3 md:pt-0\" >\n <div className=\"text-left md:text-right\">\n <span className=\"text-[11px] opacity-60 uppercase tracking-wider block\">Next Consultation</span>\n <span className=\"text-xs font-bold text-teal-600 dark:text-teal-400\">Sep 12, 10:30 AM (Telehealth)</span>\n </div>\n <button\n onClick={() => setIsBookingOpen(true)}\n className=\"p-2 rounded-xl border hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n aria-label=\"View appointment details\"\n >\n <Calendar className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n\n {/ Biometrics 4-Metric Grid /}\n <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4\">\n {([\"bpm\", \"spo2\", \"sleep\", \"hrv\"] as const).map((key) => {\n const item = vitalsData[key];\n const isSelected = selectedVital === key;\n const IconComp = item.icon;\n\n return (\n <button\n key={key}\n onClick={() => setSelectedVital(key)}\n className={\\`p-4 rounded-2xl border text-left transition-all \\${\n isSelected ? \"ring-2 shadow-md\" : \"hover:border-opacity-60\"\n }\\`}\n style={{\n backgroundColor: isSelected ? \"#181a24\" : \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs opacity-70 font-medium\">{item.label}</span>\n <div className={\\`p-1.5 rounded-lg \\${item.color}\\`} style={{ backgroundColor: item.bgGlow }}>\n <IconComp className=\"h-4 w-4\" />\n </div>\n </div>\n\n <div className=\"flex items-baseline gap-1.5 mb-1\">\n <span className=\"text-2xl sm:text-3xl font-black tracking-tight\">{item.value}</span>\n <span className=\"text-xs font-mono opacity-60\">{item.unit}</span>\n </div>\n\n <div className=\"flex items-center justify-between text-[11px]\">\n <span className=\"text-emerald-600 dark:text-emerald-400 font-medium flex items-center gap-1\">\n <TrendingUp className=\"h-3 w-3\" />\n {item.delta}\n </span>\n <span className=\"opacity-50 font-mono\">{item.status}</span>\n </div>\n </button>\n );\n })}\n </div>\n\n {/ Dynamic Interactive Telemetry Waveform Visualization /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2\">\n <div>\n <h2 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Activity className=\"h-4 w-4 text-teal-500\" />\n <span>Continuous 24h Telemetry: {vitalsData[selectedVital].label}</span>\n </h2>\n <p className=\"text-xs opacity-65\">Continuous stream sampled every 60s via sensor telemetry.</p>\n </div>\n\n <div\n className=\"inline-flex p-1 rounded-xl border text-xs\"\n \n >\n {[\"12H\", \"24H\", \"7D\", \"30D\"].map((range, idx) => (\n <span\n key={range}\n className={\\`px-2.5 py-1 rounded-lg text-[11px] font-semibold cursor-pointer \\${\n idx === 1 ? \"bg-teal-500/20 text-teal-600 dark:text-teal-400 font-bold\" : \"opacity-60\"\n }\\`}\n >\n {range}\n </span>\n ))}\n </div>\n </div>\n\n {/ SVG Sparkline Curve /}\n <div className=\"w-full h-28 relative flex items-end pt-4\">\n <svg className=\"w-full h-full overflow-visible\" preserveAspectRatio=\"none\" viewBox=\"0 0 700 80\">\n <defs>\n <linearGradient id=\"vitalGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#6366f1\" stopOpacity=\"0.3\" />\n <stop offset=\"100%\" stopColor=\"#6366f1\" stopOpacity=\"0.0\" />\n </linearGradient>\n </defs>\n {/ Shaded Area /}\n <path\n d=\"M 0 60 Q 100 20, 200 45 T 400 30 T 600 25 L 700 35 L 700 80 L 0 80 Z\"\n fill=\"url(#vitalGradient)\"\n />\n {/ Line /}\n <path\n d=\"M 0 60 Q 100 20, 200 45 T 400 30 T 600 25 L 700 35\"\n fill=\"none\"\n stroke=\"#6366f1\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n </div>\n\n <div className=\"flex justify-between text-[10px] font-mono opacity-50 pt-1 border-t\" >\n <span>00:00 (Midnight)</span>\n <span>06:00 (Waking)</span>\n <span>12:00 (Midday)</span>\n <span>18:00 (Post-Workout)</span>\n <span>Current (Live)</span>\n </div>\n </div>\n\n {/ Two-Column Clinical Section: Medications + Symptom Triage /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Left 2 Cols: Prescription Regimen & Lab Panels /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Daily Medication Checklist /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex items-center justify-between\">\n <div>\n <h3 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Pill className=\"h-4 w-4 text-indigo-500\" />\n <span>Daily Medication Regimen</span>\n </h3>\n <p className=\"text-xs opacity-65\">Tap pills to verify doses administered today.</p>\n </div>\n <span className=\"text-xs font-mono px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-semibold\">\n {checkedMeds.length}/{medications.length} Complete\n </span>\n </div>\n\n <div className=\"space-y-2.5\">\n {medications.map((med) => {\n const isDone = checkedMeds.includes(med.id);\n return (\n <div\n key={med.id}\n className=\"p-3.5 rounded-xl border flex items-center justify-between gap-3 transition-colors\"\n \n >\n <button\n onClick={() => handleToggleMed(med.id)}\n className=\"flex items-center gap-3 text-left flex-1\"\n >\n <div\n className={\\`w-5 h-5 rounded-lg border flex items-center justify-center transition-colors shrink-0 \\${\n isDone ? \"bg-teal-600 border-teal-600 text-white\" : \"border-zinc-400 opacity-60\"\n }\\`}\n >\n {isDone && <CheckCircle2 className=\"h-3.5 w-3.5\" />}\n </div>\n <div>\n <div className={\\`font-semibold text-xs sm:text-sm \\${isDone ? \"line-through opacity-50\" : \"\"}\\`}>\n {med.name}\n </div>\n <div className=\"text-[11px] opacity-65 flex items-center gap-2\">\n <span>{med.dosage}</span>\n <span>•</span>\n <span>{med.schedule}</span>\n </div>\n </div>\n </button>\n\n <div className=\"flex items-center gap-2 shrink-0\">\n <span className=\"hidden sm:inline-block text-[11px] font-mono opacity-60\">{med.remaining}</span>\n <button\n onClick={() => handleRefill(med.name)}\n className=\"px-2.5 py-1 rounded-lg text-[10px] font-medium border hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n >\n Refill\n </button>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Comprehensive Lab Biomarkers /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex items-center justify-between\">\n <div>\n <h3 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <FileText className=\"h-4 w-4 text-teal-500\" />\n <span>Quarterly Biomarker Panel</span>\n </h3>\n <p className=\"text-xs opacity-65\">Verified by Quest Diagnostics Laboratories • Aug 28, 2026</p>\n </div>\n <button\n onClick={() => alert(\"Downloading Lab Results PDF...\")}\n className=\"text-xs text-teal-600 dark:text-teal-400 hover:underline font-medium\"\n >\n Download PDF\n </button>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n {labPanels.map((lab) => (\n <div\n key={lab.test}\n className=\"p-3.5 rounded-xl border space-y-2\"\n \n >\n <div className=\"flex justify-between items-start text-xs\">\n <span className=\"font-semibold\">{lab.test}</span>\n <span className=\"text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-bold\">\n {lab.status}\n </span>\n </div>\n\n <div className=\"flex justify-between items-baseline text-xs\">\n <span className=\"font-mono font-bold text-sm\">{lab.value}</span>\n <span className=\"text-[11px] opacity-60\">Target: {lab.target}</span>\n </div>\n\n <div className=\"w-full h-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 overflow-hidden\">\n <div\n className=\"h-full rounded-full bg-teal-500\"\n style={{ width: \\`\\${lab.pct}%\\` }}\n />\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Right Column: Symptom Triage + Care Team /}\n <div className=\"space-y-6\">\n {/ Interactive Symptom Triage Card /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex items-center gap-2\">\n <div className=\"p-1.5 rounded-lg bg-teal-500/10 text-teal-500\">\n <Stethoscope className=\"h-4 w-4\" />\n </div>\n <div>\n <h3 className=\"font-bold text-sm\">Symptom Triage Assistant</h3>\n <p className=\"text-xs opacity-65\">Log current symptoms for clinical review</p>\n </div>\n </div>\n\n <div className=\"space-y-2\">\n <span className=\"text-[11px] opacity-70 font-medium block\">Select Reported Sensations:</span>\n <div className=\"flex flex-wrap gap-1.5\">\n {[\"Mild Fatigue\", \"Headache\", \"Tension\", \"Palpitations\", \"Joint Stiffness\"].map((symp) => (\n <button\n key={symp}\n onClick={() => setSymptomSeverity(symp)}\n className={\\`px-3 py-1 rounded-full text-xs font-medium border transition-colors \\${\n symptomSeverity === symp\n ? \"bg-teal-600 text-white border-teal-600\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-80 hover:opacity-100\"\n }\\`}\n >\n {symp}\n </button>\n ))}\n </div>\n </div>\n\n {symptomSeverity && (\n <motion.div\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n className=\"p-3 rounded-xl border bg-teal-500/10 border-teal-500/20 text-xs space-y-1\"\n >\n <div className=\"font-bold text-teal-600 dark:text-teal-400 flex items-center gap-1.5\">\n <CheckCircle2 className=\"h-3.5 w-3.5\" />\n <span>Low Urgency Recorded</span>\n </div>\n <p className=\"opacity-80 leading-relaxed\">\n Condition logged in health record. Dr. Thorne recommended hydration and 8h restorative sleep.\n </p>\n </motion.div>\n )}\n </div>\n\n {/ Specialist Care Team /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <h3 className=\"font-bold text-sm flex items-center gap-2\">\n <User className=\"h-4 w-4 text-teal-500\" />\n <span>Primary Care Specialists</span>\n </h3>\n\n <div className=\"space-y-3\">\n {[\n {\n name: \"Dr. Aris Thorne, MD\",\n role: \"Cardiovascular Medicine\",\n status: \"Available Tomorrow\",\n rating: \"4.9 ★\",\n },\n {\n name: \"Dr. Sarah Lin, PhD\",\n role: \"Metabolic Nutrition\",\n status: \"Next slot in 3 days\",\n rating: \"5.0 ★\",\n },\n ].map((doc) => (\n <div\n key={doc.name}\n className=\"p-3 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"font-bold text-xs\">{doc.name}</div>\n <div className=\"text-[10px] opacity-65\">{doc.role}</div>\n </div>\n <button\n onClick={() => {\n setSelectedSpecialty(doc.role);\n setIsBookingOpen(true);\n }}\n className=\"px-2.5 py-1 rounded-lg text-[10px] font-semibold text-white bg-teal-600 hover:bg-teal-500\"\n >\n Book\n </button>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Appointment Booking Modal /}\n {isBookingOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl space-y-5\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <div className=\"flex items-center gap-2 font-bold text-base\">\n <Calendar className=\"h-4 w-4 text-teal-500\" />\n <span>Schedule Telehealth Visit</span>\n </div>\n <button\n onClick={() => setIsBookingOpen(false)}\n className=\"p-1.5 rounded-lg opacity-70 hover:opacity-100\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <form onSubmit={handleBookSubmit} className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1.5 opacity-80\">Specialty</label>\n <select\n value={selectedSpecialty}\n onChange={(e) => setSelectedSpecialty(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n >\n <option value=\"Cardiology\">Preventive Cardiology</option>\n <option value=\"Endocrinology\">Metabolic Endocrinology</option>\n <option value=\"Longevity\">Longevity & Biomarkers</option>\n </select>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1.5 opacity-80\">Preferred Slot</label>\n <div className=\"grid grid-cols-2 gap-2\">\n {[\"Tomorrow, 10:30 AM\", \"Tomorrow, 2:15 PM\", \"Sep 14, 9:00 AM\", \"Sep 14, 4:00 PM\"].map((slot) => (\n <button\n type=\"button\"\n key={slot}\n onClick={() => setSelectedTimeSlot(slot)}\n className={\\`p-2 rounded-xl border text-center font-medium transition-colors \\${\n selectedTimeSlot === slot\n ? \"bg-teal-600 text-white border-teal-600\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-80 hover:opacity-100\"\n }\\`}\n >\n {slot}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"p-3 rounded-xl border bg-teal-500/10 border-teal-500/20 text-[11px] leading-relaxed\">\n ✓ Video consultation link and pre-appointment questionnaire will be dispatched to your email.\n </div>\n\n <div className=\"flex gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsBookingOpen(false)}\n className=\"flex-1 py-2.5 rounded-xl border font-semibold opacity-75 hover:opacity-100\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 py-2.5 rounded-xl font-bold text-white bg-teal-600 hover:bg-teal-500 shadow-sm\"\n >\n Confirm Visit\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n\n {/ Confirmation Toasts /}\n {bookingToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-emerald-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Consultation confirmed for {selectedTimeSlot}!</span>\n </div>\n )}\n\n {refillToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-teal-700 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>{refillToast}</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateWeb3Dex = {\n name: \"template-web3-dex\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-web3-dex.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n ArrowDownUp,\n Zap,\n SlidersHorizontal,\n ShieldCheck,\n Wallet,\n ChevronDown,\n TrendingUp,\n TrendingDown,\n ExternalLink,\n CheckCircle2,\n RefreshCw,\n Coins,\n Search,\n X,\n Flame,\n Globe,\n Lock,\n} from \"lucide-react\";\n\nexport interface Web3DexTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function Web3DexTemplate({\n brandName = \"Aether DEX\",\n theme = \"dark\",\n}: Web3DexTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // Tokens config\n const tokens = [\n { symbol: \"ETH\", name: \"Ethereum\", balance: \"4.821\", price: 2640.5 },\n { symbol: \"USDC\", name: \"USD Coin\", balance: \"14,850.00\", price: 1.0 },\n { symbol: \"SOL\", name: \"Solana\", balance: \"84.20\", price: 148.2 },\n { symbol: \"NEXO\", name: \"Nexore Token\", balance: \"25,000.00\", price: 0.85 },\n { symbol: \"WBTC\", name: \"Wrapped BTC\", balance: \"0.245\", price: 62450.0 },\n ];\n\n // States\n const [fromToken, setFromToken] = useState(tokens[0]);\n const [toToken, setToToken] = useState(tokens[1]);\n const [fromAmount, setFromAmount] = useState(\"1.5\");\n const [slippage, setSlippage] = useState(\"0.5%\");\n const [activeTimeframe, setActiveTimeframe] = useState<\"1H\" \| \"24H\" \| \"7D\" \| \"1M\">(\"24H\");\n const [isWalletOpen, setIsWalletOpen] = useState(false);\n const [walletConnected, setWalletConnected] = useState(true);\n const [isSwapping, setIsSwapping] = useState(false);\n const [swapToast, setSwapToast] = useState<string \| null>(null);\n const [isSettingsOpen, setIsSettingsOpen] = useState(false);\n\n // Compute calculated output\n const calculatedOutput = (\n (parseFloat(fromAmount \|\| \"0\") fromToken.price) /\n toToken.price\n ).toFixed(toToken.symbol === \"USDC\" ? 2 : 4);\n\n const handleFlip = () => {\n const temp = fromToken;\n setFromToken(toToken);\n setToToken(temp);\n };\n\n const handleExecuteSwap = (e: React.FormEvent) => {\n e.preventDefault();\n if (!fromAmount \|\| parseFloat(fromAmount) <= 0) return;\n setIsSwapping(true);\n\n setTimeout(() => {\n setIsSwapping(false);\n setSwapToast(\\`Swapped \\${fromAmount} \\${fromToken.symbol} for \\${calculatedOutput} \\${toToken.symbol}!\\`);\n setTimeout(() => setSwapToast(null), 4000);\n }, 1200);\n };\n\n const liquidityPools = [\n { pair: \"ETH / USDC\", tvl: \"$48.2M\", vol24h: \"$14.8M\", apy: \"24.6% APY\", fee: \"0.05%\" },\n { pair: \"NEXO / ETH\", tvl: \"$18.6M\", vol24h: \"$6.2M\", apy: \"48.2% APY\", fee: \"0.30%\" },\n { pair: \"SOL / USDC\", tvl: \"$32.4M\", vol24h: \"$9.4M\", apy: \"19.8% APY\", fee: \"0.05%\" },\n { pair: \"WBTC / ETH\", tvl: \"$64.1M\", vol24h: \"$18.2M\", apy: \"12.4% APY\", fee: \"0.05%\" },\n ];\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* DEX Navigation Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Zap className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"NovaSwap Protocol\"}\n </span>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n {/ Gas fee ticker /}\n <div\n className=\"hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <span className=\"w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping\" />\n <span className=\"opacity-70\">12 Gwei</span>\n <span className=\"text-cyan-500 font-bold\">• Fast</span>\n </div>\n\n {/ Network pill /}\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl border text-xs font-medium\"\n \n >\n <span className=\"w-2 h-2 rounded-full bg-blue-500\" />\n <span>Ethereum</span>\n </div>\n\n {/ Wallet button /}\n <button\n onClick={() => setIsWalletOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-mono font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Wallet className=\"h-3.5 w-3.5\" />\n <span>{walletConnected ? \"0x7F2...91cB\" : \"Connect Wallet\"}</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Terminal View /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 space-y-6\">\n {/ Market Stats Bar /}\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4\">\n {[\n { label: \"ETH / USD\", val: \"$2,640.50\", delta: \"+4.18%\", up: true },\n { label: \"24h Protocol Volume\", val: \"$182,490,200\", delta: \"+12.4%\", up: true },\n { label: \"Total Value Locked\", val: \"$842,100,000\", delta: \"+3.2%\", up: true },\n { label: \"Average Swap Routing\", val: \"14ms\", delta: \"Zero MEV\", up: true },\n ].map((stat) => (\n <div\n key={stat.label}\n className=\"p-3.5 rounded-xl border\"\n \n >\n <div className=\"text-[11px] opacity-60 font-medium\">{stat.label}</div>\n <div className=\"text-base sm:text-lg font-bold font-mono my-0.5\">{stat.val}</div>\n <div className=\"text-[11px] font-semibold text-emerald-500 flex items-center gap-1\">\n <TrendingUp className=\"h-3 w-3\" />\n <span>{stat.delta}</span>\n </div>\n </div>\n ))}\n </div>\n\n {/ Core Layout: Swap Card + Candlestick Depth Chart /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Swap Card: 5 Cols /}\n <div className=\"lg:col-span-5\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4 shadow-lg\"\n \n >\n <div className=\"flex justify-between items-center\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"font-bold text-sm sm:text-base\">Instant Swap</h2>\n <span className=\"text-[10px] px-2 py-0.5 rounded bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-mono font-bold\">\n V3 AMM\n </span>\n </div>\n <button\n onClick={() => setIsSettingsOpen(!isSettingsOpen)}\n className=\"p-1.5 rounded-lg border hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n aria-label=\"Swap Settings\"\n >\n <SlidersHorizontal className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n\n {/ Settings Dropdown Drawer /}\n {isSettingsOpen && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n className=\"p-3.5 rounded-xl border space-y-2 text-xs\"\n \n >\n <div className=\"flex justify-between items-center\">\n <span className=\"font-semibold opacity-75\">Slippage Tolerance</span>\n <span className=\"font-mono text-cyan-500 font-bold\">{slippage}</span>\n </div>\n <div className=\"flex gap-1.5\">\n {[\"0.1%\", \"0.5%\", \"1.0%\", \"Custom\"].map((s) => (\n <button\n key={s}\n onClick={() => setSlippage(s)}\n className={\\`flex-1 py-1 rounded-lg border text-xs font-mono font-medium transition-colors \\${\n slippage === s\n ? \"bg-cyan-600 text-white border-cyan-600 font-bold\"\n : \"opacity-75 hover:opacity-100\"\n }\\`}\n \n >\n {s}\n </button>\n ))}\n </div>\n </motion.div>\n )}\n\n <form onSubmit={handleExecuteSwap} className=\"space-y-2\">\n {/ Pay Token Container /}\n <div\n className=\"p-4 rounded-xl border space-y-1.5\"\n \n >\n <div className=\"flex justify-between text-xs opacity-70\">\n <span>You Pay</span>\n <span className=\"font-mono\">\n Balance: {fromToken.balance} {fromToken.symbol}\n </span>\n </div>\n <div className=\"flex items-center justify-between gap-2\">\n <input\n type=\"number\"\n step=\"any\"\n value={fromAmount}\n onChange={(e) => setFromAmount(e.target.value)}\n placeholder=\"0.0\"\n className=\"text-2xl sm:text-3xl font-mono font-bold bg-transparent outline-none w-full\"\n />\n <select\n value={fromToken.symbol}\n onChange={(e) => {\n const t = tokens.find((tok) => tok.symbol === e.target.value);\n if (t) setFromToken(t);\n }}\n className=\"px-3 py-1.5 rounded-xl font-bold text-xs border bg-transparent outline-none cursor-pointer\"\n \n >\n {tokens.map((t) => (\n <option key={t.symbol} value={t.symbol} className=\"text-black dark:text-white dark:bg-zinc-900\">\n {t.symbol}\n </option>\n ))}\n </select>\n </div>\n <div className=\"text-[11px] font-mono opacity-50\">\n ≈ \\${(parseFloat(fromAmount \|\| \"0\") fromToken.price).toLocaleString()} USD\n </div>\n </div>\n\n {/* Flip Pair Trigger /}\n <div className=\"flex justify-center -my-3 relative z-10\">\n <button\n type=\"button\"\n onClick={handleFlip}\n className=\"p-2 rounded-xl border shadow-md hover:scale-105 active:scale-95 transition-all\"\n \n aria-label=\"Flip tokens\"\n >\n <ArrowDownUp className=\"h-4 w-4 text-cyan-500\" />\n </button>\n </div>\n\n {/ Receive Token Container /}\n <div\n className=\"p-4 rounded-xl border space-y-1.5\"\n \n >\n <div className=\"flex justify-between text-xs opacity-70\">\n <span>You Receive (Estimated)</span>\n <span className=\"font-mono\">\n Balance: {toToken.balance} {toToken.symbol}\n </span>\n </div>\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"text-2xl sm:text-3xl font-mono font-bold w-full truncate\">\n {calculatedOutput}\n </div>\n <select\n value={toToken.symbol}\n onChange={(e) => {\n const t = tokens.find((tok) => tok.symbol === e.target.value);\n if (t) setToToken(t);\n }}\n className=\"px-3 py-1.5 rounded-xl font-bold text-xs border bg-transparent outline-none cursor-pointer\"\n \n >\n {tokens.map((t) => (\n <option key={t.symbol} value={t.symbol} className=\"text-black dark:text-white dark:bg-zinc-900\">\n {t.symbol}\n </option>\n ))}\n </select>\n </div>\n <div className=\"text-[11px] font-mono opacity-50\">\n ≈ \\${(parseFloat(calculatedOutput \|\| \"0\") toToken.price).toLocaleString()} USD\n </div>\n </div>\n\n {/* Trade Execution Telemetry details /}\n <div\n className=\"p-3 rounded-xl border text-[11px] space-y-1 font-mono opacity-75\"\n \n >\n <div className=\"flex justify-between\">\n <span>Rate</span>\n <span>1 {fromToken.symbol} = {(fromToken.price / toToken.price).toFixed(4)} {toToken.symbol}</span>\n </div>\n <div className=\"flex justify-between\">\n <span>Routing</span>\n <span className=\"text-cyan-500 font-semibold\">NovaSwap Split-Route (Zero MEV)</span>\n </div>\n <div className=\"flex justify-between\">\n <span>Estimated Network Fee</span>\n <span>~$1.24 (0.00047 ETH)</span>\n </div>\n </div>\n\n <button\n type=\"submit\"\n disabled={isSwapping}\n className=\"w-full py-3.5 rounded-xl font-bold text-xs text-white shadow-md transition-all active:scale-[0.98] mt-2 flex items-center justify-center gap-2\"\n \n >\n {isSwapping ? (\n <>\n <RefreshCw className=\"h-4 w-4 animate-spin\" />\n <span>Confirming on Chain...</span>\n </>\n ) : (\n <>\n <Zap className=\"h-4 w-4\" />\n <span>Swap {fromToken.symbol} to {toToken.symbol}</span>\n </>\n )}\n </button>\n </form>\n </div>\n </div>\n\n {/ Chart & Depth Visualizer: 7 Cols /}\n <div className=\"lg:col-span-7 space-y-6\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3\">\n <div>\n <div className=\"flex items-center gap-2\">\n <h3 className=\"font-bold text-sm sm:text-base\">\n {fromToken.symbol} / {toToken.symbol} Market Depth\n </h3>\n <span className=\"text-xs font-mono font-bold text-emerald-500\">+4.18%</span>\n </div>\n <div className=\"text-xl sm:text-2xl font-mono font-extrabold mt-1\">\n \\${(fromToken.price / toToken.price).toFixed(2)}\n </div>\n </div>\n\n <div\n className=\"inline-flex p-1 rounded-xl border text-xs\"\n \n >\n {([\"1H\", \"24H\", \"7D\", \"1M\"] as const).map((t) => (\n <button\n key={t}\n onClick={() => setActiveTimeframe(t)}\n className={\\`px-3 py-1 rounded-lg text-[11px] font-mono font-bold transition-all \\${\n activeTimeframe === t\n ? \"bg-cyan-500/20 text-cyan-600 dark:text-cyan-400\"\n : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {t}\n </button>\n ))}\n </div>\n </div>\n\n {/ Simulated Candlestick / Bar Visualization /}\n <div className=\"w-full h-48 relative flex items-end justify-between gap-1 pt-6 px-1\">\n {[\n { h: 40, up: true },\n { h: 55, up: true },\n { h: 50, up: false },\n { h: 65, up: true },\n { h: 60, up: false },\n { h: 75, up: true },\n { h: 85, up: true },\n { h: 80, up: false },\n { h: 95, up: true },\n { h: 90, up: false },\n { h: 105, up: true },\n { h: 120, up: true },\n { h: 115, up: false },\n { h: 130, up: true },\n { h: 145, up: true },\n ].map((bar, idx) => (\n <div key={idx} className=\"flex-1 flex flex-col items-center justify-end h-full\">\n <div\n className={\\`w-full max-w-[14px] rounded-t transition-all \\${\n bar.up ? \"bg-emerald-500/80 hover:bg-emerald-400\" : \"bg-rose-500/80 hover:bg-rose-400\"\n }\\`}\n style={{ height: \\`\\${bar.h}px\\` }}\n />\n </div>\n ))}\n </div>\n\n <div className=\"flex justify-between text-[10px] font-mono opacity-50 border-t pt-2\" >\n <span>04:00</span>\n <span>08:00</span>\n <span>12:00</span>\n <span>16:00</span>\n <span>20:00</span>\n <span>Current</span>\n </div>\n </div>\n\n {/ Yield Farming Liquidity Pools /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex justify-between items-center\">\n <h3 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Coins className=\"h-4 w-4 text-cyan-500\" />\n <span>Featured Liquidity Pools</span>\n </h3>\n <span className=\"text-xs opacity-60 font-mono\">Real-time APY Yields</span>\n </div>\n\n <div className=\"space-y-2.5 overflow-x-auto\">\n {liquidityPools.map((pool) => (\n <div\n key={pool.pair}\n className=\"p-3.5 rounded-xl border flex items-center justify-between gap-4 text-xs font-mono\"\n \n >\n <div>\n <div className=\"font-bold text-sm text-foreground\">{pool.pair}</div>\n <div className=\"text-[11px] opacity-60\">Fee: {pool.fee}</div>\n </div>\n\n <div className=\"text-right\">\n <div className=\"font-bold\">{pool.tvl}</div>\n <div className=\"text-[10px] opacity-60\">TVL</div>\n </div>\n\n <div className=\"text-right hidden sm:block\">\n <div className=\"font-bold\">{pool.vol24h}</div>\n <div className=\"text-[10px] opacity-60\">24h Vol</div>\n </div>\n\n <div className=\"px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-bold\">\n {pool.apy}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Wallet Connection Modal /}\n {isWalletOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-sm p-6 rounded-2xl border shadow-2xl space-y-4\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <span className=\"font-bold text-sm\">Connect Web3 Wallet</span>\n <button onClick={() => setIsWalletOpen(false)} className=\"opacity-70 hover:opacity-100\">\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"space-y-2 text-xs\">\n {[\n { name: \"MetaMask\", badge: \"Installed\" },\n { name: \"Phantom\", badge: \"Multi-chain\" },\n { name: \"Coinbase Wallet\", badge: \"Smart Wallet\" },\n { name: \"WalletConnect\", badge: \"QR Code\" },\n ].map((w) => (\n <button\n key={w.name}\n onClick={() => {\n setWalletConnected(true);\n setIsWalletOpen(false);\n }}\n className=\"w-full p-3 rounded-xl border flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n >\n <span className=\"font-bold\">{w.name}</span>\n <span className=\"text-[10px] font-mono opacity-60\">{w.badge}</span>\n </button>\n ))}\n </div>\n </motion.div>\n </div>\n )}\n\n {/ Toast /}\n {swapToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-cyan-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>{swapToast}</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateEdtechLearning = {\n name: \"template-edtech-learning\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-edtech-learning.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Compass, \n BookOpen,\n CheckCircle2,\n Code2,\n Award,\n Flame,\n Play,\n Check,\n ChevronRight,\n ChevronDown,\n Lock,\n Sparkles,\n HelpCircle,\n Lightbulb,\n Bookmark,\n Share2,\n Terminal,\n Trophy,\n } from \"lucide-react\";\n\nexport interface EdtechLearningTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function EdtechLearningTemplate({\n brandName = \"Syntapse Academy\",\n theme = \"dark\",\n}: EdtechLearningTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // Course outline data\n const modules = [\n {\n id: \"mod-1\",\n title: \"Module 1: Concurrency & Threads\",\n completed: true,\n lessons: [\n { id: \"les-1\", title: \"1.1 Memory Barriers & Atomics\", time: \"15m\", done: true },\n { id: \"les-2\", title: \"1.2 Mutex Invariants & Deadlocks\", time: \"22m\", done: true },\n ],\n },\n {\n id: \"mod-2\",\n title: \"Module 2: Distributed Consensus (Raft)\",\n completed: false,\n lessons: [\n { id: \"les-3\", title: \"2.1 Leader Election Invariants\", time: \"18m\", done: true },\n { id: \"les-4\", title: \"2.2 Log Replication & Quorums\", time: \"25m\", done: false, active: true },\n { id: \"les-5\", title: \"2.3 Split Brain Mitigation\", time: \"20m\", done: false },\n ],\n },\n {\n id: \"mod-3\",\n title: \"Module 3: Conflict-Free Replicated Data (CRDT)\",\n completed: false,\n locked: true,\n lessons: [\n { id: \"les-6\", title: \"3.1 State-based vs Op-based CRDTs\", time: \"30m\", done: false },\n { id: \"les-7\", title: \"3.2 Vector Clocks & Causality\", time: \"25m\", done: false },\n ],\n },\n ];\n\n // States\n const [activeLessonId, setActiveLessonId] = useState(\"les-4\");\n const [selectedAnswer, setSelectedAnswer] = useState<number \| null>(1);\n const [verificationResult, setVerificationResult] = useState<\"success\" \| \"failure\" \| null>(null);\n const [isVerifying, setIsVerifying] = useState(false);\n const [showHint, setShowHint] = useState(false);\n const [xpPoints, setXpPoints] = useState(4820);\n const [completedLessonsCount, setCompletedLessonsCount] = useState(3);\n\n const handleVerify = () => {\n setIsVerifying(true);\n setTimeout(() => {\n setIsVerifying(false);\n if (selectedAnswer === 1) {\n setVerificationResult(\"success\");\n setXpPoints((prev) => prev + 150);\n setCompletedLessonsCount(4);\n } else {\n setVerificationResult(\"failure\");\n }\n }, 800);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Academy Navigation Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Compass className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Polymath Academy\"}\n </span>\n <span className=\"hidden md:inline-block text-xs opacity-60 ml-2 font-mono\">\n • Distributed Systems Track\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n {/ Streak Counter /}\n <div\n className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-semibold bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20\"\n >\n <Flame className=\"h-3.5 w-3.5 fill-amber-500\" />\n <span>14 Day Streak</span>\n </div>\n\n {/ XP Badge /}\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl border text-xs font-mono font-bold\"\n \n >\n <Trophy className=\"h-3.5 w-3.5 text-emerald-500\" />\n <span>{xpPoints.toLocaleString()} XP</span>\n </div>\n </div>\n </div>\n </header>\n\n {/ Main Learning Interface: Syllabus + Lesson Workspace /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8\">\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Left Column: Syllabus Outline (4 Cols) /}\n <div className=\"lg:col-span-4 space-y-4\">\n <div\n className=\"p-4 sm:p-5 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex justify-between items-center\">\n <div>\n <h2 className=\"font-bold text-sm\">Course Syllabus</h2>\n <p className=\"text-xs opacity-65\">Mastering Distributed Consensus</p>\n </div>\n <span className=\"text-xs font-mono font-bold text-emerald-500\">\n {Math.round((completedLessonsCount / 7) 100)}%\n </span>\n </div>\n\n {/* Progress Bar /}\n <div className=\"w-full h-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 overflow-hidden\">\n <div\n className=\"h-full rounded-full transition-all duration-500\"\n style={{\n backgroundColor: \"#6366f1\",\n width: \\`\\${(completedLessonsCount / 7) 100}%\\`,\n }}\n />\n </div>\n\n {/* Modules Accordion /}\n <div className=\"space-y-3 pt-2\">\n {modules.map((mod) => (\n <div key={mod.id} className=\"space-y-1.5\">\n <div className=\"flex items-center justify-between text-xs font-semibold opacity-85\">\n <div className=\"flex items-center gap-1.5 truncate\">\n {mod.locked ? (\n <Lock className=\"h-3.5 w-3.5 opacity-50 shrink-0\" />\n ) : mod.completed ? (\n <CheckCircle2 className=\"h-3.5 w-3.5 text-emerald-500 shrink-0\" />\n ) : (\n <BookOpen className=\"h-3.5 w-3.5 text-emerald-500 shrink-0\" />\n )}\n <span className=\"truncate\">{mod.title}</span>\n </div>\n </div>\n\n {!mod.locked && (\n <div className=\"space-y-1 pl-4 border-l ml-1.5\" >\n {mod.lessons.map((les) => {\n const isActive = activeLessonId === les.id;\n return (\n <button\n key={les.id}\n onClick={() => setActiveLessonId(les.id)}\n className={\\`w-full p-2 rounded-xl text-left text-xs flex items-center justify-between transition-colors \\${\n isActive\n ? \"bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 font-bold border border-emerald-500/30\"\n : \"opacity-75 hover:opacity-100\"\n }\\`}\n >\n <span className=\"truncate\">{les.title}</span>\n <span className=\"text-[10px] font-mono opacity-60 ml-2 shrink-0\">{les.time}</span>\n </button>\n );\n })}\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n\n {/ Achievement Badges Mini Card /}\n <div\n className=\"p-4 sm:p-5 rounded-2xl border space-y-3\"\n \n >\n <h3 className=\"font-bold text-xs flex items-center gap-1.5\">\n <Award className=\"h-4 w-4 text-amber-500\" />\n <span>Earned Mastery Badges</span>\n </h3>\n\n <div className=\"grid grid-cols-2 gap-2 text-xs\">\n <div\n className=\"p-2.5 rounded-xl border text-center space-y-1\"\n \n >\n <div className=\"w-8 h-8 rounded-full bg-emerald-500/10 text-emerald-500 flex items-center justify-center mx-auto font-bold text-xs\">\n ⚡\n </div>\n <div className=\"font-bold text-[11px]\">Concurrency Pro</div>\n <div className=\"text-[9px] opacity-60 font-mono\">Completed Mod 1</div>\n </div>\n\n <div\n className=\"p-2.5 rounded-xl border text-center space-y-1\"\n \n >\n <div className=\"w-8 h-8 rounded-full bg-amber-500/10 text-amber-500 flex items-center justify-center mx-auto font-bold text-xs\">\n 🛡\n </div>\n <div className=\"font-bold text-[11px]\">Quorum Guard</div>\n <div className=\"text-[9px] opacity-60 font-mono\">100% Quiz Accuracy</div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Right Column: Interactive Lesson Player & Verification Sandbox (8 Cols) /}\n <div className=\"lg:col-span-8 space-y-6\">\n <div\n className=\"p-6 sm:p-8 rounded-2xl border space-y-6\"\n \n >\n {/ Lesson Header /}\n <div className=\"border-b pb-4 space-y-2\" >\n <div className=\"flex items-center gap-2 text-xs font-mono opacity-60\">\n <span>Module 2 • Lesson 2.2</span>\n <span>•</span>\n <span>Estimated: 25 mins</span>\n </div>\n <h1 className=\"text-xl sm:text-2xl font-extrabold tracking-tight\">\n Log Replication & Quorum Commit Invariants\n </h1>\n <p className=\"text-xs sm:text-sm opacity-75 leading-relaxed\">\n In the Raft protocol, once a Leader is elected, it manages client state transitions via an append-only log replicated across cluster nodes.\n </p>\n </div>\n\n {/ Theory Concept Callout Block /}\n <div\n className=\"p-4 rounded-xl border space-y-2 text-xs leading-relaxed\"\n \n >\n <div className=\"font-bold flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400\">\n <Lightbulb className=\"h-4 w-4\" />\n <span>The Fundamental Quorum Invariant</span>\n </div>\n <p className=\"opacity-80\">\n For a 5-node cluster (Nodes A, B, C, D, E), an entry is committed safely only when written to a majority (at least 3 nodes). What happens if network partition isolates 2 nodes?\n </p>\n </div>\n\n {/ Interactive Code Exercise Sandbox /}\n <div className=\"space-y-4\">\n <div className=\"flex justify-between items-center text-xs\">\n <span className=\"font-bold flex items-center gap-1.5\">\n <Code2 className=\"h-4 w-4 text-emerald-500\" />\n <span>Challenge Question: Select the Invariant Rule</span>\n </span>\n <button\n onClick={() => setShowHint(!showHint)}\n className=\"text-xs text-amber-600 dark:text-amber-400 hover:underline flex items-center gap-1\"\n >\n <HelpCircle className=\"h-3.5 w-3.5\" />\n <span>{showHint ? \"Hide Hint\" : \"Need Hint?\"}</span>\n </button>\n </div>\n\n {showHint && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n className=\"p-3 rounded-xl border bg-amber-500/10 border-amber-500/20 text-xs text-amber-700 dark:text-amber-300\"\n >\n Hint: A leader cannot commit an entry from an earlier term solely by counting replicas. Review Section 5.4.2 of Ongaro & Ousterhout.\n </motion.div>\n )}\n\n {/ Multiple Choice Answers /}\n <div className=\"space-y-2.5\">\n {[\n \"A partitioned minority of 2 nodes can commit writes independently to optimize latency.\",\n \"The Leader requires a majority quorum (3 of 5 nodes) before returning an acknowledgment to the client.\",\n \"Any follower node can commit entries without communicating with the current Term Leader.\",\n ].map((option, idx) => (\n <button\n key={idx}\n onClick={() => setSelectedAnswer(idx)}\n className={\\`w-full p-4 rounded-xl border text-left text-xs font-medium transition-all flex items-start gap-3 \\${\n selectedAnswer === idx\n ? \"border-emerald-500 bg-emerald-500/10 font-bold\"\n : \"hover:border-zinc-400 opacity-80\"\n }\\`}\n style={{\n backgroundColor: selectedAnswer === idx ? undefined : \"#181a24\",\n borderColor: selectedAnswer === idx ? undefined : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span className=\"w-5 h-5 rounded-full border flex items-center justify-center font-mono text-[11px] shrink-0 mt-0.5\">\n {String.fromCharCode(65 + idx)}\n </span>\n <span className=\"leading-relaxed\">{option}</span>\n </button>\n ))}\n </div>\n\n {/ Verification Result Feedback /}\n {verificationResult && (\n <motion.div\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n className={\\`p-4 rounded-xl border text-xs space-y-1 \\${\n verificationResult === \"success\"\n ? \"bg-emerald-500/15 border-emerald-500/30 text-emerald-800 dark:text-emerald-300\"\n : \"bg-rose-500/15 border-rose-500/30 text-rose-800 dark:text-rose-300\"\n }\\`}\n >\n <div className=\"font-bold flex items-center gap-1.5\">\n {verificationResult === \"success\" ? (\n <>\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Correct Solution! +150 XP Awarded</span>\n </>\n ) : (\n <span>Incorrect Invariant. Review quorum overlap definitions.</span>\n )}\n </div>\n {verificationResult === \"success\" && (\n <p className=\"opacity-90 leading-relaxed\">\n Excellent! By requiring majority quorum consensus (⌊N/2⌋ + 1), any two quorums must intersect in at least one node, guaranteeing linearizability.\n </p>\n )}\n </motion.div>\n )}\n\n {/ Submit Action Button /}\n <div className=\"flex justify-between items-center pt-2\">\n <span className=\"text-xs opacity-60\">Reward: 150 XP • Skill: Raft Consensus</span>\n <button\n onClick={handleVerify}\n disabled={isVerifying \|\| selectedAnswer === null}\n className=\"px-6 py-2.5 rounded-xl font-bold text-xs text-white shadow-sm flex items-center gap-2 transition-transform active:scale-95\"\n \n >\n {isVerifying ? (\n <span>Validating Invariants...</span>\n ) : (\n <>\n <Play className=\"h-3.5 w-3.5 fill-current\" />\n <span>Run & Verify Solution</span>\n </>\n )}\n </button>\n </div>\n </div>\n </div>\n\n {/ Contribution Calendar Heatmap /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-3\"\n \n >\n <div className=\"flex justify-between items-center text-xs\">\n <span className=\"font-bold\">2026 Learning Activity Stream</span>\n <span className=\"opacity-60 font-mono\">148 lessons completed this year</span>\n </div>\n\n {/ Heatmap Grid /}\n <div className=\"grid grid-cols-12 sm:grid-cols-24 gap-1 pt-2\">\n {Array.from({ length: 48 }).map((_, i) => {\n const intensity = (i 7) % 5;\n const bg =\n intensity === 0\n ? \"opacity-15 bg-zinc-400\"\n : intensity === 1\n ? \"bg-emerald-500/30\"\n : intensity === 2\n ? \"bg-emerald-500/60\"\n : \"bg-emerald-500\";\n return (\n <div\n key={i}\n className={\\`h-3.5 rounded-sm \\${bg} transition-colors hover:scale-110\\`}\n title={\\`Day \\${i + 1}: \\${intensity * 3} exercises\\`}\n />\n );\n })}\n </div>\n </div>\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateConferenceEvent = {\n name: \"template-conference-event\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-conference-event.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Calendar,\n Clock,\n MapPin,\n Users,\n Ticket,\n Sparkles,\n ArrowRight,\n Check,\n ChevronDown,\n ChevronUp,\n Globe,\n ExternalLink,\n Mic,\n Video,\n Layers,\n Flame,\n CheckCircle2,\n} from \"lucide-react\";\n\nexport interface ConferenceEventTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function ConferenceEventTemplate({\n brandName = \"Vertex Summit 2027\",\n theme = \"dark\",\n}: ConferenceEventTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeDay, setActiveDay] = useState<\"day-1\" \| \"day-2\" \| \"day-3\">(\"day-1\");\n const [selectedTrack, setSelectedTrack] = useState<string>(\"All\");\n const [expandedSession, setExpandedSession] = useState<string \| null>(\"ses-1\");\n const [selectedTier, setSelectedTier] = useState<\"standard\" \| \"vip\" \| \"virtual\">(\"vip\");\n const [ticketQuantity, setTicketQuantity] = useState(2);\n const [checkoutToast, setCheckoutToast] = useState(false);\n\n const tracks = [\"All\", \"AI Systems\", \"UI Architecture\", \"Distributed Cloud\", \"Security\"];\n\n const sessions = [\n {\n id: \"ses-1\",\n day: \"day-1\",\n time: \"09:00 - 10:15 AM\",\n stage: \"Keynote Main Hall\",\n track: \"AI Systems\",\n title: \"Opening Keynote: Autonomous Inference Substrates at Global Edge\",\n speaker: \"Dr. Elena Vance\",\n role: \"VP of Research, Synthetix Labs\",\n synopsis:\n \"An architectural deep dive into compiling dynamic reasoning graphs across 350 distributed edge points with sub-10ms time-to-first-token.\",\n },\n {\n id: \"ses-2\",\n day: \"day-1\",\n time: \"10:45 - 11:45 AM\",\n stage: \"Stage B • Architecture\",\n track: \"UI Architecture\",\n title: \"Building Deterministic Design Systems for 100M+ Users\",\n speaker: \"Marcus Sterling\",\n role: \"Design Engineering Lead, Monolith\",\n synopsis:\n \"Techniques for eliminating layout shift, achieving sub-pixel optical balance, and implementing resilient dark/light mode token hierarchies.\",\n },\n {\n id: \"ses-3\",\n day: \"day-1\",\n time: \"01:30 - 02:45 PM\",\n stage: \"Stage C • Cloud\",\n track: \"Distributed Cloud\",\n title: \"Zero-Downtime Microsecond State Replication with Raft & eBPF\",\n speaker: \"Hiroshi Tanaka\",\n role: \"Principal Systems Architect, HyperMesh\",\n synopsis:\n \"High-performance kernel-bypass networking patterns for managing multi-region database clusters under peak burst traffic.\",\n },\n {\n id: \"ses-4\",\n day: \"day-2\",\n time: \"09:30 - 10:45 AM\",\n stage: \"Keynote Main Hall\",\n track: \"AI Systems\",\n title: \"Autonomous Agent Orchestration: Memory, Tools, and Safety Boundaries\",\n speaker: \"Aria Thorne\",\n role: \"Chief Scientist, Cortex Labs\",\n synopsis:\n \"Practical engineering strategies for agent self-correction, sandboxed execution pipelines, and deterministic verification.\",\n },\n {\n id: \"ses-5\",\n day: \"day-3\",\n time: \"11:00 - 12:15 PM\",\n stage: \"Main Stage\",\n track: \"Security\",\n title: \"Post-Quantum Cryptography & Zero-Knowledge Verification in Production\",\n speaker: \"Dr. Julian Croft\",\n role: \"Head of Cryptography, Apex Security\",\n synopsis:\n \"Transitioning enterprise production environments to quantum-resistant lattice primitives without latency penalties.\",\n },\n ];\n\n const filteredSessions = sessions.filter((s) => {\n const matchDay = s.day === activeDay;\n const matchTrack = selectedTrack === \"All\" \|\| s.track === selectedTrack;\n return matchDay && matchTrack;\n });\n\n const speakers = [\n {\n name: \"Dr. Elena Vance\",\n company: \"Synthetix Labs\",\n topic: \"Autonomous Edge Inference\",\n initials: \"EV\",\n color: \"bg-purple-600\",\n },\n {\n name: \"Marcus Sterling\",\n company: \"Studio Monolith\",\n topic: \"Deterministic Design Systems\",\n initials: \"MS\",\n color: \"bg-indigo-600\",\n },\n {\n name: \"Hiroshi Tanaka\",\n company: \"HyperMesh Systems\",\n topic: \"eBPF Kernel State Replication\",\n initials: \"HT\",\n color: \"bg-pink-600\",\n },\n {\n name: \"Aria Thorne\",\n company: \"Cortex Labs\",\n topic: \"Agent Pipeline Verification\",\n initials: \"AT\",\n color: \"bg-cyan-600\",\n },\n ];\n\n const passTiers = {\n standard: { name: \"Conference Pass\", price: 499, perks: [\"Access to all 3 stages\", \"Keynote recordings\", \"After-party access\"] },\n vip: { name: \"All-Access VIP\", price: 999, perks: [\"Reserved front-row seating\", \"VIP speaker lounge\", \"Private workshop tracks\", \"Gourmet catering & dinners\"] },\n virtual: { name: \"Global Virtual\", price: 149, perks: [\"4K low-latency livestreams\", \"Interactive chat Q&A\", \"Full session archive\"] },\n };\n\n const handleCheckout = (e: React.FormEvent) => {\n e.preventDefault();\n setCheckoutToast(true);\n setTimeout(() => setCheckoutToast(false), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Top Conference Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Calendar className=\"h-4 w-4\" />\n </div>\n <span\n className=\"font-black text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Vertex Summit 2027\"}\n </span>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\"\n \n >\n <MapPin className=\"h-3 w-3 text-purple-500\" />\n <span>San Francisco, CA</span>\n </div>\n\n <button\n onClick={() => {\n const el = document.getElementById(\"tickets-section\");\n el?.scrollIntoView({ behavior: \"smooth\" });\n }}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-bold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Claim Pass\n </button>\n </div>\n </div>\n </header>\n\n {/ Hero Section /}\n <section className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-16 text-center space-y-6\">\n <div className=\"inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-mono font-semibold bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20\">\n <Calendar className=\"h-3.5 w-3.5\" />\n <span>October 14–16, 2027 • Yerba Buena Center, San Francisco & Virtual</span>\n </div>\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight max-w-4xl mx-auto leading-tight\"\n \n >\n The Convergence of Autonomous Systems & Spatial Architecture\n </h1>\n\n <p className=\"text-sm sm:text-base opacity-75 max-w-2xl mx-auto leading-relaxed\">\n Gathering 4,500+ systems engineers, AI researchers, and digital product leaders to shape the foundations of high-velocity software.\n </p>\n\n {/ Live Countdown Clock /}\n <div className=\"flex items-center justify-center gap-2 sm:gap-4 pt-2\">\n {[\n { val: \"242\", label: \"Days\" },\n { val: \"14\", label: \"Hours\" },\n { val: \"38\", label: \"Minutes\" },\n { val: \"19\", label: \"Seconds\" },\n ].map((item) => (\n <div\n key={item.label}\n className=\"px-4 py-3 rounded-2xl border min-w-[70px] sm:min-w-[90px] text-center\"\n \n >\n <div className=\"text-xl sm:text-3xl font-black font-mono tracking-tight\">{item.val}</div>\n <div className=\"text-[10px] sm:text-xs opacity-60 uppercase tracking-wider font-semibold\">\n {item.label}\n </div>\n </div>\n ))}\n </div>\n </section>\n\n {/ Multi-Track Schedule Section /}\n <section className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6\">\n <div className=\"flex flex-col md:flex-row md:items-end justify-between gap-4 border-b pb-4\" >\n <div>\n <h2 className=\"text-xl sm:text-2xl font-black\">Interactive Conference Schedule</h2>\n <p className=\"text-xs opacity-65 mt-1\">Select dates and filter by engineering track.</p>\n </div>\n\n {/ Day Switcher /}\n <div\n className=\"inline-flex p-1 rounded-xl border text-xs\"\n \n >\n {[\n { id: \"day-1\", label: \"Day 1 (Oct 14)\" },\n { id: \"day-2\", label: \"Day 2 (Oct 15)\" },\n { id: \"day-3\", label: \"Day 3 (Oct 16)\" },\n ].map((d) => (\n <button\n key={d.id}\n onClick={() => setActiveDay(d.id as any)}\n className={\\`px-3.5 py-1.5 rounded-lg font-bold transition-all \\${\n activeDay === d.id\n ? \"bg-purple-600 text-white shadow-sm\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n >\n {d.label}\n </button>\n ))}\n </div>\n </div>\n\n {/ Track Filter Pills /}\n <div className=\"flex flex-wrap items-center gap-2\">\n {tracks.map((t) => (\n <button\n key={t}\n onClick={() => setSelectedTrack(t)}\n className={\\`px-3 py-1 rounded-full text-xs font-semibold border transition-all \\${\n selectedTrack === t\n ? \"bg-purple-500/20 text-purple-600 dark:text-purple-400 border-purple-500/40\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-70 hover:opacity-100\"\n }\\`}\n >\n {t}\n </button>\n ))}\n </div>\n\n {/ Sessions List /}\n <div className=\"space-y-3\">\n {filteredSessions.map((session) => {\n const isExpanded = expandedSession === session.id;\n return (\n <div\n key={session.id}\n className=\"p-4 sm:p-5 rounded-2xl border transition-colors space-y-3\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2\">\n <div className=\"flex items-center gap-3\">\n <span className=\"text-xs font-mono font-bold px-2.5 py-1 rounded-md bg-purple-500/10 text-purple-600 dark:text-purple-400\">\n {session.time}\n </span>\n <span className=\"text-xs font-semibold opacity-70\">{session.stage}</span>\n </div>\n <span className=\"text-[11px] font-mono px-2 py-0.5 rounded-full border border-zinc-300 dark:border-zinc-700 opacity-60 w-fit\">\n {session.track}\n </span>\n </div>\n\n <div className=\"flex items-start justify-between gap-4\">\n <div>\n <h3 className=\"font-bold text-sm sm:text-base leading-snug\">{session.title}</h3>\n <div className=\"text-xs opacity-75 mt-1\">\n <span className=\"font-semibold text-foreground\">{session.speaker}</span> • {session.role}\n </div>\n </div>\n\n <button\n onClick={() => setExpandedSession(isExpanded ? null : session.id)}\n className=\"p-1.5 rounded-xl border hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0\"\n \n aria-label=\"Toggle session synopsis\"\n >\n {isExpanded ? <ChevronUp className=\"h-4 w-4\" /> : <ChevronDown className=\"h-4 w-4\" />}\n </button>\n </div>\n\n {isExpanded && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n className=\"pt-2 border-t text-xs opacity-80 leading-relaxed\"\n \n >\n {session.synopsis}\n </motion.div>\n )}\n </div>\n );\n })}\n </div>\n </section>\n\n {/ Featured Keynote Speakers Grid /}\n <section className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-6\">\n <div>\n <h2 className=\"text-xl sm:text-2xl font-black\">Distinguished Keynote Speakers</h2>\n <p className=\"text-xs opacity-65 mt-1\">Leading researchers and infrastructure pioneers.</p>\n </div>\n\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n {speakers.map((spk) => (\n <div\n key={spk.name}\n className=\"p-4 rounded-2xl border space-y-3 text-center\"\n \n >\n <div\n className={\\`w-14 h-14 rounded-2xl text-white font-bold text-base flex items-center justify-center mx-auto shadow-md \\${spk.color}\\`}\n >\n {spk.initials}\n </div>\n <div>\n <div className=\"font-bold text-xs sm:text-sm\">{spk.name}</div>\n <div className=\"text-[11px] opacity-60 font-semibold\">{spk.company}</div>\n </div>\n <div className=\"text-[10px] opacity-75 font-mono border-t pt-2\" >\n {spk.topic}\n </div>\n </div>\n ))}\n </div>\n </section>\n\n {/ Ticket Tiers Section /}\n <section id=\"tickets-section\" className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-6\">\n <div className=\"text-center max-w-xl mx-auto\">\n <h2 className=\"text-2xl font-black\">Choose Your Summit Access</h2>\n <p className=\"text-xs opacity-65 mt-1\">In-person seats are limited to 4,500 attendees.</p>\n </div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n {([\"standard\", \"vip\", \"virtual\"] as const).map((tierKey) => {\n const tier = passTiers[tierKey];\n const isSelected = selectedTier === tierKey;\n\n return (\n <div\n key={tierKey}\n onClick={() => setSelectedTier(tierKey)}\n className={\\`p-6 rounded-2xl border cursor-pointer transition-all space-y-4 relative \\${\n isSelected ? \"ring-2 shadow-xl\" : \"opacity-85 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: isSelected ? \"#181a24\" : \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n borderRadius: \"0.75rem\",\n }}\n >\n {tierKey === \"vip\" && (\n <div className=\"absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider text-white bg-purple-600 shadow-sm\">\n Most Popular\n </div>\n )}\n\n <div>\n <h3 className=\"font-bold text-base\">{tier.name}</h3>\n <div className=\"text-3xl font-black font-mono my-2\">\n \\${tier.price} <span className=\"text-xs font-normal opacity-60\">/ attendee</span>\n </div>\n </div>\n\n <div className=\"space-y-2 text-xs opacity-80 border-t pt-4\" >\n {tier.perks.map((perk) => (\n <div key={perk} className=\"flex items-center gap-2\">\n <Check className=\"h-3.5 w-3.5 text-purple-500 shrink-0\" />\n <span>{perk}</span>\n </div>\n ))}\n </div>\n\n <button\n type=\"button\"\n className={\\`w-full py-2.5 rounded-xl font-bold text-xs transition-colors \\${\n isSelected\n ? \"bg-purple-600 text-white shadow-md\"\n : \"border border-zinc-300 dark:border-zinc-700 opacity-75\"\n }\\`}\n >\n {isSelected ? \"Selected\" : \"Select Pass\"}\n </button>\n </div>\n );\n })}\n </div>\n\n {/ Checkout Calculator summary /}\n <div\n className=\"p-6 rounded-2xl border max-w-xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4\"\n \n >\n <div>\n <div className=\"text-xs opacity-70\">\n Pass: <span className=\"font-bold text-foreground\">{passTiers[selectedTier].name}</span>\n </div>\n <div className=\"text-xl font-black font-mono mt-0.5\">\n \\${passTiers[selectedTier].price ticketQuantity}{\" \"}\n <span className=\"text-xs font-normal opacity-60\">({ticketQuantity} passes)</span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <div className=\"flex items-center border rounded-xl\" >\n <button\n onClick={() => setTicketQuantity(Math.max(1, ticketQuantity - 1))}\n className=\"px-3 py-1 text-sm font-bold opacity-70 hover:opacity-100\"\n >\n -\n </button>\n <span className=\"px-3 text-xs font-mono font-bold\">{ticketQuantity}</span>\n <button\n onClick={() => setTicketQuantity(ticketQuantity + 1)}\n className=\"px-3 py-1 text-sm font-bold opacity-70 hover:opacity-100\"\n >\n +\n </button>\n </div>\n\n <button\n onClick={handleCheckout}\n className=\"px-5 py-2.5 rounded-xl font-bold text-xs text-white shadow-md transition-transform active:scale-95\"\n \n >\n Register Passes\n </button>\n </div>\n </div>\n </section>\n\n {/* Confirmation Toast /}\n {checkoutToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-purple-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Reserved {ticketQuantity} × {passTiers[selectedTier].name}! Receipt sent to email.</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateAudioPodcast = {\n name: \"template-audio-podcast\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-audio-podcast.tsx\",\n content: `\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Headphones,\n Play,\n Pause,\n RotateCcw,\n RotateCw,\n Volume2,\n VolumeX,\n FastForward,\n Rewind,\n Bookmark,\n Share2,\n Search,\n Download,\n CheckCircle2,\n Radio,\n Clock,\n Sparkles,\n ChevronRight,\n ListMusic,\n FileText,\n Sliders,\n} from \"lucide-react\";\n\nexport interface AudioPodcastTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AudioPodcastTemplate({\n brandName = \"EchoWave Audio\",\n theme = \"dark\",\n}: AudioPodcastTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // Playback states\n const [isPlaying, setIsPlaying] = useState(false);\n const [playbackSpeed, setPlaybackSpeed] = useState<\"1.0x\" \| \"1.25x\" \| \"1.5x\" \| \"2.0x\">(\"1.0x\");\n const [currentSeconds, setCurrentSeconds] = useState(255); // 04:15\n const [totalSeconds] = useState(3260); // 54:20\n const [volume, setVolume] = useState(80);\n const [activeTab, setActiveTab] = useState<\"chapters\" \| \"transcript\" \| \"episodes\">(\"chapters\");\n const [transcriptSearch, setTranscriptSearch] = useState(\"\");\n const [downloadToast, setDownloadToast] = useState<string \| null>(null);\n\n // Playback ticker simulation\n useEffect(() => {\n let interval: any;\n if (isPlaying) {\n interval = setInterval(() => {\n setCurrentSeconds((prev) => (prev < totalSeconds ? prev + 1 : 0));\n }, 1000);\n }\n return () => clearInterval(interval);\n }, [isPlaying, totalSeconds]);\n\n const formatTime = (secs: number) => {\n const m = Math.floor(secs / 60);\n const s = secs % 60;\n return \\`\\${m.toString().padStart(2, \"0\")}:\\${s.toString().padStart(2, \"0\")}\\`;\n };\n\n const chapters = [\n { time: \"00:00\", secs: 0, title: \"Cold Open & Microbenchmark Disclosures\" },\n { time: \"04:15\", secs: 255, title: \"Why Ring Buffers Outperform Channel Primitives\" },\n { time: \"18:40\", secs: 1120, title: \"Kernel-Bypass Networking with io_uring\" },\n { time: \"34:25\", secs: 2065, title: \"Memory Allocation Invariants in High-Throughput Pipelines\" },\n { time: \"48:10\", secs: 2890, title: \"Audience Q&A: The Future of Edge WASM\" },\n ];\n\n const transcriptLines = [\n { time: \"04:15\", speaker: \"Host\", text: \"Welcome back. Today we're analyzing zero-cost abstractions with Linus M. Linus, let's start with lockless ring buffers.\" },\n { time: \"04:32\", speaker: \"Linus M.\", text: \"Right. Standard channel implementations incur severe context-switching overhead because of mutex arbitration. With a single-producer single-consumer circular buffer, memory barriers alone guarantee linearizability without kernel traps.\" },\n { time: \"05:10\", speaker: \"Host\", text: \"And that drops cache misses dramatically across modern x86 and ARM Neoverse cores.\" },\n { time: \"05:25\", speaker: \"Linus M.\", text: \"Precisely. In our benchmarks, throughput increased from 1.2M ops/sec to over 18.4M ops/sec under 100% saturation.\" },\n ];\n\n const episodes = [\n { ep: \"EP 148\", title: \"Zero-Cost Abstractions & Kernel Bypass\", date: \"Sep 08, 2026\", duration: \"54:20\", active: true },\n { ep: \"EP 147\", title: \"Compiling Vector Indexes Directly to NVMe\", date: \"Sep 01, 2026\", duration: \"48:15\" },\n { ep: \"EP 146\", title: \"The Distributed Systems Graveyard\", date: \"Aug 25, 2026\", duration: \"62:10\" },\n { ep: \"EP 145\", title: \"Formal Verification of Raft Invariants with TLA+\", date: \"Aug 18, 2026\", duration: \"51:40\" },\n ];\n\n const filteredTranscript = transcriptLines.filter((line) =>\n line.text.toLowerCase().includes(transcriptSearch.toLowerCase())\n );\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left pb-28\"\n \n >\n {/ Studio Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Headphones className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"EchoWave Audio\"}\n </span>\n <span className=\"hidden md:inline-block text-xs opacity-60 ml-2 font-mono\">\n • Systems Broadcast\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-mono font-semibold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 border-indigo-500/20\"\n >\n <Radio className=\"h-3 w-3 animate-pulse\" />\n <span>24-bit / 96kHz FLAC</span>\n </div>\n\n <button\n onClick={() => {\n setDownloadToast(\"Subscribed to RSS feed! Copied feed URL.\");\n setTimeout(() => setDownloadToast(null), 3000);\n }}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold border hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n >\n Subscribe RSS\n </button>\n </div>\n </div>\n </header>\n\n {/ Featured Episode Hero /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 space-y-6\">\n <div\n className=\"p-6 sm:p-8 rounded-3xl border flex flex-col md:flex-row items-center gap-6 sm:gap-8 relative overflow-hidden\"\n \n >\n {/ Episode Album Art Mockup /}\n <div className=\"w-36 h-36 sm:w-48 sm:h-48 rounded-2xl bg-gradient-to-tr from-indigo-900 via-violet-700 to-sky-500 flex flex-col justify-between p-4 text-white shadow-2xl shrink-0 relative group\">\n <div className=\"flex justify-between items-start\">\n <span className=\"text-[10px] font-mono tracking-widest font-bold uppercase opacity-80\">\n EchoWave\n </span>\n <span className=\"text-[10px] font-mono font-bold px-2 py-0.5 rounded-full bg-white/20\">\n EP 148\n </span>\n </div>\n\n <div className=\"space-y-1\">\n <div className=\"text-xs font-mono opacity-80\">Season 4</div>\n <div className=\"text-sm sm:text-base font-bold leading-tight\">Zero-Cost Abstractions</div>\n </div>\n\n <button\n onClick={() => setIsPlaying(!isPlaying)}\n className=\"absolute inset-0 bg-black/40 backdrop-blur-[2px] opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity rounded-2xl\"\n aria-label=\"Play or Pause\"\n >\n <div className=\"w-12 h-12 rounded-full bg-white text-black flex items-center justify-center shadow-lg\">\n {isPlaying ? <Pause className=\"h-6 w-6\" /> : <Play className=\"h-6 w-6 fill-current ml-0.5\" />}\n </div>\n </button>\n </div>\n\n {/ Episode Metadata & Synopsis /}\n <div className=\"space-y-3 flex-1 text-center md:text-left\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono font-semibold bg-indigo-500/10 text-indigo-600 dark:text-indigo-400\">\n <Clock className=\"h-3.5 w-3.5\" />\n <span>Released Sep 08, 2026 • 54 mins 20 secs</span>\n </div>\n\n <h1\n className=\"text-2xl sm:text-4xl font-extrabold tracking-tight\"\n \n >\n Zero-Cost Abstractions & Kernel-Bypass Pipelines\n </h1>\n\n <p className=\"text-xs sm:text-sm opacity-75 max-w-2xl leading-relaxed\">\n We interview Linus M. about dismantling memory barriers, squeezing 18M ops/second from lockless circular queues, and why traditional OS networking stacks fall short for high-frequency trading.\n </p>\n\n <div className=\"flex flex-wrap items-center justify-center md:justify-start gap-3 pt-2\">\n <button\n onClick={() => setIsPlaying(!isPlaying)}\n className=\"px-6 py-2.5 rounded-xl font-bold text-xs text-white shadow-md flex items-center gap-2 transition-transform active:scale-95\"\n \n >\n {isPlaying ? <Pause className=\"h-4 w-4\" /> : <Play className=\"h-4 w-4 fill-current\" />}\n <span>{isPlaying ? \"Pause Broadcast\" : \"Listen Episode (54m)\"}</span>\n </button>\n\n <button\n onClick={() => {\n setDownloadToast(\"Downloading episode audio (142MB FLAC)...\");\n setTimeout(() => setDownloadToast(null), 3000);\n }}\n className=\"px-4 py-2.5 rounded-xl text-xs font-semibold border hover:bg-black/5 dark:hover:bg-white/5 transition-colors flex items-center gap-1.5\"\n \n >\n <Download className=\"h-3.5 w-3.5\" />\n <span>Download Audio</span>\n </button>\n </div>\n </div>\n </div>\n\n {/ Tab Controls: Chapters, Interactive Transcript, Season Episodes /}\n <div\n className=\"flex items-center gap-2 border-b pb-2 text-xs font-semibold\"\n \n >\n {[\n { id: \"chapters\", label: \"Episode Chapters\", icon: ListMusic },\n { id: \"transcript\", label: \"Live Transcript\", icon: FileText },\n { id: \"episodes\", label: \"Season Archive\", icon: Headphones },\n ].map((tab) => {\n const IconComp = tab.icon;\n const isActive = activeTab === tab.id;\n return (\n <button\n key={tab.id}\n onClick={() => setActiveTab(tab.id as any)}\n className={\\`flex items-center gap-2 px-4 py-2 rounded-xl transition-all \\${\n isActive\n ? \"bg-indigo-600 text-white font-bold shadow-sm\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n >\n <IconComp className=\"h-3.5 w-3.5\" />\n <span>{tab.label}</span>\n </button>\n );\n })}\n </div>\n\n {/ Tab Content 1: Chapters /}\n {activeTab === \"chapters\" && (\n <div className=\"space-y-2.5\">\n {chapters.map((ch) => {\n const isCurrent = currentSeconds >= ch.secs && currentSeconds < ch.secs + 900;\n return (\n <div\n key={ch.time}\n onClick={() => {\n setCurrentSeconds(ch.secs);\n setIsPlaying(true);\n }}\n className={\\`p-4 rounded-xl border flex items-center justify-between cursor-pointer transition-all \\${\n isCurrent\n ? \"border-indigo-500 bg-indigo-500/10 font-bold\"\n : \"hover:border-zinc-400 opacity-80\"\n }\\`}\n style={{\n backgroundColor: isCurrent ? undefined : \"#12141c\",\n borderColor: isCurrent ? undefined : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center gap-3\">\n <span className=\"text-xs font-mono font-bold px-2.5 py-1 rounded bg-indigo-500/15 text-indigo-600 dark:text-indigo-400\">\n {ch.time}\n </span>\n <span className=\"text-xs sm:text-sm\">{ch.title}</span>\n </div>\n <ChevronRight className=\"h-4 w-4 opacity-40\" />\n </div>\n );\n })}\n </div>\n )}\n\n {/ Tab Content 2: Searchable Transcript /}\n {activeTab === \"transcript\" && (\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex justify-between items-center gap-4\">\n <div className=\"relative w-full max-w-sm\">\n <Search className=\"absolute left-3 top-2.5 h-3.5 w-3.5 opacity-50\" />\n <input\n type=\"text\"\n value={transcriptSearch}\n onChange={(e) => setTranscriptSearch(e.target.value)}\n placeholder=\"Search transcript phrases...\"\n className=\"w-full pl-8 pr-4 py-1.5 rounded-xl border text-xs bg-transparent outline-none\"\n \n />\n </div>\n <span className=\"text-xs opacity-60 font-mono hidden sm:inline\">Synchronized</span>\n </div>\n\n <div className=\"space-y-3 pt-2\">\n {filteredTranscript.map((t, idx) => (\n <div\n key={idx}\n className=\"p-3.5 rounded-xl border space-y-1 text-xs leading-relaxed\"\n \n >\n <div className=\"flex justify-between font-mono text-[11px] opacity-70\">\n <span className=\"font-bold text-indigo-600 dark:text-indigo-400\">{t.speaker}</span>\n <span>{t.time}</span>\n </div>\n <p className=\"opacity-85\">{t.text}</p>\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/ Tab Content 3: Season Episodes Archive /}\n {activeTab === \"episodes\" && (\n <div className=\"space-y-2.5\">\n {episodes.map((ep) => (\n <div\n key={ep.ep}\n className=\"p-4 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-mono font-bold text-indigo-600 dark:text-indigo-400\">{ep.ep}</span>\n <span className=\"font-bold text-xs sm:text-sm\">{ep.title}</span>\n </div>\n <div className=\"text-[11px] opacity-60 mt-0.5\">{ep.date} • {ep.duration}</div>\n </div>\n\n <button\n onClick={() => setIsPlaying(true)}\n className=\"p-2 rounded-xl border hover:bg-black/5 dark:hover:bg-white/5 transition-colors\"\n \n >\n <Play className=\"h-4 w-4\" />\n </button>\n </div>\n ))}\n </div>\n )}\n </main>\n\n {/ Persistent Audio Waveform Player Bar /}\n <div\n className=\"fixed bottom-0 inset-x-0 z-40 backdrop-blur-2xl border-t transition-colors shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"rgba(9, 10, 15, 0.94)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col md:flex-row items-center justify-between gap-3\">\n {/ Episode Snippet Info /}\n <div className=\"flex items-center gap-3 w-full md:w-auto\">\n <div className=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-800 to-purple-600 flex items-center justify-center text-white font-bold text-xs shrink-0\">\n EP148\n </div>\n <div className=\"truncate\">\n <div className=\"font-bold text-xs truncate\">Zero-Cost Abstractions</div>\n <div className=\"text-[10px] opacity-60 truncate\">Linus M. • EP 148</div>\n </div>\n </div>\n\n {/ Core Controls & Waveform /}\n <div className=\"flex flex-col items-center gap-1.5 w-full max-w-xl\">\n <div className=\"flex items-center gap-4\">\n <button\n onClick={() => setCurrentSeconds(Math.max(0, currentSeconds - 15))}\n className=\"opacity-70 hover:opacity-100\"\n title=\"Rewind 15s\"\n >\n <RotateCcw className=\"h-4 w-4\" />\n </button>\n\n <button\n onClick={() => setIsPlaying(!isPlaying)}\n className=\"w-9 h-9 rounded-full bg-indigo-600 text-white flex items-center justify-center shadow-md hover:scale-105 active:scale-95 transition-all\"\n >\n {isPlaying ? <Pause className=\"h-4 w-4\" /> : <Play className=\"h-4 w-4 fill-current ml-0.5\" />}\n </button>\n\n <button\n onClick={() => setCurrentSeconds(Math.min(totalSeconds, currentSeconds + 15))}\n className=\"opacity-70 hover:opacity-100\"\n title=\"Forward 15s\"\n >\n <RotateCw className=\"h-4 w-4\" />\n </button>\n\n {/ Speed Multiplier /}\n <button\n onClick={() => {\n const speeds: (\"1.0x\" \| \"1.25x\" \| \"1.5x\" \| \"2.0x\")[] = [\"1.0x\", \"1.25x\", \"1.5x\", \"2.0x\"];\n const nextIdx = (speeds.indexOf(playbackSpeed) + 1) % speeds.length;\n setPlaybackSpeed(speeds[nextIdx]);\n }}\n className=\"text-[10px] font-mono font-bold px-2 py-0.5 rounded-lg border opacity-80 hover:opacity-100\"\n \n >\n {playbackSpeed}\n </button>\n </div>\n\n {/ Scrubbable Waveform Visualizer /}\n <div className=\"w-full flex items-center gap-3\">\n <span className=\"text-[10px] font-mono opacity-60 w-10 text-right\">\n {formatTime(currentSeconds)}\n </span>\n\n {/ SVG Dynamic Waveform Bars /}\n <div className=\"flex-1 flex items-center gap-0.5 h-6 cursor-pointer\">\n {Array.from({ length: 45 }).map((_, i) => {\n const pct = (i / 45) totalSeconds;\n const isPassed = currentSeconds >= pct;\n const h = 6 + ((i * 11) % 18);\n return (\n <div\n key={i}\n onClick={() => setCurrentSeconds(Math.floor(pct))}\n className={\\`flex-1 rounded-full transition-all \\${\n isPassed ? \"bg-indigo-600\" : \"bg-zinc-300 dark:bg-zinc-700 opacity-60\"\n }\\`}\n style={{ height: \\`\\${h}px\\` }}\n />\n );\n })}\n </div>\n\n <span className=\"text-[10px] font-mono opacity-60 w-10\">\n {formatTime(totalSeconds)}\n </span>\n </div>\n </div>\n\n {/* Volume Slider /}\n <div className=\"hidden md:flex items-center gap-2\">\n <Volume2 className=\"h-4 w-4 opacity-60\" />\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={volume}\n onChange={(e) => setVolume(parseInt(e.target.value))}\n className=\"w-20 accent-indigo-600\"\n />\n </div>\n </div>\n </div>\n\n {/ Download Notification Toast /}\n {downloadToast && (\n <div className=\"fixed bottom-24 right-6 z-50 px-4 py-3 rounded-xl bg-indigo-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>{downloadToast}</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateRealEstate = {\n name: \"template-real-estate\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-real-estate.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Building2,\n Calendar,\n MapPin,\n Users,\n Compass,\n ShieldCheck,\n ChevronRight,\n Maximize2,\n CheckCircle2,\n Award,\n Sparkles,\n Layers,\n PhoneCall,\n X,\n Share2,\n Eye,\n} from \"lucide-react\";\n\nexport interface RealEstateTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function RealEstateTemplate({\n brandName = \"Haven Luxury Estates\",\n theme = \"dark\",\n}: RealEstateTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeFloorLevel, setActiveFloorLevel] = useState<\"level-1\" \| \"level-2\" \| \"terrace\">(\"level-1\");\n const [selectedHotspot, setSelectedHotspot] = useState<string>(\"suite\");\n const [nights, setNights] = useState(4);\n const [guests, setGuests] = useState(4);\n const [includeChef, setIncludeChef] = useState(true);\n const [isReserveModalOpen, setIsReserveModalOpen] = useState(false);\n const [reserveToast, setReserveToast] = useState(false);\n\n const baseRatePerNight = 2450;\n const chefServicePerNight = 650;\n const calculatedTotal =\n (baseRatePerNight + (includeChef ? chefServicePerNight : 0)) nights + 450; // 450 cleaning & concierge\n\n const floorPlans = {\n \"level-1\": {\n name: \"Level 1: Great Room & Culinary Pavilion\",\n area: \"4,200 sq.ft\",\n hotspots: [\n { id: \"suite\", name: \"Cantilevered Great Hall\", desc: \"Double-height 24ft glazing with direct mountain vistas and fireplace.\" },\n { id: \"kitchen\", name: \"Chef's Kitchen & Cellar\", desc: \"Custom Boffi cabinetry, Gaggenau 400 series, 1,200 bottle tasting cellar.\" },\n { id: \"pool\", name: \"Heated Black-Granite Pool\", desc: \"Zero-edge infinity pool extending 60 feet over the alpine canyon.\" },\n ],\n },\n \"level-2\": {\n name: \"Level 2: Master Sanctuary & Wellness Spa\",\n area: \"3,400 sq.ft\",\n hotspots: [\n { id: \"master\", name: \"Primary Master Suite\", desc: \"Private wrap-around cedar deck, freestanding soaking tub, dual dressing rooms.\" },\n { id: \"spa\", name: \"Finnish Sauna & Cold Plunge\", desc: \"Thermal hydrotherapy suite with mountain view sauna and steam grotto.\" },\n ],\n },\n terrace: {\n name: \"Terrace: Stargazing Deck & Helipad\",\n area: \"1,800 sq.ft\",\n hotspots: [\n { id: \"deck\", name: \"Stargazing Fire Table\", desc: \"Custom basalt gas fire table with heated lounge seating.\" },\n { id: \"helipad\", name: \"Private Aviation Helipad\", desc: \"FAA-certified private landing pad with lighted windsock and ground power.\" },\n ],\n },\n };\n\n const amenities = [\n { title: \"Heated Black-Granite Infinity Pool\", subtitle: \"Year-round 104°F alpine soak with cantilevered canyon views\" },\n { title: \"Direct Ski-in / Ski-out Access\", subtitle: \"Private heated gear locker connected to Aspen Mountain trails\" },\n { title: \"Dedicated Private Sommelier & Chef\", subtitle: \"Personalized seasonal menus paired with rare vintage reserves\" },\n { title: \"FAA-Certified Private Helipad\", subtitle: \"Direct executive helicopter arrivals from Aspen (ASE) or Denver (DEN)\" },\n ];\n\n const handleReserveSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsReserveModalOpen(false);\n setReserveToast(true);\n setTimeout(() => setReserveToast(false), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Editorial Luxury Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Building2 className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-serif text-sm sm:text-base tracking-widest uppercase font-light\"\n \n >\n {brandName \|\| \"Haven Luxury Estates\"}\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3 sm:gap-4\">\n <span className=\"hidden md:inline-block text-[11px] uppercase tracking-widest opacity-60 font-mono\">\n Aspen • Kyoto • Amalfi • Zurich\n </span>\n\n <button\n onClick={() => setIsReserveModalOpen(true)}\n className=\"px-4 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Inquire Residence\n </button>\n </div>\n </div>\n </header>\n\n {/ Property Hero Showcase /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-10\">\n <div className=\"space-y-4\">\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b pb-4\" >\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-mono tracking-wider uppercase opacity-60\">Architectural Residence #04</span>\n <span className=\"text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-semibold\">\n Available for Season\n </span>\n </div>\n <div className=\"flex items-center gap-2 text-xs opacity-75 font-mono\">\n <MapPin className=\"h-3.5 w-3.5 text-stone-500\" />\n <span>Red Mountain • Aspen Valley, Colorado</span>\n </div>\n </div>\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-6xl font-serif font-light tracking-tight leading-tight\"\n \n >\n The Obsidian Pavilion\n </h1>\n\n <p className=\"text-sm sm:text-base opacity-75 max-w-3xl leading-relaxed font-light\">\n Designed by studio Olson Kundig. A 9,400 sq.ft private alpine sanctuary crafted from charred Japanese cedar, raw board-formed concrete, and floor-to-ceiling guillotine glass walls overlooking the Continental Divide.\n </p>\n\n {/ Quick Specifications Strip /}\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2\">\n {[\n { label: \"Interior Living Area\", val: \"9,400 sq.ft\" },\n { label: \"Bedrooms & Suites\", val: \"5 Master Suites\" },\n { label: \"Bathrooms\", val: \"6 Full, 2 Half\" },\n { label: \"Private Estate Grounds\", val: \"14.2 Secluded Acres\" },\n ].map((spec) => (\n <div\n key={spec.label}\n className=\"p-3.5 rounded-xl border\"\n \n >\n <div className=\"text-[11px] opacity-60 uppercase tracking-wider\">{spec.label}</div>\n <div className=\"text-sm sm:text-base font-serif font-bold mt-0.5\">{spec.val}</div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Core Layout: Blueprint Viewer (7 Cols) + Reservation Calculator (5 Cols) /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\n {/ Architectural Floor Plan Viewer: 7 Cols /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4 shadow-sm\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3\">\n <div>\n <h2 className=\"font-serif text-base sm:text-lg font-bold\">Interactive Floor Plans</h2>\n <p className=\"text-xs opacity-65\">Explore blueprint levels and spatial room dimensions.</p>\n </div>\n\n {/ Level Switcher /}\n <div\n className=\"inline-flex p-1 rounded-xl border text-xs\"\n \n >\n {([\"level-1\", \"level-2\", \"terrace\"] as const).map((lvl) => (\n <button\n key={lvl}\n onClick={() => {\n setActiveFloorLevel(lvl);\n setSelectedHotspot(floorPlans[lvl].hotspots[0].id);\n }}\n className={\\`px-3 py-1 rounded-lg text-[11px] font-semibold transition-all \\${\n activeFloorLevel === lvl\n ? \"bg-stone-800 dark:bg-stone-200 text-white dark:text-black font-bold shadow-sm\"\n : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {lvl === \"level-1\" ? \"Level 1\" : lvl === \"level-2\" ? \"Level 2\" : \"Terrace\"}\n </button>\n ))}\n </div>\n </div>\n\n {/ Architectural Blueprint SVG Schematic /}\n <div\n className=\"w-full h-64 rounded-xl border p-4 relative flex flex-col justify-between overflow-hidden\"\n style={{\n backgroundColor: isDark ? \"#0d0f17\" : \"#f1f3f5\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex justify-between text-[11px] font-mono opacity-50\">\n <span>SCALE: 1/8\" = 1'-0\" • NORTH ↗</span>\n <span>{floorPlans[activeFloorLevel].area}</span>\n </div>\n\n {/ Hotspot Room Selector Buttons inside Blueprint schematic /}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 my-auto\">\n {floorPlans[activeFloorLevel].hotspots.map((spot) => (\n <button\n key={spot.id}\n onClick={() => setSelectedHotspot(spot.id)}\n className={\\`p-3 rounded-xl border text-left text-xs transition-all \\${\n selectedHotspot === spot.id\n ? \"border-amber-500 ring-2 ring-amber-500/20 bg-amber-500/10 font-bold\"\n : \"border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 bg-white/40 dark:bg-black/40\"\n }\\`}\n >\n <div className=\"font-semibold truncate\">{spot.name}</div>\n <div className=\"text-[10px] opacity-60 mt-0.5\">Inspect Spec →</div>\n </button>\n ))}\n </div>\n\n <div className=\"text-[10px] font-mono opacity-40 text-right\">\n ARCHITECTURAL ELEVATION: 8,420 FT ASL\n </div>\n </div>\n\n {/ Hotspot Detail Callout /}\n {(() => {\n const currentSpot = floorPlans[activeFloorLevel].hotspots.find(\n (s) => s.id === selectedHotspot\n ) \|\| floorPlans[activeFloorLevel].hotspots[0];\n return (\n <div\n className=\"p-4 rounded-xl border space-y-1 text-xs\"\n \n >\n <div className=\"font-bold text-sm text-foreground flex items-center gap-1.5\">\n <Sparkles className=\"h-3.5 w-3.5 text-amber-500\" />\n <span>{currentSpot.name}</span>\n </div>\n <p className=\"opacity-80 leading-relaxed font-light\">{currentSpot.desc}</p>\n </div>\n );\n })()}\n </div>\n\n {/ Curated Luxury Amenities /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <h3 className=\"font-serif text-base font-bold\">Estate Curations & Amenities</h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs\">\n {amenities.map((amenity) => (\n <div\n key={amenity.title}\n className=\"p-3.5 rounded-xl border space-y-1\"\n \n >\n <div className=\"font-bold\">{amenity.title}</div>\n <div className=\"text-[11px] opacity-70 font-light leading-relaxed\">\n {amenity.subtitle}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Stay Reservation Calculator: 5 Cols /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-6 rounded-2xl border space-y-6 shadow-md\"\n \n >\n <div className=\"border-b pb-4\">\n <div className=\"text-2xl sm:text-3xl font-serif font-bold\">\n \\${baseRatePerNight.toLocaleString()}{\" \"}\n <span className=\"text-xs font-sans font-normal opacity-60\">/ night</span>\n </div>\n <p className=\"text-xs opacity-65 mt-1 font-mono\">Minimum 3 nights stay required</p>\n </div>\n\n {/ Calculator Inputs /}\n <div className=\"space-y-4 text-xs\">\n {/ Nights slider /}\n <div className=\"space-y-2\">\n <div className=\"flex justify-between font-semibold\">\n <span>Stay Duration</span>\n <span className=\"font-mono text-sm\">{nights} Nights</span>\n </div>\n <input\n type=\"range\"\n min=\"3\"\n max=\"14\"\n value={nights}\n onChange={(e) => setNights(parseInt(e.target.value))}\n className=\"w-full accent-stone-800 dark:accent-stone-200\"\n />\n <div className=\"flex justify-between text-[10px] font-mono opacity-50\">\n <span>3 nights</span>\n <span>7 nights</span>\n <span>14 nights</span>\n </div>\n </div>\n\n {/ Guests counter /}\n <div className=\"space-y-2\">\n <div className=\"flex justify-between font-semibold\">\n <span>Accommodating Guests</span>\n <span className=\"font-mono text-sm\">{guests} Guests</span>\n </div>\n <div className=\"flex items-center justify-between border rounded-xl p-2\" >\n <span className=\"opacity-75\">Max 10 guests across 5 suites</span>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setGuests(Math.max(1, guests - 1))}\n className=\"w-7 h-7 rounded-lg border flex items-center justify-center font-bold text-sm\"\n \n >\n -\n </button>\n <span className=\"w-5 text-center font-mono font-bold\">{guests}</span>\n <button\n onClick={() => setGuests(Math.min(10, guests + 1))}\n className=\"w-7 h-7 rounded-lg border flex items-center justify-center font-bold text-sm\"\n \n >\n +\n </button>\n </div>\n </div>\n </div>\n\n {/ Add-on: Dedicated Private Chef /}\n <label\n className=\"p-3.5 rounded-xl border flex items-center justify-between cursor-pointer\"\n \n >\n <div>\n <div className=\"font-bold\">Private Michelin Chef Service</div>\n <div className=\"text-[11px] opacity-65 font-light\">Breakfast & 5-course dinner (+$650/night)</div>\n </div>\n <input\n type=\"checkbox\"\n checked={includeChef}\n onChange={(e) => setIncludeChef(e.target.checked)}\n className=\"w-4 h-4 rounded accent-stone-800\"\n />\n </label>\n\n {/ Cost Breakdown Ledger /}\n <div\n className=\"p-4 rounded-xl border space-y-2 text-xs font-mono\"\n \n >\n <div className=\"flex justify-between\">\n <span>Residence ({nights} nights)</span>\n <span>\\${(baseRatePerNight nights).toLocaleString()}</span>\n </div>\n {includeChef && (\n <div className=\"flex justify-between\">\n <span>Chef Service ({nights} nights)</span>\n <span>\\${(chefServicePerNight * nights).toLocaleString()}</span>\n </div>\n )}\n <div className=\"flex justify-between\">\n <span>Valet & Alpine Concierge</span>\n <span>$450</span>\n </div>\n <div className=\"border-t pt-2 flex justify-between font-bold text-sm font-sans\" >\n <span>Estimated Total Stay</span>\n <span>\\${calculatedTotal.toLocaleString()} USD</span>\n </div>\n </div>\n\n <button\n onClick={() => setIsReserveModalOpen(true)}\n className=\"w-full py-3.5 rounded-xl font-serif tracking-wide uppercase font-bold text-xs text-white shadow-lg transition-transform active:scale-[0.98]\"\n \n >\n Reserve Obsidian Pavilion\n </button>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/* Reservation Inquiry Modal /}\n {isReserveModalOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl space-y-4\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <span className=\"font-serif font-bold text-base\">Inquire: The Obsidian Pavilion</span>\n <button onClick={() => setIsReserveModalOpen(false)} className=\"opacity-70 hover:opacity-100\">\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <form onSubmit={handleReserveSubmit} className=\"space-y-3 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Full Name</label>\n <input\n type=\"text\"\n defaultValue=\"Lord & Lady Sterling\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Private Email Address</label>\n <input\n type=\"email\"\n defaultValue=\"sterling@monolith.ch\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div className=\"p-3 rounded-xl border text-[11px] font-mono opacity-80\" >\n Selected: {nights} Nights • {guests} Guests • Estimated Quote: \\${calculatedTotal.toLocaleString()} USD\n </div>\n\n <div className=\"flex gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsReserveModalOpen(false)}\n className=\"flex-1 py-2.5 rounded-xl border font-semibold opacity-75\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 py-2.5 rounded-xl font-serif font-bold uppercase tracking-wider text-white bg-stone-900 dark:bg-stone-100 dark:text-stone-900\"\n >\n Submit Inquiry\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n\n {/ Confirmation Toast /}\n {reserveToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-stone-900 text-white text-xs font-serif font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-emerald-400\" />\n <span>Inquiry received. Private concierge will call within 2 hours.</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateUptimeStatus = {\n name: \"template-uptime-status\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-uptime-status.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n CheckCircle2,\n AlertTriangle,\n Globe,\n Bell,\n ShieldCheck,\n Clock,\n Server,\n Activity,\n ArrowRight,\n ExternalLink,\n ChevronDown,\n X,\n Send,\n Zap,\n} from \"lucide-react\";\n\nexport interface UptimeStatusTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function UptimeStatusTemplate({\n brandName = \"Beacon Status\",\n theme = \"dark\",\n}: UptimeStatusTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [hoveredDay, setHoveredDay] = useState<{ service: string; day: number; uptime: string } \| null>(null);\n const [isSubscribeOpen, setIsSubscribeOpen] = useState(false);\n const [subscribeEmail, setSubscribeEmail] = useState(\"\");\n const [subscribedToast, setSubscribedToast] = useState(false);\n\n const services = [\n {\n name: \"Global Anycast Edge CDN & Ingress\",\n category: \"Routing & CDN\",\n uptime: \"100.0%\",\n latency: \"11ms\",\n status: \"Operational\",\n incidentDays: [] as number[],\n },\n {\n name: \"Authentication & OAuth SSO Engine\",\n category: \"Security\",\n uptime: \"99.99%\",\n latency: \"24ms\",\n status: \"Operational\",\n incidentDays: [22],\n },\n {\n name: \"Distributed Vector Indexing Pipeline\",\n category: \"Compute\",\n uptime: \"99.97%\",\n latency: \"38ms\",\n status: \"Operational\",\n incidentDays: [54],\n },\n {\n name: \"Transaction Database Clusters (Postgres)\",\n category: \"Storage\",\n uptime: \"99.95%\",\n latency: \"14ms\",\n status: \"Operational\",\n incidentDays: [12, 68],\n },\n {\n name: \"Asynchronous Webhook & Queue Workers\",\n category: \"Integration\",\n uptime: \"99.99%\",\n latency: \"18ms\",\n status: \"Operational\",\n incidentDays: [] as number[],\n },\n ];\n\n const regions = [\n { region: \"US-East (N. Virginia)\", ping: \"12ms\", load: \"18%\", status: \"Optimal\" },\n { region: \"US-West (Oregon)\", ping: \"22ms\", load: \"24%\", status: \"Optimal\" },\n { region: \"EU-Central (Frankfurt)\", ping: \"16ms\", load: \"32%\", status: \"Optimal\" },\n { region: \"AP-East (Tokyo)\", ping: \"38ms\", load: \"28%\", status: \"Optimal\" },\n { region: \"SA-East (São Paulo)\", ping: \"78ms\", load: \"14%\", status: \"Optimal\" },\n { region: \"AP-South (Singapore)\", ping: \"44ms\", load: \"21%\", status: \"Optimal\" },\n ];\n\n const handleSubscribe = (e: React.FormEvent) => {\n e.preventDefault();\n if (!subscribeEmail) return;\n setIsSubscribeOpen(false);\n setSubscribedToast(true);\n setTimeout(() => setSubscribedToast(false), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Activity className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Beacon Status\"}\n </span>\n <span className=\"hidden md:inline-block text-xs opacity-60 ml-2 font-mono\">\n • Public Availability Telemetry\n </span>\n </div>\n </div>\n\n <button\n onClick={() => setIsSubscribeOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Bell className=\"h-3.5 w-3.5\" />\n <span>Subscribe to Alerts</span>\n </button>\n </div>\n </header>\n\n {/ Main Status Portal Body /}\n <main className=\"w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8\">\n {/ System Availability Status Hero Banner /}\n <div\n className=\"p-5 sm:p-6 rounded-2xl border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-sm\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: \"rgba(16, 185, 129, 0.3)\",\n borderRadius: \"0.75rem\",\n }}\n >\n <div className=\"flex items-center gap-3.5\">\n <div className=\"w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0\">\n <CheckCircle2 className=\"h-6 w-6\" />\n </div>\n <div>\n <h1 className=\"font-bold text-base sm:text-lg\">All Core Systems Fully Operational</h1>\n <p className=\"text-xs opacity-75 mt-0.5\">\n 99.994% overall uptime across 35 edge regions over the last 90 days.\n </p>\n </div>\n </div>\n\n <div className=\"text-left sm:text-right border-t sm:border-t-0 pt-3 sm:pt-0 w-full sm:w-auto\" >\n <div className=\"text-[11px] font-mono opacity-60\">Automated Probes: Every 30s</div>\n <div className=\"text-xs font-bold text-emerald-600 dark:text-emerald-400\">Zero Unresolved Incidents</div>\n </div>\n </div>\n\n {/ 90-Day Component Uptime Grid /}\n <section className=\"space-y-4\">\n <div className=\"flex justify-between items-center\">\n <h2 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Server className=\"h-4 w-4 text-emerald-500\" />\n <span>Core Service Availability (Past 90 Days)</span>\n </h2>\n <span className=\"text-xs font-mono opacity-60 hidden sm:inline\">Hover on bars for daily log</span>\n </div>\n\n <div className=\"space-y-3\">\n {services.map((svc) => (\n <div\n key={svc.name}\n className=\"p-4 rounded-2xl border space-y-3\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 text-xs\">\n <div>\n <span className=\"font-bold text-sm text-foreground\">{svc.name}</span>\n <span className=\"text-xs opacity-60 ml-2 font-mono\">({svc.category})</span>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <span className=\"font-mono text-[11px] opacity-70\">Latency: {svc.latency}</span>\n <span className=\"font-mono font-bold text-emerald-600 dark:text-emerald-400\">\n {svc.uptime}\n </span>\n </div>\n </div>\n\n {/ 90-Day Bar Strip /}\n <div className=\"flex items-center gap-0.5 h-7\">\n {Array.from({ length: 90 }).map((_, dayIdx) => {\n const hasIncident = svc.incidentDays.includes(dayIdx);\n const barColor = hasIncident\n ? \"bg-amber-500 hover:bg-amber-400\"\n : \"bg-emerald-500/80 hover:bg-emerald-400\";\n return (\n <div\n key={dayIdx}\n onMouseEnter={() =>\n setHoveredDay({\n service: svc.name,\n day: 90 - dayIdx,\n uptime: hasIncident ? \"99.82% (Minor incident resolved)\" : \"100.0% Optimal\",\n })\n }\n onMouseLeave={() => setHoveredDay(null)}\n className={\\`flex-1 h-full rounded-sm transition-transform hover:scale-125 cursor-pointer \\${barColor}\\`}\n />\n );\n })}\n </div>\n\n <div className=\"flex justify-between text-[10px] font-mono opacity-50 pt-1\">\n <span>90 days ago</span>\n <span>45 days ago</span>\n <span>Today (100% Operational)</span>\n </div>\n </div>\n ))}\n </div>\n\n {/ Hover tooltip readout /}\n {hoveredDay && (\n <div\n className=\"p-3 rounded-xl border text-xs font-mono flex items-center justify-between bg-emerald-500/10 border-emerald-500/20 text-emerald-800 dark:text-emerald-300\"\n >\n <span>{hoveredDay.service} • {hoveredDay.day} days ago</span>\n <span className=\"font-bold\">{hoveredDay.uptime}</span>\n </div>\n )}\n </section>\n\n {/ Global Regional Latency Monitor Grid /}\n <section className=\"space-y-4\">\n <div className=\"flex justify-between items-center\">\n <h2 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Globe className=\"h-4 w-4 text-emerald-500\" />\n <span>Global Regional Latency Probes</span>\n </h2>\n <span className=\"text-xs font-mono opacity-60\">Real-time ICMP ping telemetry</span>\n </div>\n\n <div className=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n {regions.map((r) => (\n <div\n key={r.region}\n className=\"p-3.5 rounded-xl border space-y-1.5\"\n \n >\n <div className=\"flex justify-between items-center text-xs\">\n <span className=\"font-bold truncate\">{r.region}</span>\n <span className=\"text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-bold\">\n {r.status}\n </span>\n </div>\n <div className=\"flex justify-between items-baseline text-xs font-mono\">\n <span className=\"text-lg font-black text-foreground\">{r.ping}</span>\n <span className=\"text-[11px] opacity-60\">CPU: {r.load}</span>\n </div>\n </div>\n ))}\n </div>\n </section>\n\n {/ Recent Past Incident Response Log /}\n <section className=\"space-y-4\">\n <h2 className=\"font-bold text-sm sm:text-base flex items-center gap-2\">\n <Clock className=\"h-4 w-4 text-emerald-500\" />\n <span>Incident Response History</span>\n </h2>\n\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-4\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 border-b pb-3\" >\n <div>\n <span className=\"text-xs font-mono font-bold text-amber-500\">INC-4829</span>\n <h3 className=\"font-bold text-sm mt-0.5\">Elevated Connection Pool Latency on Postgres Read-Replica</h3>\n </div>\n <span className=\"text-xs font-mono px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-bold w-fit\">\n Resolved in 14m\n </span>\n </div>\n\n <div className=\"space-y-3 text-xs opacity-85 leading-relaxed pl-3 border-l-2 border-emerald-500\">\n <div>\n <span className=\"font-bold text-foreground\">14:22 UTC - Resolved:</span> Automatic failover triggered to secondary multi-AZ replica. Latency normalized to 14ms.\n </div>\n <div>\n <span className=\"font-bold text-foreground\">14:12 UTC - Monitoring:</span> Traffic drained from degraded node. Verification telemetry stable.\n </div>\n <div>\n <span className=\"font-bold text-foreground\">14:08 UTC - Investigating:</span> SRE team paged. Query queue depth elevated on us-east cluster.\n </div>\n </div>\n </div>\n </section>\n </main>\n\n {/ Subscription Modal /}\n {isSubscribeOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl space-y-4\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <span className=\"font-bold text-base\">Subscribe to Incident Alerts</span>\n <button onClick={() => setIsSubscribeOpen(false)} className=\"opacity-70 hover:opacity-100\">\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <form onSubmit={handleSubscribe} className=\"space-y-3 text-xs\">\n <p className=\"opacity-75 leading-relaxed\">\n Receive immediate dispatch notifications whenever an incident is reported, updated, or resolved.\n </p>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Email or Slack Webhook URL</label>\n <input\n type=\"email\"\n required\n placeholder=\"sre-alerts@company.com\"\n value={subscribeEmail}\n onChange={(e) => setSubscribeEmail(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div className=\"flex gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsSubscribeOpen(false)}\n className=\"flex-1 py-2.5 rounded-xl border font-semibold opacity-75\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 py-2.5 rounded-xl font-bold text-white bg-emerald-600 hover:bg-emerald-500 shadow-sm\"\n >\n Subscribe\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n\n {/ Confirmation Toast /}\n {subscribedToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-emerald-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Subscribed to Beacon Status notifications!</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateAgentWorkflow = {\n name: \"template-agent-workflow\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-agent-workflow.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Network,\n Play,\n Sliders,\n CheckCircle2,\n GitBranch,\n Cpu,\n Database,\n Send,\n Plus,\n RefreshCw,\n X,\n Sparkles,\n Zap,\n Code2,\n Settings,\n ChevronRight,\n Terminal,\n Activity,\n Layers,\n} from \"lucide-react\";\n\nexport interface AgentWorkflowTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AgentWorkflowTemplate({\n brandName = \"Nexus Nodes\",\n theme = \"dark\",\n}: AgentWorkflowTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeRecipe, setActiveRecipe] = useState<\"support\" \| \"finance\" \| \"lead\">(\"support\");\n const [selectedNodeId, setSelectedNodeId] = useState<string>(\"node-llm\");\n const [isRunning, setIsRunning] = useState(false);\n const [activeStepIndex, setActiveStepIndex] = useState<number \| null>(null);\n const [temperature, setTemperature] = useState(0.2);\n const [modelChoice, setModelChoice] = useState(\"Claude 3.5 Sonnet\");\n const [logs, setLogs] = useState<string[]>([\n \"✓ Canvas initialized. 4 nodes mounted. Latency baseline: 2ms.\",\n ]);\n\n const nodes = [\n {\n id: \"node-trigger\",\n title: \"Webhook Ingress\",\n category: \"Trigger\",\n icon: Zap,\n color: \"border-amber-500 text-amber-500\",\n bg: \"bg-amber-500/10\",\n details: \"POST /v1/incoming-inquiry\",\n meta: \"Payload: JSON Schema 2.0\",\n },\n {\n id: \"node-rag\",\n title: \"Vector DB Retrieval\",\n category: \"Knowledge Tool\",\n icon: Database,\n color: \"border-cyan-500 text-cyan-500\",\n bg: \"bg-cyan-500/10\",\n details: \"Pinecone: support-kb-v4\",\n meta: \"Top K: 5 • Cosine Threshold: 0.86\",\n },\n {\n id: \"node-llm\",\n title: \"Reasoning LLM\",\n category: \"Model Engine\",\n icon: Cpu,\n color: \"border-blue-500 text-blue-500\",\n bg: \"bg-blue-500/10\",\n details: modelChoice,\n meta: \\`Temp: \\${temperature} • Max: 1,024 toks\\`,\n },\n {\n id: \"node-dispatch\",\n title: \"Action Dispatcher\",\n category: \"Output Tool\",\n icon: Send,\n color: \"border-emerald-500 text-emerald-500\",\n bg: \"bg-emerald-500/10\",\n details: \"Zendesk & Slack Webhook\",\n meta: \"Route: #support-escalations\",\n },\n ];\n\n const handleRunPipeline = () => {\n setIsRunning(true);\n setActiveStepIndex(0);\n setLogs([\"[00:00] Initializing workflow execution...\"]);\n\n setTimeout(() => {\n setActiveStepIndex(1);\n setLogs((prev) => [...prev, \"[00:18] Webhook event received. Parsing customer payload...\"]);\n setTimeout(() => {\n setActiveStepIndex(2);\n setLogs((prev) => [\n ...prev,\n \"[00:94] Vector search complete. 5 knowledge chunks fetched from Pinecone.\",\n ]);\n setTimeout(() => {\n setActiveStepIndex(3);\n setLogs((prev) => [\n ...prev,\n \\`[04:20] \\${modelChoice} synthesized resolution with 420 reasoning tokens.\\`,\n ]);\n setTimeout(() => {\n setIsRunning(false);\n setActiveStepIndex(null);\n setLogs((prev) => [\n ...prev,\n \"✓ [05:10] Workflow finished! Response delivered to Zendesk ticket #4910.\",\n ]);\n }, 800);\n }, 1100);\n }, 700);\n }, 600);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Studio Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <GitBranch className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Nexus Nodes\"}\n </span>\n <span className=\"hidden md:inline-block text-xs opacity-60 ml-2 font-mono\">\n • Visual Agent Orchestrator\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <button\n onClick={handleRunPipeline}\n disabled={isRunning}\n className=\"px-4 py-2 rounded-xl text-xs font-bold text-white shadow-md flex items-center gap-2 transition-transform active:scale-95\"\n style={{\n backgroundColor: isRunning ? \"#2563eb\" : \"#6366f1\",\n borderRadius: \"0.75rem\",\n }}\n >\n {isRunning ? (\n <>\n <RefreshCw className=\"h-3.5 w-3.5 animate-spin\" />\n <span>Executing Pipeline...</span>\n </>\n ) : (\n <>\n <Play className=\"h-3.5 w-3.5 fill-current\" />\n <span>Test Run Workflow</span>\n </>\n )}\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Canvas Workspace /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Pipeline Control Toolbar /}\n <div\n className=\"p-4 rounded-2xl border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3\"\n \n >\n <div className=\"flex items-center gap-2 text-xs\">\n <span className=\"font-semibold opacity-70\">Preset Workflow:</span>\n <div\n className=\"inline-flex p-0.5 rounded-xl border\"\n \n >\n {[\n { id: \"support\", label: \"Support Auto-Triage\" },\n { id: \"finance\", label: \"Doc Extractor\" },\n { id: \"lead\", label: \"Lead Scoring\" },\n ].map((rec) => (\n <button\n key={rec.id}\n onClick={() => setActiveRecipe(rec.id as any)}\n className={\\`px-3 py-1 rounded-lg font-medium transition-all \\${\n activeRecipe === rec.id\n ? \"bg-blue-600 text-white font-bold shadow-sm\"\n : \"opacity-70 hover:opacity-100\"\n }\\`}\n >\n {rec.label}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 text-xs font-mono opacity-60\">\n <span>Canvas Status: Operational</span>\n <span>•</span>\n <span>4 Active Nodes</span>\n </div>\n </div>\n\n {/ Visual Graph Nodes Flow + Parameter Inspector /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Node Canvas Area: 8 Cols /}\n <div className=\"lg:col-span-8 space-y-6\">\n <div\n className=\"p-6 sm:p-8 rounded-3xl border relative overflow-hidden min-h-[420px] flex flex-col justify-between\"\n style={{\n backgroundColor: isDark ? \"#090a10\" : \"#f8fafc\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundImage: \\`radial-gradient(\\${isDark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\"} 1px, transparent 1px)\\`,\n backgroundSize: \"24px 24px\",\n }}\n >\n <div className=\"flex justify-between items-center text-xs opacity-60 font-mono\">\n <span>CANVAS: ORCHESTRATION GRAPH</span>\n <span>EXECUTION: SERIAL SYNCHRONOUS</span>\n </div>\n\n {/ Connected Nodes Flow Sequence /}\n <div className=\"flex flex-col sm:flex-row items-center justify-between gap-3 my-auto py-6\">\n {nodes.map((node, index) => {\n const IconComp = node.icon;\n const isSelected = selectedNodeId === node.id;\n const isCurrentlyExecuting = activeStepIndex === index;\n\n return (\n <React.Fragment key={node.id}>\n {/ Node Card /}\n <button\n onClick={() => setSelectedNodeId(node.id)}\n className={\\`w-full sm:w-44 p-4 rounded-2xl border text-left transition-all relative \\${\n isCurrentlyExecuting\n ? \"ring-4 ring-blue-500 scale-105 shadow-xl bg-blue-500/20\"\n : isSelected\n ? \"ring-2 ring-blue-500 shadow-md\"\n : \"hover:border-zinc-400\"\n }\\`}\n style={{\n backgroundColor: isSelected\n ? \"#181a24\"\n : \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2\">\n <div className={\\`p-1.5 rounded-lg \\${node.bg} \\${node.color}\\`}>\n <IconComp className=\"h-4 w-4\" />\n </div>\n <span className=\"text-[10px] font-mono opacity-60\">{node.category}</span>\n </div>\n\n <div className=\"font-bold text-xs sm:text-sm truncate\">{node.title}</div>\n <div className=\"text-[11px] opacity-75 font-mono truncate mt-0.5\">{node.details}</div>\n </button>\n\n {/ Connecting Cable Connector Indicator /}\n {index < nodes.length - 1 && (\n <div className=\"flex items-center justify-center my-1 sm:my-0\">\n <div\n className={\\`w-6 h-0.5 sm:w-8 transition-colors \\${\n activeStepIndex !== null && activeStepIndex > index\n ? \"bg-blue-500 shadow-sm\"\n : \"bg-zinc-300 dark:bg-zinc-700\"\n }\\`}\n />\n </div>\n )}\n </React.Fragment>\n );\n })}\n </div>\n\n <div className=\"flex justify-between items-center text-xs opacity-60\">\n <span>Tip: Click any node to configure parameters in inspector.</span>\n <span className=\"font-mono\">Node ID: {selectedNodeId}</span>\n </div>\n </div>\n\n {/ Live Pipeline Execution Terminal Console /}\n <div\n className=\"p-5 rounded-2xl border space-y-2 font-mono text-xs\"\n style={{\n backgroundColor: isDark ? \"#06070a\" : \"#0f172a\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#e2e8f0\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b border-white/10 text-[11px] opacity-60\">\n <span className=\"flex items-center gap-1.5\">\n <Terminal className=\"h-3.5 w-3.5 text-blue-400\" />\n <span>Pipeline Execution Telemetry</span>\n </span>\n <span>Stream Active</span>\n </div>\n\n <div className=\"space-y-1 pt-1 max-h-36 overflow-y-auto\">\n {logs.map((log, idx) => (\n <div key={idx} className=\"leading-relaxed opacity-90\">\n {log}\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Parameter Inspector Sidebar Drawer: 4 Cols /}\n <div className=\"lg:col-span-4 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5 shadow-sm\"\n \n >\n <div className=\"border-b pb-3\">\n <div className=\"text-xs uppercase font-mono tracking-wider opacity-60\">Node Parameters</div>\n <h3 className=\"font-bold text-base mt-0.5\">\n {nodes.find((n) => n.id === selectedNodeId)?.title}\n </h3>\n </div>\n\n {selectedNodeId === \"node-llm\" ? (\n <div className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Foundation Model</label>\n <select\n value={modelChoice}\n onChange={(e) => setModelChoice(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n >\n <option value=\"Claude 3.5 Sonnet\">Claude 3.5 Sonnet (Anthropic)</option>\n <option value=\"DeepSeek R1\">DeepSeek R1 (Reasoning)</option>\n <option value=\"GPT-4o Omnimodal\">GPT-4o (OpenAI)</option>\n </select>\n </div>\n\n <div>\n <div className=\"flex justify-between font-semibold mb-1 opacity-80\">\n <span>Sampling Temperature</span>\n <span className=\"font-mono\">{temperature}</span>\n </div>\n <input\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value={temperature}\n onChange={(e) => setTemperature(parseFloat(e.target.value))}\n className=\"w-full accent-blue-600\"\n />\n <div className=\"flex justify-between text-[10px] opacity-50 font-mono\">\n <span>Deterministic (0.0)</span>\n <span>Creative (1.0)</span>\n </div>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">System Directive</label>\n <textarea\n rows={3}\n defaultValue=\"Analyze customer ticket intent, cross-reference Pinecone vectors, and generate concise verified resolution.\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none text-xs leading-relaxed\"\n \n />\n </div>\n </div>\n ) : selectedNodeId === \"node-rag\" ? (\n <div className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Vector Index</label>\n <input\n type=\"text\"\n defaultValue=\"support-kb-v4\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none font-mono\"\n \n />\n </div>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Similarity Threshold (Cosine)</label>\n <input\n type=\"text\"\n defaultValue=\"0.86\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none font-mono\"\n \n />\n </div>\n </div>\n ) : (\n <div className=\"space-y-3 text-xs opacity-75 leading-relaxed\">\n <p>Standard configuration active for {selectedNodeId}. All payload schema validations passing.</p>\n </div>\n )}\n\n <div className=\"border-t pt-4\">\n <button\n onClick={handleRunPipeline}\n className=\"w-full py-2.5 rounded-xl font-bold text-xs text-white bg-blue-600 hover:bg-blue-500 shadow-sm\"\n >\n Apply & Run Node\n </button>\n </div>\n </div>\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateRestaurantCulinary = {\n name: \"template-restaurant-culinary\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-restaurant-culinary.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Utensils,\n Calendar,\n Users,\n Clock,\n Award,\n Sparkles,\n ChevronRight,\n MapPin,\n CheckCircle2,\n Wine,\n Leaf,\n X,\n PhoneCall,\n Heart,\n} from \"lucide-react\";\n\nexport interface RestaurantCulinaryTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function RestaurantCulinaryTemplate({\n brandName = \"Komorebi Dining\",\n theme = \"dark\",\n}: RestaurantCulinaryTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeMenuTab, setActiveMenuTab] = useState<\"omakase\" \| \"autumn\" \| \"vegetal\">(\"autumn\");\n const [selectedDietary, setSelectedDietary] = useState<string>(\"All\");\n const [partySize, setPartySize] = useState(2);\n const [selectedDate, setSelectedDate] = useState(\"Fri, Sep 18\");\n const [selectedTime, setSelectedTime] = useState(\"19:30\");\n const [seatingArea, setSeatingArea] = useState(\"hinoki\");\n const [isReserveModalOpen, setIsReserveModalOpen] = useState(false);\n const [reserveToast, setReserveToast] = useState(false);\n\n const coursesData = {\n autumn: [\n {\n course: \"Course I • Amuse\",\n dish: \"Hokkaido Sea Urchin & Dashi Tartlet\",\n desc: \"Smoked seaweed sablé, finger lime pearls, dashi reduction\",\n pairing: \"Krug Grande Cuvée 170th Edition\",\n tags: [\"Chef Signature\"],\n },\n {\n course: \"Course II • Cold Ocean\",\n dish: \"Wild Shima-Aji & Foraged Matsutake\",\n desc: \"Dry-aged striped jack sashimi, compressed persimmon, fermented shiso vinaigrette\",\n pairing: \"Kokuryu Ishidaya Daiginjo Sake\",\n tags: [\"Gluten-Free Available\"],\n },\n {\n course: \"Course III • Earth & Fire\",\n dish: \"A5 Miyazaki Wagyu Tenderloin\",\n desc: \"Binchotan charcoal sear, glazed autumn chanterelles, black garlic jus\",\n pairing: \"2018 Domaine de la Romanée-Conti Corton\",\n tags: [\"Chef Signature\"],\n },\n {\n course: \"Course IV • Dessert\",\n dish: \"Roasted White Truffle & Hojicha Gelato\",\n desc: \"Smoked caramel tuile, Piedmont white truffle shavings, single-origin matcha crumble\",\n pairing: \"Iced Kyoto Ceremonial Uji Gyokuro\",\n tags: [\"Vegetarian Safe\"],\n },\n ],\n omakase: [\n {\n course: \"Course I\",\n dish: \"Chawanmushi with Bluefin Otoro & Caviar\",\n desc: \"Silken egg custard, Oscietra royal reserve caviar\",\n pairing: \"Dom Pérignon Vintage 2013\",\n tags: [\"Chef Signature\"],\n },\n {\n course: \"Course II\",\n dish: \"Charcoal-Grilled Black Cod & Saikyo Miso\",\n desc: \"Caramelized 72-hour Kyoto white miso marinade, pickled ginger root\",\n pairing: \"Isojiman Naka-dori Daiginjo\",\n tags: [\"Gluten-Free Available\"],\n },\n ],\n vegetal: [\n {\n course: \"Course I\",\n dish: \"Heirloom Beet Tartare & Roasted Sesame Emulsion\",\n desc: \"Charred baby leeks, aged tamari pearls, puffed buckwheat\",\n pairing: \"Bio-dynamic Alsace Riesling Grand Cru\",\n tags: [\"Vegetarian Safe\"],\n },\n {\n course: \"Course II\",\n dish: \"Braised Wild Mountain Yam & Black Truffle\",\n desc: \"Nagaimo braised in kombu dashi, shaved Périgord winter truffle\",\n pairing: \"Kenbishi Mizuho Junmai Sake\",\n tags: [\"Vegetarian Safe\"],\n },\n ],\n };\n\n const handleReservationSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsReserveModalOpen(false);\n setReserveToast(true);\n setTimeout(() => setReserveToast(false), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Restaurant Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Utensils className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-serif text-sm sm:text-base tracking-widest uppercase font-semibold\"\n \n >\n {brandName \|\| \"Komorebi Dining\"}\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <div className=\"hidden md:flex items-center gap-1.5 px-3 py-1 rounded-full border text-xs font-semibold bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20\">\n <Award className=\"h-3.5 w-3.5\" />\n <span>Two Michelin Stars</span>\n </div>\n\n <button\n onClick={() => setIsReserveModalOpen(true)}\n className=\"px-4 py-1.5 rounded-xl text-xs font-serif uppercase tracking-wider font-bold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Reserve Table\n </button>\n </div>\n </div>\n </header>\n\n {/ Culinary Hero /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12\">\n <section className=\"text-center max-w-3xl mx-auto space-y-4\">\n <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-serif tracking-widest uppercase opacity-70 border\" >\n <MapPin className=\"h-3.5 w-3.5 text-amber-600\" />\n <span>Minami-Aoyama, Tokyo • Dinner Service 17:30 – 23:00</span>\n </div>\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-6xl font-serif font-light tracking-tight leading-tight\"\n \n >\n A Symphony of Wild Foraging & Modern Japanese Gastronomy\n </h1>\n\n <p className=\"text-sm sm:text-base opacity-75 max-w-2xl mx-auto leading-relaxed font-light\">\n Crafted nightly around hyper-seasonal ingredients harvested from local mountain purveyors and Toyosu market fisheries, prepared over fragrant binchotan charcoal.\n </p>\n </section>\n\n {/ Core Layout: Tasting Menu (7 Cols) + Table Reservation Engine (5 Cols) /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\n {/ Tasting Menu Breakdown: 7 Cols /}\n <div className=\"lg:col-span-7 space-y-6\">\n <div\n className=\"p-6 rounded-3xl border space-y-6\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b pb-4\" >\n <div>\n <h2 className=\"font-serif text-lg sm:text-xl font-bold\">Seasonal Menus</h2>\n <p className=\"text-xs opacity-65\">Curated by Executive Chef Kenji Takahashi</p>\n </div>\n\n {/ Menu Tab Selector /}\n <div\n className=\"inline-flex p-1 rounded-xl border text-xs\"\n \n >\n {[\n { id: \"autumn\", label: \"Autumn (¥28,000)\" },\n { id: \"omakase\", label: \"Omakase (¥38,000)\" },\n { id: \"vegetal\", label: \"Vegetal (¥22,000)\" },\n ].map((tab) => (\n <button\n key={tab.id}\n onClick={() => setActiveMenuTab(tab.id as any)}\n className={\\`px-3 py-1.5 rounded-lg font-serif font-semibold transition-all \\${\n activeMenuTab === tab.id\n ? \"bg-amber-700 text-white shadow-sm\"\n : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {tab.label}\n </button>\n ))}\n </div>\n </div>\n\n {/ Courses List /}\n <div className=\"space-y-4\">\n {coursesData[activeMenuTab].map((item, idx) => (\n <div\n key={idx}\n className=\"p-4 rounded-2xl border space-y-2 transition-colors\"\n \n >\n <div className=\"flex justify-between items-start text-xs font-serif\">\n <span className=\"font-bold text-amber-700 dark:text-amber-400\">{item.course}</span>\n <span className=\"text-[10px] font-sans px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 font-semibold\">\n {item.tags[0]}\n </span>\n </div>\n\n <div>\n <h3 className=\"font-serif font-bold text-base text-foreground\">{item.dish}</h3>\n <p className=\"text-xs opacity-75 mt-0.5 font-light leading-relaxed\">{item.desc}</p>\n </div>\n\n <div className=\"flex items-center gap-2 pt-1 text-[11px] opacity-70 font-mono\">\n <Wine className=\"h-3.5 w-3.5 text-amber-600\" />\n <span>Pairing: {item.pairing}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Table Reservation Engine: 5 Cols /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-6 rounded-3xl border space-y-5 shadow-sm\"\n \n >\n <div className=\"border-b pb-3\">\n <h3 className=\"font-serif text-lg font-bold\">Reserve a Table</h3>\n <p className=\"text-xs opacity-65 font-mono mt-0.5\">Direct online booking with instant confirmation</p>\n </div>\n\n {/ Step 1: Party Size /}\n <div className=\"space-y-2 text-xs\">\n <label className=\"font-semibold block opacity-80 font-serif\">1. Party Size</label>\n <div className=\"flex gap-1.5\">\n {[1, 2, 4, 6, 8].map((size) => (\n <button\n key={size}\n onClick={() => setPartySize(size)}\n className={\\`flex-1 py-2 rounded-xl border font-bold text-xs transition-colors \\${\n partySize === size\n ? \"bg-amber-700 text-white border-amber-700\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-75 hover:opacity-100\"\n }\\`}\n >\n {size} {size === 1 ? \"Guest\" : \"Guests\"}\n </button>\n ))}\n </div>\n </div>\n\n {/ Step 2: Date Selector /}\n <div className=\"space-y-2 text-xs\">\n <label className=\"font-semibold block opacity-80 font-serif\">2. Seating Date</label>\n <div className=\"grid grid-cols-3 gap-1.5\">\n {[\"Fri, Sep 18\", \"Sat, Sep 19\", \"Sun, Sep 20\", \"Wed, Sep 23\", \"Thu, Sep 24\", \"Fri, Sep 25\"].map((d) => (\n <button\n key={d}\n onClick={() => setSelectedDate(d)}\n className={\\`p-2 rounded-xl border text-center font-mono text-[11px] font-semibold transition-colors \\${\n selectedDate === d\n ? \"bg-amber-700 text-white border-amber-700\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-75 hover:opacity-100\"\n }\\`}\n >\n {d}\n </button>\n ))}\n </div>\n </div>\n\n {/ Step 3: Seating Time /}\n <div className=\"space-y-2 text-xs\">\n <label className=\"font-semibold block opacity-80 font-serif\">3. Preferred Seating Time</label>\n <div className=\"grid grid-cols-4 gap-1.5\">\n {[\"17:30\", \"18:45\", \"20:00\", \"21:15\"].map((t) => (\n <button\n key={t}\n onClick={() => setSelectedTime(t)}\n className={\\`py-2 rounded-xl border text-center font-mono text-xs font-bold transition-colors \\${\n selectedTime === t\n ? \"bg-amber-700 text-white border-amber-700\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-75 hover:opacity-100\"\n }\\`}\n >\n {t}\n </button>\n ))}\n </div>\n </div>\n\n {/ Step 4: Seating Area /}\n <div className=\"space-y-2 text-xs\">\n <label className=\"font-semibold block opacity-80 font-serif\">4. Seating Area</label>\n <div className=\"space-y-1.5\">\n {[\n { id: \"hinoki\", name: \"Chef's Hinoki Counter (Front row view)\" },\n { id: \"main\", name: \"Main Dining Room (Intimate table)\" },\n { id: \"garden\", name: \"Bamboo Garden Tea Pavilion\" },\n ].map((area) => (\n <button\n key={area.id}\n onClick={() => setSeatingArea(area.id)}\n className={\\`w-full p-2.5 rounded-xl border text-left text-xs transition-colors flex items-center justify-between \\${\n seatingArea === area.id\n ? \"border-amber-600 bg-amber-600/10 font-bold\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-75\"\n }\\`}\n >\n <span>{area.name}</span>\n {seatingArea === area.id && <CheckCircle2 className=\"h-4 w-4 text-amber-600\" />}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"border-t pt-4\">\n <button\n onClick={() => setIsReserveModalOpen(true)}\n className=\"w-full py-3 rounded-xl font-serif uppercase tracking-widest font-bold text-xs text-white shadow-md transition-transform active:scale-[0.98]\"\n \n >\n Confirm Table for {partySize}\n </button>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Reservation Confirmation Modal /}\n {isReserveModalOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-md p-6 rounded-3xl border shadow-2xl space-y-4\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <span className=\"font-serif font-bold text-base\">Confirm Reservation</span>\n <button onClick={() => setIsReserveModalOpen(false)} className=\"opacity-70 hover:opacity-100\">\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <form onSubmit={handleReservationSubmit} className=\"space-y-3 text-xs\">\n <div className=\"p-3.5 rounded-xl border bg-amber-500/10 border-amber-500/20 space-y-1 font-serif\">\n <div className=\"font-bold text-amber-800 dark:text-amber-300 text-sm\">\n {selectedDate} at {selectedTime}\n </div>\n <div className=\"text-xs opacity-80 font-sans\">\n Party of {partySize} Guests • {seatingArea === \"hinoki\" ? \"Chef's Counter\" : \"Main Dining\"}\n </div>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80 font-serif\">Guest Name</label>\n <input\n type=\"text\"\n defaultValue=\"Kenji Sutherland\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80 font-serif\">Special Dietary Notes</label>\n <input\n type=\"text\"\n placeholder=\"e.g. Shellfish allergy, birthday celebration\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div className=\"flex gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsReserveModalOpen(false)}\n className=\"flex-1 py-2.5 rounded-xl border font-serif\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 py-2.5 rounded-xl font-serif font-bold uppercase tracking-wider text-white bg-amber-700 hover:bg-amber-600\"\n >\n Complete Booking\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n\n {/ Confirmation Toast /}\n {reserveToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-amber-700 text-white text-xs font-serif font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Table confirmed! Confirmation SMS dispatched.</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateHelpCenter = {\n name: \"template-help-center\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-help-center.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n LifeBuoy,\n Search,\n HelpCircle,\n FileText,\n Send,\n CheckCircle2,\n ChevronRight,\n ChevronDown,\n ChevronUp,\n MessageSquare,\n ShieldCheck,\n CreditCard,\n Code2,\n Users,\n Smartphone,\n ThumbsUp,\n ThumbsDown,\n X,\n Sparkles,\n ArrowRight,\n} from \"lucide-react\";\n\nexport interface HelpCenterTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function HelpCenterTemplate({\n brandName = \"Resolv Desk\",\n theme = \"dark\",\n}: HelpCenterTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [expandedFaq, setExpandedFaq] = useState<number \| null>(0);\n const [helpfulFeedback, setHelpfulFeedback] = useState<Record<number, boolean>>({});\n const [isTicketModalOpen, setIsTicketModalOpen] = useState(false);\n const [ticketSubject, setTicketSubject] = useState(\"\");\n const [ticketDepartment, setTicketDepartment] = useState(\"technical\");\n const [ticketPriority, setTicketPriority] = useState<\"low\" \| \"normal\" \| \"urgent\">(\"normal\");\n const [ticketToast, setTicketToast] = useState(false);\n\n const categories = [\n {\n title: \"Getting Started & Onboarding\",\n articles: \"14 articles\",\n icon: LifeBuoy,\n desc: \"Quickstart guides, workspace setup, and team invites.\",\n sample: \"Inviting collaborators to your team workspace\",\n },\n {\n title: \"Billing & Invoicing\",\n articles: \"9 articles\",\n icon: CreditCard,\n desc: \"Managing card payments, enterprise invoicing, and VAT receipts.\",\n sample: \"Downloading annual billing VAT tax receipts\",\n },\n {\n title: \"Security, SSO & 2FA\",\n articles: \"18 articles\",\n icon: ShieldCheck,\n desc: \"SAML SSO, two-factor authentication, and audit logs.\",\n sample: \"Configuring Okta and Google Workspace SAML SSO\",\n },\n {\n title: \"Developer API & Webhooks\",\n articles: \"22 articles\",\n icon: Code2,\n desc: \"REST endpoints, rate limits, SDKs, and event signatures.\",\n sample: \"Handling webhook retry backoff algorithms\",\n },\n {\n title: \"Team Permissions & RBAC\",\n articles: \"11 articles\",\n icon: Users,\n desc: \"Granular access roles, audit trails, and guest permissions.\",\n sample: \"Setting custom role permissions matrix\",\n },\n {\n title: \"Mobile & Desktop Apps\",\n articles: \"8 articles\",\n icon: Smartphone,\n desc: \"macOS menu bar utilities, iOS notifications, and offline sync.\",\n sample: \"Enabling offline local cache persistence\",\n },\n ];\n\n const faqs = [\n {\n q: \"How do I transfer organization ownership to a new administrator?\",\n a: \"Navigate to Settings → Organization → General. Click 'Transfer Ownership' and select a verified team administrator. An email confirmation link will be sent to both parties to cryptographically authorize the change.\",\n },\n {\n q: \"What are the default API rate limits for production keys?\",\n a: \"Production keys are provisioned with 10,000 requests per minute with burst allowance up to 15,000 req/min. Enterprise tiers can configure custom multi-region rate limit pools via our technical architecture team.\",\n },\n {\n q: \"How does the 30-day money-back refund guarantee work?\",\n a: \"If you are dissatisfied with your plan within 30 days of initial subscription, submit a ticket under 'Billing & Invoices'. We process 100% full refunds back to your original payment method with zero cancellation penalties.\",\n },\n {\n q: \"Can we self-host or deploy NexoreUI in an air-gapped private cloud?\",\n a: \"Yes. Enterprise customers receive access to private container registries, Helm charts, and single-tenant AWS/GCP Terraform modules with zero external phone-home dependencies.\",\n },\n ];\n\n const handleTicketSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsTicketModalOpen(false);\n setTicketToast(true);\n setTimeout(() => setTicketToast(false), 3500);\n };\n\n const filteredCategories = categories.filter((cat) => {\n if (!searchQuery.trim()) return true;\n const q = searchQuery.toLowerCase();\n return (\n cat.title.toLowerCase().includes(q) \|\|\n cat.desc.toLowerCase().includes(q) \|\|\n cat.sample.toLowerCase().includes(q)\n );\n });\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Support Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-8 w-8 rounded-lg flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <LifeBuoy className=\"h-4 w-4\" />\n </div>\n <div>\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Resolv Desk\"}\n </span>\n <span className=\"hidden md:inline-block text-xs opacity-60 ml-2 font-mono\">\n • Help Center & Docs\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\"\n \n >\n <span className=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\" />\n <span>Live Support: < 4m wait</span>\n </div>\n\n <button\n onClick={() => setIsTicketModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <MessageSquare className=\"h-3.5 w-3.5\" />\n <span>Submit Ticket</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Hero Instant Search Section /}\n <section className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-12 text-center space-y-5\">\n <h1\n className=\"text-2xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight max-w-3xl mx-auto\"\n \n >\n How can our customer support team help you today?\n </h1>\n <p className=\"text-xs sm:text-sm opacity-75 max-w-xl mx-auto leading-relaxed\">\n Search over 120 verified setup guides, developer tutorials, or connect directly with our engineering tier.\n </p>\n\n {/ Search Input /}\n <div className=\"max-w-xl mx-auto relative pt-2\">\n <Search className=\"absolute left-4 top-5 h-4 w-4 opacity-50\" />\n <input\n type=\"text\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder=\"Search questions, keywords (e.g. 2FA, refunds, API tokens)...\"\n className=\"w-full pl-11 pr-10 py-3 rounded-2xl border text-xs bg-transparent shadow-sm outline-none transition-all focus:ring-2 focus:ring-indigo-500/40\"\n \n />\n {searchQuery && (\n <button\n onClick={() => setSearchQuery(\"\")}\n className=\"absolute right-4 top-5 opacity-60 hover:opacity-100\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n )}\n </div>\n\n {/ Quick Search Shortcut Tags /}\n <div className=\"flex flex-wrap items-center justify-center gap-1.5 pt-1 text-xs\">\n <span className=\"opacity-60 text-[11px] mr-1\">Popular searches:</span>\n {[\"Reset 2FA\", \"Update Billing Card\", \"API Rate Limits\", \"Custom SSO\"].map((tag) => (\n <button\n key={tag}\n onClick={() => setSearchQuery(tag)}\n className=\"px-2.5 py-1 rounded-lg border text-[11px] opacity-75 hover:opacity-100 transition-colors\"\n \n >\n {tag}\n </button>\n ))}\n </div>\n </section>\n\n {/ Categorized Knowledge Base Grid /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-12\">\n <section className=\"space-y-4\">\n <div className=\"flex justify-between items-center\">\n <h2 className=\"font-bold text-base sm:text-lg\">Knowledge Base Topics</h2>\n <span className=\"text-xs opacity-60 font-mono\">{filteredCategories.length} Categories</span>\n </div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n {filteredCategories.map((cat) => {\n const IconComp = cat.icon;\n return (\n <div\n key={cat.title}\n className=\"p-5 rounded-2xl border space-y-3 transition-colors hover:border-zinc-400 group cursor-pointer\"\n \n >\n <div className=\"flex items-center justify-between\">\n <div className=\"p-2 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400\">\n <IconComp className=\"h-5 w-5\" />\n </div>\n <span className=\"text-[11px] font-mono opacity-60 font-semibold\">{cat.articles}</span>\n </div>\n\n <div>\n <h3 className=\"font-bold text-sm text-foreground group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors\">\n {cat.title}\n </h3>\n <p className=\"text-xs opacity-75 mt-1 leading-relaxed\">{cat.desc}</p>\n </div>\n\n <div className=\"pt-2 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span className=\"truncate\">{cat.sample}</span>\n <ChevronRight className=\"h-3.5 w-3.5 opacity-60 shrink-0 ml-1\" />\n </div>\n </div>\n );\n })}\n </div>\n </section>\n\n {/ Interactive FAQ Accordion Section /}\n <section className=\"space-y-4 max-w-4xl mx-auto\">\n <div className=\"text-center space-y-1\">\n <h2 className=\"font-bold text-xl\">Frequently Asked Questions</h2>\n <p className=\"text-xs opacity-65\">Instant answers to high-frequency customer questions.</p>\n </div>\n\n <div className=\"space-y-3 pt-2\">\n {faqs.map((faq, idx) => {\n const isExpanded = expandedFaq === idx;\n const hasVoted = helpfulFeedback[idx] !== undefined;\n\n return (\n <div\n key={idx}\n className=\"p-5 rounded-2xl border space-y-3 transition-colors\"\n \n >\n <button\n onClick={() => setExpandedFaq(isExpanded ? null : idx)}\n className=\"w-full flex items-center justify-between gap-4 text-left font-bold text-xs sm:text-sm\"\n >\n <span>{faq.q}</span>\n {isExpanded ? <ChevronUp className=\"h-4 w-4 opacity-60 shrink-0\" /> : <ChevronDown className=\"h-4 w-4 opacity-60 shrink-0\" />}\n </button>\n\n {isExpanded && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n className=\"pt-2 border-t space-y-4 text-xs opacity-85 leading-relaxed\"\n \n >\n <p>{faq.a}</p>\n\n {/ Was this helpful feedback trigger /}\n <div className=\"flex items-center justify-between pt-2 border-t text-[11px] opacity-75\" >\n <span>Was this answer helpful?</span>\n {hasVoted ? (\n <span className=\"text-emerald-600 dark:text-emerald-400 font-bold flex items-center gap-1\">\n <CheckCircle2 className=\"h-3.5 w-3.5\" />\n <span>Feedback recorded. Thank you!</span>\n </span>\n ) : (\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setHelpfulFeedback((prev) => ({ ...prev, [idx]: true }))}\n className=\"px-2.5 py-1 rounded-lg border flex items-center gap-1 hover:bg-emerald-500/10 transition-colors\"\n \n >\n <ThumbsUp className=\"h-3 w-3 text-emerald-500\" />\n <span>Yes</span>\n </button>\n <button\n onClick={() => setHelpfulFeedback((prev) => ({ ...prev, [idx]: false }))}\n className=\"px-2.5 py-1 rounded-lg border flex items-center gap-1 hover:bg-rose-500/10 transition-colors\"\n \n >\n <ThumbsDown className=\"h-3 w-3 text-rose-500\" />\n <span>No</span>\n </button>\n </div>\n )}\n </div>\n </motion.div>\n )}\n </div>\n );\n })}\n </div>\n </section>\n\n {/ Live Support Banner /}\n <section\n className=\"p-6 sm:p-8 rounded-3xl border text-center space-y-4 max-w-4xl mx-auto\"\n \n >\n <div className=\"w-12 h-12 rounded-2xl bg-indigo-500/15 text-indigo-600 dark:text-indigo-400 flex items-center justify-center mx-auto\">\n <MessageSquare className=\"h-6 w-6\" />\n </div>\n\n <h3 className=\"font-bold text-lg sm:text-xl\">Still need direct assistance?</h3>\n <p className=\"text-xs sm:text-sm opacity-75 max-w-md mx-auto leading-relaxed\">\n Our systems and customer engineering staff are on standby 24 hours a day, 7 days a week.\n </p>\n\n <button\n onClick={() => setIsTicketModalOpen(true)}\n className=\"px-6 py-2.5 rounded-xl font-bold text-xs text-white shadow-md transition-transform active:scale-95\"\n \n >\n Create New Support Ticket\n </button>\n </section>\n </main>\n\n {/ Support Ticket Modal /}\n {isTicketModalOpen && (\n <div className=\"fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl space-y-4\"\n style={{\n backgroundColor: \"#181a24\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex justify-between items-center pb-2 border-b\" >\n <span className=\"font-bold text-base\">Create Support Ticket</span>\n <button onClick={() => setIsTicketModalOpen(false)} className=\"opacity-70 hover:opacity-100\">\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <form onSubmit={handleTicketSubmit} className=\"space-y-3 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Department Routing</label>\n <select\n value={ticketDepartment}\n onChange={(e) => setTicketDepartment(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n >\n <option value=\"technical\">Technical Support & Architecture</option>\n <option value=\"billing\">Billing & Invoicing</option>\n <option value=\"enterprise\">Enterprise SLA & Custom Plans</option>\n </select>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Priority Severity</label>\n <div className=\"flex gap-2\">\n {([\"low\", \"normal\", \"urgent\"] as const).map((p) => (\n <button\n key={p}\n type=\"button\"\n onClick={() => setTicketPriority(p)}\n className={\\`flex-1 py-1.5 rounded-lg border font-bold text-xs uppercase tracking-wider transition-colors \\${\n ticketPriority === p\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"border-zinc-300 dark:border-zinc-700 opacity-75 hover:opacity-100\"\n }\\`}\n >\n {p}\n </button>\n ))}\n </div>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Subject</label>\n <input\n type=\"text\"\n required\n placeholder=\"Brief description of the issue...\"\n value={ticketSubject}\n onChange={(e) => setTicketSubject(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Message Body</label>\n <textarea\n rows={3}\n required\n placeholder=\"Please include error logs, relevant URLs, or steps to reproduce...\"\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none text-xs leading-relaxed\"\n \n />\n </div>\n\n <div className=\"flex gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsTicketModalOpen(false)}\n className=\"flex-1 py-2.5 rounded-xl border font-semibold opacity-75\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 py-2.5 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-500 shadow-sm\"\n >\n Submit Ticket\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n\n {/ Confirmation Toast /}\n {ticketToast && (\n <div className=\"fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl bg-indigo-600 text-white text-xs font-bold shadow-xl flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n <span>Ticket #8492 received! Our engineering tier is reviewing.</span>\n </div>\n )}\n </div>\n );\n}\n`,\n};\n","export const templateFitnessAthletics = {\n name: \"template-fitness-athletics\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-fitness-athletics.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Activity,\n Heart,\n Flame,\n Moon,\n Trophy,\n Zap,\n Timer,\n TrendingUp,\n Dumbbell,\n CheckCircle2,\n Circle,\n Play,\n RotateCcw,\n Calendar,\n ChevronRight,\n Plus,\n BarChart2,\n Sliders,\n Check,\n X,\n Footprints,\n} from \"lucide-react\";\n\nexport interface FitnessAthleticsTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function FitnessAthleticsTemplate({\n brandName = \"AeroPulse Athletics\",\n theme = \"dark\",\n}: FitnessAthleticsTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [targetBpm, setTargetBpm] = useState(158);\n const [volumeMetric, setVolumeMetric] = useState<\"distance\" \| \"tonnage\" \| \"duration\">(\"distance\");\n const [activeTab, setActiveTab] = useState<\"dashboard\" \| \"intervals\" \| \"records\">(\"dashboard\");\n const [isLogModalOpen, setIsLogModalOpen] = useState(false);\n const [logWorkoutType, setLogWorkoutType] = useState(\"tempo-run\");\n const [logToast, setLogToast] = useState<string \| null>(null);\n\n // Interval checklist state\n const [completedIntervals, setCompletedIntervals] = useState<Record<number, boolean>>({\n 0: true,\n 1: true,\n });\n\n // Rest timer\n const [restSeconds, setRestSeconds] = useState(90);\n const [isTimerRunning, setIsTimerRunning] = useState(false);\n\n // Determine HR zone from BPM\n const getHrZone = (bpm: number) => {\n if (bpm < 120) return { zone: 1, name: \"Recovery\", color: \"text-blue-500\", bg: \"bg-blue-500/10\", border: \"border-blue-500/20\", pct: 15 };\n if (bpm < 140) return { zone: 2, name: \"Aerobic Base\", color: \"text-emerald-500\", bg: \"bg-emerald-500/10\", border: \"border-emerald-500/20\", pct: 40 };\n if (bpm < 160) return { zone: 3, name: \"Tempo Pace\", color: \"text-amber-500\", bg: \"bg-amber-500/10\", border: \"border-amber-500/20\", pct: 70 };\n if (bpm < 175) return { zone: 4, name: \"Threshold\", color: \"text-orange-500\", bg: \"bg-orange-500/10\", border: \"border-orange-500/20\", pct: 85 };\n return { zone: 5, name: \"VO2 Max Anaerobic\", color: \"text-rose-500\", bg: \"bg-rose-500/10\", border: \"border-rose-500/20\", pct: 98 };\n };\n\n const currentZone = getHrZone(targetBpm);\n\n const weeklyVolumeData = {\n distance: [\n { day: \"Mon\", val: 12.4, target: 10 },\n { day: \"Tue\", val: 8.0, target: 8 },\n { day: \"Wed\", val: 15.2, target: 14 },\n { day: \"Thu\", val: 0.0, target: 0 },\n { day: \"Fri\", val: 10.5, target: 10 },\n { day: \"Sat\", val: 24.8, target: 22 },\n { day: \"Sun\", val: 6.2, target: 8 },\n ],\n tonnage: [\n { day: \"Mon\", val: 8400, target: 8000 },\n { day: \"Tue\", val: 0, target: 0 },\n { day: \"Wed\", val: 11200, target: 10000 },\n { day: \"Thu\", val: 6500, target: 6000 },\n { day: \"Fri\", val: 9800, target: 9000 },\n { day: \"Sat\", val: 0, target: 0 },\n { day: \"Sun\", val: 4200, target: 5000 },\n ],\n duration: [\n { day: \"Mon\", val: 65, target: 60 },\n { day: \"Tue\", val: 45, target: 45 },\n { day: \"Wed\", val: 90, target: 80 },\n { day: \"Thu\", val: 30, target: 30 },\n { day: \"Fri\", val: 75, target: 70 },\n { day: \"Sat\", val: 140, target: 120 },\n { day: \"Sun\", val: 40, target: 45 },\n ],\n };\n\n const intervals = [\n { title: \"Dynamic Warm-up & Hip Mobility\", target: \"10 min • Zone 1\", rpe: \"RPE 4\", tag: \"Warmup\" },\n { title: \"Progressive Aerobic Build\", target: \"15 min @ 138-145 BPM\", rpe: \"RPE 6\", tag: \"Zone 2\" },\n { title: \"4 x 1,000m Lactate Threshold Repeats\", target: \"4 reps @ 3:42/km (90s rest)\", rpe: \"RPE 8.5\", tag: \"Threshold\" },\n { title: \"VO2 Max Surge Finishers\", target: \"3 x 400m all-out\", rpe: \"RPE 9.5\", tag: \"Zone 5\" },\n { title: \"Parasympathetic Recovery Cool-down\", target: \"10 min walk & deep breathing\", rpe: \"RPE 2\", tag: \"Recovery\" },\n ];\n\n const personalRecords = [\n { event: \"5,000m Track Split\", record: \"16:48.2\", delta: \"-14.6s\", date: \"Last week\", icon: Footprints, badge: \"Recent PR\" },\n { event: \"VO2 Max Score\", record: \"58.4 ml/kg\", delta: \"+2.1\", date: \"Lab tested\", icon: Activity, badge: \"Elite 2%\" },\n { event: \"Cycling 20m FTP\", record: \"318 Watts\", delta: \"+14W\", date: \"Sep 2026\", icon: Zap, badge: \"All-Time\" },\n { event: \"Squat 1RM Load\", record: \"185 kg\", delta: \"+7.5 kg\", date: \"Aug 2026\", icon: Dumbbell, badge: \"Gold\" },\n ];\n\n const toggleInterval = (index: number) => {\n setCompletedIntervals((prev) => ({\n ...prev,\n [index]: !prev[index],\n }));\n };\n\n const handleLogSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsLogModalOpen(false);\n setLogToast(\"Workout logged! Biometric strain recomputed (+3.2 Strain).\");\n setTimeout(() => setLogToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Flame className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"AeroPulse Athletics\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n Ready to Train\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Cardiovascular Telemetry & Overload Suite</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Heart className=\"w-3.5 h-3.5 text-rose-500 fill-rose-500 animate-pulse\" />\n <span>Resting HR: 48 bpm</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">HRV: 74ms</span>\n </div>\n\n <button\n onClick={() => setIsLogModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Plus className=\"h-3.5 w-3.5\" />\n <span>Log Session</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {logToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{logToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Navigation Tabs /}\n <div className=\"flex items-center justify-between border-b pb-4\" >\n <div className=\"flex items-center gap-1.5 p-1 rounded-xl border text-xs font-medium\" >\n <button\n onClick={() => setActiveTab(\"dashboard\")}\n className={\\`px-3 py-1.5 rounded-lg transition-colors \\${activeTab === \"dashboard\" ? \"bg-white dark:bg-zinc-800 shadow-sm font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Telemetry Dashboard\n </button>\n <button\n onClick={() => setActiveTab(\"intervals\")}\n className={\\`px-3 py-1.5 rounded-lg transition-colors \\${activeTab === \"intervals\" ? \"bg-white dark:bg-zinc-800 shadow-sm font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Today's Intervals\n </button>\n <button\n onClick={() => setActiveTab(\"records\")}\n className={\\`px-3 py-1.5 rounded-lg transition-colors \\${activeTab === \"records\" ? \"bg-white dark:bg-zinc-800 shadow-sm font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n PR Hall of Fame\n </button>\n </div>\n\n <div className=\"hidden sm:flex items-center gap-2 text-xs opacity-75\">\n <Calendar className=\"w-3.5 h-3.5\" />\n <span>Microcycle 14 • Day 4</span>\n </div>\n </div>\n\n {/ Top 4 KPI Cards /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {/ Recovery Score /}\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Recovery Readiness</span>\n <span className=\"px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n 88% High\n </span>\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold tracking-tight\">88%</span>\n <span className=\"text-xs text-emerald-500 font-medium\">Primed for strain</span>\n </div>\n <p className=\"text-[11px] opacity-65\">HRV baseline +11% above rolling 30-day average.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-emerald-500 rounded-full w-[88%]\" />\n </div>\n </div>\n\n {/ Daily Strain /}\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Day Strain Score</span>\n <Flame className=\"w-4 h-4 text-orange-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold tracking-tight\">14.8</span>\n <span className=\"text-xs opacity-60\">/ 21.0 Max</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Target range 14.0 - 17.5 for optimal adaptation.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-orange-500 rounded-full w-[70%]\" />\n </div>\n </div>\n\n {/ Active Calorie Burn /}\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Active Metabolic Burn</span>\n <Activity className=\"w-4 h-4 text-rose-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold tracking-tight\">1,340</span>\n <span className=\"text-xs opacity-60\">kcal</span>\n </div>\n <p className=\"text-[11px] opacity-65\">89% of daily 1,500 kcal exertion target.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-rose-500 rounded-full w-[89%]\" />\n </div>\n </div>\n\n {/ Sleep & Rest /}\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Sleep Architecture</span>\n <Moon className=\"w-4 h-4 text-indigo-400\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold tracking-tight\">8h 12m</span>\n <span className=\"text-xs text-indigo-400 font-medium\">94% Need met</span>\n </div>\n <p className=\"text-[11px] opacity-65\">1h 48m Deep REM • 2 wake disturbances.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-indigo-500 rounded-full w-[94%]\" />\n </div>\n </div>\n </div>\n\n {/ Dynamic HR Zone Spectrum Simulator & Weekly Volume /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Heart Rate Spectrum Interactive Tool /}\n <div\n className=\"lg:col-span-1 p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Cardio Zone Spectrum</h3>\n <p className=\"text-xs opacity-65\">Adjust target BPM to test physiological zones</p>\n </div>\n <div className={\\`px-2.5 py-1 rounded-xl text-xs font-bold border \\${currentZone.bg} \\${currentZone.color} \\${currentZone.border}\\`}>\n Zone {currentZone.zone}\n </div>\n </div>\n\n {/ Big BPM Display /}\n <div className=\"p-4 rounded-xl border text-center mb-6\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-4xl font-extrabold tracking-tight\" >\n {targetBpm} <span className=\"text-sm font-normal opacity-70\">BPM</span>\n </div>\n <div className={\\`text-xs font-bold uppercase tracking-wider mt-1 \\${currentZone.color}\\`}>\n {currentZone.name}\n </div>\n </div>\n\n {/ Slider /}\n <div className=\"space-y-2 mb-6\">\n <div className=\"flex justify-between text-xs font-mono opacity-70\">\n <span>100 BPM</span>\n <span>195 BPM Max</span>\n </div>\n <input\n type=\"range\"\n min=\"100\"\n max=\"195\"\n value={targetBpm}\n onChange={(e) => setTargetBpm(Number(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n {/ Zone distribution meters /}\n <div className=\"space-y-2 text-xs\">\n <div className=\"flex items-center justify-between\">\n <span className=\"opacity-70\">Z1 Recovery (<120)</span>\n <span className=\"font-mono font-medium\">35 min</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"opacity-70\">Z2 Aerobic Base (120-140)</span>\n <span className=\"font-mono font-semibold text-emerald-500\">54 min (Primary)</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"opacity-70\">Z3 Tempo (140-160)</span>\n <span className=\"font-mono font-medium\">20 min</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"opacity-70\">Z4 Threshold (160-175)</span>\n <span className=\"font-mono font-medium\">15 min</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"opacity-70\">Z5 Anaerobic (175+)</span>\n <span className=\"font-mono font-medium\">4 min</span>\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-4 border-t text-[11px] opacity-60 flex items-center justify-between\" >\n <span>Lactate Threshold: 168 BPM</span>\n <span>Aerobic Decoupling: 2.1%</span>\n </div>\n </div>\n\n {/ Weekly Training Volume & Overload Bar Chart /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Weekly Progressive Overload</h3>\n <p className=\"text-xs opacity-65\">Total microcycle accumulation vs scheduled stimulus</p>\n </div>\n {/ Metric toggle /}\n <div className=\"flex items-center gap-1 p-1 rounded-xl border text-xs font-medium self-start\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.8)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <button\n onClick={() => setVolumeMetric(\"distance\")}\n className={\\`px-2.5 py-1 rounded-lg transition-colors \\${volumeMetric === \"distance\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Distance (km)\n </button>\n <button\n onClick={() => setVolumeMetric(\"tonnage\")}\n className={\\`px-2.5 py-1 rounded-lg transition-colors \\${volumeMetric === \"tonnage\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Tonnage (kg)\n </button>\n <button\n onClick={() => setVolumeMetric(\"duration\")}\n className={\\`px-2.5 py-1 rounded-lg transition-colors \\${volumeMetric === \"duration\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Duration (m)\n </button>\n </div>\n </div>\n\n {/ Bar Chart Visualization /}\n <div className=\"h-52 flex items-end justify-between gap-2 sm:gap-4 pt-6 pb-2 px-2 border-b\" >\n {weeklyVolumeData[volumeMetric].map((item, idx) => {\n const maxVal = Math.max(...weeklyVolumeData[volumeMetric].map((d) => d.val), 1);\n const heightPct = Math.max((item.val / maxVal) 100, 6);\n\n return (\n <div key={idx} className=\"flex-1 flex flex-col items-center gap-2 h-full justify-end group\">\n <div className=\"text-[10px] font-mono opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap\">\n {item.val}\n </div>\n <div className=\"w-full max-w-[40px] bg-zinc-200 dark:bg-zinc-800 rounded-t-lg relative overflow-hidden flex items-end\" style={{ height: \\`\\${heightPct}%\\` }}>\n <div\n className=\"w-full rounded-t-lg transition-all\"\n style={{\n height: \"100%\",\n backgroundColor: item.val >= item.target && item.val > 0 ? \"#6366f1\" : \"#a855f7\",\n opacity: item.val === 0 ? 0.2 : 0.9,\n }}\n />\n </div>\n <span className=\"text-xs font-semibold opacity-75\">{item.day}</span>\n </div>\n );\n })}\n </div>\n </div>\n\n <div className=\"pt-4 flex flex-wrap items-center justify-between gap-3 text-xs\">\n <div className=\"flex items-center gap-4\">\n <span className=\"flex items-center gap-1.5 opacity-80\">\n <span className=\"w-2.5 h-2.5 rounded-full\" />\n Completed Stimulus\n </span>\n <span className=\"flex items-center gap-1.5 opacity-80\">\n <span className=\"w-2.5 h-2.5 rounded-full bg-purple-500\" />\n Target Baseline\n </span>\n </div>\n <div className=\"font-mono text-emerald-500 font-semibold flex items-center gap-1\">\n <TrendingUp className=\"w-3.5 h-3.5\" />\n <span>+8.4% Volume Progression vs W13</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Structured Intervals Checklist & Rest Timer /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Today's Workout Intervals Checklist /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Prescribed Interval Session</h3>\n <p className=\"text-xs opacity-65\">Lactate Threshold Overload • 5 Blocks</p>\n </div>\n <span className=\"text-xs font-mono px-2.5 py-1 rounded-lg border\" >\n {Object.values(completedIntervals).filter(Boolean).length} / {intervals.length} Done\n </span>\n </div>\n\n <div className=\"space-y-3\">\n {intervals.map((item, idx) => {\n const isCompleted = !!completedIntervals[idx];\n return (\n <div\n key={idx}\n onClick={() => toggleInterval(idx)}\n className={\\`p-3.5 rounded-xl border flex items-center justify-between gap-3 cursor-pointer transition-all \\${\n isCompleted ? \"opacity-60 bg-emerald-500/5 border-emerald-500/20\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: !isCompleted ? (isDark ? \"rgba(255,255,255,0.02)\" : \"rgba(0,0,0,0.02)\") : undefined,\n borderColor: !isCompleted ? \"rgba(255, 255, 255, 0.08)\" : undefined,\n }}\n >\n <div className=\"flex items-center gap-3\">\n <button className=\"text-indigo-500 shrink-0\">\n {isCompleted ? (\n <CheckCircle2 className=\"w-5 h-5 text-emerald-500 fill-emerald-500/20\" />\n ) : (\n <Circle className=\"w-5 h-5 opacity-40 hover:opacity-80\" />\n )}\n </button>\n <div>\n <div className={\\`text-xs font-bold \\${isCompleted ? \"line-through opacity-75\" : \"\"}\\`}>\n {item.title}\n </div>\n <div className=\"text-[11px] opacity-60 font-mono mt-0.5\">{item.target}</div>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 shrink-0\">\n <span className=\"px-2 py-0.5 rounded text-[10px] font-mono border\" >\n {item.rpe}\n </span>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-500/10 text-indigo-400\">\n {item.tag}\n </span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Rest Interval Timer /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-base font-bold tracking-tight\">Active Rest Timer</h3>\n <Timer className=\"w-4 h-4 text-indigo-400\" />\n </div>\n\n {/ Timer Dial /}\n <div className=\"py-6 text-center\">\n <div className=\"text-5xl font-mono font-extrabold tracking-tight mb-2\">\n 01:{restSeconds < 10 ? \\`0\\${restSeconds}\\` : restSeconds}\n </div>\n <p className=\"text-xs opacity-65\">Recovery interval between Threshold splits</p>\n </div>\n\n {/ Preset buttons /}\n <div className=\"grid grid-cols-3 gap-2 mb-6 text-xs font-mono\">\n {[60, 90, 120].map((sec) => (\n <button\n key={sec}\n onClick={() => setRestSeconds(sec)}\n className={\\`py-1.5 rounded-lg border text-center transition-colors \\${\n restSeconds === sec ? \"border-indigo-500 bg-indigo-500/10 font-bold\" : \"opacity-75 hover:opacity-100\"\n }\\`}\n style={{ borderColor: restSeconds === sec ? undefined : \"rgba(255, 255, 255, 0.08)\" }}\n >\n {sec}s\n </button>\n ))}\n </div>\n </div>\n\n {/ Controls /}\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => setIsTimerRunning(!isTimerRunning)}\n className=\"flex-1 py-2.5 rounded-xl text-xs font-semibold text-white flex items-center justify-center gap-2 shadow-sm transition-transform active:scale-95\"\n \n >\n <Play className=\"w-3.5 h-3.5 fill-white\" />\n <span>{isTimerRunning ? \"Pause Rest\" : \"Start 90s Rest\"}</span>\n </button>\n <button\n onClick={() => setRestSeconds(90)}\n className=\"p-2.5 rounded-xl border text-xs opacity-75 hover:opacity-100\"\n \n >\n <RotateCcw className=\"w-4 h-4\" />\n </button>\n </div>\n </div>\n </div>\n\n {/ PR Milestone Hall of Fame /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Trophy className=\"w-5 h-5 text-amber-500\" />\n <h3 className=\"text-base font-bold tracking-tight\">Hall of Fame & All-Time PRs</h3>\n </div>\n <span className=\"text-xs opacity-65\">Verified Telemetry Benchmarks</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {personalRecords.map((pr, idx) => {\n const Icon = pr.icon;\n return (\n <div\n key={idx}\n className=\"p-4 rounded-xl border transition-all hover:scale-[1.01]\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/10 text-amber-500 border border-amber-500/20\">\n {pr.badge}\n </span>\n <Icon className=\"w-4 h-4 opacity-50\" />\n </div>\n <div className=\"text-xs opacity-70 mb-1\">{pr.event}</div>\n <div className=\"text-xl font-extrabold tracking-tight mb-1\">{pr.record}</div>\n <div className=\"flex items-center justify-between text-[11px]\">\n <span className=\"text-emerald-500 font-semibold\">{pr.delta}</span>\n <span className=\"opacity-50\">{pr.date}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </main>\n\n {/ Log Workout Modal /}\n <AnimatePresence>\n {isLogModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsLogModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Dumbbell className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Log Completed Session</h3>\n </div>\n\n <form onSubmit={handleLogSubmit} className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Activity Modality</label>\n <select\n value={logWorkoutType}\n onChange={(e) => setLogWorkoutType(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"tempo-run\">Tempo Threshold Run</option>\n <option value=\"cycling-ftp\">FTP Cycling Intervals</option>\n <option value=\"heavy-squat\">Strength & Power Hypertrophy</option>\n <option value=\"hiit-row\">HIIT Aerobic Capacity</option>\n </select>\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Duration (Minutes)</label>\n <input\n type=\"number\"\n defaultValue=\"55\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Average Heart Rate</label>\n <input\n type=\"number\"\n defaultValue=\"152\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Perceived Exertion (RPE 1-10)</label>\n <input\n type=\"range\"\n min=\"1\"\n max=\"10\"\n defaultValue=\"8\"\n className=\"w-full accent-indigo-500\"\n />\n <div className=\"flex justify-between opacity-60 text-[10px] mt-1\">\n <span>1 Easy Active</span>\n <span>10 Maximum Exhaustion</span>\n </div>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm mt-2 transition-transform active:scale-95\"\n \n >\n Confirm & Sync Biometrics\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateWildernessTravel = {\n name: \"template-wilderness-travel\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-wilderness-travel.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Compass,\n Mountain,\n MapPin,\n Wind,\n Droplets,\n Calendar,\n Clock,\n ShieldCheck,\n ChevronRight,\n ChevronDown,\n Scale,\n Radio,\n Tent,\n CheckCircle2,\n X,\n Sparkles,\n AlertTriangle,\n Sun,\n CloudSnow,\n CloudRain,\n Navigation,\n} from \"lucide-react\";\n\nexport interface WildernessTravelTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function WildernessTravelTemplate({\n brandName = \"NomadRoute Expeditions\",\n theme = \"dark\",\n}: WildernessTravelTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedWaypoint, setSelectedWaypoint] = useState(1);\n const [expandedDay, setExpandedDay] = useState<number \| null>(1);\n const [baseWeight, setBaseWeight] = useState(6.2); // kg\n const [foodDays, setFoodDays] = useState(6);\n const [waterLiters, setWaterLiters] = useState(2.0);\n const [isPermitModalOpen, setIsPermitModalOpen] = useState(false);\n const [trekkersCount, setTrekkersCount] = useState(2);\n const [selectedHut, setSelectedHut] = useState(\"refugio-viedma\");\n const [rentCrampons, setRentCrampons] = useState(true);\n const [rentBeacon, setRentBeacon] = useState(false);\n const [permitToast, setPermitToast] = useState<string \| null>(null);\n\n // Compute pack weight\n const consumablesWeight = (foodDays 0.75 + waterLiters).toFixed(1);\n const totalPackWeight = (baseWeight + parseFloat(consumablesWeight)).toFixed(1);\n\n const waypoints = [\n {\n id: 0,\n name: \"El Chaltén Trailhead\",\n elev: \"410m\",\n dist: \"0.0 km\",\n status: \"Check-in Station\",\n water: \"Abundant\",\n wind: \"15 km/h\",\n exposure: \"Low\",\n },\n {\n id: 1,\n name: \"Paso del Viento (Pass of Winds)\",\n elev: \"1,420m\",\n dist: \"34.2 km\",\n status: \"Glacier Crossing\",\n water: \"Glacial stream (filter req.)\",\n wind: \"75 km/h Gusts\",\n exposure: \"Extreme High\",\n },\n {\n id: 2,\n name: \"Refugio Glaciar Viedma\",\n elev: \"680m\",\n dist: \"68.5 km\",\n status: \"High Mountain Hut\",\n water: \"Gravity Spring\",\n wind: \"30 km/h\",\n exposure: \"Moderate\",\n },\n {\n id: 3,\n name: \"Paso Huemul Ridge\",\n elev: \"980m\",\n dist: \"102.4 km\",\n status: \"Fixed Cable Traverse\",\n water: \"Seasonal snowmelt\",\n wind: \"60 km/h\",\n exposure: \"High\",\n },\n {\n id: 4,\n name: \"Bahía Túnel Lake Terminus\",\n elev: \"220m\",\n dist: \"148.0 km\",\n status: \"Ferry Dock Extraction\",\n water: \"Lakefront potable\",\n wind: \"20 km/h\",\n exposure: \"Low\",\n },\n ];\n\n const itineraryDays = [\n {\n day: 1,\n title: \"Valley Incline & Rio Fitz Roy Approach\",\n dist: \"16.4 km\",\n gain: \"+620m / -120m\",\n time: \"5.5 hrs\",\n weather: \"Partly Cloudy • 14°C\",\n camp: \"Campamento Poincenot (Forest Shelter)\",\n notes: \"Cross suspension bridge over glacial torrent. Good tree cover for high wind protection.\",\n },\n {\n day: 2,\n title: \"Moraine Ascent to Paso del Viento\",\n dist: \"18.2 km\",\n gain: \"+940m / -380m\",\n time: \"7.0 hrs\",\n weather: \"High Winds • 4°C\",\n camp: \"Campamento Paso del Viento (Rock Bivvy)\",\n notes: \"Tyrolean zip traverse across Rio Túnel required. Helmets & harness mandatory.\",\n },\n {\n day: 3,\n title: \"Patagonian Icecap Rim & Glaciar Viedma\",\n dist: \"14.5 km\",\n gain: \"+310m / -850m\",\n time: \"6.0 hrs\",\n weather: \"Snow Flurries • 1°C\",\n camp: \"Refugio Viedma Mountain Base\",\n notes: \"Spectacular panoramic vista over the Southern Patagonian Icefield. Crampons advised.\",\n },\n {\n day: 4,\n title: \"Southern Shoreline of Lago Viedma\",\n dist: \"21.0 km\",\n gain: \"+480m / -540m\",\n time: \"6.5 hrs\",\n weather: \"Sunny Intervals • 12°C\",\n camp: \"Campamento Bahia de los Témpanos\",\n notes: \"Follow natural iceberg washup zone. Ice blocks calving every 30-45 minutes.\",\n },\n ];\n\n const handlePermitSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsPermitModalOpen(false);\n setPermitToast(\\`Wilderness Permit issued for \\${trekkersCount} trekkers! Confirmation: #PAT-\\${Math.floor(10000 + Math.random() * 90000)}\\`);\n setTimeout(() => setPermitToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Compass className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"NomadRoute Expeditions\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/10 text-amber-500 border border-amber-500/20\">\n Patagonia Crossing\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Wilderness Backcountry Topography & Permits</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Radio className=\"w-3.5 h-3.5 text-emerald-500 animate-pulse\" />\n <span>Iridium Satellite: Active</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">SOS Sync OK</span>\n </div>\n\n <button\n onClick={() => setIsPermitModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Tent className=\"h-3.5 w-3.5\" />\n <span>Reserve Permits</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {permitToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{permitToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Expedition Hero Ribbon /}\n <div\n className=\"p-6 rounded-2xl border relative overflow-hidden\"\n \n >\n <div className=\"flex flex-col lg:flex-row lg:items-center justify-between gap-4\">\n <div>\n <div className=\"flex flex-wrap items-center gap-2 mb-2\">\n <span className=\"px-2 py-0.5 rounded text-[11px] font-bold bg-amber-500/10 text-amber-500 border border-amber-500/20\">\n Grade IV Wilderness\n </span>\n <span className=\"px-2 py-0.5 rounded text-[11px] font-mono border\" >\n Los Glaciares National Park\n </span>\n <span className=\"px-2 py-0.5 rounded text-[11px] font-mono border\" >\n Coordinates: 49°16'S 73°02'W\n </span>\n </div>\n <h1 className=\"text-xl sm:text-3xl font-extrabold tracking-tight mb-2\">\n The Southern Patagonian Icefield Circuit\n </h1>\n <p className=\"text-xs sm:text-sm opacity-70 max-w-2xl\">\n A non-technical alpine high traverse negotiating moraine boulder fields, tyrolean river cables, and high passes above the third-largest ice field on Earth.\n </p>\n </div>\n\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 text-center shrink-0\">\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Total Trek</div>\n <div className=\"text-lg font-extrabold font-mono\">148 km</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Total Gain</div>\n <div className=\"text-lg font-extrabold font-mono text-emerald-500\">+6,850m</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Duration</div>\n <div className=\"text-lg font-extrabold font-mono\">8 Days</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Max Elevation</div>\n <div className=\"text-lg font-extrabold font-mono text-amber-500\">1,420m</div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1: Interactive Elevation & Waypoint Topography Profile /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h2 className=\"text-base font-bold tracking-tight\">Interactive Elevation Topography & Waypoints</h2>\n <p className=\"text-xs opacity-65\">Click waypoint markers along the ridge profile to view live checkpoint telemetry</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Datum: WGS84 Elevation Profile</span>\n </div>\n\n {/ Graphical Elevation Chart Simulation /}\n <div className=\"relative pt-6 pb-2 px-2 border rounded-xl mb-6 overflow-x-auto\" style={{ borderColor: \"rgba(255, 255, 255, 0.08)\", backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.6)\" }}>\n <div className=\"min-w-[600px] h-40 flex items-end justify-between relative px-6\">\n {/ SVG Mountain contour line /}\n <svg className=\"absolute inset-0 w-full h-full pointer-events-none\" preserveAspectRatio=\"none\" viewBox=\"0 0 600 160\">\n <defs>\n <linearGradient id=\"topoGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#6366f1\" stopOpacity=\"0.35\" />\n <stop offset=\"100%\" stopColor=\"#6366f1\" stopOpacity=\"0.0\" />\n </linearGradient>\n </defs>\n <path\n d=\"M 20 130 Q 80 120, 150 25 T 300 85 T 440 50 T 580 140 L 580 160 L 20 160 Z\"\n fill=\"url(#topoGradient)\"\n />\n <path\n d=\"M 20 130 Q 80 120, 150 25 T 300 85 T 440 50 T 580 140\"\n fill=\"none\"\n stroke=\"#6366f1\"\n strokeWidth=\"3\"\n />\n </svg>\n\n {/ Waypoint interactive markers /}\n {waypoints.map((wp) => {\n const isSelected = selectedWaypoint === wp.id;\n return (\n <button\n key={wp.id}\n onClick={() => setSelectedWaypoint(wp.id)}\n className=\"relative z-10 flex flex-col items-center group focus:outline-none transition-transform active:scale-95\"\n >\n <div\n className={\\`w-6 h-6 rounded-full border-2 flex items-center justify-center text-[10px] font-bold shadow-md transition-all \\${\n isSelected ? \"scale-125 ring-4 ring-indigo-500/20 text-white\" : \"opacity-80 hover:opacity-100\"\n }\\`}\n style={{\n backgroundColor: isSelected ? \"#6366f1\" : \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {wp.id + 1}\n </div>\n <span className=\"text-[11px] font-semibold mt-1 max-w-[90px] text-center truncate\">\n {wp.name}\n </span>\n <span className=\"text-[10px] font-mono opacity-65\">{wp.elev}</span>\n </button>\n );\n })}\n </div>\n </div>\n\n {/ Selected Waypoint Detail Card /}\n {waypoints[selectedWaypoint] && (\n <div\n className=\"p-4 rounded-xl border grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 text-xs\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.8)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div>\n <span className=\"opacity-60 block text-[10px]\">Checkpoint</span>\n <span className=\"font-bold\">{waypoints[selectedWaypoint].name}</span>\n </div>\n <div>\n <span className=\"opacity-60 block text-[10px]\">Elevation</span>\n <span className=\"font-mono font-bold text-amber-500\">{waypoints[selectedWaypoint].elev}</span>\n </div>\n <div>\n <span className=\"opacity-60 block text-[10px]\">Route Distance</span>\n <span className=\"font-mono\">{waypoints[selectedWaypoint].dist}</span>\n </div>\n <div>\n <span className=\"opacity-60 block text-[10px]\">Terrain Class</span>\n <span className=\"font-semibold text-emerald-500\">{waypoints[selectedWaypoint].status}</span>\n </div>\n <div>\n <span className=\"opacity-60 block text-[10px]\">Water Refill</span>\n <span>{waypoints[selectedWaypoint].water}</span>\n </div>\n <div>\n <span className=\"opacity-60 block text-[10px]\">Exposure / Wind</span>\n <span className=\"text-rose-500 font-semibold\">{waypoints[selectedWaypoint].wind}</span>\n </div>\n </div>\n )}\n </div>\n\n {/ Section 2 & 3: Pack Weight Calculator & Day-by-Day Stages /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Pack Weight Calculator /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Scale className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Pack Weight Distribution</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n {parseFloat(totalPackWeight) < 12 ? \"Ultralight\" : \"Expedition Load\"}\n </span>\n </div>\n\n {/ Total Display /}\n <div className=\"p-4 rounded-xl border text-center mb-6\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-4xl font-extrabold font-mono tracking-tight\" >\n {totalPackWeight} <span className=\"text-sm font-normal opacity-70\">KG</span>\n </div>\n <div className=\"text-xs opacity-60 mt-1\">\n Base Weight: {baseWeight}kg • Consumables: {consumablesWeight}kg\n </div>\n </div>\n\n {/ Controls /}\n <div className=\"space-y-4 text-xs\">\n <div>\n <div className=\"flex justify-between mb-1\">\n <span className=\"opacity-80\">Base Gear (Shelter, Sleep, Cook)</span>\n <span className=\"font-mono font-bold\">{baseWeight.toFixed(1)} kg</span>\n </div>\n <input\n type=\"range\"\n min=\"4.0\"\n max=\"10.0\"\n step=\"0.2\"\n value={baseWeight}\n onChange={(e) => setBaseWeight(parseFloat(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1\">\n <span className=\"opacity-80\">Ration Days (0.75 kg/day)</span>\n <span className=\"font-mono font-bold\">{foodDays} Days</span>\n </div>\n <input\n type=\"range\"\n min=\"2\"\n max=\"10\"\n step=\"1\"\n value={foodDays}\n onChange={(e) => setFoodDays(parseInt(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1\">\n <span className=\"opacity-80\">Hydration Volume</span>\n <span className=\"font-mono font-bold\">{waterLiters.toFixed(1)} Liters</span>\n </div>\n <input\n type=\"range\"\n min=\"1.0\"\n max=\"4.0\"\n step=\"0.5\"\n value={waterLiters}\n onChange={(e) => setWaterLiters(parseFloat(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t text-[11px] opacity-70 flex items-center gap-2\" >\n <ShieldCheck className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>Recommended skin-out pack weight < 20% of trekker body mass.</span>\n </div>\n </div>\n\n {/ Day-by-Day Stages /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Expedition Stages Itinerary</h3>\n <p className=\"text-xs opacity-65\">Tap any day stage to review terrain hazards & camp coordinates</p>\n </div>\n <span className=\"text-xs font-mono px-2.5 py-1 rounded-lg border\" >\n 4 of 8 Days Detailed\n </span>\n </div>\n\n <div className=\"space-y-3\">\n {itineraryDays.map((stage) => {\n const isExpanded = expandedDay === stage.day;\n return (\n <div\n key={stage.day}\n className=\"rounded-xl border transition-all overflow-hidden\"\n style={{\n backgroundColor: isExpanded ? (isDark ? \"rgba(255,255,255,0.03)\" : \"rgba(0,0,0,0.02)\") : \"transparent\",\n borderColor: isExpanded ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <button\n onClick={() => setExpandedDay(isExpanded ? null : stage.day)}\n className=\"w-full p-3.5 flex items-center justify-between text-left gap-3\"\n >\n <div className=\"flex items-center gap-3\">\n <span\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold text-xs shrink-0\"\n style={{\n backgroundColor: isExpanded ? \"#6366f1\" : (isDark ? \"rgba(255,255,255,0.08)\" : \"rgba(0,0,0,0.05)\"),\n color: isExpanded ? \"#ffffff\" : \"inherit\",\n }}\n >\n D{stage.day}\n </span>\n <div>\n <h4 className=\"text-xs sm:text-sm font-bold\">{stage.title}</h4>\n <div className=\"flex flex-wrap items-center gap-2 text-[11px] opacity-65 mt-0.5\">\n <span>{stage.dist}</span>\n <span>•</span>\n <span>{stage.gain}</span>\n <span>•</span>\n <span className=\"font-mono\">{stage.time}</span>\n </div>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <span className=\"hidden sm:inline-block text-xs font-medium px-2 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800\">\n {stage.weather}\n </span>\n <ChevronDown className={\\`w-4 h-4 opacity-50 transition-transform \\${isExpanded ? \"rotate-180\" : \"\"}\\`} />\n </div>\n </button>\n\n <AnimatePresence>\n {isExpanded && (\n <motion.div\n initial={{ height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n className=\"px-4 pb-4 pt-1 border-t text-xs space-y-2\"\n \n >\n <div className=\"flex items-center gap-2 text-indigo-400 font-semibold\">\n <Tent className=\"w-3.5 h-3.5\" />\n <span>Designated Bivvy: {stage.camp}</span>\n </div>\n <p className=\"opacity-75 leading-relaxed\">{stage.notes}</p>\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n\n {/ Section 4: Satellite Telemetry & Emergency SOS Card /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center shrink-0 border border-emerald-500/20\">\n <Navigation className=\"w-5 h-5\" />\n </div>\n <div>\n <h3 className=\"text-sm sm:text-base font-bold\">Garmin InReach Satellite Telemetry Active</h3>\n <p className=\"text-xs opacity-65\">Automated 10-minute location beacon pings transmitted to Park Rangers</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-4 text-xs font-mono\">\n <div>\n <span className=\"opacity-50 block text-[10px]\">Battery Level</span>\n <span className=\"font-bold text-emerald-500\">94% (6 Days left)</span>\n </div>\n <div>\n <span className=\"opacity-50 block text-[10px]\">Emergency VHF</span>\n <span className=\"font-bold\">147.525 MHz</span>\n </div>\n <div>\n <span className=\"opacity-50 block text-[10px]\">Active Trackers</span>\n <span className=\"font-bold\">4 Rangers online</span>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Reservation & Permit Modal /}\n <AnimatePresence>\n {isPermitModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsPermitModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Tent className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Reserve Wilderness Permits</h3>\n </div>\n\n <form onSubmit={handlePermitSubmit} className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Designated Mountain Hut / Sector</label>\n <select\n value={selectedHut}\n onChange={(e) => setSelectedHut(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"refugio-viedma\">Refugio Glaciar Viedma (Sector B)</option>\n <option value=\"camp-poincenot\">Campamento Poincenot (Forest Pods)</option>\n <option value=\"paso-huemul\">Paso Huemul High Bivvy</option>\n </select>\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Party Size (Trekkers)</label>\n <input\n type=\"number\"\n min=\"1\"\n max=\"6\"\n value={trekkersCount}\n onChange={(e) => setTrekkersCount(parseInt(e.target.value) \|\| 1)}\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Start Date</label>\n <input\n type=\"date\"\n defaultValue=\"2026-11-15\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n </div>\n\n <div className=\"space-y-2 pt-2 border-t\" >\n <label className=\"block font-semibold opacity-80\">Essential Technical Rentals</label>\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={rentCrampons}\n onChange={(e) => setRentCrampons(e.target.checked)}\n className=\"accent-indigo-500\"\n />\n <span>Petzl Steel Crampons & Ice Axe Bundle ($18/day)</span>\n </label>\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={rentBeacon}\n onChange={(e) => setRentBeacon(e.target.checked)}\n className=\"accent-indigo-500\"\n />\n <span>Garmin InReach Satellite SOS Transceiver ($24/day)</span>\n </label>\n </div>\n\n <div className=\"p-3 rounded-xl border flex items-center justify-between font-mono\" >\n <span className=\"opacity-70\">Permit & Park Fee:</span>\n <span className=\"font-bold text-sm text-emerald-500\">\\${trekkersCount 45 + (rentCrampons ? 36 : 0)} USD</span>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Issue National Park Permit\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateDevopsKubernetes = {\n name: \"template-devops-kubernetes\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-devops-kubernetes.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Server,\n Cpu,\n Database,\n Activity,\n AlertCircle,\n CheckCircle2,\n RefreshCw,\n Terminal,\n Search,\n Filter,\n Play,\n Pause,\n SlidersHorizontal,\n ChevronDown,\n Layers,\n HardDrive,\n X,\n Plus,\n ArrowUpRight,\n ShieldCheck,\n Radio,\n} from \"lucide-react\";\n\nexport interface DevopsKubernetesTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function DevopsKubernetesTemplate({\n brandName = \"KubeOrbit Cloud\",\n theme = \"dark\",\n}: DevopsKubernetesTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedCluster, setSelectedCluster] = useState(\"prod-eu-central-1\");\n const [podFilter, setPodFilter] = useState<\"all\" \| \"running\" \| \"crashloop\" \| \"pending\">(\"all\");\n const [searchPod, setSearchPod] = useState(\"\");\n const [canaryWeight, setCanaryWeight] = useState(15); // 15% canary, 85% stable\n const [selectedNode, setSelectedNode] = useState<number \| null>(0);\n const [isLogsPaused, setIsLogsPaused] = useState(false);\n const [isDeployModalOpen, setIsDeployModalOpen] = useState(false);\n const [deployToast, setDeployToast] = useState<string \| null>(null);\n\n const nodes = [\n { id: 0, name: \"node-c5.4xlarge-01\", region: \"eu-central-1a\", cpu: \"68%\", ram: \"74%\", pods: 42, status: \"Ready\", role: \"Worker\" },\n { id: 1, name: \"node-c5.4xlarge-02\", region: \"eu-central-1b\", cpu: \"82%\", ram: \"88%\", pods: 46, status: \"Ready\", role: \"Worker\" },\n { id: 2, name: \"node-g4dn.2xlarge-03\", region: \"eu-central-1a\", cpu: \"45%\", ram: \"52%\", pods: 18, status: \"Ready\", role: \"GPU Tensor\" },\n { id: 3, name: \"node-m5.2xlarge-04\", region: \"eu-central-1c\", cpu: \"91%\", ram: \"94%\", pods: 38, status: \"Pressure\", role: \"Memory High\" },\n ];\n\n const pods = [\n { name: \"auth-gateway-7b89f6-2dla\", namespace: \"ingress\", status: \"Running\", restarts: 0, age: \"14d\", cpu: \"140m\", mem: \"312Mi\" },\n { name: \"payment-worker-64cb89-x99k\", namespace: \"finance\", status: \"Running\", restarts: 0, age: \"4d\", cpu: \"420m\", mem: \"840Mi\" },\n { name: \"vector-indexer-59fa12-z7lp\", namespace: \"ai-mesh\", status: \"CrashLoopBackOff\", restarts: 14, age: \"12m\", cpu: \"880m\", mem: \"1.8Gi\" },\n { name: \"telemetry-collector-41da-k2pp\", namespace: \"monitoring\", status: \"Running\", restarts: 1, age: \"28d\", cpu: \"95m\", mem: \"180Mi\" },\n { name: \"redis-cache-shard-02\", namespace: \"cache\", status: \"Pending\", restarts: 0, age: \"2m\", cpu: \"0m\", mem: \"0Mi\" },\n { name: \"billing-cron-job-28491-pl9s\", namespace: \"finance\", status: \"Running\", restarts: 0, age: \"1h\", cpu: \"210m\", mem: \"410Mi\" },\n ];\n\n const logLines = [\n { time: \"14:28:40.102\", level: \"INFO\", src: \"auth-gateway\", msg: \"TLS 1.3 handshake negotiated with 194.26.29.11\" },\n { time: \"14:28:41.220\", level: \"INFO\", src: \"payment-worker\", msg: \"Batch settled: 420 ledger entries dispatched in 18ms\" },\n { time: \"14:28:42.508\", level: \"WARN\", src: \"node-m5-04\", msg: \"Kubelet memory eviction threshold warning (free < 6%)\" },\n { time: \"14:28:43.910\", level: \"ERROR\", src: \"vector-indexer\", msg: \"OOMKilled: container exceeded memory limit 2048MiB\" },\n { time: \"14:28:44.305\", level: \"INFO\", src: \"kube-scheduler\", msg: \"Pod redis-cache-shard-02 placed on node-c5.4xlarge-01\" },\n ];\n\n const filteredPods = pods.filter((p) => {\n const matchFilter =\n podFilter === \"all\" \|\|\n (podFilter === \"running\" && p.status === \"Running\") \|\|\n (podFilter === \"crashloop\" && p.status === \"CrashLoopBackOff\") \|\|\n (podFilter === \"pending\" && p.status === \"Pending\");\n const matchSearch = p.name.toLowerCase().includes(searchPod.toLowerCase()) \|\| p.namespace.toLowerCase().includes(searchPod.toLowerCase());\n return matchFilter && matchSearch;\n });\n\n const handleDeploySubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsDeployModalOpen(false);\n setDeployToast(\"Manifest deployed! Rolling update initiated across 3 replicas.\");\n setTimeout(() => setDeployToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Server className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"KubeOrbit Cloud\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n k8s v1.31.1\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Kubernetes Multi-Cluster Orchestration & SRE Fleet</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <select\n value={selectedCluster}\n onChange={(e) => setSelectedCluster(e.target.value)}\n className=\"hidden sm:block px-3 py-1.5 rounded-xl border text-xs font-mono outline-none font-medium\"\n \n >\n <option value=\"prod-eu-central-1\">prod-eu-central-1 (Frankfurt)</option>\n <option value=\"prod-us-east-1\">prod-us-east-1 (N. Virginia)</option>\n <option value=\"staging-ap-east-1\">staging-ap-east-1 (Tokyo)</option>\n </select>\n\n <button\n onClick={() => setIsDeployModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Plus className=\"h-3.5 w-3.5\" />\n <span>Deploy Workload</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {deployToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{deployToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Top 4 Cluster Health KPI Cards /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">CPU Capacity Saturation</span>\n <Cpu className=\"w-4 h-4 text-indigo-400\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">68.4%</span>\n <span className=\"text-xs opacity-60\">128 / 192 Cores</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Healthy headroom across 32 active worker nodes.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-indigo-500 rounded-full w-[68%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Cluster RAM Allocation</span>\n <Database className=\"w-4 h-4 text-amber-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">82.1%</span>\n <span className=\"text-xs text-amber-500 font-medium\">Warning > 80%</span>\n </div>\n <p className=\"text-[11px] opacity-65\">394 GiB of 480 GiB committed by pod requests.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-amber-500 rounded-full w-[82%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Pod Lifecycle Status</span>\n <Activity className=\"w-4 h-4 text-emerald-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight text-emerald-500\">242</span>\n <span className=\"text-xs opacity-60\">/ 248 Healthy</span>\n </div>\n <p className=\"text-[11px] opacity-65\">1 CrashLoopBackOff • 5 Pending scheduling.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-emerald-500 rounded-full w-[97%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Ingress Mesh Bandwidth</span>\n <Server className=\"w-4 h-4 text-cyan-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">4.82</span>\n <span className=\"text-xs opacity-60\">Gbps</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Zero packet drop • Envoy P99 latency 1.4ms.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-cyan-500 rounded-full w-[54%]\" />\n </div>\n </div>\n </div>\n\n {/ Section 1: Multi-Region Kubernetes Node Cluster Grid /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h2 className=\"text-base font-bold tracking-tight\">Active Node Fleet & Pressure Telemetry</h2>\n <p className=\"text-xs opacity-65\">Click a node to inspect system metrics and simulate cordon/drain actions</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Region: Frankfurt AZ-1a/b/c</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {nodes.map((n) => {\n const isSelected = selectedNode === n.id;\n const hasPressure = n.status === \"Pressure\";\n return (\n <div\n key={n.id}\n onClick={() => setSelectedNode(n.id)}\n className={\\`p-4 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-md\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs font-bold font-mono truncate max-w-[150px]\">{n.name}</span>\n <span\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold \\${\n hasPressure\n ? \"bg-amber-500/10 text-amber-500 border border-amber-500/20\"\n : \"bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\"\n }\\`}\n >\n {n.status}\n </span>\n </div>\n\n <div className=\"text-[11px] opacity-60 mb-3\">{n.role} • {n.region}</div>\n\n <div className=\"space-y-2 text-xs font-mono\">\n <div>\n <div className=\"flex justify-between text-[10px] mb-1\">\n <span className=\"opacity-70\">CPU: {n.cpu}</span>\n <span className=\"opacity-70\">RAM: {n.ram}</span>\n </div>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden flex\">\n <div className=\"h-full bg-indigo-500\" style={{ width: n.cpu }} />\n </div>\n </div>\n\n <div className=\"flex items-center justify-between text-[11px] pt-1\">\n <span className=\"opacity-60\">{n.pods} Running Pods</span>\n <span className=\"text-indigo-400 font-semibold text-[10px]\">Inspect →</span>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Section 2 & 3: Pod Health Matrix & Canary Deployment /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Pod Health Matrix Table /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Pod Workload Inventory</h3>\n <p className=\"text-xs opacity-65\">Real-time status across all namespaces</p>\n </div>\n\n {/ Filters /}\n <div className=\"flex flex-wrap items-center gap-1.5 p-1 rounded-xl border text-xs\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.8)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <button\n onClick={() => setPodFilter(\"all\")}\n className={\\`px-2.5 py-1 rounded-lg \\${podFilter === \"all\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n All (6)\n </button>\n <button\n onClick={() => setPodFilter(\"running\")}\n className={\\`px-2.5 py-1 rounded-lg \\${podFilter === \"running\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n Running\n </button>\n <button\n onClick={() => setPodFilter(\"crashloop\")}\n className={\\`px-2.5 py-1 rounded-lg \\${podFilter === \"crashloop\" ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-70 hover:opacity-100\"}\\`}\n >\n OOM/Crash\n </button>\n </div>\n </div>\n\n {/ Search Input /}\n <div className=\"relative mb-4\">\n <Search className=\"absolute left-3 top-2.5 w-3.5 h-3.5 opacity-50\" />\n <input\n type=\"text\"\n placeholder=\"Search pod name or namespace...\"\n value={searchPod}\n onChange={(e) => setSearchPod(e.target.value)}\n className=\"w-full pl-9 pr-3 py-2 rounded-xl border text-xs outline-none font-mono\"\n style={{ backgroundColor: \"#090a0f\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}\n />\n </div>\n\n {/ Pod Table /}\n <div className=\"overflow-x-auto\">\n <table className=\"w-full text-xs text-left\">\n <thead>\n <tr className=\"border-b opacity-60 text-[11px]\" >\n <th className=\"pb-2\">Pod Identifier</th>\n <th className=\"pb-2\">Namespace</th>\n <th className=\"pb-2\">Status</th>\n <th className=\"pb-2\">CPU</th>\n <th className=\"pb-2\">Memory</th>\n <th className=\"pb-2\">Restarts</th>\n </tr>\n </thead>\n <tbody className=\"divide-y font-mono\" >\n {filteredPods.map((p, idx) => (\n <tr key={idx} className=\"hover:bg-zinc-500/5 transition-colors\">\n <td className=\"py-2.5 font-bold truncate max-w-[180px]\">{p.name}</td>\n <td className=\"py-2.5 opacity-70\">{p.namespace}</td>\n <td className=\"py-2.5\">\n <span\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold \\${\n p.status === \"Running\"\n ? \"bg-emerald-500/10 text-emerald-500\"\n : p.status === \"CrashLoopBackOff\"\n ? \"bg-rose-500/10 text-rose-500\"\n : \"bg-amber-500/10 text-amber-500\"\n }\\`}\n >\n {p.status}\n </span>\n </td>\n <td className=\"py-2.5 opacity-70\">{p.cpu}</td>\n <td className=\"py-2.5 opacity-70\">{p.mem}</td>\n <td className=\"py-2.5 opacity-70\">{p.restarts}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n\n {/ Canary Deployment & Ingress Splitter /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <SlidersHorizontal className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Canary Ingress Split</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20\">\n Istio Route\n </span>\n </div>\n\n <div className=\"p-4 rounded-xl border text-center mb-6\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-3xl font-extrabold font-mono tracking-tight text-indigo-500\">\n {canaryWeight}% <span className=\"text-sm font-normal opacity-70\">Canary v2.5.0</span>\n </div>\n <div className=\"text-xs opacity-60 mt-1\">\n Stable v2.4.0 receiving {100 - canaryWeight}% of live ingress traffic\n </div>\n </div>\n\n {/ Slider /}\n <div className=\"space-y-2 mb-6\">\n <div className=\"flex justify-between text-xs font-mono opacity-70\">\n <span>0% (Drain Canary)</span>\n <span>100% (Promote)</span>\n </div>\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={canaryWeight}\n onChange={(e) => setCanaryWeight(Number(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n <div className=\"space-y-3 text-xs\">\n <div className=\"flex items-center justify-between p-2.5 rounded-lg border\" >\n <span className=\"opacity-70\">Stable Error Rate</span>\n <span className=\"font-mono text-emerald-500 font-bold\">0.012% P99</span>\n </div>\n <div className=\"flex items-center justify-between p-2.5 rounded-lg border\" >\n <span className=\"opacity-70\">Canary Error Rate</span>\n <span className=\"font-mono text-emerald-500 font-bold\">0.018% P99</span>\n </div>\n </div>\n </div>\n\n <button\n onClick={() => {\n setCanaryWeight(100);\n setDeployToast(\"Canary promoted to 100% stable production traffic!\");\n setTimeout(() => setDeployToast(null), 3500);\n }}\n className=\"w-full py-2.5 rounded-xl text-xs font-semibold text-white mt-4 shadow-sm transition-transform active:scale-95\"\n \n >\n Promote Canary to 100%\n </button>\n </div>\n </div>\n\n {/ Section 4: Live Streaming Pod Logs Viewer /}\n <div\n className=\"p-6 rounded-2xl border font-mono\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Terminal className=\"w-4 h-4 text-emerald-500\" />\n <h3 className=\"text-sm font-bold font-sans\">Live Pod Stream: all-namespaces stdout</h3>\n </div>\n <div className=\"flex items-center gap-2 text-xs\">\n <button\n onClick={() => setIsLogsPaused(!isLogsPaused)}\n className=\"flex items-center gap-1.5 px-3 py-1 rounded-lg border hover:opacity-100 opacity-75 transition-opacity\"\n \n >\n {isLogsPaused ? <Play className=\"w-3 h-3 text-emerald-500\" /> : <Pause className=\"w-3 h-3 text-amber-500\" />}\n <span>{isLogsPaused ? \"Resume\" : \"Pause Stream\"}</span>\n </button>\n </div>\n </div>\n\n <div\n className=\"p-4 rounded-xl border text-xs space-y-1.5 overflow-x-auto max-h-52 overflow-y-auto\"\n style={{\n backgroundColor: isDark ? \"#090a0f\" : \"#f8fafc\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {logLines.map((l, idx) => (\n <div key={idx} className=\"flex items-start gap-2 leading-relaxed\">\n <span className=\"opacity-40 shrink-0 text-[10px]\">{l.time}</span>\n <span\n className={\\`px-1.5 py-0.2 rounded text-[10px] font-bold shrink-0 \\${\n l.level === \"INFO\"\n ? \"text-cyan-400 bg-cyan-400/10\"\n : l.level === \"WARN\"\n ? \"text-amber-400 bg-amber-400/10\"\n : \"text-rose-400 bg-rose-400/10\"\n }\\`}\n >\n {l.level}\n </span>\n <span className=\"opacity-60 text-indigo-400 shrink-0\">[{l.src}]</span>\n <span className=\"opacity-85\">{l.msg}</span>\n </div>\n ))}\n </div>\n </div>\n </main>\n\n {/ Deploy Workload Modal /}\n <AnimatePresence>\n {isDeployModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsDeployModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Server className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Deploy Container Workload</h3>\n </div>\n\n <form onSubmit={handleDeploySubmit} className=\"space-y-4 text-xs font-mono\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80 font-sans\">OCI Image URI</label>\n <input\n type=\"text\"\n defaultValue=\"ghcr.io/nexore/vector-mesh:v2.5.1\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n\n <div className=\"grid grid-cols-2 gap-3 font-sans\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Target Namespace</label>\n <select\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n >\n <option value=\"ingress\">ingress</option>\n <option value=\"ai-mesh\">ai-mesh</option>\n <option value=\"finance\">finance</option>\n </select>\n </div>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Replicas</label>\n <input\n type=\"number\"\n defaultValue=\"3\"\n min=\"1\"\n max=\"16\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-mono\"\n \n />\n </div>\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80 font-sans\">CPU Limit</label>\n <input\n type=\"text\"\n defaultValue=\"1000m\"\n className=\"w-full p-2.5 rounded-xl border outline-none\"\n \n />\n </div>\n <div>\n <label className=\"block font-semibold mb-1 opacity-80 font-sans\">Memory Limit</label>\n <input\n type=\"text\"\n defaultValue=\"2048Mi\"\n className=\"w-full p-2.5 rounded-xl border outline-none\"\n \n />\n </div>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95 font-sans\"\n \n >\n Apply Manifest to Cluster\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateAudioDaw = {\n name: \"template-audio-daw\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-audio-daw.tsx\",\n content: `\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Play,\n Pause,\n RotateCcw,\n Volume2,\n VolumeX,\n Sliders,\n Radio,\n Disc,\n Headphones,\n Music,\n CheckCircle2,\n X,\n Download,\n Share2,\n Layers,\n Sparkles,\n ShoppingBag,\n} from \"lucide-react\";\n\nexport interface AudioDawTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AudioDawTemplate({\n brandName = \"SoundForge Studio\",\n theme = \"dark\",\n}: AudioDawTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // Sequencer playback states\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentStep, setCurrentStep] = useState(0);\n const [bpm, setBpm] = useState(140);\n const [selectedLicense, setSelectedLicense] = useState(\"wav\");\n const [isCheckoutModalOpen, setIsCheckoutModalOpen] = useState(false);\n const [checkoutToast, setCheckoutToast] = useState<string \| null>(null);\n\n // FX states\n const [reverbWet, setReverbWet] = useState(32);\n const [delayTime, setDelayTime] = useState(250);\n const [filterCutoff, setFilterCutoff] = useState(12500);\n\n // Sequencer 16-step matrix (4 instruments x 16 steps)\n const [pattern, setPattern] = useState<Record<string, boolean[]>>({\n kick: [true, false, false, false, true, false, false, false, true, false, false, false, true, false, false, false],\n snare: [false, false, false, false, true, false, false, false, false, false, false, false, true, false, false, false],\n hihat: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true],\n perc: [false, false, true, false, false, false, true, false, false, true, false, false, false, false, true, false],\n });\n\n // Mixer channels\n const [channels, setChannels] = useState([\n { id: \"drums\", name: \"Drums Bus\", volume: 82, pan: 0, mute: false, solo: false, peak: \"-2.1 dB\" },\n { id: \"bass\", name: \"808 Sub-Bass\", volume: 90, pan: 0, mute: false, solo: false, peak: \"-0.8 dB\" },\n { id: \"synth\", name: \"Neon Synth Lead\", volume: 74, pan: -15, mute: false, solo: false, peak: \"-4.2 dB\" },\n { id: \"vocals\", name: \"Glitch Vox Chops\", volume: 68, pan: 20, mute: false, solo: false, peak: \"-5.6 dB\" },\n ]);\n\n // Step sequencer animation ticker\n useEffect(() => {\n let interval: ReturnType<typeof setInterval>;\n if (isPlaying) {\n const stepDuration = (60 / bpm / 4) 1000;\n interval = setInterval(() => {\n setCurrentStep((prev) => (prev + 1) % 16);\n }, stepDuration);\n }\n return () => clearInterval(interval);\n }, [isPlaying, bpm]);\n\n const toggleStep = (instrument: string, stepIdx: number) => {\n setPattern((prev) => ({\n ...prev,\n [instrument]: prev[instrument].map((active, idx) => (idx === stepIdx ? !active : active)),\n }));\n };\n\n const toggleMute = (channelId: string) => {\n setChannels((prev) =>\n prev.map((ch) => (ch.id === channelId ? { ...ch, mute: !ch.mute } : ch))\n );\n };\n\n const toggleSolo = (channelId: string) => {\n setChannels((prev) =>\n prev.map((ch) => (ch.id === channelId ? { ...ch, solo: !ch.solo } : ch))\n );\n };\n\n const updateVolume = (channelId: string, val: number) => {\n setChannels((prev) =>\n prev.map((ch) => (ch.id === channelId ? { ...ch, volume: val } : ch))\n );\n };\n\n const licenses = [\n { id: \"mp3\", title: \"Standard MP3\", price: \"$29\", format: \"320kbps MP3\", streams: \"100,000 Streams\", tag: \"Starter\" },\n { id: \"wav\", title: \"Premium WAV\", price: \"$69\", format: \"24-bit 48kHz WAV\", streams: \"500,000 Streams\", tag: \"Most Popular\" },\n { id: \"stems\", title: \"Trackout Stems\", price: \"$149\", format: \"Separated Audio Stems\", streams: \"Unlimited Distribution\", tag: \"Pro Mix\" },\n { id: \"exclusive\", title: \"Full Exclusive\", price: \"$399\", format: \"Full Master Ownership\", streams: \"Complete Copyright Transfer\", tag: \"Sole Owner\" },\n ];\n\n const handleCheckoutSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsCheckoutModalOpen(false);\n setCheckoutToast(\"License agreement issued! High-res stems download link ready.\");\n setTimeout(() => setCheckoutToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Sliders className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"SoundForge Studio\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20\">\n DAW Engine v4.2\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Virtual Sequencer & Audio Stem Marketplace</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Radio className=\"w-3.5 h-3.5 text-rose-500 animate-pulse\" />\n <span>Session: Midnight Cyberpunk</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-amber-500\">Key: D Minor</span>\n </div>\n\n <button\n onClick={() => setIsCheckoutModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <ShoppingBag className=\"h-3.5 w-3.5\" />\n <span>License Beat</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {checkoutToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{checkoutToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Top Transport & Master Visualizer Bar /}\n <div\n className=\"p-5 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col lg:flex-row lg:items-center justify-between gap-4\">\n {/ Playback controls /}\n <div className=\"flex items-center gap-4\">\n <button\n onClick={() => setIsPlaying(!isPlaying)}\n className=\"w-12 h-12 rounded-xl flex items-center justify-center text-white shadow-lg transition-transform active:scale-95\"\n \n >\n {isPlaying ? <Pause className=\"w-5 h-5 fill-white\" /> : <Play className=\"w-5 h-5 fill-white ml-0.5\" />}\n </button>\n\n <div>\n <div className=\"flex items-center gap-2 mb-1\">\n <span className=\"text-xs font-mono opacity-60\">MASTER TEMPO</span>\n <span className=\"text-sm font-bold font-mono text-indigo-400\">{bpm} BPM</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <input\n type=\"range\"\n min=\"90\"\n max=\"180\"\n value={bpm}\n onChange={(e) => setBpm(Number(e.target.value))}\n className=\"w-32 accent-indigo-500 cursor-pointer\"\n />\n <button\n onClick={() => setBpm(140)}\n className=\"px-2 py-0.5 rounded border text-[10px] font-mono opacity-70 hover:opacity-100\"\n \n >\n Reset\n </button>\n </div>\n </div>\n </div>\n\n {/ Audio Spectrum Visualizer simulation /}\n <div className=\"flex items-end gap-1 h-12 px-4 py-1 rounded-xl border flex-1 max-w-md justify-between overflow-hidden\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n {[45, 68, 85, 92, 60, 78, 95, 82, 70, 88, 55, 40, 65, 80, 50, 30].map((barHeight, idx) => (\n <div\n key={idx}\n className=\"w-full bg-zinc-200 dark:bg-zinc-800 rounded-t transition-all duration-75\"\n style={{\n height: isPlaying ? \\`\\${Math.max(barHeight (Math.sin(currentStep + idx) * 0.4 + 0.6), 15)}%\\` : \"15%\",\n backgroundColor: isPlaying ? \"#6366f1\" : \"currentColor\",\n opacity: isPlaying ? 0.9 : 0.2,\n }}\n />\n ))}\n </div>\n\n {/* Master Volume Output /}\n <div className=\"flex items-center gap-3 text-xs font-mono shrink-0\">\n <div className=\"text-right\">\n <span className=\"opacity-50 block text-[10px]\">MASTER OUTPUT</span>\n <span className=\"font-bold text-emerald-500\">-0.4 dB LUFS</span>\n </div>\n <div className=\"w-16 h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden\">\n <div className=\"h-full bg-emerald-500 w-[92%]\" />\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1: Interactive 16-Step Drum Sequencer Grid /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h2 className=\"text-base font-bold tracking-tight\">Interactive 16-Step Rhythm Sequencer</h2>\n <p className=\"text-xs opacity-65\">Click trigger pads to craft rhythm loops. Current playhead moves in real time.</p>\n </div>\n <div className=\"flex items-center gap-2 text-xs\">\n <button\n onClick={() =>\n setPattern({\n kick: Array(16).fill(false),\n snare: Array(16).fill(false),\n hihat: Array(16).fill(false),\n perc: Array(16).fill(false),\n })\n }\n className=\"px-2.5 py-1 rounded-lg border opacity-70 hover:opacity-100\"\n \n >\n Clear\n </button>\n <button\n onClick={() =>\n setPattern({\n kick: [true, false, false, false, true, false, false, false, true, false, false, false, true, false, false, false],\n snare: [false, false, false, false, true, false, false, false, false, false, false, false, true, false, false, false],\n hihat: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true],\n perc: [false, false, true, false, false, false, true, false, false, true, false, false, false, false, true, false],\n })\n }\n className=\"px-2.5 py-1 rounded-lg border text-indigo-400 font-semibold\"\n \n >\n Load Default Groove\n </button>\n </div>\n </div>\n\n <div className=\"space-y-3 overflow-x-auto pb-2\">\n {Object.keys(pattern).map((instrument) => (\n <div key={instrument} className=\"flex items-center gap-3 min-w-[620px]\">\n <div className=\"w-24 shrink-0 text-xs font-bold uppercase tracking-wider opacity-80\">\n {instrument === \"kick\"\n ? \"Kick 808\"\n : instrument === \"snare\"\n ? \"Snare Clap\"\n : instrument === \"hihat\"\n ? \"Hi-Hat Clsd\"\n : \"Perc / Rim\"}\n </div>\n\n <div className=\"flex-1 grid grid-cols-16 gap-1.5\">\n {pattern[instrument].map((active, stepIdx) => {\n const isPlayhead = isPlaying && currentStep === stepIdx;\n const isQuarter = stepIdx % 4 === 0;\n\n return (\n <button\n key={stepIdx}\n onClick={() => toggleStep(instrument, stepIdx)}\n className={\\`h-11 rounded-lg border transition-all flex items-center justify-center relative \\${\n active\n ? \"shadow-sm\"\n : isDark\n ? \"bg-zinc-900/60\"\n : \"bg-zinc-100\"\n } \\${isPlayhead ? \"ring-2 ring-amber-400\" : \"\"}\\`}\n style={{\n backgroundColor: active ? \"#6366f1\" : undefined,\n borderColor: isQuarter ? (isDark ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\") : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {active && <span className=\"w-2 h-2 rounded-full bg-white shadow\" />}\n </button>\n );\n })}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Section 2 & 3: 4-Track DAW Mixer & Master FX Rack /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ 4-Track DAW Console Mixer /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Multi-Track Stem Mixer</h3>\n <p className=\"text-xs opacity-65\">Faders, Mute/Solo logic & Stereo Panning</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">4 Stems Routed</span>\n </div>\n\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4 pt-2\">\n {channels.map((ch) => (\n <div\n key={ch.id}\n className=\"p-4 rounded-xl border flex flex-col items-center text-center gap-3\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span className=\"text-xs font-bold truncate max-w-full\">{ch.name}</span>\n\n {/ Fader & dB Meter /}\n <div className=\"flex items-center gap-3 h-36\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={ch.mute ? 0 : ch.volume}\n disabled={ch.mute}\n onChange={(e) => updateVolume(ch.id, Number(e.target.value))}\n className=\"h-32 accent-indigo-500 cursor-pointer -rotate-90 w-32\"\n />\n\n <div className=\"h-32 w-2 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden flex flex-col justify-end\">\n <div\n className=\"w-full rounded-full transition-all\"\n style={{\n height: ch.mute ? \"0%\" : \\`\\${ch.volume}%\\`,\n backgroundColor: ch.volume > 85 ? \"#f43f5e\" : \"#10b981\",\n }}\n />\n </div>\n </div>\n\n <span className=\"text-[11px] font-mono opacity-70\">{ch.mute ? \"MUTED\" : ch.peak}</span>\n\n {/ Mute and Solo buttons /}\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => toggleMute(ch.id)}\n className={\\`w-7 h-7 rounded text-[11px] font-bold border transition-colors \\${\n ch.mute ? \"bg-rose-500 text-white border-rose-500\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{ borderColor: ch.mute ? undefined : \"rgba(255, 255, 255, 0.08)\" }}\n >\n M\n </button>\n <button\n onClick={() => toggleSolo(ch.id)}\n className={\\`w-7 h-7 rounded text-[11px] font-bold border transition-colors \\${\n ch.solo ? \"bg-amber-500 text-white border-amber-500\" : \"opacity-70 hover:opacity-100\"\n }\\`}\n style={{ borderColor: ch.solo ? undefined : \"rgba(255, 255, 255, 0.08)\" }}\n >\n S\n </button>\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Master FX Controls /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Sliders className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Analog FX Rack</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20\">\n DSP Active\n </span>\n </div>\n\n <div className=\"space-y-4 text-xs\">\n <div>\n <div className=\"flex justify-between mb-1 font-mono\">\n <span className=\"opacity-80\">Studio Plate Reverb Wet</span>\n <span className=\"font-bold\">{reverbWet}%</span>\n </div>\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={reverbWet}\n onChange={(e) => setReverbWet(Number(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1 font-mono\">\n <span className=\"opacity-80\">Analog Tape Delay Feedback</span>\n <span className=\"font-bold\">{delayTime} ms</span>\n </div>\n <input\n type=\"range\"\n min=\"50\"\n max=\"800\"\n value={delayTime}\n onChange={(e) => setDelayTime(Number(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1 font-mono\">\n <span className=\"opacity-80\">Moog Low-Pass Filter Cutoff</span>\n <span className=\"font-bold\">{filterCutoff} Hz</span>\n </div>\n <input\n type=\"range\"\n min=\"200\"\n max=\"20000\"\n value={filterCutoff}\n onChange={(e) => setFilterCutoff(Number(e.target.value))}\n className=\"w-full accent-indigo-500 cursor-pointer\"\n />\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Oversampling: 4x Linear Phase</span>\n <span>Bit Depth: 32-bit Float</span>\n </div>\n </div>\n </div>\n\n {/ Section 4: Beat Licensing Marketplace Tiers /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Royalty-Free Audio Licensing Tiers</h3>\n <p className=\"text-xs opacity-65\">Instantly clear production rights for Spotify, YouTube, Apple Music, and Film Sync</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Instant Automated PDF Agreement</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {licenses.map((lic) => {\n const isSelected = selectedLicense === lic.id;\n return (\n <div\n key={lic.id}\n onClick={() => setSelectedLicense(lic.id)}\n className={\\`p-4 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-md\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-500/10 text-indigo-400\">\n {lic.tag}\n </span>\n <span className=\"text-lg font-extrabold font-mono\">{lic.price}</span>\n </div>\n <h4 className=\"text-xs font-bold mb-1\">{lic.title}</h4>\n <p className=\"text-[11px] opacity-60 mb-2\">{lic.format}</p>\n <p className=\"text-[10px] text-emerald-500 font-semibold\">{lic.streams}</p>\n </div>\n );\n })}\n </div>\n </div>\n </main>\n\n {/ Checkout Modal /}\n <AnimatePresence>\n {isCheckoutModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsCheckoutModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <ShoppingBag className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Acquire Audio License</h3>\n </div>\n\n <form onSubmit={handleCheckoutSubmit} className=\"space-y-4 text-xs\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Selected Production Tier</label>\n <select\n value={selectedLicense}\n onChange={(e) => setSelectedLicense(e.target.value)}\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"mp3\">Standard MP3 Lease ($29)</option>\n <option value=\"wav\">Premium Lossless WAV ($69)</option>\n <option value=\"stems\">Trackout Stems Bundle ($149)</option>\n <option value=\"exclusive\">Full Exclusive Master Rights ($399)</option>\n </select>\n </div>\n\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Licensee Artist / Label Legal Name</label>\n <input\n type=\"text\"\n defaultValue=\"Echo Soundworks Ltd.\"\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n />\n </div>\n\n <div className=\"p-3 rounded-xl border flex items-center justify-between font-mono\" >\n <span className=\"opacity-70\">Payable Total:</span>\n <span className=\"font-bold text-sm text-emerald-500\">\n {selectedLicense === \"mp3\" ? \"$29\" : selectedLicense === \"wav\" ? \"$69\" : selectedLicense === \"stems\" ? \"$149\" : \"$399\"} USD\n </span>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Authorize Payment & Download Stems\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateGamifiedHabits = {\n name: \"template-gamified-habits\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-gamified-habits.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Trophy, \n Shield,\n Sword,\n Sparkles,\n Flame,\n Coins,\n Heart,\n Zap,\n BookOpen,\n Dumbbell,\n CheckCircle2,\n Circle,\n Clock,\n Play,\n Pause,\n Award,\n ChevronRight,\n Package,\n X,\n Target,\n Crown,\n } from \"lucide-react\";\n\nexport interface GamifiedHabitsTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function GamifiedHabitsTemplate({\n brandName = \"QuestCraft RPG\",\n theme = \"dark\",\n}: GamifiedHabitsTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // RPG states\n const [xp, setXp] = useState(2450);\n const [level, setLevel] = useState(14);\n const [gold, setGold] = useState(1420);\n const [bossHp, setBossHp] = useState(2450);\n const [isFocusTimerRunning, setIsFocusTimerRunning] = useState(false);\n const [focusSeconds, setFocusSeconds] = useState(1500); // 25 min\n const [rpgToast, setRpgToast] = useState<string \| null>(null);\n\n // Quests\n const [quests, setQuests] = useState([\n { id: 1, title: \"Slay 90m Deep Focus Work Block\", rewardXp: 180, rewardGold: 45, type: \"Legendary\", stat: \"+2 Focus\", completed: false },\n { id: 2, title: \"Quench Thirst: 2.5L Pure Water Elixir\", rewardXp: 60, rewardGold: 15, type: \"Daily\", stat: \"+1 Vitality\", completed: true },\n { id: 3, title: \"Iron Temple: 45m Strength Hypertrophy\", rewardXp: 140, rewardGold: 35, type: \"Hard\", stat: \"+2 Strength\", completed: false },\n { id: 4, title: \"Grimoire Study: Read 20 Pages of Tech Docs\", rewardXp: 90, rewardGold: 20, type: \"Medium\", stat: \"+1 Wisdom\", completed: false },\n ]);\n\n // Inventory Shop\n const [inventory, setInventory] = useState([\n { id: \"helm\", name: \"Crown of Deep Concentration\", cost: 350, bonus: \"+4 Wisdom & Focus\", bought: true },\n { id: \"boots\", name: \"Hermes Agile Swiftboots\", cost: 280, bonus: \"+3 Task Velocity\", bought: false },\n { id: \"elixir\", name: \"Cold Brew Espresso Elixir\", cost: 120, bonus: \"+20 Energy Stamina\", bought: false },\n ]);\n\n const toggleQuest = (questId: number) => {\n setQuests((prev) =>\n prev.map((q) => {\n if (q.id === questId) {\n const nextCompleted = !q.completed;\n if (nextCompleted) {\n setXp((curr) => {\n const newXp = curr + q.rewardXp;\n if (newXp >= 3000) {\n setLevel((lvl) => lvl + 1);\n return newXp - 3000;\n }\n return newXp;\n });\n setGold((g) => g + q.rewardGold);\n setBossHp((hp) => Math.max(hp - q.rewardXp 2, 0));\n setRpgToast(\\`Quest Complete! +\\${q.rewardXp} XP, +\\${q.rewardGold} Gold! Boss hit for -\\${q.rewardXp * 2} HP.\\`);\n setTimeout(() => setRpgToast(null), 3500);\n }\n return { ...q, completed: nextCompleted };\n }\n return q;\n })\n );\n };\n\n const buyItem = (itemId: string, cost: number) => {\n if (gold < cost) {\n setRpgToast(\"Not enough Gold! Complete more daily quests first.\");\n setTimeout(() => setRpgToast(null), 3000);\n return;\n }\n setGold((g) => g - cost);\n setInventory((prev) =>\n prev.map((it) => (it.id === itemId ? { ...it, bought: true } : it))\n );\n setRpgToast(\"Item equipped! Attributes permanently boosted.\");\n setTimeout(() => setRpgToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Trophy className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"QuestCraft RPG\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/10 text-amber-500 border border-amber-500/20\">\n Level {level} Paladin\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Gamified Productivity & Habit Progression RPG</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Coins className=\"w-3.5 h-3.5 text-amber-400 fill-amber-400\" />\n <span className=\"font-bold text-amber-400\">{gold} G</span>\n <span className=\"opacity-30\">•</span>\n <Flame className=\"w-3.5 h-3.5 text-orange-500 fill-orange-500\" />\n <span className=\"text-orange-500\">21d Streak</span>\n </div>\n\n <button\n onClick={() => setIsFocusTimerRunning(!isFocusTimerRunning)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Clock className=\"h-3.5 w-3.5\" />\n <span>{isFocusTimerRunning ? \"Pause Focus\" : \"Start Dungeon\"}</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {rpgToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <Sparkles className=\"w-4 h-4 text-amber-400 shrink-0\" />\n <span>{rpgToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Character Hero Card & Vitals /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <div\n className=\"w-16 h-16 rounded-2xl border-2 flex items-center justify-center text-white text-xl font-extrabold shadow-lg shrink-0 relative\"\n style={{\n backgroundColor: \"#6366f1\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span>L{level}</span>\n <span className=\"absolute -bottom-1 -right-1 p-1 rounded-full bg-amber-400 text-black\">\n <Crown className=\"w-3 h-3\" />\n </span>\n </div>\n\n <div>\n <div className=\"flex items-center gap-2 mb-1\">\n <h1 className=\"text-xl font-extrabold tracking-tight\">Sir Tristan of Code</h1>\n <span className=\"text-xs px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-400 font-semibold\">\n Grandmaster Architect\n </span>\n </div>\n <p className=\"text-xs opacity-65\">Experience Bar: {xp} / 3,000 XP to Level {level + 1}</p>\n <div className=\"w-64 h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-2 overflow-hidden\">\n <div className=\"h-full bg-gradient-to-r from-indigo-500 to-purple-500 transition-all\" style={{ width: \\`\\${(xp / 3000) 100}%\\` }} />\n </div>\n </div>\n </div>\n\n {/* RPG Attributes Grid /}\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs\">\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between opacity-70 mb-1\">\n <span>Strength</span>\n <Sword className=\"w-3.5 h-3.5 text-rose-500\" />\n </div>\n <div className=\"text-lg font-bold font-mono\">18 <span className=\"text-[10px] text-emerald-500\">+4</span></div>\n </div>\n\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between opacity-70 mb-1\">\n <span>Wisdom</span>\n <BookOpen className=\"w-3.5 h-3.5 text-cyan-500\" />\n </div>\n <div className=\"text-lg font-bold font-mono\">24 <span className=\"text-[10px] text-emerald-500\">+6</span></div>\n </div>\n\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between opacity-70 mb-1\">\n <span>Focus</span>\n <Target className=\"w-3.5 h-3.5 text-amber-500\" />\n </div>\n <div className=\"text-lg font-bold font-mono\">22 <span className=\"text-[10px] text-emerald-500\">+8</span></div>\n </div>\n\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between opacity-70 mb-1\">\n <span>Vitality</span>\n <Heart className=\"w-3.5 h-3.5 text-emerald-500\" />\n </div>\n <div className=\"text-lg font-bold font-mono\">20 <span className=\"text-[10px] text-emerald-500\">+3</span></div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1 & 2: Daily Quests & Weekly Raid Boss /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Daily Quest Board /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Active Guild Quests</h3>\n <p className=\"text-xs opacity-65\">Complete tasks to earn XP, gold coins, and damage the raid boss</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Reset in 8h 14m</span>\n </div>\n\n <div className=\"space-y-3\">\n {quests.map((q) => (\n <div\n key={q.id}\n onClick={() => toggleQuest(q.id)}\n className={\\`p-3.5 rounded-xl border flex items-center justify-between gap-3 cursor-pointer transition-all \\${\n q.completed ? \"opacity-60 bg-emerald-500/5 border-emerald-500/20\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: !q.completed ? (isDark ? \"rgba(255,255,255,0.02)\" : \"rgba(0,0,0,0.02)\") : undefined,\n borderColor: !q.completed ? \"rgba(255, 255, 255, 0.08)\" : undefined,\n }}\n >\n <div className=\"flex items-center gap-3\">\n <button className=\"text-indigo-500 shrink-0\">\n {q.completed ? (\n <CheckCircle2 className=\"w-5 h-5 text-emerald-500 fill-emerald-500/20\" />\n ) : (\n <Circle className=\"w-5 h-5 opacity-40 hover:opacity-80\" />\n )}\n </button>\n <div>\n <div className={\\`text-xs font-bold \\${q.completed ? \"line-through opacity-75\" : \"\"}\\`}>\n {q.title}\n </div>\n <div className=\"flex items-center gap-2 text-[11px] opacity-65 font-mono mt-0.5\">\n <span className=\"text-amber-400 font-bold\">+{q.rewardXp} XP</span>\n <span>•</span>\n <span className=\"text-amber-400 font-bold\">+{q.rewardGold} Gold</span>\n <span>•</span>\n <span className=\"text-emerald-500\">{q.stat}</span>\n </div>\n </div>\n </div>\n\n <span\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold shrink-0 \\${\n q.type === \"Legendary\"\n ? \"bg-purple-500/10 text-purple-400 border border-purple-500/20\"\n : q.type === \"Hard\"\n ? \"bg-rose-500/10 text-rose-400 border border-rose-500/20\"\n : \"bg-blue-500/10 text-blue-400 border border-blue-500/20\"\n }\\`}\n >\n {q.type}\n </span>\n </div>\n ))}\n </div>\n </div>\n\n {/ Weekly Raid Boss Card /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Shield className=\"w-4 h-4 text-rose-500\" />\n <h3 className=\"text-base font-bold tracking-tight\">Weekly Raid Boss</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-rose-500/10 text-rose-500 border border-rose-500/20\">\n Level 20 Boss\n </span>\n </div>\n\n {/ Boss Visual /}\n <div className=\"p-4 rounded-xl border text-center mb-4\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"w-14 h-14 mx-auto rounded-full bg-rose-500/20 text-rose-500 flex items-center justify-center mb-2\">\n <Sword className=\"w-7 h-7\" />\n </div>\n <h4 className=\"text-sm font-extrabold\">The Procrastination Behemoth</h4>\n <div className=\"text-xs font-mono font-bold text-rose-500 mt-1\">\n {bossHp} / 5,000 HP Left\n </div>\n <div className=\"w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-2 overflow-hidden\">\n <div className=\"h-full bg-rose-500 transition-all duration-300\" style={{ width: \\`\\${(bossHp / 5000) 100}%\\` }} />\n </div>\n </div>\n\n <p className=\"text-xs opacity-65 leading-relaxed text-center\">\n Every completed quest directly inflicts 2x XP as raw damage. Defeat by Sunday midnight for 500 bonus Gold!\n </p>\n </div>\n\n <div className=\"pt-4 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Party Members: 4 Active</span>\n <span className=\"text-emerald-500 font-semibold\">Victory in Sight</span>\n </div>\n </div>\n </div>\n\n {/* Section 3 & 4: Armory Shop & Dungeon Focus Timer /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Armory & Shop /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Package className=\"w-4 h-4 text-amber-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Armory & Magic Loot Merchant</h3>\n </div>\n <span className=\"text-xs font-mono text-amber-400 font-bold\">{gold} Gold Available</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n {inventory.map((item) => (\n <div\n key={item.id}\n className=\"p-4 rounded-xl border flex flex-col justify-between\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div>\n <h4 className=\"text-xs font-bold mb-1\">{item.name}</h4>\n <p className=\"text-[11px] text-emerald-500 font-semibold mb-3\">{item.bonus}</p>\n </div>\n\n {item.bought ? (\n <span className=\"w-full py-1.5 rounded-lg border text-center text-[10px] font-bold text-emerald-500 bg-emerald-500/10 border-emerald-500/20\">\n Equipped\n </span>\n ) : (\n <button\n onClick={() => buyItem(item.id, item.cost)}\n className=\"w-full py-1.5 rounded-lg text-[10px] font-bold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Buy for {item.cost} G\n </button>\n )}\n </div>\n ))}\n </div>\n </div>\n\n {/ Dungeon Focus Timer /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-base font-bold tracking-tight\">Dungeon Dive Timer</h3>\n <Clock className=\"w-4 h-4 text-indigo-400\" />\n </div>\n\n <div className=\"py-4 text-center\">\n <div className=\"text-4xl font-extrabold font-mono mb-1\">\n 25:00\n </div>\n <p className=\"text-xs opacity-65\">Floor 4: Catacombs of Flow State</p>\n </div>\n </div>\n\n <button\n onClick={() => {\n setRpgToast(\"Entered Dungeon of Deep Focus! 25-minute Pomodoro running.\");\n setTimeout(() => setRpgToast(null), 3500);\n }}\n className=\"w-full py-2.5 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Enter Flow Dungeon (+60 XP)\n </button>\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateGlobalLogistics = {\n name: \"template-global-logistics\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-global-logistics.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Ship,\n Truck,\n Anchor,\n Compass,\n Thermometer,\n ShieldCheck,\n Search,\n CheckCircle2,\n Clock,\n FileText,\n AlertTriangle,\n X,\n Plus,\n Navigation,\n ExternalLink,\n Layers,\n Container,\n} from \"lucide-react\";\n\nexport interface GlobalLogisticsTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function GlobalLogisticsTemplate({\n brandName = \"Vanguard Logistics\",\n theme = \"dark\",\n}: GlobalLogisticsTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeStage, setActiveStage] = useState(2); // In transit (Malacca)\n const [searchBol, setSearchBol] = useState(\"BOL-849204-HKG\");\n const [selectedVessel, setSelectedVessel] = useState(0);\n const [isDispatchModalOpen, setIsDispatchModalOpen] = useState(false);\n const [dispatchToast, setDispatchToast] = useState<string \| null>(null);\n\n const stages = [\n { id: 0, label: \"Origin Berth\", location: \"Shenzhen Yantian\", date: \"Sep 01, 08:30 UTC\", status: \"Completed\", note: \"Loaded 420 TEU onto Bay 12.\" },\n { id: 1, label: \"Ocean Transit\", location: \"Strait of Malacca\", date: \"Sep 05, 14:10 UTC\", status: \"Completed\", note: \"Cruising 16.4 knots. Calm seas.\" },\n { id: 2, label: \"Chokepoint Crossing\", location: \"Bab-el-Mandeb Strait\", date: \"Sep 10, 04:00 UTC\", status: \"Active Stage\", note: \"Navigating escorted transit corridor.\" },\n { id: 3, label: \"Destination Port\", location: \"Rotterdam Gateway\", date: \"Sep 18, 11:00 UTC (ETA)\", status: \"Scheduled\", note: \"Automated crane berth reserved.\" },\n { id: 4, label: \"Intermodal Rail\", location: \"Duisburg Terminal\", date: \"Sep 20, 16:30 UTC (ETA)\", status: \"Scheduled\", note: \"Direct electric freight rail link.\" },\n ];\n\n const reeferContainers = [\n { id: \"MSKU-94812-4\", temp: \"-20.4°C\", setPoint: \"-20.0°C\", humidity: \"88%\", seal: \"Cryptographic Intact\", cargo: \"Vaccines & Pharmaceuticals\", status: \"Optimal\" },\n { id: \"CMAU-20914-8\", temp: \"+2.8°C\", setPoint: \"+3.0°C\", humidity: \"92%\", seal: \"Cryptographic Intact\", cargo: \"Organic Hass Avocados\", status: \"Optimal\" },\n { id: \"HLCU-51820-1\", temp: \"-18.2°C\", setPoint: \"-18.0°C\", humidity: \"85%\", seal: \"Cryptographic Intact\", cargo: \"Deep-Sea Frozen Tuna\", status: \"Optimal\" },\n ];\n\n const vessels = [\n { name: \"MV Vanguard Titan\", imo: \"IMO 982341\", speed: \"16.8 kts\", draught: \"14.2m\", teus: \"18,400 TEU\", pos: \"12°42'N 43°18'E\", eta: \"Sep 18\" },\n { name: \"MV Pacific Horizon\", imo: \"IMO 940192\", speed: \"15.2 kts\", draught: \"12.8m\", teus: \"14,200 TEU\", pos: \"04°12'N 100°22'E\", eta: \"Sep 24\" },\n { name: \"MV Atlantic Vanguard\", imo: \"IMO 978120\", speed: \"17.4 kts\", draught: \"15.0m\", teus: \"21,000 TEU\", pos: \"36°14'N 05°21'W\", eta: \"Sep 14\" },\n ];\n\n const handleDispatchSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsDispatchModalOpen(false);\n setDispatchToast(\"Intermodal priority manifest updated! Customs pre-clearance transmitted.\");\n setTimeout(() => setDispatchToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Ship className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Vanguard Logistics\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n Global Fleet Telemetry\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Intermodal Container Freight & Cold-Chain Tracking</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Ship className=\"w-3.5 h-3.5 text-indigo-400\" />\n <span>Active Fleet: 14 Vessels</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">99.4% On Schedule</span>\n </div>\n\n <button\n onClick={() => setIsDispatchModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Truck className=\"h-3.5 w-3.5\" />\n <span>Intermodal Dispatch</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {dispatchToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{dispatchToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Active BOL Consignment Tracker Bar /}\n <div\n className=\"p-5 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-indigo-500/10 text-indigo-400 flex items-center justify-center shrink-0 border border-indigo-500/20\">\n <Navigation className=\"w-5 h-5\" />\n </div>\n <div>\n <span className=\"text-xs font-mono opacity-60\">MASTER BILL OF LADING</span>\n <h2 className=\"text-base font-extrabold font-mono tracking-tight\">{searchBol}</h2>\n </div>\n </div>\n\n <div className=\"flex flex-wrap items-center gap-3 text-xs\">\n <div className=\"px-3 py-1.5 rounded-xl border font-mono\" >\n <span className=\"opacity-50\">Origin: </span>\n <span className=\"font-bold\">SZX (China)</span>\n </div>\n <div className=\"px-3 py-1.5 rounded-xl border font-mono\" >\n <span className=\"opacity-50\">Destination: </span>\n <span className=\"font-bold\">RTM (Netherlands)</span>\n </div>\n <div className=\"px-3 py-1.5 rounded-xl border font-mono text-emerald-500 font-bold\" >\n ETA: Sep 18, 2026\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1: Interactive Multi-Stage Stepper /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Intermodal Shipment Route Stages</h3>\n <p className=\"text-xs opacity-65\">Click any stage milestone to inspect checkpoint audit & customs release timestamps</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Stage 3 of 5 In Transit</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-5 gap-3 pt-2\">\n {stages.map((stg) => {\n const isSelected = activeStage === stg.id;\n const isDone = stg.id < activeStage;\n const isCurrent = stg.id === activeStage;\n\n return (\n <div\n key={stg.id}\n onClick={() => setActiveStage(stg.id)}\n className={\\`p-3.5 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-md\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isSelected ? (isDark ? \"rgba(99,102,241,0.08)\" : \"rgba(99,102,241,0.05)\") : (isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\"),\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2\">\n <span\n className={\\`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold \\${\n isDone\n ? \"bg-emerald-500 text-white\"\n : isCurrent\n ? \"bg-indigo-600 text-white\"\n : \"bg-zinc-200 dark:bg-zinc-800 opacity-60\"\n }\\`}\n >\n {isDone ? \"✓\" : stg.id + 1}\n </span>\n <span\n className={\\`text-[10px] font-bold px-1.5 py-0.2 rounded \\${\n isDone\n ? \"text-emerald-500 bg-emerald-500/10\"\n : isCurrent\n ? \"text-indigo-400 bg-indigo-500/10\"\n : \"opacity-50\"\n }\\`}\n >\n {stg.status}\n </span>\n </div>\n\n <h4 className=\"text-xs font-bold truncate\">{stg.label}</h4>\n <p className=\"text-[11px] opacity-70 truncate\">{stg.location}</p>\n <p className=\"text-[10px] font-mono opacity-50 mt-1\">{stg.date}</p>\n </div>\n );\n })}\n </div>\n\n {/ Stage Note Banner /}\n <div className=\"p-3.5 rounded-xl border mt-4 text-xs flex items-center gap-3\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.8)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <Anchor className=\"w-4 h-4 text-indigo-400 shrink-0\" />\n <div>\n <span className=\"font-bold mr-2\">{stages[activeStage].location}:</span>\n <span className=\"opacity-80\">{stages[activeStage].note}</span>\n </div>\n </div>\n </div>\n\n {/ Section 2 & 3: Reefer IoT Cold Chain & Vessel Fleet /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Reefer Cold-Chain Telemetry /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Thermometer className=\"w-4 h-4 text-cyan-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Refrigerated Reefer IoT Telemetry</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-cyan-500/10 text-cyan-400 border border-cyan-500/20\">\n Continuous Telemetry\n </span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n {reeferContainers.map((c) => (\n <div\n key={c.id}\n className=\"p-4 rounded-xl border flex flex-col justify-between\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div>\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-xs font-mono font-bold\">{c.id}</span>\n <span className=\"text-[10px] font-bold text-emerald-500\">{c.status}</span>\n </div>\n\n <div className=\"p-3 rounded-lg border text-center mb-3\" >\n <div className=\"text-2xl font-extrabold font-mono text-cyan-400\">{c.temp}</div>\n <div className=\"text-[10px] opacity-60 mt-0.5\">Target: {c.setPoint}</div>\n </div>\n\n <p className=\"text-[11px] font-semibold opacity-90 mb-1\">{c.cargo}</p>\n <div className=\"text-[10px] opacity-65 space-y-0.5\">\n <div>Relative Humidity: {c.humidity}</div>\n <div>Door Seal: {c.seal}</div>\n </div>\n </div>\n\n <div className=\"pt-3 mt-3 border-t text-[10px] text-emerald-500 font-semibold flex items-center gap-1\" >\n <ShieldCheck className=\"w-3.5 h-3.5\" />\n <span>Cold Chain Verified</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Active Vessels Fleet /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Ship className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Carrier Vessels</h3>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Live AIS Feed</span>\n </div>\n\n <div className=\"space-y-3\">\n {vessels.map((v, idx) => {\n const isSelected = selectedVessel === idx;\n return (\n <div\n key={idx}\n onClick={() => setSelectedVessel(idx)}\n className={\\`p-3 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"border-indigo-500 bg-indigo-500/10\" : \"hover:border-indigo-500/30\"\n }\\`}\n style={{ borderColor: isSelected ? undefined : \"rgba(255, 255, 255, 0.08)\" }}\n >\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-xs font-bold\">{v.name}</span>\n <span className=\"text-[10px] font-mono text-emerald-500 font-semibold\">{v.speed}</span>\n </div>\n <div className=\"flex items-center justify-between text-[11px] opacity-70 font-mono\">\n <span>{v.teus}</span>\n <span>ETA {v.eta}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n <div className=\"pt-4 mt-4 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Draught: {vessels[selectedVessel].draught}</span>\n <span>Pos: {vessels[selectedVessel].pos}</span>\n </div>\n </div>\n </div>\n\n {/ Section 4: Customs Documentation Matrix /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Border Customs & Single Window Compliance</h3>\n <p className=\"text-xs opacity-65\">Cryptographically signed manifest documents cleared with EU Customs Authority</p>\n </div>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">Port Health Clearance: Approved</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-xs font-mono\">\n <div className=\"p-3.5 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"font-bold\">Bill of Lading</span>\n <span className=\"text-emerald-500\">CLEARED</span>\n </div>\n <p className=\"text-[10px] opacity-60 font-sans\">Endorsed to Dutch consignee</p>\n </div>\n\n <div className=\"p-3.5 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"font-bold\">Commercial Invoice</span>\n <span className=\"text-emerald-500\">CLEARED</span>\n </div>\n <p className=\"text-[10px] opacity-60 font-sans\">VAT & Import duty prepaid</p>\n </div>\n\n <div className=\"p-3.5 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"font-bold\">Phytosanitary Cert</span>\n <span className=\"text-emerald-500\">CLEARED</span>\n </div>\n <p className=\"text-[10px] opacity-60 font-sans\">No quarantine pests detected</p>\n </div>\n\n <div className=\"p-3.5 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"font-bold\">T1 Transit Bond</span>\n <span className=\"text-amber-500\">ISSUED</span>\n </div>\n <p className=\"text-[10px] opacity-60 font-sans\">In-bond rail transit authorized</p>\n </div>\n </div>\n </div>\n </main>\n\n {/ Intermodal Dispatch Modal /}\n <AnimatePresence>\n {isDispatchModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsDispatchModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Truck className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Intermodal Dispatch Reroute</h3>\n </div>\n\n <form onSubmit={handleDispatchSubmit} className=\"space-y-4 text-xs font-sans\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Final Mile Transport Mode</label>\n <select\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"rail\">Electrified Freight Rail (Duisburg Hub) - Low Carbon</option>\n <option value=\"truck\">Dedicated Express Reefer Truck - Priority 24h</option>\n <option value=\"barge\">Rhine River Inland Container Barge - Bulk Eco</option>\n </select>\n </div>\n\n <div className=\"p-3 rounded-xl border space-y-1 font-mono text-[11px]\" >\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">Estimated Transit:</span>\n <span className=\"font-bold\">14 Hours</span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">CO2 Emissions:</span>\n <span className=\"text-emerald-500 font-bold\">-72% vs Standard Road Freight</span>\n </div>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Authorize Priority Dispatch Order\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateGamingEsports = {\n name: \"template-gaming-esports\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-gaming-esports.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Gamepad2, \n Trophy,\n Swords,\n Flame,\n Tv,\n Users,\n Target,\n Crown,\n CheckCircle2,\n Calendar,\n X,\n ChevronRight,\n Shield,\n Zap,\n BarChart3,\n Sparkles,\n } from \"lucide-react\";\n\nexport interface GamingEsportsTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function GamingEsportsTemplate({\n brandName = \"Valkyrie Esports\",\n theme = \"dark\",\n}: GamingEsportsTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedMatch, setSelectedMatch] = useState(\"grand-final\");\n const [votedTeam, setVotedTeam] = useState<string \| null>(\"Sentinels\");\n const [sentinelsVotes, setSentinelsVotes] = useState(64);\n const [isVoteModalOpen, setIsVoteModalOpen] = useState(false);\n const [voteToast, setVoteToast] = useState<string \| null>(null);\n\n const bracketMatches = [\n { id: \"ub-semi-1\", round: \"Upper Semifinal\", team1: \"Sentinels\", score1: 2, team2: \"Fnatic\", score2: 0, winner: \"Sentinels\" },\n { id: \"ub-semi-2\", round: \"Upper Semifinal\", team1: \"Cloud9\", score1: 2, team2: \"Paper Rex\", score2: 1, winner: \"Cloud9\" },\n { id: \"ub-final\", round: \"Upper Final\", team1: \"Sentinels\", score1: 2, team2: \"Cloud9\", score2: 1, winner: \"Sentinels\" },\n { id: \"grand-final\", round: \"Grand Championship Final\", team1: \"Sentinels\", score1: 2, team2: \"Cloud9\", score2: 2, winner: \"LIVE MATCH\" },\n ];\n\n const mapDraft = [\n { map: \"Mirage\", action: \"Banned by Sentinels\", tag: \"Ban\", status: \"banned\" },\n { map: \"Anubis\", action: \"Banned by Cloud9\", tag: \"Ban\", status: \"banned\" },\n { map: \"Ancient\", action: \"Picked by Sentinels (13-9 Win)\", tag: \"Map 1\", status: \"team1\" },\n { map: \"Dust II\", action: \"Picked by Cloud9 (13-11 Win)\", tag: \"Map 2\", status: \"team2\" },\n { map: \"Inferno\", action: \"Decider Map 5 • Currently In Progress\", tag: \"Live\", status: \"live\" },\n ];\n\n const playerComparison = [\n { metric: \"Rating 2.0\", p1: \"1.42\", p2: \"1.38\", p1Adv: true },\n { metric: \"Damage / Round (ADR)\", p1: \"94.2\", p2: \"89.5\", p1Adv: true },\n { metric: \"Headshot Accuracy\", p1: \"58.4%\", p2: \"64.2%\", p1Adv: false },\n { metric: \"Opening Duel Wins\", p1: \"18 Kills\", p2: \"14 Kills\", p1Adv: true },\n { metric: \"Clutch 1vX Success\", p1: \"74%\", p2: \"62%\", p1Adv: true },\n ];\n\n const handleVoteSubmit = (team: string) => {\n setVotedTeam(team);\n if (team === \"Sentinels\") setSentinelsVotes((v) => v + 1);\n setIsVoteModalOpen(false);\n setVoteToast(\\`Vote registered for \\${team}! Community live prediction updated.\\`);\n setTimeout(() => setVoteToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Gamepad2 className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Valkyrie Esports\"}\n </span>\n <span className=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/10 text-rose-500 border border-rose-500/20\">\n <span className=\"w-1.5 h-1.5 rounded-full bg-rose-500 animate-ping\" />\n BERLIN MAJOR\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Championship Bracket & Real-Time Match HUD</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Tv className=\"w-3.5 h-3.5 text-rose-500\" />\n <span>284,400 Stream Viewers</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-amber-400\">$1,000,000 Prize Pool</span>\n </div>\n\n <button\n onClick={() => setIsVoteModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Crown className=\"h-3.5 w-3.5\" />\n <span>Vote Match MVP</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {voteToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{voteToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Live Match Grand Finals HUD Banner /}\n <div\n className=\"p-6 rounded-2xl border relative overflow-hidden\"\n \n >\n <div className=\"flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\n {/ Team 1 /}\n <div className=\"flex items-center gap-4 flex-1\">\n <div className=\"w-14 h-14 rounded-2xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center font-extrabold text-rose-500 text-xl shrink-0\">\n SEN\n </div>\n <div>\n <span className=\"text-xs font-bold text-rose-500 uppercase tracking-wider\">North America Seed 1</span>\n <h2 className=\"text-xl sm:text-2xl font-extrabold tracking-tight\">Sentinels</h2>\n <div className=\"text-xs opacity-60 font-mono mt-0.5\">Full Buy: $24,800 Vault</div>\n </div>\n </div>\n\n {/ Match Score Display /}\n <div className=\"p-4 rounded-xl border text-center shrink-0 min-w-[220px]\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs font-bold uppercase tracking-widest text-amber-500 mb-1\">\n Grand Final • Map 5 (Inferno)\n </div>\n <div className=\"text-4xl font-extrabold font-mono tracking-tight flex items-center justify-center gap-3\">\n <span className=\"text-rose-500\">11</span>\n <span className=\"opacity-30 text-2xl\">:</span>\n <span className=\"text-cyan-400\">9</span>\n </div>\n <div className=\"text-[11px] opacity-60 font-mono mt-1\">Series Tied 2 - 2 (Best of 5)</div>\n </div>\n\n {/ Team 2 /}\n <div className=\"flex items-center gap-4 flex-1 justify-end text-right\">\n <div>\n <span className=\"text-xs font-bold text-cyan-400 uppercase tracking-wider\">Europe Seed 1</span>\n <h2 className=\"text-xl sm:text-2xl font-extrabold tracking-tight\">Cloud9</h2>\n <div className=\"text-xs opacity-60 font-mono mt-0.5\">Force Buy: $8,400 Vault</div>\n </div>\n <div className=\"w-14 h-14 rounded-2xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center font-extrabold text-cyan-400 text-xl shrink-0\">\n C9\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1: Interactive Tournament Bracket /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Playoff Championship Tree</h3>\n <p className=\"text-xs opacity-65\">Double-elimination stage bracket with match history and seeding</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Stage: Finals Weekend</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {bracketMatches.map((m) => {\n const isSelected = selectedMatch === m.id;\n return (\n <div\n key={m.id}\n onClick={() => setSelectedMatch(m.id)}\n className={\\`p-4 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-md\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-3 text-[11px]\">\n <span className=\"opacity-60\">{m.round}</span>\n <span className=\"px-1.5 py-0.2 rounded font-mono font-bold bg-amber-500/10 text-amber-500 text-[10px]\">\n {m.winner}\n </span>\n </div>\n\n <div className=\"space-y-2 text-xs font-mono\">\n <div className=\"flex items-center justify-between p-2 rounded border\" >\n <span className=\"font-bold\">{m.team1}</span>\n <span className=\"font-bold text-sm text-indigo-400\">{m.score1}</span>\n </div>\n <div className=\"flex items-center justify-between p-2 rounded border\" >\n <span className=\"font-bold\">{m.team2}</span>\n <span className=\"font-bold text-sm text-indigo-400\">{m.score2}</span>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Section 2 & 3: Map Veto Phase & Player Stat Comparison /}\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/ Map Veto & Pick/Ban Timeline /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Target className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Map Draft / Veto Procedure</h3>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Best of 5 Format</span>\n </div>\n\n <div className=\"space-y-3\">\n {mapDraft.map((item, idx) => (\n <div\n key={idx}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center gap-3\">\n <span className=\"w-6 h-6 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center font-mono text-[10px] font-bold\">\n {idx + 1}\n </span>\n <div>\n <div className=\"font-bold\">{item.map}</div>\n <div className=\"text-[11px] opacity-65\">{item.action}</div>\n </div>\n </div>\n\n <span\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold \\${\n item.status === \"live\"\n ? \"bg-rose-500 text-white animate-pulse\"\n : item.status === \"team1\"\n ? \"bg-rose-500/10 text-rose-500\"\n : item.status === \"team2\"\n ? \"bg-cyan-500/10 text-cyan-400\"\n : \"opacity-50\"\n }\\`}\n >\n {item.tag}\n </span>\n </div>\n ))}\n </div>\n </div>\n\n <div className=\"pt-4 mt-4 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Overtime Rule: MR3 $10,000 Max</span>\n <span>Tactical Timeouts: 1 / 4 remaining</span>\n </div>\n </div>\n\n {/ Player Head-to-Head Comparison /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Users className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Star Duel: TenZ vs Ax1Le</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/10 text-amber-500\">\n Duel of MVPs\n </span>\n </div>\n\n <div className=\"space-y-3 pt-2\">\n {playerComparison.map((row, idx) => (\n <div key={idx} className=\"space-y-1\">\n <div className=\"flex justify-between text-xs font-mono\">\n <span className={row.p1Adv ? \"text-rose-500 font-bold\" : \"opacity-70\"}>{row.p1}</span>\n <span className=\"font-sans opacity-60 text-[11px]\">{row.metric}</span>\n <span className={!row.p1Adv ? \"text-cyan-400 font-bold\" : \"opacity-70\"}>{row.p2}</span>\n </div>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full flex overflow-hidden\">\n <div className=\"h-full bg-rose-500\" style={{ width: row.p1Adv ? \"56%\" : \"44%\" }} />\n <div className=\"h-full bg-cyan-500 flex-1\" />\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Community Fan Prediction Bar /}\n <div className=\"pt-4 mt-6 border-t\" >\n <div className=\"flex justify-between text-xs font-bold mb-1\">\n <span className=\"text-rose-500\">Sentinels {sentinelsVotes}%</span>\n <span className=\"text-cyan-400\">Cloud9 {100 - sentinelsVotes}%</span>\n </div>\n <div className=\"w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden flex\">\n <div className=\"h-full bg-rose-500 transition-all duration-300\" style={{ width: \\`\\${sentinelsVotes}%\\` }} />\n <div className=\"h-full bg-cyan-400 flex-1\" />\n </div>\n <div className=\"text-[10px] opacity-60 text-center mt-2\">Based on 14,280 community predictions</div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Vote MVP Modal /}\n <AnimatePresence>\n {isVoteModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsVoteModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Crown className=\"w-5 h-5 text-amber-500\" />\n <h3 className=\"text-base font-bold\">Cast Major MVP Ballot</h3>\n </div>\n\n <div className=\"space-y-3 text-xs\">\n <p className=\"opacity-75\">\n Select your vote for the Finals Most Valuable Player. Fans who accurately predict receive a limited badge.\n </p>\n\n <button\n onClick={() => handleVoteSubmit(\"Sentinels\")}\n className=\"w-full p-3 rounded-xl border flex items-center justify-between hover:border-rose-500/50 transition-all\"\n \n >\n <div className=\"flex items-center gap-3\">\n <span className=\"w-8 h-8 rounded-lg bg-rose-500/10 text-rose-500 font-bold flex items-center justify-center\">SEN</span>\n <div className=\"text-left\">\n <div className=\"font-bold\">TenZ (Tyson Ngo)</div>\n <div className=\"text-[10px] opacity-60\">1.42 Rating • 28 Kills Map 4</div>\n </div>\n </div>\n <span className=\"text-rose-500 font-bold\">→</span>\n </button>\n\n <button\n onClick={() => handleVoteSubmit(\"Cloud9\")}\n className=\"w-full p-3 rounded-xl border flex items-center justify-between hover:border-cyan-500/50 transition-all\"\n \n >\n <div className=\"flex items-center gap-3\">\n <span className=\"w-8 h-8 rounded-lg bg-cyan-500/10 text-cyan-400 font-bold flex items-center justify-center\">C9</span>\n <div className=\"text-left\">\n <div className=\"font-bold\">Ax1Le (Sergey Rykhtorov)</div>\n <div className=\"text-[10px] opacity-60\">1.38 Rating • 64% Headshot</div>\n </div>\n </div>\n <span className=\"text-cyan-400 font-bold\">→</span>\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateArchitectureSpatial = {\n name: \"template-architecture-spatial\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-architecture-spatial.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Box, \n Compass,\n Layers,\n Sun,\n Maximize2,\n Grid,\n CheckCircle2,\n X,\n FileText,\n Eye,\n Sliders,\n Sparkles,\n ArrowRight,\n ShieldCheck,\n Building,\n } from \"lucide-react\";\n\nexport interface ArchitectureSpatialTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function ArchitectureSpatialTemplate({\n brandName = \"Arcform Spatial\",\n theme = \"dark\",\n}: ArchitectureSpatialTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [sunHour, setSunHour] = useState(13); // 13:00 / 1 PM\n const [activeLayers, setActiveLayers] = useState<Record<string, boolean>>({\n walls: true,\n glazing: true,\n electrical: false,\n hvac: false,\n furniture: true,\n });\n const [selectedMaterial, setSelectedMaterial] = useState(\"terrazzo\");\n const [isSpecModalOpen, setIsSpecModalOpen] = useState(false);\n const [specToast, setSpecToast] = useState<string \| null>(null);\n\n // Compute solar metrics from hour\n const solarAzimuth = Math.round(90 + (sunHour - 8) 18);\n const solarLux = Math.round(Math.sin(((sunHour - 6) / 12) * Math.PI) * 65000);\n const thermalGain = (Math.sin(((sunHour - 6) / 12) * Math.PI) * 3.8).toFixed(1);\n\n const materials = [\n {\n id: \"terrazzo\",\n name: \"Venetian Composite Terrazzo\",\n finish: \"Honed Matte R10\",\n origin: \"Carrara, Italy\",\n carbon: \"14.2 kg CO₂e/m²\",\n recycled: \"78% Recycled Aggregate\",\n uValue: \"0.22 W/m²K\",\n desc: \"Low-porosity composite cast with reclaimed Carrara marble chips and natural lime binder.\",\n },\n {\n id: \"yakisugi\",\n name: \"Charred Shou Sugi Ban Cedar\",\n finish: \"Deep Carbonized Gendai\",\n origin: \"Nagano, Japan\",\n carbon: \"-2.4 kg CO₂e/m² (Carbon Negative)\",\n recycled: \"100% FSC Forested\",\n uValue: \"0.14 W/m²K\",\n desc: \"Ancient fire-treated cryptomeria timber offering natural insect and fire resilience without synthetic sealers.\",\n },\n {\n id: \"oak\",\n name: \"Fluted Quarter-Sawn White Oak\",\n finish: \"Organic Raw Wax Oil\",\n origin: \"Bavaria, Germany\",\n carbon: \"8.6 kg CO₂e/m²\",\n recycled: \"PEFC Certified\",\n uValue: \"0.18 W/m²K\",\n desc: \"Acoustically tuned micro-fluted wall baffles providing NRC 0.85 reverberation absorption.\",\n },\n {\n id: \"bronze\",\n name: \"Patinated Architectural Bronze\",\n finish: \"Living Statuary Brown\",\n origin: \"Zurich, Switzerland\",\n carbon: \"22.0 kg CO₂e/m²\",\n recycled: \"94% Reclaimed Scrap\",\n uValue: \"N/A (Facade Louver)\",\n desc: \"Custom extruded exterior solar shading fins that naturally age with climate exposure.\",\n },\n ];\n\n const toggleLayer = (layerKey: string) => {\n setActiveLayers((prev) => ({\n ...prev,\n [layerKey]: !prev[layerKey],\n }));\n };\n\n const handleSpecDownload = (e: React.FormEvent) => {\n e.preventDefault();\n setIsSpecModalOpen(false);\n setSpecToast(\"BIM IFC structural schedule & CSI 3-Part spec downloaded.\");\n setTimeout(() => setSpecToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Box className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Arcform Spatial\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n LEED Platinum\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Architectural Blueprint & Spatial Daylight Studio</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Building className=\"w-3.5 h-3.5 text-indigo-400\" />\n <span>Project: Pavilion Kanso</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">620 m² GIA</span>\n </div>\n\n <button\n onClick={() => setIsSpecModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <FileText className=\"h-3.5 w-3.5\" />\n <span>Export CSI Specs</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {specToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{specToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Project Overview Ribbon /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col lg:flex-row lg:items-center justify-between gap-4\">\n <div>\n <div className=\"flex flex-wrap items-center gap-2 mb-2 text-[11px] font-mono\">\n <span className=\"px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 font-bold\">\n RESIDENTIAL RESIDENCE\n </span>\n <span className=\"opacity-70\">Kyoto Foothills, Japan</span>\n <span className=\"opacity-40\">•</span>\n <span className=\"opacity-70\">Completed 2026</span>\n </div>\n <h1 className=\"text-xl sm:text-3xl font-extrabold tracking-tight mb-2\">\n Pavilion Kanso: Biophilic Courtyard Residence\n </h1>\n <p className=\"text-xs sm:text-sm opacity-70 max-w-2xl\">\n A single-level cantilevered timber and rammed-earth residence integrated with native Japanese black pines, passive solar ventilation, and central reflection pond.\n </p>\n </div>\n\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 text-center shrink-0\">\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Gross Area</div>\n <div className=\"text-lg font-extrabold font-mono\">620 m²</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Ceiling Height</div>\n <div className=\"text-lg font-extrabold font-mono text-emerald-500\">3.80 m</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">Glazed Ratio</div>\n <div className=\"text-lg font-extrabold font-mono\">48% Low-E</div>\n </div>\n <div className=\"p-3 rounded-xl border\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-xs opacity-60\">EUI Rating</div>\n <div className=\"text-lg font-extrabold font-mono text-amber-500\">18 kWh/m²</div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 1: Interactive Blueprint Floorplan Viewer with Layer Toggles /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4\">\n <div>\n <h2 className=\"text-base font-bold tracking-tight\">Interactive Architectural CAD Floorplan</h2>\n <p className=\"text-xs opacity-65\">Toggle technical BIM layers to inspect structural, MEP, and millwork overlays</p>\n </div>\n\n {/ Layer Toggles /}\n <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n {[\n { key: \"walls\", label: \"Structural Walls\" },\n { key: \"glazing\", label: \"Glazing & Low-E\" },\n { key: \"electrical\", label: \"Electrical / Data\" },\n { key: \"hvac\", label: \"Passive HVAC\" },\n { key: \"furniture\", label: \"Millwork\" },\n ].map((layer) => {\n const active = activeLayers[layer.key];\n return (\n <button\n key={layer.key}\n onClick={() => toggleLayer(layer.key)}\n className={\\`px-2.5 py-1 rounded-lg border transition-all \\${\n active ? \"bg-indigo-600 text-white font-semibold\" : \"opacity-60 hover:opacity-100\"\n }\\`}\n style={{ borderColor: active ? undefined : \"rgba(255, 255, 255, 0.08)\" }}\n >\n {layer.label}\n </button>\n );\n })}\n </div>\n </div>\n\n {/ Blueprint SVG Canvas /}\n <div\n className=\"p-6 rounded-xl border relative min-h-[300px] flex items-center justify-center font-mono overflow-x-auto\"\n style={{\n backgroundColor: isDark ? \"#060913\" : \"#f1f5f9\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {/ Grid coordinate overlay /}\n <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none\" />\n\n <div className=\"relative z-10 w-full max-w-2xl min-w-[500px] h-64 border-2 border-dashed rounded-xl p-4 flex flex-col justify-between\" style={{ borderColor: isDark ? \"#38bdf844\" : \"#0284c744\" }}>\n {/ Outer walls /}\n <div className=\"flex justify-between text-[10px] opacity-50\">\n <span>[GRID 1A]</span>\n <span>NORTH ELEVATION: 28.40m</span>\n <span>[GRID 4A]</span>\n </div>\n\n {/ Rooms layout /}\n <div className=\"grid grid-cols-3 gap-3 h-40\">\n {/ Master Pavilion /}\n <div className={\\`p-3 rounded border flex flex-col justify-between transition-opacity \\${activeLayers.walls ? \"border-sky-400 bg-sky-500/5\" : \"border-transparent\"}\\`}>\n <span className=\"text-[11px] font-bold\">01 • Master Pavilion</span>\n <div className=\"text-[10px] opacity-70\">\n {activeLayers.furniture && \"Tatami Mat Plinth\"}\n {activeLayers.hvac && \" • Underfloor Radiant Hydronic\"}\n </div>\n <span className=\"text-[10px] text-sky-400\">74 m² • Honed Oak</span>\n </div>\n\n {/ Central Reflection Courtyard /}\n <div className=\"p-3 rounded border-2 border-indigo-500/30 bg-indigo-500/10 flex flex-col items-center justify-center text-center\">\n <span className=\"text-xs font-bold text-indigo-400\">Inner Atrium Courtyard</span>\n <span className=\"text-[10px] opacity-70 mt-1\">Reflecting Basin & Moss Garden</span>\n {activeLayers.glazing && <span className=\"text-[9px] text-emerald-500 mt-1\">Triple Low-E Cavity</span>}\n </div>\n\n {/ Tea Pavilion & Living /}\n <div className={\\`p-3 rounded border flex flex-col justify-between transition-opacity \\${activeLayers.walls ? \"border-sky-400 bg-sky-500/5\" : \"border-transparent\"}\\`}>\n <span className=\"text-[11px] font-bold\">02 • Sunken Tea Room</span>\n <div className=\"text-[10px] opacity-70\">\n {activeLayers.electrical && \"Dali Smart Dimming Circuits\"}\n </div>\n <span className=\"text-[10px] text-sky-400\">92 m² • Terrazzo Slab</span>\n </div>\n </div>\n\n <div className=\"flex justify-between text-[10px] opacity-50\">\n <span>DATUM LEVEL: ±0.000</span>\n <span>SCALE: 1:100 @ A1</span>\n <span>CROSS SECTION B-B</span>\n </div>\n </div>\n </div>\n </div>\n\n {/ Section 2 & 3: Daylight Sun Angle Slider & Material Spec Sheet /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Daylight Sun Angle Azimuth Simulator /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Sun className=\"w-4 h-4 text-amber-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Solar Daylight Azimuth</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/10 text-amber-500 font-mono\">\n {sunHour}:00 JST\n </span>\n </div>\n\n {/ Sun Angle Display /}\n <div className=\"p-4 rounded-xl border text-center mb-6 font-mono\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"text-3xl font-extrabold text-amber-400\">\n {solarAzimuth}° <span className=\"text-xs font-normal opacity-70 font-sans\">Azimuth Angle</span>\n </div>\n <div className=\"text-xs opacity-60 mt-1\">\n Solar Illuminance: {solarLux.toLocaleString()} Lux\n </div>\n </div>\n\n {/ Slider /}\n <div className=\"space-y-2 mb-6 text-xs font-mono\">\n <div className=\"flex justify-between opacity-70\">\n <span>08:00 Morning</span>\n <span>18:00 Dusk</span>\n </div>\n <input\n type=\"range\"\n min=\"8\"\n max=\"18\"\n value={sunHour}\n onChange={(e) => setSunHour(Number(e.target.value))}\n className=\"w-full accent-amber-500 cursor-pointer\"\n />\n </div>\n\n <div className=\"space-y-2 text-xs\">\n <div className=\"flex items-center justify-between p-2.5 rounded-lg border\" >\n <span className=\"opacity-70\">Direct Solar Thermal Gain</span>\n <span className=\"font-mono text-emerald-500 font-bold\">{thermalGain} kW/h</span>\n </div>\n <div className=\"flex items-center justify-between p-2.5 rounded-lg border\" >\n <span className=\"opacity-70\">Overhang Shadow Depth</span>\n <span className=\"font-mono font-bold\">1.45 m (100% Glare cut)</span>\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t text-[11px] opacity-70\" >\n Passive cooling verified with CFD airflow simulation.\n </div>\n </div>\n\n {/ Sustainable Material Specification Drawer /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Tactile Material Finishes Palette</h3>\n <p className=\"text-xs opacity-65\">Embodied carbon emissions & sustainable circularity ratings</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">Cradle to Cradle Certified</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4\">\n {materials.map((mat) => {\n const isSelected = selectedMaterial === mat.id;\n return (\n <div\n key={mat.id}\n onClick={() => setSelectedMaterial(mat.id)}\n className={\\`p-3.5 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-sm\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-1\">\n <h4 className=\"text-xs font-bold\">{mat.name}</h4>\n <span className=\"text-[10px] font-mono text-emerald-500 font-bold\">{mat.carbon}</span>\n </div>\n <div className=\"text-[11px] opacity-70 mb-2\">{mat.finish} • {mat.origin}</div>\n <p className=\"text-[10px] opacity-60 leading-relaxed line-clamp-2\">{mat.desc}</p>\n </div>\n );\n })}\n </div>\n </div>\n\n <div className=\"p-3.5 rounded-xl border flex items-center justify-between text-xs\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.8)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div className=\"flex items-center gap-2\">\n <ShieldCheck className=\"w-4 h-4 text-emerald-500\" />\n <span>Selected Material: {materials.find((m) => m.id === selectedMaterial)?.name}</span>\n </div>\n <span className=\"font-mono text-[11px] opacity-70\">U-Val: {materials.find((m) => m.id === selectedMaterial)?.uValue}</span>\n </div>\n </div>\n </div>\n </main>\n\n {/ CSI Spec Sheet Export Modal /}\n <AnimatePresence>\n {isSpecModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsSpecModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <FileText className=\"w-5 h-5 text-indigo-500\" />\n <h3 className=\"text-base font-bold\">Export Architectural Specification</h3>\n </div>\n\n <form onSubmit={handleSpecDownload} className=\"space-y-4 text-xs font-sans\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Specification Standard</label>\n <select\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"csi\">CSI MasterFormat 2026 (Divisions 03 - 12)</option>\n <option value=\"ifc\">buildingSMART openIFC 4.3 BIM Model</option>\n <option value=\"leed\">LEED v4.1 Materials & Resources Documentation</option>\n </select>\n </div>\n\n <div className=\"p-3 rounded-xl border space-y-1 font-mono text-[11px]\" >\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">Project File:</span>\n <span className=\"font-bold\">Pavilion_Kanso_Full_Spec.zip</span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">File Size:</span>\n <span className=\"font-bold\">42.8 MB (with CAD vector layers)</span>\n </div>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Download Complete Architectural Package\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateCybersecuritySoc = {\n name: \"template-cybersecurity-soc\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-cybersecurity-soc.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Shield,\n ShieldAlert,\n ShieldCheck,\n Radio,\n Lock,\n Terminal,\n Activity,\n AlertTriangle,\n CheckCircle2,\n X,\n Search,\n Crosshair,\n Server,\n Zap,\n Globe,\n Sliders,\n FileCode,\n} from \"lucide-react\";\n\nexport interface CybersecuritySocTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function CybersecuritySocTemplate({\n brandName = \"Aegis SOC\",\n theme = \"dark\",\n}: CybersecuritySocTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedIncident, setSelectedIncident] = useState(0);\n const [isQuarantineModalOpen, setIsQuarantineModalOpen] = useState(false);\n const [quarantinedHosts, setQuarantinedHosts] = useState<string[]>([]);\n const [socToast, setSocToast] = useState<string \| null>(null);\n\n const incidents = [\n {\n id: \"INC-98214\",\n title: \"Pass-the-Hash Lateral Movement via SMB\",\n mitre: \"T1021.002\",\n severity: \"CRITICAL\",\n sla: \"07:22\",\n host: \"srv-dc-primary-01.internal\",\n ip: \"10.240.12.8\",\n sourceIp: \"185.220.101.5\",\n riskScore: 96,\n payload: \"0x4E 0x54 0x4C 0x4D 0x53 0x53 0x50 ... [NTLMSSP Auth Negotiate NTLM2 Key]\",\n desc: \"Anomalous NTLM authentication token reused across 12 high-privilege domain controllers within 45 seconds.\",\n },\n {\n id: \"INC-98215\",\n title: \"LSASS Process Memory Dumper Heuristic\",\n mitre: \"T1003.001\",\n severity: \"HIGH\",\n sla: \"18:40\",\n host: \"dev-macbook-eng-41.corp\",\n ip: \"10.240.88.19\",\n sourceIp: \"194.26.29.112\",\n riskScore: 84,\n payload: \"com.apple.proc.memory.dump -> /tmp/.hidden_kext_cache\",\n desc: \"Unsigned Mach-O binary invoked ptrace() against local security authority memory space.\",\n },\n {\n id: \"INC-98216\",\n title: \"High-Entropy DNS Tunneling Data Exfiltration\",\n mitre: \"T1071.004\",\n severity: \"MEDIUM\",\n sla: \"42:15\",\n host: \"app-worker-node-14.k8s\",\n ip: \"10.240.64.92\",\n sourceIp: \"45.154.255.89\",\n riskScore: 68,\n payload: \"TXT 8a9f4c029b.ns1.malicious-darknet.xyz -> base64 decode\",\n desc: \"Sustained burst of 450 Base64-encoded DNS TXT queries matching known C2 heartbeat patterns.\",\n },\n ];\n\n const currentInc = incidents[selectedIncident];\n const isCurrentHostQuarantined = quarantinedHosts.includes(currentInc.host);\n\n const handleQuarantineConfirm = () => {\n setQuarantinedHosts((prev) => [...prev, currentInc.host]);\n setIsQuarantineModalOpen(false);\n setSocToast(\\`HOST ISOLATED: \\${currentInc.host} air-gapped from internal mesh. Firewall zero-trust drop applied.\\`);\n setTimeout(() => setSocToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Shield className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Aegis SOC\"}\n </span>\n <span className=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/10 text-rose-500 border border-rose-500/20\">\n <span className=\"w-1.5 h-1.5 rounded-full bg-rose-500 animate-ping\" />\n DEFCON 3: ELEVATED\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Security Operations Center & Automated Threat Defense</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Radio className=\"w-3.5 h-3.5 text-emerald-500\" />\n <span>SIEM Ingest: 82,400 eps</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">99.8% Auto-Mitigated</span>\n </div>\n\n <button\n onClick={() => setIsQuarantineModalOpen(true)}\n disabled={isCurrentHostQuarantined}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95 disabled:opacity-50\"\n style={{\n backgroundColor: isCurrentHostQuarantined ? \"#6b7280\" : \"#e11d48\",\n borderRadius: \"0.75rem\",\n }}\n >\n <Lock className=\"h-3.5 w-3.5\" />\n <span>{isCurrentHostQuarantined ? \"Host Air-Gapped\" : \"Isolate Host\"}</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {socToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <ShieldAlert className=\"w-4 h-4 text-rose-500 shrink-0\" />\n <span>{socToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Top 4 SOC Health KPI Cards /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Critical Incidents in Queue</span>\n <ShieldAlert className=\"w-4 h-4 text-rose-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight text-rose-500\">1</span>\n <span className=\"text-xs opacity-60\">/ 3 Active Alarms</span>\n </div>\n <p className=\"text-[11px] opacity-65\">SLA Countdown: 07:22 to escalation breach.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-rose-500 rounded-full w-[85%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">MITRE Techniques Flagged</span>\n <Crosshair className=\"w-4 h-4 text-amber-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">4</span>\n <span className=\"text-xs text-amber-500 font-medium\">T1021, T1003</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Privilege escalation & Credential Access.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-amber-500 rounded-full w-[60%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Zero-Trust Network Airgaps</span>\n <Lock className=\"w-4 h-4 text-indigo-400\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">\n {quarantinedHosts.length}\n </span>\n <span className=\"text-xs opacity-60\">Isolated Hosts</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Micro-segmentation policy enforced at eBPF kernel.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-indigo-500 rounded-full w-[45%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">CVE Vulnerability Shielding</span>\n <ShieldCheck className=\"w-4 h-4 text-emerald-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight text-emerald-500\">100%</span>\n <span className=\"text-xs opacity-60\">Virtual Patched</span>\n </div>\n <p className=\"text-[11px] opacity-65\">WAF heuristics blocking zero-day exploits.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-emerald-500 rounded-full w-[100%]\" />\n </div>\n </div>\n </div>\n\n {/ Section 1 & 2: SIEM Triage Queue & Deep Payload Inspector /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ SIEM Incident Queue /}\n <div\n className=\"lg:col-span-2 p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Active Incident Triage Stream</h3>\n <p className=\"text-xs opacity-65\">Select an alert to inspect origin traces & MITRE signatures</p>\n </div>\n <span className=\"text-xs font-mono opacity-70\">3 Incidents Pending SLA</span>\n </div>\n\n <div className=\"space-y-3\">\n {incidents.map((inc, idx) => {\n const isSelected = selectedIncident === idx;\n const isQuarantined = quarantinedHosts.includes(inc.host);\n\n return (\n <div\n key={inc.id}\n onClick={() => setSelectedIncident(idx)}\n className={\\`p-4 rounded-xl border cursor-pointer transition-all \\${\n isSelected ? \"ring-2 ring-indigo-500 shadow-md\" : \"hover:border-indigo-500/40\"\n }\\`}\n style={{\n backgroundColor: isSelected ? (isDark ? \"rgba(99,102,241,0.08)\" : \"rgba(99,102,241,0.05)\") : (isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\"),\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between mb-2 text-xs\">\n <div className=\"flex items-center gap-2\">\n <span className=\"font-mono font-bold\">{inc.id}</span>\n <span\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold \\${\n inc.severity === \"CRITICAL\"\n ? \"bg-rose-500/10 text-rose-500 border border-rose-500/20\"\n : inc.severity === \"HIGH\"\n ? \"bg-amber-500/10 text-amber-500 border border-amber-500/20\"\n : \"bg-blue-500/10 text-blue-500 border border-blue-500/20\"\n }\\`}\n >\n {inc.severity}\n </span>\n <span className=\"font-mono px-2 py-0.5 rounded text-[10px] bg-zinc-200 dark:bg-zinc-800\">\n MITRE {inc.mitre}\n </span>\n </div>\n\n <div className=\"flex items-center gap-2 font-mono text-[11px]\">\n <span className=\"opacity-60\">SLA: {inc.sla}</span>\n {isQuarantined && (\n <span className=\"px-2 py-0.5 rounded bg-gray-500/20 text-gray-400 font-bold text-[10px]\">\n AIR-GAPPED\n </span>\n )}\n </div>\n </div>\n\n <h4 className=\"text-xs font-bold mb-1\">{inc.title}</h4>\n <p className=\"text-[11px] opacity-70 mb-2 leading-relaxed\">{inc.desc}</p>\n\n <div className=\"flex flex-wrap items-center gap-4 text-[10px] font-mono opacity-60\">\n <span>Target Host: {inc.host}</span>\n <span>Target IP: {inc.ip}</span>\n <span className=\"text-rose-400\">Threat Origin: {inc.sourceIp}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Deep Payload & Risk Score Inspector /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between font-mono\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4 font-sans\">\n <div className=\"flex items-center gap-2\">\n <Terminal className=\"w-4 h-4 text-indigo-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Packet Payload Inspector</h3>\n </div>\n <span className=\"text-xs font-mono text-rose-500 font-bold\">\n Risk: {currentInc.riskScore}/100\n </span>\n </div>\n\n {/ Target info card /}\n <div className=\"p-3 rounded-xl border text-xs space-y-1 mb-4\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <div><span className=\"opacity-50\">Target Host: </span><span className=\"font-bold\">{currentInc.host}</span></div>\n <div><span className=\"opacity-50\">Ingress Point: </span><span>{currentInc.sourceIp}</span></div>\n <div><span className=\"opacity-50\">Technique: </span><span className=\"text-amber-400\">{currentInc.mitre}</span></div>\n </div>\n\n {/ Raw Payload snippet /}\n <div className=\"space-y-1 text-xs\">\n <span className=\"opacity-60 text-[11px] font-sans\">Raw Byte Sequence:</span>\n <div\n className=\"p-3 rounded-xl border text-[11px] leading-relaxed break-all max-h-36 overflow-y-auto\"\n style={{\n backgroundColor: isDark ? \"#08090f\" : \"#f1f5f9\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: isDark ? \"#38bdf8\" : \"#0369a1\",\n }}\n >\n {currentInc.payload}\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t font-sans\">\n <button\n onClick={() => setIsQuarantineModalOpen(true)}\n disabled={isCurrentHostQuarantined}\n className=\"w-full py-2.5 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95 disabled:opacity-50\"\n style={{ backgroundColor: isCurrentHostQuarantined ? \"#6b7280\" : \"#e11d48\" }}\n >\n {isCurrentHostQuarantined ? \"Host Air-Gapped\" : \\`Isolate \\${currentInc.host}\\`}\n </button>\n </div>\n </div>\n </div>\n </main>\n\n {/ Isolation Confirmation Modal /}\n <AnimatePresence>\n {isQuarantineModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsQuarantineModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <ShieldAlert className=\"w-5 h-5 text-rose-500\" />\n <h3 className=\"text-base font-bold text-rose-500\">Emergency Host Air-Gap Isolation</h3>\n </div>\n\n <div className=\"space-y-4 text-xs font-sans\">\n <p className=\"leading-relaxed opacity-80\">\n Executing an air-gap will instantly sever all TCP/UDP connections to <strong>{currentInc.host}</strong> ({currentInc.ip}) via SDN kernel drop rules. Active sessions will be terminated immediately.\n </p>\n\n <div className=\"p-3 rounded-xl border font-mono space-y-1 text-[11px]\" >\n <div>Target Asset: {currentInc.host}</div>\n <div>Origin Signature: {currentInc.mitre}</div>\n <div>SLA Action: Immediate Airgap Quarantine</div>\n </div>\n\n <button\n onClick={handleQuarantineConfirm}\n className=\"w-full py-3 rounded-xl text-xs font-bold text-white shadow-sm transition-transform active:scale-95 bg-rose-600 hover:bg-rose-700\"\n >\n Confirm Immediate Air-Gap Isolation\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateCleantechAgriculture = {\n name: \"template-cleantech-agriculture\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-cleantech-agriculture.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Sprout,\n Droplets,\n Sun,\n Wind,\n Thermometer,\n Activity,\n Sliders,\n CheckCircle2,\n X,\n Sparkles,\n Zap,\n Calendar,\n Layers,\n Leaf,\n Clock,\n ShieldCheck,\n} from \"lucide-react\";\n\nexport interface CleantechAgricultureTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function CleantechAgricultureTemplate({\n brandName = \"Verdant IoT\",\n theme = \"dark\",\n}: CleantechAgricultureTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [phLevel, setPhLevel] = useState(6.2);\n const [ecLevel, setEcLevel] = useState(1.8);\n const [redSpectrum, setRedSpectrum] = useState(65);\n const [blueSpectrum, setBlueSpectrum] = useState(25);\n const [farRedSpectrum, setFarRedSpectrum] = useState(10);\n const [isDosingModalOpen, setIsDosingModalOpen] = useState(false);\n const [dosingToast, setDosingToast] = useState<string \| null>(null);\n\n const cropBatches = [\n { name: \"Wasabi Microgreens\", bay: \"Bay 01-A\", stage: \"Late Vegetative\", day: 18, totalDays: 24, progress: 75, yieldKg: \"42.5 kg\", health: \"Optimal 98%\" },\n { name: \"Genovese Sweet Basil\", bay: \"Bay 03-C\", stage: \"Harvest Ready\", day: 36, totalDays: 36, progress: 100, yieldKg: \"128.0 kg\", health: \"Prime Harvest\" },\n { name: \"Red Butterhead Lettuce\", bay: \"Bay 02-B\", stage: \"Canopy Expansion\", day: 14, totalDays: 30, progress: 46, yieldKg: \"85.2 kg\", health: \"Optimal 96%\" },\n { name: \"Culinary Shiso Leaves\", bay: \"Bay 04-A\", stage: \"Germination Spike\", day: 6, totalDays: 28, progress: 21, yieldKg: \"34.0 kg\", health: \"Rooting Fast\" },\n ];\n\n const handleDosingSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setIsDosingModalOpen(false);\n setDosingToast(\"Peristaltic nutrient injection initiated! Water pH & EC recalibrated.\");\n setTimeout(() => setDosingToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n \n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Sprout className=\"h-5 w-5\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span\n className=\"font-bold text-sm sm:text-base tracking-tight\"\n \n >\n {brandName \|\| \"Verdant IoT\"}\n </span>\n <span className=\"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n Closed Loop CEA\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">Controlled Environment Agriculture & Hydroponics Telemetry</p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 sm:gap-3\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono\"\n \n >\n <Droplets className=\"w-3.5 h-3.5 text-cyan-400\" />\n <span>98.4% Water Recycled</span>\n <span className=\"opacity-30\">•</span>\n <span className=\"text-emerald-500\">Zero Pesticides</span>\n </div>\n\n <button\n onClick={() => setIsDosingModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-transform active:scale-95\"\n \n >\n <Leaf className=\"h-3.5 w-3.5\" />\n <span>Dose Nutrients</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Toast Notification /}\n <AnimatePresence>\n {dosingToast && (\n <motion.div\n initial={{ opacity: 0, y: -20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n className=\"fixed top-20 right-4 z-50 px-4 py-3 rounded-xl shadow-xl border flex items-center gap-2 text-xs font-semibold backdrop-blur-md\"\n style={{\n backgroundColor: isDark ? \"rgba(15, 23, 42, 0.95)\" : \"rgba(255, 255, 255, 0.95)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500 shrink-0\" />\n <span>{dosingToast}</span>\n </motion.div>\n )}\n </AnimatePresence>\n\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8 space-y-6\">\n {/ Top 4 Environmental Telemetry Cards /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Canopy Air Temperature</span>\n <Thermometer className=\"w-4 h-4 text-amber-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">22.4°C</span>\n <span className=\"text-xs text-emerald-500 font-medium\">Target ±0.5°C</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Chilled HVAC loop maintaining day/night thermal delta.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-amber-500 rounded-full w-[72%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Humidity & VPD Pressure</span>\n <Wind className=\"w-4 h-4 text-cyan-400\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">1.12</span>\n <span className=\"text-xs opacity-60\">kPa VPD (68% RH)</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Ideal transpiration rate with zero tipburn risk.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-cyan-400 rounded-full w-[80%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">CO₂ Photosynthesis Enrichment</span>\n <Activity className=\"w-4 h-4 text-emerald-500\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight text-emerald-500\">950</span>\n <span className=\"text-xs opacity-60\">PPM</span>\n </div>\n <p className=\"text-[11px] opacity-65\">+40% Biomass acceleration vs ambient atmosphere.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-emerald-500 rounded-full w-[88%]\" />\n </div>\n </div>\n\n <div\n className=\"p-5 rounded-2xl border relative overflow-hidden transition-all hover:shadow-md\"\n \n >\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-xs font-semibold opacity-70\">Hydroponic Water Chemistry</span>\n <Droplets className=\"w-4 h-4 text-indigo-400\" />\n </div>\n <div className=\"flex items-baseline gap-2 mb-1\">\n <span className=\"text-3xl font-extrabold font-mono tracking-tight\">pH 6.2</span>\n <span className=\"text-xs opacity-60\">EC 1.84 mS</span>\n </div>\n <p className=\"text-[11px] opacity-65\">Automated nutrient absorption at root rhizosphere.</p>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mt-3 overflow-hidden\">\n <div className=\"h-full bg-indigo-500 rounded-full w-[92%]\" />\n </div>\n </div>\n </div>\n\n {/ Section 1 & 2: Dosing Station Controls & Photosynthetic Light Spectrum /}\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/ Hydroponic Nutrient Dosing Dispenser /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Droplets className=\"w-4 h-4 text-cyan-400\" />\n <h3 className=\"text-base font-bold tracking-tight\">Peristaltic Nutrient Dosing Pumps</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-cyan-500/10 text-cyan-400 border border-cyan-500/20\">\n Sub-System Online\n </span>\n </div>\n\n <div className=\"space-y-4 text-xs font-mono\">\n <div>\n <div className=\"flex justify-between mb-1 font-sans\">\n <span className=\"opacity-80\">Water Acidity Calibration (pH Target)</span>\n <span className=\"font-bold text-cyan-400 font-mono\">{phLevel.toFixed(1)} pH</span>\n </div>\n <input\n type=\"range\"\n min=\"5.5\"\n max=\"7.0\"\n step=\"0.1\"\n value={phLevel}\n onChange={(e) => setPhLevel(parseFloat(e.target.value))}\n className=\"w-full accent-cyan-500 cursor-pointer\"\n />\n <div className=\"flex justify-between text-[10px] opacity-50 font-sans mt-0.5\">\n <span>5.5 Acidic</span>\n <span>6.2 Optimal</span>\n <span>7.0 Neutral</span>\n </div>\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1 font-sans\">\n <span className=\"opacity-80\">Electrical Conductivity (EC Nutrient Density)</span>\n <span className=\"font-bold text-emerald-500 font-mono\">{ecLevel.toFixed(1)} mS/cm</span>\n </div>\n <input\n type=\"range\"\n min=\"1.0\"\n max=\"3.0\"\n step=\"0.1\"\n value={ecLevel}\n onChange={(e) => setEcLevel(parseFloat(e.target.value))}\n className=\"w-full accent-emerald-500 cursor-pointer\"\n />\n <div className=\"flex justify-between text-[10px] opacity-50 font-sans mt-0.5\">\n <span>1.0 Seedlings</span>\n <span>1.8 Full Growth</span>\n <span>3.0 Heavy Bloom</span>\n </div>\n </div>\n\n <div className=\"grid grid-cols-4 gap-2 pt-2 text-center text-[11px]\">\n <div className=\"p-2.5 rounded-xl border\" >\n <div className=\"opacity-50 text-[10px]\">Nitrogen (N)</div>\n <div className=\"font-bold text-emerald-500\">180 ppm</div>\n </div>\n <div className=\"p-2.5 rounded-xl border\" >\n <div className=\"opacity-50 text-[10px]\">Phosphorus</div>\n <div className=\"font-bold text-indigo-400\">45 ppm</div>\n </div>\n <div className=\"p-2.5 rounded-xl border\" >\n <div className=\"opacity-50 text-[10px]\">Potassium</div>\n <div className=\"font-bold text-amber-500\">220 ppm</div>\n </div>\n <div className=\"p-2.5 rounded-xl border\" >\n <div className=\"opacity-50 text-[10px]\">Cal-Mag</div>\n <div className=\"font-bold text-cyan-400\">120 ppm</div>\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Reverse Osmosis Filtration: 99.9% Purity</span>\n <span className=\"text-emerald-500 font-semibold\">Pump Cycle: Standby</span>\n </div>\n </div>\n\n {/ LED Spectrum Programmer /}\n <div\n className=\"p-6 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div>\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2\">\n <Sun className=\"w-4 h-4 text-rose-500\" />\n <h3 className=\"text-base font-bold tracking-tight\">Photosynthetic Photon Flux (PPFD)</h3>\n </div>\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-purple-500/10 text-purple-400 font-mono\">\n 16h / 8h Photoperiod\n </span>\n </div>\n\n <div className=\"space-y-4 text-xs font-mono\">\n <div>\n <div className=\"flex justify-between mb-1 font-sans\">\n <span className=\"opacity-80\">Deep Red 660nm (Biomass & Stemming)</span>\n <span className=\"font-bold text-rose-500 font-mono\">{redSpectrum}%</span>\n </div>\n <input\n type=\"range\"\n min=\"20\"\n max=\"80\"\n value={redSpectrum}\n onChange={(e) => setRedSpectrum(Number(e.target.value))}\n className=\"w-full accent-rose-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1 font-sans\">\n <span className=\"opacity-80\">Royal Blue 450nm (Leaf Chlorophyll Synthesis)</span>\n <span className=\"font-bold text-blue-500 font-mono\">{blueSpectrum}%</span>\n </div>\n <input\n type=\"range\"\n min=\"10\"\n max=\"50\"\n value={blueSpectrum}\n onChange={(e) => setBlueSpectrum(Number(e.target.value))}\n className=\"w-full accent-blue-500 cursor-pointer\"\n />\n </div>\n\n <div>\n <div className=\"flex justify-between mb-1 font-sans\">\n <span className=\"opacity-80\">Far Red 730nm (Cryptochrome Photoreceptor)</span>\n <span className=\"font-bold text-purple-500 font-mono\">{farRedSpectrum}%</span>\n </div>\n <input\n type=\"range\"\n min=\"5\"\n max=\"25\"\n value={farRedSpectrum}\n onChange={(e) => setFarRedSpectrum(Number(e.target.value))}\n className=\"w-full accent-purple-500 cursor-pointer\"\n />\n </div>\n\n <div className=\"p-3 rounded-xl border flex items-center justify-between font-sans text-[11px]\" style={{ backgroundColor: isDark ? \"rgba(0,0,0,0.3)\" : \"rgba(255,255,255,0.7)\", borderColor: \"rgba(255, 255, 255, 0.08)\" }}>\n <span>Daily Light Integral (DLI):</span>\n <span className=\"font-mono font-bold text-emerald-500\">17.8 mol/m²/day</span>\n </div>\n </div>\n </div>\n\n <div className=\"pt-4 mt-6 border-t text-[11px] opacity-70 flex items-center justify-between\" >\n <span>Fixture Efficacy: 2.85 µmol/J</span>\n <span>PAR Delivery: Uniform 250 µmol/m²/s</span>\n </div>\n </div>\n </div>\n\n {/ Section 3: Active Crop Growth Stage & Harvest Pipeline /}\n <div\n className=\"p-6 rounded-2xl border\"\n \n >\n <div className=\"flex items-center justify-between mb-4\">\n <div>\n <h3 className=\"text-base font-bold tracking-tight\">Active Hydroponic Crop Batches</h3>\n <p className=\"text-xs opacity-65\">Real-time biological lifecycle tracking across automated grow bays</p>\n </div>\n <span className=\"text-xs font-mono text-emerald-500 font-semibold\">Facility Status: 100% Operational</span>\n </div>\n\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n {cropBatches.map((crop, idx) => (\n <div\n key={idx}\n className=\"p-4 rounded-xl border flex flex-col justify-between\"\n style={{\n backgroundColor: isDark ? \"rgba(0,0,0,0.2)\" : \"rgba(255,255,255,0.7)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div>\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-[10px] font-mono px-2 py-0.5 rounded bg-zinc-200 dark:bg-zinc-800\">\n {crop.bay}\n </span>\n <span className=\"text-[10px] font-bold text-emerald-500\">{crop.health}</span>\n </div>\n\n <h4 className=\"text-xs font-bold mb-1\">{crop.name}</h4>\n <div className=\"text-[11px] opacity-70 mb-3\">{crop.stage}</div>\n\n {/ Progress bar /}\n <div className=\"space-y-1 text-[10px] font-mono mb-3\">\n <div className=\"flex justify-between opacity-60\">\n <span>Day {crop.day} of {crop.totalDays}</span>\n <span>{crop.progress}%</span>\n </div>\n <div className=\"w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden\">\n <div className=\"h-full bg-emerald-500 rounded-full transition-all\" style={{ width: \\`\\${crop.progress}%\\` }} />\n </div>\n </div>\n </div>\n\n <div className=\"pt-2 border-t flex items-center justify-between text-xs font-mono\" >\n <span className=\"opacity-60 text-[10px]\">Proj. Harvest:</span>\n <span className=\"font-bold text-emerald-500\">{crop.yieldKg}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n </main>\n\n {/ Dosing Dispatch Modal /}\n <AnimatePresence>\n {isDosingModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md p-6 rounded-2xl border shadow-2xl relative\"\n style={{\n backgroundColor: \"#090a0f\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <button\n onClick={() => setIsDosingModalOpen(false)}\n className=\"absolute top-4 right-4 p-1 rounded-lg opacity-60 hover:opacity-100\"\n >\n <X className=\"w-5 h-5\" />\n </button>\n\n <div className=\"flex items-center gap-2 mb-4\">\n <Leaf className=\"w-5 h-5 text-emerald-500\" />\n <h3 className=\"text-base font-bold\">Automated Nutrient Dispenser</h3>\n </div>\n\n <form onSubmit={handleDosingSubmit} className=\"space-y-4 text-xs font-sans\">\n <div>\n <label className=\"block font-semibold mb-1 opacity-80\">Botanical Target Recipe</label>\n <select\n className=\"w-full p-2.5 rounded-xl border outline-none font-medium\"\n \n >\n <option value=\"microgreens\">Microgreens Fast-Rooting Formula (EC 1.4, pH 6.1)</option>\n <option value=\"leafy\">Leafy Greens Maximum Crispness (EC 1.8, pH 6.2)</option>\n <option value=\"herbs\">Essential Terpene Synthesis (EC 2.2, pH 6.0)</option>\n </select>\n </div>\n\n <div className=\"p-3 rounded-xl border space-y-1 font-mono text-[11px]\" >\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">Automated Pump Dispense:</span>\n <span className=\"font-bold\">45ml Stock A + 45ml Stock B</span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"opacity-70\">Recirculation Time:</span>\n <span className=\"font-bold text-emerald-500\">3.5 Minutes Total</span>\n </div>\n </div>\n\n <button\n type=\"submit\"\n className=\"w-full py-3 rounded-xl text-xs font-semibold text-white shadow-sm transition-transform active:scale-95\"\n \n >\n Inject Nutrient Formula to Grow Bays\n </button>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateJurisVault = {\n name: \"template-juris-vault\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-juris-vault.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Scale,\n ShieldAlert,\n ShieldCheck,\n FileText,\n AlertTriangle,\n CheckCircle2,\n X,\n Search,\n Sliders,\n ChevronRight,\n GitPullRequest,\n History,\n PenTool,\n Check,\n ExternalLink,\n Sparkles,\n Info,\n} from \"lucide-react\";\n\nexport interface JurisVaultTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function JurisVaultTemplate({\n brandName = \"JurisVault AI\",\n theme = \"dark\",\n}: JurisVaultTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // State\n const [selectedClauseIndex, setSelectedClauseIndex] = useState(0);\n const [clauseFilter, setClauseFilter] = useState<\"ALL\" \| \"HIGH_RISK\" \| \"RESOLVED\">(\"ALL\");\n const [isSignModalOpen, setIsSignModalOpen] = useState(false);\n const [signedParties, setSignedParties] = useState<string[]>([\"Legal Counsel (Acme Corp)\"]);\n const [actionToast, setActionToast] = useState<string \| null>(null);\n\n const clauses = [\n {\n id: \"SEC-8.2\",\n title: \"Limitation of Liability & Consequential Damages\",\n risk: \"CRITICAL\",\n riskScore: 94,\n status: \"COUNTER_PROPOSED\",\n original:\n \"In no event shall either party's aggregate cumulative liability arising out of or related to this Agreement exceed twelve (12) months of service fees paid prior to the incident giving rise to claim.\",\n proposed:\n \"Counterparty proposes: Liability cap raised to five million dollars ($5,000,000 USD) and eliminates standard exclusion for consequential, lost revenue, and punitive damages.\",\n riskExplanation:\n \"Uncapped liability exposure for third-party indirect damages drastically deviates from corporate playbook standard.\",\n recommendation: \"Reject uncapped consequential damages. Counter with 2x annual contract value cap with standard IP carve-out.\",\n },\n {\n id: \"SEC-14.1\",\n title: \"Intellectual Property Indemnification & Defense\",\n risk: \"HIGH\",\n riskScore: 78,\n status: \"UNDER_REVIEW\",\n original:\n \"Provider shall defend, indemnify and hold harmless Customer against any third-party claims asserting that the Platform infringes any valid United States patent or copyright.\",\n proposed:\n \"Counterparty requests: Worldwide patent, trademark, and trade secret indemnification with sole settlement authority and immediate defense counsel appointment.\",\n riskExplanation:\n \"Worldwide coverage introduces foreign patent troll exposure. Immediate counsel appointment limits internal defense strategy.\",\n recommendation: \"Limit defense indemnity to US/EU jurisdictions with mutual consultation prior to any public settlement.\",\n },\n {\n id: \"SEC-4.3\",\n title: \"Net Payment Terms & Late Interest Accrual\",\n risk: \"LOW\",\n riskScore: 22,\n status: \"RESOLVED\",\n original:\n \"Invoices are payable Net 30 days from date of receipt via automated ACH or electronic wire transfer.\",\n proposed:\n \"Customer requests Net 45 days. Accepted as standard enterprise commercial trade concession.\",\n riskExplanation: \"Minimal financial impact; aligned with standard treasury cash-flow tolerance.\",\n recommendation: \"Clause resolved and approved by commercial director on Sep 8.\",\n },\n ];\n\n const filteredClauses = clauses.filter((c) => {\n if (clauseFilter === \"HIGH_RISK\") return c.risk === \"CRITICAL\" \|\| c.risk === \"HIGH\";\n if (clauseFilter === \"RESOLVED\") return c.status === \"RESOLVED\";\n return true;\n });\n\n const currentClause = clauses[selectedClauseIndex] \|\| clauses[0];\n\n const handleSignContract = (signer: string) => {\n if (!signedParties.includes(signer)) {\n setSignedParties([...signedParties, signer]);\n setActionToast(\\`Cryptographic e-signature verified for \\${signer}\\`);\n setTimeout(() => setActionToast(null), 3500);\n }\n };\n\n const handleAcceptFallback = () => {\n setActionToast(\"Fallback Clause injected into Master Document (v2.5 draft created)\");\n setTimeout(() => setActionToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Navigation /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(10, 12, 18, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Scale className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">JurisVault AI</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(99, 102, 241, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n LegalTech\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Master Services Agreement • Enterprise Redline Review\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <div\n className=\"hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg border text-xs\"\n \n >\n <FileText className=\"w-3.5 h-3.5 opacity-60\" />\n <span className=\"font-medium\">MSA-2026-AcmeCorp-v2.4.docx</span>\n <span className=\"w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse\" />\n </div>\n\n <button\n onClick={() => setIsSignModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <PenTool className=\"w-3.5 h-3.5\" />\n <span>Signatures ({signedParties.length}/2)</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {actionToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(16, 185, 129, 0.12)\" : \"#ecfdf5\",\n borderColor: \"rgba(16, 185, 129, 0.3)\",\n color: \"#10b981\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500\" />\n <span>{actionToast}</span>\n </div>\n <button onClick={() => setActionToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Executive Summary Bar /}\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\n <div\n className=\"p-4 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-[11px] font-semibold opacity-60\">Overall Risk Score</span>\n <ShieldAlert className=\"w-4 h-4 text-rose-500\" />\n </div>\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-2xl font-black text-rose-500\">68/100</span>\n <span className=\"text-[11px] font-medium text-rose-500\">High Exposure</span>\n </div>\n <p className=\"text-[10px] opacity-50 mt-1\">2 critical non-standard clauses</p>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-[11px] font-semibold opacity-60\">Redlines Detected</span>\n <GitPullRequest className=\"w-4 h-4 text-amber-500\" />\n </div>\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-2xl font-black\">14</span>\n <span className=\"text-[11px] opacity-70\">modifications</span>\n </div>\n <p className=\"text-[10px] opacity-50 mt-1\">11 approved • 3 outstanding</p>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-[11px] font-semibold opacity-60\">Playbook Adherence</span>\n <ShieldCheck className=\"w-4 h-4 text-indigo-500\" />\n </div>\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-2xl font-black text-indigo-500\">82%</span>\n <span className=\"text-[11px] text-emerald-500 font-medium\">+5% vs draft 1</span>\n </div>\n <p className=\"text-[10px] opacity-50 mt-1\">Corporate Standard 2026.Q3</p>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border flex flex-col justify-between\"\n \n >\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-[11px] font-semibold opacity-60\">Execution SLA</span>\n <History className=\"w-4 h-4 text-emerald-500\" />\n </div>\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-2xl font-black\">48 hrs</span>\n <span className=\"text-[11px] text-emerald-500 font-medium\">On Track</span>\n </div>\n <p className=\"text-[10px] opacity-50 mt-1\">Target close: Sep 12, 2026</p>\n </div>\n </div>\n\n {/ Workspace: Left clause selector / Right interactive redline comparison /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6 items-start\">\n {/ Left Column: Clause Navigation List /}\n <div className=\"lg:col-span-4 space-y-3\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-xs font-bold uppercase tracking-wider opacity-60\">\n Key Redline Clauses\n </h2>\n <div className=\"flex items-center gap-1 bg-black/5 dark:bg-white/5 p-0.5 rounded-lg text-[10px]\">\n <button\n onClick={() => setClauseFilter(\"ALL\")}\n className={\\`px-2 py-1 rounded-md font-semibold transition-all \\${\n clauseFilter === \"ALL\" ? \"bg-white dark:bg-zinc-800 shadow-sm\" : \"opacity-60\"\n }\\`}\n >\n All\n </button>\n <button\n onClick={() => setClauseFilter(\"HIGH_RISK\")}\n className={\\`px-2 py-1 rounded-md font-semibold transition-all \\${\n clauseFilter === \"HIGH_RISK\" ? \"bg-white dark:bg-zinc-800 shadow-sm\" : \"opacity-60\"\n }\\`}\n >\n Risk\n </button>\n <button\n onClick={() => setClauseFilter(\"RESOLVED\")}\n className={\\`px-2 py-1 rounded-md font-semibold transition-all \\${\n clauseFilter === \"RESOLVED\" ? \"bg-white dark:bg-zinc-800 shadow-sm\" : \"opacity-60\"\n }\\`}\n >\n Done\n </button>\n </div>\n </div>\n\n <div className=\"space-y-2\">\n {filteredClauses.map((clause, idx) => {\n const isSelected = clause.id === currentClause.id;\n return (\n <button\n key={clause.id}\n onClick={() => {\n const realIndex = clauses.findIndex((c) => c.id === clause.id);\n setSelectedClauseIndex(realIndex);\n }}\n className=\"w-full text-left p-3.5 rounded-xl border transition-all relative overflow-hidden\"\n style={{\n backgroundColor: isSelected ? \"#12141c\" : \"transparent\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {isSelected && (\n <div\n className=\"absolute left-0 top-0 bottom-0 w-1\"\n \n />\n )}\n <div className=\"flex items-center justify-between mb-1.5\">\n <span className=\"text-[11px] font-mono font-bold opacity-60\">{clause.id}</span>\n <span\n className={\\`text-[9px] font-bold px-2 py-0.5 rounded-full uppercase \\${\n clause.risk === \"CRITICAL\"\n ? \"bg-rose-500/15 text-rose-500 border border-rose-500/20\"\n : clause.risk === \"HIGH\"\n ? \"bg-amber-500/15 text-amber-500 border border-amber-500/20\"\n : \"bg-emerald-500/15 text-emerald-500 border border-emerald-500/20\"\n }\\`}\n >\n {clause.risk}\n </span>\n </div>\n <p className=\"text-xs font-semibold line-clamp-1\">{clause.title}</p>\n <p className=\"text-[11px] opacity-60 mt-1 line-clamp-1\">{clause.proposed}</p>\n </button>\n );\n })}\n </div>\n\n {/ AI Assistant Callout /}\n <div\n className=\"p-4 rounded-2xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(99, 102, 241, 0.05)\" : \"#f5f3ff\",\n borderColor: \"rgba(99, 102, 241, 0.2)\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <Sparkles className=\"w-4 h-4 text-indigo-500\" />\n <span className=\"text-xs font-bold text-indigo-500\">JurisVault Copilot</span>\n </div>\n <p className=\"text-[11px] opacity-75 leading-relaxed\">\n Counterparty legal team historically conceded consequential damage caps when offered a\n mutual 1.5x fee limitation. Recommended to send approved Playbook Form 4B.\n </p>\n </div>\n </div>\n\n {/ Right Column: Deep Clause Diff & Review /}\n <div className=\"lg:col-span-8 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b\" >\n <div>\n <div className=\"flex items-center gap-2 mb-1\">\n <span className=\"text-xs font-mono font-bold opacity-60\">{currentClause.id}</span>\n <span\n className={\\`text-[10px] font-bold px-2 py-0.5 rounded-full \\${\n currentClause.risk === \"CRITICAL\"\n ? \"bg-rose-500/15 text-rose-500\"\n : currentClause.risk === \"HIGH\"\n ? \"bg-amber-500/15 text-amber-500\"\n : \"bg-emerald-500/15 text-emerald-500\"\n }\\`}\n >\n {currentClause.risk} RISK • Score: {currentClause.riskScore}/100\n </span>\n </div>\n <h3 className=\"text-base font-bold tracking-tight\">{currentClause.title}</h3>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={handleAcceptFallback}\n className=\"px-3 py-1.5 rounded-xl text-xs font-semibold text-white transition-opacity hover:opacity-90\"\n \n >\n Insert Fallback Clause\n </button>\n </div>\n </div>\n\n {/ Side-by-Side Diff Panels /}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n {/ Standard Playbook Clause /}\n <div\n className=\"p-4 rounded-xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"text-[11px] font-bold uppercase tracking-wider opacity-60\">\n Standard Company Form\n </span>\n <span className=\"text-[10px] font-semibold text-emerald-500\">Approved</span>\n </div>\n <p className=\"text-xs leading-relaxed opacity-85\">{currentClause.original}</p>\n </div>\n\n {/ Counterparty Proposed Redline /}\n <div\n className=\"p-4 rounded-xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(244, 63, 94, 0.05)\" : \"#fff1f2\",\n borderColor: \"rgba(244, 63, 94, 0.2)\",\n }}\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"text-[11px] font-bold uppercase tracking-wider text-rose-500\">\n Counterparty Proposed Redline\n </span>\n <span className=\"text-[10px] font-semibold text-rose-500\">Deviated</span>\n </div>\n <p className=\"text-xs leading-relaxed text-rose-950 dark:text-rose-200\">\n {currentClause.proposed}\n </p>\n </div>\n </div>\n\n {/ AI Risk Analysis & Legal Playbook Recommendation /}\n <div\n className=\"p-4 rounded-xl border space-y-3\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.03)\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center gap-2 text-xs font-bold\">\n <AlertTriangle className=\"w-4 h-4 text-amber-500\" />\n <span>Legal Risk Impact Analysis</span>\n </div>\n <p className=\"text-xs opacity-80 leading-relaxed\">{currentClause.riskExplanation}</p>\n\n <div className=\"pt-2 border-t flex items-start gap-2\" >\n <ShieldCheck className=\"w-4 h-4 text-emerald-500 shrink-0 mt-0.5\" />\n <div>\n <span className=\"text-xs font-bold\">Playbook Recommendation:</span>\n <p className=\"text-xs opacity-75 mt-0.5\">{currentClause.recommendation}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ E-Signature Modal /}\n <AnimatePresence>\n {isSignModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-lg rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#0d1117\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <PenTool className=\"w-4 h-4 text-indigo-500\" />\n <h3 className=\"text-sm font-bold\">Contract E-Signature & Attestation</h3>\n </div>\n <button onClick={() => setIsSignModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <p className=\"text-xs opacity-70\">\n Execute electronic signatures using FIPS-compliant cryptographic verification. All signers must\n complete identity verification before closing.\n </p>\n\n <div className=\"space-y-3\">\n {[\n { name: \"Legal Counsel (Acme Corp)\", role: \"Counterparty Counsel\", email: \"counsel@acmecorp.com\" },\n { name: \"VP Engineering (Nexore Technologies)\", role: \"Internal Signer\", email: \"vp@nexore.dev\" },\n ].map((signer) => {\n const isSigned = signedParties.includes(signer.name);\n return (\n <div\n key={signer.name}\n className=\"p-3 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-bold\">{signer.name}</span>\n {isSigned && (\n <span className=\"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/15 text-emerald-500\">\n Signed\n </span>\n )}\n </div>\n <p className=\"text-[11px] opacity-60\">{signer.role} • {signer.email}</p>\n </div>\n\n {!isSigned ? (\n <button\n onClick={() => handleSignContract(signer.name)}\n className=\"px-3 py-1.5 rounded-lg text-xs font-semibold text-white\"\n \n >\n Sign Now\n </button>\n ) : (\n <Check className=\"w-4 h-4 text-emerald-500\" />\n )}\n </div>\n );\n })}\n </div>\n\n <div className=\"flex justify-end pt-2\">\n <button\n onClick={() => setIsSignModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Close Window\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateOrbitalxMission = {\n name: \"template-orbitalx-mission\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-orbitalx-mission.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Satellite,\n Radio,\n Compass,\n Zap,\n Activity,\n AlertTriangle,\n CheckCircle2,\n X,\n Sliders,\n Shield,\n Clock,\n Terminal,\n ChevronRight,\n Globe,\n Sun,\n Flame,\n BatteryCharging,\n Send,\n Lock,\n} from \"lucide-react\";\n\nexport interface OrbitalXTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function OrbitalXTemplate({\n brandName = \"OrbitalX Operations\",\n theme = \"dark\",\n}: OrbitalXTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedSat, setSelectedSat] = useState(0);\n const [isCommandModalOpen, setIsCommandModalOpen] = useState(false);\n const [isCommandArmLocked, setIsCommandArmLocked] = useState(true);\n const [missionToast, setMissionToast] = useState<string \| null>(null);\n\n const satellites = [\n {\n norad: \"ORB-58210\",\n name: \"AstraConstellation-07\",\n orbit: \"LEO 545 km • 97.4° Inclination\",\n status: \"NOMINAL\",\n velocity: \"7.58 km/s\",\n apogee: \"552 km\",\n perigee: \"538 km\",\n propellant: \"78.4% Hydrazine\",\n solarGen: \"1,420 W\",\n batteryState: \"94% (Charging)\",\n thermal: \"+18.2 °C (Radiator B)\",\n gyroRate: \"0.002 °/s (Zero-G Hold)\",\n nextPass: \"Svalbard Ground Station (04m 12s)\",\n downlinkRate: \"450 Mbps (Ka-Band)\",\n },\n {\n norad: \"ORB-58211\",\n name: \"AstraConstellation-08\",\n orbit: \"LEO 550 km • 97.4° Inclination\",\n status: \"ATTITUDE_TRIM\",\n velocity: \"7.57 km/s\",\n apogee: \"560 km\",\n perigee: \"542 km\",\n propellant: \"64.1% Hydrazine\",\n solarGen: \"1,390 W\",\n batteryState: \"88% (Discharging)\",\n thermal: \"+22.4 °C (Radiator A)\",\n gyroRate: \"0.014 °/s (Trimming)\",\n nextPass: \"Troll Research Station (12m 45s)\",\n downlinkRate: \"320 Mbps (X-Band)\",\n },\n {\n norad: \"ORB-58212\",\n name: \"AstraConstellation-09\",\n orbit: \"LEO 540 km • 97.4° Inclination\",\n status: \"NOMINAL\",\n velocity: \"7.59 km/s\",\n apogee: \"548 km\",\n perigee: \"532 km\",\n propellant: \"92.0% Hydrazine\",\n solarGen: \"1,450 W\",\n batteryState: \"98% (Float)\",\n thermal: \"+15.9 °C (Radiator B)\",\n gyroRate: \"0.001 °/s (Locked)\",\n nextPass: \"Punta Arenas Station (29m 10s)\",\n downlinkRate: \"500 Mbps (Ka-Band)\",\n },\n ];\n\n const currentSat = satellites[selectedSat];\n\n const handleExecuteCommand = (cmdName: string) => {\n setIsCommandModalOpen(false);\n setIsCommandArmLocked(true);\n setMissionToast(\\`Telecommand Uplink Staged: [\\${cmdName}] broadcast to \\${currentSat.name}\\`);\n setTimeout(() => setMissionToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(9, 12, 19, 0.9)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Satellite className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">OrbitalX Operations</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(59, 130, 246, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Aerospace\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n LEO Flight Dynamics & Ground Station Telemetry Hub\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <div\n className=\"hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-lg border text-xs font-mono\"\n \n >\n <Radio className=\"w-3.5 h-3.5 text-emerald-500 animate-pulse\" />\n <span>Svalbard AOS in 04:12</span>\n </div>\n\n <button\n onClick={() => setIsCommandModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <Send className=\"w-3.5 h-3.5\" />\n <span>Uplink Command</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Content /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {missionToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-mono\"\n style={{\n backgroundColor: isDark ? \"rgba(59, 130, 246, 0.12)\" : \"#eff6ff\",\n borderColor: \"rgba(59, 130, 246, 0.3)\",\n color: \"#3b82f6\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-blue-500\" />\n <span>{missionToast}</span>\n </div>\n <button onClick={() => setMissionToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Constellation Sat Selector Strip /}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-3\">\n {satellites.map((sat, i) => {\n const isSelected = selectedSat === i;\n return (\n <button\n key={sat.norad}\n onClick={() => setSelectedSat(i)}\n className=\"p-4 rounded-2xl border text-left transition-all relative overflow-hidden\"\n style={{\n backgroundColor: isSelected ? \"#12141c\" : \"transparent\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {isSelected && (\n <div\n className=\"absolute top-0 left-0 right-0 h-1\"\n \n />\n )}\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-[11px] font-mono font-bold opacity-60\">{sat.norad}</span>\n <span\n className={\\`text-[9px] font-bold px-2 py-0.5 rounded-full \\${\n sat.status === \"NOMINAL\"\n ? \"bg-emerald-500/15 text-emerald-500 border border-emerald-500/20\"\n : \"bg-amber-500/15 text-amber-500 border border-amber-500/20\"\n }\\`}\n >\n {sat.status}\n </span>\n </div>\n <h3 className=\"text-sm font-bold tracking-tight\">{sat.name}</h3>\n <p className=\"text-[11px] opacity-60 mt-1\">{sat.orbit}</p>\n </button>\n );\n })}\n </div>\n\n {/ Tactical Telemetry Cockpit /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Orbital Physics & Flight State (7 Cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">FLIGHT DYNAMICS</span>\n <h3 className=\"text-base font-bold tracking-tight\">{currentSat.name}</h3>\n </div>\n <div className=\"flex items-center gap-2\">\n <span className=\"w-2 h-2 rounded-full bg-emerald-500 animate-ping\" />\n <span className=\"text-xs font-mono font-bold text-emerald-500\">REALTIME TELEMETRY</span>\n </div>\n </div>\n\n {/ Orbital Arc Simulation Display /}\n <div\n className=\"p-4 rounded-xl border relative overflow-hidden flex flex-col justify-between h-48\"\n style={{\n backgroundColor: isDark ? \"#060a12\" : \"#0f172a\",\n borderColor: \"rgba(255, 255, 255, 0.1)\",\n color: \"#ffffff\",\n }}\n >\n <div className=\"flex items-center justify-between z-10\">\n <span className=\"text-[10px] font-mono opacity-70 tracking-wider\">\n {\"GROUND TRACK // SUB-SATELLITE POSITION\"}\n </span>\n <span className=\"text-[10px] font-mono text-emerald-400\">LAT 78.22° N • LON 15.65° E</span>\n </div>\n\n {/ SVG Visual Track /}\n <div className=\"absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none\">\n <svg className=\"w-full h-full\" viewBox=\"0 0 600 200\">\n <path\n d=\"M 20,160 Q 200,20 400,100 T 580,40\"\n fill=\"none\"\n stroke=\"rgba(59, 130, 246, 0.8)\"\n strokeWidth=\"2\"\n strokeDasharray=\"6 4\"\n />\n <circle cx=\"340\" cy=\"80\" r=\"6\" fill=\"#3b82f6\" />\n <circle cx=\"340\" cy=\"80\" r=\"14\" fill=\"none\" stroke=\"#3b82f6\" strokeWidth=\"1.5\" />\n </svg>\n </div>\n\n <div className=\"grid grid-cols-3 gap-2 z-10 pt-4 border-t border-white/10 font-mono text-xs\">\n <div>\n <div className=\"text-[10px] opacity-60\">ORBITAL VELOCITY</div>\n <div className=\"font-bold text-sm text-cyan-400\">{currentSat.velocity}</div>\n </div>\n <div>\n <div className=\"text-[10px] opacity-60\">APOGEE / PERIGEE</div>\n <div className=\"font-bold text-sm text-emerald-400\">\n {currentSat.apogee} / {currentSat.perigee}\n </div>\n </div>\n <div>\n <div className=\"text-[10px] opacity-60\">DOWNLINK CARRIER</div>\n <div className=\"font-bold text-sm text-indigo-300\">{currentSat.downlinkRate}</div>\n </div>\n </div>\n </div>\n\n {/ Subsystem Health Matrix /}\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n <div\n className=\"p-3 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-1.5 text-[10px] opacity-60 font-semibold\">\n <Sun className=\"w-3.5 h-3.5 text-amber-500\" />\n <span>SOLAR POWER</span>\n </div>\n <div className=\"text-sm font-mono font-bold\">{currentSat.solarGen}</div>\n <div className=\"text-[10px] text-emerald-500\">Both Wings Deployed</div>\n </div>\n\n <div\n className=\"p-3 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-1.5 text-[10px] opacity-60 font-semibold\">\n <BatteryCharging className=\"w-3.5 h-3.5 text-emerald-500\" />\n <span>STORAGE</span>\n </div>\n <div className=\"text-sm font-mono font-bold\">{currentSat.batteryState}</div>\n <div className=\"text-[10px] opacity-60\">Li-Ion 48V Bus</div>\n </div>\n\n <div\n className=\"p-3 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-1.5 text-[10px] opacity-60 font-semibold\">\n <Flame className=\"w-3.5 h-3.5 text-rose-500\" />\n <span>PROPULSION</span>\n </div>\n <div className=\"text-sm font-mono font-bold\">{currentSat.propellant}</div>\n <div className=\"text-[10px] opacity-60\">Delta-V: 184 m/s</div>\n </div>\n\n <div\n className=\"p-3 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-1.5 text-[10px] opacity-60 font-semibold\">\n <Compass className=\"w-3.5 h-3.5 text-indigo-500\" />\n <span>ATTITUDE GYRO</span>\n </div>\n <div className=\"text-sm font-mono font-bold\">{currentSat.gyroRate}</div>\n <div className=\"text-[10px] text-emerald-500\">3-Axis Stabilized</div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Ground Station Pass & Telemetry Log (5 Cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Ground Station Acquisition\n </span>\n <span className=\"text-xs font-mono text-emerald-500\">TRACKING PASS #4012</span>\n </div>\n\n <div className=\"p-4 rounded-xl border space-y-2\" >\n <div className=\"text-xs font-bold\">{currentSat.nextPass}</div>\n <div className=\"flex items-center justify-between text-[11px] opacity-70\">\n <span>Elevation Peak: 74.2°</span>\n <span>Duration: 09m 40s</span>\n </div>\n {/ Progress bar /}\n <div className=\"w-full h-1.5 rounded-full bg-black/10 dark:bg-white/10 overflow-hidden\">\n <div className=\"h-full rounded-full bg-emerald-500 w-3/4\" />\n </div>\n </div>\n\n <div>\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70 block mb-2\">\n Telemetry Event Log\n </span>\n <div className=\"space-y-2 font-mono text-[11px]\">\n {[\n { t: \"16:04:12Z\", ev: \"Star Tracker #2 autonomously aligned to guide stars\", ok: true },\n { t: \"16:02:40Z\", ev: \"Heater Circuit B engaged: battery temp maintained at 18.2°C\", ok: true },\n { t: \"15:58:19Z\", ev: \"Ka-Band Transponder downlink handshake confirmed\", ok: true },\n { t: \"15:44:00Z\", ev: \"Periodic reaction wheel desaturation scheduled\", ok: false },\n ].map((log, idx) => (\n <div\n key={idx}\n className=\"p-2 rounded-lg border flex items-start justify-between gap-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span className=\"opacity-50 shrink-0\">{log.t}</span>\n <span className=\"flex-1 opacity-80\">{log.ev}</span>\n <span className={log.ok ? \"text-emerald-500\" : \"text-amber-500\"}>●</span>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Uplink Command Modal /}\n <AnimatePresence>\n {isCommandModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#080c14\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <Terminal className=\"w-4 h-4 text-blue-500\" />\n <h3 className=\"text-sm font-bold\">Staged Telecommand Uplink</h3>\n </div>\n <button onClick={() => setIsCommandModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <p className=\"text-xs opacity-70\">\n Target: <span className=\"font-mono font-bold text-blue-500\">{currentSat.name}</span>. Telecommands\n require dual operator arming key verification prior to RF modulation.\n </p>\n\n {/ Arming Lock Slider /}\n <div\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.03)\" : \"#f8fafc\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <Lock className={\\`w-4 h-4 \\${isCommandArmLocked ? \"text-amber-500\" : \"text-emerald-500\"}\\`} />\n <span className=\"font-semibold\">\n {isCommandArmLocked ? \"Safety Interlock Armed (Locked)\" : \"Safety Interlock Bypassed\"}\n </span>\n </div>\n <button\n onClick={() => setIsCommandArmLocked(!isCommandArmLocked)}\n className=\"px-2.5 py-1 rounded text-[11px] font-bold border\"\n \n >\n {isCommandArmLocked ? \"Disarm Interlock\" : \"Engage Lock\"}\n </button>\n </div>\n\n <div className=\"space-y-2\">\n {[\n { name: \"EXEC_PAYLOAD_DIAGNOSTICS\", desc: \"Run spectral sensor baseline self-test\" },\n { name: \"REORIENT_NADIR_POINTING\", desc: \"Slew reaction wheels to earth-center lock\" },\n { name: \"TRIM_DELTA_V_BURN_0.2S\", desc: \"Fire monopropellant thrusters for 200ms\" },\n ].map((cmd) => (\n <button\n key={cmd.name}\n disabled={isCommandArmLocked}\n onClick={() => handleExecuteCommand(cmd.name)}\n className={\\`w-full text-left p-3 rounded-xl border transition-all flex items-center justify-between \\${\n isCommandArmLocked\n ? \"opacity-40 cursor-not-allowed\"\n : \"hover:border-blue-500 hover:bg-blue-500/5 cursor-pointer\"\n }\\`}\n \n >\n <div>\n <div className=\"font-mono text-xs font-bold\">{cmd.name}</div>\n <div className=\"text-[11px] opacity-60\">{cmd.desc}</div>\n </div>\n <ChevronRight className=\"w-4 h-4 opacity-60\" />\n </button>\n ))}\n </div>\n\n <div className=\"flex justify-end pt-2\">\n <button\n onClick={() => setIsCommandModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Cancel\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateCineboardStudio = {\n name: \"template-cineboard-studio\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-cineboard-studio.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Clapperboard,\n Film,\n Camera,\n Layers,\n Sliders,\n CheckCircle2,\n X,\n Sparkles,\n Video,\n Aperture,\n Maximize2,\n Clock,\n Calendar,\n PackageCheck,\n ChevronRight,\n Sun,\n Moon,\n ChevronDown,\n} from \"lucide-react\";\n\nexport interface CineBoardTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function CineBoardTemplate({\n brandName = \"CineBoard Studio\",\n theme = \"dark\",\n}: CineBoardTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedShot, setSelectedShot] = useState(0);\n const [aspectRatio, setAspectRatio] = useState<\"2.39:1\" \| \"16:9\" \| \"4:3\">(\"2.39:1\");\n const [isGearModalOpen, setIsGearModalOpen] = useState(false);\n const [gearManifestToast, setGearManifestToast] = useState<string \| null>(null);\n\n const shots = [\n {\n scene: \"SCENE 14A\",\n shotNumber: \"SHOT 01\",\n type: \"EXT. DESERT HIGHWAY - DUSK\",\n framing: \"Extreme Wide Shot (EWS)\",\n movement: \"Slow Drone Push-In (3.2m/s)\",\n lens: \"Cooke Anamorphic /i Full Frame Plus 40mm T2.3\",\n lighting: \"Golden Hour Natural Ambient + 12kW HMI Bounce\",\n sound: \"Low wind rustle, distant vehicle rumble\",\n scriptNote: \"The lone vintage interceptor vehicle idles on asphalt heat mirage as sodium street lamps buzz to life.\",\n colorGrade: \"Kodak 5219 500T Stock Emulation\",\n duration: \"00:08\",\n },\n {\n scene: \"SCENE 14A\",\n shotNumber: \"SHOT 02\",\n type: \"INT. CABIN - DUSK\",\n framing: \"Tight Close-Up (TCU)\",\n movement: \"Handheld Micro-Shake (Character Breath)\",\n lens: \"ARRI Master Prime 85mm T1.3\",\n lighting: \"Dashboard LED phosphor glow + warm sodium side rim\",\n sound: \"Heavy analog radio static, ignition click\",\n scriptNote: \"Elena's knuckles tighten on the leather steering wheel. Eyes dart toward rearview mirror.\",\n colorGrade: \"Deep Amber Cyan Split Tone\",\n duration: \"00:05\",\n },\n {\n scene: \"SCENE 14B\",\n shotNumber: \"SHOT 03\",\n type: \"EXT. ABANDONED MOTEL - NIGHT\",\n framing: \"Medium Two-Shot (M2S)\",\n movement: \"Dolly Track Left to Right (Circular)\",\n lens: \"Zeiss Supreme Prime 29mm T1.5\",\n lighting: \"Flickering neon red tube + cold moonlight backlight\",\n sound: \"Neon ballast hum, dripping rain gutter\",\n scriptNote: \"Both operatives exchange encrypted satellite drive under buzzing vacancy sign.\",\n colorGrade: \"High Contrast Neo-Noir Bleach Bypass\",\n duration: \"00:12\",\n },\n ];\n\n const currentShot = shots[selectedShot];\n\n const handleCheckoutPackage = () => {\n setIsGearModalOpen(false);\n setGearManifestToast(\"Production Gear Manifest submitted to Camera Rental House!\");\n setTimeout(() => setGearManifestToast(null), 4000);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(12, 10, 16, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Clapperboard className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">CineBoard Studio</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(244, 63, 94, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Film & Media\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Feature Pre-Production & Visual Storyboard Suite\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n {/ Aspect Ratio Selector /}\n <div\n className=\"flex items-center gap-1 p-1 rounded-lg border text-xs\"\n \n >\n {([\"2.39:1\", \"16:9\", \"4:3\"] as const).map((ratio) => (\n <button\n key={ratio}\n onClick={() => setAspectRatio(ratio)}\n className={\\`px-2 py-1 rounded text-[10px] font-bold font-mono transition-all \\${\n aspectRatio === ratio\n ? \"bg-rose-500 text-white shadow-sm\"\n : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {ratio}\n </button>\n ))}\n </div>\n\n <button\n onClick={() => setIsGearModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <PackageCheck className=\"w-3.5 h-3.5\" />\n <span>Camera Package</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {gearManifestToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(244, 63, 94, 0.12)\" : \"#fff1f2\",\n borderColor: \"rgba(244, 63, 94, 0.3)\",\n color: \"#e11d48\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-rose-500\" />\n <span>{gearManifestToast}</span>\n </div>\n <button onClick={() => setGearManifestToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Storyboard Deck Grid /}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n {shots.map((shot, idx) => {\n const isSelected = selectedShot === idx;\n return (\n <button\n key={shot.shotNumber}\n onClick={() => setSelectedShot(idx)}\n className=\"rounded-2xl border text-left overflow-hidden transition-all relative flex flex-col justify-between\"\n style={{\n backgroundColor: \"#12141c\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {/ Visual Viewport Simulation /}\n <div\n className=\"w-full p-4 flex flex-col justify-between relative overflow-hidden transition-all\"\n style={{\n backgroundColor: isDark ? \"#09060b\" : \"#18181b\",\n color: \"#ffffff\",\n aspectRatio: aspectRatio === \"2.39:1\" ? \"21/9\" : aspectRatio === \"16:9\" ? \"16/9\" : \"4/3\",\n }}\n >\n {/ Framing Reticle /}\n <div className=\"absolute inset-2 border border-white/20 rounded pointer-events-none flex items-center justify-center\">\n <span className=\"w-2 h-2 rounded-full bg-white/40\" />\n </div>\n\n <div className=\"flex items-center justify-between z-10 text-[10px] font-mono\">\n <span className=\"bg-rose-600 px-1.5 py-0.5 rounded font-bold text-white\">\n {shot.shotNumber}\n </span>\n <span className=\"opacity-70\">{shot.duration}</span>\n </div>\n\n <div className=\"z-10 text-left\">\n <div className=\"text-[10px] font-mono text-rose-400 font-semibold\">{shot.scene}</div>\n <div className=\"text-xs font-bold text-white line-clamp-1\">{shot.framing}</div>\n </div>\n </div>\n\n {/ Details Footer /}\n <div className=\"p-3.5 space-y-1.5\">\n <div className=\"flex items-center justify-between text-[11px]\">\n <span className=\"font-semibold opacity-80 line-clamp-1\">{shot.type}</span>\n <span className=\"opacity-60 text-[10px] font-mono\">{aspectRatio}</span>\n </div>\n <p className=\"text-[11px] opacity-60 line-clamp-1\">{shot.scriptNote}</p>\n </div>\n </button>\n );\n })}\n </div>\n\n {/ Selected Shot Technical Dossier /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Main Director & DP Specifications (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <div className=\"flex items-center gap-2 mb-1\">\n <span className=\"text-xs font-mono font-bold text-rose-500\">\n {currentShot.scene} {\"//\"} {currentShot.shotNumber}\n </span>\n <span className=\"text-[10px] px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/5 font-mono\">\n TARGET: {currentShot.duration}\n </span>\n </div>\n <h3 className=\"text-base font-bold tracking-tight\">{currentShot.type}</h3>\n </div>\n\n <span className=\"text-xs font-mono font-bold opacity-60\">{currentShot.framing}</span>\n </div>\n\n {/ Script Breakdown & Director Notes /}\n <div\n className=\"p-4 rounded-xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span className=\"text-[11px] font-bold uppercase tracking-wider opacity-60 block\">\n Action & Director Blocking Notes\n </span>\n <p className=\"text-xs leading-relaxed italic opacity-85\">\"{currentShot.scriptNote}\"</p>\n </div>\n\n {/ Technical Camera & Optics Specs /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs\">\n <div\n className=\"p-3.5 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-2 text-[11px] font-semibold opacity-60\">\n <Aperture className=\"w-3.5 h-3.5 text-rose-500\" />\n <span>LENS & FOCAL LENGTH</span>\n </div>\n <div className=\"font-semibold text-xs\">{currentShot.lens}</div>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-2 text-[11px] font-semibold opacity-60\">\n <Video className=\"w-3.5 h-3.5 text-indigo-500\" />\n <span>CAMERA MOVEMENT</span>\n </div>\n <div className=\"font-semibold text-xs\">{currentShot.movement}</div>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-2 text-[11px] font-semibold opacity-60\">\n <Sun className=\"w-3.5 h-3.5 text-amber-500\" />\n <span>LIGHTING & GAFFER DESIGN</span>\n </div>\n <div className=\"font-semibold text-xs\">{currentShot.lighting}</div>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border space-y-1\"\n \n >\n <div className=\"flex items-center gap-2 text-[11px] font-semibold opacity-60\">\n <Film className=\"w-3.5 h-3.5 text-emerald-500\" />\n <span>COLOR PALETTE & EMULATION</span>\n </div>\n <div className=\"font-semibold text-xs\">{currentShot.colorGrade}</div>\n </div>\n </div>\n </div>\n </div>\n\n {/ Stripboard Production Schedule (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Call Sheet Stripboard\n </span>\n <span className=\"text-xs font-mono text-rose-500 font-bold\">DAY 03 OF 18</span>\n </div>\n\n <div className=\"space-y-2\">\n {[\n { strip: \"14A\", loc: \"EXT. HIGHWAY DUSK\", pages: \"1 2/8\", cast: \"ELENA, MARK\", time: \"18:30 - 20:15\", type: \"EXT_NIGHT\" },\n { strip: \"14B\", loc: \"INT. SEDAN CABIN\", pages: \"6/8\", cast: \"ELENA\", time: \"20:30 - 22:00\", type: \"INT_NIGHT\" },\n { strip: \"15\", loc: \"EXT. NEON MOTEL\", pages: \"2 1/8\", cast: \"ELENA, OPERATIVE\", time: \"22:45 - 02:00\", type: \"EXT_NIGHT\" },\n ].map((strip) => (\n <div\n key={strip.strip}\n className=\"p-3 rounded-xl border text-xs flex items-center justify-between\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n }}\n >\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-mono font-bold bg-rose-500/20 text-rose-600 px-1.5 py-0.5 rounded text-[10px]\">\n SCENE {strip.strip}\n </span>\n <span className=\"font-bold\">{strip.loc}</span>\n </div>\n <div className=\"text-[11px] opacity-60 mt-1\">\n Cast: {strip.cast} • Pages: {strip.pages}\n </div>\n </div>\n <div className=\"text-right text-[10px] font-mono opacity-75\">{strip.time}</div>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Camera Package Rental Modal /}\n <AnimatePresence>\n {isGearModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#0d0912\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <Camera className=\"w-4 h-4 text-rose-500\" />\n <h3 className=\"text-sm font-bold\">Rental Package Manifest</h3>\n </div>\n <button onClick={() => setIsGearModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <p className=\"text-xs opacity-70\">\n Equipment assigned to Principal Photography Unit A. Insured by Lloyd’s Production Binder #941.\n </p>\n\n <div className=\"space-y-2 text-xs\">\n {[\n { item: \"ARRI Alexa 35 Camera Body (LPL Mount)\", status: \"Reserved\", serial: \"SN-9421\" },\n { item: \"Cooke Anamorphic /i Full Frame 5-Lens Set\", status: \"Reserved\", serial: \"SN-3081\" },\n { item: \"Teradek Bolt 4K 1500 TX/RX Wireless Video\", status: \"Checked Out\", serial: \"SN-7712\" },\n { item: \"SmallHD Cine 13” 4K High-Bright Monitor\", status: \"Reserved\", serial: \"SN-5520\" },\n ].map((gear) => (\n <div\n key={gear.item}\n className=\"p-3 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"font-semibold\">{gear.item}</div>\n <div className=\"text-[10px] font-mono opacity-50\">{gear.serial}</div>\n </div>\n <span className=\"text-[10px] font-bold px-2 py-0.5 rounded bg-rose-500/15 text-rose-500\">\n {gear.status}\n </span>\n </div>\n ))}\n </div>\n\n <div className=\"flex justify-end gap-2 pt-2\">\n <button\n onClick={() => setIsGearModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Cancel\n </button>\n <button\n onClick={handleCheckoutPackage}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold text-white\"\n \n >\n Confirm Reservation\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateDomusLiving = {\n name: \"template-domus-living\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-domus-living.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Home,\n Sun,\n Moon,\n Wind,\n Thermometer,\n Zap,\n Shield,\n ShieldCheck,\n CheckCircle2,\n X,\n Sliders,\n Sparkles,\n Lock,\n Unlock,\n Tv,\n Coffee,\n Volume2,\n ChevronRight,\n Battery,\n Lightbulb,\n} from \"lucide-react\";\n\nexport interface DomusLivingTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function DomusLivingTemplate({\n brandName = \"Domus Living\",\n theme = \"dark\",\n}: DomusLivingTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedRoom, setSelectedRoom] = useState(0);\n const [targetTemp, setTargetTemp] = useState(21.5);\n const [activeScene, setActiveScene] = useState<string>(\"Cinema Lounge\");\n const [isPerimeterArmed, setIsPerimeterArmed] = useState(true);\n const [ambientToast, setAmbientToast] = useState<string \| null>(null);\n\n const rooms = [\n {\n name: \"Living Pavilion\",\n temp: \"21.5°C\",\n humidity: \"46%\",\n aqi: \"12 (Clean)\",\n lightsOn: 4,\n totalLights: 6,\n music: \"Miles Davis - Kind of Blue\",\n energyNow: \"1.4 kW\",\n },\n {\n name: \"Master Suite\",\n temp: \"19.0°C\",\n humidity: \"50%\",\n aqi: \"8 (Pure)\",\n lightsOn: 1,\n totalLights: 4,\n music: \"Ambient Rain Frequencies\",\n energyNow: \"0.6 kW\",\n },\n {\n name: \"Kitchen & Dining\",\n temp: \"22.0°C\",\n humidity: \"42%\",\n aqi: \"18 (Good)\",\n lightsOn: 5,\n totalLights: 5,\n music: \"Morning Acoustic Jazz\",\n energyNow: \"2.1 kW\",\n },\n {\n name: \"Wellness & Spa\",\n temp: \"24.0°C\",\n humidity: \"65%\",\n aqi: \"10 (Clean)\",\n lightsOn: 2,\n totalLights: 3,\n music: \"Sound Bath Solfeggio 528Hz\",\n energyNow: \"3.2 kW\",\n },\n ];\n\n const currentRoom = rooms[selectedRoom];\n\n const handleSceneTrigger = (sceneName: string) => {\n setActiveScene(sceneName);\n setAmbientToast(\\`Ambient Scene Activated: [\\${sceneName}] throughout \\${currentRoom.name}\\`);\n setTimeout(() => setAmbientToast(null), 3500);\n };\n\n const handleToggleSecurity = () => {\n const nextState = !isPerimeterArmed;\n setIsPerimeterArmed(nextState);\n setAmbientToast(\n nextState ? \"Home Perimeter Armed • Smart Locks Engaged\" : \"Home Perimeter Disarmed • Guest Access Enabled\"\n );\n setTimeout(() => setAmbientToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Navigation /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(10, 14, 12, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Home className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">Domus Living</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(16, 185, 129, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Smart Home\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Whole-Home Ambient Intelligence & Climate Ecosystem\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={handleToggleSecurity}\n className={\\`px-3.5 py-1.5 rounded-xl text-xs font-semibold shadow-sm flex items-center gap-1.5 transition-all active:scale-95 \\${\n isPerimeterArmed ? \"bg-emerald-600 text-white\" : \"bg-zinc-200 dark:bg-zinc-800 text-foreground\"\n }\\`}\n >\n {isPerimeterArmed ? <ShieldCheck className=\"w-3.5 h-3.5\" /> : <Unlock className=\"w-3.5 h-3.5\" />}\n <span>{isPerimeterArmed ? \"Perimeter Armed\" : \"Disarmed\"}</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {ambientToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(16, 185, 129, 0.12)\" : \"#ecfdf5\",\n borderColor: \"rgba(16, 185, 129, 0.3)\",\n color: \"#10b981\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-emerald-500\" />\n <span>{ambientToast}</span>\n </div>\n <button onClick={() => setAmbientToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Room Navigation Strip /}\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\n {rooms.map((room, idx) => {\n const isSelected = selectedRoom === idx;\n return (\n <button\n key={room.name}\n onClick={() => setSelectedRoom(idx)}\n className=\"p-4 rounded-2xl border text-left transition-all relative overflow-hidden\"\n style={{\n backgroundColor: isSelected ? \"#12141c\" : \"transparent\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {isSelected && (\n <div\n className=\"absolute top-0 left-0 right-0 h-1\"\n \n />\n )}\n <div className=\"text-xs font-bold\">{room.name}</div>\n <div className=\"flex items-baseline gap-2 mt-1\">\n <span className=\"text-lg font-black\">{room.temp}</span>\n <span className=\"text-[10px] opacity-60\">RH {room.humidity}</span>\n </div>\n <div className=\"flex items-center gap-2 text-[10px] opacity-60 mt-1\">\n <span>{room.lightsOn} lights on</span>\n <span>•</span>\n <span>{room.energyNow}</span>\n </div>\n </button>\n );\n })}\n </div>\n\n {/ Tactical Room Command Deck /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Left: Climate & Ambience (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">MICROCLIMATE CONTROL</span>\n <h3 className=\"text-base font-bold tracking-tight\">{currentRoom.name}</h3>\n </div>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">HVAC INVERTER ECO</span>\n </div>\n\n {/ Tactile Temp Dial Card /}\n <div\n className=\"p-6 rounded-2xl border text-center space-y-4 relative overflow-hidden\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"text-xs font-semibold opacity-60 uppercase tracking-wider\">\n Target Ambient Setpoint\n </div>\n\n <div className=\"text-5xl font-black tracking-tight\" >\n {targetTemp.toFixed(1)}°C\n </div>\n\n <div className=\"max-w-xs mx-auto space-y-2\">\n <input\n type=\"range\"\n min=\"18.0\"\n max=\"26.0\"\n step=\"0.5\"\n value={targetTemp}\n onChange={(e) => setTargetTemp(parseFloat(e.target.value))}\n className=\"w-full accent-emerald-500 cursor-pointer\"\n />\n <div className=\"flex justify-between text-[10px] font-mono opacity-50\">\n <span>18.0°C (Cool)</span>\n <span>22.0°C (Comfort)</span>\n <span>26.0°C (Warm)</span>\n </div>\n </div>\n\n <div className=\"grid grid-cols-3 gap-2 pt-2 border-t text-xs font-medium\" >\n <div>\n <div className=\"text-[10px] opacity-50\">AIR QUALITY</div>\n <div className=\"font-bold text-emerald-500\">{currentRoom.aqi}</div>\n </div>\n <div>\n <div className=\"text-[10px] opacity-50\">RELATIVE HUMIDITY</div>\n <div className=\"font-bold\">{currentRoom.humidity}</div>\n </div>\n <div>\n <div className=\"text-[10px] opacity-50\">AIR RECIRCULATION</div>\n <div className=\"font-bold\">HEPA H13 Active</div>\n </div>\n </div>\n </div>\n\n {/ Ambient Preset Scene Buttons /}\n <div className=\"space-y-2\">\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-60 block\">\n Quick Ambient Scenes\n </span>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n {[\n { name: \"Cinema Lounge\", icon: Tv, desc: \"Dim 15% • Warm 2700K\" },\n { name: \"Focus & Code\", icon: Sparkles, desc: \"Cool 4000K • 100%\" },\n { name: \"Morning Sunrise\", icon: Sun, desc: \"Gradual Circadian\" },\n { name: \"Deep Rest\", icon: Moon, desc: \"Sleep Audio • 0% Lux\" },\n ].map((sc) => {\n const isActive = activeScene === sc.name;\n const Icon = sc.icon;\n return (\n <button\n key={sc.name}\n onClick={() => handleSceneTrigger(sc.name)}\n className={\\`p-3 rounded-xl border text-left transition-all \\${\n isActive\n ? \"border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\"\n : \"border-transparent hover:border-black/10 dark:hover:border-white/10\"\n }\\`}\n style={{\n backgroundColor: isActive ? undefined : \"#12141c\",\n borderColor: isActive ? undefined : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <Icon className=\"w-4 h-4 mb-1.5\" />\n <div className=\"text-xs font-bold\">{sc.name}</div>\n <div className=\"text-[10px] opacity-60 mt-0.5\">{sc.desc}</div>\n </button>\n );\n })}\n </div>\n </div>\n </div>\n </div>\n\n {/ Right: Energy Grid & Whole-House Telemetry (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Microgrid & Power Flow\n </span>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">100% SELF-POWERED</span>\n </div>\n\n {/ Energy Grid Flow Tiles /}\n <div className=\"space-y-3\">\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Sun className=\"w-4 h-4 text-amber-500\" />\n <div>\n <div className=\"text-xs font-bold\">Rooftop Solar Array</div>\n <div className=\"text-[10px] opacity-60\">12.4 kW peak output</div>\n </div>\n </div>\n <span className=\"text-sm font-mono font-bold text-amber-500\">+7.8 kW</span>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Battery className=\"w-4 h-4 text-emerald-500\" />\n <div>\n <div className=\"text-xs font-bold\">Lithium Powerwall Pack</div>\n <div className=\"text-[10px] opacity-60\">28.4 kWh • 94% State of Charge</div>\n </div>\n </div>\n <span className=\"text-sm font-mono font-bold text-emerald-500\">Storing 4.1 kW</span>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Zap className=\"w-4 h-4 text-indigo-500\" />\n <div>\n <div className=\"text-xs font-bold\">Municipal Utility Grid</div>\n <div className=\"text-[10px] opacity-60\">Zero import • Net Exporting</div>\n </div>\n </div>\n <span className=\"text-sm font-mono font-bold text-indigo-500\">-3.7 kW (Feed-in)</span>\n </div>\n </div>\n\n {/ Current Ambient Audio Player /}\n <div\n className=\"p-3.5 rounded-xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center justify-between text-xs\">\n <div className=\"flex items-center gap-2\">\n <Volume2 className=\"w-4 h-4 text-emerald-500\" />\n <span className=\"font-bold\">Multi-Zone Architectural Audio</span>\n </div>\n <span className=\"text-[10px] font-mono text-emerald-500\">Lossless 24-bit</span>\n </div>\n <p className=\"text-xs opacity-80 line-clamp-1\">Playing: {currentRoom.music}</p>\n </div>\n </div>\n </div>\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateHyperionEv = {\n name: \"template-hyperion-ev\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-hyperion-ev.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Car,\n BatteryCharging,\n Zap,\n Gauge,\n Sliders,\n CheckCircle2,\n X,\n Sparkles,\n Shield,\n Activity,\n Navigation,\n Thermometer,\n Clock,\n ChevronRight,\n TrendingUp,\n Cpu,\n Power,\n} from \"lucide-react\";\n\nexport interface HyperionEvTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function HyperionEvTemplate({\n brandName = \"Hyperion Fleet EV\",\n theme = \"dark\",\n}: HyperionEvTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedVehicleIndex, setSelectedVehicleIndex] = useState(0);\n const [payloadKg, setPayloadKg] = useState(1200);\n const [ambientTempC, setAmbientTempC] = useState(20);\n const [isChargingModalOpen, setIsChargingModalOpen] = useState(false);\n const [activeChargingBays, setActiveChargingBays] = useState<number[]>([1, 2]);\n const [fleetToast, setFleetToast] = useState<string \| null>(null);\n\n const vehicles = [\n {\n vin: \"HYP-EV-8041\",\n model: \"Hyperion Freight Hauler Max\",\n plate: \"CA-941-EV\",\n soc: 74,\n rangeKm: 420,\n baseMaxRange: 550,\n batteryHealth: \"98.2% SoH\",\n consumption: \"88 kWh/100km\",\n tpmsPsi: [110, 110, 108, 109],\n status: \"DEPOT_IDLE\",\n driver: \"Marcus Vance\",\n currentBay: \"Bay 01 (Plugged)\",\n },\n {\n vin: \"HYP-EV-8042\",\n model: \"Veloce Urban Delivery Van\",\n plate: \"CA-228-EV\",\n soc: 38,\n rangeKm: 165,\n baseMaxRange: 380,\n batteryHealth: \"97.4% SoH\",\n consumption: \"32 kWh/100km\",\n tpmsPsi: [45, 45, 44, 45],\n status: \"FAST_CHARGING\",\n driver: \"Elena Rostova\",\n currentBay: \"Bay 02 (350kW CCS)\",\n },\n {\n vin: \"HYP-EV-8043\",\n model: \"AeroPulse Autonomous Shuttle\",\n plate: \"CA-770-EV\",\n soc: 91,\n rangeKm: 480,\n baseMaxRange: 520,\n batteryHealth: \"99.1% SoH\",\n consumption: \"28 kWh/100km\",\n tpmsPsi: [42, 42, 42, 41],\n status: \"ROUTE_ACTIVE\",\n driver: \"AI Autopilot L4\",\n currentBay: \"En Route Metro Loop\",\n },\n ];\n\n const currentVehicle = vehicles[selectedVehicleIndex];\n\n // Estimated range computation based on payload and ambient temperature\n const estimatedRange = Math.round(\n currentVehicle.baseMaxRange \n (currentVehicle.soc / 100) \n (1 - payloadKg / 10000) \n (ambientTempC < 0 ? 0.8 : ambientTempC > 35 ? 0.88 : 1.0)\n );\n\n const handleToggleChargeBay = (bayNumber: number) => {\n if (activeChargingBays.includes(bayNumber)) {\n setActiveChargingBays(activeChargingBays.filter((b) => b !== bayNumber));\n setFleetToast(\\`Depot Bay 0\\${bayNumber}: Charging session stopped & disengaged.\\`);\n } else {\n setActiveChargingBays([...activeChargingBays, bayNumber]);\n setFleetToast(\\`Depot Bay 0\\${bayNumber}: 350kW DC Fast Charge session started!\\`);\n }\n setTimeout(() => setFleetToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(8, 12, 18, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Car className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">Hyperion Fleet EV</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(14, 165, 233, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Automotive\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Commercial EV Battery Telemetry & 350kW Depot Charging Station\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <div\n className=\"hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-lg border text-xs font-mono\"\n \n >\n <Zap className=\"w-3.5 h-3.5 text-cyan-500\" />\n <span>Depot Grid: 480 kW Peak</span>\n </div>\n\n <button\n onClick={() => setIsChargingModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <BatteryCharging className=\"w-3.5 h-3.5\" />\n <span>Charger Matrix</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {fleetToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(6, 182, 212, 0.12)\" : \"#ecfeff\",\n borderColor: \"rgba(6, 182, 212, 0.3)\",\n color: \"#0891b2\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-cyan-500\" />\n <span>{fleetToast}</span>\n </div>\n <button onClick={() => setFleetToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Vehicle Selection Cards /}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-3\">\n {vehicles.map((veh, idx) => {\n const isSelected = selectedVehicleIndex === idx;\n return (\n <button\n key={veh.vin}\n onClick={() => setSelectedVehicleIndex(idx)}\n className=\"p-4 rounded-2xl border text-left transition-all relative overflow-hidden\"\n style={{\n backgroundColor: isSelected ? \"#12141c\" : \"transparent\",\n borderColor: isSelected ? \"#6366f1\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {isSelected && (\n <div\n className=\"absolute top-0 left-0 right-0 h-1\"\n \n />\n )}\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-[11px] font-mono font-bold opacity-60\">{veh.plate}</span>\n <span\n className={\\`text-[9px] font-bold px-2 py-0.5 rounded-full \\${\n veh.status === \"FAST_CHARGING\"\n ? \"bg-cyan-500/15 text-cyan-500 border border-cyan-500/20\"\n : veh.status === \"ROUTE_ACTIVE\"\n ? \"bg-emerald-500/15 text-emerald-500 border border-emerald-500/20\"\n : \"bg-zinc-500/15 text-zinc-400 border border-zinc-500/20\"\n }\\`}\n >\n {veh.status}\n </span>\n </div>\n <div className=\"text-sm font-bold tracking-tight\">{veh.model}</div>\n <div className=\"flex items-center justify-between mt-2 pt-2 border-t text-xs\" >\n <div className=\"flex items-center gap-1.5 font-bold\">\n <BatteryCharging className=\"w-3.5 h-3.5 text-cyan-500\" />\n <span>{veh.soc}% SoC</span>\n </div>\n <span className=\"opacity-60\">{veh.rangeKm} km est.</span>\n </div>\n </button>\n );\n })}\n </div>\n\n {/ Vehicle Instrument Deck & Range Estimator /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Main Battery State of Charge & Telemetry (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">BATTERY MANAGEMENT SYSTEM (BMS)</span>\n <h3 className=\"text-base font-bold tracking-tight\">{currentVehicle.model}</h3>\n </div>\n <span className=\"text-xs font-mono font-bold text-cyan-500\">{currentVehicle.batteryHealth}</span>\n </div>\n\n {/ Large SoC Gauge Display /}\n <div\n className=\"p-5 rounded-xl border flex flex-col sm:flex-row items-center justify-between gap-4\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"space-y-1 text-center sm:text-left\">\n <div className=\"text-xs font-semibold opacity-60\">CURRENT STATE OF CHARGE</div>\n <div className=\"text-4xl font-black text-cyan-500 font-mono\">{currentVehicle.soc}%</div>\n <div className=\"text-xs opacity-75\">Pack Voltage: 780V Architecture</div>\n </div>\n\n <div className=\"w-full sm:w-64 space-y-2\">\n <div className=\"flex justify-between text-xs font-mono\">\n <span className=\"opacity-60\">Usable Capacity</span>\n <span className=\"font-bold\">210 kWh / 280 kWh</span>\n </div>\n <div className=\"w-full h-3 rounded-full bg-black/10 dark:bg-white/10 overflow-hidden\">\n <div\n className=\"h-full rounded-full bg-cyan-500 transition-all duration-500\"\n style={{ width: \\`\\${currentVehicle.soc}%\\` }}\n />\n </div>\n <div className=\"flex justify-between text-[10px] opacity-50 font-mono\">\n <span>0% (Empty)</span>\n <span>80% (DC Fast Cap)</span>\n <span>100%</span>\n </div>\n </div>\n </div>\n\n {/ TPMS Tire Pressure Matrix /}\n <div>\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-60 block mb-2\">\n Tire Pressure Monitoring (TPMS)\n </span>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-xs\">\n {currentVehicle.tpmsPsi.map((psi, idx) => (\n <div\n key={idx}\n className=\"p-2.5 rounded-xl border\"\n \n >\n <div className=\"text-[10px] opacity-50 uppercase\">\n {idx === 0 ? \"Front L\" : idx === 1 ? \"Front R\" : idx === 2 ? \"Rear L\" : \"Rear R\"}\n </div>\n <div className=\"font-mono font-bold text-sm text-emerald-500 mt-0.5\">{psi} PSI</div>\n <div className=\"text-[9px] opacity-50\">Nominal 45°C</div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Driver & Assignment /}\n <div className=\"p-3.5 rounded-xl border flex items-center justify-between text-xs\" >\n <div>\n <div className=\"font-bold\">Assigned Operator: {currentVehicle.driver}</div>\n <div className=\"text-[11px] opacity-60\">Status: {currentVehicle.currentBay}</div>\n </div>\n <span className=\"font-mono font-bold opacity-75\">{currentVehicle.consumption}</span>\n </div>\n </div>\n </div>\n\n {/ Right: Dynamic Route Range Estimator (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Payload & Weather Range Engine\n </span>\n <Navigation className=\"w-4 h-4 text-cyan-500\" />\n </div>\n\n {/ Calculated Range Pill /}\n <div\n className=\"p-4 rounded-xl border text-center space-y-1\"\n style={{\n backgroundColor: isDark ? \"rgba(6, 182, 212, 0.08)\" : \"#ecfeff\",\n borderColor: \"rgba(6, 182, 212, 0.25)\",\n }}\n >\n <div className=\"text-[11px] font-semibold text-cyan-600 dark:text-cyan-400\">\n DYNAMIC ESTIMATED DRIVING RANGE\n </div>\n <div className=\"text-3xl font-black text-cyan-500 font-mono\">{estimatedRange} km</div>\n <div className=\"text-[10px] opacity-60\">Safe return margin: +45 km reserved</div>\n </div>\n\n {/ Payload Slider /}\n <div className=\"space-y-1.5\">\n <div className=\"flex justify-between text-xs\">\n <span className=\"font-semibold\">Cargo Payload Weight</span>\n <span className=\"font-mono font-bold\">{payloadKg} kg</span>\n </div>\n <input\n type=\"range\"\n min=\"0\"\n max=\"4000\"\n step=\"100\"\n value={payloadKg}\n onChange={(e) => setPayloadKg(parseInt(e.target.value))}\n className=\"w-full accent-cyan-500 cursor-pointer\"\n />\n </div>\n\n {/ Temperature Slider /}\n <div className=\"space-y-1.5\">\n <div className=\"flex justify-between text-xs\">\n <span className=\"font-semibold\">Ambient Temperature</span>\n <span className=\"font-mono font-bold\">{ambientTempC}°C</span>\n </div>\n <input\n type=\"range\"\n min=\"-15\"\n max=\"45\"\n step=\"1\"\n value={ambientTempC}\n onChange={(e) => setAmbientTempC(parseInt(e.target.value))}\n className=\"w-full accent-cyan-500 cursor-pointer\"\n />\n <div className=\"text-[10px] opacity-50\">\n Extreme cold or heat automatically recalculates battery pack thermal regulation draw.\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Charging Bay Matrix Modal /}\n <AnimatePresence>\n {isChargingModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#090d14\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <Zap className=\"w-4 h-4 text-cyan-500\" />\n <h3 className=\"text-sm font-bold\">Depot 350kW DC Fast Charger Bays</h3>\n </div>\n <button onClick={() => setIsChargingModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <div className=\"space-y-2.5\">\n {[1, 2, 3, 4].map((bay) => {\n const isActive = activeChargingBays.includes(bay);\n return (\n <div\n key={bay}\n className=\"p-3 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"text-xs font-bold\">Bay 0{bay} • CCS 350kW Liquid-Cooled</div>\n <div className=\"text-[10px] opacity-60\">\n {isActive ? \"Delivering 280 kW • 680V DC\" : \"Standby • Ready for connection\"}\n </div>\n </div>\n\n <button\n onClick={() => handleToggleChargeBay(bay)}\n className={\\`px-3 py-1.5 rounded-lg text-xs font-semibold \\${\n isActive ? \"bg-rose-500/20 text-rose-500\" : \"bg-cyan-500 text-white\"\n }\\`}\n >\n {isActive ? \"Stop\" : \"Engage\"}\n </button>\n </div>\n );\n })}\n </div>\n\n <div className=\"flex justify-end pt-2\">\n <button\n onClick={() => setIsChargingModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Close\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateSovereignAuctions = {\n name: \"template-sovereign-auctions\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-sovereign-auctions.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Gavel,\n ShieldCheck,\n Clock,\n Sparkles,\n DollarSign,\n ChevronRight,\n Eye,\n CheckCircle2,\n X,\n History,\n FileCheck,\n TrendingUp,\n Award,\n Globe,\n Radio,\n} from \"lucide-react\";\n\nexport interface SovereignAuctionsTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function SovereignAuctionsTemplate({\n brandName = \"Sovereign Auctions\",\n theme = \"dark\",\n}: SovereignAuctionsTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [currentBidUsd, setCurrentBidUsd] = useState(2450000);\n const [currency, setCurrency] = useState<\"USD\" \| \"EUR\" \| \"GBP\">(\"USD\");\n const [isConditionModalOpen, setIsConditionModalOpen] = useState(false);\n const [auctionToast, setAuctionToast] = useState<string \| null>(null);\n\n const rates: Record<\"USD\" \| \"EUR\" \| \"GBP\", { symbol: string; rate: number }> = {\n USD: { symbol: \"$\", rate: 1.0 },\n EUR: { symbol: \"€\", rate: 0.92 },\n GBP: { symbol: \"£\", rate: 0.78 },\n };\n\n const formatPrice = (usdAmount: number) => {\n const converted = usdAmount rates[currency].rate;\n return \\`\\${rates[currency].symbol}\\${converted.toLocaleString(\"en-US\", {\n maximumFractionDigits: 0,\n })}\\`;\n };\n\n const handlePlaceBid = (increment: number) => {\n const nextBid = currentBidUsd + increment;\n setCurrentBidUsd(nextBid);\n setAuctionToast(\\`Paddle #418 placed leading bid: \\${formatPrice(nextBid)}!\\`);\n setTimeout(() => setAuctionToast(null), 4000);\n };\n\n const lot = {\n lotNumber: \"LOT 24\",\n title: \"Composition in Cadmium & Cobalt Resonance\",\n artist: \"Jean-Michel Vane (b. 1954)\",\n medium: \"Oil, cold wax, and crushed lapis on Belgian linen\",\n dimensions: \"195 x 160 cm (76.7 x 63 in)\",\n signed: \"Signed and dated lower recto 'Vane '88'\",\n estimateUsd: \"$2,200,000 - $3,000,000\",\n provenance: [\n \"Galerie Beyeler, Basel (acquired directly from the artist)\",\n \"Private Collection, Zurich (acquired from the above in 1994)\",\n \"Exhibited: Centre Pompidou, Paris, 'Lyrical Geometry', 2011\",\n ],\n conditionSummary:\n \"Original unlined canvas on archival cedar stretcher. Surface impasto crisp under UV inspection. Zero restoration or overpainting detected.\",\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/* Top Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(16, 12, 10, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Gavel className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">Sovereign Auctions</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(217, 119, 6, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Fine Art\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Evening Sale: Post-War & Contemporary Masterworks\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n {/ Currency Selector /}\n <div\n className=\"flex items-center gap-1 p-1 rounded-lg border text-xs\"\n \n >\n {([\"USD\", \"EUR\", \"GBP\"] as const).map((c) => (\n <button\n key={c}\n onClick={() => setCurrency(c)}\n className={\\`px-2 py-0.5 rounded text-[10px] font-bold font-mono transition-all \\${\n currency === c ? \"bg-amber-600 text-white shadow-sm\" : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {c}\n </button>\n ))}\n </div>\n\n <button\n onClick={() => setIsConditionModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <FileCheck className=\"w-3.5 h-3.5\" />\n <span>Condition Report</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {auctionToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(217, 119, 6, 0.12)\" : \"#fffbeb\",\n borderColor: \"rgba(217, 119, 6, 0.3)\",\n color: \"#d97706\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-amber-500\" />\n <span>{auctionToast}</span>\n </div>\n <button onClick={() => setAuctionToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Live Lot Stage /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6 items-start\">\n {/ Left: Artwork Stage Canvas & Provenance (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n {/ Artwork Visual Stage /}\n <div\n className=\"w-full h-80 rounded-xl relative overflow-hidden flex flex-col justify-between p-4 border\"\n style={{\n backgroundColor: isDark ? \"#080605\" : \"#18181b\",\n borderColor: \"rgba(255, 255, 255, 0.1)\",\n color: \"#ffffff\",\n }}\n >\n {/ Simulated Museum Lighting & Texture Canvas /}\n <div className=\"absolute inset-0 bg-gradient-to-tr from-amber-900/30 via-transparent to-blue-900/30 opacity-70 pointer-events-none\" />\n <div className=\"absolute inset-8 border border-white/20 rounded pointer-events-none flex items-center justify-center\">\n <div className=\"text-center p-6 space-y-2\">\n <span className=\"text-xs font-serif italic text-amber-300\">Jean-Michel Vane (b. 1954)</span>\n <h2 className=\"text-xl font-bold tracking-tight text-white max-w-sm\">\n Composition in Cadmium & Cobalt Resonance, 1988\n </h2>\n <span className=\"text-[11px] opacity-75 font-mono\">195 x 160 cm • Belgian Linen</span>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between z-10 text-[10px] font-mono\">\n <span className=\"bg-amber-600 px-2 py-0.5 rounded font-bold text-white\">\n {lot.lotNumber} • CURRENT LOT\n </span>\n <div className=\"flex items-center gap-1.5 bg-black/60 px-2 py-0.5 rounded text-emerald-400\">\n <Radio className=\"w-3 h-3 animate-pulse\" />\n <span>LIVE SALEROOM LONDON</span>\n </div>\n </div>\n\n <div className=\"z-10 flex items-center justify-between text-[11px] opacity-80 pt-2 border-t border-white/10\">\n <span>{lot.dimensions}</span>\n <span className=\"font-mono\">{lot.signed}</span>\n </div>\n </div>\n\n {/ Artwork Details & Provenance /}\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-xs font-bold uppercase tracking-wider opacity-60\">Verified Provenance</h3>\n <div className=\"flex items-center gap-1 text-[11px] text-emerald-500 font-semibold\">\n <ShieldCheck className=\"w-3.5 h-3.5\" />\n <span>Authenticated by Vane Foundation</span>\n </div>\n </div>\n\n <div className=\"space-y-2 text-xs\">\n {lot.provenance.map((item, idx) => (\n <div\n key={idx}\n className=\"p-3 rounded-xl border flex items-start gap-2.5\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n }}\n >\n <span className=\"font-mono text-[10px] opacity-50 shrink-0 mt-0.5\">0{idx + 1}</span>\n <span className=\"opacity-80 leading-relaxed\">{item}</span>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n\n {/ Right: Live Bidding Terminal (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-6\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">CURRENT HIGH BID</span>\n <div className=\"text-3xl font-black text-amber-500 font-mono tracking-tight mt-0.5\">\n {formatPrice(currentBidUsd)}\n </div>\n </div>\n <div className=\"text-right\">\n <span className=\"text-[10px] opacity-50 block font-mono\">ESTIMATE</span>\n <span className=\"text-xs font-semibold\">{lot.estimateUsd}</span>\n </div>\n </div>\n\n {/ Paddle Raise Increments /}\n <div className=\"space-y-2\">\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-60 block\">\n Raise Bid (Paddle #418)\n </span>\n <div className=\"grid grid-cols-2 gap-2\">\n {[50000, 100000, 200000, 500000].map((inc) => (\n <button\n key={inc}\n onClick={() => handlePlaceBid(inc)}\n className=\"p-3 rounded-xl border text-left transition-all hover:border-amber-500 hover:bg-amber-500/10 active:scale-95\"\n \n >\n <div className=\"text-[10px] opacity-60 font-mono\">+ {formatPrice(inc)}</div>\n <div className=\"text-xs font-bold mt-0.5\">{formatPrice(currentBidUsd + inc)}</div>\n </button>\n ))}\n </div>\n </div>\n\n {/ Live Saleroom Bid Log /}\n <div className=\"space-y-2 pt-2 border-t\" >\n <div className=\"flex items-center justify-between text-xs\">\n <span className=\"font-bold uppercase tracking-wider opacity-60\">Saleroom Ledger</span>\n <span className=\"font-mono text-[10px] text-emerald-500 font-semibold\">RESERVE MET</span>\n </div>\n\n <div className=\"space-y-2 text-[11px] font-mono\">\n {[\n { source: \"Online Paddle #418 (You)\", amount: formatPrice(currentBidUsd), time: \"Just now\", leading: true },\n { source: \"Telephone Desk 04 (Tokyo)\", amount: formatPrice(currentBidUsd - 50000), time: \"32s ago\", leading: false },\n { source: \"Saleroom Floor (London)\", amount: formatPrice(currentBidUsd - 150000), time: \"1m 14s ago\", leading: false },\n { source: \"Telephone Desk 12 (New York)\", amount: formatPrice(currentBidUsd - 250000), time: \"2m 05s ago\", leading: false },\n ].map((entry, idx) => (\n <div\n key={idx}\n className=\"p-2.5 rounded-lg border flex items-center justify-between\"\n style={{\n backgroundColor: entry.leading ? \"rgba(217, 119, 6, 0.1)\" : isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: entry.leading ? \"rgba(217, 119, 6, 0.3)\" : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div>\n <div className=\"font-semibold\">{entry.source}</div>\n <div className=\"text-[10px] opacity-50\">{entry.time}</div>\n </div>\n <span className={\\`font-bold \\${entry.leading ? \"text-amber-500\" : \"opacity-80\"}\\`}>\n {entry.amount}\n </span>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Condition Report Modal /}\n <AnimatePresence>\n {isConditionModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#100d0a\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <FileCheck className=\"w-4 h-4 text-amber-500\" />\n <h3 className=\"text-sm font-bold\">Conservator Condition Report</h3>\n </div>\n <button onClick={() => setIsConditionModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <div className=\"space-y-3 text-xs\">\n <p className=\"leading-relaxed opacity-80\">{lot.conditionSummary}</p>\n\n <div\n className=\"p-3 rounded-xl border space-y-1.5\"\n \n >\n <div className=\"flex justify-between font-semibold\">\n <span>UV Examination</span>\n <span className=\"text-emerald-500\">Pristine • No Inpainting</span>\n </div>\n <div className=\"flex justify-between font-semibold\">\n <span>Tension & Stretcher</span>\n <span className=\"text-emerald-500\">Original Archival Cedar</span>\n </div>\n <div className=\"flex justify-between font-semibold\">\n <span>Inspection Date</span>\n <span className=\"opacity-75\">Aug 28, 2026</span>\n </div>\n </div>\n </div>\n\n <div className=\"flex justify-end pt-2\">\n <button\n onClick={() => setIsConditionModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Close Report\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateScholarisArchive = {\n name: \"template-scholaris-archive\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-scholaris-archive.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n BookOpen,\n Share2,\n Download,\n Copy,\n CheckCircle2,\n X,\n FileText,\n GitBranch,\n Check,\n ExternalLink,\n Sparkles,\n Award,\n Database,\n Code2,\n ChevronRight,\n Search,\n} from \"lucide-react\";\n\nexport interface ScholarisArchiveTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function ScholarisArchiveTemplate({\n brandName = \"Scholaris Archive\",\n theme = \"dark\",\n}: ScholarisArchiveTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedCitationTab, setSelectedCitationTab] = useState<\"DERIVATIVES\" \| \"ANTECEDENTS\">(\"DERIVATIVES\");\n const [isBibtexModalOpen, setIsBibtexModalOpen] = useState(false);\n const [copiedBibtex, setCopiedBibtex] = useState(false);\n const [archiveToast, setArchiveToast] = useState<string \| null>(null);\n\n const paper = {\n title: \"Sub-Quadratic Attention via Orthogonal State Space Projections in High-Dimensional Manifolds\",\n authors: [\n { name: \"Dr. Evelyn Zhao\", affil: \"Stanford AI Lab\", orcid: \"0000-0002-1825-0098\" },\n { name: \"Prof. Kenneth Sterling\", affil: \"MIT CSAIL\", orcid: \"0000-0001-9942-7711\" },\n { name: \"Tariq Al-Mansoor\", affil: \"Max Planck Institute\", orcid: \"0000-0003-4412-8802\" },\n ],\n doi: \"10.1038/s41586-026-09214-x\",\n published: \"August 2026\",\n journal: \"Journal of Machine Learning & Cognitive Systems (Vol 42, Iss 3)\",\n citationsCount: 142,\n downloadsCount: \"18.4k\",\n reproducibilityScore: \"9.8 / 10\",\n abstract:\n \"Traditional Transformer architectures incur quadratic complexity O(N^2) with respect to context sequence length. In this work, we present OrthoMamba, an orthogonal recurrent operator projecting key-value attention tensors onto isometric Stiefel manifolds. Our formulation proves mathematically equivalent convergence bounds while achieving O(N log N) inference throughput across 1,000,000 token horizons.\",\n latexFormula: \"\\\\\\\\mathcal{L}_{\\\\\\\\text{proj}}(Q, K, V) = \\\\\\\\arg\\\\\\\\min_{W \\\\\\\\in \\\\\\\\text{St}(d, k)} \\\\\\\\\| W^T (QK^T) W - V \\\\\\\\\|_F^2 + \\\\\\\\lambda \\\\\\\\operatorname{Tr}(W^T W - I)\",\n };\n\n const citations = {\n DERIVATIVES: [\n {\n title: \"Long-Horizon Genomics Sequence Modeling with OrthoMamba Kernels\",\n authors: \"Chen et al., Nature Computational Biology 2026\",\n impact: \"+48 citations\",\n reproduced: true,\n },\n {\n title: \"Hardware Accelerators for Non-Euclidean Tensor Attention\",\n authors: \"Vance & Sato, IEEE Micro 2026\",\n impact: \"+31 citations\",\n reproduced: true,\n },\n ],\n ANTECEDENTS: [\n {\n title: \"Structured State Spaces for Sequence Modeling (S4)\",\n authors: \"Gu et al., ICLR 2022\",\n impact: \"Foundational S4 Architecture\",\n reproduced: true,\n },\n {\n title: \"Attention Is All You Need\",\n authors: \"Vaswani et al., NeurIPS 2017\",\n impact: \"Transformer Baseline Reference\",\n reproduced: true,\n },\n ],\n };\n\n const bibtexSnippet = \\`@article{zhao2026orthomamba,\n title={Sub-Quadratic Attention via Orthogonal State Space Projections},\n author={Zhao, Evelyn and Sterling, Kenneth and Al-Mansoor, Tariq},\n journal={Journal of Machine Learning & Cognitive Systems},\n volume={42},\n number={3},\n pages={114--132},\n year={2026},\n doi={10.1038/s41586-026-09214-x}\n}\\`;\n\n const handleCopyBibtex = () => {\n navigator.clipboard.writeText(bibtexSnippet);\n setCopiedBibtex(true);\n setTimeout(() => setCopiedBibtex(false), 2000);\n };\n\n const handleDownloadDataset = () => {\n setArchiveToast(\"Zenodo Dataset Archive (2.4 GB) download started via IPFS mirror!\");\n setTimeout(() => setArchiveToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Top Bar /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(10, 14, 18, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <BookOpen className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">Scholaris Archive</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(14, 165, 233, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Academic Research\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Open-Access Scientific Preprints & Citation Dependency Explorer\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setIsBibtexModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <FileText className=\"w-3.5 h-3.5\" />\n <span>Cite (BibTeX)</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {archiveToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(14, 165, 233, 0.12)\" : \"#f0f9ff\",\n borderColor: \"rgba(14, 165, 233, 0.3)\",\n color: \"#0284c7\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-sky-500\" />\n <span>{archiveToast}</span>\n </div>\n <button onClick={() => setArchiveToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Paper Main Header & Abstract /}\n <div\n className=\"p-6 sm:p-8 rounded-2xl border space-y-6\"\n \n >\n {/ Metadata pill badges /}\n <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n <span className=\"px-2.5 py-1 rounded-full font-bold bg-sky-500/15 text-sky-600 dark:text-sky-400 font-mono\">\n DOI: {paper.doi}\n </span>\n <span className=\"opacity-60 font-medium\">• {paper.published}</span>\n <span className=\"opacity-60 font-medium\">• {paper.journal}</span>\n </div>\n\n <h1 className=\"text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight leading-snug\">\n {paper.title}\n </h1>\n\n {/ Authors Strip /}\n <div className=\"flex flex-wrap gap-4 pt-1\">\n {paper.authors.map((author) => (\n <div key={author.name} className=\"text-xs\">\n <span className=\"font-bold block\">{author.name}</span>\n <span className=\"text-[11px] opacity-60\">{author.affil}</span>\n </div>\n ))}\n </div>\n\n {/ Scientific Abstract /}\n <div\n className=\"p-5 rounded-xl border space-y-3\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-60 block\">Abstract</span>\n <p className=\"text-xs sm:text-sm leading-relaxed opacity-85\">{paper.abstract}</p>\n\n {/ LaTeX Mathematical Formula Display /}\n <div\n className=\"p-3 rounded-lg border font-mono text-xs overflow-x-auto text-sky-600 dark:text-sky-300\"\n style={{\n backgroundColor: isDark ? \"#06090e\" : \"#f1f5f9\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {paper.latexFormula}\n </div>\n </div>\n </div>\n\n {/ Reproducibility & Citation Network Split /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Left: Reproducibility Scorecard (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Open Science Verification\n </span>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">REPRODUCIBLE</span>\n </div>\n\n <div className=\"space-y-3 text-xs\">\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Database className=\"w-4 h-4 text-sky-500\" />\n <div>\n <div className=\"font-bold\">Zenodo Open Dataset</div>\n <div className=\"text-[10px] opacity-60\">2.4 GB • 10M Token Sequence Benchmark</div>\n </div>\n </div>\n <button\n onClick={handleDownloadDataset}\n className=\"p-1.5 rounded-lg border hover:bg-sky-500/10\"\n \n >\n <Download className=\"w-3.5 h-3.5 text-sky-500\" />\n </button>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Code2 className=\"w-4 h-4 text-emerald-500\" />\n <div>\n <div className=\"font-bold\">Verified Docker Container</div>\n <div className=\"text-[10px] opacity-60\">Reproduced on 8x NVIDIA H100 SXM5</div>\n </div>\n </div>\n <span className=\"font-mono text-[10px] font-bold text-emerald-500\">PASS 100%</span>\n </div>\n\n <div\n className=\"p-3.5 rounded-xl border flex items-center justify-between\"\n \n >\n <div className=\"flex items-center gap-2.5\">\n <Award className=\"w-4 h-4 text-amber-500\" />\n <div>\n <div className=\"font-bold\">Peer Review Consensus</div>\n <div className=\"text-[10px] opacity-60\">Double-blind evaluation by 4 referees</div>\n </div>\n </div>\n <span className=\"font-mono font-bold text-amber-500\">Score 9.8</span>\n </div>\n </div>\n </div>\n </div>\n\n {/ Right: Interactive Citation Tree (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Citation Dependency Graph\n </span>\n <div className=\"flex items-center gap-1 bg-black/5 dark:bg-white/5 p-0.5 rounded-lg text-[10px]\">\n <button\n onClick={() => setSelectedCitationTab(\"DERIVATIVES\")}\n className={\\`px-2 py-1 rounded font-semibold transition-all \\${\n selectedCitationTab === \"DERIVATIVES\"\n ? \"bg-white dark:bg-zinc-800 shadow-sm\"\n : \"opacity-60\"\n }\\`}\n >\n Derivative Works (142)\n </button>\n <button\n onClick={() => setSelectedCitationTab(\"ANTECEDENTS\")}\n className={\\`px-2 py-1 rounded font-semibold transition-all \\${\n selectedCitationTab === \"ANTECEDENTS\"\n ? \"bg-white dark:bg-zinc-800 shadow-sm\"\n : \"opacity-60\"\n }\\`}\n >\n Foundational Roots (38)\n </button>\n </div>\n </div>\n\n <div className=\"space-y-2.5\">\n {citations[selectedCitationTab].map((c, idx) => (\n <div\n key={idx}\n className=\"p-3.5 rounded-xl border space-y-1\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n }}\n >\n <div className=\"flex items-center justify-between text-xs\">\n <span className=\"font-bold leading-tight line-clamp-1\">{c.title}</span>\n <span className=\"text-[10px] font-mono text-sky-500 font-bold shrink-0 ml-2\">\n {c.impact}\n </span>\n </div>\n <div className=\"text-[11px] opacity-60\">{c.authors}</div>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ BibTeX Citation Modal /}\n <AnimatePresence>\n {isBibtexModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-lg rounded-2xl border p-6 space-y-4 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#090d14\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <FileText className=\"w-4 h-4 text-sky-500\" />\n <h3 className=\"text-sm font-bold\">BibTeX Academic Citation</h3>\n </div>\n <button onClick={() => setIsBibtexModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <div\n className=\"p-4 rounded-xl border font-mono text-xs overflow-x-auto\"\n style={{\n backgroundColor: isDark ? \"#05070a\" : \"#f8fafc\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <pre>{bibtexSnippet}</pre>\n </div>\n\n <div className=\"flex justify-between items-center pt-2\">\n <span className=\"text-xs opacity-60\">Ready for LaTeX, Overleaf & Zotero</span>\n <button\n onClick={handleCopyBibtex}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold text-white flex items-center gap-1.5\"\n \n >\n {copiedBibtex ? <Check className=\"w-3.5 h-3.5\" /> : <Copy className=\"w-3.5 h-3.5\" />}\n <span>{copiedBibtex ? \"Copied to Clipboard\" : \"Copy BibTeX\"}</span>\n </button>\n </div>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateTalentorbitHr = {\n name: \"template-talentorbit-hr\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-talentorbit-hr.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Users,\n Calendar,\n Award,\n Clock,\n CheckCircle2,\n X,\n Sparkles,\n ChevronRight,\n TrendingUp,\n MapPin,\n Mail,\n UserPlus,\n Briefcase,\n AlertCircle,\n} from \"lucide-react\";\n\nexport interface TalentOrbitTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function TalentOrbitTemplate({\n brandName = \"TalentOrbit HR\",\n theme = \"dark\",\n}: TalentOrbitTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [selectedDept, setSelectedDept] = useState<\"ALL\" \| \"ENG\" \| \"PRODUCT\" \| \"DESIGN\">(\"ALL\");\n const [isPtoModalOpen, setIsPtoModalOpen] = useState(false);\n const [approvedPtoDays, setApprovedPtoDays] = useState(18);\n const [hrToast, setHrToast] = useState<string \| null>(null);\n\n const teamMembers = [\n {\n id: \"EMP-101\",\n name: \"Sophia Lindqvist\",\n title: \"VP of Engineering\",\n department: \"ENG\",\n location: \"Stockholm (UTC+1)\",\n status: \"ACTIVE\",\n reports: 24,\n performance: \"Top Performer (9-Box: 1A)\",\n avatarColor: \"bg-indigo-500\",\n },\n {\n id: \"EMP-102\",\n name: \"Marcus Sterling\",\n title: \"Principal Distributed Systems Architect\",\n department: \"ENG\",\n location: \"San Francisco (UTC-8)\",\n status: \"ACTIVE\",\n reports: 6,\n performance: \"Core Contributor (9-Box: 2A)\",\n avatarColor: \"bg-blue-500\",\n },\n {\n id: \"EMP-103\",\n name: \"Amara Okonjo\",\n title: \"Head of Product Design & Brand\",\n department: \"DESIGN\",\n location: \"London (UTC+0)\",\n status: \"ON_PTO\",\n reports: 8,\n performance: \"High Potential Leader (9-Box: 1B)\",\n avatarColor: \"bg-rose-500\",\n },\n {\n id: \"EMP-104\",\n name: \"Daisuke Tanaka\",\n title: \"Senior Product Director\",\n department: \"PRODUCT\",\n location: \"Tokyo (UTC+9)\",\n status: \"ACTIVE\",\n reports: 12,\n performance: \"Top Performer (9-Box: 1A)\",\n avatarColor: \"bg-amber-500\",\n },\n ];\n\n const filteredMembers = teamMembers.filter((m) => {\n if (selectedDept === \"ALL\") return true;\n return m.department === selectedDept;\n });\n\n const handleRequestPto = (e: React.FormEvent) => {\n e.preventDefault();\n setIsPtoModalOpen(false);\n setApprovedPtoDays(approvedPtoDays - 4);\n setHrToast(\"4-Day PTO Request submitted & routed to manager for one-click signoff!\");\n setTimeout(() => setHrToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(12, 10, 20, 0.88)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Users className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">TalentOrbit HR</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(139, 92, 246, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n HR & People\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Modern Org Architecture, Capacity Planning & 360 Performance\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setIsPtoModalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <Calendar className=\"w-3.5 h-3.5\" />\n <span>Request PTO ({approvedPtoDays}d left)</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {hrToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(139, 92, 246, 0.12)\" : \"#f5f3ff\",\n borderColor: \"rgba(139, 92, 246, 0.3)\",\n color: \"#7c3aed\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-violet-500\" />\n <span>{hrToast}</span>\n </div>\n <button onClick={() => setHrToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Global Workforce Summary /}\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\n <div\n className=\"p-4 rounded-2xl border\"\n \n >\n <div className=\"text-[11px] font-semibold opacity-60\">Global Headcount</div>\n <div className=\"text-2xl font-black mt-1\">148</div>\n <div className=\"text-[10px] text-emerald-500 font-medium\">+12 in Q3 cohort</div>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border\"\n \n >\n <div className=\"text-[11px] font-semibold opacity-60\">Active on PTO</div>\n <div className=\"text-2xl font-black mt-1\">6</div>\n <div className=\"text-[10px] opacity-60 font-medium\">Coverage at 96%</div>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border\"\n \n >\n <div className=\"text-[11px] font-semibold opacity-60\">eNPS Sentiment</div>\n <div className=\"text-2xl font-black text-violet-500 mt-1\">+68</div>\n <div className=\"text-[10px] text-emerald-500 font-medium\">Top 5% tech percentile</div>\n </div>\n\n <div\n className=\"p-4 rounded-2xl border\"\n \n >\n <div className=\"text-[11px] font-semibold opacity-60\">Global Timezones</div>\n <div className=\"text-2xl font-black mt-1\">14</div>\n <div className=\"text-[10px] opacity-60 font-medium\">Async-first collaboration</div>\n </div>\n </div>\n\n {/ Interactive Org Directory & Department Switcher /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Team Tree List (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">PEOPLE DIRECTORY</span>\n <h3 className=\"text-base font-bold tracking-tight\">Organization Tree</h3>\n </div>\n\n {/ Department filter buttons /}\n <div className=\"flex items-center gap-1 bg-black/5 dark:bg-white/5 p-0.5 rounded-lg text-[10px]\">\n {([\"ALL\", \"ENG\", \"PRODUCT\", \"DESIGN\"] as const).map((dept) => (\n <button\n key={dept}\n onClick={() => setSelectedDept(dept)}\n className={\\`px-2 py-1 rounded font-semibold transition-all \\${\n selectedDept === dept ? \"bg-white dark:bg-zinc-800 shadow-sm\" : \"opacity-60\"\n }\\`}\n >\n {dept}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"space-y-3\">\n {filteredMembers.map((member) => (\n <div\n key={member.id}\n className=\"p-4 rounded-xl border flex flex-col sm:flex-row sm:items-center justify-between gap-3\"\n style={{\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n }}\n >\n <div className=\"flex items-center gap-3\">\n <div className={\\`w-10 h-10 rounded-full \\${member.avatarColor} text-white font-bold flex items-center justify-center text-xs shrink-0\\`}>\n {member.name.split(\" \").map(n => n[0]).join(\"\")}\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-bold\">{member.name}</span>\n <span\n className={\\`text-[9px] font-bold px-1.5 py-0.5 rounded \\${\n member.status === \"ACTIVE\"\n ? \"bg-emerald-500/15 text-emerald-500\"\n : \"bg-amber-500/15 text-amber-500\"\n }\\`}\n >\n {member.status === \"ACTIVE\" ? \"Active\" : \"On PTO\"}\n </span>\n </div>\n <div className=\"text-[11px] opacity-70 mt-0.5\">{member.title}</div>\n <div className=\"flex items-center gap-2 text-[10px] opacity-50 mt-1\">\n <MapPin className=\"w-3 h-3\" />\n <span>{member.location}</span>\n <span>•</span>\n <span>{member.reports} direct reports</span>\n </div>\n </div>\n </div>\n\n <div className=\"text-left sm:text-right text-[11px]\">\n <span className=\"font-semibold block text-violet-500\">{member.performance}</span>\n <span className=\"text-[10px] opacity-50\">Review Cycle: 2026.Q3</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Right: Global Team PTO Coverage (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n PTO Calendar & Overlap Radar\n </span>\n <span className=\"text-xs font-mono text-emerald-500 font-bold\">ZERO SPRINT CLASHES</span>\n </div>\n\n <div className=\"space-y-3 text-xs\">\n {[\n { name: \"Amara Okonjo\", role: \"Design Lead\", dates: \"Sep 07 - Sep 14\", status: \"Approved\" },\n { name: \"Marcus Vance\", role: \"Sr. Backend\", dates: \"Sep 22 - Sep 28\", status: \"Pending Manager\" },\n { name: \"Chloe Dupont\", role: \"Staff Frontend\", dates: \"Oct 02 - Oct 08\", status: \"Approved\" },\n ].map((item, idx) => (\n <div\n key={idx}\n className=\"p-3 rounded-xl border flex items-center justify-between\"\n \n >\n <div>\n <div className=\"font-bold\">{item.name}</div>\n <div className=\"text-[10px] opacity-60\">{item.role} • {item.dates}</div>\n </div>\n <span className=\"text-[10px] font-bold px-2 py-0.5 rounded bg-violet-500/15 text-violet-500\">\n {item.status}\n </span>\n </div>\n ))}\n </div>\n\n {/ 9-Box Talent Matrix Snippet /}\n <div\n className=\"p-4 rounded-xl border space-y-2\"\n style={{\n backgroundColor: isDark ? \"rgba(255, 255, 255, 0.02)\" : \"#fafafa\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <Award className=\"w-4 h-4 text-violet-500\" />\n <span className=\"text-xs font-bold\">Talent Calibration Matrix</span>\n </div>\n <p className=\"text-[11px] opacity-75 leading-relaxed\">\n 84% of engineering ICs currently calibrated in Tier 1 (Exceeding Expectations) and ready for senior promotion tracks in Q4.\n </p>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ PTO Request Modal /}\n <AnimatePresence>\n {isPtoModalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#0e0a16\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <Calendar className=\"w-4 h-4 text-violet-500\" />\n <h3 className=\"text-sm font-bold\">Submit Time-Off Request</h3>\n </div>\n <button onClick={() => setIsPtoModalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <form onSubmit={handleRequestPto} className=\"space-y-4 text-xs\">\n <div className=\"space-y-1.5\">\n <label className=\"font-semibold block\">Time-Off Category</label>\n <select\n className=\"w-full p-2.5 rounded-xl border bg-transparent outline-none\"\n \n >\n <option value=\"VACATION\">Paid Annual Vacation (PTO)</option>\n <option value=\"MENTAL_HEALTH\">Wellness & Mental Health Day</option>\n <option value=\"PARENTAL\">Parental Leave</option>\n </select>\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div className=\"space-y-1\">\n <label className=\"font-semibold block\">Start Date</label>\n <input\n type=\"date\"\n defaultValue=\"2026-09-21\"\n className=\"w-full p-2 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n <div className=\"space-y-1\">\n <label className=\"font-semibold block\">End Date</label>\n <input\n type=\"date\"\n defaultValue=\"2026-09-25\"\n className=\"w-full p-2 rounded-xl border bg-transparent outline-none\"\n \n />\n </div>\n </div>\n\n <div className=\"p-3 rounded-xl border flex items-center gap-2 text-emerald-500 font-semibold\" >\n <CheckCircle2 className=\"w-4 h-4 shrink-0\" />\n <span>Zero team coverage conflicts during this sprint window.</span>\n </div>\n\n <div className=\"flex justify-end gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsPtoModalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"px-4 py-2 rounded-xl text-xs font-semibold text-white\"\n \n >\n Submit Request\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","export const templateMiseenplaceKds = {\n name: \"template-miseenplace-kds\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-miseenplace-kds.tsx\",\n content: `\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n UtensilsCrossed,\n Flame,\n Clock,\n AlertTriangle,\n CheckCircle2,\n X,\n Sparkles,\n ChevronRight,\n Filter,\n Check,\n RotateCcw,\n Volume2,\n ChefHat,\n Timer,\n ShoppingBag,\n} from \"lucide-react\";\n\nexport interface MiseEnPlaceTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function MiseEnPlaceTemplate({\n brandName = \"MiseEnPlace KDS\",\n theme = \"dark\",\n}: MiseEnPlaceTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [activeStation, setActiveStation] = useState<\"ALL\" \| \"GRILL\" \| \"SAUTE\" \| \"PANTRY\">(\"ALL\");\n const [bumpedTickets, setBumpedTickets] = useState<string[]>([]);\n const [kdsToast, setKdsToast] = useState<string \| null>(null);\n\n const initialTickets = [\n {\n id: \"TKT-84\",\n table: \"TABLE 12\",\n type: \"DINE_IN\",\n timeElapsed: \"04:15\",\n isUrgent: false,\n server: \"Julian\",\n items: [\n { name: \"2x 45-Day Dry Aged Ribeye (Med-Rare)\", station: \"GRILL\", notes: \"Bone marrow butter, flaky Maldon salt\" },\n { name: \"1x Truffle Pommes Frites\", station: \"SAUTE\", notes: \"Extra crispy, parmesan snow\" },\n { name: \"1x Charred Broccolini\", station: \"GRILL\", notes: \"Preserved lemon vinaigrette\" },\n ],\n allergy: null,\n },\n {\n id: \"TKT-85\",\n table: \"UBEREATS #901\",\n type: \"DELIVERY\",\n timeElapsed: \"13:40\",\n isUrgent: true,\n server: \"Delivery Courier Waiting\",\n items: [\n { name: \"1x Crispy Buttermilk Fried Chicken\", station: \"SAUTE\", notes: \"Spicy habanero honey on side\" },\n { name: \"1x Heirloom Tomato & Burrata Salad\", station: \"PANTRY\", notes: \"ALLERGY: SEVERE TREE NUT ALLERGY\" },\n ],\n allergy: \"SEVERE TREE NUT ALLERGY - CLEAN SANITIZE BOARD\",\n },\n {\n id: \"TKT-86\",\n table: \"TABLE 04\",\n type: \"DINE_IN\",\n timeElapsed: \"08:22\",\n isUrgent: false,\n server: \"Chloe\",\n items: [\n { name: \"2x Pan-Seared Chilean Sea Bass\", station: \"SAUTE\", notes: \"Dashi beurre blanc, crispy leeks\" },\n { name: \"1x Hamachi Crudo\", station: \"PANTRY\", notes: \"Yuzu kosho, pickled radish\" },\n ],\n allergy: null,\n },\n ];\n\n const handleBumpTicket = (ticketId: string) => {\n if (!bumpedTickets.includes(ticketId)) {\n setBumpedTickets([...bumpedTickets, ticketId]);\n setKdsToast(\\`Ticket [\\${ticketId}] Bumped! Routed to Expediter & Runner.\\`);\n setTimeout(() => setKdsToast(null), 3500);\n }\n };\n\n const handleRecallTicket = () => {\n if (bumpedTickets.length > 0) {\n const last = bumpedTickets[bumpedTickets.length - 1];\n setBumpedTickets(bumpedTickets.slice(0, -1));\n setKdsToast(\\`Ticket [\\${last}] recalled back to active line!\\`);\n setTimeout(() => setKdsToast(null), 3500);\n }\n };\n\n const visibleTickets = initialTickets.filter((tkt) => {\n if (bumpedTickets.includes(tkt.id)) return false;\n if (activeStation === \"ALL\") return true;\n return tkt.items.some((item) => item.station === activeStation);\n });\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(18, 12, 10, 0.9)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <UtensilsCrossed className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">MiseEnPlace KDS</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(249, 115, 22, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Restaurant Tech\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Commercial Kitchen Display System & Line Order Expediter\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={handleRecallTicket}\n disabled={bumpedTickets.length === 0}\n className=\"px-3 py-1.5 rounded-xl border text-xs font-semibold flex items-center gap-1.5 transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:bg-black/5 dark:hover:bg-white/5\"\n \n >\n <RotateCcw className=\"w-3.5 h-3.5\" />\n <span>Recall Last</span>\n </button>\n\n <div\n className=\"px-3 py-1.5 rounded-lg border text-xs font-mono font-bold flex items-center gap-1.5 text-orange-500\"\n \n >\n <Flame className=\"w-3.5 h-3.5 animate-pulse\" />\n <span>{visibleTickets.length} ACTIVE ORDERS</span>\n </div>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {kdsToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(249, 115, 22, 0.12)\" : \"#fff7ed\",\n borderColor: \"rgba(249, 115, 22, 0.3)\",\n color: \"#ea580c\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-orange-500\" />\n <span>{kdsToast}</span>\n </div>\n <button onClick={() => setKdsToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Station Tabs /}\n <div className=\"flex items-center justify-between flex-wrap gap-2\">\n <div className=\"flex items-center gap-1 bg-black/5 dark:bg-white/5 p-1 rounded-xl text-xs\">\n {([\"ALL\", \"GRILL\", \"SAUTE\", \"PANTRY\"] as const).map((st) => (\n <button\n key={st}\n onClick={() => setActiveStation(st)}\n className={\\`px-3 py-1.5 rounded-lg font-bold transition-all \\${\n activeStation === st ? \"bg-orange-500 text-white shadow-sm\" : \"opacity-60 hover:opacity-100\"\n }\\`}\n >\n {st === \"ALL\" ? \"All Kitchen Lines\" : st}\n </button>\n ))}\n </div>\n\n <div className=\"flex items-center gap-3 text-xs font-mono\">\n <span className=\"flex items-center gap-1.5 text-emerald-500\">\n <span className=\"w-2 h-2 rounded-full bg-emerald-500\" /> < 5m On Time\n </span>\n <span className=\"flex items-center gap-1.5 text-amber-500\">\n <span className=\"w-2 h-2 rounded-full bg-amber-500\" /> 5-10m Warning\n </span>\n <span className=\"flex items-center gap-1.5 text-rose-500\">\n <span className=\"w-2 h-2 rounded-full bg-rose-500 animate-ping\" /> > 12m Critical\n </span>\n </div>\n </div>\n\n {/ KDS Order Tickets Grid /}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n {visibleTickets.map((tkt) => (\n <div\n key={tkt.id}\n className={\\`rounded-2xl border flex flex-col justify-between overflow-hidden shadow-sm transition-all \\${\n tkt.isUrgent ? \"border-rose-500 ring-2 ring-rose-500/20\" : \"\"\n }\\`}\n style={{\n backgroundColor: \"#12141c\",\n borderColor: tkt.isUrgent ? undefined : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {/ Ticket Header Bar /}\n <div\n className={\\`p-4 border-b flex items-center justify-between text-xs font-mono font-bold \\${\n tkt.isUrgent ? \"bg-rose-500/15 text-rose-600 dark:text-rose-400\" : \"\"\n }\\`}\n \n >\n <div>\n <span className=\"text-sm font-black\">{tkt.table}</span>\n <div className=\"text-[10px] opacity-70 font-normal mt-0.5\">{tkt.id} • {tkt.server}</div>\n </div>\n\n <div className=\"flex items-center gap-1.5 text-xs\">\n <Timer className={\\`w-3.5 h-3.5 \\${tkt.isUrgent ? \"text-rose-500 animate-spin\" : \"opacity-60\"}\\`} />\n <span>{tkt.timeElapsed}</span>\n </div>\n </div>\n\n {/ Allergy Warning Flag /}\n {tkt.allergy && (\n <div className=\"p-2.5 bg-rose-600 text-white text-[11px] font-bold flex items-center gap-2\">\n <AlertTriangle className=\"w-4 h-4 shrink-0 animate-bounce\" />\n <span>{tkt.allergy}</span>\n </div>\n )}\n\n {/ Ticket Items List /}\n <div className=\"p-4 space-y-3 flex-1\">\n {tkt.items.map((item, idx) => (\n <div key={idx} className=\"space-y-0.5 pb-2.5 border-b last:border-b-0\" >\n <div className=\"flex items-center justify-between text-xs\">\n <span className=\"font-bold leading-tight\">{item.name}</span>\n <span className=\"text-[9px] font-mono px-1.5 py-0.5 rounded bg-black/5 dark:bg-white/5 font-semibold\">\n {item.station}\n </span>\n </div>\n <div className=\"text-[11px] opacity-60 italic\">{item.notes}</div>\n </div>\n ))}\n </div>\n\n {/ Bump Ticket Footer Button /}\n <div className=\"p-3 border-t bg-black/5 dark:bg-white/5\" >\n <button\n onClick={() => handleBumpTicket(tkt.id)}\n className=\"w-full py-2.5 rounded-xl font-bold text-xs text-white flex items-center justify-center gap-2 shadow-sm transition-all active:scale-98 hover:opacity-90\"\n \n >\n <Check className=\"w-4 h-4\" />\n <span>Bump Order (Complete)</span>\n </button>\n </div>\n </div>\n ))}\n\n {visibleTickets.length === 0 && (\n <div\n className=\"md:col-span-3 p-12 text-center rounded-2xl border space-y-2\"\n \n >\n <ChefHat className=\"w-8 h-8 mx-auto text-emerald-500\" />\n <h3 className=\"text-base font-bold\">All Orders Cleared!</h3>\n <p className=\"text-xs opacity-60\">Kitchen line is all prepped and clear for upcoming dinner rush.</p>\n </div>\n )}\n </div>\n </main>\n </div>\n );\n}\n`,\n};\n","export const templateAurasolaceSanctuary = {\n name: \"template-aurasolace-sanctuary\",\n dependencies: [\"framer-motion\", \"lucide-react\"],\n fileName: \"template-aurasolace-sanctuary.tsx\",\n content: `\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Heart,\n Wind,\n Volume2,\n Sparkles,\n Sliders,\n CheckCircle2,\n X,\n Smile,\n BookOpen,\n PenTool,\n Check,\n Moon,\n Sun,\n Flame,\n CloudRain,\n Music,\n} from \"lucide-react\";\n\nexport interface AuraSolaceTemplateProps {\n brandName?: string;\n theme?: \"dark\" \| \"light\";\n}\n\nexport default function AuraSolaceTemplate({\n brandName = \"AuraSolace\",\n theme = \"dark\",\n}: AuraSolaceTemplateProps) {\n \n const isDark = theme === \"dark\";\n\n // States\n const [breathPhase, setBreathPhase] = useState<\"INHALE\" \| \"HOLD\" \| \"EXHALE\">(\"INHALE\");\n const [phaseSeconds, setPhaseSeconds] = useState(4);\n const [selectedMood, setSelectedMood] = useState(\"Peaceful Grounded\");\n const [isJournalOpen, setIsJournalOpen] = useState(false);\n const [journalNote, setJournalNote] = useState(\"\");\n const [soundVolumes, setSoundVolumes] = useState({\n rain: 65,\n bowls: 40,\n fire: 30,\n solfeggio: 55,\n });\n const [solaceToast, setSolaceToast] = useState<string \| null>(null);\n\n // Breathing pacer cycle (4-7-8 rhythm)\n useEffect(() => {\n const timer = setInterval(() => {\n setPhaseSeconds((prev) => {\n if (prev <= 1) {\n if (breathPhase === \"INHALE\") {\n setBreathPhase(\"HOLD\");\n return 7;\n } else if (breathPhase === \"HOLD\") {\n setBreathPhase(\"EXHALE\");\n return 8;\n } else {\n setBreathPhase(\"INHALE\");\n return 4;\n }\n }\n return prev - 1;\n });\n }, 1000);\n return () => clearInterval(timer);\n }, [breathPhase]);\n\n const handleSaveJournal = (e: React.FormEvent) => {\n e.preventDefault();\n setIsJournalOpen(false);\n setSolaceToast(\"Mindful reflection entry saved to encrypted private sanctuary.\");\n setTimeout(() => setSolaceToast(null), 3500);\n };\n\n return (\n <div\n className=\"w-full min-h-screen transition-colors font-sans text-left\"\n \n >\n {/ Header /}\n <header\n className=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors shrink-0\"\n style={{\n backgroundColor: isDark ? \"rgba(10, 14, 18, 0.85)\" : \"rgba(255, 255, 255, 0.92)\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-3\">\n <div className=\"flex items-center gap-3\">\n <div\n className=\"h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0\"\n \n >\n <Heart className=\"h-4 w-4\" />\n </div>\n <div>\n <div className=\"flex items-center gap-2\">\n <span className=\"font-bold text-sm tracking-tight\">AuraSolace</span>\n <span\n className=\"px-2 py-0.5 text-[10px] font-bold rounded-full uppercase tracking-wider\"\n style={{\n backgroundColor: \"rgba(20, 184, 166, 0.12)\",\n color: \"#6366f1\",\n }}\n >\n Mental Health\n </span>\n </div>\n <p className=\"text-[11px] opacity-60 hidden sm:block\">\n Somatic Nervous System Sanctuary & Ambient Soundscape\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setIsJournalOpen(true)}\n className=\"px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white shadow-sm flex items-center gap-1.5 transition-all hover:opacity-90 active:scale-95\"\n \n >\n <PenTool className=\"w-3.5 h-3.5\" />\n <span>Mindful Journal</span>\n </button>\n </div>\n </div>\n </header>\n\n {/ Main Container /}\n <main className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6\">\n {/ Toast /}\n <AnimatePresence>\n {solaceToast && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n className=\"p-3 rounded-xl border flex items-center justify-between text-xs font-medium\"\n style={{\n backgroundColor: isDark ? \"rgba(20, 184, 166, 0.12)\" : \"#f0fdfa\",\n borderColor: \"rgba(20, 184, 166, 0.3)\",\n color: \"#0d9488\",\n }}\n >\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"w-4 h-4 text-teal-500\" />\n <span>{solaceToast}</span>\n </div>\n <button onClick={() => setSolaceToast(null)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-3.5 h-3.5\" />\n </button>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Somatic Breath Pacer Stage & Sound Studio /}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n {/ Left: 4-7-8 Breath Pacer Engine (7 cols) /}\n <div className=\"lg:col-span-7 space-y-4\">\n <div\n className=\"p-6 sm:p-8 rounded-2xl border flex flex-col items-center justify-between text-center min-h-[440px] relative overflow-hidden\"\n \n >\n <div className=\"w-full flex items-center justify-between pb-4 border-b\" >\n <div>\n <span className=\"text-xs font-mono opacity-60\">AUTONOMIC REGULATION</span>\n <h3 className=\"text-base font-bold tracking-tight\">4-7-8 Parasympathetic Pacer</h3>\n </div>\n <span className=\"text-xs font-mono text-teal-500 font-bold\">CALM VAGUS NERVE</span>\n </div>\n\n {/ Animated Breath Orb /}\n <div className=\"my-8 relative flex items-center justify-center\">\n {/ Glowing Outer Ripple /}\n <motion.div\n animate={{\n scale: breathPhase === \"INHALE\" ? 1.4 : breathPhase === \"HOLD\" ? 1.4 : 0.9,\n opacity: breathPhase === \"HOLD\" ? 0.8 : 0.4,\n }}\n transition={{ duration: breathPhase === \"INHALE\" ? 4 : breathPhase === \"HOLD\" ? 7 : 8, ease: \"easeInOut\" }}\n className=\"w-48 h-48 rounded-full bg-teal-500/20 blur-xl absolute\"\n />\n\n {/ Main Interactive Circle /}\n <motion.div\n animate={{\n scale: breathPhase === \"INHALE\" ? 1.25 : breathPhase === \"HOLD\" ? 1.25 : 0.95,\n }}\n transition={{ duration: breathPhase === \"INHALE\" ? 4 : breathPhase === \"HOLD\" ? 7 : 8, ease: \"easeInOut\" }}\n className=\"w-44 h-44 rounded-full border-2 border-teal-500 flex flex-col items-center justify-center p-4 relative shadow-lg\"\n style={{\n backgroundColor: isDark ? \"#061314\" : \"#f0fdfa\",\n }}\n >\n <Wind className=\"w-6 h-6 text-teal-500 mb-1\" />\n <span className=\"text-xs font-black tracking-wider uppercase text-teal-600 dark:text-teal-400\">\n {breathPhase === \"INHALE\" ? \"Breathe In\" : breathPhase === \"HOLD\" ? \"Hold Breath\" : \"Release Gently\"}\n </span>\n <span className=\"text-3xl font-black text-teal-500 font-mono mt-0.5\">\n {phaseSeconds}s\n </span>\n </motion.div>\n </div>\n\n {/ Subtle Guide Text /}\n <p className=\"text-xs opacity-70 max-w-sm\">\n Follow the sphere rhythm. Inhale deeply through your nose, hold gently at top, and slowly exhale through relaxed lips.\n </p>\n </div>\n </div>\n\n {/ Right: Ambient Acoustic Soundscape Studio (5 cols) /}\n <div className=\"lg:col-span-5 space-y-4\">\n <div\n className=\"p-5 sm:p-6 rounded-2xl border space-y-5\"\n \n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-70\">\n Acoustic Sanctuary Mixer\n </span>\n <Volume2 className=\"w-4 h-4 text-teal-500\" />\n </div>\n\n {/ Sound Faders /}\n <div className=\"space-y-3.5 text-xs\">\n {[\n { key: \"rain\", label: \"Pacific Coastal Rain\", icon: CloudRain },\n { key: \"bowls\", label: \"Tibetan Singing Bowls\", icon: Music },\n { key: \"fire\", label: \"Cedar Wood Fireplace\", icon: Flame },\n { key: \"solfeggio\", label: \"432 Hz Solfeggio Harmony\", icon: Sparkles },\n ].map((item) => {\n const val = soundVolumes[item.key as keyof typeof soundVolumes];\n const Icon = item.icon;\n return (\n <div key={item.key} className=\"space-y-1\">\n <div className=\"flex justify-between items-center\">\n <div className=\"flex items-center gap-1.5 font-semibold\">\n <Icon className=\"w-3.5 h-3.5 text-teal-500\" />\n <span>{item.label}</span>\n </div>\n <span className=\"font-mono opacity-60\">{val}%</span>\n </div>\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n value={val}\n onChange={(e) =>\n setSoundVolumes({ ...soundVolumes, [item.key]: parseInt(e.target.value) })\n }\n className=\"w-full accent-teal-500 cursor-pointer\"\n />\n </div>\n );\n })}\n </div>\n\n {/ Daily Emotional Dialectic /}\n <div className=\"pt-2 border-t space-y-2\" >\n <span className=\"text-xs font-bold uppercase tracking-wider opacity-60 block\">\n Daily Emotional State Check-In\n </span>\n <div className=\"flex flex-wrap gap-1.5\">\n {[\"Peaceful Grounded\", \"Open & Curious\", \"Gentle Reflection\", \"Overwhelmed\"].map((m) => (\n <button\n key={m}\n onClick={() => setSelectedMood(m)}\n className={\\`px-2.5 py-1 rounded-lg text-xs font-semibold transition-all \\${\n selectedMood === m\n ? \"bg-teal-500 text-white shadow-sm\"\n : \"border opacity-70 hover:opacity-100\"\n }\\`}\n style={{\n borderColor: selectedMood === m ? undefined : \"rgba(255, 255, 255, 0.08)\",\n }}\n >\n {m}\n </button>\n ))}\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n {/ Mindful Journal Modal /}\n <AnimatePresence>\n {isJournalOpen && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"w-full max-w-md rounded-2xl border p-6 space-y-5 shadow-2xl\"\n style={{\n backgroundColor: isDark ? \"#081214\" : \"#ffffff\",\n borderColor: \"rgba(255, 255, 255, 0.08)\",\n color: \"#f4f4f7\",\n }}\n >\n <div className=\"flex items-center justify-between pb-3 border-b\" >\n <div className=\"flex items-center gap-2\">\n <PenTool className=\"w-4 h-4 text-teal-500\" />\n <h3 className=\"text-sm font-bold\">Mindful Reflection Journal</h3>\n </div>\n <button onClick={() => setIsJournalOpen(false)} className=\"opacity-60 hover:opacity-100\">\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n\n <form onSubmit={handleSaveJournal} className=\"space-y-3 text-xs\">\n <div className=\"p-3 rounded-xl border bg-teal-500/5 text-teal-600 dark:text-teal-300 italic\" >\n \"What emotion or physical sensation is asking for your compassionate attention right now?\"\n </div>\n\n <textarea\n rows={4}\n value={journalNote}\n onChange={(e) => setJournalNote(e.target.value)}\n placeholder=\"Pour your thoughts freely without judgment...\"\n className=\"w-full p-3 rounded-xl border bg-transparent outline-none resize-none\"\n \n />\n\n <div className=\"flex justify-end gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={() => setIsJournalOpen(false)}\n className=\"px-4 py-2 rounded-xl text-xs font-semibold border\"\n \n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"px-4 py-2 rounded-xl text-xs font-semibold text-white\"\n \n >\n Save to Private Journal\n </button>\n </div>\n </form>\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n`,\n};\n","import { button } from './button';\nimport { modal } from './modal';\nimport { card } from './card';\nimport { alert } from './alert';\nimport { badge } from './badge';\nimport { morphingGeometry } from './morphing-geometry';\nimport { auroraBorderFX } from './aurora-border-fx';\nimport { auroraSearchPill } from './aurora-search-pill';\nimport { templateAiStartup } from './template-ai-startup';\nimport { templateModernSaas } from './template-modern-saas';\nimport { templateAnalyticsDashboard } from './template-analytics-dashboard';\nimport { templateDevtoolsCli } from './template-devtools-cli';\nimport { templateCreativePortfolio } from './template-creative-portfolio';\nimport { templateFintechApp } from './template-fintech-app';\nimport { templateEcommerceStore } from './template-ecommerce-store';\nimport { templateAgencyCreative } from './template-agency-creative';\nimport { templateAiChat } from './template-ai-chat';\nimport { templateProjectManagement } from './template-project-management';\nimport { templateStartupWaitlist } from './template-startup-waitlist';\nimport { templateDocsPlatform } from './template-docs-platform';\nimport { templateHealthcarePortal } from './template-healthcare-portal';\nimport { templateWeb3Dex } from './template-web3-dex';\nimport { templateEdtechLearning } from './template-edtech-learning';\nimport { templateConferenceEvent } from './template-conference-event';\nimport { templateAudioPodcast } from './template-audio-podcast';\nimport { templateRealEstate } from './template-real-estate';\nimport { templateUptimeStatus } from './template-uptime-status';\nimport { templateAgentWorkflow } from './template-agent-workflow';\nimport { templateRestaurantCulinary } from './template-restaurant-culinary';\nimport { templateHelpCenter } from './template-help-center';\nimport { templateFitnessAthletics } from './template-fitness-athletics';\nimport { templateWildernessTravel } from './template-wilderness-travel';\nimport { templateDevopsKubernetes } from './template-devops-kubernetes';\nimport { templateAudioDaw } from './template-audio-daw';\nimport { templateGamifiedHabits } from './template-gamified-habits';\nimport { templateGlobalLogistics } from './template-global-logistics';\nimport { templateGamingEsports } from './template-gaming-esports';\nimport { templateArchitectureSpatial } from './template-architecture-spatial';\nimport { templateCybersecuritySoc } from './template-cybersecurity-soc';\nimport { templateCleantechAgriculture } from './template-cleantech-agriculture';\nimport { templateJurisVault } from './template-juris-vault';\nimport { templateOrbitalxMission } from './template-orbitalx-mission';\nimport { templateCineboardStudio } from './template-cineboard-studio';\nimport { templateDomusLiving } from './template-domus-living';\nimport { templateHyperionEv } from './template-hyperion-ev';\nimport { templateSovereignAuctions } from './template-sovereign-auctions';\nimport { templateScholarisArchive } from './template-scholaris-archive';\nimport { templateTalentorbitHr } from './template-talentorbit-hr';\nimport { templateMiseenplaceKds } from './template-miseenplace-kds';\nimport { templateAurasolaceSanctuary } from './template-aurasolace-sanctuary';\n\nexport interface RegistryItem {\n name: string;\n dependencies: string[];\n componentsDependencies?: string[];\n fileName: string;\n content: string;\n}\n\nexport const registry: Record<string, RegistryItem> = {\n button,\n modal,\n card,\n alert,\n badge,\n 'morphing-geometry': morphingGeometry,\n 'aurora-border-fx': auroraBorderFX,\n 'aurora-search-pill': auroraSearchPill,\n 'template-ai-startup': templateAiStartup,\n 'template-modern-saas': templateModernSaas,\n 'template-analytics-dashboard': templateAnalyticsDashboard,\n 'template-devtools-cli': templateDevtoolsCli,\n 'template-creative-portfolio': templateCreativePortfolio,\n 'template-fintech-app': templateFintechApp,\n 'template-ecommerce-store': templateEcommerceStore,\n 'template-agency-creative': templateAgencyCreative,\n 'template-ai-chat': templateAiChat,\n 'template-project-management': templateProjectManagement,\n 'template-startup-waitlist': templateStartupWaitlist,\n 'template-docs-platform': templateDocsPlatform,\n 'template-healthcare-portal': templateHealthcarePortal,\n 'template-web3-dex': templateWeb3Dex,\n 'template-edtech-learning': templateEdtechLearning,\n 'template-conference-event': templateConferenceEvent,\n 'template-audio-podcast': templateAudioPodcast,\n 'template-real-estate': templateRealEstate,\n 'template-uptime-status': templateUptimeStatus,\n 'template-agent-workflow': templateAgentWorkflow,\n 'template-restaurant-culinary': templateRestaurantCulinary,\n 'template-help-center': templateHelpCenter,\n 'template-fitness-athletics': templateFitnessAthletics,\n 'template-wilderness-travel': templateWildernessTravel,\n 'template-devops-kubernetes': templateDevopsKubernetes,\n 'template-audio-daw': templateAudioDaw,\n 'template-gamified-habits': templateGamifiedHabits,\n 'template-global-logistics': templateGlobalLogistics,\n 'template-gaming-esports': templateGamingEsports,\n 'template-architecture-spatial': templateArchitectureSpatial,\n 'template-cybersecurity-soc': templateCybersecuritySoc,\n 'template-cleantech-agriculture': templateCleantechAgriculture,\n 'template-juris-vault': templateJurisVault,\n 'template-orbitalx-mission': templateOrbitalxMission,\n 'template-cineboard-studio': templateCineboardStudio,\n 'template-domus-living': templateDomusLiving,\n 'template-hyperion-ev': templateHyperionEv,\n 'template-sovereign-auctions': templateSovereignAuctions,\n 'template-scholaris-archive': templateScholarisArchive,\n 'template-talentorbit-hr': templateTalentorbitHr,\n 'template-miseenplace-kds': templateMiseenplaceKds,\n 'template-aurasolace-sanctuary': templateAurasolaceSanctuary,\n};\n\n\n\n","import { registry } from '../registry/index.js';\r\n\r\nexport function listCommand() {\r\n console.log('\\n\\x1b[34m\\x1b[1m=== Available NexoreUI Components ===\\x1b[0m\\n');\r\n \r\n Object.keys(registry).forEach((name) => {\r\n const item = registry[name];\r\n console.log(`- \\x1b[32m\\x1b[1m${name}\\x1b[0m (${item.fileName})`);\r\n if (item.dependencies.length > 0) {\r\n console.log(` \\x1b[90mDependencies: ${item.dependencies.join(', ')}\\x1b[0m`);\r\n }\r\n if (item.componentsDependencies && item.componentsDependencies.length > 0) {\r\n console.log(` \\x1b[33mRequires component: ${item.componentsDependencies.join(', ')}\\x1b[0m`);\r\n }\r\n console.log('');\r\n });\r\n}\r\n","import as fs from 'fs';\nimport * as path from 'path';\nimport * as readline from 'readline';\nimport { detectProject } from '../utils/detect.js';\nimport { ensureCnUtil, ensureDir } from '../utils/copy.js';\nimport { ensurePathAlias, injectThemeCss, installPeerDependencies, THEME_PALETTES } from '../utils/config.js';\n\nfunction askQuestion(query: string): Promise<string> {\n const rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n return new Promise((resolve) =>\n rl.question(query, (ans) => {\n rl.close();\n resolve(ans);\n })\n );\n}\n\nexport interface InitOptions {\n yes?: boolean;\n theme?: string;\n radius?: string;\n install?: boolean;\n}\n\nexport async function initCommand(options: InitOptions = {}) {\n console.log(`\\n\\x1b[36m\\x1b[1m=== Initializing NexoreUI in your project ===\\x1b[0m\\n`);\n\n const project = detectProject(process.cwd());\n console.log(`\\x1b[32m✔ Detected Project:\\x1b[0m ${project.projectType.toUpperCase()} (${project.packageManager})`);\n\n let theme = options.theme \|\| 'cyan';\n let radius = options.radius \|\| '1.0';\n const defaultComponentsDir = project.hasSrcDir ? 'src/components/ui' : 'components/ui';\n const defaultUtilsFile = project.hasSrcDir ? 'src/lib/utils.ts' : 'lib/utils.ts';\n const defaultCssFile = project.projectType === 'next' \n ? (project.hasSrcDir ? 'src/app/globals.css' : 'app/globals.css') \n : (project.hasSrcDir ? 'src/index.css' : 'src/index.css');\n\n let componentsDir = defaultComponentsDir;\n let utilsFile = defaultUtilsFile;\n\n if (!options.yes) {\n if (!options.theme) {\n const themeAns = await askQuestion(`Which color theme would you like to use? (cyan, indigo, violet, emerald, rose, amber, slate, neon) [default: cyan]: `);\n if (themeAns.trim() && THEME_PALETTES[themeAns.trim().toLowerCase()]) {\n theme = themeAns.trim().toLowerCase();\n }\n }\n\n if (!options.radius) {\n const radiusAns = await askQuestion(`Which radius value would you like to use? (0, 0.3, 0.5, 0.75, 1.0) [default: 1.0]: `);\n if (radiusAns.trim()) {\n radius = radiusAns.trim();\n }\n }\n\n const compAns = await askQuestion(`Where should UI components be created? (default: ${defaultComponentsDir}): `);\n if (compAns.trim()) componentsDir = compAns.trim();\n\n const utilsAns = await askQuestion(`Where should utility functions (cn helper) be placed? (default: ${defaultUtilsFile}): `);\n if (utilsAns.trim()) utilsFile = utilsAns.trim();\n }\n\n const absoluteComponentsDir = path.resolve(project.baseDir, componentsDir);\n const absoluteUtilsFile = path.resolve(project.baseDir, utilsFile);\n\n // 1. Ensure directories & cn helper\n ensureDir(absoluteComponentsDir);\n ensureCnUtil(absoluteUtilsFile);\n\n // 2. Configure Path Aliases (@/) automatically\n const didUpdateAlias = ensurePathAlias(project.baseDir, project.projectType, project.hasSrcDir);\n if (didUpdateAlias) {\n console.log(`\\x1b[32m✔\\x1b[0m Configured path alias \\x1b[1m'@/'\\x1b[0m in project config`);\n }\n\n // 3. Inject Tailwind CSS v4 source & theme variables\n const didInjectCss = injectThemeCss(project.baseDir, defaultCssFile, theme, radius);\n if (didInjectCss) {\n console.log(`\\x1b[32m✔\\x1b[0m Injected Tailwind CSS v4 @theme tokens into \\x1b[1m${defaultCssFile}\\x1b[0m`);\n }\n\n // 4. Install peer dependencies automatically\n installPeerDependencies(project.baseDir, project.packageManager);\n\n // 5. Write nexore.json config\n const config = {\n $schema: \"https://nexoreui.site/schema.json\",\n style: \"default\",\n theme: theme,\n radius: Number(radius),\n framework: project.projectType,\n packageManager: project.packageManager,\n font: \"system\",\n density: \"default\",\n animation: \"energetic\",\n defaultMode: \"light\",\n tailwind: {\n config: \"tailwind.config.js\",\n css: defaultCssFile,\n baseColor: \"zinc\",\n cssVariables: true,\n },\n aliases: {\n components: `@/${componentsDir.replace(/^src\\//, '')}`,\n utils: `@/${utilsFile.replace(/^src\\//, '').replace(/\\.(ts\|js)$/, '')}`,\n },\n };\n\n const configPath = path.join(project.baseDir, 'nexore.json');\n fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');\n\n console.log(`\\x1b[32m✔\\x1b[0m Generated \\x1b[1mnexore.json\\x1b[0m (Theme: ${theme}, Radius: ${radius}rem)`);\n console.log(`\\x1b[32m✔\\x1b[0m Utilities ready at \\x1b[1m${utilsFile}\\x1b[0m`);\n console.log(`\\x1b[32m✔\\x1b[0m Components directory ready at \\x1b[1m${componentsDir}\\x1b[0m`);\n\n console.log(`\\n\\x1b[32m\\x1b[1m🎉 NexoreUI initialized successfully! You can now add components:\\x1b[0m`);\n console.log(` \\x1b[36mnpx nexoreui add button card modal table --all\\x1b[0m\\n`);\n}\n","import as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { PackageManager, ProjectType } from './detect.js';\n\nexport const THEME_PALETTES: Record<string, { light: string; dark: string; rgb: string }> = {\n indigo: { light: 'hsl(250 85% 50%)', dark: 'hsl(250 85% 65%)', rgb: '99 60 220' },\n violet: { light: 'hsl(262.1 83.3% 57.8%)', dark: 'hsl(263.4 70% 50.4%)', rgb: '139 92 246' },\n emerald: { light: 'hsl(142.1 76.2% 36.3%)', dark: 'hsl(142.1 70.6% 45.3%)', rgb: '16 185 129' },\n rose: { light: 'hsl(346.8 77.2% 49.8%)', dark: 'hsl(346.8 77.2% 55%)', rgb: '244 63 94' },\n amber: { light: 'hsl(37.7 92.1% 50.2%)', dark: 'hsl(37.7 92.1% 55%)', rgb: '245 158 11' },\n cyan: { light: 'hsl(190.4 95% 39%)', dark: 'hsl(188.7 94.5% 42.7%)', rgb: '6 182 212' },\n slate: { light: 'hsl(240 5.9% 10%)', dark: 'hsl(0 0% 98%)', rgb: '244 244 245' },\n neon: { light: 'hsl(173 80% 40%)', dark: 'hsl(173 100% 50%)', rgb: '0 255 220' },\n};\n\n/*\n Automatically configures `@` path alias in vite.config or tsconfig if missing.\n /\nexport function ensurePathAlias(baseDir: string, projectType: ProjectType, hasSrcDir: boolean): boolean {\n let updated = false;\n\n // 1. Check TypeScript / JavaScript config files\n const configsToCheck = [\n path.join(baseDir, 'tsconfig.app.json'),\n path.join(baseDir, 'tsconfig.json'),\n path.join(baseDir, 'jsconfig.json'),\n ];\n\n for (const targetConfig of configsToCheck) {\n if (fs.existsSync(targetConfig)) {\n try {\n const content = fs.readFileSync(targetConfig, 'utf8');\n const parsed = JSON.parse(content);\n parsed.compilerOptions = parsed.compilerOptions \|\| {};\n parsed.compilerOptions.baseUrl = parsed.compilerOptions.baseUrl \|\| '.';\n parsed.compilerOptions.paths = parsed.compilerOptions.paths \|\| {};\n\n const aliasTarget = hasSrcDir ? ['./src/'] : ['./'];\n if (!parsed.compilerOptions.paths['@/']) {\n parsed.compilerOptions.paths['@/'] = aliasTarget;\n fs.writeFileSync(targetConfig, JSON.stringify(parsed, null, 2), 'utf8');\n updated = true;\n }\n } catch {\n // If parsing fails due to comments in json, skip to avoid breaking custom configs\n }\n }\n }\n\n // 2. Check Vite Config\n if (projectType === 'vite') {\n const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];\n for (const fileName of viteConfigFiles) {\n const vitePath = path.join(baseDir, fileName);\n if (fs.existsSync(vitePath)) {\n let viteContent = fs.readFileSync(vitePath, 'utf8');\n if (!viteContent.includes(\"alias\") && !viteContent.includes(\"'@'\")) {\n // Check if path import exists\n const hasPathImport = viteContent.includes(\"from 'path'\") \|\| viteContent.includes('from \"path\"');\n let headerAdditions = '';\n if (!hasPathImport) {\n headerAdditions += `import path from 'path'\\nimport { fileURLToPath } from 'url'\\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\\n`;\n }\n\n if (viteContent.includes('defineConfig({')) {\n viteContent = headerAdditions + viteContent.replace(\n 'defineConfig({',\n `defineConfig({\\n resolve: {\\n alias: {\\n '@': path.resolve(__dirname, './${hasSrcDir ? 'src' : '.'}'),\\n },\\n },`\n );\n fs.writeFileSync(vitePath, viteContent, 'utf8');\n updated = true;\n }\n }\n\n // Configure @tailwindcss/vite if missing\n if (!viteContent.includes('@tailwindcss/vite')) {\n let updatedVite = `import tailwindcss from '@tailwindcss/vite'\\n` + viteContent;\n if (updatedVite.includes('plugins: [')) {\n updatedVite = updatedVite.replace(/plugins:\\s\\[/, 'plugins: [tailwindcss(), ');\n fs.writeFileSync(vitePath, updatedVite, 'utf8');\n updated = true;\n }\n }\n break;\n }\n }\n }\n\n return updated;\n}\n\n/*\n Injects Tailwind CSS v4 source directive and theme variables into the main CSS file.\n /\nexport function injectThemeCss(\n baseDir: string,\n cssRelativePath: string,\n themeName: string,\n radiusValue: string \| number\n): boolean {\n const cssAbsolutePath = path.join(baseDir, cssRelativePath);\n const palette = THEME_PALETTES[themeName] \|\| THEME_PALETTES.cyan;\n const radius = typeof radiusValue === 'number' ? radiusValue : parseFloat(radiusValue) \|\| 1.0;\n\n const themeBlock = `\n@source \"../node_modules/nexoreui/dist//.{js,mjs}\";\n\n@theme {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n:root {\n --background: hsl(0 0% 100%);\n --foreground: hsl(240 10% 3.9%);\n --card: hsl(0 0% 100%);\n --card-foreground: hsl(240 10% 3.9%);\n --popover: hsl(0 0% 100%);\n --popover-foreground: hsl(240 10% 3.9%);\n --primary: ${palette.light};\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(240 4.8% 95.9%);\n --secondary-foreground: hsl(240 5.9% 10%);\n --muted: hsl(240 4.8% 95.9%);\n --muted-foreground: hsl(240 3.8% 46.1%);\n --accent: hsl(240 4.8% 95.9%);\n --accent-foreground: hsl(240 5.9% 10%);\n --destructive: hsl(0 84.2% 60.2%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 5.9% 90%);\n --input: hsl(240 5.9% 90%);\n --ring: ${palette.light};\n --radius: ${radius}rem;\n --glow-radius: 12px;\n --glow-strength: 0.15;\n --glow-color: ${palette.rgb};\n}\n\n.dark {\n --background: hsl(240 10% 3.9%);\n --foreground: hsl(0 0% 98%);\n --card: hsl(240 10% 3.9%);\n --card-foreground: hsl(0 0% 98%);\n --popover: hsl(240 10% 3.9%);\n --popover-foreground: hsl(0 0% 98%);\n --primary: ${palette.dark};\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(240 3.7% 15.9%);\n --secondary-foreground: hsl(0 0% 98%);\n --muted: hsl(240 3.7% 15.9%);\n --muted-foreground: hsl(240 5% 64.9%);\n --accent: hsl(240 3.7% 15.9%);\n --accent-foreground: hsl(0 0% 98%);\n --destructive: hsl(0 62.8% 30.6%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 3.7% 15.9%);\n --input: hsl(240 3.7% 15.9%);\n --ring: ${palette.dark};\n --radius: ${radius}rem;\n --glow-radius: 20px;\n --glow-strength: 0.35;\n --glow-color: ${palette.rgb};\n}\n`;\n\n if (fs.existsSync(cssAbsolutePath)) {\n let existingContent = fs.readFileSync(cssAbsolutePath, 'utf8');\n // Remove Vite's default conflicting #root box constraint\n existingContent = existingContent.replace(/#root\\s\\{[^}]\\}/g, '');\n if (!existingContent.includes('--color-primary') && !existingContent.includes('nexoreui/dist')) {\n let finalContent = existingContent.trim() + '\\n' + themeBlock;\n if (!finalContent.includes('@import \"tailwindcss\"') && !finalContent.includes(\"@import 'tailwindcss'\")) {\n finalContent = '@import \"tailwindcss\";\\n' + finalContent;\n }\n fs.writeFileSync(cssAbsolutePath, finalContent, 'utf8');\n return true;\n }\n } else {\n const cssDir = path.dirname(cssAbsolutePath);\n if (!fs.existsSync(cssDir)) fs.mkdirSync(cssDir, { recursive: true });\n fs.writeFileSync(cssAbsolutePath, `@import \"tailwindcss\";\\n` + themeBlock, 'utf8');\n return true;\n }\n\n return false;\n}\n\n/*\n Automatically installs core peer dependencies if missing.\n /\nexport function installPeerDependencies(\n baseDir: string,\n packageManager: PackageManager,\n dependencies: string[] = ['clsx', 'tailwind-merge', 'lucide-react', 'framer-motion']\n): boolean {\n try {\n const packageJsonPath = path.join(baseDir, 'package.json');\n let missingDeps = [...dependencies];\n\n if (fs.existsSync(packageJsonPath)) {\n const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\n const installed = { ...pkg.dependencies, ...pkg.devDependencies };\n missingDeps = dependencies.filter((dep) => !installed[dep]);\n }\n\n if (missingDeps.length === 0) return true;\n\n let installCmd = 'npm install';\n if (packageManager === 'pnpm') installCmd = 'pnpm add';\n else if (packageManager === 'yarn') installCmd = 'yarn add';\n else if (packageManager === 'bun') installCmd = 'bun add';\n\n console.log(`\\n\\x1b[33m⚡ Installing peer dependencies:\\x1b[0m ${missingDeps.join(', ')}...`);\n execSync(`${installCmd} ${missingDeps.join(' ')}`, {\n stdio: 'inherit',\n cwd: baseDir,\n });\n return true;\n } catch (err) {\n console.warn('\\x1b[33mWarning: Automatic peer dependency installation skipped.\\x1b[0m');\n return false;\n }\n}\n","import as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport { initCommand } from './init.js';\nimport { addCommand } from './add.js';\n\nexport interface CreateOptions {\n theme?: string;\n radius?: string;\n template?: 'vite' \| 'next';\n}\n\nexport async function createCommand(projectName?: string, options: CreateOptions = {}) {\n const name = projectName \|\| 'my-nexore-app';\n const targetDir = path.resolve(process.cwd(), name);\n\n console.log(`\\n\\x1b[36m\\x1b[1m🚀 Creating a new NexoreUI Project:\\x1b[0m \\x1b[32m${name}\\x1b[0m\\n`);\n\n if (fs.existsSync(targetDir) && fs.readdirSync(targetDir).length > 0) {\n console.error(`\\x1b[31mError: Target directory ${name} already exists and is not empty.\\x1b[0m`);\n return;\n }\n\n // 1. Scaffold base Vite React TypeScript template\n console.log(`\\x1b[33m⚡ Step 1/4: Scaffolding React + Vite template...\\x1b[0m`);\n try {\n execSync(`npx -y create-vite@latest ${name} --template react-ts --no-immediate --no-interactive`, { stdio: 'inherit' });\n } catch (err) {\n console.error(`\\x1b[31mFailed to scaffold Vite project.\\x1b[0m`);\n return;\n }\n\n // 2. Change directory and install dependencies\n process.chdir(targetDir);\n console.log(`\\n\\x1b[33m📦 Step 2/4: Installing NexoreUI, Tailwind CSS, and core packages...\\x1b[0m`);\n execSync(`npm install nexoreui lucide-react clsx tailwind-merge framer-motion @tailwindcss/vite tailwindcss`, {\n stdio: 'inherit',\n });\n\n // 3. Run automated NexoreUI initialization\n console.log(`\\n\\x1b[33m⚙️ Step 3/4: Configuring theme and design tokens...\\x1b[0m`);\n await initCommand({\n yes: true,\n theme: options.theme \|\| 'emerald',\n radius: options.radius \|\| '0.75',\n });\n\n // 4. Add starter UI components (Button, Card)\n console.log(`\\n\\x1b[33m🧩 Step 4/4: Adding starter UI components (button, card)...\\x1b[0m`);\n try {\n await addCommand(['button', 'card'], { yes: true });\n } catch {\n // Non-blocking fallback\n }\n\n // 5. Replace default App.tsx with interactive NexoreUI demo showcase\n const appTsxPath = path.join(targetDir, 'src', 'App.tsx');\n const starterAppCode = `import { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';\nimport { Sparkles, Terminal, Layers } from 'lucide-react';\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n return (\n <main className=\"min-h-screen bg-background text-foreground flex flex-col items-center justify-center p-6 transition-colors selection:bg-primary/20\">\n <div className=\"max-w-xl w-full space-y-8 text-center\">\n {/* Status Badge /}\n <div className=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-xs font-semibold text-primary shadow-xs\">\n <Sparkles className=\"h-3.5 w-3.5\" />\n <span>NexoreUI + Tailwind CSS v4</span>\n </div>\n\n {/ Hero Title /}\n <div className=\"space-y-3\">\n <h1 className=\"text-4xl sm:text-5xl font-extrabold tracking-tight\">\n Welcome to <span className=\"text-primary\">NexoreUI</span>\n </h1>\n <p className=\"text-muted-foreground text-sm sm:text-base max-w-md mx-auto\">\n Your project is fully configured with design tokens, glow effects, and modern animated components.\n </p>\n </div>\n\n {/ Demo Interactive Card /}\n <Card className=\"max-w-md mx-auto text-left shadow-xl border-border/80\">\n <CardHeader>\n <CardTitle className=\"text-base flex items-center gap-2\">\n <Layers className=\"h-4 w-4 text-primary\" />\n Interactive Component Demo\n </CardTitle>\n <CardDescription className=\"text-xs\">\n Click the button to test component state and styling.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between p-3 rounded-xl bg-muted/50 border border-border/60\">\n <span className=\"text-xs font-medium\">Click Counter</span>\n <span className=\"text-xs font-mono font-bold px-2.5 py-0.5 rounded-md bg-primary/15 text-primary\">\n {count} clicks\n </span>\n </div>\n <div className=\"flex items-center gap-3\">\n <Button onClick={() => setCount((c) => c + 1)} className=\"flex-1\">\n Increment Count\n </Button>\n <Button variant=\"outline\" onClick={() => setCount(0)}>\n Reset\n </Button>\n </div>\n </CardContent>\n </Card>\n\n {/ CLI Hint /}\n <div className=\"p-3.5 rounded-xl bg-muted/40 border border-border text-xs text-muted-foreground font-mono inline-flex items-center gap-2\">\n <Terminal className=\"h-4 w-4 text-primary shrink-0\" />\n <span>npx nexoreui add --all</span>\n </div>\n </div>\n </main>\n );\n}\n`;\n\n try {\n fs.writeFileSync(appTsxPath, starterAppCode, 'utf8');\n } catch {}\n\n // 6. Clean up Vite's default conflicting App.css\n const appCssPath = path.join(targetDir, 'src', 'App.css');\n if (fs.existsSync(appCssPath)) {\n try {\n fs.writeFileSync(appCssPath, '/ NexoreUI styles are loaded from src/index.css */\\n', 'utf8');\n } catch {}\n }\n\n console.log(`\\n\\x1b[32m\\x1b[1m✨ Project ${name} is ready with NexoreUI!\\x1b[0m`);\n console.log(`\\nTo get started:\\n`);\n console.log(` \\x1b[36mcd ${name}\\x1b[0m`);\n console.log(` \\x1b[36mnpm run dev\\x1b[0m\\n`);\n console.log(`To add more components to your project:\\n`);\n console.log(` \\x1b[36mnpx nexoreui add modal table tabs --all\\x1b[0m\\n`);\n}\n\n","import { addCommand } from './commands/add.js';\nimport { listCommand } from './commands/list.js';\nimport { initCommand } from './commands/init.js';\nimport { createCommand } from './commands/create.js';\n\nasync function main() {\n const args = process.argv.slice(2);\n const command = args[0];\n\n if (!command \|\| command === '-h' \|\| command === '--help') {\n printHelp();\n return;\n }\n\n if (command === 'create') {\n const projectName = args[1] && !args[1].startsWith('-') ? args[1] : undefined;\n let theme: string \| undefined;\n let radius: string \| undefined;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '--theme' && args[i + 1]) {\n theme = args[++i];\n } else if (arg.startsWith('--theme=')) {\n theme = arg.split('=')[1];\n } else if (arg === '--radius' && args[i + 1]) {\n radius = args[++i];\n } else if (arg.startsWith('--radius=')) {\n radius = arg.split('=')[1];\n }\n }\n\n await createCommand(projectName, { theme, radius });\n } else if (command === 'init') {\n let yes = false;\n let theme: string \| undefined;\n let radius: string \| undefined;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '-y' \|\| arg === '--yes') {\n yes = true;\n } else if (arg === '--theme' && args[i + 1]) {\n theme = args[++i];\n } else if (arg.startsWith('--theme=')) {\n theme = arg.split('=')[1];\n } else if (arg === '--radius' && args[i + 1]) {\n radius = args[++i];\n } else if (arg.startsWith('--radius=')) {\n radius = arg.split('=')[1];\n }\n }\n\n await initCommand({ yes, theme, radius });\n } else if (command === 'list') {\n listCommand();\n } else if (command === 'add') {\n const components: string[] = [];\n let yes = false;\n let all = false;\n\n for (let i = 1; i < args.length; i++) {\n const arg = args[i];\n if (arg === '-y' \|\| arg === '--yes') {\n yes = true;\n } else if (arg === '--all' \|\| arg === '-a') {\n all = true;\n } else if (!arg.startsWith('-')) {\n components.push(arg);\n }\n }\n\n await addCommand(components, { yes, all });\n } else {\n console.error(`\\x1b[31mUnknown command: ${command}\\x1b[0m`);\n printHelp();\n }\n}\n\nfunction printHelp() {\n console.log(`\n\\x1b[36m\\x1b[1mNexoreUI CLI\\x1b[0m\n\\x1b[90mModern, animated, production-ready React components with Tailwind CSS v4\\x1b[0m\n\nUsage:\n npx nexoreui [command] [options]\n\nCommands:\n \\x1b[32mcreate [name]\\x1b[0m Create a new fully configured NexoreUI starter project\n \\x1b[32minit\\x1b[0m Initialize NexoreUI in your project (configure theme, aliases, and CSS)\n \\x1b[32madd [components...]\\x1b[0m Add components to your project (use --all to install all 40+ components)\n \\x1b[32mlist\\x1b[0m List all available components in registry\n\nOptions:\n \\x1b[33m--theme <name>\\x1b[0m Set color palette (cyan, indigo, violet, emerald, rose, amber, slate, neon)\n \\x1b[33m--radius <val>\\x1b[0m Set border radius (0, 0.3, 0.5, 0.75, 1.0)\n \\x1b[33m--all, -a\\x1b[0m Install all available components at once\n \\x1b[33m-y, --yes\\x1b[0m Skip prompts and use defaults automatically\n \\x1b[33m-h, --help\\x1b[0m Show help information\n `);\n}\n\nmain().catch((err) => {\n console.error('\\x1b[31mAn unexpected error occurred:\\x1b[0m', err);\n process.exit(1);\n});\n"],"mappings":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgeX;;;AC1eO,IAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAimBX;;;ACrmBO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2WX;;;AC/WO,IAAM,6BAA6B;AAAA,EACxC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0YX;;;AC9YO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsYX;;;AC1YO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4qBX;;;AChrBO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8mBX;;;AClnBO,IAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiXX;;;ACrXO,IAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgcX;;;ACpcO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6qBX;;;ACjrBO,IAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6hBX;;;ACjiBO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgbX;;;ACpbO,IAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAofX;;;ACxfO,IAAM,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwdX;;;AC5dO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgfX;;;ACpfO,IAAM,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8XX;;;AClYO,IAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6aX;;;ACjbO,IAAM,6BAA6B;AAAA,EACxC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAybX;;;AC7bO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+dX;;;ACneO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0tBX;;;AC9tBO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8rBX;;;AClsBO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2mBX;;;AC/mBO,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0mBX;;;AC9mBO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6bX;;;ACjcO,IAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAudX;;;AC3dO,IAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0aX;;;AC9aO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwfX;;;AC5fO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmbX;;;ACvbO,IAAM,+BAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkfX;;;ACtfO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmiBX;;;ACviBO,IAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwfX;;;AC5fO,IAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAycX;;;AC7cO,IAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyZX;;;AC7ZO,IAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmdX;;;ACvdO,IAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsYX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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAybX;;;AC7bO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmTX;;;ACvTO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,cAAc,CAAC,iBAAiB,cAAc;AAAA,EAC9C,UAAU;AAAA,EACV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmWX;;;AC5SO,IAAM,WAAyC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gCAAgC;AAAA,EAChC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,8BAA8B;AAAA,EAC9B,qBAAqB;AAAA,EACrB,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,sBAAsB;AAAA,EACtB,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,iCAAiC;AAAA,EACjC,8BAA8B;AAAA,EAC9B,kCAAkC;AAAA,EAClC,wBAAwB;AAAA,EACxB,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,+BAA+B;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,2BAA2B;AAAA,EAC3B,4BAA4B;AAAA,EAC5B,iCAAiC;AACnC;;;ArDtGA,SAAS,YAAY,OAAgC;AACnD,QAAM,KAAc,yBAAgB;AAAA,IAClC,OAAO,QAAQ;AAAA,IACf,QAAQ,QAAQ;AAAA,EAClB,CAAC;AACD,SAAO,IAAI;AAAA,IAAQ,CAACC,aAClB,GAAG,SAAS,OAAO,CAAC,QAAQ;AAC1B,SAAG,MAAM;AACT,MAAAA,SAAQ,GAAG;AAAA,IACb,CAAC;AAAA,EACH;AACF;AAQA,eAAsB,WAAW,YAAsB,UAAsB,CAAC,GAAG;AAC/E,QAAM,kBAAkB,OAAO,KAAK,QAAQ;AAG5C,MAAI,mBAAmB,CAAC,GAAG,UAAU;AACrC,MAAI,QAAQ,OAAO,iBAAiB,SAAS,OAAO,GAAG;AACrD,uBAAmB;AACnB,YAAQ,IAAI;AAAA,4BAA0B,iBAAiB,MAAM,8CAA8C;AAAA,EAC7G;AAEA,MAAI,iBAAiB,WAAW,GAAG;AACjC,YAAQ,MAAM,sEAAsE;AACpF,YAAQ,IAAI,oDAAoD;AAChE;AAAA,EACF;AAGA,QAAM,UAAU,cAAc,QAAQ,IAAI,CAAC;AAC3C,UAAQ,IAAI;AAAA,wCAA2C,QAAQ,YAAY,YAAY,CAAC,EAAE;AAC1F,UAAQ,IAAI,4CAA4C,QAAQ,cAAc;AAAA,CAAI;AAGlF,MAAI;AACJ,MAAI;AACJ,MAAI;AACF,UAAM,aAAkB,WAAK,QAAQ,SAAS,aAAa;AAC3D,QAAO,eAAW,UAAU,GAAG;AAC7B,YAAM,MAAM,KAAK,MAAS,iBAAa,YAAY,MAAM,CAAC;AAC1D,UAAI,IAAI,SAAS,YAAY;AAC3B,8BAAsB,IAAI,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,YAAY,SAAS,EAAE;AAAA,MAC9F;AACA,UAAI,IAAI,SAAS,OAAO;AACtB,cAAM,WAAW,IAAI,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,YAAY,SAAS,EAAE;AAClF,0BAAkB,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,KAAK,IAAI,WAAW,GAAG,QAAQ;AAAA,MACjG;AAAA,IACF;AAAA,EACF,QAAQ;AAAA,EAER;AAGA,QAAM,sBAAsB,oBAAI,IAAY;AAC5C,QAAM,oBAA8B,CAAC;AAErC,QAAM,QAAQ,CAAC,GAAG,iBAAiB,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC;AAC/D,SAAO,MAAM,SAAS,GAAG;AACvB,UAAM,WAAW,MAAM,MAAM;AAC7B,UAAM,eAAe,SAAS,QAAQ;AACtC,QAAI,CAAC,cAAc;AACjB,wBAAkB,KAAK,QAAQ;AAC/B;AAAA,IACF;AAEA,QAAI,CAAC,oBAAoB,IAAI,QAAQ,GAAG;AACtC,0BAAoB,IAAI,QAAQ;AAChC,UAAI,aAAa,wBAAwB;AACvC,mBAAW,OAAO,aAAa,wBAAwB;AACrD,gBAAM,KAAK,GAAG;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,MAAI,kBAAkB,SAAS,GAAG;AAChC,YAAQ,MAAM,sDAAsD,kBAAkB,KAAK,IAAI,CAAC,SAAS;AACzG,YAAQ,IAAI,uEAAuE;AACnF;AAAA,EACF;AAGA,QAAM,uBAAuB,wBAAwB,QAAQ,YAAY,sBAAsB;AAC/F,QAAM,mBAAmB,oBAAoB,QAAQ,YAAY,qBAAqB;AAEtF,MAAI,qBAAqB;AACzB,MAAI,iBAAiB;AAErB,MAAI,CAAC,QAAQ,OAAO,CAAC,qBAAqB;AACxC,UAAM,aAAa,MAAM,YAAY,6DAA6D,oBAAoB,KAAK;AAC3H,yBAAqB,WAAW,KAAK,KAAK;AAE1C,UAAM,cAAc,MAAM,YAAY,oEAAoE,gBAAgB,KAAK;AAC/H,qBAAiB,YAAY,KAAK,KAAK;AAAA,EACzC;AAEA,QAAM,wBAA6B,cAAQ,QAAQ,SAAS,kBAAkB;AAC9E,QAAM,oBAAyB,cAAQ,QAAQ,SAAS,cAAc;AAEtE,UAAQ,IAAI,4CAA4C,qBAAqB,EAAE;AAC/E,UAAQ,IAAI,wCAAwC,iBAAiB;AAAA,CAAI;AAEzE,YAAU,qBAAqB;AAG/B,QAAM,cAAc,aAAa,iBAAiB;AAClD,MAAI,aAAa;AACf,YAAQ,IAAI,gEAA2D,cAAc,EAAE;AAAA,EACzF;AAGA,QAAM,kBAAkB,oBAAI,IAAY;AACxC,kBAAgB,IAAI,MAAM;AAC1B,kBAAgB,IAAI,gBAAgB;AACpC,kBAAgB,IAAI,cAAc;AAClC,kBAAgB,IAAI,eAAe;AAEnC,aAAW,YAAY,qBAAqB;AAC1C,UAAM,eAAe,SAAS,QAAQ;AACtC,UAAM,aAAkB,WAAK,uBAAuB,aAAa,QAAQ;AAEzE,sBAAkB,aAAa,SAAS,YAAY,iBAAiB;AACrE,YAAQ,IAAI,0CAAqC,QAAQ,OAAY,WAAK,oBAAoB,aAAa,QAAQ,CAAC,EAAE;AAEtH,iBAAa,aAAa,QAAQ,CAAC,QAAQ,gBAAgB,IAAI,GAAG,CAAC;AAAA,EACrE;AAGA,QAAM,YAAY,MAAM,KAAK,eAAe;AAC5C,MAAI,gBAAgB,CAAC,GAAG,SAAS;AACjC,MAAI;AACF,UAAM,kBAAuB,WAAK,QAAQ,SAAS,cAAc;AACjE,QAAO,eAAW,eAAe,GAAG;AAClC,YAAM,cAAc,KAAK,MAAS,iBAAa,iBAAiB,MAAM,CAAC;AACvE,YAAM,eAAe,EAAE,GAAG,YAAY,cAAc,GAAG,YAAY,gBAAgB;AACnF,sBAAgB,UAAU,OAAO,CAAC,QAAQ,CAAC,aAAa,GAAG,CAAC;AAAA,IAC9D;AAAA,EACF,QAAQ;AAAA,EAER;AAEA,MAAI,cAAc,SAAS,GAAG;AAC5B,YAAQ,IAAI;AAAA,mDAAsD,cAAc,KAAK,IAAI,CAAC,KAAK;AAC/F,QAAI,aAAa;AACjB,QAAI,QAAQ,mBAAmB,OAAQ,cAAa;AAAA,aAC3C,QAAQ,mBAAmB,OAAQ,cAAa;AAAA,aAChD,QAAQ,mBAAmB,MAAO,cAAa;AAExD,QAAI;AACF,yCAAS,GAAG,UAAU,IAAI,cAAc,KAAK,GAAG,CAAC,IAAI;AAAA,QACnD,OAAO;AAAA,QACP,KAAK,QAAQ;AAAA,MACf,CAAC;AACD,cAAQ,IAAI,4DAAuD;AAAA,IACrE,QAAQ;AACN,cAAQ,MAAM,0EAA0E;AACxF,cAAQ,IAAI,KAAK,UAAU,IAAI,cAAc,KAAK,GAAG,CAAC,EAAE;AAAA,IAC1D;AAAA,EACF;AAEA,UAAQ,IAAI;AAAA,iCAA6B,oBAAoB,IAAI;AAAA,CAA+C;AAClH;;;AsD9KO,SAAS,cAAc;AAC5B,UAAQ,IAAI,iEAAiE;AAE7E,SAAO,KAAK,QAAQ,EAAE,QAAQ,CAAC,SAAS;AACtC,UAAM,OAAO,SAAS,IAAI;AAC1B,YAAQ,IAAI,oBAAoB,IAAI,YAAY,KAAK,QAAQ,GAAG;AAChE,QAAI,KAAK,aAAa,SAAS,GAAG;AAChC,cAAQ,IAAI,2BAA2B,KAAK,aAAa,KAAK,IAAI,CAAC,SAAS;AAAA,IAC9E;AACA,QAAI,KAAK,0BAA0B,KAAK,uBAAuB,SAAS,GAAG;AACzE,cAAQ,IAAI,iCAAiC,KAAK,uBAAuB,KAAK,IAAI,CAAC,SAAS;AAAA,IAC9F;AACA,YAAQ,IAAI,EAAE;AAAA,EAChB,CAAC;AACH;;;AChBA,IAAAC,MAAoB;AACpB,IAAAC,QAAsB;AACtB,IAAAC,YAA0B;;;ACF1B,IAAAC,MAAoB;AACpB,IAAAC,QAAsB;AACtB,IAAAC,wBAAyB;AAGlB,IAAM,iBAA+E;AAAA,EAC1F,QAAQ,EAAE,OAAO,oBAAoB,MAAM,oBAAoB,KAAK,YAAY;AAAA,EAChF,QAAQ,EAAE,OAAO,0BAA0B,MAAM,wBAAwB,KAAK,aAAa;AAAA,EAC3F,SAAS,EAAE,OAAO,0BAA0B,MAAM,0BAA0B,KAAK,aAAa;AAAA,EAC9F,MAAM,EAAE,OAAO,0BAA0B,MAAM,wBAAwB,KAAK,YAAY;AAAA,EACxF,OAAO,EAAE,OAAO,yBAAyB,MAAM,uBAAuB,KAAK,aAAa;AAAA,EACxF,MAAM,EAAE,OAAO,sBAAsB,MAAM,0BAA0B,KAAK,YAAY;AAAA,EACtF,OAAO,EAAE,OAAO,qBAAqB,MAAM,iBAAiB,KAAK,cAAc;AAAA,EAC/E,MAAM,EAAE,OAAO,oBAAoB,MAAM,qBAAqB,KAAK,YAAY;AACjF;AAKO,SAAS,gBAAgB,SAAiB,aAA0B,WAA6B;AACtG,MAAI,UAAU;AAGd,QAAM,iBAAiB;AAAA,IAChB,WAAK,SAAS,mBAAmB;AAAA,IACjC,WAAK,SAAS,eAAe;AAAA,IAC7B,WAAK,SAAS,eAAe;AAAA,EACpC;AAEA,aAAW,gBAAgB,gBAAgB;AACzC,QAAO,eAAW,YAAY,GAAG;AAC/B,UAAI;AACF,cAAM,UAAa,iBAAa,cAAc,MAAM;AACpD,cAAM,SAAS,KAAK,MAAM,OAAO;AACjC,eAAO,kBAAkB,OAAO,mBAAmB,CAAC;AACpD,eAAO,gBAAgB,UAAU,OAAO,gBAAgB,WAAW;AACnE,eAAO,gBAAgB,QAAQ,OAAO,gBAAgB,SAAS,CAAC;AAEhE,cAAM,cAAc,YAAY,CAAC,SAAS,IAAI,CAAC,KAAK;AACpD,YAAI,CAAC,OAAO,gBAAgB,MAAM,KAAK,GAAG;AACxC,iBAAO,gBAAgB,MAAM,KAAK,IAAI;AACtC,UAAG,kBAAc,cAAc,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,MAAM;AACtE,oBAAU;AAAA,QACZ;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF;AAGA,MAAI,gBAAgB,QAAQ;AAC1B,UAAM,kBAAkB,CAAC,kBAAkB,kBAAkB,iBAAiB;AAC9E,eAAW,YAAY,iBAAiB;AACtC,YAAM,WAAgB,WAAK,SAAS,QAAQ;AAC5C,UAAO,eAAW,QAAQ,GAAG;AAC3B,YAAI,cAAiB,iBAAa,UAAU,MAAM;AAClD,YAAI,CAAC,YAAY,SAAS,OAAO,KAAK,CAAC,YAAY,SAAS,KAAK,GAAG;AAElE,gBAAM,gBAAgB,YAAY,SAAS,aAAa,KAAK,YAAY,SAAS,aAAa;AAC/F,cAAI,kBAAkB;AACtB,cAAI,CAAC,eAAe;AAClB,+BAAmB;AAAA;AAAA;AAAA;AAAA,UACrB;AAEA,cAAI,YAAY,SAAS,gBAAgB,GAAG;AAC1C,0BAAc,kBAAkB,YAAY;AAAA,cAC1C;AAAA,cACA;AAAA;AAAA;AAAA,wCAAqF,YAAY,QAAQ,GAAG;AAAA;AAAA;AAAA,YAC9G;AACA,YAAG,kBAAc,UAAU,aAAa,MAAM;AAC9C,sBAAU;AAAA,UACZ;AAAA,QACF;AAGA,YAAI,CAAC,YAAY,SAAS,mBAAmB,GAAG;AAC9C,cAAI,cAAc;AAAA,IAAkD;AACpE,cAAI,YAAY,SAAS,YAAY,GAAG;AACtC,0BAAc,YAAY,QAAQ,iBAAiB,2BAA2B;AAC9E,YAAG,kBAAc,UAAU,aAAa,MAAM;AAC9C,sBAAU;AAAA,UACZ;AAAA,QACF;AACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,SAAS,eACd,SACA,iBACA,WACA,aACS;AACT,QAAM,kBAAuB,WAAK,SAAS,eAAe;AAC1D,QAAM,UAAU,eAAe,SAAS,KAAK,eAAe;AAC5D,QAAM,SAAS,OAAO,gBAAgB,WAAW,cAAc,WAAW,WAAW,KAAK;AAE1F,QAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAoCN,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAYhB,QAAQ,KAAK;AAAA,cACX,MAAM;AAAA;AAAA;AAAA,kBAGF,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUd,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAYf,QAAQ,IAAI;AAAA,cACV,MAAM;AAAA;AAAA;AAAA,kBAGF,QAAQ,GAAG;AAAA;AAAA;AAI3B,MAAO,eAAW,eAAe,GAAG;AAClC,QAAI,kBAAqB,iBAAa,iBAAiB,MAAM;AAE7D,sBAAkB,gBAAgB,QAAQ,sBAAsB,EAAE;AAClE,QAAI,CAAC,gBAAgB,SAAS,iBAAiB,KAAK,CAAC,gBAAgB,SAAS,eAAe,GAAG;AAC9F,UAAI,eAAe,gBAAgB,KAAK,IAAI,OAAO;AACnD,UAAI,CAAC,aAAa,SAAS,uBAAuB,KAAK,CAAC,aAAa,SAAS,uBAAuB,GAAG;AACtG,uBAAe,6BAA6B;AAAA,MAC9C;AACA,MAAG,kBAAc,iBAAiB,cAAc,MAAM;AACtD,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,UAAM,SAAc,cAAQ,eAAe;AAC3C,QAAI,CAAI,eAAW,MAAM,EAAG,CAAG,cAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;AACpE,IAAG,kBAAc,iBAAiB;AAAA,IAA6B,YAAY,MAAM;AACjF,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAKO,SAAS,wBACd,SACA,gBACA,eAAyB,CAAC,QAAQ,kBAAkB,gBAAgB,eAAe,GAC1E;AACT,MAAI;AACF,UAAM,kBAAuB,WAAK,SAAS,cAAc;AACzD,QAAI,cAAc,CAAC,GAAG,YAAY;AAElC,QAAO,eAAW,eAAe,GAAG;AAClC,YAAM,MAAM,KAAK,MAAS,iBAAa,iBAAiB,MAAM,CAAC;AAC/D,YAAM,YAAY,EAAE,GAAG,IAAI,cAAc,GAAG,IAAI,gBAAgB;AAChE,oBAAc,aAAa,OAAO,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC;AAAA,IAC5D;AAEA,QAAI,YAAY,WAAW,EAAG,QAAO;AAErC,QAAI,aAAa;AACjB,QAAI,mBAAmB,OAAQ,cAAa;AAAA,aACnC,mBAAmB,OAAQ,cAAa;AAAA,aACxC,mBAAmB,MAAO,cAAa;AAEhD,YAAQ,IAAI;AAAA,sDAAoD,YAAY,KAAK,IAAI,CAAC,KAAK;AAC3F,wCAAS,GAAG,UAAU,IAAI,YAAY,KAAK,GAAG,CAAC,IAAI;AAAA,MACjD,OAAO;AAAA,MACP,KAAK;AAAA,IACP,CAAC;AACD,WAAO;AAAA,EACT,SAAS,KAAK;AACZ,YAAQ,KAAK,yEAAyE;AACtF,WAAO;AAAA,EACT;AACF;;;AD7OA,SAASC,aAAY,OAAgC;AACnD,QAAM,KAAc,0BAAgB;AAAA,IAClC,OAAO,QAAQ;AAAA,IACf,QAAQ,QAAQ;AAAA,EAClB,CAAC;AACD,SAAO,IAAI;AAAA,IAAQ,CAACC,aAClB,GAAG,SAAS,OAAO,CAAC,QAAQ;AAC1B,SAAG,MAAM;AACT,MAAAA,SAAQ,GAAG;AAAA,IACb,CAAC;AAAA,EACH;AACF;AASA,eAAsB,YAAY,UAAuB,CAAC,GAAG;AAC3D,UAAQ,IAAI;AAAA;AAAA,CAAyE;AAErF,QAAM,UAAU,cAAc,QAAQ,IAAI,CAAC;AAC3C,UAAQ,IAAI,2CAAsC,QAAQ,YAAY,YAAY,CAAC,KAAK,QAAQ,cAAc,GAAG;AAEjH,MAAI,QAAQ,QAAQ,SAAS;AAC7B,MAAI,SAAS,QAAQ,UAAU;AAC/B,QAAM,uBAAuB,QAAQ,YAAY,sBAAsB;AACvE,QAAM,mBAAmB,QAAQ,YAAY,qBAAqB;AAClE,QAAM,iBAAiB,QAAQ,gBAAgB,SAC1C,QAAQ,YAAY,wBAAwB,oBAC5C,QAAQ,YAAY,kBAAkB;AAE3C,MAAI,gBAAgB;AACpB,MAAI,YAAY;AAEhB,MAAI,CAAC,QAAQ,KAAK;AAChB,QAAI,CAAC,QAAQ,OAAO;AAClB,YAAM,WAAW,MAAMD,aAAY,sHAAsH;AACzJ,UAAI,SAAS,KAAK,KAAK,eAAe,SAAS,KAAK,EAAE,YAAY,CAAC,GAAG;AACpE,gBAAQ,SAAS,KAAK,EAAE,YAAY;AAAA,MACtC;AAAA,IACF;AAEA,QAAI,CAAC,QAAQ,QAAQ;AACnB,YAAM,YAAY,MAAMA,aAAY,qFAAqF;AACzH,UAAI,UAAU,KAAK,GAAG;AACpB,iBAAS,UAAU,KAAK;AAAA,MAC1B;AAAA,IACF;AAEA,UAAM,UAAU,MAAMA,aAAY,oDAAoD,oBAAoB,KAAK;AAC/G,QAAI,QAAQ,KAAK,EAAG,iBAAgB,QAAQ,KAAK;AAEjD,UAAM,WAAW,MAAMA,aAAY,mEAAmE,gBAAgB,KAAK;AAC3H,QAAI,SAAS,KAAK,EAAG,aAAY,SAAS,KAAK;AAAA,EACjD;AAEA,QAAM,wBAA6B,cAAQ,QAAQ,SAAS,aAAa;AACzE,QAAM,oBAAyB,cAAQ,QAAQ,SAAS,SAAS;AAGjE,YAAU,qBAAqB;AAC/B,eAAa,iBAAiB;AAG9B,QAAM,iBAAiB,gBAAgB,QAAQ,SAAS,QAAQ,aAAa,QAAQ,SAAS;AAC9F,MAAI,gBAAgB;AAClB,YAAQ,IAAI,mFAA8E;AAAA,EAC5F;AAGA,QAAM,eAAe,eAAe,QAAQ,SAAS,gBAAgB,OAAO,MAAM;AAClF,MAAI,cAAc;AAChB,YAAQ,IAAI,4EAAuE,cAAc,SAAS;AAAA,EAC5G;AAGA,0BAAwB,QAAQ,SAAS,QAAQ,cAAc;AAG/D,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA,QAAQ,OAAO,MAAM;AAAA,IACrB,WAAW,QAAQ;AAAA,IACnB,gBAAgB,QAAQ;AAAA,IACxB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,aAAa;AAAA,IACb,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,WAAW;AAAA,MACX,cAAc;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,MACP,YAAY,KAAK,cAAc,QAAQ,UAAU,EAAE,CAAC;AAAA,MACpD,OAAO,KAAK,UAAU,QAAQ,UAAU,EAAE,EAAE,QAAQ,cAAc,EAAE,CAAC;AAAA,IACvE;AAAA,EACF;AAEA,QAAM,aAAkB,WAAK,QAAQ,SAAS,aAAa;AAC3D,EAAG,kBAAc,YAAY,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,MAAM;AAEpE,UAAQ,IAAI,qEAAgE,KAAK,aAAa,MAAM,MAAM;AAC1G,UAAQ,IAAI,mDAA8C,SAAS,SAAS;AAC5E,UAAQ,IAAI,8DAAyD,aAAa,SAAS;AAE3F,UAAQ,IAAI;AAAA,+FAA2F;AACvG,UAAQ,IAAI;AAAA,CAAmE;AACjF;;;AEzHA,IAAAE,MAAoB;AACpB,IAAAC,QAAsB;AACtB,IAAAC,wBAAyB;AAUzB,eAAsB,cAAc,aAAsB,UAAyB,CAAC,GAAG;AACrF,QAAM,OAAO,eAAe;AAC5B,QAAM,YAAiB,cAAQ,QAAQ,IAAI,GAAG,IAAI;AAElD,UAAQ,IAAI;AAAA,2EAAuE,IAAI;AAAA,CAAW;AAElG,MAAO,eAAW,SAAS,KAAQ,gBAAY,SAAS,EAAE,SAAS,GAAG;AACpE,YAAQ,MAAM,mCAAmC,IAAI,0CAA0C;AAC/F;AAAA,EACF;AAGA,UAAQ,IAAI,sEAAiE;AAC7E,MAAI;AACF,wCAAS,6BAA6B,IAAI,wDAAwD,EAAE,OAAO,UAAU,CAAC;AAAA,EACxH,SAAS,KAAK;AACZ,YAAQ,MAAM,iDAAiD;AAC/D;AAAA,EACF;AAGA,UAAQ,MAAM,SAAS;AACvB,UAAQ,IAAI;AAAA,2FAAuF;AACnG,sCAAS,qGAAqG;AAAA,IAC5G,OAAO;AAAA,EACT,CAAC;AAGD,UAAQ,IAAI;AAAA,8EAAuE;AACnF,QAAM,YAAY;AAAA,IAChB,KAAK;AAAA,IACL,OAAO,QAAQ,SAAS;AAAA,IACxB,QAAQ,QAAQ,UAAU;AAAA,EAC5B,CAAC;AAGD,UAAQ,IAAI;AAAA,kFAA8E;AAC1F,MAAI;AACF,UAAM,WAAW,CAAC,UAAU,MAAM,GAAG,EAAE,KAAK,KAAK,CAAC;AAAA,EACpD,QAAQ;AAAA,EAER;AAGA,QAAM,aAAkB,WAAK,WAAW,OAAO,SAAS;AACxD,QAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmEvB,MAAI;AACF,IAAG,kBAAc,YAAY,gBAAgB,MAAM;AAAA,EACrD,QAAQ;AAAA,EAAC;AAGT,QAAM,aAAkB,WAAK,WAAW,OAAO,SAAS;AACxD,MAAO,eAAW,UAAU,GAAG;AAC7B,QAAI;AACF,MAAG,kBAAc,YAAY,yDAAyD,MAAM;AAAA,IAC9F,QAAQ;AAAA,IAAC;AAAA,EACX;AAEA,UAAQ,IAAI;AAAA,gCAA8B,IAAI,iCAAiC;AAC/E,UAAQ,IAAI;AAAA;AAAA,CAAqB;AACjC,UAAQ,IAAI,gBAAgB,IAAI,SAAS;AACzC,UAAQ,IAAI;AAAA,CAAgC;AAC5C,UAAQ,IAAI;AAAA,CAA2C;AACvD,UAAQ,IAAI;AAAA,CAA4D;AAC1E;;;ACzIA,eAAe,OAAO;AACpB,QAAM,OAAO,QAAQ,KAAK,MAAM,CAAC;AACjC,QAAM,UAAU,KAAK,CAAC;AAEtB,MAAI,CAAC,WAAW,YAAY,QAAQ,YAAY,UAAU;AACxD,cAAU;AACV;AAAA,EACF;AAEA,MAAI,YAAY,UAAU;AACxB,UAAM,cAAc,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,KAAK,CAAC,IAAI;AACpE,QAAI;AACJ,QAAI;AAEJ,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,YAAM,MAAM,KAAK,CAAC;AAClB,UAAI,QAAQ,aAAa,KAAK,IAAI,CAAC,GAAG;AACpC,gBAAQ,KAAK,EAAE,CAAC;AAAA,MAClB,WAAW,IAAI,WAAW,UAAU,GAAG;AACrC,gBAAQ,IAAI,MAAM,GAAG,EAAE,CAAC;AAAA,MAC1B,WAAW,QAAQ,cAAc,KAAK,IAAI,CAAC,GAAG;AAC5C,iBAAS,KAAK,EAAE,CAAC;AAAA,MACnB,WAAW,IAAI,WAAW,WAAW,GAAG;AACtC,iBAAS,IAAI,MAAM,GAAG,EAAE,CAAC;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,cAAc,aAAa,EAAE,OAAO,OAAO,CAAC;AAAA,EACpD,WAAW,YAAY,QAAQ;AAC7B,QAAI,MAAM;AACV,QAAI;AACJ,QAAI;AAEJ,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,YAAM,MAAM,KAAK,CAAC;AAClB,UAAI,QAAQ,QAAQ,QAAQ,SAAS;AACnC,cAAM;AAAA,MACR,WAAW,QAAQ,aAAa,KAAK,IAAI,CAAC,GAAG;AAC3C,gBAAQ,KAAK,EAAE,CAAC;AAAA,MAClB,WAAW,IAAI,WAAW,UAAU,GAAG;AACrC,gBAAQ,IAAI,MAAM,GAAG,EAAE,CAAC;AAAA,MAC1B,WAAW,QAAQ,cAAc,KAAK,IAAI,CAAC,GAAG;AAC5C,iBAAS,KAAK,EAAE,CAAC;AAAA,MACnB,WAAW,IAAI,WAAW,WAAW,GAAG;AACtC,iBAAS,IAAI,MAAM,GAAG,EAAE,CAAC;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,YAAY,EAAE,KAAK,OAAO,OAAO,CAAC;AAAA,EAC1C,WAAW,YAAY,QAAQ;AAC7B,gBAAY;AAAA,EACd,WAAW,YAAY,OAAO;AAC5B,UAAM,aAAuB,CAAC;AAC9B,QAAI,MAAM;AACV,QAAI,MAAM;AAEV,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,YAAM,MAAM,KAAK,CAAC;AAClB,UAAI,QAAQ,QAAQ,QAAQ,SAAS;AACnC,cAAM;AAAA,MACR,WAAW,QAAQ,WAAW,QAAQ,MAAM;AAC1C,cAAM;AAAA,MACR,WAAW,CAAC,IAAI,WAAW,GAAG,GAAG;AAC/B,mBAAW,KAAK,GAAG;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,WAAW,YAAY,EAAE,KAAK,IAAI,CAAC;AAAA,EAC3C,OAAO;AACL,YAAQ,MAAM,4BAA4B,OAAO,SAAS;AAC1D,cAAU;AAAA,EACZ;AACF;AAEA,SAAS,YAAY;AACnB,UAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBX;AACH;AAEA,KAAK,EAAE,MAAM,CAAC,QAAQ;AACpB,UAAQ,MAAM,gDAAgD,GAAG;AACjE,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":["fs","path","fs","path","resolve","fs","path","readline","fs","path","import_child_process","askQuestion","resolve","fs","path","import_child_process"]}