trdr-ds-install 1.2.4 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "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

@@ -1,8 +1,8 @@
 ---
 name: trdr-ds
-description: Applies the TRDR Design System to any project. Runs a two-phase workflow - first analyzes the project and presents a migration plan for approval, then executes the full implementation (tokens, components, CLAUDE.md, violation fixes). Trigger when developer mentions "apply design system", "implement TRDR DS", "add TRDR tokens", "design system setup", "migrar design system", "aplicar design system", or invokes /trdr-ds.
+description: Applies the TRDR Design System to any project. Runs a two-phase workflow - first analyzes the project and presents a migration plan for approval, then executes the full implementation (tokens, components, CLAUDE.md, violation fixes). For large projects (50+ violations), execution is batched by folder with progress saved to DS_PROGRESS.md and resumable at any time. Trigger when developer mentions "apply design system", "implement TRDR DS", "add TRDR tokens", "design system setup", "migrar design system", "aplicar design system", or invokes /trdr-ds.
 user-invocable: true
-argument-hint: "[analyze|apply|sync]"
+argument-hint: "[analyze|apply|resume|status|sync|batch N]"
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
@@ -25,6 +25,9 @@ Execute in two clearly separated phases: **PHASE 1: ANALYZE → PHASE 2: EXECUTE
 |-----|-----------|
 | `analyze` *(default when none given)* | Run Phase 1 only — produce a migration plan, do not modify any project file |
 | `apply` | Run Phase 1 + Phase 2 |
+| `resume` | Read `DS_PROGRESS.md` from the project root and continue from the last checkpoint (Phase 2 batching only) |
+| `status` | Read `DS_PROGRESS.md` and display a progress summary table — no files modified |
+| `batch [N]` | Override default batch size for Phase 2 (default: 25 files/batch) |
 | `sync` | Re-fetch `https://trdr.mrocontent.com.br/components.json` and `https://trdr.mrocontent.com.br/tokens.css`, overwrite `data/components.json` and `references/tokens.css` in the skill directory, report the diff. No project changes. |
 | `--latest` *(modifier on `analyze` or `apply`)* | Same as `sync` first, then continue normally |
 
@@ -34,6 +37,26 @@ Execute in two clearly separated phases: **PHASE 1: ANALYZE → PHASE 2: EXECUTE
 
 Scan the project and produce a structured migration plan. Do NOT modify any project files yet.
 
+### Step 0 — Detect previous progress
+
+Before any analysis, check if `DS_PROGRESS.md` exists at the project root.
+
+**If found AND `Status:` line is NOT `COMPLETE`:**
+```
+⚠️ Previous TRDR DS migration found (status: [IN_PROGRESS/PAUSED]).
+
+Reply with:
+- `"resume"` — continue from last checkpoint (Batch [N])
+- `"restart"` — discard progress and run a fresh analysis
+- `"status"` — see a progress summary without modifying anything
+```
+**STOP HERE. Wait for the developer's reply.**
+
+**If found AND `Status: COMPLETE`:**
+Inform the dev that a previous migration was already completed (show date). Offer to re-run analysis to detect new files added since then. Continue only if the dev explicitly says so.
+
+**If not found:** Continue normally to Step 1.
+
 ### Step 1 — Detect framework
 
 Read `package.json` at the project root. Identify:
@@ -89,6 +112,11 @@ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-
 **H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
 Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
 
+Track:
+- `total_violations` = sum of all A–H occurrences
+- `total_files_with_violations` = count of unique files with ≥ 1 violation
+- `violations_by_folder` = map of `{ folder: string, files: string[], count: number }[]` grouped by first-level folder inside `src/` (or project root if no `src/`)
+
 ### Step 3.5 — Detect component replacement candidates
 
 Scan the project for UI patterns that indicate elements replaceable by TRDR implemented components.
@@ -176,7 +204,11 @@ Use the loaded data throughout the rest of the workflow. Track:
 
 ### Step 5 — Present the migration plan and STOP
 
