@praxisui/table-rule-builder 8.0.0-beta.9 → 8.0.0-beta.91

package/README.md

@@ -31,6 +31,44 @@ Peers (Angular v20): `@angular/core`, `@angular/common`, `@angular/forms`, `@ang
 - Contrato runtime atual: animação é suportada em `rowConditionalRenderers` e `columns[].conditionalRenderers` (com precedência `rule.animation > rule.renderer.animation` e first-match por efeito real).
 - Tipos: `RuleEffectDefinition`, `RuleScope`
 
+## Conditional effects alignment
+
+`RuleEffectsPanelComponent` edits one aggregate `RuleEffectDefinition` because a visual rule can combine style, layout, icon, background, animation and tooltip in a single authoring surface.
+
+When the panel is embedded by `@praxisui/table`, the table rule entry stores the visual payload as `effects: RuleEffectDefinition[]`. That keeps the persisted rule aligned with the platform shape `PraxisRuntimeConditionalEffectRule<RuleEffectDefinition>` while preserving `@praxisui/table` as the owner of table placement into `rowConditionalRenderers`, `columns[].conditionalRenderers` and conditional style surfaces.
+
+Existing singular `effects: RuleEffectDefinition` payloads are accepted on load and normalized back to the canonical array on apply.
+
 ## Testes
 
 - Target oficial no workspace: `ng test praxis-table-rule-builder --watch=false --browsers=ChromeHeadless`
+
+## Agentic Authoring Contract
+
+`PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST` is the governed AI contract for this package and is exported from the public API.
+
+The manifest owns only table rule visual effects:
+
+- rule identity and condition/effect attachment
+- supported effect categories from `EffectRegistryService`
+- built-in `DEFAULT_EFFECT_PRESETS`
+- semantic animation presets and aliases
+- fail-closed conversion through `toCellClassAndStyle(...)`
+
+It does not own table column, datasource, renderer placement or `TableConfigV2` semantics. Those changes must delegate to the `praxis-table` authoring manifest.
+Operations that mutate the effect panel write canonical runtime surfaces: `RuleEffectDefinition`, `RuleEffectDefinition.animation`, `RuleEffectsPanelComponent.effectsForm`, `valueChange` and explicit `delegatedAuthoringOperations`.
+The contract does not persist a local `ruleEffects.rules` tree.
+
+Governed operation families:
+
+- `rule.add`
+- `rule.remove`
+- `condition.set`
+- `effect.add`
+- `effect.update`
+- `effect.remove`
+- `preset.apply`
+- `animation.set`
+- `tableIntegration.delegate`
+
+Stable identities are `ruleId`, `effectId` and `presetKey`; array indexes are not canonical identities. Destructive rule/effect removal requires explicit confirmation.

package/fesm2022/praxisui-table-rule-builder.mjs

@@ -22,6 +22,7 @@ import * as i4 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i6 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
+import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
 
 const RULE_ANIMATION_TYPE_SET = new Set([
     'pulse',
@@ -237,18 +238,30 @@ class EstiloEditorComponent {
     group;
     // Public for template (strictTemplates): used by mat-slider
     formatOpacity(v) { return (v ?? 0).toFixed(2); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: EstiloEditorComponent, isStandalone: true, selector: "praxis-effects-estilo-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: EstiloEditorComponent, isStandalone: true, selector: "praxis-effects-estilo-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
-      <mat-form-field appearance="outline">
-        <mat-label>Cor do texto</mat-label>
-        <input matInput type="text" formControlName="color" placeholder="#E7ECF6" />
-      </mat-form-field>
+      <pdx-color-picker
+        label="Cor do texto"
+        formControlName="color"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
-      <mat-form-field appearance="outline">
-        <mat-label>Cor de fundo do texto</mat-label>
-        <input matInput type="text" formControlName="bgColor" placeholder="#122033" />
-      </mat-form-field>
+      <pdx-color-picker
+        label="Cor de fundo do texto"
+        formControlName="bgColor"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
       <div class="toggles">
         <mat-button-toggle-group multiple>
@@ -289,29 +302,41 @@ class EstiloEditorComponent {
         </label>
       </div>
     </div>
-  `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.toggles{display:flex;align-items:center;gap:8px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.toggles{display:flex;align-items:center;gap:8px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EstiloEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-estilo-editor', standalone: true, imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatInputModule,
                         MatButtonToggleModule,
                         MatIconModule,
                         MatSliderModule,
+                        PdxColorPickerComponent
                     ], template: `
     <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
-      <mat-form-field appearance="outline">
-        <mat-label>Cor do texto</mat-label>
-        <input matInput type="text" formControlName="color" placeholder="#E7ECF6" />
-      </mat-form-field>
+      <pdx-color-picker
+        label="Cor do texto"
+        formControlName="color"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
-      <mat-form-field appearance="outline">
-        <mat-label>Cor de fundo do texto</mat-label>
-        <input matInput type="text" formControlName="bgColor" placeholder="#122033" />
-      </mat-form-field>
+      <pdx-color-picker
+        label="Cor de fundo do texto"
+        formControlName="bgColor"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
       <div class="toggles">
         <mat-button-toggle-group multiple>
@@ -359,8 +384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class LayoutEditorComponent {
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: LayoutEditorComponent, isStandalone: true, selector: "praxis-effects-layout-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: LayoutEditorComponent, isStandalone: true, selector: "praxis-effects-layout-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
       <div class="borders">
         <span class="lbl">Borda</span>
@@ -401,11 +426,11 @@ class LayoutEditorComponent {
         <input matInput type="number" formControlName="elevation" placeholder="6" />
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.borders,.align{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.borders,.align{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-effects-layout-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
+            args: [{ selector: 'praxis-effects-layout-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
     <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
       <div class="borders">
         <span class="lbl">Borda</span>
@@ -453,8 +478,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class IconeBadgeEditorComponent {
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IconeBadgeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: IconeBadgeEditorComponent, isStandalone: true, selector: "praxis-effects-icone-badge-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: IconeBadgeEditorComponent, isStandalone: true, selector: "praxis-effects-icone-badge-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
       <mat-form-field appearance="outline">
         <mat-label>Ícone (mat-icon)</mat-label>
@@ -492,11 +517,11 @@ class IconeBadgeEditorComponent {
         </mat-button-toggle-group>
       </div>
     </div>
-  `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.pos,.variant{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.pos,.variant{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-effects-icone-badge-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
+            args: [{ selector: 'praxis-effects-icone-badge-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
     <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
       <mat-form-field appearance="outline">
         <mat-label>Ícone (mat-icon)</mat-label>
@@ -541,8 +566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class FundoEditorComponent {
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FundoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: FundoEditorComponent, isStandalone: true, selector: "praxis-effects-fundo-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: FundoEditorComponent, isStandalone: true, selector: "praxis-effects-fundo-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
       <mat-form-field appearance="outline">
         <mat-label>Cor</mat-label>
@@ -566,11 +591,11 @@ class FundoEditorComponent {
         </mat-slider>
       </label>
     </div>
-  `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FundoEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-effects-fundo-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSliderModule], template: `
+            args: [{ selector: 'praxis-effects-fundo-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSliderModule], template: `
     <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
       <mat-form-field appearance="outline">
         <mat-label>Cor</mat-label>
@@ -601,8 +626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class AnimacaoEditorComponent {
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AnimacaoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AnimacaoEditorComponent, isStandalone: true, selector: "praxis-effects-animacao-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AnimacaoEditorComponent, isStandalone: true, selector: "praxis-effects-animacao-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
       <label class="anim-toggle">
         <input type="checkbox" formControlName="enabled" />
@@ -677,11 +702,11 @@ class AnimacaoEditorComponent {
         </select>
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
+            args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
     <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
       <label class="anim-toggle">
         <input type="checkbox" formControlName="enabled" />
@@ -763,8 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class TooltipEditorComponent {
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TooltipEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TooltipEditorComponent, isStandalone: true, selector: "praxis-effects-tooltip-editor", inputs: { group: "group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: TooltipEditorComponent, isStandalone: true, selector: "praxis-effects-tooltip-editor", inputs: { group: "group" }, ngImport: i0, template: `
     <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
       <mat-form-field appearance="outline" class="full">
         <mat-label>Texto</mat-label>
@@ -788,11 +813,11 @@ class TooltipEditorComponent {
         <input matInput type="number" formControlName="delayMs" placeholder="300" />
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TooltipEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
+            args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
     <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
       <mat-form-field appearance="outline" class="full">
         <mat-label>Texto</mat-label>
@@ -832,10 +857,10 @@ class EffectRegistryService {
     list() {
         return this.plugins.slice();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EffectRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EffectRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EffectRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EffectRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EffectRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EffectRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1183,10 +1208,10 @@ class RuleEffectsPanelComponent {
         const parsed = Number(value);
         return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i1.FormBuilder }, { token: EffectRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, ngImport: i0, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n  >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  <section class=\"rulefx__quickbar\" aria-live=\"polite\" *ngIf=\"effectsForm\">\n    <ng-container [ngSwitch]=\"activeTab\">\n      <ng-container *ngSwitchCase=\"'estilo'\">\n        <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'layout'\">\n        <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icone'\">\n        <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'fundo'\">\n        <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'animacao'\">\n        <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'tooltip'\">\n        <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n      </ng-container>\n    </ng-container>\n  </section>\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n      >\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.badgeText\"\n          class=\"preview__badge\"\n          [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n        >\n          {{ formValue.iconBadge?.badgeText }}\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i1.FormBuilder }, { token: EffectRegistryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, ngImport: i0, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-rule-effects-panel', standalone: true, imports: [
                         CommonModule,
@@ -1204,7 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         FundoEditorComponent,
                         AnimacaoEditorComponent,
                         TooltipEditorComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n  >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n    >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  <section class=\"rulefx__quickbar\" aria-live=\"polite\" *ngIf=\"effectsForm\">\n    <ng-container [ngSwitch]=\"activeTab\">\n      <ng-container *ngSwitchCase=\"'estilo'\">\n        <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'layout'\">\n        <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icone'\">\n        <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'fundo'\">\n        <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'animacao'\">\n        <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'tooltip'\">\n        <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n      </ng-container>\n    </ng-container>\n  </section>\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n      >\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.badgeText\"\n          class=\"preview__badge\"\n          [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n        >\n          {{ formValue.iconBadge?.badgeText }}\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: EffectRegistryService }], propDecorators: { scope: [{
                 type: Input
             }], value: [{
@@ -1306,8 +1331,408 @@ function toCellClassAndStyle(effect, options) {
     return { classList, style };
 }
 
+const ruleAddSchema = {
+    type: 'object',
+    required: ['ruleId', 'scope'],
+    properties: {
+        ruleId: { type: 'string' },
+        scope: { enum: ['cell', 'row', 'column', 'table'] },
+        columnKey: { type: 'string' },
+        condition: { type: 'object' },
+        effect: { type: 'object' },
+        insertAfterRuleId: { type: 'string' },
+    },
+};
+const ruleRemoveSchema = {
+    type: 'object',
+    required: ['ruleId'],
+    properties: {
+        ruleId: { type: 'string' },
+        removeEffects: { type: 'boolean' },
+        preserveCondition: { type: 'boolean' },
+    },
+};
+const conditionSetSchema = {
+    type: 'object',
+    required: ['ruleId', 'condition'],
+    properties: {
+        ruleId: { type: 'string' },
+        condition: { type: 'object' },
+        scope: { enum: ['cell', 'row', 'column', 'table'] },
+        columnKey: { type: 'string' },
+        mode: { enum: ['replace', 'merge'] },
+    },
+};
+const effectAddSchema = {
+    type: 'object',
+    required: ['ruleId', 'effectId', 'effectType'],
+    properties: {
+        ruleId: { type: 'string' },
+        effectId: { type: 'string' },
+        effectType: {
+            enum: ['estilo', 'layout', 'icone', 'fundo', 'animacao', 'tooltip'],
+        },
+        payload: { type: 'object' },
+    },
+};
+const effectUpdateSchema = {
+    type: 'object',
+    required: ['ruleId', 'effectId', 'payload'],
+    properties: {
+        ruleId: { type: 'string' },
+        effectId: { type: 'string' },
+        payload: { type: 'object' },
+        mode: { enum: ['replace', 'merge'] },
+    },
+};
+const effectRemoveSchema = {
+    type: 'object',
+    required: ['ruleId', 'effectId'],
+    properties: {
+        ruleId: { type: 'string' },
+        effectId: { type: 'string' },
+        removeEmptyRule: { type: 'boolean' },
+    },
+};
+const presetApplySchema = {
+    type: 'object',
+    required: ['ruleId', 'presetKey'],
+    properties: {
+        ruleId: { type: 'string' },
+        presetKey: { enum: ['aprovado', 'alerta', 'erro', 'info'] },
+        scope: { enum: ['cell', 'row', 'column', 'table'] },
+        mergeWithExisting: { type: 'boolean' },
+    },
+};
+const animationSetSchema = {
+    type: 'object',
+    required: ['ruleId', 'animation'],
+    properties: {
+        ruleId: { type: 'string' },
+        effectId: { type: 'string' },
+        animation: {
+            type: 'object',
+            properties: {
+                enabled: { type: 'boolean' },
+                preset: {
+                    enum: [
+                        'info-soft',
+                        'success-confirm',
+                        'warning-attention',
+                        'critical-alert',
+                        'audit-review',
+                        'sync-pending',
+                        'sla-warning',
+                        'sla-breach',
+                        'risk-elevated',
+                        'risk-critical',
+                        'audit-warning',
+                        'sync-warning',
+                    ],
+                },
+                type: { enum: ['pulse', 'blink', 'grow', 'fade', 'slide-in', 'border-pulse'] },
+                trigger: {
+                    enum: [
+                        'onChange',
+                        'onAppear',
+                        'onHover',
+                        'onConditionEnter',
+                        'onConditionExit',
+                        'onDataRefresh',
+                    ],
+                },
+                repeat: {},
+                durationMs: { type: 'number' },
+                delayMs: { type: 'number' },
+                intensity: { enum: ['subtle', 'normal', 'strong'] },
+            },
+        },
+    },
+};
+const tableDelegateSchema = {
+    type: 'object',
+    required: ['tableOperationId', 'reason'],
+    properties: {
+        tableOperationId: { type: 'string' },
+        reason: { type: 'string' },
+        tableTarget: { type: 'object' },
+        tableParams: { type: 'object' },
+    },
+};
+const PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST = {
+    schemaVersion: '1.0.0',
+    componentId: 'praxis-table-rule-builder',
+    ownerPackage: '@praxisui/table-rule-builder',
+    configSchemaId: 'RuleEffectDefinition',
+    manifestVersion: '1.0.0',
+    runtimeInputs: [
+        { name: 'scope', type: 'RuleScope', description: 'Effect scope: cell, row, column or table.' },
+        { name: 'value', type: 'RuleEffectDefinition | undefined', description: 'Initial effect definition hydrated into the panel form.' },
+        { name: 'valueChange', type: 'RuleEffectDefinition', description: 'Debounced normalized effect payload emitted by the editor.' },
+        { name: 'apply', type: 'void', description: 'Emitted when the user applies the current effect payload.' },
+        { name: 'reset', type: 'void', description: 'Emitted when the user resets the panel form.' },
+    ],
+    editableTargets: [
+        { kind: 'rule', resolver: 'table-rule-by-stable-id', description: 'Table conditional rule entry keyed by stable rule id before it is passed to praxis-table.' },
+        { kind: 'condition', resolver: 'table-rule-condition-by-rule-id', description: 'Structured condition payload evaluated against table row/column context.' },
+        { kind: 'effect', resolver: 'rule-effect-by-rule-and-effect-id', description: 'Visual effect payload inside a rule, mapped to RuleEffectDefinition.' },
+        { kind: 'preset', resolver: 'default-effect-preset-by-key', description: 'Built-in semantic effect preset from DEFAULT_EFFECT_PRESETS.' },
+        { kind: 'animation', resolver: 'rule-animation-by-rule-and-effect-id', description: 'Animation preset, alias or override resolved through animation-presets.' },
+        { kind: 'tableDelegation', resolver: 'praxis-table-authoring-operation', description: 'Explicit delegation boundary for table-owned configuration changes.' },
+    ],
+    operations: [
+        {
+            operationId: 'rule.add',
+            title: 'Add table visual rule',
+            scope: 'rule',
+            targetKind: 'rule',
+            target: { kind: 'rule', resolver: 'table-rule-by-stable-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: ruleAddSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-rule-add', handlerContract: {
+                        reads: ['RuleEffectsPanelComponent.scope', 'RuleEffectDefinition', 'praxis-table rowConditionalRenderers', 'praxis-table columns[].conditionalRenderers'],
+                        writes: ['delegatedAuthoringOperations', 'RuleEffectDefinition'],
+                        identityKeys: ['ruleId'],
+                        inputSchema: ruleAddSchema,
+                        failureModes: ['duplicate-rule-id', 'unsupported-scope', 'column-not-found', 'condition-invalid', 'effect-registry-miss'],
+                        description: 'Creates a stable table visual rule and keeps table-owned renderer placement delegated to praxis-table.',
+                    } }],
+            validators: ['rule-id-unique', 'scope-supported', 'condition-table-context-valid', 'effect-registry-supported', 'table-owned-config-delegated'],
+            affectedPaths: ['delegatedAuthoringOperations', 'RuleEffectDefinition'],
+            submissionImpact: 'config-only',
+            preconditions: ['rule-effects-panel-loaded', 'table-authoring-context-known'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'rule.remove',
+            title: 'Remove table visual rule',
+            scope: 'rule',
+            targetKind: 'rule',
+            target: { kind: 'rule', resolver: 'table-rule-by-stable-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: ruleRemoveSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-rule-remove', handlerContract: {
+                        reads: ['ruleEffects.rules', 'ruleEffects.rules[].effect', 'ruleEffects.rules[].condition'],
+                        writes: ['delegatedAuthoringOperations'],
+                        identityKeys: ['ruleId'],
+                        inputSchema: ruleRemoveSchema,
+                        failureModes: ['rule-not-found', 'destructive-removal-not-confirmed', 'orphaned-table-renderer', 'condition-preserve-not-supported'],
+                        description: 'Removes a governed visual rule by id with confirmation because conditions and effects can be lost.',
+                    } }],
+            destructive: true,
+            requiresConfirmation: true,
+            validators: ['rule-exists', 'destructive-removal-confirmed', 'table-renderer-references-clean', 'table-owned-config-delegated'],
+            affectedPaths: ['delegatedAuthoringOperations'],
+            submissionImpact: 'config-only',
+            preconditions: ['rule-effects-panel-loaded', 'explicit-confirmation-provided'],
+        },
+        {
+            operationId: 'condition.set',
+            title: 'Set table rule condition',
+            scope: 'rule',
+            targetKind: 'condition',
+            target: { kind: 'condition', resolver: 'table-rule-condition-by-rule-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: conditionSetSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-condition-set', handlerContract: {
+                        reads: ['ruleEffects.rules', 'praxis-table dataSource fields', 'praxis-table columns'],
+                        writes: ['delegatedAuthoringOperations'],
+                        identityKeys: ['ruleId'],
+                        inputSchema: conditionSetSchema,
+                        failureModes: ['rule-not-found', 'condition-invalid', 'field-not-in-table-context', 'column-not-found'],
+                        description: 'Applies a structured table row/column condition without creating a parallel table DSL.',
+                    } }],
+            validators: ['rule-exists', 'condition-table-context-valid', 'condition-fields-known', 'condition-operators-supported'],
+            affectedPaths: ['delegatedAuthoringOperations'],
+            submissionImpact: 'config-only',
+            preconditions: ['rule-effects-panel-loaded', 'table-authoring-context-known'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'effect.add',
+            title: 'Add visual effect to rule',
+            scope: 'skin',
+            targetKind: 'effect',
+            target: { kind: 'effect', resolver: 'rule-effect-by-rule-and-effect-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: effectAddSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-effect-add', handlerContract: {
+                        reads: ['EffectRegistryService.list', 'RuleEffectDefinition', 'toCellClassAndStyle'],
+                        writes: ['RuleEffectDefinition'],
+                        identityKeys: ['ruleId', 'effectId'],
+                        inputSchema: effectAddSchema,
+                        failureModes: ['rule-not-found', 'duplicate-effect-id', 'unsupported-effect-type', 'unsafe-style-value'],
+                        description: 'Adds a governed visual effect whose type is backed by the effect registry and RuleEffectDefinition.',
+                    } }],
+            validators: ['rule-exists', 'effect-id-unique', 'effect-registry-supported', 'style-values-safe', 'preview-class-not-persisted'],
+            affectedPaths: ['RuleEffectDefinition'],
+            submissionImpact: 'visual-only',
+            preconditions: ['rule-effects-panel-loaded', 'effect-registry-initialized'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'effect.update',
+            title: 'Update visual effect payload',
+            scope: 'skin',
+            targetKind: 'effect',
+            target: { kind: 'effect', resolver: 'rule-effect-by-rule-and-effect-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: effectUpdateSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-effect-update', handlerContract: {
+                        reads: ['ruleEffects.rules[].effect', 'EffectRegistryService.list', 'toCellClassAndStyle'],
+                        writes: ['RuleEffectDefinition'],
+                        identityKeys: ['ruleId', 'effectId'],
+                        inputSchema: effectUpdateSchema,
+                        failureModes: ['rule-not-found', 'effect-not-found', 'unsupported-effect-type', 'unsafe-style-value'],
+                        description: 'Updates a visual effect payload while preserving its stable effect id and registry-backed type.',
+                    } }],
+            validators: ['rule-exists', 'effect-exists', 'effect-registry-supported', 'style-values-safe', 'runtime-effect-compilable'],
+            affectedPaths: ['RuleEffectDefinition'],
+            submissionImpact: 'visual-only',
+            preconditions: ['rule-effects-panel-loaded', 'effect-registry-initialized'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'effect.remove',
+            title: 'Remove visual effect from rule',
+            scope: 'skin',
+            targetKind: 'effect',
+            target: { kind: 'effect', resolver: 'rule-effect-by-rule-and-effect-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: effectRemoveSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-effect-remove', handlerContract: {
+                        reads: ['ruleEffects.rules', 'ruleEffects.rules[].effect'],
+                        writes: ['RuleEffectDefinition', 'delegatedAuthoringOperations'],
+                        identityKeys: ['ruleId', 'effectId'],
+                        inputSchema: effectRemoveSchema,
+                        failureModes: ['rule-not-found', 'effect-not-found', 'destructive-removal-not-confirmed', 'empty-rule-created'],
+                        description: 'Removes one visual effect and optionally removes the empty rule, requiring confirmation for destructive cleanup.',
+                    } }],
+            destructive: true,
+            requiresConfirmation: true,
+            validators: ['rule-exists', 'effect-exists', 'destructive-removal-confirmed', 'empty-rule-policy-valid'],
+            affectedPaths: ['RuleEffectDefinition', 'delegatedAuthoringOperations'],
+            submissionImpact: 'visual-only',
+            preconditions: ['rule-effects-panel-loaded', 'explicit-confirmation-provided'],
+        },
+        {
+            operationId: 'preset.apply',
+            title: 'Apply semantic effect preset',
+            scope: 'skin',
+            targetKind: 'preset',
+            target: { kind: 'preset', resolver: 'default-effect-preset-by-key', ambiguityPolicy: 'fail', required: true },
+            inputSchema: presetApplySchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-preset-apply', handlerContract: {
+                        reads: ['DEFAULT_EFFECT_PRESETS', 'RuleEffectsPanelComponent.applyPreset', 'RuleEffectDefinition'],
+                        writes: ['RuleEffectDefinition', 'RuleEffectsPanelComponent.effectsForm', 'valueChange'],
+                        identityKeys: ['ruleId', 'presetKey'],
+                        inputSchema: presetApplySchema,
+                        failureModes: ['rule-not-found', 'preset-not-found', 'scope-override-invalid', 'preset-effect-not-compilable'],
+                        description: 'Applies a built-in semantic preset and normalizes its scope through the rule effects panel.',
+                    } }],
+            validators: ['rule-exists', 'preset-key-known', 'preset-effect-compilable', 'scope-supported'],
+            affectedPaths: ['RuleEffectDefinition', 'RuleEffectsPanelComponent.effectsForm', 'valueChange'],
+            submissionImpact: 'visual-only',
+            preconditions: ['rule-effects-panel-loaded', 'default-presets-loaded'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'animation.set',
+            title: 'Set rule animation',
+            scope: 'skin',
+            targetKind: 'animation',
+            target: { kind: 'animation', resolver: 'rule-animation-by-rule-and-effect-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: animationSetSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-animation-set', handlerContract: {
+                        reads: ['RULE_ANIMATION_PRESETS', 'RULE_ANIMATION_PRESET_ALIASES', 'resolveRuleAnimationConfig', 'RuleEffectDefinition.animation'],
+                        writes: ['RuleEffectDefinition.animation', 'RuleEffectsPanelComponent.effectsForm.animation', 'valueChange'],
+                        identityKeys: ['ruleId', 'effectId'],
+                        inputSchema: animationSetSchema,
+                        failureModes: ['rule-not-found', 'effect-not-found', 'animation-preset-unknown', 'animation-override-invalid', 'reduced-motion-policy-violated'],
+                        description: 'Sets a semantic animation preset or override that resolves fail-closed through the animation preset catalog.',
+                    } }],
+            validators: ['rule-exists', 'animation-preset-known', 'animation-alias-known', 'animation-override-valid', 'animation-runtime-supported'],
+            affectedPaths: ['RuleEffectDefinition.animation', 'RuleEffectsPanelComponent.effectsForm.animation', 'valueChange'],
+            submissionImpact: 'visual-only',
+            preconditions: ['rule-effects-panel-loaded', 'animation-presets-loaded'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+        {
+            operationId: 'tableIntegration.delegate',
+            title: 'Delegate table-owned configuration',
+            scope: 'global',
+            targetKind: 'tableDelegation',
+            target: { kind: 'tableDelegation', resolver: 'praxis-table-authoring-operation', ambiguityPolicy: 'fail', required: false },
+            inputSchema: tableDelegateSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'table-rule-builder-table-delegate', handlerContract: {
+                        reads: ['PRAXIS_TABLE_AUTHORING_MANIFEST', 'TableConfigV2', 'tableOperationId'],
+                        writes: ['delegatedAuthoringOperations'],
+                        identityKeys: ['tableOperationId'],
+                        inputSchema: tableDelegateSchema,
+                        failureModes: ['table-operation-not-found', 'table-target-invalid', 'attempted-local-table-config-write'],
+                        description: 'Records that table-owned config such as renderer placement, columns, ordering or data binding must route through praxis-table.',
+                    } }],
+            validators: ['table-manifest-operation-known', 'table-target-valid', 'no-local-table-config-write', 'table-owned-config-delegated'],
+            affectedPaths: ['delegatedAuthoringOperations'],
+            submissionImpact: 'none',
+            preconditions: ['praxis-table-manifest-available'],
+            destructive: false,
+            requiresConfirmation: false,
+        },
+    ],
+    validators: [
+        { validatorId: 'rule-id-unique', level: 'error', code: 'TABLE_RULE_ID_UNIQUE', description: 'Rule ids must be unique and stable.' },
+        { validatorId: 'scope-supported', level: 'error', code: 'TABLE_RULE_SCOPE_SUPPORTED', description: 'Rule scope must be one of cell, row, column or table.' },
+        { validatorId: 'condition-table-context-valid', level: 'error', code: 'TABLE_RULE_CONDITION_CONTEXT_VALID', description: 'Conditions must reference valid table row or column context.' },
+        { validatorId: 'effect-registry-supported', level: 'error', code: 'TABLE_RULE_EFFECT_REGISTRY_SUPPORTED', description: 'Effects must be backed by EffectRegistryService editor categories.' },
+        { validatorId: 'table-owned-config-delegated', level: 'error', code: 'TABLE_RULE_TABLE_CONFIG_DELEGATED', description: 'Table-owned configuration changes must delegate to praxis-table.' },
+        { validatorId: 'rule-exists', level: 'error', code: 'TABLE_RULE_EXISTS', description: 'The targeted rule must exist.' },
+        { validatorId: 'destructive-removal-confirmed', level: 'error', code: 'TABLE_RULE_DESTRUCTIVE_CONFIRMED', description: 'Destructive rule or effect removal requires explicit confirmation.' },
+        { validatorId: 'table-renderer-references-clean', level: 'error', code: 'TABLE_RULE_RENDERER_REFERENCES_CLEAN', description: 'Removing a rule must not leave stale table renderer references.' },
+        { validatorId: 'condition-fields-known', level: 'error', code: 'TABLE_RULE_CONDITION_FIELDS_KNOWN', description: 'Condition fields must exist in table row data or column metadata.' },
+        { validatorId: 'condition-operators-supported', level: 'error', code: 'TABLE_RULE_CONDITION_OPERATORS_SUPPORTED', description: 'Condition operators must be supported by table rule semantics.' },
+        { validatorId: 'effect-id-unique', level: 'error', code: 'TABLE_RULE_EFFECT_ID_UNIQUE', description: 'Effect ids must be unique within a rule.' },
+        { validatorId: 'style-values-safe', level: 'error', code: 'TABLE_RULE_STYLE_VALUES_SAFE', description: 'CSS class and style values must be safe for runtime rendering.' },
+        { validatorId: 'preview-class-not-persisted', level: 'error', code: 'TABLE_RULE_PREVIEW_CLASS_NOT_PERSISTED', description: 'Preview-only animation classes must not leak into persisted payload mapping.' },
+        { validatorId: 'effect-exists', level: 'error', code: 'TABLE_RULE_EFFECT_EXISTS', description: 'The targeted effect must exist.' },
+        { validatorId: 'runtime-effect-compilable', level: 'error', code: 'TABLE_RULE_RUNTIME_EFFECT_COMPILABLE', description: 'Effect payload must compile through toCellClassAndStyle or table renderer semantics.' },
+        { validatorId: 'empty-rule-policy-valid', level: 'warning', code: 'TABLE_RULE_EMPTY_RULE_POLICY_VALID', description: 'Removing the last effect must follow the requested empty-rule policy.' },
+        { validatorId: 'preset-key-known', level: 'error', code: 'TABLE_RULE_PRESET_KEY_KNOWN', description: 'Preset key must exist in DEFAULT_EFFECT_PRESETS.' },
+        { validatorId: 'preset-effect-compilable', level: 'error', code: 'TABLE_RULE_PRESET_EFFECT_COMPILABLE', description: 'Preset payload must compile to RuleEffectDefinition.' },
+        { validatorId: 'animation-preset-known', level: 'error', code: 'TABLE_RULE_ANIMATION_PRESET_KNOWN', description: 'Animation preset must be canonical or explicitly aliased.' },
+        { validatorId: 'animation-alias-known', level: 'error', code: 'TABLE_RULE_ANIMATION_ALIAS_KNOWN', description: 'Animation aliases must resolve to canonical presets.' },
+        { validatorId: 'animation-override-valid', level: 'error', code: 'TABLE_RULE_ANIMATION_OVERRIDE_VALID', description: 'Animation overrides must normalize to supported type, trigger, repeat and intensity values.' },
+        { validatorId: 'animation-runtime-supported', level: 'error', code: 'TABLE_RULE_ANIMATION_RUNTIME_SUPPORTED', description: 'Animation payload must be supported by row and column conditional renderers.' },
+        { validatorId: 'table-manifest-operation-known', level: 'error', code: 'TABLE_RULE_TABLE_OPERATION_KNOWN', description: 'Delegated table operation must exist in the praxis-table authoring manifest.' },
+        { validatorId: 'table-target-valid', level: 'error', code: 'TABLE_RULE_TABLE_TARGET_VALID', description: 'Delegated table target must be resolvable by praxis-table.' },
+        { validatorId: 'no-local-table-config-write', level: 'error', code: 'TABLE_RULE_NO_LOCAL_TABLE_CONFIG_WRITE', description: 'Rule builder operations must not write TableConfig directly.' },
+    ],
+    roundTripRequirements: [
+        'RuleEffectDefinition is the local source of truth for the effects panel.',
+        'Rules that affect rowConditionalRenderers or columns[].conditionalRenderers must delegate table-owned placement to praxis-table.',
+        'Rule and effect identity must use stable ruleId/effectId keys; array indexes are not canonical identities.',
+        'Animation presets and aliases must resolve through RULE_ANIMATION_PRESETS and RULE_ANIMATION_PRESET_ALIASES before persistence.',
+        'Preview-only animation classes must be omitted from persisted table payload mapping by using includeAnimationPreview: false.',
+        'Preset application must preserve the selected scope and emit a normalized RuleEffectDefinition through valueChange.',
+    ],
+    examples: [
+        { id: 'table-rule-add-row-warning', request: 'Add a row warning rule for overdue invoices.', operationId: 'rule.add', target: 'rule:overdue-warning', params: { ruleId: 'overdue-warning', scope: 'row', condition: { field: 'dueDate', operator: 'beforeToday' }, effect: { background: { color: 'rgba(255,193,7,0.12)' } } }, isPositive: true },
+        { id: 'table-rule-remove-obsolete', request: 'Remove the obsolete archived row rule.', operationId: 'rule.remove', target: 'rule:archived-obsolete', params: { ruleId: 'archived-obsolete', removeEffects: true }, isPositive: true },
+        { id: 'table-rule-condition-status-error', request: 'Make the rule apply when status is error.', operationId: 'condition.set', target: 'condition:status-error', params: { ruleId: 'status-error', condition: { field: 'status', operator: 'equals', value: 'error' } }, isPositive: true },
+        { id: 'table-rule-add-badge-effect', request: 'Add a warning badge to the status rule.', operationId: 'effect.add', target: 'effect:status-warning/badge', params: { ruleId: 'status-warning', effectId: 'badge', effectType: 'icone', payload: { icon: 'warning', badgeText: 'Attention' } }, isPositive: true },
+        { id: 'table-rule-update-background', request: 'Change the risk rule background color.', operationId: 'effect.update', target: 'effect:risk/background', params: { ruleId: 'risk', effectId: 'background', payload: { background: { color: 'rgba(239,83,80,0.10)' } }, mode: 'merge' }, isPositive: true },
+        { id: 'table-rule-remove-tooltip', request: 'Remove the tooltip effect from the audit rule.', operationId: 'effect.remove', target: 'effect:audit/tooltip', params: { ruleId: 'audit', effectId: 'tooltip' }, isPositive: true },
+        { id: 'table-rule-apply-alerta', request: 'Use the alerta preset on the SLA rule.', operationId: 'preset.apply', target: 'preset:alerta', params: { ruleId: 'sla', presetKey: 'alerta', scope: 'row', mergeWithExisting: true }, isPositive: true },
+        { id: 'table-rule-animation-critical', request: 'Make the SLA breach animation critical.', operationId: 'animation.set', target: 'animation:sla-breach', params: { ruleId: 'sla-breach', effectId: 'animation', animation: { preset: 'critical-alert' } }, isPositive: true },
+        { id: 'table-rule-delegate-column-renderer', request: 'Move this effect to the status column renderer.', operationId: 'tableIntegration.delegate', target: 'praxis-table:column-renderer', params: { tableOperationId: 'column.conditionalRenderer.set', reason: 'column renderer placement is owned by praxis-table', tableTarget: { columnKey: 'status' } }, isPositive: true },
+        { id: 'table-rule-reject-direct-table-column', request: 'Add a new table column from the rule builder.', operationId: 'tableIntegration.delegate', target: 'praxis-table:column.add', params: { tableOperationId: 'column.add', reason: 'column authoring belongs to praxis-table' }, isPositive: false },
+        { id: 'table-rule-reject-unknown-effect', request: 'Add a sparkle shader effect to rows.', operationId: 'effect.add', target: 'effect:sparkle', params: { ruleId: 'risk', effectId: 'sparkle', effectType: 'shader', payload: {} }, isPositive: false },
+        { id: 'table-rule-reject-unknown-animation', request: 'Use the earthquake animation preset.', operationId: 'animation.set', target: 'animation:earthquake', params: { ruleId: 'risk', effectId: 'animation', animation: { preset: 'earthquake' } }, isPositive: false },
+    ],
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };
+export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@praxisui/table-rule-builder",
-  "version": "8.0.0-beta.9",
+  "version": "8.0.0-beta.91",
   "description": "Praxis Table Rule Builder: UI components and engine utils for table rules",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^20.0.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@praxisui/ai": "^8.0.0-beta.91",
+    "@praxisui/core": "^8.0.0-beta.91",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.91",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -33,14 +37,15 @@
   ],
   "sideEffects": false,
   "module": "fesm2022/praxisui-table-rule-builder.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/praxisui-table-rule-builder.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/praxisui-table-rule-builder.d.ts",
       "default": "./fesm2022/praxisui-table-rule-builder.mjs"
     }
-  }
+  },
+  "type": "module"
 }

package/{index.d.ts → types/praxisui-table-rule-builder.d.ts}

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Subject } from 'rxjs';
+import { ComponentAuthoringManifest } from '@praxisui/core';
 
 type RuleScope = 'cell' | 'row' | 'column' | 'table';
 type RuleAnimationPreset = 'info-soft' | 'success-confirm' | 'warning-attention' | 'critical-alert' | 'audit-review' | 'sync-pending' | 'sla-warning' | 'sla-breach' | 'risk-elevated' | 'risk-critical' | 'audit-warning' | 'sync-warning';
@@ -175,5 +176,7 @@ declare class TooltipEditorComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<TooltipEditorComponent, "praxis-effects-tooltip-editor", never, { "group": { "alias": "group"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };
+declare const PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST: ComponentAuthoringManifest;
+
+export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };
 export type { EffectEditorPlugin, RuleAnimationIntensity, RuleAnimationPreset, RuleAnimationRepeat, RuleAnimationTrigger, RuleAnimationType, RuleEffectDefinition, RuleScope };