import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { H as s, C as r, a as i, T as o, aC as n, c } from "../index-sdOMz8GW.js";
import { MessageSquare as l, PlusCircle as m, FileInput as d, Layout as p, Bug as u, ArrowRightLeft as g, Palette as h, Accessibility as f, Gauge as w } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const v = [
  {
    name: "create-component",
    description: "Guided workflow to create a new component using tucu-ui primitives. Asks for name, category, props, and variants.",
    icon: /* @__PURE__ */ e(m, { className: "w-5 h-5" }),
    color: "blue"
  },
  {
    name: "create-form",
    description: "Interactive form builder. Collects field definitions, validation rules, and layout — outputs a complete Form with Zod schema.",
    icon: /* @__PURE__ */ e(d, { className: "w-5 h-5" }),
    color: "emerald"
  },
  {
    name: "create-page",
    description: "Page scaffolding wizard. Asks for layout type, sections, navigation needs — generates a routed page with layout integration.",
    icon: /* @__PURE__ */ e(p, { className: "w-5 h-5" }),
    color: "violet"
  },
  {
    name: "debug-variant",
    description: "Diagnose variant errors. Given a component and the variant causing issues, explains valid options and provides corrected usage.",
    icon: /* @__PURE__ */ e(u, { className: "w-5 h-5" }),
    color: "red"
  },
  {
    name: "migrate-component",
    description: "Migrate from external libraries (Material UI, Chakra, Ant Design) to tucu-ui equivalents. Maps props and patterns automatically.",
    icon: /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
    color: "amber"
  },
  {
    name: "theme-setup",
    description: "Configure theming from scratch. Sets up color preset, dark/light mode, token overrides, and the Zustand theme store.",
    icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
    color: "pink"
  },
  {
    name: "accessibility-check",
    description: "Audit a component or page for WCAG 2.2 AA compliance. Reports contrast issues, missing ARIA, keyboard traps, and focus gaps.",
    icon: /* @__PURE__ */ e(f, { className: "w-5 h-5" }),
    color: "cyan"
  },
  {
    name: "performance-review",
    description: "Review component usage for performance issues: unnecessary re-renders, missing memoization, bundle size impact.",
    icon: /* @__PURE__ */ e(w, { className: "w-5 h-5" }),
    color: "orange"
  }
], C = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
  /* @__PURE__ */ e(
    s,
    {
      title: "Prompts",
      description: "8 pre-built prompt templates that guide the agent through complex multi-step workflows.",
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
    }
  ),
  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { title: "What are Prompts?", children: /* @__PURE__ */ e(o, { className: "text-sm text-foreground/70", children: "MCP Prompts are pre-defined conversation templates that guide the agent through a multi-step workflow. Unlike tools (single-shot execution), prompts structure an interactive dialogue — asking clarifying questions, making decisions, and producing comprehensive output." }) }) }),
  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Available Prompts" }),
      /* @__PURE__ */ e(
        o,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Each prompt guides the agent through a structured multi-step workflow"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: v.map((t) => /* @__PURE__ */ e(
      n,
      {
        icon: t.icon,
        title: t.name,
        description: t.description,
        color: t.color
      },
      t.name
    )) })
  ] }),
  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ a(i, { title: "Usage Example", children: [
    /* @__PURE__ */ e(o, { className: "text-sm text-foreground/70 mb-3", children: "Prompts are invoked by name. The agent then follows the template's guided flow:" }),
    /* @__PURE__ */ e(
      c,
      {
        code: `// In your AI assistant, invoke a prompt:
"Use the create-form prompt to build a registration form"

// The agent will:
// 1. Ask: What fields do you need?
// 2. Ask: What validation rules?
// 3. Ask: Any conditional logic?
// 4. Generate: Complete form with Zod + react-hook-form
// 5. Output: Ready-to-paste TSX code

// Another example:
"Run debug-variant for Button with variant='primary'"

// The agent will:
// 1. Identify: "primary" is not a valid Button variant
// 2. Explain: Valid variants are "solid" | "ghost" | "transparent"
// 3. Suggest: Use "solid" for primary button appearance
// 4. Provide: Corrected code snippet`
      }
    )
  ] }) })
] });
export {
  C as default
};