-Output the following report and **do not proceed** until the developer explicitly approves:
+Output the following report and **do not proceed** until the developer explicitly approves.
+
+Determine execution mode based on thresholds:
+- **Small project** (`total_violations <= 50` AND `total_files_with_violations <= 30`): standard monolithic execution — no batching, no DS_PROGRESS.md
+- **Large project** (`total_violations > 50` OR `total_files_with_violations > 30`): batched execution — include the large project warning below
 
 ```markdown
 ## TRDR Design System — Migration Plan
@@ -230,11 +262,21 @@ Output the following report and **do not proceed** until the developer explicitl
 
 > **Implementados:** o CSS já estará em `components.css` após a Fase 2 — o dev só precisa trocar as classes.
 > **Stubs:** receberão banner comment com tokens recomendados + entrada em `MISSING_COMPONENTS.md`.
-> **Não listados aqui:** componentes específicos da TRDR (boleta, janela) — verificar manualmente se o projeto os usa.
 
 ### SCOPE ESTIMATE: [Small / Medium / Large]
 Small = <10 violations | Medium = 10–50 | Large = 50+
 
+[ONLY for large projects — include this block:]
+### ⚠️ LARGE PROJECT DETECTED
+[total_violations] violations across [total_files_with_violations] files.
+Phase 2 will run in **BATCHES BY FOLDER** to prevent context overflow and allow resuming.
+
+Default batch: 25 files/batch → ~[ceil(total_files_with_violations/25)] batches estimated
+Progress saved to `DS_PROGRESS.md` — resumable anytime with `/trdr-ds resume`.
+
+To change batch size: reply with `"Apply, batch 15"` or `"Apply, batch 40"`.
+[END large project block]
+
 ### WHAT WILL NOT BE TOUCHED:
 - Images, SVGs, fonts files
 - node_modules/, .next/, dist/, build/, out/
@@ -245,6 +287,7 @@ Small = <10 violations | Medium = 10–50 | Large = 50+
 
 **Reply with one of:**
 - `"Apply"` or `"Executar"` — proceed with everything above
+- `"Apply, batch [N]"` — proceed with custom batch size (large projects only)
 - `"Apply, skip [file or directory]"` — proceed but exclude specific paths
 - `"Only tokens"` — only create tokens.css, components.css, and CLAUDE.md (no violation fixes)
 - `"Change [detail]"` — adjust a specific part of the plan before executing
@@ -257,7 +300,55 @@ Small = <10 violations | Medium = 10–50 | Large = 50+
 
 ## PHASE 2: EXECUTION (only after explicit approval)
 
-Execute in order. Report progress after each major step.
+Parse the developer's reply:
+- Extract batch size override from `"Apply, batch N"` → use N; otherwise default to 25.
+- Extract skip paths from `"Apply, skip [path]"` → exclude those from violation processing.
+- `"Only tokens"` → skip Steps 5 and 6 (no violation fixes, no component banners).
+
+Report progress after each major step.
+
+### Step 0 — Initialize checkpoint
+
+**Determine execution mode:**
+```
+if total_violations <= 50 AND total_files_with_violations <= 30:
+  mode = MONOLITHIC  (no DS_PROGRESS.md created — skip to Step 1)
+else:
+  mode = BATCHED     (create DS_PROGRESS.md, execute in batches)
+```
+
+**For BATCHED mode — create `DS_PROGRESS.md` at the project root:**
+
+```markdown
+# TRDR DS Migration — Progress
+Started: [ISO datetime]
+Project: [project name from package.json]
+Batch size: [N]
+Status: IN_PROGRESS
+
+## Foundation
+- [ ] tokens.css
+- [ ] components.css
+- [ ] CLAUDE.md
+- [ ] @import no CSS global
+
+## Lotes de Violações
+Total de arquivos com violações: [total_files_with_violations]
+Total de violações: [total_violations]
+Total de lotes: [N]
+
+[For each folder in violations_by_folder, sorted alphabetically.
+ If a folder has more files than batch_size, split into sub-batches labeled "1a", "1b", etc.
+ Files at the project root (not inside src/) go in a final "raiz" batch.]
+
+### Lote 1 — [folder/] ([N] arquivos) — PENDING
+### Lote 2 — [folder/] ([N] arquivos) — PENDING
+...
+### Lote [n] — raiz ([N] arquivos) — PENDING
+
+## Padrões Sem Token (revisão manual)
+[empty — filled during execution]
+```
 
 ### Step 1 — Create tokens.css
 
@@ -274,6 +365,11 @@ If `references/tokens.css` is missing in the skill directory:
 1. Try `WebFetch: https://trdr.mrocontent.com.br/tokens.css`, save it to the skill dir, then proceed.
 2. If the Hub is also unreachable → STOP with error message asking the maintainer to run `npm run sync`.
 
