trdr-ds-install 1.11.0 → 2.0.0

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

@@ -0,0 +1,55 @@
+# Rollback Mode
+
+> **When to load:** `/trdr-ds rollback` — undo entire migration.
+
+---
+
+## Procedure
+
+1. Look for `DS_PROGRESS.md` at project root.
+   - Not found: `Nenhuma migracao encontrada. Nada para reverter.` STOP.
+   - `Backup branch: NONE (user opted out)`: `Nenhum backup foi criado. Rollback manual necessario.` STOP.
+
+2. Read `Backup branch:` and `Original branch:` from DS_PROGRESS.md.
+
+3. Verify backup branch exists:
+   ```bash
+   git rev-parse --verify {backupBranch} 2>/dev/null
+   ```
+   Not found: `Branch de backup {backupBranch} nao encontrado. Pode ter sido apagado.` STOP.
+
+4. Confirm with user:
+   ```
+   ROLLBACK: Isto vai reverter TODAS as alteracoes da migracao TRDR DS.
+
+   Backup branch: {backupBranch}
+   Branch atual: {currentBranch}
+   Status: {status}
+
+   Todos os arquivos modificados serao restaurados ao estado do backup.
+
+   - "confirmar" — executar rollback
+   - "cancelar" — abortar
+   ```
+   STOP. Wait for reply.
+
+5. If "cancelar": `Rollback cancelado.` STOP.
+
+6. If "confirmar":
+   ```bash
+   git checkout {originalBranch}
+   git reset --hard {backupBranch}
+   ```
+
+7. Output:
+   ```
+   Rollback completo.
+
+   Branch {originalBranch} restaurado ao estado de {backupBranch}.
+   Todos os arquivos da migracao foram revertidos.
+
+   O backup branch ainda existe. Para remove-lo:
+   git branch -D {backupBranch}
+   ```
+
+8. Trigger report mode (read `modes/report.md`) — rollback indicates the migration went wrong.

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

@@ -0,0 +1,37 @@
+# Status Mode
+
+> **When to load:** `/trdr-ds status` — show progress without modifying anything.
+
+---
+
+## Procedure
+
+1. Look for `SPRINT_PLAN.md` and `DS_PROGRESS.md` at project root.
+   - If neither found: `Nenhuma migracao em progresso. Execute /trdr-ds para iniciar.`
+
+2. Read both files. Do NOT modify anything. Output:
+
+```
+## TRDR DS — Migration Status
+
+Project: [name] | Started: [date] | Status: [status]
+Backup: [branch name or NONE]
+
+### Sprint Progress
+| Sprint | Scope | Files | Violations | Status |
+|--------|-------|-------|------------|--------|
+| 1 | Foundation | 4 | — | [status] |
+| 2 | Violations: [folder/] | [N] | [N] | [status] |
+| ... | ... | ... | ... | ... |
+| N-1 | Components | [N] candidates | — | [status] |
+| N | Final | logos + icons | — | [status] |
+
+### Summary
+Sprints completos: [done]/[total] ([percentage]%)
+Violacoes corrigidas: [fixed]/[total]
+Componentes aplicados: [applied]/[total_candidates]
+
+### Next Action
+-> Sprint [N]: [name] — /trdr-ds resume
+-> Para desfazer tudo: /trdr-ds rollback
+```

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

@@ -0,0 +1,48 @@
+# Sync Mode
+
+> **When to load:** `/trdr-ds sync` or `--latest` modifier.
+> **Purpose:** Re-fetch Hub data and update local snapshots.
+
+---
+
+## Procedure
+
+1. Fetch components catalog:
+   ```
+   WebFetch: https://trdr.mrocontent.com.br/components.json
+   ```
+   Save response to `<skill-dir>/data/components.json` (full catalog backup).
+
+2. Parse the fetched JSON and split into individual component files:
+   - For each component in `components[]`:
+     - Write `<skill-dir>/data/components/<slug>.json` with the component object
+   - Write `<skill-dir>/data/index.json` with metadata only (no code blocks):
+     ```json
+     {
+       "version": "[version]",
+       "generatedAt": "[date]",
+       "total": N,
+       "implemented": N,
+       "categories": { ... },
+       "components": [
+         { "slug": "button", "name": "Button", "category": "formulario", "implemented": true, "dependencies": [] },
+         ...
+       ]
+     }
+     ```
+
+3. Fetch tokens:
+   ```
+   WebFetch: https://trdr.mrocontent.com.br/tokens.css
+   ```
+   Save to `<skill-dir>/references/tokens.css`.
+
+4. Compare new vs previous. Report:
+   - New components: [list]
+   - Newly implemented: [list — stub → implemented]
+   - Removed: [list]
+   - Token changes: [count of changed variables]
+
+5. No project files touched.
+
+If either fetch fails: report which one and exit. Do NOT touch snapshots if response is malformed.

