export declare const layoutTemplate = "import { Link, Outlet, useLocation } from \"react-router-dom\";\nimport { Home, LayoutDashboard, Info } from \"lucide-react\";\n\nconst navItems = [\n  { to: \"/\", label: \"Home\", icon: Home },\n  { to: \"/dashboard\", label: \"Dashboard\", icon: LayoutDashboard },\n  { to: \"/about\", label: \"About\", icon: Info },\n];\n\nexport function Layout() {\n  const location = useLocation();\n\n  return (\n    <div className=\"min-h-screen bg-cream\">\n      <nav className=\"glass sticky top-0 z-50 border-b border-navy/10\">\n        <div className=\"max-w-5xl mx-auto px-4 py-3\">\n          <div className=\"flex items-center justify-between\">\n            <Link to=\"/\" className=\"text-xl font-bold font-serif text-navy\">\n              My App\n            </Link>\n            <div className=\"flex gap-1\">\n              {navItems.map(({ to, label, icon: Icon }) => {\n                const isActive = location.pathname === to;\n                return (\n                  <Link\n                    key={to}\n                    to={to}\n                    className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${\n                      isActive\n                        ? \"bg-teal text-white\"\n                        : \"text-navy/70 hover:text-navy hover:bg-navy/5\"\n                    }`}\n                  >\n                    <Icon className=\"w-4 h-4\" />\n                    {label}\n                  </Link>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </nav>\n      <main className=\"max-w-5xl mx-auto px-4 py-8\">\n        <Outlet />\n      </main>\n    </div>\n  );\n}\n";
export declare const vannaButtonTemplate = "import type { ReactNode, ButtonHTMLAttributes } from \"react\";\n\ntype Variant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\";\ntype Size = \"sm\" | \"md\" | \"lg\";\n\ninterface VannaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: Variant;\n  size?: Size;\n  children: ReactNode;\n}\n\nconst variantStyles: Record<Variant, string> = {\n  primary: \"bg-teal text-white hover:bg-teal/90 shadow-vanna\",\n  secondary: \"bg-orange text-white hover:bg-orange/90\",\n  outline: \"border-2 border-teal text-teal hover:bg-teal/10\",\n  ghost: \"text-navy hover:bg-navy/10\",\n};\n\nconst sizeStyles: Record<Size, string> = {\n  sm: \"px-3 py-1.5 text-sm\",\n  md: \"px-4 py-2 text-sm\",\n  lg: \"px-6 py-3 text-base\",\n};\n\nexport function VannaButton({\n  variant = \"primary\",\n  size = \"md\",\n  children,\n  className = \"\",\n  ...props\n}: VannaButtonProps) {\n  return (\n    <button\n      className={`inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-teal/50 disabled:opacity-50 disabled:cursor-not-allowed ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n";
export declare const vannaCardTemplate = "import type { ReactNode } from \"react\";\n\ninterface VannaCardProps {\n  children: ReactNode;\n  className?: string;\n  hover?: boolean;\n}\n\nexport function VannaCard({ children, className = \"\", hover = false }: VannaCardProps) {\n  return (\n    <div\n      className={`bg-white rounded-xl p-6 shadow-vanna ${\n        hover ? \"transition-shadow hover:shadow-vanna-lg\" : \"\"\n      } ${className}`}\n    >\n      {children}\n    </div>\n  );\n}\n";
export declare const statsCardTemplate = "import type { ReactNode } from \"react\";\nimport { TrendingUp, TrendingDown } from \"lucide-react\";\n\ninterface StatsCardProps {\n  title: string;\n  value: string;\n  change?: number;\n  icon?: ReactNode;\n}\n\nexport function StatsCard({ title, value, change, icon }: StatsCardProps) {\n  const isPositive = change !== undefined && change >= 0;\n\n  return (\n    <div className=\"bg-white rounded-xl p-6 shadow-vanna\">\n      <div className=\"flex items-start justify-between\">\n        <div>\n          <p className=\"text-sm text-navy/60 font-medium\">{title}</p>\n          <p className=\"mt-2 text-3xl font-bold font-serif text-navy\">{value}</p>\n          {change !== undefined && (\n            <div className={`flex items-center gap-1 mt-2 text-sm font-medium ${isPositive ? \"text-teal\" : \"text-magenta\"}`}>\n              {isPositive ? <TrendingUp className=\"w-4 h-4\" /> : <TrendingDown className=\"w-4 h-4\" />}\n              <span>{isPositive ? \"+\" : \"\"}{change}%</span>\n            </div>\n          )}\n        </div>\n        {icon && (\n          <div className=\"p-3 bg-teal/10 rounded-lg text-teal\">\n            {icon}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n";