@praxisui/stepper 9.0.0-beta.0 → 9.0.0-beta.2

package/README.md

@@ -1,7 +1,7 @@
 ---
 title: "Stepper"
 slug: "stepper-overview"
-description: "Visao geral do @praxisui/stepper com fluxo multi-etapas, persistencia por stepperId, integracao com dynamic-form e editor embutido."
+description: "Public npm documentation for @praxisui/stepper: metadata-driven multi-step workflows, dynamic-form steps, persistence, widget composition and runtime authoring."
 doc_type: "reference"
 document_kind: "component-overview"
 component: "stepper"
@@ -24,7 +24,7 @@ icon: "list-todo"
 toc: true
 sidebar: true
 search_boost: 1.0
-reading_time: 12
+reading_time: 5
 estimated_setup_time: 20
 version: "1.0"
 related_docs:
@@ -37,352 +37,143 @@ keywords:
   - "wizard form"
   - "stepper metadata"
   - "stepperId persistence"
-last_updated: "2026-03-07"
+last_updated: "2026-06-16"
 ---
 
 # @praxisui/stepper
 
-## Documentation
+`@praxisui/stepper` renders metadata-driven multi-step workflows for Praxis UI Angular applications. Install it when a host needs a wizard shell with dynamic forms, rich content, nested widgets, persisted configuration, runtime editing and governed authoring.
 
-- Documentação oficial: https://praxisui.dev/components/stepper
-- Aplicação de referência: https://github.com/codexrodrigues/praxis-ui-quickstart
-- Demo publicado: https://praxis-ui-4e602.web.app
-- Indicado para: fluxos multi-etapas com formularios, uploads, listas e pagina builder no mesmo wizard
+The stepper owns workflow navigation and step composition. The host owns resource services, submit orchestration, remote validation, authorization and durable domain state.
 
-## When to use
-
-- Construir wizards com multiplas etapas e contratos compartilhados
-- Reutilizar formularios, uploads, listas e widgets dentro do mesmo fluxo
-- Persistir configuracao de stepper sem reinventar navegacao e edicao
-
-Componente stepper standalone com integração opcional ao `@praxisui/dynamic-form`, suporte a ícones Material Icons/Symbols e editor de configuração embutido.
-
-## Instalação
-
-Instale a biblioteca junto com as dependências pares (peer dependencies) exigidas pelo componente e pelo editor de configuração:
+## Install
 
 ```bash
-npm i @praxisui/stepper@beta \
-      @praxisui/core @praxisui/dynamic-form @praxisui/settings-panel \
-      @praxisui/list @praxisui/files-upload @praxisui/page-builder
+npm i @praxisui/stepper@latest
 ```
 
 Peer dependencies:
-- `@angular/core` `^21.0.0`
-- `@angular/common` `^21.0.0`
-- `@angular/material` `^21.0.0`
-- `@angular/cdk` `^21.0.0`
-- `@angular/forms` `^21.0.0`
-- `@angular/router` `^21.0.0`
-- `@praxisui/core` `^9.0.0-beta.0`
-- `@praxisui/dynamic-form` `^9.0.0-beta.0`
-- `@praxisui/rich-content` `^9.0.0-beta.0`
-- `@praxisui/settings-panel` `^9.0.0-beta.0`
-- `@praxisui/list` `^9.0.0-beta.0`
-- `@praxisui/files-upload` `^9.0.0-beta.0`
-- `@praxisui/page-builder` `^9.0.0-beta.0`
-- `@praxisui/ai` `^9.0.0-beta.0`
-- `rxjs` `~7.8.0`
 
-## Quick Start
+- `@angular/common`, `@angular/core`, `@angular/forms`, `@angular/router`, `@angular/cdk`, `@angular/material` `^21.0.0`
+- `@praxisui/core`, `@praxisui/dynamic-form`, `@praxisui/rich-content`, `@praxisui/settings-panel`, `@praxisui/list`, `@praxisui/files-upload`, `@praxisui/page-builder`, `@praxisui/ai` `^9.0.0-beta.1`
+- `rxjs` `~7.8.0`
 
-### Uso básico
+## Minimal Stepper
 
 ```ts
 import { Component } from '@angular/core';
-import { PraxisStepper } from '@praxisui/stepper';
+import { PraxisStepper, type StepperMetadata } from '@praxisui/stepper';
 
 @Component({
   selector: 'app-onboarding',
   standalone: true,
   imports: [PraxisStepper],
   template: `
-    <praxis-stepper stepperId="stepper-demo" [config]="config" [enableCustomization]="true"></praxis-stepper>
+    <praxis-stepper
+      stepperId="employee-onboarding"
+      [config]="config"
+      [enableCustomization]="true"
+      (selectedIndexChange)="selectedIndex = $event"
+    />
   `,
 })
 export class OnboardingComponent {
-  config = {
+  selectedIndex = 0;
+
+  readonly config: StepperMetadata = {
     orientation: 'horizontal',
     headerPosition: 'top',
     linear: true,
     steps: [
-      { id: 'profile', label: 'Perfil' },
-      { id: 'confirm', label: 'Confirmação' },
+      { id: 'profile', label: 'Profile' },
+      { id: 'review', label: 'Review' },
     ],
-    navigation: { nextLabel: 'Avançar', prevLabel: 'Voltar' },
-  } as const;
+    navigation: { nextLabel: 'Next', prevLabel: 'Back' },
+  };
 }
 ```
 
-### Persistência
+## Dynamic Form Steps
 
-- `stepperId` é obrigatório para salvar/carregar a configuração.
-- A chave usada no storage é `stepper-config:<component_id>` (via `ComponentKeyService`).
-- Use `componentInstanceId` quando houver múltiplos steppers com o mesmo `stepperId` na mesma rota.
-
-### Integração com Dynamic Form (por etapa)
+Each step can host a `@praxisui/dynamic-form` configuration. Use canonical resource paths without `/api`, `/filter` or `/{id}`.
 
 ```ts
-import { Component } from '@angular/core';
-import { PraxisStepper } from '@praxisui/stepper';
-
-@Component({
-  selector: 'app-cadastro',
-  standalone: true,
-  imports: [PraxisStepper],
-  template: `<praxis-stepper stepperId="stepper-demo" [config]="config"></praxis-stepper>`,
-})
-export class CadastroComponent {
-  config = {
-    linear: true,
-    steps: [
-      {
-        id: 'dados',
-        label: 'Dados do Cliente',
-        form: {
-          resourcePath: 'human-resources/funcionarios',
-          mode: 'create',
-          // ou forneça FormConfig diretamente
-          // config: { sections: [...] }
-        },
+const config: StepperMetadata = {
+  linear: true,
+  steps: [
+    {
+      id: 'employee',
+      label: 'Employee',
+      form: {
+        resourcePath: 'human-resources/employees',
+        mode: 'create',
       },
-      {
-        id: 'endereco',
-        label: 'Endereço',
-        form: { resourcePath: 'human-resources/enderecos', mode: 'create' },
+    },
+    {
+      id: 'address',
+      label: 'Address',
+      form: {
+        resourcePath: 'human-resources/addresses',
+        mode: 'create',
       },
-    ],
-  };
-}
+    },
+  ],
+};
 ```
 