package/plugins/trdr-design-system/skills/trdr-ds/phases/analyze.md

@@ -0,0 +1,305 @@
+# Phase 1: Analysis
+
+> **When to load this file:** On `/trdr-ds`, `/trdr-ds analyze`, or `/trdr-ds apply` (before execution).
+> **Output:** `DS_ANALYSIS.md` + `SPRINT_PLAN.md` at project root. No project files modified.
+
+---
+
+## Step 0 — Detect previous progress
+
+Check if `DS_PROGRESS.md` exists at the project root.
+
+**If found AND `Status:` is NOT `COMPLETE`:**
+```
+Previous TRDR DS migration found (status: [IN_PROGRESS/PAUSED]).
+
+- "resume" — continue from last checkpoint (Batch [N])
+- "restart" — discard progress and run a fresh analysis
+- "status" — see a progress summary without modifying anything
+```
+**STOP. Wait for reply.**
+
+**If found AND `Status: COMPLETE`:**
+Inform dev that previous migration was completed (show date). Offer to re-run analysis. Continue only if dev confirms.
+
+**If not found:** Continue to Step 1.
+
+---
+
+## Step 1 — Detect framework and styling mode
+
+Read `package.json` at the project root. Identify:
+- Framework: Next.js (version), React (CRA/Vite), Vue/Nuxt, plain HTML, other
+- Language: TypeScript or JavaScript
+- Styling: CSS Modules, Tailwind, CSS-in-JS, plain CSS, SCSS
+
+**Determine `stylingMode`:**
+
+| stylingMode | Detection | How DS classes are applied |
+|-------------|-----------|---------------------------|
+| `plain-css` | No tailwind, no *.module.css, no CSS-in-JS | `class="trdr-btn"` in HTML |
+| `css-modules` | `*.module.css` files present | `composes: trdr-btn from global` in module, `className={styles.btn}` in JSX |
+| `tailwind` | `tailwind.config.*` present | `className="trdr-btn"` alongside Tailwind utilities |
+| `css-in-js` | `styled-components` or `@emotion/*` (WITHOUT `@mui/material`) | Token vars inside template literals |
+| `mui` | `@mui/material` in package.json (v5+) | Theme-level: `createTheme()` + `styleOverrides` with DS tokens |
+
+**MUI detection priority:**
+If `@mui/material` present: set `stylingMode: 'mui'` — do NOT fall through to `css-in-js` even if `@emotion/*` present (transitive deps).
+- Record `muiVersion`, `themeFilePath` (Glob for `**/theme.ts`, `**/createTheme*`, etc.), `hasThemeProvider`
+
+**MUI + Tailwind simultaneously:**
+If BOTH `@mui/material` AND `tailwindcss`: set `stylingMode: 'mui'`, `hasTailwind: true`.
+
+**Dual tailwind + styled-components:**
+If BOTH `tailwindcss` AND `styled-components`/`@emotion/*`: set `stylingMode: 'tailwind'`, `hasStyledComponents: true`. Add styled-components scan in Step 3.
+
+---
+
+## Step 2 — Map style structure
+
+Search for all style files:
+```
+Glob: ["**/*.css", "**/*.scss"] — exclude node_modules, .next, dist, build, out
+```
+
+Identify:
+- Main global CSS file (globals.css, main.css, index.css, app.css, styles.css)
+- Whether `:root {}` with CSS custom properties already exists
+- Potential conflicts with TRDR prefixes: `--bg-`, `--content-`, `--action-`, `--surface-`, `--border-`, `--spacing-`, `--radius-`
+- Whether fonts (JetBrains Mono, Inter, Roboto Mono) are already loaded
+
+Determine best directory for new CSS files:
+- Next.js with `src/`: `src/styles/`
+- Next.js without `src/`: `styles/`
+- React CRA/Vite with `src/`: `src/styles/`
+- Plain HTML: `css/` or `styles/`
+
+**For `tailwind` stylingMode:** Read `tailwind.config.*`, check `theme.colors`/`theme.extend.colors` for hardcoded hex. Flag matches with TRDR tokens.
+
+**For `mui` stylingMode:** Read theme files. Identify `createTheme()` structure, palette hex values, typography hardcoded values, shape borderRadius, component styleOverrides, `cssVariables: true` presence, sx prop usage count, `styled(MuiComponent)` count.
+
+---
+
+## Step 3 — Find violations
+
+Search all source files (`*.css, *.scss, *.tsx, *.jsx, *.ts, *.js, *.vue, *.html`):
+
+**A — Hardcoded colors:** `#[0-9A-Fa-f]{3,8}` in CSS/SCSS and component files.
+
+**A* — SVG attribute colors:** `stroke=`, `fill=`, `stop-color=` with `#hex` in HTML/JSX/Vue. Fix: `currentColor` + CSS class, NOT `var()` in SVG attributes.
+
+**B — Hardcoded font-family:** `font-family.*Inter|font-family.*JetBrains Mono|font-family.*Space Grotesk|font-family.*Roboto Mono`. Note: JSX `fontFamily` in `style={{}}` is Category I, not B.
+
+**C — Hardcoded px spacing:** `(margin|padding|gap):\s*\d+px` in CSS/SCSS.
+
+**D — Primitive token usage:** `var\(--color-|var\(--space-` in CSS/SCSS/components. Also flag custom `:root {}` variables with primitive naming (`--color-brand`).
+
+**E — Missing tokens.css:** Check if `tokens.css` exists and is imported.
+
+**F — Hardcoded rgba:** `rgba\(` in CSS/SCSS/HTML.
+
+**G — Custom gradients:** `linear-gradient|radial-gradient` not referencing `var(--gradient-*)`. Sub-classify: hex stops, rgba stops, fade-to-transparent, overlay gradient.
+
+**H — Hardcoded font-size:** `font-size:\s*\d+px` in CSS/SCSS (skip tokens.css).
+
+**I — Inline styles with design properties:**
+- I.1: JSX/HTML `style=""` / `style={{}}` with color/background/font/padding/margin/gap/border
+- I.2: Dynamic DOM `\.style\.[a-zA-Z]+\s*=\s*['"]` (hover handlers, imperative animations)
+- Exceptions: `background-image: url(...)`, `style="--custom-prop: value"`
+
+**J — SVG icons inline:** `<svg` in source files (NOT logos, NOT node_modules). Sub-classify:
+- J.high: hardcoded `stroke="#hex"` / `fill="#hex"`
+- J.medium: dynamic JSX fill/stroke expression
+- J.low: uses ONLY `currentColor`/`inherit`
+
+**K — Logo incorrect/missing:** Search with separate Grep calls:
+1. `src="[^"]*logo(?!-trdr)[^"]*"` — non-official img logo
+1b. `<Image[^>]*src="[^"]*logo(?!-trdr)[^"]*"` — Next.js Image
+2. `>\s*TRDR\s*<` — text span as logo
+3. `import\s+\w+\s+from\s+['"][^'"]*logo(?!-trdr)[^'"]*['"]` — wrong logo import
+
+**L, M, N — MUI-only violations** (only when `stylingMode === 'mui'`):
+- L: Hardcoded values in MUI theme (palette, typography, shape, styleOverrides)
+- M: Hardcoded values in sx props
+- N: Hardcoded values in styled(MuiComponent)
+
+Track: `total_violations`, `total_files_with_violations`, `violations_by_folder`.
+
+---
+
+## Step 3.5 — Detect component replacement candidates
+
+Scan project for UI patterns replaceable by TRDR components.
+
+**Pattern table per DS component:**
+
+| Slug | Search patterns |
+|------|----------------|
+| `button` | `<button`, `<Button`, `type="submit"`, `type="button"`, `role="button"` |
+| `text-input` | `<input`, `<TextInput`, `<textarea`, `type="text"`, `type="email"`, `type="password"`, `type="search"` |
+| `checkbox` | `type="checkbox"`, `<Checkbox`, `\.checkbox` |
+| `radio-button` | `type="radio"`, `<RadioButton`, `<Radio[^B]` |
+| `switch` | `<Switch`, `role="switch"`, `\.toggle`, `\.switch` |
+| `dropdown` | `<select`, `<Select`, `<Dropdown`, `role="listbox"`, `role="combobox"` |
+| `combo-input` | `<ComboInput`, `combo.{0,10}input` |
+| `tooltip` | `<Tooltip`, `role="tooltip"`, `data-tooltip` |
+| `abas` | `<Tabs`, `role="tablist"`, `role="tab"`, `\.tabs` |
+| `segmented-control` | `<SegmentedControl`, `\.segmented`, `segment.{0,15}control` |
+| `sub-menu-item` | `<MenuItem`, `<SubMenu`, `\.menu-item`, `\.submenu` |
+| `card` | `<Card`, `\.card`, `<article` |
+| `boleta` | `<Boleta`, `boleta` |
+| `janela` | `<Janela`, `trading.{0,10}window` |
+| `tabela-cotacoes` | `<TabelaCotacoes`, `.quotes-table`, `.price-list` |
+| `tabela-ordens` | `<TabelaOrdens`, `.orders-table`, `.order-list` |
+| `floating-menu` | `<FloatingMenu`, `.floating-menu` |
+| `news-card` | `<NewsCard`, `.news-card`, `.article-card` |
+| `header` | `<Header`, `<header`, `.header`, `.navbar`, `<nav` |
+| `badge` | `<Badge`, `.badge`, `.tag`, `.chip`, `.label-status` |
+
+Rules: count distinct files (not lines), discard test files, omit slugs with zero matches.
+
+**CSS custom class scan:** `.btn`, `.button`, `.input`, `.text-field`, `.tab`, `.segment`, `.lang-selector` — flag as reimplementations.
+
+**MUI component detection (only `stylingMode === 'mui'`):** Search MUI component patterns (Button, TextField, Checkbox, etc.) to know which theme `styleOverrides` to generate.
+
+---
+
+## Step 3.5b — Capture structural context for each candidate
+
+For each file:line match, read 10 lines before/after. Classify:
+
+| Classification | Criteria | Phase 2 action |
+|---|---|---|
+| `simple` | Text only, no handlers, no dynamic props | Full DS component replacement |
+| `complex-preservable` | Has handlers/bindings/conditionals, but structure maps to DS | DS structure + classes, preserve all logic |
+| `complex-manual` | Deeply nested, multiple conditional branches, domain-specific | Flag in DS_MIGRATION.md, no auto-modify |
+
+**MUI classifications** (when `stylingMode === 'mui'`):
+| Classification | Criteria | Action |
+|---|---|---|
+| `theme-override` | Standard MUI usage | Generate styleOverrides in theme |
+| `sx-migration` | `sx={{}}` with hardcoded values | Replace with `var(--token)` |
+| `styled-migration` | `styled(MuiComponent)` with hardcoded values | Replace with `var(--token)` |
+| `complex-manual` | Deep customization | Flag for manual review |
+
+Store per candidate: `slug`, `file`, `line`, `classification`, `existingContent`, `existingHandlers`, `existingClasses`, `existingProps`, `suggestedDsVariant`.
+
+**Variant detection:**
+| Existing pattern | DS variant |
+|---|---|
+| `.btn-primary`, `.cta`, `type="submit"`, brand color | `trdr-btn-primary` |
+| `.btn-secondary`, `.btn-cancel`, gray | `trdr-btn-secondary` |
+| `.btn-outline`, `.btn-ghost`, transparent | `trdr-btn-ghost` |
+| `.btn-danger`, `.btn-delete`, red/orange | `trdr-btn-destructive` |
+| `.btn-link`, `<a>` styled as button | `trdr-btn-link` |
+| `type="text/email/password/search"`, `<textarea>` | `trdr-text-input` |
+| `.badge` + green | `trdr-badge-success` |
+| `.badge` + blue | `trdr-badge-brand` |
+| `.badge` + yellow | `trdr-badge-warning` |
+| `.badge` + gray | `trdr-badge-neutral` |
+
+---
+
+## Step 3.6 — Logo audit
+
+Glob: `["**/logo*.svg", "**/*trdr*.svg", "**/brand*.svg", "**/icon-trdr*.svg"]` (exclude node_modules, .next, dist).
+
+Official TRDR logo fingerprint (both must match):
+- `viewBox="0 0 105 41"`
+- `fill="#00D4FF"`
+
+Classify each: CORRECT (both markers), WRONG (different), UNKNOWN (binary/unusual).
+
+Store as `logoAudit = { correct: [], wrong: [], unknown: [] }`.
+
+---
+
+## Step 4 — Load component catalog
+
+Read the index file:
+```
+Read: <skill-dir>/data/index.json
+```
+
+Try `~/.claude/skills/trdr-ds/` then `<project>/.claude/skills/trdr-ds/`.
+
+If `--latest` was passed: run sync first (read `modes/sync.md`).
+
+If both local and Hub fail: STOP with error.
+
+Track `implementedSlugs` and `stubSlugs`.
+
+---
+
+## Step 5 — Present migration plan and STOP
+
+Output the migration plan report. Read `templates/ds-analysis.md` for the output format.
+
+The plan includes:
+- Project info (framework, language, styling)
+- Conformance score (% files with zero violations)
+- FILES TO CREATE (tokens.css, components.css, CLAUDE.md)
+- FILES TO MODIFY (global CSS + each file with violations)
+- VIOLATIONS FOUND (table by category)
+- TRDR COMPONENTS — IMPLEMENTATION PLAN (simple swaps, complex-preservable, manual review, stubs)
+- MUI THEME INTEGRATION PLAN (only if `stylingMode === 'mui'`)
+- SCOPE ESTIMATE (Small/Medium/Large)
+- EXECUTION MODE (sprints, batch size)
+- LOGOS (correct/wrong/unknown)
+
+Reply options:
+- `"Apply"` / `"Executar"` — proceed
+- `"Apply, batch [N]"` — custom batch size
+- `"Apply, skip [path]"` — exclude paths
+- `"Only tokens"` — only create tokens.css, components.css, CLAUDE.md
+- `"Change [detail]"` — adjust plan
+- `"Sync first"` — pull latest catalog
+
+---
+
+## Step 5.5 — Write DS_ANALYSIS.md (MANDATORY)
+
+Before stopping, write `DS_ANALYSIS.md` to project root. Read `templates/ds-analysis.md` for the full template.
+
+This file must contain ALL analysis data from Steps 1-4:
+- Project info (framework, language, styling, MUI details)
+- Violations summary by category and by file (with line numbers)
+- Component replacement candidates (with classifications)
+- Logo audit results
+- Execution plan (batches grouped by folder)
+
+---
+
+## Step 5.6 — Generate SPRINT_PLAN.md
+
+Read `templates/sprint-plan.md` for the template.
+
+**Sprint sizing rules:**
+- Max **15 files** per sprint
+- Group files by **folder**
+- If folder >15 files: split into sub-sprints (Sprint 3a, 3b)
+- Foundation, Components, Final are each their own sprint
+
+**Sprint naming:**
+- `Sprint 1 — Foundation`
+- `Sprint N — Violations: [folder/]`
+- `Sprint N — Components`
+- `Sprint N — Final`
+
+Output sprint summary:
+```
+DS_ANALYSIS.md e SPRINT_PLAN.md salvos.
+
+Sprint Plan: [N] sprints planejados
+  Sprint 1: Foundation (4 arquivos)
+  Sprint 2-[M]: Violations ([files] arquivos em [folders] pastas)
+  Sprint [M+1]: Components ([candidates] candidatos)
+  Sprint [N]: Final (logos + icones + DS_MIGRATION.md)
+
+Cada sprint e independente — entre sprints, limpe o contexto com /clear.
+Para continuar de qualquer ponto: /trdr-ds resume
+
+Responda 'Apply' para iniciar o Sprint 1.
+```
+
+**STOP. Wait for explicit approval before Phase 2.**

