Refactor: migrate text reader to TypeScript with Yarn 4 build

.github/workflows/build.yml

@@ -0,0 +1,42 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: read
+  pages: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build project
+        run: yarn build
+
+      - name: Copy CNAME file
+        run: cp CNAME dist/CNAME
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+

.github/workflows/deploy.yml

@@ -0,0 +1,33 @@
+name: Deploy
+
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

.github/workflows/test-e2e.yml

@@ -0,0 +1,36 @@
+name: Test E2E
+
+on:
+  push:
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  test-e2e:
+    name: Test E2E
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: yarn test:e2e
+

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Test Unit
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  test-unit:
+    name: Test Unit
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        run: yarn test:unit
+

.gitignore

@@ -1 +1,13 @@
 node_modules/
+dist/
+
+.pnp.*
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# Test outputs
+playwright-report/
+test-results/

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -8,47 +8,59 @@ A modern and responsive web application that converts text to speech, allowing u
 - **Speed Control**: Adjust playback speed from 0.5x to 2.0x using a desktop slider or a mobile-friendly drop-down
 - **Modern Interface**: Clean and responsive design with attractive visual gradient
 - **Data Persistence**: Save text in the browser for later access
-- **Play and Pause**: Full control over playback with intuitive buttons
+- **Play and Stop**: Full control over playback with intuitive buttons
 - **Brazilian Portuguese Support**: Automatic detection and selection of pt-BR voices when available
 - **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices, with a full-width layout and tighter spacing on
   small screens for better readability
 - **Mobile-friendly Controls**: Buttons and slider reorganize on viewports up to 360 px without overflowing the container
 
 ## 🎨 Branding
 
-- The official application logo is available at [`assets/logo.svg`](assets/logo.svg) and is used as the in-app badge and site favicon.
+- The official application logo is available at [`public/assets/logo.svg`](public/assets/logo.svg) and is used as the in-app badge and site favicon.
 
 ## 🚀 How to Use
 
 1. Open the application in your browser
 2. Type or paste the text you want to hear in the text field
 3. Click the **Play** button (▶) to start reading
 4. Use the slider (desktop/tablet) or the drop-down select (mobile) to adjust the playback speed (0.5x to 2.0x)
-5. Click the **Pause** button (⏸) to pause playback
+5. Click the **Stop** button (⏹) to stop playback
 6. Click the **Save** button (💾) to save the text in your browser
 
 ## 📋 Requirements
 
 - Modern browser with Web Speech API support
 - JavaScript enabled
-- Internet connection (to load CDN dependencies)
 
 ## 🛠️ Technologies Used
 
 - **HTML5**: Semantic structure
 - **CSS3**: Styles with backdrop-filter and gradient support
-- **JavaScript**: Application logic
-- **Tailwind CSS**: Utility-first CSS framework
-- **Inline SVG Icons**: Lucide icons embutidos diretamente no markup (sem dependências externas)
+- **TypeScript (ESM)**: Application logic compiled for modern browsers
+- **Vite**: Build tool and development server
+- **Tailwind CSS**: Utility-first CSS framework (installed via npm)
+- **PostCSS**: CSS processing and transformation
+- **Inline SVG Icons**: Icons embedded directly in the markup (no external dependencies)
 - **Web Speech API**: Native browser speech synthesis
+- **Jest**: Unit testing framework
+- **Playwright**: End-to-end testing framework
 
 ## 📦 Dependencies
 
-- [Tailwind CSS](https://tailwindcss.com/) - via CDN
+This project uses modern build tools and development dependencies. For end users, no installation is required - the application runs directly in the browser.
+
+### Development Dependencies
+
+- **Vite**: Build tool and development server
+- **TypeScript**: Type-safe JavaScript
+- **Tailwind CSS**: Utility-first CSS framework
+- **PostCSS**: CSS processing
+- **Jest**: Unit testing framework
+- **Playwright**: End-to-end testing framework
 
 ## 📈 Analytics & Privacy
 
-- Google Analytics (GA4) and Google Tag Manager now load from the deferred [`analytics.js`](analytics.js) file instead of inline snippets.
+- Google Analytics (GA4) and Google Tag Manager now load from the deferred [`analytics.js`](public/analytics.js) file instead of inline snippets.
 - The script waits for `requestIdleCallback` or the first user interaction (click, key press, pointer/touch) before injecting GA/GTM assets, freeing the critical rendering path while keeping telemetry intact.
 - The GTM `<noscript>` iframe remains in the `<body>` to preserve baseline tracking for users without JavaScript.
 - If your deployment requires explicit consent, set `window.APP_ANALYTICS_AUTO_START = false` in a script that runs before `analytics.js` and call `window.appAnalytics.init()` once consent is granted (or `window.appAnalytics.enableAutoStart()` to re-enable the deferred behaviour).
@@ -74,12 +86,53 @@ The application automatically tries to select a Brazilian Portuguese (pt-BR) voi
 - ✅ Edge (version 79+)
 - ⚠️ Opera (with partial support)
 
+## 🧑‍💻 Development
+
+### Requirements
+
+- **Node.js >= 22 < 23**
+- **Yarn 4.10** (via Corepack)
+
+### Setup
+
+1. Install dependencies:
+   ```bash
+   yarn install
+   ```
+
+2. Start development server:
+   ```bash
+   yarn dev
+   ```
+   The application will be available at `http://localhost:5173`
+
+### Available Scripts
+
+- `yarn dev` - Start Vite development server
+- `yarn build` - Build production assets (compiles TypeScript and processes CSS with Vite)
+- `yarn preview` - Preview the production build locally
+- `yarn test` - Run all tests (unit and e2e)
+- `yarn test:unit` - Run unit tests with Jest (uses JSDOM environment)
+- `yarn test:e2e` - Run end-to-end tests with Playwright
+- `yarn test:e2e:ui` - Run Playwright tests with UI mode
+
+### Project Structure
+
+```
+src/
+├── app/          # Main application logic
+├── core/         # Business logic (e.g., rate calculations)
+├── utils/        # Utility functions (e.g., storage helpers)
+├── styles/       # CSS styles
+└── main.ts       # Application entry point
+```
+
 ## 📝 Notes
 
 - Voice quality depends on the voices available on your operating system
 - Some browsers may have limitations on text length for speech synthesis
 - Playback speed may vary depending on the browser and operating system
-- Ícones são renderizados inline como SVG, eliminando a dependência do CDN do Lucide
+- Icons are rendered inline as SVG, eliminating external dependencies
 - The fixed footer now expands to the full viewport width on small screens, keeping calls to action easy to tap on mobile devices
 
 ## 💖 Donation Modal