+**For BATCHED mode:** After writing tokens.css, update `DS_PROGRESS.md`:
+```
+- [x] tokens.css — [path]/tokens.css
+```
+
 ### Step 2 — Create components.css
 
 Build `components.css` by concatenating the `.code.css` block of every implemented component plus the typography utility classes.
@@ -312,6 +408,11 @@ After all component CSS blocks, append the text style utility classes:
 .trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
 ```
 
+**For BATCHED mode:** Update `DS_PROGRESS.md`:
+```
+- [x] components.css — [path]/components.css
+```
+
 ### Step 3 — Update global CSS
 
 Find the main global CSS file (globals.css, main.css, index.css, app.css) and add at the very top:
@@ -325,6 +426,11 @@ Adjust the relative path if tokens.css is in a subdirectory.
 
 If the project already imports a different design system's variables and there are naming conflicts, warn the developer before proceeding.
 
+**For BATCHED mode:** Update `DS_PROGRESS.md`:
+```
+- [x] @import — [global-css-file]
+```
+
 ### Step 4 — Create CLAUDE.md
 
 Create `CLAUDE.md` at the project root, populated dynamically from the catalog:
@@ -383,9 +489,62 @@ bg.primary (base) → bg.secondary/tertiary (content areas) → surface.* (cards
 → interactive components → overlays/modals/tooltips
 ```
 
+**For BATCHED mode:** Update `DS_PROGRESS.md`:
+```
+- [x] CLAUDE.md — CLAUDE.md
+```
+
+Then output:
+```
+✅ Foundation complete — tokens.css, components.css, CLAUDE.md, @import all done.
+Starting violation processing in [N] batches of up to [batch_size] files each.
+```
+
 ### Step 5 — Migrate violations
 
-For each violation found in Phase 1, apply the semantic token replacement.
+**MONOLITHIC mode:** Process all files with violations in one pass. Apply all replacements below. Continue to Step 6.
+
+**BATCHED mode:** Process one batch at a time, with a STOP between batches.
+
+For each batch listed as PENDING in `DS_PROGRESS.md`:
+
+1. Update `DS_PROGRESS.md` — change batch status to `IN_PROGRESS`
+2. For each file in the batch:
+   - Apply all applicable violation fixes (see mapping tables below)
+   - Count violations fixed
+3. Update `DS_PROGRESS.md` — change batch status to `COMPLETED`:
+   ```
+   ### Lote [N] — [folder/] ([N] arquivos) — COMPLETED
+   Violações corrigidas: [N] | Arquivos: [N]/[N]
+   ```
+   Add any unfixable patterns to the "Padrões Sem Token" section of `DS_PROGRESS.md`.
+4. Output batch summary:
+   ```
+   ✅ Lote [N] concluído — [folder/] ([N] arquivos, [N] violações corrigidas)
+   Progresso geral: [done]/[total] lotes | [total_fixed] violações corrigidas
+   ```
+5. If more batches are PENDING:
+
+   **STOP HERE.** Output:
+   ```
+   Próximo: **Lote [N+1] — [folder/]** ([N] arquivos)
+   Responda:
+   - "continuar" / "continue" — processar próximo lote
+   - "pular [pasta]" — skip this folder and go to the next batch
+   - "parar" / "stop" — save progress and stop here (resume later with `/trdr-ds resume`)
+   - "tudo" / "all" — process all remaining batches without pausing
+   ```
+   **Wait for developer reply.**
+
+   If reply is `"tudo"` / `"all"`: process all remaining batches without pausing (update DS_PROGRESS.md after each).
+   If reply is `"pular [pasta]"`: mark that batch as SKIPPED in DS_PROGRESS.md and move to the next.
+   If reply is `"parar"`: set `Status: PAUSED` in DS_PROGRESS.md. STOP. Do not proceed to Step 6 or 7.
+
+6. After ALL batches are COMPLETED (or skipped): continue to Step 6.
+
+---
+
+**Violation mapping tables (used in Steps 5 for both modes):**
 
 **Color mapping (hardcoded → semantic):**
 | Hardcoded value | Context | Replace with |
@@ -430,17 +589,17 @@ For each violation found in Phase 1, apply the semantic token replacement.
 **rgba() mapping:**
 | Hardcoded pattern | Context | Replace with |
 |-------------------|---------|-------------|
