trdr-ds-install 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "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/data/components.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-11T21:56:00.879Z",
-  "total": 15,
-  "implemented": 15,
+  "generatedAt": "2026-05-12T15:34:28.515Z",
+  "total": 17,
+  "implemented": 17,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -1112,6 +1112,172 @@
         "prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n   - Segmented control pill (border-radius: 9999px, bg: --surface-secondary #222)\n   - 2 segments: \"Avançado\" (ativo) e \"Simples\" (inativo)\n   - Segment ativo: bg --action-secondary-default #4A4A4A, radius 16px, padding 8px 12px\n   - Segment inativo: bg transparente, text --content-tertiary\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n   - Linha \"Estratégia\": label (tertiary 12px/500) + valor \"Manejo\" + chevron (primary)\n   - Linha \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n   - Grupo \"Quantidade\": label 12px + input 32px (bg --surface-primary, radius 8px, padding 8px) + 3 quick buttons (border --border-default, radius 8px, padding 8px 12px, font 14px/600 secondary, gap 4px)\n   - Grupo \"Preço da Ordem\": label 12px + input 32px\n   - Linha \"TP/SL\": checkbox 16x16 (border default, radius 5px, bg --surface-tertiary) + label primary\n\n3. BOTÕES (padding: 8px, gap: 8px)\n   - 4 rows de ação (gap 8px cada):\n     • Long (flex:1, bg --context-trading-long-default, text --context-trading-long-text #4FE290, radius 8px, padding 8px, font 14px/600)\n     • Short (flex:1, bg --context-trading-short-default, text --context-trading-short-text #F34F45, radius 8px, padding 8px 12px, font 14px/600)\n   - \"Zerar (5)\": width 100%, height 32px, border 1px sólido --color-orange-500 (#FF6400), text --color-orange-500, radius 8px\n   - \"Cancelar ordens (2) + Zerar (5)\": width 100%, border --border-default, text --content-secondary, radius 8px\n   - Row \"Cancelar Ordem\" (shrink-0) + \"Inverter\" (flex:1 min-width:100px): ambos border --border-default\n   - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success #4FE290), + 2 linhas meta 12px tertiary\n\nHover states: long-hover rgba(79,226,144,0.12), short-hover rgba(243,79,69,0.12), zerar-hover --context-trading-stop-alpha.\nResultado pixel-perfect com exatamente 283px de largura."
       }
     },
