trdr-ds-install 1.9.0 → 2.0.0

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

@@ -0,0 +1,262 @@
+{
+  "version": "1.0",
+  "generatedAt": "2026-05-13T18:53:51.673Z",
+  "total": 25,
+  "implemented": 25,
+  "categories": {
+    "formulario": "Formulário / Controles",
+    "modal": "Modais / Overlays",
+    "navegacao": "Navegação",
+    "floating-menu": "Floating Menus",
+    "trading": "Trading",
+    "configuracao": "Configuração",
+    "ia": "Inteligência Artificial",
+    "outros": "Outros"
+  },
+  "components": [
+    {
+      "slug": "button",
+      "name": "Button",
+      "figmaId": "1318:749",
+      "category": "formulario",
+      "description": "Botão principal do sistema com 10 variantes visuais, 2 tamanhos e 4 estados.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "text-input",
+      "name": "Text Input",
+      "figmaId": "1327:17000",
+      "category": "formulario",
+      "description": "Campo de texto com 3 variantes (Single Line, Multi Line, Quick Action), estados de validação e 2 tamanhos.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "dropdown",
+      "name": "Dropdown",
+      "figmaId": "1462:16743",
+      "category": "formulario",
+      "description": "Seletor com chevron, 2 tamanhos (Default 24px / Large 32px) e 3 estados. Suporta stroke, sem stroke e icon lead. Abre um floating menu com opções.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "combo-input",
+      "name": "Combo Input",
+      "figmaId": "1551:11643",
+      "category": "formulario",
+      "description": "Input numérico split: área de valor (flex-1) + botão chevron (24×24px) separados por 1px gap. Altura 24px.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "checkbox",
+      "name": "Checkbox",
+      "figmaId": "1462:18059",
+      "category": "formulario",
+      "description": "Caixa de seleção com 3 estados: Checked, Unchecked e Mixed (indeterminado). 16×16px, border-radius 5px.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "radio-button",
+      "name": "Radio Button",
+      "figmaId": "1916:46361",
+      "category": "formulario",
+      "description": "Seleção única com 2 variantes: Input (círculo 16×16px) e Button (pill 24px). Estados: Default, Active, Focused, Disabled.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "switch",
+      "name": "Switch",
+      "figmaId": "1359:1740",
+      "category": "formulario",
+      "description": "Toggle on/off/mixed. Track de 32×16px com knob de 14px. Suporta estado indeterminado (mixed) com ícone de traço.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "segmented-control",
+      "name": "Segmented Control",
+      "figmaId": "1655:25490",
+      "category": "formulario",
+      "description": "Controle de abas compacto. De 2 a 6 tabs. Container arredondado com radius 64px.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "tooltip",
+      "name": "Tooltip",
+      "figmaId": "1618:23706",
+      "category": "formulario",
+      "description": "Balão de ajuda contextual com seta direcional. 8 direções. Padding 12×8px, bg-primary, max-width 200px.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "abas",
+      "name": "Abas",
+      "figmaId": "253:2861",
+      "category": "navegacao",
+      "description": "Barra de abas horizontal. Aba ativa com fundo surface.secondary.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "sub-menu-item",
+      "name": "Sub-menu Item",
+      "figmaId": "1886:20967",
+      "category": "navegacao",
+      "description": "Item de sub-menu com estados Default, Hover e Pressed.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "boleta",
+      "name": "Painel de Negociações (Boleta)",
+      "figmaId": "903:1853",
+      "category": "trading",
+      "description": "Painel lateral de entrada de ordens. Inclui segmented control Avançado/Simples, campos de estratégia, quantidade e preço, botões de compra/venda por tipo de ordem, ação Zerar e resumo de posição.",
+      "implemented": true,
+      "dependencies": [
+        "segmented-control",
+        "text-input",
+        "checkbox",
+        "button",
+        "dropdown"
+      ]
+    },
+    {
+      "slug": "tabela-cotacoes",
+      "name": "Tabela de Cotações",
+      "figmaId": "77:3681",
+      "category": "trading",
+      "description": "Tabela de cotações em tempo real. Exibe ativo, último preço, variação % com código de cor (verde/vermelho), tendência (seta), quantidade e dados de oferta/demanda.",
+      "implemented": true,
+      "dependencies": [
+        "badge"
+      ]
+    },
+    {
+      "slug": "tabela-ordens",
+      "name": "Tabela de Ordens",
+      "figmaId": "336:3114",
+      "category": "trading",
+      "description": "Tabela de histórico de ordens. Exibe horário, ativo, tipo C/V (colorido), preço, quantidade, status (Aberta/Executada/Cancelada) e origem. Linhas canceladas recebem fundo vermelho translúcido.",
+      "implemented": true,
+      "dependencies": [
+        "badge"
+      ]
+    },
+    {
+      "slug": "card",
+      "name": "Card",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Card de conteúdo — container com borda, padding e hover. Usado como base para cards de navegação e informação no Design Hub.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "floating-menu",
+      "name": "Floating Menu",
+      "figmaId": "1921:55380",
+      "category": "floating-menu",
+      "description": "Menu flutuante genérico do TRDR — compound component com Item, Title e Divider. Cobre desde listas simples de ações até menus seccionados com ícones Material Symbols. Usado em Janela, seletor de ativo, configurações, indicadores e notificações.",
+      "implemented": true,
+      "dependencies": []
+    },
+    {
+      "slug": "janela",
+      "name": "Janela",
+      "figmaId": "1909:41600",
+      "category": "trading",
+      "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.",
+      "implemented": true,
+      "dependencies": [
+        "floating-menu",
+        "abas"
+      ]
+    },
+    {
+      "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,
+      "dependencies": [
+        "badge"
+      ]
+    },
+    {
+      "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,
+      "dependencies": [
+        "badge"
+      ]
+    },
+    {
+      "slug": "badge",
+      "name": "Badge",
+      "figmaId": "2316:8953",
+      "category": "outros",
+      "description": "Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px/16px, large 14px/25px). Border-radius 5px.",
+      "implemented": true,
+      "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).",
+      "implemented": true,
+      "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).",
+      "implemented": true,
+      "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).",
+      "implemented": true,
+      "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.",
+      "implemented": true,
+      "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.",
+      "implemented": true,
+      "dependencies": []
+    }
+  ]
+}

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

