trdr-ds-install 1.9.0 → 2.0.0

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

@@ -0,0 +1,141 @@
+{
+  "slug": "header",
+  "name": "Header Desktop",
+  "figmaId": "1921:55292",
+  "category": "navegacao",
+  "description": "Barra de navegação superior da plataforma TRDR — 56px de altura, logo, nav principal, busca de ativos, cotações em tempo real, botões de ação, status de conexões e controles de janela.",
+  "implemented": true,
+  "props": [
+    {
+      "name": "activeNav",
+      "type": "string",
+      "values": [
+        "Gráfico",
+        "Book e Cotações",
+        "Operação",
+        "Ferramentas",
+        "Analistas"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Altura",
+      "width": "100%",
+      "height": "56px"
+    },
+    {
+      "label": "Nav item",
+      "width": "auto",
+      "height": "40px"
+    },
+    {
+      "label": "Botão de ícone",
+      "width": "32px",
+      "height": "32px"
+    },
+    {
+      "label": "Conexões btn",
+      "width": "137px",
+      "height": "32px"
+    },
+    {
+      "label": "Badge",
+      "width": "auto (min 14px)",
+      "height": "14px"
+    },
+    {
+      "label": "Divider vertical",
+      "width": "1px",
+      "height": "18px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Background",
+      "token": "bg.primary",
+      "value": "#0E0E0E"
+    },
+    {
+      "property": "Border bottom",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Padding horizontal",
+      "token": "spacing.lg",
+      "value": "16px"
+    },
+    {
+      "property": "Nav item — texto default",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Nav item — texto hover/active",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Nav item — BG hover",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Ícone botão",
+      "token": "content.secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Badge BG",
+      "token": "action.brand.default",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Badge texto",
+      "token": "content.inverse",
+      "value": "#1A1A1A"
+    },
+    {
+      "property": "Conexões border",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Status dot — conectado",
+      "token": "context.trading.up",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Status dot — desconectado",
+      "token": "context.trading.down",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Win btn close hover",
+      "token": "context.trading.down",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Resultado — alta",
+      "token": "context.trading.up",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Resultado — baixa",
+      "token": "context.trading.down",
+      "value": "#F34F45"
+    }
+  ],
+  "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 — 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// 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"
+  ]
+}

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

