@praxisui/page-builder 3.0.0-beta.3 → 3.0.0-beta.5

package/fesm2022/praxisui-page-builder.mjs

@@ -19,7 +19,7 @@ import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, FormGroup, FormArray, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i9 from '@angular/material/select';
+import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i12 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -27,7 +27,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i9$1 from '@angular/material/tabs';
+import * as i9 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i8 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -514,16 +514,121 @@ class ConnectionBuilderComponent {
     toggleShowOnlyIssues() { this.showOnlyIssues = !this.showOnlyIssues; }
     toggleFriendly() { this.showFriendly = !this.showFriendly; }
     trackByIndex = (i) => i;
+    isWidgetSource(from) {
+        return 'widget' in from;
+    }
+    isWidgetTarget(to) {
+        return 'widget' in to;
+    }
     // Labels
-    fromLabel(c) { return `${c.from.widget}.${c.from.output}`; }
-    toLabel(c) { return `${c.to.widget}.${c.to.input}`; }
-    fromFriendly(c) { return `${this.widgetFriendlyNameForKey(c.from.widget)}.${c.from.output}`; }
-    toFriendly(c) { return `${this.widgetFriendlyNameForKey(c.to.widget)}.${c.to.input}`; }
-    outputDescription(c) { return this.registry.get(this.widgetTypeByKey(c.from.widget))?.outputs?.find(o => o.name === c.from.output)?.description || ''; }
-    inputDescription(c) { return this.registry.get(this.widgetTypeByKey(c.to.widget))?.inputs?.find(i => i.name === c.to.input)?.description || ''; }
+    fromLabel(c) {
+        return this.isWidgetSource(c.from) ? `${c.from.widget}.${c.from.output}` : `state:${c.from.state}`;
+    }
+    toLabel(c) {
+        return this.isWidgetTarget(c.to) ? `${c.to.widget}.${c.to.input}` : `state:${c.to.state}`;
+    }
+    fromFriendly(c) {
+        return this.isWidgetSource(c.from) ? `${this.widgetFriendlyNameForKey(c.from.widget)}.${c.from.output}` : `state:${c.from.state}`;
+    }
+    toFriendly(c) {
+        return this.isWidgetTarget(c.to) ? `${this.widgetFriendlyNameForKey(c.to.widget)}.${c.to.input}` : `state:${c.to.state}`;
+    }
+    outputDescription(c) {
+        if (!this.isWidgetSource(c.from))
+            return '';
+        const from = c.from;
+        return this.registry.get(this.widgetTypeByKey(from.widget))?.outputs?.find(o => o.name === from.output)?.description || '';
+    }
+    inputDescription(c) {
+        if (!this.isWidgetTarget(c.to))
+            return '';
+        const to = c.to;
+        return this.registry.get(this.widgetTypeByKey(to.widget))?.inputs?.find(i => i.name === to.input)?.description || '';
+    }
+    fromTooltip(c) { return this.showFriendly ? `${this.fromFriendly(c)} → ${this.toFriendly(c)}` : ''; }
+    fromIcon(c) { return this.isWidgetSource(c.from) ? this.componentIconForKey(c.from.widget) : 'account_tree'; }
+    toIcon(c) { return this.isWidgetTarget(c.to) ? this.componentIconForKey(c.to.widget) : 'account_tree'; }
+    fromIconTooltip(c) { return this.isWidgetSource(c.from) ? this.widgetFriendlyNameForKey(c.from.widget) : this.fromLabel(c); }
+    toIconTooltip(c) { return this.isWidgetTarget(c.to) ? this.widgetFriendlyNameForKey(c.to.widget) : this.toLabel(c); }
     widgetFriendlyNameForKey(key) { const id = this.widgetTypeByKey(key); return this.registry.get(id)?.friendlyName || id; }
     componentIconForKey(key) { const id = this.widgetTypeByKey(key); return this.registry.get(id)?.icon || 'widgets'; }
     widgetTypeByKey(key) { return this.widgets?.find(w => w.key === key)?.definition?.id || key; }
+    selectedConnection() {
+        const index = this.selectedIndex();
+        return index >= 0 ? this.connections()[index] : undefined;
+    }
+    selectedSourcePrimaryValue() {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return '';
+        return this.isWidgetSource(selected.from) ? selected.from.widget : selected.from.state;
+    }
+    setSelectedSourcePrimaryValue(value) {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return;
+        if (this.isWidgetSource(selected.from))
+            selected.from.widget = value;
+        else
+            selected.from.state = value;
+        this.connections.set([...this.connections()]);
+    }
+    selectedSourceSecondaryValue() {
+        const selected = this.selectedConnection();
+        return selected && this.isWidgetSource(selected.from) ? selected.from.output : '';
+    }
+    setSelectedSourceSecondaryValue(value) {
+        const selected = this.selectedConnection();
+        if (!selected || !this.isWidgetSource(selected.from))
+            return;
+        selected.from.output = value;
+        this.connections.set([...this.connections()]);
+    }
+    selectedTargetPrimaryValue() {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return '';
+        return this.isWidgetTarget(selected.to) ? selected.to.widget : selected.to.state;
+    }
+    setSelectedTargetPrimaryValue(value) {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return;
+        if (this.isWidgetTarget(selected.to))
+            selected.to.widget = value;
+        else
+            selected.to.state = value;
+        this.connections.set([...this.connections()]);
+    }
+    selectedTargetSecondaryValue() {
+        const selected = this.selectedConnection();
+        return selected && this.isWidgetTarget(selected.to) ? selected.to.input : '';
+    }
+    setSelectedTargetSecondaryValue(value) {
+        const selected = this.selectedConnection();
+        if (!selected || !this.isWidgetTarget(selected.to))
+            return;
+        selected.to.input = value;
+        this.connections.set([...this.connections()]);
+    }
+    selectedMapValue() {
+        return this.selectedConnection()?.map || '';
+    }
+    setSelectedMapValue(value) {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return;
+        selected.map = value;
+        this.connections.set([...this.connections()]);
+    }
+    showSelectedSourceSecondary() {
+        const selected = this.selectedConnection();
+        return !!selected && this.isWidgetSource(selected.from);
+    }
+    showSelectedTargetSecondary() {
+        const selected = this.selectedConnection();
+        return !!selected && this.isWidgetTarget(selected.to);
+    }
     applyFilters(list) {
         const q = (this.filterText || '').toLowerCase();
         const arr = list.filter((c) => {
@@ -531,16 +636,16 @@ class ConnectionBuilderComponent {
                 return false;
             if (!q)
                 return true;
-            const hay = `${c.from.widget}.${c.from.output} ${c.to.widget}.${c.to.input} ${c.map || ''}`.toLowerCase();
+            const hay = `${this.fromLabel(c)} ${this.toLabel(c)} ${c.map || ''}`.toLowerCase();
             return hay.includes(q);
         });
         return this.sortList(arr);
     }
     applyGrouping(list) {
         switch (this.groupBy) {
-            case 'from': return this.groupByKey(list, c => `${c.from.widget}.${c.from.output}`);
-            case 'to': return this.groupByKey(list, c => `${c.to.widget}.${c.to.input}`);
-            case 'event': return this.groupByKey(list, c => `${c.from.output}`);
+            case 'from': return this.groupByKey(list, c => this.fromLabel(c));
+            case 'to': return this.groupByKey(list, c => this.toLabel(c));
+            case 'event': return this.groupByKey(list, c => this.isWidgetSource(c.from) ? c.from.output : c.from.state);
             default: return [{ label: 'Todas', list }];
         }
     }
@@ -577,14 +682,30 @@ class ConnectionBuilderComponent {
         return; next.splice(index, 1); this.connections.set(next); }
     // Validation
     connectionStatus(c) {
-        if (!c.from?.widget || !c.from?.output || !c.to?.widget || !c.to?.input)
+        if (this.isWidgetSource(c.from)) {
+            const from = c.from;
+            if (!from.widget || !from.output)
+                return 'err';
+            const wFrom = this.widgetTypeByKey(from.widget);
+            const outOk = !!this.registry.get(wFrom)?.outputs?.some(o => o.name === from.output);
+            if (!outOk)
+                return 'warn';
+        }
+        else if (!c.from.state) {
             return 'err';
-        const wFrom = this.widgetTypeByKey(c.from.widget);
-        const wTo = this.widgetTypeByKey(c.to.widget);
-        const outOk = !!this.registry.get(wFrom)?.outputs?.some(o => o.name === c.from.output);
-        const inOk = !!this.registry.get(wTo)?.inputs?.some(i => i.name === c.to.input);
-        if (!outOk || !inOk)
-            return 'warn';
+        }
+        if (this.isWidgetTarget(c.to)) {
+            const to = c.to;
+            if (!to.widget || !to.input)
+                return 'err';
+            const wTo = this.widgetTypeByKey(to.widget);
+            const inOk = !!this.registry.get(wTo)?.inputs?.some(i => i.name === to.input);
+            if (!inOk)
+                return 'warn';
+        }
+        else if (!c.to.state) {
+            return 'err';
+        }
         return 'ok';
     }
     // Persist/apply
@@ -621,11 +742,11 @@ class ConnectionBuilderComponent {
         return input;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConnectionBuilderComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.ComponentMetadataRegistry }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ConnectionBuilderComponent, isStandalone: true, selector: "praxis-connection-builder", inputs: { page: "page", widgets: "widgets" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pdx-conn-root\" role=\"region\" aria-label=\"Construtor de Conex\u00F5es\">\n  <div class=\"pdx-conn-head\">\n    <span class=\"pdx-conn-title\">Conex\u00F5es</span>\n    <span class=\"pdx-conn-count\" aria-label=\"Conex\u00F5es filtradas e total\">{{ filteredConnections().length }} / {{ connections().length }}</span>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-search\">\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"filterText\" placeholder=\"Origem, Destino, Input, Map...\" />\n      <button mat-icon-button matSuffix *ngIf=\"filterText\" (click)=\"filterText='';\" aria-label=\"Limpar busca\"><mat-icon [praxisIcon]=\"'close'\"></mat-icon></button>\n    </mat-form-field>\n    <span class=\"pdx-spacer\"></span>\n    <button mat-button (click)=\"toggleShowOnlyIssues()\" [color]=\"showOnlyIssues ? 'primary': undefined\" aria-label=\"Somente avisos/erros\"><mat-icon [praxisIcon]=\"'report_problem'\"></mat-icon> Alertas</button>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-select\">\n      <mat-label>Ordenar por</mat-label>\n      <mat-select [(ngModel)]=\"sortBy\" (ngModelChange)=\"setSortBy($event)\">\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-group\">\n      <mat-label>Agrupar por</mat-label>\n      <mat-select [(ngModel)]=\"groupBy\" (ngModelChange)=\"onGroupByChange()\">\n        <mat-option value=\"none\">Nenhum</mat-option>\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n        <mat-option value=\"event\">Evento</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button mat-icon-button [color]=\"showFriendly ? 'primary' : undefined\" (click)=\"toggleFriendly()\" aria-label=\"Alternar nome amig\u00E1vel/t\u00E9cnico\"><mat-icon [praxisIcon]=\"'translate'\"></mat-icon></button>\n    <button mat-stroked-button (click)=\"createNew()\" aria-label=\"Nova conex\u00E3o\"><mat-icon [praxisIcon]=\"'add'\"></mat-icon> Nova conex\u00E3o</button>\n    <button mat-flat-button color=\"accent\" class=\"pdx-diagram-cta\" (click)=\"openDiagramFullscreen()\" aria-label=\"Abrir diagrama em tela cheia\" matTooltip=\"Visualizar conex\u00F5es em grafo\"><mat-icon [praxisIcon]=\"'schema'\"></mat-icon><span>Diagrama</span></button>\n  </div>\n\n  <div class=\"pdx-conn-grid\">\n    <!-- Left: read-only list -->\n    <div class=\"pdx-conn-list\" role=\"list\" aria-label=\"Lista de conex\u00F5es\" cdkScrollable>\n      <mat-list *ngIf=\"filteredConnections().length; else noConns\">\n        <ng-container *ngIf=\"groupBy!=='none'; else flatList\">\n          <div class=\"group-block\" *ngFor=\"let g of groupedConnections(); let gi = index\">\n            <div class=\"group-header\">\n              <span class=\"group-title\">{{ g.label }}</span>\n              <span class=\"group-count\">{{ g.list.length }}</span>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"group-list\">\n              <ng-container *ngFor=\"let c of g.list; let i = index\">\n                <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n                  <div class=\"card-head\" matListItemTitle [matTooltip]=\"showFriendly ? (c.from.widget + '.' + c.from.output + ' \u2192 ' + (c.to.widget + '.' + c.to.input)) : ''\">\n                    <mat-icon class=\"comp-icon from\" [matTooltip]=\"widgetFriendlyNameForKey(c.from.widget)\">{{ componentIconForKey(c.from.widget) }}</mat-icon>\n                    <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                    <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                    <span class=\"arrow\">\u2192</span>\n                    <mat-icon class=\"comp-icon to\" [matTooltip]=\"widgetFriendlyNameForKey(c.to.widget)\">{{ componentIconForKey(c.to.widget) }}</mat-icon>\n                    <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                    <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                      <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                    </span>\n                    <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                      <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  </div>\n                  <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                    <span class=\"hint\">{{ outputDescription(c) }}</span>\n                    <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u2022</span>\n                    <span class=\"hint\">{{ inputDescription(c) }}</span>\n                  </div>\n                    <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                      <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                      <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                      <span class=\"mono\">{{ c.map }}</span>\n                    </div>\n                  <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                    <span class=\"action-group\">\n                      <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                      <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                    </span>\n                    <span class=\"action-group\">\n                      <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00E7\u00E3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                    </span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"action-group\">\n                      <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                    </span>\n                  </div>\n                  <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                    <div class=\"stepper\">\n                      <div class=\"step from-step\">\n                        <div class=\"dot from\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">De</div>\n                          <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step to-step\">\n                        <div class=\"dot to\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Para</div>\n                          <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step map-step\" *ngIf=\"c.map\">\n                        <div class=\"dot map\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Map</div>\n                          <div class=\"value mono\">{{ c.map }}</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </mat-list-item>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #flatList>\n          <ng-container *ngFor=\"let c of filteredConnections(); let i = index\">\n            <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n              <div class=\"card-head\" matListItemTitle [matTooltip]=\"showFriendly ? (c.from.widget + '.' + c.from.output + ' \u2192 ' + (c.to.widget + '.' + c.to.input)) : ''\">\n                <mat-icon class=\"comp-icon from\" [matTooltip]=\"widgetFriendlyNameForKey(c.from.widget)\">{{ componentIconForKey(c.from.widget) }}</mat-icon>\n                <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                <span class=\"arrow\">\u2192</span>\n                <mat-icon class=\"comp-icon to\" [matTooltip]=\"widgetFriendlyNameForKey(c.to.widget)\">{{ componentIconForKey(c.to.widget) }}</mat-icon>\n                <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                <span class=\"spacer\"></span>\n                <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                  <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                </span>\n                <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                  <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                </button>\n              </div>\n              <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                <span class=\"hint\">{{ outputDescription(c) }}</span>\n                <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u2022</span>\n                <span class=\"hint\">{{ inputDescription(c) }}</span>\n              </div>\n              <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                <span class=\"mono\">{{ c.map }}</span>\n              </div>\n              <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                <span class=\"action-group\">\n                  <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                  <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                </span>\n                <span class=\"action-group\">\n                  <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00E7\u00E3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                </span>\n                <span class=\"spacer\"></span>\n                <span class=\"action-group\">\n                  <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                </span>\n              </div>\n              <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                <div class=\"stepper\">\n                  <div class=\"step from-step\">\n                    <div class=\"dot from\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">De</div>\n                      <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step to-step\">\n                    <div class=\"dot to\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Para</div>\n                      <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step map-step\" *ngIf=\"c.map\">\n                    <div class=\"dot map\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Map</div>\n                      <div class=\"value mono\">{{ c.map }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </mat-list-item>\n          </ng-container>\n        </ng-template>\n      </mat-list>\n      <ng-template #noConns>\n        <div class=\"pdx-empty-list\" role=\"status\" aria-live=\"polite\">\n          <mat-icon>link_off</mat-icon>\n          <div>Nenhuma conex\u00E3o definida. Use \"Nova conex\u00E3o\".</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Right: editor form -->\n    <div class=\"pdx-conn-editor\" role=\"form\" aria-label=\"Editor de conex\u00E3o\">\n      <ng-container *ngIf=\"selectedIndex() >= 0; else emptyEditor\">\n        <div class=\"form-grid\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Origem (widget.key)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].from.widget\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Evento (output)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].from.output\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Destino (widget.key)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].to.widget\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Input</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].to.input\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-span\">\n            <mat-label>Map (opcional)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].map\" [placeholder]=\"mapPlaceholder\" />\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              matTooltip=\"Ex.: payload.id ou ${payload.id}.\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </mat-form-field>\n          <div class=\"full-span\">\n            <button mat-flat-button color=\"primary\" (click)=\"onSave()\"><mat-icon [praxisIcon]=\"'save'\"></mat-icon>Salvar</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyEditor>\n        <div class=\"pdx-empty-editor\">Selecione uma conex\u00E3o para editar.</div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".pdx-conn-root{display:grid;gap:12px;color:var(--md-sys-color-on-surface)}.pdx-conn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pdx-conn-title{font-weight:600}.pdx-conn-count{color:var(--md-sys-color-on-surface-variant)}.pdx-conn-search{width:260px}.pdx-conn-select{width:160px}.pdx-conn-group{width:170px}.pdx-spacer{flex:1}.pdx-diagram-cta span{margin-left:6px}.pdx-conn-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.pdx-conn-list{height:540px;overflow:auto;padding:8px 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-conn-list .mat-mdc-list-item.mdc-list-item{height:auto;padding:10px 8px 8px}.pdx-conn-list .mat-mdc-list-item.selected{background:var(--md-sys-color-primary-container)}.card-head{display:flex;align-items:center;gap:6px}.card-head .spacer{flex:1}.card-head .comp-icon{opacity:.85}.card-head .expand-btn{margin-left:4px}.status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px}.status-pill.ok{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.status-pill.warn{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.status-pill.err{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.map-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.map-chip .map-icon{font-size:16px}.pdx-conn-editor{min-height:540px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-empty-list{padding:16px;display:grid;place-items:center;gap:6px;opacity:.8}.pdx-empty-editor{padding:16px;opacity:.75}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.full-span{grid-column:1/-1}.stepper{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:8px 0}.step{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:start}.dot{width:12px;height:12px;border-radius:50%;margin-top:5px}.dot.from{background:var(--md-sys-color-primary-container)}.dot.to{background:var(--md-sys-color-secondary-container)}.dot.map{background:var(--md-sys-color-tertiary-container)}.group-block{padding:6px 6px 10px}.group-header{display:flex;gap:8px;align-items:center;padding:8px 0}.group-title{font-weight:600}.group-count{opacity:.75}.group-list{display:grid;gap:6px}.pdx-badge{width:10px;height:10px;border-radius:50%;display:inline-block}.pdx-badge.from{background:var(--md-sys-color-primary-container)}.pdx-badge.to{background:var(--md-sys-color-secondary-container)}.pdx-badge.map{background:var(--md-sys-color-tertiary-container)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}@media(max-width:960px){.pdx-conn-grid{grid-template-columns:1fr}.pdx-conn-list,.pdx-conn-editor{min-height:360px}.pdx-conn-search,.pdx-conn-select,.pdx-conn-group{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i12.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i12.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i12.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ConnectionBuilderComponent, isStandalone: true, selector: "praxis-connection-builder", inputs: { page: "page", widgets: "widgets" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pdx-conn-root\" role=\"region\" aria-label=\"Construtor de Conex\u00C3\u00B5es\">\n  <div class=\"pdx-conn-head\">\n    <span class=\"pdx-conn-title\">Conex\u00C3\u00B5es</span>\n    <span class=\"pdx-conn-count\" aria-label=\"Conex\u00C3\u00B5es filtradas e total\">{{ filteredConnections().length }} / {{ connections().length }}</span>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-search\">\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"filterText\" placeholder=\"Origem, Destino, Input, Map...\" />\n      <button mat-icon-button matSuffix *ngIf=\"filterText\" (click)=\"filterText='';\" aria-label=\"Limpar busca\"><mat-icon [praxisIcon]=\"'close'\"></mat-icon></button>\n    </mat-form-field>\n    <span class=\"pdx-spacer\"></span>\n    <button mat-button (click)=\"toggleShowOnlyIssues()\" [color]=\"showOnlyIssues ? 'primary': undefined\" aria-label=\"Somente avisos/erros\"><mat-icon [praxisIcon]=\"'report_problem'\"></mat-icon> Alertas</button>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-select\">\n      <mat-label>Ordenar por</mat-label>\n      <mat-select [(ngModel)]=\"sortBy\" (ngModelChange)=\"setSortBy($event)\">\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-group\">\n      <mat-label>Agrupar por</mat-label>\n      <mat-select [(ngModel)]=\"groupBy\" (ngModelChange)=\"onGroupByChange()\">\n        <mat-option value=\"none\">Nenhum</mat-option>\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n        <mat-option value=\"event\">Evento</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button mat-icon-button [color]=\"showFriendly ? 'primary' : undefined\" (click)=\"toggleFriendly()\" aria-label=\"Alternar nome amig\u00C3\u00A1vel/t\u00C3\u00A9cnico\"><mat-icon [praxisIcon]=\"'translate'\"></mat-icon></button>\n    <button mat-stroked-button (click)=\"createNew()\" aria-label=\"Nova conex\u00C3\u00A3o\"><mat-icon [praxisIcon]=\"'add'\"></mat-icon> Nova conex\u00C3\u00A3o</button>\n    <button mat-flat-button color=\"accent\" class=\"pdx-diagram-cta\" (click)=\"openDiagramFullscreen()\" aria-label=\"Abrir diagrama em tela cheia\" matTooltip=\"Visualizar conex\u00C3\u00B5es em grafo\"><mat-icon [praxisIcon]=\"'schema'\"></mat-icon><span>Diagrama</span></button>\n  </div>\n\n  <div class=\"pdx-conn-grid\">\n    <div class=\"pdx-conn-list\" role=\"list\" aria-label=\"Lista de conex\u00C3\u00B5es\" cdkScrollable>\n      <mat-list *ngIf=\"filteredConnections().length; else noConns\">\n        <ng-container *ngIf=\"groupBy!=='none'; else flatList\">\n          <div class=\"group-block\" *ngFor=\"let g of groupedConnections(); let gi = index\">\n            <div class=\"group-header\">\n              <span class=\"group-title\">{{ g.label }}</span>\n              <span class=\"group-count\">{{ g.list.length }}</span>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"group-list\">\n              <ng-container *ngFor=\"let c of g.list; let i = index\">\n                <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n                  <div class=\"card-head\" matListItemTitle [matTooltip]=\"fromTooltip(c)\">\n                    <mat-icon class=\"comp-icon from\" [matTooltip]=\"fromIconTooltip(c)\">{{ fromIcon(c) }}</mat-icon>\n                    <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                    <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                    <span class=\"arrow\">\u00E2\u2020\u2019</span>\n                    <mat-icon class=\"comp-icon to\" [matTooltip]=\"toIconTooltip(c)\">{{ toIcon(c) }}</mat-icon>\n                    <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                    <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                      <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                    </span>\n                    <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                      <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  </div>\n                  <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                    <span class=\"hint\">{{ outputDescription(c) }}</span>\n                    <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u00E2\u20AC\u00A2</span>\n                    <span class=\"hint\">{{ inputDescription(c) }}</span>\n                  </div>\n                  <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                    <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                    <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                    <span class=\"mono\">{{ c.map }}</span>\n                  </div>\n                  <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                    <span class=\"action-group\">\n                      <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                      <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                    </span>\n                    <span class=\"action-group\">\n                      <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00C3\u00A7\u00C3\u00A3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                    </span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"action-group\">\n                      <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                    </span>\n                  </div>\n                  <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                    <div class=\"stepper\">\n                      <div class=\"step from-step\">\n                        <div class=\"dot from\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">De</div>\n                          <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step to-step\">\n                        <div class=\"dot to\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Para</div>\n                          <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step map-step\" *ngIf=\"c.map\">\n                        <div class=\"dot map\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Map</div>\n                          <div class=\"value mono\">{{ c.map }}</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </mat-list-item>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #flatList>\n          <ng-container *ngFor=\"let c of filteredConnections(); let i = index\">\n            <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n              <div class=\"card-head\" matListItemTitle [matTooltip]=\"fromTooltip(c)\">\n                <mat-icon class=\"comp-icon from\" [matTooltip]=\"fromIconTooltip(c)\">{{ fromIcon(c) }}</mat-icon>\n                <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                <span class=\"arrow\">\u00E2\u2020\u2019</span>\n                <mat-icon class=\"comp-icon to\" [matTooltip]=\"toIconTooltip(c)\">{{ toIcon(c) }}</mat-icon>\n                <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                <span class=\"spacer\"></span>\n                <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                  <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                </span>\n                <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                  <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                </button>\n              </div>\n              <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                <span class=\"hint\">{{ outputDescription(c) }}</span>\n                <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u00E2\u20AC\u00A2</span>\n                <span class=\"hint\">{{ inputDescription(c) }}</span>\n              </div>\n              <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                <span class=\"mono\">{{ c.map }}</span>\n              </div>\n              <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                <span class=\"action-group\">\n                  <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                  <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                </span>\n                <span class=\"action-group\">\n                  <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00C3\u00A7\u00C3\u00A3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                </span>\n                <span class=\"spacer\"></span>\n                <span class=\"action-group\">\n                  <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                </span>\n              </div>\n              <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                <div class=\"stepper\">\n                  <div class=\"step from-step\">\n                    <div class=\"dot from\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">De</div>\n                      <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step to-step\">\n                    <div class=\"dot to\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Para</div>\n                      <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step map-step\" *ngIf=\"c.map\">\n                    <div class=\"dot map\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Map</div>\n                      <div class=\"value mono\">{{ c.map }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </mat-list-item>\n          </ng-container>\n        </ng-template>\n      </mat-list>\n      <ng-template #noConns>\n        <div class=\"pdx-empty-list\" role=\"status\" aria-live=\"polite\">\n          <mat-icon>link_off</mat-icon>\n          <div>Nenhuma conex\u00C3\u00A3o definida. Use \"Nova conex\u00C3\u00A3o\".</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"pdx-conn-editor\" role=\"form\" aria-label=\"Editor de conex\u00C3\u00A3o\">\n      <ng-container *ngIf=\"selectedIndex() >= 0; else emptyEditor\">\n        <div class=\"form-grid\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Origem (widget.key)</mat-label>\n            <input matInput [ngModel]=\"selectedSourcePrimaryValue()\" (ngModelChange)=\"setSelectedSourcePrimaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedSourceSecondary()\">\n            <mat-label>Evento (output)</mat-label>\n            <input matInput [ngModel]=\"selectedSourceSecondaryValue()\" (ngModelChange)=\"setSelectedSourceSecondaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Destino (widget.key)</mat-label>\n            <input matInput [ngModel]=\"selectedTargetPrimaryValue()\" (ngModelChange)=\"setSelectedTargetPrimaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedTargetSecondary()\">\n            <mat-label>Input</mat-label>\n            <input matInput [ngModel]=\"selectedTargetSecondaryValue()\" (ngModelChange)=\"setSelectedTargetSecondaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-span\">\n            <mat-label>Map (opcional)</mat-label>\n            <input matInput [ngModel]=\"selectedMapValue()\" (ngModelChange)=\"setSelectedMapValue($event)\" [placeholder]=\"mapPlaceholder\" />\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              matTooltip=\"Ex.: payload.id ou ${payload.id}.\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </mat-form-field>\n          <div class=\"full-span\">\n            <button mat-flat-button color=\"primary\" (click)=\"onSave()\"><mat-icon [praxisIcon]=\"'save'\"></mat-icon>Salvar</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyEditor>\n        <div class=\"pdx-empty-editor\">Selecione uma conex\u00C3\u00A3o para editar.</div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".pdx-conn-root{display:grid;gap:12px;color:var(--md-sys-color-on-surface)}.pdx-conn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pdx-conn-title{font-weight:600}.pdx-conn-count{color:var(--md-sys-color-on-surface-variant)}.pdx-conn-search{width:260px}.pdx-conn-select{width:160px}.pdx-conn-group{width:170px}.pdx-spacer{flex:1}.pdx-diagram-cta span{margin-left:6px}.pdx-conn-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.pdx-conn-list{height:540px;overflow:auto;padding:8px 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-conn-list .mat-mdc-list-item.mdc-list-item{height:auto;padding:10px 8px 8px}.pdx-conn-list .mat-mdc-list-item.selected{background:var(--md-sys-color-primary-container)}.card-head{display:flex;align-items:center;gap:6px}.card-head .spacer{flex:1}.card-head .comp-icon{opacity:.85}.card-head .expand-btn{margin-left:4px}.status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px}.status-pill.ok{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.status-pill.warn{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.status-pill.err{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.map-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.map-chip .map-icon{font-size:16px}.pdx-conn-editor{min-height:540px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-empty-list{padding:16px;display:grid;place-items:center;gap:6px;opacity:.8}.pdx-empty-editor{padding:16px;opacity:.75}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.full-span{grid-column:1/-1}.stepper{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:8px 0}.step{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:start}.dot{width:12px;height:12px;border-radius:50%;margin-top:5px}.dot.from{background:var(--md-sys-color-primary-container)}.dot.to{background:var(--md-sys-color-secondary-container)}.dot.map{background:var(--md-sys-color-tertiary-container)}.group-block{padding:6px 6px 10px}.group-header{display:flex;gap:8px;align-items:center;padding:8px 0}.group-title{font-weight:600}.group-count{opacity:.75}.group-list{display:grid;gap:6px}.pdx-badge{width:10px;height:10px;border-radius:50%;display:inline-block}.pdx-badge.from{background:var(--md-sys-color-primary-container)}.pdx-badge.to{background:var(--md-sys-color-secondary-container)}.pdx-badge.map{background:var(--md-sys-color-tertiary-container)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}@media(max-width:960px){.pdx-conn-grid{grid-template-columns:1fr}.pdx-conn-list,.pdx-conn-editor{min-height:360px}.pdx-conn-search,.pdx-conn-select,.pdx-conn-group{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i12.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i12.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i12.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConnectionBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-connection-builder', standalone: true, imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatIconModule, MatListModule, MatDialogModule, MatAutocompleteModule, MatMenuModule, MatTabsModule, MatTooltipModule, MatProgressBarModule, MatCheckboxModule, MatSnackBarModule, ScrollingModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pdx-conn-root\" role=\"region\" aria-label=\"Construtor de Conex\u00F5es\">\n  <div class=\"pdx-conn-head\">\n    <span class=\"pdx-conn-title\">Conex\u00F5es</span>\n    <span class=\"pdx-conn-count\" aria-label=\"Conex\u00F5es filtradas e total\">{{ filteredConnections().length }} / {{ connections().length }}</span>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-search\">\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"filterText\" placeholder=\"Origem, Destino, Input, Map...\" />\n      <button mat-icon-button matSuffix *ngIf=\"filterText\" (click)=\"filterText='';\" aria-label=\"Limpar busca\"><mat-icon [praxisIcon]=\"'close'\"></mat-icon></button>\n    </mat-form-field>\n    <span class=\"pdx-spacer\"></span>\n    <button mat-button (click)=\"toggleShowOnlyIssues()\" [color]=\"showOnlyIssues ? 'primary': undefined\" aria-label=\"Somente avisos/erros\"><mat-icon [praxisIcon]=\"'report_problem'\"></mat-icon> Alertas</button>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-select\">\n      <mat-label>Ordenar por</mat-label>\n      <mat-select [(ngModel)]=\"sortBy\" (ngModelChange)=\"setSortBy($event)\">\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-group\">\n      <mat-label>Agrupar por</mat-label>\n      <mat-select [(ngModel)]=\"groupBy\" (ngModelChange)=\"onGroupByChange()\">\n        <mat-option value=\"none\">Nenhum</mat-option>\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n        <mat-option value=\"event\">Evento</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button mat-icon-button [color]=\"showFriendly ? 'primary' : undefined\" (click)=\"toggleFriendly()\" aria-label=\"Alternar nome amig\u00E1vel/t\u00E9cnico\"><mat-icon [praxisIcon]=\"'translate'\"></mat-icon></button>\n    <button mat-stroked-button (click)=\"createNew()\" aria-label=\"Nova conex\u00E3o\"><mat-icon [praxisIcon]=\"'add'\"></mat-icon> Nova conex\u00E3o</button>\n    <button mat-flat-button color=\"accent\" class=\"pdx-diagram-cta\" (click)=\"openDiagramFullscreen()\" aria-label=\"Abrir diagrama em tela cheia\" matTooltip=\"Visualizar conex\u00F5es em grafo\"><mat-icon [praxisIcon]=\"'schema'\"></mat-icon><span>Diagrama</span></button>\n  </div>\n\n  <div class=\"pdx-conn-grid\">\n    <!-- Left: read-only list -->\n    <div class=\"pdx-conn-list\" role=\"list\" aria-label=\"Lista de conex\u00F5es\" cdkScrollable>\n      <mat-list *ngIf=\"filteredConnections().length; else noConns\">\n        <ng-container *ngIf=\"groupBy!=='none'; else flatList\">\n          <div class=\"group-block\" *ngFor=\"let g of groupedConnections(); let gi = index\">\n            <div class=\"group-header\">\n              <span class=\"group-title\">{{ g.label }}</span>\n              <span class=\"group-count\">{{ g.list.length }}</span>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"group-list\">\n              <ng-container *ngFor=\"let c of g.list; let i = index\">\n                <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n                  <div class=\"card-head\" matListItemTitle [matTooltip]=\"showFriendly ? (c.from.widget + '.' + c.from.output + ' \u2192 ' + (c.to.widget + '.' + c.to.input)) : ''\">\n                    <mat-icon class=\"comp-icon from\" [matTooltip]=\"widgetFriendlyNameForKey(c.from.widget)\">{{ componentIconForKey(c.from.widget) }}</mat-icon>\n                    <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                    <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                    <span class=\"arrow\">\u2192</span>\n                    <mat-icon class=\"comp-icon to\" [matTooltip]=\"widgetFriendlyNameForKey(c.to.widget)\">{{ componentIconForKey(c.to.widget) }}</mat-icon>\n                    <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                    <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                      <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                    </span>\n                    <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                      <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  </div>\n                  <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                    <span class=\"hint\">{{ outputDescription(c) }}</span>\n                    <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u2022</span>\n                    <span class=\"hint\">{{ inputDescription(c) }}</span>\n                  </div>\n                    <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                      <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                      <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                      <span class=\"mono\">{{ c.map }}</span>\n                    </div>\n                  <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                    <span class=\"action-group\">\n                      <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                      <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                    </span>\n                    <span class=\"action-group\">\n                      <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00E7\u00E3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                    </span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"action-group\">\n                      <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                    </span>\n                  </div>\n                  <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                    <div class=\"stepper\">\n                      <div class=\"step from-step\">\n                        <div class=\"dot from\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">De</div>\n                          <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step to-step\">\n                        <div class=\"dot to\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Para</div>\n                          <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step map-step\" *ngIf=\"c.map\">\n                        <div class=\"dot map\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Map</div>\n                          <div class=\"value mono\">{{ c.map }}</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </mat-list-item>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #flatList>\n          <ng-container *ngFor=\"let c of filteredConnections(); let i = index\">\n            <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n              <div class=\"card-head\" matListItemTitle [matTooltip]=\"showFriendly ? (c.from.widget + '.' + c.from.output + ' \u2192 ' + (c.to.widget + '.' + c.to.input)) : ''\">\n                <mat-icon class=\"comp-icon from\" [matTooltip]=\"widgetFriendlyNameForKey(c.from.widget)\">{{ componentIconForKey(c.from.widget) }}</mat-icon>\n                <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                <span class=\"arrow\">\u2192</span>\n                <mat-icon class=\"comp-icon to\" [matTooltip]=\"widgetFriendlyNameForKey(c.to.widget)\">{{ componentIconForKey(c.to.widget) }}</mat-icon>\n                <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                <span class=\"spacer\"></span>\n                <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                  <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                </span>\n                <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                  <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                </button>\n              </div>\n              <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                <span class=\"hint\">{{ outputDescription(c) }}</span>\n                <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u2022</span>\n                <span class=\"hint\">{{ inputDescription(c) }}</span>\n              </div>\n              <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                <span class=\"mono\">{{ c.map }}</span>\n              </div>\n              <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                <span class=\"action-group\">\n                  <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                  <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                </span>\n                <span class=\"action-group\">\n                  <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00E7\u00E3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                </span>\n                <span class=\"spacer\"></span>\n                <span class=\"action-group\">\n                  <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                </span>\n              </div>\n              <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                <div class=\"stepper\">\n                  <div class=\"step from-step\">\n                    <div class=\"dot from\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">De</div>\n                      <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step to-step\">\n                    <div class=\"dot to\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Para</div>\n                      <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step map-step\" *ngIf=\"c.map\">\n                    <div class=\"dot map\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Map</div>\n                      <div class=\"value mono\">{{ c.map }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </mat-list-item>\n          </ng-container>\n        </ng-template>\n      </mat-list>\n      <ng-template #noConns>\n        <div class=\"pdx-empty-list\" role=\"status\" aria-live=\"polite\">\n          <mat-icon>link_off</mat-icon>\n          <div>Nenhuma conex\u00E3o definida. Use \"Nova conex\u00E3o\".</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Right: editor form -->\n    <div class=\"pdx-conn-editor\" role=\"form\" aria-label=\"Editor de conex\u00E3o\">\n      <ng-container *ngIf=\"selectedIndex() >= 0; else emptyEditor\">\n        <div class=\"form-grid\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Origem (widget.key)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].from.widget\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Evento (output)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].from.output\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Destino (widget.key)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].to.widget\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Input</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].to.input\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-span\">\n            <mat-label>Map (opcional)</mat-label>\n            <input matInput [(ngModel)]=\"connections()[selectedIndex()].map\" [placeholder]=\"mapPlaceholder\" />\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              matTooltip=\"Ex.: payload.id ou ${payload.id}.\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </mat-form-field>\n          <div class=\"full-span\">\n            <button mat-flat-button color=\"primary\" (click)=\"onSave()\"><mat-icon [praxisIcon]=\"'save'\"></mat-icon>Salvar</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyEditor>\n        <div class=\"pdx-empty-editor\">Selecione uma conex\u00E3o para editar.</div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".pdx-conn-root{display:grid;gap:12px;color:var(--md-sys-color-on-surface)}.pdx-conn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pdx-conn-title{font-weight:600}.pdx-conn-count{color:var(--md-sys-color-on-surface-variant)}.pdx-conn-search{width:260px}.pdx-conn-select{width:160px}.pdx-conn-group{width:170px}.pdx-spacer{flex:1}.pdx-diagram-cta span{margin-left:6px}.pdx-conn-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.pdx-conn-list{height:540px;overflow:auto;padding:8px 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-conn-list .mat-mdc-list-item.mdc-list-item{height:auto;padding:10px 8px 8px}.pdx-conn-list .mat-mdc-list-item.selected{background:var(--md-sys-color-primary-container)}.card-head{display:flex;align-items:center;gap:6px}.card-head .spacer{flex:1}.card-head .comp-icon{opacity:.85}.card-head .expand-btn{margin-left:4px}.status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px}.status-pill.ok{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.status-pill.warn{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.status-pill.err{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.map-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.map-chip .map-icon{font-size:16px}.pdx-conn-editor{min-height:540px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-empty-list{padding:16px;display:grid;place-items:center;gap:6px;opacity:.8}.pdx-empty-editor{padding:16px;opacity:.75}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.full-span{grid-column:1/-1}.stepper{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:8px 0}.step{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:start}.dot{width:12px;height:12px;border-radius:50%;margin-top:5px}.dot.from{background:var(--md-sys-color-primary-container)}.dot.to{background:var(--md-sys-color-secondary-container)}.dot.map{background:var(--md-sys-color-tertiary-container)}.group-block{padding:6px 6px 10px}.group-header{display:flex;gap:8px;align-items:center;padding:8px 0}.group-title{font-weight:600}.group-count{opacity:.75}.group-list{display:grid;gap:6px}.pdx-badge{width:10px;height:10px;border-radius:50%;display:inline-block}.pdx-badge.from{background:var(--md-sys-color-primary-container)}.pdx-badge.to{background:var(--md-sys-color-secondary-container)}.pdx-badge.map{background:var(--md-sys-color-tertiary-container)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}@media(max-width:960px){.pdx-conn-grid{grid-template-columns:1fr}.pdx-conn-list,.pdx-conn-editor{min-height:360px}.pdx-conn-search,.pdx-conn-select,.pdx-conn-group{width:100%}}\n"] }]
+            args: [{ selector: 'praxis-connection-builder', standalone: true, imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatIconModule, MatListModule, MatDialogModule, MatAutocompleteModule, MatMenuModule, MatTabsModule, MatTooltipModule, MatProgressBarModule, MatCheckboxModule, MatSnackBarModule, ScrollingModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pdx-conn-root\" role=\"region\" aria-label=\"Construtor de Conex\u00C3\u00B5es\">\n  <div class=\"pdx-conn-head\">\n    <span class=\"pdx-conn-title\">Conex\u00C3\u00B5es</span>\n    <span class=\"pdx-conn-count\" aria-label=\"Conex\u00C3\u00B5es filtradas e total\">{{ filteredConnections().length }} / {{ connections().length }}</span>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-search\">\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"filterText\" placeholder=\"Origem, Destino, Input, Map...\" />\n      <button mat-icon-button matSuffix *ngIf=\"filterText\" (click)=\"filterText='';\" aria-label=\"Limpar busca\"><mat-icon [praxisIcon]=\"'close'\"></mat-icon></button>\n    </mat-form-field>\n    <span class=\"pdx-spacer\"></span>\n    <button mat-button (click)=\"toggleShowOnlyIssues()\" [color]=\"showOnlyIssues ? 'primary': undefined\" aria-label=\"Somente avisos/erros\"><mat-icon [praxisIcon]=\"'report_problem'\"></mat-icon> Alertas</button>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-select\">\n      <mat-label>Ordenar por</mat-label>\n      <mat-select [(ngModel)]=\"sortBy\" (ngModelChange)=\"setSortBy($event)\">\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"pdx-conn-group\">\n      <mat-label>Agrupar por</mat-label>\n      <mat-select [(ngModel)]=\"groupBy\" (ngModelChange)=\"onGroupByChange()\">\n        <mat-option value=\"none\">Nenhum</mat-option>\n        <mat-option value=\"from\">Origem</mat-option>\n        <mat-option value=\"to\">Destino</mat-option>\n        <mat-option value=\"event\">Evento</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button mat-icon-button [color]=\"showFriendly ? 'primary' : undefined\" (click)=\"toggleFriendly()\" aria-label=\"Alternar nome amig\u00C3\u00A1vel/t\u00C3\u00A9cnico\"><mat-icon [praxisIcon]=\"'translate'\"></mat-icon></button>\n    <button mat-stroked-button (click)=\"createNew()\" aria-label=\"Nova conex\u00C3\u00A3o\"><mat-icon [praxisIcon]=\"'add'\"></mat-icon> Nova conex\u00C3\u00A3o</button>\n    <button mat-flat-button color=\"accent\" class=\"pdx-diagram-cta\" (click)=\"openDiagramFullscreen()\" aria-label=\"Abrir diagrama em tela cheia\" matTooltip=\"Visualizar conex\u00C3\u00B5es em grafo\"><mat-icon [praxisIcon]=\"'schema'\"></mat-icon><span>Diagrama</span></button>\n  </div>\n\n  <div class=\"pdx-conn-grid\">\n    <div class=\"pdx-conn-list\" role=\"list\" aria-label=\"Lista de conex\u00C3\u00B5es\" cdkScrollable>\n      <mat-list *ngIf=\"filteredConnections().length; else noConns\">\n        <ng-container *ngIf=\"groupBy!=='none'; else flatList\">\n          <div class=\"group-block\" *ngFor=\"let g of groupedConnections(); let gi = index\">\n            <div class=\"group-header\">\n              <span class=\"group-title\">{{ g.label }}</span>\n              <span class=\"group-count\">{{ g.list.length }}</span>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"group-list\">\n              <ng-container *ngFor=\"let c of g.list; let i = index\">\n                <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n                  <div class=\"card-head\" matListItemTitle [matTooltip]=\"fromTooltip(c)\">\n                    <mat-icon class=\"comp-icon from\" [matTooltip]=\"fromIconTooltip(c)\">{{ fromIcon(c) }}</mat-icon>\n                    <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                    <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                    <span class=\"arrow\">\u00E2\u2020\u2019</span>\n                    <mat-icon class=\"comp-icon to\" [matTooltip]=\"toIconTooltip(c)\">{{ toIcon(c) }}</mat-icon>\n                    <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                    <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                      <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                      <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                    </span>\n                    <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                      <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  </div>\n                  <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                    <span class=\"hint\">{{ outputDescription(c) }}</span>\n                    <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u00E2\u20AC\u00A2</span>\n                    <span class=\"hint\">{{ inputDescription(c) }}</span>\n                  </div>\n                  <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                    <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                    <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                    <span class=\"mono\">{{ c.map }}</span>\n                  </div>\n                  <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                    <span class=\"action-group\">\n                      <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                      <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                    </span>\n                    <span class=\"action-group\">\n                      <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00C3\u00A7\u00C3\u00A3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                    </span>\n                    <span class=\"spacer\"></span>\n                    <span class=\"action-group\">\n                      <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                    </span>\n                  </div>\n                  <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                    <div class=\"stepper\">\n                      <div class=\"step from-step\">\n                        <div class=\"dot from\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">De</div>\n                          <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step to-step\">\n                        <div class=\"dot to\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Para</div>\n                          <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                        </div>\n                      </div>\n                      <div class=\"step map-step\" *ngIf=\"c.map\">\n                        <div class=\"dot map\"></div>\n                        <div class=\"content\">\n                          <div class=\"label\">Map</div>\n                          <div class=\"value mono\">{{ c.map }}</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </mat-list-item>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #flatList>\n          <ng-container *ngFor=\"let c of filteredConnections(); let i = index\">\n            <mat-list-item role=\"listitem\" (click)=\"startEdit(i, c)\" [class.selected]=\"selectedIndex()===i\">\n              <div class=\"card-head\" matListItemTitle [matTooltip]=\"fromTooltip(c)\">\n                <mat-icon class=\"comp-icon from\" [matTooltip]=\"fromIconTooltip(c)\">{{ fromIcon(c) }}</mat-icon>\n                <span class=\"pdx-badge from\" aria-hidden=\"true\"></span>\n                <span class=\"from\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</span>\n                <span class=\"arrow\">\u00E2\u2020\u2019</span>\n                <mat-icon class=\"comp-icon to\" [matTooltip]=\"toIconTooltip(c)\">{{ toIcon(c) }}</mat-icon>\n                <span class=\"pdx-badge to\" aria-hidden=\"true\"></span>\n                <span class=\"to\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</span>\n                <span class=\"spacer\"></span>\n                <span class=\"status-pill\" [class.ok]=\"connectionStatus(c)==='ok'\" [class.warn]=\"connectionStatus(c)==='warn'\" [class.err]=\"connectionStatus(c)==='err'\">\n                  <mat-icon *ngIf=\"connectionStatus(c)==='ok'\">check_circle</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='warn'\">warning</mat-icon>\n                  <mat-icon *ngIf=\"connectionStatus(c)==='err'\">error</mat-icon>\n                </span>\n                <button mat-icon-button class=\"expand-btn\" [attr.aria-expanded]=\"isExpanded(i)\" (click)=\"toggleExpanded(i, $event)\" [matTooltip]=\"isExpanded(i) ? 'Recolher detalhes' : 'Expandir detalhes'\">\n                  <mat-icon>{{ isExpanded(i) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                </button>\n              </div>\n              <div class=\"meta\" *ngIf=\"showFriendly\" matListItemLine>\n                <span class=\"hint\">{{ outputDescription(c) }}</span>\n                <span class=\"sep\" *ngIf=\"outputDescription(c) && inputDescription(c)\">\u00E2\u20AC\u00A2</span>\n                <span class=\"hint\">{{ inputDescription(c) }}</span>\n              </div>\n              <div class=\"map-chip\" *ngIf=\"c.map\" [matTooltip]=\"c.map || ''\" matListItemLine (click)=\"startEditByConn(c)\" title=\"Clique para editar Map\">\n                <span class=\"pdx-badge map\" aria-hidden=\"true\"></span>\n                <mat-icon class=\"map-icon\" inline>bolt</mat-icon>\n                <span class=\"mono\">{{ c.map }}</span>\n              </div>\n              <div class=\"card-actions\" matListItemLine (click)=\"$event.stopPropagation()\">\n                <span class=\"action-group\">\n                  <button mat-icon-button (click)=\"startEdit(i, c)\" matTooltip=\"Editar\"><mat-icon>settings</mat-icon></button>\n                  <button mat-icon-button (click)=\"duplicateConnection(i)\" matTooltip=\"Duplicar\"><mat-icon>content_copy</mat-icon></button>\n                </span>\n                <span class=\"action-group\">\n                  <button mat-stroked-button color=\"primary\" (click)=\"openDiagramFor(c)\" matTooltip=\"Ver rela\u00C3\u00A7\u00C3\u00A3o no diagrama\"><mat-icon>schema</mat-icon><span>Diagrama</span></button>\n                </span>\n                <span class=\"spacer\"></span>\n                <span class=\"action-group\">\n                  <button mat-icon-button color=\"warn\" (click)=\"removeConnection(i)\" matTooltip=\"Remover\"><mat-icon>delete</mat-icon></button>\n                </span>\n              </div>\n              <div class=\"card-details\" matListItemLine [class.expanded]=\"isExpanded(i)\" [style.maxHeight]=\"isExpanded(i) ? '240px' : '0px'\" [style.opacity]=\"isExpanded(i) ? 1 : 0\" [style.pointerEvents]=\"isExpanded(i) ? 'auto' : 'none'\">\n                <div class=\"stepper\">\n                  <div class=\"step from-step\">\n                    <div class=\"dot from\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">De</div>\n                      <div class=\"value\">{{ showFriendly ? fromFriendly(c) : fromLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step to-step\">\n                    <div class=\"dot to\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Para</div>\n                      <div class=\"value\">{{ showFriendly ? toFriendly(c) : toLabel(c) }}</div>\n                    </div>\n                  </div>\n                  <div class=\"step map-step\" *ngIf=\"c.map\">\n                    <div class=\"dot map\"></div>\n                    <div class=\"content\">\n                      <div class=\"label\">Map</div>\n                      <div class=\"value mono\">{{ c.map }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </mat-list-item>\n          </ng-container>\n        </ng-template>\n      </mat-list>\n      <ng-template #noConns>\n        <div class=\"pdx-empty-list\" role=\"status\" aria-live=\"polite\">\n          <mat-icon>link_off</mat-icon>\n          <div>Nenhuma conex\u00C3\u00A3o definida. Use \"Nova conex\u00C3\u00A3o\".</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"pdx-conn-editor\" role=\"form\" aria-label=\"Editor de conex\u00C3\u00A3o\">\n      <ng-container *ngIf=\"selectedIndex() >= 0; else emptyEditor\">\n        <div class=\"form-grid\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Origem (widget.key)</mat-label>\n            <input matInput [ngModel]=\"selectedSourcePrimaryValue()\" (ngModelChange)=\"setSelectedSourcePrimaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedSourceSecondary()\">\n            <mat-label>Evento (output)</mat-label>\n            <input matInput [ngModel]=\"selectedSourceSecondaryValue()\" (ngModelChange)=\"setSelectedSourceSecondaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Destino (widget.key)</mat-label>\n            <input matInput [ngModel]=\"selectedTargetPrimaryValue()\" (ngModelChange)=\"setSelectedTargetPrimaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedTargetSecondary()\">\n            <mat-label>Input</mat-label>\n            <input matInput [ngModel]=\"selectedTargetSecondaryValue()\" (ngModelChange)=\"setSelectedTargetSecondaryValue($event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-span\">\n            <mat-label>Map (opcional)</mat-label>\n            <input matInput [ngModel]=\"selectedMapValue()\" (ngModelChange)=\"setSelectedMapValue($event)\" [placeholder]=\"mapPlaceholder\" />\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              matTooltip=\"Ex.: payload.id ou ${payload.id}.\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </mat-form-field>\n          <div class=\"full-span\">\n            <button mat-flat-button color=\"primary\" (click)=\"onSave()\"><mat-icon [praxisIcon]=\"'save'\"></mat-icon>Salvar</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyEditor>\n        <div class=\"pdx-empty-editor\">Selecione uma conex\u00C3\u00A3o para editar.</div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".pdx-conn-root{display:grid;gap:12px;color:var(--md-sys-color-on-surface)}.pdx-conn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pdx-conn-title{font-weight:600}.pdx-conn-count{color:var(--md-sys-color-on-surface-variant)}.pdx-conn-search{width:260px}.pdx-conn-select{width:160px}.pdx-conn-group{width:170px}.pdx-spacer{flex:1}.pdx-diagram-cta span{margin-left:6px}.pdx-conn-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.pdx-conn-list{height:540px;overflow:auto;padding:8px 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-conn-list .mat-mdc-list-item.mdc-list-item{height:auto;padding:10px 8px 8px}.pdx-conn-list .mat-mdc-list-item.selected{background:var(--md-sys-color-primary-container)}.card-head{display:flex;align-items:center;gap:6px}.card-head .spacer{flex:1}.card-head .comp-icon{opacity:.85}.card-head .expand-btn{margin-left:4px}.status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px}.status-pill.ok{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.status-pill.warn{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.status-pill.err{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.map-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.map-chip .map-icon{font-size:16px}.pdx-conn-editor{min-height:540px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface)}.pdx-empty-list{padding:16px;display:grid;place-items:center;gap:6px;opacity:.8}.pdx-empty-editor{padding:16px;opacity:.75}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.full-span{grid-column:1/-1}.stepper{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:8px 0}.step{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:start}.dot{width:12px;height:12px;border-radius:50%;margin-top:5px}.dot.from{background:var(--md-sys-color-primary-container)}.dot.to{background:var(--md-sys-color-secondary-container)}.dot.map{background:var(--md-sys-color-tertiary-container)}.group-block{padding:6px 6px 10px}.group-header{display:flex;gap:8px;align-items:center;padding:8px 0}.group-title{font-weight:600}.group-count{opacity:.75}.group-list{display:grid;gap:6px}.pdx-badge{width:10px;height:10px;border-radius:50%;display:inline-block}.pdx-badge.from{background:var(--md-sys-color-primary-container)}.pdx-badge.to{background:var(--md-sys-color-secondary-container)}.pdx-badge.map{background:var(--md-sys-color-tertiary-container)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}@media(max-width:960px){.pdx-conn-grid{grid-template-columns:1fr}.pdx-conn-list,.pdx-conn-editor{min-height:360px}.pdx-conn-search,.pdx-conn-select,.pdx-conn-group{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i1$1.ComponentMetadataRegistry }, { type: i3$1.MatSnackBar }], propDecorators: { page: [{
                 type: Input
             }], widgets: [{
@@ -1729,7 +1850,7 @@ class WidgetShellEditorComponent {
         <div class="shell-empty">Nenhuma ação configurada.</div>
       </ng-template>
     </div>
-  `, isInline: true, styles: [".shell-editor{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.shell-head{display:flex;align-items:center;gap:12px}.shell-title{font-weight:600}.shell-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-section{font-weight:600;margin-top:8px}.shell-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:1fr auto;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;background:var(--md-sys-color-surface-container-low)}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%}.shell-preview{border:1px dashed var(--md-sys-color-outline-variant);border-radius:12px;padding:12px}.shell-preview-card{background:var(--pdx-shell-card-bg, var(--md-sys-color-surface));border:1px solid var(--pdx-shell-card-border, var(--md-sys-color-outline-variant));border-radius:var(--pdx-shell-card-radius, 14px);box-shadow:var(--pdx-shell-card-shadow, var(--mat-elevation-level2));overflow:hidden}.shell-preview-card.no-shell{background:transparent;border:none;box-shadow:none}.shell-preview-card.expanded{box-shadow:var(--pdx-shell-card-shadow, 0 16px 34px rgba(0,0,0,.32));transform:scale(1.01)}.shell-preview-header{display:flex;align-items:center;gap:12px;padding:10px 12px 8px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.shell-preview-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.shell-preview-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.shell-preview-text{min-width:0}.shell-preview-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 14px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-subtitle{font-size:var(--pdx-shell-subtitle-size, 12px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-actions{display:flex;align-items:center;gap:6px}.pdx-preview-text{padding:0 8px}.pdx-preview-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-preview-label{font-size:12px;font-weight:500}.shell-preview-body{padding:var(--pdx-shell-body-padding, 10px 12px 12px 12px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit);font-size:12px}.shell-preview-body.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".shell-editor{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.shell-head{display:flex;align-items:center;gap:12px}.shell-title{font-weight:600}.shell-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-section{font-weight:600;margin-top:8px}.shell-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:1fr auto;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;background:var(--md-sys-color-surface-container-low)}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%}.shell-preview{border:1px dashed var(--md-sys-color-outline-variant);border-radius:12px;padding:12px}.shell-preview-card{background:var(--pdx-shell-card-bg, var(--md-sys-color-surface));border:1px solid var(--pdx-shell-card-border, var(--md-sys-color-outline-variant));border-radius:var(--pdx-shell-card-radius, 14px);box-shadow:var(--pdx-shell-card-shadow, var(--mat-elevation-level2));overflow:hidden}.shell-preview-card.no-shell{background:transparent;border:none;box-shadow:none}.shell-preview-card.expanded{box-shadow:var(--pdx-shell-card-shadow, 0 16px 34px rgba(0,0,0,.32));transform:scale(1.01)}.shell-preview-header{display:flex;align-items:center;gap:12px;padding:10px 12px 8px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.shell-preview-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.shell-preview-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.shell-preview-text{min-width:0}.shell-preview-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 14px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-subtitle{font-size:var(--pdx-shell-subtitle-size, 12px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell-preview-actions{display:flex;align-items:center;gap:6px}.pdx-preview-text{padding:0 8px}.pdx-preview-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-preview-label{font-size:12px;font-weight:500}.shell-preview-body{padding:var(--pdx-shell-body-padding, 10px 12px 12px 12px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit);font-size:12px}.shell-preview-body.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetShellEditorComponent, decorators: [{
             type: Component,
@@ -2421,7 +2542,7 @@ class DynamicPageConfigEditorComponent {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [".page-config{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;height:100%;box-sizing:border-box}.page-head{display:flex;align-items:center;gap:12px;flex-shrink:0}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.page-title{font-weight:600}.spacer{flex:1}.page-section{font-weight:600;margin-top:8px}.page-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.page-config .mat-mdc-form-field{width:100%}.config-tabs{flex:1;min-height:0;display:flex;flex-direction:column}::ng-deep .config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-body,::ng-deep .mat-mdc-tab-body-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.tab-content{padding-top:16px;display:flex;flex-direction:column;gap:12px;height:100%;box-sizing:border-box;overflow-y:auto}.json-editor-container{display:flex;flex-direction:column;height:100%;flex:1;gap:8px;overflow:hidden}.json-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0}.json-editor-wrapper{flex:1;width:100%;height:100%;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;overflow:hidden;background-color:var(--md-sys-color-surface)}.json-editor-wrapper textarea{width:100%;height:100%;border:none;outline:none;resize:none;padding:12px;box-sizing:border-box;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:13px;line-height:1.4;background:transparent;color:var(--md-sys-color-on-surface);white-space:pre}.json-editor-wrapper textarea:focus{background-color:var(--md-sys-color-surface-container-low)}.json-error{color:var(--md-sys-color-error);font-size:12px;padding:0 8px;flex-shrink:0}.validation-status{font-size:12px;font-weight:500;padding:4px 8px;border-radius:4px}.validation-status.valid{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}.validation-status.invalid{color:var(--md-sys-color-error);background:var(--md-sys-color-error-container)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".page-config{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;height:100%;box-sizing:border-box}.page-head{display:flex;align-items:center;gap:12px;flex-shrink:0}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.page-title{font-weight:600}.spacer{flex:1}.page-section{font-weight:600;margin-top:8px}.page-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.page-config .mat-mdc-form-field{width:100%}.config-tabs{flex:1;min-height:0;display:flex;flex-direction:column}::ng-deep .config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-body,::ng-deep .mat-mdc-tab-body-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.tab-content{padding-top:16px;display:flex;flex-direction:column;gap:12px;height:100%;box-sizing:border-box;overflow-y:auto}.json-editor-container{display:flex;flex-direction:column;height:100%;flex:1;gap:8px;overflow:hidden}.json-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0}.json-editor-wrapper{flex:1;width:100%;height:100%;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;overflow:hidden;background-color:var(--md-sys-color-surface)}.json-editor-wrapper textarea{width:100%;height:100%;border:none;outline:none;resize:none;padding:12px;box-sizing:border-box;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:13px;line-height:1.4;background:transparent;color:var(--md-sys-color-on-surface);white-space:pre}.json-editor-wrapper textarea:focus{background-color:var(--md-sys-color-surface-container-low)}.json-error{color:var(--md-sys-color-error);font-size:12px;padding:0 8px;flex-shrink:0}.validation-status{font-size:12px;font-weight:500;padding:4px 8px;border-radius:4px}.validation-status.valid{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}.validation-status.invalid{color:var(--md-sys-color-error);background:var(--md-sys-color-error-container)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
@@ -2555,7 +2676,7 @@ const PAGE_BUILDER_AI_CAPABILITIES = {
         'praxis-dynamic-gridster-page',
     ],
     notes: [
-        'page segue o modelo GridPageDefinition (widgets, connections, options, context).',
+        'page segue o modelo GridPageDefinition (widgets, connections, options, context e state opcional).',
         'pageIdentity identifica o escopo de persistência e não pertence ao objeto page.',
     ],
     capabilities: [
@@ -2577,6 +2698,11 @@ const PAGE_BUILDER_AI_CAPABILITIES = {
         { path: 'page.options.cols', category: 'layout', valueKind: 'number', description: 'Numero de colunas do grid.' },
         { path: 'page.options.rowHeight', category: 'layout', valueKind: 'number', description: 'Altura das linhas (px).' },
         { path: 'page.options.gap', category: 'layout', valueKind: 'number', description: 'Espacamento entre widgets (px).' },
+        // --- Page state ---
+        { path: 'page.state', category: 'state', valueKind: 'object', description: 'Estado declarativo opcional da pagina.' },
+        { path: 'page.state.values', category: 'state', valueKind: 'object', description: 'Valores primarios persistiveis do estado da pagina.' },
+        { path: 'page.state.schema', category: 'state', valueKind: 'object', description: 'Descritores dos paths de estado primario.' },
+        { path: 'page.state.derived', category: 'state', valueKind: 'object', description: 'Descritores de estado derivado recomputado pelo runtime.' },
         // --- Widgets ---
         { path: 'page.widgets', category: 'widgets', valueKind: 'array', description: 'Widgets da página.' },
         { path: 'page.widgets[].key', category: 'widgets', valueKind: 'string', description: 'ID unico do widget.', critical: true },
@@ -2595,10 +2721,12 @@ const PAGE_BUILDER_AI_CAPABILITIES = {
         { path: 'page.connections[].from', category: 'connections', valueKind: 'object', description: 'Origem da conexão.' },
         { path: 'page.connections[].from.widget', category: 'connections', valueKind: 'string', description: 'Widget origem (key).' },
         { path: 'page.connections[].from.output', category: 'connections', valueKind: 'string', description: 'Output do widget origem.' },
+        { path: 'page.connections[].from.state', category: 'connections', valueKind: 'string', description: 'Path de state origem quando a conexao parte do estado da pagina.' },
         { path: 'page.connections[].to', category: 'connections', valueKind: 'object', description: 'Destino da conexão.' },
         { path: 'page.connections[].to.widget', category: 'connections', valueKind: 'string', description: 'Widget destino (key).' },
         { path: 'page.connections[].to.input', category: 'connections', valueKind: 'string', description: 'Input destino (path).' },
         { path: 'page.connections[].to.bindingOrder', category: 'connections', valueKind: 'array', description: 'Ordem de aplicação dos inputs.' },
+        { path: 'page.connections[].to.state', category: 'connections', valueKind: 'string', description: 'Path de state destino quando a conexao escreve no estado da pagina.' },
         { path: 'page.connections[].map', category: 'connections', valueKind: 'expression', description: 'Mapeamento do payload.' },
         { path: 'page.connections[].set', category: 'connections', valueKind: 'object', description: 'Overrides fixos aplicados ao destino.' },
         { path: 'page.connections[].meta', category: 'connections', valueKind: 'object', description: 'Metadados opcionais para operadores de runtime.' },
@@ -2906,6 +3034,12 @@ class GraphMapperService {
     constructor(registry) {
         this.registry = registry;
     }
+    isWidgetSource(from) {
+        return 'widget' in from;
+    }
+    isWidgetTarget(to) {
+        return 'widget' in to;
+    }
     /** Build nodes and edges for a given page definition and widgets. */
     mapToGraph(page, widgets) {
         const nodes = [];
@@ -2918,6 +3052,7 @@ class GraphMapperService {
         const gap = 28;
         let leftY = 0;
         let rightY = 0;
+        const stateNodeIds = new Map();
         // First pass: create a node per widget
         for (const w of widgets) {
             const meta = this.registry.get(w.definition.id);
@@ -3055,14 +3190,25 @@ class GraphMapperService {
         const conns = (page?.connections || []);
         for (let i = 0; i < conns.length; i++) {
             const c = conns[i];
-            const fromNodeId = c.from.widget;
-            const fromPortId = `out:${c.from.output}`;
-            let toNodeId = c.to.widget;
-            let toPortId = `in:${c.to.input}`;
-            const deep = this.parseTabsPath(c.to.input);
+            const fromState = !this.isWidgetSource(c.from)
+                ? this.ensureStateNode(stateNodeIds, nodeById, nodes, page, c.from.state, 'output', colWidth, gap, leftY)
+                : null;
+            const fromNodeId = this.isWidgetSource(c.from) ? c.from.widget : fromState.nodeId;
+            const fromPortId = this.isWidgetSource(c.from) ? `out:${c.from.output}` : 'out:state';
+            const toState = !this.isWidgetTarget(c.to)
+                ? this.ensureStateNode(stateNodeIds, nodeById, nodes, page, c.to.state, 'input', colWidth, gap, rightY)
+                : null;
+            let toNodeId = this.isWidgetTarget(c.to) ? c.to.widget : toState.nodeId;
+            let toPortId = this.isWidgetTarget(c.to) ? `in:${c.to.input}` : 'in:state';
+            if (fromState?.created)
+                leftY += rowHeight + gap;
+            if (toState?.created)
+                rightY += rowHeight + gap;
+            const deep = this.isWidgetTarget(c.to) ? this.parseTabsPath(c.to.input) : null;
             let friendlyPath;
-            if (deep) {
-                const childId = `${c.to.widget}#${deep.kind}[${deep.index}]/${deep.widgetIndex}`;
+            if (deep && this.isWidgetTarget(c.to)) {
+                const target = c.to;
+                const childId = `${target.widget}#${deep.kind}[${deep.index}]/${deep.widgetIndex}`;
                 // If such child exists, route edge to it and its input name
                 if (nodes.some((n) => n.id === childId)) {
                     toNodeId = childId;
@@ -3072,7 +3218,7 @@ class GraphMapperService {
                     // Keep to widget but still expose label/path
                     toPortId = `in:${deep.input}`;
                 }
-                const cfg = tabsCfgByKey.get(c.to.widget);
+                const cfg = tabsCfgByKey.get(target.widget);
                 const labelFromCfg = deep.kind === 'group' ? cfg?.tabs?.[deep.index]?.textLabel : cfg?.nav?.links?.[deep.index]?.label;
                 const containerLabel = labelFromCfg ? (deep.kind === 'group' ? `Aba: ${labelFromCfg}` : `Link: ${labelFromCfg}`) : (deep.kind === 'group' ? `Aba ${deep.index + 1}` : `Link ${deep.index + 1}`);
                 const child = nodes.find(n => n.id === childId);
@@ -3086,12 +3232,50 @@ class GraphMapperService {
                 from: { nodeId: fromNodeId, portId: fromPortId },
                 to: { nodeId: toNodeId, portId: toPortId },
                 label: c.map || undefined,
-                meta: { map: c.map, bindingOrder: c.to.bindingOrder, ...(friendlyPath ? { friendlyPath } : {}) },
+                meta: { map: c.map, bindingOrder: this.isWidgetTarget(c.to) ? c.to.bindingOrder : undefined, ...(friendlyPath ? { friendlyPath } : {}) },
             };
             edges.push(edge);
         }
         return { nodes, edges };
     }
+    ensureStateNode(stateNodeIds, nodeById, nodes, page, statePath, kind, colWidth, gap, offsetY) {
+        const key = `${kind}:${statePath}`;
+        const existing = stateNodeIds.get(key);
+        if (existing)
+            return { nodeId: existing, created: false };
+        const nodeId = `state:${kind}:${encodeURIComponent(statePath)}`;
+        const portId = kind === 'output' ? 'out:state' : 'in:state';
+        const x = kind === 'output' ? gap : colWidth + gap * 3;
+        const structuredState = this.normalizeState(page?.state);
+        const isDerived = !!structuredState?.derived?.[statePath];
+        const node = {
+            id: nodeId,
+            label: `${isDerived ? 'derived' : 'state'}:${statePath}`,
+            icon: isDerived ? 'function' : 'account_tree',
+            type: isDerived ? 'page-derived-state' : 'page-state',
+            parentId: null,
+            collapsed: true,
+            bounds: { x, y: gap + offsetY, width: colWidth, height: 72 },
+            ports: [{
+                    id: portId,
+                    label: statePath,
+                    description: statePath,
+                    kind,
+                    anchor: { x: kind === 'output' ? x : x + colWidth, y: gap + offsetY + 24 },
+                }],
+        };
+        nodes.push(node);
+        nodeById.set(nodeId, node);
+        stateNodeIds.set(key, nodeId);
+        return { nodeId, created: true };
+    }
+    normalizeState(state) {
+        if (!state || typeof state !== 'object' || Array.isArray(state))
+            return null;
+        if ('values' in state || 'schema' in state || 'derived' in state)
+            return state;
+        return null;
+    }
     ensurePort(nodeById, nodeId, portId, kind, colWidth) {
         const n = nodeById.get(nodeId);
         if (!n)
@@ -3171,6 +3355,21 @@ class ConnectionGraphComponent {
     initialSnapshot = '[]';
     placeholderSample = 'payload | payload.id | ${payload.id}';
     connectedPorts = new Map();
+    isWidgetSource(from) {
+        return 'widget' in from;
+    }
+    isWidgetTarget(to) {
+        return 'widget' in to;
+    }
+    fromLabel(c) {
+        return this.isWidgetSource(c.from) ? `${c.from.widget}.${c.from.output}` : `state:${c.from.state}`;
+    }
+    toLabel(c) {
+        return this.isWidgetTarget(c.to) ? `${c.to.widget}.${c.to.input}` : `state:${c.to.state}`;
+    }
+    bindingOrderLabel(c) {
+        return this.isWidgetTarget(c.to) && c.to.bindingOrder?.length ? c.to.bindingOrder.join(', ') : '';
+    }
     isPortConnected(nodeId, portId) {
         const set = this.connectedPorts.get(nodeId);
         return !!set && set.has(portId);
@@ -3244,12 +3443,12 @@ class ConnectionGraphComponent {
     }
     // External focus by connection (from Builder or other callers)
     focusConnection(conn) {
-        const fromNodeId = conn.from.widget;
-        const fromPortId = `out:${conn.from.output}`;
-        let toNodeId = conn.to.widget;
-        let toPortId = `in:${conn.to.input}`;
-        const deep = this.parseTabsPath(conn.to.input);
-        if (deep) {
+        const fromNodeId = this.isWidgetSource(conn.from) ? conn.from.widget : `state:output:${encodeURIComponent(conn.from.state)}`;
+        const fromPortId = this.isWidgetSource(conn.from) ? `out:${conn.from.output}` : 'out:state';
+        let toNodeId = this.isWidgetTarget(conn.to) ? conn.to.widget : `state:input:${encodeURIComponent(conn.to.state)}`;
+        let toPortId = this.isWidgetTarget(conn.to) ? `in:${conn.to.input}` : 'in:state';
+        const deep = this.isWidgetTarget(conn.to) ? this.parseTabsPath(conn.to.input) : null;
+        if (deep && this.isWidgetTarget(conn.to)) {
             const childId = `${conn.to.widget}#${deep.kind}[${deep.index}]/${deep.widgetIndex}`;
             if (this.nodes().some(n => n.id === childId)) {
                 toNodeId = childId;
@@ -3619,10 +3818,10 @@ class ConnectionGraphComponent {
           <button mat-icon-button (click)="showDetails=false" aria-label="Fechar"><mat-icon>close</mat-icon></button>
         </div>
         <div class="details-body" *ngIf="currentConn() as c">
-          <div><b>De:</b> {{ c.from.widget }}.{{ c.from.output }}</div>
-          <div><b>Para:</b> {{ c.to.widget }}.{{ c.to.input }}</div>
+          <div><b>De:</b> {{ fromLabel(c) }}</div>
+          <div><b>Para:</b> {{ toLabel(c) }}</div>
           <div><b>map:</b> {{ c.map || 'payload' }}</div>
-          <div *ngIf="c.to.bindingOrder?.length"><b>bindingOrder:</b> {{ c.to.bindingOrder?.join(', ') }}</div>
+          <div *ngIf="bindingOrderLabel(c)"><b>bindingOrder:</b> {{ bindingOrderLabel(c) }}</div>
           <div class="details-actions">
             <button mat-button color="primary" (click)="openBuilder()"><mat-icon>tune</mat-icon> Editar no Builder</button>
             <button mat-button color="warn" (click)="removeEdge(selectedEdgeIndex())"><mat-icon>delete</mat-icon> Remover</button>
@@ -3755,10 +3954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <button mat-icon-button (click)="showDetails=false" aria-label="Fechar"><mat-icon>close</mat-icon></button>
         </div>
         <div class="details-body" *ngIf="currentConn() as c">
-          <div><b>De:</b> {{ c.from.widget }}.{{ c.from.output }}</div>
-          <div><b>Para:</b> {{ c.to.widget }}.{{ c.to.input }}</div>
+          <div><b>De:</b> {{ fromLabel(c) }}</div>
+          <div><b>Para:</b> {{ toLabel(c) }}</div>
           <div><b>map:</b> {{ c.map || 'payload' }}</div>
-          <div *ngIf="c.to.bindingOrder?.length"><b>bindingOrder:</b> {{ c.to.bindingOrder?.join(', ') }}</div>
+          <div *ngIf="bindingOrderLabel(c)"><b>bindingOrder:</b> {{ bindingOrderLabel(c) }}</div>
           <div class="details-actions">
             <button mat-button color="primary" (click)="openBuilder()"><mat-icon>tune</mat-icon> Editar no Builder</button>
             <button mat-button color="warn" (click)="removeEdge(selectedEdgeIndex())"><mat-icon>delete</mat-icon> Remover</button>
@@ -3945,7 +4144,7 @@ class ConnectionEditorComponent {
         return input;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConnectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConnectionEditorComponent, isStandalone: true, selector: "praxis-connection-editor", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"conn-editor\">\n  <mat-tab-group class=\"conn-tabs\">\n    <mat-tab label=\"Construtor\">\n      <praxis-connection-builder\n        [page]=\"pageState() || undefined\"\n        [widgets]=\"widgets() || undefined\"\n        (pageChange)=\"onPageChange($event)\"\n      ></praxis-connection-builder>\n    </mat-tab>\n    <mat-tab label=\"Diagrama\">\n      <praxis-connection-graph\n        [page]=\"pageState() || undefined\"\n        [widgets]=\"widgets() || undefined\"\n        (pageChange)=\"onPageChange($event)\"\n      ></praxis-connection-graph>\n    </mat-tab>\n    <mat-tab label=\"JSON\">\n      <div class=\"conn-json\">\n        <mat-form-field class=\"json-field\" appearance=\"outline\">\n          <mat-label>Pagina (JSON)</mat-label>\n          <textarea matInput rows=\"16\" [formControl]=\"jsonControl\"></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"Use este JSON para copiar/colar a p\u00E1gina completa.\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        @if (jsonError()) {\n          <div class=\"json-error\" role=\"alert\">{{ jsonError() }}</div>\n        }\n        <div class=\"json-actions\">\n          <button mat-stroked-button type=\"button\" (click)=\"resetJson()\">Recarregar</button>\n        </div>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: [".conn-editor{display:flex;flex-direction:column;height:100%;min-height:480px;color:var(--md-sys-color-on-surface)}.conn-tabs{flex:1}.conn-json{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.json-field{width:100%}.json-error{color:var(--md-sys-color-error);font-size:13px}.json-actions{display:flex;justify-content:flex-end}.conn-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ConnectionBuilderComponent, selector: "praxis-connection-builder", inputs: ["page", "widgets"], outputs: ["pageChange"] }, { kind: "component", type: ConnectionGraphComponent, selector: "praxis-connection-graph", inputs: ["page", "widgets"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConnectionEditorComponent, isStandalone: true, selector: "praxis-connection-editor", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"conn-editor\">\n  <mat-tab-group class=\"conn-tabs\">\n    <mat-tab label=\"Construtor\">\n      <praxis-connection-builder\n        [page]=\"pageState() || undefined\"\n        [widgets]=\"widgets() || undefined\"\n        (pageChange)=\"onPageChange($event)\"\n      ></praxis-connection-builder>\n    </mat-tab>\n    <mat-tab label=\"Diagrama\">\n      <praxis-connection-graph\n        [page]=\"pageState() || undefined\"\n        [widgets]=\"widgets() || undefined\"\n        (pageChange)=\"onPageChange($event)\"\n      ></praxis-connection-graph>\n    </mat-tab>\n    <mat-tab label=\"JSON\">\n      <div class=\"conn-json\">\n        <mat-form-field class=\"json-field\" appearance=\"outline\">\n          <mat-label>Pagina (JSON)</mat-label>\n          <textarea matInput rows=\"16\" [formControl]=\"jsonControl\"></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"Use este JSON para copiar/colar a p\u00E1gina completa.\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        @if (jsonError()) {\n          <div class=\"json-error\" role=\"alert\">{{ jsonError() }}</div>\n        }\n        <div class=\"json-actions\">\n          <button mat-stroked-button type=\"button\" (click)=\"resetJson()\">Recarregar</button>\n        </div>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: [".conn-editor{display:flex;flex-direction:column;height:100%;min-height:480px;color:var(--md-sys-color-on-surface)}.conn-tabs{flex:1}.conn-json{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.json-field{width:100%}.json-error{color:var(--md-sys-color-error);font-size:13px}.json-actions{display:flex;justify-content:flex-end}.conn-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ConnectionBuilderComponent, selector: "praxis-connection-builder", inputs: ["page", "widgets"], outputs: ["pageChange"] }, { kind: "component", type: ConnectionGraphComponent, selector: "praxis-connection-graph", inputs: ["page", "widgets"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConnectionEditorComponent, decorators: [{
             type: Component,
@@ -4052,8 +4251,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.MatDialogRef }] });
 
+const DERIVED_OPERATORS = ['merge-objects', 'pick', 'omit'];
+const MERGE_STRATEGIES = ['replace', 'merge', 'append', 'remove-keys'];
 class PageConfigEditorComponent {
-    contextExample = 'Ex.: {\"tenantId\":\"acme\",\"locale\":\"pt-BR\"}';
+    contextExample = 'Ex.: {"tenantId":"acme","locale":"pt-BR"}';
+    stateValuesExample = 'Ex.: {"query":{"filter":{"year":2026}},"selection":{"department":"Finance"}}';
+    derivedOperators = DERIVED_OPERATORS;
+    mergeStrategies = MERGE_STRATEGIES;
     page = input(null, ...(ngDevMode ? [{ debugName: "page" }] : []));
     identity = input(null, ...(ngDevMode ? [{ debugName: "identity" }] : []));
     gridsterOptions = input(null, ...(ngDevMode ? [{ debugName: "gridsterOptions" }] : []));
@@ -4064,8 +4268,13 @@ class PageConfigEditorComponent {
         gap: new FormControl(null),
     });
     contextControl = new FormControl('', { nonNullable: true });
+    stateValuesControl = new FormControl('', { nonNullable: true });
+    schemaNodes = new FormArray([]);
+    derivedNodes = new FormArray([]);
     contextError = signal(null, ...(ngDevMode ? [{ debugName: "contextError" }] : []));
+    stateError = signal(null, ...(ngDevMode ? [{ debugName: "stateError" }] : []));
     lastContext = '';
+    lastStateValues = '';
     constructor() {
         effect(() => {
             const next = this.parsePage(this.page());
@@ -4081,23 +4290,51 @@ class PageConfigEditorComponent {
                 this.contextControl.setValue(context, { emitEvent: false });
                 this.contextError.set(null);
             }
-        }, { allowSignalWrites: true });
+            this.hydrateStateEditor(next?.state);
+        });
         this.contextControl.valueChanges
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.contextError.set(null));
+        this.stateValuesControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.stateError.set(null));
+        this.schemaNodes.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.stateError.set(null));
+        this.derivedNodes.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.stateError.set(null));
+    }
+    addSchemaNode(seed) {
+        this.schemaNodes.push(this.createSchemaNodeGroup(seed));
+    }
+    removeSchemaNode(index) {
+        this.schemaNodes.removeAt(index);
+    }
+    addDerivedNode(seed) {
+        this.derivedNodes.push(this.createDerivedNodeGroup(seed));
+    }
+    removeDerivedNode(index) {
+        this.derivedNodes.removeAt(index);
     }
     apply() {
         const next = this.parsePage(this.page()) || { widgets: [] };
         const options = this.buildOptions(this.form.value);
         const context = this.parseContext(this.contextControl.value);
+        const state = this.buildState();
         if (context === null) {
             this.contextError.set('JSON invalido');
             return;
         }
+        if (state === null) {
+            this.stateError.set('JSON invalido');
+            return;
+        }
         const updated = {
             ...next,
             options,
             context: context || undefined,
+            state: state || undefined,
         };
         this.pageChange.emit(updated);
     }
@@ -4113,6 +4350,197 @@ class PageConfigEditorComponent {
         this.lastContext = context;
         this.contextControl.setValue(context, { emitEvent: false });
         this.contextError.set(null);
+        this.hydrateStateEditor(next?.state);
+    }
+    hydrateStateEditor(state) {
+        const normalized = this.normalizeState(state);
+        const nextValues = normalized.values ? JSON.stringify(normalized.values, null, 2) : '';
+        if (nextValues !== this.lastStateValues) {
+            this.lastStateValues = nextValues;
+            this.stateValuesControl.setValue(nextValues, { emitEvent: false });
+            this.stateError.set(null);
+        }
+        this.replaceSchemaNodes(normalized.schema);
+        this.replaceDerivedNodes(normalized.derived);
+    }
+    replaceSchemaNodes(schema) {
+        this.schemaNodes.clear({ emitEvent: false });
+        for (const [path, config] of Object.entries(schema || {})) {
+            this.schemaNodes.push(this.createSchemaNodeGroup({ path, config }), { emitEvent: false });
+        }
+    }
+    replaceDerivedNodes(derived) {
+        this.derivedNodes.clear({ emitEvent: false });
+        for (const [path, config] of Object.entries(derived || {})) {
+            this.derivedNodes.push(this.createDerivedNodeGroup({ path, config }), { emitEvent: false });
+        }
+    }
+    createSchemaNodeGroup(seed) {
+        const config = seed?.config || {};
+        return new FormGroup({
+            path: new FormControl(seed?.path || '', { nonNullable: true, validators: [Validators.required] }),
+            type: new FormControl(config.type || '', { nonNullable: true }),
+            initial: new FormControl(config.initial === undefined ? '' : JSON.stringify(config.initial, null, 2), { nonNullable: true }),
+            persist: new FormControl(typeof config.persist === 'boolean' ? String(config.persist) : '', { nonNullable: true }),
+            mergeStrategy: new FormControl(config.mergeStrategy || '', { nonNullable: true }),
+            description: new FormControl(config.description || '', { nonNullable: true }),
+        });
+    }
+    createDerivedNodeGroup(seed) {
+        const config = seed?.config;
+        const compute = config?.compute;
+        const normalizedComputeKind = compute?.kind === 'operator' && compute.operator === 'template'
+            ? 'template'
+            : compute?.kind || 'operator';
+        const operatorOptions = compute?.kind === 'operator'
+            ? compute.options || {}
+            : {};
+        const sourcePath = typeof operatorOptions['source'] === 'string'
+            ? operatorOptions['source']
+            : '';
+        const keysCsv = Array.isArray(operatorOptions['keys'])
+            ? operatorOptions['keys'].filter((item) => typeof item === 'string').join(', ')
+            : '';
+        return new FormGroup({
+            path: new FormControl(seed?.path || '', { nonNullable: true, validators: [Validators.required] }),
+            dependsOn: new FormControl((config?.dependsOn || []).join(', '), { nonNullable: true }),
+            computeKind: new FormControl(normalizedComputeKind, { nonNullable: true }),
+            operator: new FormControl(compute?.kind === 'operator' ? compute.operator || 'merge-objects' : 'merge-objects', {
+                nonNullable: true,
+            }),
+            sourcePath: new FormControl(sourcePath, { nonNullable: true }),
+            keysCsv: new FormControl(keysCsv, { nonNullable: true }),
+            expression: new FormControl(compute?.kind === 'expr' ? compute.expression || '' : '', { nonNullable: true }),
+            transformerId: new FormControl(compute?.kind === 'transformer' ? compute.transformerId || '' : '', { nonNullable: true }),
+            options: new FormControl(compute?.kind === 'transformer'
+                ? JSON.stringify(compute.options || {}, null, 2)
+                : '', { nonNullable: true }),
+            template: new FormControl(compute?.kind === 'template'
+                ? JSON.stringify(compute.value, null, 2)
+                : compute?.kind === 'operator' && compute.operator === 'template'
+                    ? JSON.stringify(compute.options?.['value'], null, 2)
+                    : '', { nonNullable: true }),
+            description: new FormControl(config?.description || '', { nonNullable: true }),
+        });
+    }
+    buildState() {
+        const values = this.parseJson(this.stateValuesControl.value, {});
+        if (values === null)
+            return null;
+        const schema = this.buildSchema();
+        if (schema === null)
+            return null;
+        const derived = this.buildDerived();
+        if (derived === null)
+            return null;
+        if (!Object.keys(values).length && !Object.keys(schema).length && !Object.keys(derived).length) {
+            return undefined;
+        }
+        const state = {};
+        if (Object.keys(values).length)
+            state.values = values;
+        if (Object.keys(schema).length)
+            state.schema = schema;
+        if (Object.keys(derived).length)
+            state.derived = derived;
+        return state;
+    }
+    buildSchema() {
+        const schema = {};
+        for (const group of this.schemaNodes.controls) {
+            const path = group.controls.path.value.trim();
+            if (!path)
+                continue;
+            const initial = this.parseJson(group.controls.initial.value, undefined);
+            if (initial === null)
+                return null;
+            const node = {};
+            const type = group.controls.type.value.trim();
+            const persist = group.controls.persist.value.trim();
+            const mergeStrategy = group.controls.mergeStrategy.value.trim();
+            const description = group.controls.description.value.trim();
+            if (type)
+                node.type = type;
+            if (initial !== undefined)
+                node.initial = initial;
+            if (persist === 'true')
+                node.persist = true;
+            if (persist === 'false')
+                node.persist = false;
+            if (mergeStrategy)
+                node.mergeStrategy = mergeStrategy;
+            if (description)
+                node.description = description;
+            schema[path] = node;
+        }
+        return schema;
+    }
+    buildDerived() {
+        const derived = {};
+        for (const group of this.derivedNodes.controls) {
+            const path = group.controls.path.value.trim();
+            if (!path)
+                continue;
+            const dependsOn = group.controls.dependsOn.value
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean);
+            const computeKind = group.controls.computeKind.value;
+            const description = group.controls.description.value.trim();
+            let compute;
+            if (computeKind === 'template') {
+                const value = this.parseJson(group.controls.template.value, undefined);
+                if (value === null)
+                    return null;
+                compute = { kind: 'template', value };
+            }
+            else if (computeKind === 'expr') {
+                compute = { kind: 'expr', expression: group.controls.expression.value.trim() };
+            }
+            else if (computeKind === 'transformer') {
+                const options = this.parseJson(group.controls.options.value, {});
+                if (options === null)
+                    return null;
+                compute = {
+                    kind: 'transformer',
+                    transformerId: group.controls.transformerId.value.trim(),
+                    options,
+                };
+            }
+            else {
+                const operator = group.controls.operator.value.trim() || 'merge-objects';
+                const options = this.buildOperatorOptions(group);
+                if (options === null)
+                    return null;
+                compute = {
+                    kind: 'operator',
+                    operator,
+                    options,
+                };
+            }
+            derived[path] = {
+                dependsOn,
+                compute,
+                ...(description ? { description } : {}),
+            };
+        }
+        return derived;
+    }
+    normalizeState(state) {
+        if (!state)
+            return { values: {} };
+        const isStructured = typeof state === 'object'
+            && !Array.isArray(state)
+            && ('values' in state || 'schema' in state || 'derived' in state);
+        if (isStructured) {
+            const structured = state;
+            return {
+                values: this.clone(structured.values) || {},
+                schema: this.clone(structured.schema),
+                derived: this.clone(structured.derived),
+            };
+        }
+        return { values: this.clone(state) || {} };
     }
     parsePage(input) {
         if (!input)
@@ -4137,6 +4565,33 @@ class PageConfigEditorComponent {
             return null;
         }
     }
+    parseJson(raw, emptyValue) {
+        if (!raw.trim())
+            return emptyValue;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    buildOperatorOptions(group) {
+        const operator = group.controls.operator.value.trim();
+        if (operator === 'pick' || operator === 'omit') {
+            const source = group.controls.sourcePath.value.trim();
+            const keys = group.controls.keysCsv.value
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean);
+            const options = {};
+            if (source)
+                options['source'] = source;
+            if (keys.length)
+                options['keys'] = keys;
+            return options;
+        }
+        return {};
+    }
     buildOptions(values) {
         const options = {};
         if (values.cols != null)
@@ -4147,6 +4602,11 @@ class PageConfigEditorComponent {
             options.gap = values.gap;
         return options;
     }
+    clone(value) {
+        if (value == null || typeof value !== 'object')
+            return value;
+        return JSON.parse(JSON.stringify(value));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PageConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PageConfigEditorComponent, isStandalone: true, selector: "praxis-page-config-editor", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, identity: { classPropertyName: "identity", publicName: "identity", isSignal: true, isRequired: false, transformFunction: null }, gridsterOptions: { classPropertyName: "gridsterOptions", publicName: "gridsterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
     <div class="page-config">
@@ -4204,15 +4664,202 @@ class PageConfigEditorComponent {
         <div class="page-error" role="alert">{{ contextError() }}</div>
       }
 
+      <div class="page-section">Estado da Página</div>
+      <div class="state-grid">
+        <mat-form-field appearance="outline" class="state-values">
+          <mat-label>Valores primários (JSON)</mat-label>
+          <textarea matInput rows="10" [formControl]="stateValuesControl"></textarea>
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="stateValuesExample"
+            matTooltipPosition="above"
+          >
+            <mat-icon>help_outline</mat-icon>
+          </button>
+        </mat-form-field>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">Schema</div>
+            <button mat-stroked-button type="button" (click)="addSchemaNode()">
+              <mat-icon>add</mat-icon>
+              Adicionar nó
+            </button>
+          </div>
+          <div class="state-group-help">Define caminhos primários, valor inicial e estratégia de merge.</div>
+          @if (!schemaNodes.length) {
+            <div class="state-empty">Nenhum nó de schema configurado.</div>
+          }
+          <div class="state-list">
+            @for (group of schemaNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">Nó {{ $index + 1 }}</div>
+                  <button mat-icon-button type="button" (click)="removeSchemaNode($index)" aria-label="Remover nó de schema">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Path</mat-label>
+                    <input matInput formControlName="path" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Tipo</mat-label>
+                    <input matInput formControlName="type" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Persistência</mat-label>
+                    <mat-select formControlName="persist">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="true">Persistir</mat-option>
+                      <mat-option value="false">Não persistir</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Merge</mat-label>
+                    <mat-select formControlName="mergeStrategy">
+                      <mat-option value="">Padrão</mat-option>
+                      @for (strategy of mergeStrategies; track strategy) {
+                        <mat-option [value]="strategy">{{ strategy }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>Initial (JSON)</mat-label>
+                    <textarea matInput rows="4" formControlName="initial"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>Descrição</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">Derived</div>
+            <button mat-stroked-button type="button" (click)="addDerivedNode()">
+              <mat-icon>add</mat-icon>
+              Adicionar derivação
+            </button>
+          </div>
+          <div class="state-group-help">Modela recomputações do runtime com dependsOn e operadores canônicos.</div>
+          @if (!derivedNodes.length) {
+            <div class="state-empty">Nenhum nó derivado configurado.</div>
+          }
+          <div class="state-list">
+            @for (group of derivedNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">Derived {{ $index + 1 }}</div>
+                  <button mat-icon-button type="button" (click)="removeDerivedNode($index)" aria-label="Remover derivação">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Path</mat-label>
+                    <input matInput formControlName="path" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Compute</mat-label>
+                    <mat-select formControlName="computeKind">
+                      <mat-option value="operator">Operator</mat-option>
+                      <mat-option value="template">Template</mat-option>
+                      <mat-option value="expr">Expr</mat-option>
+                      <mat-option value="transformer">Transformer</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>DependsOn (vírgula)</mat-label>
+                    <input matInput formControlName="dependsOn" />
+                  </mat-form-field>
+                  @if (group.controls.computeKind.value === 'operator') {
+                    <mat-form-field appearance="outline">
+                      <mat-label>Operator</mat-label>
+                      <mat-select formControlName="operator">
+                        @for (operator of derivedOperators; track operator) {
+                          <mat-option [value]="operator">{{ operator }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                    @if (group.controls.operator.value === 'pick' || group.controls.operator.value === 'omit') {
+                      <mat-form-field appearance="outline">
+                        <mat-label>Source path</mat-label>
+                        <input matInput formControlName="sourcePath" />
+                      </mat-form-field>
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Keys (vírgula)</mat-label>
+                        <input matInput formControlName="keysCsv" />
+                      </mat-form-field>
+                    } @else {
+                      <div class="state-operator-hint span-3">
+                        <mat-icon>account_tree</mat-icon>
+                        <span>O operador {{ group.controls.operator.value }} usa os caminhos de dependsOn como fonte principal.</span>
+                      </div>
+                    }
+                  }
+                  @if (group.controls.computeKind.value === 'template') {
+                    <mat-form-field appearance="outline" class="span-3">
+                      <mat-label>Template (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="template"></textarea>
+                    </mat-form-field>
+                  }
+                  @if (group.controls.computeKind.value === 'expr') {
+                    <mat-form-field appearance="outline" class="span-3">
+                      <mat-label>Expression</mat-label>
+                      <input matInput formControlName="expression" />
+                    </mat-form-field>
+                  }
+                  @if (group.controls.computeKind.value === 'transformer') {
+                    <mat-form-field appearance="outline">
+                      <mat-label>Transformer</mat-label>
+                      <input matInput formControlName="transformerId" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Options (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="options"></textarea>
+                    </mat-form-field>
+                  }
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Descrição</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      @if (stateError()) {
+        <div class="page-error" role="alert">{{ stateError() }}</div>
+      }
+
       <div class="page-actions">
         <button mat-flat-button color="primary" type="button" (click)="apply()">Aplicar</button>
       </div>
     </div>
-  `, isInline: true, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:center;gap:12px}.page-title{font-weight:600}.spacer{flex:1}.page-identity{display:grid;gap:4px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:center;gap:12px}.page-title{font-weight:600}.spacer{flex:1}.page-identity{display:grid;gap:4px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.state-group-head{align-items:stretch;flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PageConfigEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-page-config-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule], template: `
+            args: [{ selector: 'praxis-page-config-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                    ], template: `
     <div class="page-config">
       <div class="page-head">
         <div class="page-title">Configurações da Página</div>
@@ -4268,11 +4915,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <div class="page-error" role="alert">{{ contextError() }}</div>
       }
 
+      <div class="page-section">Estado da Página</div>
+      <div class="state-grid">
+        <mat-form-field appearance="outline" class="state-values">
+          <mat-label>Valores primários (JSON)</mat-label>
+          <textarea matInput rows="10" [formControl]="stateValuesControl"></textarea>
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="stateValuesExample"
+            matTooltipPosition="above"
+          >
+            <mat-icon>help_outline</mat-icon>
+          </button>
+        </mat-form-field>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">Schema</div>
+            <button mat-stroked-button type="button" (click)="addSchemaNode()">
+              <mat-icon>add</mat-icon>
+              Adicionar nó
+            </button>
+          </div>
+          <div class="state-group-help">Define caminhos primários, valor inicial e estratégia de merge.</div>
+          @if (!schemaNodes.length) {
+            <div class="state-empty">Nenhum nó de schema configurado.</div>
+          }
+          <div class="state-list">
+            @for (group of schemaNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">Nó {{ $index + 1 }}</div>
+                  <button mat-icon-button type="button" (click)="removeSchemaNode($index)" aria-label="Remover nó de schema">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Path</mat-label>
+                    <input matInput formControlName="path" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Tipo</mat-label>
+                    <input matInput formControlName="type" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Persistência</mat-label>
+                    <mat-select formControlName="persist">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="true">Persistir</mat-option>
+                      <mat-option value="false">Não persistir</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Merge</mat-label>
+                    <mat-select formControlName="mergeStrategy">
+                      <mat-option value="">Padrão</mat-option>
+                      @for (strategy of mergeStrategies; track strategy) {
+                        <mat-option [value]="strategy">{{ strategy }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>Initial (JSON)</mat-label>
+                    <textarea matInput rows="4" formControlName="initial"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>Descrição</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">Derived</div>
+            <button mat-stroked-button type="button" (click)="addDerivedNode()">
+              <mat-icon>add</mat-icon>
+              Adicionar derivação
+            </button>
+          </div>
+          <div class="state-group-help">Modela recomputações do runtime com dependsOn e operadores canônicos.</div>
+          @if (!derivedNodes.length) {
+            <div class="state-empty">Nenhum nó derivado configurado.</div>
+          }
+          <div class="state-list">
+            @for (group of derivedNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">Derived {{ $index + 1 }}</div>
+                  <button mat-icon-button type="button" (click)="removeDerivedNode($index)" aria-label="Remover derivação">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Path</mat-label>
+                    <input matInput formControlName="path" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>Compute</mat-label>
+                    <mat-select formControlName="computeKind">
+                      <mat-option value="operator">Operator</mat-option>
+                      <mat-option value="template">Template</mat-option>
+                      <mat-option value="expr">Expr</mat-option>
+                      <mat-option value="transformer">Transformer</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>DependsOn (vírgula)</mat-label>
+                    <input matInput formControlName="dependsOn" />
+                  </mat-form-field>
+                  @if (group.controls.computeKind.value === 'operator') {
+                    <mat-form-field appearance="outline">
+                      <mat-label>Operator</mat-label>
+                      <mat-select formControlName="operator">
+                        @for (operator of derivedOperators; track operator) {
+                          <mat-option [value]="operator">{{ operator }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                    @if (group.controls.operator.value === 'pick' || group.controls.operator.value === 'omit') {
+                      <mat-form-field appearance="outline">
+                        <mat-label>Source path</mat-label>
+                        <input matInput formControlName="sourcePath" />
+                      </mat-form-field>
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Keys (vírgula)</mat-label>
+                        <input matInput formControlName="keysCsv" />
+                      </mat-form-field>
+                    } @else {
+                      <div class="state-operator-hint span-3">
+                        <mat-icon>account_tree</mat-icon>
+                        <span>O operador {{ group.controls.operator.value }} usa os caminhos de dependsOn como fonte principal.</span>
+                      </div>
+                    }
+                  }
+                  @if (group.controls.computeKind.value === 'template') {
+                    <mat-form-field appearance="outline" class="span-3">
+                      <mat-label>Template (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="template"></textarea>
+                    </mat-form-field>
+                  }
+                  @if (group.controls.computeKind.value === 'expr') {
+                    <mat-form-field appearance="outline" class="span-3">
+                      <mat-label>Expression</mat-label>
+                      <input matInput formControlName="expression" />
+                    </mat-form-field>
+                  }
+                  @if (group.controls.computeKind.value === 'transformer') {
+                    <mat-form-field appearance="outline">
+                      <mat-label>Transformer</mat-label>
+                      <input matInput formControlName="transformerId" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Options (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="options"></textarea>
+                    </mat-form-field>
+                  }
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Descrição</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      @if (stateError()) {
+        <div class="page-error" role="alert">{{ stateError() }}</div>
+      }
+
       <div class="page-actions">
         <button mat-flat-button color="primary" type="button" (click)="apply()">Aplicar</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:center;gap:12px}.page-title{font-weight:600}.spacer{flex:1}.page-identity{display:grid;gap:4px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:center;gap:12px}.page-title{font-weight:600}.spacer{flex:1}.page-identity{display:grid;gap:4px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.state-group-head{align-items:stretch;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], identity: [{ type: i0.Input, args: [{ isSignal: true, alias: "identity", required: false }] }], gridsterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridsterOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class PageBuilderAiAdapter {
@@ -4520,13 +5345,15 @@ class PageBuilderAiAdapter {
     connectionKey(connection) {
         if (!connection)
             return null;
-        const fromWidget = connection.from?.widget;
-        const fromOutput = connection.from?.output;
-        const toWidget = connection.to?.widget;
-        const toInput = connection.to?.input;
-        if (!fromWidget || !fromOutput || !toWidget || !toInput)
+        const from = 'widget' in connection.from
+            ? (connection.from.widget && connection.from.output ? `widget:${connection.from.widget}::${connection.from.output}` : null)
+            : (connection.from.state ? `state:${connection.from.state}` : null);
+        const to = 'widget' in connection.to
+            ? (connection.to.widget && connection.to.input ? `widget:${connection.to.widget}::${connection.to.input}` : null)
+            : (connection.to.state ? `state:${connection.to.state}` : null);
+        if (!from || !to)
             return null;
-        return `${fromWidget}::${fromOutput}->${toWidget}::${toInput}`;
+        return `${from}->${to}`;
     }
     gridsterFromPageOptions(options) {
         if (!options)
@@ -4864,7 +5691,11 @@ class DynamicGridsterPageComponent {
         this.widgets.set(widgets);
         const parsed = this.parsePage(this.page) || { widgets };
         // Remove connections referencing this widget
-        const conns = (parsed.connections || []).filter((c) => c.from.widget !== key && c.to.widget !== key);
+        const conns = (parsed.connections || []).filter((c) => {
+            const fromMatches = c?.from && 'widget' in c.from && c.from.widget === key;
+            const toMatches = c?.to && 'widget' in c.to && c.to.widget === key;
+            return !fromMatches && !toMatches;
+        });
         const next = { ...parsed, widgets, connections: conns };
         this.page = next;
         this.pageChange.emit(next);
@@ -5016,6 +5847,8 @@ class DynamicGridsterPageComponent {
         const matches = this.conn.findMatches(p?.connections, fromKey, evt.output);
         let widgets = [...this.widgets()];
         for (const c of matches) {
+            if (!('widget' in c.to))
+                continue;
             widgets = this.conn.applyMatch(widgets, c, evt);
         }
         this.widgets.set(widgets);