-Validação: em modo `linear`, o avanço bloqueia quando o formulário da etapa atual é inválido. Para validação remota, forneça `(serverValidate)` ao componente.
-
-Observação sobre `resourcePath`:
-- use o caminho base canônico do recurso, sem `/api`, `/filter` ou `/{id}`. Ex.: `human-resources/funcionarios`.
-
-Observação de host:
-- ao usar `form.resourcePath` em uma etapa, o `praxis-dynamic-form` remoto continua dependendo de `GenericCrudService` provido pelo host efetivo;
-- se o host precisar de `endpointKey` específico ou pré-configuração de CRUD, configure a mesma instância antes de renderizar o stepper;
-- não presumir que o stepper sozinho resolve a DI de CRUD do formulário remoto.
+In `linear` mode, the next action is blocked when the current step form is invalid. Provide `serverValidate` when the host needs remote validation before navigation.
 
 ```html
-<praxis-stepper stepperId="stepper-demo"
+<praxis-stepper
+  stepperId="employee-flow"
   [config]="config"
   [serverValidate]="validateStep"
-></praxis-stepper>
+/>
 ```
 
 ```ts
-validateStep = async ({ step, formGroup, formData }) => {
-  // Chamada remota opcional
-  const ok = await Promise.resolve(true);
-  return { ok };
+validateStep = async ({ step, stepIndex, formGroup, formData }) => {
+  return { ok: true };
 };
 ```
 
-## API Surface
-
-- Componentes: `PraxisStepper`, `PraxisStepperConfigEditor`
-- Tipos: `StepperMetadata`, `StepConfig`, `StepOrientation`, `StepHeaderPosition`
-- Authoring AI: `PRAXIS_STEPPER_AUTHORING_MANIFEST`
-- Eventos: `selectedIndexChange`, `selectionChange`, `widgetEvent`, `animationDone`, `stepFormReady`, `stepFormValueChange`
-- Veja: `projects/praxis-stepper/src/public-api.ts`
-
-## Agentic Authoring
-
-O contrato executavel de authoring fica em `PRAXIS_STEPPER_AUTHORING_MANIFEST`.
-Ele modela edicoes em `StepperMetadata` por operacoes atomicas sobre etapas,
-navegacao, orientacao, estados de conclusao e validacao.
+Remote dynamic forms still require the effective host to provide the CRUD/resource services expected by `@praxisui/dynamic-form`.
 
-Quando `enableCustomization` esta ativo, o runtime abre o `PraxisAiAssistantShellComponent`
-com contexto semantico do stepper e registra a sessao no dock global de assistentes.
-O assistente envia estado atual, perfil das etapas, campos de schema e referencia ao
-manifesto de authoring para a IA. Patches JSON livres nao sao aplicados no runtime:
-mudancas locais devem nascer de um `componentEditPlan` validado pelo manifesto, e
-regras compartilhadas seguem por `domain-rules/intake`.
+## Main Inputs And Outputs
 
-Cobertura principal:
+- `stepperId: string`: required stable id for persisted configuration.
+- `componentInstanceId?: string`: disambiguates repeated instances on the same route.
+- `config: StepperMetadata | string | null`: workflow metadata.
+- `selectedIndex` / `selectedIndexInput`: externally controlled active step.
+- `enableCustomization: boolean`: opens runtime editing and semantic assistant affordances.
+- `labelPosition`, `color`, `disableRippleInput`, `stepperContext`, `serverValidate`: visual, context and validation hooks.
+- `selectedIndexChange`, `selectionChange`, `animationDone`: navigation events.
+- `stepFormReady`, `stepFormValueChange`: dynamic-form step events.
+- `widgetEvent`: legacy/advanced bridge for nested widget events.
 
-- `step.add`, `step.remove`, `step.label.set`, `step.order.set`
-- `step.optional.set`, `step.completed.set`
-- `navigation.mode.set`
-- `orientation.set`
-- `validation.rule.add`
-- `step.content.set`
+## Metadata Shape
 
-As operacoes preservam `steps[].id` como identidade canonica. Remover uma
-etapa com formulario, rich content ou widgets exige confirmacao explicita. Regras
-de validacao devem ser projetadas em `steps[].form.config` ou delegadas ao
-`serverValidate` do host; o stepper nao define uma DSL paralela de validacao.
+`StepperMetadata` supports horizontal or vertical layout, linear validation, appearance tokens, Material icon overrides, navigation labels and step definitions. `StepConfig` supports dynamic form config, rich content before/after the form, advanced nested widgets and accessibility labels.
 
