@praxisui/stepper 1.0.0-beta.29 → 1.0.0-beta.40

package/fesm2022/praxisui-stepper.mjs

@@ -1,14 +1,15 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Inject, Component, inject, signal, EventEmitter, computed, TemplateRef, Output, Input, ContentChild, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Inject, Component, inject, signal, EventEmitter, computed, TemplateRef, Output, Input, ContentChild, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER, isDevMode, ElementRef, Renderer2, effect, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import * as i2$1 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { IconPickerService, PraxisIconDirective, DynamicWidgetLoaderDirective, EmptyStateCardComponent, ComponentMetadataRegistry } from '@praxisui/core';
+import { IconPickerService, PraxisIconDirective, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, DynamicWidgetLoaderDirective, EmptyStateCardComponent, ComponentMetadataRegistry, createCorporateLoggerConfig, ConsoleLoggerSink, CONFIG_STORAGE } from '@praxisui/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PraxisDynamicFormConfigEditor, PraxisDynamicForm } from '@praxisui/dynamic-form';
@@ -30,7 +31,9 @@ import * as i11 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i12 from '@angular/material/tabs';
+import * as i12 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i13 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BehaviorSubject } from 'rxjs';
 import { PraxisListConfigEditor } from '@praxisui/list';
@@ -38,6 +41,8 @@ import { PraxisFilesUploadConfigEditor } from '@praxisui/files-upload';
 import { ComponentPaletteDialogComponent } from '@praxisui/page-builder';
 import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