-| `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_MIGRATION.md as "Missing shadow token" |
+| `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_PROGRESS.md / DS_MIGRATION.md as "Missing shadow token" |
 | `rgba(255,255,255,.29)` approx | overlay/backdrop | `var(--bg-overlay)` |
-| `rgba(255,255,255,*)` other | overlay | flag in DS_MIGRATION.md |
+| `rgba(255,255,255,*)` other | overlay | flag |
 | Any other `rgba(N,N,N,*)` | various | Map to nearest semantic alpha token (--surface-brand, --surface-info, --action-*-alpha, etc.) or flag |
 
 **Gradient mapping:**
 | Pattern | Replace with |
 |---------|-------------|
 | `linear-gradient(...)` using only TRDR brand colors | `var(--gradient-text-brand)`, `var(--gradient-bg-hero)`, or `var(--gradient-bg-fade)` as appropriate |
-| `linear-gradient(...)` using any non-DS colors | Flag in DS_MIGRATION.md as non-compliant — developer must decide: remove, replace with a TRDR gradient token, or add a new token to the Hub |
-| Gradient inside SVG data URI embedded in CSS | Flag in DS_MIGRATION.md |
+| `linear-gradient(...)` using any non-DS colors | Flag — developer must decide: remove, replace with TRDR gradient token, or add new token to Hub |
+| Gradient inside SVG data URI embedded in CSS | Flag |
 
 **Font-size mapping:**
 | Hardcoded value | Replace with |
@@ -457,14 +616,14 @@ For each violation found in Phase 1, apply the semantic token replacement.
 | `font-size: 14px` | `.trdr-body-b3` or `.trdr-label-l3` (check weight context) |
 | `font-size: 12px` | `.trdr-body-b4` or `.trdr-body-aux` (check letter-spacing) |
 | `font-size: 10px` | `.trdr-body-b5` class |
-| `font-size: [other px]` | Nearest text style class — flag in DS_MIGRATION.md if no match |
+| `font-size: [other px]` | Nearest text style class — flag if no match |
 
 **Do NOT replace:**
 - Hex values inside binary image files (PNG, JPG, GIF)
-- SVG external files — flag them in DS_MIGRATION.md but do not auto-edit
+- SVG external files — flag them but do not auto-edit
 - Values in commented-out code
 
-**All other values MUST be replaced or flagged.** There are no exceptions for "decorative" gradients, shadows, or overlays. If no semantic token exists for a given pattern, flag it in DS_MIGRATION.md under "Missing DS tokens" and notify the developer to request the token in the Hub.
+**All other values MUST be replaced or flagged.** No exceptions for "decorative" gradients, shadows, or overlays.
 
 ### Step 6 — Apply component code (smart fallback)
 
@@ -490,7 +649,7 @@ Use the `replacementCandidates[]` list built in Phase 1 Step 3.5. For each entry
      - Status: ⚠️ stub — code blocks pending
      ```
 4. **If no slug matches** the detected pattern:
-   - Flag the pattern in `MISSING_COMPONENTS.md` under "Unmapped patterns" with the file location and a one-line description of the UI need. The maintainer can then decide whether to add a stub to the catalog.
+   - Flag the pattern in `MISSING_COMPONENTS.md` under "Unmapped patterns" with the file location and a one-line description of the UI need.
 
 ### Step 7 — Generate DS_MIGRATION.md
 
@@ -509,6 +668,7 @@ Hub: https://trdr.mrocontent.com.br
 - ✅ [N] violations fixed in [M] files
 - ✅ [global-css] updated with @import
 - ⚠️ [S] stub components flagged in MISSING_COMPONENTS.md (if any)
+[If batched: - ✅ Migrated in [N] batches — see DS_PROGRESS.md for batch-level detail]
 
 ## Files modified
 [List each file and what changed]
@@ -522,11 +682,10 @@ Hub: https://trdr.mrocontent.com.br
   - Others: add Google Fonts `<link>` in HTML head
 - [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides — add `data-theme="light"` to `<html>` to activate light mode
 - [ ] **Trading UI**: If this project has price/position displays, verify context.trading.* tokens are applied (see Hub: /tokens/semanticos)
-- [ ] **Stubs**: Review MISSING_COMPONENTS.md and decide whether to wait for canonical implementation in the Hub or hand-roll the component now using the listed tokens
+- [ ] **Stubs**: Review MISSING_COMPONENTS.md and decide whether to wait for canonical implementation in the Hub or hand-roll using the listed tokens
 - [ ] **Skipped files**: [list any files excluded from migration]
 
 ## Missing DS tokens (flagged — no semantic token available)
-[List patterns found in the project that have no TRDR token yet — request these in the Hub]
 | Pattern | File | Suggestion |
 |---------|------|-----------|
 | `box-shadow: rgba(0,0,0,*)` | [file:line] | Request shadow token in Hub |
@@ -543,6 +702,12 @@ Hub: https://trdr.mrocontent.com.br
 - Rules: https://trdr.mrocontent.com.br/para-ia
 ```
 
