@praxisui/dynamic-fields 8.0.0-beta.6 → 8.0.0-beta.60

package/src/lib/components/color-picker/pdx-color-picker.json-api.md

@@ -0,0 +1,686 @@
+---
+title: "pdx-color-picker JSON API (Canonical)"
+slug: "pdx-color-picker-json-api"
+doc_type: "api-reference"
+component: "pdx-color-picker"
+document_kind: "json-api-canonical"
+reference_mode: "canonical"
+contract_format: "json"
+contract_source: "runtime-and-code"
+description: "Referencia canonica do contrato JSON do componente pdx-color-picker."
+category: "components"
+sub_category: "dynamic-fields"
+audience:
+  - "frontend"
+  - "architect"
+  - "platform-team"
+level: "advanced"
+status: "active"
+owner: "praxis-ui"
+source_of_truth:
+  - "projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts"
+  - "projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts"
+  - "projects/praxis-core/src/lib/models/material-field-metadata.interface.ts"
+  - "projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts"
+source_of_truth_last_verified: "2026-03-06"
+last_updated: "2026-03-06"
+toc: true
+sidebar: true
+tags:
+  - "json-api"
+  - "canonical-contract"
+  - "pdx-color-picker"
+api_stability: "canonical"
+schema_verified: true
+runtime_verified: true
+editor_coverage_verified: false
+runtime_scope: "public"
+legacy_paths_present: true
+has_known_mismatches: false
+related_components:
+  - "praxis-table"
+  - "pdx-base-input-runtime-contract"
+  - "pdx-color-input"
+---
+
+# pdx-color-picker
+
+Este documento e a referencia canonica da API JSON de pdx-color-picker.
+
+## 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: Contrato JSON metadata-driven com comportamento definido por runtime e schema associado.
+
+## Purpose and scope
+
+- O componente consome payload JSON metadata-driven e expoe comportamento runtime configuravel por contrato.
+- Esta referencia cobre contrato publico, classificacao de paths e semantica de cobertura (runtime/schema/editor).
+- Fora de escopo: quickstart, tutorial narrativo e notas arquiteturais que nao alteram contrato publico.
+
+## Consulta rapida (obrigatorio)
+
+| Regra/tema | Observado | Canonico desejado | Status | Evidencia |
+| --- | --- | --- | --- | --- |
+| Component id | `pdx-color-picker` | Manter ID canonico estavel e versionado por contrato | Active | frontmatter.component |
+| Primary contract source | `runtime-and-code` | Runtime, schema e docs devem permanecer rastreaveis | Partial | frontmatter.contract_source + source_of_truth |
+| Runtime coverage | `true` | Comportamentos runtime criticos devem ficar explicitamente verificados | Active | `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts` |
+| Schema/type coverage | `true` | Tipos e schema devem refletir paths publicos do contrato | Active | source_of_truth + Detailed API reference |
+| Editor/tooling coverage | `false` | Editor/tooling deve espelhar somente contrato publico suportado | Partial | `projects/praxis-core/src/lib/metadata/field-selector-control-type.constants.ts`, `projects/praxis-dynamic-fields/src/lib/services/component-registry/component-registry.service.ts` |
+| Legacy paths | `true` | Segregar legado de caminhos canonicos com janela de migracao | Partial | frontmatter.legacy_paths_present |
+| Known mismatches | `false` | Registrar observed vs desired de forma auditavel | Active | frontmatter.has_known_mismatches |
+
+## Source of truth
+
+| Source | Kind | Notes |
+| --- | --- | --- |
+| projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts | schema-metadata | Arquivo presente no repositorio e usado como evidencia de contrato. |
+| projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
+| projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | schema-types | Arquivo presente no repositorio e usado como evidencia de contrato. |
+| projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
+
+## Support legend
+
+- **Active**: suportado em runtime e liberado para uso externo.
+- **Partial**: suporte parcial, com restricoes, lacunas ou validacao incompleta.
+- **Declared-only**: declarado em tipos/schema sem evidencia operacional completa.
+- **Schema-only**: presente em schema/tipos sem cobertura runtime confirmada.
+- **Deprecated**: legado suportado por janela de migracao definida.
+
+## Contract status snapshot
+
+| Item | Value | Notes |
+| --- | --- | --- |
+| Reference mode | `canonical` | Deve permanecer canonico |
+| Contract format | `json` | Contrato metadata-driven |
+| Contract source | `runtime-and-code` | Alinhar com source_of_truth |
+| Runtime scope | `public` | Escopo publicado para consumidores |
+| Runtime verified | `true` | Revisar sempre com evidencia de runtime |
+| Schema verified | `true` | Revisar sempre com evidencia de tipos/schema |
+| Editor coverage verified | `false` | Revisar sempre com evidencia de editor/tooling |
+| Legacy paths present | `true` | Segregar legado de contrato canonico |
+| Has known mismatches | `false` | Divergencias devem aparecer em secao dedicada |
+
+## Contract classification (obrigatorio)
+
+### Canonical paths (public contract)
+
+| Path | Type | Required | Default | Status | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `metadata` | object | true | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `readonlyMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `disabledMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `visible` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `presentationMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `metadata.controlType` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `metadata.format` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+| `metadata.views` | array | false | n/a | Partial | See Detailed API reference for runtime semantics. |
+
+### Supported legacy paths
+
+| Legacy path | Canonical replacement | Support window | Runtime behavior | Notes |
+| --- | --- | --- | --- | --- |
+| `metadata.showPreview` | `metadata.boolean` | not-yet-defined | accepted for backward compatibility | Alias inferido da evidencia preservada; validar em runtime. |
+| `metadata.showAlpha` | `metadata.boolean` | not-yet-defined | accepted for backward compatibility | Alias inferido da evidencia preservada; validar em runtime. |
+| `metadata.showPreview` | `metadata.preview` | not-yet-defined | accepted for backward compatibility | Alias inferido da evidencia preservada; validar em runtime. |
+
+### Internal-only paths
+
+Nao ha paths internal-only confirmados no contrato publico desta revisao.
+
+### Experimental paths
+
+Nao ha paths experimentais confirmados no contrato publico desta revisao.
+
+## Public contract surface (obrigatorio)
+
+### Top-level configuration blocks
+
+| Block | Purpose | Required | Merge strategy | Notes |
+| --- | --- | --- | --- | --- |
+| `metadata` | Payload declarativo principal do componente | true | deep-merge | runtime linkage verified for core flows (component specs, 2026-03-06). |
+| `readonlyMode` | Override de readonly no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
+| `disabledMode` | Override de disabled no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
+| `visible` | Override de visibilidade no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
+| `presentationMode` | Renderizacao de apresentacao sem interacao | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
+| `gradientSettings` | Configuracao especifica de runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
+
+### Nested configuration blocks
+
+| Path | Type | Required | Default | Constraints | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `metadata.controlType` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.format` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.views` | array | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.activeView` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.preview` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.showPreview` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.clearButton` | object | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.actionsLayout` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `metadata.showAlpha` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. |
+| `gradientSettings.showOpacity` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. |
+
+### Input bindings (inbound data)
+
+| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `metadata` | object | true | host-json | component-defined | Primary inbound contract payload. |
+| `readonlyMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
+| `disabledMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
+| `visible` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
+| `presentationMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
+
+### Output events
+
+| Event | Payload | Trigger | Stability | Notes |
+| --- | --- | --- | --- | --- |
+| `valueChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `open` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `close` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `cancel` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `activeViewChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `activeColorClick` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `focusEvent` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `blurEvent` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `focusChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `nativeBlur` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+| `nativeChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |
+
+### External side channels
+
+| Channel | Direction | Contract | Failure mode | Notes |
+| --- | --- | --- | --- | --- |
+| `host/services/storage` | bidirectional | component-defined | component-defined | Side channels variam por componente e host; verificar em source_of_truth. |
+
+### Host/runtime dependencies
+
+| Dependency | Required | Environment | Purpose | Notes |
+| --- | --- | --- | --- | --- |
+| `pdx-color-picker.metadata.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts`. |
+| `pdx-color-picker.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts`. |
+| `material-field-metadata.interface.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/models/material-field-metadata.interface.ts`. |
+| `simple-base-input.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts`. |
+
+## Coverage by surface (obrigatorio)
+
+### Coverage matrix (runtime, schema/type, editor/tooling)
+
+| Surface | Verified | Coverage status | Evidence | Notes |
+| --- | --- | --- | --- | --- |
+| Runtime | `true` | Active | `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts` | Core runtime flows verified via focused component specs on 2026-03-06; editor/tooling coverage remains independent. |
+| Schema/Types | `true` | Active | source_of_truth + Detailed API reference | Reconcile schema/types with canonical paths during follow-up when needed. |
+| Editor/Tooling | `false` | Partial | `projects/praxis-core/src/lib/metadata/field-selector-control-type.constants.ts`, `projects/praxis-dynamic-fields/src/lib/services/component-registry/component-registry.service.ts` | Selector/control-type tooling linkage verified via default selector map and registry seeding; visual editor end-to-end coverage remains not-yet-verified. |
+
+### Runtime coverage boundaries
+
+- Ambientes suportados: browser/dev/prod; SSR/hydration appears to be component-dependent unless explicitly verified.
+- Pre-condicoes: payload JSON valido, bindings de host consistentes e dependencias descritas no source_of_truth.
+- Fora de cobertura confirmada: caminhos internos, experimentais ou aliases nao enumerados formalmente.
+
+### Editor and tooling notes
+
+- Evidencia de tooling: selector `pdx-*` mapeado em `DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP` e semeado no `ComponentRegistryService`; editor visual E2E permanece not-yet-verified.
+- O que esta exposto no editor visual depende da cobertura real do workspace e nao deve ser inferido como suporte runtime total.
+- Campos disponiveis apenas via JSON/manual devem continuar no contrato, com rotulo explicito de cobertura parcial.
+- Quando houver divergencia entre editor e runtime, manter mismatch rastreavel em secao dedicada.
+
+## Resolution and precedence model (obrigatorio)
+
+### 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
+
+Alias e defaults devem convergir para paths canonicos; onde nao houver evidencia, manter not-yet-verified de forma explicita.
+
+### Precedence rules
+
+Em conflito entre alias legado e path canonico, priorizar path canonico e registrar janela de migracao do legado.
+
+## Validation and error semantics (obrigatorio)
+
+### Validation model
+
+| Path/Rule | Validation phase | Behavior on fail | Error code / warning | Notes |
+| --- | --- | --- | --- | --- |
+| canonical-paths | parse/runtime | component-defined (warn/reject/default) | not-yet-standardized | Semantica detalhada preservada na referencia tecnica por componente. |
+
+### Invalid and unknown field handling
+
+- Campos desconhecidos: comportamento component-defined (ignore, warn ou reject).
+- Tipos invalidos: pode haver fallback, warning ou falha, conforme runtime especifico.
+- Valores fora de dominio: registrar observed vs desired em Known limitations and mismatches.
+
+### Fail-open / fail-closed behavior
+
+| Condition | Mode | Runtime behavior | Consumer impact |
+| --- | --- | --- | --- |
+| invalid-or-unknown-field | component-defined | not-yet-verified | Pode gerar warning, fallback silencioso ou rejeicao; validar por componente. |
+
+### 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. |
+| mismatch-confirmed | error-or-warning | componente/host observability | Planejar migracao e corrigir contrato/runtime. |
+
+## Detailed API reference
+### Preserved technical reference (normalized from previous revision)
+
+### 1. Visao Geral e Quando Usar
+`pdx-color-picker` e o color picker avancado orientado por JSON em `@praxisui/dynamic-fields`.
+
+Use quando precisar:
+- selecao de cor com abas (gradiente e paleta);
+- fluxo de `Aplicar` / `Cancelar` / `Limpar`;
+- persistencia local de cores customizadas e recentes;
+- conversao de formato (`hex`, `rgb`, `rgba`, `hsl`) e preview.
+
+### 2. API do Componente (Inputs/Outputs)
+| Propriedade | Tipo | Padrao | Obrigatorio | Comportamento |
+| --- | --- | --- | --- | --- |
+| `metadata` | `any` | - | Sim | Payload principal do componente. |
+| `readonlyMode` | `boolean` | `false` | Nao | Sobrescreve leitura no host. |
+| `disabledMode` | `boolean` | `false` | Nao | Sobrescreve estado disabled no host. |
+| `visible` | `boolean` | `true` | Nao | Controla exibicao no host. |
+| `presentationMode` | `boolean` | `false` | Nao | Modo apresentacao (sem edicao). |
+| `valueChange` | `string \| null` | - | Output | Emite valor final ao aplicar alteracao. |
+| `open` | `void` | - | Output | Emite ao abrir fluxo de selecao. |
+| `close` | `void` | - | Output | Emite ao fechar painel. |
+| `cancel` | `void` | - | Output | Emite ao cancelar alteracoes. |
+| `activeViewChange` | `'gradient' \| 'palette'` | - | Output | Emite troca de aba ativa. |
+| `activeColorClick` | `string` | - | Output | Emite clique em swatch da paleta. |
+| `focusEvent` | `void` | - | Output | Emite ao receber foco. |
+| `blurEvent` | `void` | - | Output | Emite ao perder foco. |
+
+### 3. Matriz de Cobertura JSON (Completa)
+#### 3.1 Campos especificos do componente
+| Caminho JSON | Tipo | Status | Comportamento em runtime |
+| --- | --- | --- | --- |
+| `metadata.controlType` | `'colorPicker'` | Ativo | Identifica contrato do componente no host. |
+| `metadata.format` | `'hex' \| 'rgb' \| 'rgba' \| 'hsl'` | Ativo | Define formato final em `onApply()`. |
+| `metadata.views` | `Array<'gradient' \| 'palette'>` | Extensao de runtime | Define abas habilitadas. |
+| `metadata.activeView` | `'gradient' \| 'palette'` | Extensao de runtime | Define aba inicial ativa. |
+| `metadata.preview` | `boolean` | Extensao de runtime | Exibe/oculta preview superior do painel. |
+| `metadata.showPreview` | `boolean` | Ativo | Alias legado de `preview`. |
+| `metadata.clearButton` | `boolean \| object` | Ativo | Configura botao de limpar (icone/tooltip/aria). |
+| `metadata.actionsLayout` | `'start' \| 'end'` | Extensao de runtime | Posiciona botoes de acao no rodape. |
+| `metadata.showAlpha` | `boolean` | Ativo | Alias legado para `gradientSettings.showOpacity`. |
+| `metadata.gradientSettings.showOpacity` | `boolean` | Extensao de runtime | Exibe slider de opacidade. |
+| `metadata.gradientSettings.channel` | `'hsv' \| 'hsl'` | Extensao de runtime | Campo aceito no contrato atual (sem variacao visual completa no MVP). |
+| `metadata.paletteSettings.preset` | `string` | Extensao de runtime | Seleciona preset de paleta (`basic`, `office`, `material`). |
+| `metadata.paletteSettings.colors` | `string[]` | Extensao de runtime | Sobrescreve cores base da paleta. |
+| `metadata.paletteSettings.columns` | `number` | Extensao de runtime | Define colunas da grade de swatches. |
+| `metadata.popupSettings.width` | `number \| string` | Extensao de runtime | Define largura do painel popup. |
+| `metadata.popupSettings.anchor` | `Element` | Extensao de runtime | Campo aceito para evolucao de ancoragem. |
+| `metadata.popupSettings.appendTo` | `Element \| ViewContainerRef` | Extensao de runtime | Campo aceito para evolucao de portal/append. |
+| `metadata.adaptiveMode` | `boolean` | Extensao de runtime | Marca intencao adaptive (MVP ainda usa menu). |
+| `metadata.adaptiveTitle` | `string` | Extensao de runtime | Campo aceito para fluxo adaptive. |
+| `metadata.adaptiveSubtitle` | `any` | Extensao de runtime | Campo aceito para fluxo adaptive. |
+| `metadata.fillMode` | `'solid' \| 'flat' \| 'outline'` | Extensao de runtime | Campo aceito para theming do trigger. |
+| `metadata.rounded` | `'none' \| 'small' \| 'medium' \| 'large' \| 'full'` | Extensao de runtime | Campo aceito para theming do trigger. |
+| `metadata.size` | `'small' \| 'medium' \| 'large'` | Extensao de runtime | Campo aceito para theming do trigger. |
+| `metadata.icon` | `string` | Extensao de runtime | Icone do botao de abrir picker. |
+| `metadata.iconClass` | `string \| string[] \| object` | Extensao de runtime | Campo aceito para classes de icone. |
+| `metadata.svgIcon` | `SVGIcon` | Extensao de runtime | Campo aceito para icone SVG. |
+| `metadata.tabindex` | `number` | Extensao de runtime | Tab order do input. |
+| `metadata.disabled` | `boolean` | Extensao de runtime | Sobrescreve `disabledMode` localmente. |
+| `metadata.readonly` | `boolean` | Extensao de runtime | Sobrescreve `readonlyMode` localmente. |
+| `metadata.visible` | `boolean` | Extensao de runtime | Sobrescreve visibilidade local. |
+| `metadata.presentationMode` | `boolean` | Extensao de runtime | Sobrescreve modo apresentacao local. |
+| `metadata.presetColors` | `string[]` | Declared-only | Declarado na interface de core, sem consumo direto neste componente. |
+| `metadata.allowCustomColors` | `boolean` | Declared-only | Declarado na interface de core, sem flag dedicada no runtime atual. |
+| `metadata.variant` | `'compact' \| 'default' \| 'block'` | Declared-only | Declarado na interface de core, sem template dedicado. |
+| `metadata.showInput` | `boolean` | Declared-only | Declarado na interface de core, sem toggle especifico do input. |
+
+#### 3.2 Campos herdados compartilhados (exaustivo)
+Contrato completo dos campos herdados consumidos por `SimpleBaseInput`:
+- [pdx-base-input-runtime-contract.json-api.md](projects/praxis-dynamic-fields/src/lib/base/pdx-base-input-runtime-contract.json-api.md)
+
+Resumo de composicao deste componente:
+- `Ativo`: campos legado/compativeis de `MaterialColorPickerMetadata` + clear.
+- `Extensao de runtime`: contrato avancado de views/palette/popup/theming.
+- `Declared-only`: parte da interface de core ainda sem efeito no template atual.
+
+### 4. Mapeamento de Comportamento
+- Paginacao: nao se aplica.
+- Ordenacao: nao se aplica.
+- Selecao: valor de cor em string, aplicado apenas ao confirmar (`Aplicar`).
+- Eventos: `open`, `close`, `cancel`, `activeViewChange`, `activeColorClick`, `valueChange`.
+- Renderizacao: `mat-form-field` + painel com tabs, preview, swatches e acoes.
+
+### 5. Exemplo Minimo (JSON + Uso)
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "brandColor",
+    "label": "Cor da marca",
+    "controlType": "colorPicker",
+    "format": "hex"
+  }
+}
+```
+Uso: abre seletor de cor e retorna valor no formato hexadecimal ao clicar em `Aplicar`.
+
+### 6. Exemplo Corporativo (JSON + Uso)
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "statusColor",
+    "label": "Cor do status",
+    "controlType": "colorPicker",
+    "format": "rgba",
+    "views": ["gradient", "palette"],
+    "activeView": "palette",
+    "preview": true,
+    "clearButton": {
+      "enabled": true,
+      "showOnlyWhenFilled": true,
+      "tooltip": "Limpar cor"
+    },
+    "actionsLayout": "end",
+    "showAlpha": true,
+    "paletteSettings": {
+      "preset": "office",
+      "columns": 6,
+      "colors": ["#0057B8", "#F28C00", "#009739", "#E30613"]
+    },
+    "popupSettings": {
+      "width": 420
+    },
+    "adaptiveMode": true,
+    "adaptiveTitle": "Escolher cor",
+    "rounded": "medium",
+    "size": "medium",
+    "icon": "mi:palette",
+    "tabindex": 0,
+    "hint": "Use apenas cores homologadas de branding."
+  }
+}
+```
+Uso: configura fluxo corporativo completo de escolha de cor com alpha, paleta padronizada e controles de UX.
+
+### 7. Troubleshooting e Armadilhas Comuns
+1. Esperar que `adaptiveMode=true` troque automaticamente para bottom sheet.
+Correcao: no runtime atual o fluxo principal ainda usa `mat-menu`; `adaptiveMode` e preparatorio.
+
+2. Definir `presetColors` e nao ver efeito.
+Correcao: o componente usa `paletteSettings.colors`; `presetColors` da interface de core nao e consumido diretamente.
+
+3. Esperar atualizacao de valor sem clicar `Aplicar`.
+Correcao: mudancas ficam em rascunho (`draft`) ate confirmar com `Aplicar`.
+
+4. Preencher `showInput` ou `variant` e nao notar mudanca visual.
+Correcao: esses campos estao declarados na interface, mas ainda sem comportamento dedicado no template atual.
+
+5. Perder historico de cores recentes/customizadas.
+Correcao: persistencia usa `localStorage`; verificar politica corporativa do navegador/sandbox.
+
+### 8. Cross-links
+- `projects/praxis-dynamic-fields/src/lib/base/pdx-base-input-runtime-contract.json-api.md`
+- `projects/praxis-dynamic-fields/src/lib/components/color-input/pdx-color-input.json-api.md`
+- `projects/praxis-dynamic-fields/src/lib/components/material-colorpicker/material-colorpicker.component.ts`
+
+### 9. Relatorio de Validacao Estrutural
+- Visao geral: PASS
+- API (inputs/outputs): PASS
+- Cobertura JSON completa (especifico + herdado): PASS
+- Mapeamento de comportamento: PASS
+- Exemplo minimo: PASS
+- Exemplo corporativo: PASS
+- Troubleshooting: PASS
+
+## JSON path index (obrigatorio)
+
+| Path | Type | Required | Default | Status | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `metadata` | object | true | n/a | Partial | See Detailed API reference. |
+| `readonlyMode` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `disabledMode` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `visible` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `presentationMode` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `metadata.controlType` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.format` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.views` | array | false | n/a | Partial | See Detailed API reference. |
+| `metadata.activeView` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.preview` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `metadata.showPreview` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `metadata.clearButton` | object | false | n/a | Partial | See Detailed API reference. |
+| `metadata.actionsLayout` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.showAlpha` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `gradientSettings.showOpacity` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `metadata.gradientSettings.showOpacity` | boolean | false | n/a | Partial | See Detailed API reference. |
+| `metadata.gradientSettings.channel` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.paletteSettings.preset` | string | false | n/a | Partial | See Detailed API reference. |
+| `metadata.paletteSettings.colors` | array | false | n/a | Partial | See Detailed API reference. |
+| `metadata.paletteSettings.columns` | array | false | n/a | Partial | See Detailed API reference. |
+
+## Events reference (obrigatorio)
+
+| Event | Payload | Trigger | Stability | Notes |
+| --- | --- | --- | --- | --- |
+| `valueChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `open` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `close` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `cancel` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `activeViewChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `activeColorClick` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `focusEvent` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `blurEvent` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `focusChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `nativeBlur` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+| `nativeChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. |
+
+## Styling API (obrigatorio quando aplicavel)
+
+| Token/Class | Scope | Purpose | Notes |
+| --- | --- | --- | --- |
+| `metadata.paletteSettings.colors` | component | Styling-related JSON path | Validate against runtime implementation. |
+
+## Examples (obrigatorio)
+
+| Example | Scenario | Validates | Notes |
+| --- | --- | --- | --- |
+| `Minimal valid` | baseline payload | required contract blocks | Extracted from preserved technical reference when available. |
+| `Common setup` | common component usage | standard runtime behavior | Validate against host integration path. |
+| `Advanced setup` | richer config with overrides | precedence and normalization | Requires runtime confirmation for edge cases. |
+| `Enterprise scenario` | governance/legacy/migration context | auditability and compatibility boundaries | Include tenant-specific constraints when applicable. |
+
+### Minimal valid
+
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "brandColor",
+    "label": "Cor da marca",
+    "controlType": "colorPicker",
+    "format": "hex"
+  },
+  "readonlyMode": false
+}
+```
+
+### Common setup
+
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "statusColor",
+    "label": "Cor do status",
+    "controlType": "pdx-color-picker-common",
+    "format": "rgba",
+    "views": [
+      "gradient",
+      "palette"
+    ],
+    "activeView": "palette",
+    "preview": true,
+    "clearButton": {
+      "enabled": true,
+      "showOnlyWhenFilled": true,
+      "tooltip": "Limpar cor"
+    },
+    "actionsLayout": "end",
+    "showAlpha": true,
+    "paletteSettings": {
+      "preset": "office",
+      "columns": 6,
+      "colors": [
+        "#0057B8",
+        "#F28C00",
+        "#009739",
+        "#E30613"
+      ]
+    },
+    "popupSettings": {
+      "width": 420
+    },
+    "adaptiveMode": true,
+    "adaptiveTitle": "Escolher cor",
+    "rounded": "medium",
+    "size": "medium",
+    "icon": "mi:palette",
+    "tabindex": 0,
+    "hint": "Use apenas cores homologadas de branding."
+  }
+}
+```
+
+### Advanced setup
+
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "statusColor",
+    "label": "Cor do status",
+    "controlType": "colorPicker",
+    "format": "rgba",
+    "views": [
+      "gradient",
+      "palette"
+    ],
+    "activeView": "palette",
+    "preview": true,
+    "clearButton": {
+      "enabled": true,
+      "showOnlyWhenFilled": true,
+      "tooltip": "Limpar cor"
+    },
+    "actionsLayout": "end",
+    "showAlpha": true,
+    "paletteSettings": {
+      "preset": "office",
+      "columns": 6,
+      "colors": [
+        "#0057B8",
+        "#F28C00",
+        "#009739",
+        "#E30613"
+      ]
+    },
+    "popupSettings": {
+      "width": 5
+    },
+    "adaptiveMode": true,
+    "adaptiveTitle": "Escolher cor",
+    "rounded": "medium",
+    "size": "medium",
+    "icon": "mi:palette",
+    "tabindex": 0,
+    "hint": "Use apenas cores homologadas de branding."
+  },
+  "readonlyMode": false,
+  "disabledMode": false
+}
+```
+
+### Enterprise scenario
+
+```json
+{
+  "componentId": "pdx-color-picker",
+  "metadata": {
+    "name": "statusColor",
+    "label": "Cor do status",
+    "controlType": "colorPicker",
+    "format": "rgba",
+    "views": [
+      "gradient",
+      "palette"
+    ],
+    "activeView": "palette",
+    "preview": true,
+    "clearButton": {
+      "enabled": true,
+      "showOnlyWhenFilled": true,
+      "tooltip": "Limpar cor"
+    },
+    "actionsLayout": "end",
+    "showAlpha": true,
+    "paletteSettings": {
+      "preset": "office",
+      "columns": 6,
+      "colors": [
+        "#0057B8",
+        "#F28C00",
+        "#009739",
+        "#E30613"
+      ]
+    },
+    "popupSettings": {
+      "width": 420
+    },
+    "adaptiveMode": true,
+    "adaptiveTitle": "Escolher cor",
+    "rounded": "medium",
+    "size": "medium",
+    "icon": "mi:palette",
+    "tabindex": 0,
+    "hint": "Use apenas cores homologadas de branding."
+  },
+  "presentationMode": true,
+  "visible": true
+}
+```
+
+## Compatibility and migration notes (recomendado)
+
+| Concern | Affected versions | Migration action | Deadline | Notes |
+| --- | --- | --- | --- | --- |
+| Legacy aliases coexist with canonical paths | Active consumers using legacy JSON keys | Keep canonical paths for new usage and map aliases in migration backlog | not-yet-defined | Track via component-level migration issue |
+
+## Known limitations and mismatches (recomendado)
+
+| Path/Behavior | Observed behavior (runtime) | Desired behavior | Impact | Tracking issue | Target fix |
+| --- | --- | --- | --- | --- | --- |
+| Canonical contract parity | No confirmed mismatch in this revision; runtime linkage verified for core flows (2026-03-06), with editor/tooling coverage pending | Keep runtime/schema/editor alignment evidence updated | Low | n/a | Monitor in periodic audit |
+
+## Source references (obrigatorio)
+
+| Source type | Path/URL | Why it is source of truth | Last verified (YYYY-MM-DD) | Notes |
+| --- | --- | --- | --- | --- |
+| schema-metadata | projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.metadata.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
+| runtime-code | projects/praxis-dynamic-fields/src/lib/components/color-picker/pdx-color-picker.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
+| schema-types | projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
+| runtime-code | projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |