Skip to content

Commit c2e5ef4

Browse files
committed
@
docs: refleja el estado uno-y-uno (1 theme default + es) README: saca claims de "5 themes" y "ES/EN/PT", describe el theme unico neutro y el motor generico; borra las traducciones docs/README.es|pt.md (su link roto a LICENSE rompia el gate Links). AGENTS/ARQUITECTURA: nota de estado actual + regla de oro al layer de theme intercambiable. El motor multi-theme sigue documentado y vigente (soporta N; hoy hay uno registrado). @
1 parent bcc88f0 commit c2e5ef4

5 files changed

Lines changed: 34 additions & 387 deletions

File tree

AGENTS.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,16 @@ Leé, en este orden:
1010
2. `CLAUDE.md` — cómo trabajar (fases, convenciones de código).
1111
3. `docs/AI-PROCESS.md` — gates, loop de design-review, hooks.
1212

13+
## Estado actual (uno y uno)
14+
15+
Hoy el repo corre con **un solo theme** (`default`, neutro) y **un solo idioma** (`es`). El
16+
motor de theming e i18n queda **genérico**: sumar themes/idiomas es agregar entradas al
17+
registry / a `availableLangs`, sin tocar el dominio. La identidad visual del theme `default`
18+
está por diseñarse. (Antes convivían 5 themes y 3 idiomas; se consolidó a uno de cada uno.)
19+
1320
## La regla de oro (no negociable)
1421

15-
> El dominio se escribe una vez. La presentación se escribe cinco veces.
22+
> El dominio se escribe una vez. La presentación es un layer de theme intercambiable.
1623
1724
- Todo lo neutral (workers reales, registry de ejemplos, estado de hilos, i18n) vive en
1825
`core/` y **no conoce los themes**.

ARQUITECTURA-multi-theme.md

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
# Arquitectura multi-theme · web-worker-patterns
22

3-
Documento de diseño para mantener **4 diseños radicalmente distintos en paralelo** sobre una misma base Angular 22. Pensado para entregarse a Claude Desktop / Claude Code como spec de implementación.
4-
5-
Los 4 themes son: `editorial` (poster/arte), `dev-tool` (IDE/terminal), `narrative` (revista) y `brutalist` (brutalismo amarillo). No comparten layout, tipografía, interacción ni librería UI. Lo único que comparten es el **dominio**: los 10 ejemplos, la lógica real de los Web Workers, el estado de los hilos y la traducción ES/EN/PT.
3+
> **Estado actual (uno y uno).** El repo corre hoy con **un solo theme** (`default`, neutro,
4+
> dibujado solo con el contrato de tokens) y **un solo idioma** (`es`). Este documento describe
5+
> el **motor** multi-theme, que sigue vigente: es data-driven (el registry es la fuente de verdad
6+
> de qué themes existen) y soporta N themes/idiomas sin tocar el dominio. Sumar uno es agregar su
7+
> `ThemePack` al registry / su idioma a `availableLangs`. Los themes concretos que se nombran más
8+
> abajo (`editorial`, `dev-tool`, `narrative`, `brutalist`) se retiraron al consolidar a uno; se
9+
> conservan como referencia histórica del abanico de pieles que el motor sostiene. La identidad
10+
> visual del theme `default` está por diseñarse.
11+
12+
Documento de diseño del **motor** que permite mantener diseños radicalmente distintos en paralelo sobre una misma base Angular 22.
13+
14+
El principio: no comparten layout, tipografía, interacción ni librería UI. Lo único que comparten es el **dominio**: los ejemplos, la lógica real de los Web Workers, el estado de los hilos y la traducción.
615

716
---
817

README.md

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
[![TypeScript](https://img.shields.io/badge/TypeScript-6.0.3-3178C6?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
1010
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
1111

12-
> **🌐 This README is also available in other languages:**
13-
> [Español](docs/README.es.md) | [Português](docs/README.pt.md)
14-
15-
Interactive educational platform about **Web Workers** built with **Angular 22**. It ships **16 progressive examples** with live demos and real thread visualization, multi-language support (ES/EN/PT), and **5 swappable visual themes** — the same neutral domain rendered five different ways.
12+
Interactive educational platform about **Web Workers** built with **Angular 22**. It ships **16 progressive examples** with live demos and real thread visualization. The UI is in **Spanish**, and the presentation is a **swappable theme layer** — today a single neutral theme, with the engine kept generic so more themes (and languages) can be added without touching the domain.
1613

1714
**▶ Live demo: [damiansire.github.io/web-worker-patterns](https://damiansire.github.io/web-worker-patterns/)**
1815

@@ -82,15 +79,11 @@ The 16 examples are organized into 5 categories by concept. The grouping below m
8279

8380
## Visual Themes
8481

85-
The same domain is skinned by **5 independent themes**, switchable live from the UI:
86-
87-
**Brutalist** · **Full Brutalist** · **Dev Tool** · **Editorial** · **Narrative**
88-
89-
Each theme provides its own shell, home, example layout, UI primitives and a custom thread visualizer — without the domain ever knowing a theme exists.
82+
The domain is skinned by a theme layer. Today there is **one neutral theme** (`default`), drawn entirely from the semantic token contract. The theming engine is generic: a theme provides its own shell, home, example layout, UI primitives and a thread visualizer, and is registered as a data-driven `ThemePack` — adding more themes is adding entries to the registry, **without the domain ever knowing a theme exists**.
9083

9184
## Project Architecture
9285

93-
The golden rule: **the domain is written once; the presentation is written five times.** `core/` is theme-neutral and **never** imports from `themes/`. The full rationale lives in [`ARQUITECTURA-multi-theme.md`](ARQUITECTURA-multi-theme.md).
86+
The golden rule: **the domain is written once; the presentation is a swappable theme layer.** `core/` is theme-neutral and **never** imports from `themes/`. The full rationale lives in [`ARQUITECTURA-multi-theme.md`](ARQUITECTURA-multi-theme.md).
9487

9588
```
9689
src/app/
@@ -106,22 +99,22 @@ src/app/
10699
├── ui-contracts/ # Interfaces every theme primitive must satisfy
107100
├── ui-primitives/ # Theme-agnostic primitives (charts, language switcher)
108101
├── themes/ # Presentation — one folder per theme
109-
── brutalist/ full-brutalist/ dev-tool/ editorial/ narrative/
110-
├── shell/ home/ example-layout/ primitives/ styles/
102+
── default/ # The single neutral theme (engine supports N)
103+
├── shell/ home/ example-layout/ primitives/ styles/
111104
├── app.routes.ts # Routes generated from the examples registry
112105
└── app.ts # Root component
113106
114-
public/i18n/ # en.json · es.json · pt.json (UI + per-example content)
107+
public/i18n/ # es.json (UI + per-example content)
115108
```
116109

117110
### Adding a New Example
118111

119-
A new example is **one neutral domain definition** rendered by all 5 themes. The full pipeline is codified in the `/migrate-example` command (`.claude/commands/migrate-example.md`). In short:
112+
A new example is **one neutral domain definition** rendered by the active theme. In short:
120113

121114
1. Add the worker in `core/domain/workers/` (+ a pure `*.logic.ts` with a unit test) and its snippets under `core/domain/examples/snippets/`.
122115
2. Register it in `core/domain/examples/examples.registry.ts` (`id`, `order`, `category`, `demo`, `workerFactory`).
123-
3. Add the educational content (title, summary, takeaways) to `public/i18n/{en,es,pt}.json`.
124-
4. Wire the demo's visualization into the `@case` of each theme's example layout.
116+
3. Add the educational content (title, summary, takeaways) to `public/i18n/es.json`.
117+
4. Wire the demo's visualization into the `@case` of the theme's example layout.
125118

126119
Routes, navigation and the home page update automatically from the registry.
127120

@@ -130,7 +123,7 @@ Routes, navigation and the home page update automatically from the registry.
130123
- **Angular 22** — Standalone components, Signals, zoneless change detection (opt-in via `provideZonelessChangeDetection()`), esbuild-based build
131124
- **TypeScript 6.0.3**
132125
- **SCSS** — Semantic design tokens (`--surface`, `--ink`, `--accent`, `--thread-*`) per theme
133-
- **@jsverse/transloco** — Runtime i18n (ES/EN/PT)
126+
- **@jsverse/transloco** — Runtime i18n (ES; engine ready for more languages)
134127
- **highlight.js** — Syntax highlighting for code blocks
135128
- **Vitest** — Unit tests (<!-- METRICS:TESTS -->131<!-- /METRICS:TESTS --> tests across the pure domain logic, the services and the themes)
136129
- **dependency-cruiser** — Enforces the `core/ ⇏ themes/` boundary
@@ -169,13 +162,13 @@ npm run lint:boundaries# Enforce the golden rule (core/ ⇏ themes/)
169162

170163
Quality gates (lint, build, format, tests, boundaries) run on every push/PR via [CI](.github/workflows/ci.yml) and as a local git pre-commit hook — independent of your editor. ESLint enforces the invariants the repo preaches: `no-console` in the lib, `ChangeDetectionStrategy.OnPush` on every component (the app is zoneless), and keyboard a11y in templates. See [`AGENTS.md`](AGENTS.md) and [`docs/AI-PROCESS.md`](docs/AI-PROCESS.md).
171164

172-
## Multi-language Support
165+
## Language
173166

174-
The application supports English, Spanish, and Portuguese via [Transloco](https://jsverse.github.io/transloco/). Translations live in:
167+
The application UI is in **Spanish**, served via [Transloco](https://jsverse.github.io/transloco/). Content lives in:
175168

176-
- `public/i18n/en.json` · `public/i18n/es.json` · `public/i18n/pt.json` — UI text **and** the educational content for every example
169+
- `public/i18n/es.json` — UI text **and** the educational content for every example
177170

178-
Switch languages from the selector in each theme's shell.
171+
The i18n engine is kept generic: adding a language is adding its JSON in `public/i18n/`, its entry in `LanguageService`, and its code to `availableLangs` in `app.config.ts`. The neutral `LanguageSwitcherComponent` is ready to re-mount once there is more than one.
179172

180173
## Documentation
181174

docs/README.es.md

Lines changed: 0 additions & 181 deletions
This file was deleted.

0 commit comments

Comments
 (0)