@semacode/cli 3.8.5 → 3.9.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 (21) hide show
  1. package/dist/agentContextPack.js +1 -0
  2. package/dist/drift.part01.d.ts +1 -1
  3. package/dist/drift.part14.js +8 -0
  4. package/dist/geracaoCore.d.ts +4 -0
  5. package/dist/geracaoCore.js +112 -29
  6. package/exemplos/painel_agro.sema +68 -0
  7. package/node_modules/@sema/gerador-css/dist/index.part02.js +462 -461
  8. package/node_modules/@sema/nucleo/dist/ast/tipos.d.ts +2 -1
  9. package/node_modules/@sema/nucleo/dist/ir/conversor.part03.js +17 -0
  10. package/node_modules/@sema/nucleo/dist/ir/modelos.d.ts +14 -0
  11. package/node_modules/@sema/nucleo/dist/lexer/tokens.js +2 -0
  12. package/node_modules/@sema/nucleo/dist/parser/parser.modulo.js +9 -0
  13. package/node_modules/@sema/nucleo/dist/parser/parser.part01.d.ts +1 -1
  14. package/node_modules/@sema/nucleo/dist/parser/parser.part02.js +2 -0
  15. package/node_modules/@sema/nucleo/dist/semantico/analisador.part08.d.ts +8 -0
  16. package/node_modules/@sema/nucleo/dist/semantico/analisador.part08.js +45 -1
  17. package/node_modules/@sema/padroes/dist/design.d.ts +54 -0
  18. package/node_modules/@sema/padroes/dist/design.js +131 -0
  19. package/node_modules/@sema/padroes/dist/index.d.ts +1 -0
  20. package/node_modules/@sema/padroes/dist/index.js +1 -0
  21. package/package.json +1 -1
package/node_modules/@sema/gerador-css/dist/index.part02.js CHANGED
@@ -1,470 +1,471 @@
1
- import { normalizarNomeModulo, } from "@sema/padroes";
1
+ import { normalizarNomeModulo, resolverDesignTokens, } from "@sema/padroes";
2
2
  import { gerarCabecalhoSemaCss, gerarEstilosEntity, gerarEstilosEnum, gerarEstilosTask } from "./index.part01.js";
