trdr-ds-install 1.4.0 → 1.4.1

package/README.md

@@ -43,9 +43,23 @@ The skill is **offline-first**: it ships with a snapshot of the catalog (`data/c
 |---------|-----------|
 | `/trdr-ds` *(default = analyze)* | Scan + plan, no changes |
 | `/trdr-ds apply` | Scan + plan + execute after approval |
+| `/trdr-ds apply batch 15` | Same as apply, but process violations in batches of 15 files (default: 25) |
+| `/trdr-ds resume` | Continue a batched migration from the last checkpoint (`DS_PROGRESS.md`) |
+| `/trdr-ds status` | Show migration progress from `DS_PROGRESS.md` — no files modified |
 | `/trdr-ds sync` | Refresh local snapshot from the Hub (no project changes) |
 | `/trdr-ds apply --latest` | Sync first, then apply |
 
+**Large project support:**
+
+For projects with more than 50 violations or 30 affected files, Phase 2 switches automatically to **batched mode**:
+- Violations are processed folder by folder (e.g. `src/components/`, `src/pages/`, `src/app/`)
+- Progress is saved to `DS_PROGRESS.md` after each batch — safe to stop and resume across sessions
+- After each batch the dev chooses: `"continuar"` / `"pular [pasta]"` / `"parar"` / `"tudo"`
+
+**Logo audit:**
+
+Phase 1 automatically scans for logo files (`logo*.svg`, `*trdr*.svg`, `brand*.svg`) and checks each against the official TRDR logo fingerprint (`viewBox="0 0 105 41"`, `fill="#00D4FF"`). Wrong logos are replaced in Phase 2 without changing the filename or path.
+
 The skill matches detected UI patterns against the catalog. Implemented components (`implemented: true`) are applied with full code; stubs (`implemented: false`) get tokens + a banner comment + an entry in `MISSING_COMPONENTS.md` for the maintainer to revisit.
 
 ## For maintainers (Mauro)
@@ -98,7 +112,8 @@ trdr-plugins/
 ├── bin/install.js            ← copies skill to ~/.claude/skills
 ├── scripts/
 │   ├── sync-components.js    ← pull /components.json from Hub
-│   └── sync-tokens.js        ← pull /tokens.css from Hub
+│   ├── sync-tokens.js        ← pull /tokens.css from Hub
+│   └── sync-version.js       ← syncs Skill version constant on npm version
 └── plugins/trdr-design-system/
     ├── .claude-plugin/plugin.json
     └── skills/trdr-ds/
@@ -107,5 +122,6 @@ trdr-plugins/
         │   └── components.json    ← snapshot of /components.json
         └── references/
             ├── rules.md           ← absolute design rules (PT-BR)
-            └── tokens.css         ← snapshot of /tokens.css
+            ├── tokens.css         ← snapshot of /tokens.css
+            └── logo-trdr.svg      ← official TRDR logo (105×41px)
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "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|resume|status|sync|batch N]"
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
-**Skill version:** 1.4.0
+**Skill version:** 1.4.1
 **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**.
@@ -55,7 +55,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.4.0)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.4.1)
 
   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-12T15:34:28.515Z",
-  "total": 17,
-  "implemented": 17,
+  "generatedAt": "2026-05-12T20:17:42.750Z",
+  "total": 18,
+  "implemented": 18,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -1722,6 +1722,127 @@
         "react": "import Janela from '@/components/ui/Janela'\nimport Boleta from '@/components/ui/Boleta'\n\n// Versão default — slot vazio mostra \"Componente coringa\"\n<Janela />\n\n// Com tabs/ferramentas customizadas e callback\n<Janela\n  tools={[\n    { label: 'Book', icon: 'view_list' },\n    { label: 'Gráfico', icon: 'show_chart' },\n  ]}\n  tabs={['Mercado', 'Posições', 'Histórico']}\n  activeTab={0}\n  onTabChange={(i) => console.log('tab', i)}\n/>\n\n// Com conteúdo customizado no slot\n<Janela activeTab={2} showSideScroll showBottomScroll>\n  <Boleta versao=\"simples\" />\n</Janela>\n\n// Com floating menu de ações aberto\n<Janela\n  showActionsMenu\n  onActionsMenuToggle={() => setMenuOpen(v => !v)}\n  actions={[\n    { icon: 'close', label: 'Fechar', onClick: handleClose },\n    { icon: 'remove', label: 'Minimizar' },\n    { icon: 'arrow_outward', label: 'Maximizar' },\n  ]}\n/>",
         "prompt": "Implemente o componente Janela do Design System TRDR — janela de ferramenta de trading composta, pixel-perfect com o Figma 1909:41600.\n\nDIMENSÕES (fixas): 476×312 px, border-radius var(--radius-md) (8px), border 1px solid var(--border-subtle), background var(--bg-secondary), overflow hidden, position relative, font-family var(--font-secondary). Layout em coluna com 3 faixas:\n\n1. HEADER (height 41px, bg var(--bg-secondary), border-bottom 1px var(--border-subtle), padding 0 8px, gap 8px):\n   - Tag AI: padding 2px 4px, gap 2px, bg var(--bg-brand) #00D4FF, border-radius var(--radius-sm) 4px, texto \"AI\" Inter 11/600 var(--content-primary). Ícone Material \"auto_awesome\" 12px à esquerda.\n   - Abas Ferramentas (flex:1, height 100%, overflow hidden): 3 botões \"Ferramenta N\", padding 0 12px, font Inter 14/16.8 var(--content-tertiary); ativa muda para var(--content-primary) e ganha ::after com height 2px var(--bg-brand) (#00D4FF) no bottom 0 left/right 0. Botão chevron 40×40 com ícone Material \"keyboard_arrow_down\" tertiary.\n   - Controles à direita (gap 8px): divider vertical 1×33 var(--border-subtle); botão ícone \"link\" 24×24 cor var(--bg-brand) (cyan); botão \"Multi\" 33h padding 0 8px gap 4 bg var(--action-secondary-default) (#4A4A4A) radius var(--radius-lg) (16px) texto primary + chevron 16px; botões ícone \"more_horiz\" e \"close\" 24×24 tertiary.\n\n2. PILL TABS (height 45px, bg var(--bg-tertiary) #1A1A1A, padding 8px, gap 8px, border-bottom subtle, overflow hidden):\n   - 5 pills \"Aba 1..Aba 5\". Cada pill 31h padding 8px 12px radius var(--radius-lg) Inter 14/16.8 whitespace nowrap.\n   - Ativa: bg var(--action-secondary-default) #4A4A4A, texto var(--content-primary).\n   - Inativa: bg var(--surface-secondary) #222222, texto var(--content-tertiary). Hover muda texto para var(--content-secondary).\n\n3. CONTAINER CENTRAL (flex 1, bg var(--bg-tertiary), padding 16px, gap 8px, position relative, overflow hidden):\n   - Slot via children. Quando vazio mostrar fallback \"Componente coringa\" centralizado, Inter 14/16.8 var(--content-primary).\n   - Scrollbars opcionais (controlados por props showSideScroll/showBottomScroll):\n     • Lateral (right 0, top 0, bottom 6px, width 14px, bg var(--bg-secondary), border-left subtle): seta cima 12×12 Material \"arrow_drop_up\", track 6px com thumb radius 16 bg var(--action-secondary-default) 60% de altura, seta baixo \"arrow_drop_down\".\n     • Inferior (left 0, right 14px, height 14px, bg var(--bg-secondary), border-top subtle): seta esquerda \"arrow_left\", track horizontal com thumb radius 16, seta direita \"arrow_right\".\n     • Canto: quando ambos ativos, 14×14 no canto inferior direito com bg secondary e borders.\n\n4. FLOATING ACTIONS MENU (opcional, posição absoluta top 45px right 40px, width 172px):\n   - bg var(--bg-secondary), border 1px var(--border-subtle), border-radius var(--radius-md) (8px), box-shadow 0 4px 12px rgba(0,0,0,0.30), padding 8px, gap 4px, z-index 10.\n   - 5 ações: { close: Fechar, remove: Minimizar, arrow_outward: Maximizar, keep: Fixar, edit: Renomear aba }. Cada item: height 32px, padding 0 8px, gap 8px, border-radius var(--radius-sm), ícone Material 20px var(--content-tertiary), label Inter 14/16.8 var(--content-secondary). Hover bg var(--surface-secondary).\n\nAPI React (TypeScript): props { tools?: JanelaTool[]; activeTool?: number; onToolChange?; tabs?: string[]; activeTab?: number; onTabChange?; multiLabel?: string; onMultiClick?; onLinkClick?; onClose?; showSideScroll?: boolean; showBottomScroll?: boolean; showActionsMenu?: boolean; onActionsMenuToggle?; actions?: JanelaAction[]; children?: ReactNode }. Suporta estado controlado E não-controlado (defaultActiveTool/defaultActiveTab). aria-selected nas pills, aria-expanded no botão de menu, role=\"tab\"/\"tablist\"/\"menu\"/\"menuitem\".\n\nUse APENAS tokens semânticos do TRDR (var(--bg-*), var(--surface-*), var(--content-*), var(--action-*), var(--border-*), var(--radius-*), var(--spacing-*)). NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-* (não existem). O componente deve funcionar nos dois temas (light e dark) sem alterações."
       }
+    },
+    {
+      "slug": "news-card",
+      "name": "News Card",
+      "figmaId": "66:2373",
+      "category": "trading",
+      "description": "Card de notícia financeira — exibe título, fonte, tempo e indicador de sentimento (alta/baixa/neutro). Usado em feeds de notícias dentro do contexto de trading.",
+      "implemented": true,
+      "props": [
+        {
+          "name": "sentiment",
+          "type": "enum",
+          "values": [
+            "up",
+            "down",
+            "neutral"
+          ]
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "values": []
+        },
+        {
+          "name": "source",
+          "type": "string",
+          "values": []
+        },
+        {
+          "name": "time",
+          "type": "string",
+          "values": []
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "values": []
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "100%",
+          "height": "74px"
+        },
+        {
+          "label": "Dot indicador",
+          "width": "4px",
+          "height": "4px"
+        },
+        {
+          "label": "Botão de ação",
+          "width": "20px",
+          "height": "20px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Border bottom",
+          "token": "border.subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Dot — alta",
+          "token": "context.trading.up",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Dot — baixa",
+          "token": "context.trading.down",
+          "value": "#F34F45"
+        },
+        {
+          "property": "Dot — neutro",
+          "token": "content.tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Título",
+          "token": "content.primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Fonte / Tempo",
+          "token": "content.tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Separador •",
+          "token": "content.disabled",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Hover BG",
+          "token": "surface.secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Padding",
+          "token": "spacing.sm + spacing.lg",
+          "value": "8px 16px"
+        },
+        {
+          "property": "Gap inner",
+          "token": "spacing.sm",
+          "value": "8px"
+        },
+        {
+          "property": "Radius botão",
+          "token": "radius.sm",
+          "value": "4px"
+        }
+      ],
+      "anatomy": "Container (border-bottom subtle, padding 8px 16px):\n  [Dot 4×4px] [Content flex-1 gap-8px] [Action 20×20px]\n  Content:\n    [Title — Inter 14/400/1.2 content-primary]\n    [Meta row gap-8px h-16px]\n      [Source 14/400] [• 12px disabled] [Time 14/400]",
+      "notes": "O dot indicador sobe (up) ou desce (down) conforme sentimento da notícia. Hover aplica surface.secondary. Quando href é passado, o container se torna um <a> com target _blank.",
+      "code": {
+        "html": "<!-- News Card — Design System TRDR (Figma: 66:2373) -->\n<!-- sentiment: adicionar .trdr-news-card-dot-up | -down | -neutral -->\n<div class=\"trdr-news-card\">\n  <div class=\"trdr-news-card-inner\">\n    <div class=\"trdr-news-card-dot trdr-news-card-dot-up\"></div>\n    <div class=\"trdr-news-card-content\">\n      <p class=\"trdr-news-card-title\">Bitcoin ETF sees record inflows as institutional interest grows</p>\n      <div class=\"trdr-news-card-meta\">\n        <span class=\"trdr-news-card-source\">CoinDesk</span>\n        <span class=\"trdr-news-card-sep\">•</span>\n        <span class=\"trdr-news-card-time\">2h ago</span>\n      </div>\n    </div>\n    <button class=\"trdr-news-card-action\" aria-label=\"Abrir notícia\">\n      <span class=\"material-symbols-outlined\" style=\"font-size:12px;line-height:12px\">open_in_new</span>\n    </button>\n  </div>\n</div>",
+        "css": "/* News Card — Design System TRDR (Figma node: 66:2373, 313×74) */\n.trdr-news-card {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 16px;        /* --spacing-sm --spacing-lg */\n  border-bottom: 1px solid var(--border-subtle);  /* #222222 */\n  width: 100%;\n  cursor: pointer;\n  text-decoration: none;\n  transition: background-color 0.15s ease;\n}\n\n.trdr-news-card:hover {\n  background-color: var(--surface-secondary);     /* #222222 */\n}\n\n.trdr-news-card-inner {\n  display: flex;\n  gap: 8px;                 /* --spacing-sm */\n  align-items: flex-start;\n  width: 100%;\n}\n\n.trdr-news-card-dot {\n  width: 4px;\n  height: 4px;\n  border-radius: 9999px;\n  flex-shrink: 0;\n  margin-top: 6px;\n}\n\n.trdr-news-card-dot-up     { background-color: var(--context-trading-up);   }  /* #4FE290 */\n.trdr-news-card-dot-down   { background-color: var(--context-trading-down); }  /* #F34F45 */\n.trdr-news-card-dot-neutral{ background-color: var(--content-tertiary);     }  /* #A4A4A4 */\n\n.trdr-news-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.trdr-news-card-title {\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-primary);                  /* #FFFFFF */\n  width: 100%;\n}\n\n.trdr-news-card-meta {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.trdr-news-card-source,\n.trdr-news-card-time {\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-tertiary);                 /* #A4A4A4 */\n}\n\n.trdr-news-card-sep {\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--content-disabled);                 /* #4A4A4A */\n}\n\n.trdr-news-card-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border-radius: var(--radius-sm);                /* 4px */\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--content-tertiary);\n  transition: background-color 0.15s ease;\n}\n\n.trdr-news-card-action:hover {\n  background-color: var(--surface-secondary);\n}",
+        "react": "import NewsCard from '@/components/ui/NewsCard'\n\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-*."
+      }
     }
   ]
 }

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