package/plugins/trdr-design-system/skills/trdr-ds/phases/components.md

@@ -0,0 +1,204 @@
+# Sub-fase C: Components
+
+> **When to load this file:** During the Components sprint, or `/trdr-ds components`.
+> **Prerequisites:** `DS_ANALYSIS.md` + `DS_PROGRESS.md` must exist. Sub-fase B should be COMPLETE.
+> **Also load:** Component files from `data/components/<slug>.json` — one at a time, on demand.
+> **Output:** DS component classes applied to project files, MUI styleOverrides generated.
+
+---
+
+## Before starting
+
+1. Read `DS_ANALYSIS.md` — ONLY `## Component Replacement Candidates` section
+2. Read `DS_PROGRESS.md` — current state
+3. Read `<skill-dir>/data/index.json` — component catalog index
+4. Update DS_PROGRESS.md: `Sub-fase C: Components — IN_PROGRESS`
+
+**If `stylingMode === 'mui'`: skip to Step 6-MUI below.**
+
+---
+
+## Step 6.0 — Resolve dependency order
+
+Components in `data/index.json` have a `dependencies` array. Before processing:
+
+1. Read `dependencies` for every candidate component
+2. Build topological order: atomics first, then compounds (deps before dependents)
+3. Process candidates in this order across all passes
+
+If a dependency is NOT in candidates: skip (compound's code still references the DS class).
+
+---
+
+## Step 6 — Pass 1: Simple replacements
+
+For each `simple` candidate (topological order):
+
+1. **Load DS component:** Read `<skill-dir>/data/components/<slug>.json`, extract `code.html` or `code.react`
+2. **Adapt content:** Replace placeholder text with ACTUAL project content (button text, input placeholder, badge text). Preserve `id`, `name`, `data-*`, `aria-*`.
+3. **Select variant** from `suggestedDsVariant`
+4. **Replace element** in source file. Examples:
+
+   **Buttons:**
+   ```html
+   <!-- BEFORE --> <button class="btn-primary hero-cta">Get Started</button>
+   <!-- AFTER -->  <button class="trdr-btn trdr-btn-primary">Get Started</button>
+   ```
+
+   **Text inputs:**
+   ```html
+   <!-- BEFORE --> <input type="text" class="search-bar" placeholder="Search...">
+   <!-- AFTER -->  <input type="text" class="trdr-text-input" placeholder="Search...">
+   ```
+
+   **Checkboxes:** Restructure to DS anatomy (label > input + box-span + text-span). Preserve `id`, `name`, `checked`, `disabled`.
+
+   **Switches:** Convert to `<button class="trdr-switch" role="switch">` with track/knob spans.
+
+   **Dropdowns:** `<select class="trdr-dropdown">` — preserve all `<option>` children.
+
+   **Badges:** `<span class="trdr-badge trdr-badge-success">Active</span>`
+
+   **Segmented controls:** `<div class="trdr-segment-control">` with `trdr-segment-active/inactive` children.
+
+5. **Icons inside components:** Replace inline SVG with Material Icon immediately. Use correct size class.
+6. **Clean up CSS:** Remove properties now provided by DS (height, padding, font-*, border, border-radius, background, color, cursor, transition, display, align-items, justify-content). Keep width, min-width, gap, margin, grid-area.
+7. **Log in DS_PROGRESS.md:** `- [x] button: src/Hero.tsx:42 — "Get Started" → trdr-btn-primary (simple swap)`
+
+---
+
+## Step 6 — Pass 2: Complex-preservable
+
+For each `complex-preservable` candidate:
+
+1. **Read full context** — identify handlers, conditional rendering, dynamic props, data bindings, refs
+2. **Apply DS structure** using one of two strategies:
+
+   **Strategy A — Class addition** (DOM compatible with DS):
+   ```tsx
+   // BEFORE
+   <button className={`btn ${isActive ? 'btn-active' : ''}`} onClick={handleClick} disabled={isLoading}>
+   // AFTER
+   <button className={`trdr-btn trdr-btn-primary ${isActive ? 'btn-active' : ''}`} onClick={handleClick} disabled={isLoading}>
+   ```
+
+   **Strategy B — Structure wrap** (DS requires different DOM):
+   ```tsx
+   // BEFORE
+   <div><input type="checkbox" id={`f-${id}`} checked={filters.includes(id)} onChange={() => toggle(id)}/><label htmlFor={`f-${id}`}>{label}</label></div>
+   // AFTER
+   <label className="trdr-checkbox"><input type="checkbox" id={`f-${id}`} checked={filters.includes(id)} onChange={() => toggle(id)}/><span className="trdr-checkbox-box"></span><span>{label}</span></label>
+   ```
+
+3. **NEVER remove/alter** (absolute rule):
+   - Event handlers (onClick, onChange, onSubmit, etc.)
+   - ref=, key= props
+   - disabled/checked/value bindings
+   - Conditional rendering
+   - Spread props ({...rest})
+   - id, name, data-*, aria-*
+   - Custom classNames used in JS selectors
+
+4. **Dynamically-toggled classes:** Map custom state class → DS state class. Update ALL classList calls.
+5. **Clean up CSS** — same as Pass 1.
+6. **Log:** `- [x] checkbox: src/Filters.tsx:88 — preserved: onChange, checked → trdr-checkbox (Strategy B)`
+
+---
+
+## Step 6 — Pass 3: Manual review flagging
+
+For each `complex-manual` candidate:
+
+1. **Do NOT modify** the component structure
+2. **Add TODO comment** above the element:
+   - HTML: `<!-- TODO: TRDR DS — replace with [name]. See DS_MIGRATION.md -->`
+   - JSX: `{/* TODO: TRDR DS — replace with [name]. See DS_MIGRATION.md */}`
+3. **Add entry to DS_MIGRATION.md** under `## Manual component review` with reason, structure, suggested approach, handlers, dynamic props
+
+---
+
+## Step 6 — Stubs
+
+**If `c.implemented === false`:**
+- Add banner comment: `/* TRDR DS — <name> (figmaId: <id>) */` + `/* Tokens recomendados: <tokens> */`
+- Append to MISSING_COMPONENTS.md
+
+**If no slug matches:** Flag in MISSING_COMPONENTS.md under "Unmapped patterns".
+
+**Do NOT replace domain-specific components** (course cards, trading panels).
+
+---
+
+## Step 6-MUI — MUI Component styleOverrides (only `stylingMode === 'mui'`)
+
+### Step 6-MUI.0 — DS slug → MUI component mapping
+
+| DS Slug | MUI Components | Theme keys |
+|---|---|---|
+| `button` | Button, IconButton, LoadingButton | MuiButton, MuiIconButton |
+| `text-input` | TextField, OutlinedInput | MuiTextField, MuiOutlinedInput |
+| `checkbox` | Checkbox | MuiCheckbox |
+| `radio-button` | Radio | MuiRadio |
+| `switch` | Switch | MuiSwitch |
+| `dropdown` | Select, Autocomplete | MuiSelect, MuiAutocomplete |
+| `tooltip` | Tooltip | MuiTooltip |
+| `abas` | Tabs, Tab | MuiTabs, MuiTab |
+| `card` | Card, CardContent | MuiCard, MuiCardContent |
+| `badge` | Badge, Chip | MuiBadge, MuiChip |
+| `header` | AppBar, Toolbar | MuiAppBar, MuiToolbar |
+| `modal` | Dialog, DialogTitle | MuiDialog, MuiDialogTitle |
+
+### Step 6-MUI.1 — Generate styleOverrides
+
+For each detected MUI component:
+1. Read DS component from `data/components/<slug>.json`
+2. Extract visual properties from `code.css`
+3. Translate to MUI styleOverrides with DS tokens
+
+Only include entries for components actually detected in the project.
+
+### Step 6-MUI.2 — Insert into theme file
+
+Read existing theme. Find `components: {}` block (or create it).
+- Existing key: MERGE DS overrides, preserve project customizations
+- New key: ADD DS override block
+- NEVER overwrite defaultProps, variants, or slot customizations
+
+### Step 6-MUI.3 — Process sx prop violations
+
+For `sx-migration` candidates: replace hardcoded values with `'var(--token)'`.
+Preserve layout-related sx values (display, flex, grid, position).
+
+### Step 6-MUI.4 — Process styled() violations
+
+For `styled-migration` candidates: replace values with `'var(--token)'`.
+Preserve theme-based logic.
+
+### Step 6-MUI.5 — Skip HTML tag replacement
+
+Do NOT run Pass 1/2/3 for MUI projects.
+
+---
+
+## Completion
+
+Update DS_PROGRESS.md: `Sub-fase C: Components — COMPLETE`
+
+```
+Sub-fase C completa — [N] componentes implementados ([S] simple, [P] complex-preservable), [M] manual review, [T] stubs.
+
+Proximo: Sub-fase D — Final (logos + icones + DS_MIGRATION.md)
+- "continuar" — iniciar Sub-fase D
+- "parar" — salvar e parar
+- "nao funcionou" / "report" — reportar problema
+```
+**STOP. Wait for reply.**
+
+---
+
+## Execution Log
+
+After EVERY modification, append to DS_PROGRESS.md `## Execution Log`:
+```
+| [datetime] | C | MODIFY | [file] | [slug] swap → [variant] ([classification]) |
+```