✨ feat: adicionar diagramas de circuitos digitais com componente React customizado

Implementadas 3 figuras de circuitos digitais usando componente React SVG:

**Figuras Implementadas:**
- ✅ Figura 3.25: Meio-somador (half-adder) com portas XOR e AND
- ✅ Figura 3.26: Somador completo (full-adder) construído com dois meio-somadores
- ✅ Figura 3.27: Somador com propagação de vai-um (ripple-carry adder) de 3 bits

**Componente React:**
- Localização: src/components/CircuitDiagram/
- Tecnologia: SVG customizado sem dependências externas
- Recursos:
  - Definições de portas lógicas (AND, OR, XOR, NOT)
  - Roteamento automático de fios com setas
  - Labels coloridos para entradas e saídas
  - Suporte a modo escuro
  - Design responsivo
  - Estilização consistente com tema Docusaurus

**Arquivos Modificados:**
- docs/chapter-3/3.3.4.mdx: Adicionadas 3 visualizações de circuitos
- MISSING_IMAGES.md: Atualizado status (21 concluídos, 4+ faltando)
- src/components/CircuitDiagram/index.jsx: Componente principal
- src/components/CircuitDiagram/styles.module.css: Estilos e tema

**Progresso Geral:**
- Total implementado: 21 diagramas
  - 17 Mermaid.js
  - 3 React Components (novos)
  - 2 SVG baixados do upstream
- Seções completas: 9 de 11 páginas rastreadas
- Build testado e funcionando

Relacionado: Implementação de diagramas técnicos para simulador de circuitos digitais

Author: claude

MISSING_IMAGES.md

@@ -5,8 +5,8 @@
 This report tracks figures/diagrams in the SICP JavaScript translation. Many missing diagrams have been implemented using Mermaid.js for inline rendering.
 
 **Status Update:**
-- ✅ **18 diagrams implemented** (17 Mermaid.js + 2 downloaded SVGs)
-- ⏳ **7+ diagrams still missing**
+- ✅ **21 diagrams implemented** (17 Mermaid.js + 3 React Components + 2 downloaded SVGs)
+- ⏳ **4+ diagrams still missing**
 - 📊 **Total figures tracked:** ~25+
 
 ---
@@ -48,14 +48,14 @@ This report tracks figures/diagrams in the SICP JavaScript translation. Many mis
 
 ---
 
-### 3.3.4 Digital Circuit Simulator
+### 3.3.4 Digital Circuit Simulator ✅ COMPLETE
 **File:** `docs/chapter-3/3.3.4.mdx`
-**Missing Images (3):**
-- **Figure 3.25** - Half-adder circuit diagram
-- **Figure 3.26** - Full-adder circuit diagram
-- **Figure 3.27** - Ripple-carry adder circuit diagram
+**Implemented with React Components (3):**
+- **Figure 3.25** ✅ - Half-adder circuit diagram
+- **Figure 3.26** ✅ - Full-adder circuit diagram
+- **Figure 3.27** ✅ - Ripple-carry adder circuit diagram
 
-**Context:** Digital logic circuit diagrams showing gate connections and signal flow.
+**Implementation:** Custom SVG-based React component (`src/components/CircuitDiagram`) with interactive logic gate visualizations. Includes AND, OR, XOR gates with proper wire routing and signal labels.
 
 ---
 
@@ -137,15 +137,15 @@ This report tracks figures/diagrams in the SICP JavaScript translation. Many mis
 | 3.3.1 | Mutable Lists | ✅ Complete | 6 Mermaid | High |
 | 3.3.2 | Queues | ✅ Complete | 3 Mermaid | High |
 | 3.3.3 | Tables | ✅ Complete | 2 Mermaid | High |
-| 3.3.4 | Digital Circuits | ⏳ Missing | 3 SVG needed | High |
+| 3.3.4 | Digital Circuits | ✅ Complete | 3 React Components | High |
 | 3.3.5 | Constraints | ✅ Complete | 1 Mermaid | High |
 | 3.5.3 | Streams | ⏳ Missing | 1+ diagrams | Medium |
 | 3.5.4 | Delayed Evaluation | ⏳ Missing | 3+ diagrams | Medium |
 | 4.1 | Evaluator | ✅ Complete | 1 Mermaid | High |
 | 4.1.2 | Syntax | ✅ Complete | 1 Mermaid | Medium |
 | 4.1.5 | Data as Programs | ✅ Complete | 2 Mermaid | High |
 | 4.4.4 | Query System | ✅ Complete | 2 SVG (downloaded) | Medium |
-| **TOTAL** | **11 pages** | **8 complete** | **18 done, 7+ todo** | |
+| **TOTAL** | **11 pages** | **9 complete** | **21 done, 4+ todo** | |
 
 ---
 
@@ -194,27 +194,47 @@ All markdown references have been updated to use the new paths.
 
 ---
 
-## Mermaid.js Implementation
+## Implementation Summary
 
 ### What Was Implemented
 
-Successfully implemented **17 diagrams** using Mermaid.js inline rendering:
+Successfully implemented **21 diagrams** using multiple techniques:
 
-**Chapter 3.3 - Data Structures (12 diagrams):**
-- ✅ Figures 3.12-3.17: Mutable list structures with box-and-pointer notation
-- ✅ Figures 3.18-3.20: Queue operations showing front/rear pointer management
-- ✅ Figures 3.21-3.22: Table structures (1D and 2D with subtables)
-- ✅ Figure 3.28: Constraint network for Celsius-Fahrenheit converter
+**Chapter 3.3 - Data Structures (15 diagrams):**
+- ✅ Figures 3.12-3.17: Mutable list structures with box-and-pointer notation (Mermaid)
+- ✅ Figures 3.18-3.20: Queue operations showing front/rear pointer management (Mermaid)
+- ✅ Figures 3.21-3.22: Table structures (1D and 2D with subtables) (Mermaid)
+- ✅ Figures 3.25-3.27: Digital circuit diagrams - half-adder, full-adder, ripple-carry adder (React Component)
+- ✅ Figure 3.28: Constraint network for Celsius-Fahrenheit converter (Mermaid)
 
 **Chapter 4.1 - Evaluator (5 diagrams):**
-- ✅ Figure 4.1: Eval-apply cycle flowchart
-- ✅ Abstraction barrier diagram (4.1.2): Syntax representation layers
-- ✅ Figure 4.2: Factorial program as abstract machine
-- ✅ Figure 4.3: Evaluator as universal machine emulating factorial
+- ✅ Figure 4.1: Eval-apply cycle flowchart (Mermaid)
+- ✅ Abstraction barrier diagram (4.1.2): Syntax representation layers (Mermaid)
+- ✅ Figure 4.2: Factorial program as abstract machine (Mermaid)
+- ✅ Figure 4.3: Evaluator as universal machine emulating factorial (Mermaid)
 
 **Chapter 4.4 - Query System (2 diagrams - downloaded SVG):**
-- ✅ Figure 4.5: AND query processing with frame streams
-- ✅ Figure 4.6: OR query processing with frame streams
+- ✅ Figure 4.5: AND query processing with frame streams (SVG from upstream)
+- ✅ Figure 4.6: OR query processing with frame streams (SVG from upstream)
+
+### Implementation Technologies
+
+**Mermaid.js (17 diagrams):**
+- No external files - diagrams defined directly in markdown
+- Version controlled - changes tracked as text in git
+- Easy to update - community can edit without image tools
+- Consistent styling - unified visual appearance
+
+**React Components (3 diagrams):**
+- Custom SVG-based interactive diagrams
+- `CircuitDiagram` component in `src/components/CircuitDiagram/`
+- Supports AND, OR, XOR, NOT logic gates
+- Configurable circuits: half-adder, full-adder, ripple-carry-adder
+- Dark mode support and responsive design
+
+**Downloaded SVGs (2 diagrams):**
+- Source: source-academy/sicp repository
+- Placed in `static/img/chapter-4/`
 
 ### Benefits of Mermaid
 

docs/chapter-3/3.3.4.mdx

@@ -3,6 +3,7 @@ title: 3.3.4 Um Simulador para Circuitos Digitais
 ---
 
 import CodePlayground from '@site/src/components/CodePlayground';
+import CircuitDiagram from '@site/src/components/CircuitDiagram';
 
 # 3.3.4 Um Simulador para Circuitos Digitais
 
@@ -72,6 +73,10 @@ function logical_and(s1, s2) {
 
 **Exercício 3.30:** A Figura 3.27 mostra um *ripple-carry adder* formado encadeando *full-adders*. Este é o circuito mais simples para adicionar dois números binários. As entradas A1, A2, A3, ... An e B1, B2, B3, ... Bn são os dois números binários a serem adicionados (cada Ak e Bk é um bit 0 ou 1). A saída do circuito é a soma S1, S2, S3, ... Sn mais um carry Cn. Escreva uma função `ripple_carry_adder` que gera esse circuito. A função deve receber como argumentos três listas de n fios cada—as entradas An, Bn, e as somas Sn—bem como outro fio C. O maior atraso de propagação (em termos de atrasos de portas) do somador deve ser proporcional a n. Qual é o atraso?
 
+<CircuitDiagram type="ripple-carry-adder" />
+
+**Figura 3.27:** Somador com propagação de vai-um (ripple-carry adder). Este circuito adiciona dois números binários de n bits encadeando n somadores completos (FA). O carry de saída de cada estágio se torna o carry de entrada do próximo estágio. Neste exemplo, mostramos um somador de 3 bits com três estágios FA₀, FA₁ e FA₂.
+
 ## Representando fios
 
 Um fio em nosso sistema de simulação será um objeto computacional com dois valores locais: um valor `signal` (inicialmente tomado como 0) e uma coleção de `action_functions` a serem executadas quando o sinal mudar de valor. Implementamos o fio usando passagem de mensagem de estilo local:
@@ -139,6 +144,10 @@ Para avaliar as consequências de mudar o sinal em um fio, precisamos especifica
 
 **Exercício 3.31:** A função interna `accept_action_function` definida em `make_wire` especifica que, quando uma nova função de ação é adicionada a um fio, a função é imediatamente executada. Explique por que essa inicialização é necessária. Em particular, trace através do circuito meio-somador na figura 3.25 e diga como os valores de saída do sistema seriam computados se não executássemos as funções de ação de cada fio recém-adicionado.
 
+<CircuitDiagram type="half-adder" />
+
+**Figura 3.25:** Meio-somador (half-adder). Este circuito soma dois bits A e B, produzindo uma soma S e um vai-um (carry) C. O circuito usa portas XOR e AND para computar o resultado.
+
 ## A agenda
 
 A única coisa que falta em nosso simulador é `after_delay`. A ideia aqui é que mantemos uma estrutura de dados, chamada *agenda*, que contém um cronograma de coisas para fazer. A agenda seguinte, a qual podemos criar, implementa a agenda como um par consistindo do tempo atual e uma fila de segmentos de tempo. Cada segmento de tempo é um par consistindo de um número (o tempo) e uma fila que contém os procedimentos que estão programados para serem executados durante esse segmento de tempo.
@@ -184,6 +193,10 @@ function half_adder(a, b, s, c) {
 
 O somador completo é mostrado na Figura 3.26. A implementação é direta:
 
+<CircuitDiagram type="full-adder" />
+
+**Figura 3.26:** Somador completo (full-adder). Este circuito soma três bits (A, B e carry de entrada C_in), produzindo uma soma S e um carry de saída C_out. O circuito é construído usando dois meio-somadores e uma porta OR.
+
 ```javascript
 function full_adder(a, b, c_in, sum, c_out) {
     const s = make_wire();