npm - @praxisui/page-builder - Versions diffs - 10.0.0-rc.31 → 10.0.0-rc.32 - Mend

@praxisui/page-builder 10.0.0-rc.31 → 10.0.0-rc.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/ai/component-registry.json +2 -2
package/fesm2022/praxisui-page-builder.mjs +533 -235
package/package.json +4 -4
package/types/praxisui-page-builder.d.ts +14 -0

package/fesm2022/praxisui-page-builder.mjs CHANGED Viewed

@@ -253,7 +253,7 @@ class FloatingToolbarComponent {
         </div>
       </div>
     }
-    `, isInline: true, styles: [":host{position:absolute;inset:0;pointer-events:none}.pdx-floating-toolbar{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;align-items:center;pointer-events:auto}.pdx-floating-toolbar--connections{top:16px;bottom:auto}.pdx-mode-chip{display:inline-flex;align-items:center;min-height:28px;max-width:148px;padding:3px 9px;border:1px solid rgba(103,80,164,.22);border-radius:999px;background:#ffffffeb;color:#3f2d75;font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 22px #0f172a1f}.pdx-actions{display:flex;gap:8px}.pdx-preview-toggle--active{outline:2px solid rgba(103,80,164,.48);outline-offset:2px}@media(max-width:720px){.pdx-actions{gap:6px}.pdx-floating-toolbar{right:12px;bottom:12px}.pdx-floating-toolbar--connections{top:12px;bottom:auto}.pdx-mode-chip{max-width:112px}}\n"], dependencies: [{ 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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{position:absolute;inset:0;pointer-events:none}.pdx-floating-toolbar{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;align-items:center;pointer-events:auto}.pdx-floating-toolbar--connections{bottom:16px;top:auto}.pdx-mode-chip{display:inline-flex;align-items:center;min-height:28px;max-width:148px;padding:3px 9px;border:1px solid rgba(103,80,164,.22);border-radius:999px;background:#ffffffeb;color:#3f2d75;font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 22px #0f172a1f}.pdx-actions{display:flex;gap:8px}.pdx-preview-toggle--active{outline:2px solid rgba(103,80,164,.48);outline-offset:2px}@media(max-width:720px){.pdx-actions{gap:6px}.pdx-floating-toolbar{right:12px;bottom:12px}.pdx-floating-toolbar--connections{bottom:12px;top:auto}.pdx-mode-chip{max-width:112px}}\n"], dependencies: [{ 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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FloatingToolbarComponent, decorators: [{
             type: Component,
@@ -309,7 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       </div>
     }
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;inset:0;pointer-events:none}.pdx-floating-toolbar{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;align-items:center;pointer-events:auto}.pdx-floating-toolbar--connections{top:16px;bottom:auto}.pdx-mode-chip{display:inline-flex;align-items:center;min-height:28px;max-width:148px;padding:3px 9px;border:1px solid rgba(103,80,164,.22);border-radius:999px;background:#ffffffeb;color:#3f2d75;font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 22px #0f172a1f}.pdx-actions{display:flex;gap:8px}.pdx-preview-toggle--active{outline:2px solid rgba(103,80,164,.48);outline-offset:2px}@media(max-width:720px){.pdx-actions{gap:6px}.pdx-floating-toolbar{right:12px;bottom:12px}.pdx-floating-toolbar--connections{top:12px;bottom:auto}.pdx-mode-chip{max-width:112px}}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;inset:0;pointer-events:none}.pdx-floating-toolbar{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;align-items:center;pointer-events:auto}.pdx-floating-toolbar--connections{bottom:16px;top:auto}.pdx-mode-chip{display:inline-flex;align-items:center;min-height:28px;max-width:148px;padding:3px 9px;border:1px solid rgba(103,80,164,.22);border-radius:999px;background:#ffffffeb;color:#3f2d75;font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 22px #0f172a1f}.pdx-actions{display:flex;gap:8px}.pdx-preview-toggle--active{outline:2px solid rgba(103,80,164,.48);outline-offset:2px}@media(max-width:720px){.pdx-actions{gap:6px}.pdx-floating-toolbar{right:12px;bottom:12px}.pdx-floating-toolbar--connections{bottom:12px;top:auto}.pdx-mode-chip{max-width:112px}}\n"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], canUndo: [{
@@ -1479,6 +1479,14 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     'praxis.pageBuilder.connections.stateName.apply': "Apply name",
     'praxis.pageBuilder.connections.stateName.cancel': "Cancel",
     'praxis.pageBuilder.connections.stateName.edit': "Name page information",
+    'praxis.pageBuilder.editor.state.autoBindAction': "Auto-bind placeholders",
+    'praxis.pageBuilder.editor.state.unbindAction': "Remove binding",
+    'praxis.pageBuilder.editor.state.unboundSuccess': "Removed binding {{widget}}.{{input}} from draft.",
+    'praxis.pageBuilder.editor.state.autoBoundSuccess': "Auto-bound {{count}} widget placeholders to page state in draft.",
+    'praxis.pageBuilder.editor.state.autoBoundNone': "No unbound ${...} widget placeholders matched available state tokens.",
+    'praxis.pageBuilder.palette.initialWidth': "Initial width",
+    'praxis.pageBuilder.palette.keepOpen': "Keep open for multi-insert",
+    'praxis.pageBuilder.palette.done': "Done",
 };
 const PRAXIS_PAGE_BUILDER_PT_BR = {
@@ -2600,6 +2608,14 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     'praxis.pageBuilder.connections.stateName.apply': "Aplicar nome",
     'praxis.pageBuilder.connections.stateName.cancel': "Cancelar",
     'praxis.pageBuilder.connections.stateName.edit': "Nomear informação da página",
+    'praxis.pageBuilder.editor.state.autoBindAction': "Auto-vincular placeholders",
+    'praxis.pageBuilder.editor.state.unbindAction': "Remover vínculo",
+    'praxis.pageBuilder.editor.state.unboundSuccess': "Vínculo {{widget}}.{{input}} removido do rascunho.",
+    'praxis.pageBuilder.editor.state.autoBoundSuccess': "{{count}} placeholders de widgets vinculados ao estado da página no rascunho.",
+    'praxis.pageBuilder.editor.state.autoBoundNone': "Nenhum placeholder ${...} sem vínculo correspondeu aos tokens de estado disponíveis.",
+    'praxis.pageBuilder.palette.initialWidth': "Largura inicial",
+    'praxis.pageBuilder.palette.keepOpen': "Manter aberto para inserção múltipla",
+    'praxis.pageBuilder.palette.done': "Concluir",
 };
 function createPraxisPageBuilderI18nConfig(options = {}) {
@@ -2641,6 +2657,16 @@ class ComponentPaletteDialogComponent {
     data;
     hostElement = inject((ElementRef));
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    selectedColSpan = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedColSpan" }] : /* istanbul ignore next */ []));
+    keepOpen = signal(false, ...(ngDevMode ? [{ debugName: "keepOpen" }] : /* istanbul ignore next */ []));
+    insertedCount = signal(0, ...(ngDevMode ? [{ debugName: "insertedCount" }] : /* istanbul ignore next */ []));
+    spanOptions = [
+        { label: 'Auto', value: undefined },
+        { label: '25% (3 col)', value: 3 },
+        { label: '33% (4 col)', value: 4 },
+        { label: '50% (6 col)', value: 6 },
+        { label: '100% (12 col)', value: 12 },
+    ];
     all = signal([], ...(ngDevMode ? [{ debugName: "all" }] : /* istanbul ignore next */ []));
     filtered = computed(() => this.applyFilters(), ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     density = computed(() => {
@@ -2661,12 +2687,20 @@ class ComponentPaletteDialogComponent {
         this.all.set(this.buildEntries(this.registry.getAll()));
     }
     select(entry) {
-        this.dialogRef.close({
+        const colSpan = this.selectedColSpan();
+        const payload = {
             componentId: entry.componentId,
             ...(entry.presetId ? { presetId: entry.presetId } : {}),
             ...(entry.inputs ? { inputs: JSON.parse(JSON.stringify(entry.inputs)) } : {}),
             ...(entry.shell ? { shell: JSON.parse(JSON.stringify(entry.shell)) } : {}),
-        });
+            ...(typeof colSpan === 'number' ? { colSpan } : {}),
+        };
+        if (this.keepOpen() && typeof this.data?.onInsert === 'function') {
+            this.data.onInsert(payload);
+            this.insertedCount.update((n) => n + 1);
+            return;
+        }
+        this.dialogRef.close(payload);
     }
     handleSearchKeydown(event) {
         if (event.key !== 'ArrowDown')
@@ -2879,6 +2913,39 @@ class ComponentPaletteDialogComponent {
           data-testid="component-palette-search"
           />
       </mat-form-field>
+      <div class="pdx-palette-toolbar" data-testid="component-palette-toolbar">
+        <div class="pdx-palette-span-group" role="group" [attr.aria-label]="tx('palette.initialWidth', 'Largura inicial')">
+          <span class="pdx-palette-toolbar-label">{{ tx('palette.initialWidth', 'Largura inicial') }}:</span>
+          @for (opt of spanOptions; track opt.value) {
+            <button
+              mat-stroked-button
+              type="button"
+              class="pdx-span-chip"
+              [class.selected]="selectedColSpan() === opt.value"
+              [attr.aria-pressed]="selectedColSpan() === opt.value"
+              [attr.data-testid]="'palette-colspan-' + (opt.value ?? 'auto')"
+              (click)="selectedColSpan.set(opt.value)"
+            >
+              {{ opt.label }}
+            </button>
+          }
+        </div>
+        <button
+          mat-stroked-button
+          type="button"
+          class="pdx-keep-open-chip"
+          [class.selected]="keepOpen()"
+          [attr.aria-pressed]="keepOpen()"
+          data-testid="palette-keep-open-toggle"
+          (click)="keepOpen.set(!keepOpen())"
+        >
+          <mat-icon [praxisIcon]="keepOpen() ? 'check_box' : 'check_box_outline_blank'" aria-hidden="true"></mat-icon>
+          {{ tx('palette.keepOpen', 'Manter aberta') }}
+          @if (insertedCount() > 0) {
+            <span class="pdx-inserted-badge" data-testid="palette-inserted-count">+{{ insertedCount() }}</span>
+          }
+        </button>
+      </div>
       @if (filtered().length) {
         <div [class]="'pdx-grid ' + density()">
           @for (entry of filtered(); track trackById($index, entry)) {
@@ -2923,9 +2990,11 @@ class ComponentPaletteDialogComponent {
     </div>
     <div mat-dialog-actions align="end">
-      <button mat-stroked-button color="primary" mat-dialog-close>{{ tx('palette.cancel', 'Cancelar') }}</button>
+      <button mat-stroked-button color="primary" mat-dialog-close data-testid="component-palette-close">
+        {{ insertedCount() > 0 ? tx('palette.done', 'Concluir') : tx('palette.cancel', 'Cancelar') }}
+      </button>
     </div>
-    `, isInline: true, styles: [":host{display:block}h2[mat-dialog-title]{margin:0;padding:12px 24px 10px;border-bottom:1px solid var(--md-sys-color-outline-variant)}.dlg-title{display:flex;align-items:center;gap:10px}.dlg-icon{color:var(--md-sys-color-primary)}.dlg-head{font-size:18px;font-weight:600;line-height:1.2}.dlg-sub{font-size:12px;opacity:.85;color:var(--md-sys-color-on-surface-variant)}.pdx-palette-content{min-width:480px;max-width:920px;padding-top:8px}.pdx-palette-search{width:100%;margin-bottom:12px}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pdx-grid.dense{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-grid.roomy{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.pdx-card{appearance:none;position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:10px;padding:14px;border:1px solid transparent;border-radius:14px;cursor:pointer;outline:none;color:inherit;font:inherit;min-height:92px;text-align:left;background:var(--md-sys-color-surface);border-color:var(--md-sys-color-outline-variant);transition:box-shadow .2s ease,background .25s ease,transform .06s ease}.pdx-grid.dense .pdx-card{padding:10px;border-radius:12px;min-height:84px}.pdx-grid.roomy .pdx-card{padding:16px;border-radius:16px;min-height:100px}.pdx-card:focus,.pdx-card:hover{box-shadow:var(--mat-elevation-level4);background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.pdx-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-card:active{transform:translateY(1px)}.pdx-card-icon{grid-row:span 2;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary)}.pdx-card-title{font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdx-card-desc{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.pdx-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pdx-card-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-highest);font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.01em}.pdx-card-badge mat-icon{width:14px;height:14px;font-size:14px}.pdx-card-badge.ready{color:var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 45%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary-container) 72%,transparent)}.pdx-card-badge.info{color:var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 38%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 68%,transparent)}.pdx-card-badge.warning{color:var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 62%,transparent)}.pdx-empty{padding:24px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);gap:8px}@media(max-width:600px){.pdx-palette-content{min-width:320px}.pdx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:block}h2[mat-dialog-title]{margin:0;padding:12px 24px 10px;border-bottom:1px solid var(--md-sys-color-outline-variant)}.dlg-title{display:flex;align-items:center;gap:10px}.dlg-icon{color:var(--md-sys-color-primary)}.dlg-head{font-size:18px;font-weight:600;line-height:1.2}.dlg-sub{font-size:12px;opacity:.85;color:var(--md-sys-color-on-surface-variant)}.pdx-palette-content{min-width:480px;max-width:920px;padding-top:8px}.pdx-palette-search{width:100%;margin-bottom:8px}.pdx-palette-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.pdx-palette-span-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.pdx-palette-toolbar-label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-span-chip,.pdx-keep-open-chip{min-height:32px;padding:0 10px;font-size:12px;border-radius:999px}.pdx-span-chip.selected,.pdx-keep-open-chip.selected{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-primary)}.pdx-inserted-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px;font-weight:700}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pdx-grid.dense{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-grid.roomy{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.pdx-card{appearance:none;position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:10px;padding:14px;border:1px solid transparent;border-radius:14px;cursor:pointer;outline:none;color:inherit;font:inherit;min-height:92px;text-align:left;background:var(--md-sys-color-surface);border-color:var(--md-sys-color-outline-variant);transition:box-shadow .2s ease,background .25s ease,transform .06s ease}.pdx-grid.dense .pdx-card{padding:10px;border-radius:12px;min-height:84px}.pdx-grid.roomy .pdx-card{padding:16px;border-radius:16px;min-height:100px}.pdx-card:focus,.pdx-card:hover{box-shadow:var(--mat-elevation-level4);background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.pdx-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-card:active{transform:translateY(1px)}.pdx-card-icon{grid-row:span 2;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary)}.pdx-card-title{font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdx-card-desc{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.pdx-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pdx-card-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-highest);font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.01em}.pdx-card-badge mat-icon{width:14px;height:14px;font-size:14px}.pdx-card-badge.ready{color:var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 45%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary-container) 72%,transparent)}.pdx-card-badge.info{color:var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 38%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 68%,transparent)}.pdx-card-badge.warning{color:var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 62%,transparent)}.pdx-empty{padding:24px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);gap:8px}@media(max-width:600px){.pdx-palette-content{min-width:320px}.pdx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComponentPaletteDialogComponent, decorators: [{
             type: Component,
@@ -2953,6 +3022,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           data-testid="component-palette-search"
           />
       </mat-form-field>
+      <div class="pdx-palette-toolbar" data-testid="component-palette-toolbar">
+        <div class="pdx-palette-span-group" role="group" [attr.aria-label]="tx('palette.initialWidth', 'Largura inicial')">
+          <span class="pdx-palette-toolbar-label">{{ tx('palette.initialWidth', 'Largura inicial') }}:</span>
+          @for (opt of spanOptions; track opt.value) {
+            <button
+              mat-stroked-button
+              type="button"
+              class="pdx-span-chip"
+              [class.selected]="selectedColSpan() === opt.value"
+              [attr.aria-pressed]="selectedColSpan() === opt.value"
+              [attr.data-testid]="'palette-colspan-' + (opt.value ?? 'auto')"
+              (click)="selectedColSpan.set(opt.value)"
+            >
+              {{ opt.label }}
+            </button>
+          }
+        </div>
+        <button
+          mat-stroked-button
+          type="button"
+          class="pdx-keep-open-chip"
+          [class.selected]="keepOpen()"
+          [attr.aria-pressed]="keepOpen()"
+          data-testid="palette-keep-open-toggle"
+          (click)="keepOpen.set(!keepOpen())"
+        >
+          <mat-icon [praxisIcon]="keepOpen() ? 'check_box' : 'check_box_outline_blank'" aria-hidden="true"></mat-icon>
+          {{ tx('palette.keepOpen', 'Manter aberta') }}
+          @if (insertedCount() > 0) {
+            <span class="pdx-inserted-badge" data-testid="palette-inserted-count">+{{ insertedCount() }}</span>
+          }
+        </button>
+      </div>
       @if (filtered().length) {
         <div [class]="'pdx-grid ' + density()">
           @for (entry of filtered(); track trackById($index, entry)) {
@@ -2997,9 +3099,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     </div>
     <div mat-dialog-actions align="end">
-      <button mat-stroked-button color="primary" mat-dialog-close>{{ tx('palette.cancel', 'Cancelar') }}</button>
+      <button mat-stroked-button color="primary" mat-dialog-close data-testid="component-palette-close">
+        {{ insertedCount() > 0 ? tx('palette.done', 'Concluir') : tx('palette.cancel', 'Cancelar') }}
+      </button>
     </div>
-    `, providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}h2[mat-dialog-title]{margin:0;padding:12px 24px 10px;border-bottom:1px solid var(--md-sys-color-outline-variant)}.dlg-title{display:flex;align-items:center;gap:10px}.dlg-icon{color:var(--md-sys-color-primary)}.dlg-head{font-size:18px;font-weight:600;line-height:1.2}.dlg-sub{font-size:12px;opacity:.85;color:var(--md-sys-color-on-surface-variant)}.pdx-palette-content{min-width:480px;max-width:920px;padding-top:8px}.pdx-palette-search{width:100%;margin-bottom:12px}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pdx-grid.dense{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-grid.roomy{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.pdx-card{appearance:none;position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:10px;padding:14px;border:1px solid transparent;border-radius:14px;cursor:pointer;outline:none;color:inherit;font:inherit;min-height:92px;text-align:left;background:var(--md-sys-color-surface);border-color:var(--md-sys-color-outline-variant);transition:box-shadow .2s ease,background .25s ease,transform .06s ease}.pdx-grid.dense .pdx-card{padding:10px;border-radius:12px;min-height:84px}.pdx-grid.roomy .pdx-card{padding:16px;border-radius:16px;min-height:100px}.pdx-card:focus,.pdx-card:hover{box-shadow:var(--mat-elevation-level4);background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.pdx-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-card:active{transform:translateY(1px)}.pdx-card-icon{grid-row:span 2;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary)}.pdx-card-title{font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdx-card-desc{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.pdx-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pdx-card-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-highest);font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.01em}.pdx-card-badge mat-icon{width:14px;height:14px;font-size:14px}.pdx-card-badge.ready{color:var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 45%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary-container) 72%,transparent)}.pdx-card-badge.info{color:var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 38%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 68%,transparent)}.pdx-card-badge.warning{color:var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 62%,transparent)}.pdx-empty{padding:24px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);gap:8px}@media(max-width:600px){.pdx-palette-content{min-width:320px}.pdx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}\n"] }]
+    `, providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}h2[mat-dialog-title]{margin:0;padding:12px 24px 10px;border-bottom:1px solid var(--md-sys-color-outline-variant)}.dlg-title{display:flex;align-items:center;gap:10px}.dlg-icon{color:var(--md-sys-color-primary)}.dlg-head{font-size:18px;font-weight:600;line-height:1.2}.dlg-sub{font-size:12px;opacity:.85;color:var(--md-sys-color-on-surface-variant)}.pdx-palette-content{min-width:480px;max-width:920px;padding-top:8px}.pdx-palette-search{width:100%;margin-bottom:8px}.pdx-palette-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.pdx-palette-span-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.pdx-palette-toolbar-label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-span-chip,.pdx-keep-open-chip{min-height:32px;padding:0 10px;font-size:12px;border-radius:999px}.pdx-span-chip.selected,.pdx-keep-open-chip.selected{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-primary)}.pdx-inserted-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px;font-weight:700}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pdx-grid.dense{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-grid.roomy{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.pdx-card{appearance:none;position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:10px;padding:14px;border:1px solid transparent;border-radius:14px;cursor:pointer;outline:none;color:inherit;font:inherit;min-height:92px;text-align:left;background:var(--md-sys-color-surface);border-color:var(--md-sys-color-outline-variant);transition:box-shadow .2s ease,background .25s ease,transform .06s ease}.pdx-grid.dense .pdx-card{padding:10px;border-radius:12px;min-height:84px}.pdx-grid.roomy .pdx-card{padding:16px;border-radius:16px;min-height:100px}.pdx-card:focus,.pdx-card:hover{box-shadow:var(--mat-elevation-level4);background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.pdx-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-card:active{transform:translateY(1px)}.pdx-card-icon{grid-row:span 2;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary)}.pdx-card-title{font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdx-card-desc{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.pdx-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pdx-card-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-highest);font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.01em}.pdx-card-badge mat-icon{width:14px;height:14px;font-size:14px}.pdx-card-badge.ready{color:var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 45%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary-container) 72%,transparent)}.pdx-card-badge.info{color:var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 38%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 68%,transparent)}.pdx-card-badge.warning{color:var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 62%,transparent)}.pdx-empty{padding:24px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);gap:8px}@media(max-width:600px){.pdx-palette-content{min-width:320px}.pdx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i2$2.ComponentMetadataRegistry }, { type: i2$2.PraxisI18nService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5489,6 +5593,244 @@ function clone$3(value) {
     return JSON.parse(JSON.stringify(value));
 }
+const LIMIT_KEYS = ['minColSpan', 'maxColSpan', 'minRowSpan', 'maxRowSpan', 'minHeightPx', 'maxHeightPx'];
+/** Editor projection of Core canvas constraints; never a second persisted document. */
+class CanvasConstraintEditorModel {
+    form = new FormArray([]);
+    targets = [];
+    baseline = { widgets: [] };
+    hydrate(page) {
+        this.form.clear({ emitEvent: false });
+        this.targets = [];
+        this.baseline = structuredClone(page);
+        // Missing variants inherit Core's base canvas. Expose their override controls
+        // without creating persisted blocks until a value is actually edited.
+        const scopes = ['base', 'desktop', 'tablet', 'mobile'];
+        for (const scope of scopes) {
+            for (const [key, item] of Object.entries(page.canvas?.items ?? {})) {
+                const widget = page.widgets.find(candidate => candidate.key === key);
+                const override = scope === 'base' ? undefined : page.deviceLayouts?.[scope]?.canvas?.items?.[key];
+                if (!widget || override?.hidden)
+                    continue;
+                const constraints = scope === 'base' ? item.constraints : override?.constraints;
+                const size = scope === 'base' ? item.contentSize : override?.contentSize;
+                const seed = {
+                    minColSpan: constraints?.minColSpan ?? null, maxColSpan: constraints?.maxColSpan ?? null,
+                    minRowSpan: constraints?.minRowSpan ?? null, maxRowSpan: constraints?.maxRowSpan ?? null,
+                    minHeightPx: constraints?.minHeightPx ?? null, maxHeightPx: constraints?.maxHeightPx ?? null,
+                    heightMode: size === 'auto' ? 'auto' : size ? 'fixed' : 'inherit',
+                    heightPx: size && size !== 'auto' ? size.heightPx : null,
+                    offsetTopPx: size && size !== 'auto' ? size.offsetTopPx ?? 0 : null,
+                };
+                const title = this.resolveFriendlyWidgetTitle(widget, key);
+                this.targets.push({ key, title, scope, seed });
+                this.form.push(new FormGroup({
+                    minColSpan: new FormControl(seed.minColSpan), maxColSpan: new FormControl(seed.maxColSpan),
+                    minRowSpan: new FormControl(seed.minRowSpan), maxRowSpan: new FormControl(seed.maxRowSpan),
+                    minHeightPx: new FormControl(seed.minHeightPx), maxHeightPx: new FormControl(seed.maxHeightPx),
+                    heightMode: new FormControl(seed.heightMode, { nonNullable: true }),
+                    heightPx: new FormControl(seed.heightPx), offsetTopPx: new FormControl(seed.offsetTopPx),
+                }), { emitEvent: false });
+            }
+        }
+    }
+    /** Mutates only the caller's cloned draft, preserving unknown fields and untouched overrides. */
+    apply(page) {
+        for (const group of this.form.controls) {
+            for (const control of Object.values(group.controls)) {
+                const errors = { ...control.errors };
+                delete errors['canvasLimit'];
+                control.setErrors(Object.keys(errors).length ? errors : null, { emitEvent: false });
+            }
+        }
+        for (const [index, target] of this.targets.entries()) {
+            const values = this.form.at(index).getRawValue();
+            const invalidKeys = LIMIT_KEYS.filter(key => values[key] !== null && (!Number.isSafeInteger(values[key]) || values[key] < 1));
+            if (invalidKeys.length) {
+                return this.fail(index, 'integer', invalidKeys);
+            }
+            const heightChanged = values.heightMode !== target.seed.heightMode || values.heightPx !== target.seed.heightPx || values.offsetTopPx !== target.seed.offsetTopPx;
+            if (!heightChanged && !LIMIT_KEYS.some(key => values[key] !== target.seed[key]))
+                continue;
+            const baseItem = page.canvas?.items[target.key];
+            if (!baseItem)
+                continue;
+            const canvas = target.scope === 'base' ? page.canvas :
+                (((page.deviceLayouts ??= {})[target.scope] ??= {}).canvas ??= {});
+            const item = target.scope === 'base' ? baseItem :
+                ((canvas.items ??= {})[target.key] ??= {});
+            if (heightChanged) {
+                if (values.heightMode === 'inherit')
+                    delete item.contentSize;
+                else if (values.heightMode === 'auto')
+                    item.contentSize = 'auto';
+                else {
+                    if (!Number.isSafeInteger(values.heightPx) || values.heightPx < 160 || !Number.isSafeInteger(values.offsetTopPx ?? 0) || (values.offsetTopPx ?? 0) < 0) {
+                        return this.fail(index, 'height', ['heightPx', 'offsetTopPx']);
+                    }
+                    item.contentSize = { heightPx: values.heightPx, offsetTopPx: values.offsetTopPx ?? 0 };
+                }
+            }
+            const constraints = { ...item.constraints };
+            for (const key of LIMIT_KEYS) {
+                if (values[key] === target.seed[key])
+                    continue;
+                if (values[key] === null)
+                    delete constraints[key];
+                else
+                    constraints[key] = values[key];
+            }
+            if (Object.keys(constraints).length)
+                item.constraints = constraints;
+            else
+                delete item.constraints;
+        }
+        for (const [index, target] of this.targets.entries()) {
+            const base = page.canvas?.items[target.key];
+            if (!base)
+                continue;
+            const canvas = target.scope === 'base' ? undefined : page.deviceLayouts?.[target.scope]?.canvas;
+            const override = canvas?.items?.[target.key];
+            const limits = { ...base.constraints, ...override?.constraints };
+            const minHeight = limits.minHeightPx ?? 160;
+            const maxHeight = limits.maxHeightPx ?? Number.MAX_SAFE_INTEGER;
+            if (minHeight < 160 || maxHeight < minHeight)
+                return this.fail(index, 'height', ['minHeightPx', 'maxHeightPx']);
+            const size = override?.contentSize ?? base.contentSize;
+            if (size && size !== 'auto' && (size.heightPx < minHeight || size.heightPx > maxHeight))
+                return this.fail(index, 'height', ['heightPx', 'minHeightPx', 'maxHeightPx']);
+            const columns = canvas?.columns ?? page.canvas.columns;
+            const minCol = limits.minColSpan ?? 1;
+            const maxCol = limits.maxColSpan ?? columns;
+            const minRow = limits.minRowSpan ?? 1;
+            const maxRow = limits.maxRowSpan ?? Number.MAX_SAFE_INTEGER;
+            if (minCol > columns)
+                return this.fail(index, 'columns', ['minColSpan']);
+            if (minCol > maxCol)
+                return this.fail(index, 'range', ['minColSpan', 'maxColSpan']);
+            if (minRow > maxRow)
+                return this.fail(index, 'range', ['minRowSpan', 'maxRowSpan']);
+            const original = this.baseline.canvas?.items[target.key];
+            const originalOverride = target.scope === 'base' ? undefined : this.baseline.deviceLayouts?.[target.scope]?.canvas?.items?.[target.key];
+            const previous = { ...original?.constraints, ...originalOverride?.constraints };
+            // Compare rendered spans under the original and proposed limits, using the
+            // edited grid width in both. Preserve already-clamped source documents.
+            const rawCol = override?.colSpan ?? base.colSpan;
+            const rawRow = override?.rowSpan ?? base.rowSpan;
+            const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+            const oldMinCol = Math.max(1, previous.minColSpan || 1);
+            const oldMinRow = Math.max(1, previous.minRowSpan || 1);
+            const oldCol = clamp(rawCol, oldMinCol, Math.min(columns, Math.max(oldMinCol, previous.maxColSpan || columns)));
+            const oldRow = clamp(rawRow, oldMinRow, Math.max(oldMinRow, previous.maxRowSpan || Number.MAX_SAFE_INTEGER));
+            const widthChanged = LIMIT_KEYS.slice(0, 2).some(key => limits[key] !== previous[key]);
+            const heightChanged = LIMIT_KEYS.slice(2, 4).some(key => limits[key] !== previous[key]);
+            const oldWidthValid = oldMinCol <= columns && oldMinCol <= (previous.maxColSpan ?? columns);
+            const oldHeightValid = oldMinRow <= (previous.maxRowSpan ?? Number.MAX_SAFE_INTEGER);
+            if (widthChanged && oldWidthValid && oldCol !== clamp(rawCol, minCol, Math.min(maxCol, columns))) {
+                return this.fail(index, 'size', ['minColSpan', 'maxColSpan']);
+            }
+            if (heightChanged && oldHeightValid && oldRow !== clamp(rawRow, minRow, maxRow)) {
+                return this.fail(index, 'size', ['minRowSpan', 'maxRowSpan']);
+            }
+        }
+        return null;
+    }
+    fail(index, code, keys) {
+        for (const key of keys) {
+            const control = this.form.at(index).controls[key];
+            control.setErrors({ ...control.errors, canvasLimit: code }, { emitEvent: false });
+        }
+        return { index, code };
+    }
+    displayedSize(index, columns) {
+        const target = this.targets[index];
+        const base = target && this.baseline.canvas?.items[target.key];
+        if (!base)
+            return { width: 1, height: 1 };
+        const override = target.scope === 'base' ? undefined : this.baseline.deviceLayouts?.[target.scope]?.canvas?.items?.[target.key];
+        const limits = { ...base.constraints, ...override?.constraints };
+        const minCol = Math.max(1, limits.minColSpan || 1);
+        const minRow = Math.max(1, limits.minRowSpan || 1);
+        return {
+            width: Math.max(minCol, Math.min(override?.colSpan ?? base.colSpan, columns, Math.max(minCol, limits.maxColSpan || columns))),
+            height: Math.max(minRow, Math.min(override?.rowSpan ?? base.rowSpan, Math.max(minRow, limits.maxRowSpan || Number.MAX_SAFE_INTEGER))),
+        };
+    }
+    resolveFriendlyWidgetTitle(widget, key) {
+        return resolveFriendlyWidgetTitle(widget, key);
+    }
+}
+function resolveFriendlyWidgetTitle(widget, key, options) {
+    const includeKeySuffix = options?.includeKeySuffix !== false;
+    const formatWithKey = (label) => (includeKeySuffix ? `${label} (${key})` : label);
+    const cleanStatic = (candidate) => {
+        if (typeof candidate !== 'string')
+            return '';
+        const trimmed = candidate.trim();
+        return trimmed && !trimmed.includes('${') && !trimmed.includes('{{') ? trimmed : '';
+    };
+    const authoredTitle = cleanStatic(widget.shell?.title);
+    if (authoredTitle) {
+        return authoredTitle;
+    }
+    const definitionTitle = cleanStatic(widget.definition?.title) || cleanStatic(widget.title);
+    if (definitionTitle) {
+        return definitionTitle;
+    }
+    const subtitle = cleanStatic(widget.shell?.subtitle);
+    if (subtitle) {
+        return formatWithKey(subtitle);
+    }
+    const inputs = widget.definition?.inputs && typeof widget.definition.inputs === 'object'
+        ? widget.definition.inputs
+        : null;
+    if (inputs) {
+        const directInputTitle = cleanStatic(inputs['title']) || cleanStatic(inputs['label']);
+        if (directInputTitle) {
+            return formatWithKey(directInputTitle);
+        }
+        for (const nestedKey of ['config', 'chartDocument']) {
+            const nested = inputs[nestedKey];
+            if (nested && typeof nested === 'object') {
+                const nestedTitle = cleanStatic(nested['title']);
+                if (nestedTitle) {
+                    return formatWithKey(nestedTitle);
+                }
+            }
+        }
+        const doc = inputs['document'];
+        if (doc && typeof doc === 'object' && Array.isArray(doc['nodes'])) {
+            const findNodeTitle = (nodes) => {
+                for (const node of nodes) {
+                    if (!node || typeof node !== 'object')
+                        continue;
+                    const rec = node;
+                    const nodeTitle = cleanStatic(rec['title']) ||
+                        cleanStatic(rec['headline']) ||
+                        cleanStatic(rec['label']) ||
+                        (rec['type'] === 'heading' ? cleanStatic(rec['text']) : '');
+                    if (nodeTitle) {
+                        return nodeTitle;
+                    }
+                    for (const childListKey of ['content', 'items', 'children', 'nodes']) {
+                        if (Array.isArray(rec[childListKey])) {
+                            const nested = findNodeTitle(rec[childListKey]);
+                            if (nested)
+                                return nested;
+                        }
+                    }
+                }
+                return '';
+            };
+            const docTitle = findNodeTitle(doc['nodes']);
+            if (docTitle) {
+                return formatWithKey(docTitle);
+            }
+        }
+    }
+    return key;
+}
 const nestedWidgetAccessor = new NestedWidgetConfigAccessor();
 const CONNECTION_EDITOR_STATE_NODE_ID = '__page_state__';
 const CONNECTION_EDITOR_GLOBAL_ACTION_NODE_ID = '__global_actions__';
@@ -5555,7 +5897,10 @@ function deriveConnectionEditorGraph(page, options = {}) {
         }
         return {
             id: widgetId,
-            title: options.widgetTitle?.(widget) || editableText(widget.shell?.title) || widgetId,
+            title: options.widgetTitle?.(widget)
+                || editableText(widget.shell?.title)
+                || resolveFriendlyWidgetTitle(widget, widgetId, { includeKeySuffix: false })
+                || widgetId,
             subtitle: componentType,
             icon: widget.shell?.icon ?? iconForComponentType(componentType),
             x: center.x + Math.cos(angle) * radiusX,
@@ -7507,8 +7852,11 @@ class ConnectionEditorComponent {
         globalActionIds: this.availableGlobalActionIds(),
         widgetTitle: widget => {
             const title = this.i18n.resolve(widget.shell?.title, '').trim();
-            if (title && !title.includes('${'))
+            if (title && !title.includes('${') && !title.includes('{{'))
                 return title;
+            const semanticTitle = resolveFriendlyWidgetTitle(widget, '', { includeKeySuffix: false }).trim();
+            if (semanticTitle)
+                return semanticTitle;
             const metadata = this.componentRegistry.get(widget.definition.id);
             if (!metadata)
                 return widget.key;
@@ -13971,220 +14319,6 @@ function withPagePaddingInline(layout, value) {
     return Object.keys(next).length ? next : undefined;
 }
-const LIMIT_KEYS = ['minColSpan', 'maxColSpan', 'minRowSpan', 'maxRowSpan', 'minHeightPx', 'maxHeightPx'];
-/** Editor projection of Core canvas constraints; never a second persisted document. */
-class CanvasConstraintEditorModel {
-    form = new FormArray([]);
-    targets = [];
-    baseline = { widgets: [] };
-    hydrate(page) {
-        this.form.clear({ emitEvent: false });
-        this.targets = [];
-        this.baseline = structuredClone(page);
-        // Missing variants inherit Core's base canvas. Expose their override controls
-        // without creating persisted blocks until a value is actually edited.
-        const scopes = ['base', 'desktop', 'tablet', 'mobile'];
-        for (const scope of scopes) {
-            for (const [key, item] of Object.entries(page.canvas?.items ?? {})) {
-                const widget = page.widgets.find(candidate => candidate.key === key);
-                const override = scope === 'base' ? undefined : page.deviceLayouts?.[scope]?.canvas?.items?.[key];
-                if (!widget || override?.hidden)
-                    continue;
-                const constraints = scope === 'base' ? item.constraints : override?.constraints;
-                const size = scope === 'base' ? item.contentSize : override?.contentSize;
-                const seed = {
-                    minColSpan: constraints?.minColSpan ?? null, maxColSpan: constraints?.maxColSpan ?? null,
-                    minRowSpan: constraints?.minRowSpan ?? null, maxRowSpan: constraints?.maxRowSpan ?? null,
-                    minHeightPx: constraints?.minHeightPx ?? null, maxHeightPx: constraints?.maxHeightPx ?? null,
-                    heightMode: size === 'auto' ? 'auto' : size ? 'fixed' : 'inherit',
-                    heightPx: size && size !== 'auto' ? size.heightPx : null,
-                    offsetTopPx: size && size !== 'auto' ? size.offsetTopPx ?? 0 : null,
-                };
-                const title = this.resolveFriendlyWidgetTitle(widget, key);
-                this.targets.push({ key, title, scope, seed });
-                this.form.push(new FormGroup({
-                    minColSpan: new FormControl(seed.minColSpan), maxColSpan: new FormControl(seed.maxColSpan),
-                    minRowSpan: new FormControl(seed.minRowSpan), maxRowSpan: new FormControl(seed.maxRowSpan),
-                    minHeightPx: new FormControl(seed.minHeightPx), maxHeightPx: new FormControl(seed.maxHeightPx),
-                    heightMode: new FormControl(seed.heightMode, { nonNullable: true }),
-                    heightPx: new FormControl(seed.heightPx), offsetTopPx: new FormControl(seed.offsetTopPx),
-                }), { emitEvent: false });
-            }
-        }
-    }
-    /** Mutates only the caller's cloned draft, preserving unknown fields and untouched overrides. */
-    apply(page) {
-        for (const group of this.form.controls) {
-            for (const control of Object.values(group.controls)) {
-                const errors = { ...control.errors };
-                delete errors['canvasLimit'];
-                control.setErrors(Object.keys(errors).length ? errors : null, { emitEvent: false });
-            }
-        }
-        for (const [index, target] of this.targets.entries()) {
-            const values = this.form.at(index).getRawValue();
-            const invalidKeys = LIMIT_KEYS.filter(key => values[key] !== null && (!Number.isSafeInteger(values[key]) || values[key] < 1));
-            if (invalidKeys.length) {
-                return this.fail(index, 'integer', invalidKeys);
-            }
-            const heightChanged = values.heightMode !== target.seed.heightMode || values.heightPx !== target.seed.heightPx || values.offsetTopPx !== target.seed.offsetTopPx;
-            if (!heightChanged && !LIMIT_KEYS.some(key => values[key] !== target.seed[key]))
-                continue;
-            const baseItem = page.canvas?.items[target.key];
-            if (!baseItem)
-                continue;
-            const canvas = target.scope === 'base' ? page.canvas :
-                (((page.deviceLayouts ??= {})[target.scope] ??= {}).canvas ??= {});
-            const item = target.scope === 'base' ? baseItem :
-                ((canvas.items ??= {})[target.key] ??= {});
-            if (heightChanged) {
-                if (values.heightMode === 'inherit')
-                    delete item.contentSize;
-                else if (values.heightMode === 'auto')
-                    item.contentSize = 'auto';
-                else {
-                    if (!Number.isSafeInteger(values.heightPx) || values.heightPx < 160 || !Number.isSafeInteger(values.offsetTopPx ?? 0) || (values.offsetTopPx ?? 0) < 0) {
-                        return this.fail(index, 'height', ['heightPx', 'offsetTopPx']);
-                    }
-                    item.contentSize = { heightPx: values.heightPx, offsetTopPx: values.offsetTopPx ?? 0 };
-                }
-            }
-            const constraints = { ...item.constraints };
-            for (const key of LIMIT_KEYS) {
-                if (values[key] === target.seed[key])
-                    continue;
-                if (values[key] === null)
-                    delete constraints[key];
-                else
-                    constraints[key] = values[key];
-            }
-            if (Object.keys(constraints).length)
-                item.constraints = constraints;
-            else
-                delete item.constraints;
-        }
-        for (const [index, target] of this.targets.entries()) {
-            const base = page.canvas?.items[target.key];
-            if (!base)
-                continue;
-            const canvas = target.scope === 'base' ? undefined : page.deviceLayouts?.[target.scope]?.canvas;
-            const override = canvas?.items?.[target.key];
-            const limits = { ...base.constraints, ...override?.constraints };
-            const minHeight = limits.minHeightPx ?? 160;
-            const maxHeight = limits.maxHeightPx ?? Number.MAX_SAFE_INTEGER;
-            if (minHeight < 160 || maxHeight < minHeight)
-                return this.fail(index, 'height', ['minHeightPx', 'maxHeightPx']);
-            const size = override?.contentSize ?? base.contentSize;
-            if (size && size !== 'auto' && (size.heightPx < minHeight || size.heightPx > maxHeight))
-                return this.fail(index, 'height', ['heightPx', 'minHeightPx', 'maxHeightPx']);
-            const columns = canvas?.columns ?? page.canvas.columns;
-            const minCol = limits.minColSpan ?? 1;
-            const maxCol = limits.maxColSpan ?? columns;
-            const minRow = limits.minRowSpan ?? 1;
-            const maxRow = limits.maxRowSpan ?? Number.MAX_SAFE_INTEGER;
-            if (minCol > columns)
-                return this.fail(index, 'columns', ['minColSpan']);
-            if (minCol > maxCol)
-                return this.fail(index, 'range', ['minColSpan', 'maxColSpan']);
-            if (minRow > maxRow)
-                return this.fail(index, 'range', ['minRowSpan', 'maxRowSpan']);
-            const original = this.baseline.canvas?.items[target.key];
-            const originalOverride = target.scope === 'base' ? undefined : this.baseline.deviceLayouts?.[target.scope]?.canvas?.items?.[target.key];
-            const previous = { ...original?.constraints, ...originalOverride?.constraints };
-            // Compare rendered spans under the original and proposed limits, using the
-            // edited grid width in both. Preserve already-clamped source documents.
-            const rawCol = override?.colSpan ?? base.colSpan;
-            const rawRow = override?.rowSpan ?? base.rowSpan;
-            const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-            const oldMinCol = Math.max(1, previous.minColSpan || 1);
-            const oldMinRow = Math.max(1, previous.minRowSpan || 1);
-            const oldCol = clamp(rawCol, oldMinCol, Math.min(columns, Math.max(oldMinCol, previous.maxColSpan || columns)));
-            const oldRow = clamp(rawRow, oldMinRow, Math.max(oldMinRow, previous.maxRowSpan || Number.MAX_SAFE_INTEGER));
-            const widthChanged = LIMIT_KEYS.slice(0, 2).some(key => limits[key] !== previous[key]);
-            const heightChanged = LIMIT_KEYS.slice(2, 4).some(key => limits[key] !== previous[key]);
-            const oldWidthValid = oldMinCol <= columns && oldMinCol <= (previous.maxColSpan ?? columns);
-            const oldHeightValid = oldMinRow <= (previous.maxRowSpan ?? Number.MAX_SAFE_INTEGER);
-            if (widthChanged && oldWidthValid && oldCol !== clamp(rawCol, minCol, Math.min(maxCol, columns))) {
-                return this.fail(index, 'size', ['minColSpan', 'maxColSpan']);
-            }
-            if (heightChanged && oldHeightValid && oldRow !== clamp(rawRow, minRow, maxRow)) {
-                return this.fail(index, 'size', ['minRowSpan', 'maxRowSpan']);
-            }
-        }
-        return null;
-    }
-    fail(index, code, keys) {
-        for (const key of keys) {
-            const control = this.form.at(index).controls[key];
-            control.setErrors({ ...control.errors, canvasLimit: code }, { emitEvent: false });
-        }
-        return { index, code };
-    }
-    displayedSize(index, columns) {
-        const target = this.targets[index];
-        const base = target && this.baseline.canvas?.items[target.key];
-        if (!base)
-            return { width: 1, height: 1 };
-        const override = target.scope === 'base' ? undefined : this.baseline.deviceLayouts?.[target.scope]?.canvas?.items?.[target.key];
-        const limits = { ...base.constraints, ...override?.constraints };
-        const minCol = Math.max(1, limits.minColSpan || 1);
-        const minRow = Math.max(1, limits.minRowSpan || 1);
-        return {
-            width: Math.max(minCol, Math.min(override?.colSpan ?? base.colSpan, columns, Math.max(minCol, limits.maxColSpan || columns))),
-            height: Math.max(minRow, Math.min(override?.rowSpan ?? base.rowSpan, Math.max(minRow, limits.maxRowSpan || Number.MAX_SAFE_INTEGER))),
-        };
-    }
-    resolveFriendlyWidgetTitle(widget, key) {
-        const cleanStatic = (candidate) => {
-            if (typeof candidate !== 'string')
-                return '';
-            const trimmed = candidate.trim();
-            return trimmed && !trimmed.includes('${') ? trimmed : '';
-        };
-        const authoredTitle = cleanStatic(widget.shell?.title);
-        if (authoredTitle) {
-            return authoredTitle;
-        }
-        const subtitle = cleanStatic(widget.shell?.subtitle);
-        if (subtitle) {
-            return `${subtitle} (${key})`;
-        }
-        const inputs = widget.definition?.inputs && typeof widget.definition.inputs === 'object'
-            ? widget.definition.inputs
-            : null;
-        if (inputs) {
-            const directInputTitle = cleanStatic(inputs['title']) || cleanStatic(inputs['label']);
-            if (directInputTitle) {
-                return `${directInputTitle} (${key})`;
-            }
-            for (const nestedKey of ['config', 'chartDocument']) {
-                const nested = inputs[nestedKey];
-                if (nested && typeof nested === 'object') {
-                    const nestedTitle = cleanStatic(nested['title']);
-                    if (nestedTitle) {
-                        return `${nestedTitle} (${key})`;
-                    }
-                }
-            }
-            const doc = inputs['document'];
-            if (doc && typeof doc === 'object' && Array.isArray(doc['nodes'])) {
-                for (const node of doc['nodes']) {
-                    if (!node || typeof node !== 'object')
-                        continue;
-                    const rec = node;
-                    const nodeTitle = cleanStatic(rec['title']) ||
-                        cleanStatic(rec['headline']) ||
-                        cleanStatic(rec['label']);
-                    if (nodeTitle) {
-                        return `${nodeTitle} (${key})`;
-                    }
-                }
-            }
-        }
-        return key;
-    }
-}
 const LAYOUT_PRESET_ENTRIES = Object.values(BUILTIN_PAGE_LAYOUT_PRESETS).map((preset) => ({
     id: preset.id,
     label: preset.label,
@@ -14979,6 +15113,93 @@ class DynamicPageConfigEditorComponent {
         }
         return bindings;
     }
+    unbindStateTokenFromWidget(widgetKey, inputPath) {
+        const targetWidgetKey = String(widgetKey || '').trim();
+        const targetInputPath = String(inputPath || '').trim();
+        if (!targetWidgetKey || !targetInputPath)
+            return false;
+        const widgets = this.clone(this.effectivePageInput().widgets || []);
+        const target = widgets.find((item) => item.key === targetWidgetKey);
+        if (!target)
+            return false;
+        const inputs = this.isPlainObject(target.definition?.inputs)
+            ? target.definition.inputs
+            : this.isPlainObject(target.inputs)
+                ? target.inputs
+                : undefined;
+        if (!inputs || !this.deleteNestedValue(inputs, targetInputPath))
+            return false;
+        if (this.isPlainObject(inputs['context']) && Object.keys(inputs['context']).length === 0) {
+            delete inputs['context'];
+        }
+        this.stagedWidgets = widgets;
+        this.binderMessage.set(this.tx('editor.state.unboundSuccess', 'Removed binding {{widget}}.{{input}} from draft.')
+            .replace('{{widget}}', targetWidgetKey)
+            .replace('{{input}}', targetInputPath));
+        this.refreshPanelState();
+        return true;
+    }
+    autoBindWidgetStatePlaceholders() {
+        const rawTokens = this.availableStateBindingTokens();
+        if (!rawTokens.length)
+            return 0;
+        const tokenPaths = rawTokens
+            .map((token) => token.replace(/^\{\{|\}\}$/g, '').trim())
+            .filter((path) => path.startsWith('state.') && path.length > 'state.'.length);
+        const resolveMatchingStatePath = (placeholderName) => {
+            const clean = placeholderName.replace(/^state\./, '').trim();
+            if (!clean)
+                return null;
+            const exactDerived = `state.derived.${clean}`;
+            if (tokenPaths.includes(exactDerived))
+                return exactDerived;
+            const exactDirect = `state.${clean}`;
+            if (tokenPaths.includes(exactDirect))
+                return exactDirect;
+            const suffixMatches = tokenPaths.filter((candidate) => candidate.endsWith(`.${clean}`));
+            return suffixMatches.length === 1 ? suffixMatches[0] : null;
+        };
+        const widgets = this.clone(this.effectivePageInput().widgets || []);
+        let boundCount = 0;
+        for (const widget of widgets) {
+            const inputs = this.isPlainObject(widget.definition?.inputs)
+                ? widget.definition.inputs
+                : this.isPlainObject(widget.inputs)
+                    ? widget.inputs
+                    : {};
+            if (!Object.keys(inputs).length)
+                continue;
+            const placeholders = new Set();
+            this.collectTemplatePlaceholdersRecursive(inputs, '', placeholders);
+            if (!placeholders.size)
+                continue;
+            widget.definition = widget.definition || { id: widget.componentId || 'praxis-rich-content' };
+            widget.definition.inputs = inputs;
+            for (const placeholder of placeholders) {
+                const matchedStatePath = resolveMatchingStatePath(placeholder);
+                if (!matchedStatePath)
+                    continue;
+                const contextKey = placeholder.split('.').pop();
+                const targetInputPath = `context.${contextKey}`;
+                const existingVal = this.readNestedValue(inputs, targetInputPath);
+                if (typeof existingVal === 'string' && (existingVal.includes('${state.') || existingVal.includes('{{state.'))) {
+                    continue;
+                }
+                this.assignNestedValue(inputs, targetInputPath, `{{${matchedStatePath}}}`);
+                boundCount += 1;
+            }
+        }
+        if (boundCount > 0) {
+            this.stagedWidgets = widgets;
+            this.binderMessage.set(this.tx('editor.state.autoBoundSuccess', 'Auto-bound {{count}} widget placeholders to page state in draft.')
+                .replace('{{count}}', String(boundCount)));
+            this.refreshPanelState();
+        }
+        else {
+            this.binderMessage.set(this.tx('editor.state.autoBoundNone', 'No unbound ${...} widget placeholders matched available state tokens.'));
+        }
+        return boundCount;
+    }
     composeCollectionScreen(overrides) {
         const resourcePath = (overrides?.resourcePath ?? this.composerResourcePathControl.value).trim();
         if (!resourcePath)
@@ -15375,10 +15596,7 @@ class DynamicPageConfigEditorComponent {
         this.refreshPanelState();
     }
     resolveWidgetTitle(widget) {
-        return ((typeof widget.shell?.title === 'string' && widget.shell.title) ||
-            (typeof widget.definition?.title === 'string' && widget.definition.title) ||
-            (typeof widget.title === 'string' && widget.title) ||
-            widget.key);
+        return resolveFriendlyWidgetTitle(widget, widget.key, { includeKeySuffix: false });
     }
     isFilterLinkTargetingWidget(link, widgetKey) {
         const targetWidget = link?.to?.kind === 'component-port' ? link.to.ref.widget : link?.target?.widgetKey;
@@ -16088,10 +16306,64 @@ class DynamicPageConfigEditorComponent {
         }
         cursor[segments[segments.length - 1]] = value;
     }
+    readNestedValue(target, dotPath) {
+        const segments = dotPath.split('.').map((s) => s.trim()).filter(Boolean);
+        let cursor = target;
+        for (const key of segments) {
+            if (!this.isPlainObject(cursor))
+                return undefined;
+            cursor = cursor[key];
+        }
+        return cursor;
+    }
+    deleteNestedValue(target, dotPath) {
+        const segments = dotPath.split('.').map((s) => s.trim()).filter(Boolean);
+        if (!segments.length)
+            return false;
+        let cursor = target;
+        for (let i = 0; i < segments.length - 1; i += 1) {
+            const key = segments[i];
+            if (!this.isPlainObject(cursor[key]))
+                return false;
+            cursor = cursor[key];
+        }
+        const leaf = segments[segments.length - 1];
+        if (!(leaf in cursor))
+            return false;
+        delete cursor[leaf];
+        return true;
+    }
+    collectTemplatePlaceholdersRecursive(value, path, acc) {
+        if (typeof value === 'string') {
+            if (path === 'context' || path.startsWith('context.'))
+                return;
+            const regex = /\$\{([^}]+)\}/g;
+            let match;
+            while ((match = regex.exec(value)) !== null) {
+                const token = match[1].trim();
+                if (token && !token.startsWith('state.')) {
+                    acc.add(token);
+                }
+            }
+            return;
+        }
+        if (Array.isArray(value)) {
+            for (let i = 0; i < value.length; i += 1) {
+                this.collectTemplatePlaceholdersRecursive(value[i], `${path}[${i}]`, acc);
+            }
+            return;
+        }
+        if (this.isPlainObject(value)) {
+            for (const [k, v] of Object.entries(value)) {
+                const nextPath = path ? `${path}.${k}` : k;
+                this.collectTemplatePlaceholdersRecursive(v, nextPath, acc);
+            }
+        }
+    }
     collectWidgetBindingsRecursive(widgetKey, widgetTitle, obj, prefix, acc) {
         for (const [k, v] of Object.entries(obj)) {
             const nextPath = prefix ? `${prefix}.${k}` : k;
-            if (typeof v === 'string' && v.includes('{{state.')) {
+            if (typeof v === 'string' && (v.includes('{{state.') || v.includes('${state.'))) {
                 acc.push({ widgetKey, widgetTitle, inputPath: nextPath, token: v });
             }
             else if (this.isPlainObject(v)) {
@@ -16108,11 +16380,11 @@ class DynamicPageConfigEditorComponent {
     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: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicPageConfigEditorComponent, isStandalone: true, selector: "praxis-dynamic-page-config-editor", inputs: { page: "page", layout: "layout", presets: "presets", pagePreset: "pagePreset" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "refreshRenderedValidation()" } }, providers: [providePraxisPageBuilderI18n()], viewQueries: [{ propertyName: "arrangementFeedback", first: true, predicate: ["arrangementFeedback"], descendants: true }], ngImport: i0, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            @if (duplicateFilterOwners().length) {\n              <section class=\"card filter-owner-banner\" role=\"region\" [attr.aria-label]=\"tx('studio.filterOwnerBannerTitle', 'Duplicate filter region detected')\" data-testid=\"duplicate-filter-owner-banner\">\n                <div class=\"head\">\n                  <strong>{{ tx('studio.filterOwnerBannerTitle', 'Single filter region recommendation') }}</strong>\n                </div>\n                <p class=\"hint\">{{ tx('studio.filterOwnerBannerHelp', 'A table has both its integrated filter bar and an external filter link active. Choose a single query owner to avoid competing filter regions:') }}</p>\n                @for (item of duplicateFilterOwners(); track item.tableKey) {\n                  <div class=\"filter-owner-item\" [attr.data-testid]=\"'duplicate-filter-owner-' + item.tableKey\">\n                    <span><strong>{{ item.tableTitle }}</strong> <code>({{ item.tableKey }})</code> \u2190 {{ item.externalSourceKeys.join(', ') }}</span>\n                    <div class=\"studio-actions\">\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-table-toolbar-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-table-toolbar')\">\n                        {{ tx('studio.keepTableToolbarFilter', 'Use integrated table filter') }}\n                      </button>\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-external-link-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-external-link')\">\n                        {{ tx('studio.keepExternalFilterLink', 'Use external filter bar') }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </section>\n            }\n            <details class=\"card composer-card\" data-testid=\"collection-screen-composer\">\n              <summary>{{ tx('studio.composer.title', 'Guided collection screen composer (5-minute flow)') }}</summary>\n              <p class=\"hint\">{{ tx('studio.composer.help', 'Assemble a complete collection screen with header, KPI indicators, single filter region, primary collection, and optional detail surface in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.resourcePath', 'Resource path') }}</mat-label>\n                  <input matInput [formControl]=\"composerResourcePathControl\" data-testid=\"composer-resource-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.screenTitle', 'Screen title') }}</mat-label>\n                  <input matInput [formControl]=\"composerTitleControl\" data-testid=\"composer-title\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.groupField', 'KPI group-by field') }}</mat-label>\n                  <input matInput [formControl]=\"composerGroupFieldControl\" data-testid=\"composer-group-field\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.filterMode', 'Query filter owner') }}</mat-label>\n                  <mat-select [formControl]=\"composerFilterModeControl\" data-testid=\"composer-filter-mode\">\n                    <mat-option value=\"table-integrated\">{{ tx('studio.composer.filterIntegrated', 'Integrated table toolbar') }}</mat-option>\n                    <mat-option value=\"external-filter-bar\">{{ tx('studio.composer.filterExternal', 'Dedicated filter bar widget') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.collectionKind', 'Primary collection') }}</mat-label>\n                  <mat-select [formControl]=\"composerCollectionKindControl\" data-testid=\"composer-collection-kind\">\n                    <mat-option value=\"table\">praxis-Table</mat-option>\n                    <mat-option value=\"list\">praxis-List</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.detailSurface', 'Secondary detail surface') }}</mat-label>\n                  <mat-select [formControl]=\"composerDetailSurfaceControl\" data-testid=\"composer-detail-surface\">\n                    <mat-option value=\"drawer\">Drawer</mat-option>\n                    <mat-option value=\"modal\">Modal</mat-option>\n                    <mat-option value=\"none\">{{ tx('studio.composer.noSurface', 'None') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-flat-button type=\"button\" data-testid=\"composer-generate-btn\" (click)=\"composeCollectionScreen()\">\n                  <mat-icon aria-hidden=\"true\">auto_awesome</mat-icon>{{ tx('studio.composer.generate', 'Generate collection screen in draft') }}\n                </button>\n              </div>\n              @if (composerMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"composer-status-message\">{{ composerMessage() }}</p>\n              }\n            </details>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (hasCanvasWidgets) {\n              <details class=\"card quick-geometry-card\" data-testid=\"quick-widget-geometry-list\">\n                <summary>{{ tx('studio.quickGeometryTitle', 'Quick widget spans (columns \u00D7 rows)') }}</summary>\n                <div class=\"quick-geometry-rows\">\n                  @for (w of quickCanvasWidgets(); track w.key) {\n                    <div class=\"quick-geometry-row\" [attr.data-testid]=\"'quick-geometry-row-' + w.key\">\n                      <span class=\"quick-geometry-label\"><strong>{{ w.label }}</strong> <small>({{ w.colSpan }}\u00D7{{ w.rowSpan }})</small></span>\n                      <div class=\"studio-actions\">\n                        @for (span of [3, 4, 6, 12]; track span) {\n                          <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'quick-colspan-' + w.key + '-' + span\" (click)=\"setWidgetCanvasSpan(w.key, span)\">{{ span }}c</button>\n                        }\n                        @for (rSpan of [1, 2, 4]; track rSpan) {\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'quick-rowspan-' + w.key + '-' + rSpan\" (click)=\"setWidgetCanvasSpan(w.key, w.colSpan, rSpan)\">{{ rSpan }}r</button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </details>\n            }\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <div class=\"wide guided-presets-bar\" [attr.data-testid]=\"'page-datasource-guided-presets-' + $index\">\n                      <span class=\"hint\">{{ tx('editor.state.guidedPresets', 'Guided query & transform templates:') }}</span>\n                      <div class=\"studio-actions\">\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-groupby-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'group-by', groupByField: 'ativo', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', mappingsText: 'true:active, false:inactive', ratioTargetField: 'activeRatePct', ratioNumeratorField: 'active', ratioDenominatorField: 'total', ratioScale: 100, ratioDecimals: 1 })\">\n                          {{ tx('editor.state.presetGroupByKpi', 'Group-by + Total + Ratio (%)') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-weighted-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', weightedAverageField: 'weightedAvg', weightedAverageDecimals: 2, mappingsText: '1:low, 5:high' })\">\n                          {{ tx('editor.state.presetWeightedAvg', 'Weighted average') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-timeseries-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'timeseries', groupByField: 'createdAt', period: 'month', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'timeseries-last', mappingsText: 'count:latestCount, avg:latestAvg' })\">\n                          {{ tx('editor.state.presetTimeseriesLast', 'Timeseries latest point') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-path-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'path', path: 'totalElements' })\">\n                          {{ tx('editor.state.presetPathExtract', 'Extract path (totalElements)') }}\n                        </button>\n                      </div>\n                    </div>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                  @let preview = getDataSourcePreview($index);\n                  <div class=\"datasource-preview-box\" [attr.data-testid]=\"'page-datasource-preview-' + $index\">\n                    <div class=\"head\">\n                      <strong>{{ tx('editor.state.previewTitle', 'Transform & State Preview') }}</strong>\n                      <span class=\"previous-height-chip\">{{ preview.sourceKind === 'live' ? tx('editor.state.previewLive', 'Live response') : tx('editor.state.previewSample', 'Simulated sample') }}</span>\n                    </div>\n                    @if (preview.status === 'error') {\n                      <p class=\"limits-error\" role=\"alert\" [attr.data-testid]=\"'page-datasource-preview-error-' + $index\">{{ preview.error }}</p>\n                    } @else {\n                      <pre class=\"datasource-preview-json\" [attr.data-testid]=\"'page-datasource-preview-json-' + $index\">{{ preview.formattedJson }}</pre>\n                      @if (preview.tokens.length) {\n                        <div class=\"studio-actions\" [attr.data-testid]=\"'page-datasource-preview-tokens-' + $index\">\n                          <span class=\"hint\">{{ tx('editor.state.availableTokens', 'Click a token to prepare widget binding:') }}</span>\n                          @for (token of preview.tokens; track token) {\n                            <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(token)\"><code>{{ token }}</code></button>\n                          }\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-derived-measures-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.derivedMeasuresTitle', 'Guided Derived Measures') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.derivedMeasuresCopy', 'Create percentages, ratios, weighted averages, or formatted measures from page state paths without writing raw JsonLogic.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedTargetPath', 'Measure key') }}</mat-label>\n                  <input matInput [formControl]=\"derivedPathControl\" placeholder=\"activeRatePct\" data-testid=\"derived-target-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedKind', 'Calculation') }}</mat-label>\n                  <mat-select [formControl]=\"derivedKindControl\" data-testid=\"derived-kind\">\n                    <mat-option value=\"ratio-percent\">{{ tx('editor.state.derivedRatio', 'Ratio / Percentage') }}</mat-option>\n                    <mat-option value=\"weighted-average\">{{ tx('editor.state.derivedWeighted', 'Weighted average') }}</mat-option>\n                    <mat-option value=\"format-value\">{{ tx('editor.state.derivedFormat', 'Formatted value') }}</mat-option>\n                    <mat-option value=\"template\">{{ tx('editor.state.derivedTemplate', 'State reference') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedNumerator', 'Numerator / Source path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedNumeratorControl\" placeholder=\"kpis.active\" data-testid=\"derived-numerator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedDenominator', 'Denominator path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedDenominatorControl\" placeholder=\"kpis.total\" data-testid=\"derived-denominator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedFormatKind', 'Format') }}</mat-label>\n                  <mat-select [formControl]=\"derivedFormatControl\" data-testid=\"derived-format\">\n                    <mat-option value=\"percent\">percent (%)</mat-option>\n                    <mat-option value=\"number\">number</mat-option>\n                    <mat-option value=\"integer\">integer</mat-option>\n                    <mat-option value=\"currency\">currency (R$)</mat-option>\n                    <mat-option value=\"boolean\">boolean</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"derived-add-btn\" (click)=\"addGuidedDerivedMeasure()\">\n                  <mat-icon aria-hidden=\"true\">functions</mat-icon>{{ tx('editor.state.addDerivedAction', 'Add measure to page state') }}\n                </button>\n              </div>\n              @let derivedPreview = getDerivedStatePreview();\n              @if (derivedPreview.entries.length || derivedPreview.diagnostics.length) {\n                <div class=\"datasource-preview-box\" data-testid=\"page-derived-preview\">\n                  @for (diag of derivedPreview.diagnostics; track diag) {\n                    <p class=\"limits-error\" role=\"alert\">{{ diag }}</p>\n                  }\n                  @if (derivedPreview.entries.length) {\n                    <div class=\"studio-actions\">\n                      @for (entry of derivedPreview.entries; track entry.key) {\n                        <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(entry.token)\">\n                          <strong>{{ entry.key }}</strong>: {{ entry.formattedValue }} <code>({{ entry.token }})</code>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-state-component-binder\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.binderTitle', 'Connect State or Measure to Widget') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.binderCopy', 'Bind any state path or derived measure directly to a widget input in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderToken', 'State token') }}</mat-label>\n                  <input matInput [formControl]=\"binderTokenControl\" placeholder=\"{{ '{{state.kpis.total}}' }}\" data-testid=\"binder-token\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderWidget', 'Target widget') }}</mat-label>\n                  <mat-select [formControl]=\"binderWidgetControl\" data-testid=\"binder-widget\">\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\">{{ w.title }} ({{ w.key }})</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderInputPath', 'Widget input path') }}</mat-label>\n                  <input matInput [formControl]=\"binderInputPathControl\" placeholder=\"value\" data-testid=\"binder-input-path\" />\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-bind-btn\" (click)=\"bindStateTokenToWidget()\">\n                  <mat-icon aria-hidden=\"true\">link</mat-icon>{{ tx('editor.state.bindAction', 'Bind token to widget in draft') }}\n                </button>\n              </div>\n              @if (binderMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"binder-status-message\">{{ binderMessage() }}</p>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    <li>\n                      <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                    </li>\n                  }\n                </ul>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}.filter-owner-banner{border-color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.filter-owner-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}.quick-geometry-rows{display:grid;gap:8px}.quick-geometry-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-block:4px;border-bottom:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .2))}.guided-presets-bar{display:grid;gap:6px}.datasource-preview-box{display:grid;gap:8px;padding:12px;border-radius:6px;background:var(--md-sys-color-surface-container, rgba(128, 128, 128, .08))}.datasource-preview-json{margin:0;padding:8px;border-radius:4px;font-size:12px;overflow-x:auto;background:var(--md-sys-color-surface, rgba(0, 0, 0, .04))}\n"], dependencies: [{ kind: "component", type: PagePresetComparisonComponent, selector: "praxis-page-preset-comparison", inputs: ["expanded", "layoutId", "themeId", "layoutPresetOptions", "canvas"], outputs: ["choose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicPageConfigEditorComponent, isStandalone: true, selector: "praxis-dynamic-page-config-editor", inputs: { page: "page", layout: "layout", presets: "presets", pagePreset: "pagePreset" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "refreshRenderedValidation()" } }, providers: [providePraxisPageBuilderI18n()], viewQueries: [{ propertyName: "arrangementFeedback", first: true, predicate: ["arrangementFeedback"], descendants: true }], ngImport: i0, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            @if (duplicateFilterOwners().length) {\n              <section class=\"card filter-owner-banner\" role=\"region\" [attr.aria-label]=\"tx('studio.filterOwnerBannerTitle', 'Duplicate filter region detected')\" data-testid=\"duplicate-filter-owner-banner\">\n                <div class=\"head\">\n                  <strong>{{ tx('studio.filterOwnerBannerTitle', 'Single filter region recommendation') }}</strong>\n                </div>\n                <p class=\"hint\">{{ tx('studio.filterOwnerBannerHelp', 'A table has both its integrated filter bar and an external filter link active. Choose a single query owner to avoid competing filter regions:') }}</p>\n                @for (item of duplicateFilterOwners(); track item.tableKey) {\n                  <div class=\"filter-owner-item\" [attr.data-testid]=\"'duplicate-filter-owner-' + item.tableKey\">\n                    <span><strong>{{ item.tableTitle }}</strong> <code>({{ item.tableKey }})</code> \u2190 {{ item.externalSourceKeys.join(', ') }}</span>\n                    <div class=\"studio-actions\">\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-table-toolbar-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-table-toolbar')\">\n                        {{ tx('studio.keepTableToolbarFilter', 'Use integrated table filter') }}\n                      </button>\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-external-link-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-external-link')\">\n                        {{ tx('studio.keepExternalFilterLink', 'Use external filter bar') }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </section>\n            }\n            <details class=\"card composer-card\" data-testid=\"collection-screen-composer\">\n              <summary>{{ tx('studio.composer.title', 'Guided collection screen composer (5-minute flow)') }}</summary>\n              <p class=\"hint\">{{ tx('studio.composer.help', 'Assemble a complete collection screen with header, KPI indicators, single filter region, primary collection, and optional detail surface in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.resourcePath', 'Resource path') }}</mat-label>\n                  <input matInput [formControl]=\"composerResourcePathControl\" data-testid=\"composer-resource-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.screenTitle', 'Screen title') }}</mat-label>\n                  <input matInput [formControl]=\"composerTitleControl\" data-testid=\"composer-title\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.groupField', 'KPI group-by field') }}</mat-label>\n                  <input matInput [formControl]=\"composerGroupFieldControl\" data-testid=\"composer-group-field\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.filterMode', 'Query filter owner') }}</mat-label>\n                  <mat-select [formControl]=\"composerFilterModeControl\" data-testid=\"composer-filter-mode\">\n                    <mat-option value=\"table-integrated\">{{ tx('studio.composer.filterIntegrated', 'Integrated table toolbar') }}</mat-option>\n                    <mat-option value=\"external-filter-bar\">{{ tx('studio.composer.filterExternal', 'Dedicated filter bar widget') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.collectionKind', 'Primary collection') }}</mat-label>\n                  <mat-select [formControl]=\"composerCollectionKindControl\" data-testid=\"composer-collection-kind\">\n                    <mat-option value=\"table\">praxis-Table</mat-option>\n                    <mat-option value=\"list\">praxis-List</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.detailSurface', 'Secondary detail surface') }}</mat-label>\n                  <mat-select [formControl]=\"composerDetailSurfaceControl\" data-testid=\"composer-detail-surface\">\n                    <mat-option value=\"drawer\">Drawer</mat-option>\n                    <mat-option value=\"modal\">Modal</mat-option>\n                    <mat-option value=\"none\">{{ tx('studio.composer.noSurface', 'None') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-flat-button type=\"button\" data-testid=\"composer-generate-btn\" (click)=\"composeCollectionScreen()\">\n                  <mat-icon aria-hidden=\"true\">auto_awesome</mat-icon>{{ tx('studio.composer.generate', 'Generate collection screen in draft') }}\n                </button>\n              </div>\n              @if (composerMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"composer-status-message\">{{ composerMessage() }}</p>\n              }\n            </details>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (hasCanvasWidgets) {\n              <details class=\"card quick-geometry-card\" data-testid=\"quick-widget-geometry-list\">\n                <summary>{{ tx('studio.quickGeometryTitle', 'Quick widget spans (columns \u00D7 rows)') }}</summary>\n                <div class=\"quick-geometry-rows\">\n                  @for (w of quickCanvasWidgets(); track w.key) {\n                    <div class=\"quick-geometry-row\" [attr.data-testid]=\"'quick-geometry-row-' + w.key\">\n                      <span class=\"quick-geometry-label\"><strong>{{ w.label }}</strong> <small>({{ w.colSpan }}\u00D7{{ w.rowSpan }})</small></span>\n                      <div class=\"studio-actions\">\n                        @for (span of [3, 4, 6, 12]; track span) {\n                          <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'quick-colspan-' + w.key + '-' + span\" (click)=\"setWidgetCanvasSpan(w.key, span)\">{{ span }}c</button>\n                        }\n                        @for (rSpan of [1, 2, 4]; track rSpan) {\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'quick-rowspan-' + w.key + '-' + rSpan\" (click)=\"setWidgetCanvasSpan(w.key, w.colSpan, rSpan)\">{{ rSpan }}r</button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </details>\n            }\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <div class=\"wide guided-presets-bar\" [attr.data-testid]=\"'page-datasource-guided-presets-' + $index\">\n                      <span class=\"hint\">{{ tx('editor.state.guidedPresets', 'Guided query & transform templates:') }}</span>\n                      <div class=\"studio-actions\">\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-groupby-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'group-by', groupByField: 'ativo', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', mappingsText: 'true:active, false:inactive', ratioTargetField: 'activeRatePct', ratioNumeratorField: 'active', ratioDenominatorField: 'total', ratioScale: 100, ratioDecimals: 1 })\">\n                          {{ tx('editor.state.presetGroupByKpi', 'Group-by + Total + Ratio (%)') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-weighted-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', weightedAverageField: 'weightedAvg', weightedAverageDecimals: 2, mappingsText: '1:low, 5:high' })\">\n                          {{ tx('editor.state.presetWeightedAvg', 'Weighted average') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-timeseries-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'timeseries', groupByField: 'createdAt', period: 'month', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'timeseries-last', mappingsText: 'count:latestCount, avg:latestAvg' })\">\n                          {{ tx('editor.state.presetTimeseriesLast', 'Timeseries latest point') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-path-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'path', path: 'totalElements' })\">\n                          {{ tx('editor.state.presetPathExtract', 'Extract path (totalElements)') }}\n                        </button>\n                      </div>\n                    </div>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                  @let preview = getDataSourcePreview($index);\n                  <div class=\"datasource-preview-box\" [attr.data-testid]=\"'page-datasource-preview-' + $index\">\n                    <div class=\"head\">\n                      <strong>{{ tx('editor.state.previewTitle', 'Transform & State Preview') }}</strong>\n                      <span class=\"previous-height-chip\">{{ preview.sourceKind === 'live' ? tx('editor.state.previewLive', 'Live response') : tx('editor.state.previewSample', 'Simulated sample') }}</span>\n                    </div>\n                    @if (preview.status === 'error') {\n                      <p class=\"limits-error\" role=\"alert\" [attr.data-testid]=\"'page-datasource-preview-error-' + $index\">{{ preview.error }}</p>\n                    } @else {\n                      <pre class=\"datasource-preview-json\" [attr.data-testid]=\"'page-datasource-preview-json-' + $index\">{{ preview.formattedJson }}</pre>\n                      @if (preview.tokens.length) {\n                        <div class=\"studio-actions\" [attr.data-testid]=\"'page-datasource-preview-tokens-' + $index\">\n                          <span class=\"hint\">{{ tx('editor.state.availableTokens', 'Click a token to prepare widget binding:') }}</span>\n                          @for (token of preview.tokens; track token) {\n                            <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(token)\"><code>{{ token }}</code></button>\n                          }\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-derived-measures-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.derivedMeasuresTitle', 'Guided Derived Measures') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.derivedMeasuresCopy', 'Create percentages, ratios, weighted averages, or formatted measures from page state paths without writing raw JsonLogic.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedTargetPath', 'Measure key') }}</mat-label>\n                  <input matInput [formControl]=\"derivedPathControl\" placeholder=\"activeRatePct\" data-testid=\"derived-target-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedKind', 'Calculation') }}</mat-label>\n                  <mat-select [formControl]=\"derivedKindControl\" data-testid=\"derived-kind\">\n                    <mat-option value=\"ratio-percent\">{{ tx('editor.state.derivedRatio', 'Ratio / Percentage') }}</mat-option>\n                    <mat-option value=\"weighted-average\">{{ tx('editor.state.derivedWeighted', 'Weighted average') }}</mat-option>\n                    <mat-option value=\"format-value\">{{ tx('editor.state.derivedFormat', 'Formatted value') }}</mat-option>\n                    <mat-option value=\"template\">{{ tx('editor.state.derivedTemplate', 'State reference') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedNumerator', 'Numerator / Source path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedNumeratorControl\" placeholder=\"kpis.active\" data-testid=\"derived-numerator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedDenominator', 'Denominator path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedDenominatorControl\" placeholder=\"kpis.total\" data-testid=\"derived-denominator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedFormatKind', 'Format') }}</mat-label>\n                  <mat-select [formControl]=\"derivedFormatControl\" data-testid=\"derived-format\">\n                    <mat-option value=\"percent\">percent (%)</mat-option>\n                    <mat-option value=\"number\">number</mat-option>\n                    <mat-option value=\"integer\">integer</mat-option>\n                    <mat-option value=\"currency\">currency (R$)</mat-option>\n                    <mat-option value=\"boolean\">boolean</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"derived-add-btn\" (click)=\"addGuidedDerivedMeasure()\">\n                  <mat-icon aria-hidden=\"true\">functions</mat-icon>{{ tx('editor.state.addDerivedAction', 'Add measure to page state') }}\n                </button>\n              </div>\n              @let derivedPreview = getDerivedStatePreview();\n              @if (derivedPreview.entries.length || derivedPreview.diagnostics.length) {\n                <div class=\"datasource-preview-box\" data-testid=\"page-derived-preview\">\n                  @for (diag of derivedPreview.diagnostics; track diag) {\n                    <p class=\"limits-error\" role=\"alert\">{{ diag }}</p>\n                  }\n                  @if (derivedPreview.entries.length) {\n                    <div class=\"studio-actions\">\n                      @for (entry of derivedPreview.entries; track entry.key) {\n                        <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(entry.token)\">\n                          <strong>{{ entry.key }}</strong>: {{ entry.formattedValue }} <code>({{ entry.token }})</code>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-state-component-binder\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.binderTitle', 'Connect State or Measure to Widget') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.binderCopy', 'Bind any state path or derived measure directly to a widget input in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderToken', 'State token') }}</mat-label>\n                  <input matInput [formControl]=\"binderTokenControl\" placeholder=\"{{ '{{state.kpis.total}}' }}\" data-testid=\"binder-token\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderWidget', 'Target widget') }}</mat-label>\n                  <mat-select [formControl]=\"binderWidgetControl\" data-testid=\"binder-widget\">\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\">{{ w.title }} ({{ w.key }})</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderInputPath', 'Widget input path') }}</mat-label>\n                  <input matInput [formControl]=\"binderInputPathControl\" placeholder=\"value\" data-testid=\"binder-input-path\" />\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-bind-btn\" (click)=\"bindStateTokenToWidget()\">\n                  <mat-icon aria-hidden=\"true\">link</mat-icon>{{ tx('editor.state.bindAction', 'Bind token to widget in draft') }}\n                </button>\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-auto-bind-btn\" (click)=\"autoBindWidgetStatePlaceholders()\">\n                  <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>{{ tx('editor.state.autoBindAction', 'Auto-bind ${...} widget placeholders') }}\n                </button>\n              </div>\n              @if (binderMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"binder-status-message\">{{ binderMessage() }}</p>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    <li>\n                      <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                      <button mat-icon-button type=\"button\" [attr.data-testid]=\"'binder-unbind-' + binding.widgetKey + '-' + binding.inputPath\"\n                        [attr.aria-label]=\"tx('editor.state.unbindAction', 'Remove binding')\"\n                        (click)=\"unbindStateTokenFromWidget(binding.widgetKey, binding.inputPath)\">\n                        <mat-icon aria-hidden=\"true\">link_off</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}.filter-owner-banner{border-color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.filter-owner-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}.quick-geometry-rows{display:grid;gap:8px}.quick-geometry-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-block:4px;border-bottom:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .2))}.guided-presets-bar{display:grid;gap:6px}.datasource-preview-box{display:grid;gap:8px;padding:12px;border-radius:6px;background:var(--md-sys-color-surface-container, rgba(128, 128, 128, .08))}.datasource-preview-json{margin:0;padding:8px;border-radius:4px;font-size:12px;overflow-x:auto;background:var(--md-sys-color-surface, rgba(0, 0, 0, .04))}\n"], dependencies: [{ kind: "component", type: PagePresetComparisonComponent, selector: "praxis-page-preset-comparison", inputs: ["expanded", "layoutId", "themeId", "layoutPresetOptions", "canvas"], outputs: ["choose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [PagePresetComparisonComponent, ReactiveFormsModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, MatTooltipModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            @if (duplicateFilterOwners().length) {\n              <section class=\"card filter-owner-banner\" role=\"region\" [attr.aria-label]=\"tx('studio.filterOwnerBannerTitle', 'Duplicate filter region detected')\" data-testid=\"duplicate-filter-owner-banner\">\n                <div class=\"head\">\n                  <strong>{{ tx('studio.filterOwnerBannerTitle', 'Single filter region recommendation') }}</strong>\n                </div>\n                <p class=\"hint\">{{ tx('studio.filterOwnerBannerHelp', 'A table has both its integrated filter bar and an external filter link active. Choose a single query owner to avoid competing filter regions:') }}</p>\n                @for (item of duplicateFilterOwners(); track item.tableKey) {\n                  <div class=\"filter-owner-item\" [attr.data-testid]=\"'duplicate-filter-owner-' + item.tableKey\">\n                    <span><strong>{{ item.tableTitle }}</strong> <code>({{ item.tableKey }})</code> \u2190 {{ item.externalSourceKeys.join(', ') }}</span>\n                    <div class=\"studio-actions\">\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-table-toolbar-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-table-toolbar')\">\n                        {{ tx('studio.keepTableToolbarFilter', 'Use integrated table filter') }}\n                      </button>\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-external-link-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-external-link')\">\n                        {{ tx('studio.keepExternalFilterLink', 'Use external filter bar') }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </section>\n            }\n            <details class=\"card composer-card\" data-testid=\"collection-screen-composer\">\n              <summary>{{ tx('studio.composer.title', 'Guided collection screen composer (5-minute flow)') }}</summary>\n              <p class=\"hint\">{{ tx('studio.composer.help', 'Assemble a complete collection screen with header, KPI indicators, single filter region, primary collection, and optional detail surface in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.resourcePath', 'Resource path') }}</mat-label>\n                  <input matInput [formControl]=\"composerResourcePathControl\" data-testid=\"composer-resource-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.screenTitle', 'Screen title') }}</mat-label>\n                  <input matInput [formControl]=\"composerTitleControl\" data-testid=\"composer-title\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.groupField', 'KPI group-by field') }}</mat-label>\n                  <input matInput [formControl]=\"composerGroupFieldControl\" data-testid=\"composer-group-field\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.filterMode', 'Query filter owner') }}</mat-label>\n                  <mat-select [formControl]=\"composerFilterModeControl\" data-testid=\"composer-filter-mode\">\n                    <mat-option value=\"table-integrated\">{{ tx('studio.composer.filterIntegrated', 'Integrated table toolbar') }}</mat-option>\n                    <mat-option value=\"external-filter-bar\">{{ tx('studio.composer.filterExternal', 'Dedicated filter bar widget') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.collectionKind', 'Primary collection') }}</mat-label>\n                  <mat-select [formControl]=\"composerCollectionKindControl\" data-testid=\"composer-collection-kind\">\n                    <mat-option value=\"table\">praxis-Table</mat-option>\n                    <mat-option value=\"list\">praxis-List</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.detailSurface', 'Secondary detail surface') }}</mat-label>\n                  <mat-select [formControl]=\"composerDetailSurfaceControl\" data-testid=\"composer-detail-surface\">\n                    <mat-option value=\"drawer\">Drawer</mat-option>\n                    <mat-option value=\"modal\">Modal</mat-option>\n                    <mat-option value=\"none\">{{ tx('studio.composer.noSurface', 'None') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-flat-button type=\"button\" data-testid=\"composer-generate-btn\" (click)=\"composeCollectionScreen()\">\n                  <mat-icon aria-hidden=\"true\">auto_awesome</mat-icon>{{ tx('studio.composer.generate', 'Generate collection screen in draft') }}\n                </button>\n              </div>\n              @if (composerMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"composer-status-message\">{{ composerMessage() }}</p>\n              }\n            </details>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (hasCanvasWidgets) {\n              <details class=\"card quick-geometry-card\" data-testid=\"quick-widget-geometry-list\">\n                <summary>{{ tx('studio.quickGeometryTitle', 'Quick widget spans (columns \u00D7 rows)') }}</summary>\n                <div class=\"quick-geometry-rows\">\n                  @for (w of quickCanvasWidgets(); track w.key) {\n                    <div class=\"quick-geometry-row\" [attr.data-testid]=\"'quick-geometry-row-' + w.key\">\n                      <span class=\"quick-geometry-label\"><strong>{{ w.label }}</strong> <small>({{ w.colSpan }}\u00D7{{ w.rowSpan }})</small></span>\n                      <div class=\"studio-actions\">\n                        @for (span of [3, 4, 6, 12]; track span) {\n                          <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'quick-colspan-' + w.key + '-' + span\" (click)=\"setWidgetCanvasSpan(w.key, span)\">{{ span }}c</button>\n                        }\n                        @for (rSpan of [1, 2, 4]; track rSpan) {\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'quick-rowspan-' + w.key + '-' + rSpan\" (click)=\"setWidgetCanvasSpan(w.key, w.colSpan, rSpan)\">{{ rSpan }}r</button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </details>\n            }\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <div class=\"wide guided-presets-bar\" [attr.data-testid]=\"'page-datasource-guided-presets-' + $index\">\n                      <span class=\"hint\">{{ tx('editor.state.guidedPresets', 'Guided query & transform templates:') }}</span>\n                      <div class=\"studio-actions\">\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-groupby-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'group-by', groupByField: 'ativo', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', mappingsText: 'true:active, false:inactive', ratioTargetField: 'activeRatePct', ratioNumeratorField: 'active', ratioDenominatorField: 'total', ratioScale: 100, ratioDecimals: 1 })\">\n                          {{ tx('editor.state.presetGroupByKpi', 'Group-by + Total + Ratio (%)') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-weighted-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', weightedAverageField: 'weightedAvg', weightedAverageDecimals: 2, mappingsText: '1:low, 5:high' })\">\n                          {{ tx('editor.state.presetWeightedAvg', 'Weighted average') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-timeseries-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'timeseries', groupByField: 'createdAt', period: 'month', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'timeseries-last', mappingsText: 'count:latestCount, avg:latestAvg' })\">\n                          {{ tx('editor.state.presetTimeseriesLast', 'Timeseries latest point') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-path-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'path', path: 'totalElements' })\">\n                          {{ tx('editor.state.presetPathExtract', 'Extract path (totalElements)') }}\n                        </button>\n                      </div>\n                    </div>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                  @let preview = getDataSourcePreview($index);\n                  <div class=\"datasource-preview-box\" [attr.data-testid]=\"'page-datasource-preview-' + $index\">\n                    <div class=\"head\">\n                      <strong>{{ tx('editor.state.previewTitle', 'Transform & State Preview') }}</strong>\n                      <span class=\"previous-height-chip\">{{ preview.sourceKind === 'live' ? tx('editor.state.previewLive', 'Live response') : tx('editor.state.previewSample', 'Simulated sample') }}</span>\n                    </div>\n                    @if (preview.status === 'error') {\n                      <p class=\"limits-error\" role=\"alert\" [attr.data-testid]=\"'page-datasource-preview-error-' + $index\">{{ preview.error }}</p>\n                    } @else {\n                      <pre class=\"datasource-preview-json\" [attr.data-testid]=\"'page-datasource-preview-json-' + $index\">{{ preview.formattedJson }}</pre>\n                      @if (preview.tokens.length) {\n                        <div class=\"studio-actions\" [attr.data-testid]=\"'page-datasource-preview-tokens-' + $index\">\n                          <span class=\"hint\">{{ tx('editor.state.availableTokens', 'Click a token to prepare widget binding:') }}</span>\n                          @for (token of preview.tokens; track token) {\n                            <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(token)\"><code>{{ token }}</code></button>\n                          }\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-derived-measures-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.derivedMeasuresTitle', 'Guided Derived Measures') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.derivedMeasuresCopy', 'Create percentages, ratios, weighted averages, or formatted measures from page state paths without writing raw JsonLogic.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedTargetPath', 'Measure key') }}</mat-label>\n                  <input matInput [formControl]=\"derivedPathControl\" placeholder=\"activeRatePct\" data-testid=\"derived-target-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedKind', 'Calculation') }}</mat-label>\n                  <mat-select [formControl]=\"derivedKindControl\" data-testid=\"derived-kind\">\n                    <mat-option value=\"ratio-percent\">{{ tx('editor.state.derivedRatio', 'Ratio / Percentage') }}</mat-option>\n                    <mat-option value=\"weighted-average\">{{ tx('editor.state.derivedWeighted', 'Weighted average') }}</mat-option>\n                    <mat-option value=\"format-value\">{{ tx('editor.state.derivedFormat', 'Formatted value') }}</mat-option>\n                    <mat-option value=\"template\">{{ tx('editor.state.derivedTemplate', 'State reference') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedNumerator', 'Numerator / Source path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedNumeratorControl\" placeholder=\"kpis.active\" data-testid=\"derived-numerator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedDenominator', 'Denominator path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedDenominatorControl\" placeholder=\"kpis.total\" data-testid=\"derived-denominator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedFormatKind', 'Format') }}</mat-label>\n                  <mat-select [formControl]=\"derivedFormatControl\" data-testid=\"derived-format\">\n                    <mat-option value=\"percent\">percent (%)</mat-option>\n                    <mat-option value=\"number\">number</mat-option>\n                    <mat-option value=\"integer\">integer</mat-option>\n                    <mat-option value=\"currency\">currency (R$)</mat-option>\n                    <mat-option value=\"boolean\">boolean</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"derived-add-btn\" (click)=\"addGuidedDerivedMeasure()\">\n                  <mat-icon aria-hidden=\"true\">functions</mat-icon>{{ tx('editor.state.addDerivedAction', 'Add measure to page state') }}\n                </button>\n              </div>\n              @let derivedPreview = getDerivedStatePreview();\n              @if (derivedPreview.entries.length || derivedPreview.diagnostics.length) {\n                <div class=\"datasource-preview-box\" data-testid=\"page-derived-preview\">\n                  @for (diag of derivedPreview.diagnostics; track diag) {\n                    <p class=\"limits-error\" role=\"alert\">{{ diag }}</p>\n                  }\n                  @if (derivedPreview.entries.length) {\n                    <div class=\"studio-actions\">\n                      @for (entry of derivedPreview.entries; track entry.key) {\n                        <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(entry.token)\">\n                          <strong>{{ entry.key }}</strong>: {{ entry.formattedValue }} <code>({{ entry.token }})</code>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-state-component-binder\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.binderTitle', 'Connect State or Measure to Widget') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.binderCopy', 'Bind any state path or derived measure directly to a widget input in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderToken', 'State token') }}</mat-label>\n                  <input matInput [formControl]=\"binderTokenControl\" placeholder=\"{{ '{{state.kpis.total}}' }}\" data-testid=\"binder-token\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderWidget', 'Target widget') }}</mat-label>\n                  <mat-select [formControl]=\"binderWidgetControl\" data-testid=\"binder-widget\">\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\">{{ w.title }} ({{ w.key }})</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderInputPath', 'Widget input path') }}</mat-label>\n                  <input matInput [formControl]=\"binderInputPathControl\" placeholder=\"value\" data-testid=\"binder-input-path\" />\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-bind-btn\" (click)=\"bindStateTokenToWidget()\">\n                  <mat-icon aria-hidden=\"true\">link</mat-icon>{{ tx('editor.state.bindAction', 'Bind token to widget in draft') }}\n                </button>\n              </div>\n              @if (binderMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"binder-status-message\">{{ binderMessage() }}</p>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    <li>\n                      <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                    </li>\n                  }\n                </ul>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}.filter-owner-banner{border-color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.filter-owner-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}.quick-geometry-rows{display:grid;gap:8px}.quick-geometry-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-block:4px;border-bottom:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .2))}.guided-presets-bar{display:grid;gap:6px}.datasource-preview-box{display:grid;gap:8px;padding:12px;border-radius:6px;background:var(--md-sys-color-surface-container, rgba(128, 128, 128, .08))}.datasource-preview-json{margin:0;padding:8px;border-radius:4px;font-size:12px;overflow-x:auto;background:var(--md-sys-color-surface, rgba(0, 0, 0, .04))}\n"] }]
+            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [PagePresetComparisonComponent, ReactiveFormsModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, MatTooltipModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            @if (duplicateFilterOwners().length) {\n              <section class=\"card filter-owner-banner\" role=\"region\" [attr.aria-label]=\"tx('studio.filterOwnerBannerTitle', 'Duplicate filter region detected')\" data-testid=\"duplicate-filter-owner-banner\">\n                <div class=\"head\">\n                  <strong>{{ tx('studio.filterOwnerBannerTitle', 'Single filter region recommendation') }}</strong>\n                </div>\n                <p class=\"hint\">{{ tx('studio.filterOwnerBannerHelp', 'A table has both its integrated filter bar and an external filter link active. Choose a single query owner to avoid competing filter regions:') }}</p>\n                @for (item of duplicateFilterOwners(); track item.tableKey) {\n                  <div class=\"filter-owner-item\" [attr.data-testid]=\"'duplicate-filter-owner-' + item.tableKey\">\n                    <span><strong>{{ item.tableTitle }}</strong> <code>({{ item.tableKey }})</code> \u2190 {{ item.externalSourceKeys.join(', ') }}</span>\n                    <div class=\"studio-actions\">\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-table-toolbar-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-table-toolbar')\">\n                        {{ tx('studio.keepTableToolbarFilter', 'Use integrated table filter') }}\n                      </button>\n                      <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'consolidate-filter-external-link-' + item.tableKey\" (click)=\"consolidateFilterOwnership(item.tableKey, 'keep-external-link')\">\n                        {{ tx('studio.keepExternalFilterLink', 'Use external filter bar') }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </section>\n            }\n            <details class=\"card composer-card\" data-testid=\"collection-screen-composer\">\n              <summary>{{ tx('studio.composer.title', 'Guided collection screen composer (5-minute flow)') }}</summary>\n              <p class=\"hint\">{{ tx('studio.composer.help', 'Assemble a complete collection screen with header, KPI indicators, single filter region, primary collection, and optional detail surface in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.resourcePath', 'Resource path') }}</mat-label>\n                  <input matInput [formControl]=\"composerResourcePathControl\" data-testid=\"composer-resource-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.screenTitle', 'Screen title') }}</mat-label>\n                  <input matInput [formControl]=\"composerTitleControl\" data-testid=\"composer-title\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.groupField', 'KPI group-by field') }}</mat-label>\n                  <input matInput [formControl]=\"composerGroupFieldControl\" data-testid=\"composer-group-field\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.filterMode', 'Query filter owner') }}</mat-label>\n                  <mat-select [formControl]=\"composerFilterModeControl\" data-testid=\"composer-filter-mode\">\n                    <mat-option value=\"table-integrated\">{{ tx('studio.composer.filterIntegrated', 'Integrated table toolbar') }}</mat-option>\n                    <mat-option value=\"external-filter-bar\">{{ tx('studio.composer.filterExternal', 'Dedicated filter bar widget') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.collectionKind', 'Primary collection') }}</mat-label>\n                  <mat-select [formControl]=\"composerCollectionKindControl\" data-testid=\"composer-collection-kind\">\n                    <mat-option value=\"table\">praxis-Table</mat-option>\n                    <mat-option value=\"list\">praxis-List</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('studio.composer.detailSurface', 'Secondary detail surface') }}</mat-label>\n                  <mat-select [formControl]=\"composerDetailSurfaceControl\" data-testid=\"composer-detail-surface\">\n                    <mat-option value=\"drawer\">Drawer</mat-option>\n                    <mat-option value=\"modal\">Modal</mat-option>\n                    <mat-option value=\"none\">{{ tx('studio.composer.noSurface', 'None') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-flat-button type=\"button\" data-testid=\"composer-generate-btn\" (click)=\"composeCollectionScreen()\">\n                  <mat-icon aria-hidden=\"true\">auto_awesome</mat-icon>{{ tx('studio.composer.generate', 'Generate collection screen in draft') }}\n                </button>\n              </div>\n              @if (composerMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"composer-status-message\">{{ composerMessage() }}</p>\n              }\n            </details>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (hasCanvasWidgets) {\n              <details class=\"card quick-geometry-card\" data-testid=\"quick-widget-geometry-list\">\n                <summary>{{ tx('studio.quickGeometryTitle', 'Quick widget spans (columns \u00D7 rows)') }}</summary>\n                <div class=\"quick-geometry-rows\">\n                  @for (w of quickCanvasWidgets(); track w.key) {\n                    <div class=\"quick-geometry-row\" [attr.data-testid]=\"'quick-geometry-row-' + w.key\">\n                      <span class=\"quick-geometry-label\"><strong>{{ w.label }}</strong> <small>({{ w.colSpan }}\u00D7{{ w.rowSpan }})</small></span>\n                      <div class=\"studio-actions\">\n                        @for (span of [3, 4, 6, 12]; track span) {\n                          <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'quick-colspan-' + w.key + '-' + span\" (click)=\"setWidgetCanvasSpan(w.key, span)\">{{ span }}c</button>\n                        }\n                        @for (rSpan of [1, 2, 4]; track rSpan) {\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'quick-rowspan-' + w.key + '-' + rSpan\" (click)=\"setWidgetCanvasSpan(w.key, w.colSpan, rSpan)\">{{ rSpan }}r</button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </details>\n            }\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <div class=\"wide guided-presets-bar\" [attr.data-testid]=\"'page-datasource-guided-presets-' + $index\">\n                      <span class=\"hint\">{{ tx('editor.state.guidedPresets', 'Guided query & transform templates:') }}</span>\n                      <div class=\"studio-actions\">\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-groupby-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'group-by', groupByField: 'ativo', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', mappingsText: 'true:active, false:inactive', ratioTargetField: 'activeRatePct', ratioNumeratorField: 'active', ratioDenominatorField: 'total', ratioScale: 100, ratioDecimals: 1 })\">\n                          {{ tx('editor.state.presetGroupByKpi', 'Group-by + Total + Ratio (%)') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-weighted-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'group-by-map', totalField: 'total', weightedAverageField: 'weightedAvg', weightedAverageDecimals: 2, mappingsText: '1:low, 5:high' })\">\n                          {{ tx('editor.state.presetWeightedAvg', 'Weighted average') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-timeseries-' + $index\" (click)=\"applyGuidedDataSourceQuery($index, { mode: 'timeseries', groupByField: 'createdAt', period: 'month', metricField: 'id', metricOp: 'count' }); applyGuidedDataSourceTransform($index, { kind: 'timeseries-last', mappingsText: 'count:latestCount, avg:latestAvg' })\">\n                          {{ tx('editor.state.presetTimeseriesLast', 'Timeseries latest point') }}\n                        </button>\n                        <button mat-stroked-button type=\"button\" [attr.data-testid]=\"'page-datasource-preset-path-' + $index\" (click)=\"applyGuidedDataSourceTransform($index, { kind: 'path', path: 'totalElements' })\">\n                          {{ tx('editor.state.presetPathExtract', 'Extract path (totalElements)') }}\n                        </button>\n                      </div>\n                    </div>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                  @let preview = getDataSourcePreview($index);\n                  <div class=\"datasource-preview-box\" [attr.data-testid]=\"'page-datasource-preview-' + $index\">\n                    <div class=\"head\">\n                      <strong>{{ tx('editor.state.previewTitle', 'Transform & State Preview') }}</strong>\n                      <span class=\"previous-height-chip\">{{ preview.sourceKind === 'live' ? tx('editor.state.previewLive', 'Live response') : tx('editor.state.previewSample', 'Simulated sample') }}</span>\n                    </div>\n                    @if (preview.status === 'error') {\n                      <p class=\"limits-error\" role=\"alert\" [attr.data-testid]=\"'page-datasource-preview-error-' + $index\">{{ preview.error }}</p>\n                    } @else {\n                      <pre class=\"datasource-preview-json\" [attr.data-testid]=\"'page-datasource-preview-json-' + $index\">{{ preview.formattedJson }}</pre>\n                      @if (preview.tokens.length) {\n                        <div class=\"studio-actions\" [attr.data-testid]=\"'page-datasource-preview-tokens-' + $index\">\n                          <span class=\"hint\">{{ tx('editor.state.availableTokens', 'Click a token to prepare widget binding:') }}</span>\n                          @for (token of preview.tokens; track token) {\n                            <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(token)\"><code>{{ token }}</code></button>\n                          }\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-derived-measures-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.derivedMeasuresTitle', 'Guided Derived Measures') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.derivedMeasuresCopy', 'Create percentages, ratios, weighted averages, or formatted measures from page state paths without writing raw JsonLogic.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedTargetPath', 'Measure key') }}</mat-label>\n                  <input matInput [formControl]=\"derivedPathControl\" placeholder=\"activeRatePct\" data-testid=\"derived-target-path\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedKind', 'Calculation') }}</mat-label>\n                  <mat-select [formControl]=\"derivedKindControl\" data-testid=\"derived-kind\">\n                    <mat-option value=\"ratio-percent\">{{ tx('editor.state.derivedRatio', 'Ratio / Percentage') }}</mat-option>\n                    <mat-option value=\"weighted-average\">{{ tx('editor.state.derivedWeighted', 'Weighted average') }}</mat-option>\n                    <mat-option value=\"format-value\">{{ tx('editor.state.derivedFormat', 'Formatted value') }}</mat-option>\n                    <mat-option value=\"template\">{{ tx('editor.state.derivedTemplate', 'State reference') }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedNumerator', 'Numerator / Source path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedNumeratorControl\" placeholder=\"kpis.active\" data-testid=\"derived-numerator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedDenominator', 'Denominator path') }}</mat-label>\n                  <input matInput [formControl]=\"derivedDenominatorControl\" placeholder=\"kpis.total\" data-testid=\"derived-denominator\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.derivedFormatKind', 'Format') }}</mat-label>\n                  <mat-select [formControl]=\"derivedFormatControl\" data-testid=\"derived-format\">\n                    <mat-option value=\"percent\">percent (%)</mat-option>\n                    <mat-option value=\"number\">number</mat-option>\n                    <mat-option value=\"integer\">integer</mat-option>\n                    <mat-option value=\"currency\">currency (R$)</mat-option>\n                    <mat-option value=\"boolean\">boolean</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"derived-add-btn\" (click)=\"addGuidedDerivedMeasure()\">\n                  <mat-icon aria-hidden=\"true\">functions</mat-icon>{{ tx('editor.state.addDerivedAction', 'Add measure to page state') }}\n                </button>\n              </div>\n              @let derivedPreview = getDerivedStatePreview();\n              @if (derivedPreview.entries.length || derivedPreview.diagnostics.length) {\n                <div class=\"datasource-preview-box\" data-testid=\"page-derived-preview\">\n                  @for (diag of derivedPreview.diagnostics; track diag) {\n                    <p class=\"limits-error\" role=\"alert\">{{ diag }}</p>\n                  }\n                  @if (derivedPreview.entries.length) {\n                    <div class=\"studio-actions\">\n                      @for (entry of derivedPreview.entries; track entry.key) {\n                        <button mat-button type=\"button\" (click)=\"binderTokenControl.setValue(entry.token)\">\n                          <strong>{{ entry.key }}</strong>: {{ entry.formattedValue }} <code>({{ entry.token }})</code>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </section>\n\n            <section class=\"card\" data-testid=\"page-state-component-binder\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.binderTitle', 'Connect State or Measure to Widget') }}</strong>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.binderCopy', 'Bind any state path or derived measure directly to a widget input in the draft.') }}</p>\n              <div class=\"grid\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderToken', 'State token') }}</mat-label>\n                  <input matInput [formControl]=\"binderTokenControl\" placeholder=\"{{ '{{state.kpis.total}}' }}\" data-testid=\"binder-token\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderWidget', 'Target widget') }}</mat-label>\n                  <mat-select [formControl]=\"binderWidgetControl\" data-testid=\"binder-widget\">\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\">{{ w.title }} ({{ w.key }})</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('editor.state.binderInputPath', 'Widget input path') }}</mat-label>\n                  <input matInput [formControl]=\"binderInputPathControl\" placeholder=\"value\" data-testid=\"binder-input-path\" />\n                </mat-form-field>\n              </div>\n              <div class=\"studio-actions\">\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-bind-btn\" (click)=\"bindStateTokenToWidget()\">\n                  <mat-icon aria-hidden=\"true\">link</mat-icon>{{ tx('editor.state.bindAction', 'Bind token to widget in draft') }}\n                </button>\n                <button mat-stroked-button type=\"button\" data-testid=\"binder-auto-bind-btn\" (click)=\"autoBindWidgetStatePlaceholders()\">\n                  <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>{{ tx('editor.state.autoBindAction', 'Auto-bind ${...} widget placeholders') }}\n                </button>\n              </div>\n              @if (binderMessage()) {\n                <p class=\"studio-status\" role=\"status\" data-testid=\"binder-status-message\">{{ binderMessage() }}</p>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    <li>\n                      <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                      <button mat-icon-button type=\"button\" [attr.data-testid]=\"'binder-unbind-' + binding.widgetKey + '-' + binding.inputPath\"\n                        [attr.aria-label]=\"tx('editor.state.unbindAction', 'Remove binding')\"\n                        (click)=\"unbindStateTokenFromWidget(binding.widgetKey, binding.inputPath)\">\n                        <mat-icon aria-hidden=\"true\">link_off</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}.filter-owner-banner{border-color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.filter-owner-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}.quick-geometry-rows{display:grid;gap:8px}.quick-geometry-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-block:4px;border-bottom:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .2))}.guided-presets-bar{display:grid;gap:6px}.datasource-preview-box{display:grid;gap:8px;padding:12px;border-radius:6px;background:var(--md-sys-color-surface-container, rgba(128, 128, 128, .08))}.datasource-preview-json{margin:0;padding:8px;border-radius:4px;font-size:12px;overflow-x:auto;background:var(--md-sys-color-surface, rgba(0, 0, 0, .04))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{
                 type: Input
             }], layout: [{
@@ -28784,6 +29056,7 @@ class DynamicPageBuilderComponent {
                 allowedWidgetIds: this.componentPaletteAllowedWidgetIds || undefined,
                 allowedWidgetTags: this.componentPaletteAllowedWidgetTags || undefined,
                 allowedPresetIds: this.componentPaletteAllowedPresetIds || undefined,
+                onInsert: (selection) => this.addWidget(selection),
             },
         });
         ref.afterClosed().subscribe((selection) => {
@@ -28808,18 +29081,43 @@ class DynamicPageBuilderComponent {
             }];
         next.widgets = widgets;
         if (next.canvas) {
-            const lastRow = Math.max(1, ...Object.values(next.canvas.items || {}).map((item) => (item.row + item.rowSpan) - 1));
+            const existingItems = Object.values(next.canvas.items || {});
+            const lastRow = Math.max(1, ...existingItems.map((item) => (item.row + item.rowSpan) - 1));
             const canvasColumns = Math.max(1, next.canvas.columns || 1);
             const layoutHints = this.layoutHintsFor(type);
-            const colSpan = Math.min(canvasColumns, Math.max(1, layoutHints?.recommendedCols ?? Math.min(4, canvasColumns)));
+            const explicitColSpan = typeof resolved.colSpan === 'number' && Number.isFinite(resolved.colSpan) && resolved.colSpan >= 1
+                ? Math.min(canvasColumns, Math.trunc(resolved.colSpan))
+                : undefined;
+            const colSpan = explicitColSpan ?? Math.min(canvasColumns, Math.max(1, layoutHints?.recommendedCols ?? Math.min(4, canvasColumns)));
             const rowSpan = Math.max(1, layoutHints?.recommendedRows ?? 2);
+            let targetCol = 1;
+            let targetRow = lastRow + 1;
+            if (explicitColSpan !== undefined && existingItems.length > 0) {
+                const overlapsExisting = (col, row) => {
+                    const right = col + colSpan - 1;
+                    const bottom = row + rowSpan - 1;
+                    return existingItems.some((item) => {
+                        const itemRight = item.col + item.colSpan - 1;
+                        const itemBottom = item.row + item.rowSpan - 1;
+                        return col <= itemRight && right >= item.col && row <= itemBottom && bottom >= item.row;
+                    });
+                };
+                const maxStartRow = Math.max(1, ...existingItems.map((item) => item.row));
+                for (let col = 1; col + colSpan - 1 <= canvasColumns; col += 1) {
+                    if (!overlapsExisting(col, maxStartRow)) {
+                        targetCol = col;
+                        targetRow = maxStartRow;
+                        break;
+                    }
+                }
+            }
             next.canvas = {
                 ...next.canvas,
                 items: {
                     ...(next.canvas.items || {}),
                     [key]: {
-                        col: 1,
-                        row: lastRow + 1,
+                        col: targetCol,
+                        row: targetRow,
                         colSpan,
                         rowSpan,
                     },