@fluencypassdevs/cycle 0.5.1 → 0.6.1

package/README.md

@@ -26,7 +26,24 @@ import { Button, Badge, CycleIcon } from "@fluencypassdevs/cycle"
 npx cycle init
 ```
 
-Adiciona as regras do Cycle Design System ao seu CLAUDE.md, .cursorrules e outros spec-kits automaticamente. Preserva regras existentes.
+Esse comando:
+- Adiciona regras do Cycle ao seu `CLAUDE.md`, `.cursorrules` e outros spec-kits (preserva regras existentes)
+- Cria `.mcp.json` para Claude Code — habilita 6 tools do Cycle (buscar componentes, tokens, regras)
+
+### MCP Server (Claude Code)
+
+O `init` configura automaticamente o MCP server. O Claude Code passa a ter acesso a:
+
+| Tool | Funcao |
+|------|--------|
+| `cycle_search_component` | Busca componentes por nome/keyword |
+| `cycle_get_component` | Detalhes completos (props, exemplos) |
+| `cycle_get_icon_usage` | Regras de uso de icones |
+| `cycle_get_setup` | Instrucoes de setup |
+| `cycle_get_tokens` | Tokens semanticos disponiveis |
+| `cycle_get_rules` | Regras obrigatorias para IA |
+
+Isso garante que a IA **consulte** os componentes existentes antes de gerar codigo, em vez de depender apenas de instrucoes estaticas.
 
 ## Documentacao
 

package/bin/cli.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+/**
+ * Cycle Design System — CLI Router
+ *
+ * Routes subcommands:
+ *   npx cycle init  → configure AI rules + MCP
+ *   npx cycle mcp   → start MCP server (stdio)
+ */
+
+const command = process.argv[2]
+
+if (command === "mcp") {
+  await import("./mcp.mjs")
+} else if (command === "init" || !command) {
+  await import("./init.mjs")
+} else {
+  console.log("")
+  console.log("  Cycle Design System CLI")
+  console.log("  ───────────────────────")
+  console.log("")
+  console.log("  Commands:")
+  console.log("    npx cycle init   Configure AI rules + MCP server")
+  console.log("    npx cycle mcp    Start MCP server (stdio)")
+  console.log("")
+  process.exit(1)
+}

package/bin/init.mjs

@@ -88,8 +88,43 @@ if (fs.existsSync(agentsMd)) {
   mergeIntoFile(agentsMd, "AGENTS.md")
 }
 
+// 6. .mcp.json (Claude Code MCP Server)
+const mcpConfigPath = path.join(cwd, ".mcp.json")
+const mcpConfig = {
+  mcpServers: {
+    "cycle-design-system": {
+      type: "stdio",
+      command: "npx",
+      args: ["cycle", "mcp"],
+    },
+  },
+}
+
+if (!fs.existsSync(mcpConfigPath)) {
+  fs.writeFileSync(mcpConfigPath, JSON.stringify(mcpConfig, null, 2) + "\n")
+  console.log("  ✓ .mcp.json criado (MCP server do Cycle para Claude Code)")
+} else {
+  try {
+    const existing = JSON.parse(fs.readFileSync(mcpConfigPath, "utf-8"))
+    if (!existing.mcpServers?.["cycle-design-system"]) {
+      existing.mcpServers = existing.mcpServers || {}
+      existing.mcpServers["cycle-design-system"] = mcpConfig.mcpServers["cycle-design-system"]
+      fs.writeFileSync(mcpConfigPath, JSON.stringify(existing, null, 2) + "\n")
+      console.log("  ✓ .mcp.json atualizado (MCP server do Cycle adicionado)")
+    } else {
+      existing.mcpServers["cycle-design-system"] = mcpConfig.mcpServers["cycle-design-system"]
+      fs.writeFileSync(mcpConfigPath, JSON.stringify(existing, null, 2) + "\n")
+      console.log("  ✓ .mcp.json atualizado (MCP server do Cycle atualizado)")
+    }
+  } catch {
+    console.log("  ⚠ .mcp.json existe mas nao e JSON valido — MCP nao configurado")
+  }
+}
+
 console.log("")
 console.log("  Pronto! As regras do Cycle Design System foram configuradas.")
+console.log("  MCP server configurado — Claude Code vai consultar os componentes automaticamente.")
+console.log("")
 console.log("  Para atualizar apos upgrade do pacote, rode novamente:")
-console.log("  npx @fluencypassdevs/cycle init")
+console.log("  npx cycle init")
 console.log("")

package/bin/mcp.mjs

@@ -0,0 +1,933 @@
+#!/usr/bin/env node
+
+/**
+ * Cycle Design System — MCP Server
+ *
+ * Model Context Protocol server that exposes the Cycle Design System
+ * component library to AI assistants. Zero external dependencies.
+ *
+ * Usage (Claude Code .mcp.json):
+ *   { "mcpServers": { "cycle-design-system": { "type": "stdio", "command": "npx", "args": ["cycle", "mcp"] } } }
+ */
+
+import { createInterface } from "readline"
+
+// ─── Component Registry ────────────────────────────────────────────────────────
+
+const COMPONENTS = [
+  {
+    name: "Button",
+    import: `import { Button } from "@fluencypassdevs/cycle"`,
+    description: "Botao com 6 variants (default, destructive, outline, secondary, ghost, link), 8 sizes (xs, sm, default, lg, icon-xs, icon-sm, icon-default, icon-lg). Suporte a temas via .theme-*.",
+    props: [
+      { name: "variant", type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"', default: '"default"' },
+      { name: "size", type: '"xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon-default" | "icon-lg"', default: '"default"' },
+      { name: "asChild", type: "boolean", default: "false" },
+    ],
+    example: `<Button variant="default" size="sm">Salvar</Button>
+<Button variant="outline" size="lg">Cancelar</Button>
+<Button variant="ghost" size="icon-sm"><CycleIcon icon={X} size="sm" decorative /></Button>`,
+    keywords: ["botao", "button", "cta", "acao", "submit", "click"],
+  },
+  {
+    name: "Input",
+    import: `import { Input } from "@fluencypassdevs/cycle"`,
+    description: "Campo de entrada com 2 variantes (outline, filled), 3 sizes (sm, default, lg). Estados: default, focused, disabled, error (aria-invalid). Suporte a temas via .theme-*.",
+    props: [
+      { name: "variant", type: '"outline" | "filled"', default: '"outline"' },
+      { name: "inputSize", type: '"sm" | "default" | "lg"', default: '"default"' },
+    ],
+    example: `<Input placeholder="Email" />
+<Input variant="filled" inputSize="lg" />
+<Input aria-invalid="true" />`,
+    keywords: ["input", "campo", "texto", "form", "formulario", "email", "senha"],
+  },
+  {
+    name: "Textarea",
+    import: `import { Textarea } from "@fluencypassdevs/cycle"`,
+    description: "Campo multi-linha. 2 variantes (outline, filled), 3 sizes (sm=60px, default=80px, lg=120px). Mesmos tokens do Input. Resize-y.",
+    props: [
+      { name: "variant", type: '"outline" | "filled"', default: '"outline"' },
+      { name: "textareaSize", type: '"sm" | "default" | "lg"', default: '"default"' },
+    ],
+    example: `<Textarea placeholder="Escreva aqui..." />
+<Textarea variant="filled" textareaSize="lg" />`,
+    keywords: ["textarea", "texto", "multi-linha", "comentario", "mensagem", "descricao"],
+  },
+  {
+    name: "Label",
+    import: `import { Label } from "@fluencypassdevs/cycle"`,
+    description: "Rotulo acessivel para campos de formulario. Baseado no Radix UI Label.",
+    props: [
+      { name: "htmlFor", type: "string", default: "-" },
+    ],
+    example: `<Label htmlFor="email">Email</Label>
+<Input id="email" />`,
+    keywords: ["label", "rotulo", "formulario", "campo", "acessibilidade"],
+  },
+  {
+    name: "Badge",
+    import: `import { Badge } from "@fluencypassdevs/cycle"`,
+    description: "Badge com 10 variants (default, secondary, destructive, outline, ghost, link, muted, success, progress, progress-completed), 3 sizes (sm, default, lg). Suporte a temas via .theme-*.",
+    props: [
+      { name: "variant", type: '"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "muted" | "success" | "progress" | "progress-completed"', default: '"default"' },
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+    ],
+    example: `<Badge>Novo</Badge>
+<Badge variant="success" size="sm">Completo</Badge>
+<Badge variant="progress">Em progresso</Badge>`,
+    keywords: ["badge", "tag", "etiqueta", "status", "label", "chip"],
+  },
+  {
+    name: "Accordion",
+    import: `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@fluencypassdevs/cycle"`,
+    description: "Secoes colapsaveis com animacao. Suporta single e multiple.",
+    props: [
+      { name: "type", type: '"single" | "multiple"', default: '"single"' },
+      { name: "collapsible", type: "boolean", default: "false" },
+    ],
+    example: `<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Secao 1</AccordionTrigger>
+    <AccordionContent>Conteudo aqui</AccordionContent>
+  </AccordionItem>
+</Accordion>`,
+    keywords: ["accordion", "colapsavel", "expandir", "secao", "faq", "pergunta"],
+  },
+  {
+    name: "Tabs",
+    import: `import { Tabs, TabsList, TabsTrigger, TabsContent } from "@fluencypassdevs/cycle"`,
+    description: "Componente de abas com 2 variants (default, line), orientacao horizontal e vertical.",
+    props: [
+      { name: "variant", type: '"default" | "line"', default: '"default"' },
+      { name: "orientation", type: '"horizontal" | "vertical"', default: '"horizontal"' },
+    ],
+    example: `<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">Aba 1</TabsTrigger>
+    <TabsTrigger value="tab2">Aba 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Conteudo 1</TabsContent>
+  <TabsContent value="tab2">Conteudo 2</TabsContent>
+</Tabs>`,
+    keywords: ["tabs", "abas", "navegacao", "tab", "painel"],
+  },
+  {
+    name: "Sheet",
+    import: `import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@fluencypassdevs/cycle"`,
+    description: "Painel deslizante (overlay lateral ou bottom). Sides: top, right, bottom, left.",
+    props: [
+      { name: "side", type: '"top" | "right" | "bottom" | "left"', default: '"right"' },
+    ],
+    example: `<Sheet>
+  <SheetTrigger asChild><Button>Abrir</Button></SheetTrigger>
+  <SheetContent side="right">
+    <SheetHeader><SheetTitle>Titulo</SheetTitle></SheetHeader>
+    Conteudo
+  </SheetContent>
+</Sheet>`,
+    keywords: ["sheet", "drawer", "painel", "lateral", "overlay", "menu", "sidebar"],
+  },
+  {
+    name: "ScrollArea",
+    import: `import { ScrollArea, ScrollBar } from "@fluencypassdevs/cycle"`,
+    description: "Area de scroll customizada com scrollbar estilizado. Vertical e horizontal.",
+    props: [],
+    example: `<ScrollArea className="h-72 w-48">
+  <div>Conteudo longo...</div>
+</ScrollArea>`,
+    keywords: ["scroll", "scrollbar", "rolagem", "area"],
+  },
+  {
+    name: "Checkbox",
+    import: `import { Checkbox } from "@fluencypassdevs/cycle"`,
+    description: "Checkbox com 3 sizes (sm, default, lg), 2 variants (default, circular). Prop theme aplica cor no estado checked.",
+    props: [
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+      { name: "variant", type: '"default" | "circular"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<Checkbox />
+<Checkbox size="lg" variant="circular" />`,
+    keywords: ["checkbox", "check", "marcar", "selecionar", "formulario", "toggle"],
+  },
+  {
+    name: "RadioGroup",
+    import: `import { RadioGroup, RadioGroupItem } from "@fluencypassdevs/cycle"`,
+    description: "Radio button com 3 sizes (sm, default, lg). Prop theme aplica cor no estado checked.",
+    props: [
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<RadioGroup defaultValue="a">
+  <RadioGroupItem value="a" id="a" />
+  <Label htmlFor="a">Opcao A</Label>
+  <RadioGroupItem value="b" id="b" />
+  <Label htmlFor="b">Opcao B</Label>
+</RadioGroup>`,
+    keywords: ["radio", "opcao", "selecionar", "formulario", "escolher"],
+  },
+  {
+    name: "Switch",
+    import: `import { Switch } from "@fluencypassdevs/cycle"`,
+    description: "Toggle on/off. 3 sizes (sm, default, lg). Prop theme aplica cor no estado checked.",
+    props: [
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<Switch />
+<Switch size="lg" />`,
+    keywords: ["switch", "toggle", "ligar", "desligar", "on", "off"],
+  },
+  {
+    name: "Slider",
+    import: `import { Slider } from "@fluencypassdevs/cycle"`,
+    description: "Controle deslizante com 3 sizes (sm, default, lg), suporte a range (2 thumbs). Suporta .theme-*.",
+    props: [
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+      { name: "defaultValue", type: "number[]", default: "[50]" },
+      { name: "min", type: "number", default: "0" },
+      { name: "max", type: "number", default: "100" },
+      { name: "step", type: "number", default: "1" },
+    ],
+    example: `<Slider defaultValue={[50]} max={100} step={1} />
+<Slider defaultValue={[25, 75]} />  {/* range */}`,
+    keywords: ["slider", "deslizante", "range", "volume", "controle"],
+  },
+  {
+    name: "Toggle",
+    import: `import { Toggle } from "@fluencypassdevs/cycle"`,
+    description: "Botao toggle (on/off). 2 variants (default, outline), 8 sizes. Prop fillOnPress para preencher icones SVG no estado on.",
+    props: [
+      { name: "variant", type: '"default" | "outline"', default: '"default"' },
+      { name: "size", type: '"xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon-default" | "icon-lg"', default: '"default"' },
+      { name: "fillOnPress", type: "boolean", default: "false" },
+    ],
+    example: `<Toggle><CycleIcon icon={Bold} size="sm" decorative /> Bold</Toggle>
+<Toggle size="icon-sm" fillOnPress><CycleIcon icon={Heart} size="sm" decorative /></Toggle>`,
+    keywords: ["toggle", "botao", "pressionar", "favorito", "bold", "italico"],
+  },
+  {
+    name: "Progress",
+    import: `import { Progress } from "@fluencypassdevs/cycle"`,
+    description: "Barra de progresso. 4 sizes (xs, sm, default, lg), 4 variants (default, secondary, destructive, muted). Prop theme aplica cor apenas no indicator.",
+    props: [
+      { name: "value", type: "number", default: "0" },
+      { name: "size", type: '"xs" | "sm" | "default" | "lg"', default: '"default"' },
+      { name: "variant", type: '"default" | "secondary" | "destructive" | "muted"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<Progress value={60} />
+<Progress value={80} size="lg" theme="brand" />`,
+    keywords: ["progress", "progresso", "barra", "loading", "porcentagem", "completar"],
+  },
+  {
+    name: "ProgressStage",
+    import: `import { ProgressStage } from "@fluencypassdevs/cycle"`,
+    description: "Progresso segmentado em pills (2-10 stages). Prop theme aplica cor apenas nas pills preenchidas.",
+    props: [
+      { name: "current", type: "number", default: "0" },
+      { name: "total", type: "number (2-10)", default: "5" },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<ProgressStage current={3} total={5} />
+<ProgressStage current={2} total={4} theme="brand" />`,
+    keywords: ["progress", "stage", "etapa", "passo", "step", "wizard", "segmentado"],
+  },
+  {
+    name: "ProgressDot",
+    import: `import { ProgressDot } from "@fluencypassdevs/cycle"`,
+    description: "Progresso em dots circulares (2-10 stages). 4 sizes (xs=4px, sm=6px, default=8px, lg=12px). Prop theme aplica cor nos dots preenchidos.",
+    props: [
+      { name: "current", type: "number", default: "0" },
+      { name: "total", type: "number (2-10)", default: "5" },
+      { name: "size", type: '"xs" | "sm" | "default" | "lg"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<ProgressDot current={2} total={5} />
+<ProgressDot current={1} total={3} size="lg" theme="brand" />`,
+    keywords: ["progress", "dot", "ponto", "indicador", "carousel", "slide", "paginacao"],
+  },
+  {
+    name: "FileCard",
+    import: `import { FileCard } from "@fluencypassdevs/cycle"`,
+    description: "Botao de download com icone, titulo, tipo e tamanho. 3 sizes (sm, md, lg).",
+    props: [
+      { name: "title", type: "string", default: "-" },
+      { name: "fileType", type: "string", default: "-" },
+      { name: "fileSize", type: "string", default: "-" },
+      { name: "size", type: '"sm" | "md" | "lg"', default: '"md"' },
+      { name: "icon", type: "LucideIcon", default: "FileDown" },
+      { name: "onClick", type: "() => void", default: "-" },
+    ],
+    example: `<FileCard title="Material da aula" fileType="PDF" fileSize="2.4 MB" onClick={() => download()} />`,
+    keywords: ["file", "arquivo", "download", "card", "pdf", "documento", "anexo"],
+  },
+  {
+    name: "Avatar",
+    import: `import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup } from "@fluencypassdevs/cycle"`,
+    description: "Avatar com imagem, fallback de iniciais, badge de status e group. 3 sizes (sm=24px, default=32px, lg=40px).",
+    props: [
+      { name: "size", type: '"sm" | "default" | "lg"', default: '"default"' },
+      { name: "theme", type: "string", default: "-" },
+    ],
+    example: `<Avatar size="lg">
+  <AvatarImage src="/foto.jpg" alt="Nome" />
+  <AvatarFallback>FP</AvatarFallback>
+  <AvatarBadge status="online" />
+</Avatar>
+
+<AvatarGroup>
+  <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
+  <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
+</AvatarGroup>`,
+    keywords: ["avatar", "foto", "imagem", "usuario", "perfil", "iniciais", "group"],
+  },
+  {
+    name: "ChatBubble",
+    import: `import { ChatBubble } from "@fluencypassdevs/cycle"`,
+    description: "Bolha de mensagem. 3 variantes: default (aluno), instructor (professor com destaque primary), system (mensagem central italico).",
+    props: [
+      { name: "variant", type: '"default" | "instructor" | "system"', default: '"default"' },
+      { name: "message", type: "string", default: "-" },
+      { name: "sender", type: "string", default: "-" },
+      { name: "avatarSrc", type: "string", default: "-" },
+      { name: "timestamp", type: "string", default: "-" },
+    ],
+    example: `<ChatBubble variant="default" sender="Aluno" message="Oi, professor!" timestamp="14:30" />
+<ChatBubble variant="instructor" sender="Professor" message="Oi! Vamos comecar." />`,
+    keywords: ["chat", "mensagem", "bolha", "conversa", "bubble", "message"],
+  },
+  {
+    name: "ChatPanel",
+    import: `import { ChatPanel } from "@fluencypassdevs/cycle"`,
+    description: "Painel de chat completo com lista de ChatBubbles, scroll automatico, e campo de input para envio.",
+    props: [
+      { name: "messages", type: "ChatMessage[]", default: "[]" },
+      { name: "onSend", type: "(msg: string) => void", default: "-" },
+      { name: "currentUser", type: "string", default: "-" },
+    ],
+    example: `<ChatPanel messages={messages} onSend={handleSend} currentUser="aluno@email.com" />`,
+    keywords: ["chat", "painel", "conversa", "mensagens", "live", "tempo real"],
+  },
+  {
+    name: "LikeDislike",
+    import: `import { LikeDislike } from "@fluencypassdevs/cycle"`,
+    description: "Botoes de like/dislike mutuamente exclusivos. 4 sizes (xs, sm, default, lg). Animacao burst no like. Feedback opcional no dislike via Textarea.",
+    props: [
+      { name: "size", type: '"xs" | "sm" | "default" | "lg"', default: '"default"' },
+      { name: "value", type: '"like" | "dislike" | null', default: "null" },
+      { name: "onValueChange", type: "(val) => void", default: "-" },
+      { name: "showFeedback", type: "boolean", default: "false" },
+    ],
+    example: `<LikeDislike onValueChange={(val) => console.log(val)} />
+<LikeDislike showFeedback onFeedbackSubmit={(text) => save(text)} />`,
+    keywords: ["like", "dislike", "feedback", "avaliacao", "curtir", "positivo", "negativo"],
+  },
+  {
+    name: "LiveWaiting",
+    import: `import { LiveWaiting } from "@fluencypassdevs/cycle"`,
+    description: "Tela de espera para lives com countdown em tempo real, badge, info do professor (Avatar) e topico.",
+    props: [
+      { name: "scheduledAt", type: "Date", default: "-" },
+      { name: "teacherName", type: "string", default: "-" },
+      { name: "teacherAvatar", type: "string", default: "-" },
+      { name: "topic", type: "string", default: "-" },
+    ],
+    example: `<LiveWaiting scheduledAt={new Date("2026-03-25T19:00")} teacherName="Prof. Ana" topic="Speaking Practice" />`,
+    keywords: ["live", "espera", "waiting", "countdown", "aula", "evento", "timer"],
+  },
+  {
+    name: "AudioPlayer",
+    import: `import { AudioPlayer } from "@fluencypassdevs/cycle"`,
+    description: "Player de audio (Vidstack). 2 variantes (default, card). Suporta MP3, OGG, HLS. showSpeed=true por padrao.",
+    props: [
+      { name: "src", type: "string", default: "-" },
+      { name: "variant", type: '"default" | "card"', default: '"default"' },
+      { name: "title", type: "string", default: "-" },
+      { name: "description", type: "string", default: "-" },
+      { name: "showSpeed", type: "boolean", default: "true" },
+    ],
+    example: `<AudioPlayer src="/audio.mp3" />
+<AudioPlayer variant="card" src="/audio.mp3" title="Listening Practice" description="Episode 1" />`,
+    keywords: ["audio", "player", "musica", "podcast", "som", "mp3", "ouvir", "listening"],
+  },
+  {
+    name: "VideoPlayer",
+    import: `import { VideoPlayer } from "@fluencypassdevs/cycle"`,
+    description: "Player de video (Vidstack). Suporta MP4, WebM, HLS. Chapters, buffering spinner, live indicator, tooltips.",
+    props: [
+      { name: "src", type: "string", default: "-" },
+      { name: "title", type: "string", default: "-" },
+      { name: "chapters", type: "string (VTT URL)", default: "-" },
+      { name: "showBuffering", type: "boolean", default: "true" },
+    ],
+    example: `<VideoPlayer src="/video.mp4" title="Aula 1" />
+<VideoPlayer src="https://stream.example/live.m3u8" title="Live" />`,
+    keywords: ["video", "player", "aula", "assistir", "mp4", "stream", "hls", "live"],
+  },
+  {
+    name: "Sonner (Toast)",
+    import: `import { Toaster, cycleToast } from "@fluencypassdevs/cycle"`,
+    description: "Notificacoes temporarias (toast). cycleToast.positive/critical/warning/info aplica temas Cycle. Requer <Toaster /> no layout.",
+    props: [],
+    example: `// No layout raiz:
+<Toaster />
+
+// Para disparar:
+cycleToast.positive("Salvo com sucesso!")
+cycleToast.critical("Erro ao salvar")
+cycleToast.warning("Atencao: limite proximo")
+cycleToast.info("Nova mensagem recebida")`,
+    keywords: ["toast", "notificacao", "snackbar", "alerta", "mensagem", "sonner", "feedback"],
+  },
+  {
+    name: "Alert",
+    import: `import { Alert, AlertTitle, AlertDescription, AlertAction, AlertClose } from "@fluencypassdevs/cycle"`,
+    description: "Alerta informativo com icone, acao e close. 6 variantes: default, destructive, positive, warning, critical, info.",
+    props: [
+      { name: "variant", type: '"default" | "destructive" | "positive" | "warning" | "critical" | "info"', default: '"default"' },
+    ],
+    example: `<Alert variant="positive">
+  <AlertTitle>Sucesso</AlertTitle>
+  <AlertDescription>Dados salvos com sucesso.</AlertDescription>
+  <AlertAction onClick={() => undo()}>Desfazer</AlertAction>
+  <AlertClose />
+</Alert>`,
+    keywords: ["alert", "alerta", "aviso", "notificacao", "info", "warning", "erro", "sucesso"],
+  },
+  {
+    name: "AlertDialog",
+    import: `import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@fluencypassdevs/cycle"`,
+    description: "Dialog de confirmacao modal. 2 sizes (default, sm). Media/icone, titulo, descricao, botoes de acao e cancelar.",
+    props: [
+      { name: "size", type: '"default" | "sm"', default: '"default"' },
+    ],
+    example: `<AlertDialog>
+  <AlertDialogTrigger asChild><Button variant="destructive">Excluir</Button></AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Tem certeza?</AlertDialogTitle>
+      <AlertDialogDescription>Esta acao nao pode ser desfeita.</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancelar</AlertDialogCancel>
+      <AlertDialogAction>Confirmar</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>`,
+    keywords: ["dialog", "confirmacao", "modal", "excluir", "deletar", "confirmar", "alert"],
+  },
+  {
+    name: "Dialog",
+    import: `import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@fluencypassdevs/cycle"`,
+    description: "Modal dialog com overlay, close button, header/footer, titulo/descricao. Controlado ou via trigger.",
+    props: [
+      { name: "showCloseButton", type: "boolean", default: "true" },
+    ],
+    example: `<Dialog>
+  <DialogTrigger asChild><Button>Abrir</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Titulo</DialogTitle>
+      <DialogDescription>Descricao do modal.</DialogDescription>
+    </DialogHeader>
+    Conteudo
+    <DialogFooter>
+      <Button>Salvar</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`,
+    keywords: ["dialog", "modal", "popup", "janela", "overlay", "formulario"],
+  },
+  {
+    name: "Select",
+    import: `import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "@fluencypassdevs/cycle"`,
+    description: "Dropdown de selecao. 2 sizes (sm, default). Suporta grupos, labels, separadores e scroll.",
+    props: [
+      { name: "size", type: '"sm" | "default"', default: '"default"' },
+    ],
+    example: `<Select>
+  <SelectTrigger><SelectValue placeholder="Selecione..." /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="a">Opcao A</SelectItem>
+    <SelectItem value="b">Opcao B</SelectItem>
+  </SelectContent>
+</Select>`,
+    keywords: ["select", "dropdown", "selecao", "opcao", "escolher", "lista", "combo"],
+  },
+  {
+    name: "Popover",
+    import: `import { Popover, PopoverTrigger, PopoverContent } from "@fluencypassdevs/cycle"`,
+    description: "Conteudo flutuante ancorado a um trigger. Header, titulo e descricao.",
+    props: [],
+    example: `<Popover>
+  <PopoverTrigger asChild><Button variant="outline">Info</Button></PopoverTrigger>
+  <PopoverContent>Conteudo do popover</PopoverContent>
+</Popover>`,
+    keywords: ["popover", "flutuante", "tooltip", "info", "detalhes", "popup"],
+  },
+  {
+    name: "Tooltip",
+    import: `import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@fluencypassdevs/cycle"`,
+    description: "Dica de texto ao hover/focus. Requer TooltipProvider no layout raiz.",
+    props: [],
+    example: `// No layout raiz:
+<TooltipProvider>...</TooltipProvider>
+
+// Uso:
+<Tooltip>
+  <TooltipTrigger asChild><Button variant="ghost">?</Button></TooltipTrigger>
+  <TooltipContent>Texto de ajuda</TooltipContent>
+</Tooltip>`,
+    keywords: ["tooltip", "dica", "ajuda", "hover", "hint", "info"],
+  },
+  {
+    name: "Resizable",
+    import: `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@fluencypassdevs/cycle"`,
+    description: "Paineis redimensionaveis com handle de arraste. Horizontal e vertical.",
+    props: [
+      { name: "direction", type: '"horizontal" | "vertical"', default: '"horizontal"' },
+    ],
+    example: `<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel>Painel 1</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Painel 2</ResizablePanel>
+</ResizablePanelGroup>`,
+    keywords: ["resizable", "redimensionar", "painel", "split", "dividir", "drag"],
+  },
+  {
+    name: "Empty",
+    import: `import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyContent } from "@fluencypassdevs/cycle"`,
+    description: "Estado vazio com icone/media, titulo, descricao e area para acoes.",
+    props: [],
+    example: `<Empty>
+  <EmptyIcon><CycleIcon icon={Inbox} size="lg" decorative /></EmptyIcon>
+  <EmptyTitle>Nenhum resultado</EmptyTitle>
+  <EmptyDescription>Tente ajustar os filtros.</EmptyDescription>
+  <EmptyContent><Button>Limpar filtros</Button></EmptyContent>
+</Empty>`,
+    keywords: ["empty", "vazio", "nenhum", "resultado", "placeholder", "estado"],
+  },
+  {
+    name: "Skeleton",
+    import: `import { Skeleton } from "@fluencypassdevs/cycle"`,
+    description: "Placeholder animado (pulse) para conteudo em carregamento.",
+    props: [],
+    example: `<Skeleton className="h-4 w-[250px]" />
+<Skeleton className="h-12 w-12 rounded-full" />`,
+    keywords: ["skeleton", "loading", "carregando", "placeholder", "shimmer", "pulse"],
+  },
+  {
+    name: "FluencypassLogo",
+    import: `import { FluencypassLogo, FluencypassIcon } from "@fluencypassdevs/cycle"`,
+    description: "Logo da Fluencypass (icone coral + texto). 5 sizes (xs, sm, md, lg, xl). FluencypassIcon para o icone sozinho.",
+    props: [
+      { name: "size", type: '"xs" | "sm" | "md" | "lg" | "xl"', default: '"md"' },
+    ],
+    example: `<FluencypassLogo size="md" />
+<FluencypassIcon className="h-7 w-auto" />`,
+    keywords: ["logo", "fluencypass", "marca", "brand", "icone"],
+  },
+  {
+    name: "ProductLogo",
+    import: `import { ProductLogo, ClassLogo, PrivateTalkLogo, GroupTalkLogo } from "@fluencypassdevs/cycle"`,
+    description: "Logo de produto (icone Lucide + label). 5 sizes. Pre-built: ClassLogo, PrivateTalkLogo, GroupTalkLogo.",
+    props: [
+      { name: "icon", type: "LucideIcon", default: "-" },
+      { name: "label", type: "string", default: "-" },
+      { name: "size", type: '"xs" | "sm" | "md" | "lg" | "xl"', default: '"md"' },
+    ],
+    example: `<ClassLogo size="md" />
+<PrivateTalkLogo size="sm" />
+<GroupTalkLogo size="lg" />
+<ProductLogo icon={Rocket} label="Impulse" size="md" className="theme-impulse" />`,
+    keywords: ["logo", "produto", "class", "private", "group", "talk", "marca"],
+  },
+  {
+    name: "CycleIcon",
+    import: `import { CycleIcon } from "@fluencypassdevs/cycle"
+import { Home, Search, Settings } from "@fluencypassdevs/cycle/icons/lucide"`,
+    description: "Wrapper para icones Lucide com size/stroke tokens. OBRIGATORIO: icones Lucide SEMPRE de @fluencypassdevs/cycle/icons/lucide, NUNCA de lucide-react.",
+    props: [
+      { name: "icon", type: "LucideIcon", default: "-" },
+      { name: "size", type: '"xs" | "sm" | "md" | "lg" | "xl"', default: '"sm"' },
+      { name: "decorative", type: "boolean", default: "false" },
+      { name: "aria-label", type: "string", default: "-" },
+    ],
+    example: `import { CycleIcon } from "@fluencypassdevs/cycle"
+import { Home, Search } from "@fluencypassdevs/cycle/icons/lucide"
+
+<CycleIcon icon={Home} size="sm" decorative />
+<CycleIcon icon={Search} size="md" aria-label="Buscar" />`,
+    keywords: ["icone", "icon", "lucide", "svg", "grafico"],
+  },
+]
+
+// ─── Design Tokens ─────────────────────────────────────────────────────────────
+
+const TOKENS = {
+  colors: {
+    backgrounds: ["bg-background", "bg-card", "bg-popover", "bg-primary", "bg-secondary", "bg-muted", "bg-accent", "bg-destructive"],
+    foregrounds: ["text-foreground", "text-card-foreground", "text-popover-foreground", "text-primary-foreground", "text-secondary-foreground", "text-muted-foreground", "text-accent-foreground", "text-destructive-foreground"],
+    borders: ["border-border", "border-input"],
+    semantic: ["bg-positive", "bg-warning", "bg-critical", "bg-info"],
+  },
+  radius: ["rounded-sm", "rounded-md", "rounded-lg", "rounded-xl"],
+  typography: {
+    body: ["body-xs (11px)", "body-sm (12px)", "body-md (14px)", "body-lg (16px)"],
+    heading: ["heading-xs (14px/600)", "heading-sm (16px/600)", "heading-md (18px/600)", "heading-lg (20px/600)", "heading-xl (24px/600)", "heading-2xl (30px/700)", "heading-3xl (36px/700)", "heading-4xl (48px/700)"],
+  },
+  themes: [".theme-brand", ".theme-class", ".theme-private-talk", ".theme-group-talk"],
+}
+
+// ─── Tool Definitions ──────────────────────────────────────────────────────────
+
+const TOOLS = [
+  {
+    name: "cycle_search_component",
+    description: "Search for a Cycle Design System component by name or keyword. Use this BEFORE creating any UI to check if a component already exists. Returns matching components with imports and descriptions.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        query: {
+          type: "string",
+          description: "Component name or keyword to search (e.g. 'button', 'progress', 'chat', 'download', 'modal')",
+        },
+      },
+      required: ["query"],
+    },
+  },
+  {
+    name: "cycle_get_component",
+    description: "Get full details of a specific Cycle Design System component including all props, variants, sizes, and usage examples.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: "Exact component name (e.g. 'Button', 'Progress', 'AudioPlayer')",
+        },
+      },
+      required: ["name"],
+    },
+  },
+  {
+    name: "cycle_get_icon_usage",
+    description: "Get the correct way to use icons in projects using the Cycle Design System. IMPORTANT: lucide-react must NEVER be imported directly.",
+    inputSchema: {
+      type: "object",
+      properties: {},
+    },
+  },
+  {
+    name: "cycle_get_setup",
+    description: "Get project setup instructions for using the Cycle Design System (npm install, CSS config, @source directive).",
+    inputSchema: {
+      type: "object",
+      properties: {},
+    },
+  },
+  {
+    name: "cycle_get_tokens",
+    description: "Get available design tokens (colors, typography, radius, themes). IMPORTANT: Never use hardcoded colors like bg-blue-500 or hex values.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        category: {
+          type: "string",
+          enum: ["colors", "typography", "radius", "themes", "all"],
+          description: "Token category to retrieve",
+        },
+      },
+    },
+  },
+  {
+    name: "cycle_get_rules",
+    description: "Get the mandatory rules for AI assistants using the Cycle Design System. Call this at the start of any UI implementation task.",
+    inputSchema: {
+      type: "object",
+      properties: {},
+    },
+  },
+]
+
+// ─── Tool Handlers ─────────────────────────────────────────────────────────────
+
+function handleToolCall(name, args) {
+  switch (name) {
+    case "cycle_search_component": {
+      const query = (args.query || "").toLowerCase()
+      const results = COMPONENTS.filter((c) => {
+        const searchable = `${c.name} ${c.description} ${c.keywords.join(" ")}`.toLowerCase()
+        return query.split(/\s+/).every((word) => searchable.includes(word))
+      })
+      if (results.length === 0) {
+        return `No components found for "${args.query}". This component does NOT exist in the Cycle Design System. Do NOT create it from scratch — signal the gap to the developer and use existing primitives (Button, Input, Badge, etc.) as building blocks if needed.`
+      }
+      const list = results
+        .map((c) => `### ${c.name}\n${c.import}\n${c.description}`)
+        .join("\n\n")
+      return `Found ${results.length} component(s) matching "${args.query}":\n\n${list}\n\nUse cycle_get_component for full details with props and examples.`
+    }
+
+    case "cycle_get_component": {
+      const comp = COMPONENTS.find(
+        (c) => c.name.toLowerCase() === (args.name || "").toLowerCase()
+      )
+      if (!comp) {
+        return `Component "${args.name}" not found. Use cycle_search_component to search by keyword.`
+      }
+      const propsTable = comp.props.length > 0
+        ? "Props:\n" + comp.props.map((p) => `  - ${p.name}: ${p.type} (default: ${p.default})`).join("\n")
+        : "No configurable props."
+      return `# ${comp.name}\n\n${comp.import}\n\n${comp.description}\n\n${propsTable}\n\nExample:\n\`\`\`tsx\n${comp.example}\n\`\`\``
+    }
+
+    case "cycle_get_icon_usage":
+      return `# Icons in Cycle Design System
+
+## REGRA OBRIGATORIA
+**NUNCA importar de "lucide-react" diretamente. O pacote lucide-react e uma dependencia INTERNA do Cycle.**
+
+## Como usar icones Lucide (UNICO caminho correto):
+
+\`\`\`tsx
+import { CycleIcon } from "@fluencypassdevs/cycle"
+import { Home, Search, Settings } from "@fluencypassdevs/cycle/icons/lucide"
+
+// Icone decorativo (sem significado semantico):
+<CycleIcon icon={Home} size="sm" decorative />
+
+// Icone com significado (acessivel):
+<CycleIcon icon={Search} size="sm" aria-label="Buscar" />
+\`\`\`
+
+## Icones custom Cycle (EdTech) — SEM wrapper CycleIcon:
+
+\`\`\`tsx
+import { Flashcard, Quiz, Course, Streak, Live } from "@fluencypassdevs/cycle"
+
+<Flashcard size="sm" decorative />
+\`\`\`
+
+## PROIBIDO:
+\`\`\`tsx
+// ❌ NUNCA fazer isso:
+import { Home } from "lucide-react"  // PROIBIDO
+\`\`\`
+
+## Sizes disponiveis:
+- xs: 16px (strokeWidth 1.2)
+- sm: 24px (strokeWidth 1.5)
+- md: 32px (strokeWidth 1.8)
+- lg: 40px (strokeWidth 2.1)
+- xl: 48px (strokeWidth 2.4)`
+
+    case "cycle_get_setup":
+      return `# Setup do Cycle Design System
+
+## 1. Instalar o pacote:
+\`\`\`bash
+npm install @fluencypassdevs/cycle
+\`\`\`
+
+## 2. Configurar CSS (globals.css):
+\`\`\`css
+@import "tailwindcss";
+@source "../../node_modules/@fluencypassdevs/cycle/dist";
+@import "@fluencypassdevs/cycle/styles.css";
+\`\`\`
+
+> **CRITICO**: O \`@source\` e OBRIGATORIO. Sem ele, o Tailwind v4 nao escaneia node_modules e remove (purge) TODAS as classes usadas pelos componentes do Cycle. O path do @source deve ser relativo ao seu globals.css ate a pasta dist do pacote.
+
+## 3. Importar componentes:
+\`\`\`tsx
+import { Button, Input, Badge } from "@fluencypassdevs/cycle"
+\`\`\`
+
+## 4. Importar icones (OBRIGATORIO via Cycle):
+\`\`\`tsx
+import { CycleIcon } from "@fluencypassdevs/cycle"
+import { Home } from "@fluencypassdevs/cycle/icons/lucide"
+// NUNCA: import { Home } from "lucide-react" ❌
+\`\`\`
+
+## 5. Utilidades:
+\`\`\`tsx
+import { cn } from "@fluencypassdevs/cycle/lib/utils"
+\`\`\`
+
+## 6. Configurar regras para IA (opcional):
+\`\`\`bash
+npx cycle init
+\`\`\``
+
+    case "cycle_get_tokens": {
+      const cat = args.category || "all"
+      if (cat === "all") {
+        return `# Design Tokens do Cycle\n\n## Colors\nBackgrounds: ${TOKENS.colors.backgrounds.join(", ")}\nForegrounds: ${TOKENS.colors.foregrounds.join(", ")}\nBorders: ${TOKENS.colors.borders.join(", ")}\n\n## Typography\nBody: ${TOKENS.typography.body.join(", ")}\nHeading: ${TOKENS.typography.heading.join(", ")}\n\n## Radius\n${TOKENS.radius.join(", ")}\n\n## Themes\n${TOKENS.themes.join(", ")}\n\n**NUNCA usar cores hardcoded** (bg-blue-500, #hex). Sempre usar semantic tokens.`
+      }
+      const data = TOKENS[cat]
+      if (!data) return `Unknown category "${cat}". Available: colors, typography, radius, themes, all.`
+      return `# ${cat} tokens\n\n${JSON.stringify(data, null, 2)}\n\n**NUNCA usar valores hardcoded.** Sempre usar estes semantic tokens.`
+    }
+
+    case "cycle_get_rules":
+      return `# Regras OBRIGATORIAS para IA — Cycle Design System
+
+## Regra Principal
+**NUNCA copiar, clonar ou recriar componentes que ja existem na biblioteca.**
+Sempre importar de \`@fluencypassdevs/cycle\`.
+
+## Regras de Componentes
+1. SEMPRE importar de \`@fluencypassdevs/cycle\` — NUNCA criar componentes se ja existem na biblioteca
+2. NUNCA copiar codigo-fonte de componentes para dentro do projeto
+3. Se um componente NAO existe na biblioteca, SINALIZE ao dev — nao invente um substituto
+4. Composites do projeto ficam em \`src/components/composites/\` e usam primitives da biblioteca
+5. Nunca criar um componente custom se o Cycle ja resolve
+
+## Regras de Icones (CRITICO)
+6. NUNCA importar de \`lucide-react\` — icones Lucide SEMPRE de \`@fluencypassdevs/cycle/icons/lucide\`
+7. Renderizar icones Lucide via \`<CycleIcon icon={...} />\`
+8. Icones custom Cycle (EdTech) direto de \`@fluencypassdevs/cycle\` sem wrapper
+
+## Regras de Estilo
+9. NUNCA usar cores hardcoded (bg-blue-500, #hex) — usar semantic tokens (bg-primary, text-muted-foreground)
+10. Usar \`cn()\` de \`@fluencypassdevs/cycle/lib/utils\` para merge de classes
+11. Dark mode via classe \`.dark\` — tokens light/dark ja estao definidos
+12. Usar variaveis de radius (rounded-sm, rounded-md, rounded-lg, rounded-xl)
+
+## Regras de Codigo
+13. TypeScript strict — tipar todas as props, nunca usar \`any\`
+14. Imports com alias \`@/\` para codigo do projeto — componentes do DS sempre de \`@fluencypassdevs/cycle\`
+
+## Fluxo ao receber um design/screenshot
+1. Identificar as areas da tela
+2. Para cada area, usar \`cycle_search_component\` para verificar se existe um componente
+3. Apresentar ao dev a lista de componentes ANTES de escrever codigo
+4. Aguardar aprovacao do dev
+5. Montar a pagina compondo os componentes importados
+6. Criar apenas o que NAO existe no Design System`
+
+    default:
+      return `Unknown tool: ${name}`
+  }
+}
+
+// ─── JSON-RPC 2.0 over stdio ──────────────────────────────────────────────────
+
+const SERVER_INFO = {
+  name: "cycle-design-system",
+  version: "0.6.0",
+}
+
+function makeResponse(id, result) {
+  return JSON.stringify({ jsonrpc: "2.0", id, result })
+}
+
+function makeError(id, code, message) {
+  return JSON.stringify({ jsonrpc: "2.0", id, error: { code, message } })
+}
+
+function handleMessage(msg) {
+  const { id, method, params } = msg
+
+  switch (method) {
+    case "initialize":
+      return makeResponse(id, {
+        protocolVersion: "2024-11-05",
+        capabilities: { tools: {} },
+        serverInfo: SERVER_INFO,
+      })
+
+    case "notifications/initialized":
+      return null // no response for notifications
+
+    case "tools/list":
+      return makeResponse(id, { tools: TOOLS })
+
+    case "tools/call": {
+      const toolName = params?.name
+      const toolArgs = params?.arguments || {}
+      try {
+        const result = handleToolCall(toolName, toolArgs)
+        return makeResponse(id, {
+          content: [{ type: "text", text: result }],
+        })
+      } catch (err) {
+        return makeResponse(id, {
+          content: [{ type: "text", text: `Error: ${err.message}` }],
+          isError: true,
+        })
+      }
+    }
+
+    case "ping":
+      return makeResponse(id, {})
+
+    default:
+      if (id != null) {
+        return makeError(id, -32601, `Method not found: ${method}`)
+      }
+      return null // ignore unknown notifications
+  }
+}
+
+// ─── Main ──────────────────────────────────────────────────────────────────────
+
+const rl = createInterface({ input: process.stdin, terminal: false })
+
+let buffer = ""
+
+process.stdin.on("data", (chunk) => {
+  buffer += chunk.toString()
+
+  // Try to parse complete JSON-RPC messages
+  while (buffer.length > 0) {
+    // Look for Content-Length header (LSP-style framing)
+    const headerMatch = buffer.match(/^Content-Length:\s*(\d+)\r?\n\r?\n/)
+    if (headerMatch) {
+      const contentLength = parseInt(headerMatch[1], 10)
+      const headerLength = headerMatch[0].length
+      if (buffer.length >= headerLength + contentLength) {
+        const body = buffer.slice(headerLength, headerLength + contentLength)
+        buffer = buffer.slice(headerLength + contentLength)
+        try {
+          const msg = JSON.parse(body)
+          const response = handleMessage(msg)
+          if (response) {
+            const responseBytes = Buffer.byteLength(response, "utf-8")
+            process.stdout.write(`Content-Length: ${responseBytes}\r\n\r\n${response}`)
+          }
+        } catch {
+          // skip malformed messages
+        }
+        continue
+      }
+    }
+
+    // Try plain newline-delimited JSON as fallback
+    const newlineIdx = buffer.indexOf("\n")
+    if (newlineIdx !== -1) {
+      const line = buffer.slice(0, newlineIdx).trim()
+      buffer = buffer.slice(newlineIdx + 1)
+      if (line.startsWith("{")) {
+        try {
+          const msg = JSON.parse(line)
+          const response = handleMessage(msg)
+          if (response) {
+            process.stdout.write(response + "\n")
+          }
+        } catch {
+          // skip
+        }
+      }
+      continue
+    }
+
+    break // need more data
+  }
+})
+
+rl.on("close", () => process.exit(0))

