trdr-ds-install 1.2.0 → 1.2.1

package/package.json

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

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-08T21:43:42.458Z",
-  "total": 13,
-  "implemented": 13,
+  "generatedAt": "2026-05-11T00:35:11.146Z",
+  "total": 14,
+  "implemented": 14,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -1160,6 +1160,247 @@
         "react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n  label: string\n  variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n  href: string\n  icon?: string             // Material Symbols Outlined name (ex: 'palette')\n  title: string\n  description: string\n  headerBadges?: CardBadge[] // badges no header (topo direito)\n  footerLeft?: string        // texto do footer (ex: Figma ID '2316:2462')\n  footerBadges?: CardBadge[] // badges do footer\n  className?: string\n}\n\nexport default function Card({\n  href, icon, title, description,\n  headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n  const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n  return (\n    <Link href={href} className={`${styles.card} ${className}`}>\n\n      {/* Container 1 — conteúdo principal */}\n      <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n        <div className={styles.header}>\n          {icon && (\n            <span\n              className={styles.icon}\n              style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n            >\n              {icon}\n            </span>\n          )}\n          {headerBadges && headerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {headerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n        <span className={styles.title}>{title}</span>\n        <p className={styles.desc}>{description}</p>\n      </div>\n\n      {/* Container 2 — footer (opcional) */}\n      {hasFooter && (\n        <div className={styles.container2}>\n          {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n          {footerBadges && footerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {footerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n    </Link>\n  )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n  display: flex; flex-direction: column;\n  gap: var(--scale-spacing-md);\n  padding: var(--scale-spacing-2xl);\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--scale-radius-md);\n  text-decoration: none; cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n.card:hover { border-color: var(--border-default); background: var(--surface-secondary); }\n.container1 { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.hasBorder { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--scale-spacing-md); }\n.header { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }\n.icon { font-family: 'Material Symbols Outlined'; font-size: 44px; color: var(--content-brand); }\n.badges { display: flex; align-items: center; gap: 4px; }\n.title { font-family: var(--font-primary); font-size: 26px; font-weight: 500; color: var(--content-secondary); }\n.desc { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; color: var(--content-tertiary); margin: 0; }\n.container2 { display: flex; align-items: center; justify-content: space-between; width: 100%; }\n.footerLeft { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--content-tertiary); }\n*/",
         "prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--scale-radius-md) — 12px\n- Padding: var(--scale-spacing-2xl) — 24px\n- Gap entre containers: var(--scale-spacing-md) — 12px\n- Transição: border-color e background-color em 0.15s ease\n\nImplemente como componente React com CSS Module. Use as classes .trdr-badge e .trdr-badge-{variant} para os badges. O componente deve aceitar as props: href, icon?, title, description, headerBadges?, footerLeft?, footerBadges?."
       }