-Cada operacao declara `target.resolver`, `preconditions`, `validators`,
-`affectedPaths`, `effects` e `submissionImpact` tipado. Edicoes de conteudo de
-etapa podem afetar dados schema-backed porque `steps[].form.config` hospeda o
-`FormConfig` do `praxis-dynamic-form`; widgets filhos continuam governados pelos
-contratos dos respectivos componentes.
+Prefer `stepBlocksBeforeForm` and `stepBlocksAfterForm` for editorial content. Use `steps[].widgets` only for advanced host-owned components such as upload or list flows that are not represented by rich content.
 
-## Conteudo Editorial por Etapa
+## Wizard Wrapper
 
-O conteudo editorial do stepper usa a mesma base de rich content da plataforma:
+`PraxisWizardFormComponent` maps a higher-level wizard JSON contract into `StepperMetadata` plus `FormConfig`. Use `<praxis-wizard-form wizardId="..." [config]="config" />` with `(submit)`, `(completed)` and `(customAction)` when the host wants a guided form wrapper instead of composing `PraxisStepper` directly.
 
-- `steps[].stepBlocksBeforeForm`: `RichContentDocument` renderizado antes do formulario da etapa
-- `steps[].stepBlocksAfterForm`: `RichContentDocument` renderizado depois do formulario da etapa
-- `steps[].widgets`: reservado para componentes avancados host-owned, como listas de selecao e upload, quando nao houver equivalente canonico em rich content
+## Persistence And Authoring
 
-Novo authoring nao deve usar `widgetsBeforeForm` para copy, cards, avisos ou conteudo editorial. O wizard adapter converte `blocks`, `zones` e `cards` para `RichContentDocument` automaticamente.
-
-## Wizard Form (FT-like) — Experimental
-
-O `PraxisWizardFormComponent` é um wrapper experimental que traduz um JSON de wizard em `StepperMetadata` + `FormConfig` e aplica um layout inspirado no Financial Times.
-
-```ts
-import { PraxisWizardFormComponent, FT_WIZARD_CONFIG } from '@praxisui/stepper';
-
-@Component({
-  selector: 'app-ft-wizard',
-  standalone: true,
-  imports: [PraxisWizardFormComponent],
-  template: `<praxis-wizard-form wizardId="ft-demo" [config]="config" />`,
-})
-export class FtWizardDemo {
-  config = FT_WIZARD_CONFIG;
-}
-```
-
-Notas:
-- `stepBlocksBeforeForm` e `stepBlocksAfterForm` recebem rich content antes/depois do formulário em cada etapa.
-- `blocks` (wizard) permite inserir conteúdos editoriais (benefits/content/notice/divider) antes ou depois do formulário; o adapter converte esses blocos para `RichContentDocument`.
-- `zones` (wizard) permite separar blocos em `intro`, `body` e `footer` (mapeados para before/after form).
-- `contentBlock` e demais blocos editoriais convergem para nodes de rich content no novo contrato, sem criar widgets locais para novo authoring.
-- Cada bloco pode definir `id` (string) para gerar `blockId` estável em runtime; sem `id`, o fallback usa índice posicional.
-- `blocks` e `zones` são mutuamente exclusivos no contrato. Se ambos forem enviados, `zones` tem prioridade no runtime.
-- O wizard faz validação runtime (campos essenciais e exclusividade de `blocks`/`zones`). Em `devMode`, lança erro para facilitar o debug; em produção, emite `console.warn`.
-- A CTA primária reaproveita a validação do `PraxisStepper` interno; em `submit`, a etapa atual também é validada antes da emissão.
-- `cta.action = 'custom'` emite `(customAction)` no wizard para orquestração externa do host.
-- Preset visual recomendado para FT-like: `appearance.preset = 'ft-light'` (aplicado automaticamente no wizard).
-
-## Tokens de tema (Wizard)
-
-O wizard usa **tokens M3** por padrão. Se for necessário sobrescrever algo específico do wizard, use tokens da própria lib, sempre apontando para tokens M3 no tema do host:
-
-```scss
-:root {
-  --praxis-wizard-bg: var(--md-sys-color-surface-container-low);
-  --praxis-wizard-card-bg: var(--md-sys-color-surface);
-  --praxis-wizard-border: var(--md-sys-color-outline-variant);
-  --praxis-wizard-muted: var(--md-sys-color-on-surface-variant);
-  --praxis-wizard-accent: var(--md-sys-color-primary);
-  --praxis-wizard-accent-on: var(--md-sys-color-on-primary);
-}
-```
-
-Tokens disponíveis:
-- `--praxis-wizard-bg`
-- `--praxis-wizard-card-bg`
-- `--praxis-wizard-border`
-- `--praxis-wizard-muted`
-- `--praxis-wizard-accent`
-- `--praxis-wizard-accent-on`
-- A persistência de progresso e preferências usa `CONFIG_STORAGE` (localStorage por padrão).
-- JSON Schema: `projects/praxis-stepper/src/lib/wizard/praxis-wizard-form.schema.json`.
-- Personalização de cor do stepper (sem hardcode): ajuste `--praxis-wizard-accent` no host ou em `:root` para controlar o estado ativo/concluído.
-- `appearance.tokens` aplica variáveis CSS diretamente no host do stepper; use nomes com ou sem prefixo `--`.
-- Para evitar `::ng-deep`, use `stepperClass` e `contentClass` no metadata e aplique estilos em um stylesheet global do app (ou em presets internos da lib).
-
-```scss
-:root {
-  --praxis-wizard-accent: var(--md-sys-color-primary);
-}
-```
-
-# Praxis Stepper — Guia de Estilos e Ícones
-
-Este guia explica como personalizar estilos (tokens) e ícones do cabeçalho do stepper em apps que consomem a lib `@praxisui/stepper`.
-
-## Conjuntos de Ícones (Material Icons vs Material Symbols)
-
-O Angular Material, por padrão, usa o conjunto “Material Icons” (ligature). Ícones como `repeat` funcionam imediatamente. Já ícones como `counter_1` pertencem ao “Material Symbols” e precisam de fonte + classe próprias.
-
-### Ativar Material Symbols (Outlined)
-
-No seu app host (ex.: `src/styles.scss` ou `projects/<app>/src/styles.scss`), adicione:
-
-```scss
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
-
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px; /* tamanho padrão do ícone */
-  line-height: 1;
-  display: inline-block;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-```
-
-Se preferir Rounded/Sharp, importe a família correspondente e use `.material-symbols-rounded` ou `.material-symbols-sharp`.
-
-### Selecionar o conjunto no editor do Stepper
-
-Na aba “Aparência” do editor:
-- Selecione “Conjunto de ícones”: 
-  - “Material Icons (padrão)” para ícones clássicos (ex.: `repeat`, `looks_one`).
-  - “Material Symbols (Outlined/Rounded/Sharp)” para ícones como `counter_1`, `replace_image` etc.
-- Escolha os ícones para estados: número, concluído, edição, erro. O preview reflete o conjunto selecionado.
-
-O componente aplica a classe (`material-symbols-*`) quando um conjunto Symbols é escolhido, exibindo corretamente os nomes selecionados.
-
-## Tokens de Estilo com `mat.stepper-overrides`
-
-Para personalizações visuais (cores, tipografia, densidade), use os tokens do Angular Material. No editor, a aba “Aparência” permite editar tokens e copia um snippet SCSS pronto:
-
-```scss
-:root {
-  @include mat.stepper-overrides((
-    container-color: var(--md-sys-color-surface),
-    header-label-text-color: var(--md-sys-color-on-surface),
-    header-height: 48px,
-  ));
-}
-```
-
-Cole o snippet no arquivo de tema do seu app. Você pode trocar `:root` por uma classe para escopo local.
-
-## Dicas de Uso
-
-- Altura do cabeçalho / Tamanho do texto / Peso do texto: edite pelos campos rápidos — o editor converte automaticamente para tokens (`header-height`, `header-label-text-size`, `header-label-text-weight`).
-- Ícones pelo site do Google: copie o nome do ícone em https://fonts.google.com/icons e cole no picker. Não é possível capturar automaticamente a seleção do site.
-- Em Material Symbols, nomes como `counter_1`, `replace_image` exigem que o conjunto esteja corretamente importado e selecionado no editor.
-
-## Exemplo Mínimo de Configuração
-
-```ts
-config = {
-  orientation: 'horizontal',
-  headerPosition: 'top',
-  steps: [
-    { id: 's1', label: 'Dados' },
-    { id: 's2', label: 'Confirmação' },
-  ],
-  appearance: {
-    iconsSet: 'material-symbols-outlined',
-    icons: { number: 'counter_1', done: 'check', edit: 'edit', error: 'error' },
-    tokens: { 'header-height': '48px' },
-  },
-};
-```
+When `stepperId` is provided, configuration is stored through `ASYNC_CONFIG_STORAGE` under a key derived from route, component type, `stepperId` and optional `componentInstanceId`.
 
-Com isso, os ícones e estilos do cabeçalho do stepper serão aplicados como esperado.
+`PRAXIS_STEPPER_AUTHORING_MANIFEST` describes governed AI/tooling operations for step add/remove/order, labels, optional/completed state, navigation, orientation, validation and step content. Validation rules must be projected into step form config or delegated to `serverValidate`; the stepper does not define a parallel validation DSL.
 
-## Compatibilidade
+## Public API Snapshot
 
-- `@praxisui/stepper` `0.0.x` → Angular `20.x`
-- Formato de módulo: `ESM2022`
+Main exports include `PraxisStepper`, `PraxisStepperConfigEditor`, `PraxisStepperWidgetConfigEditor`, `StepperMetadata`, `StepConfig`, stepper metadata provider, wizard form component/types/config, AI capabilities and `PRAXIS_STEPPER_AUTHORING_MANIFEST`.
 
-## Licença
+## Official Links
 
-Apache-2.0 – veja o `LICENSE` empacotado com esta biblioteca ou o arquivo `LICENSE` na raiz do repositório.
+- Documentation: https://praxisui.dev/components/stepper
+- Live demo: https://praxis-ui-4e602.web.app
+- Quickstart repository: https://github.com/codexrodrigues/praxis-ui-quickstart
+- Source and issues: https://github.com/codexrodrigues/praxis-ui-angular

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@praxisui/stepper",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.2",
   "description": "Stepper workflows for Praxis UI with integrated forms, lists, uploads and page builder support.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^9.0.0-beta.0",
-    "@praxisui/dynamic-form": "^9.0.0-beta.0",
-    "@praxisui/rich-content": "^9.0.0-beta.0",
-    "@praxisui/settings-panel": "^9.0.0-beta.0",
-    "@praxisui/list": "^9.0.0-beta.0",
-    "@praxisui/files-upload": "^9.0.0-beta.0",
-    "@praxisui/page-builder": "^9.0.0-beta.0",
+    "@praxisui/core": "^9.0.0-beta.2",
+    "@praxisui/dynamic-form": "^9.0.0-beta.2",
+    "@praxisui/rich-content": "^9.0.0-beta.2",
+    "@praxisui/settings-panel": "^9.0.0-beta.2",
+    "@praxisui/list": "^9.0.0-beta.2",
+    "@praxisui/files-upload": "^9.0.0-beta.2",
+    "@praxisui/page-builder": "^9.0.0-beta.2",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.0-beta.0",
+    "@praxisui/ai": "^9.0.0-beta.2",
     "rxjs": "~7.8.0"
   },
   "dependencies": {
@@ -28,7 +28,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/codexrodrigues/praxis-ui-angular"
+    "url": "git+https://github.com/codexrodrigues/praxis-ui-angular.git"
   },
   "homepage": "https://praxisui.dev",
   "bugs": {