You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
@
Copy file name to clipboardExpand all lines: ARQUITECTURA-multi-theme.md
+12-3Lines changed: 12 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,17 @@
1
1
# Arquitectura multi-theme · web-worker-patterns
2
2
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.
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.
16
13
17
14
**▶ Live demo: [damiansire.github.io/web-worker-patterns](https://damiansire.github.io/web-worker-patterns/)**
18
15
@@ -82,15 +79,11 @@ The 16 examples are organized into 5 categories by concept. The grouping below m
82
79
83
80
## Visual Themes
84
81
85
-
The same domain is skinned by **5 independent themes**, switchable live from the UI:
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**.
90
83
91
84
## Project Architecture
92
85
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).
94
87
95
88
```
96
89
src/app/
@@ -106,22 +99,22 @@ src/app/
106
99
├── ui-contracts/ # Interfaces every theme primitive must satisfy
107
100
├── ui-primitives/ # Theme-agnostic primitives (charts, language switcher)
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:
120
113
121
114
1. Add the worker in `core/domain/workers/` (+ a pure `*.logic.ts` with a unit test) and its snippets under `core/domain/examples/snippets/`.
122
115
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.
125
118
126
119
Routes, navigation and the home page update automatically from the registry.
127
120
@@ -130,7 +123,7 @@ Routes, navigation and the home page update automatically from the registry.
-**@jsverse/transloco** — Runtime i18n (ES; engine ready for more languages)
134
127
-**highlight.js** — Syntax highlighting for code blocks
135
128
-**Vitest** — Unit tests (<!-- METRICS:TESTS -->131<!-- /METRICS:TESTS --> tests across the pure domain logic, the services and the themes)
136
129
-**dependency-cruiser** — Enforces the `core/ ⇏ themes/` boundary
@@ -169,13 +162,13 @@ npm run lint:boundaries# Enforce the golden rule (core/ ⇏ themes/)
169
162
170
163
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).
171
164
172
-
## Multi-language Support
165
+
## Language
173
166
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:
175
168
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
177
170
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.
0 commit comments