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

package/fesm2022/praxisui-page-builder.mjs

@@ -9,7 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@praxisui/core';
-import { PraxisIconDirective, BUILTIN_SHELL_PRESETS, deepMerge, generateId, GlobalActionService, buildPageKey, ASYNC_CONFIG_STORAGE, TABLE_CONFIG_EDITOR, STEPPER_CONFIG_EDITOR, SETTINGS_PANEL_BRIDGE, DynamicWidgetLoaderDirective, WidgetShellComponent } from '@praxisui/core';
+import { PraxisIconDirective, BUILTIN_SHELL_PRESETS, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, deepMerge, generateId, GlobalActionService, buildPageKey, ASYNC_CONFIG_STORAGE, TABLE_CONFIG_EDITOR, STEPPER_CONFIG_EDITOR, SETTINGS_PANEL_BRIDGE, DynamicWidgetLoaderDirective, WidgetShellComponent } from '@praxisui/core';
 export { WidgetShellComponent } from '@praxisui/core';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -480,6 +480,7 @@ class ConnectionBuilderComponent {
     // Signals
     connections = signal([], ...(ngDevMode ? [{ debugName: "connections" }] : []));
     selectedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    stateOptions = signal([], ...(ngDevMode ? [{ debugName: "stateOptions" }] : []));
     // Derived lists
     filteredConnections = computed(() => this.applyFilters(this.connections()), ...(ngDevMode ? [{ debugName: "filteredConnections" }] : []));
     groupedConnections = computed(() => this.applyGrouping(this.filteredConnections()), ...(ngDevMode ? [{ debugName: "groupedConnections" }] : []));
@@ -492,6 +493,7 @@ class ConnectionBuilderComponent {
         const p = this.parsePage(this.page);
         const ws = this.widgets || p?.widgets || [];
         this.widgets = ws;
+        this.refreshStateOptions(p);
         const conns = [...(p?.connections || [])];
         this.connections.set(conns);
         this.originalSnapshot = JSON.stringify(conns);
@@ -500,6 +502,7 @@ class ConnectionBuilderComponent {
         if (changes['page'] || changes['widgets']) {
             const p = this.parsePage(this.page);
             this.widgets = this.widgets || p?.widgets || [];
+            this.refreshStateOptions(p);
             const next = [...(p?.connections || [])];
             this.connections.set(next);
             this.originalSnapshot = JSON.stringify(next);
@@ -528,10 +531,14 @@ class ConnectionBuilderComponent {
         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}`;
+        return this.isWidgetSource(c.from)
+            ? `${this.widgetFriendlyNameForKey(c.from.widget)}.${c.from.output}`
+            : `state:${this.stateOptionLabel(c.from.state)}`;
     }
     toFriendly(c) {
-        return this.isWidgetTarget(c.to) ? `${this.widgetFriendlyNameForKey(c.to.widget)}.${c.to.input}` : `state:${c.to.state}`;
+        return this.isWidgetTarget(c.to)
+            ? `${this.widgetFriendlyNameForKey(c.to.widget)}.${c.to.input}`
+            : `state:${this.stateOptionLabel(c.to.state)}`;
     }
     outputDescription(c) {
         if (!this.isWidgetSource(c.from))
@@ -557,6 +564,44 @@ class ConnectionBuilderComponent {
         const index = this.selectedIndex();
         return index >= 0 ? this.connections()[index] : undefined;
     }
+    selectedSourceKind() {
+        const selected = this.selectedConnection();
+        return selected && this.isWidgetSource(selected.from) ? 'widget' : 'state';
+    }
+    setSelectedSourceKind(kind) {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return;
+        if (kind === 'widget' && !this.isWidgetSource(selected.from)) {
+            selected.from = {
+                widget: this.widgets?.[0]?.key || '',
+                output: this.availableOutputsForWidget(this.widgets?.[0]?.key || '')[0] || '',
+            };
+        }
+        if (kind === 'state' && this.isWidgetSource(selected.from)) {
+            selected.from = { state: this.stateOptions()[0]?.value || '' };
+        }
+        this.connections.set([...this.connections()]);
+    }
+    selectedTargetKind() {
+        const selected = this.selectedConnection();
+        return selected && this.isWidgetTarget(selected.to) ? 'widget' : 'state';
+    }
+    setSelectedTargetKind(kind) {
+        const selected = this.selectedConnection();
+        if (!selected)
+            return;
+        if (kind === 'widget' && !this.isWidgetTarget(selected.to)) {
+            selected.to = {
+                widget: this.widgets?.[0]?.key || '',
+                input: this.availableInputsForWidget(this.widgets?.[0]?.key || '')[0] || '',
+            };
+        }
+        if (kind === 'state' && this.isWidgetTarget(selected.to)) {
+            selected.to = { state: this.stateOptions()[0]?.value || '' };
+        }
+        this.connections.set([...this.connections()]);
+    }
     selectedSourcePrimaryValue() {
         const selected = this.selectedConnection();
         if (!selected)
@@ -629,6 +674,29 @@ class ConnectionBuilderComponent {
         const selected = this.selectedConnection();
         return !!selected && this.isWidgetTarget(selected.to);
     }
+    availableOutputsForSelectedWidget() {
+        return this.availableOutputsForWidget(this.selectedSourcePrimaryValue());
+    }
+    availableInputsForSelectedWidget() {
+        return this.availableInputsForWidget(this.selectedTargetPrimaryValue());
+    }
+    availableStateOptions() {
+        return this.stateOptions();
+    }
+    stateOptionLabel(path) {
+        return this.stateOptions().find((option) => option.value === path)?.label || path;
+    }
+    stateOptionIcon(path) {
+        return this.stateOptions().find((option) => option.value === path)?.kind === 'derived'
+            ? 'function'
+            : 'account_tree';
+    }
+    widgetOptions() {
+        return (this.widgets || []).map((widget) => ({
+            key: widget.key,
+            label: `${this.widgetFriendlyNameForKey(widget.key)} (${widget.key})`,
+        }));
+    }
     applyFilters(list) {
         const q = (this.filterText || '').toLowerCase();
         const arr = list.filter((c) => {
@@ -670,7 +738,10 @@ class ConnectionBuilderComponent {
     createNew() {
         const fromKey = this.widgets?.[0]?.key || '';
         const toKey = this.widgets?.[1]?.key || '';
-        const conn = { from: { widget: fromKey, output: 'submit' }, to: { widget: toKey, input: 'context' } };
+        const conn = {
+            from: { widget: fromKey, output: this.availableOutputsForWidget(fromKey)[0] || 'submit' },
+            to: { widget: toKey, input: this.availableInputsForWidget(toKey)[0] || 'context' },
+        };
         this.connections.set([conn, ...this.connections()]);
     }
     startEdit(index, _c) { this.selectedIndex.set(index); }
@@ -741,12 +812,81 @@ class ConnectionBuilderComponent {
         }
         return input;
     }
+    availableOutputsForWidget(key) {
+        const widgetType = this.widgetTypeByKey(key);
+        return (this.registry.get(widgetType)?.outputs || []).map((output) => output.name);
+    }
+    availableInputsForWidget(key) {
+        const widgetType = this.widgetTypeByKey(key);
+        return (this.registry.get(widgetType)?.inputs || []).map((input) => input.name);
+    }
+    refreshStateOptions(page) {
+        this.stateOptions.set(this.collectStateOptions(page?.state));
+    }
+    collectStateOptions(state) {
+        const normalized = this.normalizeState(state);
+        const options = new Map();
+        for (const [path, config] of Object.entries(normalized.schema || {})) {
+            options.set(path, {
+                value: path,
+                label: config.description ? `${path} - ${config.description}` : path,
+                kind: 'primary',
+                description: config.description,
+            });
+        }
+        for (const path of this.collectPaths(normalized.values || {})) {
+            if (!options.has(path)) {
+                options.set(path, { value: path, label: path, kind: 'primary' });
+            }
+        }
+        for (const [path, config] of Object.entries(normalized.derived || {})) {
+            options.set(path, {
+                value: path,
+                label: config.description ? `${path} - ${config.description}` : `${path} [derived]`,
+                kind: 'derived',
+                description: config.description,
+            });
+        }
+        return Array.from(options.values()).sort((left, right) => left.value.localeCompare(right.value));
+    }
+    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) || {} };
+    }
+    collectPaths(source, prefix = '') {
+        const paths = [];
+        for (const [key, value] of Object.entries(source || {})) {
+            const path = prefix ? `${prefix}.${key}` : key;
+            paths.push(path);
+            if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+                paths.push(...this.collectPaths(value, path));
+            }
+        }
+        return paths;
+    }
+    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: 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\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 });
+    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\" (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\" [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\" (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\" [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>Tipo da origem</mat-label>\n            <mat-select [ngModel]=\"selectedSourceKind()\" (ngModelChange)=\"setSelectedSourceKind($event)\">\n              <mat-option value=\"widget\">Widget</mat-option>\n              <mat-option value=\"state\">State</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ selectedSourceKind() === 'widget' ? 'Origem (widget.key)' : 'Origem (state)' }}</mat-label>\n            <mat-select [ngModel]=\"selectedSourcePrimaryValue()\" (ngModelChange)=\"setSelectedSourcePrimaryValue($event)\">\n              <ng-container *ngIf=\"selectedSourceKind() === 'widget'; else sourceStateOptions\">\n                <mat-option *ngFor=\"let option of widgetOptions()\" [value]=\"option.key\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-container>\n              <ng-template #sourceStateOptions>\n                <mat-option *ngFor=\"let option of availableStateOptions()\" [value]=\"option.value\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-template>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedSourceSecondary()\">\n            <mat-label>Evento (output)</mat-label>\n            <mat-select [ngModel]=\"selectedSourceSecondaryValue()\" (ngModelChange)=\"setSelectedSourceSecondaryValue($event)\">\n              <mat-option *ngFor=\"let output of availableOutputsForSelectedWidget()\" [value]=\"output\">{{ output }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"endpoint-hint full-span\" *ngIf=\"selectedSourceKind() === 'state' && selectedSourcePrimaryValue()\">\n            <mat-icon>{{ stateOptionIcon(selectedSourcePrimaryValue()) }}</mat-icon>\n            <span>{{ stateOptionLabel(selectedSourcePrimaryValue()) }}</span>\n          </div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Tipo do destino</mat-label>\n            <mat-select [ngModel]=\"selectedTargetKind()\" (ngModelChange)=\"setSelectedTargetKind($event)\">\n              <mat-option value=\"widget\">Widget</mat-option>\n              <mat-option value=\"state\">State</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ selectedTargetKind() === 'widget' ? 'Destino (widget.key)' : 'Destino (state)' }}</mat-label>\n            <mat-select [ngModel]=\"selectedTargetPrimaryValue()\" (ngModelChange)=\"setSelectedTargetPrimaryValue($event)\">\n              <ng-container *ngIf=\"selectedTargetKind() === 'widget'; else targetStateOptions\">\n                <mat-option *ngFor=\"let option of widgetOptions()\" [value]=\"option.key\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-container>\n              <ng-template #targetStateOptions>\n                <mat-option *ngFor=\"let option of availableStateOptions()\" [value]=\"option.value\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-template>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedTargetSecondary()\">\n            <mat-label>Input</mat-label>\n            <mat-select [ngModel]=\"selectedTargetSecondaryValue()\" (ngModelChange)=\"setSelectedTargetSecondaryValue($event)\">\n              <mat-option *ngFor=\"let input of availableInputsForSelectedWidget()\" [value]=\"input\">{{ input }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"endpoint-hint full-span\" *ngIf=\"selectedTargetKind() === 'state' && selectedTargetPrimaryValue()\">\n            <mat-icon>{{ stateOptionIcon(selectedTargetPrimaryValue()) }}</mat-icon>\n            <span>{{ stateOptionLabel(selectedTargetPrimaryValue()) }}</span>\n          </div>\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}.endpoint-hint{display:flex;align-items:center;gap:8px;min-height:44px;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)}.endpoint-hint mat-icon{color:var(--md-sys-color-secondary)}.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\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"] }]
+            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\" (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\" [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\" (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\" [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>Tipo da origem</mat-label>\n            <mat-select [ngModel]=\"selectedSourceKind()\" (ngModelChange)=\"setSelectedSourceKind($event)\">\n              <mat-option value=\"widget\">Widget</mat-option>\n              <mat-option value=\"state\">State</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ selectedSourceKind() === 'widget' ? 'Origem (widget.key)' : 'Origem (state)' }}</mat-label>\n            <mat-select [ngModel]=\"selectedSourcePrimaryValue()\" (ngModelChange)=\"setSelectedSourcePrimaryValue($event)\">\n              <ng-container *ngIf=\"selectedSourceKind() === 'widget'; else sourceStateOptions\">\n                <mat-option *ngFor=\"let option of widgetOptions()\" [value]=\"option.key\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-container>\n              <ng-template #sourceStateOptions>\n                <mat-option *ngFor=\"let option of availableStateOptions()\" [value]=\"option.value\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-template>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedSourceSecondary()\">\n            <mat-label>Evento (output)</mat-label>\n            <mat-select [ngModel]=\"selectedSourceSecondaryValue()\" (ngModelChange)=\"setSelectedSourceSecondaryValue($event)\">\n              <mat-option *ngFor=\"let output of availableOutputsForSelectedWidget()\" [value]=\"output\">{{ output }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"endpoint-hint full-span\" *ngIf=\"selectedSourceKind() === 'state' && selectedSourcePrimaryValue()\">\n            <mat-icon>{{ stateOptionIcon(selectedSourcePrimaryValue()) }}</mat-icon>\n            <span>{{ stateOptionLabel(selectedSourcePrimaryValue()) }}</span>\n          </div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Tipo do destino</mat-label>\n            <mat-select [ngModel]=\"selectedTargetKind()\" (ngModelChange)=\"setSelectedTargetKind($event)\">\n              <mat-option value=\"widget\">Widget</mat-option>\n              <mat-option value=\"state\">State</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ selectedTargetKind() === 'widget' ? 'Destino (widget.key)' : 'Destino (state)' }}</mat-label>\n            <mat-select [ngModel]=\"selectedTargetPrimaryValue()\" (ngModelChange)=\"setSelectedTargetPrimaryValue($event)\">\n              <ng-container *ngIf=\"selectedTargetKind() === 'widget'; else targetStateOptions\">\n                <mat-option *ngFor=\"let option of widgetOptions()\" [value]=\"option.key\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-container>\n              <ng-template #targetStateOptions>\n                <mat-option *ngFor=\"let option of availableStateOptions()\" [value]=\"option.value\">\n                  {{ option.label }}\n                </mat-option>\n              </ng-template>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"showSelectedTargetSecondary()\">\n            <mat-label>Input</mat-label>\n            <mat-select [ngModel]=\"selectedTargetSecondaryValue()\" (ngModelChange)=\"setSelectedTargetSecondaryValue($event)\">\n              <mat-option *ngFor=\"let input of availableInputsForSelectedWidget()\" [value]=\"input\">{{ input }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"endpoint-hint full-span\" *ngIf=\"selectedTargetKind() === 'state' && selectedTargetPrimaryValue()\">\n            <mat-icon>{{ stateOptionIcon(selectedTargetPrimaryValue()) }}</mat-icon>\n            <span>{{ stateOptionLabel(selectedTargetPrimaryValue()) }}</span>\n          </div>\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}.endpoint-hint{display:flex;align-items:center;gap:8px;min-height:44px;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)}.endpoint-hint mat-icon{color:var(--md-sys-color-secondary)}.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: [{
@@ -3050,6 +3190,7 @@ class GraphMapperService {
         const colWidth = 240;
         const rowHeight = 96;
         const gap = 28;
+        const structuredState = this.normalizeState(page?.state);
         let leftY = 0;
         let rightY = 0;
         const stateNodeIds = new Map();
@@ -3186,17 +3327,71 @@ class GraphMapperService {
                 }
             }
         }
+        let structureY = Math.max(leftY, rightY) + gap * 2;
+        const structureX = gap;
+        for (const group of page?.grouping || []) {
+            const label = group.kind === 'tabs'
+                ? `${group.kind}: ${group.id} (${group.tabs.length} tabs)`
+                : `${group.kind}: ${group.id}`;
+            const widgetCount = group.kind === 'tabs'
+                ? group.tabs.reduce((total, tab) => total + tab.widgetKeys.length, 0)
+                : group.widgetKeys.length;
+            const node = {
+                id: `group:${group.id}`,
+                label,
+                icon: group.kind === 'tabs' ? 'tabs' : group.kind === 'hero' ? 'web_asset' : group.kind === 'rail' ? 'view_sidebar' : 'dashboard_customize',
+                type: `page-group:${group.kind}`,
+                parentId: null,
+                collapsed: true,
+                bounds: { x: structureX, y: structureY, width: colWidth, height: 72 },
+                ports: [],
+            };
+            nodes.push(node);
+            nodeById.set(node.id, node);
+            structureY += 72 + gap;
+            if (widgetCount > 0) {
+                node.label = `${node.label} • ${widgetCount} widgets`;
+            }
+        }
+        for (const device of ['desktop', 'tablet', 'mobile']) {
+            const variant = page?.deviceLayouts?.[device];
+            if (!variant)
+                continue;
+            const detail = [];
+            if (variant.layout?.orientation)
+                detail.push(variant.layout.orientation);
+            if (variant.layout?.columns)
+                detail.push(`${variant.layout.columns} cols`);
+            if (variant.groupingOverrides?.length)
+                detail.push(`${variant.groupingOverrides.length} grouping overrides`);
+            if (variant.widgetOverrides && Object.keys(variant.widgetOverrides).length) {
+                detail.push(`${Object.keys(variant.widgetOverrides).length} widget overrides`);
+            }
+            const node = {
+                id: `device:${device}`,
+                label: `device: ${device}${detail.length ? ` • ${detail.join(' • ')}` : ''}`,
+                icon: device === 'desktop' ? 'desktop_windows' : device === 'tablet' ? 'tablet_mac' : 'smartphone',
+                type: 'page-device-layout',
+                parentId: null,
+                collapsed: true,
+                bounds: { x: structureX + colWidth + gap, y: structureY, width: colWidth + 40, height: 72 },
+                ports: [],
+            };
+            nodes.push(node);
+            nodeById.set(node.id, node);
+            structureY += 72 + gap;
+        }
         // Second pass: map edges from page.connections
         const conns = (page?.connections || []);
         for (let i = 0; i < conns.length; i++) {
             const c = conns[i];
             const fromState = !this.isWidgetSource(c.from)
-                ? this.ensureStateNode(stateNodeIds, nodeById, nodes, page, c.from.state, 'output', colWidth, gap, leftY)
+                ? this.ensureStateNode(stateNodeIds, nodeById, nodes, structuredState, 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)
+                ? this.ensureStateNode(stateNodeIds, nodeById, nodes, structuredState, 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';
@@ -3232,13 +3427,20 @@ class GraphMapperService {
                 from: { nodeId: fromNodeId, portId: fromPortId },
                 to: { nodeId: toNodeId, portId: toPortId },
                 label: c.map || undefined,
-                meta: { map: c.map, bindingOrder: this.isWidgetTarget(c.to) ? c.to.bindingOrder : undefined, ...(friendlyPath ? { friendlyPath } : {}) },
+                meta: {
+                    map: c.map,
+                    bindingOrder: this.isWidgetTarget(c.to) ? c.to.bindingOrder : undefined,
+                    ...(friendlyPath ? { friendlyPath } : {}),
+                    fromLabel: this.connectionEndpointLabel(c.from, widgets, structuredState),
+                    toLabel: this.connectionEndpointLabel(c.to, widgets, structuredState),
+                    connectionKind: this.connectionKind(c),
+                },
             };
             edges.push(edge);
         }
         return { nodes, edges };
     }
-    ensureStateNode(stateNodeIds, nodeById, nodes, page, statePath, kind, colWidth, gap, offsetY) {
+    ensureStateNode(stateNodeIds, nodeById, nodes, structuredState, statePath, kind, colWidth, gap, offsetY) {
         const key = `${kind}:${statePath}`;
         const existing = stateNodeIds.get(key);
         if (existing)
@@ -3246,11 +3448,12 @@ class GraphMapperService {
         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 description = structuredState?.derived?.[statePath]?.description || structuredState?.schema?.[statePath]?.description;
+        const titlePrefix = isDerived ? 'Derived State' : 'Page State';
         const node = {
             id: nodeId,
-            label: `${isDerived ? 'derived' : 'state'}:${statePath}`,
+            label: description ? `${titlePrefix}: ${description}` : `${titlePrefix}: ${statePath}`,
             icon: isDerived ? 'function' : 'account_tree',
             type: isDerived ? 'page-derived-state' : 'page-state',
             parentId: null,
@@ -3259,7 +3462,7 @@ class GraphMapperService {
             ports: [{
                     id: portId,
                     label: statePath,
-                    description: statePath,
+                    description: description ? `${description}\n${statePath}` : statePath,
                     kind,
                     anchor: { x: kind === 'output' ? x : x + colWidth, y: gap + offsetY + 24 },
                 }],
@@ -3274,7 +3477,29 @@ class GraphMapperService {
             return null;
         if ('values' in state || 'schema' in state || 'derived' in state)
             return state;
-        return null;
+        return { values: state };
+    }
+    connectionEndpointLabel(endpoint, widgets, structuredState) {
+        if ('widget' in endpoint) {
+            const widget = widgets.find((item) => item.key === endpoint.widget);
+            const meta = widget ? this.registry.get(widget.definition.id) : null;
+            if ('output' in endpoint)
+                return `${meta?.friendlyName || endpoint.widget}.${endpoint.output}`;
+            return `${meta?.friendlyName || endpoint.widget}.${endpoint.input}`;
+        }
+        const description = structuredState?.derived?.[endpoint.state]?.description || structuredState?.schema?.[endpoint.state]?.description;
+        return description ? `${endpoint.state} - ${description}` : endpoint.state;
+    }
+    connectionKind(connection) {
+        const fromWidget = this.isWidgetSource(connection.from);
+        const toWidget = this.isWidgetTarget(connection.to);
+        if (fromWidget && toWidget)
+            return 'widget-to-widget';
+        if (fromWidget && !toWidget)
+            return 'widget-to-state';
+        if (!fromWidget && toWidget)
+            return 'state-to-widget';
+        return 'state-to-state';
     }
     ensurePort(nodeById, nodeId, portId, kind, colWidth) {
         const n = nodeById.get(nodeId);
@@ -3362,14 +3587,37 @@ class ConnectionGraphComponent {
         return 'widget' in to;
     }
     fromLabel(c) {
-        return this.isWidgetSource(c.from) ? `${c.from.widget}.${c.from.output}` : `state:${c.from.state}`;
+        return this.currentEdge()?.meta?.fromLabel || (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}`;
+        return this.currentEdge()?.meta?.toLabel || (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(', ') : '';
     }
+    connectionKindSummary() {
+        const counts = new Map();
+        for (const edge of this.edges()) {
+            const kind = edge.meta?.connectionKind;
+            if (!kind)
+                continue;
+            counts.set(kind, (counts.get(kind) || 0) + 1);
+        }
+        return Array.from(counts.entries()).map(([kind, count]) => ({
+            kind,
+            count,
+            label: this.connectionKindLabel(kind),
+        }));
+    }
+    connectionKindLabel(kind) {
+        switch (kind) {
+            case 'widget-to-widget': return 'Widget -> Widget';
+            case 'widget-to-state': return 'Widget -> State';
+            case 'state-to-widget': return 'State -> Widget';
+            case 'state-to-state': return 'State -> State';
+            default: return 'Conexão';
+        }
+    }
     isPortConnected(nodeId, portId) {
         const set = this.connectedPorts.get(nodeId);
         return !!set && set.has(portId);
@@ -3508,11 +3756,10 @@ class ConnectionGraphComponent {
         return routeElbow(from, to);
     }
     edgeTooltip(e) {
-        const toNode = this.nodes().find(n => n.id === e.to.nodeId);
-        const fromNode = this.nodes().find(n => n.id === e.from.nodeId);
         const parts = [
-            `De: ${fromNode?.label || e.from.nodeId}.${e.from.portId.replace('out:', '')}`,
-            `Para: ${toNode?.label || e.to.nodeId}.${e.to.portId.replace('in:', '')}`,
+            `Tipo: ${this.connectionKindLabel(e.meta?.connectionKind)}`,
+            `De: ${e.meta?.fromLabel || e.from.nodeId}.${e.from.portId.replace('out:', '')}`,
+            `Para: ${e.meta?.toLabel || e.to.nodeId}.${e.to.portId.replace('in:', '')}`,
         ];
         if (e.meta && e.meta.friendlyPath)
             parts.push(`Destino: ${e.meta.friendlyPath}`);
@@ -3708,6 +3955,7 @@ class ConnectionGraphComponent {
         this.selectedEdgeIndex.set(index);
         this.showDetails = true;
     }
+    currentEdge() { const i = this.selectedEdgeIndex(); return (i >= 0 ? this.edges()[i] : undefined); }
     currentConn() { const i = this.selectedEdgeIndex(); return (i >= 0 ? this.connections()[i] : undefined); }
     emitPageChange() {
         const parsed = this.parsePage(this.page) || { widgets: this.widgets || [] };
@@ -3809,6 +4057,9 @@ class ConnectionGraphComponent {
       </button>
       <button mat-stroked-button color="primary" (click)="openBuilder()" aria-label="Editar no Builder"><mat-icon>tune</mat-icon><span>Editar no Builder</span></button>
       <div class="cg-count" [attr.aria-label]="'Total de conexões: ' + connections().length">{{ connections().length }}</div>
+      <div class="cg-kind-summary" *ngIf="connections().length">
+        <span class="cg-kind-pill" *ngFor="let item of connectionKindSummary()">{{ item.label }}: {{ item.count }}</span>
+      </div>
     </div>
     <div class="cg-canvas">
       <!-- Edge details panel -->
@@ -3818,6 +4069,7 @@ 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>Tipo:</b> {{ connectionKindLabel(currentEdge()?.meta?.connectionKind) }}</div>
           <div><b>De:</b> {{ fromLabel(c) }}</div>
           <div><b>Para:</b> {{ toLabel(c) }}</div>
           <div><b>map:</b> {{ c.map || 'payload' }}</div>
@@ -3922,7 +4174,7 @@ class ConnectionGraphComponent {
       </div>
     </div>
   </div>
-  `, isInline: true, styles: [".cg-root{display:flex;flex-direction:column;height:100%;width:100%}.cg-head{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline)}.cg-title{font-weight:600}.spacer{flex:1}.cg-count{color:var(--md-sys-color-on-surface-variant)}.cg-canvas{position:relative;flex:1;min-height:300px}svg{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface)}.node-box{fill:var(--md-sys-color-surface-container);stroke:var(--md-sys-color-outline)}.node-title{fill:var(--md-sys-color-on-surface);font-size:14px;font-weight:600}.port-dot{fill:currentColor;r:6}.port-label{fill:var(--md-sys-color-on-surface-variant);font-size:13px}.edge{stroke:var(--md-sys-color-primary);stroke-width:2;fill:none}.edge.hover{stroke:var(--md-sys-color-tertiary)}.edge.temp{stroke-dasharray:4 4;opacity:.7}.edge-label{fill:var(--md-sys-color-on-surface);font-size:12px;dominant-baseline:middle;text-anchor:middle}.edge-label-bg{fill:var(--md-sys-color-surface);opacity:.72}.edge-toolbar .edge-toolbar-bg{fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-outline)}.edge-toolbar .icon{fill:var(--md-sys-color-on-surface);font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.popover{position:absolute;transform:translate(-50%,-50%);z-index:10}.popover-body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;padding:8px;min-width:220px;box-shadow:var(--mat-elevation-level4)}.popover-title{font-weight:600;margin-bottom:8px}.popover-grid{display:grid;gap:6px;min-width:260px}.popover-chips{display:flex;gap:6px;flex-wrap:wrap}.popover-rows{display:grid;gap:6px}.popover-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.popover-inline-field{display:inline-flex;align-items:center;gap:6px}.popover-body label{display:grid;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.popover-input{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:6px;padding:4px 6px;font:inherit}.popover-input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.popover-input--short{width:90px}.popover-preview{font-size:12px;opacity:.8;color:var(--md-sys-color-on-surface-variant)}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.port-hit{fill:transparent;cursor:crosshair;height:24px}.cg-details{position:absolute;right:8px;top:48px;width:320px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;box-shadow:var(--mat-elevation-level3);z-index:12}.details-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--md-sys-color-outline)}.details-title{font-weight:600}.details-body{padding:8px 10px;display:grid;gap:6px}.details-actions{display:flex;gap:8px;margin-top:8px}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: DragConnectDirective, selector: "[dragConnect]", inputs: ["dragConnect"], outputs: ["connectDragStart", "connectDragMove", "connectDragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".cg-root{display:flex;flex-direction:column;height:100%;width:100%}.cg-head{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline)}.cg-title{font-weight:600}.spacer{flex:1}.cg-count{color:var(--md-sys-color-on-surface-variant)}.cg-kind-summary{display:flex;gap:8px;flex-wrap:wrap}.cg-kind-pill{padding:4px 10px;border-radius:999px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-size:12px;font-weight:600}.cg-canvas{position:relative;flex:1;min-height:300px}svg{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface)}.node-box{fill:var(--md-sys-color-surface-container);stroke:var(--md-sys-color-outline)}.node-title{fill:var(--md-sys-color-on-surface);font-size:14px;font-weight:600}.port-dot{fill:currentColor;r:6}.port-label{fill:var(--md-sys-color-on-surface-variant);font-size:13px}.edge{stroke:var(--md-sys-color-primary);stroke-width:2;fill:none}.edge.hover{stroke:var(--md-sys-color-tertiary)}.edge.temp{stroke-dasharray:4 4;opacity:.7}.edge-label{fill:var(--md-sys-color-on-surface);font-size:12px;dominant-baseline:middle;text-anchor:middle}.edge-label-bg{fill:var(--md-sys-color-surface);opacity:.72}.edge-toolbar .edge-toolbar-bg{fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-outline)}.edge-toolbar .icon{fill:var(--md-sys-color-on-surface);font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.popover{position:absolute;transform:translate(-50%,-50%);z-index:10}.popover-body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;padding:8px;min-width:220px;box-shadow:var(--mat-elevation-level4)}.popover-title{font-weight:600;margin-bottom:8px}.popover-grid{display:grid;gap:6px;min-width:260px}.popover-chips{display:flex;gap:6px;flex-wrap:wrap}.popover-rows{display:grid;gap:6px}.popover-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.popover-inline-field{display:inline-flex;align-items:center;gap:6px}.popover-body label{display:grid;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.popover-input{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:6px;padding:4px 6px;font:inherit}.popover-input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.popover-input--short{width:90px}.popover-preview{font-size:12px;opacity:.8;color:var(--md-sys-color-on-surface-variant)}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.port-hit{fill:transparent;cursor:crosshair;height:24px}.cg-details{position:absolute;right:8px;top:48px;width:320px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;box-shadow:var(--mat-elevation-level3);z-index:12}.details-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--md-sys-color-outline)}.details-title{font-weight:600}.details-body{padding:8px 10px;display:grid;gap:6px}.details-actions{display:flex;gap:8px;margin-top:8px}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: DragConnectDirective, selector: "[dragConnect]", inputs: ["dragConnect"], outputs: ["connectDragStart", "connectDragMove", "connectDragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConnectionGraphComponent, decorators: [{
             type: Component,
@@ -3945,6 +4197,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       </button>
       <button mat-stroked-button color="primary" (click)="openBuilder()" aria-label="Editar no Builder"><mat-icon>tune</mat-icon><span>Editar no Builder</span></button>
       <div class="cg-count" [attr.aria-label]="'Total de conexões: ' + connections().length">{{ connections().length }}</div>
+      <div class="cg-kind-summary" *ngIf="connections().length">
+        <span class="cg-kind-pill" *ngFor="let item of connectionKindSummary()">{{ item.label }}: {{ item.count }}</span>
+      </div>
     </div>
     <div class="cg-canvas">
       <!-- Edge details panel -->
@@ -3954,6 +4209,7 @@ 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>Tipo:</b> {{ connectionKindLabel(currentEdge()?.meta?.connectionKind) }}</div>
           <div><b>De:</b> {{ fromLabel(c) }}</div>
           <div><b>Para:</b> {{ toLabel(c) }}</div>
           <div><b>map:</b> {{ c.map || 'payload' }}</div>
@@ -4058,7 +4314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       </div>
     </div>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".cg-root{display:flex;flex-direction:column;height:100%;width:100%}.cg-head{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline)}.cg-title{font-weight:600}.spacer{flex:1}.cg-count{color:var(--md-sys-color-on-surface-variant)}.cg-canvas{position:relative;flex:1;min-height:300px}svg{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface)}.node-box{fill:var(--md-sys-color-surface-container);stroke:var(--md-sys-color-outline)}.node-title{fill:var(--md-sys-color-on-surface);font-size:14px;font-weight:600}.port-dot{fill:currentColor;r:6}.port-label{fill:var(--md-sys-color-on-surface-variant);font-size:13px}.edge{stroke:var(--md-sys-color-primary);stroke-width:2;fill:none}.edge.hover{stroke:var(--md-sys-color-tertiary)}.edge.temp{stroke-dasharray:4 4;opacity:.7}.edge-label{fill:var(--md-sys-color-on-surface);font-size:12px;dominant-baseline:middle;text-anchor:middle}.edge-label-bg{fill:var(--md-sys-color-surface);opacity:.72}.edge-toolbar .edge-toolbar-bg{fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-outline)}.edge-toolbar .icon{fill:var(--md-sys-color-on-surface);font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.popover{position:absolute;transform:translate(-50%,-50%);z-index:10}.popover-body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;padding:8px;min-width:220px;box-shadow:var(--mat-elevation-level4)}.popover-title{font-weight:600;margin-bottom:8px}.popover-grid{display:grid;gap:6px;min-width:260px}.popover-chips{display:flex;gap:6px;flex-wrap:wrap}.popover-rows{display:grid;gap:6px}.popover-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.popover-inline-field{display:inline-flex;align-items:center;gap:6px}.popover-body label{display:grid;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.popover-input{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:6px;padding:4px 6px;font:inherit}.popover-input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.popover-input--short{width:90px}.popover-preview{font-size:12px;opacity:.8;color:var(--md-sys-color-on-surface-variant)}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.port-hit{fill:transparent;cursor:crosshair;height:24px}.cg-details{position:absolute;right:8px;top:48px;width:320px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;box-shadow:var(--mat-elevation-level3);z-index:12}.details-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--md-sys-color-outline)}.details-title{font-weight:600}.details-body{padding:8px 10px;display:grid;gap:6px}.details-actions{display:flex;gap:8px;margin-top:8px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".cg-root{display:flex;flex-direction:column;height:100%;width:100%}.cg-head{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline)}.cg-title{font-weight:600}.spacer{flex:1}.cg-count{color:var(--md-sys-color-on-surface-variant)}.cg-kind-summary{display:flex;gap:8px;flex-wrap:wrap}.cg-kind-pill{padding:4px 10px;border-radius:999px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-size:12px;font-weight:600}.cg-canvas{position:relative;flex:1;min-height:300px}svg{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface)}.node-box{fill:var(--md-sys-color-surface-container);stroke:var(--md-sys-color-outline)}.node-title{fill:var(--md-sys-color-on-surface);font-size:14px;font-weight:600}.port-dot{fill:currentColor;r:6}.port-label{fill:var(--md-sys-color-on-surface-variant);font-size:13px}.edge{stroke:var(--md-sys-color-primary);stroke-width:2;fill:none}.edge.hover{stroke:var(--md-sys-color-tertiary)}.edge.temp{stroke-dasharray:4 4;opacity:.7}.edge-label{fill:var(--md-sys-color-on-surface);font-size:12px;dominant-baseline:middle;text-anchor:middle}.edge-label-bg{fill:var(--md-sys-color-surface);opacity:.72}.edge-toolbar .edge-toolbar-bg{fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-outline)}.edge-toolbar .icon{fill:var(--md-sys-color-on-surface);font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.popover{position:absolute;transform:translate(-50%,-50%);z-index:10}.popover-body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;padding:8px;min-width:220px;box-shadow:var(--mat-elevation-level4)}.popover-title{font-weight:600;margin-bottom:8px}.popover-grid{display:grid;gap:6px;min-width:260px}.popover-chips{display:flex;gap:6px;flex-wrap:wrap}.popover-rows{display:grid;gap:6px}.popover-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.popover-inline-field{display:inline-flex;align-items:center;gap:6px}.popover-body label{display:grid;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.popover-input{background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:6px;padding:4px 6px;font:inherit}.popover-input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.popover-input--short{width:90px}.popover-preview{font-size:12px;opacity:.8;color:var(--md-sys-color-on-surface-variant)}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.port-hit{fill:transparent;cursor:crosshair;height:24px}.cg-details{position:absolute;right:8px;top:48px;width:320px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);border-radius:8px;box-shadow:var(--mat-elevation-level3);z-index:12}.details-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--md-sys-color-outline)}.details-title{font-weight:600}.details-body{padding:8px 10px;display:grid;gap:6px}.details-actions{display:flex;gap:8px;margin-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: GraphMapperService }, { type: i2$2.SettingsPanelService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4084,6 +4340,93 @@ class ConnectionEditorComponent {
     pageState = signal(undefined, ...(ngDevMode ? [{ debugName: "pageState" }] : []));
     jsonControl = new FormControl('', { nonNullable: true });
     jsonError = signal(null, ...(ngDevMode ? [{ debugName: "jsonError" }] : []));
+    connectionSummary = computed(() => {
+        const page = this.pageState();
+        const connections = page?.connections || [];
+        let widgetToWidget = 0;
+        let widgetToState = 0;
+        let stateToWidget = 0;
+        let stateToState = 0;
+        for (const connection of connections) {
+            const fromWidget = 'widget' in connection.from;
+            const toWidget = 'widget' in connection.to;
+            if (fromWidget && toWidget)
+                widgetToWidget += 1;
+            if (fromWidget && !toWidget)
+                widgetToState += 1;
+            if (!fromWidget && toWidget)
+                stateToWidget += 1;
+            if (!fromWidget && !toWidget)
+                stateToState += 1;
+        }
+        return {
+            total: connections.length,
+            widgetToWidget,
+            widgetToState,
+            stateToWidget,
+            stateToState,
+        };
+    }, ...(ngDevMode ? [{ debugName: "connectionSummary" }] : []));
+    stateSummary = computed(() => {
+        const page = this.pageState();
+        const normalized = this.normalizeState(page?.state);
+        const items = new Map();
+        for (const [path, config] of Object.entries(normalized.schema || {})) {
+            items.set(path, {
+                path,
+                kind: 'primary',
+                label: config.description ? `${path} - ${config.description}` : path,
+            });
+        }
+        for (const path of this.collectPaths(normalized.values || {})) {
+            if (!items.has(path)) {
+                items.set(path, { path, kind: 'primary', label: path });
+            }
+        }
+        for (const [path, config] of Object.entries(normalized.derived || {})) {
+            items.set(path, {
+                path,
+                kind: 'derived',
+                label: config.description ? `${path} - ${config.description}` : `${path} [derived]`,
+            });
+        }
+        return Array.from(items.values()).sort((left, right) => left.path.localeCompare(right.path));
+    }, ...(ngDevMode ? [{ debugName: "stateSummary" }] : []));
+    primaryStateCount = computed(() => this.stateSummary().filter((item) => item.kind === 'primary').length, ...(ngDevMode ? [{ debugName: "primaryStateCount" }] : []));
+    derivedStateCount = computed(() => this.stateSummary().filter((item) => item.kind === 'derived').length, ...(ngDevMode ? [{ debugName: "derivedStateCount" }] : []));
+    groupingSummary = computed(() => {
+        const page = this.pageState();
+        return (page?.grouping || []).map((group) => ({
+            id: group.id,
+            kind: group.kind,
+            label: group.kind === 'tabs'
+                ? `${group.id} - ${group.tabs.length} tabs`
+                : `${group.id} - ${group.widgetKeys.length} widgets`,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groupingSummary" }] : []));
+    deviceLayoutSummary = computed(() => {
+        const page = this.pageState();
+        const items = [];
+        for (const device of ['desktop', 'tablet', 'mobile']) {
+            const variant = page?.deviceLayouts?.[device];
+            if (!variant)
+                continue;
+            const layoutBits = [];
+            if (variant.layout?.orientation)
+                layoutBits.push(variant.layout.orientation);
+            if (variant.layout?.columns)
+                layoutBits.push(`${variant.layout.columns} cols`);
+            if (variant.groupingOverrides?.length)
+                layoutBits.push(`${variant.groupingOverrides.length} grouping overrides`);
+            if (variant.widgetOverrides && Object.keys(variant.widgetOverrides).length)
+                layoutBits.push(`${Object.keys(variant.widgetOverrides).length} widget overrides`);
+            items.push({
+                device,
+                label: layoutBits.join(' • ') || 'variant configured',
+            });
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "deviceLayoutSummary" }] : []));
     lastSerialized = '';
     constructor() {
         effect(() => {
@@ -4095,7 +4438,7 @@ class ConnectionEditorComponent {
                 this.jsonControl.setValue(serialized, { emitEvent: false });
                 this.jsonError.set(null);
             }
-        }, { allowSignalWrites: true });
+        });
         this.jsonControl.valueChanges
             .pipe(takeUntilDestroyed())
             .subscribe((next) => this.onJsonInput(next));
@@ -4143,8 +4486,40 @@ class ConnectionEditorComponent {
         }
         return input;
     }
+    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) || {} };
+    }
+    collectPaths(source, prefix = '') {
+        const paths = [];
+        for (const [key, value] of Object.entries(source || {})) {
+            const path = prefix ? `${prefix}.${key}` : key;
+            paths.push(path);
+            if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+                paths.push(...this.collectPaths(value, path));
+            }
+        }
+        return paths;
+    }
+    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: 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.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 });
+    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        <div class=\"json-summary\">\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Conex\u00F5es</div>\n            <div class=\"summary-metrics\">\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().total }}</span>\n                <span class=\"metric-label\">total</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().widgetToWidget }}</span>\n                <span class=\"metric-label\">widget \u2192 widget</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().widgetToState }}</span>\n                <span class=\"metric-label\">widget \u2192 state</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().stateToWidget }}</span>\n                <span class=\"metric-label\">state \u2192 widget</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().stateToState }}</span>\n                <span class=\"metric-label\">state \u2192 state</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Page State</div>\n            <div class=\"summary-metrics compact\">\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ primaryStateCount() }}</span>\n                <span class=\"metric-label\">paths prim\u00E1rios</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ derivedStateCount() }}</span>\n                <span class=\"metric-label\">paths derivados</span>\n              </div>\n            </div>\n            @if (stateSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of stateSummary(); track item.path) {\n                  <div class=\"state-chip\" [class.derived]=\"item.kind === 'derived'\" [matTooltip]=\"item.label\">\n                    <mat-icon>{{ item.kind === 'derived' ? 'function' : 'account_tree' }}</mat-icon>\n                    <span>{{ item.path }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum path de state detectado nesta p\u00E1gina.</div>\n            }\n          </div>\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Grouping</div>\n            @if (groupingSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of groupingSummary(); track item.id) {\n                  <div class=\"state-chip\" [matTooltip]=\"item.label\">\n                    <mat-icon>dashboard_customize</mat-icon>\n                    <span>{{ item.kind }}: {{ item.id }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum grouping definido nesta p\u00C3\u00A1gina.</div>\n            }\n          </div>\n\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Device Layouts</div>\n            @if (deviceLayoutSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of deviceLayoutSummary(); track item.device) {\n                  <div class=\"state-chip\" [matTooltip]=\"item.label\">\n                    <mat-icon>devices</mat-icon>\n                    <span>{{ item.device }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum override por device configurado.</div>\n            }\n          </div>\n        </div>\n\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-summary{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.summary-card{display:grid;gap:12px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 85%,transparent);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))}.summary-title{font-weight:600}.summary-metrics{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}.summary-metrics.compact{grid-template-columns:repeat(2,minmax(100px,1fr))}.metric{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 88%,transparent)}.metric-value{font-size:20px;font-weight:700;line-height:1}.metric-label{color:var(--md-sys-color-on-surface-variant);font-size:12px}.state-chip-list{display:flex;flex-wrap:wrap;gap:8px}.state-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 70%,transparent);color:var(--md-sys-color-on-primary-container);font-size:12px}.state-chip.derived{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 80%,transparent);color:var(--md-sys-color-on-tertiary-container)}.state-chip mat-icon{font-size:16px;width:16px;height:16px}.summary-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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,
@@ -4156,9 +4531,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatInputModule,
                         MatButtonModule,
                         MatIconModule,
+                        MatTooltipModule,
                         ConnectionBuilderComponent,
                         ConnectionGraphComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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        <div class=\"json-summary\">\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Conex\u00F5es</div>\n            <div class=\"summary-metrics\">\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().total }}</span>\n                <span class=\"metric-label\">total</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().widgetToWidget }}</span>\n                <span class=\"metric-label\">widget \u2192 widget</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().widgetToState }}</span>\n                <span class=\"metric-label\">widget \u2192 state</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().stateToWidget }}</span>\n                <span class=\"metric-label\">state \u2192 widget</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ connectionSummary().stateToState }}</span>\n                <span class=\"metric-label\">state \u2192 state</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Page State</div>\n            <div class=\"summary-metrics compact\">\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ primaryStateCount() }}</span>\n                <span class=\"metric-label\">paths prim\u00E1rios</span>\n              </div>\n              <div class=\"metric\">\n                <span class=\"metric-value\">{{ derivedStateCount() }}</span>\n                <span class=\"metric-label\">paths derivados</span>\n              </div>\n            </div>\n            @if (stateSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of stateSummary(); track item.path) {\n                  <div class=\"state-chip\" [class.derived]=\"item.kind === 'derived'\" [matTooltip]=\"item.label\">\n                    <mat-icon>{{ item.kind === 'derived' ? 'function' : 'account_tree' }}</mat-icon>\n                    <span>{{ item.path }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum path de state detectado nesta p\u00E1gina.</div>\n            }\n          </div>\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Grouping</div>\n            @if (groupingSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of groupingSummary(); track item.id) {\n                  <div class=\"state-chip\" [matTooltip]=\"item.label\">\n                    <mat-icon>dashboard_customize</mat-icon>\n                    <span>{{ item.kind }}: {{ item.id }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum grouping definido nesta p\u00C3\u00A1gina.</div>\n            }\n          </div>\n\n          <div class=\"summary-card\">\n            <div class=\"summary-title\">Device Layouts</div>\n            @if (deviceLayoutSummary().length) {\n              <div class=\"state-chip-list\">\n                @for (item of deviceLayoutSummary(); track item.device) {\n                  <div class=\"state-chip\" [matTooltip]=\"item.label\">\n                    <mat-icon>devices</mat-icon>\n                    <span>{{ item.device }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"summary-empty\">Nenhum override por device configurado.</div>\n            }\n          </div>\n        </div>\n\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-summary{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.summary-card{display:grid;gap:12px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 85%,transparent);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))}.summary-title{font-weight:600}.summary-metrics{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}.summary-metrics.compact{grid-template-columns:repeat(2,minmax(100px,1fr))}.metric{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 88%,transparent)}.metric-value{font-size:20px;font-weight:700;line-height:1}.metric-label{color:var(--md-sys-color-on-surface-variant);font-size:12px}.state-chip-list{display:flex;flex-wrap:wrap;gap:8px}.state-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 70%,transparent);color:var(--md-sys-color-on-primary-container);font-size:12px}.state-chip.derived{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 80%,transparent);color:var(--md-sys-color-on-tertiary-container)}.state-chip mat-icon{font-size:16px;width:16px;height:16px}.summary-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.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"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], widgets: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgets", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class ConnectionEditorDialogComponent {
@@ -4253,11 +4629,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 const DERIVED_OPERATORS = ['merge-objects', 'pick', 'omit'];
 const MERGE_STRATEGIES = ['replace', 'merge', 'append', 'remove-keys'];
+const VALUE_MODES = ['json', 'string', 'number', 'boolean', 'null'];
+const GROUPING_KINDS = ['section', 'tabs', 'hero', 'rail'];
 class PageConfigEditorComponent {
     contextExample = 'Ex.: {"tenantId":"acme","locale":"pt-BR"}';
     stateValuesExample = 'Ex.: {"query":{"filter":{"year":2026}},"selection":{"department":"Finance"}}';
     derivedOperators = DERIVED_OPERATORS;
     mergeStrategies = MERGE_STRATEGIES;
+    valueModes = VALUE_MODES;
+    groupingKinds = GROUPING_KINDS;
+    layoutPresetEntries = Object.values(BUILTIN_PAGE_LAYOUT_PRESETS);
+    themePresetEntries = Object.values(BUILTIN_PAGE_THEME_PRESETS);
     page = input(null, ...(ngDevMode ? [{ debugName: "page" }] : []));
     identity = input(null, ...(ngDevMode ? [{ debugName: "identity" }] : []));
     gridsterOptions = input(null, ...(ngDevMode ? [{ debugName: "gridsterOptions" }] : []));
@@ -4268,12 +4650,23 @@ class PageConfigEditorComponent {
         gap: new FormControl(null),
     });
     contextControl = new FormControl('', { nonNullable: true });
+    layoutPresetControl = new FormControl('', { nonNullable: true });
+    themePresetControl = new FormControl('', { nonNullable: true });
+    groupingControl = new FormControl('', { nonNullable: true });
+    deviceLayoutsControl = new FormControl('', { nonNullable: true });
     stateValuesControl = new FormControl('', { nonNullable: true });
+    groupingNodes = new FormArray([]);
     schemaNodes = new FormArray([]);
     derivedNodes = new FormArray([]);
+    deviceDesktopForm = this.createDeviceLayoutForm();
+    deviceTabletForm = this.createDeviceLayoutForm();
+    deviceMobileForm = this.createDeviceLayoutForm();
     contextError = signal(null, ...(ngDevMode ? [{ debugName: "contextError" }] : []));
+    layoutError = signal(null, ...(ngDevMode ? [{ debugName: "layoutError" }] : []));
     stateError = signal(null, ...(ngDevMode ? [{ debugName: "stateError" }] : []));
     lastContext = '';
+    lastGrouping = '';
+    lastDeviceLayouts = '';
     lastStateValues = '';
     constructor() {
         effect(() => {
@@ -4290,11 +4683,45 @@ class PageConfigEditorComponent {
                 this.contextControl.setValue(context, { emitEvent: false });
                 this.contextError.set(null);
             }
+            this.layoutPresetControl.setValue(next?.layoutPreset || '', { emitEvent: false });
+            this.themePresetControl.setValue(next?.themePreset || '', { emitEvent: false });
+            const grouping = next?.grouping ? JSON.stringify(next.grouping, null, 2) : '';
+            if (grouping !== this.lastGrouping) {
+                this.lastGrouping = grouping;
+                this.groupingControl.setValue(grouping, { emitEvent: false });
+                this.replaceGroupingNodes(next?.grouping);
+                this.layoutError.set(null);
+            }
+            const deviceLayouts = next?.deviceLayouts ? JSON.stringify(next.deviceLayouts, null, 2) : '';
+            if (deviceLayouts !== this.lastDeviceLayouts) {
+                this.lastDeviceLayouts = deviceLayouts;
+                this.deviceLayoutsControl.setValue(deviceLayouts, { emitEvent: false });
+                this.hydrateDeviceLayoutControls(next?.deviceLayouts);
+                this.layoutError.set(null);
+            }
             this.hydrateStateEditor(next?.state);
         });
         this.contextControl.valueChanges
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.contextError.set(null));
+        this.groupingControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
+        this.deviceLayoutsControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
+        this.groupingNodes.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
+        this.deviceDesktopForm.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
+        this.deviceTabletForm.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
+        this.deviceMobileForm.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.layoutError.set(null));
         this.stateValuesControl.valueChanges
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.stateError.set(null));
@@ -4317,15 +4744,27 @@ class PageConfigEditorComponent {
     removeDerivedNode(index) {
         this.derivedNodes.removeAt(index);
     }
+    addGroupingNode(seed) {
+        this.groupingNodes.push(this.createGroupingNodeGroup(seed));
+    }
+    removeGroupingNode(index) {
+        this.groupingNodes.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 grouping = this.buildGrouping();
+        const deviceLayouts = this.buildDeviceLayouts();
         const state = this.buildState();
         if (context === null) {
             this.contextError.set('JSON invalido');
             return;
         }
+        if (grouping === null || deviceLayouts === null) {
+            this.layoutError.set('JSON invalido');
+            return;
+        }
         if (state === null) {
             this.stateError.set('JSON invalido');
             return;
@@ -4333,6 +4772,10 @@ class PageConfigEditorComponent {
         const updated = {
             ...next,
             options,
+            layoutPreset: this.layoutPresetControl.value.trim() || undefined,
+            themePreset: this.themePresetControl.value.trim() || undefined,
+            grouping: grouping || undefined,
+            deviceLayouts: deviceLayouts || undefined,
             context: context || undefined,
             state: state || undefined,
         };
@@ -4350,8 +4793,167 @@ class PageConfigEditorComponent {
         this.lastContext = context;
         this.contextControl.setValue(context, { emitEvent: false });
         this.contextError.set(null);
+        this.layoutPresetControl.setValue(next?.layoutPreset || '', { emitEvent: false });
+        this.themePresetControl.setValue(next?.themePreset || '', { emitEvent: false });
+        const grouping = next?.grouping ? JSON.stringify(next.grouping, null, 2) : '';
+        this.lastGrouping = grouping;
+        this.groupingControl.setValue(grouping, { emitEvent: false });
+        this.replaceGroupingNodes(next?.grouping);
+        const deviceLayouts = next?.deviceLayouts ? JSON.stringify(next.deviceLayouts, null, 2) : '';
+        this.lastDeviceLayouts = deviceLayouts;
+        this.deviceLayoutsControl.setValue(deviceLayouts, { emitEvent: false });
+        this.hydrateDeviceLayoutControls(next?.deviceLayouts);
+        this.layoutError.set(null);
         this.hydrateStateEditor(next?.state);
     }
+    replaceGroupingNodes(grouping) {
+        this.groupingNodes.clear({ emitEvent: false });
+        for (const group of grouping || []) {
+            this.groupingNodes.push(this.createGroupingNodeGroup(group), { emitEvent: false });
+        }
+    }
+    createGroupingNodeGroup(seed) {
+        const label = seed && 'label' in seed && typeof seed.label === 'string'
+            ? seed.label
+            : '';
+        return new FormGroup({
+            kind: new FormControl(seed?.kind || 'section', { nonNullable: true }),
+            id: new FormControl(seed?.id || '', { nonNullable: true, validators: [Validators.required] }),
+            label: new FormControl(label, { nonNullable: true }),
+            widgetKeysCsv: new FormControl(this.stringifyGroupingWidgetKeys(seed), { nonNullable: true }),
+            layout: new FormControl(seed?.kind === 'section' ? seed.layout || '' : '', { nonNullable: true }),
+            emphasis: new FormControl(seed?.kind === 'hero' ? seed.emphasis || '' : '', { nonNullable: true }),
+            side: new FormControl(seed?.kind === 'rail' ? seed.side || 'right' : 'right', { nonNullable: true }),
+            tabsJson: new FormControl(seed?.kind === 'tabs' ? JSON.stringify(seed.tabs || [], null, 2) : '', { nonNullable: true }),
+        });
+    }
+    stringifyGroupingWidgetKeys(seed) {
+        if (!seed || seed.kind === 'tabs')
+            return '';
+        return seed.widgetKeys.join(', ');
+    }
+    buildGrouping() {
+        const grouping = [];
+        for (const group of this.groupingNodes.controls) {
+            const kind = group.controls.kind.value;
+            const id = group.controls.id.value.trim();
+            if (!id)
+                continue;
+            const label = group.controls.label.value.trim();
+            if (kind === 'tabs') {
+                const tabs = this.parseJson(group.controls.tabsJson.value, []);
+                if (tabs === null)
+                    return null;
+                grouping.push({
+                    kind: 'tabs',
+                    id,
+                    ...(label ? { label } : {}),
+                    tabs,
+                });
+                continue;
+            }
+            const widgetKeys = group.controls.widgetKeysCsv.value
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean);
+            if (kind === 'section') {
+                grouping.push({
+                    kind: 'section',
+                    id,
+                    ...(label ? { label } : {}),
+                    widgetKeys,
+                    ...(group.controls.layout.value ? { layout: group.controls.layout.value } : {}),
+                });
+                continue;
+            }
+            if (kind === 'hero') {
+                grouping.push({
+                    kind: 'hero',
+                    id,
+                    widgetKeys,
+                    ...(group.controls.emphasis.value ? { emphasis: group.controls.emphasis.value } : {}),
+                });
+                continue;
+            }
+            grouping.push({
+                kind: 'rail',
+                id,
+                side: (group.controls.side.value || 'right'),
+                widgetKeys,
+            });
+        }
+        const json = grouping.length ? JSON.stringify(grouping, null, 2) : '';
+        this.lastGrouping = json;
+        this.groupingControl.setValue(json, { emitEvent: false });
+        return grouping;
+    }
+    hydrateDeviceLayoutControls(deviceLayouts) {
+        this.patchDeviceLayoutForm(this.deviceDesktopForm, deviceLayouts?.desktop);
+        this.patchDeviceLayoutForm(this.deviceTabletForm, deviceLayouts?.tablet);
+        this.patchDeviceLayoutForm(this.deviceMobileForm, deviceLayouts?.mobile);
+    }
+    buildDeviceLayouts() {
+        const desktop = this.buildDeviceLayoutVariant(this.deviceDesktopForm);
+        const tablet = this.buildDeviceLayoutVariant(this.deviceTabletForm);
+        const mobile = this.buildDeviceLayoutVariant(this.deviceMobileForm);
+        if (desktop === null || tablet === null || mobile === null)
+            return null;
+        const deviceLayouts = {};
+        if (Object.keys(desktop).length)
+            deviceLayouts.desktop = desktop;
+        if (Object.keys(tablet).length)
+            deviceLayouts.tablet = tablet;
+        if (Object.keys(mobile).length)
+            deviceLayouts.mobile = mobile;
+        const json = Object.keys(deviceLayouts).length ? JSON.stringify(deviceLayouts, null, 2) : '';
+        this.lastDeviceLayouts = json;
+        this.deviceLayoutsControl.setValue(json, { emitEvent: false });
+        return deviceLayouts;
+    }
+    createDeviceLayoutForm() {
+        return new FormGroup({
+            orientation: new FormControl('', { nonNullable: true }),
+            columns: new FormControl(null),
+            gap: new FormControl('', { nonNullable: true }),
+            breakpointsJson: new FormControl('', { nonNullable: true }),
+            groupingOverridesJson: new FormControl('', { nonNullable: true }),
+            widgetOverridesJson: new FormControl('', { nonNullable: true }),
+        });
+    }
+    patchDeviceLayoutForm(form, variant) {
+        form.setValue({
+            orientation: variant?.layout?.orientation || '',
+            columns: variant?.layout?.columns ?? null,
+            gap: variant?.layout?.gap || '',
+            breakpointsJson: variant?.layout?.breakpoints ? JSON.stringify(variant.layout.breakpoints, null, 2) : '',
+            groupingOverridesJson: variant?.groupingOverrides ? JSON.stringify(variant.groupingOverrides, null, 2) : '',
+            widgetOverridesJson: variant?.widgetOverrides ? JSON.stringify(variant.widgetOverrides, null, 2) : '',
+        }, { emitEvent: false });
+    }
+    buildDeviceLayoutVariant(form) {
+        const breakpoints = this.parseJson(form.controls.breakpointsJson.value, {});
+        const groupingOverrides = this.parseJson(form.controls.groupingOverridesJson.value, []);
+        const widgetOverrides = this.parseJson(form.controls.widgetOverridesJson.value, {});
+        if (breakpoints === null || groupingOverrides === null || widgetOverrides === null)
+            return null;
+        const layout = {};
+        if (form.controls.orientation.value)
+            layout.orientation = form.controls.orientation.value;
+        if (form.controls.columns.value != null)
+            layout.columns = form.controls.columns.value;
+        if (form.controls.gap.value.trim())
+            layout.gap = form.controls.gap.value.trim();
+        if (Object.keys(breakpoints).length)
+            layout.breakpoints = breakpoints;
+        const variant = {};
+        if (Object.keys(layout).length)
+            variant.layout = layout;
+        if (groupingOverrides.length)
+            variant.groupingOverrides = groupingOverrides;
+        if (Object.keys(widgetOverrides).length)
+            variant.widgetOverrides = widgetOverrides;
+        return variant;
+    }
     hydrateStateEditor(state) {
         const normalized = this.normalizeState(state);
         const nextValues = normalized.values ? JSON.stringify(normalized.values, null, 2) : '';
@@ -4377,10 +4979,13 @@ class PageConfigEditorComponent {
     }
     createSchemaNodeGroup(seed) {
         const config = seed?.config || {};
+        const initialValueConfig = this.describeValue(config.initial);
         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 }),
+            initialMode: new FormControl(initialValueConfig.mode, { nonNullable: true }),
+            initialJson: new FormControl(initialValueConfig.json, { nonNullable: true }),
+            initialScalar: new FormControl(initialValueConfig.scalar, { 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 }),
@@ -4401,6 +5006,12 @@ class PageConfigEditorComponent {
         const keysCsv = Array.isArray(operatorOptions['keys'])
             ? operatorOptions['keys'].filter((item) => typeof item === 'string').join(', ')
             : '';
+        const templateValue = compute?.kind === 'template'
+            ? compute.value
+            : compute?.kind === 'operator' && compute.operator === 'template'
+                ? compute.options?.['value']
+                : undefined;
+        const templateValueConfig = this.describeValue(templateValue);
         return new FormGroup({
             path: new FormControl(seed?.path || '', { nonNullable: true, validators: [Validators.required] }),
             dependsOn: new FormControl((config?.dependsOn || []).join(', '), { nonNullable: true }),
@@ -4415,11 +5026,9 @@ class PageConfigEditorComponent {
             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 }),
+            templateMode: new FormControl(templateValueConfig.mode, { nonNullable: true }),
+            templateJson: new FormControl(templateValueConfig.json, { nonNullable: true }),
+            templateScalar: new FormControl(templateValueConfig.scalar, { nonNullable: true }),
             description: new FormControl(config?.description || '', { nonNullable: true }),
         });
     }
@@ -4451,8 +5060,8 @@ class PageConfigEditorComponent {
             const path = group.controls.path.value.trim();
             if (!path)
                 continue;
-            const initial = this.parseJson(group.controls.initial.value, undefined);
-            if (initial === null)
+            const initial = this.parseValueInput(group.controls.initialMode.value, group.controls.initialScalar.value, group.controls.initialJson.value, undefined);
+            if (initial.invalid)
                 return null;
             const node = {};
             const type = group.controls.type.value.trim();
@@ -4461,8 +5070,8 @@ class PageConfigEditorComponent {
             const description = group.controls.description.value.trim();
             if (type)
                 node.type = type;
-            if (initial !== undefined)
-                node.initial = initial;
+            if (initial.value !== undefined)
+                node.initial = initial.value;
             if (persist === 'true')
                 node.persist = true;
             if (persist === 'false')
@@ -4489,10 +5098,10 @@ class PageConfigEditorComponent {
             const description = group.controls.description.value.trim();
             let compute;
             if (computeKind === 'template') {
-                const value = this.parseJson(group.controls.template.value, undefined);
-                if (value === null)
+                const templateValue = this.parseValueInput(group.controls.templateMode.value, group.controls.templateScalar.value, group.controls.templateJson.value, undefined);
+                if (templateValue.invalid)
                     return null;
-                compute = { kind: 'template', value };
+                compute = { kind: 'template', value: templateValue.value };
             }
             else if (computeKind === 'expr') {
                 compute = { kind: 'expr', expression: group.controls.expression.value.trim() };
@@ -4565,6 +5174,26 @@ class PageConfigEditorComponent {
             return null;
         }
     }
+    parseGrouping(raw) {
+        if (!raw.trim())
+            return [];
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    parseDeviceLayouts(raw) {
+        if (!raw.trim())
+            return {};
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
     parseJson(raw, emptyValue) {
         if (!raw.trim())
             return emptyValue;
@@ -4575,6 +5204,43 @@ class PageConfigEditorComponent {
             return null;
         }
     }
+    parseValueInput(mode, scalarRaw, jsonRaw, emptyValue) {
+        if (mode === 'json') {
+            const parsed = this.parseJson(jsonRaw, emptyValue);
+            return { value: parsed, invalid: parsed === null };
+        }
+        if (mode === 'string')
+            return { value: scalarRaw, invalid: false };
+        if (mode === 'number') {
+            const trimmed = scalarRaw.trim();
+            if (!trimmed)
+                return { value: emptyValue, invalid: false };
+            const parsed = Number(trimmed);
+            return { value: parsed, invalid: Number.isNaN(parsed) };
+        }
+        if (mode === 'boolean')
+            return { value: scalarRaw === 'true', invalid: false };
+        if (mode === 'null')
+            return { value: null, invalid: false };
+        return { value: emptyValue, invalid: false };
+    }
+    describeValue(value) {
+        if (value === undefined)
+            return { mode: 'json', scalar: '', json: '' };
+        if (value === null)
+            return { mode: 'null', scalar: '', json: '' };
+        if (typeof value === 'string')
+            return { mode: 'string', scalar: value, json: '' };
+        if (typeof value === 'number')
+            return { mode: 'number', scalar: String(value), json: '' };
+        if (typeof value === 'boolean')
+            return { mode: 'boolean', scalar: String(value), json: '' };
+        return {
+            mode: 'json',
+            scalar: '',
+            json: JSON.stringify(value, null, 2),
+        };
+    }
     buildOperatorOptions(group) {
         const operator = group.controls.operator.value.trim();
         if (operator === 'pick' || operator === 'omit') {
@@ -4645,6 +5311,226 @@ class PageConfigEditorComponent {
         </mat-form-field>
       </form>
 
+      <div class="page-section">Layout Preset</div>
+      <div class="grid-form">
+        <mat-form-field appearance="outline">
+          <mat-label>Layout preset</mat-label>
+          <mat-select [formControl]="layoutPresetControl">
+            <mat-option value="">Nenhum</mat-option>
+            @for (preset of layoutPresetEntries; track preset.id) {
+              <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Theme preset</mat-label>
+          <mat-select [formControl]="themePresetControl">
+            <mat-option value="">Padrão do layout</mat-option>
+            @for (preset of themePresetEntries; track preset.id) {
+              <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div class="page-section">Grouping</div>
+      <div class="state-group">
+        <div class="state-group-head">
+          <div class="state-group-title">Grouping</div>
+          <button mat-stroked-button type="button" (click)="addGroupingNode()">
+            <mat-icon>add</mat-icon>
+            Adicionar grupo
+          </button>
+        </div>
+        <div class="state-group-help">Organiza a página em section, tabs, hero e rail com intenção estrutural.</div>
+        @if (!groupingNodes.length) {
+          <div class="state-empty">Nenhum grupo configurado.</div>
+        }
+        <div class="state-list">
+          @for (group of groupingNodes.controls; track $index) {
+            <div class="state-card" [formGroup]="group">
+              <div class="state-card-head">
+                <div class="state-card-title">Grupo {{ $index + 1 }}</div>
+                <button mat-icon-button type="button" (click)="removeGroupingNode($index)" aria-label="Remover grupo">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <div class="state-card-grid">
+                <mat-form-field appearance="outline">
+                  <mat-label>Kind</mat-label>
+                  <mat-select formControlName="kind">
+                    @for (kind of groupingKinds; track kind) {
+                      <mat-option [value]="kind">{{ kind }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Id</mat-label>
+                  <input matInput formControlName="id" />
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Label</mat-label>
+                  <input matInput formControlName="label" />
+                </mat-form-field>
+                @if (group.controls.kind.value === 'section') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Layout</mat-label>
+                    <mat-select formControlName="layout">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="stack">stack</mat-option>
+                      <mat-option value="grid">grid</mat-option>
+                      <mat-option value="row">row</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'hero') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Emphasis</mat-label>
+                    <mat-select formControlName="emphasis">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="high">high</mat-option>
+                      <mat-option value="medium">medium</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'rail') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Side</mat-label>
+                    <mat-select formControlName="side">
+                      <mat-option value="left">left</mat-option>
+                      <mat-option value="right">right</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'tabs') {
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Tabs (JSON)</mat-label>
+                    <textarea matInput rows="5" formControlName="tabsJson"></textarea>
+                  </mat-form-field>
+                } @else {
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Widget keys (vírgula)</mat-label>
+                    <input matInput formControlName="widgetKeysCsv" />
+                  </mat-form-field>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="page-section">Device Layouts</div>
+      <div class="state-group">
+        <div class="state-group-head">
+          <div class="state-group-title">Device Layouts</div>
+        </div>
+        <div class="state-group-help">Overrides por device para layout, grouping e widgets com campos separados por intenção.</div>
+        <div class="state-list">
+          <div class="state-card" [formGroup]="deviceDesktopForm">
+            <div class="state-card-head"><div class="state-card-title">Desktop</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="state-card" [formGroup]="deviceTabletForm">
+            <div class="state-card-head"><div class="state-card-title">Tablet</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="state-card" [formGroup]="deviceMobileForm">
+            <div class="state-card-head"><div class="state-card-title">Mobile</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+        </div>
+      </div>
+      @if (layoutError()) {
+        <div class="page-error" role="alert">{{ layoutError() }}</div>
+      }
+
       <div class="page-section">Contexto</div>
       <mat-form-field appearance="outline">
         <mat-label>Contexto (JSON)</mat-label>
@@ -4728,10 +5614,38 @@ class PageConfigEditorComponent {
                       }
                     </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 appearance="outline">
+                    <mat-label>Initial</mat-label>
+                    <mat-select formControlName="initialMode">
+                      @for (mode of valueModes; track mode) {
+                        <mat-option [value]="mode">{{ mode }}</mat-option>
+                      }
+                    </mat-select>
                   </mat-form-field>
+                  @if (group.controls.initialMode.value === 'json') {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="initialJson"></textarea>
+                    </mat-form-field>
+                  } @else if (group.controls.initialMode.value === 'boolean') {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial</mat-label>
+                      <mat-select formControlName="initialScalar">
+                        <mat-option value="true">true</mat-option>
+                        <mat-option value="false">false</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                  } @else if (group.controls.initialMode.value === 'null') {
+                    <div class="state-operator-hint span-2">
+                      <mat-icon>block</mat-icon>
+                      <span>O valor inicial será null.</span>
+                    </div>
+                  } @else {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial</mat-label>
+                      <input matInput formControlName="initialScalar" />
+                    </mat-form-field>
+                  }
                   <mat-form-field appearance="outline" class="span-2">
                     <mat-label>Descrição</mat-label>
                     <input matInput formControlName="description" />
@@ -4807,10 +5721,38 @@ class PageConfigEditorComponent {
                     }
                   }
                   @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 appearance="outline">
+                      <mat-label>Template</mat-label>
+                      <mat-select formControlName="templateMode">
+                        @for (mode of valueModes; track mode) {
+                          <mat-option [value]="mode">{{ mode }}</mat-option>
+                        }
+                      </mat-select>
                     </mat-form-field>
+                    @if (group.controls.templateMode.value === 'json') {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template (JSON)</mat-label>
+                        <textarea matInput rows="4" formControlName="templateJson"></textarea>
+                      </mat-form-field>
+                    } @else if (group.controls.templateMode.value === 'boolean') {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template</mat-label>
+                        <mat-select formControlName="templateScalar">
+                          <mat-option value="true">true</mat-option>
+                          <mat-option value="false">false</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                    } @else if (group.controls.templateMode.value === 'null') {
+                      <div class="state-operator-hint span-2">
+                        <mat-icon>block</mat-icon>
+                        <span>O template retornará null.</span>
+                      </div>
+                    } @else {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template</mat-label>
+                        <input matInput formControlName="templateScalar" />
+                      </mat-form-field>
+                    }
                   }
                   @if (group.controls.computeKind.value === 'expr') {
                     <mat-form-field appearance="outline" class="span-3">
@@ -4896,6 +5838,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </mat-form-field>
       </form>
 
+      <div class="page-section">Layout Preset</div>
+      <div class="grid-form">
+        <mat-form-field appearance="outline">
+          <mat-label>Layout preset</mat-label>
+          <mat-select [formControl]="layoutPresetControl">
+            <mat-option value="">Nenhum</mat-option>
+            @for (preset of layoutPresetEntries; track preset.id) {
+              <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Theme preset</mat-label>
+          <mat-select [formControl]="themePresetControl">
+            <mat-option value="">Padrão do layout</mat-option>
+            @for (preset of themePresetEntries; track preset.id) {
+              <mat-option [value]="preset.id">{{ preset.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div class="page-section">Grouping</div>
+      <div class="state-group">
+        <div class="state-group-head">
+          <div class="state-group-title">Grouping</div>
+          <button mat-stroked-button type="button" (click)="addGroupingNode()">
+            <mat-icon>add</mat-icon>
+            Adicionar grupo
+          </button>
+        </div>
+        <div class="state-group-help">Organiza a página em section, tabs, hero e rail com intenção estrutural.</div>
+        @if (!groupingNodes.length) {
+          <div class="state-empty">Nenhum grupo configurado.</div>
+        }
+        <div class="state-list">
+          @for (group of groupingNodes.controls; track $index) {
+            <div class="state-card" [formGroup]="group">
+              <div class="state-card-head">
+                <div class="state-card-title">Grupo {{ $index + 1 }}</div>
+                <button mat-icon-button type="button" (click)="removeGroupingNode($index)" aria-label="Remover grupo">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <div class="state-card-grid">
+                <mat-form-field appearance="outline">
+                  <mat-label>Kind</mat-label>
+                  <mat-select formControlName="kind">
+                    @for (kind of groupingKinds; track kind) {
+                      <mat-option [value]="kind">{{ kind }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Id</mat-label>
+                  <input matInput formControlName="id" />
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Label</mat-label>
+                  <input matInput formControlName="label" />
+                </mat-form-field>
+                @if (group.controls.kind.value === 'section') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Layout</mat-label>
+                    <mat-select formControlName="layout">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="stack">stack</mat-option>
+                      <mat-option value="grid">grid</mat-option>
+                      <mat-option value="row">row</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'hero') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Emphasis</mat-label>
+                    <mat-select formControlName="emphasis">
+                      <mat-option value="">Padrão</mat-option>
+                      <mat-option value="high">high</mat-option>
+                      <mat-option value="medium">medium</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'rail') {
+                  <mat-form-field appearance="outline">
+                    <mat-label>Side</mat-label>
+                    <mat-select formControlName="side">
+                      <mat-option value="left">left</mat-option>
+                      <mat-option value="right">right</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+                @if (group.controls.kind.value === 'tabs') {
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Tabs (JSON)</mat-label>
+                    <textarea matInput rows="5" formControlName="tabsJson"></textarea>
+                  </mat-form-field>
+                } @else {
+                  <mat-form-field appearance="outline" class="span-3">
+                    <mat-label>Widget keys (vírgula)</mat-label>
+                    <input matInput formControlName="widgetKeysCsv" />
+                  </mat-form-field>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="page-section">Device Layouts</div>
+      <div class="state-group">
+        <div class="state-group-head">
+          <div class="state-group-title">Device Layouts</div>
+        </div>
+        <div class="state-group-help">Overrides por device para layout, grouping e widgets com campos separados por intenção.</div>
+        <div class="state-list">
+          <div class="state-card" [formGroup]="deviceDesktopForm">
+            <div class="state-card-head"><div class="state-card-title">Desktop</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="state-card" [formGroup]="deviceTabletForm">
+            <div class="state-card-head"><div class="state-card-title">Tablet</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="state-card" [formGroup]="deviceMobileForm">
+            <div class="state-card-head"><div class="state-card-title">Mobile</div></div>
+            <div class="state-card-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Orientation</mat-label>
+                <mat-select formControlName="orientation">
+                  <mat-option value="">Padrão</mat-option>
+                  <mat-option value="vertical">vertical</mat-option>
+                  <mat-option value="columns">columns</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Columns</mat-label>
+                <input matInput type="number" min="1" formControlName="columns" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gap</mat-label>
+                <input matInput formControlName="gap" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Breakpoints (JSON)</mat-label>
+                <textarea matInput rows="3" formControlName="breakpointsJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Grouping overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="groupingOverridesJson"></textarea>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="span-3">
+                <mat-label>Widget overrides (JSON)</mat-label>
+                <textarea matInput rows="4" formControlName="widgetOverridesJson"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
+        </div>
+      </div>
+      @if (layoutError()) {
+        <div class="page-error" role="alert">{{ layoutError() }}</div>
+      }
+
       <div class="page-section">Contexto</div>
       <mat-form-field appearance="outline">
         <mat-label>Contexto (JSON)</mat-label>
@@ -4979,10 +6141,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       }
                     </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 appearance="outline">
+                    <mat-label>Initial</mat-label>
+                    <mat-select formControlName="initialMode">
+                      @for (mode of valueModes; track mode) {
+                        <mat-option [value]="mode">{{ mode }}</mat-option>
+                      }
+                    </mat-select>
                   </mat-form-field>
+                  @if (group.controls.initialMode.value === 'json') {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial (JSON)</mat-label>
+                      <textarea matInput rows="4" formControlName="initialJson"></textarea>
+                    </mat-form-field>
+                  } @else if (group.controls.initialMode.value === 'boolean') {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial</mat-label>
+                      <mat-select formControlName="initialScalar">
+                        <mat-option value="true">true</mat-option>
+                        <mat-option value="false">false</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                  } @else if (group.controls.initialMode.value === 'null') {
+                    <div class="state-operator-hint span-2">
+                      <mat-icon>block</mat-icon>
+                      <span>O valor inicial será null.</span>
+                    </div>
+                  } @else {
+                    <mat-form-field appearance="outline" class="span-2">
+                      <mat-label>Initial</mat-label>
+                      <input matInput formControlName="initialScalar" />
+                    </mat-form-field>
+                  }
                   <mat-form-field appearance="outline" class="span-2">
                     <mat-label>Descrição</mat-label>
                     <input matInput formControlName="description" />
@@ -5058,10 +6248,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     }
                   }
                   @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 appearance="outline">
+                      <mat-label>Template</mat-label>
+                      <mat-select formControlName="templateMode">
+                        @for (mode of valueModes; track mode) {
+                          <mat-option [value]="mode">{{ mode }}</mat-option>
+                        }
+                      </mat-select>
                     </mat-form-field>
+                    @if (group.controls.templateMode.value === 'json') {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template (JSON)</mat-label>
+                        <textarea matInput rows="4" formControlName="templateJson"></textarea>
+                      </mat-form-field>
+                    } @else if (group.controls.templateMode.value === 'boolean') {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template</mat-label>
+                        <mat-select formControlName="templateScalar">
+                          <mat-option value="true">true</mat-option>
+                          <mat-option value="false">false</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                    } @else if (group.controls.templateMode.value === 'null') {
+                      <div class="state-operator-hint span-2">
+                        <mat-icon>block</mat-icon>
+                        <span>O template retornará null.</span>
+                      </div>
+                    } @else {
+                      <mat-form-field appearance="outline" class="span-2">
+                        <mat-label>Template</mat-label>
+                        <input matInput formControlName="templateScalar" />
+                      </mat-form-field>
+                    }
                   }
                   @if (group.controls.computeKind.value === 'expr') {
                     <mat-form-field appearance="outline" class="span-3">
@@ -5650,6 +6868,96 @@ class DynamicGridsterPageComponent {
     getWidgetType(key) { return (this.widgets().find((w) => w.key === key)?.definition?.id) || undefined; }
     getWidgetDef(key) { return this.widgets().find((w) => w.key === key)?.definition; }
     getWidgetShell(key) { return this.widgets().find((w) => w.key === key)?.shell; }
+    hasCanvasSummary() { return !!(this.layoutPresetLabel() || this.themePresetLabel() || this.groupingCount() || this.configuredDeviceKinds().length); }
+    groupingCount() { return this.currentPage()?.grouping?.length || 0; }
+    selectedWidgetKey() { return this.selectedKey(); }
+    layoutPresetLabel() {
+        const presetId = this.currentPage()?.layoutPreset;
+        if (!presetId)
+            return null;
+        return BUILTIN_PAGE_LAYOUT_PRESETS[presetId]?.label || presetId;
+    }
+    themePresetLabel() {
+        const presetId = this.currentPage()?.themePreset;
+        if (!presetId)
+            return null;
+        return BUILTIN_PAGE_THEME_PRESETS[presetId]?.label || presetId;
+    }
+    configuredDeviceKinds() {
+        const deviceLayouts = this.currentPage()?.deviceLayouts;
+        if (!deviceLayouts)
+            return [];
+        return ['desktop', 'tablet', 'mobile'].filter((device) => !!deviceLayouts[device]);
+    }
+    hasTileMetadata(key) {
+        return this.widgetSlotLabels(key).length > 0 || this.widgetGroupingLabels(key).length > 0 || this.widgetDeviceLabels(key).length > 0;
+    }
+    presetSlots() {
+        return this.activeLayoutPreset()?.slotModel || [];
+    }
+    canAssignSelectedWidgetToSlot() {
+        return !!(this.enableCustomization && this.selectedKey() && this.presetSlots().length);
+    }
+    slotOccupancy(slotId) {
+        return this.widgets().filter((widget) => this.widgetSlotIds(widget.key).includes(slotId)).length;
+    }
+    slotCapacityLabel(slot) {
+        return slot.maxItems != null ? String(slot.maxItems) : 'n';
+    }
+    widgetSlotLabels(key) {
+        return this.widgetSlotIds(key)
+            .map((slotId) => this.presetSlots().find((slot) => slot.id === slotId)?.label || slotId)
+            .map((label) => `slot ${label}`);
+    }
+    isRecommendedSlotForSelectedWidget(slot) {
+        const selected = this.selectedKey();
+        if (!selected)
+            return false;
+        const widgetType = this.getWidgetType(selected);
+        return !!this.activeLayoutPreset()?.widgetSuggestions?.some((suggestion) => suggestion.slot === slot.id && suggestion.widgetType === widgetType);
+    }
+    assignSelectedWidgetToSlot(slotId, event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const widgetKey = this.selectedKey();
+        const preset = this.activeLayoutPreset();
+        if (!widgetKey || !preset)
+            return;
+        const page = this.currentPage() || { widgets: this.widgets() };
+        const grouping = this.reassignWidgetToSlot(page.grouping, preset, widgetKey, slotId);
+        const next = { ...page, grouping };
+        this.page = next;
+        this.pageChange.emit(next);
+    }
+    widgetGroupingLabels(key) {
+        const labels = [];
+        for (const group of this.currentPage()?.grouping || []) {
+            if (this.groupContainsWidget(group, key)) {
+                const base = this.groupDisplayLabel(group);
+                labels.push(group.kind === 'tabs' ? `tab ${base}` : `${group.kind} ${base}`);
+            }
+        }
+        return labels;
+    }
+    widgetDeviceLabels(key) {
+        const labels = [];
+        const deviceLayouts = this.currentPage()?.deviceLayouts;
+        for (const device of this.configuredDeviceKinds()) {
+            const variant = deviceLayouts?.[device];
+            if (!variant)
+                continue;
+            const widgetOverride = variant.widgetOverrides?.[key];
+            const groupingOverride = variant.groupingOverrides?.some((override) => this.groupingOverrideContainsWidget(override, key));
+            if (widgetOverride) {
+                const detail = widgetOverride.hidden ? 'hidden' : widgetOverride.span ? `span ${widgetOverride.span}` : 'override';
+                labels.push(`${device} ${detail}`);
+            }
+            else if (groupingOverride) {
+                labels.push(`${device} grouping`);
+            }
+        }
+        return labels;
+    }
     onTileClick(key, ev) {
         if (!this.enableCustomization)
             return;
@@ -6029,14 +7337,175 @@ class DynamicGridsterPageComponent {
             parts.push(identity.locale);
         return parts.join(':');
     }
+    currentPage() {
+        return this.parsePage(this.page);
+    }
+    activeLayoutPreset() {
+        const presetId = this.currentPage()?.layoutPreset;
+        if (!presetId)
+            return null;
+        return BUILTIN_PAGE_LAYOUT_PRESETS[presetId] || null;
+    }
+    groupContainsWidget(group, widgetKey) {
+        if (group.kind === 'tabs') {
+            return group.tabs.some((tab) => tab.widgetKeys.includes(widgetKey));
+        }
+        return group.widgetKeys.includes(widgetKey);
+    }
+    groupDisplayLabel(group) {
+        if ('label' in group && typeof group.label === 'string' && group.label.trim()) {
+            return group.label.trim();
+        }
+        return group.id;
+    }
+    widgetSlotIds(widgetKey) {
+        const preset = this.activeLayoutPreset();
+        if (!preset)
+            return [];
+        const grouping = this.currentPage()?.grouping || preset.defaultGrouping || [];
+        return preset.slotModel
+            .filter((slot) => this.slotContainsWidget(grouping, slot.id, widgetKey, preset))
+            .map((slot) => slot.id);
+    }
+    slotContainsWidget(grouping, slotId, widgetKey, preset) {
+        const directTarget = this.findSlotTarget(grouping, slotId, preset);
+        if (directTarget?.kind === 'group')
+            return directTarget.group.widgetKeys.includes(widgetKey);
+        if (directTarget?.kind === 'tab')
+            return directTarget.tab.widgetKeys.includes(widgetKey);
+        return false;
+    }
+    reassignWidgetToSlot(grouping, preset, widgetKey, slotId) {
+        const nextGrouping = this.cloneGrouping(grouping?.length ? grouping : preset.defaultGrouping || []);
+        this.removeWidgetFromGrouping(nextGrouping, widgetKey);
+        const target = this.findSlotTarget(nextGrouping, slotId, preset);
+        if (target?.kind === 'group') {
+            if (!target.group.widgetKeys.includes(widgetKey))
+                target.group.widgetKeys.push(widgetKey);
+            return nextGrouping;
+        }
+        if (target?.kind === 'tab') {
+            if (!target.tab.widgetKeys.includes(widgetKey))
+                target.tab.widgetKeys.push(widgetKey);
+            return nextGrouping;
+        }
+        const slot = preset.slotModel.find((entry) => entry.id === slotId);
+        nextGrouping.push({
+            kind: 'section',
+            id: slotId,
+            label: slot?.label || slotId,
+            widgetKeys: [widgetKey],
+            layout: 'stack',
+        });
+        return nextGrouping;
+    }
+    findSlotTarget(grouping, slotId, preset) {
+        for (const group of grouping) {
+            if (group.kind === 'tabs') {
+                const directTab = group.tabs.find((tab) => tab.id === slotId);
+                if (directTab)
+                    return { kind: 'tab', group, tab: directTab };
+                continue;
+            }
+            if (group.id === slotId)
+                return { kind: 'group', group };
+        }
+        const templateGrouping = preset.defaultGrouping || [];
+        for (const templateGroup of templateGrouping) {
+            if (templateGroup.kind === 'tabs') {
+                const templateTab = templateGroup.tabs.find((tab) => tab.id === slotId || tab.widgetKeys.includes(slotId));
+                if (!templateTab)
+                    continue;
+                const currentGroup = grouping.find((candidate) => candidate.kind === 'tabs' && candidate.id === templateGroup.id);
+                const currentTab = currentGroup?.tabs.find((tab) => tab.id === templateTab.id);
+                if (currentGroup && currentTab)
+                    return { kind: 'tab', group: currentGroup, tab: currentTab };
+                continue;
+            }
+            if (templateGroup.id === slotId || templateGroup.widgetKeys.includes(slotId)) {
+                const currentGroup = grouping.find((candidate) => candidate.kind !== 'tabs' && candidate.id === templateGroup.id);
+                if (currentGroup)
+                    return { kind: 'group', group: currentGroup };
+            }
+        }
+        return null;
+    }
+    removeWidgetFromGrouping(grouping, widgetKey) {
+        for (const group of grouping) {
+            if (group.kind === 'tabs') {
+                group.tabs = group.tabs.map((tab) => ({
+                    ...tab,
+                    widgetKeys: tab.widgetKeys.filter((candidate) => candidate !== widgetKey),
+                }));
+                continue;
+            }
+            group.widgetKeys = group.widgetKeys.filter((candidate) => candidate !== widgetKey);
+        }
+    }
+    cloneGrouping(grouping) {
+        return grouping.map((group) => {
+            if (group.kind === 'tabs') {
+                return {
+                    ...group,
+                    tabs: group.tabs.map((tab) => ({
+                        ...tab,
+                        widgetKeys: [...tab.widgetKeys],
+                    })),
+                };
+            }
+            return {
+                ...group,
+                widgetKeys: [...group.widgetKeys],
+            };
+        });
+    }
+    groupingOverrideContainsWidget(override, widgetKey) {
+        if (override.widgetKeys?.includes(widgetKey))
+            return true;
+        return override.tabs?.some((tab) => tab.widgetKeys.includes(widgetKey)) || false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicGridsterPageComponent, deps: [{ token: i1$1.ConnectionManagerService }, { token: i2$3.Router }, { token: i0.ElementRef }, { token: i1.MatDialog }, { token: GraphMapperService }, { token: i1$1.ComponentMetadataRegistry }, { token: ASYNC_CONFIG_STORAGE }, { token: i1$1.ComponentKeyService }, { token: TABLE_CONFIG_EDITOR, optional: true }, { token: STEPPER_CONFIG_EDITOR, optional: true }, { token: SETTINGS_PANEL_BRIDGE, optional: true }, { token: i2$3.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DynamicGridsterPageComponent, isStandalone: true, selector: "praxis-dynamic-gridster-page", inputs: { page: "page", context: "context", strictValidation: "strictValidation", gridsterOptions: "gridsterOptions", enableCustomization: "enableCustomization", showSettingsButton: "showSettingsButton", pageIdentity: "pageIdentity", componentInstanceId: "componentInstanceId" }, outputs: { layoutChange: "layoutChange", pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="pdx-canvas-summary" *ngIf="showSettings() && hasCanvasSummary()">
+      <div class="pdx-canvas-summary__headline">Estrutura da Pagina</div>
+      <div class="pdx-canvas-summary__chips">
+        <span class="pdx-chip pdx-chip--preset" *ngIf="layoutPresetLabel() as label">{{ label }}</span>
+        <span class="pdx-chip pdx-chip--theme" *ngIf="themePresetLabel() as label">{{ label }}</span>
+        <span class="pdx-chip" *ngIf="groupingCount() > 0">{{ groupingCount() }} grupos</span>
+        <span class="pdx-chip" *ngFor="let device of configuredDeviceKinds()">device {{ device }}</span>
+      </div>
+      <div class="pdx-slot-rail" *ngIf="presetSlots().length > 0">
+        <div class="pdx-slot-rail__headline">Slots do preset</div>
+        <div class="pdx-slot-rail__chips">
+          <button
+            type="button"
+            class="pdx-slot-chip"
+            *ngFor="let slot of presetSlots()"
+            [class.pdx-slot-chip--assignable]="canAssignSelectedWidgetToSlot()"
+            [class.pdx-slot-chip--recommended]="isRecommendedSlotForSelectedWidget(slot)"
+            [attr.data-slot-id]="slot.id"
+            [attr.data-slot-occupancy]="slotOccupancy(slot.id)"
+            [disabled]="!canAssignSelectedWidgetToSlot()"
+            (click)="assignSelectedWidgetToSlot(slot.id, $event)"
+          >
+            <span class="pdx-slot-chip__label">{{ slot.label }}</span>
+            <span class="pdx-slot-chip__meta">{{ slotOccupancy(slot.id) }}/{{ slotCapacityLabel(slot) }}</span>
+          </button>
+        </div>
+        <div class="pdx-slot-rail__help" *ngIf="selectedWidgetKey() as key">
+          Widget selecionado: <strong>{{ getWidgetType(key) || key }}</strong>. Clique em um slot para reatribuir o widget dentro do preset.
+        </div>
+      </div>
+    </div>
     <gridster [options]="options" [class.editing]="overlayEnabled && showSettings()" [class.interacting]="overlayEnabled && interacting">
       <gridster-item *ngFor="let it of items(); trackBy: trackItem" [item]="it">
         <div class="pdx-gridster-item mat-elevation-z4"
              [attr.id]="computeTileDomId(it.__key__)"
              [attr.data-widget-key]="it.__key__"
              [attr.data-widget-type]="getWidgetType(it.__key__)"
+             [attr.data-group-count]="widgetGroupingLabels(it.__key__).length"
+             [attr.data-device-count]="widgetDeviceLabels(it.__key__).length"
+             [attr.data-slot-count]="widgetSlotLabels(it.__key__).length"
              [class.selected]="isSelected(it.__key__)"
              (click)="onTileClick(it.__key__, $event)"
              tabindex="0">
@@ -6048,6 +7517,11 @@ class DynamicGridsterPageComponent {
             (settings)="openWidgetSettings(it.__key__)"
             (shell)="openWidgetShellSettings(it.__key__)"
           ></praxis-tile-toolbar>
+          <div class="pdx-tile-meta" *ngIf="showSettings() && hasTileMetadata(it.__key__)">
+            <span class="pdx-tile-chip pdx-tile-chip--slot" *ngFor="let label of widgetSlotLabels(it.__key__)">{{ label }}</span>
+            <span class="pdx-tile-chip pdx-tile-chip--group" *ngFor="let label of widgetGroupingLabels(it.__key__)">{{ label }}</span>
+            <span class="pdx-tile-chip pdx-tile-chip--device" *ngFor="let label of widgetDeviceLabels(it.__key__)">{{ label }}</span>
+          </div>
           <praxis-widget-shell
             [shell]="getWidgetShell(it.__key__)"
             [context]="mergedContext"
@@ -6092,17 +7566,51 @@ class DynamicGridsterPageComponent {
         [adapter]="aiAdapter">
       </praxis-ai-assistant>
     </praxis-floating-toolbar>
-  `, isInline: true, styles: [":host{display:block;position:relative}:host ::ng-deep gridster{position:relative}:host ::ng-deep gridster.editing:before,:host ::ng-deep gridster.interacting:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:0;background-image:radial-gradient(circle at 1px 1px,var(--md-sys-color-outline-variant) 1px,transparent 1px),radial-gradient(circle,var(--md-sys-color-outline-variant) 1px,transparent 1px);background-size:var(--pdx-col-step, 16px) var(--pdx-row-step, 16px),calc(var(--pdx-col-step, 16px) * 4) calc(var(--pdx-row-step, 16px) * 4)}.pdx-gridster-item{position:relative;height: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: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatDialogModule }, { kind: "component", type: FloatingToolbarComponent, selector: "praxis-floating-toolbar", inputs: ["visible", "canUndo", "canRedo"], outputs: ["add", "undo", "redo", "settings", "preview", "connections", "connectionsEdit", "connectionsVisual", "save"] }, { kind: "component", type: TileToolbarComponent, selector: "praxis-tile-toolbar", inputs: ["selected", "widgetType"], outputs: ["remove", "settings", "shell"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }, { kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context"], outputs: ["action"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative}:host ::ng-deep gridster{position:relative}.pdx-canvas-summary{display:grid;gap:8px;margin-bottom:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,white 8%),color-mix(in srgb,var(--md-sys-color-surface-container) 96%,transparent)),radial-gradient(circle at top right,color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),transparent 58%)}.pdx-canvas-summary__headline{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.pdx-canvas-summary__chips,.pdx-tile-meta{display:flex;flex-wrap:wrap;gap:6px}.pdx-slot-rail{display:grid;gap:8px;padding-top:4px}.pdx-slot-rail__headline{font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-slot-rail__chips{display:flex;flex-wrap:wrap;gap:8px}.pdx-slot-rail__help{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.pdx-chip,.pdx-tile-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,white 12%);color:var(--md-sys-color-on-surface)}.pdx-chip--preset,.pdx-tile-chip--group{background:color-mix(in srgb,var(--md-sys-color-primary-container) 86%,white 14%);color:var(--md-sys-color-on-primary-container)}.pdx-chip--theme,.pdx-tile-chip--device{background:color-mix(in srgb,var(--md-sys-color-secondary-container) 86%,white 14%);color:var(--md-sys-color-on-secondary-container)}.pdx-tile-chip--slot{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 86%,white 14%);color:var(--md-sys-color-on-tertiary-container)}.pdx-slot-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 82%,white 18%);color:var(--md-sys-color-on-surface);font:inherit;cursor:default;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-slot-chip--assignable{cursor:pointer;background:color-mix(in srgb,var(--md-sys-color-primary-container) 82%,white 18%);color:var(--md-sys-color-on-primary-container)}.pdx-slot-chip--assignable:hover{transform:translateY(-1px);box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.pdx-slot-chip--recommended{border-color:color-mix(in srgb,var(--md-sys-color-primary) 56%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 28%,transparent)}.pdx-slot-chip__label{font-weight:700}.pdx-slot-chip__meta{font-size:11px;color:inherit;opacity:.82}:host ::ng-deep gridster.editing:before,:host ::ng-deep gridster.interacting:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:0;background-image:radial-gradient(circle at 1px 1px,var(--md-sys-color-outline-variant) 1px,transparent 1px),radial-gradient(circle,var(--md-sys-color-outline-variant) 1px,transparent 1px);background-size:var(--pdx-col-step, 16px) var(--pdx-row-step, 16px),calc(var(--pdx-col-step, 16px) * 4) calc(var(--pdx-row-step, 16px) * 4)}.pdx-gridster-item{position:relative;height:100%}.pdx-tile-meta{position:absolute;top:44px;left:10px;right:10px;z-index:2;pointer-events:none}\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: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatDialogModule }, { kind: "component", type: FloatingToolbarComponent, selector: "praxis-floating-toolbar", inputs: ["visible", "canUndo", "canRedo"], outputs: ["add", "undo", "redo", "settings", "preview", "connections", "connectionsEdit", "connectionsVisual", "save"] }, { kind: "component", type: TileToolbarComponent, selector: "praxis-tile-toolbar", inputs: ["selected", "widgetType"], outputs: ["remove", "settings", "shell"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }, { kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context"], outputs: ["action"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicGridsterPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-dynamic-gridster-page', standalone: true, imports: [CommonModule, GridsterComponent, GridsterItemComponent, DynamicWidgetLoaderDirective, MatButtonModule, MatIconModule, MatDialogModule, FloatingToolbarComponent, TileToolbarComponent, PraxisAiAssistantComponent, WidgetShellComponent], template: `
+    <div class="pdx-canvas-summary" *ngIf="showSettings() && hasCanvasSummary()">
+      <div class="pdx-canvas-summary__headline">Estrutura da Pagina</div>
+      <div class="pdx-canvas-summary__chips">
+        <span class="pdx-chip pdx-chip--preset" *ngIf="layoutPresetLabel() as label">{{ label }}</span>
+        <span class="pdx-chip pdx-chip--theme" *ngIf="themePresetLabel() as label">{{ label }}</span>
+        <span class="pdx-chip" *ngIf="groupingCount() > 0">{{ groupingCount() }} grupos</span>
+        <span class="pdx-chip" *ngFor="let device of configuredDeviceKinds()">device {{ device }}</span>
+      </div>
+      <div class="pdx-slot-rail" *ngIf="presetSlots().length > 0">
+        <div class="pdx-slot-rail__headline">Slots do preset</div>
+        <div class="pdx-slot-rail__chips">
+          <button
+            type="button"
+            class="pdx-slot-chip"
+            *ngFor="let slot of presetSlots()"
+            [class.pdx-slot-chip--assignable]="canAssignSelectedWidgetToSlot()"
+            [class.pdx-slot-chip--recommended]="isRecommendedSlotForSelectedWidget(slot)"
+            [attr.data-slot-id]="slot.id"
+            [attr.data-slot-occupancy]="slotOccupancy(slot.id)"
+            [disabled]="!canAssignSelectedWidgetToSlot()"
+            (click)="assignSelectedWidgetToSlot(slot.id, $event)"
+          >
+            <span class="pdx-slot-chip__label">{{ slot.label }}</span>
+            <span class="pdx-slot-chip__meta">{{ slotOccupancy(slot.id) }}/{{ slotCapacityLabel(slot) }}</span>
+          </button>
+        </div>
+        <div class="pdx-slot-rail__help" *ngIf="selectedWidgetKey() as key">
+          Widget selecionado: <strong>{{ getWidgetType(key) || key }}</strong>. Clique em um slot para reatribuir o widget dentro do preset.
+        </div>
+      </div>
+    </div>
     <gridster [options]="options" [class.editing]="overlayEnabled && showSettings()" [class.interacting]="overlayEnabled && interacting">
       <gridster-item *ngFor="let it of items(); trackBy: trackItem" [item]="it">
         <div class="pdx-gridster-item mat-elevation-z4"
              [attr.id]="computeTileDomId(it.__key__)"
              [attr.data-widget-key]="it.__key__"
              [attr.data-widget-type]="getWidgetType(it.__key__)"
+             [attr.data-group-count]="widgetGroupingLabels(it.__key__).length"
+             [attr.data-device-count]="widgetDeviceLabels(it.__key__).length"
+             [attr.data-slot-count]="widgetSlotLabels(it.__key__).length"
              [class.selected]="isSelected(it.__key__)"
              (click)="onTileClick(it.__key__, $event)"
              tabindex="0">
@@ -6114,6 +7622,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             (settings)="openWidgetSettings(it.__key__)"
             (shell)="openWidgetShellSettings(it.__key__)"
           ></praxis-tile-toolbar>
+          <div class="pdx-tile-meta" *ngIf="showSettings() && hasTileMetadata(it.__key__)">
+            <span class="pdx-tile-chip pdx-tile-chip--slot" *ngFor="let label of widgetSlotLabels(it.__key__)">{{ label }}</span>
+            <span class="pdx-tile-chip pdx-tile-chip--group" *ngFor="let label of widgetGroupingLabels(it.__key__)">{{ label }}</span>
+            <span class="pdx-tile-chip pdx-tile-chip--device" *ngFor="let label of widgetDeviceLabels(it.__key__)">{{ label }}</span>
+          </div>
           <praxis-widget-shell
             [shell]="getWidgetShell(it.__key__)"
             [context]="mergedContext"
@@ -6158,7 +7671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [adapter]="aiAdapter">
       </praxis-ai-assistant>
     </praxis-floating-toolbar>
-  `, styles: [":host{display:block;position:relative}:host ::ng-deep gridster{position:relative}:host ::ng-deep gridster.editing:before,:host ::ng-deep gridster.interacting:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:0;background-image:radial-gradient(circle at 1px 1px,var(--md-sys-color-outline-variant) 1px,transparent 1px),radial-gradient(circle,var(--md-sys-color-outline-variant) 1px,transparent 1px);background-size:var(--pdx-col-step, 16px) var(--pdx-row-step, 16px),calc(var(--pdx-col-step, 16px) * 4) calc(var(--pdx-row-step, 16px) * 4)}.pdx-gridster-item{position:relative;height:100%}\n"] }]
+  `, styles: [":host{display:block;position:relative}:host ::ng-deep gridster{position:relative}.pdx-canvas-summary{display:grid;gap:8px;margin-bottom:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,white 8%),color-mix(in srgb,var(--md-sys-color-surface-container) 96%,transparent)),radial-gradient(circle at top right,color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),transparent 58%)}.pdx-canvas-summary__headline{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.pdx-canvas-summary__chips,.pdx-tile-meta{display:flex;flex-wrap:wrap;gap:6px}.pdx-slot-rail{display:grid;gap:8px;padding-top:4px}.pdx-slot-rail__headline{font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-slot-rail__chips{display:flex;flex-wrap:wrap;gap:8px}.pdx-slot-rail__help{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.pdx-chip,.pdx-tile-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,white 12%);color:var(--md-sys-color-on-surface)}.pdx-chip--preset,.pdx-tile-chip--group{background:color-mix(in srgb,var(--md-sys-color-primary-container) 86%,white 14%);color:var(--md-sys-color-on-primary-container)}.pdx-chip--theme,.pdx-tile-chip--device{background:color-mix(in srgb,var(--md-sys-color-secondary-container) 86%,white 14%);color:var(--md-sys-color-on-secondary-container)}.pdx-tile-chip--slot{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 86%,white 14%);color:var(--md-sys-color-on-tertiary-container)}.pdx-slot-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 82%,white 18%);color:var(--md-sys-color-on-surface);font:inherit;cursor:default;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-slot-chip--assignable{cursor:pointer;background:color-mix(in srgb,var(--md-sys-color-primary-container) 82%,white 18%);color:var(--md-sys-color-on-primary-container)}.pdx-slot-chip--assignable:hover{transform:translateY(-1px);box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.pdx-slot-chip--recommended{border-color:color-mix(in srgb,var(--md-sys-color-primary) 56%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 28%,transparent)}.pdx-slot-chip__label{font-weight:700}.pdx-slot-chip__meta{font-size:11px;color:inherit;opacity:.82}:host ::ng-deep gridster.editing:before,:host ::ng-deep gridster.interacting:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:0;background-image:radial-gradient(circle at 1px 1px,var(--md-sys-color-outline-variant) 1px,transparent 1px),radial-gradient(circle,var(--md-sys-color-outline-variant) 1px,transparent 1px);background-size:var(--pdx-col-step, 16px) var(--pdx-row-step, 16px),calc(var(--pdx-col-step, 16px) * 4) calc(var(--pdx-row-step, 16px) * 4)}.pdx-gridster-item{position:relative;height:100%}.pdx-tile-meta{position:absolute;top:44px;left:10px;right:10px;z-index:2;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ConnectionManagerService }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i1.MatDialog }, { type: GraphMapperService }, { type: i1$1.ComponentMetadataRegistry }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ASYNC_CONFIG_STORAGE]