@@ -0,0 +1,245 @@
+{
+  "slug": "janela",
+  "name": "Janela",
+  "figmaId": "1909:41600",
+  "category": "trading",
+  "implemented": true,
+  "description": "Janela de ferramenta de trading — componente composto com header (badge AI, abas de ferramentas com underline, dropdown Multi e ações), linha de abas em pill (filtros) e Container central com slot swappable que recebe qualquer conteúdo via children. Inclui floating menu opcional de ações (Fechar, Minimizar, Maximizar, Fixar, Renomear) e scrollbars laterais/inferior visuais.",
+  "props": [
+    {
+      "name": "tools",
+      "type": "JanelaTool[]",
+      "values": [
+        "{ label, icon? }"
+      ]
+    },
+    {
+      "name": "activeTool",
+      "type": "number",
+      "values": [
+        "0",
+        "1",
+        "2"
+      ]
+    },
+    {
+      "name": "onToolChange",
+      "type": "function",
+      "values": [
+        "(index) => void"
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "string[]",
+      "values": [
+        "[\"Aba 1\", ...]"
+      ]
+    },
+    {
+      "name": "activeTab",
+      "type": "number",
+      "values": [
+        "0..N"
+      ]
+    },
+    {
+      "name": "onTabChange",
+      "type": "function",
+      "values": [
+        "(index) => void"
+      ]
+    },
+    {
+      "name": "multiLabel",
+      "type": "string",
+      "values": [
+        "Multi"
+      ]
+    },
+    {
+      "name": "showSideScroll",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "showBottomScroll",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "showActionsMenu",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "actions",
+      "type": "JanelaAction[]",
+      "values": [
+        "{ icon, label, onClick? }"
+      ]
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "values": [
+        "conteúdo do slot central"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Janela total",
+      "width": "476px",
+      "height": "312px"
+    },
+    {
+      "label": "Header",
+      "width": "476px",
+      "height": "41px"
+    },
+    {
+      "label": "Pill tabs row",
+      "width": "476px",
+      "height": "45px"
+    },
+    {
+      "label": "Container central",
+      "width": "476px",
+      "height": "226px"
+    },
+    {
+      "label": "Tag AI",
+      "width": "hug",
+      "height": "19px"
+    },
+    {
+      "label": "Pill (filtro)",
+      "width": "hug",
+      "height": "31px"
+    },
+    {
+      "label": "Botão Multi",
+      "width": "65px",
+      "height": "33px"
+    },
+    {
+      "label": "Floating actions menu",
+      "width": "172px",
+      "height": "192px"
+    },
+    {
+      "label": "Scrollbar lateral",
+      "width": "14px",
+      "height": "—"
+    },
+    {
+      "label": "Scrollbar inferior",
+      "width": "—",
+      "height": "14px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Janela bg / Header bg",
+      "token": "bg.secondary",
+      "value": "#141519"
+    },
+    {
+      "property": "Pill row bg / Container bg",
+      "token": "bg.tertiary",
+      "value": "#1A1A1A"
+    },
+    {
+      "property": "Tag AI bg",
+      "token": "bg.brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Pill ativa bg / Multi bg",
+      "token": "action.secondary.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Pill inativa bg",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Texto pill ativa / título",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Texto item floating",
+      "token": "content.secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Texto pill inativa / ícones / aba inativa",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Ícone link / underline aba ativa",
+      "token": "bg.brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Stroke header / pill row / floating",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Radius pill / botão Multi",
+      "token": "radius.lg",
+      "value": "16px"
+    },
+    {
+      "property": "Radius janela / floating menu",
+      "token": "radius.md",
+      "value": "8px"
+    },
+    {
+      "property": "Radius Tag AI / item floating",
+      "token": "radius.sm",
+      "value": "4px"
+    },
+    {
+      "property": "Padding pill / gap header",
+      "token": "spacing.sm",
+      "value": "8px"
+    },
+    {
+      "property": "Padding pill horizontal",
+      "token": "spacing.md",
+      "value": "12px"
+    },
+    {
+      "property": "Padding container interno",
+      "token": "spacing.lg",
+      "value": "16px"
+    }
+  ],
+  "anatomy": "Janela 476×312 com border-radius 8px e border subtle, em coluna:\n\n1. HEADER (41px, bg --bg-secondary, border-bottom subtle):\n   [Tag AI 19h #00D4FF radius 4] · [Tabs Ferramentas 14/16.8 com underline 2px brand na ativa + chevron 40×40] · [Divider 1×33 · Link cyan 24×24 · Multi 65×33 bg secondary radius 16 · more_horiz 24×24 · close 24×24]\n\n2. PILL TABS (45px, bg --bg-tertiary, padding 8, gap 8, border-bottom subtle):\n   5 pills 31h padding 8/12 radius 16. Ativa: bg --action-secondary-default + texto primary. Inativas: bg --surface-secondary + texto tertiary.\n\n3. CONTAINER (226px, bg --bg-tertiary, padding 16, gap 8):\n   Slot via children. Fallback visual: texto \"Componente coringa\". Scrollbars opcionais (lateral 14×, inferior ×14) com setas Material e thumb arredondado radius 16.\n\n4. FLOATING ACTIONS MENU (172×192, opcional, ancorado em more_horiz):\n   bg --bg-secondary, border subtle, radius 8, shadow drop. 5 ações (Fechar/Minimizar/Maximizar/Fixar/Renomear) 32h cada com ícone Material 20px tertiary + label Inter 14 secondary. Hover bg --surface-secondary.",
+  "notes": "Slot via React.children: passe qualquer componente (Boleta, Card, gráfico, etc.) como filho. O componente expõe estado controlado e não-controlado para activeTool/activeTab.",
+  "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'\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"
+  ]
+}

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

@@ -0,0 +1,124 @@
+{
+  "slug": "news-card",
+  "name": "News Card",
+  "figmaId": "66:2373",
+  "category": "trading",
+  "description": "Card de notícia financeira — exibe título, fonte, tempo e indicador de sentimento (alta/baixa/neutro). Usado em feeds de notícias dentro do contexto de trading.",
+  "implemented": true,
+  "props": [
+    {
+      "name": "sentiment",
+      "type": "enum",
+      "values": [
+        "up",
+        "down",
+        "neutral"
+      ]
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "values": []
+    },
+    {
+      "name": "source",
+      "type": "string",
+      "values": []
+    },
+    {
+      "name": "time",
+      "type": "string",
+      "values": []
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "values": []
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "100%",
+      "height": "74px"
+    },
+    {
+      "label": "Dot indicador",
+      "width": "4px",
+      "height": "4px"
+    },
+    {
+      "label": "Botão de ação",
+      "width": "20px",
+      "height": "20px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Border bottom",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Dot — alta",
+      "token": "context.trading.up",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Dot — baixa",
+      "token": "context.trading.down",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Dot — neutro",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Título",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Fonte / Tempo",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Separador •",
+      "token": "content.disabled",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Hover BG",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Padding",
+      "token": "spacing.sm + spacing.lg",
+      "value": "8px 16px"
+    },
+    {
+      "property": "Gap inner",
+      "token": "spacing.sm",
+      "value": "8px"
+    },
+    {
+      "property": "Radius botão",
+      "token": "radius.sm",
+      "value": "4px"
+    }
+  ],
+  "anatomy": "Container (border-bottom subtle, padding 8px 16px):\n  [Dot 4×4px] [Content flex-1 gap-8px] [Action 20×20px]\n  Content:\n    [Title — Inter 14/400/1.2 content-primary]\n    [Meta row gap-8px h-16px]\n      [Source 14/400] [• 12px disabled] [Time 14/400]",
+  "notes": "O dot indicador sobe (up) ou desce (down) conforme sentimento da notícia. Hover aplica surface.secondary. Quando href é passado, o container se torna um <a> com target _blank.",
+  "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// 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"
+  ]
+}