@@ -0,0 +1,183 @@
+{
+  "version": "2.0.0",
+  "description": "Violation mapping tables for TRDR DS migration. Load only during Sub-fase B (violations).",
+
+  "colors": {
+    "description": "Hardcoded hex → semantic token. Use property context to decide: background→bg/surface, color→content, border→border, accent→action.",
+    "mappings": [
+      { "hex": "#0E0E0E", "contexts": { "background": "var(--bg-primary)" } },
+      { "hex": "#141519", "contexts": { "background": "var(--bg-secondary)" } },
+      { "hex": "#1A1A1A", "contexts": { "background": "var(--bg-tertiary)", "surface": "var(--surface-tertiary)" } },
+      { "hex": "#222222", "contexts": { "surface": "var(--surface-secondary)", "border": "var(--border-subtle)" } },
+      { "hex": "#4A4A4A", "contexts": { "surface": "var(--surface-primary)", "border": "var(--border-default)" } },
+      { "hex": "#FFFFFF", "contexts": { "color": "var(--content-primary)", "background": "var(--bg-inverse)" } },
+      { "hex": "#E8E8E8", "contexts": { "color": "var(--content-secondary)" } },
+      { "hex": "#A4A4A4", "contexts": { "color": "var(--content-tertiary)" } },
+      { "hex": "#777777", "contexts": { "color": "var(--content-disabled)", "border": "var(--border-disabled)" } },
+      { "hex": "#00D4FF", "contexts": { "border": "var(--border-focus)", "color": "var(--content-brand)", "background": "var(--bg-brand)" } },
+      { "hex": "#00A8CC", "contexts": { "color": "var(--content-brand)", "action": "var(--action-brand-default)" } },
+      { "hex": "#007D99", "contexts": { "action": "var(--action-brand-active)" } },
+      { "hex": "#005266", "contexts": { "background": "var(--action-brand-inverse-default)" } },
+      { "hex": "#002933", "contexts": { "background": "var(--action-brand-inverse-active)" } },
+      { "hex": "#F34F45", "contexts": { "color": "var(--content-error)", "trading": "var(--context-trading-down)" } },
+      { "hex": "#4FE290", "contexts": { "color": "var(--content-success)", "trading": "var(--context-trading-up)" } },
+      { "hex": "#FFCC40", "contexts": { "color": "var(--content-warning)", "background": "var(--bg-warning)" } },
+      { "hex": "#F57C00", "contexts": { "action": "var(--action-destructive-default)" } },
+      { "hex": "#EA580C", "contexts": { "action": "var(--action-destructive-default)" } },
+      { "hex": "#6350B3", "contexts": { "action": "var(--action-tertiary-default)", "background": "var(--bg-brand2)" } },
+      { "hex": "#50418E", "contexts": { "action": "var(--action-tertiary-default)" } },
+      { "hex": "#31DD7E", "contexts": { "color": "var(--content-success)", "background": "var(--bg-success)" } },
+      { "hex": "#CCFDFF", "contexts": { "color": "var(--content-info)" } },
+      { "hex": "#FF6400", "contexts": { "color": "var(--content-warning)" } }
+    ]
+  },
+
+  "fonts": {
+    "description": "Hardcoded font-family → DS token. System fallbacks are removed (token defines the full stack).",
+    "mappings": [
+      { "pattern": "Inter", "token": "var(--font-secondary)" },
+      { "pattern": "JetBrains Mono", "token": "var(--font-primary)" },
+      { "pattern": "Space Grotesk", "token": "var(--font-primary)" },
+      { "pattern": "Roboto Mono", "token": "var(--font-mono)" }
+    ]
+  },
+
+  "spacing": {
+    "description": "Hardcoded px → DS spacing token. Values not listed: keep as-is and flag in DS_MIGRATION.md. Do NOT invent tokens.",
+    "mappings": [
+      { "px": "0", "token": "0", "note": "No token needed" },
+      { "px": "4px", "token": "var(--spacing-xs)" },
+      { "px": "8px", "token": "var(--spacing-sm)" },
+      { "px": "12px", "token": "var(--spacing-md)" },
+      { "px": "16px", "token": "var(--spacing-lg)" },
+      { "px": "20px", "token": "var(--spacing-xl)" },
+      { "px": "24px", "token": "var(--spacing-2xl)" },
+      { "px": "32px", "token": "var(--spacing-3xl)" }
+    ],
+    "muiScale": {
+      "description": "MUI sx numeric scale → DS token. Prefer keeping MUI numeric scale when consistent. Use var() string only for hardcoded px string values.",
+      "mappings": [
+        { "mui": 0.5, "px": "4px", "token": "'var(--spacing-xs)'" },
+        { "mui": 1, "px": "8px", "token": "'var(--spacing-sm)'" },
+        { "mui": 1.5, "px": "12px", "token": "'var(--spacing-md)'" },
+        { "mui": 2, "px": "16px", "token": "'var(--spacing-lg)'" },
+        { "mui": 2.5, "px": "20px", "token": "'var(--spacing-xl)'" },
+        { "mui": 3, "px": "24px", "token": "'var(--spacing-2xl)'" },
+        { "mui": 4, "px": "32px", "token": "'var(--spacing-3xl)'" }
+      ]
+    }
+  },
+
+  "radius": {
+    "description": "Hardcoded border-radius → DS radius token.",
+    "mappings": [
+      { "px": "0", "token": "var(--radius-none)", "muiNumeric": 0 },
+      { "px": "2px", "token": "var(--radius-xs)", "muiNumeric": 2 },
+      { "px": "4px", "token": "var(--radius-sm)", "muiNumeric": 4 },
+      { "px": "8px", "token": "var(--radius-md)", "muiNumeric": 8 },
+      { "px": "16px", "token": "var(--radius-lg)", "muiNumeric": 16 },
+      { "px": "20px", "token": "var(--radius-xl)", "muiNumeric": 20 },
+      { "px": "9999px", "token": "var(--radius-full)", "muiNumeric": 9999 }
+    ]
+  },
+
+  "rgba": {
+    "description": "Hardcoded rgba() → DS token or flag.",
+    "mappings": [
+      { "pattern": "rgba(0,0,0,*)", "context": "box-shadow", "action": "flag", "note": "No DS shadow token — flag in DS_MIGRATION.md" },
+      { "pattern": "rgba(255,255,255,0.03-0.08)", "context": "border/divider", "token": "var(--border-subtle)", "fallback": "flag" },
+      { "pattern": "rgba(255,255,255,0.10-0.20)", "context": "hover/overlay", "token": "var(--surface-hover)", "fallback": "flag" },
+      { "pattern": "rgba(255,255,255,.29)", "context": "overlay/backdrop", "token": "var(--bg-overlay)" },
+      { "pattern": "rgba(0,212,255,*)", "context": "focus glow", "action": "flag", "note": "No alpha token for --border-focus" },
+      { "pattern": "rgba(0,168,204,*)", "context": "brand alpha", "token": "var(--surface-brand)", "fallback": "flag" },
+      { "pattern": "rgba(79,226,144,*)", "context": "success alpha", "token": "var(--surface-success)", "fallback": "flag" },
+      { "pattern": "rgba(243,79,69,*)", "context": "error alpha", "token": "var(--surface-error)", "fallback": "flag" },
+      { "pattern": "rgba(255,204,64,*)", "context": "warning alpha", "token": "var(--surface-warning)", "fallback": "flag" }
+    ]
+  },
+
+  "gradients": {
+    "description": "Known TRDR gradient tokens. Match project gradients against these. Non-matching: flag.",
+    "tokens": [
+      { "token": "--gradient-text-brand", "value": "linear-gradient(90deg, var(--content-brand), var(--border-focus))", "description": "cyan→bright-cyan horizontal" },
+      { "token": "--gradient-bg-hero", "value": "linear-gradient(180deg, var(--bg-secondary), var(--bg-primary))", "description": "dark vertical fade" },
+      { "token": "--gradient-bg-fade", "value": "linear-gradient(180deg, var(--bg-tertiary) 0%, transparent 100%)", "description": "surface to transparent" }
+    ]
+  },
+
+  "fontSizes": {
+    "description": "Hardcoded font-size → DS text style class. Two-part fix: remove from CSS + add class to HTML/JSX. Exception: body/html/:root selectors → remove font-size entirely.",
+    "mappings": [
+      { "px": "80px", "class": ".trdr-h1", "font": "JetBrains Mono", "weight": 500 },
+      { "px": "56px", "class": ".trdr-h2", "font": "JetBrains Mono", "weight": 500 },
+      { "px": "46px", "class": ".trdr-h3", "font": "JetBrains Mono", "weight": 700 },
+      { "px": "38px", "class": ".trdr-h4", "font": "JetBrains Mono", "weight": 500 },
+      { "px": "32px", "class": ".trdr-h5", "font": "JetBrains Mono", "weight": 500 },
+      { "px": "26px", "class": ".trdr-h6", "font": "JetBrains Mono", "weight": 500 },
+      { "px": "22px", "class": ".trdr-h7", "font": "Inter", "weight": 600 },
+      { "px": "18px", "class": ".trdr-body-b1", "font": "Inter", "weight": 400 },
+      { "px": "16px", "class": ".trdr-body-b2", "altClass": ".trdr-label-l2", "note": "weight 400→b2, 600→l2" },
+      { "px": "14px", "class": ".trdr-body-b3", "altClass": ".trdr-label-l3", "note": "weight 400→b3, 600→l3" },
+      { "px": "12px", "class": ".trdr-body-b4", "altClass": ".trdr-body-aux", "note": "letter-spacing 0.2px→b4, 0.24px→aux" },
+      { "px": "10px", "class": ".trdr-body-b5", "font": "Inter", "weight": 400 }
+    ],
+    "monoRule": "If font-family uses var(--font-mono), use .trdr-mono regardless of font-size.",
+    "otherRule": "For sizes not listed: use nearest DS class BELOW the value and flag in DS_MIGRATION.md.",
+    "globalSelectorRule": "If font-size is inside body/html/:root/* selector: REMOVE entirely. Do NOT add DS class to body/html."
+  },
+
+  "muiPalette": {
+    "description": "MUI palette role → DS token mapping. For Sub-fase A (theme generation).",
+    "mappings": [
+      { "key": "palette.primary.main", "token": "var(--action-brand-default)", "hex": "#00D4FF" },
+      { "key": "palette.primary.dark", "token": "var(--action-brand-active)", "hex": "#007D99" },
+      { "key": "palette.primary.contrastText", "token": "var(--content-inverse)", "hex": "#1A1A1A" },
+      { "key": "palette.secondary.main", "token": "var(--action-secondary-default)", "hex": "#4A4A4A" },
+      { "key": "palette.secondary.dark", "token": "var(--action-secondary-active)", "hex": "#A4A4A4" },
+      { "key": "palette.error.main", "token": "var(--content-error)", "hex": "#F34F45" },
+      { "key": "palette.warning.main", "token": "var(--content-warning)", "hex": "#FFCC40" },
+      { "key": "palette.success.main", "token": "var(--content-success)", "hex": "#4FE290" },
+      { "key": "palette.info.main", "token": "var(--content-info)", "hex": "#CCFDFF" },
+      { "key": "palette.background.default", "token": "var(--bg-primary)", "hex": "#0E0E0E" },
+      { "key": "palette.background.paper", "token": "var(--bg-secondary)", "hex": "#141519" },
+      { "key": "palette.text.primary", "token": "var(--content-primary)", "hex": "#FFFFFF" },
+      { "key": "palette.text.secondary", "token": "var(--content-secondary)", "hex": "#E8E8E8" },
+      { "key": "palette.text.disabled", "token": "var(--content-disabled)", "hex": "#4A4A4A" },
+      { "key": "palette.divider", "token": "var(--border-default)", "hex": "#4A4A4A" }
+    ]
+  },
+
+  "muiTypography": {
+    "description": "MUI typography variant → DS equivalent.",
+    "mappings": [
+      { "variant": "h1", "dsClass": ".trdr-h1", "fontToken": "var(--font-primary)", "size": 80, "weight": 500, "lineHeight": 1.1 },
+      { "variant": "h2", "dsClass": ".trdr-h2", "fontToken": "var(--font-primary)", "size": 56, "weight": 500, "lineHeight": 1.1 },
+      { "variant": "h3", "dsClass": ".trdr-h3", "fontToken": "var(--font-primary)", "size": 46, "weight": 700, "lineHeight": 1.15 },
+      { "variant": "h4", "dsClass": ".trdr-h4", "fontToken": "var(--font-primary)", "size": 38, "weight": 500, "lineHeight": 1.15 },
+      { "variant": "h5", "dsClass": ".trdr-h5", "fontToken": "var(--font-primary)", "size": 32, "weight": 500, "lineHeight": 1.2 },
+      { "variant": "h6", "dsClass": ".trdr-h6", "fontToken": "var(--font-primary)", "size": 26, "weight": 500, "lineHeight": 1.2 },
+      { "variant": "subtitle1", "dsClass": ".trdr-h7", "fontToken": "var(--font-secondary)", "size": 22, "weight": 600, "lineHeight": 1.3 },
+      { "variant": "body1", "dsClass": ".trdr-body-b2", "fontToken": "var(--font-secondary)", "size": 16, "weight": 500, "lineHeight": 1.5 },
+      { "variant": "body2", "dsClass": ".trdr-body-b3", "fontToken": "var(--font-secondary)", "size": 14, "weight": 400, "lineHeight": 1.5 },
+      { "variant": "caption", "dsClass": ".trdr-body-b4", "fontToken": "var(--font-secondary)", "size": 12, "weight": 500, "lineHeight": 1.4 },
+      { "variant": "overline", "dsClass": ".trdr-body-b5", "fontToken": "var(--font-secondary)", "size": 10, "weight": 400, "lineHeight": 1.4 },
+      { "variant": "button", "dsClass": ".trdr-label-l3", "fontToken": "var(--font-secondary)", "size": 14, "weight": 600 }
+    ]
+  },
+
+  "tailwindArbitrary": {
+    "description": "Tailwind arbitrary value hex → DS token. Fix priority: 1) DS class, 2) var() arbitrary, 3) flag.",
+    "examples": [
+      { "from": "bg-[#0E0E0E]", "to": "bg-[var(--bg-primary)]" },
+      { "from": "bg-[#141519]", "to": "bg-[var(--bg-secondary)]" },
+      { "from": "bg-[#1A1A1A]", "to": "bg-[var(--bg-tertiary)]" },
+      { "from": "text-[#FFFFFF]", "to": "text-[var(--content-primary)]" },
+      { "from": "text-[#A4A4A4]", "to": "text-[var(--content-tertiary)]" },
+      { "from": "border-[#222222]", "to": "border-[var(--border-subtle)]" },
+      { "from": "border-[#4A4A4A]", "to": "border-[var(--border-default)]" },
+      { "from": "focus:border-[#00D4FF]", "to": "focus:border-[var(--border-focus)]" },
+      { "from": "text-[#4FE290]", "to": "text-[var(--context-trading-up)]" },
+      { "from": "text-[#F34F45]", "to": "text-[var(--context-trading-down)]" }
+    ]
+  }
+}

