trdr-ds-install 1.6.5 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "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.6.5
+**Skill version:** 1.6.6
 **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**.
@@ -59,7 +59,7 @@ Compare the result with the **Skill version** constant at the top of this file (
 - 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.6.5)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.6.6)
 
   Responda:
   - `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)

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

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-12T20:17:42.750Z",
-  "total": 18,
-  "implemented": 18,
+  "generatedAt": "2026-05-13T01:24:26.893Z",
+  "total": 19,
+  "implemented": 19,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -1327,9 +1327,9 @@
       "implemented": true,
       "code": {
         "html": "<!-- Card com footer (variante componente) — Design System TRDR (Figma: 2316:2462) -->\n<a href=\"/destino\" class=\"card\">\n\n  <!-- Container 1: conteúdo principal -->\n  <div class=\"card-container1 card-has-footer\">\n    <div class=\"card-header\">\n      <!-- Ícone (opcional) -->\n      <span class=\"card-icon material-symbols-outlined\">palette</span>\n      <!-- Badges do header (opcional) -->\n      <div class=\"card-badges\">\n        <span class=\"trdr-badge trdr-badge-neutral\">Tokens</span>\n      </div>\n    </div>\n    <!-- H-6: Space Grotesk 500, 26px -->\n    <span class=\"card-title\">Design Tokens</span>\n    <!-- B-3: Inter 400, 14px, content/tertiary -->\n    <p class=\"card-desc\">Cores, espaçamentos e tokens semânticos do design system.</p>\n  </div>\n\n  <!-- Container 2: footer (opcional) -->\n  <div class=\"card-footer\">\n    <code class=\"card-figma-id\">2316:2462</code>\n    <div class=\"card-badges\">\n      <span class=\"trdr-badge trdr-badge-success\">Implementado</span>\n    </div>\n  </div>\n\n</a>",
-        "css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-md);          /* 12px entre container1 e footer */\n  min-width: 250px;\n  padding: var(--spacing-2xl);     /* 24px */\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--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(--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(--spacing-md);\n  padding: var(--spacing-2xl);\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--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(--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(--radius-md) — 12px\n- Padding: var(--spacing-2xl) — 24px\n- Gap entre containers: var(--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?."
+        "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?."
       }
     },
     {
@@ -1843,6 +1843,144 @@
         "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-*."
       }
+    },
+    {
+      "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 -->\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>",
+        "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-*."
+      }
     }
   ]
 }

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-12T20:19:03.361Z
+ * Sincronizado de: ../trdr-design-hub
+ * Em: 2026-05-13T01:26:21.772Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */