npm - @vibe2founder/tests2dialects - Versions diffs - 0.1.0 → 0.2.0 - Mend

@vibe2founder/tests2dialects 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/dist/examples/imperative.spec.d.ts +1 -0
package/dist/examples/imperative.spec.js +46 -0
package/dist/examples/math.spec.d.ts +1 -0
package/dist/examples/math.spec.js +39 -0
package/dist/examples/narrative.spec.d.ts +1 -0
package/dist/examples/narrative.spec.js +47 -0
package/dist/examples/polyglot-shopping-cart.spec.d.ts +11 -0
package/dist/examples/polyglot-shopping-cart.spec.js +161 -0
package/dist/examples/sanity.spec.d.ts +1 -0
package/dist/examples/sanity.spec.js +39 -0
package/dist/examples/showcase-api.spec.d.ts +1 -0
package/dist/examples/showcase-api.spec.js +62 -0
package/dist/examples/test-api.d.ts +1 -0
package/dist/examples/test-api.js +32 -0
package/dist/packages/api-test-dialect/index.d.ts +28 -0
package/dist/packages/api-test-dialect/index.js +102 -0
package/dist/packages/reqify/index.d.ts +12 -0
package/dist/packages/reqify/index.js +24 -0
package/dist/src/cli.d.ts +6 -0
package/dist/src/cli.js +330 -0
package/dist/src/index.d.ts +134 -0
package/dist/src/index.js +374 -0
package/dist/src/semantic/core.d.ts +24 -0
package/dist/src/semantic/core.js +16 -0
package/{types/api-types.ts → dist/types/api-types.d.ts} +6 -11
package/dist/types/api-types.js +1 -0
package/package.json +59 -35
package/packages/api-test-dialect/index.ts +132 -132
package/readme.md +58 -58
package/src/cli.ts +1 -1
package/src/index.ts +19 -16
package/src/semantic/core.ts +26 -0
package/CHANGELOG.md +0 -73
package/bun.lock +0 -22
package/bunfig.toml +0 -2
package/critica.md +0 -77
package/docs/4-ideias.md +0 -66
package/docs/api-api.md +0 -93
package/docs/api-imperativo.md +0 -125
package/docs/api-matematico.md +0 -145
package/docs/api-narrativo.md +0 -181
package/docs/guia-rapido.md +0 -189
package/docs/whitepaper.md +0 -21
package/examples/imperative.spec.ts +0 -58
package/examples/math.spec.ts +0 -52
package/examples/narrative.spec.ts +0 -61
package/examples/polyglot-shopping-cart.spec.ts +0 -212
package/examples/sanity.spec.ts +0 -54
package/examples/showcase-api.spec.ts +0 -70
package/examples/test-api.ts +0 -36
package/infograficos/detalhado.png +0 -0
package/infograficos/mobile.png +0 -0
package/infograficos/normal.png +0 -0
package/landing-page/README.md +0 -38
package/landing-page/bun.lock +0 -609
package/landing-page/eslint.config.js +0 -23
package/landing-page/index.html +0 -17
package/landing-page/package-lock.json +0 -2962
package/landing-page/package.json +0 -34
package/landing-page/postcss.config.js +0 -6
package/landing-page/public/vite.svg +0 -1
package/landing-page/src/App.tsx +0 -358
package/landing-page/src/assets/react.svg +0 -1
package/landing-page/src/index.css +0 -34
package/landing-page/src/main.tsx +0 -10
package/landing-page/tailwind.config.js +0 -59
package/landing-page/tsconfig.app.json +0 -28
package/landing-page/tsconfig.json +0 -7
package/landing-page/tsconfig.node.json +0 -26
package/landing-page/vite.config.ts +0 -7
package/logo.png +0 -0
package/output.log +0 -60
package/podcast/O_Matem/303/241tico,_o_Narrador_e_o_Engenheiro.json +0 -0
package/podcast/O_Matem/303/241tico,_o_Narrador_e_o_Engenheiro.md +0 -0
package/podcast/critica-Dialetos_de_teste__inova/303/247/303/243o_ou_fragmenta/303/247/303/243o_.json +0 -0
package/podcast/critica-Dialetos_de_teste__inova/303/247/303/243o_ou_fragmenta/303/247/303/243o_.md +0 -0
package/podcast/critica-Unificar_filosofia_e_pr/303/241tica_na_documenta/303/247/303/243o_(7_words__covers_t.md +0 -1
package/podcast/critica-Unificar_filosofia_e_pr/303/241tica_na_documenta/303/247/303/243o__7_words__covers_t.ogg +0 -0
package/podcast/critica2-Sil/303/252ncio_estrat/303/251gico_e_sobrecarga_em_READMEs.ogg +0 -0
package/podcast/critica2.json +0 -3191
package/podcast/critica2.md +0 -1
package/podcast/debate-Dialetos_de_teste__inova/303/247/303/243o_ou_fragmenta/303/247/303/243o_.json +0 -0
package/podcast/debate-Dialetos_de_teste__inova/303/247/303/243o_ou_fragmenta/303/247/303/243o_.md +0 -0
package/reports/01-01-2026_00-45.md +0 -40
package/reports/01-01-2026_02-30.md +0 -37
package/reports/03-02-2026_10-55.md +0 -8
package/reports/03-02-2026_11-45.md +0 -13
package/reports/03-02-2026_11-50.md +0 -10
package/reports/26-01-2026_16-25.md +0 -31
package/reports/26-01-2026_19-20.md +0 -27
package/reports/31-12-2025_22-35.md +0 -25
package/reports/31-12-2025_22-45.md +0 -15
package/slides/Dialetos_de_Teste_Um_Executor_M/303/272ltiplos_Vocabul/303/241rios.pdf +0 -0
package/tabela.html +0 -350
package/tsconfig.json +0 -22
package/www/index.html +0 -1344

package/www/index.html DELETED Viewed

@@ -1,1344 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>tests2dialects Testing Framework | Interactive Explorer</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
-      /* Custom Font Import */
-      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap");
-      body {
-        font-family: "Inter", sans-serif;
-        background-color: #f8fafc; /* Slate 50 */
-        color: #1e293b; /* Slate 800 */
-      }
-      .font-mono {
-        font-family: "JetBrains Mono", monospace;
-      }
-      /* Chart Container Styles - Mandatory strictly followed */
-      .chart-container {
-        position: relative;
-        width: 100%;
-        max-width: 600px;
-        margin-left: auto;
-        margin-right: auto;
-        height: 300px;
-        max-height: 400px;
-      }
-      @media (min-width: 768px) {
-        .chart-container {
-          height: 350px;
-        }
-      }
-      /* Custom Scrollbar for code blocks */
-      .code-scroll::-webkit-scrollbar {
-        height: 8px;
-      }
-      .code-scroll::-webkit-scrollbar-track {
-        background: #1e293b;
-      }
-      .code-scroll::-webkit-scrollbar-thumb {
-        background: #475569;
-        border-radius: 4px;
-      }
-      /* Animations */
-      .fade-in {
-        animation: fadeIn 0.5s ease-in-out;
-      }
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-          transform: translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-      .tab-active {
-        border-bottom: 3px solid;
-        font-weight: 700;
-      }
-    </style>
-    <!-- Chosen Palette: Warm Neutral Background (Slate-50) with Semantic Accents: Indigo (Math), Emerald (Narrative), Amber (Imperative) -->
-    <!-- Application Structure Plan:
-         1. Hero Section: High-level overview of the "One Runner" concept.
-         2. The Philosophy Engine (Interactive Tabs): Users select a dialect (Math, Narrative, Imperative). The view updates dynamically to show the Vibe, Philosophy, Target Use Cases, and a Radar Chart visualizing the "Fit" for different testing scenarios.
-         3. The Code Morpher (Interactive Comparison): A split-view or toggle section where the user sees a "Standard Jest" snippet and watches it transform into the selected dialect, reinforcing the translation concept.
-         4. The Rosetta Stone Explorer (Data Table): A searchable/filterable table allowing users to find specific API equivalents across all dialects (e.g., filter by "Mocks" or "Assertions").
-         5. API Distribution Analysis (Chart): A bar chart visualizing the breadth of the API coverage in each category.
-    -->
-    <!-- Visualization & Content Choices:
-         1. Radar Chart (Chart.js): Visualizes "Dialect Suitability" (Logic vs. UI vs. API vs. Compliance). Helps users choose the right dialect based on their problem domain (Goal: Inform/Compare).
-         2. Bar Chart (Chart.js): Shows the count of API methods per category (Structure, Assertion, Mock, Lifecycle). visualizes the robustness of the framework (Goal: Inform).
-         3. Interactive Table (DOM Manipulation): The Rosetta Stone. Allows filtering by "Jest Equivalent" or "Category" to make the large mapping table consumable (Goal: Organize/Search).
-         4. Code Morphing Blocks (DOM Manipulation): Text updates based on state to demonstrate syntax differences without reloading (Goal: Compare/Change).
-         5. Dynamic Cards: Used for the Philosophy section to switch context without scrolling (Goal: Relationship).
-    -->
-    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
-  </head>
-  <body class="antialiased min-h-screen flex flex-col">
-    <!-- Header / Hero -->
-    <header
-      class="bg-white border-b border-slate-200 shadow-sm sticky top-0 z-50"
-    >
-      <div
-        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"
-      >
-        <div class="flex items-center gap-2">
-          <span class="text-2xl">🌐</span>
-          <h1 class="text-xl font-bold tracking-tight text-slate-900">
-            tests2dialects
-          </h1>
-        </div>
-        <nav class="hidden md:flex gap-6 text-sm font-medium text-slate-600">
-          <a href="#quickstart" class="hover:text-indigo-600 transition"
-            >Quick Start</a
-          >
-          <a href="#philosophy" class="hover:text-indigo-600 transition"
-            >Filosofias</a
-          >
-          <a href="#chooser" class="hover:text-indigo-600 transition"
-            >Escolher Dialeto</a
-          >
-          <a href="#rosetta" class="hover:text-indigo-600 transition"
-            >Pedra de Roseta</a
-          >
-          <a href="#polyglot" class="hover:text-indigo-600 transition"
-            >Poliglota</a
-          >
-        </nav>
-      </div>
-    </header>
-    <main class="flex-grow">
-      <!-- INTRO -->
-      <section class="max-w-4xl mx-auto px-4 py-12 text-center">
-        <span
-          class="inline-block py-1 px-3 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold tracking-wide uppercase mb-4"
-          >Framework Conceitual</span
-        >
-        <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
-          One Runner to Rule Them All.
-        </h2>
-        <p class="text-lg text-slate-600 leading-relaxed mb-8">
-          O <strong>tests2dialects</strong> é uma biblioteca inovadora que
-          desacopla a lógica de execução da semântica de escrita. A linguagem
-          usada nos seus testes deve refletir a natureza do problema que você
-          está resolvendo. Algoritmo complexo? Fluxo de usuário? Contrato de
-          API? Escolha o dialeto certo.
-        </p>
-        <div class="flex flex-wrap justify-center gap-4">
-          <button
-            onclick="document.getElementById('philosophy').scrollIntoView({behavior: 'smooth'})"
-            class="bg-slate-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-slate-800 transition shadow-lg"
-          >
-            Explorar Dialetos
-          </button>
-        </div>
-      </section>
-      <!-- SECTION 1: PHILOSOPHY ENGINE -->
-      <section id="philosophy" class="bg-white py-16 border-t border-slate-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="mb-10 max-w-2xl">
-            <h3 class="text-2xl font-bold text-slate-900 mb-2">
-              Engenharia de Filosofias
-            </h3>
-            <p class="text-slate-600">
-              Cada dialeto foi forjado com um propósito específico. Navegue
-              pelas abas abaixo para entender o "Vibe" e a aplicação ideal de
-              cada linguagem de teste disponível no framework.
-            </p>
-          </div>
-          <!-- Tabs -->
-          <div class="flex border-b border-slate-200 mb-8 overflow-x-auto">
-            <button
-              id="tab-math"
-              class="tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-indigo-600 focus:outline-none whitespace-nowrap tab-active border-indigo-600 text-indigo-600"
-              onclick="switchDialect('math')"
-            >
-              📐 O Matemático
-            </button>
-            <button
-              id="tab-narrative"
-              class="tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-emerald-600 focus:outline-none whitespace-nowrap"
-              onclick="switchDialect('narrative')"
-            >
-              📖 O Narrativo
-            </button>
-            <button
-              id="tab-imperative"
-              class="tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-amber-600 focus:outline-none whitespace-nowrap"
-              onclick="switchDialect('imperative')"
-            >
-              🛡️ O Imperativo
-            </button>
-          </div>
-          <!-- Dynamic Content Grid -->
-          <div
-            class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start fade-in"
-            id="dialect-content"
-          >
-            <!-- Left: Text Info -->
-            <div>
-              <div
-                id="dialect-badge"
-                class="inline-block px-3 py-1 rounded bg-indigo-100 text-indigo-800 text-xs font-bold mb-4"
-              >
-                Lógica Formal
-              </div>
-              <h4
-                id="dialect-title"
-                class="text-3xl font-bold text-slate-900 mb-4"
-              >
-                MathDialect
-              </h4>
-              <p id="dialect-desc" class="text-slate-600 mb-6 text-lg">
-                Use este dialeto quando estiver testando algoritmos puros,
-                cálculos financeiros, regras de negócio complexas ou invariantes
-                de sistema. O teste é visto como uma <strong>prova</strong> de
-                uma verdade universal.
-              </p>
-              <div
-                class="bg-slate-50 rounded-xl p-6 border border-slate-200 mb-6"
-              >
-                <h5
-                  class="font-bold text-slate-800 mb-3 flex items-center gap-2"
-                >
-                  ⚡ Vibe & Palavras-Chave
-                </h5>
-                <ul
-                  id="dialect-keywords"
-                  class="space-y-2 text-sm text-slate-600"
-                >
-                  <li class="flex items-center gap-2">
-                    <span class="text-indigo-500">➤</span> Científica, Imutável,
-                    Axiomática
-                  </li>
-                  <li class="flex items-center gap-2">
-                    <span class="text-slate-400 font-mono">Structure:</span>
-                    axiom, proof
-                  </li>
-                  <li class="flex items-center gap-2">
-                    <span class="text-slate-400 font-mono">Assert:</span>
-                    implies(x).is(y)
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="bg-slate-900 rounded-xl p-6 shadow-xl overflow-hidden"
-              >
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-slate-400 text-xs uppercase tracking-wider"
-                    >Exemplo de Código</span
-                  >
-                  <div class="flex gap-1">
-                    <span class="w-3 h-3 rounded-full bg-red-500"></span>
-                    <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
-                  </div>
-                </div>
-                <pre
-                  id="dialect-code"
-                  class="font-mono text-sm text-indigo-300 overflow-x-auto code-scroll"
-                >
-axiom("Teoria dos Números", () => {
-  const fib = arbitrary();
-  // fib é uma função arbitrária
-  fib.derive((n) => n <= 1 ? n : fib(n-1) + fib(n-2));
-  proof("Fibonacci(2) implica 1", () => {
-    implies(fib(2)).is(1);
-  });
-});</pre
-                >
-              </div>
-            </div>
-            <!-- Right: Visualization -->
-            <div
-              class="bg-slate-50 rounded-2xl p-6 border border-slate-200 flex flex-col items-center justify-center"
-            >
-              <h5
-                class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-4"
-              >
-                Adequação do Dialeto
-              </h5>
-              <div class="chart-container">
-                <canvas id="suitabilityChart"></canvas>
-              </div>
-              <p class="text-xs text-center text-slate-400 mt-4">
-                Visualização comparativa de pontos fortes por domínio.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 2: CODE MORPHER -->
-      <section id="morpher" class="py-16 bg-slate-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="text-center mb-10">
-            <h3 class="text-2xl font-bold text-slate-900">
-              Transformação Semântica
-            </h3>
-            <p class="text-slate-600 mt-2 max-w-2xl mx-auto">
-              Veja como o mesmo teste lógico muda drasticamente de significado
-              para o leitor dependendo do dialeto escolhido.
-            </p>
-          </div>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- Math Card -->
-            <div
-              class="bg-white rounded-lg shadow-sm border border-indigo-100 p-6 hover:shadow-md transition cursor-pointer group"
-              onclick="morphCode('math')"
-            >
-              <div class="flex items-center gap-3 mb-4">
-                <div
-                  class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xl group-hover:bg-indigo-600 group-hover:text-white transition"
-                >
-                  📐
-                </div>
-                <h4 class="font-bold text-slate-800">Matemático</h4>
-              </div>
-              <p class="text-sm text-slate-500 mb-4">
-                Foca na verdade e na invariância.
-              </p>
-              <code
-                class="block bg-indigo-50 text-indigo-900 p-2 rounded text-xs font-mono"
-                >implies(val).is(expected)</code
-              >
-            </div>
-            <!-- Narrative Card -->
-            <div
-              class="bg-white rounded-lg shadow-sm border border-emerald-100 p-6 hover:shadow-md transition cursor-pointer group"
-              onclick="morphCode('narrative')"
-            >
-              <div class="flex items-center gap-3 mb-4">
-                <div
-                  class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold text-xl group-hover:bg-emerald-600 group-hover:text-white transition"
-                >
-                  📖
-                </div>
-                <h4 class="font-bold text-slate-800">Narrativo</h4>
-              </div>
-              <p class="text-sm text-slate-500 mb-4">
-                Foca no comportamento e na história.
-              </p>
-              <code
-                class="block bg-emerald-50 text-emerald-900 p-2 rounded text-xs font-mono"
-                >to(val).be(expected)</code
-              >
-            </div>
-            <!-- Imperative Card -->
-            <div
-              class="bg-white rounded-lg shadow-sm border border-amber-100 p-6 hover:shadow-md transition cursor-pointer group"
-              onclick="morphCode('imperative')"
-            >
-              <div class="flex items-center gap-3 mb-4">
-                <div
-                  class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 font-bold text-xl group-hover:bg-amber-600 group-hover:text-white transition"
-                >
-                  🛡️
-                </div>
-                <h4 class="font-bold text-slate-800">Imperativo</h4>
-              </div>
-              <p class="text-sm text-slate-500 mb-4">
-                Foca no contrato e na verificação.
-              </p>
-              <code
-                class="block bg-amber-50 text-amber-900 p-2 rounded text-xs font-mono"
-                >that(val).is(expected)</code
-              >
-            </div>
-          </div>
-          <!-- Active Code Block -->
-          <div
-            class="mt-8 bg-slate-900 rounded-xl p-6 shadow-2xl relative overflow-hidden max-w-3xl mx-auto"
-          >
-            <div
-              class="absolute top-0 right-0 bg-slate-800 px-3 py-1 text-xs text-slate-300 rounded-bl-lg font-mono"
-              id="morph-label"
-            >
-              CODE: MATEMÁTICO
-            </div>
-            <pre
-              class="font-mono text-sm text-slate-300 leading-relaxed overflow-x-auto"
-              id="morph-display"
-            >
-// Carregando exemplo...
-                    </pre
-            >
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 3: ROSETTA STONE -->
-      <section id="rosetta" class="py-16 bg-white border-t border-slate-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div
-            class="flex flex-col md:flex-row justify-between items-end mb-8 gap-4"
-          >
-            <div class="max-w-2xl">
-              <h3 class="text-2xl font-bold text-slate-900 mb-2">
-                Pedra de Roseta (Comparativo)
-              </h3>
-              <p class="text-slate-600">
-                Use esta tabela interativa para traduzir conceitos do
-                <strong>Jest</strong> para o dialeto escolhido. Filtre por
-                categoria para encontrar rapidamente a função correta.
-              </p>
-            </div>
-            <div class="w-full md:w-64">
-              <label
-                for="categoryFilter"
-                class="block text-xs font-bold text-slate-500 uppercase mb-1"
-                >Filtrar por Categoria</label
-              >
-              <select
-                id="categoryFilter"
-                onchange="filterTable()"
-                class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5"
-              >
-                <option value="all">Todas as Categorias</option>
-                <option value="Estrutura">Estrutura (Describe/Test)</option>
-                <option value="Asserção">Asserção (Expect)</option>
-                <option value="Mocks">Mocks (Criação/Spy)</option>
-                <option value="Lifecycle">Ciclo de Vida (Hooks)</option>
-              </select>
-            </div>
-          </div>
-          <div
-            class="overflow-x-auto shadow-lg rounded-lg border border-slate-200"
-          >
-            <table class="w-full text-left text-sm whitespace-nowrap">
-              <thead
-                class="bg-slate-100 text-slate-700 uppercase font-bold text-xs tracking-wider"
-              >
-                <tr>
-                  <th class="px-6 py-4 border-b border-slate-200">Categoria</th>
-                  <th class="px-6 py-4 border-b border-slate-200">
-                    Jest / Conceito
-                  </th>
-                  <th
-                    class="px-6 py-4 border-b border-slate-200 bg-indigo-50 text-indigo-900"
-                  >
-                    📐 Matemático
-                  </th>
-                  <th
-                    class="px-6 py-4 border-b border-slate-200 bg-emerald-50 text-emerald-900"
-                  >
-                    📖 Narrativo
-                  </th>
-                  <th
-                    class="px-6 py-4 border-b border-slate-200 bg-amber-50 text-amber-900"
-                  >
-                    🛡️ Imperativo
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                id="rosettaBody"
-                class="bg-white divide-y divide-slate-100 font-mono text-slate-600"
-              >
-                <!-- JS Generated Rows -->
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 4: API DISTRIBUTION -->
-      <section class="py-16 bg-slate-50 border-t border-slate-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-            <div>
-              <h3 class="text-2xl font-bold text-slate-900 mb-4">
-                Cobertura da API
-              </h3>
-              <p class="text-slate-600 mb-6">
-                O tests2dialects Framework mantém paridade completa de
-                funcionalidades entre os dialetos. Não importa qual linguagem
-                você escolha, você terá acesso ao mesmo poder de mocks, spies e
-                controle de ciclo de vida. O gráfico ao lado demonstra a
-                distribuição de funções disponíveis por categoria.
-              </p>
-              <div
-                class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm"
-              >
-                <div
-                  class="flex items-center justify-between text-sm text-slate-500 mb-2"
-                >
-                  <span>Paridade Funcional</span>
-                  <span class="font-bold text-green-600">100%</span>
-                </div>
-                <div class="w-full bg-slate-200 rounded-full h-2.5">
-                  <div
-                    class="bg-slate-800 h-2.5 rounded-full"
-                    style="width: 100%"
-                  ></div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex justify-center"
-            >
-              <div class="chart-container">
-                <canvas id="distributionChart"></canvas>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 5: QUICK START -->
-      <section
-        id="quickstart"
-        class="py-16 bg-gradient-to-br from-indigo-900 to-slate-900 text-white"
-      >
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="text-center mb-10">
-            <span
-              class="inline-block py-1 px-3 rounded-full bg-indigo-500/20 text-indigo-300 text-xs font-bold tracking-wide uppercase mb-4"
-              >🚀 Quick Start</span
-            >
-            <h3 class="text-3xl font-bold mb-4">
-              Seu Primeiro Teste em 5 Minutos
-            </h3>
-            <p class="text-indigo-200 max-w-2xl mx-auto">
-              Antes de escolher dialetos, veja o framework em ação. Copie, cole
-              e rode.
-            </p>
-          </div>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-            <!-- Step 1 -->
-            <div
-              class="bg-white/10 backdrop-blur rounded-xl p-6 border border-white/20"
-            >
-              <div class="text-3xl font-bold text-indigo-400 mb-2">1</div>
-              <h4 class="font-bold text-lg mb-2">Instale</h4>
-              <code
-                class="block bg-slate-800 text-emerald-400 p-3 rounded text-sm font-mono"
-                >npm install @vibe2founder/tests2dialects</code
-              >
-            </div>
-            <!-- Step 2 -->
-            <div
-              class="bg-white/10 backdrop-blur rounded-xl p-6 border border-white/20"
-            >
-              <div class="text-3xl font-bold text-indigo-400 mb-2">2</div>
-              <h4 class="font-bold text-lg mb-2">Crie um teste</h4>
-              <p class="text-sm text-indigo-200">
-                Arquivo: <code class="text-amber-300">api.spec.ts</code>
-              </p>
-            </div>
-            <!-- Step 3 -->
-            <div
-              class="bg-white/10 backdrop-blur rounded-xl p-6 border border-white/20"
-            >
-              <div class="text-3xl font-bold text-indigo-400 mb-2">3</div>
-              <h4 class="font-bold text-lg mb-2">Execute</h4>
-              <code
-                class="block bg-slate-800 text-emerald-400 p-3 rounded text-sm font-mono"
-                >npx tests2dialects</code
-              >
-            </div>
-          </div>
-          <!-- Code Example -->
-          <div
-            class="bg-slate-900 rounded-xl p-6 shadow-2xl border border-slate-700"
-          >
-            <div class="flex justify-between items-center mb-4">
-              <span class="text-slate-400 text-xs uppercase tracking-wider"
-                >api.spec.ts</span
-              >
-              <div class="flex gap-1">
-                <span class="w-3 h-3 rounded-full bg-red-500"></span>
-                <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-                <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              </div>
-            </div>
-            <pre class="font-mono text-sm text-amber-300 overflow-x-auto">
-import { ensure, check, that, stub } from "@vibe2founder/tests2dialects";
-ensure("Minha API de Usuários", () => {
-  const api = stub();
-  api.forceReturn({ status: 200, id: "user_123" });
-  check("Criação de usuário retorna 200 OK", () => {
-    const response = api.createUser({ name: "João" });
-    that(response.status).is(200);
-    that(response.id).matches(/^user_\w+$/);
-  });
-});</pre
-            >
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 6: DIALECT CHOOSER -->
-      <section id="chooser" class="py-16 bg-white border-t border-slate-200">
-        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="text-center mb-12">
-            <h3 class="text-2xl font-bold text-slate-900 mb-4">
-              🧭 Qual Dialeto é Para Você?
-            </h3>
-            <p class="text-slate-600 max-w-2xl mx-auto">
-              Você <strong>não precisa aprender os três</strong>. Escolha o que
-              se encaixa no seu mundo e ignore o resto. O framework é poliglota;
-              você não precisa ser.
-            </p>
-          </div>
-          <!-- Flowchart -->
-          <div
-            class="bg-slate-50 rounded-2xl p-8 border border-slate-200 mb-12"
-          >
-            <pre
-              class="font-mono text-xs md:text-sm text-slate-700 overflow-x-auto text-center leading-relaxed"
-            >
-                          ┌─────────────────────────────────────────┐
-                          │   O que você está testando?             │
-                          └───────────────────┬─────────────────────┘
-                                              │
-              ┌───────────────────────────────┼───────────────────────────────┐
-              │                               │                               │
-              ▼                               ▼                               ▼
-   ┌──────────────────────┐      ┌──────────────────────┐      ┌──────────────────────┐
-   │ Algoritmos puros,    │      │ Fluxos de usuário,   │      │ APIs, contratos,     │
-   │ cálculos, regras     │      │ regras de negócio    │      │ integrações,         │
-   │ matemáticas?         │      │ legíveis por PMs?    │      │ conformidade?        │
-   └──────────┬───────────┘      └──────────┬───────────┘      └──────────┬───────────┘
-              │                               │                               │
-              ▼                               ▼                               ▼
-   ┌──────────────────────┐      ┌──────────────────────┐      ┌──────────────────────┐
-   │ 📐 MATEMÁTICO        │      │ 📖 NARRATIVO         │      │ 🛡️ IMPERATIVO        │
-   │ axiom, proof, implies│      │ intend, scenario, to │      │ ensure, check, that  │
-   └──────────────────────┘      └──────────────────────┘      └──────────────────────┘
-            </pre>
-          </div>
-          <!-- Pain Point Cards -->
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <!-- Math Pain -->
-            <div
-              class="bg-indigo-50 rounded-xl p-6 border-2 border-indigo-100 hover:border-indigo-300 transition"
-            >
-              <div class="text-3xl mb-4">📐</div>
-              <h4 class="font-bold text-indigo-900 mb-3">Dialeto Matemático</h4>
-              <div
-                class="bg-white rounded-lg p-4 mb-4 border border-indigo-100"
-              >
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-red-600">😤 A Dor:</strong>
-                </p>
-                <p class="text-sm text-slate-500 italic">
-                  "Escrever <code>describe</code> e <code>it</code> para provar
-                  um algoritmo soa informal e impreciso."
-                </p>
-              </div>
-              <div class="bg-white rounded-lg p-4 border border-indigo-100">
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-green-600">💡 A Solução:</strong>
-                </p>
-                <code class="text-xs text-indigo-700 font-mono"
-                  >axiom("Teorema", () => proof("...", () =>
-                  implies(x).is(y)))</code
-                >
-              </div>
-            </div>
-            <!-- Narrative Pain -->
-            <div
-              class="bg-emerald-50 rounded-xl p-6 border-2 border-emerald-100 hover:border-emerald-300 transition"
-            >
-              <div class="text-3xl mb-4">📖</div>
-              <h4 class="font-bold text-emerald-900 mb-3">Dialeto Narrativo</h4>
-              <div
-                class="bg-white rounded-lg p-4 mb-4 border border-emerald-100"
-              >
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-red-600">😤 A Dor:</strong>
-                </p>
-                <p class="text-sm text-slate-500 italic">
-                  "Seu PM precisa validar regras de negócio, mas não consegue
-                  ler seus testes."
-                </p>
-              </div>
-              <div class="bg-white rounded-lg p-4 border border-emerald-100">
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-green-600">💡 A Solução:</strong>
-                </p>
-                <code class="text-xs text-emerald-700 font-mono"
-                  >scenario("Usuário tenta acessar...", () =>
-                  to(response).be(403))</code
-                >
-              </div>
-            </div>
-            <!-- Imperative Pain -->
-            <div
-              class="bg-amber-50 rounded-xl p-6 border-2 border-amber-100 hover:border-amber-300 transition"
-            >
-              <div class="text-3xl mb-4">🛡️</div>
-              <h4 class="font-bold text-amber-900 mb-3">Dialeto Imperativo</h4>
-              <div class="bg-white rounded-lg p-4 mb-4 border border-amber-100">
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-red-600">😤 A Dor:</strong>
-                </p>
-                <p class="text-sm text-slate-500 italic">
-                  "A linguagem do teste não impõe o respeito que o contrato de
-                  API exige."
-                </p>
-              </div>
-              <div class="bg-white rounded-lg p-4 border border-amber-100">
-                <p class="text-sm text-slate-600 mb-2">
-                  <strong class="text-green-600">💡 A Solução:</strong>
-                </p>
-                <code class="text-xs text-amber-700 font-mono"
-                  >ensure("Conformidade v2", () => verify("...", () =>
-                  that(x).is(y)))</code
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- SECTION 7: POLYGLOT EXAMPLE -->
-      <section id="polyglot" class="py-16 bg-slate-900 text-white">
-        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="text-center mb-10">
-            <span
-              class="inline-block py-1 px-3 rounded-full bg-slate-700 text-slate-300 text-xs font-bold tracking-wide uppercase mb-4"
-              >🎭 Modo Poliglota</span
-            >
-            <h3 class="text-3xl font-bold mb-4">
-              Exemplo: Carrinho de Compras (3 Dialetos)
-            </h3>
-            <p class="text-slate-400 max-w-2xl mx-auto">
-              Use cada dialeto para a camada certa. Todos no mesmo arquivo.
-            </p>
-          </div>
-          <!-- Layer Explanation -->
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-            <div
-              class="bg-indigo-900/50 rounded-lg p-4 border border-indigo-500/30 text-center"
-            >
-              <div class="text-2xl mb-2">📐</div>
-              <p class="text-indigo-300 text-sm font-medium">
-                Cálculos de Preço
-              </p>
-              <p class="text-xs text-indigo-400">Provas matemáticas puras</p>
-            </div>
-            <div
-              class="bg-emerald-900/50 rounded-lg p-4 border border-emerald-500/30 text-center"
-            >
-              <div class="text-2xl mb-2">📖</div>
-              <p class="text-emerald-300 text-sm font-medium">
-                Jornada do Usuário
-              </p>
-              <p class="text-xs text-emerald-400">Documentação viva para PMs</p>
-            </div>
-            <div
-              class="bg-amber-900/50 rounded-lg p-4 border border-amber-500/30 text-center"
-            >
-              <div class="text-2xl mb-2">🛡️</div>
-              <p class="text-amber-300 text-sm font-medium">
-                Gateway de Pagamento
-              </p>
-              <p class="text-xs text-amber-400">Contratos rígidos de API</p>
-            </div>
-          </div>
-          <!-- Code -->
-          <div
-            class="bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700 overflow-x-auto"
-          >
-            <pre
-              class="font-mono text-xs md:text-sm text-slate-300 leading-relaxed"
-            >
-<span class="text-slate-500">// 📐 CAMADA MATEMÁTICA: Lógica Pura de Preços</span>
-<span class="text-indigo-400">axiom</span>(<span class="text-emerald-300">"Teoria de Cálculo de Preços"</span>, () => {
-  <span class="text-indigo-400">proof</span>(<span class="text-emerald-300">"Desconto de 10% em R$100 implica R$90"</span>, () => {
-    <span class="text-indigo-400">implies</span>(calcDiscount(100, 10)).<span class="text-amber-400">is</span>(90);
-  });
-});
-<span class="text-slate-500">// 📖 CAMADA NARRATIVA: Jornada do Usuário</span>
-<span class="text-emerald-400">intend</span>(<span class="text-emerald-300">"Jornada de Compra do Usuário"</span>, () => {
-  <span class="text-emerald-400">scenario</span>(<span class="text-emerald-300">"Usuário adiciona produto ao carrinho"</span>, () => {
-    cart.add({ name: "Camiseta", price: 49.9 });
-    <span class="text-emerald-400">to</span>(cart).<span class="text-amber-400">wasCalled</span>();
-  });
-});
-<span class="text-slate-500">// 🛡️ CAMADA IMPERATIVA: Integração com Gateway</span>
-<span class="text-amber-400">ensure</span>(<span class="text-emerald-300">"Conformidade com Gateway de Pagamento v2.1"</span>, () => {
-  <span class="text-amber-400">check</span>(<span class="text-emerald-300">"Transação bem-sucedida retorna status 200"</span>, () => {
-    const response = paymentGateway.process({ amount: 99.9 });
-    <span class="text-amber-400">that</span>(response.status).<span class="text-amber-400">is</span>(200);
-    <span class="text-amber-400">that</span>(response.transactionId).<span class="text-amber-400">matches</span>(/^tx_[a-z0-9]+$/);
-  });
-});
-            </pre>
-          </div>
-          <p class="text-center text-slate-500 text-sm mt-4">
-            📁 Veja o exemplo completo em
-            <code class="text-indigo-400"
-              >examples/polyglot-shopping-cart.spec.ts</code
-            >
-          </p>
-        </div>
-      </section>
-      <!-- SECTION 8: MIGRATION -->
-      <section
-        id="migration"
-        class="py-16 bg-emerald-50 border-t border-emerald-100"
-      >
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <span
-            class="inline-block py-1 px-3 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold tracking-wide uppercase mb-4"
-            >🔄 Migração Gradual</span
-          >
-          <h3 class="text-2xl font-bold text-slate-900 mb-4">
-            Você tem 5.000 testes em Jest?
-          </h3>
-          <p class="text-slate-600 mb-8 text-lg">
-            <strong>Não reescreva nada.</strong> O tests2dialects entende
-            nativamente a sintaxe do Jest. Seu código legado continua
-            funcionando.
-          </p>
-          <div
-            class="bg-white rounded-xl p-6 shadow-md border border-emerald-200 text-left max-w-2xl mx-auto"
-          >
-            <pre class="font-mono text-sm overflow-x-auto">
-<span class="text-slate-500">// ✅ Legado: Ninguém precisa mexer nisso</span>
-<span class="text-slate-700">describe</span>(<span class="text-emerald-600">"Módulo de Login (Legacy)"</span>, () => {
-  <span class="text-slate-700">it</span>(<span class="text-emerald-600">"deve validar senha"</span>, () => {
-    <span class="text-slate-700">expect</span>(validar(<span class="text-emerald-600">"123"</span>)).toBe(<span class="text-amber-600">true</span>);
-  });
-});
-<span class="text-slate-500">// ✅ Novo: Feature nova com dialeto novo</span>
-<span class="text-indigo-600">axiom</span>(<span class="text-emerald-600">"Nova Criptografia SHA-256"</span>, () => {
-  <span class="text-indigo-600">implies</span>(hash(<span class="text-emerald-600">"123"</span>)).matches(<span class="text-amber-600">/^[a-f0-9]{64}$/</span>);
-});
-            </pre>
-          </div>
-          <p class="text-slate-500 text-sm mt-6">
-            Um único comando
-            <code class="bg-slate-100 px-2 py-1 rounded text-slate-700"
-              >npm test</code
-            >
-            executa <strong>ambos</strong>. Mesmo relatório. Mesma cobertura.
-          </p>
-        </div>
-      </section>
-    </main>
-    <footer class="bg-slate-900 text-slate-400 py-12">
-      <div class="max-w-7xl mx-auto px-4 text-center">
-        <p class="mb-4 text-2xl">🌐</p>
-        <p class="text-sm">
-          tests2dialects Testing Framework Documentation Explorer
-        </p>
-        <p class="text-xs mt-2 opacity-50">
-          Generated based on official README.md
-        </p>
-      </div>
-    </footer>
-    <!-- LOGIC -->
-    <script>
-      // --- DATA STORE ---
-      const dialects = {
-        math: {
-          name: "MathDialect",
-          theme: "indigo",
-          icon: "📐",
-          title: "O Matemático",
-          desc: "Baseado em Lógica Formal. Use para algoritmos puros, finanças e invariantes. O teste é uma prova.",
-          keywords: ["axiom", "proof", "implies", "arbitrary"],
-          code: `axiom("Teoria dos Números", () => {
-  const fib = arbitrary();
-  fib.derive((n) => n <= 1 ? n : fib(n-1) + fib(n-2));
-  proof("Fibonacci(2) implica 1", () => {
-    implies(fib(2)).is(1);
-  });
-});`,
-          radarData: [90, 30, 60, 50, 80], // Logic, UI, API, Doc, Compliance
-        },
-        narrative: {
-          name: "NarrativeDialect",
-          theme: "emerald",
-          icon: "📖",
-          title: "O Narrativo",
-          desc: "Baseado em BDD e Storytelling. Use para fluxos de usuário (E2E) e documentação legível.",
-          keywords: ["intend", "detail", "to", "standIn"],
-          code: `intend("Sistema de Login", () => {
-  const authService = standIn();
-  authService.respondsWith(true);
-  detail("o usuário deve conseguir entrar", () => {
-    authService("user", "pass");
-    to(authService).received("user", "pass");
-  });
-});`,
-          radarData: [40, 95, 60, 90, 50],
-        },
-        imperative: {
-          name: "ImperativeDialect",
-          theme: "amber",
-          icon: "🛡️",
-          title: "O Imperativo",
-          desc: "Baseado em Design by Contract. Use para integração, APIs, validação e compliance.",
-          keywords: ["ensure", "check", "that", "stub"],
-          code: `ensure("Integração Gateway", () => {
-  const api = stub();
-  api.forceReturn(200);
-  check("resposta respeita contrato v1", () => {
-    const status = api();
-    that(status).is(200);
-    that(api).triggered();
-  });
-});`,
-          radarData: [60, 50, 95, 60, 95],
-        },
-      };
-      const rosettaData = [
-        {
-          cat: "Estrutura",
-          jest: "describe",
-          math: "axiom(name, fn)",
-          narr: "intend(name, fn) / story",
-          imp: "ensure(name, fn) / suite",
-        },
-        {
-          cat: "Estrutura",
-          jest: "test / it",
-          math: "proof(name, fn)",
-          narr: "detail(name, fn) / scenario",
-          imp: "check(name, fn) / verify",
-        },
-        {
-          cat: "Asserção",
-          jest: "expect(val).toBe",
-          math: "implies(val).is(expected)",
-          narr: "to(val).be(expected)",
-          imp: "that(val).is(expected)",
-        },
-        {
-          cat: "Asserção",
-          jest: "toHaveBeenCalled",
-          math: "implies(val).wasEvaluated()",
-          narr: "to(val).wasCalled()",
-          imp: "that(val).triggered()",
-        },
-        {
-          cat: "Asserção",
-          jest: "toHaveBeenCalledWith",
-          math: "implies(val).appliedTo(args)",
-          narr: "to(val).received(args)",
-          imp: "that(val).calledWith(args)",
-        },
-        {
-          cat: "Mocks",
-          jest: "jest.fn()",
-          math: "arbitrary() / lambda()",
-          narr: "dummy() / standIn()",
-          imp: "stub() / mock()",
-        },
-        {
-          cat: "Mocks",
-          jest: "jest.spyOn()",
-          math: "monitor(obj, method)",
-          narr: "watch / shadow",
-          imp: "inspect / spy",
-        },
-        {
-          cat: "Mocks",
-          jest: "mockReturnValue",
-          math: "f.yields(val)",
-          narr: "actor.respondsWith(val)",
-          imp: "s.forceReturn(val)",
-        },
-        {
-          cat: "Mocks",
-          jest: "mockResolvedValue",
-          math: "f.convergesTo(val)",
-          narr: "actor.eventuallyGives(val)",
-          imp: "s.resolveWith(val)",
-        },
-        {
-          cat: "Mocks",
-          jest: "mockImplementation",
-          math: "f.derive(fn)",
-          narr: "actor.actsLike(fn)",
-          imp: "s.executes(fn)",
-        },
-        {
-          cat: "Lifecycle",
-          jest: "beforeAll",
-          math: "postulate(fn)",
-          narr: "background(fn)",
-          imp: "initAll(fn)",
-        },
-        {
-          cat: "Lifecycle",
-          jest: "beforeEach",
-          math: "given(fn)",
-          narr: "before(fn)",
-          imp: "reset(fn)",
-        },
-        {
-          cat: "Lifecycle",
-          jest: "afterAll",
-          math: "conclude(fn)",
-          narr: "cleanup(fn)",
-          imp: "disposeAll(fn)",
-        },
-      ];
-      // --- STATE & CHARTS ---
-      let currentChart = null;
-      let distributionChart = null;
-      // --- INITIALIZATION ---
-      window.onload = function () {
-        renderRosettaTable("all");
-        initCharts();
-        morphCode("math"); // Start with default
-      };
-      // --- INTERACTION LOGIC ---
-      // ELASTIC NAVIGATION (Smooth Scroll)
-      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-        anchor.addEventListener("click", function (e) {
-          e.preventDefault();
-          const targetId = this.getAttribute("href");
-          const targetElement = document.querySelector(targetId);
-          if (targetElement) {
-            elasticScrollTo(targetElement, 1200);
-          }
-        });
-      });
-      function elasticScrollTo(element, duration) {
-        const headerOffset = 80; // Space for the sticky header
-        const elementPosition = element.getBoundingClientRect().top;
-        const startPosition = window.pageYOffset;
-        const offsetPosition = elementPosition + startPosition - headerOffset;
-        const distance = offsetPosition - startPosition;
-        let startTime = null;
-        function animation(currentTime) {
-          if (startTime === null) startTime = currentTime;
-          const timeElapsed = currentTime - startTime;
-          const run = easeOutElastic(
-            timeElapsed,
-            startPosition,
-            distance,
-            duration
-          );
-          window.scrollTo(0, run);
-          if (timeElapsed < duration) requestAnimationFrame(animation);
-        }
-        // Elastic Easing Function (The "Bouncy" Logic)
-        function easeOutElastic(t, b, c, d) {
-          var s = 1.70158;
-          var p = 0;
-          var a = c;
-          if (t == 0) return b;
-          if ((t /= d) == 1) return b + c;
-          if (!p) p = d * 0.3;
-          if (a < Math.abs(c)) {
-            a = c;
-            var s = p / 4;
-          } else var s = (p / (2 * Math.PI)) * Math.asin(c / a);
-          return (
-            a *
-              Math.pow(2, -10 * t) *
-              Math.sin(((t * d - s) * (2 * Math.PI)) / p) +
-            c +
-            b
-          );
-        }
-        // Alternative: Less aggressive "Exponential" for smoother pro feel if elastic is too much
-        // But user requested "Elastic".
-        // Let's use a modified easeInOutQuint for "premium elastic" feel without dizziness
-        function easeInOutQuint(t, b, c, d) {
-          t /= d / 2;
-          if (t < 1) return (c / 2) * t * t * t * t * t + b;
-          t -= 2;
-          return (c / 2) * (t * t * t * t * t + 2) + b;
-        }
-        requestAnimationFrame(animation);
-      }
-      function switchDialect(key) {
-        const data = dialects[key];
-        // Update UI Text
-        document.getElementById("dialect-title").innerText = data.title;
-        document.getElementById("dialect-desc").innerHTML = data.desc.replace(
-          "prova",
-          "<strong>prova</strong>"
-        );
-        document.getElementById("dialect-badge").innerText =
-          key === "math"
-            ? "Lógica Formal"
-            : key === "narrative"
-            ? "Storytelling (BDD)"
-            : "Engenharia de Sistemas";
-        document.getElementById(
-          "dialect-badge"
-        ).className = `inline-block px-3 py-1 rounded text-xs font-bold mb-4 bg-${data.theme}-100 text-${data.theme}-800`;
-        // Update Keywords
-        const kwList = document.getElementById("dialect-keywords");
-        kwList.innerHTML = `
-                <li class="flex items-center gap-2"><span class="text-${
-                  data.theme
-                }-500">➤</span> ${data.keywords.join(", ")}</li>
-                <li class="flex items-center gap-2 text-slate-400 text-xs">A escolha semântica altera a percepção do teste.</li>
-            `;
-        // Update Code
-        document.getElementById("dialect-code").innerText = data.code;
-        document.getElementById(
-          "dialect-code"
-        ).className = `font-mono text-sm overflow-x-auto code-scroll text-${data.theme}-300`;
-        // Update Tabs Styling
-        document.querySelectorAll(".tab-btn").forEach((btn) => {
-          btn.className =
-            "tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-slate-700 focus:outline-none whitespace-nowrap border-b-2 border-transparent";
-        });
-        const activeTab = document.getElementById(`tab-${key}`);
-        activeTab.className = `tab-btn px-6 py-3 text-sm font-medium whitespace-nowrap border-b-2 border-${data.theme}-600 text-${data.theme}-600 font-bold tab-active`;
-        // Update Chart
-        updateSuitabilityChart(data.radarData, data.theme, data.title);
-      }
-      function morphCode(key) {
-        const data = dialects[key];
-        const display = document.getElementById("morph-display");
-        const label = document.getElementById("morph-label");
-        // Fade out
-        display.style.opacity = "0";
-        setTimeout(() => {
-          display.innerText = data.code;
-          label.innerText = `CODE: ${data.name.toUpperCase()}`;
-          // Color mapping for the dark theme block
-          const colorMap = {
-            math: "text-indigo-300",
-            narrative: "text-emerald-300",
-            imperative: "text-amber-300",
-          };
-          display.className = `font-mono text-sm leading-relaxed overflow-x-auto transition-opacity duration-300 ${colorMap[key]}`;
-          // Fade in
-          display.style.opacity = "1";
-        }, 300);
-      }
-      function renderRosettaTable(category) {
-        const tbody = document.getElementById("rosettaBody");
-        tbody.innerHTML = "";
-        const filtered =
-          category === "all"
-            ? rosettaData
-            : rosettaData.filter((d) => d.cat === category);
-        filtered.forEach((row) => {
-          const tr = document.createElement("tr");
-          tr.className = "hover:bg-slate-50 transition-colors";
-          tr.innerHTML = `
-                    <td class="px-6 py-4 font-bold text-xs text-slate-400 uppercase">${row.cat}</td>
-                    <td class="px-6 py-4 font-semibold text-slate-800 bg-slate-50 border-r border-slate-100">${row.jest}</td>
-                    <td class="px-6 py-4 text-indigo-700 font-medium">${row.math}</td>
-                    <td class="px-6 py-4 text-emerald-700 font-medium">${row.narr}</td>
-                    <td class="px-6 py-4 text-amber-700 font-medium">${row.imp}</td>
-                `;
-          tbody.appendChild(tr);
-        });
-      }
-      function filterTable() {
-        const select = document.getElementById("categoryFilter");
-        renderRosettaTable(select.value);
-      }
-      // --- CHARTS IMPLEMENTATION ---
-      function initCharts() {
-        // 1. Suitability Radar Chart
-        const ctx1 = document
-          .getElementById("suitabilityChart")
-          .getContext("2d");
-        currentChart = new Chart(ctx1, {
-          type: "radar",
-          data: {
-            labels: [
-              "Lógica Pura",
-              "UI/UX",
-              "API/Backend",
-              "Documentação",
-              "Compliance",
-            ],
-            datasets: [
-              {
-                label: "O Matemático",
-                data: dialects.math.radarData,
-                fill: true,
-                backgroundColor: "rgba(79, 70, 229, 0.2)",
-                borderColor: "rgb(79, 70, 229)",
-                pointBackgroundColor: "rgb(79, 70, 229)",
-                pointBorderColor: "#fff",
-                pointHoverBackgroundColor: "#fff",
-                pointHoverBorderColor: "rgb(79, 70, 229)",
-              },
-            ],
-          },
-          options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            elements: { line: { tension: 0.3 } },
-            scales: {
-              r: {
-                angleLines: { color: "#e2e8f0" },
-                grid: { color: "#e2e8f0" },
-                pointLabels: {
-                  font: { size: 10, family: "Inter" },
-                  color: "#64748b",
-                },
-                ticks: { display: false, max: 100, min: 0 },
-              },
-            },
-            plugins: {
-              legend: { display: false },
-              tooltip: { enabled: true },
-            },
-          },
-        });
-        // 2. API Distribution Bar Chart
-        const counts = {
-          Structure: rosettaData.filter((x) => x.cat === "Estrutura").length,
-          Assertion: rosettaData.filter((x) => x.cat === "Asserção").length,
-          Mocks: rosettaData.filter((x) => x.cat === "Mocks").length,
-          Lifecycle: rosettaData.filter((x) => x.cat === "Lifecycle").length,
-        };
-        const ctx2 = document
-          .getElementById("distributionChart")
-          .getContext("2d");
-        distributionChart = new Chart(ctx2, {
-          type: "bar",
-          data: {
-            labels: Object.keys(counts),
-            datasets: [
-              {
-                label: "Funções da API",
-                data: Object.values(counts),
-                backgroundColor: [
-                  "rgba(148, 163, 184, 0.7)",
-                  "rgba(148, 163, 184, 0.7)",
-                  "rgba(71, 85, 105, 0.9)", // Emphasize Mocks are heavy
-                  "rgba(148, 163, 184, 0.7)",
-                ],
-                borderRadius: 6,
-              },
-            ],
-          },
-          options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-              legend: { display: false },
-              tooltip: {
-                callbacks: {
-                  title: (context) => `Categoria: ${context[0].label}`,
-                  label: (context) => `${context.raw} Funções Mapeadas`,
-                },
-              },
-            },
-            scales: {
-              y: {
-                beginAtZero: true,
-                grid: { display: false },
-              },
-              x: {
-                grid: { display: false },
-              },
-            },
-          },
-        });
-      }
-      function updateSuitabilityChart(data, theme, label) {
-        if (!currentChart) return;
-        const colors = {
-          indigo: { bg: "rgba(79, 70, 229, 0.2)", border: "rgb(79, 70, 229)" },
-          emerald: {
-            bg: "rgba(16, 185, 129, 0.2)",
-            border: "rgb(16, 185, 129)",
-          },
-          amber: { bg: "rgba(245, 158, 11, 0.2)", border: "rgb(245, 158, 11)" },
-        };
-        currentChart.data.datasets[0].data = data;
-        currentChart.data.datasets[0].label = label;
-        currentChart.data.datasets[0].backgroundColor = colors[theme].bg;
-        currentChart.data.datasets[0].borderColor = colors[theme].border;
-        currentChart.data.datasets[0].pointBackgroundColor =
-          colors[theme].border;
-        currentChart.data.datasets[0].pointHoverBorderColor =
-          colors[theme].border;
-        currentChart.update();
-      }
-    </script>
-  </body>
-</html>