package/plugins/trdr-design-system/skills/trdr-ds/modes/report.md

@@ -0,0 +1,139 @@
+# Report Mode
+
+> **When to load:** `/trdr-ds report`, or auto-triggered by dissatisfaction detection or critical failures.
+> **Purpose:** Generate and send a structured bug report to the skill maintainer.
+
+**Maintainer email:** `mrocontent@gmail.com`
+
+---
+
+## Auto-trigger conditions
+
+| Condition | Severity | Auto-report? |
+|-----------|----------|--------------|
+| Sub-phase crash (missing files, parse errors, Hub + local both fail) | CRITICAL | Yes |
+| Build fails after sub-phase changes | CRITICAL | Yes |
+| >30% violations in batch unmappable | HIGH | Yes |
+| Component replacement produced malformed JSX/HTML | CRITICAL | Yes |
+| Rollback invoked | HIGH | Yes |
+
+When auto-triggered:
+```
+A skill detectou problemas criticos nesta migracao.
+Um bug report sera gerado e enviado ao maintainer (mrocontent@gmail.com).
+
+Deseja incluir observacoes adicionais?
+- Escreva seu comentario
+- "pular" / "skip" — enviar sem comentarios
+```
+Wait for reply. Save as `developerNotes`.
+
+---
+
+## Manual invocation
+
+```
+Bug report — descreva o problema que encontrou com a skill:
+```
+Wait for reply. Save as `developerNotes`.
+
+---
+
+## Step R1 — Collect context
+
+Gather silently:
+
+1. **Project info:** package.json (name, framework, version), Node.js version, OS, skill version
+2. **Migration state:** DS_ANALYSIS.md, DS_PROGRESS.md (including full Execution Log), SPRINT_PLAN.md, DS_MIGRATION.md
+3. **Error context:** specific error/condition, last 3 files modified, build error (first 50 lines if applicable)
+4. **Snapshot versions:** components index generatedAt, tokens.css variable count
+
+---
+
+## Step R2 — Generate DS_BUG_REPORT.md
+
+Write at project root:
+
+```markdown
+# TRDR DS — Bug Report
+
+**Date:** [ISO datetime]
+**Skill version:** [version]
+**Report type:** [AUTOMATIC | MANUAL]
+**Severity:** [CRITICAL | HIGH | MEDIUM]
+
+## Problem Description
+[developerNotes or auto-trigger description]
+
+## Project Context
+| Field | Value |
+|-------|-------|
+| Project | [name] |
+| Framework | [framework] [version] |
+| Styling mode | [stylingMode] |
+| Node.js | [version] |
+| OS | [platform] |
+
+## Migration State
+| Sub-phase | Status |
+|-----------|--------|
+| Analysis | [status] |
+| A — Foundation | [status] |
+| B — Violations | [status — N/M batches] |
+| C — Components | [status — N/M candidates] |
+| D — Final | [status] |
+
+## Violation Summary
+| Category | Found | Fixed | Unfixable |
+|----------|-------|-------|-----------|
+| A — Colors | [n] | [n] | [n] |
+| ... | ... | ... | ... |
+
+## Error Details
+[Build errors, unmapped violations, malformed output]
+
+## Execution Log
+[Full log from DS_PROGRESS.md]
+
+## Developer Notes
+> [Raw text]
+```
+
+---
+
+## Step R3 — Send via email (Resend API)
+
+```bash
+node -e "
+const https = require('https');
+const report = require('fs').readFileSync('DS_BUG_REPORT.md', 'utf8');
+const data = JSON.stringify({
+  from: 'TRDR DS Skill <onboarding@resend.dev>',
+  to: ['mrocontent@gmail.com'],
+  subject: '[TRDR DS SEVERITY] Bug report — PROJECT (vVERSION)',
+  text: report
+});
+const req = https.request({
+  hostname: 'api.resend.com', path: '/emails', method: 'POST',
+  headers: { 'Authorization': 'Bearer ' + process.env.RESEND_API_KEY, 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(data) }
+}, (res) => { let body=''; res.on('data',c=>body+=c); res.on('end',()=>console.log(res.statusCode<300?'OK: '+body:'FAIL ('+res.statusCode+'): '+body)); });
+req.write(data); req.end();
+"
+```
+
+If `RESEND_API_KEY` not set: report saved locally, instructions to configure.
+If send fails: report saved locally, instructions to send manually.
+
+---
+
+## Step R4 — Output
+
+```
+[If sent:] Bug report gerado e enviado. DS_BUG_REPORT.md salvo. Email enviado para mrocontent@gmail.com.
+[If failed:] Bug report salvo em DS_BUG_REPORT.md. Email nao enviado.
+
+-> Para continuar: /trdr-ds resume
+-> Para reverter: /trdr-ds rollback
+```
+
+Add to DS_PROGRESS.md: `Bug report: DS_BUG_REPORT.md (sent [datetime] — [type] — [severity])`