+import { take } from 'rxjs/operators';
 
 class SelectQuickConfigDialogComponent {
     ref;
@@ -136,6 +141,340 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+class WizardWidgetConfigDialogComponent {
+    ref;
+    wizardWidgetId;
+    dialogTitle;
+    model;
+    originalInputs;
+    constructor(ref, data) {
+        this.ref = ref;
+        const id = (data?.widgetId || '');
+        this.wizardWidgetId = this.isWizardWidgetId(id) ? id : null;
+        this.originalInputs = { ...(data?.inputs || {}) };
+        this.model = this.buildDraft(this.originalInputs);
+        this.dialogTitle = this.resolveTitle(this.wizardWidgetId);
+    }
+    get benefits() {
+        if (!Array.isArray(this.model.items))
+            this.model.items = [];
+        return this.model.items;
+    }
+    addBenefit() {
+        this.benefits.push({ title: '', text: '', icon: '' });
+    }
+    removeBenefit(index) {
+        this.benefits.splice(index, 1);
+    }
+    cancel() {
+        this.ref.close();
+    }
+    save() {
+        const next = { ...this.originalInputs, ...this.buildInputsForWidget() };
+        if (typeof next.blockId === 'string') {
+            next.blockId = next.blockId.trim();
+        }
+        if (!next.blockId)
+            delete next.blockId;
+        this.ref.close({ inputs: next });
+    }
+    isWizardWidgetId(value) {
+        return (value === 'praxis-wizard-benefits'
+            || value === 'praxis-wizard-content'
+            || value === 'praxis-wizard-inline-notice'
+            || value === 'praxis-wizard-divider');
+    }
+    resolveTitle(id) {
+        switch (id) {
+            case 'praxis-wizard-benefits':
+                return 'Editar grade de benefícios';
+            case 'praxis-wizard-content':
+                return 'Editar bloco de conteúdo';
+            case 'praxis-wizard-inline-notice':
+                return 'Editar aviso inline';
+            case 'praxis-wizard-divider':
+                return 'Editar divisor';
+            default:
+                return 'Editar Widget do Wizard';
+        }
+    }
+    buildDraft(inputs) {
+        return {
+            blockId: inputs.blockId || '',
+            title: inputs.title || '',
+            subtitle: inputs.subtitle || '',
+            text: inputs.text || '',
+            caption: inputs.caption || '',
+            tone: inputs.tone || 'neutral',
+            label: inputs.label || '',
+            columns: Number.isFinite(Number(inputs.columns)) ? Number(inputs.columns) : 4,
+            boxed: !!inputs.boxed,
+            items: Array.isArray(inputs.items)
+                ? inputs.items.map((item) => ({ icon: item?.icon || '', title: item?.title || '', text: item?.text || '' }))
+                : [],
+        };
+    }
+    buildInputsForWidget() {
+        if (!this.wizardWidgetId)
+            return { ...this.model };
+        const base = {};
+        if (this.model.blockId?.trim())
+            base.blockId = this.model.blockId.trim();
+        switch (this.wizardWidgetId) {
+            case 'praxis-wizard-inline-notice':
+                base.text = this.model.text || '';
+                base.tone = this.model.tone || 'neutral';
+                return base;
+            case 'praxis-wizard-content':
+                base.title = this.model.title || '';
+                base.subtitle = this.model.subtitle || '';
+                base.text = this.model.text || '';
+                base.caption = this.model.caption || '';
+                return base;
+            case 'praxis-wizard-divider':
+                base.label = this.model.label || '';
+                return base;
+            case 'praxis-wizard-benefits':
+                base.title = this.model.title || '';
+                base.columns = this.safeColumns(this.model.columns);
+                base.boxed = !!this.model.boxed;
+                base.items = this.benefits
+                    .map((item) => ({
+                    icon: item.icon || '',
+                    title: item.title || '',
+                    text: item.text || '',
+                }))
+                    .filter((item) => item.title || item.text || item.icon);
+                return base;
+            default:
+                return base;
+        }
+    }
+    safeColumns(value) {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed) || parsed < 1)
+            return 1;
+        return Math.floor(parsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: WizardWidgetConfigDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: WizardWidgetConfigDialogComponent, isStandalone: true, selector: "praxis-wizard-widget-config-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>{{ dialogTitle }}</h2>
+
+    <div mat-dialog-content class="dialog-grid">
+      <ng-container [ngSwitch]="wizardWidgetId">
+        <ng-container *ngSwitchCase="'praxis-wizard-inline-notice'">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Texto</mat-label>
+            <input matInput [(ngModel)]="model.text" placeholder="Mensagem do aviso" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tom</mat-label>
+            <select matNativeControl [(ngModel)]="model.tone">
+              <option value="neutral">Neutro</option>
+              <option value="info">Informativo</option>
+              <option value="warning">Atenção</option>
+            </select>
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-content'">
+          <mat-form-field appearance="outline">
+            <mat-label>Título</mat-label>
+            <input matInput [(ngModel)]="model.title" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Subtítulo</mat-label>
+            <input matInput [(ngModel)]="model.subtitle" />
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Texto</mat-label>
+            <input matInput [(ngModel)]="model.text" />
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Legenda</mat-label>
+            <input matInput [(ngModel)]="model.caption" />
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-divider'">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Rótulo</mat-label>
+            <input matInput [(ngModel)]="model.label" placeholder="Opcional" />
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-benefits'">
+          <mat-form-field appearance="outline">
+            <mat-label>Título</mat-label>
+            <input matInput [(ngModel)]="model.title" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Colunas</mat-label>
+            <input matInput type="number" min="1" [(ngModel)]="model.columns" />
+          </mat-form-field>
+          <mat-checkbox [(ngModel)]="model.boxed">Cards com contorno</mat-checkbox>
+
+          <div class="benefits">
+            <div class="benefits-head">
+              <strong>Itens de benefício</strong>
+              <button mat-stroked-button type="button" (click)="addBenefit()">Adicionar item</button>
+            </div>
+            <div class="benefit-card" *ngFor="let item of benefits; let i = index">
+              <div class="benefit-head">
+                <span>Item {{ i + 1 }}</span>
+                <button mat-button color="warn" type="button" (click)="removeBenefit(i)">Remover</button>
+              </div>
+              <mat-form-field appearance="outline">
+                <mat-label>Ícone</mat-label>
+                <input matInput [(ngModel)]="item.icon" placeholder="Ex.: info" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Título</mat-label>
+                <input matInput [(ngModel)]="item.title" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="full">
+                <mat-label>Texto</mat-label>
+                <input matInput [(ngModel)]="item.text" />
+              </mat-form-field>
+            </div>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <details class="advanced full">
+        <summary>Avançado</summary>
+        <div class="advanced-body">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>ID estável (avançado)</mat-label>
+            <input matInput [(ngModel)]="model.blockId" placeholder="Ex.: ft-edit-wizard:access:block:hero" />
+            <mat-hint>Use como chave estável de telemetria/E2E. Evite alterar após publicar.</mat-hint>
+          </mat-form-field>
+        </div>
+      </details>
+    </div>
+
+    <div mat-dialog-actions align="end">
+      <button mat-button type="button" (click)="cancel()">Cancelar</button>
+      <button mat-flat-button color="primary" type="button" (click)="save()">Salvar</button>
+    </div>
+  `, isInline: true, styles: [".dialog-grid{display:grid;gap:12px;min-width:min(760px,92vw)}.full{grid-column:1 / -1}.benefits{display:grid;gap:10px;border-top:1px solid var(--md-sys-color-outline-variant);padding-top:8px}.benefits-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.benefit-card{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding:10px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest)}.benefit-head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.advanced{border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);padding:8px 10px;background:var(--md-sys-color-surface-container-lowest)}.advanced>summary{cursor:pointer;font-weight:600;list-style:none}.advanced>summary::-webkit-details-marker{display:none}.advanced-body{margin-top:10px;display:grid;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: WizardWidgetConfigDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-widget-config-dialog', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                    ], template: `
+    <h2 mat-dialog-title>{{ dialogTitle }}</h2>
+
+    <div mat-dialog-content class="dialog-grid">
+      <ng-container [ngSwitch]="wizardWidgetId">
+        <ng-container *ngSwitchCase="'praxis-wizard-inline-notice'">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Texto</mat-label>
+            <input matInput [(ngModel)]="model.text" placeholder="Mensagem do aviso" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tom</mat-label>
+            <select matNativeControl [(ngModel)]="model.tone">
+              <option value="neutral">Neutro</option>
+              <option value="info">Informativo</option>
+              <option value="warning">Atenção</option>
+            </select>
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-content'">
+          <mat-form-field appearance="outline">
+            <mat-label>Título</mat-label>
+            <input matInput [(ngModel)]="model.title" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Subtítulo</mat-label>
+            <input matInput [(ngModel)]="model.subtitle" />
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Texto</mat-label>
+            <input matInput [(ngModel)]="model.text" />
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Legenda</mat-label>
+            <input matInput [(ngModel)]="model.caption" />
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-divider'">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>Rótulo</mat-label>
+            <input matInput [(ngModel)]="model.label" placeholder="Opcional" />
+          </mat-form-field>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'praxis-wizard-benefits'">
+          <mat-form-field appearance="outline">
+            <mat-label>Título</mat-label>
+            <input matInput [(ngModel)]="model.title" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Colunas</mat-label>
+            <input matInput type="number" min="1" [(ngModel)]="model.columns" />
+          </mat-form-field>
+          <mat-checkbox [(ngModel)]="model.boxed">Cards com contorno</mat-checkbox>
+
+          <div class="benefits">
+            <div class="benefits-head">
+              <strong>Itens de benefício</strong>
+              <button mat-stroked-button type="button" (click)="addBenefit()">Adicionar item</button>
+            </div>
+            <div class="benefit-card" *ngFor="let item of benefits; let i = index">
+              <div class="benefit-head">
+                <span>Item {{ i + 1 }}</span>
+                <button mat-button color="warn" type="button" (click)="removeBenefit(i)">Remover</button>
+              </div>
+              <mat-form-field appearance="outline">
+                <mat-label>Ícone</mat-label>
+                <input matInput [(ngModel)]="item.icon" placeholder="Ex.: info" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Título</mat-label>
+                <input matInput [(ngModel)]="item.title" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="full">
+                <mat-label>Texto</mat-label>
+                <input matInput [(ngModel)]="item.text" />
+              </mat-form-field>
+            </div>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <details class="advanced full">
+        <summary>Avançado</summary>
+        <div class="advanced-body">
+          <mat-form-field appearance="outline" class="full">
+            <mat-label>ID estável (avançado)</mat-label>
+            <input matInput [(ngModel)]="model.blockId" placeholder="Ex.: ft-edit-wizard:access:block:hero" />
+            <mat-hint>Use como chave estável de telemetria/E2E. Evite alterar após publicar.</mat-hint>
+          </mat-form-field>
+        </div>
+      </details>
+    </div>
+
+    <div mat-dialog-actions align="end">
+      <button mat-button type="button" (click)="cancel()">Cancelar</button>
+      <button mat-flat-button color="primary" type="button" (click)="save()">Salvar</button>
+    </div>
+  `, styles: [".dialog-grid{display:grid;gap:12px;min-width:min(760px,92vw)}.full{grid-column:1 / -1}.benefits{display:grid;gap:10px;border-top:1px solid var(--md-sys-color-outline-variant);padding-top:8px}.benefits-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.benefit-card{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding:10px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest)}.benefit-head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.advanced{border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);padding:8px 10px;background:var(--md-sys-color-surface-container-lowest)}.advanced>summary{cursor:pointer;font-weight:600;list-style:none}.advanced>summary::-webkit-details-marker{display:none}.advanced-body{margin-top:10px;display:grid;gap:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class PraxisStepperConfigEditor {
     config = { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
     activeIndex = 0;
@@ -236,8 +575,8 @@ class PraxisStepperConfigEditor {
                 'container-color': 'var(--md-sys-color-surface-container)',
                 'header-label-text-color': 'var(--md-sys-color-primary)',
                 'header-selected-state-icon-background-color': 'var(--md-sys-color-primary)',
-                'header-selected-state-icon-foreground-color': '#fff',
-                'line-color': 'color-mix(in oklab, var(--md-sys-color-primary) 40%, transparent)',
+                'header-selected-state-icon-foreground-color': 'var(--md-sys-color-on-primary)',
+                'line-color': 'var(--md-sys-color-primary)',
             },
             neutral: {
                 'container-color': 'var(--md-sys-color-surface)',
@@ -245,11 +584,11 @@ class PraxisStepperConfigEditor {
                 'line-color': 'var(--md-sys-color-outline-variant)',
             },
             'high-contrast': {
-                'container-color': '#000',
-                'header-label-text-color': '#fff',
-                'header-selected-state-icon-background-color': 'var(--md-sys-color-on-primary, #ffffff)',
-                'header-selected-state-icon-foreground-color': '#000',
-                'line-color': '#fff',
+                'container-color': 'var(--md-sys-color-surface)',
+                'header-label-text-color': 'var(--md-sys-color-on-surface)',
+                'header-selected-state-icon-background-color': 'var(--md-sys-color-on-surface)',
+                'header-selected-state-icon-foreground-color': 'var(--md-sys-color-surface)',
+                'line-color': 'var(--md-sys-color-on-surface)',
             },
         };
         const preset = presets[id] || {};
@@ -371,15 +710,141 @@ class PraxisStepperConfigEditor {
     get activeStep() { return this.config.steps?.[this.activeIndex] || null; }
     ensureWidgets() { const s = this.activeStep; if (!s.widgets)
         s.widgets = []; return s.widgets; }
+    ensureWidgetsBeforeForm() { const s = this.activeStep; if (!s.widgetsBeforeForm)
+        s.widgetsBeforeForm = []; return s.widgetsBeforeForm; }
     displayWidgetName(w) {
         switch (w.id) {
             case 'praxis-list': return 'Lista (seleção)';
-            case 'pdx-material-searchable-select': return 'Select (busca)';
+            case 'pdx-material-searchable-select': return 'Seleção com busca';
             case 'praxis-files-upload': return 'Upload de arquivos';
             case 'praxis-dynamic-form': return 'Formulário';
+            case 'praxis-wizard-benefits': return 'Grade de benefícios';
+            case 'praxis-wizard-content': return 'Bloco de conteúdo';
+            case 'praxis-wizard-inline-notice': return 'Aviso inline';
+            case 'praxis-wizard-divider': return 'Divisor';
             default: return w.inputs?.title || w.inputs?.label || 'Widget';
         }
     }
+    editorialBeforeWidgets(step) {
+        return (step.widgetsBeforeForm || []).filter((w) => this.isWizardWidgetId(w.id));
+    }
+    editorialAfterWidgets(step) {
+        return (step.widgets || []).filter((w) => this.isWizardWidgetId(w.id));
+    }
+    advancedWidgets(step) {
+        return (step.widgets || []).filter((w) => !this.isWizardWidgetId(w.id));
+    }
+    widgetBlockId(w) {
+        const blockId = String(w.inputs?.blockId || '').trim();
+        return blockId || null;
+    }
+    editorialWidgetSummary(w) {
+        const inputs = w.inputs || {};
+        const shorten = (value, max = 72) => {
+            const text = (value || '').trim();
+            if (!text)
+                return '';
+            return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+        };
+        switch (w.id) {
+            case 'praxis-wizard-benefits': {
+                const count = Array.isArray(inputs.items) ? inputs.items.length : 0;
+                const cols = Number.isFinite(Number(inputs.columns)) ? Number(inputs.columns) : 4;
+                return `${count} item(ns) • ${cols} coluna(s)`;
+            }
+            case 'praxis-wizard-content': {
+                const text = shorten(inputs.title || inputs.subtitle || inputs.text || inputs.caption, 90);
+                return text || 'Sem conteúdo';
+            }
+            case 'praxis-wizard-inline-notice': {
+                const tone = this.toneLabel(inputs.tone);
+                const text = shorten(inputs.text, 90);
+                return text ? `${tone} • ${text}` : tone;
+            }
+            case 'praxis-wizard-divider':
+                return inputs.label ? `Rótulo: ${inputs.label}` : 'Divisor sem rótulo';
+            default:
+                return '';
+        }
+    }
+    addEditorialWidget(id, zone = 'before') {
+        const step = this.activeStep;
+        if (!step)
+            return;
+        const defaults = this.defaultEditorialInputs(id, step, zone);
+        this.openWizardWidgetDialog(id, defaults).subscribe((result) => {
+            if (!result?.inputs)
+                return;
+            const wd = {
+                id,
+                inputs: { ...defaults, ...result.inputs },
+            };
+            if (zone === 'before')
+                this.ensureWidgetsBeforeForm().push(wd);
+            else
+                this.ensureWidgets().push(wd);
+            this.markDirty();
+        });
+    }
+    dropEditorialBefore(ev) {
+        const step = this.activeStep;
+        if (!step)
+            return;
+        const list = this.ensureWidgetsBeforeForm();
+        this.reorderSubset(list, (w) => this.isWizardWidgetId(w.id), ev.previousIndex, ev.currentIndex);
+        this.markDirty();
+    }
+    dropEditorialAfter(ev) {
+        const step = this.activeStep;
+        if (!step)
+            return;
+        const list = this.ensureWidgets();
+        this.reorderSubset(list, (w) => this.isWizardWidgetId(w.id), ev.previousIndex, ev.currentIndex);
+        this.markDirty();
+    }
+    moveEditorialWidget(w, from, to) {
+        if (from === to)
+            return;
+        const fromList = from === 'before' ? this.ensureWidgetsBeforeForm() : this.ensureWidgets();
+        const toList = to === 'before' ? this.ensureWidgetsBeforeForm() : this.ensureWidgets();
+        const idx = fromList.indexOf(w);
+        if (idx < 0)
+            return;
+        fromList.splice(idx, 1);
+        toList.push(w);
+        this.markDirty();
+    }
+    duplicateEditorialWidget(w, zone) {
+        const step = this.activeStep;
+        if (!step || !this.isWizardWidgetId(w.id))
+            return;
+        const clone = JSON.parse(JSON.stringify(w));
+        const inputs = (clone.inputs = { ...(clone.inputs || {}) });
+        inputs.blockId = this.nextEditorialBlockId(step, w.id, zone);
+        const list = zone === 'before' ? this.ensureWidgetsBeforeForm() : this.ensureWidgets();
+        const idx = list.indexOf(w);
+        if (idx >= 0)
+            list.splice(idx + 1, 0, clone);
+        else
+            list.push(clone);
+        this.markDirty();
+    }
+    removeEditorialWidget(w, zone) {
+        const list = zone === 'before' ? this.ensureWidgetsBeforeForm() : this.ensureWidgets();
+        const idx = list.indexOf(w);
+        if (idx < 0)
+            return;
+        list.splice(idx, 1);
+        this.markDirty();
+    }
+    removeAdvancedWidget(w) {
+        const widgets = this.ensureWidgets();
+        const idx = widgets.indexOf(w);
+        if (idx < 0)
+            return;
+        widgets.splice(idx, 1);
+        this.markDirty();
+    }
     dropWidget(ev) {
         const arr = this.ensureWidgets();
         moveItemInArray(arr, ev.previousIndex, ev.currentIndex);
@@ -390,6 +855,103 @@ class PraxisStepperConfigEditor {
         arr.splice(idx, 1);
         this.markDirty();
     }
+    canEditWidget(w) {
+        return (w.id === 'praxis-dynamic-form'
+            || w.id === 'praxis-list'
+            || w.id === 'pdx-material-searchable-select'
+            || w.id === 'praxis-files-upload'
+            || this.isWizardWidgetId(w.id));
+    }
+    defaultEditorialInputs(id, step, zone) {
+        const blockId = this.nextEditorialBlockId(step, id, zone);
+        switch (id) {
+            case 'praxis-wizard-benefits':
+                return {
+                    blockId,
+                    title: '',
+                    columns: 4,
+                    boxed: true,
+                    items: [{ icon: '', title: 'Novo benefício', text: '' }],
+                };
+            case 'praxis-wizard-content':
+                return {
+                    blockId,
+                    title: '',
+                    subtitle: '',
+                    text: '',
+                    caption: '',
+                };
+            case 'praxis-wizard-inline-notice':
+                return {
+                    blockId,
+                    text: '',
+                    tone: 'neutral',
+                };
+            case 'praxis-wizard-divider':
+                return {
+                    blockId,
+                    label: '',
+                };
+            default:
+                return { blockId };
+        }
+    }
+    nextEditorialBlockId(step, id, zone) {
+        const stepPart = this.normalizeBlockIdPart(step.id || `step-${this.activeIndex + 1}`);
+        const kind = id.replace('praxis-wizard-', '');
+        const prefix = `${stepPart}:${zone}:${kind}:`;
+        const used = new Set();
+        let max = 0;
+        const allWidgets = [...(step.widgetsBeforeForm || []), ...(step.widgets || [])];
+        allWidgets.forEach((widget) => {
+            const blockId = String(widget.inputs?.blockId || '').trim();
+            if (!blockId.startsWith(prefix))
+                return;
+            used.add(blockId);
+            const suffix = Number(blockId.slice(prefix.length));
+            if (Number.isFinite(suffix)) {
+                max = Math.max(max, suffix);
+            }
+        });
+        let nextIdx = Math.max(1, max + 1);
+        let candidate = `${prefix}${nextIdx}`;
+        while (used.has(candidate)) {
+            nextIdx += 1;
+            candidate = `${prefix}${nextIdx}`;
+        }
+        return candidate;
+    }
+    normalizeBlockIdPart(value) {
+        const normalized = (value || '')
+            .trim()
+            .toLowerCase()
+            .replace(/\s+/g, '-')
+            .replace(/[^a-z0-9:_-]/g, '');
+        return normalized || `step-${this.activeIndex + 1}`;
+    }
+    toneLabel(value) {
+        switch (value) {
+            case 'info': return 'Informativo';
+            case 'warning': return 'Atenção';
+            default: return 'Neutro';
+        }
+    }
+    reorderSubset(list, pick, fromSubsetIndex, toSubsetIndex) {
+        const subsetIndices = [];
+        list.forEach((item, index) => {
+            if (pick(item))
+                subsetIndices.push(index);
+        });
+        const fromReal = subsetIndices[fromSubsetIndex];
+        const toReal = subsetIndices[toSubsetIndex];
+        if (fromReal == null || toReal == null)
+            return;
+        const [moved] = list.splice(fromReal, 1);
+        let insertAt = toReal;
+        if (fromReal < toReal)
+            insertAt -= 1;
+        list.splice(insertAt, 0, moved);
+    }
     // ------- Main form -------
     addMainForm() {
         const step = this.activeStep;
@@ -422,7 +984,7 @@ class PraxisStepperConfigEditor {
         const ref = this.settings.open({ id: `stepper:list:${step.id || this.activeIndex}`, title: 'Configurar Lista (seleção)', content: { component: PraxisListConfigEditor, inputs: { config: current, listId: step.id || 'list' } } });
         const apply = (val) => {
             const cfg = (val && (val.config || val)) || current;
-            const wd = { id: 'praxis-list', inputs: { config: cfg } };
+            const wd = { id: 'praxis-list', inputs: { config: cfg, listId: `${step.id || 'step'}-list-${Date.now()}` } };
             const arr = this.ensureWidgets();
             arr.push(wd);
             this.markDirty();
@@ -460,7 +1022,7 @@ class PraxisStepperConfigEditor {
             return;
         const ref = this.settings.open({ id: `stepper:upload:${step.id || this.activeIndex}`, title: 'Configurar Upload de Arquivos', content: { component: PraxisFilesUploadConfigEditor, inputs: {} } });
         const apply = (cfg) => {
-            const wd = { id: 'praxis-files-upload', inputs: { config: cfg, componentId: `${step.id || 'step'}-upload-${Date.now()}` } };
+            const wd = { id: 'praxis-files-upload', inputs: { config: cfg, filesUploadId: `${step.id || 'step'}-upload-${Date.now()}` } };
             this.ensureWidgets().push(wd);
             this.markDirty();
         };
@@ -498,7 +1060,7 @@ class PraxisStepperConfigEditor {
         if (!step)
             return;
         const cfg = { mode: 'tree', selection: { mode: 'single' } };
-        const wd = { id: 'praxis-list', inputs: { config: cfg } };
+        const wd = { id: 'praxis-list', inputs: { config: cfg, listId: `${step.id || 'step'}-list-${Date.now()}` } };
         this.ensureWidgets().push(wd);
         this.markDirty();
     }
@@ -521,7 +1083,7 @@ class PraxisStepperConfigEditor {
         ref.applied$.subscribe(apply);
         ref.saved$.subscribe(apply);
     }
-    editWidget(w, index) {
+    editWidget(w) {
         switch (w.id) {
             case 'praxis-dynamic-form':
                 // treat as embedded form
@@ -562,11 +1124,44 @@ class PraxisStepperConfigEditor {
                 ref.saved$.subscribe(apply);
                 break;
             }
+            case 'praxis-wizard-benefits':
+            case 'praxis-wizard-content':
+            case 'praxis-wizard-inline-notice':
+            case 'praxis-wizard-divider': {
+                this.openWizardWidgetEditor(w);
+                break;
+            }
             default:
                 // No editor available
                 break;
         }
     }
+    openWizardWidgetEditor(w) {
+        if (!this.isWizardWidgetId(w.id))
+            return;
+        this.openWizardWidgetDialog(w.id, { ...(w.inputs || {}) }).subscribe((result) => {
+            if (!result?.inputs)
+                return;
+            w.inputs = { ...(w.inputs || {}), ...result.inputs };
+            this.markDirty();
+        });
+    }
+    openWizardWidgetDialog(widgetId, inputs) {
+        const dialogRef = this.dialog.open(WizardWidgetConfigDialogComponent, {
+            width: '760px',
+            data: {
+                widgetId,
+                inputs: { ...inputs },
+            },
+        });
+        return dialogRef.afterClosed();
+    }
+    isWizardWidgetId(id) {
+        return (id === 'praxis-wizard-benefits'
+            || id === 'praxis-wizard-content'
+            || id === 'praxis-wizard-inline-notice'
+            || id === 'praxis-wizard-divider');
+    }
     // SettingsValueProvider
     getSettingsValue() { return this.config; }
     onSave() { return this.getSettingsValue(); }
@@ -595,7 +1190,16 @@ class PraxisStepperConfigEditor {
                   <option value="horizontal">Horizontal</option>
                   <option value="vertical">Vertical</option>
                 </select>
-                <mat-hint>Horizontal: cabeçalho no topo • Vertical: lista à esquerda</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Horizontal: cabeçalho no topo • Vertical: lista à esquerda'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Posição dos títulos</mat-label>
@@ -603,7 +1207,16 @@ class PraxisStepperConfigEditor {
                   <option value="top">Acima</option>
                   <option value="bottom">Abaixo</option>
                 </select>
-                <mat-hint>Válido na orientação horizontal</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Válido na orientação horizontal'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Posição do rótulo</mat-label>
@@ -611,7 +1224,16 @@ class PraxisStepperConfigEditor {
                   <option value="end">Ao lado</option>
                   <option value="bottom">Abaixo</option>
                 </select>
-                <mat-hint>Como o texto aparece no cabeçalho</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Como o texto aparece no cabeçalho'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Cor</mat-label>
@@ -621,17 +1243,44 @@ class PraxisStepperConfigEditor {
                   <option value="accent">Acento</option>
                   <option value="warn">Alerta</option>
                 </select>
-                <mat-hint>Aplicável a temas Material 2 (M2)</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplicável a temas Material 2 (M2)'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Duração da animação</mat-label>
                 <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
-                <mat-hint>Tempo da transição entre etapas</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Tempo da transição entre etapas'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Etapa selecionada</mat-label>
                 <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
-                <mat-hint>Índice inicia em 0 (primeira etapa)</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Índice inicia em 0 (primeira etapa)'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Densidade</mat-label>
@@ -640,22 +1289,58 @@ class PraxisStepperConfigEditor {
                   <option value="comfortable">Confortável</option>
                   <option value="compact">Compacta</option>
                 </select>
-                <mat-hint>Controla espaçamentos e alturas</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Controla espaçamentos e alturas'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do stepper (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
-                <mat-hint>Permite estilizar com CSS escopado</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Permite estilizar com CSS escopado'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do cabeçalho (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
-                <mat-hint>Use para ajustes finos de aparência</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Use para ajustes finos de aparência'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do conteúdo (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
-                <mat-hint>Aplica uma classe à área de conteúdo</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplica uma classe à área de conteúdo'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <div class="pdx-toggles">
@@ -677,35 +1362,89 @@ class PraxisStepperConfigEditor {
                 <div class="pdx-step-item" *ngFor="let s of config.steps; let i = index" cdkDrag [class.active]="activeIndex === i" (click)="setActive(i)">
                   <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
                   <div class="pdx-fields">
-                    <mat-form-field appearance="outline" style="min-width: 180px;">
+                    <mat-form-field appearance="outline" class="min-180">
                       <mat-label>Título da etapa</mat-label>
                       <input matInput [(ngModel)]="s.label" (ngModelChange)="markDirty()" />
-                      <mat-hint>Como aparecerá no cabeçalho</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Como aparecerá no cabeçalho'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Identificador (opcional)</mat-label>
                       <input matInput [(ngModel)]="s.id" (ngModelChange)="markDirty()" />
-                      <mat-hint>Útil para automações</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Útil para automações'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Texto alternativo (acessibilidade)</mat-label>
                       <input matInput [(ngModel)]="s.ariaLabel" (ngModelChange)="markDirty()" />
-                      <mat-hint>Lido por leitores de tela</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Lido por leitores de tela'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>ID que descreve (opcional)</mat-label>
                       <input matInput [(ngModel)]="s.ariaLabelledby" (ngModelChange)="markDirty()" />
-                      <mat-hint>ID de um elemento que descreve a etapa</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'ID de um elemento que descreve a etapa'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Ícone/estado do marcador</mat-label>
                       <input matInput [(ngModel)]="s.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
-                      <mat-hint>Controla o ícone do passo (quando aplicável)</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Controla o ícone do passo (quando aplicável)'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Mensagem de erro</mat-label>
                       <input matInput [(ngModel)]="s.errorMessage" (ngModelChange)="markDirty()" />
-                      <mat-hint>Mostrada quando há erro na etapa</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Mostrada quando há erro na etapa'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <div class="pdx-flag-group">
                       <mat-slide-toggle [(ngModel)]="s.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
@@ -732,8 +1471,139 @@ class PraxisStepperConfigEditor {
               </div>
 
               <div class="pdx-content-editor">
+                <div class="section editorial-section">
+                  <div class="section-head">
+                    <div>
+                      <div class="section-title">Conteúdo editorial</div>
+                      <div class="section-subtitle">Organize os blocos narrativos da etapa antes ou depois do formulário.</div>
+                    </div>
+                  </div>
+
+                  <div class="zone-grid">
+                    <div class="zone-card">
+                      <div class="zone-head">
+                        <div class="zone-title">Antes do formulário</div>
+                        <div class="zone-actions">
+                          <span class="zone-count">{{ editorialBeforeWidgets(step).length }}</span>
+                          <button mat-stroked-button [matMenuTriggerFor]="beforeEditorialMenu">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Adicionar
+                          </button>
+                          <mat-menu #beforeEditorialMenu="matMenu">
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
+                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
+                              Grade de benefícios
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
+                              <mat-icon [praxisIcon]="'article'"></mat-icon>
+                              Bloco de conteúdo
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
+                              <mat-icon [praxisIcon]="'info'"></mat-icon>
+                              Aviso inline
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
+                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
+                              Divisor
+                            </button>
+                          </mat-menu>
+                        </div>
+                      </div>
+                      <div cdkDropList (cdkDropListDropped)="dropEditorialBefore($event)" class="widget-list">
+                        <div class="widget-item editorial-item" *ngFor="let w of editorialBeforeWidgets(step)" cdkDrag>
+                          <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+                          <div class="info">
+                            <div class="name">{{ displayWidgetName(w) }}</div>
+                            <div class="sub">{{ editorialWidgetSummary(w) }}</div>
+                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
+                          </div>
+                          <div class="actions">
+                            <button mat-button (click)="editWidget(w)">
+                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                              Editar
+                            </button>
+                            <button mat-button (click)="moveEditorialWidget(w, 'before', 'after')">
+                              <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
+                              Mover para depois
+                            </button>
+                            <button mat-button (click)="duplicateEditorialWidget(w, 'before')">
+                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
+                              Duplicar
+                            </button>
+                            <button mat-button color="warn" (click)="removeEditorialWidget(w, 'before')">
+                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                              Remover
+                            </button>
+                          </div>
+                        </div>
+                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">Nenhum bloco nesta zona.</div>
+                      </div>
+                    </div>
+
+                    <div class="zone-card">
+                      <div class="zone-head">
+                        <div class="zone-title">Depois do formulário</div>
+                        <div class="zone-actions">
+                          <span class="zone-count">{{ editorialAfterWidgets(step).length }}</span>
+                          <button mat-stroked-button [matMenuTriggerFor]="afterEditorialMenu">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Adicionar
+                          </button>
+                          <mat-menu #afterEditorialMenu="matMenu">
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
+                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
+                              Grade de benefícios
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
+                              <mat-icon [praxisIcon]="'article'"></mat-icon>
+                              Bloco de conteúdo
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
+                              <mat-icon [praxisIcon]="'info'"></mat-icon>
+                              Aviso inline
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
+                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
+                              Divisor
+                            </button>
+                          </mat-menu>
+                        </div>
+                      </div>
+                      <div cdkDropList (cdkDropListDropped)="dropEditorialAfter($event)" class="widget-list">
+                        <div class="widget-item editorial-item" *ngFor="let w of editorialAfterWidgets(step)" cdkDrag>
+                          <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+                          <div class="info">
+                            <div class="name">{{ displayWidgetName(w) }}</div>
+                            <div class="sub">{{ editorialWidgetSummary(w) }}</div>
+                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
+                          </div>
+                          <div class="actions">
+                            <button mat-button (click)="editWidget(w)">
+                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                              Editar
+                            </button>
+                            <button mat-button (click)="moveEditorialWidget(w, 'after', 'before')">
+                              <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
+                              Mover para antes
+                            </button>
+                            <button mat-button (click)="duplicateEditorialWidget(w, 'after')">
+                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
+                              Duplicar
+                            </button>
+                            <button mat-button color="warn" (click)="removeEditorialWidget(w, 'after')">
+                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                              Remover
+                            </button>
+                          </div>
+                        </div>
+                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">Nenhum bloco nesta zona.</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="section">
-                  <div class="section-title">Formulário principal</div>
+                  <div class="section-title">Formulário da etapa</div>
                   <div class="section-body">
                     <ng-container *ngIf="step.form; else addFormBtn">
                       <mat-card appearance="outlined" class="mini-card">
@@ -755,22 +1625,18 @@ class PraxisStepperConfigEditor {
                 </div>
 
                 <div class="section">
-                  <div class="section-title">Conteúdos e componentes</div>
+                  <div class="section-head">
+                    <div>
+                      <div class="section-title">Componentes avançados</div>
+                      <div class="section-subtitle">Use para cenários de seleção e integrações específicas.</div>
+                    </div>
+                    <button mat-stroked-button (click)="openMoreComponents()">
+                      <mat-icon [praxisIcon]="'add'"></mat-icon>
+                      Mais componentes
+                    </button>
+                  </div>
                   <div class="section-body">
                     <div class="cta-grid">
-                      <div class="cta-card mat-elevation-z2">
-                        <div class="cta-head">
-                          <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
-                          <div class="cta-title">Formulário dinâmico</div>
-                        </div>
-                        <div class="cta-desc">Crie campos e validações personalizadas nesta etapa.</div>
-                        <div class="cta-actions">
-                          <button mat-flat-button color="primary" (click)="addMainForm()">
-                            <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir formulário
-                          </button>
-                        </div>
-                      </div>
                       <div class="cta-card mat-elevation-z2">
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
@@ -797,20 +1663,53 @@ class PraxisStepperConfigEditor {
                           </button>
                         </div>
                       </div>
+                      <div class="cta-card mat-elevation-z2">
+                        <div class="cta-head">
+                          <mat-icon [praxisIcon]="'search'"></mat-icon>
+                          <div class="cta-title">Seleção com busca</div>
+                        </div>
+                        <div class="cta-desc">Campo de seleção com busca remota/local.</div>
+                        <div class="cta-actions">
+                          <button mat-stroked-button (click)="addSearchableSelect()">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Inserir seletor
+                          </button>
+                        </div>
+                      </div>
+                      <div class="cta-card mat-elevation-z2">
+                        <div class="cta-head">
+                          <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
+                          <div class="cta-title">Upload de arquivos</div>
+                        </div>
+                        <div class="cta-desc">Anexe documentos com validação de upload.</div>
+                        <div class="cta-actions">
+                          <button mat-stroked-button (click)="addFilesUpload()">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Inserir upload
+                          </button>
+                        </div>
+                      </div>
                     </div>
-                    <div cdkDropList (cdkDropListDropped)="dropWidget($event)" class="widget-list">
-                      <div class="widget-item" *ngFor="let w of (step.widgets || []); let wi = index" cdkDrag>
-                        <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+
+                    <div class="widget-list advanced-list">
+                      <div class="widget-item" *ngFor="let w of advancedWidgets(step)">
+                        <div class="drag-handle"><mat-icon [praxisIcon]="'extension'"></mat-icon></div>
                         <div class="info">
                           <div class="name">{{ displayWidgetName(w) }}</div>
                           <div class="sub">{{ w.id }}</div>
                         </div>
                         <div class="actions">
-                          <button mat-button (click)="editWidget(w, wi)"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
-                          <button mat-button color="warn" (click)="removeWidget(wi)"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+                          <button mat-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)">
+                            <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                            Editar
+                          </button>
+                          <button mat-button color="warn" (click)="removeAdvancedWidget(w)">
+                            <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                            Remover
+                          </button>
                         </div>
                       </div>
-                      <div class="empty" *ngIf="!step.widgets || !step.widgets.length">Nenhum componente adicionado</div>
+                      <div class="empty" *ngIf="!advancedWidgets(step).length">Nenhum componente avançado adicionado.</div>
                     </div>
                   </div>
                 </div>
@@ -898,12 +1797,30 @@ class PraxisStepperConfigEditor {
               <mat-form-field appearance="outline">
                 <mat-label>Altura do cabeçalho (px)</mat-label>
                 <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
-                <mat-hint>Altura do item do cabeçalho</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Altura do item do cabeçalho'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Tamanho do texto (px)</mat-label>
                 <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
-                <mat-hint>Tamanho do título da etapa</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Tamanho do título da etapa'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Peso do texto</mat-label>
@@ -920,7 +1837,16 @@ class PraxisStepperConfigEditor {
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe de tema (opcional)</mat-label>
                 <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
-                <mat-hint>Aplica as cores apenas dentro desse seletor</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplica as cores apenas dentro desse seletor'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Conjunto de ícones</mat-label>
@@ -930,7 +1856,16 @@ class PraxisStepperConfigEditor {
                   <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
                   <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
                 </select>
-                <mat-hint>Selecione se usar ícones do Material Symbols</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Selecione se usar ícones do Material Symbols'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <div class="icons-grid">
@@ -991,7 +1926,7 @@ class PraxisStepperConfigEditor {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px 4px;display:grid;gap:12px}.help{color:#000000b3;font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid rgba(0,0,0,.12);border-radius:8px;cursor:pointer}.pdx-step-item.active{border-color:color-mix(in oklab,var(--md-sys-color-primary) 40%,rgba(0,0,0,.12));box-shadow:var(--mat-elevation-transition),var(--mat-elevation-level2, 0 2px 6px rgba(0,0,0,.12))}.drag-handle{display:flex;align-items:center;color:#0000008a}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.12)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(0,0,0,.12);border-radius:8px}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;opacity:.7}.widget-item .actions{display:flex;gap:8px}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:#0009}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.12));background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;opacity:.78}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i10.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i10.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i10.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i10.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
+  `, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px;display:grid;gap:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pdx-step-item.active{border-color:var(--md-sys-color-primary);box-shadow:var(--mat-elevation-level2)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed var(--md-sys-color-outline-variant)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-lowest)}.section-body{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.section-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.widget-item .info .meta{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-start}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-card{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:900px){.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:640px){.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.pdx-flag-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions{justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i10.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i10.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i10.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i10.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisStepperConfigEditor, decorators: [{
             type: Component,
@@ -1010,6 +1945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         MatCardModule,
                         MatButtonToggleModule,
                         MatDialogModule,
+                        MatMenuModule,
                         MatTabsModule,
                     ], template: `
     <div class="pdx-editor">
@@ -1024,7 +1960,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="horizontal">Horizontal</option>
                   <option value="vertical">Vertical</option>
                 </select>
-                <mat-hint>Horizontal: cabeçalho no topo • Vertical: lista à esquerda</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Horizontal: cabeçalho no topo • Vertical: lista à esquerda'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Posição dos títulos</mat-label>
@@ -1032,7 +1977,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="top">Acima</option>
                   <option value="bottom">Abaixo</option>
                 </select>
-                <mat-hint>Válido na orientação horizontal</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Válido na orientação horizontal'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Posição do rótulo</mat-label>
@@ -1040,7 +1994,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="end">Ao lado</option>
                   <option value="bottom">Abaixo</option>
                 </select>
-                <mat-hint>Como o texto aparece no cabeçalho</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Como o texto aparece no cabeçalho'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Cor</mat-label>
@@ -1050,17 +2013,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="accent">Acento</option>
                   <option value="warn">Alerta</option>
                 </select>
-                <mat-hint>Aplicável a temas Material 2 (M2)</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplicável a temas Material 2 (M2)'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Duração da animação</mat-label>
                 <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
-                <mat-hint>Tempo da transição entre etapas</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Tempo da transição entre etapas'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Etapa selecionada</mat-label>
                 <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
-                <mat-hint>Índice inicia em 0 (primeira etapa)</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Índice inicia em 0 (primeira etapa)'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Densidade</mat-label>
@@ -1069,22 +2059,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="comfortable">Confortável</option>
                   <option value="compact">Compacta</option>
                 </select>
-                <mat-hint>Controla espaçamentos e alturas</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Controla espaçamentos e alturas'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do stepper (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
-                <mat-hint>Permite estilizar com CSS escopado</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Permite estilizar com CSS escopado'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do cabeçalho (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
-                <mat-hint>Use para ajustes finos de aparência</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Use para ajustes finos de aparência'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe do conteúdo (opcional)</mat-label>
                 <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
-                <mat-hint>Aplica uma classe à área de conteúdo</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplica uma classe à área de conteúdo'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <div class="pdx-toggles">
@@ -1106,35 +2132,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 <div class="pdx-step-item" *ngFor="let s of config.steps; let i = index" cdkDrag [class.active]="activeIndex === i" (click)="setActive(i)">
                   <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
                   <div class="pdx-fields">
-                    <mat-form-field appearance="outline" style="min-width: 180px;">
+                    <mat-form-field appearance="outline" class="min-180">
                       <mat-label>Título da etapa</mat-label>
                       <input matInput [(ngModel)]="s.label" (ngModelChange)="markDirty()" />
-                      <mat-hint>Como aparecerá no cabeçalho</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Como aparecerá no cabeçalho'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Identificador (opcional)</mat-label>
                       <input matInput [(ngModel)]="s.id" (ngModelChange)="markDirty()" />
-                      <mat-hint>Útil para automações</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Útil para automações'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Texto alternativo (acessibilidade)</mat-label>
                       <input matInput [(ngModel)]="s.ariaLabel" (ngModelChange)="markDirty()" />
-                      <mat-hint>Lido por leitores de tela</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Lido por leitores de tela'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>ID que descreve (opcional)</mat-label>
                       <input matInput [(ngModel)]="s.ariaLabelledby" (ngModelChange)="markDirty()" />
-                      <mat-hint>ID de um elemento que descreve a etapa</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'ID de um elemento que descreve a etapa'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Ícone/estado do marcador</mat-label>
                       <input matInput [(ngModel)]="s.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
-                      <mat-hint>Controla o ícone do passo (quando aplicável)</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Controla o ícone do passo (quando aplicável)'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <mat-form-field appearance="outline">
                       <mat-label>Mensagem de erro</mat-label>
                       <input matInput [(ngModel)]="s.errorMessage" (ngModelChange)="markDirty()" />
-                      <mat-hint>Mostrada quando há erro na etapa</mat-hint>
+                      <button
+                        mat-icon-button
+                        matSuffix
+                        class="help-icon-button"
+                        type="button"
+                        [matTooltip]="'Mostrada quando há erro na etapa'"
+                        matTooltipPosition="above"
+                      >
+                        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                      </button>
                     </mat-form-field>
                     <div class="pdx-flag-group">
                       <mat-slide-toggle [(ngModel)]="s.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
@@ -1161,8 +2241,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               </div>
 
               <div class="pdx-content-editor">
+                <div class="section editorial-section">
+                  <div class="section-head">
+                    <div>
+                      <div class="section-title">Conteúdo editorial</div>
+                      <div class="section-subtitle">Organize os blocos narrativos da etapa antes ou depois do formulário.</div>
+                    </div>
+                  </div>
+
+                  <div class="zone-grid">
+                    <div class="zone-card">
+                      <div class="zone-head">
+                        <div class="zone-title">Antes do formulário</div>
+                        <div class="zone-actions">
+                          <span class="zone-count">{{ editorialBeforeWidgets(step).length }}</span>
+                          <button mat-stroked-button [matMenuTriggerFor]="beforeEditorialMenu">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Adicionar
+                          </button>
+                          <mat-menu #beforeEditorialMenu="matMenu">
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
+                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
+                              Grade de benefícios
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
+                              <mat-icon [praxisIcon]="'article'"></mat-icon>
+                              Bloco de conteúdo
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
+                              <mat-icon [praxisIcon]="'info'"></mat-icon>
+                              Aviso inline
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
+                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
+                              Divisor
+                            </button>
+                          </mat-menu>
+                        </div>
+                      </div>
+                      <div cdkDropList (cdkDropListDropped)="dropEditorialBefore($event)" class="widget-list">
+                        <div class="widget-item editorial-item" *ngFor="let w of editorialBeforeWidgets(step)" cdkDrag>
+                          <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+                          <div class="info">
+                            <div class="name">{{ displayWidgetName(w) }}</div>
+                            <div class="sub">{{ editorialWidgetSummary(w) }}</div>
+                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
+                          </div>
+                          <div class="actions">
+                            <button mat-button (click)="editWidget(w)">
+                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                              Editar
+                            </button>
+                            <button mat-button (click)="moveEditorialWidget(w, 'before', 'after')">
+                              <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
+                              Mover para depois
+                            </button>
+                            <button mat-button (click)="duplicateEditorialWidget(w, 'before')">
+                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
+                              Duplicar
+                            </button>
+                            <button mat-button color="warn" (click)="removeEditorialWidget(w, 'before')">
+                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                              Remover
+                            </button>
+                          </div>
+                        </div>
+                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">Nenhum bloco nesta zona.</div>
+                      </div>
+                    </div>
+
+                    <div class="zone-card">
+                      <div class="zone-head">
+                        <div class="zone-title">Depois do formulário</div>
+                        <div class="zone-actions">
+                          <span class="zone-count">{{ editorialAfterWidgets(step).length }}</span>
+                          <button mat-stroked-button [matMenuTriggerFor]="afterEditorialMenu">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Adicionar
+                          </button>
+                          <mat-menu #afterEditorialMenu="matMenu">
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
+                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
+                              Grade de benefícios
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
+                              <mat-icon [praxisIcon]="'article'"></mat-icon>
+                              Bloco de conteúdo
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
+                              <mat-icon [praxisIcon]="'info'"></mat-icon>
+                              Aviso inline
+                            </button>
+                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
+                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
+                              Divisor
+                            </button>
+                          </mat-menu>
+                        </div>
+                      </div>
+                      <div cdkDropList (cdkDropListDropped)="dropEditorialAfter($event)" class="widget-list">
+                        <div class="widget-item editorial-item" *ngFor="let w of editorialAfterWidgets(step)" cdkDrag>
+                          <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+                          <div class="info">
+                            <div class="name">{{ displayWidgetName(w) }}</div>
+                            <div class="sub">{{ editorialWidgetSummary(w) }}</div>
+                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
+                          </div>
+                          <div class="actions">
+                            <button mat-button (click)="editWidget(w)">
+                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                              Editar
+                            </button>
+                            <button mat-button (click)="moveEditorialWidget(w, 'after', 'before')">
+                              <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
+                              Mover para antes
+                            </button>
+                            <button mat-button (click)="duplicateEditorialWidget(w, 'after')">
+                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
+                              Duplicar
+                            </button>
+                            <button mat-button color="warn" (click)="removeEditorialWidget(w, 'after')">
+                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                              Remover
+                            </button>
+                          </div>
+                        </div>
+                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">Nenhum bloco nesta zona.</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="section">
-                  <div class="section-title">Formulário principal</div>
+                  <div class="section-title">Formulário da etapa</div>
                   <div class="section-body">
                     <ng-container *ngIf="step.form; else addFormBtn">
                       <mat-card appearance="outlined" class="mini-card">
@@ -1184,62 +2395,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 </div>
 
                 <div class="section">
-                  <div class="section-title">Conteúdos e componentes</div>
+                  <div class="section-head">
+                    <div>
+                      <div class="section-title">Componentes avançados</div>
+                      <div class="section-subtitle">Use para cenários de seleção e integrações específicas.</div>
+                    </div>
+                    <button mat-stroked-button (click)="openMoreComponents()">
+                      <mat-icon [praxisIcon]="'add'"></mat-icon>
+                      Mais componentes
+                    </button>
+                  </div>
                   <div class="section-body">
                     <div class="cta-grid">
                       <div class="cta-card mat-elevation-z2">
                         <div class="cta-head">
-                          <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
-                          <div class="cta-title">Formulário dinâmico</div>
+                          <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
+                          <div class="cta-title">Lista em árvore</div>
                         </div>
-                        <div class="cta-desc">Crie campos e validações personalizadas nesta etapa.</div>
+                        <div class="cta-desc">Exiba dados hierárquicos com seleção simples.</div>
                         <div class="cta-actions">
-                          <button mat-flat-button color="primary" (click)="addMainForm()">
+                          <button mat-stroked-button (click)="addTreeList()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir formulário
+                            Inserir árvore
                           </button>
                         </div>
                       </div>
                       <div class="cta-card mat-elevation-z2">
                         <div class="cta-head">
-                          <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
-                          <div class="cta-title">Lista em árvore</div>
+                          <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
+                          <div class="cta-title">Transferência de itens</div>
                         </div>
-                        <div class="cta-desc">Exiba dados hierárquicos com seleção simples.</div>
+                        <div class="cta-desc">Mover itens entre listas (ideal para múltipla seleção).</div>
                         <div class="cta-actions">
-                          <button mat-stroked-button (click)="addTreeList()">
+                          <button mat-stroked-button (click)="addTransferListQuick()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir árvore
+                            Inserir transferência
                           </button>
                         </div>
                       </div>
                       <div class="cta-card mat-elevation-z2">
                         <div class="cta-head">
-                          <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
-                          <div class="cta-title">Transferência de itens</div>
+                          <mat-icon [praxisIcon]="'search'"></mat-icon>
+                          <div class="cta-title">Seleção com busca</div>
                         </div>
-                        <div class="cta-desc">Mover itens entre listas (ideal para múltipla seleção).</div>
+                        <div class="cta-desc">Campo de seleção com busca remota/local.</div>
                         <div class="cta-actions">
-                          <button mat-stroked-button (click)="addTransferListQuick()">
+                          <button mat-stroked-button (click)="addSearchableSelect()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir transferência
+                            Inserir seletor
+                          </button>
+                        </div>
+                      </div>
+                      <div class="cta-card mat-elevation-z2">
+                        <div class="cta-head">
+                          <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
+                          <div class="cta-title">Upload de arquivos</div>
+                        </div>
+                        <div class="cta-desc">Anexe documentos com validação de upload.</div>
+                        <div class="cta-actions">
+                          <button mat-stroked-button (click)="addFilesUpload()">
+                            <mat-icon [praxisIcon]="'add'"></mat-icon>
+                            Inserir upload
                           </button>
                         </div>
                       </div>
                     </div>
-                    <div cdkDropList (cdkDropListDropped)="dropWidget($event)" class="widget-list">
-                      <div class="widget-item" *ngFor="let w of (step.widgets || []); let wi = index" cdkDrag>
-                        <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
+
+                    <div class="widget-list advanced-list">
+                      <div class="widget-item" *ngFor="let w of advancedWidgets(step)">
+                        <div class="drag-handle"><mat-icon [praxisIcon]="'extension'"></mat-icon></div>
                         <div class="info">
                           <div class="name">{{ displayWidgetName(w) }}</div>
                           <div class="sub">{{ w.id }}</div>
                         </div>
                         <div class="actions">
-                          <button mat-button (click)="editWidget(w, wi)"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
-                          <button mat-button color="warn" (click)="removeWidget(wi)"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+                          <button mat-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)">
+                            <mat-icon [praxisIcon]="'tune'"></mat-icon>
+                            Editar
+                          </button>
+                          <button mat-button color="warn" (click)="removeAdvancedWidget(w)">
+                            <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                            Remover
+                          </button>
                         </div>
                       </div>
-                      <div class="empty" *ngIf="!step.widgets || !step.widgets.length">Nenhum componente adicionado</div>
+                      <div class="empty" *ngIf="!advancedWidgets(step).length">Nenhum componente avançado adicionado.</div>
                     </div>
                   </div>
                 </div>
@@ -1327,12 +2567,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               <mat-form-field appearance="outline">
                 <mat-label>Altura do cabeçalho (px)</mat-label>
                 <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
-                <mat-hint>Altura do item do cabeçalho</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Altura do item do cabeçalho'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Tamanho do texto (px)</mat-label>
                 <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
-                <mat-hint>Tamanho do título da etapa</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Tamanho do título da etapa'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Peso do texto</mat-label>
@@ -1349,7 +2607,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               <mat-form-field appearance="outline" class="w-full">
                 <mat-label>Classe de tema (opcional)</mat-label>
                 <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
-                <mat-hint>Aplica as cores apenas dentro desse seletor</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Aplica as cores apenas dentro desse seletor'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
               <mat-form-field appearance="outline">
                 <mat-label>Conjunto de ícones</mat-label>
@@ -1359,7 +2626,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                   <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
                   <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
                 </select>
-                <mat-hint>Selecione se usar ícones do Material Symbols</mat-hint>
+                <button
+                  mat-icon-button
+                  matSuffix
+                  class="help-icon-button"
+                  type="button"
+                  [matTooltip]="'Selecione se usar ícones do Material Symbols'"
+                  matTooltipPosition="above"
+                >
+                  <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <div class="icons-grid">
@@ -1420,12 +2696,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, styles: [".pdx-editor{display:grid;gap:16px}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px 4px;display:grid;gap:12px}.help{color:#000000b3;font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid rgba(0,0,0,.12);border-radius:8px;cursor:pointer}.pdx-step-item.active{border-color:color-mix(in oklab,var(--md-sys-color-primary) 40%,rgba(0,0,0,.12));box-shadow:var(--mat-elevation-transition),var(--mat-elevation-level2, 0 2px 6px rgba(0,0,0,.12))}.drag-handle{display:flex;align-items:center;color:#0000008a}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.12)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(0,0,0,.12);border-radius:8px}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;opacity:.7}.widget-item .actions{display:flex;gap:8px}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:#0009}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.12));background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;opacity:.78}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto}\n"] }]
+  `, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px;display:grid;gap:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pdx-step-item.active{border-color:var(--md-sys-color-primary);box-shadow:var(--mat-elevation-level2)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed var(--md-sys-color-outline-variant)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-lowest)}.section-body{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.section-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.widget-item .info .meta{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-start}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-card{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:900px){.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:640px){.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.pdx-flag-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions{justify-content:flex-start}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]
                 }] }] });
 
+/**
+ * Capabilities catalog for Praxis Stepper (StepperMetadata).
+ * Paths follow StepperMetadata shape (patch merged at config root).
+ */
+const ENUMS = {
+    orientation: ['horizontal', 'vertical'],
+    headerPosition: ['top', 'bottom'],
+    labelPosition: ['bottom', 'end'],
+    density: ['default', 'comfortable', 'compact'],
+    matColor: ['primary', 'accent', 'warn'],
+    navVariant: ['basic', 'flat', 'stroked', 'raised'],
+    navAlign: ['start', 'center', 'end', 'space-between'],
+    formMode: ['create', 'edit', 'view'],
+    schemaSource: ['resource', 'filter'],
+    iconsSet: ['material-symbols-outlined', 'material-symbols-rounded', 'material-symbols-sharp'],
+    widgetId: ['praxis-dynamic-form', 'praxis-list', 'pdx-material-searchable-select', 'praxis-files-upload'],
+    stepperTokenKey: [
+        'container-color',
+        'line-color',
+        'header-label-text-color',
+        'header-optional-label-text-color',
+        'header-icon-foreground-color',
+        'header-icon-background-color',
+        'header-done-state-icon-background-color',
+        'header-done-state-icon-foreground-color',
+        'header-edit-state-icon-background-color',
+        'header-edit-state-icon-foreground-color',
+        'header-error-state-icon-background-color',
+        'header-error-state-icon-foreground-color',
+        'header-error-state-label-text-color',
+        'header-focus-state-layer-color',
+        'header-hover-state-layer-color',
+        'header-label-text-font',
+        'header-label-text-size',
+        'header-label-text-weight',
+        'header-selected-state-label-text-size',
+        'header-selected-state-label-text-weight',
+        'container-text-font',
+        'header-height',
+        'header-focus-state-layer-shape',
+        'header-hover-state-layer-shape',
+        'header-selected-state-icon-background-color',
+        'header-selected-state-icon-foreground-color',
+        'header-selected-state-label-text-color',
+    ],
+};
+const CAPS = [
+    { path: 'orientation', category: 'layout', valueKind: 'enum', allowedValues: ENUMS.orientation, description: 'Orientation of the stepper.' },
+    { path: 'linear', category: 'behavior', valueKind: 'boolean', description: 'Require sequential completion of steps.' },
+    { path: 'headerPosition', category: 'layout', valueKind: 'enum', allowedValues: ENUMS.headerPosition, description: 'Header position (vertical only).' },
+    { path: 'labelPosition', category: 'layout', valueKind: 'enum', allowedValues: ENUMS.labelPosition, description: 'Label position for horizontal stepper.' },
+    { path: 'color', category: 'appearance', valueKind: 'enum', allowedValues: ENUMS.matColor, description: 'Material color palette.' },
+    { path: 'disableRipple', category: 'behavior', valueKind: 'boolean', description: 'Disable ripple for headers.' },
+    { path: 'animationDuration', category: 'behavior', valueKind: 'string', description: 'Animation duration, e.g. 300ms.' },
+    { path: 'selectedIndex', category: 'behavior', valueKind: 'number', description: 'Current step index.' },
+    { path: 'density', category: 'appearance', valueKind: 'enum', allowedValues: ENUMS.density, description: 'Density preset.' },
+    { path: 'stepperClass', category: 'appearance', valueKind: 'string', description: 'CSS class for stepper root.' },
+    { path: 'headerClass', category: 'appearance', valueKind: 'string', description: 'CSS class for header.' },
+    { path: 'contentClass', category: 'appearance', valueKind: 'string', description: 'CSS class for content area.' },
+    { path: 'appearance', category: 'appearance', valueKind: 'object', description: 'Appearance settings.' },
+    { path: 'appearance.themeClass', category: 'appearance', valueKind: 'string', description: 'Theme CSS class for root.' },
+    { path: 'appearance.tokens', category: 'appearance', valueKind: 'object', description: 'Token map for theme overrides.' },
+    { path: 'appearance.tokens.[token]', category: 'appearance', valueKind: 'string', allowedValues: ENUMS.stepperTokenKey, description: 'Token value (CSS value or var).', safetyNotes: 'Token keys follow mat.stepper-overrides.' },
+    { path: 'appearance.icons', category: 'appearance', valueKind: 'object', description: 'Stepper icon overrides.' },
+    { path: 'appearance.icons.number', category: 'appearance', valueKind: 'string', description: 'Icon for number state.' },
+    { path: 'appearance.icons.done', category: 'appearance', valueKind: 'string', description: 'Icon for done state.' },
+    { path: 'appearance.icons.edit', category: 'appearance', valueKind: 'string', description: 'Icon for edit state.' },
+    { path: 'appearance.icons.error', category: 'appearance', valueKind: 'string', description: 'Icon for error state.' },
+    { path: 'appearance.iconsSet', category: 'appearance', valueKind: 'enum', allowedValues: ENUMS.iconsSet, description: 'Icon set class name (Material Symbols).' },
+    { path: 'navigation', category: 'navigation', valueKind: 'object', description: 'Footer navigation config.' },
+    { path: 'navigation.visible', category: 'navigation', valueKind: 'boolean', description: 'Show navigation buttons.' },
+    { path: 'navigation.prevLabel', category: 'navigation', valueKind: 'string', description: 'Previous button label.' },
+    { path: 'navigation.nextLabel', category: 'navigation', valueKind: 'string', description: 'Next button label.' },
+    { path: 'navigation.prevIcon', category: 'navigation', valueKind: 'string', description: 'Previous button icon.' },
+    { path: 'navigation.nextIcon', category: 'navigation', valueKind: 'string', description: 'Next button icon.' },
+    { path: 'navigation.variant', category: 'navigation', valueKind: 'enum', allowedValues: ENUMS.navVariant, description: 'Button variant.' },
+    { path: 'navigation.color', category: 'navigation', valueKind: 'enum', allowedValues: ENUMS.matColor, description: 'Button color.' },
+    { path: 'navigation.align', category: 'navigation', valueKind: 'enum', allowedValues: ENUMS.navAlign, description: 'Navigation alignment.' },
+    { path: 'steps', category: 'steps', valueKind: 'array', description: 'Step definitions.' },
+    { path: 'steps[]', category: 'steps', valueKind: 'object', description: 'Step definition.' },
+    { path: 'steps[].id', category: 'steps', valueKind: 'string', description: 'Step id.' },
+    { path: 'steps[].label', category: 'steps', valueKind: 'string', description: 'Step label.' },
+    { path: 'steps[].description', category: 'steps', valueKind: 'string', description: 'Step description.' },
+    { path: 'steps[].optional', category: 'steps', valueKind: 'boolean', description: 'Mark step as optional.' },
+    { path: 'steps[].editable', category: 'steps', valueKind: 'boolean', description: 'Allow editing completed steps.' },
+    { path: 'steps[].completed', category: 'steps', valueKind: 'boolean', description: 'Force completed state.' },
+    { path: 'steps[].hasError', category: 'steps', valueKind: 'boolean', description: 'Force error state.' },
+    { path: 'steps[].stateIcon', category: 'steps', valueKind: 'string', description: 'Custom state icon key.' },
+    { path: 'steps[].state', category: 'steps', valueKind: 'string', description: 'Custom state name for matStepperIcon.' },
+    { path: 'steps[].errorMessage', category: 'steps', valueKind: 'string', description: 'Error message shown in header.' },
+    { path: 'steps[].ariaLabel', category: 'accessibility', valueKind: 'string', description: 'ARIA label for step header.' },
+    { path: 'steps[].ariaLabelledby', category: 'accessibility', valueKind: 'string', description: 'ARIA labelledby for step header.' },
+    { path: 'steps[].form', category: 'steps', valueKind: 'object', description: 'Optional Dynamic Form config for step.' },
+    { path: 'steps[].form.resourcePath', category: 'steps', valueKind: 'string', description: 'Resource path for Dynamic Form.' },
+    { path: 'steps[].form.resourceId', category: 'steps', valueKind: 'string', description: 'Resource id for Dynamic Form (string or number).', example: '123', safetyNotes: 'Accepts string or number.' },
+    { path: 'steps[].form.mode', category: 'steps', valueKind: 'enum', allowedValues: ENUMS.formMode, description: 'Form mode.' },
+    { path: 'steps[].form.config', category: 'steps', valueKind: 'object', description: 'FormConfig for Dynamic Form.', safetyNotes: 'Use the form catalog for nested paths and FieldMetadata details.' },
+    { path: 'steps[].form.schemaSource', category: 'steps', valueKind: 'enum', allowedValues: ENUMS.schemaSource, description: 'Schema source for Dynamic Form.' },
+    { path: 'steps[].form.formId', category: 'steps', valueKind: 'string', description: 'Form id for Dynamic Form.' },
+    { path: 'steps[].widgets', category: 'steps', valueKind: 'array', description: 'WidgetDefinition list for step content.' },
+    { path: 'steps[].widgets[]', category: 'steps', valueKind: 'object', description: 'WidgetDefinition item.' },
+    { path: 'steps[].widgets[].id', category: 'steps', valueKind: 'enum', allowedValues: ENUMS.widgetId, description: 'Component registry id for widget.', safetyNotes: 'Use ids registered in ComponentMetadataRegistry.' },
+    { path: 'steps[].widgets[].inputs', category: 'steps', valueKind: 'object', description: 'Inputs bound into the widget instance.' },
+    { path: 'steps[].widgets[].outputs', category: 'steps', valueKind: 'object', description: 'Outputs mapped to actions.' },
+    { path: 'steps[].widgets[].outputs.[outputName]', category: 'steps', valueKind: 'object', description: 'Output action mapping (ActionDefinition or "emit").', safetyNotes: 'Use string "emit" to forward the output without mapping.' },
+    { path: 'steps[].widgets[].bindingOrder', category: 'steps', valueKind: 'array', description: 'Explicit input binding order.' },
+    { path: 'steps[].widgets[].bindingOrder[]', category: 'steps', valueKind: 'string', description: 'Input name applied first.' },
+];
+const STEPPER_AI_CAPABILITIES = {
+    version: 'v1.2',
+    enums: ENUMS,
+    targets: [
+        'praxis-stepper',
+        'mat-stepper',
+        'stepper',
+        'praxis-stepper-config-editor',
+        'praxis-select-quick-config-dialog',
+    ],
+    notes: [
+        'steps[] should be merged by id or label to avoid replacing all steps.',
+        'steps[].form.config uses FormConfig (see form catalog) and may include sections/actions/fieldMetadata.',
+        'steps[].widgets[].id must be a ComponentMetadataRegistry id (see component-registry catalog).',
+        'appearance.tokens is a free-form map; host may validate/sanitize.',
+        'When editing steps[].form.config.fieldMetadata, use FieldMetadata base if no controlType catalog exists.',
+    ],
+    capabilities: CAPS,
+};
+
+class StepperAiAdapter extends BaseAiAdapter {
+    stepper;
+    componentName = 'Praxis Stepper';
+    constructor(stepper) {
+        super();
+        this.stepper = stepper;
+    }
+    getCurrentConfig() {
+        const current = this.stepper._config?.() ?? { steps: [] };
+        return this.cloneConfig(current);
+    }
+    getCapabilities() {
+        return STEPPER_AI_CAPABILITIES.capabilities;
+    }
+    getRuntimeState() {
+        const cfg = this.stepper._config?.();
+        const steps = cfg?.steps || [];
+        return {
+            stepsCount: steps.length,
+            selectedIndex: this.stepper.selectedIndexComputed?.() ?? 0,
+            linear: !!cfg?.linear,
+            orientation: cfg?.orientation || 'horizontal',
+            hasForms: steps.some((s) => !!s.form),
+        };
+    }
+    createSnapshot() {
+        return this.getCurrentConfig();
+    }
+    async restoreSnapshot(snapshot) {
+        if (!snapshot)
+            return;
+        this.applyConfig(this.cloneConfig(snapshot));
+    }
+    async applyPatch(patch) {
+        try {
+            const current = this.getCurrentConfig();
+            const next = this.smartMergeStepperConfig(current, patch);
+            this.applyConfig(next);
+            return { success: true };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Unknown error applying patch';
+            return { success: false, error: message };
+        }
+    }
+    applyConfig(config) {
+        const apply = this.stepper.applyConfigFromAdapter;
+        if (typeof apply === 'function') {
+            apply.call(this.stepper, config);
+            return;
+        }
+        this.stepper.config = config;
+    }
+    smartMergeStepperConfig(base, patch) {
+        const result = deepMerge(base, patch);
+        if (patch.steps && Array.isArray(patch.steps)) {
+            const merged = this.mergeByKey(base.steps || [], patch.steps, (s) => s.id || s.label || '');
+            result.steps = merged;
+        }
+        return result;
+    }
+    mergeByKey(baseArr, patchArr, keyFn) {
+        const merged = baseArr.map((orig) => {
+            const key = keyFn(orig);
+            const match = key ? patchArr.find((p) => keyFn(p) === key) : undefined;
+            return match ? deepMerge(orig, match) : orig;
+        });
+        patchArr.forEach((item) => {
+            const key = keyFn(item);
+            if (!key || !baseArr.find((o) => keyFn(o) === key)) {
+                merged.push(item);
+            }
+        });
+        return merged;
+    }
+    cloneConfig(config) {
+        try {
+            return structuredClone(config);
+        }
+        catch {
+            return JSON.parse(JSON.stringify(config));
+        }
+    }
+}
+
 class PraxisStepper {
     // Templates projetados
     stepLabelTpl;
@@ -1438,6 +2927,8 @@ class PraxisStepper {
     primaryCta = { label: 'Configurar Stepper', icon: 'tune', color: 'primary', action: () => this.openEditor() };
     secondaryCtas = [{ label: 'Adicionar etapa inicial', icon: 'add', action: () => this.addFirstStep() }];
     // API de entrada
+    stepperId;
+    componentInstanceId;
     set config(c) {
         let next = null;
         if (typeof c === 'string') {
@@ -1454,6 +2945,7 @@ class PraxisStepper {
         this._config.set(next);
         if (next?.selectedIndex != null)
             this._selectedIndex.set(next.selectedIndex);
+        this.persistConfig(next);
     }
     set selectedIndexInput(i) {
         if (i != null)
@@ -1476,9 +2968,22 @@ class PraxisStepper {
     // Emissões
     selectedIndexChange = new EventEmitter();
     widgetEvent = new EventEmitter();
+    stepFormReady = new EventEmitter();
+    stepFormValueChange = new EventEmitter();
     stepperContext;
     settings = inject(SettingsPanelService);
+    storage = inject(ASYNC_CONFIG_STORAGE);
+    componentKeys = inject(ComponentKeyService);
+    logger = inject(LoggerService);
+    route = (() => { try {
+        return inject(ActivatedRoute);
+    }
+    catch {
+        return undefined;
+    } })();
+    warnedMissingId = false;
     animationDone = new EventEmitter();
+    aiAdapter = new StepperAiAdapter(this);
     // Computed getters
     steps = computed(() => this._config()?.steps || [], ...(ngDevMode ? [{ debugName: "steps" }] : []));
     orientation = computed(() => this._config()?.orientation || 'horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
@@ -1500,6 +3005,21 @@ class PraxisStepper {
     navNextLabel = () => this.nav()?.nextLabel || 'Próximo';
     navPrevIcon = () => this.nav()?.prevIcon;
     navNextIcon = () => this.nav()?.nextIcon;
+    stepperClassList = () => {
+        const cfg = this._config();
+        return [
+            'praxis-stepper',
+            cfg?.stepperClass,
+            cfg?.headerClass,
+            cfg?.appearance?.themeClass,
+            cfg?.appearance?.preset === 'ft-light' ? 'pdx-stepper-ft-light' : null,
+        ].filter(Boolean).join(' ');
+    };
+    contentClassList = () => {
+        const cfg = this._config();
+        return ['pdx-step-content', cfg?.contentClass].filter(Boolean).join(' ');
+    };
+    navActionsClass = () => `pdx-step-actions ${this.navAlignClass()}`;
     navAlignClass = () => {
         const a = this.nav()?.align || 'end';
         switch (a) {
@@ -1562,9 +3082,19 @@ class PraxisStepper {
     onFormReady(stepIndex, ev) {
         this._formGroups.set(stepIndex, ev.formGroup);
         this._formValidity.set(stepIndex, ev.formGroup.valid);
+        this.stepFormReady.emit({
+            stepIndex,
+            stepId: this.steps()[stepIndex]?.id,
+            event: ev,
+        });
     }
     onFormValueChange(stepIndex, ev) {
         this._formValidity.set(stepIndex, ev.isValid);
+        this.stepFormValueChange.emit({
+            stepIndex,
+            stepId: this.steps()[stepIndex]?.id,
+            event: ev,
+        });
     }
     formGroupFor(i) {
         return this._formGroups.get(i);
@@ -1586,13 +3116,15 @@ class PraxisStepper {
     }
     isStepEmpty(step) {
         const hasForm = !!step.form;
+        const hasWidgetsBefore = Array.isArray(step.widgetsBeforeForm) && step.widgetsBeforeForm.length > 0;
         const hasWidgets = Array.isArray(step.widgets) && step.widgets.length > 0;
-        return !hasForm && !hasWidgets;
+        return !hasForm && !hasWidgets && !hasWidgetsBefore;
     }
     openEditor() {
         const cfg = this._config() || { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
+        const key = this.storageKey() || this.stepperId || 'default';
         const ref = this.settings.open({
-            id: 'praxis-stepper-editor',
+            id: `praxis-stepper-editor:${key}`,
             title: 'Configurar Stepper',
             content: { component: PraxisStepperConfigEditor, inputs: { config: cfg } },
         });
@@ -1605,11 +3137,19 @@ class PraxisStepper {
                 // Clamp selection after changes
                 const sel = typeof cloned.selectedIndex === 'number' ? cloned.selectedIndex : this._selectedIndex();
                 this._selectedIndex.set(this.clampIndex(sel));
+                this.persistConfig(cloned);
             }
         };
         ref.applied$.subscribe(apply);
         ref.saved$.subscribe(apply);
     }
+    applyConfigFromAdapter(next) {
+        const cloned = JSON.parse(JSON.stringify(next));
+        this._config.set(cloned);
+        const sel = typeof cloned.selectedIndex === 'number' ? cloned.selectedIndex : this._selectedIndex();
+        this._selectedIndex.set(this.clampIndex(sel));
+        this.persistConfig(cloned);
+    }
     // CTA helpers
     addFirstStep() {
         const current = this._config() || { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
@@ -1624,11 +3164,17 @@ class PraxisStepper {
         this._config.set(next);
         // Seleciona a primeira etapa
         this._selectedIndex.set(0);
+        this.persistConfig(next);
     }
     // Navegação com validação remota opcional
     async onNext(i) {
         // Em modo linear, bloquear quando inválido
         if (this.linear() && this._formValidity.get(i) === false) {
+            const fg = this._formGroups.get(i);
+            if (fg) {
+                fg.markAllAsTouched();
+                fg.updateValueAndValidity({ emitEvent: true });
+            }
             return;
         }
         const step = this.steps()[i];
@@ -1667,8 +3213,63 @@ class PraxisStepper {
         }
         fg.updateValueAndValidity({ emitEvent: true });
     }
+    persistConfig(config) {
+        const key = this.storageKey();
+        if (!key || !config)
+            return;
+        this.storage.saveConfig(key, config).pipe(take(1)).subscribe({ error: () => { } });
+    }
+    storageKey() {
+        const id = this.componentKeyId();
+        return id ? `stepper-config:${id}` : null;
+    }
+    componentKeyId() {
+        const key = this.componentKeys.buildComponentId({
+            componentType: 'praxis-stepper',
+            componentId: this.stepperId,
+            instanceKey: this.componentInstanceId,
+            componentRef: this,
+            route: this.route,
+            requireComponentId: true,
+        });
+        if (!key)
+            this.warnMissingId();
+        return key;
+    }
+    warnMissingId() {
+        if (this.warnedMissingId)
+            return;
+        this.warnedMissingId = true;
+        this.logger.warnOnce('[PraxisStepper] stepperId is required for config persistence.', {
+            context: {
+                lib: 'praxis-stepper',
+                component: 'PraxisStepper',
+            },
+            data: {
+                stepperId: this.stepperId,
+                componentInstanceId: this.componentInstanceId,
+            },
+            dedupeKey: 'praxis-stepper:missing-stepper-id',
+        });
+    }
+    ngOnInit() {
+        const key = this.storageKey();
+        if (!key)
+            return;
+        this.storage.loadConfig(key).pipe(take(1)).subscribe((stored) => {
+            if (!stored)
+                return;
+            const cloned = JSON.parse(JSON.stringify(stored));
+            this._config.set(cloned);
+            const sel = typeof cloned.selectedIndex === 'number' ? cloned.selectedIndex : this._selectedIndex();
+            this._selectedIndex.set(this.clampIndex(sel));
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisStepper, isStandalone: true, selector: "praxis-stepper", inputs: { config: "config", selectedIndexInput: "selectedIndexInput", selectedIndex: "selectedIndex", disableRippleInput: "disableRippleInput", editModeEnabled: "editModeEnabled", labelPosition: "labelPosition", color: "color", serverValidate: "serverValidate", stepperContext: "stepperContext" }, outputs: { selectedIndexChange: "selectedIndexChange", widgetEvent: "widgetEvent", animationDone: "animationDone", selectionChange: "selectionChange" }, queries: [{ propertyName: "stepLabelTpl", first: true, predicate: ["stepLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisStepper, isStandalone: true, selector: "praxis-stepper", inputs: { stepperId: "stepperId", componentInstanceId: "componentInstanceId", config: "config", selectedIndexInput: "selectedIndexInput", selectedIndex: "selectedIndex", disableRippleInput: "disableRippleInput", editModeEnabled: "editModeEnabled", labelPosition: "labelPosition", color: "color", serverValidate: "serverValidate", stepperContext: "stepperContext" }, outputs: { selectedIndexChange: "selectedIndexChange", widgetEvent: "widgetEvent", stepFormReady: "stepFormReady", stepFormValueChange: "stepFormValueChange", animationDone: "animationDone", selectionChange: "selectionChange" }, host: { properties: { "class": "densityClass()" } }, queries: [{ propertyName: "stepLabelTpl", first: true, predicate: ["stepLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: `
+    <div class="stepper-ai-assistant" *ngIf="editModeEnabled">
+      <praxis-ai-assistant [adapter]="aiAdapter"></praxis-ai-assistant>
+    </div>
     <ng-container *ngIf="steps().length > 0; else emptyState">
     <mat-stepper
       [linear]="linear()"
@@ -1681,8 +3282,7 @@ class PraxisStepper {
       [selectedIndex]="selectedIndexComputed()"
       (selectionChange)="onSelectionChange($event)"
       (animationDone)="onAnimationDone()"
-      class="praxis-stepper"
-      [ngClass]="[densityClass(), _config()?.stepperClass || '']"
+      [class]="stepperClassList()"
     >
       <!-- Projeção de ícones customizados do header: <ng-template matStepperIcon="done"> ... </ng-template> -->
       <ng-content></ng-content>
@@ -1719,7 +3319,13 @@ class PraxisStepper {
           ></ng-container>
           <ng-template #plainLabel>{{ step.label }}</ng-template>
         </ng-template>
-        <div class="pdx-step-content" [ngClass]="_config()?.contentClass || ''">
+        <div [class]="contentClassList()">
+          <ng-container *ngFor="let wd of step.widgetsBeforeForm || []"
+            [dynamicWidgetLoader]="wd"
+            [context]="stepperContext"
+            [strictValidation]="true"
+            [autoWireOutputs]="true"
+            (widgetEvent)="onChildWidgetEvent(i, wd, $event)"></ng-container>
           <praxis-dynamic-form *ngIf="step.form as f"
             [resourcePath]="f.resourcePath"
             [resourceId]="$any(f.resourceId)"
@@ -1746,7 +3352,7 @@ class PraxisStepper {
             ></praxis-empty-state-card>
           </ng-container>
         </div>
-        <div class="pdx-step-actions" *ngIf="navVisible()" [ngClass]="navAlignClass()">
+        <div *ngIf="navVisible()" [class]="navActionsClass()">
           <!-- PREV button (hidden on first step) -->
           <ng-container *ngIf="selectedIndexComputed() > 0">
             <ng-container [ngSwitch]="navVariant()">
@@ -1811,11 +3417,16 @@ class PraxisStepper {
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%}:host(.density-compact) .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) .mat-step-header{min-height:44px}.pdx-step-content{padding:8px 0}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "mode", "config", "schemaSource", "editModeEnabled", "formId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "editModeEnabledChange", "customAction", "actionConfirmation", "schemaStatusChange"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header:hover{background:var(--md-sys-color-primary-container)}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent}::ng-deep .pdx-stepper-ft-light .mat-horizontal-stepper-header-container{margin-bottom:14px;justify-content:flex-start;align-items:center}::ng-deep .pdx-stepper-ft-light .mat-step-header{min-height:28px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-active,::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .pdx-stepper-ft-light .mat-step-icon{height:16px;width:16px;font-size:9px;background:transparent;border:1px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-icon .mat-icon{display:none}::ng-deep .pdx-stepper-ft-light .mat-step-icon-content{font-weight:600;font-size:9px;line-height:1}::ng-deep .pdx-stepper-ft-light .mat-step-icon-state-done,::ng-deep .pdx-stepper-ft-light .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant);border-top-width:1px;margin:0 8px;flex:1 1 0}::ng-deep .pdx-stepper-ft-light .mat-step-header{padding:0 6px;flex:0 0 auto}::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-keyboard-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-program-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-mouse-focused{outline:none;box-shadow:none;background:transparent}::ng-deep .pdx-stepper-ft-light .mat-step-header:hover{background:transparent}::ng-deep .ft-stepper{background:transparent}::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:16px}::ng-deep .ft-stepper .mat-step-header{font-size:.8rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-label.mat-step-label-active,::ng-deep .ft-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .ft-stepper .mat-step-icon{height:22px;width:22px;font-size:11px;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));border:2px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-icon-state-done,::ng-deep .ft-stepper .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .ft-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "mode", "config", "schemaSource", "editModeEnabled", "formId", "componentInstanceId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "editModeEnabledChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-stepper', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatStepperModule, MatButtonModule, MatIconModule, PraxisIconDirective, PraxisDynamicForm, DynamicWidgetLoaderDirective, EmptyStateCardComponent], template: `
+            args: [{ selector: 'praxis-stepper', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatStepperModule, MatButtonModule, MatIconModule, PraxisIconDirective, PraxisDynamicForm, DynamicWidgetLoaderDirective, EmptyStateCardComponent, PraxisAiAssistantComponent], host: {
+                        '[class]': 'densityClass()'
+                    }, template: `
+    <div class="stepper-ai-assistant" *ngIf="editModeEnabled">
+      <praxis-ai-assistant [adapter]="aiAdapter"></praxis-ai-assistant>
+    </div>
     <ng-container *ngIf="steps().length > 0; else emptyState">
     <mat-stepper
       [linear]="linear()"
@@ -1828,8 +3439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
       [selectedIndex]="selectedIndexComputed()"
       (selectionChange)="onSelectionChange($event)"
       (animationDone)="onAnimationDone()"
-      class="praxis-stepper"
-      [ngClass]="[densityClass(), _config()?.stepperClass || '']"
+      [class]="stepperClassList()"
     >
       <!-- Projeção de ícones customizados do header: <ng-template matStepperIcon="done"> ... </ng-template> -->
       <ng-content></ng-content>
@@ -1866,7 +3476,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
           ></ng-container>
           <ng-template #plainLabel>{{ step.label }}</ng-template>
         </ng-template>
-        <div class="pdx-step-content" [ngClass]="_config()?.contentClass || ''">
+        <div [class]="contentClassList()">
+          <ng-container *ngFor="let wd of step.widgetsBeforeForm || []"
+            [dynamicWidgetLoader]="wd"
+            [context]="stepperContext"
+            [strictValidation]="true"
+            [autoWireOutputs]="true"
+            (widgetEvent)="onChildWidgetEvent(i, wd, $event)"></ng-container>
           <praxis-dynamic-form *ngIf="step.form as f"
             [resourcePath]="f.resourcePath"
             [resourceId]="$any(f.resourceId)"
@@ -1893,7 +3509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             ></praxis-empty-state-card>
           </ng-container>
         </div>
-        <div class="pdx-step-actions" *ngIf="navVisible()" [ngClass]="navAlignClass()">
+        <div *ngIf="navVisible()" [class]="navActionsClass()">
           <!-- PREV button (hidden on first step) -->
           <ng-container *ngIf="selectedIndexComputed() > 0">
             <ng-container [ngSwitch]="navVariant()">
@@ -1958,10 +3574,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%}:host(.density-compact) .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) .mat-step-header{min-height:44px}.pdx-step-content{padding:8px 0}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header:hover{background:var(--md-sys-color-primary-container)}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent}::ng-deep .pdx-stepper-ft-light .mat-horizontal-stepper-header-container{margin-bottom:14px;justify-content:flex-start;align-items:center}::ng-deep .pdx-stepper-ft-light .mat-step-header{min-height:28px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-active,::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .pdx-stepper-ft-light .mat-step-icon{height:16px;width:16px;font-size:9px;background:transparent;border:1px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-icon .mat-icon{display:none}::ng-deep .pdx-stepper-ft-light .mat-step-icon-content{font-weight:600;font-size:9px;line-height:1}::ng-deep .pdx-stepper-ft-light .mat-step-icon-state-done,::ng-deep .pdx-stepper-ft-light .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant);border-top-width:1px;margin:0 8px;flex:1 1 0}::ng-deep .pdx-stepper-ft-light .mat-step-header{padding:0 6px;flex:0 0 auto}::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-keyboard-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-program-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-mouse-focused{outline:none;box-shadow:none;background:transparent}::ng-deep .pdx-stepper-ft-light .mat-step-header:hover{background:transparent}::ng-deep .ft-stepper{background:transparent}::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:16px}::ng-deep .ft-stepper .mat-step-header{font-size:.8rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-label.mat-step-label-active,::ng-deep .ft-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .ft-stepper .mat-step-icon{height:22px;width:22px;font-size:11px;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));border:2px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-icon-state-done,::ng-deep .ft-stepper .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .ft-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"] }]
         }], propDecorators: { stepLabelTpl: [{
                 type: ContentChild,
                 args: ['stepLabelTpl', { read: TemplateRef }]
+            }], stepperId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], componentInstanceId: [{
+                type: Input
             }], config: [{
                 type: Input
             }], selectedIndexInput: [{
@@ -1982,6 +3603,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Output
             }], widgetEvent: [{
                 type: Output
+            }], stepFormReady: [{
+                type: Output
+            }], stepFormValueChange: [{
+                type: Output
             }], stepperContext: [{
                 type: Input
             }], animationDone: [{
@@ -1990,6 +3615,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Output
             }] } });
 
+class PraxisWizardBenefitsGridComponent {
+    blockId;
+    title;
+    items = [];
+    columns;
+    boxed = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardBenefitsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisWizardBenefitsGridComponent, isStandalone: true, selector: "praxis-wizard-benefits-grid", inputs: { blockId: "blockId", title: "title", items: "items", columns: "columns", boxed: "boxed" }, host: { properties: { "attr.data-block-id": "blockId || null" } }, ngImport: i0, template: `
+    <section class="pwx-benefits">
+      @if (title) {
+        <h3 class="pwx-benefits-title">{{ title }}</h3>
+      }
+      <div class="pwx-benefits-grid" [class.is-boxed]="boxed" [style.--pwx-columns]="columns || 4">
+        <div class="pwx-benefit" *ngFor="let item of items">
+          <div class="pwx-benefit-icon" *ngIf="item.icon">
+            <mat-icon [fontIcon]="item.icon"></mat-icon>
+          </div>
+          <div class="pwx-benefit-body">
+            <div class="pwx-benefit-title">{{ item.title }}</div>
+            <div class="pwx-benefit-text" *ngIf="item.text">{{ item.text }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:14px 18px}.pwx-benefits-grid.is-boxed{padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start}.pwx-benefit-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardBenefitsGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-benefits-grid', standalone: true, host: {
+                        '[attr.data-block-id]': 'blockId || null',
+                    }, imports: [CommonModule, MatIconModule], template: `
+    <section class="pwx-benefits">
+      @if (title) {
+        <h3 class="pwx-benefits-title">{{ title }}</h3>
+      }
+      <div class="pwx-benefits-grid" [class.is-boxed]="boxed" [style.--pwx-columns]="columns || 4">
+        <div class="pwx-benefit" *ngFor="let item of items">
+          <div class="pwx-benefit-icon" *ngIf="item.icon">
+            <mat-icon [fontIcon]="item.icon"></mat-icon>
+          </div>
+          <div class="pwx-benefit-body">
+            <div class="pwx-benefit-title">{{ item.title }}</div>
+            <div class="pwx-benefit-text" *ngIf="item.text">{{ item.text }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:14px 18px}.pwx-benefits-grid.is-boxed{padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start}.pwx-benefit-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { blockId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], boxed: [{
+                type: Input
+            }] } });
+
+class PraxisWizardContentBlockComponent {
+    blockId;
+    title;
+    subtitle;
+    text;
+    caption;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardContentBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisWizardContentBlockComponent, isStandalone: true, selector: "praxis-wizard-content-block", inputs: { blockId: "blockId", title: "title", subtitle: "subtitle", text: "text", caption: "caption" }, host: { properties: { "attr.data-block-id": "blockId || null" } }, ngImport: i0, template: `
+    <section class="pwx-content">
+      @if (title) {
+        <h3 class="pwx-content-title">{{ title }}</h3>
+      }
+      @if (subtitle) {
+        <div class="pwx-content-subtitle">{{ subtitle }}</div>
+      }
+      @if (text) {
+        <p class="pwx-content-text">{{ text }}</p>
+      }
+      @if (caption) {
+        <div class="pwx-content-caption">{{ caption }}</div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block}.pwx-content{display:flex;flex-direction:column;gap:6px}.pwx-content-title{margin:0;font-size:1.05rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pwx-content-subtitle{font-size:.95rem;color:var(--md-sys-color-on-surface)}.pwx-content-text{margin:0;font-size:.88rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.pwx-content-caption{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardContentBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-content-block', standalone: true, host: {
+                        '[attr.data-block-id]': 'blockId || null',
+                    }, imports: [CommonModule], template: `
+    <section class="pwx-content">
+      @if (title) {
+        <h3 class="pwx-content-title">{{ title }}</h3>
+      }
+      @if (subtitle) {
+        <div class="pwx-content-subtitle">{{ subtitle }}</div>
+      }
+      @if (text) {
+        <p class="pwx-content-text">{{ text }}</p>
+      }
+      @if (caption) {
+        <div class="pwx-content-caption">{{ caption }}</div>
+      }
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-content{display:flex;flex-direction:column;gap:6px}.pwx-content-title{margin:0;font-size:1.05rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pwx-content-subtitle{font-size:.95rem;color:var(--md-sys-color-on-surface)}.pwx-content-text{margin:0;font-size:.88rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.pwx-content-caption{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}\n"] }]
+        }], propDecorators: { blockId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }] } });
+
+class PraxisWizardInlineNoticeComponent {
+    blockId;
+    text = '';
+    tone = 'neutral';
+    get toneClass() {
+        return this.tone !== 'neutral' ? this.tone : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardInlineNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisWizardInlineNoticeComponent, isStandalone: true, selector: "praxis-wizard-inline-notice", inputs: { blockId: "blockId", text: "text", tone: "tone" }, host: { properties: { "attr.data-block-id": "blockId || null" } }, ngImport: i0, template: `
+    <div class="pwx-inline" [ngClass]="toneClass">
+      {{ text }}
+    </div>
+  `, isInline: true, styles: [":host{display:block}.pwx-inline{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.4}.pwx-inline.info{color:var(--md-sys-color-on-surface)}.pwx-inline.warning{color:var(--md-sys-color-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardInlineNoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-inline-notice', standalone: true, host: {
+                        '[attr.data-block-id]': 'blockId || null',
+                    }, imports: [CommonModule], template: `
+    <div class="pwx-inline" [ngClass]="toneClass">
+      {{ text }}
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-inline{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.4}.pwx-inline.info{color:var(--md-sys-color-on-surface)}.pwx-inline.warning{color:var(--md-sys-color-error)}\n"] }]
+        }], propDecorators: { blockId: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }] } });
+
+class PraxisWizardDividerComponent {
+    blockId;
+    label;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisWizardDividerComponent, isStandalone: true, selector: "praxis-wizard-divider", inputs: { blockId: "blockId", label: "label" }, host: { properties: { "attr.data-block-id": "blockId || null" } }, ngImport: i0, template: `
+    <div class="pwx-divider">
+      <span *ngIf="label" class="pwx-divider-label">{{ label }}</span>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.pwx-divider{position:relative;height:1px;background:var(--praxis-wizard-divider, var(--md-sys-color-outline-variant));margin:16px 0}.pwx-divider-label{position:absolute;top:-.65rem;left:50%;transform:translate(-50%);padding:0 8px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-divider', standalone: true, host: {
+                        '[attr.data-block-id]': 'blockId || null',
+                    }, imports: [CommonModule], template: `
+    <div class="pwx-divider">
+      <span *ngIf="label" class="pwx-divider-label">{{ label }}</span>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-divider{position:relative;height:1px;background:var(--praxis-wizard-divider, var(--md-sys-color-outline-variant));margin:16px 0}.pwx-divider-label{position:absolute;top:-.65rem;left:50%;transform:translate(-50%);padding:0 8px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface))}\n"] }]
+        }], propDecorators: { blockId: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
 const PRAXIS_STEPPER_COMPONENT_METADATA = {
     id: 'praxis-stepper',
     selector: 'praxis-stepper',
@@ -1998,10 +3795,13 @@ const PRAXIS_STEPPER_COMPONENT_METADATA = {
     description: 'Stepper configurável (horizontal/vertical/linear) com passos e conteúdo dinâmico.',
     icon: 'format_list_numbered',
     inputs: [
+        { name: 'stepperId', type: 'string', label: 'ID do Stepper', description: 'Identificador para persistência (obrigatório)' },
+        { name: 'componentInstanceId', type: 'string', label: 'ID da instância', description: 'Identificador opcional para múltiplas instâncias na mesma rota' },
         { name: 'config', type: 'StepperMetadata', label: 'Configuração', description: 'Configuração JSON com passos e opções' },
         { name: 'selectedIndex', type: 'number', label: '[(selectedIndex)] Índice selecionado' },
         { name: 'selectedIndexInput', type: 'number', label: 'Índice selecionado (legacy)' },
         { name: 'disableRippleInput', type: 'boolean', default: false, label: 'Desabilitar ripple' },
+        { name: 'editModeEnabled', type: 'boolean', default: false, label: 'Modo de edição', description: 'Exibe controles de edição e assistente AI no runtime' },
         { name: 'labelPosition', type: "'bottom' | 'end'", label: 'Posição do rótulo (horizontal)' },
         { name: 'color', type: 'ThemePalette', label: 'Cor (M2)' },
         { name: 'appearance', type: '{ themeClass?: string; tokens?: Record<string,string>; icons?: { number?: string; done?: string; edit?: string; error?: string }; iconsSet?: string }', label: 'Aparência (tokens, themeClass, ícones, conjunto)' },
@@ -2010,6 +3810,7 @@ const PRAXIS_STEPPER_COMPONENT_METADATA = {
         { name: 'stepperClass', type: 'string', label: 'Classe CSS (stepper)' },
         { name: 'headerClass', type: 'string', label: 'Classe CSS (header)' },
         { name: 'contentClass', type: 'string', label: 'Classe CSS (conteúdo)' },
+        { name: 'stepperContext', type: 'Record<string, any>', label: 'Contexto', description: 'Contexto compartilhado para widgets internos' },
         { name: 'navigation', type: "{ visible?: boolean; prevLabel?: string; nextLabel?: string; prevIcon?: string; nextIcon?: string; variant?: 'basic'|'flat'|'stroked'|'raised'; color?: ThemePalette; align?: 'start'|'center'|'end'|'space-between' }", label: 'Navegação (botões)'
         },
     ],
@@ -2018,22 +3819,998 @@ const PRAXIS_STEPPER_COMPONENT_METADATA = {
         { name: 'selectedIndexChange', type: 'number', label: 'Índice selecionado (change)' },
         { name: 'animationDone', type: 'void', label: 'Animação concluída' },
         { name: 'widgetEvent', type: '{ stepId?: string; stepIndex?: number; sourceId: string; output?: string; payload?: any }', label: 'Evento interno' },
+        { name: 'stepFormReady', type: '{ stepId?: string; stepIndex: number; event: FormReadyEvent }', label: 'Form ready (por etapa)' },
+        { name: 'stepFormValueChange', type: '{ stepId?: string; stepIndex: number; event: FormValueChangeEvent }', label: 'Form value change (por etapa)' },
+    ],
+    actions: [
+        {
+            id: 'select-step',
+            label: 'Selecionar etapa',
+            icon: 'flag',
+            description: 'Emite alteração do índice selecionado',
+            emit: 'selectedIndexChange',
+            payloadSchema: {
+                type: 'number',
+                example: 0,
+            },
+            scope: 'any',
+        },
+        {
+            id: 'step-change',
+            label: 'Troca de etapa',
+            icon: 'swap_vert',
+            description: 'Emite evento ao trocar de etapa',
+            emit: 'selectionChange',
+            payloadSchema: {
+                type: 'object',
+                properties: {
+                    selectedIndex: { type: 'number', description: 'Índice selecionado' },
+                    previouslySelectedIndex: { type: 'number', description: 'Índice anterior' },
+                },
+                required: ['selectedIndex'],
+                example: { selectedIndex: 1, previouslySelectedIndex: 0 },
+            },
+            scope: 'any',
+        },
     ],
     tags: ['widget', 'container', 'stepper', 'configurable'],
     lib: '@praxisui/stepper',
     layoutHints: { recommendedCols: 8, recommendedRows: 6, minCols: 4, minRows: 4 },
 };
+const PRAXIS_WIZARD_BENEFITS_METADATA = {
+    id: 'praxis-wizard-benefits',
+    selector: 'praxis-wizard-benefits-grid',
+    component: PraxisWizardBenefitsGridComponent,
+    friendlyName: 'Wizard Benefits Grid',
+    description: 'Grid de benefícios com ícones/títulos/texto (uso editorial).',
+    icon: 'view_module',
+    inputs: [
+        { name: 'blockId', type: 'string', label: 'ID estável (avançado)', description: 'Chave estável para telemetria/e2e.' },
+        { name: 'title', type: 'string', label: 'Título' },
+        { name: 'items', type: 'Array<{ icon?: string; title: string; text?: string }>', label: 'Itens' },
+        { name: 'columns', type: 'number', label: 'Colunas' },
+        { name: 'boxed', type: 'boolean', label: 'Boxed' },
+    ],
+    outputs: [],
+    tags: ['widget', 'wizard', 'content', 'benefits'],
+    lib: '@praxisui/stepper',
+};
+const PRAXIS_WIZARD_CONTENT_METADATA = {
+    id: 'praxis-wizard-content',
+    selector: 'praxis-wizard-content-block',
+    component: PraxisWizardContentBlockComponent,
+    friendlyName: 'Wizard Content Block',
+    description: 'Bloco editorial com título/subtítulo/texto.',
+    icon: 'article',
+    inputs: [
+        { name: 'blockId', type: 'string', label: 'ID estável (avançado)', description: 'Chave estável para telemetria/e2e.' },
+        { name: 'title', type: 'string', label: 'Título' },
+        { name: 'subtitle', type: 'string', label: 'Subtítulo' },
+        { name: 'text', type: 'string', label: 'Texto' },
+        { name: 'caption', type: 'string', label: 'Legenda' },
+    ],
+    outputs: [],
+    tags: ['widget', 'wizard', 'content'],
+    lib: '@praxisui/stepper',
+};
+const PRAXIS_WIZARD_NOTICE_METADATA = {
+    id: 'praxis-wizard-inline-notice',
+    selector: 'praxis-wizard-inline-notice',
+    component: PraxisWizardInlineNoticeComponent,
+    friendlyName: 'Wizard Inline Notice',
+    description: 'Texto legal/nota inline para wizards.',
+    icon: 'info',
+    inputs: [
+        { name: 'blockId', type: 'string', label: 'ID estável (avançado)', description: 'Chave estável para telemetria/e2e.' },
+        { name: 'text', type: 'string', label: 'Texto' },
+        { name: 'tone', type: "'neutral' | 'info' | 'warning'", label: 'Tom' },
+    ],
+    outputs: [],
+    tags: ['widget', 'wizard', 'notice'],
+    lib: '@praxisui/stepper',
+};
+const PRAXIS_WIZARD_DIVIDER_METADATA = {
+    id: 'praxis-wizard-divider',
+    selector: 'praxis-wizard-divider',
+    component: PraxisWizardDividerComponent,
+    friendlyName: 'Wizard Divider',
+    description: 'Separador visual para fluxo.',
+    icon: 'horizontal_rule',
+    inputs: [
+        { name: 'blockId', type: 'string', label: 'ID estável (avançado)', description: 'Chave estável para telemetria/e2e.' },
+        { name: 'label', type: 'string', label: 'Rótulo' },
+    ],
+    outputs: [],
+    tags: ['widget', 'wizard', 'divider'],
+    lib: '@praxisui/stepper',
+};
 function providePraxisStepperMetadata() {
     return {
         provide: ENVIRONMENT_INITIALIZER,
         multi: true,
         useFactory: (registry) => () => {
             registry.register(PRAXIS_STEPPER_COMPONENT_METADATA);
+            registry.register(PRAXIS_WIZARD_BENEFITS_METADATA);
+            registry.register(PRAXIS_WIZARD_CONTENT_METADATA);
+            registry.register(PRAXIS_WIZARD_NOTICE_METADATA);
+            registry.register(PRAXIS_WIZARD_DIVIDER_METADATA);
         },
         deps: [ComponentMetadataRegistry],
     };
 }
 
+const FT_WIZARD_JSON = `{
+  "id": "ft-edit-wizard",
+  "brand": "FINANCIAL TIMES",
+  "progress": {
+    "variant": "line",
+    "showLabels": true,
+    "labelPosition": "bottom"
+  },
+  "cta": {
+    "label": "Continue",
+    "action": "next",
+    "secondaryLabel": "Back",
+    "secondaryAction": "prev",
+    "sticky": true
+  },
+  "preferences": {
+    "stepId": "preferences",
+    "storageKey": "praxis:ft-wizard",
+    "persistFields": ["topStories", "invitesOffers", "recommendations"]
+  },
+  "theme": {
+    "praxis-wizard-card-bg": "#fff1e5",
+    "md-sys-color-surface": "#fff1e5",
+    "md-sys-color-on-surface": "#33302e",
+    "praxis-wizard-accent": "#0d7680",
+    "praxis-wizard-border": "#cfcfcf",
+    "md-sys-color-outline-variant": "#cfcfcf",
+    "ft-font-head": "\\\"Financier Display\\\", Georgia, serif",
+    "ft-font-body": "\\\"Metric\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif",
+    "ft-radius": "0",
+    "ft-shadow": "none",
+    "ft-header-border": "1px solid #cfcfcf"
+  },
+  "steps": [
+    {
+      "id": "access",
+      "label": "Access",
+      "title": "Create an FT Edit account",
+      "subtitle": "Get access in a couple of steps and upgrade later for the full FT experience.",
+      "zones": {
+        "intro": [
+          {
+            "type": "benefitsGrid",
+            "title": "Why register?",
+            "columns": 4,
+            "boxed": true,
+            "items": [
+              {
+                "icon": "format_quote",
+                "title": "Beyond the headlines",
+                "text": "Insightful news, thought-provoking opinion and fascinating features."
+              },
+              {
+                "icon": "edit_note",
+                "title": "Curated daily editions",
+                "text": "Eight fresh articles a day chosen for you by our senior editors."
+              },
+              {
+                "icon": "bookmarks",
+                "title": "Never miss a great story",
+                "text": "Explore previous editions from the past week."
+              },
+              {
+                "icon": "mail",
+                "title": "Receive the FT Edit newsletter",
+                "text": "A daily round-up delivered straight to your inbox."
+              }
+            ]
+          }
+        ],
+        "footer": [
+          {
+            "type": "inlineNotice",
+            "text": "For more information about how we use your data, please refer to our privacy and cookie policies."
+          }
+        ]
+      },
+      "cta": {
+        "label": "Register with email",
+        "action": "next"
+      },
+      "form": {
+        "config": {
+          "sections": [
+            {
+              "id": "access-section",
+              "rows": [
+                {
+                  "columns": [
+                    {
+                      "fields": ["confirmAge", "editNewsletter"]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "fieldMetadata": [
+            {
+              "name": "confirmAge",
+              "label": "",
+              "controlType": "checkbox",
+              "required": true,
+              "layout": "horizontal",
+              "options": [
+                {
+                  "label": "I confirm I am 16+ years old and agree to the Terms & Conditions.",
+                  "value": true
+                }
+              ]
+            },
+            {
+              "name": "editNewsletter",
+              "label": "FT Edit newsletter",
+              "controlType": "toggle",
+              "defaultValue": true,
+              "hint": "All new members also start receiving our daily FT Edit newsletter."
+            }
+          ],
+          "actions": {
+            "submit": { "visible": false, "label": "Submit" },
+            "cancel": { "visible": false, "label": "Cancel" },
+            "reset": { "visible": false, "label": "Reset" }
+          }
+        }
+      }
+    },
+    {
+      "id": "account",
+      "label": "Account",
+      "title": "Create an FT Edit account",
+      "subtitle": "This address will be used to create your account.",
+      "zones": {
+        "intro": [
+          {
+            "type": "inlineNotice",
+            "text": "All new members also start receiving our daily FT Edit newsletter.",
+            "tone": "info"
+          }
+        ],
+        "footer": [
+          {
+            "type": "inlineNotice",
+            "text": "We will send you service messages about your account, security or legal notifications."
+          }
+        ]
+      },
+      "form": {
+        "config": {
+          "sections": [
+            {
+              "id": "account-section",
+              "rows": [
+                {
+                  "columns": [
+                    { "fields": ["email", "password"] },
+                    { "fields": ["newsletterOptIn"] }
+                  ]
+                }
+              ]
+            }
+          ],
+          "fieldMetadata": [
+            {
+              "name": "email",
+              "label": "Email address",
+              "controlType": "email",
+              "required": true,
+              "placeholder": "Enter your email address"
+            },
+            {
+              "name": "password",
+              "label": "Password",
+              "controlType": "password",
+              "required": true,
+              "placeholder": "Enter a password",
+              "hint": "Use 8 or more characters. You can use letters, numbers or symbols.",
+              "validators": {
+                "minLength": 8
+              },
+              "revealToggle": {
+                "enabled": true,
+                "style": "text",
+                "showLabel": "Show password",
+                "hideLabel": "Hide password",
+                "ariaLabel": "Toggle password visibility"
+              }
+            },
+            {
+              "name": "newsletterOptIn",
+              "label": "Stay up to date",
+              "controlType": "toggle",
+              "defaultValue": true,
+              "hint": "All new members also start receiving our daily FT Edit newsletter."
+            }
+          ],
+          "actions": {
+            "submit": { "visible": false, "label": "Submit" },
+            "cancel": { "visible": false, "label": "Cancel" },
+            "reset": { "visible": false, "label": "Reset" }
+          }
+        }
+      }
+    },
+    {
+      "id": "preferences",
+      "label": "Preferences",
+      "title": "Stay up to date",
+      "subtitle": "You can update these any time in your Contact Preferences.",
+      "description": "We will send you service messages about your account, security or legal notifications.",
+      "zones": {
+        "footer": [
+          {
+            "type": "divider"
+          },
+          {
+            "type": "inlineNotice",
+            "text": "We will send you service messages about your account, security or legal notifications."
+          }
+        ]
+      },
+      "cta": {
+        "label": "Create an FT Edit account",
+        "action": "submit",
+        "secondaryLabel": "Back",
+        "secondaryAction": "prev"
+      },
+      "form": {
+        "config": {
+          "sections": [
+            {
+              "id": "prefs-section",
+              "rows": [
+                {
+                  "columns": [
+                    { "fields": ["topStories"] },
+                    { "fields": ["invitesOffers"] },
+                    { "fields": ["recommendations"] }
+                  ]
+                }
+              ]
+            }
+          ],
+          "fieldMetadata": [
+            {
+              "name": "topStories",
+              "label": "Top stories & features",
+              "controlType": "toggle",
+              "defaultValue": true,
+              "hint": "Get the most from the Financial Times with personalised special reports, recommended reads and latest feature announcements."
+            },
+            {
+              "name": "invitesOffers",
+              "label": "Invites & offers from the FT",
+              "controlType": "toggle",
+              "defaultValue": true,
+              "hint": "Receive exclusive personalised event invitations, carefully-curated offers and promotions from the Financial Times."
+            },
+            {
+              "name": "recommendations",
+              "label": "Personal recommendations",
+              "controlType": "toggle",
+              "defaultValue": false,
+              "hint": "Tailored reading lists based on what you follow."
+            }
+          ],
+          "actions": {
+            "submit": { "visible": false, "label": "Submit" },
+            "cancel": { "visible": false, "label": "Cancel" },
+            "reset": { "visible": false, "label": "Reset" }
+          }
+        }
+      }
+    }
+  ]
+}`;
+const FT_WIZARD_CONFIG = JSON.parse(FT_WIZARD_JSON);
+
+const defaultCardSkin = {
+    type: 'elevated',
+    radius: '12px',
+    border: '1px solid var(--md-sys-color-outline-variant, #e0e0e0)',
+    shadow: '0 1px 2px rgba(0,0,0,0.06)',
+};
+const defaultCardLayout = {
+    variant: 'cards',
+    density: 'comfortable',
+    lines: 2,
+    model: 'standard',
+    dividers: 'none',
+};
+const defaultCardTemplating = {
+    primary: { type: 'text', expr: '${item.title}', class: 'ft-card-title' },
+    secondary: { type: 'text', expr: '${item.description}', class: 'ft-card-desc' },
+};
+function buildStepperConfig(wizard) {
+    const steps = wizard.steps.map((step) => buildStep(step, wizard.id));
+    return {
+        orientation: 'horizontal',
+        linear: true,
+        headerPosition: 'top',
+        labelPosition: wizard.progress?.labelPosition ?? 'bottom',
+        density: 'compact',
+        stepperClass: 'ft-stepper',
+        headerClass: 'ft-stepper-header',
+        contentClass: 'ft-stepper-content',
+        appearance: {
+            preset: 'ft-light',
+        },
+        navigation: { visible: false },
+        steps,
+    };
+}
+function buildStep(step, wizardId) {
+    const blocks = buildBlocks(mergeBlocks(step), wizardId, step.id);
+    const beforeWidgets = [
+        ...blocks.before,
+        ...(step.cards?.length ? [buildCardsWidget(step, wizardId)] : []),
+    ];
+    const widgetsBeforeForm = beforeWidgets.length ? beforeWidgets : undefined;
+    const widgetsAfterForm = blocks.after.length ? blocks.after : undefined;
+    return {
+        id: step.id,
+        label: step.label,
+        description: step.subtitle || step.description,
+        optional: step.optional,
+        widgetsBeforeForm,
+        widgets: widgetsAfterForm,
+        form: step.form
+            ? {
+                formId: step.form.formId || `${wizardId}:${step.id}`,
+                config: step.form.config,
+                mode: 'create',
+            }
+            : undefined,
+    };
+}
+function buildCardsWidget(step, wizardId) {
+    const cfg = {
+        id: `${wizardId}:${step.id}:cards`,
+        dataSource: { data: step.cards || [] },
+        layout: { ...defaultCardLayout },
+        skin: { ...defaultCardSkin },
+        templating: { ...defaultCardTemplating },
+        ui: { showSearch: false, showSort: false, showRange: false },
+    };
+    return {
+        id: 'praxis-list',
+        inputs: {
+            listId: cfg.id,
+            config: cfg,
+        },
+    };
+}
+function mergeBlocks(step) {
+    const out = [];
+    const hasZones = !!(step.zones?.intro?.length || step.zones?.body?.length || step.zones?.footer?.length);
+    if (hasZones) {
+        // Contrato atual: `zones` é o modelo canônico e substitui `blocks` legado
+        // quando ambos coexistem no payload, evitando renderização duplicada.
+        if (step.zones?.intro?.length) {
+            out.push(...step.zones.intro.map((b) => ({ ...b, placement: 'beforeForm' })));
+        }
+        if (step.zones?.body?.length) {
+            out.push(...step.zones.body.map((b) => ({ ...b, placement: 'beforeForm' })));
+        }
+        if (step.zones?.footer?.length) {
+            out.push(...step.zones.footer.map((b) => ({ ...b, placement: 'afterForm' })));
+        }
+        return out;
+    }
+    if (step.blocks?.length)
+        out.push(...step.blocks);
+    return out.length ? out : undefined;
+}
+function buildBlocks(blocks, wizardId, stepId) {
+    if (!blocks || blocks.length === 0)
+        return { before: [], after: [] };
+    const before = [];
+    const after = [];
+    blocks.forEach((block, index) => {
+        const placement = block.placement ?? 'beforeForm';
+        const def = toWidget(block, wizardId, stepId, index);
+        if (!def)
+            return;
+        if (placement === 'afterForm')
+            after.push(def);
+        else
+            before.push(def);
+    });
+    return { before, after };
+}
+function resolveBlockRuntimeId(block, wizardId, stepId, index) {
+    const explicitId = typeof block.id === 'string' ? block.id.trim() : '';
+    return explicitId
+        ? `${wizardId}:${stepId}:block:${explicitId}`
+        : `${wizardId}:${stepId}:block:${index}`;
+}
+function toWidget(block, wizardId, stepId, index) {
+    const baseId = resolveBlockRuntimeId(block, wizardId, stepId, index);
+    switch (block.type) {
+        case 'benefitsGrid':
+            return {
+                id: 'praxis-wizard-benefits',
+                inputs: {
+                    blockId: baseId,
+                    title: block.title,
+                    items: block.items,
+                    columns: block.columns,
+                    boxed: block.boxed,
+                },
+            };
+        case 'contentBlock':
+            return {
+                id: 'praxis-wizard-content',
+                inputs: {
+                    blockId: baseId,
+                    title: block.title,
+                    subtitle: block.subtitle,
+                    text: block.text,
+                    caption: block.caption,
+                },
+            };
+        case 'inlineNotice':
+            return {
+                id: 'praxis-wizard-inline-notice',
+                inputs: {
+                    blockId: baseId,
+                    text: block.text,
+                    tone: block.tone,
+                },
+            };
+        case 'divider':
+            return {
+                id: 'praxis-wizard-divider',
+                inputs: {
+                    blockId: baseId,
+                    label: block.label ?? '',
+                },
+            };
+        default:
+            return null;
+    }
+}
+
+class PraxisWizardCtaBarComponent {
+    primaryLabel = 'Continue';
+    primaryDisabled = false;
+    secondaryLabel = 'Back';
+    showSecondary = false;
+    sticky = false;
+    primaryClick = new EventEmitter();
+    secondaryClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardCtaBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisWizardCtaBarComponent, isStandalone: true, selector: "praxis-wizard-cta-bar", inputs: { primaryLabel: "primaryLabel", primaryDisabled: "primaryDisabled", secondaryLabel: "secondaryLabel", showSecondary: "showSecondary", sticky: "sticky" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, ngImport: i0, template: `
+    <div class="pwx-cta" [class.is-sticky]="sticky" [class.has-secondary]="showSecondary">
+      <button
+        *ngIf="showSecondary"
+        mat-button
+        type="button"
+        class="pwx-cta-secondary"
+        (click)="secondaryClick.emit()"
+        [attr.aria-label]="secondaryLabel"
+      >
+        {{ secondaryLabel }}
+      </button>
+      <button
+        mat-flat-button
+        color="primary"
+        type="button"
+        class="pwx-cta-primary"
+        [disabled]="primaryDisabled"
+        (click)="primaryClick.emit()"
+        [attr.aria-label]="primaryLabel"
+      >
+        {{ primaryLabel }}
+      </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.pwx-cta{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:16px}.pwx-cta:not(.has-secondary){justify-content:center}.pwx-cta.is-sticky{position:sticky;bottom:0;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));padding:12px 0 8px;border-top:1px solid var(--praxis-wizard-border, var(--md-sys-color-outline-variant))}.pwx-cta.has-secondary .pwx-cta-primary{min-width:200px}.pwx-cta-primary{min-width:240px;height:36px;border-radius:4px;font-weight:600;text-transform:none;padding:0 18px}.pwx-cta-secondary{color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));text-transform:none;font-weight:500;padding:0 4px;min-width:auto}@media(max-width:600px){.pwx-cta{flex-direction:column;align-items:stretch}.pwx-cta-primary{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardCtaBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-cta-bar', standalone: true, imports: [CommonModule, MatButtonModule], template: `
+    <div class="pwx-cta" [class.is-sticky]="sticky" [class.has-secondary]="showSecondary">
+      <button
+        *ngIf="showSecondary"
+        mat-button
+        type="button"
+        class="pwx-cta-secondary"
+        (click)="secondaryClick.emit()"
+        [attr.aria-label]="secondaryLabel"
+      >
+        {{ secondaryLabel }}
+      </button>
+      <button
+        mat-flat-button
+        color="primary"
+        type="button"
+        class="pwx-cta-primary"
+        [disabled]="primaryDisabled"
+        (click)="primaryClick.emit()"
+        [attr.aria-label]="primaryLabel"
+      >
+        {{ primaryLabel }}
+      </button>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-cta{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:16px}.pwx-cta:not(.has-secondary){justify-content:center}.pwx-cta.is-sticky{position:sticky;bottom:0;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));padding:12px 0 8px;border-top:1px solid var(--praxis-wizard-border, var(--md-sys-color-outline-variant))}.pwx-cta.has-secondary .pwx-cta-primary{min-width:200px}.pwx-cta-primary{min-width:240px;height:36px;border-radius:4px;font-weight:600;text-transform:none;padding:0 18px}.pwx-cta-secondary{color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));text-transform:none;font-weight:500;padding:0 4px;min-width:auto}@media(max-width:600px){.pwx-cta{flex-direction:column;align-items:stretch}.pwx-cta-primary{width:100%}}\n"] }]
+        }], propDecorators: { primaryLabel: [{
+                type: Input
+            }], primaryDisabled: [{
+                type: Input
+            }], secondaryLabel: [{
+                type: Input
+            }], showSecondary: [{
+                type: Input
+            }], sticky: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], secondaryClick: [{
+                type: Output
+            }] } });
+
+const PRAXIS_WIZARD_LOGGER = new LoggerService(createCorporateLoggerConfig(isDevMode() ? 'dev' : 'prod'), [new ConsoleLoggerSink()]);
+function logWizardConfigIssue(message) {
+    PRAXIS_WIZARD_LOGGER.warnOnce(`[PraxisWizard] ${message}`, {
+        context: {
+            lib: 'praxis-stepper',
+            component: 'PraxisWizardFormComponent',
+        },
+        dedupeKey: `praxis-wizard:config:${message}`,
+    });
+}
+function validateWizardConfig(cfg) {
+    if (!cfg)
+        return null;
+    const errors = [];
+    if (!cfg.id)
+        errors.push('config.id is required.');
+    if (!cfg.steps || cfg.steps.length === 0)
+        errors.push('config.steps must have at least one step.');
+    cfg.steps?.forEach((step, idx) => {
+        if (!step.id)
+            errors.push(`steps[${idx}].id is required.`);
+        if (!step.label)
+            errors.push(`steps[${idx}].label is required.`);
+        const hasZones = !!(step.zones?.intro?.length || step.zones?.body?.length || step.zones?.footer?.length);
+        const hasBlocks = !!(step.blocks && step.blocks.length > 0);
+        if (hasZones && hasBlocks) {
+            errors.push(`steps[${idx}] cannot use both 'zones' and 'blocks'.`);
+        }
+    });
+    if (errors.length) {
+        errors.forEach((err) => logWizardConfigIssue(err));
+        if (isDevMode()) {
+            throw new Error(`[PraxisWizard] Invalid configuration:\\n${errors.join('\\n')}`);
+        }
+    }
+    return cfg;
+}
+class PraxisWizardFormComponent {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    storage = inject(CONFIG_STORAGE);
+    constructor() {
+        effect(() => {
+            const cfg = this.wizard();
+            const theme = cfg?.theme;
+            if (theme) {
+                Object.entries(theme).forEach(([key, value]) => {
+                    this.renderer.setStyle(this.el.nativeElement, `--${key}`, value);
+                });
+            }
+        });
+    }
+    stepper;
+    wizardId;
+    editModeEnabled = false;
+    set config(cfg) {
+        if (!cfg) {
+            this._config.set(null);
+            return;
+        }
+        if (typeof cfg === 'string') {
+            try {
+                this._config.set(validateWizardConfig(JSON.parse(cfg)));
+            }
+            catch {
+                this._config.set(null);
+            }
+            return;
+        }
+        this._config.set(validateWizardConfig(cfg));
+    }
+    submit = new EventEmitter();
+    _config = signal(null, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+    persistedState = signal(null, ...(ngDevMode ? [{ debugName: "persistedState" }] : []));
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    wizard = computed(() => {
+        const cfg = this._config();
+        if (!cfg)
+            return null;
+        const persisted = this.persistedState()?.preferences;
+        if (!persisted)
+            return cfg;
+        return applyPreferenceDefaults(cfg, persisted);
+    }, ...(ngDevMode ? [{ debugName: "wizard" }] : []));
+    stepperConfig = computed(() => {
+        const cfg = this.wizard();
+        return cfg ? buildStepperConfig(cfg) : null;
+    }, ...(ngDevMode ? [{ debugName: "stepperConfig" }] : []));
+    activeStep = computed(() => {
+        const w = this.wizard();
+        return w?.steps?.[this.selectedIndex()] || null;
+    }, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
+    wizardBrand = computed(() => this.wizard()?.brand || 'FINANCIAL TIMES', ...(ngDevMode ? [{ debugName: "wizardBrand" }] : []));
+    activeTitle = computed(() => this.activeStep()?.title || this.wizard()?.title || '', ...(ngDevMode ? [{ debugName: "activeTitle" }] : []));
+    activeSubtitle = computed(() => this.activeStep()?.subtitle || this.wizard()?.subtitle || '', ...(ngDevMode ? [{ debugName: "activeSubtitle" }] : []));
+    activeDescription = computed(() => this.activeStep()?.description || this.wizard()?.description || '', ...(ngDevMode ? [{ debugName: "activeDescription" }] : []));
+    resolvedCta = computed(() => {
+        const stepCta = this.activeStep()?.cta;
+        const globalCta = this.wizard()?.cta;
+        return { ...(globalCta || {}), ...(stepCta || {}) };
+    }, ...(ngDevMode ? [{ debugName: "resolvedCta" }] : []));
+    primaryLabel = computed(() => this.resolvedCta().label ?? 'Continue', ...(ngDevMode ? [{ debugName: "primaryLabel" }] : []));
+    primaryAction = computed(() => this.resolvedCta().action ?? 'next', ...(ngDevMode ? [{ debugName: "primaryAction" }] : []));
+    secondaryLabel = computed(() => this.resolvedCta().secondaryLabel ?? 'Back', ...(ngDevMode ? [{ debugName: "secondaryLabel" }] : []));
+    secondaryAction = computed(() => this.resolvedCta().secondaryAction ?? 'prev', ...(ngDevMode ? [{ debugName: "secondaryAction" }] : []));
+    showSecondaryAction() {
+        const action = this.secondaryAction();
+        if (action === 'cancel')
+            return true;
+        return action === 'prev' && this.selectedIndex() > 0;
+    }
+    isPrimaryDisabled() {
+        const action = this.primaryAction();
+        if (action === 'next')
+            return !!this.stepper?.isNextDisabled(this.selectedIndex());
+        if (action === 'submit')
+            return !!this.stepper?.isNextDisabled(this.selectedIndex());
+        return false;
+    }
+    onPrimaryAction() {
+        this.focusPrimaryAction();
+        const action = this.primaryAction();
+        if (action === 'next') {
+            this.stepper?.next();
+            return;
+        }
+        if (action === 'submit') {
+            this.submit.emit({ wizardId: this.wizardId, values: this.collectValues() });
+            return;
+        }
+    }
+    onSecondaryAction() {
+        this.focusSecondaryAction();
+        if (this.secondaryAction() === 'prev') {
+            this.stepper?.prev();
+            return;
+        }
+        if (this.secondaryAction() === 'cancel') {
+            this.resetProgress();
+        }
+    }
+    onSelectedIndexChange(idx) {
+        this.selectedIndex.set(idx);
+        this.persistState();
+    }
+    onStepFormValueChange(ev) {
+        const wizard = this.wizard();
+        if (!wizard?.preferences)
+            return;
+        const prefStepId = wizard.preferences.stepId;
+        if (!prefStepId || prefStepId !== ev.stepId)
+            return;
+        const values = pickPreferenceValues(ev.event?.formData, wizard.preferences.persistFields);
+        this.persistState({ preferences: values });
+    }
+    ngOnInit() {
+        this.loadPersistedState();
+    }
+    collectValues() {
+        const values = {};
+        const steps = this.wizard()?.steps || [];
+        steps.forEach((step, idx) => {
+            const form = this.stepper?.formGroupFor(idx);
+            if (form)
+                values[step.id] = form.getRawValue();
+        });
+        return values;
+    }
+    loadPersistedState() {
+        if (!this.storageKey())
+            return;
+        const stored = this.storage.loadConfig(this.storageKey());
+        if (!stored)
+            return;
+        this.persistedState.set(stored);
+        if (typeof stored.selectedIndex === 'number') {
+            this.selectedIndex.set(stored.selectedIndex);
+        }
+    }
+    persistState(partial) {
+        if (!this.storageKey())
+            return;
+        const next = {
+            selectedIndex: this.selectedIndex(),
+            preferences: this.persistedState()?.preferences,
+            ...partial,
+        };
+        this.persistedState.set(next);
+        this.storage.saveConfig(this.storageKey(), next);
+    }
+    storageKey() {
+        const cfg = this.wizard();
+        const base = cfg?.preferences?.storageKey || `praxis:wizard:${cfg?.id || this.wizardId}`;
+        return `${base}:state`;
+    }
+    resetProgress() {
+        const key = this.storageKey();
+        if (key)
+            this.storage.clearConfig(key);
+        this.persistedState.set(null);
+        this.selectedIndex.set(0);
+        this.stepper?.reset();
+    }
+    focusPrimaryAction() {
+        if (typeof document === 'undefined')
+            return;
+        const host = document.querySelector(`[data-wizard-id="${this.wizardId}"]`) || document;
+        const el = host.querySelector('.pwx-cta-primary');
+        el?.focus();
+    }
+    focusSecondaryAction() {
+        if (typeof document === 'undefined')
+            return;
+        const host = document.querySelector(`[data-wizard-id="${this.wizardId}"]`) || document;
+        const el = host.querySelector('.pwx-cta-secondary');
+        el?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisWizardFormComponent, isStandalone: true, selector: "praxis-wizard-form", inputs: { wizardId: "wizardId", editModeEnabled: "editModeEnabled", config: "config" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: `
+    <section class="ft-wizard-shell" [attr.data-wizard-id]="wizardId">
+      <div class="ft-wizard-header">
+        <div class="ft-brand">{{ wizardBrand() }}</div>
+      </div>
+
+      <mat-card class="ft-wizard-card">
+        <div class="ft-card-header">
+          <h2>{{ activeTitle() }}</h2>
+          @if (activeSubtitle()) {
+            <p>{{ activeSubtitle() }}</p>
+          }
+          @if (activeDescription()) {
+            <p class="ft-card-description">{{ activeDescription() }}</p>
+          }
+        </div>
+
+        <praxis-stepper
+          #stepper
+          [stepperId]="wizardId"
+          [config]="stepperConfig()"
+          [selectedIndex]="selectedIndex()"
+          [editModeEnabled]="editModeEnabled"
+          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (stepFormValueChange)="onStepFormValueChange($event)"
+        ></praxis-stepper>
+
+        <praxis-wizard-cta-bar
+          [primaryLabel]="primaryLabel()"
+          [primaryDisabled]="isPrimaryDisabled()"
+          [secondaryLabel]="secondaryLabel()"
+          [showSecondary]="showSecondaryAction()"
+          [sticky]="resolvedCta().sticky ?? false"
+          (primaryClick)="onPrimaryAction()"
+          (secondaryClick)="onSecondaryAction()"
+        ></praxis-wizard-cta-bar>
+      </mat-card>
+    </section>
+  `, isInline: true, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border-radius:var(--ft-radius, 6px);background:var(--pfx-form-section-surface);border-color:var(--pfx-form-stroke)!important;padding:10px 12px;box-shadow:var(--ft-shadow, none)!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-infix{min-height:40px;padding-top:8px;padding-bottom:6px}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:6px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:40px;padding:2px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}:host ::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: PraxisStepper, selector: "praxis-stepper", inputs: ["stepperId", "componentInstanceId", "config", "selectedIndexInput", "selectedIndex", "disableRippleInput", "editModeEnabled", "labelPosition", "color", "serverValidate", "stepperContext"], outputs: ["selectedIndexChange", "widgetEvent", "stepFormReady", "stepFormValueChange", "animationDone", "selectionChange"] }, { kind: "component", type: PraxisWizardCtaBarComponent, selector: "praxis-wizard-cta-bar", inputs: ["primaryLabel", "primaryDisabled", "secondaryLabel", "showSecondary", "sticky"], outputs: ["primaryClick", "secondaryClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisWizardFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-wizard-form', standalone: true, imports: [CommonModule, MatCardModule, MatIconModule, PraxisStepper, PraxisWizardCtaBarComponent], template: `
+    <section class="ft-wizard-shell" [attr.data-wizard-id]="wizardId">
+      <div class="ft-wizard-header">
+        <div class="ft-brand">{{ wizardBrand() }}</div>
+      </div>
+
+      <mat-card class="ft-wizard-card">
+        <div class="ft-card-header">
+          <h2>{{ activeTitle() }}</h2>
+          @if (activeSubtitle()) {
+            <p>{{ activeSubtitle() }}</p>
+          }
+          @if (activeDescription()) {
+            <p class="ft-card-description">{{ activeDescription() }}</p>
+          }
+        </div>
+
+        <praxis-stepper
+          #stepper
+          [stepperId]="wizardId"
+          [config]="stepperConfig()"
+          [selectedIndex]="selectedIndex()"
+          [editModeEnabled]="editModeEnabled"
+          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (stepFormValueChange)="onStepFormValueChange($event)"
+        ></praxis-stepper>
+
+        <praxis-wizard-cta-bar
+          [primaryLabel]="primaryLabel()"
+          [primaryDisabled]="isPrimaryDisabled()"
+          [secondaryLabel]="secondaryLabel()"
+          [showSecondary]="showSecondaryAction()"
+          [sticky]="resolvedCta().sticky ?? false"
+          (primaryClick)="onPrimaryAction()"
+          (secondaryClick)="onSecondaryAction()"
+        ></praxis-wizard-cta-bar>
+      </mat-card>
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border-radius:var(--ft-radius, 6px);background:var(--pfx-form-section-surface);border-color:var(--pfx-form-stroke)!important;padding:10px 12px;box-shadow:var(--ft-shadow, none)!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-infix{min-height:40px;padding-top:8px;padding-bottom:6px}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:6px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:40px;padding:2px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}:host ::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { stepper: [{
+                type: ViewChild,
+                args: ['stepper', { static: true }]
+            }], wizardId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], editModeEnabled: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], submit: [{
+                type: Output
+            }] } });
+function pickPreferenceValues(value, fields) {
+    if (!value || !fields || fields.length === 0)
+        return value || {};
+    const out = {};
+    fields.forEach((key) => {
+        if (Object.prototype.hasOwnProperty.call(value, key))
+            out[key] = value[key];
+    });
+    return out;
+}
+function applyPreferenceDefaults(cfg, values) {
+    const pref = cfg.preferences;
+    if (!pref?.stepId || !values)
+        return cfg;
+    const steps = cfg.steps.map((step) => {
+        if (step.id !== pref.stepId || !step.form?.config?.fieldMetadata)
+            return step;
+        const fieldMetadata = step.form.config.fieldMetadata.map((meta) => {
+            if (meta.name && Object.prototype.hasOwnProperty.call(values, meta.name)) {
+                return { ...meta, defaultValue: values[meta.name] };
+            }
+            return meta;
+        });
+        return {
+            ...step,
+            form: {
+                ...step.form,
+                config: {
+                    ...step.form.config,
+                    fieldMetadata,
+                },
+            },
+        };
+    });
+    return { ...cfg, steps };
+}
+
 /*
  * Public API Surface of praxis-stepper
  */
@@ -2042,5 +4819,5 @@ function providePraxisStepperMetadata() {
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_STEPPER_COMPONENT_METADATA, PraxisStepper, PraxisStepperConfigEditor, providePraxisStepperMetadata };
+export { FT_WIZARD_CONFIG, FT_WIZARD_JSON, PRAXIS_STEPPER_COMPONENT_METADATA, PRAXIS_WIZARD_BENEFITS_METADATA, PRAXIS_WIZARD_CONTENT_METADATA, PRAXIS_WIZARD_DIVIDER_METADATA, PRAXIS_WIZARD_NOTICE_METADATA, PraxisStepper, PraxisStepperConfigEditor, PraxisWizardFormComponent, STEPPER_AI_CAPABILITIES, providePraxisStepperMetadata };
 //# sourceMappingURL=praxisui-stepper.mjs.map