3
3
  export function gerarCss(modulo) {
4
4
  const nomeBase = normalizarNomeModulo(modulo.nome).replace(/\./g, "_");
5
5
  const entidades = modulo.entities.map(gerarEstilosEntity).join("\n");
6
6
  const tasks = modulo.tasks.map(gerarEstilosTask).join("\n");
7
7
  const enums = modulo.enums.map(gerarEstilosEnum).join("\n");
8
- const css = `${gerarCabecalhoSemaCss(modulo)}
9
- /* ========================================
10
- Design System — Variaveis
11
- ======================================== */
12
- :root {
13
- /* Cores principais */
14
- --sema-cor-primaria: #6366f1;
15
- --sema-cor-primaria-hover: #4f46e5;
16
- --sema-cor-primaria-suave: #eef2ff;
17
- --sema-cor-sucesso: #10b981;
18
- --sema-cor-sucesso-fundo: #ecfdf5;
19
- --sema-cor-erro: #ef4444;
20
- --sema-cor-erro-texto: #991b1b;
21
- --sema-cor-erro-fundo: #fef2f2;
22
- --sema-cor-aviso: #f59e0b;
23
- --sema-cor-info: #3b82f6;
24
- /* Neutros */
25
- --sema-cor-fundo: #fafafa;
26
- --sema-cor-superficie: #ffffff;
27
- --sema-cor-texto: #18181b;
28
- --sema-cor-texto-secundario: #71717a;
29
- --sema-cor-borda: #e4e4e7;
30
- --sema-cor-borda-foco: #a5b4fc;
31
- --sema-cor-entidade: #8b5cf6;
32
- /* Tipografia */
33
- --sema-fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
34
- --sema-fonte-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
35
- --sema-tamanho-base: 0.9375rem;
36
- --sema-tamanho-titulo: 1.75rem;
37
- --sema-tamanho-subtitulo: 1.25rem;
38
- --sema-tamanho-pequeno: 0.8125rem;
39
- /* Espacamento */
40
- --sema-espacamento-xs: 0.25rem;
41
- --sema-espacamento-sm: 0.5rem;
42
- --sema-espacamento-md: 1rem;
43
- --sema-espacamento-lg: 1.5rem;
44
- --sema-espacamento-xl: 2rem;
45
- /* Bordas e sombras */
46
- --sema-raio: 0.5rem;
47
- --sema-raio-lg: 0.75rem;
48
- --sema-sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
49
- --sema-sombra-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
50
- /* Transicoes */
51
- --sema-transicao: 150ms ease;
52
- --sema-transicao-lenta: 300ms ease;
53
- }
54
- /* ========================================
55
- Dark Mode
56
- ======================================== */
57
- @media (prefers-color-scheme: dark) {
58
- :root {
59
- --sema-cor-primaria: #818cf8;
60
- --sema-cor-primaria-hover: #a5b4fc;
61
- --sema-cor-primaria-suave: #1e1b4b;
62
- --sema-cor-sucesso: #34d399;
63
- --sema-cor-sucesso-fundo: #064e3b;
64
- --sema-cor-erro: #f87171;
65
- --sema-cor-erro-texto: #fecaca;
66
- --sema-cor-erro-fundo: #450a0a;
67
- --sema-cor-fundo: #09090b;
68
- --sema-cor-superficie: #18181b;
69
- --sema-cor-texto: #fafafa;
70
- --sema-cor-texto-secundario: #a1a1aa;
71
- --sema-cor-borda: #3f3f46;
72
- --sema-cor-borda-foco: #6366f1;
73
- --sema-cor-entidade: #a78bfa;
74
- }
75
- }
76
- /* ========================================
77
- Base
78
- ======================================== */
79
- *, *::before, *::after {
80
- box-sizing: border-box;
81
- margin: 0;
82
- padding: 0;
83
- }
84
- body {
85
- font-family: var(--sema-fonte);
86
- font-size: var(--sema-tamanho-base);
87
- line-height: 1.6;
88
- color: var(--sema-cor-texto);
89
- background-color: var(--sema-cor-fundo);
90
- -webkit-font-smoothing: antialiased;
91
- }
92
- /* ========================================
93
- Layout
94
- ======================================== */
95
- .sema-header {
96
- background: var(--sema-cor-superficie);
97
- border-bottom: 1px solid var(--sema-cor-borda);
98
- padding: var(--sema-espacamento-xl) var(--sema-espacamento-lg);
99
- text-align: center;
100
- }
101
- .sema-header h1 {
102
- font-size: var(--sema-tamanho-titulo);
103
- font-weight: 700;
104
- color: var(--sema-cor-primaria);
105
- letter-spacing: -0.02em;
106
- }
107
- .sema-subtitulo {
108
- color: var(--sema-cor-texto-secundario);
109
- font-size: var(--sema-tamanho-pequeno);
110
- margin-top: var(--sema-espacamento-xs);
111
- }
112
- .sema-main {
113
- max-width: 64rem;
114
- margin: 0 auto;
115
- padding: var(--sema-espacamento-xl) var(--sema-espacamento-lg);
116
- display: flex;
117
- flex-direction: column;
118
- gap: var(--sema-espacamento-lg);
119
- }
120
- .sema-footer {
121
- text-align: center;
122
- padding: var(--sema-espacamento-lg);
123
- color: var(--sema-cor-texto-secundario);
124
- font-size: var(--sema-tamanho-pequeno);
125
- border-top: 1px solid var(--sema-cor-borda);
126
- }
127
- .sema-footer code {
128
- font-family: var(--sema-fonte-mono);
129
- background: var(--sema-cor-primaria-suave);
130
- padding: 0.125rem 0.375rem;
131
- border-radius: 0.25rem;
132
- font-size: 0.8125rem;
133
- }
134
- /* ========================================
135
- Entities
136
- ======================================== */
137
- .sema-entity,
138
- .sema-task,
139
- .sema-enum,
140
- .sema-state,
141
- .sema-flow,
142
- .sema-route {
143
- background: var(--sema-cor-superficie);
144
- border: 1px solid var(--sema-cor-borda);
145
- border-radius: var(--sema-raio-lg);
146
- padding: var(--sema-espacamento-lg);
147
- box-shadow: var(--sema-sombra);
148
- transition: box-shadow var(--sema-transicao);
149
- }
150
- .sema-entity:hover,
151
- .sema-task:hover,
152
- .sema-route:hover {
153
- box-shadow: var(--sema-sombra-lg);
154
- }
155
- .sema-entity h3,
156
- .sema-task h3,
157
- .sema-enum h3,
158
- .sema-state h3,
159
- .sema-flow h3,
160
- .sema-route h3 {
161
- font-size: var(--sema-tamanho-subtitulo);
162
- font-weight: 600;
163
- margin-bottom: var(--sema-espacamento-md);
164
- color: var(--sema-cor-texto);
165
- }
166
- /* ========================================
167
- Tabelas de Entity
168
- ======================================== */
169
- .sema-tabela {
170
- width: 100%;
171
- border-collapse: collapse;
172
- font-size: var(--sema-tamanho-pequeno);
173
- }
174
- .sema-tabela th {
175
- text-align: left;
176
- padding: var(--sema-espacamento-sm) var(--sema-espacamento-md);
177
- background: var(--sema-cor-primaria-suave);
178
- border-bottom: 2px solid var(--sema-cor-borda);
179
- font-weight: 600;
180
- white-space: nowrap;
181
- }
182
- .sema-tabela th small {
183
- color: var(--sema-cor-texto-secundario);
184
- font-weight: 400;
185
- margin-left: 0.25rem;
186
- }
187
- .sema-tabela td {
188
- padding: var(--sema-espacamento-sm) var(--sema-espacamento-md);
189
- border-bottom: 1px solid var(--sema-cor-borda);
190
- color: var(--sema-cor-texto-secundario);
191
- }
192
- /* ========================================
193
- Formularios de Task
194
- ======================================== */
195
- .sema-formulario fieldset {
196
- border: 1px solid var(--sema-cor-borda);
197
- border-radius: var(--sema-raio);
198
- padding: var(--sema-espacamento-md);
199
- margin-bottom: var(--sema-espacamento-md);
200
- }
201
- .sema-formulario legend {
202
- font-weight: 600;
203
- font-size: var(--sema-tamanho-pequeno);
204
- color: var(--sema-cor-texto-secundario);
205
- padding: 0 var(--sema-espacamento-xs);
206
- text-transform: uppercase;
207
- letter-spacing: 0.05em;
208
- }
209
- .sema-campo {
210
- margin-bottom: var(--sema-espacamento-md);
211
- }
212
- .sema-campo label {
213
- display: block;
214
- font-weight: 500;
215
- font-size: var(--sema-tamanho-pequeno);
216
- margin-bottom: var(--sema-espacamento-xs);
217
- color: var(--sema-cor-texto);
218
- }
219
- .sema-obrigatorio {
220
- color: var(--sema-cor-erro);
221
- }
222
- .sema-campo input[type="text"],
223
- .sema-campo input[type="number"],
224
- .sema-campo input[type="email"],
225
- .sema-campo input[type="url"],
226
- .sema-campo input[type="date"],
227
- .sema-campo input[type="datetime-local"],
228
- .sema-campo textarea {
229
- width: 100%;
230
- padding: 0.5rem 0.75rem;
231
- font-family: var(--sema-fonte);
232
- font-size: var(--sema-tamanho-base);
233
- color: var(--sema-cor-texto);
234
- background: var(--sema-cor-fundo);
235
- border: 1px solid var(--sema-cor-borda);
236
- border-radius: var(--sema-raio);
237
- outline: none;
238
- transition: border-color var(--sema-transicao), box-shadow var(--sema-transicao);
239
- }
240
- .sema-campo input:focus,
241
- .sema-campo textarea:focus {
242
- border-color: var(--sema-cor-borda-foco);
243
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
244
- }
245
- .sema-campo textarea {
246
- min-height: 5rem;
247
- resize: vertical;
248
- }
249
- .sema-campo-checkbox label {
250
- display: flex;
251
- align-items: center;
252
- gap: var(--sema-espacamento-sm);
253
- cursor: pointer;
254
- }
255
- .sema-campo-checkbox input[type="checkbox"] {
256
- width: 1.125rem;
257
- height: 1.125rem;
258
- accent-color: var(--sema-cor-primaria);
259
- }
260
- /* ========================================
261
- Botoes
262
- ======================================== */
263
- .sema-botao {
264
- display: inline-flex;
265
- align-items: center;
266
- justify-content: center;
267
- padding: 0.625rem 1.25rem;
268
- font-family: var(--sema-fonte);
269
- font-size: var(--sema-tamanho-base);
270
- font-weight: 600;
271
- color: #fff;
272
- background: var(--sema-cor-primaria);
273
- border: none;
274
- border-radius: var(--sema-raio);
275
- cursor: pointer;
276
- transition: background var(--sema-transicao), transform var(--sema-transicao);
277
- }
278
- .sema-botao:hover {
279
- background: var(--sema-cor-primaria-hover);
280
- transform: translateY(-1px);
281
- }
282
- .sema-botao:active {
283
- transform: translateY(0);
284
- }
285
- /* ========================================
286
- Erros
287
- ======================================== */
288
- .sema-erros {
289
- margin-top: var(--sema-espacamento-sm);
290
- }
291
- .sema-erro[hidden] {
292
- display: none;
293
- }
294
- /* ========================================
295
- Saida
296
- ======================================== */
297
- .sema-saida {
298
- margin-top: var(--sema-espacamento-md);
299
- padding: var(--sema-espacamento-md);
300
- background: var(--sema-cor-sucesso-fundo);
301
- border: 1px solid var(--sema-cor-sucesso);
302
- border-radius: var(--sema-raio);
303
- }
304
- .sema-saida[hidden] {
305
- display: none;
306
- }
307
- .sema-saida h4 {
308
- font-size: var(--sema-tamanho-pequeno);
309
- font-weight: 600;
310
- text-transform: uppercase;
311
- letter-spacing: 0.05em;
312
- color: var(--sema-cor-sucesso);
313
- margin-bottom: var(--sema-espacamento-sm);
314
- }
315
- .sema-campo-saida {
316
- padding: var(--sema-espacamento-xs) 0;
317
- font-size: var(--sema-tamanho-pequeno);
318
- }
319
- /* ========================================
320
- Selects (Enums)
321
- ======================================== */
322
- .sema-select {
323
- width: 100%;
324
- padding: 0.5rem 0.75rem;
325
- font-family: var(--sema-fonte);
326
- font-size: var(--sema-tamanho-base);
327
- color: var(--sema-cor-texto);
328
- background: var(--sema-cor-fundo);
329
- border: 1px solid var(--sema-cor-borda);
330
- border-radius: var(--sema-raio);
331
- outline: none;
332
- transition: border-color var(--sema-transicao);
333
- }
334
- .sema-select:focus {
335
- border-color: var(--sema-cor-borda-foco);
336
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
337
- }
338
- /* ========================================
339
- States
340
- ======================================== */
341
- .sema-state {
342
- border-left: 3px solid var(--sema-cor-aviso);
343
- }
344
- .sema-transicoes {
345
- list-style: none;
346
- padding: 0;
347
- }
348
- .sema-transicoes li {
349
- padding: var(--sema-espacamento-sm) 0;
350
- border-bottom: 1px solid var(--sema-cor-borda);
351
- font-size: var(--sema-tamanho-pequeno);
352
- }
353
- .sema-transicoes li:last-child {
354
- border-bottom: none;
355
- }
356
- .sema-estado-origem {
357
- font-weight: 600;
358
- color: var(--sema-cor-texto);
359
- }
360
- .sema-estado-destino {
361
- color: var(--sema-cor-primaria);
362
- font-weight: 600;
363
- }
364
- /* ========================================
365
- Flows
366
- ======================================== */
367
- .sema-flow {
368
- border-left: 3px solid var(--sema-cor-info);
369
- }
370
- .sema-etapas {
371
- padding-left: var(--sema-espacamento-lg);
372
- counter-reset: etapa;
373
- }
374
- .sema-etapas li {
375
- padding: var(--sema-espacamento-sm) 0;
376
- font-size: var(--sema-tamanho-pequeno);
377
- }
378
- .sema-etapa strong {
379
- color: var(--sema-cor-primaria);
380
- }
381
- /* ========================================
382
- Routes
383
- ======================================== */
384
- .sema-route {
385
- border-left: 3px solid var(--sema-cor-sucesso);
386
- }
387
- .sema-route-detalhe {
388
- display: flex;
389
- align-items: center;
390
- gap: var(--sema-espacamento-sm);
391
- flex-wrap: wrap;
392
- margin-bottom: var(--sema-espacamento-sm);
393
- }
394
- .sema-route-metodo {
395
- display: inline-block;
396
- padding: 0.125rem 0.5rem;
397
- font-family: var(--sema-fonte-mono);
398
- font-size: var(--sema-tamanho-pequeno);
399
- font-weight: 700;
400
- color: #fff;
401
- background: var(--sema-cor-sucesso);
402
- border-radius: 0.25rem;
403
- text-transform: uppercase;
404
- }
405
- .sema-route-caminho {
406
- font-family: var(--sema-fonte-mono);
407
- font-size: var(--sema-tamanho-pequeno);
408
- color: var(--sema-cor-texto);
409
- }
410
- .sema-route-task {
411
- font-size: var(--sema-tamanho-pequeno);
412
- color: var(--sema-cor-texto-secundario);
413
- }
414
- .sema-route-io {
415
- margin-top: var(--sema-espacamento-sm);
416
- font-size: var(--sema-tamanho-pequeno);
417
- }
418
- .sema-route-io summary {
419
- cursor: pointer;
420
- font-weight: 500;
421
- color: var(--sema-cor-texto-secundario);
422
- }
423
- .sema-route-io ul {
424
- padding-left: var(--sema-espacamento-lg);
425
- margin-top: var(--sema-espacamento-xs);
426
- }
427
- /* ========================================
428
- Animacoes
429
- ======================================== */
430
- @keyframes sema-surgir {
431
- from {
432
- opacity: 0;
433
- transform: translateY(-4px);
434
- }
435
- to {
436
- opacity: 1;
437
- transform: translateY(0);
438
- }
439
- }
440
- /* ========================================
441
- Responsividade
442
- ======================================== */
443
- @media (max-width: 640px) {
444
- .sema-main {
445
- padding: var(--sema-espacamento-md);
446
- }
447
- .sema-header {
448
- padding: var(--sema-espacamento-lg) var(--sema-espacamento-md);
449
- }
450
- .sema-header h1 {
451
- font-size: 1.375rem;
452
- }
453
- .sema-tabela {
454
- display: block;
455
- overflow-x: auto;
456
- }
457
- .sema-route-detalhe {
458
- flex-direction: column;
459
- align-items: flex-start;
460
- }
461
- }
462
- /* ========================================
463
- Estilos especificos do modulo
464
- ======================================== */
465
- ${entidades}
466
- ${tasks}
467
- ${enums}
8
+ const design = resolverDesignTokens(modulo.design);
9
+ const css = `${gerarCabecalhoSemaCss(modulo)}
10
+ /* ========================================
11
+ Design System — Variaveis
12
+ ======================================== */
13
+ :root {
14
+ /* Cores principais */
15
+ --sema-cor-primaria: ${design.cores.primaria};
16
+ --sema-cor-primaria-hover: ${design.cores.primariaHover};
17
+ --sema-cor-primaria-suave: ${design.cores.primariaSuave};
18
+ --sema-cor-sucesso: #10b981;
19
+ --sema-cor-sucesso-fundo: #ecfdf5;
20
+ --sema-cor-erro: #ef4444;
21
+ --sema-cor-erro-texto: #991b1b;
22
+ --sema-cor-erro-fundo: #fef2f2;
23
+ --sema-cor-aviso: #f59e0b;
24
+ --sema-cor-info: #3b82f6;
25
+ /* Neutros */
26
+ --sema-cor-fundo: ${design.cores.fundo};
27
+ --sema-cor-superficie: ${design.cores.superficie};
28
+ --sema-cor-texto: ${design.cores.texto};
29
+ --sema-cor-texto-secundario: ${design.cores.textoSecundario};
30
+ --sema-cor-borda: ${design.cores.borda};
31
+ --sema-cor-borda-foco: ${design.cores.bordaFoco};
32
+ --sema-cor-entidade: #8b5cf6;
33
+ /* Tipografia */
34
+ --sema-fonte: ${design.tipografia.fonte};
35
+ --sema-fonte-mono: ${design.tipografia.fonteMono};
36
+ --sema-tamanho-base: ${design.escala.base};
37
+ --sema-tamanho-titulo: ${design.escala.titulo};
38
+ --sema-tamanho-subtitulo: ${design.escala.subtitulo};
39
+ --sema-tamanho-pequeno: ${design.escala.pequeno};
40
+ /* Espacamento */
41
+ --sema-espacamento-xs: 0.25rem;
42
+ --sema-espacamento-sm: 0.5rem;
43
+ --sema-espacamento-md: 1rem;
44
+ --sema-espacamento-lg: 1.5rem;
45
+ --sema-espacamento-xl: 2rem;
46
+ /* Bordas e sombras */
47
+ --sema-raio: ${design.forma.raio};
48
+ --sema-raio-lg: ${design.forma.raioLg};
49
+ --sema-sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
50
+ --sema-sombra-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
51
+ /* Transicoes */
52
+ --sema-transicao: 150ms ease;
53
+ --sema-transicao-lenta: 300ms ease;
54
+ }
55
+ /* ========================================
56
+ Dark Mode
57
+ ======================================== */
58
+ @media (prefers-color-scheme: dark) {
59
+ :root {
60
+ --sema-cor-primaria: #818cf8;
61
+ --sema-cor-primaria-hover: #a5b4fc;
62
+ --sema-cor-primaria-suave: #1e1b4b;
63
+ --sema-cor-sucesso: #34d399;
64
+ --sema-cor-sucesso-fundo: #064e3b;
65
+ --sema-cor-erro: #f87171;
66
+ --sema-cor-erro-texto: #fecaca;
67
+ --sema-cor-erro-fundo: #450a0a;
68
+ --sema-cor-fundo: #09090b;
69
+ --sema-cor-superficie: #18181b;
70
+ --sema-cor-texto: #fafafa;
71
+ --sema-cor-texto-secundario: #a1a1aa;
72
+ --sema-cor-borda: #3f3f46;
73
+ --sema-cor-borda-foco: #6366f1;
74
+ --sema-cor-entidade: #a78bfa;
75
+ }
76
+ }
77
+ /* ========================================
78
+ Base
79
+ ======================================== */
80
+ *, *::before, *::after {
81
+ box-sizing: border-box;
82
+ margin: 0;
83
+ padding: 0;
84
+ }
85
+ body {
86
+ font-family: var(--sema-fonte);
87
+ font-size: var(--sema-tamanho-base);
88
+ line-height: 1.6;
89
+ color: var(--sema-cor-texto);
90
+ background-color: var(--sema-cor-fundo);
91
+ -webkit-font-smoothing: antialiased;
92
+ }
93
+ /* ========================================
94
+ Layout
95
+ ======================================== */
96
+ .sema-header {
97
+ background: var(--sema-cor-superficie);
98
+ border-bottom: 1px solid var(--sema-cor-borda);
99
+ padding: var(--sema-espacamento-xl) var(--sema-espacamento-lg);
100
+ text-align: center;
101
+ }
102
+ .sema-header h1 {
103
+ font-size: var(--sema-tamanho-titulo);
104
+ font-weight: 700;
105
+ color: var(--sema-cor-primaria);
106
+ letter-spacing: -0.02em;
107
+ }
108
+ .sema-subtitulo {
109
+ color: var(--sema-cor-texto-secundario);
110
+ font-size: var(--sema-tamanho-pequeno);
111
+ margin-top: var(--sema-espacamento-xs);
112
+ }
113
+ .sema-main {
114
+ max-width: 64rem;
115
+ margin: 0 auto;
116
+ padding: var(--sema-espacamento-xl) var(--sema-espacamento-lg);
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: var(--sema-espacamento-lg);
120
+ }
121
+ .sema-footer {
122
+ text-align: center;
123
+ padding: var(--sema-espacamento-lg);
124
+ color: var(--sema-cor-texto-secundario);
125
+ font-size: var(--sema-tamanho-pequeno);
126
+ border-top: 1px solid var(--sema-cor-borda);
127
+ }
128
+ .sema-footer code {
129
+ font-family: var(--sema-fonte-mono);
130
+ background: var(--sema-cor-primaria-suave);
131
+ padding: 0.125rem 0.375rem;
132
+ border-radius: 0.25rem;
133
+ font-size: 0.8125rem;
134
+ }
135
+ /* ========================================
136
+ Entities
137
+ ======================================== */
138
+ .sema-entity,
139
+ .sema-task,
140
+ .sema-enum,
141
+ .sema-state,
142
+ .sema-flow,
143
+ .sema-route {
144
+ background: var(--sema-cor-superficie);
145
+ border: 1px solid var(--sema-cor-borda);
146
+ border-radius: var(--sema-raio-lg);
147
+ padding: var(--sema-espacamento-lg);
148
+ box-shadow: var(--sema-sombra);
149
+ transition: box-shadow var(--sema-transicao);
150
+ }
151
+ .sema-entity:hover,
152
+ .sema-task:hover,
153
+ .sema-route:hover {
154
+ box-shadow: var(--sema-sombra-lg);
155
+ }
156
+ .sema-entity h3,
157
+ .sema-task h3,
158
+ .sema-enum h3,
159
+ .sema-state h3,
160
+ .sema-flow h3,
161
+ .sema-route h3 {
162
+ font-size: var(--sema-tamanho-subtitulo);
163
+ font-weight: 600;
164
+ margin-bottom: var(--sema-espacamento-md);
165
+ color: var(--sema-cor-texto);
166
+ }
167
+ /* ========================================
168
+ Tabelas de Entity
169
+ ======================================== */
170
+ .sema-tabela {
171
+ width: 100%;
172
+ border-collapse: collapse;
173
+ font-size: var(--sema-tamanho-pequeno);
174
+ }
175
+ .sema-tabela th {
176
+ text-align: left;
177
+ padding: var(--sema-espacamento-sm) var(--sema-espacamento-md);
178
+ background: var(--sema-cor-primaria-suave);
179
+ border-bottom: 2px solid var(--sema-cor-borda);
180
+ font-weight: 600;
181
+ white-space: nowrap;
182
+ }
183
+ .sema-tabela th small {
184
+ color: var(--sema-cor-texto-secundario);
185
+ font-weight: 400;
186
+ margin-left: 0.25rem;
187
+ }
188
+ .sema-tabela td {
189
+ padding: var(--sema-espacamento-sm) var(--sema-espacamento-md);
190
+ border-bottom: 1px solid var(--sema-cor-borda);
191
+ color: var(--sema-cor-texto-secundario);
192
+ }
193
+ /* ========================================
194
+ Formularios de Task
195
+ ======================================== */
196
+ .sema-formulario fieldset {
197
+ border: 1px solid var(--sema-cor-borda);
198
+ border-radius: var(--sema-raio);
199
+ padding: var(--sema-espacamento-md);
200
+ margin-bottom: var(--sema-espacamento-md);
201
+ }
202
+ .sema-formulario legend {
203
+ font-weight: 600;
204
+ font-size: var(--sema-tamanho-pequeno);
205
+ color: var(--sema-cor-texto-secundario);
206
+ padding: 0 var(--sema-espacamento-xs);
207
+ text-transform: uppercase;
208
+ letter-spacing: 0.05em;
209
+ }
210
+ .sema-campo {
211
+ margin-bottom: var(--sema-espacamento-md);
212
+ }
213
+ .sema-campo label {
214
+ display: block;
215
+ font-weight: 500;
216
+ font-size: var(--sema-tamanho-pequeno);
217
+ margin-bottom: var(--sema-espacamento-xs);
218
+ color: var(--sema-cor-texto);
219
+ }
220
+ .sema-obrigatorio {
221
+ color: var(--sema-cor-erro);
222
+ }
223
+ .sema-campo input[type="text"],
224
+ .sema-campo input[type="number"],
225
+ .sema-campo input[type="email"],
226
+ .sema-campo input[type="url"],
227
+ .sema-campo input[type="date"],
228
+ .sema-campo input[type="datetime-local"],
229
+ .sema-campo textarea {
230
+ width: 100%;
231
+ padding: 0.5rem 0.75rem;
232
+ font-family: var(--sema-fonte);
233
+ font-size: var(--sema-tamanho-base);
234
+ color: var(--sema-cor-texto);
235
+ background: var(--sema-cor-fundo);
236
+ border: 1px solid var(--sema-cor-borda);
237
+ border-radius: var(--sema-raio);
238
+ outline: none;
239
+ transition: border-color var(--sema-transicao), box-shadow var(--sema-transicao);
240
+ }
241
+ .sema-campo input:focus,
242
+ .sema-campo textarea:focus {
243
+ border-color: var(--sema-cor-borda-foco);
244
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
245
+ }
246
+ .sema-campo textarea {
247
+ min-height: 5rem;
248
+ resize: vertical;
249
+ }
250
+ .sema-campo-checkbox label {
251
+ display: flex;
252
+ align-items: center;
253
+ gap: var(--sema-espacamento-sm);
254
+ cursor: pointer;
255
+ }
256
+ .sema-campo-checkbox input[type="checkbox"] {
257
+ width: 1.125rem;
258
+ height: 1.125rem;
259
+ accent-color: var(--sema-cor-primaria);
260
+ }
261
+ /* ========================================
262
+ Botoes
263
+ ======================================== */
264
+ .sema-botao {
265
+ display: inline-flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ padding: 0.625rem 1.25rem;
269
+ font-family: var(--sema-fonte);
270
+ font-size: var(--sema-tamanho-base);
271
+ font-weight: 600;
272
+ color: #fff;
273
+ background: var(--sema-cor-primaria);
274
+ border: none;
275
+ border-radius: var(--sema-raio);
276
+ cursor: pointer;
277
+ transition: background var(--sema-transicao), transform var(--sema-transicao);
278
+ }
279
+ .sema-botao:hover {
280
+ background: var(--sema-cor-primaria-hover);
281
+ transform: translateY(-1px);
282
+ }
283
+ .sema-botao:active {
284
+ transform: translateY(0);
285
+ }
286
+ /* ========================================
287
+ Erros
288
+ ======================================== */
289
+ .sema-erros {
290
+ margin-top: var(--sema-espacamento-sm);
291
+ }
292
+ .sema-erro[hidden] {
293
+ display: none;
294
+ }
295
+ /* ========================================
296
+ Saida
297
+ ======================================== */
298
+ .sema-saida {
299
+ margin-top: var(--sema-espacamento-md);
300
+ padding: var(--sema-espacamento-md);
301
+ background: var(--sema-cor-sucesso-fundo);
302
+ border: 1px solid var(--sema-cor-sucesso);
303
+ border-radius: var(--sema-raio);
304
+ }
305
+ .sema-saida[hidden] {
306
+ display: none;
307
+ }
308
+ .sema-saida h4 {
309
+ font-size: var(--sema-tamanho-pequeno);
310
+ font-weight: 600;
311
+ text-transform: uppercase;
312
+ letter-spacing: 0.05em;
313
+ color: var(--sema-cor-sucesso);
314
+ margin-bottom: var(--sema-espacamento-sm);
315
+ }
316
+ .sema-campo-saida {
317
+ padding: var(--sema-espacamento-xs) 0;
318
+ font-size: var(--sema-tamanho-pequeno);
319
+ }
320
+ /* ========================================
321
+ Selects (Enums)
322
+ ======================================== */
323
+ .sema-select {
324
+ width: 100%;
325
+ padding: 0.5rem 0.75rem;
326
+ font-family: var(--sema-fonte);
327
+ font-size: var(--sema-tamanho-base);
328
+ color: var(--sema-cor-texto);
329
+ background: var(--sema-cor-fundo);
330
+ border: 1px solid var(--sema-cor-borda);
331
+ border-radius: var(--sema-raio);
332
+ outline: none;
333
+ transition: border-color var(--sema-transicao);
334
+ }
335
+ .sema-select:focus {
336
+ border-color: var(--sema-cor-borda-foco);
337
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
338
+ }
339
+ /* ========================================
340
+ States
341
+ ======================================== */
342
+ .sema-state {
343
+ border-left: 3px solid var(--sema-cor-aviso);
344
+ }
345
+ .sema-transicoes {
346
+ list-style: none;
347
+ padding: 0;
348
+ }
349
+ .sema-transicoes li {
350
+ padding: var(--sema-espacamento-sm) 0;
351
+ border-bottom: 1px solid var(--sema-cor-borda);
352
+ font-size: var(--sema-tamanho-pequeno);
353
+ }
354
+ .sema-transicoes li:last-child {
355
+ border-bottom: none;
356
+ }
357
+ .sema-estado-origem {
358
+ font-weight: 600;
359
+ color: var(--sema-cor-texto);
360
+ }
361
+ .sema-estado-destino {
362
+ color: var(--sema-cor-primaria);
363
+ font-weight: 600;
364
+ }
365
+ /* ========================================
366
+ Flows
367
+ ======================================== */
368
+ .sema-flow {
369
+ border-left: 3px solid var(--sema-cor-info);
370
+ }
371
+ .sema-etapas {
372
+ padding-left: var(--sema-espacamento-lg);
373
+ counter-reset: etapa;
374
+ }
375
+ .sema-etapas li {
376
+ padding: var(--sema-espacamento-sm) 0;
377
+ font-size: var(--sema-tamanho-pequeno);
378
+ }
379
+ .sema-etapa strong {
380
+ color: var(--sema-cor-primaria);
381
+ }
382
+ /* ========================================
383
+ Routes
384
+ ======================================== */
385
+ .sema-route {
386
+ border-left: 3px solid var(--sema-cor-sucesso);
387
+ }
388
+ .sema-route-detalhe {
389
+ display: flex;
390
+ align-items: center;
391
+ gap: var(--sema-espacamento-sm);
392
+ flex-wrap: wrap;
393
+ margin-bottom: var(--sema-espacamento-sm);
394
+ }
395
+ .sema-route-metodo {
396
+ display: inline-block;
397
+ padding: 0.125rem 0.5rem;
398
+ font-family: var(--sema-fonte-mono);
399
+ font-size: var(--sema-tamanho-pequeno);
400
+ font-weight: 700;
401
+ color: #fff;
402
+ background: var(--sema-cor-sucesso);
403
+ border-radius: 0.25rem;
404
+ text-transform: uppercase;
405
+ }
406
+ .sema-route-caminho {
407
+ font-family: var(--sema-fonte-mono);
408
+ font-size: var(--sema-tamanho-pequeno);
409
+ color: var(--sema-cor-texto);
410
+ }
411
+ .sema-route-task {
412
+ font-size: var(--sema-tamanho-pequeno);
413
+ color: var(--sema-cor-texto-secundario);
414
+ }
415
+ .sema-route-io {
416
+ margin-top: var(--sema-espacamento-sm);
417
+ font-size: var(--sema-tamanho-pequeno);
418
+ }
419
+ .sema-route-io summary {
420
+ cursor: pointer;
421
+ font-weight: 500;
422
+ color: var(--sema-cor-texto-secundario);
423
+ }
424
+ .sema-route-io ul {
425
+ padding-left: var(--sema-espacamento-lg);
426
+ margin-top: var(--sema-espacamento-xs);
427
+ }
428
+ /* ========================================
429
+ Animacoes
430
+ ======================================== */
431
+ @keyframes sema-surgir {
432
+ from {
433
+ opacity: 0;
434
+ transform: translateY(-4px);
435
+ }
436
+ to {
437
+ opacity: 1;
438
+ transform: translateY(0);
439
+ }
440
+ }
441
+ /* ========================================
442
+ Responsividade
443
+ ======================================== */
444
+ @media (max-width: 640px) {
445
+ .sema-main {
446
+ padding: var(--sema-espacamento-md);
447
+ }
448
+ .sema-header {
449
+ padding: var(--sema-espacamento-lg) var(--sema-espacamento-md);
450
+ }
451
+ .sema-header h1 {
452
+ font-size: 1.375rem;
453
+ }
454
+ .sema-tabela {
455
+ display: block;
456
+ overflow-x: auto;
457
+ }
458
+ .sema-route-detalhe {
459
+ flex-direction: column;
460
+ align-items: flex-start;
461
+ }
462
+ }
463
+ /* ========================================
464
+ Estilos especificos do modulo
465
+ ======================================== */
466
+ ${entidades}
467
+ ${tasks}
468
+ ${enums}
468
469
  `;
469
470
  return [{ caminhoRelativo: `${nomeBase}.css`, conteudo: css }];
470
471
  }