package/plugins/trdr-design-system/skills/trdr-ds/modes/resume.md

@@ -0,0 +1,46 @@
+# Resume Mode
+
+> **When to load:** `/trdr-ds resume` — continue migration from last checkpoint.
+> **Purpose:** Pick up the next pending sprint after a `/clear` or new conversation.
+
+---
+
+## Procedure
+
+1. Look for `SPRINT_PLAN.md` and `DS_PROGRESS.md` at project root.
+   - If neither found: `Nenhuma migracao encontrada. Execute /trdr-ds para iniciar.`
+   - If `DS_PROGRESS.md` has `Status: COMPLETE`: `Migracao completa (finalizada [date]). Execute /trdr-ds para verificar novas violacoes.`
+
+2. Read `SPRINT_PLAN.md`. Find first sprint with `Status: PENDING` or `Status: IN_PROGRESS`.
+   - If all `COMPLETE`: mark migration COMPLETE in DS_PROGRESS.md, output summary.
+
+3. Read `DS_PROGRESS.md` for overall state.
+
+4. Read **only the relevant section** of `DS_ANALYSIS.md`:
+   - Foundation sprint: `## Project` only
+   - Violation sprint: `## By File` entries ONLY for files in that sprint
+   - Components sprint: `## Component Replacement Candidates`
+   - Final sprint: `## Logo Audit`
+
+5. Output resume summary:
+   ```
+   Resumindo migracao TRDR DS — [project name]
+
+   Sprint Plan: [done]/[total] sprints completos ([percentage]%)
+
+   Sprint 1 — Foundation                          [status icon]
+   Sprint 2 — Violations: src/components/          [status icon]
+   Sprint 3 — Violations: src/pages/               <- retomando aqui
+   Sprint 4 — Components                           pending
+   Sprint 5 — Final                                pending
+
+   Retomando: Sprint [N] — [name]
+   Escopo: [sprint scope description]
+   ```
+
+   Status icons: `done` / `<- retomando aqui` / `pending`
+
+6. Execute the current sprint:
+   - Read the appropriate phase file from `phases/`
+   - Follow the sprint lifecycle (read → execute → save → STOP)
+   - All context from files, NEVER from conversation history