@praxisui/page-builder 9.0.0-beta.85 → 9.0.0-beta.88

package/fesm2022/praxisui-page-builder.mjs

@@ -7,7 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@praxisui/core';
-import { PraxisIconDirective, BUILTIN_SHELL_PRESETS, providePraxisI18n, PraxisI18nService, GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, deepMerge, generateId, ComponentMetadataRegistry, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR } from '@praxisui/core';
+import { PraxisIconDirective, BUILTIN_SHELL_PRESETS, PraxisIconButtonComponent, providePraxisI18n, PraxisI18nService, GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, deepMerge, generateId, ComponentMetadataRegistry, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR } from '@praxisui/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$1 from '@angular/material/form-field';
@@ -1560,7 +1560,7 @@ class WidgetShellEditorComponent {
                 </div>
               </div>
               <div class="shell-preview-actions">
-                @for (action of previewHeaderActions(); track action) {
+                @for (action of previewHeaderActions(); track action.id) {
                   <button
                     type="button"
                     [disabled]="action.disabled"
@@ -1575,31 +1575,37 @@ class WidgetShellEditorComponent {
                 }
                 @if (previewOverflowCount()) {
                   <button
-                    mat-icon-button
+                    praxisIconButton="more_horiz"
+                    size="compact"
                     type="button"
                     aria-label="Mais ações"
-                    >
-                    <mat-icon>more_horiz</mat-icon>
-                  </button>
+                  ></button>
                 }
-                @for (action of previewWindowActions(); track action) {
-                  <button
-                    mat-icon-button
-                    type="button"
-                    [disabled]="action.disabled"
-                    [attr.aria-label]="action.label || action.id"
-                    >
-                    @if (action.icon) {
-                      <mat-icon [praxisIcon]="action.icon"></mat-icon>
-                    }
-                  </button>
+                @for (action of previewWindowActions(); track action.id) {
+                  @if (action.icon) {
+                    <button
+                      [praxisIconButton]="action.icon"
+                      size="compact"
+                      type="button"
+                      [disabled]="action.disabled"
+                      [attr.aria-label]="action.label || action.id"
+                    ></button>
+                  }
                 }
-                <button mat-icon-button type="button" (click)="togglePreviewCollapse()" aria-label="Recolher">
-                  <mat-icon>{{ previewCollapsed ? 'unfold_more' : 'unfold_less' }}</mat-icon>
-                </button>
-                <button mat-icon-button type="button" (click)="togglePreviewExpand()" aria-label="Expandir">
-                  <mat-icon>{{ previewExpanded ? 'close_fullscreen' : 'open_in_full' }}</mat-icon>
-                </button>
+                <button
+                  [praxisIconButton]="previewCollapsed ? 'unfold_more' : 'unfold_less'"
+                  size="compact"
+                  type="button"
+                  (click)="togglePreviewCollapse()"
+                  aria-label="Recolher"
+                ></button>
+                <button
+                  [praxisIconButton]="previewExpanded ? 'close_fullscreen' : 'open_in_full'"
+                  size="compact"
+                  type="button"
+                  (click)="togglePreviewExpand()"
+                  aria-label="Expandir"
+                ></button>
               </div>
             </div>
           }
@@ -1803,7 +1809,7 @@ class WidgetShellEditorComponent {
       }
     
     </div>
-    `, isInline: true, styles: [".shell-editor{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.shell-head{display:flex;align-items:center;gap:12px}.shell-title{font-weight:600}.shell-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-section{font-weight:600;margin-top:8px}.shell-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:1fr auto;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;background:var(--md-sys-color-surface-container-low)}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%}.shell-preview{border:1px dashed var(--md-sys-color-outline-variant);border-radius:12px;padding:12px}.shell-preview-card{background:var(--pdx-shell-card-bg, var(--md-sys-color-surface));border:1px solid var(--pdx-shell-card-border, var(--md-sys-color-outline-variant));border-radius:var(--pdx-shell-card-radius, 14px);box-shadow:var(--pdx-shell-card-shadow, var(--mat-elevation-level2));overflow:hidden}.shell-preview-card.no-shell{background:transparent;border:none;box-shadow:none}.shell-preview-card.expanded{box-shadow:var(--pdx-shell-card-shadow, 0 16px 34px rgba(0,0,0,.32));transform:scale(1.01)}.shell-preview-header{display:flex;align-items:center;gap:12px;padding:10px 12px 8px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.shell-preview-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.shell-preview-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.shell-preview-text{min-width:0}.shell-preview-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 14px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-subtitle{font-size:var(--pdx-shell-subtitle-size, 12px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-actions{display:flex;align-items:center;gap:6px}.pdx-preview-text{padding:0 8px}.pdx-preview-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-preview-label{font-size:12px;font-weight:500}.shell-preview-body{padding:var(--pdx-shell-body-padding, 10px 12px 12px 12px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit);font-size:12px}.shell-preview-body.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".shell-editor{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.shell-head{display:flex;align-items:center;gap:12px}.shell-title{font-weight:600}.shell-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-section{font-weight:600;margin-top:8px}.shell-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:1fr auto;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;background:var(--md-sys-color-surface-container-low)}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%}.shell-preview{border:1px dashed var(--md-sys-color-outline-variant);border-radius:12px;padding:12px}.shell-preview-card{background:var(--pdx-shell-card-bg, var(--md-sys-color-surface));border:1px solid var(--pdx-shell-card-border, var(--md-sys-color-outline-variant));border-radius:var(--pdx-shell-card-radius, 14px);box-shadow:var(--pdx-shell-card-shadow, var(--mat-elevation-level2));overflow:hidden}.shell-preview-card.no-shell{background:transparent;border:none;box-shadow:none}.shell-preview-card.expanded{box-shadow:var(--pdx-shell-card-shadow, 0 16px 34px rgba(0,0,0,.32));transform:scale(1.01)}.shell-preview-header{display:flex;align-items:center;gap:12px;padding:10px 12px 8px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.shell-preview-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.shell-preview-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.shell-preview-text{min-width:0}.shell-preview-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 14px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-subtitle{font-size:var(--pdx-shell-subtitle-size, 12px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-actions{display:flex;align-items:center;gap:6px}.pdx-preview-text{padding:0 8px}.pdx-preview-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-preview-label{font-size:12px;font-weight:500}.shell-preview-body{padding:var(--pdx-shell-body-padding, 10px 12px 12px 12px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit);font-size:12px}.shell-preview-body.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WidgetShellEditorComponent, decorators: [{
             type: Component,
@@ -1818,6 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         MatInputModule,
                         MatSelectModule,
+                        PraxisIconButtonComponent,
                         PraxisIconDirective,
                     ], template: `
     <div class="shell-editor">
@@ -1967,7 +1974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 </div>
               </div>
               <div class="shell-preview-actions">
-                @for (action of previewHeaderActions(); track action) {
+                @for (action of previewHeaderActions(); track action.id) {
                   <button
                     type="button"
                     [disabled]="action.disabled"
@@ -1982,31 +1989,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }
                 @if (previewOverflowCount()) {
                   <button
-                    mat-icon-button
+                    praxisIconButton="more_horiz"
+                    size="compact"
                     type="button"
                     aria-label="Mais ações"
-                    >
-                    <mat-icon>more_horiz</mat-icon>
-                  </button>
+                  ></button>
                 }
-                @for (action of previewWindowActions(); track action) {
-                  <button
-                    mat-icon-button
-                    type="button"
-                    [disabled]="action.disabled"
-                    [attr.aria-label]="action.label || action.id"
-                    >
-                    @if (action.icon) {
-                      <mat-icon [praxisIcon]="action.icon"></mat-icon>
-                    }
-                  </button>
+                @for (action of previewWindowActions(); track action.id) {
+                  @if (action.icon) {
+                    <button
+                      [praxisIconButton]="action.icon"
+                      size="compact"
+                      type="button"
+                      [disabled]="action.disabled"
+                      [attr.aria-label]="action.label || action.id"
+                    ></button>
+                  }
                 }
-                <button mat-icon-button type="button" (click)="togglePreviewCollapse()" aria-label="Recolher">
-                  <mat-icon>{{ previewCollapsed ? 'unfold_more' : 'unfold_less' }}</mat-icon>
-                </button>
-                <button mat-icon-button type="button" (click)="togglePreviewExpand()" aria-label="Expandir">
-                  <mat-icon>{{ previewExpanded ? 'close_fullscreen' : 'open_in_full' }}</mat-icon>
-                </button>
+                <button
+                  [praxisIconButton]="previewCollapsed ? 'unfold_more' : 'unfold_less'"
+                  size="compact"
+                  type="button"
+                  (click)="togglePreviewCollapse()"
+                  aria-label="Recolher"
+                ></button>
+                <button
+                  [praxisIconButton]="previewExpanded ? 'close_fullscreen' : 'open_in_full'"
+                  size="compact"
+                  type="button"
+                  (click)="togglePreviewExpand()"
+                  aria-label="Expandir"
+                ></button>
               </div>
             </div>
           }
@@ -10419,17 +10432,17 @@ class DynamicPageConfigEditorComponent {
       </div>
       <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
         <mat-tab [label]="tx('editor.tabs.layout', 'Layout')"><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="canvasColumnsControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="canvasRowUnitControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]="canvasGapControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="canvasAutoRowsControl"><mat-option value="fixed">fixed</mat-option><mat-option value="content">content</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.layoutPreset', 'Layout preset') }}</mat-label><mat-select [formControl]="layoutPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of layoutPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label><mat-select [formControl]="themePresetControl"><mat-option value="">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</mat-option>@for (preset of themePresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label><mat-select [formControl]="shellPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of shellPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field></div>@if (selectedLayoutPresetEntry; as preset) {<div class="preset-preview"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.layoutEyebrow', 'Layout template') }} · {{ preset.category }}</span><strong>{{ preset.label }}</strong></div><span>{{ layoutPresetSummary(preset) }}</span></div><p>{{ preset.description || tx('editor.preview.layoutFallbackDescription', 'Page organization preset.') }}</p><div class="preset-preview__chips"><span>{{ slotsSummary(preset) }}</span><span>{{ requiredSlotsSummary(preset) }}</span><span>{{ devicePolicySummary(preset) }}</span></div>@if (recommendedThemePresetEntry; as theme) {<div class="preset-preview__recommendation"><div><span class="eyebrow">{{ tx('editor.preview.inheritedTheme', 'Inherited theme') }}</span><strong>{{ theme.label }}</strong><span>{{ inheritedThemeHelp(theme) }}</span></div><button mat-stroked-button type="button" [disabled]="themePresetControl.value === theme.id" (click)="pinRecommendedThemePreset()">{{ tx('editor.preview.pinTheme', 'Pin theme') }}</button></div>}</div>} @if (selectedThemePresetEntry; as theme) {<div class="preset-preview preset-preview--theme"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.explicitTheme', 'Explicit theme') }}</span><strong>{{ theme.label }}</strong></div><span>{{ theme.density }} · {{ theme.motion }}</span></div><p>{{ theme.description || tx('editor.preview.themeFallbackDescription', 'Page visual preset.') }}</p><div class="preset-preview__chips"><span>{{ tx('editor.preview.shellChip', 'Shell: {{value}}').replace('{{value}}', theme.shellPreset) }}</span><span>{{ tx('editor.preview.chartsChip', 'Charts: {{value}}').replace('{{value}}', theme.chartThemePreset) }}</span></div></div>}</mat-tab>
-        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button mat-icon-button type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"><mat-icon>delete</mat-icon></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
         <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')"><div class="panel">@for (device of deviceKeys; track device) {<div class="card"><div>{{ deviceLabels[device] }}</div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">fixed</mat-option><mat-option value="content">content</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field></div><div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div></div>}</div></mat-tab>
         <mat-tab [label]="tx('editor.tabs.context', 'Context')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows="12" [formControl]="contextControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.tabs.state', 'Page State')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label><textarea matInput rows="14" [formControl]="stateControl"></textarea></mat-form-field></mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [".editor,.panel{display:grid;gap:16px;color:var(--md-sys-color-on-surface, currentColor)}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".editor,.panel{display:grid;gap:16px;color:var(--md-sys-color-on-surface, currentColor)}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule], providers: [providePraxisPageBuilderI18n()], template: `
+            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], template: `
     <div class="editor">
       <div class="head">
         <div>{{ tx('editor.title', 'Page settings') }}</div>
@@ -10444,7 +10457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       </div>
       <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
         <mat-tab [label]="tx('editor.tabs.layout', 'Layout')"><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="canvasColumnsControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="canvasRowUnitControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]="canvasGapControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="canvasAutoRowsControl"><mat-option value="fixed">fixed</mat-option><mat-option value="content">content</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.layoutPreset', 'Layout preset') }}</mat-label><mat-select [formControl]="layoutPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of layoutPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label><mat-select [formControl]="themePresetControl"><mat-option value="">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</mat-option>@for (preset of themePresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label><mat-select [formControl]="shellPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of shellPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field></div>@if (selectedLayoutPresetEntry; as preset) {<div class="preset-preview"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.layoutEyebrow', 'Layout template') }} · {{ preset.category }}</span><strong>{{ preset.label }}</strong></div><span>{{ layoutPresetSummary(preset) }}</span></div><p>{{ preset.description || tx('editor.preview.layoutFallbackDescription', 'Page organization preset.') }}</p><div class="preset-preview__chips"><span>{{ slotsSummary(preset) }}</span><span>{{ requiredSlotsSummary(preset) }}</span><span>{{ devicePolicySummary(preset) }}</span></div>@if (recommendedThemePresetEntry; as theme) {<div class="preset-preview__recommendation"><div><span class="eyebrow">{{ tx('editor.preview.inheritedTheme', 'Inherited theme') }}</span><strong>{{ theme.label }}</strong><span>{{ inheritedThemeHelp(theme) }}</span></div><button mat-stroked-button type="button" [disabled]="themePresetControl.value === theme.id" (click)="pinRecommendedThemePreset()">{{ tx('editor.preview.pinTheme', 'Pin theme') }}</button></div>}</div>} @if (selectedThemePresetEntry; as theme) {<div class="preset-preview preset-preview--theme"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.explicitTheme', 'Explicit theme') }}</span><strong>{{ theme.label }}</strong></div><span>{{ theme.density }} · {{ theme.motion }}</span></div><p>{{ theme.description || tx('editor.preview.themeFallbackDescription', 'Page visual preset.') }}</p><div class="preset-preview__chips"><span>{{ tx('editor.preview.shellChip', 'Shell: {{value}}').replace('{{value}}', theme.shellPreset) }}</span><span>{{ tx('editor.preview.chartsChip', 'Charts: {{value}}').replace('{{value}}', theme.chartThemePreset) }}</span></div></div>}</mat-tab>
-        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button mat-icon-button type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"><mat-icon>delete</mat-icon></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
         <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')"><div class="panel">@for (device of deviceKeys; track device) {<div class="card"><div>{{ deviceLabels[device] }}</div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">fixed</mat-option><mat-option value="content">content</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field></div><div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div></div>}</div></mat-tab>
         <mat-tab [label]="tx('editor.tabs.context', 'Context')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows="12" [formControl]="contextControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.tabs.state', 'Page State')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label><textarea matInput rows="14" [formControl]="stateControl"></textarea></mat-form-field></mat-tab>
@@ -11387,9 +11400,7 @@ class PageConfigEditorComponent {
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="layoutPresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="layoutPresetHint" [attr.aria-label]="layoutPresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label>
@@ -11399,9 +11410,7 @@ class PageConfigEditorComponent {
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="themePresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="themePresetHint" [attr.aria-label]="themePresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label>
@@ -11411,9 +11420,7 @@ class PageConfigEditorComponent {
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="shellPresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="shellPresetHint" [attr.aria-label]="shellPresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
       </div>
       </div>
@@ -11438,9 +11445,7 @@ class PageConfigEditorComponent {
             <div class="state-card" [formGroup]="group">
               <div class="state-card-head">
                 <div class="state-card-title">{{ tx('editor.grouping.groupN', 'Group {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                <button mat-icon-button type="button" (click)="removeGroupingNode($index)" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')">
-                  <mat-icon>delete</mat-icon>
-                </button>
+                <button praxisIconButton="delete" size="compact" type="button" (click)="removeGroupingNode($index)" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')"></button>
               </div>
               <div class="state-card-grid">
                 <mat-form-field appearance="outline">
@@ -11493,9 +11498,7 @@ class PageConfigEditorComponent {
                   <mat-form-field appearance="outline" class="span-3">
                     <mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label>
                     <textarea matInput rows="5" formControlName="tabsJson"></textarea>
-                    <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="tabsJsonHint" matTooltipPosition="above">
-                      <mat-icon>help_outline</mat-icon>
-                    </button>
+                    <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="tabsJsonHint" [attr.aria-label]="tabsJsonHint" matTooltipPosition="above"></button>
                   </mat-form-field>
                 } @else {
                   <mat-form-field appearance="outline" class="span-3">
@@ -11541,23 +11544,17 @@ class PageConfigEditorComponent {
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -11583,23 +11580,17 @@ class PageConfigEditorComponent {
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -11625,23 +11616,17 @@ class PageConfigEditorComponent {
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -11660,15 +11645,15 @@ class PageConfigEditorComponent {
         <mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label>
         <textarea matInput rows="10" [formControl]="contextControl"></textarea>
         <button
-          mat-icon-button
+          praxisIconButton="help_outline"
+          size="dense"
           matSuffix
           class="help-icon-button"
           type="button"
           [matTooltip]="contextExample"
+          [attr.aria-label]="contextExample"
           matTooltipPosition="above"
-        >
-          <mat-icon>help_outline</mat-icon>
-        </button>
+        ></button>
       </mat-form-field>
       @if (contextError()) {
         <div class="page-error" role="alert">{{ contextError() }}</div>
@@ -11684,15 +11669,15 @@ class PageConfigEditorComponent {
           <mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label>
           <textarea matInput rows="10" [formControl]="stateValuesControl"></textarea>
           <button
-            mat-icon-button
+            praxisIconButton="help_outline"
+            size="dense"
             matSuffix
             class="help-icon-button"
             type="button"
             [matTooltip]="stateValuesExample"
+            [attr.aria-label]="stateValuesExample"
             matTooltipPosition="above"
-          >
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          ></button>
         </mat-form-field>
 
         <div class="state-group">
@@ -11712,9 +11697,7 @@ class PageConfigEditorComponent {
               <div class="state-card" [formGroup]="group">
                 <div class="state-card-head">
                   <div class="state-card-title">{{ tx('editor.state.nodeN', 'Node {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                  <button mat-icon-button type="button" (click)="removeSchemaNode($index)" [attr.aria-label]="tx('editor.state.removeSchemaAria', 'Remove schema node')">
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeSchemaNode($index)" [attr.aria-label]="tx('editor.state.removeSchemaAria', 'Remove schema node')"></button>
                 </div>
                 <div class="state-card-grid">
                   <mat-form-field appearance="outline">
@@ -11754,9 +11737,7 @@ class PageConfigEditorComponent {
                     <mat-form-field appearance="outline" class="span-2">
                       <mat-label>{{ tx('editor.state.initialJson', 'Initial (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="initialJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="schemaInitialHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="schemaInitialHint" [attr.aria-label]="schemaInitialHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                   } @else if (group.controls.initialMode.value === 'boolean') {
                     <mat-form-field appearance="outline" class="span-2">
@@ -11804,9 +11785,7 @@ class PageConfigEditorComponent {
               <div class="state-card" [formGroup]="group">
                 <div class="state-card-head">
                   <div class="state-card-title">{{ tx('editor.state.derivedN', 'Derived {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                  <button mat-icon-button type="button" (click)="removeDerivedNode($index)" [attr.aria-label]="tx('editor.state.removeDerivedAria', 'Remove derivation')">
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeDerivedNode($index)" [attr.aria-label]="tx('editor.state.removeDerivedAria', 'Remove derivation')"></button>
                 </div>
                 <div class="state-card-grid">
                   <mat-form-field appearance="outline">
@@ -11864,9 +11843,7 @@ class PageConfigEditorComponent {
                       <mat-form-field appearance="outline" class="span-2">
                         <mat-label>{{ tx('editor.state.templateJson', 'Template (JSON)') }}</mat-label>
                         <textarea matInput rows="4" formControlName="templateJson"></textarea>
-                        <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="templateJsonHint" matTooltipPosition="above">
-                          <mat-icon>help_outline</mat-icon>
-                        </button>
+                        <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="templateJsonHint" [attr.aria-label]="templateJsonHint" matTooltipPosition="above"></button>
                       </mat-form-field>
                     } @else if (group.controls.templateMode.value === 'boolean') {
                       <mat-form-field appearance="outline" class="span-2">
@@ -11902,9 +11879,7 @@ class PageConfigEditorComponent {
                     <mat-form-field appearance="outline" class="span-2">
                       <mat-label>{{ tx('editor.state.optionsJson', 'Options (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="options"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="transformerOptionsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="transformerOptionsHint" [attr.aria-label]="transformerOptionsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                   }
                   <mat-form-field appearance="outline" class="span-3">
@@ -11930,7 +11905,7 @@ class PageConfigEditorComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{margin-right:-4px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageConfigEditorComponent, decorators: [{
             type: Component,
@@ -11942,7 +11917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         MatSelectModule,
                         MatTabsModule,
-                        MatTooltipModule
+                        MatTooltipModule,
+                        PraxisIconButtonComponent,
                     ], providers: [providePraxisPageBuilderI18n()], template: `
     <div class="page-config">
       <div class="page-head">
@@ -12018,9 +11994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="layoutPresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="layoutPresetHint" [attr.aria-label]="layoutPresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label>
@@ -12030,9 +12004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="themePresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="themePresetHint" [attr.aria-label]="themePresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label>
@@ -12042,9 +12014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
             }
           </mat-select>
-          <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="shellPresetHint" matTooltipPosition="above">
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="shellPresetHint" [attr.aria-label]="shellPresetHint" matTooltipPosition="above"></button>
         </mat-form-field>
       </div>
       </div>
@@ -12069,9 +12039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div class="state-card" [formGroup]="group">
               <div class="state-card-head">
                 <div class="state-card-title">{{ tx('editor.grouping.groupN', 'Group {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                <button mat-icon-button type="button" (click)="removeGroupingNode($index)" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')">
-                  <mat-icon>delete</mat-icon>
-                </button>
+                <button praxisIconButton="delete" size="compact" type="button" (click)="removeGroupingNode($index)" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')"></button>
               </div>
               <div class="state-card-grid">
                 <mat-form-field appearance="outline">
@@ -12124,9 +12092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   <mat-form-field appearance="outline" class="span-3">
                     <mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label>
                     <textarea matInput rows="5" formControlName="tabsJson"></textarea>
-                    <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="tabsJsonHint" matTooltipPosition="above">
-                      <mat-icon>help_outline</mat-icon>
-                    </button>
+                    <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="tabsJsonHint" [attr.aria-label]="tabsJsonHint" matTooltipPosition="above"></button>
                   </mat-form-field>
                 } @else {
                   <mat-form-field appearance="outline" class="span-3">
@@ -12172,23 +12138,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -12214,23 +12174,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -12256,23 +12210,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.breakpointsJson', 'Breakpoints (JSON)') }}</mat-label>
                       <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="breakpointsHint" [attr.aria-label]="breakpointsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="groupingOverridesHint" [attr.aria-label]="groupingOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                     <mat-form-field appearance="outline" class="span-3">
                       <mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="widgetOverridesHint" [attr.aria-label]="widgetOverridesHint" matTooltipPosition="above"></button>
                     </mat-form-field>
             </div>
           </div>
@@ -12291,15 +12239,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label>
         <textarea matInput rows="10" [formControl]="contextControl"></textarea>
         <button
-          mat-icon-button
+          praxisIconButton="help_outline"
+          size="dense"
           matSuffix
           class="help-icon-button"
           type="button"
           [matTooltip]="contextExample"
+          [attr.aria-label]="contextExample"
           matTooltipPosition="above"
-        >
-          <mat-icon>help_outline</mat-icon>
-        </button>
+        ></button>
       </mat-form-field>
       @if (contextError()) {
         <div class="page-error" role="alert">{{ contextError() }}</div>
@@ -12315,15 +12263,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           <mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label>
           <textarea matInput rows="10" [formControl]="stateValuesControl"></textarea>
           <button
-            mat-icon-button
+            praxisIconButton="help_outline"
+            size="dense"
             matSuffix
             class="help-icon-button"
             type="button"
             [matTooltip]="stateValuesExample"
+            [attr.aria-label]="stateValuesExample"
             matTooltipPosition="above"
-          >
-            <mat-icon>help_outline</mat-icon>
-          </button>
+          ></button>
         </mat-form-field>
 
         <div class="state-group">
@@ -12343,9 +12291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="state-card" [formGroup]="group">
                 <div class="state-card-head">
                   <div class="state-card-title">{{ tx('editor.state.nodeN', 'Node {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                  <button mat-icon-button type="button" (click)="removeSchemaNode($index)" [attr.aria-label]="tx('editor.state.removeSchemaAria', 'Remove schema node')">
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeSchemaNode($index)" [attr.aria-label]="tx('editor.state.removeSchemaAria', 'Remove schema node')"></button>
                 </div>
                 <div class="state-card-grid">
                   <mat-form-field appearance="outline">
@@ -12385,9 +12331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <mat-form-field appearance="outline" class="span-2">
                       <mat-label>{{ tx('editor.state.initialJson', 'Initial (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="initialJson"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="schemaInitialHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="schemaInitialHint" [attr.aria-label]="schemaInitialHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                   } @else if (group.controls.initialMode.value === 'boolean') {
                     <mat-form-field appearance="outline" class="span-2">
@@ -12435,9 +12379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="state-card" [formGroup]="group">
                 <div class="state-card-head">
                   <div class="state-card-title">{{ tx('editor.state.derivedN', 'Derived {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
-                  <button mat-icon-button type="button" (click)="removeDerivedNode($index)" [attr.aria-label]="tx('editor.state.removeDerivedAria', 'Remove derivation')">
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeDerivedNode($index)" [attr.aria-label]="tx('editor.state.removeDerivedAria', 'Remove derivation')"></button>
                 </div>
                 <div class="state-card-grid">
                   <mat-form-field appearance="outline">
@@ -12495,9 +12437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <mat-form-field appearance="outline" class="span-2">
                         <mat-label>{{ tx('editor.state.templateJson', 'Template (JSON)') }}</mat-label>
                         <textarea matInput rows="4" formControlName="templateJson"></textarea>
-                        <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="templateJsonHint" matTooltipPosition="above">
-                          <mat-icon>help_outline</mat-icon>
-                        </button>
+                        <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="templateJsonHint" [attr.aria-label]="templateJsonHint" matTooltipPosition="above"></button>
                       </mat-form-field>
                     } @else if (group.controls.templateMode.value === 'boolean') {
                       <mat-form-field appearance="outline" class="span-2">
@@ -12533,9 +12473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <mat-form-field appearance="outline" class="span-2">
                       <mat-label>{{ tx('editor.state.optionsJson', 'Options (JSON)') }}</mat-label>
                       <textarea matInput rows="4" formControlName="options"></textarea>
-                      <button mat-icon-button matSuffix class="help-icon-button" type="button" [matTooltip]="transformerOptionsHint" matTooltipPosition="above">
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                      <button praxisIconButton="help_outline" size="dense" matSuffix class="help-icon-button" type="button" [matTooltip]="transformerOptionsHint" [attr.aria-label]="transformerOptionsHint" matTooltipPosition="above"></button>
                     </mat-form-field>
                   }
                   <mat-form-field appearance="outline" class="span-3">
@@ -12561,7 +12499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{margin-right:-4px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], identity: [{ type: i0.Input, args: [{ isSignal: true, alias: "identity", required: false }] }], layoutCompatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutCompatOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**
@@ -14808,10 +14746,12 @@ class PageBuilderAiAdapter {
         const { [LEGACY_OPTIONS_KEY]: _legacyOptions, ...rest } = cloned;
         const widgets = (cloned.widgets || [])
             .map((w) => normalizePageBuilderRuntimeWidget(this.stripLegacyLayoutFields(w)));
+        const canvas = this.ensureCanvasLayout(cloned);
         return {
             ...rest,
             widgets,
-            canvas: this.ensureCanvasLayout(cloned),
+            canvas,
+            deviceLayouts: this.ensureDeviceLayouts(cloned.deviceLayouts, canvas),
         };
     }
     normalizeConfigForRuntime(config, warnings) {
@@ -14829,10 +14769,12 @@ class PageBuilderAiAdapter {
         const { [LEGACY_OPTIONS_KEY]: _legacyOptions, ...rest } = cloned;
         const widgets = (cloned.widgets || [])
             .map((w) => normalizePageBuilderRuntimeWidget(this.stripLegacyLayoutFields(w)));
+        const canvas = this.ensureCanvasLayout(cloned, warnings);
         return {
             ...rest,
             widgets,
-            canvas: this.ensureCanvasLayout(cloned, warnings),
+            canvas,
+            deviceLayouts: this.ensureDeviceLayouts(cloned.deviceLayouts, canvas, warnings),
         };
     }
     normalizePatch(patch, base, warnings) {
@@ -15051,16 +14993,123 @@ class PageBuilderAiAdapter {
             nextRow = items[key].row + items[key].rowSpan - 1;
             warnings.push(`Widget "${key}" missing canvas placement; using defaults.`);
         }
+        const columns = Math.max(1, this.coerceInteger(baseCanvas.columns, legacyOptions?.cols || 12));
+        const normalizedItems = this.resolveCanvasCollisions(items, columns, warnings, 'base');
         return {
             mode: 'grid',
-            columns: baseCanvas.columns || legacyOptions?.cols || 12,
+            columns,
             rowUnit: baseCanvas.rowUnit || (typeof legacyOptions?.rowHeight === 'number' ? `${legacyOptions.rowHeight}px` : '80px'),
             gap: baseCanvas.gap || (typeof legacyOptions?.gap === 'number' ? `${legacyOptions.gap}px` : '16px'),
             autoRows: baseCanvas.autoRows || 'fixed',
             collisionPolicy: baseCanvas.collisionPolicy,
-            items,
+            items: normalizedItems,
         };
     }
+    ensureDeviceLayouts(deviceLayouts, baseCanvas, warnings = []) {
+        if (!deviceLayouts)
+            return deviceLayouts;
+        const normalized = this.clone(deviceLayouts);
+        for (const device of ['desktop', 'tablet', 'mobile']) {
+            const variant = normalized[device];
+            if (!variant?.canvas)
+                continue;
+            const columns = Math.max(1, this.coerceInteger(variant.canvas.columns, baseCanvas.columns));
+            const overrides = variant.canvas.items || {};
+            const effectiveItems = {};
+            for (const [key, baseItem] of Object.entries(baseCanvas.items)) {
+                const override = overrides[key];
+                if (override?.hidden)
+                    continue;
+                effectiveItems[key] = {
+                    ...baseItem,
+                    ...(override || {}),
+                    col: this.coerceInteger(override?.col, baseItem.col),
+                    row: this.coerceInteger(override?.row, baseItem.row),
+                    colSpan: this.coerceInteger(override?.colSpan, baseItem.colSpan),
+                    rowSpan: this.coerceInteger(override?.rowSpan, baseItem.rowSpan),
+                };
+            }
+            const resolvedItems = this.resolveCanvasCollisions(effectiveItems, columns, warnings, device);
+            const nextOverrides = this.clone(overrides);
+            for (const [key, item] of Object.entries(resolvedItems)) {
+                const baseItem = baseCanvas.items[key];
+                const currentOverride = overrides[key];
+                const differsFromBase = !baseItem
+                    || item.col !== baseItem.col
+                    || item.row !== baseItem.row
+                    || item.colSpan !== baseItem.colSpan
+                    || item.rowSpan !== baseItem.rowSpan;
+                if (!currentOverride && !differsFromBase)
+                    continue;
+                nextOverrides[key] = {
+                    ...(currentOverride || {}),
+                    col: item.col,
+                    row: item.row,
+                    colSpan: item.colSpan,
+                    rowSpan: item.rowSpan,
+                };
+            }
+            variant.canvas = {
+                ...variant.canvas,
+                columns,
+                items: nextOverrides,
+            };
+        }
+        return normalized;
+    }
+    resolveCanvasCollisions(items, columns, warnings, scope) {
+        const candidates = Object.entries(items)
+            .map(([key, source], index) => {
+            const colSpan = Math.min(columns, Math.max(1, this.coerceInteger(source.colSpan, 1)));
+            return {
+                key,
+                index,
+                source,
+                desired: {
+                    col: Math.min(Math.max(1, this.coerceInteger(source.col, 1)), Math.max(1, columns - colSpan + 1)),
+                    row: Math.max(1, this.coerceInteger(source.row, 1)),
+                    colSpan,
+                    rowSpan: Math.max(1, this.coerceInteger(source.rowSpan, 1)),
+                },
+            };
+        })
+            .sort((left, right) => left.desired.row - right.desired.row
+            || left.desired.col - right.desired.col
+            || left.index - right.index);
+        const placed = [];
+        const resolved = {};
+        for (const candidate of candidates) {
+            const item = this.findAvailableCanvasPosition(candidate.desired, placed, columns);
+            resolved[candidate.key] = { ...candidate.source, ...item };
+            placed.push({ key: candidate.key, item: resolved[candidate.key] });
+            if (item.col !== candidate.desired.col || item.row !== candidate.desired.row) {
+                warnings.push(`Widget "${candidate.key}" overlapped another widget in the ${scope} canvas; moved to row ${item.row}, column ${item.col}.`);
+            }
+        }
+        return resolved;
+    }
+    findAvailableCanvasPosition(desired, placed, columns) {
+        const maxCol = Math.max(1, columns - desired.colSpan + 1);
+        const candidateCols = [
+            desired.col,
+            ...Array.from({ length: maxCol }, (_, index) => index + 1)
+                .filter((col) => col !== desired.col),
+        ];
+        for (let row = desired.row;; row += 1) {
+            for (const col of candidateCols) {
+                const candidate = { ...desired, col, row };
+                const collides = placed.some(({ item }) => this.canvasItemsOverlap(candidate, item));
+                if (!collides)
+                    return candidate;
+            }
+        }
+    }
+    canvasItemsOverlap(left, right) {
+        return left.col < right.col + right.colSpan
+            && left.col + left.colSpan > right.col
+            && left.row < right.row + right.rowSpan
+            && left.row + left.rowSpan > right.row;
+    }
     stripLegacyLayoutFields(widget) {
         const { x: _x, y: _y, cols: _cols, rows: _rows, minItemCols: _minItemCols, minItemRows: _minItemRows, maxItemCols: _maxItemCols, maxItemRows: _maxItemRows, ...rest } = widget;
         delete rest[LEGACY_LAYOUT_KEY];
@@ -15180,6 +15229,10 @@ class PageBuilderAiAdapter {
     coerceNumber(value, fallback) {
         return typeof value === 'number' && !Number.isNaN(value) ? value : fallback;
     }
+    coerceInteger(value, fallback) {
+        const numeric = this.coerceNumber(value, fallback);
+        return Number.isFinite(numeric) ? Math.trunc(numeric) : fallback;
+    }
     parsePixelValue(value) {
         if (typeof value !== 'string')
             return undefined;
@@ -15218,6 +15271,11 @@ class PageBuilderAgenticAuthoringTurnFlow {
                 phase: 'capture',
             });
         }
+        if (this.context.enableTurnStream?.() === true && this.service.streamTurn) {
+            if (this.hasCanonicalSemanticDecision(request)) {
+                return this.submitWithTurnStream(request, prompt);
+            }
+        }
         const contextualActionContext = this.contextualPreviewActionContextFromRequest(request);
         if (contextualActionContext) {
             return from(this.submitContextualPreviewAction(request, prompt, contextualActionContext));
@@ -15415,6 +15473,9 @@ class PageBuilderAgenticAuthoringTurnFlow {
             clientTurnId: request.clientTurnId ?? event.turnId,
         })))), share());
         return merge(of(this.toTurnStreamPreparationStatusResult()), preparedRequest$.pipe(map(({ diagnostics }) => this.toTurnStreamPreparedStatusResult(diagnostics))), timer(TURN_STREAM_PREPARATION_WAITING_MS).pipe(map(() => this.toTurnStreamPreparationWaitingResult()), takeUntil(stream$)), stream$).pipe(catchError((error) => {
+            if (this.hasCanonicalSemanticDecision(request)) {
+                return of(this.toTurnStreamTransportErrorResult(error));
+            }
             if (this.shouldFailClosedFromTurnStreamError(request, prompt, error)) {
                 return of(this.toGovernedRouteFailClosedResult(request, prompt, error));
             }
@@ -16123,10 +16184,10 @@ class PageBuilderAgenticAuthoringTurnFlow {
                     queryContext: { filters: {} },
                     enableCustomization: true,
                     chartDocument: {
-                        version: '1.0.0',
+                        version: '0.1.0',
                         chartId: chartKey,
                         kind: 'bar',
-                        preset: 'dashboard-breakdown',
+                        preset: 'distribution',
                         title: `Distribuicao por ${this.humanizeFieldName(categoryField)}`,
                         subtitle: 'Clique em uma barra para refinar os detalhes',
                         source: {
@@ -16134,14 +16195,12 @@ class PageBuilderAgenticAuthoringTurnFlow {
                             resource: resourcePath,
                             operation: 'group-by',
                             options: {
-                                groupBy: categoryField,
-                                metric: 'count',
                                 orderBy: 'value-desc',
                                 limit: 12,
                             },
                         },
                         dimensions: [{ field: categoryField, label: this.humanizeFieldName(categoryField), role: 'category' }],
-                        metrics: [{ field: 'count', label: 'Registros', aggregation: 'count', seriesKind: 'bar' }],
+                        metrics: [{ field: 'total', label: 'Registros', aggregation: 'count', seriesKind: 'bar' }],
                         legend: false,
                         labels: true,
                         tooltip: true,
@@ -17049,7 +17108,13 @@ class PageBuilderAgenticAuthoringTurnFlow {
         const contextualExecutableIntent = request
             ? this.toExecutableContextualComponentIntent(intentResolution, request)
             : null;
-        if (!backendCanApply && contextualExecutableIntent && request && prompt) {
+        if (!backendCanApply
+            && contextualExecutableIntent
+            && request
+            && prompt
+            && (!this.hasCanonicalSemanticDecision(request)
+                && !this.hasStructuredContinuationAction(request)
+                || this.hasMaterializablePreview(preview))) {
             return this.completeExecutableStreamPreview(request, prompt, contextualExecutableIntent, preview, preparedContextHints);
         }
         if (!canApply) {
@@ -17105,7 +17170,10 @@ class PageBuilderAgenticAuthoringTurnFlow {
                     || (!!prompt && this.shouldAutoGenerateGuidedPreview(intentResolution, quickReplies, prompt)))
                 && !this.hasBlockingResourceQuickReply(quickReplies)
                 && request
-                && prompt) {
+                && prompt
+                && (!this.hasCanonicalSemanticDecision(request)
+                    && !this.hasStructuredContinuationAction(request)
+                    || this.hasMaterializablePreview(preview))) {
                 return this.completeExecutableStreamPreview(request, prompt, intentResolution, preview, preparedContextHints);
             }
             const requiresChoice = quickReplies.length > 0 && !this.isConsultativeCatalogIntent(intentResolution);
@@ -18004,7 +18072,7 @@ class PageBuilderAgenticAuthoringTurnFlow {
             return status;
         }
         const suffix = this.context
-            .tx('agentic.dashboardQuality.degraded', 'Dashboard created with quality warnings: {warnings}. Review diagnostics before saving.')
+            .tx('agentic.dashboardQuality.degraded', 'A prévia está pronta para revisão. Antes de salvar, recomendo completar: {warnings}. Você pode pedir esse ajuste agora pelas ações sugeridas.')
             .replace('{warnings}', labels.join(', '));
         const normalized = status.trim();
         return normalized ? `${normalized} ${suffix}` : suffix;
@@ -18486,6 +18554,15 @@ class PageBuilderAgenticAuthoringTurnFlow {
         return this.shouldFallbackFromTurnStreamError(error)
             && this.isGovernedSemanticDecisionRequest(request, prompt);
     }
+    hasCanonicalSemanticDecision(request) {
+        return this.toJsonObject(request.activeSemanticDecision) !== null;
+    }
+    hasStructuredContinuationAction(request) {
+        const action = this.toJsonObject(request.action);
+        return action !== null
+            && !!this.readString(action, 'id')
+            && !!this.readString(action, 'kind');
+    }
     isGovernedSemanticDecisionRequest(request, prompt) {
         const contextHints = this.buildContextHints(request);
         const domainCatalog = this.toJsonObject(contextHints?.['domainCatalog']);
@@ -19329,8 +19406,10 @@ class PageBuilderAgenticAuthoringTurnFlow {
             description: reply.description,
             icon: reply.icon,
             tone: reply.tone,
-            presentation: null,
+            presentation: this.toJsonObject(reply.presentation)
+                ?? this.toJsonObject(this.toJsonObject(reply.contextHints)?.['presentation']),
             contextHints: this.toJsonObject(reply.contextHints),
+            canonicalAction: this.toJsonObject(reply.canonicalAction),
             semanticDecision: this.toJsonObject(reply.semanticDecision),
             value: reply.value,
         }));
@@ -20065,7 +20144,7 @@ function projectKnowledgeTarget(changeSet, conceptKey) {
     };
 }
 
-const AGENTIC_AUTHORING_TURN_INACTIVITY_TIMEOUT_MS = 90_000;
+const AGENTIC_AUTHORING_TURN_INACTIVITY_TIMEOUT_MS = 180_000;
 const AGENTIC_PAGE_COMPOSITION_REQUEST_OUTPUT = 'agenticPageCompositionRequested';
 class DynamicPageBuilderComponent {
     dialog;
@@ -20168,6 +20247,7 @@ class DynamicPageBuilderComponent {
     }), ...(ngDevMode ? [{ debugName: "agenticAuthoringPanelLayout" }] : /* istanbul ignore next */ []));
     previewMode = false;
     runtimePreviewPageCache;
+    runtimeAuthoringPageCache;
     agenticComponentCapabilities;
     agenticComponentCapabilitiesPromise;
     agenticTurnController;
@@ -20241,7 +20321,12 @@ class DynamicPageBuilderComponent {
     runtimePage() {
         const page = this.currentPage();
         if (!this.previewMode) {
-            return page;
+            if (this.runtimeAuthoringPageCache?.source === page) {
+                return this.runtimeAuthoringPageCache.value;
+            }
+            const value = this.toAuthoringRuntimePage(page);
+            this.runtimeAuthoringPageCache = { source: page, value };
+            return value;
         }
         if (this.runtimePreviewPageCache?.source === page) {
             return this.runtimePreviewPageCache.value;
@@ -21562,6 +21647,9 @@ class DynamicPageBuilderComponent {
             return;
         }
         const contextHints = reply.contextHints ? { ...reply.contextHints } : undefined;
+        const canonicalAction = reply.canonicalAction
+            ? { ...reply.canonicalAction }
+            : undefined;
         const activeSemanticDecision = reply.semanticDecision
             ? { ...reply.semanticDecision }
             : undefined;
@@ -21600,8 +21688,12 @@ class DynamicPageBuilderComponent {
                 id: reply.id,
                 value: this.cloneValue(reply.value ?? reply.prompt),
                 displayPrompt: visiblePrompt,
-                contextHints: activeSemanticDecision
-                    ? { ...(contextHints ?? {}), semanticDecision: activeSemanticDecision }
+                contextHints: canonicalAction || activeSemanticDecision
+                    ? {
+                        ...(contextHints ?? {}),
+                        ...(canonicalAction ? { canonicalAction } : {}),
+                        ...(activeSemanticDecision ? { semanticDecision: activeSemanticDecision } : {}),
+                    }
                     : contextHints,
                 activeSemanticDecision,
             });
@@ -22875,6 +22967,26 @@ class DynamicPageBuilderComponent {
         cloned.widgets = (cloned.widgets || []).map((widget) => this.toPresentationRuntimeWidget(widget));
         return cloned;
     }
+    toAuthoringRuntimePage(page) {
+        const cloned = this.clonePage(page);
+        cloned.widgets = (cloned.widgets || []).map((widget) => {
+            const metadata = this.componentMetadata.get(widget.definition?.id);
+            if (!metadata?.inputs?.some((input) => input.name === 'enableCustomization')) {
+                return widget;
+            }
+            return {
+                ...widget,
+                definition: {
+                    ...widget.definition,
+                    inputs: {
+                        ...(widget.definition?.inputs || {}),
+                        enableCustomization: true,
+                    },
+                },
+            };
+        });
+        return cloned;
+    }
     toPresentationRuntimeWidget(widget) {
         const inputs = widget.definition?.inputs;
         if (!inputs || inputs['enableCustomization'] !== true) {