@softize/opus 22.1.0 → 23.0.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.
- package/CHANGELOG.md +74 -1
- package/bin/cli.mjs +6 -5
- package/bin/lib/check.mjs +23 -8
- package/bin/lib/copy.mjs +1 -1
- package/bin/lib/gen-manifest.mjs +2 -0
- package/bin/lib/gen-runner.mjs +7 -0
- package/bin/lib/gen-stubs.mjs +3 -1
- package/docs/adr/0005-structural-surfaces-share-an-explicit-anatomy.md +1 -1
- package/docs/adr/0032-tab-baseline-respects-the-container-inset.md +16 -12
- package/docs/adr/0034-tabs-can-own-a-frame-without-owning-a-surface.md +8 -6
- package/docs/adr/0036-tabs-declares-trigger-distribution.md +11 -8
- package/docs/adr/0037-design-data-lives-outside-the-contract.md +1 -1
- package/docs/adr/0038-content-level-defines-primary-presentation.md +62 -0
- package/docs/adr/0039-filter-presentation-is-independent-from-filter-type.md +62 -0
- package/docs/adr/0040-tabs-use-a-single-navigation-presentation.md +60 -0
- package/docs/adr/0041-actions-declare-effect-and-personal-data.md +139 -0
- package/docs/code-style.md +1 -1
- package/docs/protocol.md +15 -2
- package/package.json +1 -1
- package/registry/skills/build-opus-ui/references/ui-patterns.md +1 -1
- package/registry/skills/create-opus-action/SKILL.md +7 -2
- package/registry/skills/create-opus-action/references/contract-and-binding.md +10 -5
- package/registry/skills/create-opus-action/references/evaluations.md +3 -0
- package/registry/skills/create-opus-action/scripts/scaffold.mjs +6 -0
- package/registry/templates/app/src/domains/tasks/actions/list.ts +2 -0
- package/src/core/action-nature.ts +40 -0
- package/src/core/audit.ts +12 -4
- package/src/core/contracts.ts +1 -1
- package/src/core/index.ts +2 -0
- package/src/core/runtime.ts +57 -35
- package/src/core/types.ts +45 -23
- package/src/design/index.ts +14 -3
- package/src/mcp/index.ts +6 -0
- package/src/testing/index.ts +6 -26
- package/src/ui/components/patterns/content-header.tsx +5 -9
- package/src/ui/components/patterns/list.tsx +55 -1
- package/src/ui/components/patterns/presentation.tsx +1 -1
- package/src/ui/components/primitives/icon-picker.tsx +6 -0
- package/src/ui/components/primitives/tabs.tsx +55 -87
- package/src/ui/components/primitives/toggle.tsx +1 -1
- package/src/ui/docs/content/action-list.md +13 -4
- package/src/ui/docs/content/actions.md +36 -8
- package/src/ui/docs/content/content.md +5 -6
- package/src/ui/docs/content/mcp.md +6 -0
- package/src/ui/docs/content/semantic-context.md +0 -1
- package/src/ui/docs/content/tabs.md +68 -69
- package/src/ui/docs/content/testing.md +2 -3
- package/src/ui/docs/content/toggle.md +15 -10
- package/src/ui/drivers/react.tsx +4 -3
- package/src/ui/meta.ts +2 -2
- package/src/ui/react.tsx +2 -3
- package/src/vite/design.ts +23 -21
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,79 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
|
|
|
7
7
|
`opus copy --check` · `base copy check` · `manifest:check`) — eles apontam o que a
|
|
8
8
|
mudança cobra do seu código.
|
|
9
9
|
|
|
10
|
+
## 23.0.0 — 2026-09-29
|
|
11
|
+
|
|
12
|
+
Esta major conclui a separação entre contrato e dados de design, simplifica a hierarquia de
|
|
13
|
+
`Content` e dá a Tabs uma anatomia pública única para navegação. A seção **Breaking** reúne as
|
|
14
|
+
migrações obrigatórias.
|
|
15
|
+
|
|
16
|
+
### Breaking
|
|
17
|
+
|
|
18
|
+
`mockHandler` foi removido de `ActionBase`, contratos, actions de lista, runtime e `runAction`,
|
|
19
|
+
concluindo a ADR 0037. O core não lê mais `OPUS_MODE`: o plugin `opusDesign()` liga cenários ou
|
|
20
|
+
respostas geradas como handlers antes de registrar as actions no runtime. Migração: remova cada
|
|
21
|
+
`mockHandler`; quando a resposta específica importar para o design, transforme-a em cenário com
|
|
22
|
+
`defineDesignScenario`. Testes devem passar a action produzida por `bindAction` ao `runAction`.
|
|
23
|
+
|
|
24
|
+
Filtros `select` de escolha única aceitam `presentation: "toggle"` para manter opções curtas e
|
|
25
|
+
mutuamente exclusivas visíveis em um grupo conectado. A apresentação padrão continua sendo
|
|
26
|
+
`Select`; estado, URL, defaults e input da action não mudam. Opções vindas de dicionário também
|
|
27
|
+
apresentam o ícone declarado na entrada, sempre acompanhado pelo rótulo.
|
|
28
|
+
|
|
29
|
+
`TabsList` passa a usar somente a linha de navegação e deixa de aceitar `variant`. Migração: remova
|
|
30
|
+
`variant="line"`; usos da antiga superfície preenchida devem representar escolha de valor com
|
|
31
|
+
`ToggleGroup`, usando `variant="outline"` quando precisarem de borda.
|
|
32
|
+
|
|
33
|
+
A anatomia pública de Tabs passa a nomear estrutura, não o mecanismo da primitiva:
|
|
34
|
+
`TabsTrigger` vira `TabsListItem` e `TabsContent` vira `TabsPanel`. A mudança não mantém aliases;
|
|
35
|
+
consumidores devem atualizar imports e JSX no mesmo upgrade.
|
|
36
|
+
|
|
37
|
+
`Content` deixa de aceitar `variant="page" | "section"`. `level={1}` identifica o conteúdo
|
|
38
|
+
principal, aplica automaticamente a escala de `PageHeader` e usa o mesmo intervalo de `1.5rem`
|
|
39
|
+
entre header e body; níveis de 2 a 6 preservam a apresentação compacta de seção. Migração: remova
|
|
40
|
+
`variant="page"` e mantenha `level={1}`. Não existe substituição para `variant="section"`, que era
|
|
41
|
+
o comportamento dos níveis internos.
|
|
42
|
+
|
|
43
|
+
### Filtros e controles
|
|
44
|
+
|
|
45
|
+
`Toggle` e `ToggleGroupItem` em `variant="outline"` preservam a borda no estado ativo e usam um
|
|
46
|
+
fundo sutil distinto dela, inclusive no tema escuro.
|
|
47
|
+
|
|
48
|
+
## 22.2.0 — 2026-09-29
|
|
49
|
+
|
|
50
|
+
As actions passam a declarar o que fazem com os dados (ADR 0041). Dois campos novos no contrato,
|
|
51
|
+
ambos opcionais nesta versão:
|
|
52
|
+
|
|
53
|
+
- **`effect: 'read' | 'write'`** diz se a action só lê ou altera estado. `list` e `view` já são
|
|
54
|
+
leitura, porque são servidas por `GET`, e não declaram; declarar `effect: 'write'` nelas é recusado
|
|
55
|
+
ao registrar a action (`runtime.invalid_action_effect`) e apontado pelo `opus check`. `simple` e
|
|
56
|
+
`form` declaram.
|
|
57
|
+
- **`personalData: boolean`** diz se a resposta contém dados que identificam pessoas.
|
|
58
|
+
|
|
59
|
+
Com os dois declarados, o runtime:
|
|
60
|
+
|
|
61
|
+
- marca no `AuditRecord` toda execução bem-sucedida de action com `personalData: true`
|
|
62
|
+
(`personalData: { records }`, com a quantidade devolvida) e registra `effect`, qualquer que seja o
|
|
63
|
+
consumidor. Com `audit: false`, a exposição ainda gera um registro mínimo, sem entrada nem saída
|
|
64
|
+
(`meta.exposureOnly`). Execução com erro, enfileiramento em segundo plano e resposta simulada do
|
|
65
|
+
modo design não são marcados;
|
|
66
|
+
- acrescenta `opus.action.effect` e `opus.action.personal_data` aos atributos do span;
|
|
67
|
+
- projeta `effect` e `personalData` no manifest;
|
|
68
|
+
- publica nas ferramentas de IA (`runtime.aiTools()`) e no `ListTools` do MCP as anotações
|
|
69
|
+
`readOnlyHint` e `destructiveHint` (numa escrita, sempre explícito, porque o MCP trata a ausência
|
|
70
|
+
como destrutiva), e em `_meta` os campos `com.softize.opus/effect` e
|
|
71
|
+
`com.softize.opus/personal-data`.
|
|
72
|
+
|
|
73
|
+
O `opus check` conta, numa linha de aviso que não reprova, quantas actions `simple` ou `form` não
|
|
74
|
+
declaram `effect` e quantas actions não declaram `personalData`.
|
|
75
|
+
|
|
76
|
+
**O que fazer:** rode `opus gen` depois do bump. O manifest passa a ter `effect` e `personalData` em
|
|
77
|
+
toda action (`null` quando não declarado), e sem regenerar o `manifest:check` falha mesmo sem mudança
|
|
78
|
+
de código. O resto é gradual: declare `effect` nas actions `simple` e `form` e `personalData` em
|
|
79
|
+
todas; uma major futura passará a exigir as duas declarações. Um sink de audit que descarta leituras
|
|
80
|
+
(`actionKind` `list` ou `view`) deve preservar as que trazem `personalData`, se a aplicação precisar
|
|
81
|
+
registrar a exposição.
|
|
82
|
+
|
|
10
83
|
## 22.1.0 — 2026-09-28
|
|
11
84
|
|
|
12
85
|
Os dados do modo design saem do contrato (ADR 0037). No modo design, toda action passa a responder
|
|
@@ -346,7 +419,7 @@ página (ADR 0024). A `Presentation` de lista em `layout="fill"` passa a entrega
|
|
|
346
419
|
lista ocupa a altura da página e só os resultados rolam.
|
|
347
420
|
|
|
348
421
|
Quem encadeava `flex min-h-0 flex-1 flex-col` à mão pode remover as classes; mantidas, continuam
|
|
349
|
-
funcionando. Com um contêiner próprio entre `ContentBody` e a lista, como um `
|
|
422
|
+
funcionando. Com um contêiner próprio entre `ContentBody` e a lista, como um `TabsPanel`, a lista
|
|
350
423
|
continua em `flow`: declare `layout="fill"` nela e dê ao contêiner `flex min-h-0 flex-1 flex-col`.
|
|
351
424
|
|
|
352
425
|
### Superfícies e patterns
|
package/bin/cli.mjs
CHANGED
|
@@ -40,13 +40,14 @@ async function cmdCheck(dir) {
|
|
|
40
40
|
for (const error of materialization.errors) log('error', `✗ opus check: ${error}`)
|
|
41
41
|
process.exit(1)
|
|
42
42
|
}
|
|
43
|
-
const { files, actions, contracts,
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
const { files, actions, contracts, missingEffect, missingPersonalData, findings, hasMarker } =
|
|
44
|
+
await scanDir(root)
|
|
45
|
+
|
|
46
|
+
if (missingEffect > 0 || missingPersonalData > 0) {
|
|
46
47
|
log(
|
|
47
48
|
'warn',
|
|
48
|
-
`⚠ opus check: ${
|
|
49
|
-
'
|
|
49
|
+
`⚠ opus check: ${missingEffect} action(s) simple/form sem \`effect\` e ${missingPersonalData} sem \`personalData\`. ` +
|
|
50
|
+
'Declare se a action lê ou escreve e se devolve dado pessoal; uma major futura passará a exigir as duas declarações (ADR 0041).',
|
|
50
51
|
)
|
|
51
52
|
}
|
|
52
53
|
|
package/bin/lib/check.mjs
CHANGED
|
@@ -51,12 +51,13 @@ const FIELD_GROUP = {
|
|
|
51
51
|
errors: 1,
|
|
52
52
|
input: 2,
|
|
53
53
|
output: 2,
|
|
54
|
+
effect: 2,
|
|
55
|
+
personalData: 2,
|
|
54
56
|
public: 3,
|
|
55
57
|
requires: 3,
|
|
56
58
|
authorize: 3,
|
|
57
59
|
loads: 3,
|
|
58
60
|
handler: 4,
|
|
59
|
-
mockHandler: 4,
|
|
60
61
|
audit: 5,
|
|
61
62
|
confirm: 5,
|
|
62
63
|
invalidates: 5,
|
|
@@ -515,6 +516,7 @@ export function parseActions(fileName, sourceText) {
|
|
|
515
516
|
form: callee,
|
|
516
517
|
name: strProp(obj, "name"),
|
|
517
518
|
kind: strProp(obj, "kind"),
|
|
519
|
+
effect: strProp(obj, "effect"),
|
|
518
520
|
keys: objKeys(obj),
|
|
519
521
|
ident: constIdent(node),
|
|
520
522
|
exported: isExported(node),
|
|
@@ -575,6 +577,12 @@ export function lintAction(a) {
|
|
|
575
577
|
if (!a.kind) at("kind", `${a.form} sem \`kind\``);
|
|
576
578
|
else if (!KINDS.has(a.kind))
|
|
577
579
|
at("kind", `kind "${a.kind}" inválido (use simple|form|list|view)`);
|
|
580
|
+
// ADR 0041: list e view são servidas por GET — leitura pelo protocolo.
|
|
581
|
+
if ((a.kind === "list" || a.kind === "view") && a.effect === "write")
|
|
582
|
+
at(
|
|
583
|
+
"effect",
|
|
584
|
+
`${a.kind} é servida por GET e não pode declarar effect: 'write'; use simple ou form para escrever`,
|
|
585
|
+
);
|
|
578
586
|
|
|
579
587
|
// field-order: os campos conhecidos devem ter group-index não-decrescente
|
|
580
588
|
let lastGroup = -1;
|
|
@@ -585,7 +593,7 @@ export function lintAction(a) {
|
|
|
585
593
|
if (g < lastGroup) {
|
|
586
594
|
at(
|
|
587
595
|
"field-order",
|
|
588
|
-
`campo "${k}" fora de ordem (depois de "${lastKey}") — siga identidade→docs→input/output→authorize→handler→comportamento`,
|
|
596
|
+
`campo "${k}" fora de ordem (depois de "${lastKey}") — siga identidade→docs→input/output e natureza (effect, personalData)→authorize→handler→comportamento`,
|
|
589
597
|
);
|
|
590
598
|
break;
|
|
591
599
|
}
|
|
@@ -642,8 +650,9 @@ export function checkProject(sources) {
|
|
|
642
650
|
const productDeclarations = [];
|
|
643
651
|
const entityNames = new Set();
|
|
644
652
|
const actionNames = new Set();
|
|
645
|
-
//
|
|
646
|
-
let
|
|
653
|
+
// Natureza da action (ADR 0041): declarações ausentes são contadas, não reprovadas, na minor.
|
|
654
|
+
let missingEffect = 0;
|
|
655
|
+
let missingPersonalData = 0;
|
|
647
656
|
|
|
648
657
|
for (const { file, text } of sources) {
|
|
649
658
|
const declarations = parseDataProducts(file, text);
|
|
@@ -668,7 +677,11 @@ export function checkProject(sources) {
|
|
|
668
677
|
if (item.name !== null) actionNames.add(item.name);
|
|
669
678
|
}
|
|
670
679
|
for (const f of lintAction(item)) findings.push({ ...f, file });
|
|
671
|
-
if (item.
|
|
680
|
+
if (item.form !== "bindAction") {
|
|
681
|
+
const writesByGet = item.kind === "list" || item.kind === "view";
|
|
682
|
+
if (!writesByGet && !item.keys.includes("effect")) missingEffect += 1;
|
|
683
|
+
if (!item.keys.includes("personalData")) missingPersonalData += 1;
|
|
684
|
+
}
|
|
672
685
|
}
|
|
673
686
|
}
|
|
674
687
|
|
|
@@ -774,7 +787,8 @@ export function checkProject(sources) {
|
|
|
774
787
|
actions,
|
|
775
788
|
contracts,
|
|
776
789
|
dataProducts: productDeclarations.length,
|
|
777
|
-
|
|
790
|
+
missingEffect,
|
|
791
|
+
missingPersonalData,
|
|
778
792
|
findings,
|
|
779
793
|
};
|
|
780
794
|
}
|
|
@@ -1925,7 +1939,7 @@ async function walkUiFiles(dir, acc = []) {
|
|
|
1925
1939
|
return acc;
|
|
1926
1940
|
}
|
|
1927
1941
|
|
|
1928
|
-
/** Escaneia um diretório → { files, actions, contracts,
|
|
1942
|
+
/** Escaneia um diretório → { files, actions, contracts, findings, hasMarker }.
|
|
1929
1943
|
* `hasMarker` = o diretório é um projeto opus (tem opus.json na raiz). */
|
|
1930
1944
|
export async function scanDir(rootDir) {
|
|
1931
1945
|
rootDir = canonicalProjectDirectory(rootDir);
|
|
@@ -1955,7 +1969,8 @@ export async function scanDir(rootDir) {
|
|
|
1955
1969
|
actions: checked.actions,
|
|
1956
1970
|
contracts: checked.contracts,
|
|
1957
1971
|
dataProducts: checked.dataProducts,
|
|
1958
|
-
|
|
1972
|
+
missingEffect: checked.missingEffect,
|
|
1973
|
+
missingPersonalData: checked.missingPersonalData,
|
|
1959
1974
|
findings: [...checked.findings, ...uiFindings],
|
|
1960
1975
|
hasMarker,
|
|
1961
1976
|
};
|
package/bin/lib/copy.mjs
CHANGED
|
@@ -128,7 +128,7 @@ const JSX_CHILD_ROLES = new Map([
|
|
|
128
128
|
['PaneTitle', 'title'],
|
|
129
129
|
['TableCaption', 'description'],
|
|
130
130
|
['TableHead', 'heading'],
|
|
131
|
-
['
|
|
131
|
+
['TabsListItem', 'tab'],
|
|
132
132
|
// A Base não tem papel `tooltip`. O tooltip nomeia um controle icon-only, logo é um
|
|
133
133
|
// fragmento (sem ponto final), não uma frase; `label` é o papel que reflete isso.
|
|
134
134
|
['TooltipContent', 'label'],
|
package/bin/lib/gen-manifest.mjs
CHANGED
package/bin/lib/gen-runner.mjs
CHANGED
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
* successStatus?: number,
|
|
52
52
|
* public?: boolean,
|
|
53
53
|
* automatable?: boolean, // aceita execução pelo sistema (ADR 0028)
|
|
54
|
+
* effect: 'read'|'write'|null, // efeito resolvido; list/view = read (ADR 0041)
|
|
55
|
+
* personalData: boolean|null, // devolve dado pessoal; null = não declarado
|
|
54
56
|
* internal?: boolean,
|
|
55
57
|
* rateLimit?: { window, max },
|
|
56
58
|
* confirm?: ConfirmSpec,
|
|
@@ -375,6 +377,9 @@ function serializeAction(action, ctx) {
|
|
|
375
377
|
authorize: serializeAuthorize(action.authorize),
|
|
376
378
|
public: action.public === true,
|
|
377
379
|
automatable: action.automatable === true,
|
|
380
|
+
// ADR 0041: `list` e `view` são leitura pelo protocolo; null = não declarado.
|
|
381
|
+
effect: action.kind === "list" || action.kind === "view" ? "read" : (action.effect ?? null),
|
|
382
|
+
personalData: typeof action.personalData === "boolean" ? action.personalData : null,
|
|
378
383
|
internal: action.internal === true,
|
|
379
384
|
successStatus: action.successStatus,
|
|
380
385
|
input: safeToJsonSchema(action.input, ctx),
|
|
@@ -461,6 +466,8 @@ function serializeFilters(filters) {
|
|
|
461
466
|
placeholder: spec.placeholder ?? null,
|
|
462
467
|
type: spec.type ?? null,
|
|
463
468
|
multiple: spec.multiple === true,
|
|
469
|
+
presentation: spec.presentation ?? null,
|
|
470
|
+
allowEmpty: spec.allowEmpty ?? null,
|
|
464
471
|
mode: spec.mode ?? null,
|
|
465
472
|
operators: Array.isArray(spec.operators) ? spec.operators : null,
|
|
466
473
|
path: spec.path ?? null,
|
package/bin/lib/gen-stubs.mjs
CHANGED
|
@@ -182,7 +182,9 @@ function stripNullsFromFields(record) {
|
|
|
182
182
|
for (const [k, v] of Object.entries(spec)) {
|
|
183
183
|
if (v === null || v === undefined) continue
|
|
184
184
|
if (k === 'hasShowWhen' || k === 'hasRequireWhen') continue
|
|
185
|
-
|
|
185
|
+
// `false` costuma ser o default implícito e não precisa viajar. `allowEmpty` é a
|
|
186
|
+
// exceção: seu default é aceitar vazio, então `false` altera o comportamento.
|
|
187
|
+
if (typeof v === 'boolean' && v === false && k !== 'allowEmpty') continue
|
|
186
188
|
clean[k] = v
|
|
187
189
|
}
|
|
188
190
|
out[name] = clean
|
|
@@ -62,7 +62,7 @@ por propriedades continua disponível temporariamente dentro de `Content`, mas a
|
|
|
62
62
|
explícita usa os slots da família.
|
|
63
63
|
|
|
64
64
|
`Content` técnico mantém seu nome quando representa o contêiner montado por uma primitiva ou um
|
|
65
|
-
painel controlado, como `DialogContent`, `PopoverContent`, `
|
|
65
|
+
painel controlado, como `DialogContent`, `PopoverContent`, `TabsPanel` e `AccordionContent`.
|
|
66
66
|
`CarouselContent` também permanece porque representa o trilho técnico da primitiva, não o body de
|
|
67
67
|
uma superfície estrutural. No `Empty`, a antiga região `EmptyContent` não é um body: como contém
|
|
68
68
|
somente comandos, seu nome canônico passa a ser `EmptyActions`.
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
- **Status:** aceita.
|
|
4
4
|
- **Data:** 2026-09-28.
|
|
5
|
-
- **
|
|
5
|
+
- **Relacionadas:** ADR 0023, quanto ao alinhamento horizontal dentro de superfícies; ADR 0040,
|
|
6
|
+
que torna a linha a única apresentação de `TabsList`.
|
|
6
7
|
|
|
7
8
|
## Contexto
|
|
8
9
|
|
|
@@ -23,14 +24,16 @@ continua pertencendo à anatomia da superfície, e Tabs apenas ocupa a largura q
|
|
|
23
24
|
|
|
24
25
|
### Emenda de 2026-09-28 — a aba combina uma área de botão e o indicador
|
|
25
26
|
|
|
26
|
-
Na
|
|
27
|
-
interativos e a mesma altura de um Button do tamanho correspondente, e o
|
|
28
|
-
linha-base da lista. A área interna permanece transparente e recebe fundo
|
|
29
|
-
ativa se distingue pelo indicador primário. Um respiro de `0.375rem` separa
|
|
30
|
-
comum; dentro de `Tabs framed`, ele aumenta para `0.5rem` e acompanha o
|
|
27
|
+
Na apresentação horizontal que então se chamava `line`, o gatilho mantém duas camadas: uma área
|
|
28
|
+
interna com os estados interativos e a mesma altura de um Button do tamanho correspondente, e o
|
|
29
|
+
indicador ancorado na linha-base da lista. A área interna permanece transparente e recebe fundo
|
|
30
|
+
apenas no hover; a aba ativa se distingue pelo indicador primário. Um respiro de `0.375rem` separa
|
|
31
|
+
as duas camadas no uso comum; dentro de `Tabs framed`, ele aumenta para `0.5rem` e acompanha o
|
|
32
|
+
padding superior da moldura.
|
|
31
33
|
|
|
32
|
-
Essa apresentação pertence ao Opus: consumidores
|
|
33
|
-
|
|
34
|
+
Essa apresentação pertence ao Opus: consumidores não repetem classes de fundo, raio, padding ou
|
|
35
|
+
interação para obter o estado selecionado. Desde a ADR 0040, a linha é a única apresentação de
|
|
36
|
+
`TabsList` e `variant` não faz mais parte da API.
|
|
34
37
|
|
|
35
38
|
## Consequências
|
|
36
39
|
|
|
@@ -38,7 +41,7 @@ de fundo, raio, padding ou interação para obter o estado selecionado.
|
|
|
38
41
|
- A seleção permanece indicada pela linha inferior, sem manter um segundo fundo persistente.
|
|
39
42
|
- Drawer e Dialog não mantêm uma integração implícita com Tabs.
|
|
40
43
|
- Um consumidor que realmente precise de uma linha até as bordas deve compor essa apresentação de
|
|
41
|
-
forma explícita, pois ela não
|
|
44
|
+
forma explícita, pois ela não faz parte do comportamento canônico de `TabsList`.
|
|
42
45
|
|
|
43
46
|
## Alternativas descartadas
|
|
44
47
|
|
|
@@ -54,6 +57,7 @@ sem consumidor conhecido. A composição explícita é suficiente caso essa nece
|
|
|
54
57
|
|
|
55
58
|
## Verificação
|
|
56
59
|
|
|
57
|
-
O teste da
|
|
58
|
-
dentro de `DrawerBody`. O mesmo teste verifica a separação estrutural entre a superfície
|
|
59
|
-
o indicador da aba ativa. A documentação viva demonstra a
|
|
60
|
+
O teste da apresentação horizontal verifica que a linha usa `inset-inline: 0`, inclusive quando
|
|
61
|
+
Tabs está dentro de `DrawerBody`. O mesmo teste verifica a separação estrutural entre a superfície
|
|
62
|
+
interna e o indicador da aba ativa. A documentação viva demonstra a linha com os limites do
|
|
63
|
+
contêiner.
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
- **Status:** aceita.
|
|
4
4
|
- **Data:** 2026-09-28.
|
|
5
|
-
- **Relacionadas:** ADR 0023, quanto à anatomia das superfícies; ADR 0032, quanto à linha-base das
|
|
5
|
+
- **Relacionadas:** ADR 0023, quanto à anatomia das superfícies; ADR 0032, quanto à linha-base das
|
|
6
|
+
abas; ADR 0040, que substitui a escolha de variante em `TabsList`.
|
|
6
7
|
|
|
7
8
|
## Contexto
|
|
8
9
|
|
|
@@ -23,9 +24,10 @@ Quando ativa, `framed` aplica ao root a moldura estrutural canônica para esse b
|
|
|
23
24
|
`rounded-xl` e recorte do conteúdo. Ela não aplica token de fundo nem de foreground. O conjunto
|
|
24
25
|
herda a superfície do contêiner em que foi composto.
|
|
25
26
|
|
|
26
|
-
Essa propriedade não altera a apresentação de `TabsList`, a seleção, o tamanho nem a orientação.
|
|
27
|
-
consumidor
|
|
28
|
-
|
|
27
|
+
Essa propriedade não altera a apresentação de `TabsList`, a seleção, o tamanho nem a orientação. À
|
|
28
|
+
época desta decisão, o consumidor ainda escolhia a apresentação com `TabsList variant="line"`.
|
|
29
|
+
Essa parte foi substituída pela ADR 0040, que tornou a linha a única apresentação; a independência
|
|
30
|
+
entre moldura e apresentação permanece válida.
|
|
29
31
|
|
|
30
32
|
## Consequências
|
|
31
33
|
|
|
@@ -33,8 +35,8 @@ consumidor continua escolhendo esses comportamentos nas APIs existentes, inclusi
|
|
|
33
35
|
- Em Drawer, Dialog ou Pane, a moldura acompanha o fundo da superfície externa nos temas claro e
|
|
34
36
|
escuro.
|
|
35
37
|
- `Card` continua correto quando as abas realmente precisarem de uma superfície semântica própria.
|
|
36
|
-
- `framed` permanece independente de `TabsList
|
|
37
|
-
|
|
38
|
+
- `framed` permanece independente da apresentação de `TabsList`; desde a ADR 0040, a lista usa
|
|
39
|
+
somente a linha de navegação e não aceita `variant`.
|
|
38
40
|
|
|
39
41
|
## Alternativas descartadas
|
|
40
42
|
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
- **Status:** aceita.
|
|
4
4
|
- **Data:** 2026-09-28.
|
|
5
|
-
- **Relacionadas:** ADR 0032, quanto à composição da
|
|
5
|
+
- **Relacionadas:** ADR 0032, quanto à composição da linha; ADR 0034, quanto à moldura de Tabs; ADR
|
|
6
|
+
0035, quanto ao eixo de distribuição em grupos de controles; ADR 0040, que substitui a escolha de
|
|
7
|
+
variante em `TabsList`.
|
|
6
8
|
|
|
7
9
|
## Contexto
|
|
8
10
|
|
|
@@ -11,10 +13,11 @@ entre os gatilhos. A view de Evento usa quatro abas no cabeçalho de um bloco em
|
|
|
11
13
|
derivadas do texto deixam esse cabeçalho visualmente desequilibrado, embora todas as seções tenham o
|
|
12
14
|
mesmo nível.
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
lista com grid, duplicando uma decisão que já
|
|
17
|
-
`distribution="content" | "equal"`.
|
|
16
|
+
Na API vigente quando esta decisão foi registrada, a variante horizontal `line` forçava cada
|
|
17
|
+
gatilho a usar a largura do próprio conteúdo. Um consumidor que precisasse de larguras iguais teria
|
|
18
|
+
de sobrescrever o `flex` interno ou reconstruir a lista com grid, duplicando uma decisão que já
|
|
19
|
+
existia em `ButtonGroup` como `distribution="content" | "equal"`. A ADR 0040 depois tornou a linha
|
|
20
|
+
a única apresentação e removeu `variant`, sem alterar o problema de distribuição resolvido aqui.
|
|
18
21
|
|
|
19
22
|
## Decisão
|
|
20
23
|
|
|
@@ -30,9 +33,9 @@ largura nem o layout dos painéis de conteúdo.
|
|
|
30
33
|
## Consequências
|
|
31
34
|
|
|
32
35
|
- Consumidores escolhem a mesma linguagem de distribuição usada por `ButtonGroup`.
|
|
33
|
-
- `TabsList
|
|
34
|
-
classes de layout no consumidor.
|
|
35
|
-
- A view de Evento declara `distribution="equal"` no `Tabs` sem alterar cada `
|
|
36
|
+
- `TabsList` continua responsável pela linha e pelos estados visuais; desde a ADR 0040, não aceita
|
|
37
|
+
`variant` nem recebe classes de layout no consumidor.
|
|
38
|
+
- A view de Evento declara `distribution="equal"` no `Tabs` sem alterar cada `TabsListItem`.
|
|
36
39
|
- Usos existentes preservam a distribuição pelo conteúdo.
|
|
37
40
|
|
|
38
41
|
## Alternativas descartadas
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ADR 0037 — Dados do modo design ficam fora do contrato
|
|
2
2
|
|
|
3
|
-
- **Status:** aceita;
|
|
3
|
+
- **Status:** aceita; transição concluída na 23.0.0.
|
|
4
4
|
- **Data:** 2026-09-28.
|
|
5
5
|
- **Relacionadas:** ADR 0002 (seeds estruturados).
|
|
6
6
|
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# ADR 0038 — O nível do Content define sua apresentação principal
|
|
2
|
+
|
|
3
|
+
- **Status:** aceita.
|
|
4
|
+
- **Data:** 2026-09-29.
|
|
5
|
+
- **Complementa:** ADRs 0016, 0021, 0023 e 0029.
|
|
6
|
+
|
|
7
|
+
## Contexto
|
|
8
|
+
|
|
9
|
+
`Content` aceitava duas declarações independentes para a mesma hierarquia: `level={1}` fazia da
|
|
10
|
+
região o heading principal da `Page`, enquanto `variant="page"` escolhia a escala visual desse
|
|
11
|
+
mesmo papel. Todos os consumidores válidos precisavam repetir as duas propriedades, e o contrato
|
|
12
|
+
também permitia combinações contraditórias como um heading principal com aparência de seção.
|
|
13
|
+
|
|
14
|
+
A duplicação ainda produzia ritmos diferentes entre páginas equivalentes. Quando `PageHeader`
|
|
15
|
+
fornecia o heading, `Page` separava introdução e corpo por `1.5rem`; quando `Content` fornecia o
|
|
16
|
+
heading principal, a raiz mantinha os `0.75rem` próprios de uma seção interna.
|
|
17
|
+
|
|
18
|
+
## Decisão
|
|
19
|
+
|
|
20
|
+
`Content` deixa de expor `variant`. O nível semântico passa a selecionar a única apresentação
|
|
21
|
+
válida para esse componente:
|
|
22
|
+
|
|
23
|
+
- `level={1}` identifica o conteúdo principal, usa a escala de `PageHeader` e separa header e body
|
|
24
|
+
por `1.5rem` no layout contínuo;
|
|
25
|
+
- níveis de 2 a 6 identificam seções internas e preservam a escala e o intervalo de `0.75rem`;
|
|
26
|
+
- `fieldset` permanece uma seção interna: sua legenda não participa da hierarquia de headings.
|
|
27
|
+
|
|
28
|
+
`Page` continua sendo a superfície estrutural, e `heading: "content"` continua declarando na
|
|
29
|
+
`Presentation` quem possui o heading principal. A decisão não transforma `Content` em `Page`; ela
|
|
30
|
+
remove uma escolha visual que não tinha significado independente dentro de `Content`.
|
|
31
|
+
|
|
32
|
+
## Consequências
|
|
33
|
+
|
|
34
|
+
- combinações contraditórias deixam de ser representáveis;
|
|
35
|
+
- consumidores removem `variant="page"` e preservam `level={1}`;
|
|
36
|
+
- o ritmo do conteúdo principal fica igual ao de páginas cujo heading pertence a `PageHeader`;
|
|
37
|
+
- a remoção da propriedade é incompatível e exige migração coordenada dos consumidores;
|
|
38
|
+
- a escala interna continua centralizada em `SurfaceHeader`, sem duplicação no consumidor.
|
|
39
|
+
|
|
40
|
+
## Alternativas descartadas
|
|
41
|
+
|
|
42
|
+
### Manter variant e corrigir somente o espaço
|
|
43
|
+
|
|
44
|
+
Corrigiria o sintoma visual, mas preservaria a duplicação e os estados inválidos no contrato.
|
|
45
|
+
|
|
46
|
+
### Renomear variant para role
|
|
47
|
+
|
|
48
|
+
Tornaria a intenção mais explícita, porém continuaria exigindo duas propriedades para declarar o
|
|
49
|
+
mesmo papel e permitiria que elas divergissem.
|
|
50
|
+
|
|
51
|
+
### Derivar a apresentação da presença em Page
|
|
52
|
+
|
|
53
|
+
Acoplaria `Content` ao local de renderização. O heading principal já é declarado diretamente por
|
|
54
|
+
`level={1}` e pode ser validado por `Page` sem outro contexto implícito.
|
|
55
|
+
|
|
56
|
+
## Verificação
|
|
57
|
+
|
|
58
|
+
- testes de `Content` confirmam escala e intervalo de página no nível 1 e de seção nos demais;
|
|
59
|
+
- tipos e exemplos públicos não aceitam mais `variant` em `Content`;
|
|
60
|
+
- testes de `Page`, `Presentation` e preenchimento preservam `Content level={1}` como heading
|
|
61
|
+
principal;
|
|
62
|
+
- consumidores compilam sem `variant="page"`.
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# ADR 0039 — A apresentação do filtro é independente de seu tipo
|
|
2
|
+
|
|
3
|
+
- **Status:** aceita.
|
|
4
|
+
- **Data:** 2026-09-29.
|
|
5
|
+
- **Complementa:** ADR 0019.
|
|
6
|
+
|
|
7
|
+
## Contexto
|
|
8
|
+
|
|
9
|
+
`FilterSpec` declara o significado e o transporte de cada filtro, mas a interface apresentava todo
|
|
10
|
+
filtro `select` com o mesmo controle. Escolhas únicas, curtas e mutuamente exclusivas — como um
|
|
11
|
+
canal com três opções — continuavam escondidas em um menu mesmo quando a comparação direta entre
|
|
12
|
+
as alternativas era mais útil.
|
|
13
|
+
|
|
14
|
+
Transformar `toggle` em um novo `type` misturaria apresentação com valor: tanto o menu quanto o
|
|
15
|
+
grupo produzem a mesma string, ocupam o mesmo campo no estado navegável e chegam sem mudança à
|
|
16
|
+
action.
|
|
17
|
+
|
|
18
|
+
## Decisão
|
|
19
|
+
|
|
20
|
+
`FilterSpec` passa a aceitar `presentation: "select" | "toggle"`. A ausência da propriedade
|
|
21
|
+
preserva `select` como apresentação padrão.
|
|
22
|
+
|
|
23
|
+
`toggle` aplica-se a filtros `type: "select"` de escolha única e usa as mesmas opções, valor de
|
|
24
|
+
repouso, regra de vazio, dependências e atualização de estado do controle padrão. A apresentação
|
|
25
|
+
mostra todas as opções em um `ToggleGroup` conectado e não permite desmarcar a opção ativa quando o
|
|
26
|
+
filtro não aceita vazio. Quando a opção vem de um dicionário e sua entrada declara um ícone do
|
|
27
|
+
catálogo, o grupo apresenta ícone e rótulo juntos.
|
|
28
|
+
|
|
29
|
+
O tipo do filtro continua descrevendo o valor e sua operação. A apresentação escolhe somente o
|
|
30
|
+
controle usado para editá-lo.
|
|
31
|
+
|
|
32
|
+
## Consequências
|
|
33
|
+
|
|
34
|
+
- contratos podem expor escolhas pequenas e fechadas sem reconstruir a barra no consumidor;
|
|
35
|
+
- URL, input da action, defaults e handlers permanecem inalterados;
|
|
36
|
+
- filtros existentes continuam usando `Select` sem migração;
|
|
37
|
+
- `toggle` não se aplica a seleção múltipla, lookup, texto, número ou data;
|
|
38
|
+
- conjuntos extensos ou pesquisáveis continuam usando `Select`.
|
|
39
|
+
|
|
40
|
+
## Alternativas descartadas
|
|
41
|
+
|
|
42
|
+
### Criar `type: "toggle"`
|
|
43
|
+
|
|
44
|
+
Duplicaria a semântica de `select` e exigiria que serialização, validação e adaptadores conhecessem
|
|
45
|
+
um tipo cujo valor não mudou.
|
|
46
|
+
|
|
47
|
+
### Compor o ToggleGroup em cada página
|
|
48
|
+
|
|
49
|
+
Preservaria o contrato incompleto e duplicaria a sincronização entre controle, URL, default e input
|
|
50
|
+
efetivo da action.
|
|
51
|
+
|
|
52
|
+
### Trocar automaticamente selects com poucas opções
|
|
53
|
+
|
|
54
|
+
Quantidade de opções não determina a melhor apresentação. O contrato precisa declarar a intenção,
|
|
55
|
+
sem uma heurística visual invisível.
|
|
56
|
+
|
|
57
|
+
## Verificação
|
|
58
|
+
|
|
59
|
+
- teste do `ActionFilterBar` confirma que `presentation: "toggle"` renderiza todas as opções e
|
|
60
|
+
atualiza o mesmo campo de filtro;
|
|
61
|
+
- teste de regressão confirma que um `select` sem apresentação continua usando `Select`;
|
|
62
|
+
- typecheck impede valores de apresentação fora do vocabulário público.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# ADR 0040 — Tabs usa uma única apresentação de navegação
|
|
2
|
+
|
|
3
|
+
- **Status:** aceita.
|
|
4
|
+
- **Data:** 2026-09-29.
|
|
5
|
+
- **Substitui parcialmente:** ADR 0032, ADR 0034 e ADR 0036 quanto à escolha de variante em `TabsList`.
|
|
6
|
+
|
|
7
|
+
## Contexto
|
|
8
|
+
|
|
9
|
+
`TabsList` oferecia uma superfície preenchida e uma variante com linha. A superfície preenchida
|
|
10
|
+
ficava visualmente próxima de um controle segmentado, embora `Tabs` represente navegação entre
|
|
11
|
+
painéis e um `ToggleGroup` represente escolha de valores. A mesma aparência para comportamentos
|
|
12
|
+
diferentes dificultava escolher o componente correto e levou filtros a serem descritos como tabs.
|
|
13
|
+
|
|
14
|
+
## Decisão
|
|
15
|
+
|
|
16
|
+
`TabsList` usa somente a linha de navegação e deixa de aceitar `variant`. Cada `TabsListItem`
|
|
17
|
+
continua associado a um `TabsPanel` pelo mesmo valor. Orientação, tamanho, distribuição e moldura
|
|
18
|
+
permanecem propriedades independentes do conjunto.
|
|
19
|
+
|
|
20
|
+
A anatomia pública nomeia a posição de cada parte: `TabsListItem` pertence a `TabsList`, enquanto
|
|
21
|
+
`TabsPanel` identifica o painel associado. Os nomes anteriores, `TabsTrigger` e `TabsContent`, não
|
|
22
|
+
são mantidos como aliases porque há um único consumidor e a migração é atômica.
|
|
23
|
+
|
|
24
|
+
Escolhas únicas ou múltiplas que alteram um valor no contexto atual usam `ToggleGroup`. Quando o
|
|
25
|
+
grupo precisa de um contorno conectado, o consumidor declara `variant="outline"` com `spacing={0}`;
|
|
26
|
+
a borda pertence aos itens e as arestas internas duplicadas são removidas pela primitiva.
|
|
27
|
+
|
|
28
|
+
## Consequências
|
|
29
|
+
|
|
30
|
+
- Tabs mantém uma identidade visual única e vinculada à navegação entre painéis.
|
|
31
|
+
- Filtros e escolhas de formulário não usam semântica de tabs para obter uma aparência compacta.
|
|
32
|
+
- Consumidores removem `variant="line"`; não há substituição para a antiga superfície preenchida.
|
|
33
|
+
- Consumidores renomeiam `TabsTrigger` para `TabsListItem` e `TabsContent` para `TabsPanel`.
|
|
34
|
+
- A documentação de ToggleGroup explicita como formar o contorno conectado.
|
|
35
|
+
|
|
36
|
+
## Alternativas descartadas
|
|
37
|
+
|
|
38
|
+
### Manter duas variantes em TabsList
|
|
39
|
+
|
|
40
|
+
Preservaria flexibilidade visual, mas manteria a ambiguidade entre navegação e escolha de valor.
|
|
41
|
+
|
|
42
|
+
### Compartilhar uma apresentação segmentada entre Tabs e ToggleGroup
|
|
43
|
+
|
|
44
|
+
Permitiria a mesma aparência com semânticas distintas, mas não resolveria a dificuldade de leitura
|
|
45
|
+
observada no produto. A linha torna a navegação reconhecível sem depender do contexto ao redor.
|
|
46
|
+
|
|
47
|
+
### Preservar Trigger e Content como nomes públicos
|
|
48
|
+
|
|
49
|
+
Manteria proximidade com a primitiva subjacente, mas nomearia mecanismo e conteúdo genérico em vez
|
|
50
|
+
da anatomia exposta ao consumidor. `ListItem` e `Panel` deixam a composição legível no JSX.
|
|
51
|
+
|
|
52
|
+
## Verificação
|
|
53
|
+
|
|
54
|
+
- o tipo público de `TabsList` não aceita `variant`;
|
|
55
|
+
- a exportação pública oferece `TabsListItem` e `TabsPanel`, sem aliases para os nomes anteriores;
|
|
56
|
+
- testes da primitiva confirmam a linha-base, o indicador ativo e a distribuição;
|
|
57
|
+
- testes do `ActionFilterBar` confirmam que `presentation: "toggle"` usa seleção exclusiva sem
|
|
58
|
+
alterar o estado transportado para a action;
|
|
59
|
+
- a documentação de Tabs não oferece apresentação preenchida e a de ToggleGroup demonstra o grupo
|
|
60
|
+
conectado com borda.
|