package/cli/CLAUDE-section.md

@@ -120,6 +120,21 @@ Todos importados de `@fluencypassdevs/cycle`:
 | ProductLogo, ClassLogo, PrivateTalkLogo, GroupTalkLogo | Logos dos produtos |
 | CycleIcon | Wrapper para icones Lucide |
 
+## MCP Server (Claude Code)
+
+Se o projeto tem `.mcp.json` configurado, o Claude Code tera acesso a tools do Cycle:
+
+- `cycle_search_component` — buscar componente por nome/keyword
+- `cycle_get_component` — detalhes completos com props e exemplos
+- `cycle_get_icon_usage` — regras de uso de icones
+- `cycle_get_setup` — instrucoes de setup
+- `cycle_get_tokens` — tokens de design disponiveis
+- `cycle_get_rules` — regras obrigatorias
+
+**USE estas tools antes de criar qualquer UI.** Elas sao a fonte de verdade.
+
+Para configurar: `npx cycle init`
+
 ## Documentacao
 
 - **Componentes**: https://cycle-design.fluencypass.com/docs/components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Cycle Design System — UI component library by Fluencypass",
   "license": "MIT",
   "repository": {
@@ -51,7 +51,7 @@
     "./tailwind-theme.css": "./dist/styles/tokens.css"
   },
   "bin": {
-    "cycle": "./bin/init.mjs"
+    "cycle": "./bin/cli.mjs"
   },
   "files": [
     "dist",