+    },
+    {
+      "slug": "janela",
+      "name": "Janela",
+      "figmaId": "1909:41600",
+      "category": "trading",
+      "implemented": true,
+      "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.",
+      "props": [
+        {
+          "name": "tools",
+          "type": "JanelaTool[]",
+          "values": [
+            "{ label, icon? }"
+          ]
+        },
+        {
+          "name": "activeTool",
+          "type": "number",
+          "values": [
+            "0",
+            "1",
+            "2"
+          ]
+        },
+        {
+          "name": "onToolChange",
+          "type": "function",
+          "values": [
+            "(index) => void"
+          ]
+        },
+        {
+          "name": "tabs",
+          "type": "string[]",
+          "values": [
+            "[\"Aba 1\", ...]"
+          ]
+        },
+        {
+          "name": "activeTab",
+          "type": "number",
+          "values": [
+            "0..N"
+          ]
+        },
+        {
+          "name": "onTabChange",
+          "type": "function",
+          "values": [
+            "(index) => void"
+          ]
+        },
+        {
+          "name": "multiLabel",
+          "type": "string",
+          "values": [
+            "Multi"
+          ]
+        },
+        {
+          "name": "showSideScroll",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "showBottomScroll",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "showActionsMenu",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "actions",
+          "type": "JanelaAction[]",
+          "values": [
+            "{ icon, label, onClick? }"
+          ]
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "values": [
+            "conteúdo do slot central"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Janela total",
+          "width": "476px",
+          "height": "312px"
+        },
+        {
+          "label": "Header",
+          "width": "476px",
+          "height": "41px"
+        },
+        {
+          "label": "Pill tabs row",
+          "width": "476px",
+          "height": "45px"
+        },
+        {
+          "label": "Container central",
+          "width": "476px",
+          "height": "226px"
+        },
+        {
+          "label": "Tag AI",
+          "width": "hug",
+          "height": "19px"
+        },
+        {
+          "label": "Pill (filtro)",
+          "width": "hug",
+          "height": "31px"
+        },
+        {
+          "label": "Botão Multi",
+          "width": "65px",
+          "height": "33px"
+        },
+        {
+          "label": "Floating actions menu",
+          "width": "172px",
+          "height": "192px"
+        },
+        {
+          "label": "Scrollbar lateral",
+          "width": "14px",
+          "height": "—"
+        },
+        {
+          "label": "Scrollbar inferior",
+          "width": "—",
+          "height": "14px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Janela bg / Header bg",
+          "token": "bg.secondary",
+          "value": "#141519"
+        },
+        {
+          "property": "Pill row bg / Container bg",
+          "token": "bg.tertiary",
+          "value": "#1A1A1A"
+        },
+        {
+          "property": "Tag AI bg",
+          "token": "bg.brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Pill ativa bg / Multi bg",
+          "token": "action.secondary.default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Pill inativa bg",
+          "token": "surface.secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Texto pill ativa / título",
+          "token": "content.primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Texto item floating",
+          "token": "content.secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Texto pill inativa / ícones / aba inativa",
+          "token": "content.tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Ícone link / underline aba ativa",
+          "token": "bg.brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Stroke header / pill row / floating",
+          "token": "border.subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Radius pill / botão Multi",
+          "token": "radius.lg",
+          "value": "16px"
+        },
+        {
+          "property": "Radius janela / floating menu",
+          "token": "radius.md",
+          "value": "8px"
+        },
+        {
+          "property": "Radius Tag AI / item floating",
+          "token": "radius.sm",
+          "value": "4px"
+        },
+        {
+          "property": "Padding pill / gap header",
+          "token": "spacing.sm",
+          "value": "8px"
+        },
+        {
+          "property": "Padding pill horizontal",
+          "token": "spacing.md",
+          "value": "12px"
+        },
+        {
+          "property": "Padding container interno",
+          "token": "spacing.lg",
+          "value": "16px"
+        }
+      ],
+      "anatomy": "Janela 476×312 com border-radius 8px e border subtle, em coluna:\n\n1. HEADER (41px, bg --bg-secondary, border-bottom subtle):\n   [Tag AI 19h #00D4FF radius 4] · [Tabs Ferramentas 14/16.8 com underline 2px brand na ativa + chevron 40×40] · [Divider 1×33 · Link cyan 24×24 · Multi 65×33 bg secondary radius 16 · more_horiz 24×24 · close 24×24]\n\n2. PILL TABS (45px, bg --bg-tertiary, padding 8, gap 8, border-bottom subtle):\n   5 pills 31h padding 8/12 radius 16. Ativa: bg --action-secondary-default + texto primary. Inativas: bg --surface-secondary + texto tertiary.\n\n3. CONTAINER (226px, bg --bg-tertiary, padding 16, gap 8):\n   Slot via children. Fallback visual: texto \"Componente coringa\". Scrollbars opcionais (lateral 14×, inferior ×14) com setas Material e thumb arredondado radius 16.\n\n4. FLOATING ACTIONS MENU (172×192, opcional, ancorado em more_horiz):\n   bg --bg-secondary, border subtle, radius 8, shadow drop. 5 ações (Fechar/Minimizar/Maximizar/Fixar/Renomear) 32h cada com ícone Material 20px tertiary + label Inter 14 secondary. Hover bg --surface-secondary.",
+      "notes": "Slot via React.children: passe qualquer componente (Boleta, Card, gráfico, etc.) como filho. O componente expõe estado controlado e não-controlado para activeTool/activeTab.",
+      "code": {
+        "html": "<!-- Janela TRDR — exemplo estático (Figma 1909:41600) -->\n<div class=\"trdr-janela\">\n\n  <!-- HEADER -->\n  <div class=\"trdr-janela-header\">\n    <span class=\"trdr-janela-tag-ai\">\n      <span class=\"material-symbols-outlined\" style=\"font-size:12px\">auto_awesome</span>\n      AI\n    </span>\n\n    <div class=\"trdr-janela-tool-tabs\">\n      <button class=\"trdr-janela-tool-tab trdr-janela-tool-tab-active\">Ferramenta 1</button>\n      <button class=\"trdr-janela-tool-tab\">Ferramenta 2</button>\n      <button class=\"trdr-janela-tool-tab\">Ferramenta 3</button>\n      <button class=\"trdr-janela-tool-chevron\">\n        <span class=\"material-symbols-outlined\">keyboard_arrow_down</span>\n      </button>\n    </div>\n\n    <div class=\"trdr-janela-header-actions\">\n      <span class=\"trdr-janela-divider\"></span>\n      <button class=\"trdr-janela-icon-button trdr-janela-icon-link\">\n        <span class=\"material-symbols-outlined\">link</span>\n      </button>\n      <button class=\"trdr-janela-multi\">\n        Multi\n        <span class=\"material-symbols-outlined\" style=\"font-size:16px\">keyboard_arrow_down</span>\n      </button>\n      <button class=\"trdr-janela-icon-button\">\n        <span class=\"material-symbols-outlined\">more_horiz</span>\n      </button>\n      <button class=\"trdr-janela-icon-button\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- PILL TABS (filtros) -->\n  <div class=\"trdr-janela-pill-row\" role=\"tablist\">\n    <button class=\"trdr-janela-pill trdr-janela-pill-active\">Aba 1</button>\n    <button class=\"trdr-janela-pill\">Aba 2</button>\n    <button class=\"trdr-janela-pill\">Aba 3</button>\n    <button class=\"trdr-janela-pill\">Aba 4</button>\n    <button class=\"trdr-janela-pill\">Aba 5</button>\n  </div>\n\n  <!-- CONTAINER (slot) -->\n  <div class=\"trdr-janela-container\">\n    <div class=\"trdr-janela-container-inner\">\n      <!-- Slot: substitua pelo seu componente -->\n      <span class=\"trdr-janela-coringa\">Componente coringa</span>\n    </div>\n  </div>\n\n  <!-- FLOATING MENU (opcional — more_horiz) -->\n  <div class=\"trdr-janela-actions-menu\" role=\"menu\">\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">close</span>Fechar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">remove</span>Minimizar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">arrow_outward</span>Maximizar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">keep</span>Fixar</button>\n    <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">edit</span>Renomear aba</button>\n  </div>\n\n</div>",
+        "css": "/* Janela TRDR — Figma 1909:41600 (476×312)\n * Tokens semânticos usados (todos em src/styles/tokens.css):\n * --bg-secondary #141519   --bg-tertiary #1A1A1A   --bg-brand #00D4FF\n * --surface-secondary #222222   --action-secondary-default #4A4A4A\n * --content-primary #FFFFFF   --content-secondary #E8E8E8   --content-tertiary #A4A4A4\n * --border-subtle #222222\n * --radius-sm 4px   --radius-md 8px   --radius-lg 16px\n * --spacing-xs 4px  --spacing-sm 8px  --spacing-md 12px  --spacing-lg 16px\n */\n\n.trdr-janela {\n  width: 476px;\n  height: 312px;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  position: relative;\n  overflow: hidden;\n  font-family: var(--font-secondary);\n}\n\n/* HEADER */\n.trdr-janela-header {\n  display: flex; align-items: center; gap: 8px;\n  height: 41px; padding: 0 8px;\n  background: var(--bg-secondary);\n  border-bottom: 1px solid var(--border-subtle);\n}\n.trdr-janela-tag-ai {\n  display: inline-flex; align-items: center; gap: 2px;\n  padding: 2px 4px;\n  background: var(--bg-brand);\n  border-radius: var(--radius-sm);\n  font-size: 11px; font-weight: 600;\n  color: var(--content-primary);\n}\n.trdr-janela-tool-tabs {\n  display: flex; align-items: stretch; flex: 1; min-width: 0; height: 100%;\n  overflow: hidden;\n}\n.trdr-janela-tool-tab {\n  padding: 0 12px; height: 100%;\n  background: transparent; border: none; cursor: pointer;\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-tertiary);\n  position: relative; transition: color 0.15s ease;\n  white-space: nowrap;\n}\n.trdr-janela-tool-tab:hover:not(.trdr-janela-tool-tab-active) { color: var(--content-secondary); }\n.trdr-janela-tool-tab-active { color: var(--content-primary); }\n.trdr-janela-tool-tab-active::after {\n  content: ''; position: absolute; left: 0; right: 0; bottom: 0;\n  height: 2px; background: var(--bg-brand);\n}\n.trdr-janela-tool-chevron {\n  width: 40px; height: 40px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: transparent; border: none; cursor: pointer;\n  color: var(--content-tertiary);\n}\n.trdr-janela-header-actions {\n  display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 100%;\n}\n.trdr-janela-divider { width: 1px; height: 33px; background: var(--border-subtle); }\n.trdr-janela-icon-button {\n  width: 24px; height: 24px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: transparent; border: none; cursor: pointer;\n  color: var(--content-tertiary);\n  transition: color 0.15s ease;\n}\n.trdr-janela-icon-button:hover { color: var(--content-secondary); }\n.trdr-janela-icon-link { color: var(--bg-brand); }\n.trdr-janela-multi {\n  display: inline-flex; align-items: center; gap: 4px;\n  height: 33px; padding: 0 8px;\n  background: var(--action-secondary-default);\n  border: none; border-radius: var(--radius-lg);\n  cursor: pointer;\n  font-size: 14px; color: var(--content-primary);\n}\n\n/* PILL TABS (filtros) */\n.trdr-janela-pill-row {\n  display: flex; align-items: center; gap: 8px;\n  height: 45px; padding: 8px;\n  background: var(--bg-tertiary);\n  border-bottom: 1px solid var(--border-subtle);\n  overflow: hidden;\n}\n.trdr-janela-pill {\n  height: 31px; padding: 8px 12px;\n  background: var(--surface-secondary);\n  border: none; border-radius: var(--radius-lg);\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-tertiary);\n  cursor: pointer; white-space: nowrap;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.trdr-janela-pill-active {\n  background: var(--action-secondary-default);\n  color: var(--content-primary);\n}\n\n/* CONTAINER (slot) */\n.trdr-janela-container {\n  flex: 1; position: relative;\n  background: var(--bg-tertiary);\n  display: flex; flex-direction: column; overflow: hidden;\n}\n.trdr-janela-container-inner {\n  flex: 1; display: flex; align-items: center; justify-content: center;\n  padding: 16px; gap: 8px; overflow: auto; min-height: 0;\n}\n.trdr-janela-coringa {\n  font-size: 14px; line-height: 16.8px; color: var(--content-primary);\n}\n\n/* FLOATING MENU */\n.trdr-janela-actions-menu {\n  position: absolute; top: 45px; right: 40px;\n  width: 172px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.30);\n  padding: 8px; display: flex; flex-direction: column; gap: 4px;\n  z-index: 10;\n}\n.trdr-janela-action-item {\n  display: flex; align-items: center; gap: 8px;\n  height: 32px; padding: 0 8px;\n  background: transparent; border: none; cursor: pointer;\n  border-radius: var(--radius-sm);\n  font-size: 14px; line-height: 16.8px;\n  color: var(--content-secondary);\n  text-align: left;\n  transition: background 0.12s ease;\n}\n.trdr-janela-action-item:hover { background: var(--surface-secondary); }\n.trdr-janela-action-item .material-symbols-outlined { color: var(--content-tertiary); font-size: 20px; }",
+        "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."
+      }
     }
   ]
 }

package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css

@@ -1,7 +1,7 @@
 /*
  * SNAPSHOT — TRDR Design Tokens
- * Sincronizado de: ../trdr-design-hub
- * Em: 2026-05-08T21:43:59.388Z
+ * Sincronizado de: C:\Users\mauro\Desktop\trdr-design-hub
+ * Em: 2026-05-11T00:36:20.679Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */