@saulwade/swl-ses 1.3.7 → 1.4.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 (129) hide show
  1. package/CLAUDE.md +12 -4
  2. package/README.md +1 -1
  3. package/bin/swl-mcp-server.js +187 -187
  4. package/bin/swl-webhook-server.js +198 -0
  5. package/comandos/swl/.evolved.json +22 -22
  6. package/comandos/swl/adoptar-proyecto.md +21 -1
  7. package/comandos/swl/claudemd.md +14 -1
  8. package/comandos/swl/contribuir.md +233 -233
  9. package/comandos/swl/exportar-vault.md +207 -7
  10. package/comandos/swl/nuevo-proyecto.md +24 -2
  11. package/gateway/adapters/base.js +109 -0
  12. package/gateway/adapters/discord.js +167 -0
  13. package/gateway/adapters/email.js +221 -0
  14. package/gateway/adapters/slack.js +192 -0
  15. package/gateway/adapters/telegram.js +183 -0
  16. package/gateway/adapters/webhook.js +113 -0
  17. package/gateway/adapters/whatsapp.js +214 -0
  18. package/gateway/agent-executor.js +322 -0
  19. package/gateway/command-relay.js +271 -0
  20. package/gateway/cron/jobs.js +263 -0
  21. package/gateway/cron/scheduler.js +322 -0
  22. package/gateway/cron/store.js +335 -0
  23. package/gateway/index.js +320 -0
  24. package/gateway/lib/event-channel.js +191 -0
  25. package/gateway/session.js +131 -0
  26. package/gateway/webhook-server.js +324 -0
  27. package/habilidades/backend-production-resilience/SKILL.md +288 -288
  28. package/habilidades/benchmark-memoria/SKILL.md +186 -186
  29. package/habilidades/build-errors-nextjs/SKILL.md +55 -1
  30. package/habilidades/diagrama-arquitectura/assets/template.html +276 -276
  31. package/habilidades/doubt-driven-review/SKILL.md +171 -171
  32. package/habilidades/doubt-driven-review/recursos/EXAMPLES.md +130 -130
  33. package/habilidades/eval-framework/SKILL.md +212 -212
  34. package/habilidades/extractor-de-aprendizajes/SKILL.md +24 -10
  35. package/habilidades/harness-claude-code/SKILL.md +299 -299
  36. package/habilidades/infra-github-actions/SKILL.md +166 -166
  37. package/habilidades/legacy-code-rescue/SKILL.md +267 -267
  38. package/habilidades/manejo-errores/.evolved.json +8 -8
  39. package/habilidades/meta-skills-estandar/recursos/convencion-examples.md +93 -93
  40. package/habilidades/meta-skills-estandar/recursos/skills-as-agents.md +163 -163
  41. package/habilidades/nextjs-testing/SKILL.md +89 -5
  42. package/habilidades/node-experto/SKILL.md +37 -1
  43. package/habilidades/patrones-python/SKILL.md +229 -229
  44. package/habilidades/patrones-python/recursos/patrones-avanzados.md +469 -469
  45. package/habilidades/planear-fase/SKILL.md +319 -319
  46. package/habilidades/react-experto/SKILL.md +45 -4
  47. package/habilidades/release-semver/.evolved.json +8 -8
  48. package/habilidades/swl-claudemd/SKILL.md +15 -1
  49. package/habilidades/tdd-workflow/SKILL.md +36 -4
  50. package/habilidades/testing-python/SKILL.md +340 -340
  51. package/hooks/claudemd-bloat-detector.js +161 -161
  52. package/hooks/inyeccion-contexto.js +8 -3
  53. package/hooks/lib/agent-routing.js +107 -107
  54. package/hooks/lib/auto-consolidator.js +335 -335
  55. package/hooks/lib/error-classifier.js +308 -308
  56. package/hooks/lib/merkle-audit.js +96 -96
  57. package/hooks/lib/provenance-tracker.js +191 -191
  58. package/hooks/lib/rate-limit-ip.js +177 -0
  59. package/hooks/lib/rate-limit-tracker.js +253 -253
  60. package/hooks/lib/resource-quota.js +122 -122
  61. package/hooks/lib/retry-jitter.js +165 -165
  62. package/hooks/lib/skill-auditor.js +588 -588
  63. package/hooks/lib/sync-status.js +228 -228
  64. package/hooks/lib/taint-tracker.js +107 -107
  65. package/hooks/lib/text-similarity.js +241 -241
  66. package/hooks/lib/toon-compressor.js +245 -245
  67. package/hooks/lib/webhook-dedup.js +184 -0
  68. package/hooks/lib/webhook-verify.js +123 -0
  69. package/hooks/proteccion-rutas.js +120 -15
  70. package/hooks/registro-turnos.js +209 -209
  71. package/hooks/sugerir-regenerar-inventario.js +170 -170
  72. package/hooks/validar-formato-post-subagente.js +140 -140
  73. package/hooks/validar-memoria-hook.js +218 -218
  74. package/instintos/prompt-appendices.yaml +57 -57
  75. package/manifiestos/agent-output-schemas.json +57 -57
  76. package/manifiestos/modulos.json +1 -0
  77. package/manifiestos/skills-lock.json +37 -37
  78. package/package.json +5 -3
  79. package/plantillas/auditor-veto-template.md +105 -105
  80. package/plantillas/github-workflows/README.md +47 -47
  81. package/plantillas/github-workflows/release-please.yml +44 -44
  82. package/plantillas/github-workflows/swl-ci.yml +107 -107
  83. package/plantillas/github-workflows/swl-security.yml +51 -51
  84. package/plugin.json +1 -1
  85. package/reglas/analisis-previo-tareas-grandes.md +172 -172
  86. package/reglas/arreglar-al-detectar.md +147 -147
  87. package/reglas/fragmentos-compartidos.md +152 -152
  88. package/reglas/harness-claude-code.md +213 -213
  89. package/reglas/usar-context7.md +226 -226
  90. package/reglas/usar-sistema-swl.md +251 -0
  91. package/schemas/diary-entry.schema.json +80 -80
  92. package/scripts/benchmark-memoria.js +167 -167
  93. package/scripts/comandos/skills.js +251 -2
  94. package/scripts/configurar-branch-protection.js +418 -418
  95. package/scripts/detectar-aprendizajes-duplicados.js +151 -151
  96. package/scripts/field-report.js +199 -199
  97. package/scripts/generar-checklists-consolidados.js +273 -273
  98. package/scripts/generar-inventario.js +420 -420
  99. package/scripts/generar-matriz-lenguajes.js +271 -271
  100. package/scripts/lib/artefactos-python.js +43 -43
  101. package/scripts/lib/benchmark-metrics.js +160 -160
  102. package/scripts/lib/budget-enforcer.js +252 -252
  103. package/scripts/lib/configurar-ci.js +380 -380
  104. package/scripts/lib/contadores-inventario.js +217 -217
  105. package/scripts/lib/detectar-stack-detallado.js +307 -307
  106. package/scripts/lib/diary-entry.js +234 -234
  107. package/scripts/lib/eval-metrics-store.js +218 -218
  108. package/scripts/lib/eval-quality.js +171 -171
  109. package/scripts/lib/eval-schemas.js +144 -144
  110. package/scripts/lib/eval-self-correct.js +106 -106
  111. package/scripts/lib/eval-validator.js +185 -185
  112. package/scripts/lib/jaccard-similarity.js +98 -98
  113. package/scripts/lib/longmemeval-runner.js +125 -125
  114. package/scripts/lib/npm-version.js +261 -261
  115. package/scripts/lib/paquetes-conocidos.js +50 -50
  116. package/scripts/lib/prompt-builder.js +264 -264
  117. package/scripts/lib/rrf-fusion.js +175 -175
  118. package/scripts/lib/scoring-instintos.js +277 -277
  119. package/scripts/lib/semantic-search.js +252 -252
  120. package/scripts/limpiar-artefactos-python.js +131 -131
  121. package/scripts/mcp-server/README.md +128 -128
  122. package/scripts/mcp-server/handlers.js +206 -206
  123. package/scripts/migrar-csv-a-array.js +168 -168
  124. package/scripts/migrar-fase-dominio.js +201 -201
  125. package/scripts/publicar.js +511 -511
  126. package/scripts/run-eval.js +141 -141
  127. package/scripts/validar-manifest.js +195 -195
  128. package/scripts/validar-userland-vacio.js +110 -110
  129. package/scripts/verificar-release.js +110 -0
package/habilidades/diagrama-arquitectura/assets/template.html CHANGED
@@ -1,276 +1,276 @@
1
- <!DOCTYPE html>
2
- <html lang="es">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
7
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- body {
16
- font-family: 'JetBrains Mono', monospace;
17
- background: #020617;
18
- min-height: 100vh;
19
- padding: 2rem;
20
- color: white;
21
- }
22
-
23
- .container {
24
- max-width: 1200px;
25
- margin: 0 auto;
26
- }
27
-
28
- .header {
29
- margin-bottom: 2rem;
30
- }
31
-
32
- .header-row {
33
- display: flex;
34
- align-items: center;
35
- gap: 1rem;
36
- margin-bottom: 0.5rem;
37
- }
38
-
39
- .pulse-dot {
40
- width: 12px;
41
- height: 12px;
42
- background: #22d3ee;
43
- border-radius: 50%;
44
- animation: pulse 2s infinite;
45
- }
46
-
47
- @keyframes pulse {
48
- 0%, 100% { opacity: 1; }
49
- 50% { opacity: 0.5; }
50
- }
51
-
52
- h1 {
53
- font-size: 1.5rem;
54
- font-weight: 700;
55
- letter-spacing: -0.025em;
56
- }
57
-
58
- .subtitle {
59
- color: #94a3b8;
60
- font-size: 0.875rem;
61
- margin-left: 1.75rem;
62
- }
63
-
64
- .diagram-container {
65
- background: rgba(15, 23, 42, 0.5);
66
- border-radius: 1rem;
67
- border: 1px solid #1e293b;
68
- padding: 1.5rem;
69
- overflow-x: auto;
70
- }
71
-
72
- svg {
73
- width: 100%;
74
- min-width: 900px;
75
- display: block;
76
- }
77
-
78
- .cards {
79
- display: grid;
80
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
81
- gap: 1rem;
82
- margin-top: 2rem;
83
- }
84
-
85
- .card {
86
- background: rgba(15, 23, 42, 0.5);
87
- border-radius: 0.75rem;
88
- border: 1px solid #1e293b;
89
- padding: 1.25rem;
90
- }
91
-
92
- .card-header {
93
- display: flex;
94
- align-items: center;
95
- gap: 0.5rem;
96
- margin-bottom: 0.75rem;
97
- }
98
-
99
- .card-dot {
100
- width: 8px;
101
- height: 8px;
102
- border-radius: 50%;
103
- }
104
-
105
- .card-dot.cyan { background: #22d3ee; }
106
- .card-dot.emerald { background: #34d399; }
107
- .card-dot.violet { background: #a78bfa; }
108
- .card-dot.amber { background: #fbbf24; }
109
- .card-dot.rose { background: #fb7185; }
110
-
111
- .card h3 {
112
- font-size: 0.875rem;
113
- font-weight: 600;
114
- }
115
-
116
- .card ul {
117
- list-style: none;
118
- color: #94a3b8;
119
- font-size: 0.75rem;
120
- }
121
-
122
- .card li {
123
- margin-bottom: 0.375rem;
124
- }
125
-
126
- .footer {
127
- text-align: center;
128
- margin-top: 1.5rem;
129
- color: #475569;
130
- font-size: 0.75rem;
131
- }
132
- </style>
133
- </head>
134
- <body>
135
- <div class="container">
136
- <!-- Encabezado -->
137
- <div class="header">
138
- <div class="header-row">
139
- <div class="pulse-dot"></div>
140
- <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
141
- </div>
142
- <p class="subtitle">[Descripción del subtítulo]</p>
143
- </div>
144
-
145
- <!-- Diagrama principal -->
146
- <div class="diagram-container">
147
- <svg viewBox="0 0 1000 680">
148
- <!-- Definiciones -->
149
- <defs>
150
- <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
151
- <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
152
- </marker>
153
- <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
154
- <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
155
- </pattern>
156
- </defs>
157
-
158
- <!-- Grilla de fondo -->
159
- <rect width="100%" height="100%" fill="url(#grid)" />
160
-
161
- <!-- ===============================================================
162
- COMPONENTES — Copiar y personalizar estos patrones
163
- =============================================================== -->
164
-
165
- <!-- Componente externo/genérico -->
166
- <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
167
- <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
168
- <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
169
-
170
- <!-- Componente de seguridad -->
171
- <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
172
- <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
173
- <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
174
-
175
- <!-- Límite de región/cloud -->
176
- <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
177
- <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
178
-
179
- <!-- Servicio cloud -->
180
- <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
181
- <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
182
- <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
183
-
184
- <!-- Backend -->
185
- <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
186
- <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
187
- <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
188
-
189
- <!-- Base de datos -->
190
- <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
191
- <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
192
- <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
193
-
194
- <!-- Frontend -->
195
- <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
196
- <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
197
- <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
198
-
199
- <!-- ===============================================================
200
- FLECHAS
201
- =============================================================== -->
202
- <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
203
- <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
204
-
205
- <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
206
- <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
207
- <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
208
-
209
- <!-- ===============================================================
210
- LEYENDA
211
- =============================================================== -->
212
- <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
213
-
214
- <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
215
- <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
216
-
217
- <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
218
- <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
219
-
220
- <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
221
- <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
222
-
223
- <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
224
- <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
225
-
226
- <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
227
- <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
228
- </svg>
229
- </div>
230
-
231
- <!-- Tarjetas informativas -->
232
- <div class="cards">
233
- <div class="card">
234
- <div class="card-header">
235
- <div class="card-dot rose"></div>
236
- <h3>Seguridad</h3>
237
- </div>
238
- <ul>
239
- <li>- Autenticación OAuth 2.0</li>
240
- <li>- TLS en tránsito</li>
241
- <li>- Cifrado en reposo</li>
242
- </ul>
243
- </div>
244
-
245
- <div class="card">
246
- <div class="card-header">
247
- <div class="card-dot amber"></div>
248
- <h3>Infraestructura</h3>
249
- </div>
250
- <ul>
251
- <li>- CDN para activos estáticos</li>
252
- <li>- Auto-scaling horizontal</li>
253
- <li>- Monitoreo centralizado</li>
254
- </ul>
255
- </div>
256
-
257
- <div class="card">
258
- <div class="card-header">
259
- <div class="card-dot violet"></div>
260
- <h3>Datos</h3>
261
- </div>
262
- <ul>
263
- <li>- PostgreSQL principal</li>
264
- <li>- Backups automatizados</li>
265
- <li>- Réplica de lectura</li>
266
- </ul>
267
- </div>
268
- </div>
269
-
270
- <!-- Pie -->
271
- <p class="footer">
272
- [Nombre del proyecto] — Generado con swl-ses
273
- </p>
274
- </div>
275
- </body>
276
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'JetBrains Mono', monospace;
17
+ background: #020617;
18
+ min-height: 100vh;
19
+ padding: 2rem;
20
+ color: white;
21
+ }
22
+
23
+ .container {
24
+ max-width: 1200px;
25
+ margin: 0 auto;
26
+ }
27
+
28
+ .header {
29
+ margin-bottom: 2rem;
30
+ }
31
+
32
+ .header-row {
33
+ display: flex;
34
+ align-items: center;
35
+ gap: 1rem;
36
+ margin-bottom: 0.5rem;
37
+ }
38
+
39
+ .pulse-dot {
40
+ width: 12px;
41
+ height: 12px;
42
+ background: #22d3ee;
43
+ border-radius: 50%;
44
+ animation: pulse 2s infinite;
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0%, 100% { opacity: 1; }
49
+ 50% { opacity: 0.5; }
50
+ }
51
+
52
+ h1 {
53
+ font-size: 1.5rem;
54
+ font-weight: 700;
55
+ letter-spacing: -0.025em;
56
+ }
57
+
58
+ .subtitle {
59
+ color: #94a3b8;
60
+ font-size: 0.875rem;
61
+ margin-left: 1.75rem;
62
+ }
63
+
64
+ .diagram-container {
65
+ background: rgba(15, 23, 42, 0.5);
66
+ border-radius: 1rem;
67
+ border: 1px solid #1e293b;
68
+ padding: 1.5rem;
69
+ overflow-x: auto;
70
+ }
71
+
72
+ svg {
73
+ width: 100%;
74
+ min-width: 900px;
75
+ display: block;
76
+ }
77
+
78
+ .cards {
79
+ display: grid;
80
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
81
+ gap: 1rem;
82
+ margin-top: 2rem;
83
+ }
84
+
85
+ .card {
86
+ background: rgba(15, 23, 42, 0.5);
87
+ border-radius: 0.75rem;
88
+ border: 1px solid #1e293b;
89
+ padding: 1.25rem;
90
+ }
91
+
92
+ .card-header {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 0.5rem;
96
+ margin-bottom: 0.75rem;
97
+ }
98
+
99
+ .card-dot {
100
+ width: 8px;
101
+ height: 8px;
102
+ border-radius: 50%;
103
+ }
104
+
105
+ .card-dot.cyan { background: #22d3ee; }
106
+ .card-dot.emerald { background: #34d399; }
107
+ .card-dot.violet { background: #a78bfa; }
108
+ .card-dot.amber { background: #fbbf24; }
109
+ .card-dot.rose { background: #fb7185; }
110
+
111
+ .card h3 {
112
+ font-size: 0.875rem;
113
+ font-weight: 600;
114
+ }
115
+
116
+ .card ul {
117
+ list-style: none;
118
+ color: #94a3b8;
119
+ font-size: 0.75rem;
120
+ }
121
+
122
+ .card li {
123
+ margin-bottom: 0.375rem;
124
+ }
125
+
126
+ .footer {
127
+ text-align: center;
128
+ margin-top: 1.5rem;
129
+ color: #475569;
130
+ font-size: 0.75rem;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <div class="container">
136
+ <!-- Encabezado -->
137
+ <div class="header">
138
+ <div class="header-row">
139
+ <div class="pulse-dot"></div>
140
+ <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
141
+ </div>
142
+ <p class="subtitle">[Descripción del subtítulo]</p>
143
+ </div>
144
+
145
+ <!-- Diagrama principal -->
146
+ <div class="diagram-container">
147
+ <svg viewBox="0 0 1000 680">
148
+ <!-- Definiciones -->
149
+ <defs>
150
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
151
+ <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
152
+ </marker>
153
+ <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
154
+ <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
155
+ </pattern>
156
+ </defs>
157
+
158
+ <!-- Grilla de fondo -->
159
+ <rect width="100%" height="100%" fill="url(#grid)" />
160
+
161
+ <!-- ===============================================================
162
+ COMPONENTES — Copiar y personalizar estos patrones
163
+ =============================================================== -->
164
+
165
+ <!-- Componente externo/genérico -->
166
+ <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
167
+ <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
168
+ <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
169
+
170
+ <!-- Componente de seguridad -->
171
+ <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
172
+ <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
173
+ <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
174
+
175
+ <!-- Límite de región/cloud -->
176
+ <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
177
+ <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
178
+
179
+ <!-- Servicio cloud -->
180
+ <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
181
+ <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
182
+ <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
183
+
184
+ <!-- Backend -->
185
+ <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
186
+ <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
187
+ <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
188
+
189
+ <!-- Base de datos -->
190
+ <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
191
+ <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
192
+ <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
193
+
194
+ <!-- Frontend -->
195
+ <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
196
+ <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
197
+ <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
198
+
199
+ <!-- ===============================================================
200
+ FLECHAS
201
+ =============================================================== -->
202
+ <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
203
+ <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
204
+
205
+ <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
206
+ <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
207
+ <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
208
+
209
+ <!-- ===============================================================
210
+ LEYENDA
211
+ =============================================================== -->
212
+ <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
213
+
214
+ <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
215
+ <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
216
+
217
+ <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
218
+ <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
219
+
220
+ <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
221
+ <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
222
+
223
+ <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
224
+ <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
225
+
226
+ <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
227
+ <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
228
+ </svg>
229
+ </div>
230
+
231
+ <!-- Tarjetas informativas -->
232
+ <div class="cards">
233
+ <div class="card">
234
+ <div class="card-header">
235
+ <div class="card-dot rose"></div>
236
+ <h3>Seguridad</h3>
237
+ </div>
238
+ <ul>
239
+ <li>- Autenticación OAuth 2.0</li>
240
+ <li>- TLS en tránsito</li>
241
+ <li>- Cifrado en reposo</li>
242
+ </ul>
243
+ </div>
244
+
245
+ <div class="card">
246
+ <div class="card-header">
247
+ <div class="card-dot amber"></div>
248
+ <h3>Infraestructura</h3>
249
+ </div>
250
+ <ul>
251
+ <li>- CDN para activos estáticos</li>
252
+ <li>- Auto-scaling horizontal</li>
253
+ <li>- Monitoreo centralizado</li>
254
+ </ul>
255
+ </div>
256
+
257
+ <div class="card">
258
+ <div class="card-header">
259
+ <div class="card-dot violet"></div>
260
+ <h3>Datos</h3>
261
+ </div>
262
+ <ul>
263
+ <li>- PostgreSQL principal</li>
264
+ <li>- Backups automatizados</li>
265
+ <li>- Réplica de lectura</li>
266
+ </ul>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Pie -->
271
+ <p class="footer">
272
+ [Nombre del proyecto] — Generado con swl-ses
273
+ </p>
274
+ </div>
275
+ </body>
276
+ </html>