@praxisui/list 8.0.0-beta.2 → 8.0.0-beta.20

package/src/lib/components/praxis-list-skin-preview.json-api.md

@@ -0,0 +1,459 @@
+---
+title: "praxis-list-skin-preview JSON API (Canonical)"
+slug: "praxis-list-skin-preview-json-api"
+doc_type: "api-reference"
+component: "praxis-list-skin-preview"
+document_kind: "json-api-canonical"
+reference_mode: "canonical"
+contract_format: "json"
+contract_source: "runtime-and-code"
+description: "Referencia canonica do contrato JSON do componente praxis-list-skin-preview."
+category: "components"
+sub_category: "list"
+audience:
+  - "frontend"
+  - "architect"
+  - "platform-team"
+level: "advanced"
+status: "active"
+owner: "praxis-ui"
+source_of_truth:
+  - "projects/praxis-list/src/lib/components/list-skin-preview.component.ts"
+  - "projects/praxis-list/src/lib/components/list-skin-preview.component.html"
+  - "projects/praxis-list/src/lib/components/list-skin-preview.component.scss"
+  - "projects/praxis-list/src/lib/services/list-skin.service.ts"
+  - "projects/praxis-list/src/lib/utils/template-evaluator.ts"
+  - "projects/praxis-list/src/lib/models/list-config.model.ts"
+source_of_truth_last_verified: "2026-03-05"
+last_updated: "2026-03-05"
+toc: true
+sidebar: true
+tags:
+  - "json-api"
+  - "canonical-contract"
+  - "praxis-list-skin-preview"
+api_stability: "canonical"
+schema_verified: true
+runtime_verified: false
+editor_coverage_verified: false
+runtime_scope: "public"
+legacy_paths_present: false
+has_known_mismatches: true
+related_components: []
+---
+
+# praxis-list-skin-preview
+
+Este documento e a referencia canonica da API JSON de praxis-list-skin-preview.
+
+## Summary
+
+- Tipo documental: API reference canonica de contrato JSON.
+- Source of truth: runtime e codigo declarados no frontmatter.
+- Objetivo operacional: consulta rapida, auditavel e deterministica sob pressao.
+- Resumo funcional herdado: Referencia canonica da JSON API do `praxis-list-skin-preview`.
+
+## Scope and positioning
+
+- Escopo: contrato JSON publico e limites de comportamento observavel.
+- Fora de escopo: tutorial de adocao e walkthrough operacional detalhado.
+- Posicionamento: referencia canonicamente governada para consumidores, arquitetos e mantenedores.
+
+## Source of truth
+
+| Source | Kind | Notes |
+| --- | --- | --- |
+| projects/praxis-list/src/lib/components/list-skin-preview.component.ts | runtime-code | Source de implementacao declarado no repositorio. |
+| projects/praxis-list/src/lib/components/list-skin-preview.component.html | template-style | Source de implementacao declarado no repositorio. |
+| projects/praxis-list/src/lib/components/list-skin-preview.component.scss | template-style | Source de implementacao declarado no repositorio. |
+| projects/praxis-list/src/lib/services/list-skin.service.ts | runtime-code | Source de implementacao declarado no repositorio. |
+| projects/praxis-list/src/lib/utils/template-evaluator.ts | runtime-code | Source de implementacao declarado no repositorio. |
+| projects/praxis-list/src/lib/models/list-config.model.ts | runtime-code | Source de implementacao declarado no repositorio. |
+
+## Support legend
+
+- Active: suportado e observado no runtime atual.
+- Partial: suporte parcial, com restricoes conhecidas.
+- Declared-only: declarado em tipos/schema sem ligacao runtime confirmada.
+- Schema-only: presente em schema/modelo sem confirmacao de execucao.
+- Deprecated: mantido por compatibilidade legada com migracao prevista.
+
+## Contract classification
+
+### Canonical paths (public contract)
+
+| Path | Type | Required | Default | Status | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `layout.variant` | not-specified | not-specified | n/a | Active | Define `list/cards/tiles`. |
+| `layout.lines` | not-specified | not-specified | n/a | Active | Controla linhas secundarias. |
+| `layout.density/model` | not-specified | not-specified | n/a | Active | Aplicados via classes de host resolvidas pelo `ListSkinService`. |
+| `layout.dividers/groupBy/pageSize` | not-specified | not-specified | n/a | Declared-only | Sem efeito direto no preview atual. |
+| `skin.type` | not-specified | not-specified | n/a | Active | Classe `skin-*`. |
+| `skin.gradient/radius/shadow/border/backdropBlur/class/inlineStyle` | not-specified | not-specified | n/a | Active | Aplicados por `ListSkinService`. |
+| `templating.leading/primary/secondary/meta/trailing` | not-specified | not-specified | n/a | Active | Slots principais renderizados. |
+| `templating.sectionHeader/emptyState` | not-specified | not-specified | n/a | Declared-only | Nao renderizados no preview atual. |
+| `templating.metaPrefixIcon` | not-specified | not-specified | n/a | Active | Prefixo em meta textual. |
+| `templating.statusPosition` | not-specified | not-specified | n/a | Active | `top-right` para chip/icon em tiles. |
+| `templating.chipColorMap/chipLabelMap/iconColorMap` | not-specified | not-specified | n/a | Active | Mapeamentos aplicados no render. |
+| `templating.features/featuresVisible/featuresMode` | not-specified | not-specified | n/a | Active | Linha de features no preview. |
+| `templating.skeleton` | not-specified | not-specified | n/a | Declared-only | Sem modo skeleton no preview. |
+| `i18n.locale/currency` | not-specified | not-specified | n/a | Active | Base para formatacao `date/currency`. |
+
+### Supported legacy paths
+
+Nenhum path legado suportado foi identificado nesta revisão baseada em evidência textual preservada.
+
+### Internal-only paths
+
+| Path | Internal consumer | Runtime presence | Public support | Notes |
+| --- | --- | --- | --- | --- |
+| not-yet-mapped | not-yet-verified | not-yet-verified | No | Caminhos internos nao mapeados explicitamente nesta revisao automatizada. |
+
+### Experimental paths
+
+| Path | Enablement (flag/guard) | Stability | Rollout notes | Notes |
+| --- | --- | --- | --- | --- |
+| not-yet-mapped | not-yet-verified | Experimental | not-yet-verified | Registrar somente quando houver evidencia em runtime/codigo. |
+
+## Overview
+
+Este arquivo foi adaptado para o padrao canonico atual sem remover conteudo tecnico existente. O conteudo detalhado anterior foi preservado para manter rastreabilidade historica e reduzir perda de contexto.
+
+## Public contract surface
+
+### Top-level configuration blocks
+
+| Block | Purpose | Required | Merge strategy | Notes |
+| --- | --- | --- | --- | --- |
+| layout | Configuração top-level identificada na referência preservada. | not-yet-verified | component-defined | 4 path(s) mapeado(s), status predominante Active. |
+| skin | Configuração top-level identificada na referência preservada. | not-yet-verified | component-defined | 2 path(s) mapeado(s), status predominante Active. |
+| templating | Configuração top-level identificada na referência preservada. | not-yet-verified | component-defined | 7 path(s) mapeado(s), status predominante Active. |
+| i18n | Configuração top-level identificada na referência preservada. | not-yet-verified | component-defined | 1 path(s) mapeado(s), status predominante Active. |
+
+### Nested configuration blocks
+
+| Path | Type | Required | Default | Constraints | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `layout.variant` | not-specified | not-specified | n/a | component-defined | Define `list/cards/tiles`. |
+| `layout.lines` | not-specified | not-specified | n/a | component-defined | Controla linhas secundarias. |
+| `layout.density/model` | not-specified | not-specified | n/a | component-defined | Aplicados via classes de host resolvidas pelo `ListSkinService`. |
+| `layout.dividers/groupBy/pageSize` | not-specified | not-specified | n/a | component-defined | Sem efeito direto no preview atual. |
+| `skin.type` | not-specified | not-specified | n/a | component-defined | Classe `skin-*`. |
+| `skin.gradient/radius/shadow/border/backdropBlur/class/inlineStyle` | not-specified | not-specified | n/a | component-defined | Aplicados por `ListSkinService`. |
+| `templating.leading/primary/secondary/meta/trailing` | not-specified | not-specified | n/a | component-defined | Slots principais renderizados. |
+| `templating.sectionHeader/emptyState` | not-specified | not-specified | n/a | component-defined | Nao renderizados no preview atual. |
+| `templating.metaPrefixIcon` | not-specified | not-specified | n/a | component-defined | Prefixo em meta textual. |
+| `templating.statusPosition` | not-specified | not-specified | n/a | component-defined | `top-right` para chip/icon em tiles. |
+
+### Input bindings
+
+| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `config` | `PraxisListConfig` | not-specified | component-input | not-yet-verified | Contrato visual usado para render do preview. |
+| `items` | `any[]` | not-specified | component-input | not-yet-verified | Dataset de preview. |
+| `theme` | `'light' \| 'dark' \| 'grid'` | not-specified | component-input | not-yet-verified | Classe de contexto visual (`preview-*`). |
+
+### Output events
+
+| Event | Payload | Trigger | Stability | Notes |
+| --- | --- | --- | --- | --- |
+| component-outputs | see-detailed-api | runtime-event | Partial | Eventos preservados na referência detalhada. |
+
+### External side channels
+
+| Channel | Direction | Contract | Failure mode | Notes |
+| --- | --- | --- | --- | --- |
+| host/services/storage | bidirectional | see-detailed-api | not-yet-verified | Side channels dependem do componente e do host consumidor. |
+
+### Host/runtime dependencies
+
+| Dependency | Required | Environment | Purpose | Notes |
+| --- | --- | --- | --- | --- |
+| see-source-of-truth | true | browser/dev/prod/ssr | runtime linkage | Confirmar por componente quando necessario. |
+
+## Coverage matrix
+
+| Surface | Verified | Coverage status | Evidence | Notes |
+| --- | --- | --- | --- | --- |
+| Runtime | false | Partial | source_of_truth + conteudo preservado | Revisao estrutural concluida; validacao comportamental fina pode exigir follow-up. |
+| Schema/Types | true | Partial | interfaces/modelos citados | Mapeamento formal de todos os campos ainda pode requerer refinamento. |
+| Editor/Tooling | false | Partial | secoes de editor quando presentes | Cobertura de editor/tooling nem sempre confirmada por evidencia direta. |
+
+## Runtime coverage boundaries
+
+- Cobertura consolidada com base em documentacao existente e source of truth declarado.
+- Comportamentos fora de evidencia direta foram marcados como not-yet-verified ou Partial.
+- Compatibilidade legada, quando detectada, foi separada em classificacao explicita.
+
+## Resolution model
+
+### Merge order
+
+1. defaults do componente
+2. contrato JSON recebido
+3. overrides de host/runtime
+4. normalizacoes internas
+
+### Fallback order
+
+contrato explicito -> aliases legados (quando suportados) -> defaults internos -> comportamento seguro
+
+### Override points
+
+- inputs publicos do componente
+- configuracao JSON de runtime
+- integracoes de host (servicos/tokens/adapters)
+
+### Runtime normalization
+
+Campos e aliases preservados do documento anterior devem convergir progressivamente para paths canonicos declarados.
+
+### Precedence rules
+
+Quando houver conflito entre alias e path canonico, priorizar path canonico e manter alias apenas para backward compatibility.
+
+## Validation and error semantics
+
+### Validation model
+
+| Path/Rule | Validation phase | Behavior on fail | Error code / warning | Notes |
+| --- | --- | --- | --- | --- |
+| see-detailed-api | runtime | warn-or-reject | not-yet-standardized | Semantica de validacao preservada do documento anterior. |
+
+### Error semantics
+
+Erros devem ser classificados em warnings recuperaveis versus falhas bloqueantes. Quando a evidencia nao estiver explicita, tratar como not yet verified.
+
+### Fail-open / fail-closed behavior
+
+| Condition | Mode | Runtime behavior | Consumer impact |
+| --- | --- | --- | --- |
+| invalid-or-unknown-field | component-defined | not-yet-verified | Variavel por componente; requer verificacao em runtime. |
+
+### Invalid or unknown field handling
+
+- Campos desconhecidos: comportamento depende da estrategia do componente (ignore, warn ou reject).
+- Campos invalidos: podem gerar fallback, warning ou falha conforme implementacao.
+- Registrar divergencias observadas em Known limitations and mismatches.
+
+### Runtime warnings vs hard failures
+
+| Condition | Severity | Observability | Consumer action |
+| --- | --- | --- | --- |
+| partial-or-declared-only-coverage | warning | logs/eventos do componente | confirmar ligacao runtime antes de uso critico |
+
+## Detailed API
+
+### Preserved technical reference (normalized from previous revision)
+
+Referencia canonica da JSON API do `praxis-list-skin-preview`.
+
+Foco:
+
+- o que o preview realmente renderiza a partir de `PraxisListConfig`;
+- diferencas entre preview visual e runtime completo do `praxis-list`;
+- limites para uso corporativo no fluxo de configuracao.
+
+Legenda de suporte:
+
+- `Active`: consumido diretamente pelo preview.
+- `Partial`: consumido com comportamento reduzido.
+- `Declared-only`: ignorado no preview atual.
+
+### Overview
+
+`praxis-list-skin-preview` e um renderer de preview usado no editor de configuracao da lista.
+
+Fluxo:
+
+1. Recebe `config` + `items` + `theme`.
+2. Resolve classes e variaveis de skin via `ListSkinService`.
+3. Renderiza variant `list/cards/tiles` com slots de templating.
+4. Aplica mapas de cor/label para chip e icones.
+
+Importante: e um preview estatico. Nao executa fluxo remoto, paginacao, selecao, acoes ou persistencia.
+
+### API
+
+#### Component inputs
+
+| Input | Tipo | Default | Status | Runtime notes |
+| --- | --- | --- | --- | --- |
+| `config` | `PraxisListConfig` | obrigatorio logico | Active | Contrato visual usado para render do preview. |
+| `items` | `any[]` | `[]` | Active | Dataset de preview. |
+| `theme` | `'light' \| 'dark' \| 'grid'` | `'light'` | Active | Classe de contexto visual (`preview-*`). |
+
+#### Component outputs
+
+Sem `@Output` publico.
+
+### Coverage Matrix (`PraxisListConfig` no preview)
+
+| JSON path | Status | Preview notes |
+| --- | --- | --- |
+| `layout.variant` | Active | Define `list/cards/tiles`. |
+| `layout.lines` | Active | Controla linhas secundarias. |
+| `layout.density/model` | Active | Aplicados via classes de host resolvidas pelo `ListSkinService`. |
+| `layout.dividers/groupBy/pageSize` | Declared-only | Sem efeito direto no preview atual. |
+| `skin.type` | Active | Classe `skin-*`. |
+| `skin.gradient/radius/shadow/border/backdropBlur/class/inlineStyle` | Active | Aplicados por `ListSkinService`. |
+| `templating.leading/primary/secondary/meta/trailing` | Active | Slots principais renderizados. |
+| `templating.sectionHeader/emptyState` | Declared-only | Nao renderizados no preview atual. |
+| `templating.metaPrefixIcon` | Active | Prefixo em meta textual. |
+| `templating.statusPosition` | Active | `top-right` para chip/icon em tiles. |
+| `templating.chipColorMap/chipLabelMap/iconColorMap` | Active | Mapeamentos aplicados no render. |
+| `templating.features/featuresVisible/featuresMode` | Active | Linha de features no preview. |
+| `templating.skeleton` | Declared-only | Sem modo skeleton no preview. |
+| `i18n.locale/currency` | Active | Base para formatacao `date/currency`. |
+| `dataSource`, `selection`, `actions`, `ui`, `a11y`, `events` | Declared-only | Nao consumidos pelo preview atual. |
+
+### Slots e formatacao suportados
+
+Tipos suportados nos slots principais:
+
+- `text`, `icon`, `image`, `chip`, `rating`, `currency`, `date`, `html`.
+
+Comportamentos relevantes:
+
+1. `currency`: usa `Intl.NumberFormat` com fallback para `i18n.currency` e `i18n.locale`.
+2. `date`: usa `Intl.DateTimeFormat` com estilo `short|medium|long|full`.
+3. `chip`: aplica `chipColorMap` e `chipLabelMap`.
+4. `icon`: aplica `iconColorMap` por `status` ou valor do icone.
+5. `rating`: respeita `props.rating.max/size/color`.
+
+### Diferencas para runtime principal (`praxis-list`)
+
+1. Nao existe pipeline remoto (`/filter`, fallback, `loading$`, `total$`, `page$`).
+2. Nao ha `selection` com `FormControl` nem emissao de eventos.
+3. Nao ha `actions` nem `GlobalActionService`.
+4. `featureLabel()` no preview usa substituicao simples de placeholders; pipes avancados nao sao processados nesse ponto.
+
+### Exemplos
+
+#### 1) Preview basico em cards
+
+```html
+<praxis-list-skin-preview
+  [config]="config"
+  [items]="previewItems"
+  theme="light">
+</praxis-list-skin-preview>
+```
+
+#### 2) Preview com status no canto (tiles)
+
+```json
+{
+  "layout": { "variant": "tiles", "lines": 2 },
+  "templating": {
+    "leading": { "type": "image", "expr": "${item.imageUrl}" },
+    "primary": { "type": "text", "expr": "${item.name}" },
+    "trailing": { "type": "chip", "expr": "${item.status}" },
+    "statusPosition": "top-right",
+    "chipColorMap": {
+      "active": "primary",
+      "paused": "accent",
+      "failed": "warn"
+    }
+  }
+}
+```
+
+### Known limitations and pending investigation
+
+1. Preview nao cobre `sectionHeader`, `emptyState` e `skeleton`.
+2. Nao simula pipeline comportamental (busca, sort, paginacao, selecao, acoes).
+3. Divergencias de avaliacao podem ocorrer em expressoes complexas de `features`.
+
+### Source references
+
+- `projects/praxis-list/src/lib/components/list-skin-preview.component.ts`
+- `projects/praxis-list/src/lib/components/list-skin-preview.component.html`
+- `projects/praxis-list/src/lib/services/list-skin.service.ts`
+- `projects/praxis-list/src/lib/utils/template-evaluator.ts`
+- `projects/praxis-list/src/lib/models/list-config.model.ts`
+
+## JSON path index
+
+| Path | Type | Required | Default | Status | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `layout.variant` | not-specified | not-specified | n/a | Active | Define `list/cards/tiles`. |
+| `layout.lines` | not-specified | not-specified | n/a | Active | Controla linhas secundarias. |
+| `layout.density/model` | not-specified | not-specified | n/a | Active | Aplicados via classes de host resolvidas pelo `ListSkinService`. |
+| `layout.dividers/groupBy/pageSize` | not-specified | not-specified | n/a | Declared-only | Sem efeito direto no preview atual. |
+| `skin.type` | not-specified | not-specified | n/a | Active | Classe `skin-*`. |
+| `skin.gradient/radius/shadow/border/backdropBlur/class/inlineStyle` | not-specified | not-specified | n/a | Active | Aplicados por `ListSkinService`. |
+| `templating.leading/primary/secondary/meta/trailing` | not-specified | not-specified | n/a | Active | Slots principais renderizados. |
+| `templating.sectionHeader/emptyState` | not-specified | not-specified | n/a | Declared-only | Nao renderizados no preview atual. |
+| `templating.metaPrefixIcon` | not-specified | not-specified | n/a | Active | Prefixo em meta textual. |
+| `templating.statusPosition` | not-specified | not-specified | n/a | Active | `top-right` para chip/icon em tiles. |
+| `templating.chipColorMap/chipLabelMap/iconColorMap` | not-specified | not-specified | n/a | Active | Mapeamentos aplicados no render. |
+| `templating.features/featuresVisible/featuresMode` | not-specified | not-specified | n/a | Active | Linha de features no preview. |
+| `templating.skeleton` | not-specified | not-specified | n/a | Declared-only | Sem modo skeleton no preview. |
+| `i18n.locale/currency` | not-specified | not-specified | n/a | Active | Base para formatacao `date/currency`. |
+
+## Events
+
+| Event | Payload | Trigger | Stability | Notes |
+| --- | --- | --- | --- | --- |
+| component-outputs | see-detailed-api | runtime-event | Partial | Eventos preservados na referência detalhada. |
+
+## Styling API
+
+| Token/Class | Scope | Purpose | Notes |
+| --- | --- | --- | --- |
+| see-detailed-api | component | styling/runtime | Consolidar naming canonico quando aplicavel. |
+
+## Editor and tooling notes
+
+- Cobertura de editor/tooling foi separada da cobertura de runtime para evitar confusao de suporte.
+- Quando nao houver evidencia direta no codigo, o status deve permanecer not yet verified.
+
+## Examples
+
+### Minimal valid
+
+```json
+{}
+```
+
+### Typical/common
+
+```json
+{}
+```
+
+### Advanced
+
+```json
+{}
+```
+
+### Enterprise scenario
+
+```json
+{}
+```
+
+## Known limitations and mismatches
+
+| Path/Behavior | Observed behavior (runtime) | Desired behavior | Impact | Tracking issue | Target fix |
+| --- | --- | --- | --- | --- | --- |
+| coverage/mapping | Evidência textual preservada indica itens Partial/Declared-only. | Cobertura confirmada por evidência runtime + schema + editor. | Pode gerar uso de paths não totalmente ligados. | to-be-linked | next-doc-cycle |
+
+## Compatibility and migration notes
+
+| Concern | Affected versions | Migration action | Deadline | Notes |
+| --- | --- | --- | --- | --- |
+| legacy aliases and mixed status vocabulary | pre-canonical docs | unificar para taxonomia canonica (Active/Partial/Declared-only/...) | next-doc-cycle | manter backward compatibility documentada |
+
+## Source references
+
+| Source type | Path/URL | Why it is source of truth | Last verified (YYYY-MM-DD) | Notes |
+| --- | --- | --- | --- | --- |
+| local-file | projects/praxis-list/src/lib/components/list-skin-preview.component.ts | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |
+| local-file | projects/praxis-list/src/lib/components/list-skin-preview.component.html | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |
+| local-file | projects/praxis-list/src/lib/components/list-skin-preview.component.scss | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |
+| local-file | projects/praxis-list/src/lib/services/list-skin.service.ts | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |
+| local-file | projects/praxis-list/src/lib/utils/template-evaluator.ts | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |
+| local-file | projects/praxis-list/src/lib/models/list-config.model.ts | Evidencia de implementacao e contrato. | 2026-03-05 | referencia preservada da versao anterior |