import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { H as h, T as n, aC as u, C as g, a as x, K as i, c as r } from "../index-sdOMz8GW.js";
import { Wrench as y, List as o, Search as s, Code as c, FileInput as l, Layout as m, BarChart3 as d, Sparkles as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const f = [
  {
    name: "list_components",
    description: "List available components, optionally filtered by category. Returns name, category, and short description for each.",
    icon: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-blue-500" }),
    input: `{
  "category?": "string",  // e.g. "form", "layout", "feedback"
  "limit?": "number"      // max results (default: all)
}`,
    example: `// Agent request
{ "category": "form", "limit": 5 }

// Response includes:
// InputText, InputNumber, Select, Checkbox, RadioGroup`
  },
  {
    name: "get_component",
    description: "Get full details for a specific component: all props with types, valid variants, default values, and a complete usage example.",
    icon: /* @__PURE__ */ e(s, { className: "w-5 h-5 text-emerald-500" }),
    input: `{
  "name": "string"  // Component name, e.g. "Button"
}`,
    example: `// Agent request
{ "name": "Button" }

// Response includes:
// - variant: "solid" | "ghost" | "transparent"
// - size: "large" | "medium" | "small" | "mini" | "tiny"
// - Full TypeScript interface
// - Ready-to-use example code`
  },
  {
    name: "generate_component",
    description: "Generate ready-to-use JSX code for a component with specified props, optional wrapper, and theme integration.",
    icon: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-violet-500" }),
    input: `{
  "component": "string",           // e.g. "Button"
  "props?": "Record<string,string>", // e.g. { variant: "solid", size: "large" }
  "withWrapper?": "boolean",       // wrap in layout container
  "theme?": "string"               // color preset name
}`,
    example: `// Agent request
{ "component": "Alert", "props": { "variant": "success", "title": "Done!" } }

// Generated output:
<Alert variant="success" title="Done!">
  Operation completed successfully.
</Alert>`
  },
  {
    name: "generate_form",
    description: "Generate a complete form with Zod validation schema and react-hook-form integration. Supports predefined patterns or custom field definitions.",
    icon: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-amber-500" }),
    input: `{
  "pattern?": "string",      // "login" | "register" | "contact" | "settings"
  "fields?": "FieldDef[]",   // custom fields array
  "withValidation?": "boolean" // include Zod schema (default: true)
}

// FieldDef = { name, type, label, required?, validation? }`,
    example: `// Agent request
{ "pattern": "contact", "withValidation": true }

// Generates: ContactForm with name, email, subject, message
// Includes: Zod schema, Form wrapper, Submit handler`
  },
  {
    name: "generate_page",
    description: "Generate a full page component with layout, navigation integration, and optional sections.",
    icon: /* @__PURE__ */ e(m, { className: "w-5 h-5 text-pink-500" }),
    input: `{
  "name": "string",         // page name, e.g. "Dashboard"
  "layout": "string",       // "sidebar" | "top-nav" | "full-width"
  "sections?": "string[]"   // e.g. ["stats", "chart", "table"]
}`,
    example: `// Agent request
{ "name": "Dashboard", "layout": "sidebar", "sections": ["stats", "chart"] }

// Generates: DashboardPage with MainLayout, StatsGrid, Chart sections`
  },
  {
    name: "generate_chart",
    description: "Generate a Recharts chart component with tucu-ui theming integration and responsive container.",
    icon: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-cyan-500" }),
    input: `{
  "type": "string",     // "line" | "bar" | "area" | "pie" | "radar"
  "data?": "object[]"   // sample data array
}`,
    example: `// Agent request
{ "type": "bar", "data": [{ name: "Jan", value: 400 }, { name: "Feb", value: 300 }] }

// Generates: BarChart with ResponsiveContainer, theme colors, tooltips`
  },
  {
    name: "search_icons",
    description: "Search the Lucide icon catalog by keyword. Returns matching icon names that can be used with LucideIcons component.",
    icon: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-orange-500" }),
    input: `{
  "query": "string",    // search term, e.g. "arrow"
  "limit?": "number"    // max results (default: 20)
}`,
    example: `// Agent request
{ "query": "chart", "limit": 5 }

// Response:
// BarChart3, LineChart, PieChart, AreaChart, TrendingUp`
  }
], b = [
  {
    icon: /* @__PURE__ */ e(o, { className: "w-5 h-5" }),
    title: "list_components",
    description: "List available components filtered by category",
    color: "blue"
  },
  {
    icon: /* @__PURE__ */ e(s, { className: "w-5 h-5" }),
    title: "get_component",
    description: "Get full details, props, and usage example",
    color: "emerald"
  },
  {
    icon: /* @__PURE__ */ e(c, { className: "w-5 h-5" }),
    title: "generate_component",
    description: "Generate ready-to-use JSX with specified props",
    color: "violet"
  },
  {
    icon: /* @__PURE__ */ e(l, { className: "w-5 h-5" }),
    title: "generate_form",
    description: "Complete form with Zod validation and RHF",
    color: "amber"
  },
  {
    icon: /* @__PURE__ */ e(m, { className: "w-5 h-5" }),
    title: "generate_page",
    description: "Full page with layout and navigation",
    color: "pink"
  },
  {
    icon: /* @__PURE__ */ e(d, { className: "w-5 h-5" }),
    title: "generate_chart",
    description: "Recharts chart with theming integration",
    color: "cyan"
  },
  {
    icon: /* @__PURE__ */ e(p, { className: "w-5 h-5" }),
    title: "search_icons",
    description: "Search Lucide icon catalog by keyword",
    color: "orange"
  }
], A = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
  /* @__PURE__ */ e(
    h,
    {
      title: "Tools",
      description: "7 executable tools that agents can call to generate code, inspect components, and search the library.",
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(y, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
    }
  ),
  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Available Tools" }),
      /* @__PURE__ */ e(
        n,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Each tool can be called by any MCP-compatible AI agent"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: b.map((t) => /* @__PURE__ */ e(
      u,
      {
        icon: t.icon,
        title: t.title,
        description: t.description,
        color: t.color
      },
      t.title
    )) })
  ] }),
  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Tool Details" }),
      /* @__PURE__ */ e(
        n,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Input schemas and usage examples for each tool"
        }
      )
    ] }),
    f.map((t) => /* @__PURE__ */ e(g, { children: /* @__PURE__ */ a(x, { title: t.name, children: [
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
        t.icon,
        /* @__PURE__ */ e(n, { className: "text-sm text-foreground/70", children: t.description })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e(i, { variant: "outline", className: "mb-2", children: "Input Schema" }),
          /* @__PURE__ */ e(r, { code: t.input })
        ] }),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e(i, { variant: "outline", className: "mb-2", children: "Example" }),
          /* @__PURE__ */ e(r, { code: t.example })
        ] })
      ] })
    ] }) }, t.name))
  ] })
] });
export {
  A as default
};
