trdr-ds-install 1.7.2 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.7.2",
+  "version": "1.8.1",
   "description": "Installs the TRDR Design System skill for Claude Code",
   "bin": {
     "trdr-ds-install": "./bin/install.js"

package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md

@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|foundation|violations|components|final|resume|sta
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
-**Skill version:** 1.7.2
+**Skill version:** 1.8.1
 **npm package:** trdr-ds-install
 
 You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
@@ -14,7 +14,7 @@ You are implementing the **TRDR Design System** in a developer's project. The De
 This skill ships with two **offline-first snapshots** of the Hub:
 
 - `references/tokens.css` — all TRDR CSS variables (dark + light mode), copied verbatim from the Hub
-- `data/components.json` — full component catalog (implemented + stubs), with code blocks for everything `implemented: true`
+- `data/components.json` — full component catalog (implemented + stubs), with code blocks for everything `implemented: true` and `dependencies` array listing sub-component slugs used by compound components
 
 The snapshots are kept in sync by the skill's maintainer via `npm run sync` in the `trdr-plugins` repo. **Always prefer the local snapshot.** Only fetch from the Hub when the user explicitly asks for the latest (`--latest` argument or `sync` mode).
 
@@ -54,13 +54,13 @@ Run this command silently via Bash:
 npm show trdr-ds-install version 2>/dev/null
 ```
 
-Compare the result with the **Skill version** constant at the top of this file (`1.6.5`).
+Compare the result with the **Skill version** constant at the top of this file.
 
 - If the command fails or returns empty (no internet / npm unavailable): skip silently, continue.
 - If registry version == local version: skip silently, continue.
 - If registry version > local version:
   ```
-  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.7.2)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.8.1)
 
   Responda:
   - `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)
@@ -687,6 +687,15 @@ Total files with violations: [total_files_with_violations]
 [For each candidate where c.implemented === false:]
 - [slug]: [file:line] — ⚠️ stub (figmaId: [c.figmaId])
 
+### Dependency Graph
+[For each candidate with non-empty dependencies in components.json:]
+| Compound Component | Dependencies (install first) |
+|--------------------|----------------------------|
+| [c.name] | [c.dependencies.join(', ')] |
+
+[If no compound components among candidates:]
+> All candidates are atomic — no dependency ordering needed.
+
 ## Logo Audit
 [For each file in logoAudit.correct:] - [path] — ✅ CORRECT
 [For each file in logoAudit.wrong:] - [path] — ❌ WRONG (will be replaced)
@@ -761,6 +770,7 @@ Estimated context windows: [N] (one per sprint + one for this analysis)
 **Scope:** Implement DS components ([S] simple, [P] complex-preservable, [M] manual review)
 **Sub-fase:** C
 **Candidates:** [total]
+**Install order:** [topological order from dependency graph — atomics first, then compounds]
 **Status:** PENDING
 
 ---
@@ -876,6 +886,7 @@ Total de lotes: [N]
 ### Lote [n] — raiz ([N] arquivos) — PENDING
 
 ## Sub-fase C: Components — PENDING
+Install order: [topological — atomics first, then compounds by dependency]
 [list component replacement candidates from DS_ANALYSIS.md]
 
 ## Sub-fase D: Final — PENDING
@@ -1433,7 +1444,21 @@ Update `DS_PROGRESS.md`: set `Sub-fase C: Components — IN_PROGRESS`.
 
 ### Step 6 — Implement DS components in project files
 
-Process candidates from `DS_ANALYSIS.md` § Component Replacement Candidates in three passes:
+#### Step 6.0 — Resolve dependency order
+
+Components in `data/components.json` may have a `dependencies` array listing slugs of sub-components they use (e.g., `boleta` depends on `["segmented-control", "text-input", "checkbox", "button", "dropdown"]`). Before processing candidates:
+
+1. Read the `dependencies` field of every candidate component from `data/components.json`.
+2. Build a topological order: **atomic components** (empty `dependencies`) first, then **compound components** (non-empty `dependencies`) sorted so that each component's dependencies appear before it.
+3. Process candidates in this order across all three passes below. Within the same pass, respect the topological order.
+
+This ensures that when a compound component's code block imports a sub-component (e.g., `import Badge from './Badge'`), the sub-component's DS class is already installed in the project.
+
+If a dependency is NOT in the candidate list (i.e., no existing element in the project matched that atomic component), skip it — the compound component's code block will still reference the DS class, and the sub-component can be added later.
+
+---
+
+Process candidates in three passes (respecting the dependency order above):
 1. **Pass 1** — Simple replacements (full DS component swap)
 2. **Pass 2** — Complex-preservable (DS structure + logic preservation)
 3. **Pass 3** — Manual review flagging (no auto-modification)

package/plugins/trdr-design-system/skills/trdr-ds/data/components.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-13T15:09:21.130Z",
-  "total": 20,
-  "implemented": 20,
+  "generatedAt": "2026-05-13T18:53:51.673Z",
+  "total": 25,
+  "implemented": 25,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -177,7 +177,8 @@
         "css": "/* Button — Design System TRDR | Figma: 1318:749 */\n.trdr-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-xs);       /* 4px */\n  height: 24px;\n  padding: 0 var(--spacing-sm); /* 0 8px */\n  border-radius: var(--radius-md); /* 8px */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n}\n\n.trdr-btn-lg {\n  height: 32px;\n  padding: 0 var(--spacing-md); /* 0 12px */\n}\n\n/* Primary */\n.trdr-btn-primary {\n  background-color: var(--action-brand-default); /* #00D4FF */\n  color: var(--content-inverse);\n  border: 0.5px solid var(--action-brand-default);\n}\n.trdr-btn-primary:hover  { background-color: var(--action-brand-hover); border-color: var(--action-brand-hover); }\n.trdr-btn-primary:active { background-color: var(--action-brand-active); border-color: var(--action-brand-active); }\n.trdr-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }\n\n/* Secondary */\n.trdr-btn-secondary {\n  background-color: var(--action-secondary-default); /* #4A4A4A */\n  color: var(--content-primary);\n}\n.trdr-btn-secondary:hover  { background-color: var(--action-secondary-hover); }\n.trdr-btn-secondary:active { background-color: var(--action-secondary-active); }\n.trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }\n\n/* Ghost */\n.trdr-btn-ghost {\n  background-color: transparent;\n  color: var(--content-secondary); /* #E8E8E8 */\n  border: 1px solid var(--border-default); /* #4A4A4A */\n}\n.trdr-btn-ghost:hover  { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }\n.trdr-btn-ghost:active { background-color: var(--surface-primary); }\n.trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); opacity: 0.5; cursor: not-allowed; }\n\n/* Destructive */\n.trdr-btn-destructive {\n  background-color: var(--action-destructive-default); /* #EA580C */\n  color: var(--content-primary);\n}\n.trdr-btn-destructive:hover  { background-color: var(--action-destructive-hover); }\n.trdr-btn-destructive:active { background-color: var(--action-destructive-active); }\n\n/* Inverse */\n.trdr-btn-inverse {\n  background-color: var(--bg-inverse); /* #FFFFFF */\n  color: var(--content-inverse);       /* #1A1A1A */\n  border: 0.5px solid var(--bg-inverse);\n}\n.trdr-btn-inverse:hover { background-color: var(--color-neutral-100); }\n\n/* Link */\n.trdr-btn-link {\n  background-color: transparent;\n  color: var(--content-brand); /* #00D4FF */\n  padding-left: 0;\n  padding-right: 0;\n}\n.trdr-btn-link:hover { color: var(--action-brand-hover); text-decoration: underline; }\n\n/* Link Danger */\n.trdr-btn-link-danger {\n  background-color: transparent;\n  color: var(--content-error); /* #F34F45 */\n  padding-left: 0;\n  padding-right: 0;\n}\n.trdr-btn-link-danger:hover { color: var(--action-destructive-hover); text-decoration: underline; }\n\n/* Secondary Destruct */\n.trdr-btn-secondary-destruct {\n  background-color: transparent;\n  color: var(--action-destructive-default);\n  border: 1px solid var(--action-destructive-default);\n}\n.trdr-btn-secondary-destruct:hover { background-color: var(--action-destructive-disabled); }\n\n/* Long — Trading compra (verde) */\n.trdr-btn-long {\n  background-color: var(--context-trading-long-default);\n  color: var(--context-trading-long-text);\n  min-width: 80px;\n}\n.trdr-btn-long:hover { background-color: var(--context-trading-long-hover); }\n\n/* Short — Trading venda (vermelho) */\n.trdr-btn-short {\n  background-color: var(--context-trading-short-default);\n  color: var(--context-trading-short-text);\n  min-width: 80px;\n}\n.trdr-btn-short:hover { background-color: var(--context-trading-short-hover); }",
         "react": "import Button from '@/components/ui/Button'\n\n// Variantes principais\n<Button variant=\"primary\">Confirmar</Button>\n<Button variant=\"secondary\">Cancelar</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"destructive\">Excluir</Button>\n\n// Tamanho Large\n<Button variant=\"primary\" size=\"lg\">Confirmar (Large)</Button>\n\n// Com ícone (Material Symbols)\n<Button\n  variant=\"primary\"\n  iconLeft={<span style={{ fontFamily: 'Material Symbols Outlined', fontSize: 16 }}>add</span>}\n>\n  Nova posição\n</Button>\n\n// Disabled\n<Button variant=\"primary\" disabled>Processando...</Button>\n\n// Variantes de link\n<Button variant=\"link\">Ver mais</Button>\n<Button variant=\"link-danger\">Remover</Button>\n\n// Inverse (sobre fundo claro)\n<Button variant=\"inverse\">Ação</Button>\n\n// Secondary Destruct\n<Button variant=\"secondary-destruct\">Cancelar operação</Button>\n\n// Trading\n<Button variant=\"long\">Long</Button>\n<Button variant=\"short\">Short</Button>\n\n// Interface de Props:\n// variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'inverse'\n//         | 'link' | 'link-danger' | 'secondary-destruct' | 'long' | 'short'\n// size?: 'default' | 'lg'\n// iconLeft?: React.ReactNode\n// iconRight?: React.ReactNode\n// + todos os atributos nativos do <button>",
         "prompt": "Implemente o componente Button do Design System TRDR. Figma ID: 1318:749.\n\nDIMENSÕES:\n- Default: height 24px, padding 0 8px, gap 4px\n- Large: height 32px, padding 0 12px, gap 4px\n- Border-radius: var(--radius-md) — 8px (OBRIGATÓRIO, não usar --radius-sm)\n\nTIPOGRAFIA:\n- font-family: var(--font-secondary) — Inter\n- font-size: 14px (ambos os tamanhos)\n- font-weight: 600 (SemiBold)\n\n10 VARIANTES com tokens obrigatórios:\n\nPrimary:\n  BG: var(--action-brand-default) /* #00D4FF */\n  Color: var(--content-inverse)\n  Border: 0.5px solid var(--action-brand-default)\n  Hover: var(--action-brand-hover) | Active: var(--action-brand-active)\n\nSecondary:\n  BG: var(--action-secondary-default) /* #4A4A4A */\n  Color: var(--content-primary)\n  Hover: var(--action-secondary-hover) | Active: var(--action-secondary-active)\n\nGhost:\n  BG: transparent | Color: var(--content-secondary) /* #E8E8E8 */\n  Border: 1px solid var(--border-default)\n  Hover: BG var(--surface-secondary), border var(--border-strong), color var(--content-primary)\n\nDestructive:\n  BG: var(--action-destructive-default) /* #EA580C */\n  Color: var(--content-primary)\n  Hover: var(--action-destructive-hover) | Active: var(--action-destructive-active)\n\nInverse:\n  BG: var(--bg-inverse) /* #FFFFFF */\n  Color: var(--content-inverse) /* #1A1A1A */\n  Border: 0.5px solid var(--bg-inverse)\n\nLink:\n  BG: transparent | Color: var(--content-brand) | padding-x: 0\n  Hover: color var(--action-brand-hover), text-decoration underline\n\nLink Danger:\n  BG: transparent | Color: var(--content-error) | padding-x: 0\n  Hover: color var(--action-destructive-hover), text-decoration underline\n\nSecondary Destruct:\n  BG: transparent | Color: var(--action-destructive-default)\n  Border: 1px solid var(--action-destructive-default)\n  Hover: BG var(--action-destructive-disabled)\n\nLong (trading compra):\n  BG: var(--context-trading-long-default) | Color: var(--context-trading-long-text)\n  min-width: 80px\n  Hover: var(--context-trading-long-hover) | Active: var(--context-trading-long-active)\n\nShort (trading venda):\n  BG: var(--context-trading-short-default) | Color: var(--context-trading-short-text)\n  min-width: 80px\n  Hover: var(--context-trading-short-hover) | Active: var(--context-trading-short-active)\n\nDisabled (global): opacity 0.4, cursor not-allowed\n\nImplemente como componente React com CSS Module. Props: variant, size, iconLeft, iconRight + atributos nativos do button. Resultado deve ser pixel-perfect em relação ao Figma."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "text-input",
@@ -335,7 +336,8 @@
         "css": ".trdr-text-input {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--surface-primary);   /* #4A4A4A */\n  border: 1px solid transparent;\n  border-radius: 5px;                          /* fixo, não token */\n  height: 24px;\n  padding: 0 8px;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.15s ease;\n  gap: 4px;\n}\n\n.trdr-text-input:focus-within { border-color: var(--border-focus); /* #00D4FF */ }\n\n.trdr-text-input-lg         { height: 32px; }\n.trdr-text-input-icon       { padding: 0; gap: 0; }\n.trdr-text-input-lg.trdr-text-input-icon { padding: 0 4px; gap: 0; }\n\n.trdr-text-input-quick { height: 32px; padding: 0 4px; gap: 8px; }\n\n.trdr-text-input-variable {\n  padding: 0 4px;\n  border-color: var(--border-strong);          /* #A4A4A4 — sempre visível */\n}\n.trdr-text-input-variable:focus-within { border-color: var(--border-focus); }\n\n.trdr-text-input-multiline {\n  height: auto; min-height: 56px;\n  align-items: flex-start; padding: 4px 8px;\n  border-color: var(--border-strong);          /* #A4A4A4 */\n}\n.trdr-text-input-multiline:focus-within { border-color: var(--border-focus); }\n\n.trdr-text-input-error,   .trdr-text-input-error:focus-within   { border-color: var(--content-error); }\n.trdr-text-input-warning, .trdr-text-input-warning:focus-within { border-color: var(--content-warning); }\n.trdr-text-input-success, .trdr-text-input-success:focus-within { border-color: var(--content-success); }\n\n.trdr-text-input-disabled,\n.trdr-text-input-disabled:focus-within { border-color: var(--border-strong); cursor: not-allowed; }\n\n/* Single Line (Default + Large): 14px / 400 */\n.trdr-text-input input {\n  flex: 1; min-width: 0; background: transparent;\n  border: none; outline: none;\n  color: var(--content-primary);              /* #FFFFFF */\n  font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.2;\n  padding: 0; width: 100%;\n}\n\n/* Textarea (Multi Line): 11px / 450 */\n.trdr-text-input textarea {\n  flex: 1; min-width: 0; background: transparent;\n  border: none; outline: none;\n  color: var(--content-primary);              /* #FFFFFF */\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n  padding: 0; width: 100%; resize: none;\n}\n\n.trdr-text-input input::placeholder,\n.trdr-text-input textarea::placeholder { color: var(--content-tertiary); /* #A4A4A4 */ }\n\n/* Quick Action: 11px / 450 / cor tertiary */\n.trdr-text-input-quick input {\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n  color: var(--content-tertiary);             /* #A4A4A4 */\n}\n\n/* Variable: 11px / 450 */\n.trdr-text-input-variable input {\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n}\n\n.trdr-text-input-disabled input,\n.trdr-text-input-disabled textarea { color: var(--content-disabled); cursor: not-allowed; }",
         "react": "import TextInput from '@/components/ui/TextInput'\n\n// Single Line Default (14px/400)\n<TextInput placeholder=\"Placeholder\" />\n\n// Single Line Large (14px/400, 32px height)\n<TextInput size=\"large\" placeholder=\"Placeholder\" />\n\n// Com ícone e clear\nconst [val, setVal] = useState('')\n<TextInput\n  iconLeft\n  placeholder=\"Buscar instrumento...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n  onClear={() => setVal('')}\n/>\n\n// Quick Action (toolbar) — texto tertiary, 11px\n<TextInput\n  variant=\"quick-action\"\n  placeholder=\"Filtrar...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n  onClear={() => setVal('')}\n/>\n\n// Variable state — borda sempre visível, 11px\n<TextInput isVariable value=\"WINFUT\" />\n\n// Multi Line (textarea, 11px/450)\n<TextInput\n  variant=\"multi-line\"\n  rows={4}\n  placeholder=\"Observações...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n/>\n\n// Validação\n<TextInput validation=\"error\" value=\"Valor inválido\" />\n<TextInput validation=\"warning\" value=\"Verifique\" />\n<TextInput validation=\"success\" value=\"Confirmado\" />\n\n// Disabled / Read Only\n<TextInput disabled value=\"Indisponível\" />\n<TextInput readOnly value=\"Somente leitura\" />",
         "prompt": "Implemente o componente TextInput do Design System TRDR.\n\nVARIANTES:\n- single-line (padrão): <input type=\"text\"> dentro de um wrapper div\n- multi-line: <textarea> dentro do wrapper, altura auto (min 56px)\n- quick-action: como single-line mas sempre com icon-left, padding compacto\n- variable (isVariable=true): input de fórmula com borda sempre visível e padding compacto\n\nTIPOGRAFIA (confirmada no Figma node 1327:17000):\n- Single Line Default e Large: font-size 14px, font-weight 400, letter-spacing 0, line-height 1.2\n- Multi Line: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n- Quick Action: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n- Variable: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n\nTAMANHOS:\n- default: height 24px, padding 0 8px, gap 4px\n- large:   height 32px, padding 0 8px (sem icon) / 0 4px (com icon), gap 0\n- Quick Action é sempre large (32px), padding 0 4px, gap 8px\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border focus: --border-focus (#00D4FF) — via :focus-within no wrapper\n- Border multi-line/variable/disabled: --border-strong (#A4A4A4)\n- Texto Single Line: --content-primary (#FFFFFF)\n- Texto Quick Action: --content-tertiary (#A4A4A4) — texto em cor tertiary por design\n- Placeholder: --content-tertiary (#A4A4A4)\n- Texto disabled: --content-disabled (#4A4A4A)\n- Border error: --content-error (#F34F45)\n- Border warning: --content-warning (#FFD35A)\n- Border success: --content-success (#4FE290)\n\nBORDER RADIUS: 5px FIXO (não usar token de radius)\n\nICON LEFT:\n- Container 24×24px, ícone de busca SVG 13px centralizado\n- Quick Action sempre tem icon, Single Line e Large são opcionais\n- Com icon: wrapper sem padding (0) e gap=0 em Default | padding 0 4px, gap=0 em Large\n\nBOTÃO CLEAR (X):\n- Aparece apenas quando iconLeft=true + value não vazio + não disabled + não readOnly\n- Container 24×24px, SVG X 11px, cor content-tertiary, hover: content-primary\n- tabIndex={-1} para não receber foco via tab\n\nVARIABLE STATE:\n- Wrapper padding: 0 4px (reduzido vs 0 8px do default)\n- Border: border-strong (#A4A4A4) sempre visível (mesmo sem foco)\n- Em foco: substitui por border-focus (#00D4FF)\n\nMULTI LINE:\n- Border default sempre visível: var(--border-strong)\n- padding: 4px 8px\n- Textarea com resize: none\n\nESTADOS CSS:\n- :focus-within no wrapper = borda focus (não no input/textarea)\n- disabled: borda strong + cursor not-allowed em wrapper E input/textarea\n- readOnly: sem borda adicional, cursor default\n- Validação: error/warning/success sobrescreve a borda (inclusive no focus)\n\nResultado deve ser pixel-perfect em relação ao Figma node 1327:17000."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "dropdown",
@@ -428,7 +430,8 @@
         "css": ".trdr-dropdown {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--surface-primary);   /* #4A4A4A */\n  border: 1px solid var(--border-strong);      /* #A4A4A4 */\n  border-radius: 5px;\n  height: 24px;\n  padding: 0 4px 0 var(--spacing-sm);         /* right=4px, left=8px */\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--content-primary);              /* #FFFFFF */\n  cursor: pointer;\n  min-width: 80px;\n  transition: border-color 0.15s ease;\n}\n\n.trdr-dropdown-lg       { height: 32px; }\n.trdr-dropdown-no-stroke { border-color: transparent; }\n.trdr-dropdown-active   { border-color: var(--border-focus); } /* #00D4FF */\n\n.trdr-dropdown:hover:not(:disabled) { border-color: var(--border-focus); }\n.trdr-dropdown:focus-visible        { outline: none; border-color: var(--border-focus); }\n.trdr-dropdown:disabled             { color: var(--content-tertiary); cursor: not-allowed; }\n\n.trdr-dropdown-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trdr-dropdown-chevron {\n  flex-shrink: 0;\n  width: 24px; height: 24px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--content-tertiary);\n}",
         "react": "import Dropdown from '@/components/ui/Dropdown'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [value, setValue] = useState('WINQ25')\n\n  return (\n    <>\n      {/* Default size */}\n      <Dropdown value={value} size=\"default\" />\n\n      {/* Large size */}\n      <Dropdown value=\"WINFUT\" size=\"lg\" />\n\n      {/* Sem borda */}\n      <Dropdown value=\"Mercado\" stroke={false} />\n\n      {/* Disabled */}\n      <Dropdown value=\"Indisponível\" disabled />\n\n      {/* Active (aberto) */}\n      <Dropdown value={value} state=\"active\" />\n    </>\n  )\n}",
         "prompt": "Implemente o componente Dropdown do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Default: 24px altura | Large: 32px altura\n- Padding: left=8px (--spacing-sm), right=4px\n- Border-radius: 5px (não é --radius-sm, é 5px fixo)\n- Font: 12px / 500 / --font-secondary\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border padrão: --border-strong (#A4A4A4)\n- Border focused/active: --border-focus (#00D4FF)\n- Texto: --content-primary (#FFFFFF)\n- Texto disabled: --content-tertiary (#A4A4A4)\n- Chevron: --content-tertiary (#A4A4A4)\n\nESTRUTURA:\n- Container: button com flex, border, bg\n- Label: flex=1 com text-overflow ellipsis\n- Chevron: 24×24px, SVG path chevron-down\n\nCOMPORTAMENTO:\n- :hover → border-color: --border-focus\n- :focus-visible → outline: none, border-color: --border-focus\n- .trdr-dropdown-active → border-color: --border-focus\n- :disabled → content-tertiary, cursor not-allowed\n- Variante sem-stroke: border-color transparent"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "combo-input",
@@ -506,7 +509,8 @@
         "css": ".trdr-combo-input {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 1px;                        /* Split visual */\n  height: 24px;\n  font-family: var(--font-secondary);\n  font-size: 12px; font-weight: 500;\n  color: var(--content-primary);\n}\n\n.trdr-combo-input-value {\n  flex: 1;\n  display: flex; align-items: center;\n  background-color: var(--surface-primary);  /* #4A4A4A */\n  border: 1px solid transparent;\n  border-right: none;\n  border-radius: 5px 0 0 5px;\n  padding: 0 0 0 var(--spacing-sm);\n  transition: border-color 0.12s ease;\n}\n\n.trdr-combo-input-chevron {\n  width: 24px; height: 24px;\n  display: flex; align-items: center; justify-content: center;\n  background-color: var(--surface-primary);\n  border: 1px solid var(--border-focus);   /* Sempre com borda focus */\n  border-radius: 0 5px 5px 0;\n  cursor: pointer;\n  color: var(--content-tertiary);\n}\n\n.trdr-combo-input-hover .trdr-combo-input-value { border-color: var(--border-strong); }\n.trdr-combo-input-selected-input .trdr-combo-input-value { border-color: var(--border-focus); }\n.trdr-combo-input-selected-input .trdr-combo-input-chevron { border-color: transparent; }\n.trdr-combo-input-selected-chevron .trdr-combo-input-chevron { background: var(--surface-brand); }",
         "react": "import ComboInput from '@/components/ui/ComboInput'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [value, setValue] = useState('16')\n\n  return (\n    <>\n      <ComboInput value={value} />\n      <ComboInput value=\"32\" state=\"hover\" />\n      <ComboInput value=\"8\" state=\"selected-input\" />\n      <ComboInput value=\"16\" state=\"selected-chevron\" onChevronClick={() => console.log('abrir menu')} />\n    </>\n  )\n}",
         "prompt": "Implemente o componente ComboInput do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container: display=flex, gap=1px, height=24px\n- Input Value: flex=1, padding-left=8px, border-radius=5px 0 0 5px\n- Chevron: width=24px, height=24px, border-radius=0 5px 5px 0\n\nTOKENS OBRIGATÓRIOS:\n- BG ambas as seções: --surface-primary (#4A4A4A)\n- Chevron border PADRÃO: --border-focus (#00D4FF) — SEMPRE ciano por padrão\n- Border hover: --border-strong (#A4A4A4) na seção input\n- Selected Input: border-focus na seção input, chevron sem borda\n- Selected Chevron: --surface-brand (#00D4FF29) no chevron\n\nCOMPORTAMENTO:\n- O gap de 1px entre seções cria o \"split\" visual\n- O chevron sempre tem borda focus no estado default (design TRDR)\n- Selecionar o input ativa borda focus na seção esquerda"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "checkbox",
@@ -587,7 +591,8 @@
         "css": ".trdr-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.trdr-checkbox-box {\n  flex-shrink: 0;\n  width: 16px; height: 16px;\n  border-radius: 5px;                        /* Não é --radius-sm */\n  border: 1px solid var(--border-default);   /* #4A4A4A */\n  background: var(--surface-secondary);      /* #222222 */\n  display: flex; align-items: center; justify-content: center;\n  transition: background 0.12s ease, border-color 0.12s ease;\n}\n\n.trdr-checkbox:hover .trdr-checkbox-box { border-color: var(--border-strong); }\n\n.trdr-checkbox-box.trdr-checkbox-checked {\n  background: var(--action-brand-default);   /* #00D4FF */\n  border-color: var(--action-brand-default);\n}\n\n.trdr-checkbox input:focus-visible ~ .trdr-checkbox-box {\n  outline: 2px solid var(--border-focus);    /* #00D4FF */\n  outline-offset: 2px;\n}",
         "react": "import Checkbox from '@/components/ui/Checkbox'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [terms, setTerms] = useState(false)\n  const [updates, setUpdates] = useState<boolean | 'mixed'>('mixed')\n\n  return (\n    <>\n      <Checkbox checked={terms} onChange={setTerms} label=\"Aceitar termos\" />\n      <Checkbox checked={updates} onChange={(v) => setUpdates(v)} label=\"Selecionar todos\" />\n      <Checkbox checked={false} onChange={() => {}} label=\"Desativado\" disabled />\n    </>\n  )\n}",
         "prompt": "Implemente o componente Checkbox do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Box: 16×16px, border-radius: 5px (fixo, não token)\n- Gap label: 8px\n- Checkmark SVG: 8×7px, traço branco (stroke 1.5)\n- Mixed (indeterminado): traço horizontal 8×2px branco\n\nTOKENS OBRIGATÓRIOS:\n- BG Checked/Mixed: --action-brand-default (#00D4FF)\n- BG Unchecked: --surface-secondary (#222222)\n- Border padrão: --border-default (#4A4A4A)\n- Border hover: --border-strong (#A4A4A4)\n- Focus ring: outline 2px --border-focus (#00D4FF) offset 2px\n- Check/Dash: #FFFFFF\n\nESTADOS:\n- checked=true: bg + border = action-brand-default, checkmark SVG visível\n- checked='mixed': mesmo visual de checked + dash horizontal\n- :hover → border-strong\n- :focus-visible → outline border-focus\n- disabled: opacity 0.5, cursor not-allowed"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "radio-button",
@@ -683,7 +688,8 @@
         "css": ".trdr-radio-input {\n  display: inline-flex; align-items: center;\n  gap: var(--spacing-sm); cursor: pointer;\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary);\n}\n\n.trdr-radio-circle {\n  flex-shrink: 0; width: 16px; height: 16px;\n  border-radius: var(--radius-full);\n  border: 1px solid var(--border-default);   /* #4A4A4A */\n  background: var(--surface-secondary);       /* #222222 */\n  display: flex; align-items: center; justify-content: center;\n  position: relative;\n  transition: border-color 0.12s ease, background 0.12s ease;\n}\n\n.trdr-radio-circle-on {\n  background: var(--action-brand-default);\n  border-color: var(--action-brand-default);\n}\n\n.trdr-radio-circle-on::after {\n  content: ''; width: 6px; height: 6px;\n  border-radius: var(--radius-full);\n  background: #ffffff;\n}\n\n.trdr-radio-button {\n  display: inline-flex; align-items: center; justify-content: center;\n  height: 24px; padding: 0 var(--spacing-sm); border-radius: 5px;\n  border: 1px solid var(--border-subtle);    /* #222222 */\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary); cursor: pointer;\n  transition: border-color 0.12s ease, background 0.12s ease;\n}\n\n.trdr-radio-button-active {\n  background: var(--surface-brand);          /* #00D4FF29 */\n  border-color: var(--border-default);\n}\n\n.trdr-radio-button:focus-visible { outline: none; border-color: var(--border-focus); }",
         "react": "import RadioButton from '@/components/ui/RadioButton'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [selected, setSelected] = useState('winq25')\n\n  return (\n    <>\n      {/* Input variant */}\n      <RadioButton\n        variant=\"input\"\n        checked={selected === 'winq25'}\n        label=\"WINQ25\"\n        onChange={() => setSelected('winq25')}\n        name=\"mercado\"\n      />\n      <RadioButton\n        variant=\"input\"\n        checked={selected === 'winfut'}\n        label=\"WINFUT\"\n        onChange={() => setSelected('winfut')}\n        name=\"mercado\"\n      />\n\n      {/* Button variant */}\n      <RadioButton variant=\"button\" label=\"Boleta\" state=\"active\" />\n      <RadioButton variant=\"button\" label=\"Gráfico\" />\n      <RadioButton variant=\"button\" label=\"Desativado\" state=\"disabled\" />\n    </>\n  )\n}",
         "prompt": "Implemente o componente RadioButton do Design System TRDR com 2 variantes.\n\nVARIANTE INPUT (círculo):\n- Círculo: 16×16px, border-radius: 9999px (radius-full)\n- Off: bg=--surface-secondary (#222222), border=--border-default (#4A4A4A)\n- On: bg=--action-brand-default (#00D4FF), border=action-brand-default\n  → Dot interno: 6×6px branco via ::after\n- Hover Off: border=--border-strong (#A4A4A4)\n- Focus: outline 2px --border-focus (#00D4FF) offset 2px\n\nVARIANTE BUTTON (pill):\n- Height: 24px, border-radius: 5px, padding: 0 8px\n- Default: border=--border-subtle (#222222)\n- Active: bg=--surface-brand (#00D4FF29), border=--border-default\n- Focused: border=--border-focus (#00D4FF)\n- Disabled: opacity 0.6, cursor not-allowed\n\nFONT: 12px / 500 / --font-secondary / --content-primary"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "switch",
@@ -771,7 +777,8 @@
         "css": ".trdr-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-sm);         /* 8px */\n  height: 24px;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--content-primary);  /* #FFFFFF */\n  letter-spacing: 0.2px;\n  transition: color 0.15s ease;\n}\n\n.trdr-switch:disabled {\n  cursor: not-allowed;\n  color: var(--content-tertiary); /* #A4A4A4 */\n}\n\n.trdr-switch-track {\n  position: relative;\n  width: 32px;\n  height: 16px;\n  border-radius: var(--radius-full); /* 9999px */\n  background-color: var(--surface-primary); /* #4A4A4A — Off */\n  flex-shrink: 0;\n  transition: background-color 0.15s ease;\n}\n\n.trdr-switch-track-on,\n.trdr-switch-track-mixed {\n  background-color: var(--action-brand-default); /* #00D4FF */\n}\n\n.trdr-switch:disabled .trdr-switch-track {\n  background-color: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-switch:focus-visible .trdr-switch-track {\n  outline: 1px solid var(--border-focus); /* #00D4FF */\n  outline-offset: 2px;\n}\n\n.trdr-switch-knob {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: var(--radius-full);\n  background-color: #ffffff;\n  top: 1px;\n  left: 1px;\n  transition: left 0.15s ease, right 0.15s ease;\n}\n\n.trdr-switch-track-on .trdr-switch-knob {\n  left: auto;\n  right: 1px;\n}\n\n.trdr-switch-mixed-icon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trdr-switch-mixed-dash {\n  width: 8px;\n  height: 1.5px;\n  background-color: #ffffff;\n  border-radius: 1px;\n}",
         "react": "import Switch from '@/components/ui/Switch'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [type, setType] = useState<'on' | 'off' | 'mixed'>('off')\n\n  return (\n    <Switch\n      type={type}\n      label=\"Ativar notificações\"\n      onChange={setType}\n    />\n  )\n}\n\n// Disabled\n<Switch type=\"on\" label=\"Sempre ativo\" disabled />\n\n// Mixed (indeterminado)\n<Switch type=\"mixed\" label=\"Configuração parcial\" onChange={setType} />",
         "prompt": "Implemente o componente Switch do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Track: 32×16px, border-radius: 9999px (--radius-full)\n- Knob: 14×14px, border-radius: 9999px, cor #FFFFFF\n- Knob Off: top=1px, left=1px | Knob On: top=1px, right=1px\n- Gap track→label: 8px (--spacing-sm)\n- Altura total: 24px\n- Label: 12px, weight 500, font-secondary\n\nTOKENS OBRIGATÓRIOS:\n- Track On/Mixed: --action-brand-default (#00D4FF)\n- Track Off: --surface-primary (#4A4A4A)\n- Track Disabled: --surface-secondary (#222222)\n- Knob: #FFFFFF (não tem token, é sempre branco)\n- Focus outline: --border-focus (#00D4FF)\n- Label padrão: --content-primary (#FFFFFF)\n- Label disabled: --content-tertiary (#A4A4A4)\n\nCOMPORTAMENTO:\n- role=\"switch\", aria-checked=\"true\"|\"false\"|\"mixed\"\n- Estado Mixed: traço horizontal 8×1.5px branco centralizado no track\n- Transição suave 0.15s no knob e background do track\n- :focus-visible com outline no track (não no botão inteiro)\n- :disabled: cursor not-allowed, label muted, track escurecido"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "segmented-control",
@@ -830,7 +837,8 @@
         "css": ".trdr-segment-control {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-sm);         /* 8px */\n  flex-wrap: wrap;\n}\n\n.trdr-segment {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-sm) var(--spacing-md);  /* 8px 12px */\n  border-radius: var(--spacing-lg);              /* 16px — pill */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.trdr-segment-active {\n  background-color: var(--action-secondary-default);  /* #4A4A4A */\n  color: var(--content-primary);                      /* #FFFFFF */\n}\n\n.trdr-segment-inactive {\n  background-color: var(--surface-secondary);  /* #222222 */\n  color: var(--content-tertiary);              /* #A4A4A4 */\n}\n\n.trdr-segment-inactive:hover {\n  color: var(--content-secondary);  /* #E8E8E8 */\n}",
         "react": "import { useState } from 'react'\n\nexport default function Example() {\n  const [active, setActive] = useState('avancado')\n  const tabs = [\n    { id: 'avancado', label: 'Avançado' },\n    { id: 'simples', label: 'Simples' },\n  ]\n\n  return (\n    <div className=\"trdr-segment-control\">\n      {tabs.map(tab => (\n        <span\n          key={tab.id}\n          className={`trdr-segment ${active === tab.id ? 'trdr-segment-active' : 'trdr-segment-inactive'}`}\n          onClick={() => setActive(tab.id)}\n        >\n          {tab.label}\n        </span>\n      ))}\n    </div>\n  )\n}",
         "prompt": "Implemente o componente Segmented Control do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container (.trdr-segment-control): display inline-flex, gap 8px (--spacing-sm), flex-wrap wrap\n- Segment (.trdr-segment): padding 8px 12px (--spacing-sm/--spacing-md), border-radius 16px (pill), font 14px/400 Inter\n- Ativo (.trdr-segment-active): bg --action-secondary-default (#4A4A4A), color --content-primary (#FFFFFF)\n- Inativo (.trdr-segment-inactive): bg --surface-secondary (#222222), color --content-tertiary (#A4A4A4)\n- Hover inativo: color --content-secondary (#E8E8E8)\n- Transição: 0.15s ease em background-color e color\n\nUse classes CSS globais. Gerencie o estado ativo via useState no React."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "tooltip",
@@ -917,7 +925,8 @@
         "css": ".trdr-tooltip {\n  position: relative;\n  display: inline-flex; flex-direction: column; align-items: center;\n  max-width: 200px;\n  background-color: var(--bg-primary);  /* #0E0E0E */\n  border-radius: 5px;\n  filter: drop-shadow(0px 0px 0.25px rgba(0,0,0,0.15)) drop-shadow(0px 5px 6px rgba(0,0,0,0.13));\n}\n\n.trdr-tooltip-content {\n  display: flex; align-items: center; gap: var(--spacing-xs);\n  padding: var(--spacing-sm) var(--spacing-md);  /* 8px / 12px */\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary); white-space: nowrap;\n}\n\n.trdr-tooltip-hotkey { color: var(--content-secondary); }\n\n.trdr-tooltip-arrow {\n  position: absolute;\n  width: 12px; height: 6px;\n  background-color: var(--bg-primary);\n}\n\n.trdr-tooltip-arrow-up    { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }\n.trdr-tooltip-arrow-down  { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }\n.trdr-tooltip-arrow-left  { width: 6px; height: 12px; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); }\n.trdr-tooltip-arrow-right { width: 6px; height: 12px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }\n\n.trdr-tooltip-top-center    .trdr-tooltip-arrow { top: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-top-left      .trdr-tooltip-arrow { top: -6px; left: 8px; }\n.trdr-tooltip-top-right     .trdr-tooltip-arrow { top: -6px; right: 8px; }\n.trdr-tooltip-bottom-center .trdr-tooltip-arrow { bottom: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-bottom-left   .trdr-tooltip-arrow { bottom: -6px; left: 8px; }\n.trdr-tooltip-bottom-right  .trdr-tooltip-arrow { bottom: -6px; right: 8px; }\n.trdr-tooltip-right         .trdr-tooltip-arrow { top: 50%; right: -6px; transform: translateY(-50%); }\n.trdr-tooltip-left          .trdr-tooltip-arrow { top: 50%; left: -6px; transform: translateY(-50%); }",
         "react": "import Tooltip from '@/components/ui/Tooltip'\n\nexport default function Example() {\n  return (\n    <>\n      <Tooltip text=\"Salvar\" hotkey=\"⌘S\" direction=\"top-center\" />\n      <Tooltip text=\"Alinhar à esquerda\" direction=\"bottom-left\" />\n      <Tooltip text=\"Mais opções\" direction=\"right\" />\n      <Tooltip text=\"Voltar\" direction=\"left\" />\n    </>\n  )\n}",
         "prompt": "Implemente o componente Tooltip do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Background: --bg-primary (#0E0E0E)\n- Border-radius: 5px\n- Padding: 8px vertical, 12px horizontal (--spacing-sm / --spacing-md)\n- Max-width: 200px\n- Font: 12px / 500 / --font-secondary\n- Seta (caret): 12×6px via CSS clip-path, bg = --bg-primary\n\nTOKENS OBRIGATÓRIOS:\n- Background + seta: --bg-primary (#0E0E0E)\n- Texto: --content-primary (#FFFFFF)\n- Hotkey: --content-secondary (#E8E8E8)\n- Shadow: filter drop-shadow multicamadas\n\nSETAS CSS POR DIREÇÃO:\n- top-*: seta acima, clip-path polygon(50% 0%, 0% 100%, 100% 100%), top=-6px\n- bottom-*: seta abaixo, clip-path polygon(0% 0%, 100% 0%, 50% 100%), bottom=-6px\n- left/right: seta lateral 6×12px, posicionada em top=50%\n- Alinhamentos: center=50%+translateX, left=8px, right=8px"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "abas",
@@ -952,7 +961,8 @@
         "css": ".trdr-abas {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--border-subtle);  /* #222222 */\n  overflow-x: auto;\n  height: 45px;\n}\n\n.trdr-abas-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 0 12px;\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--content-tertiary);      /* #A4A4A4 */\n  white-space: nowrap;\n  transition: color 0.15s ease;\n}\n\n.trdr-abas-item:hover { color: var(--content-secondary); }\n\n.trdr-abas-item-active {\n  color: var(--content-primary);       /* #FFFFFF */\n}\n\n.trdr-abas-item-active::after {\n  content: '';\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  height: 2px;\n  background-color: var(--action-brand-active);  /* #007D99 */\n}",
         "react": "import { useState } from 'react'\n\nconst tabs = ['Todos os tokens', 'Primitivos', 'Semânticos', 'Scale', 'Tipografia']\n\nexport default function Example() {\n  const [active, setActive] = useState(0)\n\n  return (\n    <div className=\"trdr-abas\">\n      {tabs.map((tab, i) => (\n        <div\n          key={tab}\n          className={`trdr-abas-item ${i === active ? 'trdr-abas-item-active' : ''}`}\n          onClick={() => setActive(i)}\n        >\n          {tab}\n        </div>\n      ))}\n    </div>\n  )\n}",
         "prompt": "Implemente o componente Abas do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container (.trdr-abas): flex, align-items stretch, border-bottom 1px --border-subtle (#222222), height 45px, overflow-x auto\n- Item (.trdr-abas-item): position relative, padding 0 12px, flex col centered, font 16px/500 Inter\n- Tab inativa: color --content-tertiary (#A4A4A4), hover: --content-secondary (#E8E8E8)\n- Tab ativa (.trdr-abas-item-active): color --content-primary (#FFFFFF)\n- Indicador ativo: ::after position absolute, bottom 0, left 0, right 0, height 2px, bg --action-brand-active (#007D99)\n- Largura total: 476px | Transição: color 0.15s ease"
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "sub-menu-item",
@@ -996,7 +1006,8 @@
         "css": ".trdr-sub-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 236px;\n  background-color: var(--bg-secondary);     /* #141519 */\n  border: 1px solid var(--border-subtle);    /* #222222 */\n  border-radius: var(--radius-sm);           /* 4px */\n  padding: 8px;\n}\n\n.trdr-sub-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-secondary);           /* #E8E8E8 */\n  transition: background-color 0.1s;\n}\n\n.trdr-sub-menu-item:hover,\n.trdr-sub-menu-item-active {\n  background-color: var(--surface-secondary);  /* #222222 */\n}",
         "react": "import { useState } from 'react'\n\nconst items = [\n  { icon: 'palette', label: 'Todos os tokens' },\n  { icon: 'widgets', label: 'Catálogo' },\n  { icon: 'smart_toy', label: 'Guia & Regras' },\n]\n\nexport default function Example() {\n  const [active, setActive] = useState(0)\n\n  return (\n    <div className=\"trdr-sub-menu\">\n      {items.map(({ icon, label }, i) => (\n        <div\n          key={label}\n          className={`trdr-sub-menu-item ${i === active ? 'trdr-sub-menu-item-active' : ''}`}\n          onClick={() => setActive(i)}\n        >\n          <span\n            className=\"material-symbols-outlined\"\n            style={{ fontSize: 20, color: 'var(--content-tertiary)' }}\n          >\n            {icon}\n          </span>\n          <span>{label}</span>\n        </div>\n      ))}\n    </div>\n  )\n}",
         "prompt": "Implemente o componente Sub-menu Item do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container (.trdr-sub-menu): flex-col, gap 4px, width 236px, bg --bg-secondary (#141519), border 1px --border-subtle (#222222), radius --radius-sm (4px), padding 8px\n- Item (.trdr-sub-menu-item): flex, gap 8px, height 32px, padding 0 8px, radius 4px, font 14px/400 Inter, color --content-secondary (#E8E8E8)\n- Hover / Ativo (.trdr-sub-menu-item-active): bg --surface-secondary (#222222)\n- Ícone: Material Symbols Outlined, font-size 20px, color --content-tertiary (#A4A4A4)\n- Transição: background-color 0.1s\n\nImplemente com estado ativo via useState."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "boleta",
@@ -1108,9 +1119,16 @@
       "code": {
         "html": "<!-- Painel de Negociações (Boleta) -->\n<div class=\"trdr-boleta\">\n\n  <!-- Abas -->\n  <div class=\"trdr-boleta-abas\">\n    <div class=\"trdr-boleta-segment-control\">\n      <button class=\"trdr-boleta-segment trdr-boleta-segment-active\">Avançado</button>\n      <button class=\"trdr-boleta-segment\">Simples</button>\n    </div>\n  </div>\n\n  <!-- Campos -->\n  <div class=\"trdr-boleta-container\">\n    <!-- Estratégia -->\n    <div style=\"display:flex;align-items:center;justify-content:space-between\">\n      <span class=\"trdr-boleta-label\">Estratégia</span>\n      <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">Manejo ▾</span>\n    </div>\n\n    <!-- Disponível -->\n    <div style=\"display:flex;align-items:center;justify-content:space-between\">\n      <span class=\"trdr-boleta-label\">Disp.</span>\n      <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">258.010.200,00 USDT</span>\n    </div>\n\n    <!-- Quantidade -->\n    <div style=\"display:flex;flex-direction:column;gap:8px\">\n      <span class=\"trdr-boleta-label\">Quantidade</span>\n      <input class=\"trdr-boleta-input\" placeholder=\"Inserir\" />\n      <div style=\"display:flex;gap:4px\">\n        <button class=\"trdr-boleta-quick-btn\">1</button>\n        <button class=\"trdr-boleta-quick-btn\">2</button>\n        <button class=\"trdr-boleta-quick-btn\">3</button>\n      </div>\n    </div>\n\n    <!-- Preço da Ordem -->\n    <div style=\"display:flex;flex-direction:column;gap:8px\">\n      <span class=\"trdr-boleta-label\">Preço da Ordem</span>\n      <input class=\"trdr-boleta-input\" value=\"0,00\" />\n    </div>\n\n    <!-- TP/SL -->\n    <label style=\"display:flex;align-items:center;gap:8px;cursor:pointer\">\n      <input type=\"checkbox\" style=\"display:none\" />\n      <span style=\"width:16px;height:16px;border:1px solid var(--border-default);border-radius:5px;background:var(--surface-tertiary);flex-shrink:0;display:block\"></span>\n      <span style=\"font-size:12px;font-weight:500;color:var(--content-primary)\">TP/SL</span>\n    </label>\n  </div>\n\n  <!-- Botões -->\n  <div class=\"trdr-boleta-botoes\">\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">CP Limite</button>\n      <button class=\"trdr-boleta-btn-short\">VD Limite</button>\n    </div>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">CP Mercado</button>\n      <button class=\"trdr-boleta-btn-short\">VD Mercado</button>\n    </div>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">Bid</button>\n      <button class=\"trdr-boleta-btn-short\">Ask</button>\n    </div>\n    <button class=\"trdr-boleta-btn-zerar\">Zerar (5)</button>\n    <button class=\"trdr-boleta-btn-ghost\">Cancelar ordens (2) + Zerar (5)</button>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-ghost\" style=\"width:auto;flex-shrink:0\">Cancelar Ordem</button>\n      <button class=\"trdr-boleta-btn-ghost\" style=\"flex:1;min-width:100px\">Inverter</button>\n    </div>\n  </div>\n\n</div>",
         "css": "/* Boleta — variáveis usadas */\n/* --context-trading-long-default: rgba(79,226,144,0.08)  */\n/* --context-trading-long-hover:   rgba(79,226,144,0.12)  */\n/* --context-trading-long-text:    #4FE290               */\n/* --context-trading-short-default: rgba(243,79,69,0.08)  */\n/* --context-trading-short-hover:   rgba(243,79,69,0.12)  */\n/* --context-trading-short-text:    #F34F45               */\n/* --color-orange-500:             #FF6400  (Zerar)        */\n/* --context-trading-stop-alpha:   rgba(255,100,0,0.08)   */\n/* --surface-secondary:            #222222                */\n/* --action-secondary-default:     #4A4A4A                */\n/* --surface-primary:              #4A4A4A                */\n/* --border-subtle:                #222222                */\n/* --content-success:              #4FE290                */\n\n.trdr-boleta { width: 283px; border-left: 1px solid var(--border-subtle); }\n\n.trdr-boleta-btn-long {\n  flex: 1;\n  background: var(--context-trading-long-default);\n  border-radius: var(--radius-md);\n  padding: 8px;\n  border: none; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--context-trading-long-text);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-long:hover { background: var(--context-trading-long-hover); }\n\n.trdr-boleta-btn-short {\n  flex: 1;\n  background: var(--context-trading-short-default);\n  border-radius: var(--radius-md);\n  padding: 8px 12px;\n  border: none; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--context-trading-short-text);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-short:hover { background: var(--context-trading-short-hover); }\n\n.trdr-boleta-btn-zerar {\n  width: 100%; height: 32px;\n  border: 1px solid var(--color-orange-500);\n  border-radius: var(--radius-md);\n  background: transparent; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--color-orange-500);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-zerar:hover { background: var(--context-trading-stop-alpha); }",
-        "react": "import Boleta from '@/components/ui/Boleta'\n\n// Versão padrão (Avançado)\n<Boleta />\n\n// Versão Simples\n<Boleta versao=\"simples\" />\n\n// Com className customizado\n<Boleta versao=\"avancado\" className=\"meu-override\" />",
-        "prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n   - Segmented control pill (border-radius: 9999px, bg: --surface-secondary #222)\n   - 2 segments: \"Avançado\" (ativo) e \"Simples\" (inativo)\n   - Segment ativo: bg --action-secondary-default #4A4A4A, radius 16px, padding 8px 12px\n   - Segment inativo: bg transparente, text --content-tertiary\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n   - Linha \"Estratégia\": label (tertiary 12px/500) + valor \"Manejo\" + chevron (primary)\n   - Linha \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n   - Grupo \"Quantidade\": label 12px + input 32px (bg --surface-primary, radius 8px, padding 8px) + 3 quick buttons (border --border-default, radius 8px, padding 8px 12px, font 14px/600 secondary, gap 4px)\n   - Grupo \"Preço da Ordem\": label 12px + input 32px\n   - Linha \"TP/SL\": checkbox 16x16 (border default, radius 5px, bg --surface-tertiary) + label primary\n\n3. BOTÕES (padding: 8px, gap: 8px)\n   - 4 rows de ação (gap 8px cada):\n     • Long (flex:1, bg --context-trading-long-default, text --context-trading-long-text #4FE290, radius 8px, padding 8px, font 14px/600)\n     • Short (flex:1, bg --context-trading-short-default, text --context-trading-short-text #F34F45, radius 8px, padding 8px 12px, font 14px/600)\n   - \"Zerar (5)\": width 100%, height 32px, border 1px sólido --color-orange-500 (#FF6400), text --color-orange-500, radius 8px\n   - \"Cancelar ordens (2) + Zerar (5)\": width 100%, border --border-default, text --content-secondary, radius 8px\n   - Row \"Cancelar Ordem\" (shrink-0) + \"Inverter\" (flex:1 min-width:100px): ambos border --border-default\n   - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success #4FE290), + 2 linhas meta 12px tertiary\n\nHover states: long-hover rgba(79,226,144,0.12), short-hover rgba(243,79,69,0.12), zerar-hover --context-trading-stop-alpha.\nResultado pixel-perfect com exatamente 283px de largura."
-      }
+        "react": "import Boleta from '@/components/ui/Boleta'\n// Sub-componentes usados internamente:\n// import SegmentedControl from '@/components/ui/SegmentedControl'\n// import TextInput from '@/components/ui/TextInput'\n// import Checkbox from '@/components/ui/Checkbox'\n// import Button from '@/components/ui/Button'\n// import Dropdown from '@/components/ui/Dropdown'\n\n// Versão padrão (Avançado)\n<Boleta />\n\n// Versão Simples\n<Boleta versao=\"simples\" />\n\n// Com className customizado\n<Boleta versao=\"avancado\" className=\"meu-override\" />",
+        "prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nSUB-COMPONENTES OBRIGATÓRIOS (importar do DS):\n- SegmentedControl — abas Avançado/Simples\n- TextInput (size=\"large\") — campos Quantidade e Preço da Ordem\n- Checkbox — toggle TP/SL\n- Button (variant=\"long\"/\"short\"/\"ghost\") — botões de ação de compra/venda e ações secundárias\n- Dropdown (stroke={false}) — seletor de Estratégia\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n   - <SegmentedControl tabs={['Avançado', 'Simples']} active={0} />\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n   - \"Estratégia\": label + <Dropdown value=\"Manejo\" stroke={false} />\n   - \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n   - \"Quantidade\": label + <TextInput placeholder=\"Inserir\" size=\"large\" /> + 3 quick <Button variant=\"ghost\" size=\"lg\">\n   - \"Preço da Ordem\": label + <TextInput defaultValue=\"0,00\" size=\"large\" />\n   - <Checkbox checked={false} label=\"TP/SL\" />\n\n3. BOTÕES (padding: 8px, gap: 8px)\n   - 4 rows de ação: <Button variant=\"long\" size=\"lg\"> + <Button variant=\"short\" size=\"lg\">\n   - \"Zerar (5)\": botão custom (border --color-orange-500, text laranja) — sem variante atômica\n   - \"Cancelar ordens (2) + Zerar (5)\": <Button variant=\"ghost\" size=\"lg\">\n   - Row \"Cancelar Ordem\" + \"Inverter\": <Button variant=\"ghost\" size=\"lg\">\n   - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success), + 2 linhas meta\n\nResultado pixel-perfect com exatamente 283px de largura."
+      },
+      "dependencies": [
+        "segmented-control",
+        "text-input",
+        "checkbox",
+        "button",
+        "dropdown"
+      ]
     },
     {
       "slug": "tabela-cotacoes",
@@ -1196,9 +1214,12 @@
       "code": {
         "html": "<!-- Tabela de Cotações TRDR (Figma: 77:3681) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-cotacoes\">\n    <colgroup>\n      <col style=\"width:65px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Ativo</th><th>Último</th><th>Q Últ</th><th>Var %</th>\n        <th>Tend</th><th>Dif</th><th>Stat...</th><th>QOfc</th>\n        <th>Ofc</th><th>Ofv</th><th>QOfv</th><th>Teórico</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class=\"trdr-tabela-cotacoes-row-selected\">\n        <td>ITUB4</td>\n        <td class=\"col-ultimo\">50.47</td>\n        <td>100</td>\n        <td class=\"col-var-down\">-0.72%</td>\n        <td><span class=\"col-tend-icon col-tend-down\">arrow_drop_down</span></td>\n        <td>0.36</td><td>.</td><td>1.000</td>\n        <td>50.47</td><td>50.49</td><td>1.300</td><td>.</td>\n      </tr>\n      <tr>\n        <td>VALE3</td>\n        <td class=\"col-ultimo\">92,00</td>\n        <td>200</td>\n        <td class=\"col-var-up\">+1.20%</td>\n        <td><span class=\"col-tend-icon col-tend-up\">arrow_drop_up</span></td>\n        <td>0.50</td><td>.</td><td>2.700</td>\n        <td>92,00</td><td>92,10</td><td>4.000</td><td>.</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
         "css": "/* Tabela de Cotações — TRDR Design System */\n/* Tokens: --context-trading-up (#4FE290), --context-trading-down (#F34F45) */\n/* Tokens: --surface-primary (#4A4A4A), --surface-secondary (#222222)       */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-cotacoes {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary);         /* #FFFFFF */\n}\n\n.trdr-tabela-cotacoes thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);   /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-cotacoes tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.trdr-tabela-cotacoes tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-cotacoes tbody tr.trdr-tabela-cotacoes-row-selected {\n  background: var(--bg-secondary); /* #141519 */\n}\n\n.trdr-tabela-cotacoes td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes td.col-ultimo {\n  background: var(--surface-primary); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes .col-var-up   { color: var(--context-trading-up);   } /* #4FE290 */\n.trdr-tabela-cotacoes .col-var-down { color: var(--context-trading-down); } /* #F34F45 */\n\n.trdr-tabela-cotacoes .col-tend-icon {\n  font-family: 'Material Symbols Outlined';\n  font-size: 20px;\n  font-variation-settings: 'FILL' 1, 'GRAD' 0, 'wght' 400;\n  vertical-align: middle;\n}\n.trdr-tabela-cotacoes .col-tend-up   { color: var(--context-trading-up);   }\n.trdr-tabela-cotacoes .col-tend-down { color: var(--context-trading-down); }",
-        "react": "import TabelaCotacoes, { CotacaoRow } from '@/components/ui/TabelaCotacoes'\n\nconst rows: CotacaoRow[] = [\n  {\n    ativo: 'ITUB4',\n    ultimo: '50.47',\n    qUlt: 100,\n    varPct: -0.72,\n    tend: 'down',\n    dif: '0.36',\n    qOfc: '1.000',\n    ofc: '50.47',\n    ofv: '50.49',\n    qOfv: '1.300',\n    selected: true,\n  },\n  {\n    ativo: 'VALE3',\n    ultimo: '92,00',\n    qUlt: 200,\n    varPct: 1.20,\n    tend: 'up',\n    dif: '0.50',\n  },\n]\n\nexport default function Example() {\n  return <TabelaCotacoes rows={rows} />\n}",
-        "prompt": "Crie um componente React 'TabelaCotacoes' pixel-perfect baseado no Figma TRDR (node 77:3681).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nAtivo=65px, Último=80px, Q Últ=65px, Var%=65px, Tend=65px, Dif=65px,\nStat=65px, QOfc=65px, Ofc=65px, Ofv=65px, QOfv=65px, Teórico=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.08)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.selected: background var(--bg-secondary) /* #141519 */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary) /* #FFFFFF */\n- td.col-ultimo: background var(--surface-primary) /* #4A4A4A */\n- td variação positiva: color var(--context-trading-up) /* #4FE290 */\n- td variação negativa: color var(--context-trading-down) /* #F34F45 */\n- td tendência: ícone Material Symbols Outlined 'arrow_drop_up'/'arrow_drop_down', 20px, FILL 1\n\nINTERFACE TypeScript:\ninterface CotacaoRow {\n  ativo: string; ultimo: string|number; qUlt?: string|number\n  varPct: number; tend?: 'up'|'down'|null; dif?: string|number\n  status?: string; qOfc?: string|number; ofc?: string|number\n  ofv?: string|number; qOfv?: string|number; teorico?: string|number\n  selected?: boolean\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
-      }
+        "react": "import TabelaCotacoes, { CotacaoRow } from '@/components/ui/TabelaCotacoes'\n// Badge é importado internamente — a coluna Var% renderiza <Badge> automaticamente\n\nconst rows: CotacaoRow[] = [\n  {\n    ativo: 'ITUB4',\n    ultimo: '50.47',\n    qUlt: 100,\n    varPct: -0.72,\n    tend: 'down',\n    dif: '0.36',\n    qOfc: '1.000',\n    ofc: '50.47',\n    ofv: '50.49',\n    qOfv: '1.300',\n    selected: true,\n  },\n  {\n    ativo: 'VALE3',\n    ultimo: '92,00',\n    qUlt: 200,\n    varPct: 1.20,\n    tend: 'up',\n    dif: '0.50',\n  },\n]\n\nexport default function Example() {\n  return <TabelaCotacoes rows={rows} />\n}",
+        "prompt": "Crie um componente React 'TabelaCotacoes' pixel-perfect baseado no Figma TRDR (node 77:3681).\n\nCOMPOSIÇÃO: A coluna Var% usa o componente Badge (@/components/ui/Badge) com dot.\nVariação positiva → Badge variant=\"success\", negativa → Badge variant=\"warning\".\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nAtivo=65px, Último=80px, Q Últ=65px, Var%=65px, Tend=65px, Dif=65px,\nStat=65px, QOfc=65px, Ofc=65px, Ofv=65px, QOfv=65px, Teórico=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.08)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.selected: background var(--bg-secondary) /* #141519 */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary) /* #FFFFFF */\n- td.col-ultimo: background var(--surface-primary) /* #4A4A4A */\n- td variação positiva: color var(--context-trading-up) /* #4FE290 */\n- td variação negativa: color var(--context-trading-down) /* #F34F45 */\n- td tendência: ícone Material Symbols Outlined 'arrow_drop_up'/'arrow_drop_down', 20px, FILL 1\n\nINTERFACE TypeScript:\ninterface CotacaoRow {\n  ativo: string; ultimo: string|number; qUlt?: string|number\n  varPct: number; tend?: 'up'|'down'|null; dif?: string|number\n  status?: string; qOfc?: string|number; ofc?: string|number\n  ofv?: string|number; qOfv?: string|number; teorico?: string|number\n  selected?: boolean\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+      },
+      "dependencies": [
+        "badge"
+      ]
     },
     {
       "slug": "tabela-ordens",
@@ -1274,9 +1295,12 @@
       "code": {
         "html": "<!-- Tabela de Ordens TRDR (Figma: 336:3114) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-ordens\">\n    <colgroup>\n      <col style=\"width:81px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:104px\"><col style=\"width:79px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:86px\"> <col style=\"width:79px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Horário</th><th>Ativo</th><th>C/V</th><th>Preço</th>\n        <th>Médio</th><th>Qtde</th><th>Disp</th><th>Aberta</th>\n        <th>Exec</th><th>Status</th><th>Validade</th><th>Origem</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>11:32:56</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>20</td><td>.</td><td>.</td><td>20</td>\n        <td>Aberta</td><td>.</td><td>Loss</td>\n      </tr>\n      <tr>\n        <td>11:35:24</td><td>WDOK18</td>\n        <td class=\"col-cv-v\">V</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>19</td><td>.</td><td>.</td><td>19</td>\n        <td>Aberta</td><td>.</td><td>Criptor</td>\n      </tr>\n      <tr class=\"trdr-tabela-ordens-row-cancelada\">\n        <td>11:36:03</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>16</td><td>.</td><td>.</td><td>16</td>\n        <td>Cancelada</td><td>.</td><td>Criptor</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
         "css": "/* Tabela de Ordens — TRDR Design System */\n/* Tokens: --context-trading-long-text (#6DE7A2) — C (Compra)               */\n/* Tokens: --context-trading-short-text (#F56D64) — V (Venda)               */\n/* Tokens: --context-trading-short-default — fundo linha cancelada           */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-ordens {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-tabela-ordens thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-ordens th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);  /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-ordens tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.trdr-tabela-ordens tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-ordens tbody tr.trdr-tabela-ordens-row-cancelada {\n  background: var(--context-trading-short-default); /* rgba(241,49,38,0.08) */\n}\n\n.trdr-tabela-ordens td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens .col-cv-c {\n  color: var(--context-trading-long-text);  /* #6DE7A2 */\n  font-weight: 600;\n}\n\n.trdr-tabela-ordens .col-cv-v {\n  color: var(--context-trading-short-text); /* #F56D64 */\n  font-weight: 600;\n}",
-        "react": "import TabelaOrdens, { OrdemRow } from '@/components/ui/TabelaOrdens'\n\nconst rows: OrdemRow[] = [\n  {\n    horario: '11:32:56',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 20,\n    exec: 20,\n    status: 'aberta',\n    origem: 'Loss',\n  },\n  {\n    horario: '11:35:24',\n    ativo: 'WDOK18',\n    tipo: 'V',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 19,\n    exec: 19,\n    status: 'aberta',\n    origem: 'Criptor',\n  },\n  {\n    horario: '11:36:03',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 16,\n    exec: 16,\n    status: 'cancelada',\n    origem: 'Criptor',\n  },\n]\n\nexport default function Example() {\n  return <TabelaOrdens rows={rows} />\n}",
-        "prompt": "Crie um componente React 'TabelaOrdens' pixel-perfect baseado no Figma TRDR (node 336:3114).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nHorário=81px, Ativo=80px, C/V=65px, Preço=104px, Médio=79px,\nQtde=65px, Disp=65px, Aberta=65px, Exec=65px, Status=86px, Validade=79px, Origem=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.05)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.cancelada: background var(--context-trading-short-default) /* rgba(241,49,38,0.08) */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary), text-overflow ellipsis\n- td.col-cv-c (Compra): color var(--context-trading-long-text) /* #6DE7A2 */, font-weight 600\n- td.col-cv-v (Venda): color var(--context-trading-short-text) /* #F56D64 */, font-weight 600\n\nINTERFACE TypeScript:\ntype OrdemStatus = 'aberta' | 'executada' | 'cancelada' | 'parcial'\ninterface OrdemRow {\n  horario: string; ativo: string; tipo: 'C'|'V'\n  preco: string|number; medio?: string|number\n  qtde: number; disp?: string|number; aberta?: string|number; exec?: string|number\n  status: OrdemStatus; validade?: string; origem?: string\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
-      }
+        "react": "import TabelaOrdens, { OrdemRow } from '@/components/ui/TabelaOrdens'\n// Badge é importado internamente — a coluna Status renderiza <Badge> automaticamente\n\nconst rows: OrdemRow[] = [\n  {\n    horario: '11:32:56',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 20,\n    exec: 20,\n    status: 'aberta',\n    origem: 'Loss',\n  },\n  {\n    horario: '11:35:24',\n    ativo: 'WDOK18',\n    tipo: 'V',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 19,\n    exec: 19,\n    status: 'aberta',\n    origem: 'Criptor',\n  },\n  {\n    horario: '11:36:03',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 16,\n    exec: 16,\n    status: 'cancelada',\n    origem: 'Criptor',\n  },\n]\n\nexport default function Example() {\n  return <TabelaOrdens rows={rows} />\n}",
+        "prompt": "Crie um componente React 'TabelaOrdens' pixel-perfect baseado no Figma TRDR (node 336:3114).\n\nCOMPOSIÇÃO: A coluna Status usa o componente Badge (@/components/ui/Badge) com dot.\nMapeamento de variantes: aberta→brand, executada→success, cancelada→warning, parcial→neutral.\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nHorário=81px, Ativo=80px, C/V=65px, Preço=104px, Médio=79px,\nQtde=65px, Disp=65px, Aberta=65px, Exec=65px, Status=86px, Validade=79px, Origem=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.05)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.cancelada: background var(--context-trading-short-default) /* rgba(241,49,38,0.08) */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary), text-overflow ellipsis\n- td.col-cv-c (Compra): color var(--context-trading-long-text) /* #6DE7A2 */, font-weight 600\n- td.col-cv-v (Venda): color var(--context-trading-short-text) /* #F56D64 */, font-weight 600\n\nINTERFACE TypeScript:\ntype OrdemStatus = 'aberta' | 'executada' | 'cancelada' | 'parcial'\ninterface OrdemRow {\n  horario: string; ativo: string; tipo: 'C'|'V'\n  preco: string|number; medio?: string|number\n  qtde: number; disp?: string|number; aberta?: string|number; exec?: string|number\n  status: OrdemStatus; validade?: string; origem?: string\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+      },
+      "dependencies": [
+        "badge"
+      ]
     },
     {
       "slug": "card",
@@ -1330,7 +1354,8 @@
         "css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--scale-spacing-md);          /* 12px entre container1 e footer */\n  min-width: 250px;\n  padding: var(--scale-spacing-2xl);     /* 24px */\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--scale-radius-md); /* 12px */\n  text-decoration: none;\n  overflow: hidden;\n  transition: border-color 0.15s ease, background-color 0.15s ease;\n  cursor: pointer;\n}\n\n.card:hover {\n  border-color: var(--border-default);\n  background: var(--surface-secondary);\n}\n\n/* Container 1 — conteúdo principal */\n.card-container1 {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Borda inferior quando há footer */\n.card-has-footer {\n  border-bottom: 1px solid var(--border-subtle);\n  padding-bottom: var(--scale-spacing-md); /* 12px */\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* Material Symbols Outlined — ExtraLight (wght 100) */\n.card-icon {\n  font-family: 'Material Symbols Outlined';\n  font-size: 44px;\n  font-style: normal;\n  line-height: 1;\n  color: var(--content-brand);\n  font-variation-settings: 'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48;\n}\n\n.card-badges {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n/* H-6: Space Grotesk Medium 500, 26px */\n.card-title {\n  font-family: var(--font-primary); /* Space Grotesk */\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.1;\n  color: var(--content-secondary);\n}\n\n/* B-3: Inter Regular 400, 14px */\n.card-desc {\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-tertiary);\n  margin: 0;\n}\n\n/* Container 2 — footer */\n.card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* B-4: Inter Medium 500, 12px, 0.2px tracking */\n.card-figma-id {\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  color: var(--content-tertiary);\n  font-style: normal;\n}",
         "react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n  label: string\n  variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n  href: string\n  icon?: string             // Material Symbols Outlined name (ex: 'palette')\n  title: string\n  description: string\n  headerBadges?: CardBadge[] // badges no header (topo direito)\n  footerLeft?: string        // texto do footer (ex: Figma ID '2316:2462')\n  footerBadges?: CardBadge[] // badges do footer\n  className?: string\n}\n\nexport default function Card({\n  href, icon, title, description,\n  headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n  const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n  return (\n    <Link href={href} className={`${styles.card} ${className}`}>\n\n      {/* Container 1 — conteúdo principal */}\n      <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n        <div className={styles.header}>\n          {icon && (\n            <span\n              className={styles.icon}\n              style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n            >\n              {icon}\n            </span>\n          )}\n          {headerBadges && headerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {headerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n        <span className={styles.title}>{title}</span>\n        <p className={styles.desc}>{description}</p>\n      </div>\n\n      {/* Container 2 — footer (opcional) */}\n      {hasFooter && (\n        <div className={styles.container2}>\n          {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n          {footerBadges && footerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {footerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n    </Link>\n  )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n  display: flex; flex-direction: column;\n  gap: var(--scale-spacing-md);\n  padding: var(--scale-spacing-2xl);\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--scale-radius-md);\n  text-decoration: none; cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n.card:hover { border-color: var(--border-default); background: var(--surface-secondary); }\n.container1 { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.hasBorder { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--scale-spacing-md); }\n.header { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }\n.icon { font-family: 'Material Symbols Outlined'; font-size: 44px; color: var(--content-brand); }\n.badges { display: flex; align-items: center; gap: 4px; }\n.title { font-family: var(--font-primary); font-size: 26px; font-weight: 500; color: var(--content-secondary); }\n.desc { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; color: var(--content-tertiary); margin: 0; }\n.container2 { display: flex; align-items: center; justify-content: space-between; width: 100%; }\n.footerLeft { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--content-tertiary); }\n*/",
         "prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--scale-radius-md) — 12px\n- Padding: var(--scale-spacing-2xl) — 24px\n- Gap entre containers: var(--scale-spacing-md) — 12px\n- Transição: border-color e background-color em 0.15s ease\n\nImplemente como componente React com CSS Module. Use as classes .trdr-badge e .trdr-badge-{variant} para os badges. O componente deve aceitar as props: href, icon?, title, description, headerBadges?, footerLeft?, footerBadges?."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "floating-menu",
@@ -1480,7 +1505,8 @@
         "css": "/* Floating Menu TRDR — classes globais */\n\n/* Container */\n.trdr-floating-menu {\n  background: var(--bg-secondary);          /* #141519 */\n  border: 1px solid var(--border-subtle);   /* #222222 */\n  border-radius: var(--radius-md);          /* 8px */\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);\n  padding: var(--spacing-sm);               /* 8px */\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);                   /* 4px */\n  overflow: hidden;\n}\n\n/* Item — botão de ação */\n.trdr-floating-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);                   /* 8px */\n  height: 32px;\n  padding: 0 var(--spacing-sm);\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);          /* 4px */\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-secondary);          /* #E8E8E8 */\n  text-align: left;\n  width: 100%;\n  flex-shrink: 0;\n  transition: background 0.12s ease;\n}\n\n.trdr-floating-menu-item:not(:disabled):hover {\n  background: var(--surface-secondary);     /* #222222 */\n}\n\n.trdr-floating-menu-item:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n/* Título de seção */\n.trdr-floating-menu-title {\n  color: var(--content-tertiary);           /* #A4A4A4 */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  width: 100%;\n  flex-shrink: 0;\n  padding: 0 var(--spacing-sm);\n}\n\n.trdr-floating-menu-title-sm {             /* size=\"sm\" — mercados, color-picker */\n  font-size: 10px;\n  line-height: 15px;\n  padding: 4px var(--spacing-xs) 2px;\n}\n\n/* Divisor */\n.trdr-floating-menu-divider {\n  height: 1px;\n  background: var(--border-subtle);        /* #222222 */\n  width: 100%;\n  flex-shrink: 0;\n}",
         "react": "import FloatingMenu from '@/components/ui/FloatingMenu'\n\n// Ações simples (como na Janela)\n<FloatingMenu width={172}>\n  <FloatingMenu.Item icon=\"close\" onClick={onClose}>Fechar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"remove\" onClick={onMinimize}>Minimizar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"arrow_outward\" onClick={onMaximize}>Maximizar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"keep\" onClick={onPin}>Fixar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"edit\" onClick={onRename}>Renomear aba</FloatingMenu.Item>\n</FloatingMenu>\n\n// Com seções e divisores (como seletor de ativo)\n<FloatingMenu width={280}>\n  <FloatingMenu.Title>Favoritos</FloatingMenu.Title>\n  <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('WINFUT')}>WINFUT (Q19)</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('PETR4')}>PETR4</FloatingMenu.Item>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Title>Recentes</FloatingMenu.Title>\n  <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('BBDC4')}>BBDC4</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('ITUB4')}>ITUB4</FloatingMenu.Item>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Item icon=\"search\">Buscar ativo...</FloatingMenu.Item>\n</FloatingMenu>\n\n// Item desabilitado\n<FloatingMenu width={240}>\n  <FloatingMenu.Item icon=\"bar_chart\">Volume</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"trending_up\">Média Móvel</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"add\" disabled>Indicador premium</FloatingMenu.Item>\n</FloatingMenu>\n\n// Conteúdo customizado (qualquer ReactNode como children)\n<FloatingMenu width={260}>\n  <FloatingMenu.Title>Conta</FloatingMenu.Title>\n  <div style={{ padding: '4px 8px' }}>\n    {/* Dropdown, Checkbox, Slider, etc. */}\n  </div>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Item icon=\"logout\">Sair</FloatingMenu.Item>\n</FloatingMenu>",
         "prompt": "Implemente o componente FloatingMenu do Design System TRDR — menu flutuante genérico pixel-perfect com Figma 1921:55380.\n\nCOMPOUND COMPONENT — 4 partes:\n1. FloatingMenu (container): bg var(--bg-secondary) #141519, border 1px solid var(--border-subtle) #222, border-radius var(--radius-md) 8px, box-shadow 0 4px 12px rgba(0,0,0,0.30), padding var(--spacing-sm) 8px, gap var(--spacing-xs) 4px, flex-col, overflow hidden. Prop width?: number|string.\n\n2. FloatingMenu.Item (button): height 32px, padding 0 var(--spacing-sm) 8px, gap var(--spacing-sm) 8px, border-radius var(--radius-sm) 4px, background transparent, color var(--content-secondary) #E8E8E8, font Inter 14px/400. :hover (não disabled) → background var(--surface-secondary) #222. :disabled → opacity 0.45, cursor not-allowed. Props: icon?: string (Material Symbols name), disabled?: boolean, onClick, children.\n\n3. FloatingMenu.Title (p): color var(--content-tertiary) #A4A4A4, font Inter 14px/400. Prop size: \"default\" (14px, padding-left 8px) | \"sm\" (10px/15px, padding 4px 4px 2px — usado em mercados/color-picker). children: string.\n\n4. FloatingMenu.Divider (div): height 1px, background var(--border-subtle) #222, width 100%.\n\nICON (Material Symbols Outlined): font-family 'Material Symbols Outlined', font-size 20px, line-height 20px, font-variation-settings: 'FILL' 0 'GRAD' 0, color var(--content-tertiary) #A4A4A4, flex-shrink 0.\n\nLABEL: flex:1, min-width 0, overflow hidden, text-overflow ellipsis, white-space nowrap.\n\nAPI: import FloatingMenu from '@/components/ui/FloatingMenu'\n<FloatingMenu width={172}>\n  <FloatingMenu.Item icon=\"close\" onClick={fn}>Fechar</FloatingMenu.Item>\n  <FloatingMenu.Title>Seção</FloatingMenu.Title>\n  <FloatingMenu.Divider />\n</FloatingMenu>\n\nUse Object.assign(FloatingMenuRoot, { Item, Title, Divider }) para montar o compound component. NUNCA hex direto — apenas tokens var(--*). NUNCA --scale-spacing-* ou --scale-radius-*."
-      }
+      },
+      "dependencies": []
     },
     {
       "slug": "janela",
@@ -1719,9 +1745,13 @@
       "code": {
         "html": "<!-- Janela TRDR — exemplo estático (Figma 1909:41600) -->\n<div class=\"trdr-janela\">\n\n  <!-- HEADER -->\n  <div class=\"trdr-janela-header\">\n    <span class=\"trdr-janela-tag-ai\">\n      <span class=\"material-symbols-outlined\" style=\"font-size:12px\">auto_awesome</span>\n      AI\n    </span>\n\n    <div class=\"trdr-janela-tool-tabs\">\n      <button class=\"trdr-janela-tool-tab trdr-janela-tool-tab-active\">Ferramenta 1</button>\n      <button class=\"trdr-janela-tool-tab\">Ferramenta 2</button>\n      <button class=\"trdr-janela-tool-tab\">Ferramenta 3</button>\n      <button class=\"trdr-janela-tool-chevron\">\n        <span class=\"material-symbols-outlined\">keyboard_arrow_down</span>\n      </button>\n    </div>\n\n    <div class=\"trdr-janela-header-actions\">\n      <span class=\"trdr-janela-divider\"></span>\n      <button class=\"trdr-janela-icon-button trdr-janela-icon-link\">\n        <span class=\"material-symbols-outlined\">link</span>\n      </button>\n      <button class=\"trdr-janela-multi\">\n        Multi\n        <span class=\"material-symbols-outlined\" style=\"font-size:16px\">keyboard_arrow_down</span>\n      </button>\n      <button class=\"trdr-janela-icon-button\">\n        <span class=\"material-symbols-outlined\">more_horiz</span>\n      </button>\n      <button class=\"trdr-janela-icon-button\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- PILL TABS (filtros) -->\n  <div class=\"trdr-janela-pill-row\" role=\"tablist\">\n    <button class=\"trdr-janela-pill trdr-janela-pill-active\">Aba 1</button>\n    <button class=\"trdr-janela-pill\">Aba 2</button>\n    <button class=\"trdr-janela-pill\">Aba 3</button>\n    <button class=\"trdr-janela-pill\">Aba 4</button>\n    <button class=\"trdr-janela-pill\">Aba 5</button>\n  </div>\n\n  <!-- CONTAINER (slot) -->\n  <div class=\"trdr-janela-container\">\n    <div class=\"trdr-janela-container-inner\">\n      <!-- Slot: substitua pelo seu componente -->\n      <span class=\"trdr-janela-coringa\">Componente coringa</span>\n    </div>\n  </div>\n\n  <!-- FLOATING MENU (opcional — more_horiz) -->\n  <div class=\"trdr-janela-actions-menu\" role=\"menu\">\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">close</span>Fechar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">remove</span>Minimizar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">arrow_outward</span>Maximizar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">keep</span>Fixar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">edit</span>Renomear aba</button>\n  </div>\n\n</div>",
         "css": "/* Janela TRDR — Figma 1909:41600 (476×312)\n * Tokens semânticos usados (todos em src/styles/tokens.css):\n * --bg-secondary #141519   --bg-tertiary #1A1A1A   --bg-brand #00D4FF\n * --surface-secondary #222222   --action-secondary-default #4A4A4A\n * --content-primary #FFFFFF   --content-secondary #E8E8E8   --content-tertiary #A4A4A4\n * --border-subtle #222222\n * --radius-sm 4px   --radius-md 8px   --radius-lg 16px\n * --spacing-xs 4px  --spacing-sm 8px  --spacing-md 12px  --spacing-lg 16px\n */\n\n.trdr-janela {\n  width: 476px;\n  height: 312px;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  position: relative;\n  overflow: hidden;\n  font-family: var(--font-secondary);\n}\n\n/* HEADER */\n.trdr-janela-header {\n  display: flex; align-items: center; gap: 8px;\n  height: 41px; padding: 0 8px;\n  background: var(--bg-secondary);\n  border-bottom: 1px solid var(--border-subtle);\n}\n.trdr-janela-tag-ai {\n  display: inline-flex; align-items: center; gap: 2px;\n  padding: 2px 4px;\n  background: var(--bg-brand);\n  border-radius: var(--radius-sm);\n  font-size: 11px; font-weight: 600;\n  color: var(--content-primary);\n}\n.trdr-janela-tool-tabs {\n  display: flex; align-items: stretch; flex: 1; min-width: 0; height: 100%;\n  overflow: hidden;\n}\n.trdr-janela-tool-tab {\n  padding: 0 12px; height: 100%;\n  background: transparent; border: none; cursor: pointer;\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-tertiary);\n  position: relative; transition: color 0.15s ease;\n  white-space: nowrap;\n}\n.trdr-janela-tool-tab:hover:not(.trdr-janela-tool-tab-active) { color: var(--content-secondary); }\n.trdr-janela-tool-tab-active { color: var(--content-primary); }\n.trdr-janela-tool-tab-active::after {\n  content: ''; position: absolute; left: 0; right: 0; bottom: 0;\n  height: 2px; background: var(--bg-brand);\n}\n.trdr-janela-tool-chevron {\n  width: 40px; height: 40px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: transparent; border: none; cursor: pointer;\n  color: var(--content-tertiary);\n}\n.trdr-janela-header-actions {\n  display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 100%;\n}\n.trdr-janela-divider { width: 1px; height: 33px; background: var(--border-subtle); }\n.trdr-janela-icon-button {\n  width: 24px; height: 24px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: transparent; border: none; cursor: pointer;\n  color: var(--content-tertiary);\n  transition: color 0.15s ease;\n}\n.trdr-janela-icon-button:hover { color: var(--content-secondary); }\n.trdr-janela-icon-link { color: var(--bg-brand); }\n.trdr-janela-multi {\n  display: inline-flex; align-items: center; gap: 4px;\n  height: 33px; padding: 0 8px;\n  background: var(--action-secondary-default);\n  border: none; border-radius: var(--radius-lg);\n  cursor: pointer;\n  font-size: 14px; color: var(--content-primary);\n}\n\n/* PILL TABS (filtros) */\n.trdr-janela-pill-row {\n  display: flex; align-items: center; gap: 8px;\n  height: 45px; padding: 8px;\n  background: var(--bg-tertiary);\n  border-bottom: 1px solid var(--border-subtle);\n  overflow: hidden;\n}\n.trdr-janela-pill {\n  height: 31px; padding: 8px 12px;\n  background: var(--surface-secondary);\n  border: none; border-radius: var(--radius-lg);\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-tertiary);\n  cursor: pointer; white-space: nowrap;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.trdr-janela-pill-active {\n  background: var(--action-secondary-default);\n  color: var(--content-primary);\n}\n\n/* CONTAINER (slot) */\n.trdr-janela-container {\n  flex: 1; position: relative;\n  background: var(--bg-tertiary);\n  display: flex; flex-direction: column; overflow: hidden;\n}\n.trdr-janela-container-inner {\n  flex: 1; display: flex; align-items: center; justify-content: center;\n  padding: 16px; gap: 8px; overflow: auto; min-height: 0;\n}\n.trdr-janela-coringa {\n  font-size: 14px; line-height: 16.8px; color: var(--content-primary);\n}\n\n/* FLOATING MENU */\n.trdr-janela-actions-menu {\n  position: absolute; top: 45px; right: 40px;\n  width: 172px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.30);\n  padding: 8px; display: flex; flex-direction: column; gap: 4px;\n  z-index: 10;\n}\n.trdr-janela-action-item {\n  display: flex; align-items: center; gap: 8px;\n  height: 32px; padding: 0 8px;\n  background: transparent; border: none; cursor: pointer;\n  border-radius: var(--radius-sm);\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-secondary);\n  text-align: left;\n  transition: background 0.12s ease;\n}\n.trdr-janela-action-item:hover { background: var(--surface-secondary); }\n.trdr-janela-action-item .material-symbols-outlined { color: var(--content-tertiary); font-size: 20px; }",
-        "react": "import Janela from '@/components/ui/Janela'\nimport Boleta from '@/components/ui/Boleta'\n\n// Versão default — slot vazio mostra \"Componente coringa\"\n<Janela />\n\n// Com tabs/ferramentas customizadas e callback\n<Janela\n  tools={[\n    { label: 'Book', icon: 'view_list' },\n    { label: 'Gráfico', icon: 'show_chart' },\n  ]}\n  tabs={['Mercado', 'Posições', 'Histórico']}\n  activeTab={0}\n  onTabChange={(i) => console.log('tab', i)}\n/>\n\n// Com conteúdo customizado no slot\n<Janela activeTab={2} showSideScroll showBottomScroll>\n  <Boleta versao=\"simples\" />\n</Janela>\n\n// Com floating menu de ações aberto\n<Janela\n  showActionsMenu\n  onActionsMenuToggle={() => setMenuOpen(v => !v)}\n  actions={[\n    { icon: 'close', label: 'Fechar', onClick: handleClose },\n    { icon: 'remove', label: 'Minimizar' },\n    { icon: 'arrow_outward', label: 'Maximizar' },\n  ]}\n/>",
-        "prompt": "Implemente o componente Janela do Design System TRDR — janela de ferramenta de trading composta, pixel-perfect com o Figma 1909:41600.\n\nDIMENSÕES (fixas): 476×312 px, border-radius var(--radius-md) (8px), border 1px solid var(--border-subtle), background var(--bg-secondary), overflow hidden, position relative, font-family var(--font-secondary). Layout em coluna com 3 faixas:\n\n1. HEADER (height 41px, bg var(--bg-secondary), border-bottom 1px var(--border-subtle), padding 0 8px, gap 8px):\n   - Tag AI: padding 2px 4px, gap 2px, bg var(--bg-brand) #00D4FF, border-radius var(--radius-sm) 4px, texto \"AI\" Inter 11/600 var(--content-primary). Ícone Material \"auto_awesome\" 12px à esquerda.\n   - Abas Ferramentas (flex:1, height 100%, overflow hidden): 3 botões \"Ferramenta N\", padding 0 12px, font Inter 14/16.8 var(--content-tertiary); ativa muda para var(--content-primary) e ganha ::after com height 2px var(--bg-brand) (#00D4FF) no bottom 0 left/right 0. Botão chevron 40×40 com ícone Material \"keyboard_arrow_down\" tertiary.\n   - Controles à direita (gap 8px): divider vertical 1×33 var(--border-subtle); botão ícone \"link\" 24×24 cor var(--bg-brand) (cyan); botão \"Multi\" 33h padding 0 8px gap 4 bg var(--action-secondary-default) (#4A4A4A) radius var(--radius-lg) (16px) texto primary + chevron 16px; botões ícone \"more_horiz\" e \"close\" 24×24 tertiary.\n\n2. PILL TABS (height 45px, bg var(--bg-tertiary) #1A1A1A, padding 8px, gap 8px, border-bottom subtle, overflow hidden):\n   - 5 pills \"Aba 1..Aba 5\". Cada pill 31h padding 8px 12px radius var(--radius-lg) Inter 14/16.8 whitespace nowrap.\n   - Ativa: bg var(--action-secondary-default) #4A4A4A, texto var(--content-primary).\n   - Inativa: bg var(--surface-secondary) #222222, texto var(--content-tertiary). Hover muda texto para var(--content-secondary).\n\n3. CONTAINER CENTRAL (flex 1, bg var(--bg-tertiary), padding 16px, gap 8px, position relative, overflow hidden):\n   - Slot via children. Quando vazio mostrar fallback \"Componente coringa\" centralizado, Inter 14/16.8 var(--content-primary).\n   - Scrollbars opcionais (controlados por props showSideScroll/showBottomScroll):\n     • Lateral (right 0, top 0, bottom 6px, width 14px, bg var(--bg-secondary), border-left subtle): seta cima 12×12 Material \"arrow_drop_up\", track 6px com thumb radius 16 bg var(--action-secondary-default) 60% de altura, seta baixo \"arrow_drop_down\".\n     • Inferior (left 0, right 14px, height 14px, bg var(--bg-secondary), border-top subtle): seta esquerda \"arrow_left\", track horizontal com thumb radius 16, seta direita \"arrow_right\".\n     • Canto: quando ambos ativos, 14×14 no canto inferior direito com bg secondary e borders.\n\n4. FLOATING ACTIONS MENU (opcional, posição absoluta top 45px right 40px, width 172px):\n   - bg var(--bg-secondary), border 1px var(--border-subtle), border-radius var(--radius-md) (8px), box-shadow 0 4px 12px rgba(0,0,0,0.30), padding 8px, gap 4px, z-index 10.\n   - 5 ações: { close: Fechar, remove: Minimizar, arrow_outward: Maximizar, keep: Fixar, edit: Renomear aba }. Cada item: height 32px, padding 0 8px, gap 8px, border-radius var(--radius-sm), ícone Material 20px var(--content-tertiary), label Inter 14/16.8 var(--content-secondary). Hover bg var(--surface-secondary).\n\nAPI React (TypeScript): props { tools?: JanelaTool[]; activeTool?: number; onToolChange?; tabs?: string[]; activeTab?: number; onTabChange?; multiLabel?: string; onMultiClick?; onLinkClick?; onClose?; showSideScroll?: boolean; showBottomScroll?: boolean; showActionsMenu?: boolean; onActionsMenuToggle?; actions?: JanelaAction[]; children?: ReactNode }. Suporta estado controlado E não-controlado (defaultActiveTool/defaultActiveTab). aria-selected nas pills, aria-expanded no botão de menu, role=\"tab\"/\"tablist\"/\"menu\"/\"menuitem\".\n\nUse APENAS tokens semânticos do TRDR (var(--bg-*), var(--surface-*), var(--content-*), var(--action-*), var(--border-*), var(--radius-*), var(--spacing-*)). NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-* (não existem). O componente deve funcionar nos dois temas (light e dark) sem alterações."
-      }
+        "react": "import Janela from '@/components/ui/Janela'\n// Internamente usa: FloatingMenu (menu de ações) e Abas (tool tabs no header)\n\n// Versão default — slot vazio mostra \"Componente coringa\"\n<Janela />\n\n// Com tabs/ferramentas customizadas e callback\n<Janela\n  tools={[\n    { label: 'Book', icon: 'view_list' },\n    { label: 'Gráfico', icon: 'show_chart' },\n  ]}\n  tabs={['Mercado', 'Posições', 'Histórico']}\n  activeTab={0}\n  onTabChange={(i) => console.log('tab', i)}\n/>\n\n// Com conteúdo customizado no slot\n<Janela activeTab={2} showSideScroll showBottomScroll>\n  <Boleta versao=\"simples\" />\n</Janela>\n\n// Com floating menu de ações aberto\n<Janela\n  showActionsMenu\n  onActionsMenuToggle={() => setMenuOpen(v => !v)}\n  actions={[\n    { icon: 'close', label: 'Fechar', onClick: handleClose },\n    { icon: 'remove', label: 'Minimizar' },\n    { icon: 'arrow_outward', label: 'Maximizar' },\n  ]}\n/>",
+        "prompt": "Implemente o componente Janela do Design System TRDR — janela de ferramenta de trading composta, pixel-perfect com o Figma 1909:41600.\n\nCOMPOSIÇÃO: O header usa o componente Abas (@/components/ui/Abas) para as tool tabs (underline).\nO menu de ações usa o componente FloatingMenu (@/components/ui/FloatingMenu) com FloatingMenu.Item.\n\nDIMENSÕES (fixas): 476×312 px, border-radius var(--radius-md) (8px), border 1px solid var(--border-subtle), background var(--bg-secondary), overflow hidden, position relative, font-family var(--font-secondary). Layout em coluna com 3 faixas:\n\n1. HEADER (height 41px, bg var(--bg-secondary), border-bottom 1px var(--border-subtle), padding 0 8px, gap 8px):\n   - Tag AI: padding 2px 4px, gap 2px, bg var(--bg-brand) #00D4FF, border-radius var(--radius-sm) 4px, texto \"AI\" Inter 11/600 var(--content-primary). Ícone Material \"auto_awesome\" 12px à esquerda.\n   - Abas Ferramentas (flex:1, height 100%, overflow hidden): 3 botões \"Ferramenta N\", padding 0 12px, font Inter 14/16.8 var(--content-tertiary); ativa muda para var(--content-primary) e ganha ::after com height 2px var(--bg-brand) (#00D4FF) no bottom 0 left/right 0. Botão chevron 40×40 com ícone Material \"keyboard_arrow_down\" tertiary.\n   - Controles à direita (gap 8px): divider vertical 1×33 var(--border-subtle); botão ícone \"link\" 24×24 cor var(--bg-brand) (cyan); botão \"Multi\" 33h padding 0 8px gap 4 bg var(--action-secondary-default) (#4A4A4A) radius var(--radius-lg) (16px) texto primary + chevron 16px; botões ícone \"more_horiz\" e \"close\" 24×24 tertiary.\n\n2. PILL TABS (height 45px, bg var(--bg-tertiary) #1A1A1A, padding 8px, gap 8px, border-bottom subtle, overflow hidden):\n   - 5 pills \"Aba 1..Aba 5\". Cada pill 31h padding 8px 12px radius var(--radius-lg) Inter 14/16.8 whitespace nowrap.\n   - Ativa: bg var(--action-secondary-default) #4A4A4A, texto var(--content-primary).\n   - Inativa: bg var(--surface-secondary) #222222, texto var(--content-tertiary). Hover muda texto para var(--content-secondary).\n\n3. CONTAINER CENTRAL (flex 1, bg var(--bg-tertiary), padding 16px, gap 8px, position relative, overflow hidden):\n   - Slot via children. Quando vazio mostrar fallback \"Componente coringa\" centralizado, Inter 14/16.8 var(--content-primary).\n   - Scrollbars opcionais (controlados por props showSideScroll/showBottomScroll):\n     • Lateral (right 0, top 0, bottom 6px, width 14px, bg var(--bg-secondary), border-left subtle): seta cima 12×12 Material \"arrow_drop_up\", track 6px com thumb radius 16 bg var(--action-secondary-default) 60% de altura, seta baixo \"arrow_drop_down\".\n     • Inferior (left 0, right 14px, height 14px, bg var(--bg-secondary), border-top subtle): seta esquerda \"arrow_left\", track horizontal com thumb radius 16, seta direita \"arrow_right\".\n     • Canto: quando ambos ativos, 14×14 no canto inferior direito com bg secondary e borders.\n\n4. FLOATING ACTIONS MENU (opcional, posição absoluta top 45px right 40px, width 172px):\n   - bg var(--bg-secondary), border 1px var(--border-subtle), border-radius var(--radius-md) (8px), box-shadow 0 4px 12px rgba(0,0,0,0.30), padding 8px, gap 4px, z-index 10.\n   - 5 ações: { close: Fechar, remove: Minimizar, arrow_outward: Maximizar, keep: Fixar, edit: Renomear aba }. Cada item: height 32px, padding 0 8px, gap 8px, border-radius var(--radius-sm), ícone Material 20px var(--content-tertiary), label Inter 14/16.8 var(--content-secondary). Hover bg var(--surface-secondary).\n\nAPI React (TypeScript): props { tools?: JanelaTool[]; activeTool?: number; onToolChange?; tabs?: string[]; activeTab?: number; onTabChange?; multiLabel?: string; onMultiClick?; onLinkClick?; onClose?; showSideScroll?: boolean; showBottomScroll?: boolean; showActionsMenu?: boolean; onActionsMenuToggle?; actions?: JanelaAction[]; children?: ReactNode }. Suporta estado controlado E não-controlado (defaultActiveTool/defaultActiveTab). aria-selected nas pills, aria-expanded no botão de menu, role=\"tab\"/\"tablist\"/\"menu\"/\"menuitem\".\n\nUse APENAS tokens semânticos do TRDR (var(--bg-*), var(--surface-*), var(--content-*), var(--action-*), var(--border-*), var(--radius-*), var(--spacing-*)). NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-* (não existem). O componente deve funcionar nos dois temas (light e dark) sem alterações."
+      },
+      "dependencies": [
+        "floating-menu",
+        "abas"
+      ]
     },
     {
       "slug": "news-card",
@@ -1840,9 +1870,12 @@
       "code": {
         "html": "<!-- News Card — Design System TRDR (Figma: 66:2373) -->\n<!-- sentiment: adicionar .trdr-news-card-dot-up | -down | -neutral -->\n<div class=\"trdr-news-card\">\n  <div class=\"trdr-news-card-inner\">\n    <div class=\"trdr-news-card-dot trdr-news-card-dot-up\"></div>\n    <div class=\"trdr-news-card-content\">\n      <p class=\"trdr-news-card-title\">Bitcoin ETF sees record inflows as institutional interest grows</p>\n      <div class=\"trdr-news-card-meta\">\n        <span class=\"trdr-news-card-source\">CoinDesk</span>\n        <span class=\"trdr-news-card-sep\">•</span>\n        <span class=\"trdr-news-card-time\">2h ago</span>\n      </div>\n    </div>\n    <button class=\"trdr-news-card-action\" aria-label=\"Abrir notícia\">\n      <span class=\"material-symbols-outlined\" style=\"font-size:12px;line-height:12px\">open_in_new</span>\n    </button>\n  </div>\n</div>",
         "css": "/* News Card — Design System TRDR (Figma node: 66:2373, 313×74) */\n.trdr-news-card {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 16px;        /* --spacing-sm --spacing-lg */\n  border-bottom: 1px solid var(--border-subtle);  /* #222222 */\n  width: 100%;\n  cursor: pointer;\n  text-decoration: none;\n  transition: background-color 0.15s ease;\n}\n\n.trdr-news-card:hover {\n  background-color: var(--surface-secondary);     /* #222222 */\n}\n\n.trdr-news-card-inner {\n  display: flex;\n  gap: 8px;                 /* --spacing-sm */\n  align-items: flex-start;\n  width: 100%;\n}\n\n.trdr-news-card-dot {\n  width: 4px;\n  height: 4px;\n  border-radius: 9999px;\n  flex-shrink: 0;\n  margin-top: 6px;\n}\n\n.trdr-news-card-dot-up     { background-color: var(--context-trading-up);   }  /* #4FE290 */\n.trdr-news-card-dot-down   { background-color: var(--context-trading-down); }  /* #F34F45 */\n.trdr-news-card-dot-neutral{ background-color: var(--content-tertiary);     }  /* #A4A4A4 */\n\n.trdr-news-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.trdr-news-card-title {\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-primary);                  /* #FFFFFF */\n  width: 100%;\n}\n\n.trdr-news-card-meta {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.trdr-news-card-source,\n.trdr-news-card-time {\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-tertiary);                 /* #A4A4A4 */\n}\n\n.trdr-news-card-sep {\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--content-disabled);                 /* #4A4A4A */\n}\n\n.trdr-news-card-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border-radius: var(--radius-sm);                /* 4px */\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--content-tertiary);\n  transition: background-color 0.15s ease;\n}\n\n.trdr-news-card-action:hover {\n  background-color: var(--surface-secondary);\n}",
-        "react": "import NewsCard from '@/components/ui/NewsCard'\n\n// Notícia de alta (dot verde)\n<NewsCard\n  sentiment=\"up\"\n  title=\"Bitcoin ETF sees record inflows as institutional interest grows\"\n  source=\"CoinDesk\"\n  time=\"2h ago\"\n  href=\"https://coindesk.com/article/...\"\n/>\n\n// Notícia de baixa (dot vermelho)\n<NewsCard\n  sentiment=\"down\"\n  title=\"Petrobras shares fall on dividend cut concerns\"\n  source=\"Valor Econômico\"\n  time=\"45m ago\"\n/>\n\n// Neutro com callback no botão de ação\n<NewsCard\n  sentiment=\"neutral\"\n  title=\"Banco Central mantém Selic em 10,5% ao ano\"\n  source=\"Folha\"\n  time=\"1h ago\"\n  onShare={() => console.log('share clicked')}\n/>",
-        "prompt": "Implemente o componente NewsCard do Design System TRDR — card de notícia financeira, pixel-perfect com o Figma 66:2373.\n\nDIMENSÕES (fixas): width 100%, border-bottom 1px solid var(--border-subtle) (#222222), padding 8px 16px, cursor pointer. Hover: background-color var(--surface-secondary) (#222222).\n\nLAYOUT INTERNO (flex-row, gap 8px, align-items flex-start):\n1. DOT INDICADOR (4×4px, border-radius 9999px, flex-shrink 0, margin-top 6px):\n   - sentiment=\"up\"      → background var(--context-trading-up) #4FE290\n   - sentiment=\"down\"    → background var(--context-trading-down) #F34F45\n   - sentiment=\"neutral\" → background var(--content-tertiary) #A4A4A4\n\n2. CONTENT (flex: 1, flex-col, gap 8px, min-width 0):\n   - Título: font-family var(--font-secondary), 14px/400/1.2, color var(--content-primary) #FFFFFF, width 100%\n   - Meta row (flex-row, gap 8px, height 16px, white-space nowrap, align-items center):\n     • Fonte: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n     • Separador \"•\": 12px/16px var(--content-disabled) #4A4A4A\n     • Tempo: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n\n3. BOTÃO DE AÇÃO (20×20px, border-radius var(--radius-sm) 4px, padding 4px, flex-shrink 0):\n   - background transparent, border none, color var(--content-tertiary)\n   - Hover: background var(--surface-secondary)\n   - Ícone: Material Symbols \"open_in_new\" 12px\n\nAPI React: props { title: string; source: string; time: string; sentiment?: 'up' | 'down' | 'neutral'; href?: string; onShare?: () => void }\nQuando href é passado, renderizar como <a target=\"_blank\" rel=\"noreferrer\">, senão como <div>.\n\nUse APENAS tokens semânticos do TRDR. NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-*."
-      }
+        "react": "import NewsCard from '@/components/ui/NewsCard'\n// Badge é importado internamente — a meta row exibe <Badge> de sentimento automaticamente\n\n// Notícia de alta (dot verde + Badge \"Alta\" success)\n<NewsCard\n  sentiment=\"up\"\n  title=\"Bitcoin ETF sees record inflows as institutional interest grows\"\n  source=\"CoinDesk\"\n  time=\"2h ago\"\n  href=\"https://coindesk.com/article/...\"\n/>\n\n// Notícia de baixa (dot vermelho + Badge \"Baixa\" warning)\n<NewsCard\n  sentiment=\"down\"\n  title=\"Petrobras shares fall on dividend cut concerns\"\n  source=\"Valor Econômico\"\n  time=\"45m ago\"\n/>\n\n// Neutro (Badge \"Neutro\" neutral)\n<NewsCard\n  sentiment=\"neutral\"\n  title=\"Banco Central mantém Selic em 10,5% ao ano\"\n  source=\"Folha\"\n  time=\"1h ago\"\n  onShare={() => console.log('share clicked')}\n/>",
+        "prompt": "Implemente o componente NewsCard do Design System TRDR — card de notícia financeira, pixel-perfect com o Figma 66:2373.\n\nDIMENSÕES (fixas): width 100%, border-bottom 1px solid var(--border-subtle) (#222222), padding 8px 16px, cursor pointer. Hover: background-color var(--surface-secondary) (#222222).\n\nLAYOUT INTERNO (flex-row, gap 8px, align-items flex-start):\n1. DOT INDICADOR (4×4px, border-radius 9999px, flex-shrink 0, margin-top 6px):\n   - sentiment=\"up\"      → background var(--context-trading-up) #4FE290\n   - sentiment=\"down\"    → background var(--context-trading-down) #F34F45\n   - sentiment=\"neutral\" → background var(--content-tertiary) #A4A4A4\n\n2. CONTENT (flex: 1, flex-col, gap 8px, min-width 0):\n   - Título: font-family var(--font-secondary), 14px/400/1.2, color var(--content-primary) #FFFFFF, width 100%\n   - Meta row (flex-row, gap 8px, height 16px, white-space nowrap, align-items center):\n     • Fonte: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n     • Separador \"•\": 12px/16px var(--content-disabled) #4A4A4A\n     • Tempo: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n\n3. BOTÃO DE AÇÃO (20×20px, border-radius var(--radius-sm) 4px, padding 4px, flex-shrink 0):\n   - background transparent, border none, color var(--content-tertiary)\n   - Hover: background var(--surface-secondary)\n   - Ícone: Material Symbols \"open_in_new\" 12px\n\nCOMPOSIÇÃO: A meta row usa o componente Badge (@/components/ui/Badge) com dot para indicar sentimento.\nMapeamento: up→success \"Alta\", down→warning \"Baixa\", neutral→neutral \"Neutro\".\n\nAPI React: props { title: string; source: string; time: string; sentiment?: 'up' | 'down' | 'neutral'; href?: string; onShare?: () => void }\nQuando href é passado, renderizar como <a target=\"_blank\" rel=\"noreferrer\">, senão como <div>.\n\nUse APENAS tokens semânticos do TRDR. NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-*."
+      },
+      "dependencies": [
+        "badge"
+      ]
     },
     {
       "slug": "header",
@@ -1976,11 +2009,14 @@
       "anatomy": "Header (flex row, space-between, height 56px, padding 0 16px, bg-primary, border-bottom subtle):\n  LEFT: [Logo 107×40] [Divider 1×18] [Nav itens gap-16 — cada item: 40px h, 8px H-pad, ícone 20px + label 14px] [TextInput 116×32 com ícone busca] [Resultado Row — cotações gap-0]\n  RIGHT: [4× icon-btn 32×32 + badge absoluto] [Conexões btn 137×32, borda subtle, status dot] [Win Controls 3× 40×40]",
       "notes": "Componente de 1920px de largura — ocupa 100% da viewport na plataforma. O preview é scrollável horizontalmente. Na platform real, reutiliza TextInput (busca) e FloatingMenu (dropdowns dos itens de nav).",
       "code": {
-        "html": "<!-- Header Desktop — Design System TRDR (Figma: 1921:55292) -->\n<!-- Adicionar .trdr-header-nav-item-active no item ativo -->\n<header class=\"trdr-header\">\n  <div class=\"trdr-header-left\">\n    <!-- Logo -->\n    <div class=\"trdr-header-logo\">\n      <img src=\"/logo-trdr.svg\" alt=\"TRDR\" width=\"107\" height=\"40\" />\n    </div>\n    <div class=\"trdr-header-divider\"></div>\n\n    <!-- Nav principal -->\n    <nav class=\"trdr-header-nav\">\n      <button class=\"trdr-header-nav-item trdr-header-nav-item-active\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">show_chart</span>\n        Gráfico\n      </button>\n      <button class=\"trdr-header-nav-item\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">format_list_bulleted</span>\n        Book e Cotações\n      </button>\n      <button class=\"trdr-header-nav-item\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">swap_horiz</span>\n        Operação\n      </button>\n    </nav>\n\n    <!-- Busca — reutilizar TextInput -->\n    <div class=\"trdr-text-input trdr-text-input-with-icon\" style=\"width:116px\">\n      <input type=\"text\" placeholder=\"Buscar ativo...\" />\n    </div>\n  </div>\n\n  <div class=\"trdr-header-right\">\n    <!-- Ícone com badge -->\n    <div style=\"position:relative;display:inline-flex\">\n      <button class=\"trdr-header-icon-btn\" type=\"button\" aria-label=\"Notificações\">\n        <span class=\"material-symbols-outlined\" style=\"font-size:20px\">notifications</span>\n      </button>\n      <span class=\"trdr-header-badge\">4</span>\n    </div>\n\n    <!-- Conexões -->\n    <button class=\"trdr-header-conexoes\" type=\"button\">\n      <span class=\"trdr-header-status-dot connected\"></span>\n      5/6 Conexões\n    </button>\n\n    <!-- Controles de janela -->\n    <div class=\"trdr-header-wincontrols\">\n      <button class=\"trdr-header-win-btn\" aria-label=\"Minimizar\" type=\"button\">\n        <span class=\"material-symbols-outlined\" style=\"font-size:16px\">remove</span>\n      </button>\n      <button class=\"trdr-header-win-btn trdr-header-win-btn-close\" aria-label=\"Fechar\" type=\"button\">\n        <span class=\"material-symbols-outlined\" style=\"font-size:16px\">close</span>\n      </button>\n    </div>\n  </div>\n</header>",
+        "html": "<!-- Header Desktop — Design System TRDR (Figma: 1921:55292) -->\n<!-- Adicionar .trdr-header-nav-item-active no item ativo -->\n<header class=\"trdr-header\">\n  <div class=\"trdr-header-left\">\n    <!-- Logo — SVG inline do logo TRDR 45° -->\n    <div class=\"trdr-header-logo\">\n      <svg width=\"107\" height=\"42\" viewBox=\"0 0 107 42\" fill=\"none\" aria-label=\"TRDR\"><!-- logo-trdr-45graus.svg inline --></svg>\n    </div>\n    <div class=\"trdr-header-divider\"></div>\n\n    <!-- Nav principal -->\n    <nav class=\"trdr-header-nav\">\n      <button class=\"trdr-header-nav-item trdr-header-nav-item-active\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">show_chart</span>\n        Gráfico\n      </button>\n      <button class=\"trdr-header-nav-item\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">format_list_bulleted</span>\n        Book e Cotações\n      </button>\n      <button class=\"trdr-header-nav-item\" type=\"button\">\n        <span class=\"trdr-header-nav-icon material-symbols-outlined\">swap_horiz</span>\n        Operação\n      </button>\n    </nav>\n\n    <!-- Busca — reutilizar TextInput -->\n    <div class=\"trdr-text-input trdr-text-input-with-icon\" style=\"width:116px\">\n      <input type=\"text\" placeholder=\"Buscar ativo...\" />\n    </div>\n  </div>\n\n  <div class=\"trdr-header-right\">\n    <!-- Ícone com badge -->\n    <div style=\"position:relative;display:inline-flex\">\n      <button class=\"trdr-header-icon-btn\" type=\"button\" aria-label=\"Notificações\">\n        <span class=\"material-symbols-outlined\" style=\"font-size:20px\">notifications</span>\n      </button>\n      <span class=\"trdr-header-badge\">4</span>\n    </div>\n\n    <!-- Conexões -->\n    <button class=\"trdr-header-conexoes\" type=\"button\">\n      <span class=\"trdr-header-status-dot connected\"></span>\n      5/6 Conexões\n    </button>\n\n    <!-- Controles de janela — SVGs customizados 18×18 -->\n    <div class=\"trdr-header-wincontrols\">\n      <button class=\"trdr-header-win-btn\" aria-label=\"Minimizar\" type=\"button\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M14.25 9.75H3.75V8.25H14.25V9.75Z\" fill=\"currentColor\"/></svg>\n      </button>\n      <button class=\"trdr-header-win-btn\" aria-label=\"Restaurar\" type=\"button\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M13.7813 3.9375C14.1542 3.9375 14.5119 4.08566 14.7756 4.34938C15.0393 4.6131 15.1875 4.97079 15.1875 5.34375V12.375H13.7813V5.34375H6.75V3.9375H13.7813ZM5.34375 8.15625V13.7813H10.9688V8.15625H5.34375ZM5.34375 6.75H10.9688C11.3417 6.75 11.6994 6.89816 11.9631 7.16188C12.2268 7.42561 12.375 7.78329 12.375 8.15625V13.7813C12.375 14.1542 12.2268 14.5119 11.9631 14.7756C11.6994 15.0393 11.3417 15.1875 10.9688 15.1875H5.34375C4.97079 15.1875 4.6131 15.0393 4.34938 14.7756C4.08566 14.5119 3.9375 14.1542 3.9375 13.7813V8.15625C3.9375 7.78329 4.08566 7.42561 4.34938 7.16188C4.6131 6.89816 4.97079 6.75 5.34375 6.75Z\" fill=\"currentColor\"/></svg>\n      </button>\n      <button class=\"trdr-header-win-btn trdr-header-win-btn-close\" aria-label=\"Fechar\" type=\"button\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M14.0171 3.9909C13.7065 3.68032 13.2048 3.68032 12.8942 3.9909L9 7.87713L5.1058 3.98294C4.79522 3.67235 4.29352 3.67235 3.98294 3.98294C3.67235 4.29352 3.67235 4.79522 3.98294 5.1058L7.87713 9L3.98294 12.8942C3.67235 13.2048 3.67235 13.7065 3.98294 14.0171C4.29352 14.3276 4.79522 14.3276 5.1058 14.0171L9 10.1229L12.8942 14.0171C13.2048 14.3276 13.7065 14.3276 14.0171 14.0171C14.3276 13.7065 14.3276 13.2048 14.0171 12.8942L10.1229 9L14.0171 5.1058C14.3197 4.80319 14.3197 4.29352 14.0171 3.9909Z\" fill=\"currentColor\"/></svg>\n      </button>\n    </div>\n  </div>\n</header>",
         "css": "/* Header Desktop — Design System TRDR (Figma: 1921:55292, 1920×56px) */\n\n/* Container principal */\n.trdr-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 56px;\n  padding: 0 var(--spacing-lg);     /* 0 16px */\n  background-color: var(--bg-primary);             /* #0E0E0E */\n  border-bottom: 1px solid var(--border-subtle);   /* #222222 */\n  width: 100%;\n}\n\n.trdr-header-left,\n.trdr-header-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 100%;\n}\n\n/* Divider vertical */\n.trdr-header-divider {\n  width: 1px;\n  height: 18px;\n  background-color: var(--border-subtle);\n  margin: 0 8px;\n}\n\n/* Nav items */\n.trdr-header-nav {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n}\n\n.trdr-header-nav-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 40px;\n  padding: 0 8px;\n  border-radius: var(--radius-sm);\n  border: none;\n  background: transparent;\n  color: var(--content-tertiary);               /* #A4A4A4 */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  white-space: nowrap;\n}\n\n.trdr-header-nav-item:hover {\n  color: var(--content-primary);                /* #FFFFFF */\n  background-color: var(--surface-secondary);  /* #222222 */\n}\n\n.trdr-header-nav-item-active {\n  color: var(--content-primary) !important;\n}\n\n.trdr-header-nav-icon {\n  font-family: 'Material Symbols Outlined';\n  font-weight: 300;\n  font-size: 20px;\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'GRAD' 0;\n}\n\n/* Botão de ícone (32×32) */\n.trdr-header-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--radius-sm);\n  border: none;\n  background: transparent;\n  color: var(--content-secondary);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.trdr-header-icon-btn:hover {\n  background-color: var(--surface-secondary);\n}\n\n/* Badge numérico (posição absoluta sobre ícone) */\n.trdr-header-badge {\n  position: absolute;\n  top: 0;\n  right: 0;\n  background-color: var(--action-brand-default); /* #00D4FF */\n  color: var(--content-inverse);                  /* #1A1A1A */\n  font-family: var(--font-secondary);\n  font-size: 9px;\n  font-weight: 600;\n  min-width: 14px;\n  height: 14px;\n  border-radius: var(--radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 3px;\n  line-height: 1;\n  pointer-events: none;\n}\n\n/* Botão Conexões */\n.trdr-header-conexoes {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--content-secondary);\n  font-family: var(--font-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: border-color 0.1s, background-color 0.1s;\n}\n\n.trdr-header-conexoes:hover {\n  border-color: var(--border-default);\n  background-color: var(--surface-secondary);\n}\n\n/* Dot de status */\n.trdr-header-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n}\n\n.trdr-header-status-dot.connected    { background-color: var(--context-trading-up); }\n.trdr-header-status-dot.disconnected { background-color: var(--context-trading-down); }\n\n/* Controles de janela */\n.trdr-header-wincontrols {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-left: 8px;\n}\n\n.trdr-header-win-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  color: var(--content-tertiary);\n  cursor: pointer;\n  transition: background-color 0.1s, color 0.1s;\n}\n\n.trdr-header-win-btn:hover {\n  background-color: var(--surface-secondary);\n  color: var(--content-primary);\n}\n\n.trdr-header-win-btn-close:hover {\n  background-color: var(--context-trading-down) !important;\n  color: var(--content-primary) !important;\n}",
-        "react": "import Header from '@/components/ui/Header'\n\n// Estado padrão — nav \"Gráfico\" ativo\n<Header activeNav=\"Gráfico\" />\n\n// Com outro item de nav ativo\n<Header activeNav=\"Book e Cotações\" />\n\n// Itens de nav disponíveis:\n// 'Gráfico' | 'Book e Cotações' | 'Operação' | 'Ferramentas' | 'Analistas'",
-        "prompt": "Implemente o componente Header Desktop do Design System TRDR — barra de navegação superior 1920×56px, pixel-perfect com o Figma 1921:55292.\n\nESTRUTURA GERAL (flex row, space-between, height 56px, padding 0 16px):\n- background: var(--bg-primary) #0E0E0E\n- border-bottom: 1px solid var(--border-subtle) #222222\n\nLADO ESQUERDO (flex row, gap 8px, align-items center):\n1. LOGO: img logo-trdr.svg, width 107px, height 40px\n2. DIVIDER: 1×18px, background var(--border-subtle), margin 0 8px\n3. NAV (flex row, gap 4px):\n   Cada item: height 40px, padding 0 8px, border-radius var(--radius-sm), font var(--font-secondary) 14px/400\n   - Default: color var(--content-tertiary) #A4A4A4\n   - Hover: color var(--content-primary) + background var(--surface-secondary) #222222\n   - Active: color var(--content-primary)\n   - Ícone Material Symbols Outlined 20px + label (gap 4px)\n4. TEXT INPUT (reutilizar componente TextInput): width 116px, height 32px, iconLeft, placeholder \"Buscar ativo...\"\n5. RESULTADO ROW: cotações em tempo real — por item (flex row, gap 6px, border-left 1px subtle, padding 0 8px):\n   - Symbol: font-mono 11px content.tertiary\n   - Last price: font-mono 13px/500 content.primary\n   - Change: font-mono 12px — positivo: context.trading.up #4FE290, negativo: context.trading.down #F34F45\n\nLADO DIREITO (flex row, gap 8px):\n1. 4× ICON BTN (32×32px, border-radius sm, hover surface.secondary, color content.secondary):\n   - Notificações + badge \"4\", Meu perfil + badge \"1\", Configurações, Layouts\n   - Badge: 14×14px, border-radius full, bg action.brand.default #00D4FF, text content.inverse #1A1A1A, font 9px/600, position absolute top-0 right-0\n2. CONEXÕES BTN (137×32px): border 1px solid border.subtle, font-secondary 13px, gap 6px, \"5/6 Conexões\"\n   - Status dot: 6×6px, border-radius full, connected = context.trading.up, disconnected = context.trading.down\n3. WIN CONTROLS (3× 40×40px): Minimizar, Recolher, Fechar\n   - Fechar: hover bg context.trading.down #F34F45\n\nREUTILIZAÇÃO: TextInput para campo de busca, FloatingMenu para dropdowns dos itens de nav.\nNUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
-      }
+        "react": "import Header from '@/components/ui/Header'\n// Badge é importado internamente — os badges de notificação usam <Badge variant=\"brand\">\n\n// Estado padrão — nav \"Gráfico\" ativo\n<Header activeNav=\"Gráfico\" />\n\n// Com outro item de nav ativo\n<Header activeNav=\"Book e Cotações\" />\n\n// Itens de nav disponíveis:\n// 'Gráfico' | 'Book e Cotações' | 'Operação' | 'Ferramentas' | 'Analistas'",
+        "prompt": "Implemente o componente Header Desktop do Design System TRDR — barra de navegação superior 1920×56px, pixel-perfect com o Figma 1921:55292.\n\nCOMPOSIÇÃO: Os badges numéricos dos botões de ícone (notificações, perfil) usam o componente Badge (@/components/ui/Badge) com variant=\"brand\".\n\nESTRUTURA GERAL (flex row, space-between, height 56px, padding 0 16px):\n- background: var(--bg-primary) #0E0E0E\n- border-bottom: 1px solid var(--border-subtle) #222222\n\nLADO ESQUERDO (flex row, gap 8px, align-items center):\n1. LOGO: SVG inline (logo-trdr-45graus.svg), width 107px, height 42px\n2. DIVIDER: 1×18px, background var(--border-subtle), margin 0 8px\n3. NAV (flex row, gap 4px):\n   Cada item: height 40px, padding 0 8px, border-radius var(--radius-sm), font var(--font-secondary) 14px/400\n   - Default: color var(--content-tertiary) #A4A4A4\n   - Hover: color var(--content-primary) + background var(--surface-secondary) #222222\n   - Active: color var(--content-primary)\n   - Ícone Material Symbols Outlined 20px + label (gap 4px)\n4. TEXT INPUT (reutilizar componente TextInput): width 116px, height 32px, iconLeft, placeholder \"Buscar ativo...\"\n5. RESULTADO ROW: cotações em tempo real — por item (flex row, gap 6px, border-left 1px subtle, padding 0 8px):\n   - Symbol: font-mono 11px content.tertiary\n   - Last price: font-mono 13px/500 content.primary\n   - Change: font-mono 12px — positivo: context.trading.up #4FE290, negativo: context.trading.down #F34F45\n\nLADO DIREITO (flex row, gap 8px):\n1. 4× ICON BTN (32×32px, border-radius sm, hover surface.secondary, color content.secondary):\n   - Notificações + badge \"4\", Meu perfil + badge \"1\", Configurações, Layouts\n   - Badge: 14×14px, border-radius full, bg action.brand.default #00D4FF, text content.inverse #1A1A1A, font 9px/600, position absolute top-0 right-0\n2. CONEXÕES BTN (137×32px): border 1px solid border.subtle, font-secondary 13px, gap 6px, \"5/6 Conexões\"\n   - Status dot: 6×6px, border-radius full, connected = context.trading.up, disconnected = context.trading.down\n3. WIN CONTROLS (3× 40×40px): Minimizar, Restaurar, Fechar — SVGs customizados 18×18 (não Material Symbols)\n   - Fechar: hover bg context.trading.down #F34F45\n\nREUTILIZAÇÃO: TextInput para campo de busca, FloatingMenu para dropdowns dos itens de nav.\nNUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
+      },
+      "dependencies": [
+        "badge"
+      ]
     },
     {
       "slug": "badge",
@@ -2118,7 +2154,483 @@
         "css": ".trdr-badge {\n  display: inline-flex;\n  align-items: center;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 5px;                         /* fixo, não token */\n  font-family: var(--font-secondary);          /* Inter */\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n/* Tamanho Large (Figma \"Badge large\") */\n.trdr-badge-lg {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 1.2;\n  padding: 4px;                                /* 4px uniforme */\n  height: auto;                                /* ~25px, hug content */\n}\n\n/* --- Variantes --- */\n.trdr-badge-neutral {\n  background-color: var(--surface-secondary);  /* #222222 */\n  color: var(--content-tertiary);              /* #A4A4A4 */\n  border: 1px solid var(--border-subtle);      /* #222222 */\n}\n\n.trdr-badge-brand {\n  background-color: var(--surface-brand);      /* #00D4FF29 */\n  color: var(--content-brand);                 /* #00D4FF */\n  border: 1px solid var(--content-brand);      /* #00D4FF */\n}\n\n.trdr-badge-success {\n  background-color: var(--surface-success);    /* #4FE29014 */\n  color: var(--content-success);               /* #4FE290 */\n  border: 1px solid var(--content-success);    /* #4FE290 */\n}\n\n.trdr-badge-warning {\n  background-color: var(--surface-warning);    /* #FFCC4014 */\n  color: var(--content-warning);               /* #FFD35A */\n  border: 1px solid var(--content-warning);    /* #FFD35A */\n}\n\n.trdr-badge-archived {\n  background-color: var(--surface-tertiary);   /* #1A1A1A */\n  color: var(--content-disabled);              /* #4A4A4A */\n  border: 1px solid var(--border-disabled);    /* #777777 */\n}\n\n/* Dot indicator (pseudo-element) */\n.trdr-badge-dot::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);           /* 9999px */\n  background-color: currentColor;\n}",
         "react": "import Badge from '@/components/ui/Badge'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Variantes default (12px) */}\n      <Badge variant=\"neutral\">Badge</Badge>\n      <Badge variant=\"brand\" dot>Active</Badge>\n      <Badge variant=\"success\" dot>Merged</Badge>\n      <Badge variant=\"warning\">Atenção</Badge>\n      <Badge variant=\"archived\" dot>Archived</Badge>\n\n      {/* Variantes large (14px) — match do Figma \"Badge large\" */}\n      <Badge variant=\"brand\" size=\"lg\" dot>Active</Badge>\n      <Badge variant=\"success\" size=\"lg\" dot>Merged</Badge>\n      <Badge variant=\"neutral\" size=\"lg\">Badge</Badge>\n      <Badge variant=\"archived\" size=\"lg\" dot>Archived</Badge>\n    </>\n  )\n}",
         "prompt": "Implemente o componente Badge do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Border-radius: 5px (fixo, não token)\n- Border: 1px solid (cor varia por variante)\n- Default (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px\n- Large: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2\n- Dot: 6×6px, border-radius full, cor = currentColor\n\nVARIANTES E TOKENS OBRIGATÓRIOS:\n- Neutral: bg --surface-secondary (#222222), text --content-tertiary (#A4A4A4), border --border-subtle (#222222)\n- Brand: bg --surface-brand (#00D4FF29), text --content-brand (#00D4FF), border --content-brand\n- Success: bg --surface-success (#4FE29014), text --content-success (#4FE290), border --content-success\n- Warning: bg --surface-warning (#FFCC4014), text --content-warning (#FFD35A), border --content-warning\n- Archived: bg --surface-tertiary (#1A1A1A), text --content-disabled (#4A4A4A), border --border-disabled (#777777)\n\nPROPS:\n- variant: 'neutral' | 'brand' | 'success' | 'warning' | 'archived' (default: 'neutral')\n- size: 'default' | 'lg' (default: 'default')\n- dot: boolean (default: false) — mostra dot 6×6 antes do texto via ::before\n\nNOTAS:\n- O dot usa currentColor para herdar a cor do texto da variante\n- Merged no Figma = variante \"success\" com dot\n- Active no Figma = variante \"brand\" com dot\n- Archived = variante dedicada com dot\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
-      }
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "table",
+      "name": "Table",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Tabela genérica do Design System TRDR. Header 11px uppercase, cells 13px, hover row, border-bottom subtle. Variantes: bordered (wrapper com borda + radius), compact (padding reduzido), striped (linhas alternadas).",
+      "props": [
+        {
+          "name": "Bordered",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Compact",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Striped",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Hoverable",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "100% (fill)",
+          "height": "auto"
+        },
+        {
+          "label": "Header row",
+          "width": "100%",
+          "height": "auto (~28px)"
+        },
+        {
+          "label": "Body row",
+          "width": "100%",
+          "height": "auto (~40px)"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Header text",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Header border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Header padding",
+          "token": "spacing-sm / spacing-lg",
+          "value": "8px / 16px"
+        },
+        {
+          "property": "Cell text",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Cell border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Cell padding",
+          "token": "spacing-md / spacing-lg",
+          "value": "12px / 16px"
+        },
+        {
+          "property": "Hover BG",
+          "token": "bg-tertiary",
+          "value": "#141519"
+        },
+        {
+          "property": "Striped BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Wrapper border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Wrapper radius",
+          "token": "radius-md",
+          "value": "8px"
+        }
+      ],
+      "anatomy": "[div.trdr-table-wrapper?]  ← wrapper opcional (bordered): borda + radius + overflow\n  └── [table.trdr-table .trdr-table-compact? .trdr-table-striped? .trdr-table-bordered?]\n        ├── thead > tr > th  ← 11px/600/uppercase, letter-spacing 0.08em, tertiary\n        └── tbody > tr > td  ← 13px/secondary, hover bg-tertiary\n\nCompact: padding reduzido (xs/md), font 12px\nStriped: nth-child(even) bg-secondary\nBordered: wrapper com border 1px subtle, radius-md, overflow hidden",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<table class=\"trdr-table\">\n  <thead>\n    <tr>\n      <th>Token</th>\n      <th>CSS Variable</th>\n      <th>Valor</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>bg-primary</td>\n      <td>--bg-primary</td>\n      <td>#0A0A0A</td>\n    </tr>\n    <tr>\n      <td>bg-secondary</td>\n      <td>--bg-secondary</td>\n      <td>#0E0E0E</td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- Bordered (com wrapper) -->\n<div class=\"trdr-table-wrapper\">\n  <table class=\"trdr-table trdr-table-bordered\">\n    <thead>\n      <tr><th>Prop</th><th>Tipo</th><th>Default</th></tr>\n    </thead>\n    <tbody>\n      <tr><td>variant</td><td>enum</td><td>neutral</td></tr>\n      <tr><td>size</td><td>enum</td><td>default</td></tr>\n    </tbody>\n  </table>\n</div>\n\n<!-- Compact + Striped -->\n<table class=\"trdr-table trdr-table-compact trdr-table-striped\">\n  <thead>\n    <tr><th>Ativo</th><th>Preço</th><th>Var%</th></tr>\n  </thead>\n  <tbody>\n    <tr><td>PETR4</td><td>38.42</td><td>+1.2%</td></tr>\n    <tr><td>VALE3</td><td>62.18</td><td>-0.8%</td></tr>\n    <tr><td>ITUB4</td><td>34.56</td><td>+0.3%</td></tr>\n    <tr><td>BBDC4</td><td>14.20</td><td>-1.1%</td></tr>\n  </tbody>\n</table>",
+        "css": ".trdr-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.trdr-table th {\n  text-align: left;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--content-tertiary);\n  padding: var(--spacing-sm) var(--spacing-lg);\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.trdr-table td {\n  padding: var(--spacing-md) var(--spacing-lg);\n  border-bottom: 1px solid var(--border-subtle);\n  font-size: 13px;\n  color: var(--content-secondary);\n  vertical-align: middle;\n}\n\n.trdr-table tr:last-child td {\n  border-bottom: none;\n}\n\n.trdr-table tr:hover td {\n  background-color: var(--bg-tertiary);\n}\n\n/* Wrapper — borda + radius + overflow */\n.trdr-table-wrapper {\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.trdr-table-bordered tr:last-child td {\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n/* Compact — padding reduzido */\n.trdr-table-compact th {\n  padding: var(--spacing-xs) var(--spacing-md);\n}\n\n.trdr-table-compact td {\n  padding: var(--spacing-sm) var(--spacing-md);\n  font-size: 12px;\n}\n\n/* Striped — linhas alternadas */\n.trdr-table-striped tbody tr:nth-child(even) td {\n  background-color: var(--bg-secondary);\n}\n\n.trdr-table-striped tbody tr:nth-child(even):hover td {\n  background-color: var(--bg-tertiary);\n}\n\n/* Sem hover */\n.trdr-table-no-hover tr:hover td {\n  background-color: transparent;\n}",
+        "react": "import Table from '@/components/ui/Table'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default */}\n      <Table>\n        <thead>\n          <tr><th>Token</th><th>CSS Variable</th><th>Valor</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>bg-primary</td><td>--bg-primary</td><td>#0A0A0A</td></tr>\n          <tr><td>bg-secondary</td><td>--bg-secondary</td><td>#0E0E0E</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Bordered — renderiza wrapper automaticamente */}\n      <Table bordered>\n        <thead>\n          <tr><th>Prop</th><th>Tipo</th><th>Default</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>variant</td><td>enum</td><td>neutral</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Compact + Striped */}\n      <Table compact striped>\n        <thead>\n          <tr><th>Ativo</th><th>Preço</th><th>Var%</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>PETR4</td><td>38.42</td><td>+1.2%</td></tr>\n          <tr><td>VALE3</td><td>62.18</td><td>-0.8%</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Sem hover */}\n      <Table hoverable={false}>\n        <thead>\n          <tr><th>Coluna</th><th>Valor</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>Dado</td><td>123</td></tr>\n        </tbody>\n      </Table>\n    </>\n  )\n}",
+        "prompt": "Implemente o componente Table do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- width: 100%, border-collapse: collapse\n- Header (th): 11px/600/uppercase, letter-spacing 0.08em, color --content-tertiary, padding --spacing-sm --spacing-lg, border-bottom 1px solid --border-subtle\n- Cell (td): 13px, color --content-secondary, padding --spacing-md --spacing-lg, border-bottom 1px solid --border-subtle, vertical-align middle\n- Last row: sem border-bottom\n- Hover: bg --bg-tertiary com transition\n\nVARIANTES:\n- bordered: wrapper div com border 1px solid --border-subtle, border-radius --radius-md (8px), overflow hidden; last-row mantém borda\n- compact: th padding --spacing-xs --spacing-md, td padding --spacing-sm --spacing-md, font 12px\n- striped: nth-child(even) bg --bg-secondary\n- hoverable: true por padrão, false remove hover\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — header text\n- --content-secondary (#E8E8E8) — cell text\n- --border-subtle (#222222) — borders\n- --bg-tertiary (#141519) — hover\n- --bg-secondary (#0E0E0E) — striped rows\n- --spacing-sm (8px), --spacing-md (12px), --spacing-lg (16px), --spacing-xs (4px)\n- --radius-md (8px) — wrapper bordered\n- Font: var(--font-secondary) — Inter\n\nNOTAS:\n- O componente React aceita children (thead, tbody direto)\n- bordered=true renderiza wrapper automaticamente\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "copy-button",
+      "name": "CopyButton",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Botão de copiar para clipboard com feedback visual. Ícone copy → check ao clicar, com transição de cor. 2 tamanhos (default 28px, sm 20px).",
+      "props": [
+        {
+          "name": "Size",
+          "type": "enum",
+          "values": [
+            "Default",
+            "Small"
+          ]
+        },
+        {
+          "name": "State",
+          "type": "enum",
+          "values": [
+            "Idle",
+            "Copied"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "28px",
+          "height": "28px"
+        },
+        {
+          "label": "Small",
+          "width": "20px",
+          "height": "20px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Icon hover",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "BG hover",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Border hover",
+          "token": "border-default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Copied color",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Copied BG",
+          "token": "surface-success",
+          "value": "#4FE29014"
+        },
+        {
+          "property": "Copied border",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Border radius",
+          "token": "radius-sm",
+          "value": "4px"
+        }
+      ],
+      "anatomy": "[button.trdr-copy-btn .trdr-copy-btn-sm?]\n  └── [svg 14×14 (default) / 12×12 (sm)]\n        ├── idle: ícone copy (rect + path)\n        └── copied: ícone check (polyline)\n\nDefault: 28×28px, border-radius radius-sm, bg transparent, border 1px transparent\nSmall: 20×20px, svg 12×12px\nHover: icon primary, bg surface-secondary, border border-default\nCopied: icon + border content-success, bg surface-success — auto-reset 1.5s",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<button class=\"trdr-copy-btn\" title=\"Copiar\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n  </svg>\n</button>\n\n<!-- Small -->\n<button class=\"trdr-copy-btn trdr-copy-btn-sm\" title=\"Copiar\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n  </svg>\n</button>\n\n<!-- Estado copiado (class .copied) -->\n<button class=\"trdr-copy-btn copied\" title=\"Copiado!\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"20 6 9 17 4 12\" />\n  </svg>\n</button>",
+        "css": ".trdr-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--content-tertiary);\n  border: 1px solid transparent;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.trdr-copy-btn:hover {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n  border-color: var(--border-default);\n}\n\n.trdr-copy-btn.copied {\n  color: var(--content-success);\n  background-color: var(--surface-success);\n  border-color: var(--content-success);\n}\n\n.trdr-copy-btn-sm {\n  width: 20px;\n  height: 20px;\n}\n\n.trdr-copy-btn-sm svg {\n  width: 12px;\n  height: 12px;\n}",
+        "react": "import CopyButton from '@/components/ui/CopyButton'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default (28px) */}\n      <CopyButton text=\"--bg-primary\" label=\"Token\" />\n\n      {/* Small (20px) */}\n      <CopyButton text=\"--bg-primary\" label=\"Token\" size=\"sm\" />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente CopyButton do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Default: 28×28px, border-radius var(--radius-sm), bg transparent, border 1px transparent\n- Small: 20×20px, svg 12×12px (classe .trdr-copy-btn-sm)\n- Ícone SVG inline: copy (rect + path) → check (polyline) ao copiar\n- Auto-reset para idle após 1.5s\n\nESTADOS:\n- Idle: cor --content-tertiary\n- Hover: cor --content-primary, bg --surface-secondary, border --border-default\n- Copied: cor --content-success, bg --surface-success, border --content-success\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — ícone idle\n- --content-primary (#FFFFFF) — ícone hover\n- --surface-secondary (#222222) — bg hover\n- --border-default (#4A4A4A) — border hover\n- --content-success (#4FE290) — ícone/border copied\n- --surface-success (#4FE29014) — bg copied\n- --radius-sm (4px)\n\nNOTAS:\n- Usa navigator.clipboard.writeText com fallback document.execCommand\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "search-input",
+      "name": "SearchInput",
+      "figmaId": "—",
+      "category": "formulario",
+      "description": "Input de busca com ícone lupa à esquerda. Baseado no TextInput (.trdr-input) com wrapper posicional para o ícone. Modo controlado (value/onChange) ou URL-sync (paramName).",
+      "props": [
+        {
+          "name": "Placeholder",
+          "type": "string",
+          "values": [
+            "Buscar..."
+          ]
+        },
+        {
+          "name": "Mode",
+          "type": "enum",
+          "values": [
+            "Controlled",
+            "URL-sync"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "100% (fill, max 400px)",
+          "height": "24px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Input BG",
+          "token": "surface-primary",
+          "value": "#141519"
+        },
+        {
+          "property": "Input border",
+          "token": "border-default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Input text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Placeholder",
+          "token": "content-disabled",
+          "value": "#4A4A4A"
+        }
+      ],
+      "anatomy": "[div.trdr-search-input]\n  ├── [svg.trdr-search-input-icon 16×16]  ← absolute, left 10px, vertical-center\n  └── [input.trdr-input]  ← padding-left 36px para dar espaço ao ícone\n\nHerda todos os estilos de .trdr-input (TextInput)",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Search Input -->\n<div class=\"trdr-search-input\">\n  <svg class=\"trdr-search-input-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n  <input type=\"text\" class=\"trdr-input\" placeholder=\"Buscar...\" />\n</div>",
+        "css": ".trdr-search-input {\n  position: relative;\n  width: 100%;\n}\n\n.trdr-search-input-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--content-tertiary);\n  pointer-events: none;\n}\n\n.trdr-search-input .trdr-input {\n  padding-left: 36px;\n}",
+        "react": "import SearchInput from '@/components/ui/SearchInput'\n\nexport default function Example() {\n  const [query, setQuery] = useState('')\n\n  return (\n    <>\n      {/* Modo controlado */}\n      <SearchInput\n        value={query}\n        onChange={setQuery}\n        placeholder=\"Buscar tokens...\"\n      />\n\n      {/* Modo URL-sync (Next.js) */}\n      <SearchInput paramName=\"q\" placeholder=\"Buscar...\" />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente SearchInput do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Wrapper: position relative, width 100%\n- Ícone: SVG lupa 16×16, position absolute, left 10px, top 50%, transform translateY(-50%), cor --content-tertiary\n- Input: classe .trdr-input (herda do TextInput), padding-left 36px para não sobrepor ícone\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — ícone lupa\n- Herda tokens de .trdr-input: --surface-primary (bg), --border-default (border), --content-primary (text)\n\nDEPENDÊNCIA: TextInput (.trdr-input deve estar disponível no CSS)\n\nNOTAS:\n- Aceita modo controlado (value + onChange) ou URL-sync (paramName para query params Next.js)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": [
+        "text-input"
+      ]
+    },
+    {
+      "slug": "stat-card",
+      "name": "StatCard",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Card de estatística com valor destaque (36px bold), label e descrição opcional. Variante accent com gradient brand e cor de valor em brand.",
+      "props": [
+        {
+          "name": "Accent",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "auto (fill)",
+          "height": "auto"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Radius",
+          "token": "radius-md",
+          "value": "8px"
+        },
+        {
+          "property": "Padding",
+          "token": "spacing-2xl",
+          "value": "24px"
+        },
+        {
+          "property": "Gap",
+          "token": "spacing-xs",
+          "value": "4px"
+        },
+        {
+          "property": "Value color",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Value font",
+          "token": "font-primary",
+          "value": "JetBrains Mono"
+        },
+        {
+          "property": "Label color",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Desc color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Accent border",
+          "token": "action-brand-alpha",
+          "value": "#00D4FF29"
+        },
+        {
+          "property": "Accent value",
+          "token": "action-brand-default",
+          "value": "#00D4FF"
+        }
+      ],
+      "anatomy": "[div.trdr-stat-card .trdr-stat-card-accent?]\n  ├── [div.trdr-stat-value]  ← font-primary 36px/600, primary (accent: brand)\n  ├── [div.trdr-stat-label]  ← 13px/500, secondary\n  └── [div.trdr-stat-desc?]  ← 12px, tertiary, margin-top spacing-xs\n\nDefault: bg-secondary, border 1px subtle, radius-md, padding spacing-2xl, flex-col gap spacing-xs\nAccent: border action-brand-alpha, bg gradient 135deg brand-alpha → bg-secondary",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<div class=\"trdr-stat-card\">\n  <div class=\"trdr-stat-value\">292</div>\n  <div class=\"trdr-stat-label\">Tokens</div>\n  <div class=\"trdr-stat-desc\">Primitivos + semânticos</div>\n</div>\n\n<!-- Accent -->\n<div class=\"trdr-stat-card trdr-stat-card-accent\">\n  <div class=\"trdr-stat-value\">20</div>\n  <div class=\"trdr-stat-label\">Componentes</div>\n  <div class=\"trdr-stat-desc\">Implementados com código</div>\n</div>",
+        "css": ".trdr-stat-card {\n  background-color: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-2xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.trdr-stat-card-accent {\n  border-color: var(--action-brand-alpha);\n  background: linear-gradient(135deg, var(--action-brand-alpha) 0%, var(--bg-secondary) 100%);\n}\n\n.trdr-stat-value {\n  font-family: var(--font-primary);\n  font-size: 36px;\n  font-weight: 600;\n  color: var(--content-primary);\n  line-height: 1;\n}\n\n.trdr-stat-card-accent .trdr-stat-value {\n  color: var(--action-brand-default);\n}\n\n.trdr-stat-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--content-secondary);\n}\n\n.trdr-stat-desc {\n  font-size: 12px;\n  color: var(--content-tertiary);\n  margin-top: var(--spacing-xs);\n}",
+        "react": "import StatCard from '@/components/ui/StatCard'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default */}\n      <StatCard value={292} label=\"Tokens\" description=\"Primitivos + semânticos\" />\n\n      {/* Accent */}\n      <StatCard value={20} label=\"Componentes\" description=\"Implementados com código\" accent />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente StatCard do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: bg --bg-secondary, border 1px --border-subtle, radius --radius-md (8px), padding --spacing-2xl (24px), flex-col, gap --spacing-xs (4px)\n- Value: font --font-primary, 36px/600, cor --content-primary, line-height 1\n- Label: 13px/500, cor --content-secondary\n- Desc: 12px, cor --content-tertiary, margin-top --spacing-xs\n\nVARIANTE ACCENT:\n- border-color: --action-brand-alpha (#00D4FF29)\n- bg: linear-gradient(135deg, --action-brand-alpha 0%, --bg-secondary 100%)\n- Value cor: --action-brand-default (#00D4FF)\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --radius-md (8px), --spacing-2xl (24px), --spacing-xs (4px)\n- --content-primary (#FFFFFF), --content-secondary (#E8E8E8), --content-tertiary (#A4A4A4)\n- --action-brand-alpha (#00D4FF29), --action-brand-default (#00D4FF)\n- --font-primary (JetBrains Mono)\n\nNOTAS:\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "sidebar",
+      "name": "Sidebar",
+      "figmaId": "—",
+      "category": "navegacao",
+      "description": "Navegação lateral genérica com grupos de itens, ícones Material Symbols, header com logo e footer com versão. Width 240px, sticky top 0, height 100vh.",
+      "props": [
+        {
+          "name": "Width",
+          "type": "enum",
+          "values": [
+            "240px (default)"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "240px",
+          "height": "100vh"
+        },
+        {
+          "label": "Item",
+          "width": "100%",
+          "height": "32px"
+        },
+        {
+          "label": "Icon",
+          "width": "20px",
+          "height": "20px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Group label",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Item text",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Item hover text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Item hover BG",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Item active text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Item active BG",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Icon active",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Version BG",
+          "token": "surface-brand",
+          "value": "#00D4FF29"
+        },
+        {
+          "property": "Version text",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Version label",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        }
+      ],
+      "anatomy": "[aside.trdr-sidebar]\n  ├── [div.trdr-sidebar-header]  ← logo, padding 32px, border-bottom\n  ├── [nav.trdr-sidebar-nav]  ← flex-1, padding 32px 24px, gap 32px\n  │     └── [div.trdr-sidebar-group] × N\n  │           ├── [span.trdr-sidebar-group-label]  ← 12px/400, brand, uppercase\n  │           └── [ul.trdr-sidebar-list]\n  │                 └── [li > a.trdr-sidebar-item .trdr-sidebar-item-active?]\n  │                       ├── [span.trdr-sidebar-icon]  ← Material Symbols 20px\n  │                       └── label text\n  └── [div.trdr-sidebar-footer]  ← border-top, flex, gap 8px\n        ├── [span.trdr-sidebar-version]  ← mono 11px, brand bg/text\n        └── [span.trdr-sidebar-version-label]  ← 11px, tertiary\n\nItem: height 32px, padding 0 8px, gap 8px, radius 4px, Inter 14px/400\nHover: text primary, bg surface-secondary\nActive: mesmos estilos de hover + icon secondary",
+      "implemented": true,
+      "code": {
+        "html": "<aside class=\"trdr-sidebar\">\n  <div class=\"trdr-sidebar-header\">\n    <img src=\"/logo.svg\" alt=\"Logo\" width=\"120\" />\n  </div>\n\n  <nav class=\"trdr-sidebar-nav\">\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Visão Geral</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/\" class=\"trdr-sidebar-item trdr-sidebar-item-active\">\n            <span class=\"trdr-sidebar-icon\">home</span>\n            Home\n          </a>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Tokens</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/tokens\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">grain</span>\n            Primitivos\n          </a>\n        </li>\n        <li>\n          <a href=\"/semanticos\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">join_left</span>\n            Semânticos\n          </a>\n        </li>\n      </ul>\n    </div>\n  </nav>\n\n  <div class=\"trdr-sidebar-footer\">\n    <span class=\"trdr-sidebar-version\">v1.5</span>\n    <span class=\"trdr-sidebar-version-label\">designtokens.md</span>\n  </div>\n</aside>",
+        "css": ".trdr-sidebar {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  width: 240px;\n  background-color: var(--bg-secondary);\n  border-right: 1px solid var(--border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-header {\n  padding: 32px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-nav {\n  flex: 1;\n  padding: 32px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  overflow-y: auto;\n}\n\n.trdr-sidebar-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.trdr-sidebar-group-label {\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--content-brand);\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.trdr-sidebar-list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n}\n\n.trdr-sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 32px;\n  padding: 0 8px;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-secondary);\n  border-radius: 4px;\n  text-decoration: none;\n  transition: color 0.12s ease, background-color 0.12s ease;\n}\n\n.trdr-sidebar-item:hover {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-item-active {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-icon {\n  font-family: 'Material Symbols Outlined';\n  font-weight: 300;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;\n  color: var(--content-tertiary);\n  flex-shrink: 0;\n  user-select: none;\n}\n\n.trdr-sidebar-item-active .trdr-sidebar-icon {\n  color: var(--content-secondary);\n}\n\n.trdr-sidebar-footer {\n  padding: 16px 24px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.trdr-sidebar-version {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--content-brand);\n  background-color: var(--surface-brand);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.trdr-sidebar-version-label {\n  font-size: 11px;\n  color: var(--content-tertiary);\n}",
+        "react": "// A Sidebar do Hub usa a versão com rotas hardcoded.\n// Para uso genérico, passe groups como prop:\n\ninterface SidebarGroup {\n  label: string\n  items: Array<{ href: string; label: string; icon: string; active?: boolean }>\n}\n\nfunction Sidebar({ groups }: { groups: SidebarGroup[] }) {\n  return (\n    <aside className=\"trdr-sidebar\">\n      <div className=\"trdr-sidebar-header\">\n        <img src=\"/logo.svg\" alt=\"Logo\" width={120} />\n      </div>\n      <nav className=\"trdr-sidebar-nav\">\n        {groups.map(group => (\n          <div key={group.label} className=\"trdr-sidebar-group\">\n            <span className=\"trdr-sidebar-group-label\">{group.label}</span>\n            <ul className=\"trdr-sidebar-list\">\n              {group.items.map(item => (\n                <li key={item.href}>\n                  <a\n                    href={item.href}\n                    className={`trdr-sidebar-item ${item.active ? 'trdr-sidebar-item-active' : ''}`}\n                  >\n                    <span className=\"trdr-sidebar-icon\">{item.icon}</span>\n                    {item.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </nav>\n      <div className=\"trdr-sidebar-footer\">\n        <span className=\"trdr-sidebar-version\">v1.0</span>\n        <span className=\"trdr-sidebar-version-label\">app</span>\n      </div>\n    </aside>\n  )\n}",
+        "prompt": "Implemente o componente Sidebar do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: sticky top 0, height 100vh, width 240px, bg --bg-secondary, border-right 1px --border-subtle, flex-col, overflow-y auto\n- Header: padding 32px, border-bottom 1px --border-subtle (logo aqui)\n- Nav: flex 1, padding 32px 24px, gap 32px entre grupos\n- Group label: Inter 12px/400, --content-brand, uppercase, letter-spacing 0.02em\n- Item: flex, gap 8px, height 32px, padding 0 8px, Inter 14px/400, --content-secondary, radius 4px\n- Item hover/active: text --content-primary, bg --surface-secondary\n- Icon: Material Symbols 20px, --content-tertiary (active: --content-secondary)\n- Footer: padding 16px 24px, border-top, flex, gap 8px\n- Version badge: mono 11px, --content-brand, bg --surface-brand, padding 2px 6px, radius 4px\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --surface-secondary (#222222)\n- --content-brand (#00D4FF), --content-secondary (#E8E8E8), --content-primary (#FFFFFF), --content-tertiary (#A4A4A4)\n- --surface-brand (#00D4FF29)\n- --font-secondary (Inter), --font-mono\n- Font Material Symbols Outlined para ícones\n\nNOTAS:\n- Aceitar groups como prop para ser genérico (não hardcodar nav items)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
     }
   ]
 }

package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css

@@ -1,7 +1,7 @@
 /*
  * SNAPSHOT — TRDR Design Tokens
- * Sincronizado de: https://trdr.mrocontent.com.br/tokens.css
- * Em: 2026-05-13T15:33:35.454Z
+ * Sincronizado de: ../trdr-design-hub
+ * Em: 2026-05-13T18:53:59.317Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */