@praxisui/stepper 7.0.0-beta.0 → 8.0.0-beta.0

package/fesm2022/praxisui-stepper.mjs

@@ -9,7 +9,7 @@ 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 { providePraxisI18n, PraxisI18nService, IconPickerService, PraxisIconDirective, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, DynamicWidgetLoaderDirective, EmptyStateCardComponent, EDITORIAL_WIDGET_TAG, ComponentMetadataRegistry, createCorporateLoggerConfig, ConsoleLoggerSink, CONFIG_STORAGE } from '@praxisui/core';
+import { providePraxisI18n, PraxisI18nService, IconPickerService, createEmptyRichContentDocument, PraxisIconDirective, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, DynamicWidgetLoaderDirective, EmptyStateCardComponent, EDITORIAL_WIDGET_TAG, 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';
@@ -26,9 +26,7 @@ import * as i9 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i10 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i11 from '@angular/material/tabs';
+import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BehaviorSubject } from 'rxjs';
 import { PraxisListConfigEditor } from '@praxisui/list';
@@ -37,6 +35,7 @@ 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 { PraxisRichContent } from '@praxisui/rich-content';
 import { take } from 'rxjs/operators';
 import * as i1$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -138,376 +137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     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);
-    }
-    get statusMessage() {
-        switch (this.wizardWidgetId) {
-            case 'praxis-wizard-content':
-                return {
-                    title: 'Legado em deprecação',
-                    body: 'Este bloco continua suportado para compatibilidade, mas novo authoring deve preferir widget:rich-text-block. O shape atual do wizard segue válido neste ciclo.',
-                };
-            case 'praxis-wizard-inline-notice':
-                return {
-                    title: 'Semântica em aberto',
-                    body: 'Este bloco permanece ativo no wizard até a definição final entre legal-notice e um eventual info-callout compartilhado.',
-                };
-            case 'praxis-wizard-benefits':
-                return {
-                    title: 'Mantido temporariamente',
-                    body: 'Ainda não existe equivalente canônico compartilhado para este grid no backlog editorial atual.',
-                };
-            case 'praxis-wizard-divider':
-                return {
-                    title: 'Mantido temporariamente',
-                    body: 'Este divisor continua como bloco legado do wizard enquanto não houver equivalente compartilhado priorizado.',
-                };
-            default:
-                return null;
-        }
-    }
-    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.3.17", 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.3.17", 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">
-      <div class="status-banner" *ngIf="statusMessage as status">
-        <strong>{{ status.title }}</strong>
-        <span>{{ status.body }}</span>
-      </div>
-
-      <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>Block ID legado (avançado)</mat-label>
-            <input matInput [(ngModel)]="model.blockId" placeholder="Ex.: ft-edit-wizard:access:block:hero" />
-            <mat-hint>Identificador operacional legado do wizard para telemetria/E2E e compatibilidade com editor/adapter. No modelo convergido, instanceId será a convenção editorial preferencial.</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}.status-banner{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);font-size:12px}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.3.17", 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">
-      <div class="status-banner" *ngIf="statusMessage as status">
-        <strong>{{ status.title }}</strong>
-        <span>{{ status.body }}</span>
-      </div>
-
-      <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>Block ID legado (avançado)</mat-label>
-            <input matInput [(ngModel)]="model.blockId" placeholder="Ex.: ft-edit-wizard:access:block:hero" />
-            <mat-hint>Identificador operacional legado do wizard para telemetria/E2E e compatibilidade com editor/adapter. No modelo convergido, instanceId será a convenção editorial preferencial.</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}.status-banner{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);font-size:12px}.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]
-                }] }] });
-
 const PRAXIS_STEPPER_EN_US = {
     'praxis.stepper.editor.tabs.general': 'General',
     'praxis.stepper.editor.tabs.steps': 'Steps',
@@ -709,7 +338,7 @@ const PRAXIS_STEPPER_EN_US = {
     'praxis.stepper.editor.summary.noContent': 'No content',
     'praxis.stepper.editor.summary.labelPrefix': 'Label: {{label}}',
     'praxis.stepper.editor.summary.dividerNoLabel': 'Divider without label',
-    'praxis.stepper.editor.status.contentLegacy': 'Deprecated legacy: new authoring should prefer widget:rich-text-block. This block remains supported for compatibility in this cycle.',
+    'praxis.stepper.editor.status.contentLegacy': 'Deprecated legacy: new authoring should prefer step rich content documents. This block remains supported only for existing configurations.',
     'praxis.stepper.editor.status.noticeCurrent': 'Kept in the current cycle: final semantics are still being defined between legal-notice and info-callout.',
     'praxis.stepper.editor.status.benefitsTemporary': 'Temporarily kept: still no canonical equivalent in the editorial backlog.',
     'praxis.stepper.editor.status.dividerTemporary': 'Temporarily kept: legacy separator without a prioritized shared equivalent.',
@@ -920,7 +549,7 @@ const PRAXIS_STEPPER_PT_BR = {
     'praxis.stepper.editor.summary.noContent': 'Sem conteúdo',
     'praxis.stepper.editor.summary.labelPrefix': 'Rótulo: {{label}}',
     'praxis.stepper.editor.summary.dividerNoLabel': 'Divisor sem rótulo',
-    'praxis.stepper.editor.status.contentLegacy': 'Legado em depreciação: novas criações devem preferir widget:rich-text-block. O bloco continua suportado por compatibilidade neste ciclo.',
+    'praxis.stepper.editor.status.contentLegacy': 'Legado em depreciação: novas criações devem preferir documentos de rich content da etapa. O bloco continua suportado apenas para configurações existentes.',
     'praxis.stepper.editor.status.noticeCurrent': 'Mantido no ciclo atual: semântica final ainda em definição entre aviso-legal (legal-notice) e destaque-informativo (info-callout).',
     'praxis.stepper.editor.status.benefitsTemporary': 'Mantido temporariamente: ainda sem equivalente canônico no backlog editorial.',
     'praxis.stepper.editor.status.dividerTemporary': 'Mantido temporariamente: separador legado sem equivalente compartilhado priorizado.',
@@ -1268,150 +897,78 @@ class PraxisStepperConfigEditor {
     }
     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 this.tx('editor.widgets.listSelection', 'List (selection)');
             case 'pdx-material-searchable-select': return this.tx('editor.widgets.searchableSelection', 'Searchable selection');
             case 'praxis-files-upload': return this.tx('editor.widgets.fileUpload', 'File upload');
             case 'praxis-dynamic-form': return this.tx('editor.widgets.form', 'Form');
-            case 'praxis-wizard-benefits': return this.tx('editor.widgets.benefits', 'Benefits grid');
-            case 'praxis-wizard-content': return this.tx('editor.widgets.content', 'Content block');
-            case 'praxis-wizard-inline-notice': return this.tx('editor.widgets.notice', 'Inline notice');
-            case 'praxis-wizard-divider': return this.tx('editor.widgets.divider', 'Divider');
             default: return w.inputs?.title || w.inputs?.label || this.tx('editor.widgets.default', '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 - 3)}...` : 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 this.tx('editor.summary.itemsColumns', '{{count}} item(s) • {{cols}} column(s)')
-                    .replace('{{count}}', `${count}`)
-                    .replace('{{cols}}', `${cols}`);
-            }
-            case 'praxis-wizard-content': {
-                const text = shorten(inputs.title || inputs.subtitle || inputs.text || inputs.caption, 90);
-                return text || this.tx('editor.summary.noContent', 'No content');
-            }
-            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
-                    ? this.tx('editor.summary.labelPrefix', 'Label: {{label}}').replace('{{label}}', inputs.label)
-                    : this.tx('editor.summary.dividerNoLabel', 'Divider without label');
-            default:
-                return '';
-        }
+        return step.widgets || [];
     }
-    editorialWidgetStatus(w) {
-        switch (w.id) {
-            case 'praxis-wizard-content':
-                return this.tx('editor.status.contentLegacy', 'Deprecated legacy: new authoring should prefer widget:rich-text-block. This block remains supported for compatibility in this cycle.');
-            case 'praxis-wizard-inline-notice':
-                return this.tx('editor.status.noticeCurrent', 'Kept in the current cycle: final semantics are still being defined between legal-notice and info-callout.');
-            case 'praxis-wizard-benefits':
-                return this.tx('editor.status.benefitsTemporary', 'Temporarily kept: still no canonical equivalent in the editorial backlog.');
-            case 'praxis-wizard-divider':
-                return this.tx('editor.status.dividerTemporary', 'Temporarily kept: legacy separator without a prioritized shared equivalent.');
-            default:
-                return this.tx('editor.status.editorialWidget', 'Wizard editorial widget.');
-        }
+    richContentNodeCount(document) {
+        return Array.isArray(document?.nodes) ? document.nodes.length : 0;
     }
-    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 },
-            };
+    richContentJson(step, zone) {
+        const document = zone === 'before' ? step.stepBlocksBeforeForm : step.stepBlocksAfterForm;
+        return JSON.stringify(document ?? createEmptyRichContentDocument(), null, 2);
+    }
+    setRichContentJson(step, zone, value) {
+        try {
+            const parsed = JSON.parse(value || '{}');
+            const next = this.normalizeRichContentDocument(parsed);
             if (zone === 'before')
-                this.ensureWidgetsBeforeForm().push(wd);
+                step.stepBlocksBeforeForm = next;
             else
-                this.ensureWidgets().push(wd);
+                step.stepBlocksAfterForm = next;
+            this.isValid$.next(true);
             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();
+        }
+        catch {
+            this.isValid$.next(false);
+        }
     }
-    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);
+    seedRichContent(step, zone) {
+        const label = step.label || this.tx('editor.defaults.newStep', 'New step');
+        const document = {
+            kind: 'praxis.rich-content',
+            version: '1.0.0',
+            nodes: [
+                {
+                    type: 'card',
+                    title: zone === 'before'
+                        ? this.tx('editor.steps.seedBeforeTitle', 'Step context')
+                        : this.tx('editor.steps.seedAfterTitle', 'Follow-up'),
+                    content: [
+                        { type: 'text', text: label },
+                        { type: 'badge', label: zone === 'before' ? 'before' : 'after' },
+                    ],
+                },
+            ],
+        };
+        if (zone === 'before')
+            step.stepBlocksBeforeForm = document;
+        else
+            step.stepBlocksAfterForm = document;
         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);
+    clearRichContent(step, zone) {
+        if (zone === 'before')
+            step.stepBlocksBeforeForm = null;
         else
-            list.push(clone);
+            step.stepBlocksAfterForm = null;
         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();
+    normalizeRichContentDocument(document) {
+        return {
+            kind: 'praxis.rich-content',
+            version: '1.0.0',
+            context: document.context,
+            nodes: Array.isArray(document.nodes) ? document.nodes : [],
+        };
     }
     removeAdvancedWidget(w) {
         const widgets = this.ensureWidgets();
@@ -1435,98 +992,7 @@ class PraxisStepperConfigEditor {
         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: this.tx('editor.defaults.newBenefit', 'New benefit'), 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 this.tx('editor.tone.info', 'Informational');
-            case 'warning': return this.tx('editor.tone.warning', 'Warning');
-            default: return this.tx('editor.tone.neutral', 'Neutral');
-        }
-    }
-    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);
+            || w.id === 'praxis-files-upload');
     }
     // ------- Main form -------
     addMainForm() {
@@ -1700,44 +1166,11 @@ 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(); }
@@ -1970,114 +1403,52 @@ class PraxisStepperConfigEditor {
                       <div class="zone-head">
                         <div class="zone-title">{{ tx('editor.steps.zoneBefore', 'Before form') }}</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>
-                            {{ tx('editor.steps.addBlock', 'Add') }}
+                          <span class="zone-count">{{ richContentNodeCount(step.stepBlocksBeforeForm) }}</span>
+                          <button mat-stroked-button type="button" (click)="seedRichContent(step, 'before')">
+                            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+                            {{ tx('editor.steps.seedRichContent', 'Seed') }}
                           </button>
-                          <mat-menu #beforeEditorialMenu="matMenu">
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
-                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
-                              <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              {{ tx('editor.steps.widgetContent', 'Content block') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
-                              <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
-                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
-                            </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">{{ editorialWidgetStatus(w) }}</div>
-                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
-                          </div>
-                          <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
-                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" [matTooltip]="tx('editor.steps.moveAfter', 'Move after the form')">
-                              <mat-icon [praxisIcon]="'south'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
-                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
-                            </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
-                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
-                            </button>
-                          </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
+                      <mat-form-field appearance="outline" class="w-full rich-content-json">
+                        <mat-label>{{ tx('editor.steps.richContentDocument', 'RichContentDocument JSON') }}</mat-label>
+                        <textarea
+                          matInput
+                          rows="12"
+                          [ngModel]="richContentJson(step, 'before')"
+                          (ngModelChange)="setRichContentJson(step, 'before', $event)"
+                        ></textarea>
+                      </mat-form-field>
+                      <button mat-button color="warn" type="button" (click)="clearRichContent(step, 'before')">
+                        <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                        {{ tx('editor.steps.clearZone', 'Clear zone') }}
+                      </button>
                     </div>
 
                     <div class="zone-column">
                       <div class="zone-head">
                         <div class="zone-title">{{ tx('editor.steps.zoneAfter', 'After form') }}</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>
-                            {{ tx('editor.steps.addBlock', 'Add') }}
+                          <span class="zone-count">{{ richContentNodeCount(step.stepBlocksAfterForm) }}</span>
+                          <button mat-stroked-button type="button" (click)="seedRichContent(step, 'after')">
+                            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+                            {{ tx('editor.steps.seedRichContent', 'Seed') }}
                           </button>
-                          <mat-menu #afterEditorialMenu="matMenu">
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
-                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
-                              <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              {{ tx('editor.steps.widgetContent', 'Content block') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
-                              <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
-                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
-                            </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">{{ editorialWidgetStatus(w) }}</div>
-                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
-                          </div>
-                          <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
-                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" [matTooltip]="tx('editor.steps.moveBefore', 'Move before the form')">
-                              <mat-icon [praxisIcon]="'north'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
-                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
-                            </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
-                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
-                            </button>
-                          </div>
-                        </div>
-                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
-                      </div>
+                      <mat-form-field appearance="outline" class="w-full rich-content-json">
+                        <mat-label>{{ tx('editor.steps.richContentDocument', 'RichContentDocument JSON') }}</mat-label>
+                        <textarea
+                          matInput
+                          rows="12"
+                          [ngModel]="richContentJson(step, 'after')"
+                          (ngModelChange)="setRichContentJson(step, 'after', $event)"
+                        ></textarea>
+                      </mat-form-field>
+                      <button mat-button color="warn" type="button" (click)="clearRichContent(step, 'after')">
+                        <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                        {{ tx('editor.steps.clearZone', 'Clear zone') }}
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -2409,7 +1780,7 @@ class PraxisStepperConfigEditor {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, 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:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.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}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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);line-height:1.45}.widget-item .info .meta{margin-top:2px;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:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.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(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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-column{display:grid;gap:10px;min-width:0}.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-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.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}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.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-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items: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: "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: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.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:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.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}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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);line-height:1.45}.widget-item .info .meta{margin-top:2px;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:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.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(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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-column{display:grid;gap:10px;min-width:0}.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-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.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}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.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}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.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-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items: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: "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: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.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.3.17", ngImport: i0, type: PraxisStepperConfigEditor, decorators: [{
             type: Component,
@@ -2425,7 +1796,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatTooltipModule,
                         MatDialogModule,
-                        MatMenuModule,
                         MatTabsModule,
                     ], providers: [providePraxisStepperI18n()], template: `
     <div class="pdx-editor">
@@ -2644,114 +2014,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       <div class="zone-head">
                         <div class="zone-title">{{ tx('editor.steps.zoneBefore', 'Before form') }}</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>
-                            {{ tx('editor.steps.addBlock', 'Add') }}
+                          <span class="zone-count">{{ richContentNodeCount(step.stepBlocksBeforeForm) }}</span>
+                          <button mat-stroked-button type="button" (click)="seedRichContent(step, 'before')">
+                            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+                            {{ tx('editor.steps.seedRichContent', 'Seed') }}
                           </button>
-                          <mat-menu #beforeEditorialMenu="matMenu">
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
-                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
-                              <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              {{ tx('editor.steps.widgetContent', 'Content block') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
-                              <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
-                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
-                            </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">{{ editorialWidgetStatus(w) }}</div>
-                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
-                          </div>
-                          <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
-                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" [matTooltip]="tx('editor.steps.moveAfter', 'Move after the form')">
-                              <mat-icon [praxisIcon]="'south'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
-                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
-                            </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
-                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
-                            </button>
-                          </div>
-                        </div>
-                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
-                      </div>
+                      <mat-form-field appearance="outline" class="w-full rich-content-json">
+                        <mat-label>{{ tx('editor.steps.richContentDocument', 'RichContentDocument JSON') }}</mat-label>
+                        <textarea
+                          matInput
+                          rows="12"
+                          [ngModel]="richContentJson(step, 'before')"
+                          (ngModelChange)="setRichContentJson(step, 'before', $event)"
+                        ></textarea>
+                      </mat-form-field>
+                      <button mat-button color="warn" type="button" (click)="clearRichContent(step, 'before')">
+                        <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                        {{ tx('editor.steps.clearZone', 'Clear zone') }}
+                      </button>
                     </div>
 
                     <div class="zone-column">
                       <div class="zone-head">
                         <div class="zone-title">{{ tx('editor.steps.zoneAfter', 'After form') }}</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>
-                            {{ tx('editor.steps.addBlock', 'Add') }}
+                          <span class="zone-count">{{ richContentNodeCount(step.stepBlocksAfterForm) }}</span>
+                          <button mat-stroked-button type="button" (click)="seedRichContent(step, 'after')">
+                            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+                            {{ tx('editor.steps.seedRichContent', 'Seed') }}
                           </button>
-                          <mat-menu #afterEditorialMenu="matMenu">
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
-                              <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
-                              <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              {{ tx('editor.steps.widgetContent', 'Content block') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
-                              <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
-                            </button>
-                            <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
-                              <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
-                            </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">{{ editorialWidgetStatus(w) }}</div>
-                            <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
-                          </div>
-                          <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
-                              <mat-icon [praxisIcon]="'tune'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" [matTooltip]="tx('editor.steps.moveBefore', 'Move before the form')">
-                              <mat-icon [praxisIcon]="'north'"></mat-icon>
-                            </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
-                              <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
-                            </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
-                              <mat-icon [praxisIcon]="'delete'"></mat-icon>
-                            </button>
-                          </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
+                      <mat-form-field appearance="outline" class="w-full rich-content-json">
+                        <mat-label>{{ tx('editor.steps.richContentDocument', 'RichContentDocument JSON') }}</mat-label>
+                        <textarea
+                          matInput
+                          rows="12"
+                          [ngModel]="richContentJson(step, 'after')"
+                          (ngModelChange)="setRichContentJson(step, 'after', $event)"
+                        ></textarea>
+                      </mat-form-field>
+                      <button mat-button color="warn" type="button" (click)="clearRichContent(step, 'after')">
+                        <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                        {{ tx('editor.steps.clearZone', 'Clear zone') }}
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -3192,17 +2500,15 @@ const CAPS = [
     { path: 'steps[].form.config.formBlocksAfter', category: 'steps', valueKind: 'object', description: 'RichContentDocument hospedado depois do formulario inteiro da etapa.' },
     { 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.' },
+    { path: 'steps[].stepBlocksBeforeForm', category: 'steps', valueKind: 'object', description: 'RichContentDocument rendered before the step form.' },
+    { path: 'steps[].stepBlocksAfterForm', category: 'steps', valueKind: 'object', description: 'RichContentDocument rendered after the step form.' },
+    { path: 'steps[].widgets', category: 'steps', valueKind: 'array', description: 'Advanced host-owned WidgetDefinition list rendered after canonical rich content.', safetyNotes: 'Use only for embedded components that cannot be represented as RichContentDocument.' },
+    { path: 'steps[].widgets[]', category: 'steps', valueKind: 'object', description: 'Advanced WidgetDefinition item.' },
+    { path: 'steps[].widgets[].id', category: 'steps', valueKind: 'enum', allowedValues: ENUMS['widgetId'], description: 'Component registry id for advanced widget.', safetyNotes: 'Use ids registered in ComponentMetadataRegistry. Do not use widgets for step editorial copy/cards.' },
+    { path: 'steps[].widgets[].inputs', category: 'steps', valueKind: 'object', description: 'Inputs bound into the advanced widget instance.' },
 ];
 const STEPPER_AI_CAPABILITIES = {
-    version: 'v1.4',
+    version: 'v1.5',
     enums: ENUMS,
     targets: [
         'praxis-stepper',
@@ -3215,7 +2521,8 @@ const STEPPER_AI_CAPABILITIES = {
         '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[].form.config tambem pode usar a surface editorial do dynamic-form: formBlocksBefore, formBlocksBeforeActions, formBlocksAfter e editorialContext como RichContentDocument.',
-        'steps[].widgets[].id must be a ComponentMetadataRegistry id (see component-registry catalog).',
+        'Use steps[].stepBlocksBeforeForm and steps[].stepBlocksAfterForm for editorial step content; both are RichContentDocument surfaces rendered by @praxisui/rich-content.',
+        'steps[].widgets is reserved for advanced embedded components that do not have a canonical rich-content representation.',
         '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.',
     ],
@@ -3379,6 +2686,7 @@ class PraxisStepper {
         return undefined;
     } })();
     warnedMissingId = false;
+    emptyStepRichContentDocument = createEmptyRichContentDocument();
     animationDone = new EventEmitter();
     aiAdapter = new StepperAiAdapter(this);
     // Computed getters
@@ -3519,9 +2827,25 @@ class PraxisStepper {
     }
     isStepEmpty(step) {
         const hasForm = !!step.form;
-        const hasWidgetsBefore = Array.isArray(step.widgetsBeforeForm) && step.widgetsBeforeForm.length > 0;
+        const hasBlocksBefore = this.hasRichContent(step.stepBlocksBeforeForm);
+        const hasBlocksAfter = this.hasRichContent(step.stepBlocksAfterForm);
         const hasWidgets = Array.isArray(step.widgets) && step.widgets.length > 0;
-        return !hasForm && !hasWidgets && !hasWidgetsBefore;
+        return !hasForm && !hasWidgets && !hasBlocksBefore && !hasBlocksAfter;
+    }
+    hasRichContent(document) {
+        return Array.isArray(document?.nodes) && document.nodes.length > 0;
+    }
+    getStepRichContentContext(stepIndex) {
+        const step = this.steps()[stepIndex];
+        return {
+            step: (step ?? {}),
+            stepIndex,
+            stepper: {
+                stepperId: this.stepperId,
+                selectedIndex: this.selectedIndexComputed(),
+            },
+            ...(this.stepperContext ?? {}),
+        };
     }
     openEditor() {
         const cfg = this._config() || { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
@@ -3784,12 +3108,12 @@ class PraxisStepper {
           <ng-template #plainLabel>{{ step.label }}</ng-template>
         </ng-template>
         <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-rich-content
+            *ngIf="hasRichContent(step.stepBlocksBeforeForm)"
+            [document]="step.stepBlocksBeforeForm || emptyStepRichContentDocument"
+            [context]="getStepRichContentContext(i)"
+            rootClassName="pdx-step-rich-content pdx-step-rich-content--before"
+          ></praxis-rich-content>
           <praxis-dynamic-form *ngIf="step.form as f"
             [resourcePath]="f.resourcePath"
             [resourceId]="$any(f.resourceId)"
@@ -3800,6 +3124,12 @@ class PraxisStepper {
             (formReady)="onFormReady(i, $event)"
             (valueChange)="onFormValueChange(i, $event)"
           ></praxis-dynamic-form>
+          <praxis-rich-content
+            *ngIf="hasRichContent(step.stepBlocksAfterForm)"
+            [document]="step.stepBlocksAfterForm || emptyStepRichContentDocument"
+            [context]="getStepRichContentContext(i)"
+            rootClassName="pdx-step-rich-content pdx-step-rich-content--after"
+          ></praxis-rich-content>
           <ng-container *ngFor="let wd of step.widgets || []"
             [dynamicWidgetLoader]="wd"
             [context]="stepperContext"
@@ -3881,11 +3211,11 @@ class PraxisStepper {
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, 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.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;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.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", "initialValue", "editorialContext", "mode", "config", "schemaSource", "schemaUrl", "submitUrl", "submitMethod", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "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", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], 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 });
+  `, 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.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;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.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", "initialValue", "editorialContext", "mode", "config", "schemaSource", "schemaUrl", "submitUrl", "submitMethod", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "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", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], 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"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-stepper', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatStepperModule, MatButtonModule, MatIconModule, PraxisIconDirective, PraxisDynamicForm, DynamicWidgetLoaderDirective, EmptyStateCardComponent, PraxisAiAssistantComponent], host: {
+            args: [{ selector: 'praxis-stepper', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatStepperModule, MatButtonModule, MatIconModule, PraxisIconDirective, PraxisDynamicForm, DynamicWidgetLoaderDirective, EmptyStateCardComponent, PraxisAiAssistantComponent, PraxisRichContent], host: {
                         '[class]': 'densityClass()'
                     }, template: `
     <div class="stepper-ai-assistant" *ngIf="enableCustomization">
@@ -3942,12 +3272,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <ng-template #plainLabel>{{ step.label }}</ng-template>
         </ng-template>
         <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-rich-content
+            *ngIf="hasRichContent(step.stepBlocksBeforeForm)"
+            [document]="step.stepBlocksBeforeForm || emptyStepRichContentDocument"
+            [context]="getStepRichContentContext(i)"
+            rootClassName="pdx-step-rich-content pdx-step-rich-content--before"
+          ></praxis-rich-content>
           <praxis-dynamic-form *ngIf="step.form as f"
             [resourcePath]="f.resourcePath"
             [resourceId]="$any(f.resourceId)"
@@ -3958,6 +3288,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             (formReady)="onFormReady(i, $event)"
             (valueChange)="onFormValueChange(i, $event)"
           ></praxis-dynamic-form>
+          <praxis-rich-content
+            *ngIf="hasRichContent(step.stepBlocksAfterForm)"
+            [document]="step.stepBlocksAfterForm || emptyStepRichContentDocument"
+            [context]="getStepRichContentContext(i)"
+            rootClassName="pdx-step-rich-content pdx-step-rich-content--after"
+          ></praxis-rich-content>
           <ng-container *ngFor="let wd of step.widgets || []"
             [dynamicWidgetLoader]="wd"
             [context]="stepperContext"
@@ -4346,7 +3682,7 @@ const PRAXIS_WIZARD_CONTENT_METADATA = {
     selector: 'praxis-wizard-content-block',
     component: PraxisWizardContentBlockComponent,
     friendlyName: 'Wizard Content Block',
-    description: 'Bloco editorial legado do wizard com título/subtítulo/texto. Está formalmente em deprecação para novo authoring e converge para widget:rich-text-block, mas continua suportado para leitura e edição de configurações existentes neste ciclo.',
+    description: 'Bloco editorial legado do wizard com título/subtítulo/texto. Está formalmente em deprecação para novo authoring e converge para RichContentDocument em stepBlocksBeforeForm/stepBlocksAfterForm, mas continua suportado para leitura e edição de configurações existentes neste ciclo.',
     icon: 'article',
     inputs: [
         { name: 'blockId', type: 'string', label: 'Block ID legado', description: 'Identificador operacional legado do wizard, usado hoje para telemetria/e2e e compatibilidade com editor/adapter.' },
@@ -4695,23 +4031,6 @@ const FT_WIZARD_JSON = `{
 }`;
 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 {
@@ -4733,19 +4052,17 @@ function buildStepperConfig(wizard) {
 }
 function buildStep(step, wizardId) {
     const blocks = buildBlocks(mergeBlocks(step), wizardId, step.id);
-    const beforeWidgets = [
+    const beforeNodes = [
         ...blocks.before,
-        ...(step.cards?.length ? [buildCardsWidget(step, wizardId)] : []),
+        ...buildCardNodes(step),
     ];
-    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,
+        stepBlocksBeforeForm: toDocument(beforeNodes),
+        stepBlocksAfterForm: toDocument(blocks.after),
         form: step.form
             ? {
                 formId: step.form.formId || `${wizardId}:${step.id}`,
@@ -4755,22 +4072,16 @@ function buildStep(step, wizardId) {
             : 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 buildCardNodes(step) {
+    return (step.cards ?? []).map((card, index) => ({
+        type: 'card',
+        id: `${step.id}:card:${index}`,
+        title: card.title,
+        content: [
+            ...(card.icon ? [{ type: 'icon', icon: card.icon, ariaLabel: card.title }] : []),
+            ...(card.description ? [{ type: 'text', text: card.description }] : []),
+        ],
+    }));
 }
 function mergeBlocks(step) {
     const out = [];
@@ -4800,7 +4111,7 @@ function buildBlocks(blocks, wizardId, stepId) {
     const after = [];
     blocks.forEach((block, index) => {
         const placement = block.placement ?? 'beforeForm';
-        const def = toWidget(block, wizardId, stepId, index);
+        const def = toRichNode(block, wizardId, stepId, index);
         if (!def)
             return;
         if (placement === 'afterForm')
@@ -4816,57 +4127,76 @@ function resolveBlockRuntimeId(block, wizardId, stepId, index) {
         ? `${wizardId}:${stepId}:block:${explicitId}`
         : `${wizardId}:${stepId}:block:${index}`;
 }
-function toWidget(block, wizardId, stepId, index) {
+function toRichNode(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,
-                },
+                type: 'card',
+                id: baseId,
+                title: block.title,
+                className: block.boxed === false ? 'pdx-wizard-benefits pdx-wizard-benefits--plain' : 'pdx-wizard-benefits',
+                content: block.items.flatMap((item, itemIndex) => {
+                    const nodes = [
+                        { type: 'text', text: item.title, id: `${baseId}:title:${itemIndex}` },
+                    ];
+                    if (item.icon) {
+                        nodes.unshift({ type: 'icon', icon: item.icon, ariaLabel: item.title, id: `${baseId}:icon:${itemIndex}` });
+                    }
+                    if (item.text) {
+                        nodes.push({ type: 'text', text: item.text, id: `${baseId}:text:${itemIndex}` });
+                    }
+                    return nodes;
+                }),
             };
         case 'contentBlock':
             return {
-                id: 'widget:rich-text-block',
-                inputs: {
-                    instanceId: baseId,
-                    title: block.title,
-                    subtitle: block.subtitle,
-                    contentFormat: 'plain',
-                    content: joinContentParts(block.text, block.caption),
-                },
+                type: 'card',
+                id: baseId,
+                title: block.title,
+                subtitle: block.subtitle,
+                content: textNodes(baseId, block.text, block.caption),
             };
         case 'inlineNotice':
             return {
-                id: 'praxis-wizard-inline-notice',
-                inputs: {
-                    blockId: baseId,
-                    text: block.text,
-                    tone: block.tone,
-                },
+                type: 'compose',
+                id: baseId,
+                gap: 'sm',
+                items: [
+                    { type: 'icon', icon: block.tone === 'warning' ? 'warning' : 'info', ariaLabel: block.tone ?? 'info' },
+                    { type: 'text', text: block.text },
+                ],
             };
         case 'divider':
             return {
-                id: 'praxis-wizard-divider',
-                inputs: {
-                    blockId: baseId,
-                    label: block.label ?? '',
-                },
+                type: 'text',
+                id: baseId,
+                text: block.label ?? '',
+                className: 'pdx-wizard-divider',
             };
         default:
             return null;
     }
 }
-function joinContentParts(text, caption) {
-    const parts = [text, caption]
+function textNodes(baseId, text, caption) {
+    return [text, caption]
         .map((value) => (typeof value === 'string' ? value.trim() : ''))
-        .filter(Boolean);
-    return parts.join('\n\n');
+        .filter(Boolean)
+        .map((value, index) => ({
+        type: 'text',
+        id: `${baseId}:text:${index}`,
+        text: value,
+    }));
+}
+function toDocument(nodes) {
+    if (!nodes.length) {
+        return null;
+    }
+    return {
+        kind: 'praxis.rich-content',
+        version: '1.0.0',
+        nodes,
+    };
 }
 
 class PraxisWizardCtaBarComponent {