+    {
+      "slug": "tabela-cotacoes",
+      "name": "Tabela de Cotações",
+      "figmaId": "77:3681",
+      "category": "trading",
+      "implemented": true,
+      "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.",
+      "props": [
+        {
+          "name": "rows",
+          "type": "CotacaoRow[]",
+          "values": [
+            "array de dados de cotação"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Largura total",
+          "width": "800px",
+          "height": "—"
+        },
+        {
+          "label": "Altura do header",
+          "width": "—",
+          "height": "32px"
+        },
+        {
+          "label": "Altura da linha",
+          "width": "—",
+          "height": "32px"
+        },
+        {
+          "label": "Célula Último",
+          "width": "80px",
+          "height": "32px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Var% positivo",
+          "token": "context.trading.up",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Var% negativo",
+          "token": "context.trading.down",
+          "value": "#F34F45"
+        },
+        {
+          "property": "Cell Último bg",
+          "token": "surface.primary",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Row alternada",
+          "token": "—",
+          "value": "rgba(255,255,255,0.08)"
+        },
+        {
+          "property": "Row hover",
+          "token": "surface.secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Header border",
+          "token": "border.default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Header text",
+          "token": "content.tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Cell text",
+          "token": "content.primary",
+          "value": "#FFFFFF"
+        }
+      ],
+      "anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n  [thead > tr (32px, border-bottom 1px --border-default)]\n    [th: 14px/400 --content-tertiary | padding: 4px 8px]\n    Colunas: Ativo(65) Último(80) Q Últ(65) Var%(65) Tend(65) Dif(65) Stat(65) QOfc(65) Ofc(65) Ofv(65) QOfv(65) Teórico(65)\n  [tbody > tr (32px, cursor pointer)]\n    [tr:nth-child(even): bg rgba(255,255,255,0.08)]\n    [tr:hover: bg --surface-secondary]\n    [tr.selected: bg --bg-secondary]\n    [td: 14px/400 --content-primary | padding: 4px 8px]\n    [td.col-ultimo: bg --surface-primary #4A4A4A]\n    [td.col-var-up: color --context-trading-up #4FE290]\n    [td.col-var-down: color --context-trading-down #F34F45]\n    [td.col-tend: ícone Material Symbols arrow_drop_up/down]",
+      "code": {
+        "html": "<!-- Tabela de Cotações TRDR (Figma: 77:3681) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-cotacoes\">\n    <colgroup>\n      <col style=\"width:65px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Ativo</th><th>Último</th><th>Q Últ</th><th>Var %</th>\n        <th>Tend</th><th>Dif</th><th>Stat...</th><th>QOfc</th>\n        <th>Ofc</th><th>Ofv</th><th>QOfv</th><th>Teórico</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class=\"trdr-tabela-cotacoes-row-selected\">\n        <td>ITUB4</td>\n        <td class=\"col-ultimo\">50.47</td>\n        <td>100</td>\n        <td class=\"col-var-down\">-0.72%</td>\n        <td><span class=\"col-tend-icon col-tend-down\">arrow_drop_down</span></td>\n        <td>0.36</td><td>.</td><td>1.000</td>\n        <td>50.47</td><td>50.49</td><td>1.300</td><td>.</td>\n      </tr>\n      <tr>\n        <td>VALE3</td>\n        <td class=\"col-ultimo\">92,00</td>\n        <td>200</td>\n        <td class=\"col-var-up\">+1.20%</td>\n        <td><span class=\"col-tend-icon col-tend-up\">arrow_drop_up</span></td>\n        <td>0.50</td><td>.</td><td>2.700</td>\n        <td>92,00</td><td>92,10</td><td>4.000</td><td>.</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
+        "css": "/* Tabela de Cotações — TRDR Design System */\n/* Tokens: --context-trading-up (#4FE290), --context-trading-down (#F34F45) */\n/* Tokens: --surface-primary (#4A4A4A), --surface-secondary (#222222)       */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-cotacoes {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary);         /* #FFFFFF */\n}\n\n.trdr-tabela-cotacoes thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);   /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-cotacoes tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.trdr-tabela-cotacoes tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-cotacoes tbody tr.trdr-tabela-cotacoes-row-selected {\n  background: var(--bg-secondary); /* #141519 */\n}\n\n.trdr-tabela-cotacoes td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes td.col-ultimo {\n  background: var(--surface-primary); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes .col-var-up   { color: var(--context-trading-up);   } /* #4FE290 */\n.trdr-tabela-cotacoes .col-var-down { color: var(--context-trading-down); } /* #F34F45 */\n\n.trdr-tabela-cotacoes .col-tend-icon {\n  font-family: 'Material Symbols Outlined';\n  font-size: 20px;\n  font-variation-settings: 'FILL' 1, 'GRAD' 0, 'wght' 400;\n  vertical-align: middle;\n}\n.trdr-tabela-cotacoes .col-tend-up   { color: var(--context-trading-up);   }\n.trdr-tabela-cotacoes .col-tend-down { color: var(--context-trading-down); }",
+        "react": "import TabelaCotacoes, { CotacaoRow } from '@/components/ui/TabelaCotacoes'\n\nconst rows: CotacaoRow[] = [\n  {\n    ativo: 'ITUB4',\n    ultimo: '50.47',\n    qUlt: 100,\n    varPct: -0.72,\n    tend: 'down',\n    dif: '0.36',\n    qOfc: '1.000',\n    ofc: '50.47',\n    ofv: '50.49',\n    qOfv: '1.300',\n    selected: true,\n  },\n  {\n    ativo: 'VALE3',\n    ultimo: '92,00',\n    qUlt: 200,\n    varPct: 1.20,\n    tend: 'up',\n    dif: '0.50',\n  },\n]\n\nexport default function Example() {\n  return <TabelaCotacoes rows={rows} />\n}",
+        "prompt": "Crie um componente React 'TabelaCotacoes' pixel-perfect baseado no Figma TRDR (node 77:3681).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nAtivo=65px, Último=80px, Q Últ=65px, Var%=65px, Tend=65px, Dif=65px,\nStat=65px, QOfc=65px, Ofc=65px, Ofv=65px, QOfv=65px, Teórico=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.08)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.selected: background var(--bg-secondary) /* #141519 */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary) /* #FFFFFF */\n- td.col-ultimo: background var(--surface-primary) /* #4A4A4A */\n- td variação positiva: color var(--context-trading-up) /* #4FE290 */\n- td variação negativa: color var(--context-trading-down) /* #F34F45 */\n- td tendência: ícone Material Symbols Outlined 'arrow_drop_up'/'arrow_drop_down', 20px, FILL 1\n\nINTERFACE TypeScript:\ninterface CotacaoRow {\n  ativo: string; ultimo: string|number; qUlt?: string|number\n  varPct: number; tend?: 'up'|'down'|null; dif?: string|number\n  status?: string; qOfc?: string|number; ofc?: string|number\n  ofv?: string|number; qOfv?: string|number; teorico?: string|number\n  selected?: boolean\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+      }
+    },
+    {
+      "slug": "tabela-ordens",
+      "name": "Tabela de Ordens",
+      "figmaId": "336:3114",
+      "category": "trading",
+      "implemented": true,
+      "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.",
+      "props": [
+        {
+          "name": "rows",
+          "type": "OrdemRow[]",
+          "values": [
+            "array de dados de ordens"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Largura total",
+          "width": "896px",
+          "height": "—"
+        },
+        {
+          "label": "Altura do header",
+          "width": "—",
+          "height": "32px"
+        },
+        {
+          "label": "Altura da linha",
+          "width": "—",
+          "height": "32px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "C (Compra) text",
+          "token": "context.trading.long.text",
+          "value": "#6DE7A2"
+        },
+        {
+          "property": "V (Venda) text",
+          "token": "context.trading.short.text",
+          "value": "#F56D64"
+        },
+        {
+          "property": "Row cancelada bg",
+          "token": "context.trading.short.default",
+          "value": "rgba(241,49,38,0.08)"
+        },
+        {
+          "property": "Row hover",
+          "token": "surface.secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Header border",
+          "token": "border.default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Header text",
+          "token": "content.tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Cell text",
+          "token": "content.primary",
+          "value": "#FFFFFF"
+        }
+      ],
+      "anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n  [thead > tr (32px, border-bottom 1px --border-default)]\n    [th: 14px/400 --content-tertiary | padding: 4px 8px]\n    Colunas: Horário(81) Ativo(80) C/V(65) Preço(104) Médio(79)\n             Qtde(65) Disp(65) Aberta(65) Exec(65) Status(86) Validade(79) Origem(65)\n  [tbody > tr (32px, cursor pointer)]\n    [tr:nth-child(even): bg rgba(255,255,255,0.05)]\n    [tr:hover: bg --surface-secondary]\n    [tr.cancelada: bg --context-trading-short-default]\n    [td: 14px/400 --content-primary | padding: 4px 8px | text-overflow: ellipsis]\n    [td.col-cv-c: color --context-trading-long-text #6DE7A2, font-weight 600]\n    [td.col-cv-v: color --context-trading-short-text #F56D64, font-weight 600]",
+      "code": {
+        "html": "<!-- Tabela de Ordens TRDR (Figma: 336:3114) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-ordens\">\n    <colgroup>\n      <col style=\"width:81px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:104px\"><col style=\"width:79px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:86px\"> <col style=\"width:79px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Horário</th><th>Ativo</th><th>C/V</th><th>Preço</th>\n        <th>Médio</th><th>Qtde</th><th>Disp</th><th>Aberta</th>\n        <th>Exec</th><th>Status</th><th>Validade</th><th>Origem</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>11:32:56</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>20</td><td>.</td><td>.</td><td>20</td>\n        <td>Aberta</td><td>.</td><td>Loss</td>\n      </tr>\n      <tr>\n        <td>11:35:24</td><td>WDOK18</td>\n        <td class=\"col-cv-v\">V</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>19</td><td>.</td><td>.</td><td>19</td>\n        <td>Aberta</td><td>.</td><td>Criptor</td>\n      </tr>\n      <tr class=\"trdr-tabela-ordens-row-cancelada\">\n        <td>11:36:03</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>16</td><td>.</td><td>.</td><td>16</td>\n        <td>Cancelada</td><td>.</td><td>Criptor</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
+        "css": "/* Tabela de Ordens — TRDR Design System */\n/* Tokens: --context-trading-long-text (#6DE7A2) — C (Compra)               */\n/* Tokens: --context-trading-short-text (#F56D64) — V (Venda)               */\n/* Tokens: --context-trading-short-default — fundo linha cancelada           */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-ordens {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-tabela-ordens thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-ordens th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);  /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-ordens tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.trdr-tabela-ordens tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-ordens tbody tr.trdr-tabela-ordens-row-cancelada {\n  background: var(--context-trading-short-default); /* rgba(241,49,38,0.08) */\n}\n\n.trdr-tabela-ordens td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens .col-cv-c {\n  color: var(--context-trading-long-text);  /* #6DE7A2 */\n  font-weight: 600;\n}\n\n.trdr-tabela-ordens .col-cv-v {\n  color: var(--context-trading-short-text); /* #F56D64 */\n  font-weight: 600;\n}",
+        "react": "import TabelaOrdens, { OrdemRow } from '@/components/ui/TabelaOrdens'\n\nconst rows: OrdemRow[] = [\n  {\n    horario: '11:32:56',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 20,\n    exec: 20,\n    status: 'aberta',\n    origem: 'Loss',\n  },\n  {\n    horario: '11:35:24',\n    ativo: 'WDOK18',\n    tipo: 'V',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 19,\n    exec: 19,\n    status: 'aberta',\n    origem: 'Criptor',\n  },\n  {\n    horario: '11:36:03',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 16,\n    exec: 16,\n    status: 'cancelada',\n    origem: 'Criptor',\n  },\n]\n\nexport default function Example() {\n  return <TabelaOrdens rows={rows} />\n}",
+        "prompt": "Crie um componente React 'TabelaOrdens' pixel-perfect baseado no Figma TRDR (node 336:3114).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nHorário=81px, Ativo=80px, C/V=65px, Preço=104px, Médio=79px,\nQtde=65px, Disp=65px, Aberta=65px, Exec=65px, Status=86px, Validade=79px, Origem=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.05)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.cancelada: background var(--context-trading-short-default) /* rgba(241,49,38,0.08) */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary), text-overflow ellipsis\n- td.col-cv-c (Compra): color var(--context-trading-long-text) /* #6DE7A2 */, font-weight 600\n- td.col-cv-v (Venda): color var(--context-trading-short-text) /* #F56D64 */, font-weight 600\n\nINTERFACE TypeScript:\ntype OrdemStatus = 'aberta' | 'executada' | 'cancelada' | 'parcial'\ninterface OrdemRow {\n  horario: string; ativo: string; tipo: 'C'|'V'\n  preco: string|number; medio?: string|number\n  qtde: number; disp?: string|number; aberta?: string|number; exec?: string|number\n  status: OrdemStatus; validade?: string; origem?: string\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+      }
+    },
     {
       "slug": "card",
       "name": "Card",

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-11T23:32:45.091Z
+ * Em: 2026-05-12T15:40:04.662Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */