export declare const homeRouteTemplate = "import { useState, useEffect } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Zap, Shield, Code, ArrowRight, Activity, Bot, Key } from \"lucide-react\";\nimport { VannaButton } from \"../components/VannaButton\";\nimport { VannaCard } from \"../components/VannaCard\";\n\ninterface HealthStatus {\n  status: string;\n  env: string;\n  timestamp: string;\n}\n\nconst features = [\n  {\n    icon: Bot,\n    title: \"Built-in MCP Server\",\n    description: \"AI-ready API with Model Context Protocol. Connect Claude or any MCP client instantly.\",\n  },\n  {\n    icon: Key,\n    title: \"Bring Your Own Auth\",\n    description: \"Plug in any auth system - JWTs, API keys, sessions. You control authentication.\",\n  },\n  {\n    icon: Zap,\n    title: \"Lightning Fast\",\n    description: \"Built on Bun for incredible performance and instant hot reloading.\",\n  },\n  {\n    icon: Shield,\n    title: \"Type Safe\",\n    description: \"Full TypeScript support with Zod schema validation.\",\n  },\n  {\n    icon: Code,\n    title: \"Modern Stack\",\n    description: \"React 19, React Router 7, and Tailwind CSS 4.\",\n  },\n];\n\nexport function Home() {\n  const [health, setHealth] = useState<HealthStatus | null>(null);\n\n  useEffect(() => {\n    fetch(\"/health\")\n      .then(res => res.json())\n      .then(setHealth)\n      .catch(console.error);\n  }, []);\n\n  return (\n    <div className=\"space-y-12\">\n      {/* Hero Section */}\n      <div className=\"text-center py-12\">\n        <h1 className=\"text-5xl font-bold font-serif text-navy\">\n          Welcome to <span className=\"text-teal\">Ontology</span>\n        </h1>\n        <p className=\"mt-4 text-xl text-navy/70 max-w-2xl mx-auto\">\n          Your full-stack Bun + React application is ready. Start building something amazing.\n        </p>\n        <div className=\"mt-8 flex gap-4 justify-center\">\n          <Link to=\"/dashboard\">\n            <VannaButton variant=\"primary\" size=\"lg\">\n              View Dashboard\n              <ArrowRight className=\"ml-2 w-5 h-5\" />\n            </VannaButton>\n          </Link>\n          <a href=\"/api\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <VannaButton variant=\"outline\" size=\"lg\">\n              Explore API\n            </VannaButton>\n          </a>\n        </div>\n      </div>\n\n      {/* Features Grid */}\n      <div className=\"grid md:grid-cols-3 gap-6\">\n        {features.map(({ icon: Icon, title, description }) => (\n          <VannaCard key={title} hover>\n            <div className=\"p-3 bg-teal/10 rounded-lg w-fit text-teal\">\n              <Icon className=\"w-6 h-6\" />\n            </div>\n            <h3 className=\"mt-4 text-lg font-semibold font-serif text-navy\">{title}</h3>\n            <p className=\"mt-2 text-navy/60\">{description}</p>\n          </VannaCard>\n        ))}\n      </div>\n\n      {/* API Status */}\n      <VannaCard>\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 bg-teal/10 rounded-lg text-teal\">\n            <Activity className=\"w-5 h-5\" />\n          </div>\n          <h2 className=\"text-lg font-semibold font-serif text-navy\">API Status</h2>\n        </div>\n        {health ? (\n          <div className=\"grid sm:grid-cols-3 gap-4 text-sm\">\n            <div>\n              <span className=\"text-navy/50\">Status</span>\n              <p className=\"font-medium text-teal\">{health.status}</p>\n            </div>\n            <div>\n              <span className=\"text-navy/50\">Environment</span>\n              <p className=\"font-medium text-navy\">{health.env}</p>\n            </div>\n            <div>\n              <span className=\"text-navy/50\">Timestamp</span>\n              <p className=\"font-medium text-navy font-mono text-xs\">{health.timestamp}</p>\n            </div>\n          </div>\n        ) : (\n          <p className=\"text-navy/50\">Loading...</p>\n        )}\n      </VannaCard>\n    </div>\n  );\n}\n";
export declare const dashboardRouteTemplate = "import { useState, useEffect } from \"react\";\nimport { Activity, Users, Zap, Clock, BarChart3, Bot, Loader2 } from \"lucide-react\";\nimport {\n  AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid,\n  Tooltip, ResponsiveContainer, Legend\n} from \"recharts\";\nimport { StatsCard } from \"../components/StatsCard\";\nimport { VannaCard } from \"../components/VannaCard\";\nimport { VannaButton } from \"../components/VannaButton\";\n\ninterface SalesDataPoint {\n  month: string;\n  sales: number;\n  orders: number;\n}\n\nexport function Dashboard() {\n  const [salesData, setSalesData] = useState<SalesDataPoint[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    fetch(\"/api/getSalesData\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({}),\n    })\n      .then((res) => res.json())\n      .then((data) => {\n        setSalesData(data);\n        setLoading(false);\n      })\n      .catch((err) => {\n        setError(err.message);\n        setLoading(false);\n      });\n  }, []);\n\n  // Calculate stats from sales data\n  const totalSales = salesData.reduce((sum, d) => sum + d.sales, 0);\n  const totalOrders = salesData.reduce((sum, d) => sum + d.orders, 0);\n  const avgSales = salesData.length > 0 ? Math.round(totalSales / salesData.length) : 0;\n\n  return (\n    <div className=\"space-y-8\">\n      <div>\n        <h1 className=\"text-3xl font-bold font-serif text-navy\">Dashboard</h1>\n        <p className=\"mt-2 text-navy/60\">Sales data fetched from your Ontology API.</p>\n      </div>\n\n      {/* Stats Grid */}\n      <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n        <StatsCard\n          title=\"Total Sales\"\n          value={loading ? \"...\" : `$${totalSales.toLocaleString()}`}\n          change={12.5}\n          icon={<Activity className=\"w-5 h-5\" />}\n        />\n        <StatsCard\n          title=\"Total Orders\"\n          value={loading ? \"...\" : totalOrders.toLocaleString()}\n          change={8.2}\n          icon={<Users className=\"w-5 h-5\" />}\n        />\n        <StatsCard\n          title=\"Avg Monthly Sales\"\n          value={loading ? \"...\" : `$${avgSales.toLocaleString()}`}\n          change={-5.1}\n          icon={<Zap className=\"w-5 h-5\" />}\n        />\n        <StatsCard\n          title=\"Months\"\n          value={loading ? \"...\" : salesData.length.toString()}\n          icon={<Clock className=\"w-5 h-5\" />}\n        />\n      </div>\n\n      {/* Sales Trend Chart */}\n      <VannaCard>\n        <h2 className=\"text-lg font-semibold font-serif text-navy mb-6\">Sales Trend</h2>\n        <div className=\"h-72\">\n          {loading ? (\n            <div className=\"h-full flex items-center justify-center text-navy/40\">\n              <Loader2 className=\"w-6 h-6 animate-spin mr-2\" />\n              Loading data...\n            </div>\n          ) : error ? (\n            <div className=\"h-full flex items-center justify-center text-orange\">\n              Error: {error}\n            </div>\n          ) : (\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart data={salesData}>\n                <defs>\n                  <linearGradient id=\"colorSales\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#15a8a8\" stopOpacity={0.3} />\n                    <stop offset=\"95%\" stopColor=\"#15a8a8\" stopOpacity={0} />\n                  </linearGradient>\n                </defs>\n                <CartesianGrid strokeDasharray=\"3 3\" stroke=\"#023d6020\" />\n                <XAxis dataKey=\"month\" stroke=\"#023d6060\" fontSize={12} />\n                <YAxis stroke=\"#023d6060\" fontSize={12} />\n                <Tooltip\n                  contentStyle={{\n                    backgroundColor: \"white\",\n                    border: \"none\",\n                    borderRadius: \"8px\",\n                    boxShadow: \"0 4px 14px 0 rgba(21, 168, 168, 0.15)\",\n                  }}\n                />\n                <Area\n                  type=\"monotone\"\n                  dataKey=\"sales\"\n                  stroke=\"#15a8a8\"\n                  strokeWidth={2}\n                  fill=\"url(#colorSales)\"\n                  name=\"Sales ($)\"\n                />\n              </AreaChart>\n            </ResponsiveContainer>\n          )}\n        </div>\n      </VannaCard>\n\n      {/* Multi-Series Bar Chart */}\n      <VannaCard>\n        <div className=\"flex items-center gap-3 mb-6\">\n          <div className=\"p-2 bg-teal/10 rounded-lg text-teal\">\n            <BarChart3 className=\"w-5 h-5\" />\n          </div>\n          <h2 className=\"text-lg font-semibold font-serif text-navy\">Sales vs Orders</h2>\n        </div>\n        <div className=\"h-72\">\n          {loading ? (\n            <div className=\"h-full flex items-center justify-center text-navy/40\">\n              <Loader2 className=\"w-6 h-6 animate-spin mr-2\" />\n              Loading data...\n            </div>\n          ) : (\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <BarChart data={salesData}>\n                <CartesianGrid strokeDasharray=\"3 3\" stroke=\"#023d6020\" />\n                <XAxis dataKey=\"month\" stroke=\"#023d6060\" fontSize={12} />\n                <YAxis yAxisId=\"left\" stroke=\"#023d6060\" fontSize={12} />\n                <YAxis yAxisId=\"right\" orientation=\"right\" stroke=\"#023d6060\" fontSize={12} />\n                <Tooltip\n                  contentStyle={{\n                    backgroundColor: \"white\",\n                    border: \"none\",\n                    borderRadius: \"8px\",\n                    boxShadow: \"0 4px 14px 0 rgba(21, 168, 168, 0.15)\",\n                  }}\n                />\n                <Legend />\n                <Bar yAxisId=\"left\" dataKey=\"sales\" fill=\"#15a8a8\" name=\"Sales ($)\" radius={[4, 4, 0, 0]} />\n                <Bar yAxisId=\"right\" dataKey=\"orders\" fill=\"#fe5d26\" name=\"Orders\" radius={[4, 4, 0, 0]} />\n              </BarChart>\n            </ResponsiveContainer>\n          )}\n        </div>\n      </VannaCard>\n\n      {/* MCP Apps Feature Card */}\n      <VannaCard>\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 bg-magenta/10 rounded-lg text-magenta\">\n            <Bot className=\"w-5 h-5\" />\n          </div>\n          <h2 className=\"text-lg font-semibold font-serif text-navy\">MCP Apps Visualization</h2>\n        </div>\n        <p className=\"text-navy/60 mb-4\">\n          The <code className=\"bg-navy/5 px-1.5 py-0.5 rounded text-sm\">getSalesData</code> function has\n          <code className=\"bg-navy/5 px-1.5 py-0.5 rounded text-sm ml-1\">ui</code> enabled. When called via MCP,\n          results are automatically displayed in an interactive chart.\n        </p>\n        <div className=\"bg-navy/5 rounded-lg p-4 font-mono text-sm\">\n          <p className=\"text-navy/50 mb-2\"># In ontology.config.ts:</p>\n          <p className=\"text-navy\">getSalesData: {\"{\"}</p>\n          <p className=\"text-navy pl-4\">// ... other config</p>\n          <p className=\"text-teal pl-4\">ui: {\"{\"} type: 'chart', chartType: 'bar', xAxis: 'month' {\"}\"}</p>\n          <p className=\"text-navy\">{\"}\"}</p>\n        </div>\n        <p className=\"mt-4 text-sm text-navy/50\">\n          Try it in Claude Desktop or any MCP client by calling <code className=\"bg-navy/5 px-1.5 py-0.5 rounded\">getSalesData</code>.\n        </p>\n      </VannaCard>\n\n      {/* Button Gallery */}\n      <VannaCard>\n        <h2 className=\"text-lg font-semibold font-serif text-navy mb-6\">Component Gallery</h2>\n        <div className=\"space-y-6\">\n          <div>\n            <p className=\"text-sm text-navy/50 mb-3\">Button Variants</p>\n            <div className=\"flex flex-wrap gap-3\">\n              <VannaButton variant=\"primary\">Primary</VannaButton>\n              <VannaButton variant=\"secondary\">Secondary</VannaButton>\n              <VannaButton variant=\"outline\">Outline</VannaButton>\n              <VannaButton variant=\"ghost\">Ghost</VannaButton>\n            </div>\n          </div>\n          <div>\n            <p className=\"text-sm text-navy/50 mb-3\">Button Sizes</p>\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <VannaButton size=\"sm\">Small</VannaButton>\n              <VannaButton size=\"md\">Medium</VannaButton>\n              <VannaButton size=\"lg\">Large</VannaButton>\n            </div>\n          </div>\n        </div>\n      </VannaCard>\n    </div>\n  );\n}\n";
export declare const aboutRouteTemplate = "import { VannaCard } from \"../components/VannaCard\";\nimport { Bot, Key, ExternalLink } from \"lucide-react\";\n\nconst stack = [\n  { name: \"Runtime\", value: \"Bun\" },\n  { name: \"Frontend\", value: \"React 19 + React Router 7\" },\n  { name: \"Styling\", value: \"Tailwind CSS 4\" },\n  { name: \"API\", value: \"Ontology (ont-run)\" },\n  { name: \"Icons\", value: \"Lucide React\" },\n  { name: \"Charts\", value: \"Recharts\" },\n];\n\nconst designTokens = [\n  { name: \"Navy\", value: \"#023d60\", className: \"bg-navy\" },\n  { name: \"Cream\", value: \"#e7e1cf\", className: \"bg-cream border border-navy/20\" },\n  { name: \"Teal\", value: \"#15a8a8\", className: \"bg-teal\" },\n  { name: \"Orange\", value: \"#fe5d26\", className: \"bg-orange\" },\n  { name: \"Magenta\", value: \"#bf1363\", className: \"bg-magenta\" },\n];\n\nexport function About() {\n  return (\n    <div className=\"space-y-8\">\n      <div>\n        <h1 className=\"text-3xl font-bold font-serif text-navy\">About</h1>\n        <p className=\"mt-2 text-navy/60\">\n          Learn about the stack and design system powering this application.\n        </p>\n      </div>\n\n      {/* Stack */}\n      <VannaCard>\n        <h2 className=\"text-lg font-semibold font-serif text-navy mb-4\">Tech Stack</h2>\n        <div className=\"grid sm:grid-cols-2 gap-4\">\n          {stack.map(({ name, value }) => (\n            <div key={name} className=\"flex justify-between py-2 border-b border-navy/10 last:border-0\">\n              <span className=\"text-navy/60\">{name}</span>\n              <span className=\"font-medium text-navy\">{value}</span>\n            </div>\n          ))}\n        </div>\n      </VannaCard>\n\n      {/* MCP Server */}\n      <VannaCard>\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 bg-teal/10 rounded-lg text-teal\">\n            <Bot className=\"w-5 h-5\" />\n          </div>\n          <h2 className=\"text-lg font-semibold font-serif text-navy\">Built-in MCP Server</h2>\n        </div>\n        <p className=\"text-navy/60 mb-4\">\n          Your API is automatically exposed as a Model Context Protocol (MCP) server.\n          Connect AI assistants like Claude Desktop directly to your API functions.\n        </p>\n        <div className=\"bg-navy/5 rounded-lg p-4 font-mono text-sm\">\n          <p className=\"text-navy/50 mb-2\"># Add to Claude Desktop config:</p>\n          <p className=\"text-navy\">\"my-api\": {\"{\"}</p>\n          <p className=\"text-navy pl-4\">\"command\": \"bunx\",</p>\n          <p className=\"text-navy pl-4\">\"args\": [\"ont-run\", \"mcp\"]</p>\n          <p className=\"text-navy\">{\"}\"}</p>\n        </div>\n        <a\n          href=\"https://modelcontextprotocol.io\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex items-center gap-1 mt-4 text-teal hover:underline text-sm\"\n        >\n          Learn more about MCP <ExternalLink className=\"w-3 h-3\" />\n        </a>\n      </VannaCard>\n\n      {/* Authentication */}\n      <VannaCard>\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 bg-orange/10 rounded-lg text-orange\">\n            <Key className=\"w-5 h-5\" />\n          </div>\n          <h2 className=\"text-lg font-semibold font-serif text-navy\">Bring Your Own Auth</h2>\n        </div>\n        <p className=\"text-navy/60 mb-4\">\n          Ontology doesn't impose an auth system. Customize the <code className=\"bg-navy/5 px-1.5 py-0.5 rounded text-sm\">auth</code> function\n          in <code className=\"bg-navy/5 px-1.5 py-0.5 rounded text-sm\">ontology.config.ts</code> to integrate any authentication method.\n        </p>\n        <div className=\"grid sm:grid-cols-3 gap-4 text-sm\">\n          <div className=\"bg-navy/5 rounded-lg p-3\">\n            <p className=\"font-medium text-navy\">JWTs</p>\n            <p className=\"text-navy/50\">Verify tokens from Auth0, Clerk, etc.</p>\n          </div>\n          <div className=\"bg-navy/5 rounded-lg p-3\">\n            <p className=\"font-medium text-navy\">API Keys</p>\n            <p className=\"text-navy/50\">Simple key-based access control</p>\n          </div>\n          <div className=\"bg-navy/5 rounded-lg p-3\">\n            <p className=\"font-medium text-navy\">Sessions</p>\n            <p className=\"text-navy/50\">Cookie-based session auth</p>\n          </div>\n        </div>\n      </VannaCard>\n\n      {/* Design Tokens */}\n      <VannaCard>\n        <h2 className=\"text-lg font-semibold font-serif text-navy mb-4\">Vanna Design System</h2>\n        <p className=\"text-navy/60 mb-6\">\n          A cohesive color palette designed for clarity and visual harmony.\n        </p>\n        <div className=\"grid sm:grid-cols-5 gap-4\">\n          {designTokens.map(({ name, value, className }) => (\n            <div key={name} className=\"text-center\">\n              <div className={`w-full h-20 rounded-lg ${className}`} />\n              <p className=\"mt-2 font-medium text-navy\">{name}</p>\n              <p className=\"text-sm text-navy/50 font-mono\">{value}</p>\n            </div>\n          ))}\n        </div>\n      </VannaCard>\n\n      {/* Typography */}\n      <VannaCard>\n        <h2 className=\"text-lg font-semibold font-serif text-navy mb-4\">Typography</h2>\n        <div className=\"space-y-4\">\n          <div>\n            <p className=\"text-sm text-navy/50 mb-1\">Serif (Headlines)</p>\n            <p className=\"text-2xl font-serif text-navy\">Roboto Slab - The quick brown fox</p>\n          </div>\n          <div>\n            <p className=\"text-sm text-navy/50 mb-1\">Sans (Body)</p>\n            <p className=\"text-lg font-sans text-navy\">Space Grotesk - The quick brown fox</p>\n          </div>\n          <div>\n            <p className=\"text-sm text-navy/50 mb-1\">Mono (Code)</p>\n            <p className=\"text-lg font-mono text-navy\">Space Mono - The quick brown fox</p>\n          </div>\n        </div>\n      </VannaCard>\n    </div>\n  );\n}\n";