+**For BATCHED mode:** After writing DS_MIGRATION.md, update `DS_PROGRESS.md`:
+```
+Status: COMPLETE
+Completed: [ISO datetime]
+```
+
 ---
 
 ## EXECUTION SUMMARY
@@ -558,6 +723,7 @@ Created:
   • CLAUDE.md (design system context for Claude Code)
   • DS_MIGRATION.md (migration log + manual checklist)
   • MISSING_COMPONENTS.md ([S] stubs flagged) — only if applicable
+  [If batched: • DS_PROGRESS.md (migration log — status: COMPLETE)]
 
 Modified:
   • [global-css] — @import added
@@ -571,6 +737,63 @@ Hub: https://trdr.mrocontent.com.br
 
 ---
 
+## RESUME MODE (when invoked with `resume` argument)
+
+1. Look for `DS_PROGRESS.md` at the project root.
+   - If not found: output `❌ No previous migration found. Run /trdr-ds to start a new one.`
+   - If `Status: COMPLETE`: output `✅ Migration already complete (finished [date]). Run /trdr-ds to check for new violations.`
+
+2. Read `DS_PROGRESS.md`. Find the first batch with status `IN_PROGRESS` or `PENDING`.
+
+3. Output a resume summary:
+   ```
+   Resuming TRDR DS migration — [project name]
+   Foundation: ✅ complete
+   Batches completed: [done]/[total] | Violations fixed so far: [N]
+   Resuming at: **Lote [N] — [folder/]** ([N] files)
+   ```
+
+4. Continue Phase 2 Step 5 from that batch. Follow the same STOP-between-batches flow.
+
+5. After all batches finish: run Steps 6 and 7 (component banners + DS_MIGRATION.md).
+
+---
+
+## STATUS MODE (when invoked with `status` argument)
+
+1. Look for `DS_PROGRESS.md` at the project root.
+   - If not found: output `No migration in progress. Run /trdr-ds to start.`
+
+2. Read `DS_PROGRESS.md` and output a progress table — do NOT modify any files:
+
+```
+## TRDR DS — Migration Status
+
+Project: [name] | Started: [date] | Status: [IN_PROGRESS/PAUSED/COMPLETE]
+
+### Foundation
+| Step | File | Status |
+|------|------|--------|
+| tokens.css | [path] | ✅ / ⏳ |
+| components.css | [path] | ✅ / ⏳ |
+| CLAUDE.md | CLAUDE.md | ✅ / ⏳ |
+| @import | [global-css] | ✅ / ⏳ |
+
+### Violation Batches
+| Lote | Pasta | Arquivos | Violações | Status |
+|------|-------|----------|-----------|--------|
+| 1 | src/components/ | 12 | 34 | ✅ COMPLETED |
+| 2 | src/pages/ | 8 | 12 | 🔄 IN_PROGRESS |
+| 3 | src/app/ | 15 | — | ⏳ PENDING |
+| 4 | src/styles/ | 6 | — | ⏳ PENDING |
+
+Progress: [N]% ([done]/[total] batches — [violations_fixed]/[total_violations] violations fixed)
+
+To continue: `/trdr-ds resume`
+```
+
+---
+
 ## SYNC MODE (when invoked as `/trdr-ds sync`)
 
 1. WebFetch `https://trdr.mrocontent.com.br/components.json` → save as `<skill-dir>/data/components.json`
@@ -581,7 +804,7 @@ Hub: https://trdr.mrocontent.com.br
    - Removed: [list slugs no longer in catalog]
 4. No project files are touched.
 
-If either fetch fails, report which one and exit with a non-zero status. Do NOT touch the snapshot if the fetch succeeded but the response is malformed (e.g., missing `components` array).
+If either fetch fails, report which one and exit. Do NOT touch the snapshot if the response is malformed (e.g., missing `components` array).
 
 ---
 

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"
  */